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

Part 1: Bootstrap 4 vs Foundation 6.4 — The Grid

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!


BREAKING THE GRID

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.


Stop Managing CSS

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


The zen of Just Writing 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.


How to Create CSS Conic Gradients for Pie Charts and More

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


JavaScript

Learn JavaScript ES6 — Array.find & Array.findIndex

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


Custom Events with Vanilla JavaScript

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


3 Code Splitting Patterns For VueJS and Webpack

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.


Vue.js communication Part 1: single component

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.


Why we moved from Angular 2 to Vue.js (and why we didn’t choose React)

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

The State of the Web

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.


Yes, That Web Project Should Be a PWA

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.


How to Run a Front-End Infrastructure Team

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.


Now in Early Access: Serve web fonts without JavaScript

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!


What Is FOOC and How to Get Rid of It?

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!