Friday Frontend: Performance Edition
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.
Your First Steps with the Web Audio API
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.
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
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.