ZenDev - Friday Frontend: February 12th Edition

Hey there,

Hope you had a good week! I don’t know about you, but I’ve been experiencing more existential exhaustion as the pandemic and related restrictions continue to bear on. There is a light at the end of the tunnel with safe and effective vaccines, but that light still seems so far away.

Here’s some development articles to distract you along the way.

Best,

KBall from ZenDev

P.S. Come work with me! My company, Humu, is hiring developers! We’re a startup that is using behavioral science and engineering to help make work better for everyone. Super interesting problem domain, diverse team, and a great work environment. 

CSS & SCSS

SVG within CSS

Interesting way to extend what CSS is capable of by directly embedding SVGs within it. I had seen people do this for background images before, but using it to add filters is pretty darn cool.

Managing CSS Z-Index In Large Projects

This looks like a pretty useful system. The article presumes a fair amount of knowledge about z-index though… if you’re not already pretty comfortable with the idea of a stacking context you should read up on that first. Looking around, this looks like a pretty good article on that subject.

Exploring the Complexities of Width and Height in CSS

Width and height are the types of things that feel like the should be simple - and to some extent, if you stay in fixed units, they are - but there are so many nuances once you start incorporating relative units, different display modes, etc that an in depth article like this is super helpful to get a grasp on it.

4 Weird Tricks To Become A 10x Flexbox Engineer

The title is terrible. This concept of a “10x engineer” is toxic to our community. But the tricks are pretty useful. This article is really a look at some extremely useful tools within chrome devtools for debugging layouts and learning better what is possible with flexbox.

JavaScript

3 Ways to Analyze React Performance with Reactime

This looks pretty interesting. An open source front-end performance analysis tool that doesn’t try to be general purpose, but instead focuses deep on React, hooking into the internals in order to provide some very powerful and fine-grained data.

Understanding front-end data visualization tools ecosystem in 2021

A reader recently asked about graph library recommendations, and this is a super useful roundup of some of the most popular and powerful ones right now. If you’re in the React ecosystem, I can personally recommend recharts as we’ve been using it at work and been very happy. 

Blitz.js

This is interesting. I’ve talked a lot about “higher order frameworks” like Next.js, Gatsby, or Nuxt.js as a source of innovation in the JS community right now. These are frameworks that add more structure and common best practices *on top of* a view library like React.js or Vue. Well Blitz.js looks like it is a second order higher order framework… they claim to be built on top of Next.js, providing a whole additional set of capabilities and defaults. I’ll be interested to see how this goes and if this becomes another new trend.

Other Awesomeness

Applying white space in UI design

A useful set of guidelines for thinking about white space. Boiled down into a set of simple tips.

A practical guide to WebAssembly memory

Deep dive into how the memory model works within WebAssembly. Particularly interesting for the situation where you are bridging between a garbage collected environment like JavaScript and more manual memory models like Rust.

Getting The Most Out Of Git

Git is one of the most universal tools within software development today. There are many different code editors, many different languages, many different frameworks, but an incredibly large amount of the development world has converged on git for version control. As a result, time invested getting better at using it will be useful to almost everyone.