Friday Frontend: NodeConf Colombia Edition
KBall from ZenDev
CSS & SCSS
Nice look through various approaches to making tables responsive. I kinda love how they change the display mode to flexbox for smaller screens. Then your tabular data still behaves like a table for screen readers & folks with a large screen, but you can move to a much more mobile friendly card-like approach on mobile.
An opinionated post, but a decent summarization of the benefits/arguments for CSS Modules. Doesn’t really go into the technology that much, rather focuses on making the case for adoption and then links off to resources.
Functional CSS, atomic CSS, utility-first CSS… whatever you call it this approach has been getting a lot of buzz recently. I’ve seen people trying Tailwind and loudly stating they’ll never go back. This article pushes back on this trend, highlighting some of the challenges of functional CSS.
The inaugural edition of the ‘State of CSS’ survey has published its data. Brought to you by the same folks who do the ‘State of JS’ survey, it’s not entirely clear how representative their sample is but there’s some very interesting data nonetheless.
I like this article less because of the specific pattern, and more because it takes a deep look at what’s happening under the covers when you use a spread operator. Plus, it talks about operational complexity and uses big O notation, which are rare in the frontend world. :P
There’s a lot of computer science data structures that don’t come up much in frontend development, but trees are something we have in spades. The DOM is a tree, virtual doms are trees, all of our component-based architectures are trees… so this look into some tree-related algorithms using reduce is pretty darned valuable.
Fascinating look through at one of the up-coming features in React. I love how the React team keeps innovating and pushing the ecosystem forward. In this case, it allows dealing with variable network times and asynchronicity in a beautifully simple declarative manner.
I don’t do Angular, but it was interesting reading this and seeing another example of the way innovations are spreading across the ecosystem between frameworks. In particular, this post highlights how the latest version of Angular is enabling dynamic imports and code splitting, as well as functionality like Higher Order Components. Maybe a little late to the party, but it’s getting there.
(Bias alert: I wrote this) There was a lot of conversation and spontaneous memeing around the topic of microfrontends last week, so I wrote a followup piece breaking down the pros and cons of this architectural approach.
Excellent, thorough reference piece for utilizing HTML5’s sectioning elements. If you ever have questions about when to use <nav>, <aside>, <article>, or <section> this will be a great resource to bookmark.
This is something that doesn’t matter most of the time, but when a request comes in to be able to create a downloadable PDF, it’s really nice to know your options.
I’m a huge fan of Google Fonts. By providing a free, easy-to-use set of fonts they have dramatically improved the ability to do interesting things with fonts on the web. But boy can you mess up your performance if you’re not careful. This is a good resource to learn what they do for you… and what you still need to be careful to do in order to keep a performant web site while using Google fonts.