Friday Frontend: Faceoff Edition. Dueling grids, JS Frameworks, and more!
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!
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
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.
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)
The State of the Web
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.
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!