Friday Frontend: Jetlagged Out Of My Mind Edition
Sorry in advance for any bad grammar, typos, or bizarre statements in this episode; I’m in Amsterdam for React Amsterdam and jetlagged out of my mind! But that may make things more entertaining as well, who knows. ;)
Anyway, we’ve got a great set of articles for you this week - my favorite was the deep dive on how the display property works behinds the scenes.
KBall from ZenDev
CSS & SCSS
Interesting article breaking down how to use mixins to create responsive font sizes - fonts that scale fluidly up and down within certain boundaries based on screen size, not just media-query based jumps.
Wonderful behind-the-scenes look at what’s going on when you change the
display property. No matter how well you know CSS, you should read this article and it will help you with a better grasp of what’s really going on.
Short and sweet, this shows you how to create a nice “frosted” blur effect useful for card footers, headers over hero images, and other such design patterns.
Another quick-hitter tutorial, this time for creating a utility class that lets images or other content “bust out” of a container and go full-bleed (screen edge to screen edge) on whatever device a user happens to be on.
I love animation (when tastefully applied), and CSS makes it so easy to do. But why do some animations work smooth as butter while others hog a ton of CPU and end up stuttering and introducing problems? This article breaks down what is going on and why some properties are fast to animate while others are slow.
With functional programming becoming so much more common, and higher order components an extremely powerful and frequently used pattern in React, understanding higher order functions is extremely valuable for modern front-end developers. If the term “higher order functions” makes you say “huh, what’s that?”, or “yeah I think I get them but I’m not sure”, this is a good post for you.
I’m not an Angular expert at all, but if I were going to work on a project there I’d definitely want to find a flux architecture solution to let me bring my Redux & Vuex knowledge over and use it well. This post explains NgRx, an open source library that is exactly that.
Great and to the point, this explains a security feature on loading external scripts that I must admit I never fully understood. If you’re loading something from someone else’s server, how do you 100% guarantee that script never changes and starts doing something unexpected or malicious? Enter subresource integrity…
This is super exciting! While the tools we use to create lazy-loading images have improved dramatically in
I love the idea of baking accessibility in at the level of a component library (whether it’s open source or company specific). This approach highlights how simple this can be - and while the example is using React, it should work in any framework (and in fact would feel even more natural in Vue with computed properties).
I disagree a little bit with the author on the premise - in particular I think the declarative model adopted by most modern front end frameworks is far more ergonomic and productive than the imperative approach still required by web components. That said, I am super excited about the potential of web components for creating framework-independent reusable components.
More design than development, but front-end developers often end up making these decisions by default, and we should be aware of the ramifications. I found this a compelling case for colorless cancel buttons.
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!