This is our 105th edition of the Friday Frontend! That means we’ve now been running for over 2 years straight. Thank you so much for continuing to follow along, and do let me know if there’s anything you’d like to see more or less of.

This week we’ve got a good variety of things. I loved the article on creating an icon system with Sass, found better ways to do things in the article on Array.from, and am super excited about the Vue community guide. Which articles do you like best? Let me know so I can keep finding stuff you want.

Best,
KBall from ZenDev

P.S. Quick reminder that I recently launched a coaching program for anyone who wants some more 1-on-1 help. If you’re feeling overwhelmed or not sure where to focus to level up, this may be right for you.  Book a free intro call and let’s talk about it!

CSS & SCSS

Creating a Maintainable Icon System with Sass

A fascinating look at how to build out a custom icon system that gets encapsulated entirely in a single CSS file. Uses Sass features a bit more intensely than a lot of CSS/SCSS examples, so a great resource for learning some more Sass.


Can you rotate the cursor in CSS?

Quick hit. The answer is yes…ish. You can rotate the cursor in CSS, but only if you actually replace the cursor itself with an element in the page. Interesting.


Where did CSS named colours come from?

Entertaining, lovely… completely value free. I think. I mean, who cares where things came from right? (That’s a joke - I actually think understanding the history of our industry is super important). Many things that we think are well thought through are often completely arbitrary… like colors in CSS tracing their lineage to random paint companies from the 1930s.


CSS Can Do This... And It's Terrifying!

One of the frequent sources for argument in the frontend community is about “whether CSS is a full programming language”.  I’m firmly in the ‘yes’ camp, though I like to highlight that CSS is a different type of language than most we’re used to, because it is tackling a different domain. Turns out CSS is Turing Complete, meaning if you convolute it enough you can actually do anything… the downside? It can be used to do all sorts of mischief. Like those detailed in this article.


Pure CSS: Alien Commuter Falling Asleep On His Way To Work

Categorize in the inspiration bucket (and content warning: There’s a lot of motion so if you’re sensitive skip this). A codepen showing a super cool animation that is entirely in CSS. Definitely worth picking through to understand how things are working.


JavaScript

5 Handy Applications of JavaScript Array.from()

I don’t know how, but I’d somehow completely missed the Array.from function. I didn’t know this existed! But for some of the usecases highlighted (array initialization and transforming array-like objects to arrays) this is way better than my current solutions. Love it!


Using Native JavaScript Modules in Production Today

Native module support promises some very interesting improvements over today’s bundling ecosystem, both in terms of ease of use and in terms of improved cacheability and smaller amounts of code shipping to the browser. This topic came up in a recent JSParty episode about JS tooling, and the concern was how to transition to native modules today. This article addresses that. Super cool stuff!


Use JavaScript Generator Functions to Reduce Memory Utilization

Generators are one of the relatively newer features of JavaScript that I haven’t gotten around to using yet, but I’m hearing about them more and more, and this article highlights one of the benefits of using them: Much like with streams in node, you can work with large amounts of data using relatively minimal memory.


Logic-less JSX

An excellent look at how to make much more readable JSX. JSX is a super powerful tool for building dynamic components, but that power often results in overcomplex components that are difficult to understand and maintain. This post guides you through a set of practices for readable, maintainable JSX.


React Layouts

A set of grab-and-go React implementations of common layouts. Set up with versions for rebass, theme-ui, and emotion. I have to admit I still cringe looking at CSS-in-JS like this, but the ease of doing copy/paste to get started here is definitely nice.


Other Awesomeness

Midyear ADDA Web & App Accessibility Lawsuit Report

There’s some crazy data in here. Like 48% of the top 500 US retailers have been sued for lack of accessibility on their sites. And there’s an accessibility related lawsuit happening every hour. Wow. If you need ammunition to argue for the importance of taking the time to make your applications accessible, this report is full of it!


amp-script: AMP <3 JS

As ugly as AMP is, it seems to be continuing to gain momentum, and things like amp-script to allow you the use of more general-purpose JavaScript on AMP pages sound like a huge step forward in improving the experience.


Vue Community Guide

I love this! And I don’t think I’ve ever seen anything like it before. A community-written introduction and guide for the community around an open source project. So often we focus on technical documentation, and just have haphazard links to community stuff, expecting new users to simply discover it. This gives a wonderfully thoughtful guide for where and how to find community around Vue.js, and I’d love to see other big projects adopt this approach. There’s also an accompanying intro post.


Why I have a problem with React 

On the flip side of community stuff, there was a lot of turmoil in the React community this last week. This post is very opinionated on one side of the discussion, but I post it very deliberately for this reason: As developers, we have a tendency to over-focus on code and try to skip over human questions. This is a problem. We have a responsibility to think and talk about what acceptable behavior is in our communities, and listen to those who feel threatened and excluded in those communities. 


Faster Image Loading With Embedded Image Previews

Very interesting look at a technique combining progressive images with some JavaScript trickery to load lowfi/preview images first throughout a page before fetching all of them. I would love to see someone wrap up this idea into an easy to use library! :)