Articles seem to run in trends, this week there were a ton of fascinating articles and news pieces about performance, particularly down in the ‘Other Awesome’ category! There’s also a great walkthrough of the concepts and thinking behind React and Redux, some nifty CSS Background Patterns, and a trio of “common questions” articles on the current big 3 JavaScript Frameworks (Angular, React, and Vue.js)

Happy Friday!
KBall from ZenDev

CSS & SCSS

Finding Dead CSS

“Dead” CSS (no longer used, lingering from long-removed features) is an unfortunately common occurrence in many older projects, particularly those that may have started without a strong CSS architecture or team members focused on CSS. Unfortunately, proving that CSS is dead can be a strikingly challenging problem! This article has a pretty cool technique for verifying CSS you suspect to be dead to actually be unreferenced in your production code.


CSS Background Patterns From CodePen

More of an inspiration and place to grab examples than a walkthrough or learning article, but this is a great selection of different pure-css background patterns, each in their own codepen so you can see exactly how they work and how to implement them.


Bootstrap 4 has finally arrived

The big update to the world’s most popular CSS framework has finally landed! If you haven’t been keeping up on the play by play as they’ve laboriously traveled through alphas and betas (I haven’t) there’s a lot to catch up on. Go check out what’s new!


CSS Cheat Sheet

A great open-source resource/cheat sheet of all the various selectors available to you in CSS, with links over to the MDM docs for any you want to dive deeper on. Nice!


"display: contents" is coming

This is cool! I hadn’t heard about “display: contents”, but it has some very nifty use cases where it can substitute in for the (as yet unimplemented) subgrids feature in CSS Grid layout, and I’d imagine clever designers will be able to find more ways to use it as well.


JavaScript

We Compiled Stats for the Top JavaScript Projects of 2017. Here’s What We Learned.

An interesting dive into which JavaScript projects are killing it from a popularity standpoint. Probably the biggest surprises on the list for me were Vue outpacing React and the impressive performance by Parcel.js. Could be useful if you’re trying to decide what to study in 2018. This is a descriptive article, if you prefer to simply dive into the report check it out here.


Your First Steps with the Web Audio API

I haven’t done very much with audio programming, but being able to tinker around with it and manipulate sounds in JavaScript on your web browser is super cool! Building some sort of web-based audio mix program with this API would be a pretty fun side project.


React, Redux, and JavaScript Architecture

Very nice walkthrough of the concepts and thinking behind React and Redux. If you don’t feel like you’ve wrapped your head around the “why” for these frameworks (and really the entire architectural approach - its not just React), this is a must read.


Angular - Common Questions

First of a trio of Q&A articles that include video, addressing common questions folks have when considering Angular for the first time.


React - Common Questions

Second in a trio of Q&A articles that include video, addressing common questions folks have when considering React for the first time.


Vue - Common Questions

Last in a trio of Q&A articles that include video, addressing common questions folks have when considering Vue for the first time.


Other Awesomeness

Using page speed in mobile search ranking

This is pretty big! Google has officially announced that as of July 2018 they will use page speed as a ranking signal for mobile search results. They’ve been doing this for desktop for a while, but SEO experts have indicated it seems to be a pretty lightweight signal. Doing an announcement this far ahead seems to imply it will be a bigger deal in mobile, though they indicate initially it will be used primarily to punish very slow sites.


Making WebAssembly even faster: Firefox’s new streaming and tiering compiler

Oooh this one gets me excited! Firefox is working hard to allow us to achieve the performance gains promised by WebAssembly. In this super cool architectural post, they show us how the new compilation architecture that will be released in Firefox 58 allows WebAssembly to be parsed faster than it can go over the network, making wasm theoretically as inexpensive to load as images, while still having a second tier optimizing compiler to reap the runtime performance benefits. Web applications are about to get a whole lot faster!


Make Your Site Faster with Preconnect Hints

DNS, connection setup, and all of the related overheads that need to be done to fetch resources can take up a lot of time, especially if your website is requesting resources from many different hosts. This is exceedingly common as folks reference external images, use 3rd party javascript plugins, and more. This article teaches a technique where you can “front-load” the connection setup so that the browser gets started on it even before they get to the part of your page, css, or javascript that first references an external image.


8 Web Performance Expert Insights for 2018

Round table interviews with a set of web performance experts on the question “What do you think will be the most exciting thing for web perf community in 2018?”. Not all of it is relevant to everyone, but there’s some nuggets of gold in there.


Meet the New Dialog Element

One of the new features in the HTML 5.2 specification finalized last month is a native dialog element. This post gives you a quick walkthrough of what it is, how it works, and how you can get access to it today with a polyfill.