This week's Friday Frontend Inspiration is the revitalization/renewal of interest in JavaScript performance optimization.

Following Addy Osmoni's excellent post on 'The Cost of JavaScript in 2018' there has been intense interest in ways to improve the performance of the JavaScript we're sending, as well as cut down on how much we're sending to improve time to first interactive.

This is a cyclical issue - we worried a lot about JS and CSS weight back in the day, then folks started going to SPAs, focusing on shipping less markup and more data, and now we've come full circle especially looking at mobile connections worldwide to caring a lot again about how much JavaScript we're shipping.

This time around though we're not worried about 300 million people with the original internet connections, but bringing performance web sites and applications to the next BILLION people worldwide. Exciting! Learn more in this week’s Friday Frontend Inspiration Video:

Enjoy!
KBall from ZenDev

CSS & SCSS

What Happens When You Create A Flexbox Flex Container?

Excellent, in-depth walkthrough of everything that goes on under the hood as you declare a flex element. Even if you consider yourself pretty good at flexbox, you’ll almost certainly learn something. For me, it was the formalizing of the idea of an ‘outer display model and ‘inner display model’.


Practical CSS Scroll Snapping

CSS Scroll snapping is increasingly supported, and opens a ton of possibilities to CSS that used to require complicated and buggy JavaScript implementations. This article goes through many of the potential uses, as well as highlights some of the things to be cautious of.


Simple Interactive Pie Chart with CSS Variables and Houdini Magic

Ok, so the result is simple, but the process of getting there seriously blew my mind. An interactive, animated pie chart (with a bar chart fallback for browsers that don’t support conic-gradient (pretty much everything), all in CSS, HTML, and just a tiny bit of Houdini JS to let it animate. Wow.


Element Hiding Techniques in CSS

A nice breakdown of the various ways you can hide things using CSS, and what their implications are for accessibility. I like the way the author boiled down each method to 3 key pieces - whether an element still had box layout, whether it was accessible to screen readers, and whether it was actionable. Each hiding approach has a different set of answers.


CSS Grid layout: multiply & conquer — or how to actually design using The Grid.

An interesting walk through of CSS Grid from a design-first perspective. Looks at what types of layouts make sense to do with different types of grids, and how you can approach these with CSS grid. Touches briefly on responsiveness as well. Nice!


JavaScript

Divide and conquer! Lazy loading for your SPA.

Super quick and easy - how to get code splitting working very simply for React or Vue based SPAs, using webpack’s dynamic loading.


Reduce JavaScript Payloads with Code Splitting

Much more in depth article on a variety of ways to do code splitting in an application. Covers shared vendor bundles, multiple entry points, component based splitting, and even caching with service workers.


15 Angular Performance Tips & Tricks

A set of tools for your performance toolchest when it comes to Angular applications. Complements the above articles, showing how to do code splitting in Angular, as well as template precompilation and a variety of Angular specific techniques.


Vue CLI 3.0 is here!

A huge rewrite to the Vue CLI, with one of the big updates being configuration without ejection of configs (IE you can do custom configurations for your app without giving up the ability to automatically pull in configuration updates from the CLI down the road). There’s also some pretty cool build pieces (auto build Vue SFCs into web components? Cool!) and a nifty new GUI.


In-Depth VuePress Tutorial: Vue-Powered Docs & Blog

When VuePress first came out, it had a lot of hype, but not that many good tutorials, and it wasn’t at all obvious how to use it for blogs (the most common static site type IMO) rather than technical documentation (the initial usecase). This tutorial does a nice job of explaining what VuePress is, how to use it, and how to set up a blog.


Other Awesomeness

Learning Web Development in 2018

(Bias alert - I wrote this) Learning web development in 2018 is overwhelming. There's just so damn much to learn. The JavaScript ecosystem is growing more quickly than any other. There is. So. Damn. Much. Guides to becoming a web developer look like the freaking flying spaghetti monster. So I wrote a post about how I decide what to learn.


Securing Web Sites Made Them Less Accessible

An interesting highlight of how the drive to HTTPS has made the web far slower for folks in development countries and other places on the fringes of the internet. Also points out some ways we can help (basically, embrace service workers). Well worth a read.


This one line of Javascript made FT.com 10 times slower

Great performance discovery that highlights how often doing “the right thing” can also be the culprit that slows everything down. The challenge is you never know which “right thing” it will be - optimizing prematurely would waste a lot of time - so this approach is key:  noticing the issue, deep diving to figure out where it is, and then selectively optimizing.


Browser painting and considerations for web performance

Another piece of the performance puzzle - literally how the browser puts pixels onto the screen, what the performance implications are of various ways you can change those pixels, some techniques for investigating, and the magic of the transform property.


WebAssembly: How and why

Great in-depth introduction to webassembly, covering what it is, what it looks like, what the usecases are, and giving you some quick starter tools to get going with it.