I can see myself almost certainly needing to use this clever technique at some point so I’m going to squirrel it away now for future me.
An interesting alternative to using the full Vue library, courtesy of Vue’s creator:
petite-vueis an alternative distribution of Vue optimized for progressive enhancement. It provides the same template syntax and reactivity mental model with standard Vue. However, it is specifically optimized for “sprinkling” small amount of interactions on an existing HTML page rendered by a server framework.
And, no, you don’t need to
npm install any of these. Try “vendoring” them instead (that’s copying and pasting to you and me).
I decided to implement almost all of the UI by just adding & removing CSS classes, and using CSS transitions if I want to animate a transition.
Yup. It’s remarkable how much can be accomplished with that one DOM scripting pattern.
I was pretty surprised by how much I could get done with just plain JS. I ended up writing about 50 lines of JS to do everything I wanted to do.
Amber documents a very handy bit of DOM scripting when it comes to debugging focus management:
Here’s a short clear introduction to DOM scripting.
This is a great way to organise code snippets—listed by use case, and searchable too!
Next time you’re stuck on some DOM scripting, before reaching for a framework or library, check here first.
I’m constantly forgetting the difference between the
async attribute and the
defer attribute on
script elements—this is a handy explanation.
HTML lets you create the structure of a website.
CSS lets you make the website look nice.
If you ignore the slightly insulting and condescending clickbaity title, this is a handy run-down of eight browser features with good support:
- extra arguments in
- extra arguments in
defaultCheckedproperty for checkboxes,
wholeTextfor strings of text,
Scott writes up that super smart transclusion trick of his.
Woah! This is one smart hack!
Scott has figured out a way to get all the benefits of pointing to an external SVG file …that then gets embedded. This means you can get all the styling and scripting benefits that only apply to embedded SVGs (like using
The fallback is very graceful indeed: you still get the SVG (just not embedded).
I can never keep these straight—this is going to be a handy reference to keep on hand.
You really don’t need jQuery any more …and that’s thanks to jQuery.
A bold proposal by Heydon to make the process of styling on the web less painful and more scalable. I think it’s got legs, but do we really need another three-letter initialism?
It reminds me of the old jQuery philosophy: find something and do stuff to it.