Friday Frontend: Client Side Performance Edition
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:
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
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!
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.
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.
Learning Web Development in 2018
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.
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
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.