Link tags: development

2039

sparkline

The Layers of the Web - Jeremy Keith - YouTube

Here’s the video of the talk I gave at the Web Stories conference back in February.

The Layers of the Web - Jeremy Keith

Reflecting on My Own Experience Using the Web to Get the Vaccine - Jim Nielsen’s Blog

I click the link. The page loads fast. I navigate the surprisingly sparse yet clear form inputs. And complete the whole thing in less than thirty seconds.

Oh, how I wish this experience weren’t remarkable!

Simple forms with clear labels. Little to no branding being shoved down my throat. No array of colors, big logos, or overly-customized UI components.

Matthew Somerville on Twitter

Our slippy map works without JavaScript, yet we also have a service worker.

Getting a tattoo. brb

Web Browser Engineering

It’s heavy on computer science, but this is a fascinating endeavour. It’s a work-in-progress book that not only describes how browsers work, but invites you to code along too. At the end, you get a minimum viable web browser (and more knowledge than you ever wanted about how browsers work).

As a black box, the browser is either magical or frustrating (depending on whether it is working correctly or not!). But that also make a browser a pretty unusual piece of software, with unique challenges, interesting algorithms, and clever optimizations. Browsers are worth studying for the pure pleasure of it.

See how the sausage is made and make your own sausage!

This book explains, building a basic but complete web browser, from networking to JavaScript, in a thousand lines of Python.

Open UI and implicit parent/child relationships in HTML – Eric Bailey

I remember discussing this with Tantek years ago:

There are a few elements who need to be placed inside of another specific element in order to function properly.

If I recall, he was considering writing “HTML: The Good Parts”.

Anyway, I can relate to what Eric is saying here about web components. My take is that web components give developers a power that previous only browser makers had. That’s very liberating, but it should come with a commensurate weight of responsibility. I fear that we will see this power wielded without sufficient responsibility.

30 Days of HTML

Receive one email a day for 30 days, each featuring at least one HTML element.

Right up my alley!

Swipey image grids.

This is how you write up a technique! Cassie takes an SVG pattern she used on the Clearleft “services” page and explains it in step-by-step detail, complete with explanatory animated diagrams.

Guarding Against Disposable Design — Smashing Magazine

Always refreshing to see some long-term thinking applied to the web.

Meet Utopia: Designing And Building With Fluid Type And Space Scales — Smashing Magazine

An excellent explainer from Trys and James of their supersmart Utopia approach:

Utopia encourages the curation of a system small enough to be held in short-term memory, rather than one so sprawling it must be constantly referred to.

Idle Sunday thoughts about web trends | Studio Tendra

Six years old. Still very astute. Still very true.

Compat2021: Eliminating five top compatibility pain points on the web

Good to see Google, Mozilla, and Apple collaborating on fixing cross-browser CSS compatability issues:

  1. flexbox
  2. grid
  3. position: sticky
  4. aspect-ratio
  5. transforms

You can track progress here.

CSS { In Real Life } | Quick Tip: Style Pseudo-elements with Javascript Using Custom Properties

Oh, this is smart! You can’t target pseudo-elements in JavaScript, but you can use custom properties as a proxy instead.

Web Development History

Richard MacManus has started a blog all about the history of web development—this is going straight to my RSS reader!

Most internet history books, websites, podcasts, etc, are from a business perspective. What’s missing, I believe, is an internet history with a technical point of view: which products were developed, the technologies used, how the web has changed over time, developmental trends, and so on.

Simply put, I want to describe how the web actually works and how that has evolved over the past 25-30 years.

prefers-reduced-motion: Taking a no-motion-first approach to animations

Given the widespread browser support for prefers-reduced-motion now, this approach makes a lot of sense.

Show/Hide password accessibility and password hints tutorial | Part of a Whole

A good tutorial on making password fields accessible when you’ve got the option to show and hide the input.

A Complete Guide To Accessible Front-End Components — Smashing Magazine

Vitaly has rounded up a whole load of accessibility posts. I think I’ve linked to most of them at some point, but it’s great to have them all gathered together in one place.

1loc | Favorite JavaScript single line of code

This is very handy indeed! Quick one-line JavaScript helpers categorised by type.

And, no, you don’t need to npm install any of these. Try “vendoring” them instead (that’s copying and pasting to you and me).

Dropping Support For IE11 Is Progressive Enhancement · The Ethically-Trained Programmer

Any time or effort spent getting your JavaScript working in IE11 is wasted time that could be better spent making a better experience for users without JavaScript.

I agree with this approach.

With a few minor omissions and links, you can create a site that works great in modern browsers with ES6+ and acceptably in browsers without JavaScript. This approach is more sustainable for teams without the resources for extensive QA, and more beneficial to users of nonstandard browsers. Trying to recreate functionality that already works in modern browsers in IE11 is thankless work that is doomed to neglect.

In Praise of the Unambiguous Click Menu | CSS-Tricks

What’s important is that you test it with real users… and stop using hover menus.

Strong agree!

Now THAT’S What I Call Service Worker! – A List Apart

This is terrific! Jeremy shows how you can implement a fairly straightforward service worker for performance gains, but then really kicks it up a notch with a recipe for turning a regular website into a speedy single page app without framework bloat.