Friday Frontend: Failure Modes Edition
I hope you had a great holiday weekend and an amazing week! On top of the Thanksgiving celebrations it was my birthday this last weekend, so lots of great food, friends, and family all around. I love coming back from a holiday - I’m so much more energized during the week.
This week’s newsletter highlights a few different types of failures - the biggest being a failure in how we manage dependencies in open source that manifested in the event-stream hack. And second a great ‘what if’ article looking at some really crazy failure modes developers have gotten themselves into forgetting that web requests are unreliable.
There’s also your regular mix if exploratory, educational, and other great front-end material. Enjoy!
KBall from ZenDev
CSS & SCSS
Hacking CSS writing mode
Super fun exploration of what you can create by tinkering around with the
writing-mode CSS property, especially when combined with some simple CSS transforms. Love it!
Separators Inside <select>
An interesting look at options available to you to create visual separators inside of a select tag. Some weird, some okay, but overall pretty limited, honestly. Any time the final recommendation is “no really change the design, we can’t build this” you know you’ve stumbled across an edgecase. I wonder if this would be worth trying to get on the WHATWG’s radar as something to improve in HTML
How to understand CSS Position Absolute once and for all
The Complete Beginner's Guide to Sass
This is a great introduction that covers all of the major features of Sass. If for some reason you are still writing CSS without Sass or another preprocessor… or you just got started with Sass/SCSS and are not already super comfortable, this article is a great place to get your bearings on what Sass has to offer.
Responsive Images on the Apple Watch
Rendering a webpage on the face of a watch seems like taking things to a ridiculous extreme, but that is now possible with the Apple Watch browser. This post takes a look at what are some of the techniques and considerations needed to stretch responsiveness down to this extreme edge.
Web workers vs Service workers vs Worklets
JSX is syntactic sugar
JSX started out as being extremely polarizing, and to this day has fans and detractors. One thing that is super helpful is realizing that JSX is not templating, but rather a domain specific language that is syntactic sugar on top of a series of function call. This post digs into that and shows you what a hypothetical JSX compiler could look like.
Testing React Components with Jest and Enzyme- In Depth
Testing front-end components has gotten a ton easier in the last few years, to the point that there really isn’t much of an excuse for not doing front-end testing. What I like about this article is that it not only shows examples of writing tests, but talks through the process of how you decide what to test, and in what order.
A Vue from Ionic
This is really interesting for a couple of reasons. First, for those who aren’t aware - Ionic is a mobile app UI kit & set of builtin services and utilities intended to make it very easy to make mobile applications with web technologies. It builds on top of Cordova/phonegap with a set of easy-to-use components and pluggable services. And historically it has been Angular only. This announcement is their first move to support multiple frameworks (interesting that they chose Vue instead of React for the 2nd). It’s also another option on top of nativescript-vue for building native mobile apps with Vue. Very very interesting.
Details about the event-stream incident
A very clever social-engineering attack was uncovered his week that echoed shades of the infamous Hackernoon ‘harvesting credit cards’ post from earlier this year. The attack appears to have particularly targeted the Copay crypto-wallet application, though before that was figured out all sorts of libraries (including all the major frontend framework CLIs) were advising reinstalls to avoid the impacted dependencies. Worth reading about even if you weren’t impacted, as it brings up a lot of very important questions of how we manage open source dependencies.
Front-End Developers Have to Manage the Loading Experience
With great power comes great responsibility. With modern front-end frameworks and tooling we have the power to boot a website from an essentially empty page, loading various types of data from all over, and rendering as we have what we need. But with that power comes responsibility for those intermediate states - how do we manage the loading experience when everything is asynchronous?
An Extensive Guide To Progressive Web Applications
I was just thinking it had been a while since I’d seen a good in-depth article on Progressive Web Apps, and along came this super high quality in-depth guide on Smashing Magazine. Check it out!