Friday Frontend: Mozilla Death Rattle Edition

Hey there,

Welcome to August! Okay so it’s already halfway done, but after taking a week off it’s the first time I get to talk to you!

This week was dominated for me by the news of layoffs at Mozilla (see last article below), which has been the key driver behind much of the innovation in the Rust/WASM ecosystem in the last few years. I only hope the ecosystem has gotten mature enough to keep things moving forward without Mozilla’s support. 

Best,

KBall from ZenDev

CSS & SCSS

More Control Over CSS Borders With background-image

Super cool tool for building fancy borders using gradients and the background-image property.

Some CSS comics

If you’re a visual learner (and hey, if you’re doing front-end and CSS I suspect there’s a higher-than normal chance that you are visually inclined) these CSS comics are great for helping understand concepts across a range of CSS properties.

@property: giving superpowers to CSS variables

Woah, this is cool! CSS custom properties (aka CSS variables) are already super cool, but with the new Houdini Properties and Values API you can make them even more powerful. And as this post highlights, in the newest version of Chrome you can actually use those improvements directly in your CSS without needing to register things in JavaScript.

What does 100% mean in CSS?

Love this breakdown of the many things that 100% can mean in CSS, and how those definitions work in a variety of contexts.

10 modern layouts in 1 line of CSS [Video]

Great look at how powerful modern CSS is. Super fun, dynamic talk, and I bet you’ll learn something as well. :)

JavaScript

How to Access Object's Keys, Values, and Entries in JavaScript

Super useful fundamentals of JavaScript. Not super in-depth but if you’re not already familiar with Object.keys, Object.values and Object.entries you should read this. Fun trivia note: you used to only be able to use Object.keys, and the guy who proposed the other two is on the JSParty show we just recorded to go out next week.

Another great explainer from Dan Abramov, this one on the concept of composition. Using JavaScript for the examples, not JavaScript specific, reading this will make you a better programmer.

Angular Roadmap

I’m glad to see Google’s Angular team engaging a little more with the community and publishing a roadmap for where they’re going… that said, looking through it, it feels… pretty uninspiring, to be honest. Lots of maintenance and things that feel like sort of catching up with where the rest of the web has been. Combined with recent noise about core members being forced to quit I’m worried about the health of this framework. Are we soon to be down to a ‘Big 2’ in front-end development?

What Actually is a String in JavaScript?

Huh. I must admit that I had the simple mental model of a string as a sequence of visible characters in my head, perhaps with some slight exceptions for special characters like the newline. But the way JavaScript thinks about emoticons and other UTF-16 characters breaks that model -- this is a useful post to get you pointed in the right direction.

JavaScript Fatigue

A perennial topic, and I like the take suggested here. Don’t try to learn about everything; build up a mental model for what types of things there are, and then when new things come out, learn enough to figure out where in that model they fit, but don’t feel like you have to go deeper until you have an explicit need.

Other Awesomeness

Mindful Productivity framework

If you, like me, are struggling a lot with your mental health and productivity during this era of isolation, global pandemic, reduced childcare options, and political chaos… maybe this will be helpful to you. It definitely is useful to me to think about how to be more deliberate about setting goals (not to mention overcommit less and be  less hard on myself).

How to visualize periodicity?

Interesting visual exploration of different ways to visualize periodic signals. If you see one you like, you can click the left margin to see the d3 code that generated it! Very nice.

Gradient angles in CSS, Figma & Sketch

Another fun set of visual explorations with info on how to implement, this one looking at angled gradients. Also highlights the ongoing mismatch between how design tooling like Figma and Sketch think about gradients and how CSS does. 

Firefox MDN website, Developer Tools going away? Mozilla layoffs cause panic among developers

Sad but important news for the web. Mozilla has restructured and done a massive layoff, including laying off large numbers of a number of critical teams. The article mentions MDN and Developer tools, but word on twitter is that the layoff also included the entire Servo team, the webXR team, and more.