Hope your week is going well! Before we get to the articles, I want to talk briefly about working from home.

With the fear sweeping the world related to the coronavirus, and the recommendations of additional caution and social distancing, many more of us are working from home. Adapting to this, if you haven’t done it before, can be stressful! It can be hard to stay focused, result in various communication breakdowns, and just be generally disruptive. Make sure you are kind to yourself in this process! And maybe take some extra focus to connect with people, either via text or video call, to maintain the sense of social cohesion you might otherwise get going into the office.

I also want to open the door - If you’re in this situation, working remotely for the first time, and you have questions or are struggling with something, don’t hesitate to reach out to me and ask questions. I’ve done a ton of remote work over the years and am happy to lend an ear, share tricks, or even just wince in solidarity. :)

Hope you’re staying safe and healthy!

Best,
KBall from ZenDev

CSS & SCSS

Making Things Better: Redefining the Technical Possibilities of CSS

Really interesting post - and it’s mostly summarizing a talk, so if you want to dive deeper you can fall back to that talk. Looks a little bit at how CSS has evolved, and looks deeper into the directions it’s going. I love the way this talks not just about the features, but how they fit into a mental model and philosophical direction for CSS.


Selectors Explained

The top level link is a brief explainer of a new tool; it makes it easier to understand what the tool is, but even if you skip that go check out the tool itself. It lets you put in any CSS selector (as complex as you like) and translates it to plain English. Working with a legacy CSS codebase and struggling to understand what some of the selectors are doing? This will be *super* useful to you!


How to use CSS variables like a pro

Solid, nuts and bolts tutorial that starts with the basics, covers features like cascading variables and fallbacks, and then walks you through an example project.


CSS-only fluid modular type scales

Ok if the above article got you interested in using CSS Variables and you want to go further, check out this super cool advance usage. Combining variables and <code>calc</code> to do some super powerful fluid type scaling. Love it!


Negative margins in CSS

Negative margins are a super useful tool that is somewhat unintuitive, and this is by far the most comprehensive writeup I’ve seen about them. 


JavaScript

3 Rules of React State Management

Solid set of recommendations. Does a nice job of both laying out the recommended rules simply and then giving examples showing how following the rules leads to simpler, cleaner code.


Rome, a new JavaScript Toolchain

I’m super excited to see a new player emerging in the JavaScript toolchain space. While webpack has gotten a lot better, there’s still an awful lot of pain involved, and as this post points out a lot of things it can’t do well by limitations of design. I don’t know if Rome will take off, but even if it doesn’t the ideas it sparks will improve the ecosystem as a whole.


React + Canvas = 💜

A great look at what it takes to create React components manipulating the Canvas. The technique they use here of creating a render function/component that doesn’t actually return JSX but does imperative manipulations on a context is super useful for creating components for other types of imperative tools as well - I’ve seen it used for Google Maps among other things. It’s also not limited to React, you can do it with Vue as well.


The Magic Behind JavaScript Syntax Shortcuts

Once you learn and get used to syntax, it’s easy to forget how unintuitive that syntax first seemed and felt. I remember being baffled by ternary syntax, and then once I climbed the learning curve finding it far more intuitive for certain sets of things than the branching if/then I had used before. This post takes a few of these pieces of syntactical “magic” and breaks them down for you.


Recreating Vue 3 Reactivity API (roughly)

I feel like there’s 2 very different ways to learning about new things. One (that I lean towards) is to start playing with it, get a surface level “feel” for how it works, and gradually deepen your understanding. The other is to dive deep into the underpinnings and fundamentals and build your way up. If that latter is your jam, you’ll love this post on how to recreate the Vue 3 Reactivity API.


Other Awesomeness

HTML: The Inaccessible Parts

This is a not awesome/awesome article. It’s not awesome that we need this - so often the best advice for making things accessible is to lean on native HTML as much as possible, and it’s terrible that falls through in many places. But it’s awesome to have a (living/growing) reference document for where HTML elements fall short on an accessibility front so we can avoid and work around those elements.


Stop Using ‘Drop-down’

A discussion of how ambiguous the word ‘drop-down’ is, that then breaks out 10 distinct UI patterns and a couple of catch-alls that often get lumped into that same name. I think I agree with the author that this language is currently more confusing than helpful, but even if you don’t it’s worth looking at all of these different patterns and thinking about how they differ.


A day in the life: how a frontend developer solves a "simple" bug

I love these “behind the scenes” types of posts that walk through a real life situation and how it went. They’re a bit more meandering than super focused tutorials, and sometimes harder to draw specific lessons out from, but what they do is show the reality of software development, and help build awareness and empathy that some times there is an awful lot of yak shaving involved in fixing seemingly trivial bugs.


The Adaptive Responsive model

An interesting look at a potential way to do multi-device behavior that combines “adaptive” (different experiences for different devices) with “responsive” (lay out differently by available space). Pros and cons to each, though I think it’s easy to take adaptive too far - in my we should be doing incremental progressive enhancement based on feature and space availability, not big bang “this for this device” type of adaptation.