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
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.
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.
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 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!