Friday Frontend: Apocalypse 2020 Edition

Hey there,

Hope your week was a little less apocalyptic than mine -- this newsletter is coming to you from California, where we’ve been embroiled in a massive heatwave (just cooled down) combined with crazy thunderstorms that have started more than 300 fires across a bone-dry state, with fire crews that are already understaffed and having to take new approaches and precautions because we’re still in the middle of a pandemic. 2020, you’re a bit too much.

Anyways, let’s look into some tech to distract from this craziness. My favorite articles this week are the architecture discussion on how to structure CSS, the look at a new Svelte-based SSG called Elder.js, and the micro-e-book on interface design. Enjoy!

Best,

KBall from ZenDev

CSS & SCSS

The Just in Case Mindset in CSS

A look at the approach to edge cases in CSS. This mindset is tied deeply to one of the simultaneously most powerful and most frustrating things about CSS -- it is designed to deal with varying content. CSS is a set of guidelines for the browser, which then applies them against whatever comes its way. This implicitly makes it both more flexible and less fully controlled than other programming languages you might be used to.

How I Structure My CSS (for Now)

I love these examples of explicitly how different folks design sustainable systems of CSS, particularly because most (not all, but most) CSS methodological discussion is around micro-architecture -  class naming, how you decompose things - rather than full system architecture.

Some more CSS comics

More fun visual representations of CSS (along with some examples that highlight our common frustrations).

content-visibility: the new CSS property that boosts your rendering performance

Ooh, this is cool! A simple CSS property to let the browser know when content is going to start off-screen, so that it can skip a lot of rendering work and get you to interactive much faster. Very nice!

What Happens When Border Radii Overlap?

Dang, I thought I knew just about everything there was to know about the border-radius property, and then here comes this article to show me differently. This is very well done, and while it’s a pretty niche case I recommend reading it so you aren’t surprised when one day you’re doing something fancy with borders and they aren’t behaving how you expect.

JavaScript

Copying properties from one object to another (including Getters and Setters)

Interesting look at one of the holes in pretty much every existing “copy this object into that” methodology → If you’ve defined getters and setters on your original object, they won’t be copied! They live in a funny place as ‘property descriptors’ rather than properties, and need to be copied differently. This post will show you how.

Elder.js: An Opinionated, SEO focused, Svelte Framework.

Love to see new JAMStack frameworks being built up around Svelte. I tried to use Sapper completely for SSG, but it wasn’t designed well for that… this appears to be. Think closer to Gatsby than Next. 

Functional Programming in JavaScript: Functions, Composition and Currying

Solid tutorial-style article looking at how to use certain key functional programming concepts in JavaScript. If you’re not already feeling comfortable with functional programming, definitely recommend taking the time to read and learn about it -- I think this family of thinking has been more helpful for my development skills than almost any other thing I’ve learned about, even though I’m almost never working in a purely functional codebase or environment.

Introducing Rome

This is an interesting project that I’ve had on my radar for a while, that just announced a first beta release and general availability. Rome “is designed to replace Babel, ESLint, webpack, Prettier, Jest, and others.” -- it takes a very different approach than much of the JavaScript ecosystem in that it is a monolithic project trying to do many things in an integrated way rather than a set of small modules. I will be very interested to watch this, as this approach seems like a natural reaction to the “JavaScript Fatigue” of our current approach.

Other Awesomeness

Mozilla is dead

One perspective about what’s going on at Mozilla with the layoffs of last week, and how long Mozilla has to rebuild trust before folks abandon Firefox entirely.

The cult of the free must die

A look at one of the key cultural questions/distortions in web software today: The idea that most or all software on the web should be free, and how that is tied to what we’re seeing with Mozilla.

Why do we interface?

Super interesting mini-book on the history of interface design & the thinking and reasoning that goes into it. Absolutely fascinating.

How to Run GraphQL Directive-Driven Capacity Tests at Scale

As I’m spending more time in GraphQL land, this type of post appeals to me more. Great case study that breaks down why their traditional capacity tests weren’t working for GraphQL, how they addressed it, and results.