Friday Frontend: January 24th Edition
Hope your week was good! No particular theme stood out to me in this week’s articles, but there were a number I greatly enjoyed.
KBall from ZenDev
CSS & SCSS
Great step by step breakdown of how a simple 13 lines of CSS can create 4 different layout possibilities, responsive to screen size, without a single media query. Flexbox is SO cool. :)
Good fundamentals post, looking at some of the keywords available to you in CSS to “reset” an element’s styles back to where they would be absent other styling.
Woah - This is super cool, and super trippy. Create the illusion of elements bending and folding using multiple elements, hidden overflow, and rotations. Love it!
This is a solid and understandable walk-through of how the CSS cascade works, so if you’re relatively new to CSS, go take a look at it for this reason. But if you’re not new, GO LOOK ANYWAY - on a desktop or laptop - and take a look at the super cool effect the author uses for navigation in the page!
A quick look at the
:root selector. I’ve been seeing this used a lot with CSS Custom Properties, but I’m intrigued by the note in this article that it would allow cross-sharing CSS between SVG and HTML. Anyone used it for this purpose? Shoot me a quick note, I’d love to hear about it.
Highlights a common problem with using the spread operator for copies - it only does a shallow copy! Doesn’t really give a general purpose solution, but does a nice job of helping you understand what’s going on under the hood.
The observable pattern is one of the most interesting things to me about Angular. It’s not unique to Angular, but I don’t know of any other mainstream framework that has gone all in on them the way Angular has. This article’s title is a little misleading - it’s not just about unsubscribing, but really about a variety of ways to use observables.
Performance is a big theme for me this year, and this is a good article to advance that cause for React applications. A set of straightforward, practical steps you can take to improve performance of your React application.
I have mixed feelings about this post, but am including it because it illustrates a really valuable tool from Vue 3. On the one hand, I feel like the author is a little overly negative about Vuex without really fleshing out his arguments, and there’s a slight diatribe feel to his critiques. On the other hand, I love the demonstration of how the new functional breakout in Vue3 makes it super easy to build your own reactive store. Even in Vue2, VueX was built on top of Vue’s reactivity model, but now that model is super easy to import and use for your own purposes.
Solid “zero to example app” style tutorial explaining what Svelte is, pulling together a set of starter resources, and then walking through from the beginning how to create a basic application.
Chris Coyier takes a gander at what makes for good third party components. I agree with him on most counts. Taking something hard and making it easy is a big part of it, handling nuance well (keyboard nav! And ARIA!) is huge. Basically, let me get on to the business problem I’m trying to solve, and don’t force me to be an expert in everything your component is handling!
What to measure is always a challenging question, whether you’re benchmarking business metrics or web app performance. But something is better than nothing, and if you combine this article with last week’s article on pragmatic performance budgets, you’ve got a great starter for measuring performance this year.
A collection of single-purpose useful tools for developers. Grid generators, color palettes, fonts, and much much more. Dig it!
If your application gets popular enough, someday you’ll need to internationalize it. You’ll do yourself a favor if you start incorporating patterns that make it easy to do so from the beginning, and this is a great list to get you started in that direction.
A look at some of the big themes going on in the webdev world right now. I mostly agree with the author here, though I’d put performance (and not just speed) in the list, and not just as a runner up. I think we as a community are just starting to pay attention to all of the different angles of performance and how they impact us.