@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!
"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/
Use It or Miss Out
Free promotion. Free events. Free player highlights.
Free networking with the entire basketball world.
What you do with it? That’s up to you.
#CourtMapping #BasketballOpportunity #UseThePlatform #Don’tMissOut #FreeBasketballTools
So here's what I've been working on since April at Adobe, Project Graph!
https://m.youtube.com/watch?v=wQza2t9Qs64&t=10457s
Built with #webcomponents and #usetheplatform philosophy. Going to be a very exciting time ahead as we build out this platform!
@jmaupetit just briefly looked at it. Which parts are those that breathe fresh air into the web dev?
My background: I am a #django user for many years, JS enthusiast (but rarely on the backend) and fan of #useThePlatform
#CSS #nesting is not that new, but still not well known enough, I believe, so here is the reminder:
CSS nesting is:
- easier to read
- more modular
- more maintainable
- less repeating selectors
- reduced file size
a {
color: black;
&:hover { /* is like: a:hover */
color: red;
}
span { /* is like: a span */
color: green;
}
}
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting
PicoSPA – is a progressive enhancement toolkit, made of a few small functionalities to make a site more interactive and modern without the need to use a full SPA framework.
Wow! You know that #Web #Tech is getting really good when you are able to replace significant amounts of #JavaScript with a few lines of #HTML and #CSS. Best part is the fact that you get #a11y out of the box with native widgets 🙌
A few examples: `<dialog closedby="any">`, stylable `<select>` and even HTML autocomplete/typeahead using the `<datalist>`.
Say hello to #picoSPA. (used to be named #SPAish, but that name was uuuh).
https://picossg.dev/tools/picospa/
PicoSPA is a progressive enhancement toolkit, made of a few small functionalities to make a site more interactive and modern without the need to use a full #SPA framework. It is not a framework, it is a set of tools to enhance your #MPA.
Seems like I am building a `pico`-series :)
https://picossg.dev the #SSG and now the #SPA tool PicoSPA.
@meduz Hmmm, je préfère éviter PostCSS ou tout autre préprocesseur.
Je me fais vieux : je suis depuis quelques temps dans une phase #UseThePlatform. Donc, je me contente de CSS brut et de esbuild pour bundler le tout.
Les boucles Sass me manquent, mais pour le reste, je ne vois pas la moindre différence.
’Tis better to sit on the shoulders of browsers than a pile of your own code #useThePlatform
I enjoyed this article on #vim #minimalism, even though it's a bit too extreme for my taste. I too try to keep my setup as lean and use as much built-in functionality as possible. But I still think syntax highlighting and LSPs are genuinely useful. #LSP feedback should be entirely on-demand of course. And compiling commits with #fugitive is just so much faster and more flexible than with the #git #cli. But apart from that… right on!
#SPAish is far from "having it all" but mostly your MPA (if it is one in the first place, maybe think of switching to it) should be blazingly fast anyways. And SPAish just helps with a couple of lines of #JavaScript to progressively enhance some #UX niceties.
The best thing, it can also be used as a role model on how to extend your page with other tiny helpers you might need.
👉 SPAish 2.0.1 is out 👈🏻
https://picossg.dev/tools/spaish/
SPAish is a progressive enhancement toolkit, made of a few small functionalities to make a site more interactive and modern without the need to use a full SPA framework.
For example:
// Remember+restore opened <details>
spaish.details.reopen();
// Add github-style links left of H1, H2, ...
spaish.section.addAnchors();
// (Re)store scroll positions of page
spaish.scroll.restore();
How many use <details> for navigation?
E.g. when building a <nav> section on the left side of the screen, do you use <details> in there?
If so, what do you think about this:
https://picossg.dev/tools/spaish/details/
Have more use cases? Please share them with me.
