Tags: im

750

sparkline

Paperclip Maximizer

Play the part of an AI pursuing its goal without care for existential threats. This turns out to be ludicrously addictive. I don’t want to tell you how long I spent playing this.

Keep your eye on the prize: remember that money (and superintelligence) is just a means to an end …and that end is making more paperclips.

“async” attribute on img, and corresponding “ready” event · Issue #1920 · whatwg/html

It looks like the async attribute is going to ship in Chrome for img elements:

This attribute would have two states:

  • “on”: This indicates that the developer prefers responsiveness and performance over atomic presentation of content.
  • “off”: This indicates that the developer prefers atomic presentation of content over responsiveness.

Virginia Heffernan on Learning to Read the Internet, Not Live in It | WIRED

A beautiful piece of writing from Virginia Heffernan on how to cope with navigating the overwhelming tsunami of the network.

The trick is to read technology instead of being captured by it—to maintain the whip hand.

JavaScript Systems Music

A massively in-depth study of boundary-breaking music, recreated through the web audio API.

  1. Steve Reich - It’s Gonna Rain (1965)
  2. Brian Eno - Ambient 1: Music for Airports, 2/1 (1978)
  3. Brian Eno - Discreet Music (1975)

You don’t have to be a musician or an expert in music theory to follow this guide. I’m neither of those things. I’m figuring things out as I go and it’s perfectly fine if you do too. I believe that this kind of stuff is well within reach for anyone who knows a bit of programming, and you can have a lot of fun with it even if you aren’t a musician.

One thing that definitely won’t hurt though is an interest in experimental music! This will get weird at times.

Essential Image Optimization

Following on from Amber’s introduction, here’s a really in-depth look at image formats, compression and optimisation techniques from Addy.

This is a really nicely put together little web book released under a Creative Commons licence.

When Should You Use Which Image Format? JPG? PNG? SVG?

Amber has been investigating which image formats make sense for which situations.

Choosing image format is only one step towards optimising images on the web. There are many, many other steps to consider, and so, so much to learn!

CSS and SVG animation workshop by codebarbrighton

There were two days of Codebar workshopping on the weekend as part of the Brighton Digital Festival. Cassie talked people through this terrific CSS animation tutorial, making this nifty Brighton-based piece.  

Trees of deep time are a portal to the past – and the future | Aeon Essays

From the library of Alexandria to the imagined canals of mars to the spots on the sun, this is a beautifully written examination of the chronology contained within the bristlecone pine.

The oldest of the living bristlecones were just saplings when the pyramids were raised. The most ancient, called Methuselah, is estimated to be more than 4,800 years old; with luck, it will soon enter its sixth millennium as a living, reproducing organism. Because we conceive of time in terms of experience, a life spanning millennia can seem alien or even eternal to the human mind. It is hard to grasp what it would be like to see hundreds of generations flow out from under you in the stream of time, hard to imagine how rich and varied the mind might become if seasoned by five thousand years of experience and culture.

There is only the briefest passing mention of the sad story of Don Currey.

jakearchibald/navigation-transitions

I honestly think if browsers implemented this, 80% of client-rendered Single Page Apps could be done as regular good ol’-fashioned websites.

Having to reimplement navigation for a simple transition is a bit much, often leading developers to use large frameworks where they could otherwise be avoided. This proposal provides a low-level way to create transitions while maintaining regular browser navigation.

Short Trip - Alexander Perrin

Well, this is simply delightful.

CloseBrace | A Brief, Incomplete History of JavaScript

Another deep dive into web history, this time on JavaScript. The timeline of JS on the web is retroactively broken down into four eras:

  • the early era: ~1996 – 2004,
  • the jQuery era: ~2004 – 2010,
  • the Single Page App era: ~2010 - 2014, and
  • the modern era: ~2014 - present.

Nice to see “vanilla” JavaScript making a resurgence in that last one.

It’s 2017, the JavaScript ecosystem is both thriving and confusing as all hell. No one seems to be quite sure where it’s headed, only that it’s going to continue to grow and change. The web’s not going anywhere, which means JS isn’t going anywhere, and I’m excited to see what future eras bring us.

Jeremy Keith - Closing Keynote: Evaluating Technology on Vimeo

Here’s the closing keynote I gave at Frontend Conference in Zurich a couple of weeks back.

We work with technology every day. And every day it seems like there’s more and more technology to understand: graphic design tools, build tools, frameworks and libraries, not to mention new HTML, CSS and JavaScript features landing in browsers. How should we best choose which technologies to invest our time in? When we decide to weigh up the technology choices that confront us, what are the best criteria for doing that? This talk will help you evaluate tools and technologies in a way that best benefits the people who use the websites that we are designing and developing. Let’s take a look at some of the hottest new web technologies like service workers and web components. Together we will dig beneath the hype to find out whether they will really change life on the web for the better.

Now and Then Cobh

Time-shifted photographs of my hometown in Ireland.

The Law of Least Power and Defunct StackOverflow Answers - Web Directions

I love John’s long-zoom look at web development. Step back far enough and you can start to see the cycles repeating.

Underneath all of these patterns and practices and frameworks and libraries are core technologies. And underlying principles.

These are foundations – technological, and of practice – that we ignore, overlook, or flaunt at our peril.

A Progressive Roadmap for your Progressive Web App - Cloud Four

Jason lists the stages of gradually turning the Cloud Four site into a progressive web app:

And you can just keep incrementally adding and tweaking:

You don’t have to wait to bundle up a binary, submit it to an app store, and wait for approval before your customers benefit.

Integrating Animation into a Design System · An A List Apart Article

Alla looks at ways of documenting animations into a pattern library. I tell ya, her book is going to be unmissable!

What Would Augment Reality? (with images, tweets) · lukew · Storify

Luke has been asking people to imagine ways of augmenting the world. Spimes are back, baby!

The Nine Principles Of Design Implementation – Smashing Magazine

I like this list:

This is not a checklist. Instead, it is a set of broad guidelines meant to preserve an underlying value. It can be used as a guide for someone working on implementation or as a tool to evaluate an existing project.

I’ve added them to my collection of design principles.

SVG can do THAT?! by sdrasner

119 slides from Sarah on a wide range of SVG magic (with code).

Patterns Day 2017: Paul Lloyd on Vimeo

Paul pulls no punches in this rousing talk from Patterns Day.

The transcript is on his site.