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.
Enjoy!
Best,
KBall from ZenDev
CSS & SCSS
Using a Mixin to Take the Math out of Responsive Font Sizes
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.
Digging Into The Display Property: The Two Values Of Display
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.
How to create clipped, blurred background images in CSS
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.
Creating a full bleed CSS utility
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.
Animation Performance 101: Browser Under the Hood
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.
JavaScript
All you need to know about Promise.all
I’ve heard it said that Promises are one of the most challenging things for new JavaScript developers to wrap their heads around. Promise.all is one of the key features that makes them so much nicer to work with than callbacks, and this article does a solid job explaining it.
Higher-order functions: what they are, and a React example
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.
How to Start Flying with Angular and NgRx
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.
Design patterns in modern JavaScript development
I tend to be a little bit wary of folks talking a lot about design patterns - this is often code for overly complicated structures that are unnecessary in flexible languages like JavaScript, and can be overly intimidating or imply way more required knowledge than there actually is. However, there is still value in recognizing repeated patterns so that you can apply them as appropriate, and the 3 patterns highlighted in this article are indeed patterns that I see over and over again in modern JavaScript development.
Code Sharing with NativeScript-Vue
The dream of javascript-based native app development like React Native or NativeScript is that maybe we can use the same codebase for both our web applications and our native mobile and desktop applications. Possible? Well sort of… this article takes a look at what the state of the art looks like, particularly using Vue and NativeScript.
Other Awesome
Understanding Subresource Integrity
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…
Native image lazy-loading for the web!
This is super exciting! While the tools we use to create lazy-loading images have improved dramatically in
Enforcing accessibility best practices with automatically-generated ids
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).
Web Components will replace your frontend framework
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.
Why Cancel Buttons Should Never Have a Color
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.
Happy Friday!
That's it for this week's Friday Frontend newsletter. If you enjoyed this, you should probably follow me on Twitter or join my mailing list. Sign up to get these newsletters straight to your inbox every Friday! Sign up here: https://zendev.com/friday-frontend.html
Top comments (0)