On the #train #slow #wifi, most pages just don't load, load slowly or are just not usable.
Of course, they are bloated and use Megabytes of HTML, CSS, JS to show stuff.
https://seorank.tech the product I am currently working on, no #SPA just #useThePlatform the page you see in the screenshot is probably on of the biggest, making use of browser caching, etc. it loads:
26.299 bytes
to show these data. 26kB just of the pure data, encoded as HTML.
And it was snappy on the slow train wifi.
Oh and the tool shows charts, is interactive, informative and (I hope you agree) clean and slick looking.
All things that one would expect an #SPA to do I believe we do to, just using super fast page loads, tiny download sizes, fast queries in the backend, etc.
How can the average page size be below 20kB if #CSS is already 22kB?
Once #CSS, #JS, #Fonts are loaded once they are cached by the browser, so the #HTML is the only thing that needs to be loaded (again).
One could argue "but you could also just load the data". 💡 Oha, that is exactly what we are doing, just that the data is formatted as HTML (not JSON, or alike) and the browser can render it as is. 🤯
Isn't that amazing?
#useThePlatform at it's best
#noReact #noFramework #progressive
I mean I am here for the #tech too ;).
I was just #measuring all the page sizes that our product loads (not the landing page, the app).
The average page size is less than 20kB.
#JS no page reaches
.. 10kB
#CSS I have not seen it go above
.... 22kB
#fonts this is the biggest, but once loaded they come from browser cache, about
.......... 50kB
#docs the biggest HTML page loaded is
.............. 70kB
(just the HTML!), pagination loads 100 rows
@denniskoch
questioning that is made harder this way.
Maybe not "questioning" but "deciding" or "thinking about" it is made harder this way.
Browsers and #JS have developed so far that there is a lot possible without npm/nodejs or any framework/bundlers around it.
But yeah, that requires a shift of mind.
It should be PicoMPA, instead i named my tiny #progressive #enhancement tools/lib #PicoSPA.
It provides the small functions I use day in and day out on various sites to make an #MPA feel more like an app (or an #SPA).
The latest addition is: nothing.
It is just the smallest polyfill for the `navigate` event, that is loaded when needed, since not all browsers support it.
https://picossg.dev/tools/picospa/navigation.html 👈🏻
`navigation.addEventListener('navigate', ...`
read ☝️ how to pimp an MPA with it.
What do people think about font-size-clamping like so:
font-size: clamp(0.5em, 1vw, 1000em)
to make a font scale with the size of the viewport? I like it somehow, because this allows for using more screen estate when available without breaking e.g. 60em's width and readability. I somehow like to have big screens' width being used when available.
Opinions welcome.
/cc @Lippe
<table style="table-layout: fixed">
has some pretty cool features, esp. if you want stable layout (e.g. to make an MPA feel more SPA-like), here are some:
- the table's width needs to be specified explicitly using the width property
- fixed table layout algorithm is faster than the automatic layout algorithm
- the entire table can be rendered once the first table row has been downloaded and analyzed
see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/table-layout
I showed it yesterday at #ctwebdev in Cologne, but I had to write it down, since it is just no magic, just a different look at the HTML tags of a <table>.
"CSS Bar Chart"
I am concluding this article by:
If HTML (or browsers) say tabular data have to look a certain way it's our responsibility to ask "why not different?".
Done hereby.
Have fun reading, distirbuting, talking about, applying it in your daily work and so on.
And please give me feedback!
At the [c't webdev conference](https://ct-webdev.com/) I showed yesterday that pure HTML, CSS and JS are quite powerful, hence the name of my talk "View Source is Back - Why framework-less matters in 2025 (and beyond)". A part of the live-coding (what I like to do) was turning a plain table into a bar chart using nothing but CSS. It's a tiny trick, but a great reminder of how much raw power the web offers.
"View Source Is Back: Why Framework-Free Matters in 2025" the title of my talk
I was live-coding a couple things,
- simply improving a table with some CSS
- "convert" a <table> into a bar chart, just CSS
- make <details> your navigation
- restoring scroll position
I also mentioned:
- monitorEvents() (non-standard)
- performance.getEntries()
- nested CSS
All for making your (super fast) MPA feel more like an SPA.
Also available at: https://picossg.dev/tools/picospa/
Wolfram wants peace #SEORank