Link tags: ages

235

sparkline

Plus Equals #4, December 2021

In which Rob takes a deep dive into isometric projection and then gets generative with it.

Plus Equals #3, September 2021

Want to take a deep dive into tiling images? Like, a really deep dive. Rob has you covered.

The Flickr Foundation

A non-profit foundation dedicated to long-term digital preservation.

Imagine if we could place ourselves 100 years into the future and still have access to the billions of photos shared by millions of people on Flickr, one of the best documented, broadest photographic archives on the planet.

The Flickr Foundation represents our commitment to stewarding this digital, cultural treasure to ensure its existence for future generations.

Its first act is the renewal of the Flickr Commons.

11ty/api-indieweb-avatar: Return an optimized avatar image from a domain name input.

Here’s a nifty little service from Zach: pass in a URL and it returns an image of the site’s icon.

Here’s mine.

Think of it as the indie web alternative to showing Twitter avatars.

Basic Pattern Repository

A nice little collection of very simple—and very lightweight—SVGs to use as background patterns.

404PageFound – Active Vintage Websites, Old Webpages, and Web 1.0

Well, this is rather lovely! A collection of websites from the early days of the web that are still online.

All the HTML pages still work today …and they work in your web browser which didn’t even exist when these websites were built.

Earth Restored — Toby Ord

Beautifully restored high-resolution photographs of the Earth taken by Apollo astronauts.

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.

esoteric.codes

Languages, platforms, and systems that break from the norms of computing.

THE INTERNET — Opte

Visualising the growth of the internet.

A History of the Web in 100 Pages - Web Directions

I’m excited by this documentary project from John! The first video installment features three historic “pages”:

  • As We May Think,
  • Information Management: A Proposal, and
  • the first web page.

What Makes CSS Hard To Master - Tim Severien

CSS is simple, but not easy.

If we, as a community, start to appreciate the complexity of writing CSS, perhaps we can ask for help instead of blaming the language when we’re confused or stuck. We might also stop looking down on CSS specialists.

Creating websites with prefers-reduced-data | Polypane Browser for Developers

There’s no browser support yet but that doesn’t mean we can’t start adding prefers-reduced-data to our media queries today. I like the idea of switching between web fonts and system fonts.

Digital gardens let you cultivate your own little bit of the internet | MIT Technology Review

Some suggested that the digital garden was a backlash to the internet we’ve become grudgingly accustomed to, where things go viral, change is looked down upon, and sites are one-dimensional. Facebook and Twitter profiles have neat slots for photos and posts, but enthusiasts of digital gardens reject those fixed design elements. The sense of time and space to explore is key.

5 most annoying website features I face as a blind person every single day by Holly Tuke

Five pieces of low-hanging fruit:

  • Unlabelled links and buttons
  • No image descriptions
  • Poor use of headings
  • Inaccessible web forms
  • Auto-playing audio and video

Full bleed layout using simple CSS | Kilian Valkhof

A follow-up to full-bleed layout post I linked to recently. Here’s how you can get the same effect with using CSS grid.

I like the use of the principle of least power not just in the choice of languages, but within the application of a language.

Same Energy Snap

Match up images that have been posted in pairs to Twitter with the caption “same energy”. This is more fun and addictive than it has any right to be.

CSS Grid full-bleed layout tutorial · Josh W Comeau

When you’ve got a single centered column but you want something (like an image) to break out and span the full width.

AddyOsmani.com - Preload late-discovered Hero images faster

Did you know there’s an imagesrcset attribute you can put on link rel="preload" as="image" (along with an imagesizes attribute)?

I didn’t. (Until Amber pointed this out.)

AVIF has landed - JakeArchibald.com

There’s a new image format on the browser block and it’s very performant indeed. Jake has all the details you didn’t ask for.