Of course there’s more than that - a super cool article on building responsive grids, per-component theming, some big PWA news, and much much more
KBall from ZenDev
CSS & SCSS
A bite-sized post on how to use CSS filters to change colors on background images. While I’m more of a fan of using injected SVGs to handle this sort of thing (it gives you a lot more power), the super cool thing here is that you can apply CSS filters even when the images are being applied as background images, which opens up a whole new range of possibilities.
Another nice example of how powerful CSS is getting. Having gone through the headache of implementing responsive grid systems before CSS grid before, I love how incredibly simple this problem has become. Implementing a flexible, responsive, and semantic grid in just 50 lines of SCSS? Amazing!
Super cool use case for custom properties: Creating themes that can be applied at the level of components using data attributes. Want to reuse the same components in in different parts of the site with different themes? Merely apply the right attribute. Want to mix and match between themes within the same page? Just as simple. Wow!
There has long been a discrepancy in the Sass world, with the Ruby implementation being canonical (and perpetually ahead), while the C++ version shipped as libsass was used in far more implementations (including probably the widest adopted, node-sass). The 2 have had opposite challenges, with the Ruby implementation being far easier to develop but far harder to use, and the C++ implementation having the opposite problem. Now there’s a new player in the ecosystem, Dart-sass, which appears to have a nice mix of the benefits with fewer of the drawbacks, so the Ruby implementation is going away.
A dive into one of the primary value propositions of frameworks like Angular, React, and Vue: The challenge of keeping a UI in sync with state. A nice explainer of both the major problem and the way in which these frameworks resolve it.
Lin Clark’s cartoon-assisted explainers are not to be missed. She’s done some amazingly enlightening introductions to complex subjects like Firefox’s new CSS engine, and she’s back again with a great overview of ECMAScript modules - what they are, what problems they solve, how they work and how to use them.
The first in a series of 4 articles on using Vue.js with NativeScript to create native mobile applications using Vue. NativeScript has different pros and cons than React Native, but if you’re as excited about Vue as I am, and ever have the desire to dabble in native applications, the ability to use Vue for that domain without the headaches of Cordova (aka phonegap) is incredibly exciting.
A great rundown of the unique features and benefits of newer versions of Firefox. I have to admit I still mostly use Chrome, but I’ve been starting to use Firefox more and more for auxiliary tasks, and have been very happy with its performance to date. Combining the new performance with some wicked-cool development tools and the lack of a corporate overlord who makes money by tracking me… definitely has an appeal.
One of the best ‘how to get started in Frontend development’ posts I’ve seen recently, with a great flow chart and step by step breakdown. For those who are newer to this world, I definitely recommend taking a look through here. It’s also a bit intimidating just how much there is, but the article provides a nice step-by-step approach.
With the latest iOS release, a ton of the underlying technologies enabling PWAs have suddenly arrived on iOS. This article breaks down what exactly is possible, what the differences are between PWAs on iOS as compared to Android, and much more. Go check it out!
A truly deep dive into what makes a table displaying data accessible to those who are using screen readers and other assistive technology, while still making them responsible and beautiful for those using desktop and mobile devices.
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!