Hope you enjoyed the holiday weekend and have had a great week! This week’s Friday Frontend is heavy on faceoffs - a breakdown of two top framework grid systems, battling opinions on the ‘CSS in JS’ controversy, and a three-way battle post of Angular vs React vs Vue.

I’m also experimenting with the format, with a bit less commentary per link - do you like this better? Or is the older version with more context better? Jump into the comments and let me know!

Happy Friday!

KBall from ZenDev

P.S. If you’re trying to figure out how to bring your front-end web stack up to speed, or even what technologies to use, I consult and do training on front-end architecture, workflows, and frameworks. Schedule a quick 15 strategy call to discuss how I can help you: https://calendly.com/kbal11/front-end-strategy

CSS & SCSS

An in-depth breakdown of the grid systems in the two top web UI frameworks in the world, written by one of my favorite Foundation Yetinauts, the inexhaustible Harry Manchanda!

With any new spec, sometimes knowing what doesn’t work yet is as valuable as knowing how to use it. Great breakdown of two ways to break CSS Grid, and how to work around those breakages.

An article promoting “CSS in JS” with some solid points about utilizing the rapid innovation in JavaScript tooling to benefit CSS.

Presenting the other side of the argument, learn how properly composing your CSS into component level files fixes most of the problems ‘CSS in JS’ is intended to solve without the complexity or new problems CSS in JS introduces.

Sure they still require a polyfill, but check out how awesome CSS Conic Gradients are! These things are freaking amazing.

JavaScript

A nice bite-sized introduction to two new ES6 features that make working with arrays in JavaScript more intuitive and fun.

A bite-sized introduction to using custom events instead of callbacks for coupling between components.

A great little intro to code-splitting using webpack and VueJS, highlights how simple it’s become and gives some guidance on ways to think about it.

An excellent overview of the basics of Vue.js, diving into the various forms of data and event binding exposed in Vue to create interactive components.

An excellent breakdown comparison between three of the top JavaScript frameworks out there, Angular vs Vue vs React, plus a walkthrough of the considerations Rever went through in deciding to migrate frameworks.

Other Awesomeness

Something like 90% of perceived webpage performance is due to the front-end - loading assets, parsing and running JavaScript, laying out the page. In this excellent, in-depth article Katerina Szczur takes us through the many different dimensions of front-end performance, and how to measure and improve upon each one.

An excellent breakdown of what a Progressive Web App is, how to get started with one, and what the benefits are of moving your web project to be a PWA.

Breakdown of not just what technologies should go into your front-end, but how to create and run a team focused on front-end infrastructure.

Typekit follows the Google Fonts example and makes their fonts available using only CSS. Over 1000 high quality fonts now available with simple CSS - this is HUGE!

You may already be familiar with FOUC (Flash of Unstyled Content) and how to address it, but with A/B testing tools you need to think about FOOC (Flash of Original Content) too!

Happy Friday!

That's it for this week's Friday Frontend newsletter. If you enjoyed this, be sure to sign up to get these newsletters straight to your inbox every Friday!