Link tags: IM

1027

sparkline

this vs that - What is the difference between ___ and ___ in the front-end development?

A handy reference for explaining the differences between confusingly similar bits of HTML, CSS, and JavaScript.

Lateral Thinking With Withered Technology · Matthias Ott – User Experience Designer

What web development can learn from the Nintendo Game and Watch.

The Web now consists of an ever-growing number of different frameworks, methodologies, screen sizes, devices, browsers, and connection speeds. “Lateral thinking with withered technology” – progressively enhanced – might actually be an ideal philosophy for building accessible, performant, resilient, and original experiences for a wide audience of users on the Web.

Is my host fast yet?

This is an interesting project to try to rank web hosts by performance:

Real-world server response (Time to First Byte) latencies, as experienced by real-world users navigating the web.

Pausing a GIF with details/summary | CSS-Tricks

This is such a clever and useful technique! It’s HTML+CSS only, and it’s a far less annoying way to display animated GIFs.

(Does anybody even qualify the word GIF with the adjective “animated” anymore? Does anyone know that there used to be such a thing as non-animated GIFs and that they were everywhere?)

Make me think! – Ralph Ammer

This is about seamful design.

We need to know things better if we want to be better.

It’s also about progressive enhancement.

Highly sophisticated systems work flawlessly, as long as things go as expected.

When a problem occurs which hasn’t been anticipated by the designers, those systems are prone to fail. The more complex the systems are, the higher are the chances that things go wrong. They are less resilient.

Coldwater.Science

The World Ocean is as close as you can get to outer space without leaving Earth. It’s an entirely different universe, nothing like the life we have on land.

CSS photo effects - a Collection by Lynn Fisher on CodePen

These wonderfully realistic photo effects from Lynn are quite lovely!

An Introduction To Stimulus.js — Smashing Magazine

An intro to Stimulus, the lightweight JavaScript library from Basecamp that takes a progressive enhancement approach, as seen with HEY.

One aspect I really like about the approach Stimulus encourages, is I can focus on sending HTML down the wire to my users, which is then jazzed up a little with JavaScript.

I’ve always been a fan of using the first few milliseconds of a user’s attention getting what I have to share with them — in front of them. Then worrying setting up the interaction layer while the user can start processing what they’re seeing.

Furthermore, if the JavaScript were to fail for whatever reason, the user can still see the content and interact with it without JavaScript.

What is CSS Specificity? Sarah Chima - Front-End Developer

An excellent and clear explanation of specificity in CSS.

We need more inclusive web performance metrics | Filament Group, Inc.

Good point. When we talk about perceived performance, the perception in question is almost always visual. We should think more inclusively than that.

The Whimsical Web

A collection of truly personal sites.

This site is meant to showcase how a more personal web could look like, and hopefully give you some inspiration to make your own corner of the web a bit weirder.

Of course Cassie’s site is included!

The Gentle Sadness of Things

There is a gentle sadness to being present in a moment so precious that you know you’ll never forget it, and will revisit it as a memory time and time again. It will be a shadow, many details missing, the moment bittersweet.

Cassie Evans’s Blog

Cassie’s redesign is gorgeous—so much attention to detail! (And performant too)

Accessible to some - Manuel Matuzović

A score of 100 in Lighthouse or 0 errors in axe doesn’t mean that you’re done, it means that you’re ready to start manual testing and testing with real users, if possible.

CSS folded poster effect

This is a very nifty use of CSS gradients!

Pandemic Time: A Distributed Doomsday Clock - NOEMA

A meditative essay on the nature of time.

The simultaneous dimming of Betelgeuse and the global emergence of COVID-19 were curiously rhyming phenomena: disruptions of familiar, reassuring rhythms, both with latent apocalyptic potential.

Time and distance are out of place here.

We will have left a world governed by Chronos, the Greek god of linear, global, objective time measured by clocks, and arrived into a world governed by Kairos, the Greek god of nonlinear, local, subjective time, measured by the ebb and flow of local patterns of risk and opportunity. The Virus Quadrille is not just the concluding act of pandemic time but the opening act of an entire extended future.

Robin Rendle ・ 2D Websites

When I log onto someone’s website I want them to tell me why they’re weird. Where’s the journal or scrapbook? Where’s your stamp collection? Or the works-in-progress, the failed attempts, the clunky unfinished things?

Type Specimens

This is a lovely new project from Mark that gets very meta, cataloging specimens of type specimens:

This project will dig into specimens from these three perspectives: as artefacts made by and for font designers to evolve type culture; as tools for font users to make decisions about choosing and using type; and as effective marketing tools.

A Guide to the Responsive Images Syntax in HTML | CSS-Tricks

Chris has put together one of his indispensable deep dives, this time into responsive images. I can see myself referring back to this when I need to be reminded of the syntax of srcset and sizes.