Friday Frontend: 9/11 Remembrance Edition

Hey there,

It’s almost hard to remember how things felt in the United States after 9/11/2001. There was a sense of shock, of grief, of outrage, and a shocking amount of internal unity. Compared to our numbness and internal division over COVID-19, it seems unreal in hindsight. But that was when many Americans woke up to the fact that the stories we tell ourselves about our country and how it is perceived might not be so accurate, and that our illusion of safety was just that: an illusion. 

At the end of the newsletter today I share a poem from US Poet Laureate Billy Collins that captures some of the grief and heartbreak of the many people lost that day, and the feeling of loss that we are all feeling so much again with all of those lost in the pandemic.

Best,

KBall from ZenDev

CSS & SCSS

How CSS Perspective Works

Phenomenal deep dive into the perspective property. If you’re displaying or animating things in 3D using CSS, you need to understand this property. This article makes it crystal clear.

Styling Complex Labels

Short and sweet, with a beautiful UI outcome, this article shows how as your form labels get longer, you can break them up and individually style pieces of them, or even rethink the way you are laying out your form entirely.

Image manipulation with CSS

I continue to be moderately obsessed with all of the tools we have now for image manipulation directly in CSS. Where it used to take specialized tools like Photoshop or GIMP to update your images to exactly how you wanted them, you can now do it straight in CSS. Which opens tons of opportunities for scalably applying effects to user-provided images, straight on the web.

Beyond Media Queries: Using Newer HTML & CSS Features for Responsive Designs

I love these new fluid responsiveness techniques, that allow you to create responsive designs that are not rigidly constrained to particular media query-based cut points but that seamlessly adjust across a range of sizes.

Stroke Text CSS: The Definitive Guide

Creating stroke text (text with different color outlines) is trivial in design tools, and a useful effect, doing it in CSS is a bit less trivial. While there is a CSS property -webkit-text-stroke, it’s not standard and you can’t count on it. Luckily, this article exists, teaching you how to create the effect either using a series of text-shadow layers, or with SVGs.

JavaScript

Accelerating JavaScript (in the browser)

Very cool post! For those with performance problems in their JavaScript code, walks you through a flow chart for assessing what options are available to you, then below breaks down what those options are and links you to additional resources. Includes such fun options as migrating pieces to WASM, writing a GPU shader, and more.

Working with JavaScript Media Queries

Especially with so much logic happening in JavaScript these days, there are times you want to change behavior based on the size of the screen (or if the user prefers reduced motion, or landscape vs portrait mode… all of the things you might detect with a media query). Back in the day you had to try to sniff properties of the DOM to see which of your CSS media queries were actively applied, but now you can ask directly via an API. Love it!

10 lesser-known Web APIs you may want to use

Goes through examples of how to use a slew of lesser-known Web APIs, ranging from the totally obscure (Vibration API?) to the extremely useful (Resize Observer API). If this topic is of interest, may I recommend this github repo and this JSParty episode.

Mastering Hard Parts of JavaScript: Callbacks I

Part one of a 17-part in-depth series written by someone as they went through the ‘JavaScript: The Hard Parts v2’ course at Frontend Masters. Great for those interested in working through improving their understanding of JavaScript in depth.

Other Awesomeness

Is the web getting slower?

Deep dive into the oft-repeated claim that website bloat has outmatched hardware improvements and resulted in the experience of the web slowing down for users. Worth reading, but the tl/dr about “is the web getting slower?”  -- it depends on what your device, network connection, and most-used websites are, but for the average user the answer is no.

AVIF has landed

A new lossy image format now supported in Chrome desktop and coming soon to many browsers, it looks like it provides over 2X size improvements over WebP, almost 4X compared to JPEG, all while maintaining very close to the same image quality. Very cool! Read this article for all the nitty gritty details - definitely worth taking a look at.

Designing With Reduced Motion For Motion Sensitivities

Excellent article that goes through both the technical practicalities of how you can handle reduced motion preferences in the browser, as well as some of the design considerations and how you might go about approaching this.

What is the Value of Browser Diversity?

This is a really important question and a huge concern for the web community right now in the aftermath of the Mozilla layoffs. We talked about this on JSParty when Edge moved to Chromium, but it continues to become more acute. What happens to the web when 1 corporation (Google) owns so much of the browser development process? Or will other company’s involvement in Chromium keep us from going down that toxic path?

Gradient Magic

Phenomenal browsable gallery of free (and easy to use) gradients that you can use wherever you want. Just look around until you find what you want, copy the CSS, and drop it in your website. 

“The Names” by Billy Collins

“Yesterday, I lay awake in the palm of the night.

A soft rain stole in, unhelped by any breeze,

And when I saw the silver glaze on the windows,

I started with A, with Ackerman, as it happened,

Then Baxter and Calabro,

Davis and Eberling, names falling into place

As droplets fell through the dark.

Names printed on the ceiling of the night.

Names slipping around a watery bend.

Twenty-six willows on the banks of a stream.

In the morning, I walked out barefoot

Among thousands of flowers

Heavy with dew like the eyes of tears,

And each had a name —

Fiori inscribed on a yellow petal

Then Gonzalez and Han, Ishikawa and Jenkins.

Names written in the air

And stitched into the cloth of the day.

A name under a photograph taped to a mailbox.

Monogram on a torn shirt,

I see you spelled out on storefront windows

And on the bright unfurled awnings of this city.

I say the syllables as I turn a corner —

Kelly and Lee,

Medina, Nardella, and O’Connor.

When I peer into the woods,

I see a thick tangle where letters are hidden

As in a puzzle concocted for children.

Parker and Quigley in the twigs of an ash,

Rizzo, Schubert, Torres, and Upton,

Secrets in the boughs of an ancient maple.

Names written in the pale sky.

Names rising in the updraft amid buildings.

Names silent in stone

Or cried out behind a door.

Names blown over the earth and out to sea.

In the evening — weakening light, the last swallows.

A boy on a lake lifts his oars.

A woman by a window puts a match to a candle,

And the names are outlined on the rose clouds —

Vanacore and Wallace,

(let X stand, if it can, for the ones unfound)

Then Young and Ziminsky, the final jolt of Z.

Names etched on the head of a pin.

One name spanning a bridge, another undergoing a tunnel.

A blue name needled into the skin.

Names of citizens, workers, mothers and fathers,

The bright-eyed daughter, the quick son.

Alphabet of names in a green field.

Names in the small tracks of birds.

Names lifted from a hat

Or balanced on the tip of the tongue.

Names wheeled into the dim warehouse of memory.

So many names, there is barely room on the walls of the heart.”