Friday Frontend: 3.8 Billion People Online Edition
Happy Friday! Watch the video to hear about what got me pumped up this week (hint, it has to do with 3.8 BILLION people!), and enjoy the 15 awesome posts, resources, and tutorials down below.
KBall from ZenDev
CSS & SCSS
An awesome guide for CSS newbies, but also for anyone who doesn’t feel like they’ve mastered CSS layout or haven’t been keeping up with all the latest developments in CSS Layout. Takes you through the fundamentals of flow on the web, layers in floats and positioning, and then goes through Flexbox and Grid. Excellent.
An article by the author of the pure CSS portrait I linked to a couple weeks back, going a little bit into the power and place of CSS in the web tech stack, but also with an introduction to HOW THE HECK SHE DID THAT! I mean really - that portrait is amazing, and you should read this post. :D
Z-Index is one of the elements of CSS that seems like it should be straightforward, but there’s all sorts of complications when you start actually using it. Understanding the nuances, particularly the idea of a stacking context, is key to making z-index your friend rather than staring frustrated at your screen. This article does a great job of explaining.
Deep dive into the nuances of different ways of hiding content from screen readers. Do you know the difference between
role="none"? If not, you should read this! (Don’t feel bad, I didn’t know either before reading this).
(Bias alert - this is my own post) I’m a huge fan of the great strides we’ve taken in css architecture over the last few years, allowing us to design really powerful systems that are far more maintainable than CSS used to be, but this has come at the cost of making CSS and SCSS sometimes seem intimidating to newcomers. The vast majority of projects don’t need anything super complicated, so this post attempts to break down 2 quick decisions you can make that will take you a long way towards sustainable SCSS without requiring deep study or crazy complex systems.
The Intersection Observer API is one of my favorite new browser APIs - you can use it for lazy loading of course, but also for all sorts of fun things like adding animations as something scrolls into view, or efficiently auto-updating in-page navigation based on what’s visible. This whimsical tutorial takes you through how it works and shows you want is possible.
React’s new context API provides a simple way to share state across multiple components without needing to create deep-drilling props, or use a more complex library like Redux. Is it going to completely replace Redux or related libraries? Not at all! But for use cases where you need some shared state don’t need all the complexity that comes from a full-on flux architecture, this can be a great option. This post contains some examples of how you might use it in your applications.
Every year Mary Meeker of Kleiner Perkins publishes a slide deck that documents the trends happening in the internet, and it is one of the go-to resources used to divine trends in our industry. Possibly more interesting for those in product roles or startups than pure development, but it’s too good to miss, and this year’s report just went up!
I love this case study because not only does it expose a lot of great front-end performance techniques, but it tackles a problem so many of us are stuck with: applying those techniques to a legacy codebase without the luxury of a from-scratch rewrite.
I’m a huge fan of static site generators (my website is built on Jekyll, and I’ve built a number with the ZURB stack as well), so it’s exciting to see more innovation happening in this space. Gatsby is an open-source SSG based on React, and it’s seen enough interest that the core developers are forming a company around it as well to provide parallelized builds in the cloud. Very cool!
The Node.js Foundation just released the results of their 3rd annual user survey. Perhaps unsurprisingly, they found that Node users like using Node! :) Seriously, over ¾ of survey respondents are planning to keep increasing their use of Node… there’s a ton of other interesting tidbits in this interactive report, or if you want just a high level summary you could check out my writeup on InfoQ.
Super cool interactive post creating dynamic bezier curves using React and SVG. It not only does a great job of teaching you how to do it, but it’s just fun to play around with his demos. Not to mention his morphing header effect is wicket cool.