Friday Frontend: New Media Queries Edition
Hope you had a great week this week! This week in the CSS section we had a couple of articles that jumped out with new media queries and how to use them.
I’m particularly excited to see info about using the
prefers-reduced-motion query in more places, with some very cool opportunities to improve the web automatically for those who struggle with motion.
KBall from ZenDev
CSS & SCSS
Not purely CSS, but did you know that a
picture with a
scrset can base which image it loads off of the
prefers-reduced-motion media query? That’s so cool! I can imagine using this both manually in posts and in an automated manner to provide static fallbacks to animated gifs to protect folks who get photosensitive eleptic seizures.
Step by step tutorial to creating a user-toggleable dark or light mode hinging off of the
prefers-color-schema media query. Not only a good intro to that query, but a great example of how to build themes using css custom properties.
Rundown of the problems with using the
background-image property in most of the places we use it, and guidance on how to use the
picture element to handle most of the situations that led to wanting to use background images in the first place (like cover sizing).
File structure is one of the big “high bang for your buck” choices made in setting up a CSS architecture. This article is a great example of what one long-time CSS & HTML specialist uses for his approach.
A roundup of all the different ways we can approach having “private” variables in a language that doesn’t actually support private variables. Closes with a teaser for the new actually private proposal for private class fields. Of these, I use the module design pattern the most, but they all have their uses.
Computed properties are one of my favorite features of Vue, because they allow you to express your data in what amounts to a declarative approach, not just your templates. You can say “hey here’s how this data is defined” and the framework takes responsibility for keeping it up to date. I love it. This article is a solid introduction to the concept and how they work.
Semantic HTML tags are wonderful for letting you create more accessible applications and web pages. The more you take advantage of these, the more you enable browser & tool vendors to make your content accessible rather than having to do it yourself. I didn’t know about a number of these tags (there’s a tag for abbreviations!?!?) but even being aware of them I will start to use them more.
Announced in a widely applauded talk at JSConf EU, this new federated package manager has been the talk of JS twitter the last few days. Between this and the recent github announcement it looks like we’re looking at a polyglot ecosystem for package managers going forward, but there is a lot to be said for creating a federated approach that isn’t controlled by a for-profit company.
This is great! A super friendly front-end and way to subscribe to essentially “have I been powned” - ie, given my email addresses what services have been hacked that released my info and what exactly was leaked.
Woah - I’d heard about performance budgets, but I wasn’t aware that Lighthouse has tooling to explicitly label what your budget is and catch when you’re exceeding it. Very cool!
That's it for this week's Friday Frontend newsletter. If you enjoyed this, be sure to sign up to get these newsletters straight to your inbox every Friday!