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!
Best,
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
Position: absolute is one of those key CSS features that is only useful sometimes, but when you need it you really need it, and it’s useful to understand. And if you’re not careful, not understanding it might cost you 2000 lines of javascript! 🤣🤣
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.
JavaScript
Web workers vs Service workers vs Worklets
Very nice breakdown of three different types of “JavaScript workers”. Your general purpose web workers, in-browser proxy/cache service workers, and plug-into-the-rendering-engine Houdini is amazing worklets. :)
Understanding Memoization in JavaScript to Improve Performance
Memoization is a super powerful technique, and this is a great tutorial on it that happens to be using JavaScript. Fun fact - as someone without a Computer Science degree, for a long time I felt like I was playing catchup with regards to theory like algorithms… but a coworker pointed out that often times the issue was only naming: case in point, Dynamic Programming sounds super fancy but in practice is pretty much an application of memoization over and over.
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.
Other Awesomeness
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.
What If?
The web is a crazy environment where things can and do go wrong all the time. Sometimes requests fail, or go abnormally slow, which means that images, javascript, CSS, or ajax calls can suddenly be left hanging. What happens to your site or app when this happens? If you haven’t thought about it, you can design yourself into some pretty pathological situations, as this post highlights.
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!
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)