ZenDev - Friday Frontend: July 10 Edition

Hey there,

Happy Friday y’all, hope you had a great week!

A set of interesting forward looking articles this week - I think the CSS news and the exploration into some of the possibilities of subgrid for irregularly shaped links were my favorites. Enjoy!

Best,

KBall from ZenDev

CSS & SCSS

PERFORMANCE - CSS PAINTING VS. CSS HOUDINI PAINT API

Houdini continues to be one of the most interesting developments in the CSS landscape, allowing us to plug directly into the browser’s rendering engine. And support is growing -- soon you’ll be able to use at least the Paint API everywhere. But at what cost? This article takes a look and determines that yes, there is a cost… but it’s probably not too bad.

CSS News July 2020

Speaking of developments in the CSS landscape, check out this roundup of interesting new CSS features being implemented in browsers as we speak. I particularly am interested in the ‘gap’ feature for Flexbox. I’m kinda used to margin these days, but ‘gap’ is honestly a much easier idea to wrap your head around and fits closer to how most designs/designers think about spacing.

Uncommon CSS Properties

Excellent article that has a nice distribution of genuinely obscure properties with uncommon uses of properties that are otherwise common.

Irregular-shaped Links with Subgrid

This is a neat problem: How would you implement a link that should lay out as two overlapping rectangles? The author works through a few approaches with approximations, with the most precise approach ending up being a use of CSS Subgrid.

JavaScript

SFC Improvements in Vue.js

A set of RFCs for Vue.js. The reason I include it is that I find it fascinating to see how the Vue.js team is learning from and incorporating concepts from Svelte. This creates some new compile-time sugar, dipping toes in the water of moving more and more computation for the front-end framework into ahead-of-time compilation.

Learn Regex: A Beginner’s Guide

Regex is a fascinating subject - a language in and of itself, embedded in almost all languages. There are very few things I have learned in my career that have been more useful over time. And the 80/20 on this is pretty easy to get to… while you can go very deep into this subject, you’ll get a ton of value from some pretty basic tools.

A little bit of plain Javascript can do a lot

For those who have come up in the modern “framework-centric” world of front-end development, it might sound daunting to implement things in vanilla JavaScript without a framework to lean on. But there are many cases where you don’t need the power of a framework and this post highlights how to handle some of those simple cases with vanilla JS.

The Double-Bang (!!) Operator And A Misunderstanding Of How JavaScript Handles Truthy / Falsy Values

Double-bang is a super useful tool, but as this article highlights it may well be overused in a lot of cases you don’t need it.

Other Awesomeness

What's New In DevTools (Chrome 85)

Super interesting tidbit hidden away in this set of essentially release notes: DevTools now supports viewing and editing styles set using the CSS Object Model, which dramatically ups the usefulness for tinkering with styles set by a number of CSS-in-JS frameworks.

Improving Chromium's browser compatibility in 2020

This is interesting for a couple of reasons. First, it gives some insight into what is coming down the pipe from Chromium this year, which is always good to have an eye on. But second it also highlights how having more vendors on top of Chromium is actually benefiting the platform, looking at how engineers from Microsoft, Igalia, and more are making large, substantial contributions to improving and shaping the platform

Use Speedlify to Continuously Measure Site Performance

New free tool for measuring the performance of JAMStack sites continuously as changes roll out. Easy to set up and run on Netlify.