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.

In the CSS section, make sure you check out the first article showing responsive layouts without media queries. Super cool! There are also a couple performance articles, both in JavaScript and ‘Other Awesome’, and a delightful set of useful tools in the ‘Tiny Helpers’ link.

Enjoy!

Best,
KBall from ZenDev

CSS & SCSS

4 CSS layouts without using media queries

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. :)


Understanding the “Initial”, “Inherit” and “Unset” CSS Keywords

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.


3D Folding Layout Technique for HTML Elements

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!


The CSS Cascade

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!


How to Use the CSS :root Pseudo-Class Selector

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.


JavaScript

Do you know spread operator in Javascript object is mutable?

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.


6 Ways to Unsubscribe from Observables in Angular

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.


10 Ways to Optimize Your React App’s Performance

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.


Vue 3 — The New Store

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.


How YOU can learn to use Svelte for your next JS project

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.


Other Awesomeness

Third-Party Components at Their Best

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!


The “Best” Performance Metrics? Start with These Six

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.


Tiny helpers

A collection of single-purpose useful tools for developers. Grid generators, color palettes, fonts, and much much more. Dig it!


Six donts of web app internationalization

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.


The Web in 2020: Extensibility and Interoperability

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.