Link archive: March, 2015

Let Links Be Links · An A List Apart Article

A superb piece by Ross Penman on the importance of being true to the spirit of the web.

Ari Weinkle — Feelers

By far the creepiest type experiment I have ever seen.

Jeremy Keith @ The Digital Pond - Responsive Design - YouTube

Here’s a talk give at a community event in London last summer.

Want to help prevent online bullying? Comment on Facebook

Proving something that Derek Powazek told us 15 years ago:

When we clearly show what is and is not acceptable, the tone does change. People who want to share thoughtful comments start to feel that theirs are welcome, and people who want to spew hatred start to realize theirs are not.

D’hear that, Reddit?

Codebar Brighton from Matchbox HQ - Matchbox Mobile

Jo writes about hosting Codebar Brighton. I share her enthusiasm—it feels like a great honour to be able to host such a great community event.

With a spoonful of flexbox by Charlotte Jackson, Front-end developer

Charlotte has experimenting with a nice discrete bit of flexbox on her personal site. Here she documents what she did, and what the fallback is.

Playing With Flexbox and Quantity Queries, From the Notebook of Aaron Gustafson

Aaron documents his process of implementing Heydon’s clever quantity queries in CSS.

I am really looking forward to hearing Heydon’s talk at Responsive Day Out.

Native Scrolling by Anselm Hannemann

This gets nothing but agreement from me:

For altering the default scroll speed I honestly couldn’t come up with a valid use-case.

My theory is that site owners are trying to apply app-like whizz-banginess to the act of just trying to read some damn text, and so they end up screwing with the one interaction still left to the reader—scrolling.

Natasha Lampard, Friday, 27 March 2015

A long-zoom look at life, work, and success.

I’m not usually a fan of portmanteau neologisms, but I really like Tash’s coining of the word longtrepreneur.

isolani - Web Standards: Flash’s slide into irrelevance

Mike runs through the history of Flash. Those who forget the history of the web are doomed to repeat it:

The struggle now seems to be turning to native apps versus non-native apps on the mobile platform. It is similar to Flash’s original battle ground: the argument that the Web technology stack is not suitable for building applications with a polished user-experience.

Tweets out of Context

Primer, but Twitter.

Rothkode

Mark Rothko paintings recreated with CSS gradients.

Thomas Byttebier - The best icon is a text label

A look at the risks of relying on a purely graphical icon for interface actions. When in doubt, label it.

The Brighton Makerlab - where technology meets awesome! by Simon Riley — Kickstarter

Still a few days left to back this great project for Brighton:

Build, tinker, make and play! For anyone with imagination, The Brighton Makerlab lets ages 8 to 80 create cool stuff with technology.

Gridset · Responsive Report 2014

Results of a survey of over 1000 people working on the web. It’s beautifully put together and the overall trajectory regarding responsive design looks pretty positive to me.

What Should I Design? - the design prompt generator

Get your next design game off to a quick start with this handy generator of nonsensical-yet-vaguely-plausible product ideas.

Purple: A UI kit for Heroku’s web interfaces

Hot on the heels of Github’s pattern library, here’s Heroku’s.

Culture Ship Randomizer · A gravitas free zone.

For when you just have to name something after a Culture General Systems Vehicle …or maybe a General Contact Unit.

Someone tell Elon.

» Responsive Field Day Portland! Cloud Four Blog

Aw, this is so sweet! Jason describes getting inspired by Responsive Day Out to create Responsive Field Day:

For the last two years, I’ve devoured the podcasts from Responsive Day Out—the conference that Jeremy Keith and Clearleft put on across the pond in Brighton.

I’ve encouraged anyone who would listen to subscribe to the podcast. It is my favorite conference that I’ve never been to.

Responsive Field Day

Inspired by Responsive Day Out, the gang at Cloud Four are organising a one-day event on responsive design in Portland on September 25th. It’s gonna be a good one.

Home · Primer

Github’s pattern library.

As always, it’s great to see how other organisations are tackling modular reusable front-end code (though I can’t imagine why anyone other than Github would ever want to use it in production).

100 days: Archive

You might want to keep an eye on what the Clearlefties are doing here for the next hundred days.

One down, 99 to go.

Responsive News — We’ve made it.

The responsive BBC News site is live! Hurrah!

Here’s a look at the highs and lows of the site’s story, emphasising the importance of progressive enhancement and all that enables: feature detection (by “cutting the mustard”), conditional loading, and a mobile-first approach.

Flickr: Official SpaceX Photos’ Photostream

SpaceX has a Flickr account, and you have permission to use these photos.

Zen and the Art of Wearable Markup

Jeffrey muses on progressive enhancement and future-friendliness.

In Pieces - 30 Endangered Species, 30 Pieces.

Beautiful use of CSS transitions and transforms.

Also: CSS is officially the new Flash—”skip intro” is back.

Share podcast episodes from iOS podcatchers directly to Huffduffer by Jan Beck

A walkthrough on using the iOS app Workflow to huffduff audio files from just about any app.

JavaScript and Archives | inkdroid

Thoughts on the long-term viability of sites that use JavaScript to render their content.

Submarine Cable Map 2015

This year’s map from TeleGeography is looking lovely.

The Smithsonian’s design museum just got some high-tech upgrades

A profile of the great work Aaron and Seb have been doing at the Cooper Hewitt museum. Have a read of this and then have a listen again to Aaron’s dConstruct talk.

Experiment: Using Flexbox Today - Chris Wright

Practical examples showing where you can use flexbox right now, along with some strategies on how to start doing it.

Writing for everyone.

Slides of really great practical advice on writing clearly.

The Nearly-Webs: Five Weird Ways We’ve Tried to Connect :: How We Get To Next

Alternative histories of communication.

Future Friendly Fruition | Brad Frost

The launch of the Apple watch prompts Brad to remind us of the benefits of being future-friendly.

Once again, responsive design is not about “mobile”, “tablet”, and “desktop”. It’s about creating experiences meant to look and function beautifully on anything that can access the Web. We don’t know what gizmos will be sitting underneath Christmas trees two years from now, but there’s a damn good chance those gadgets will be able to access the Web.

What Does My Site Cost?

A terrific little tool from Tim that puts performance into perspective by measuring how much money users are spending just to view your website on a mobile device.

A JS framework on every table - Allen Pike

The Tower of JavaScript Babel.

The Path to Performance // Speaker Deck

The slides from Katie’s recent talk.

Performance is a rising requirement for building successful websites, but successful performance begins far earlier than development. So how do you get your entire team excited by it, specifically aesthetic-heavy designers?

js;dr = JavaScript required; Didn’t Read.

Because in 10 years nothing you built today that depends on JS for the content will be available, visible, or archived anywhere on the web.

IndieHosters

Sorting out hosting is a big stumbling block for people who want to go down the Indie Web route. Frankly it’s much easier to just use a third-party silo like Facebook or Twitter. I’ve been saying for a while now that I’d really like to see “concierge” services for hosting—”here, you take care of all this hassle!”

Well, this initiative looks like exactly that.

Dev.Opera — The State of Web Type

If you don’t have time to poke around StateOfWebType.com here’s the short version.

INTERNETARCHIVE.BAK - Archiveteam

The most ambitious project from Archive Team yet: backing up the Internet Archive.

We can do this, people! Moore’s Law and all that.

yurivictor/typebetter

A really nifty little bit of JavaScript that converts to smart quotes, apostrophes, ellipses, and em dashes.

(Initially it required jQuery but I tweaked it to avoid those dependencies and Yuri very kindly merged my pull request—such a lovely warm feeling when that happens.)

The Web’s Grain by Frank Chimero

Superb. Absolutely superb.

A magnificent tour-de-force by Frank on the web’s edgelessness.

Read. Absorb. Read again. This is the essence of responsive web design, distilled.

Design Principles

These are principles of visual design—hierarchy, rhythm, etc.—nicely explored and explained.

Quantity Queries for CSS · An A List Apart Article

A terrific bit of smart CSS thinking from Heydon Pickering.

You know he’s speaking at Responsive Day Out, right?

Are You Living in a Simulation?

Always worth bearing in mind when some perspective is needed.

If it is possible that our future species will go on to create simulations of our civilisation forerunners (us), then it is far more likely that we are currently in such a simulation than not.

Troika - a new music podcast | The Hickensian

Jon has started a new little music podcast—and he’s using Huffduffer to generate the RSS feed—three thematically-linked pieces of music.

Have a listen to the first episode.

localFont - A localStorage solution for web font loading

A quick drag’n’drop way to base 64 encode your web fonts so you can stick ‘em in local storage.

Productivity Future Vision

Any sufficiently advanced vision piece is indistinguishable from Black Mirror.

Harnessing Flexbox For Today’s Web Apps - Smashing Magazine

More flexbox!

This time it’s a great article by Karen Menezes filled with practical examples showing where you can use flexbox today.

flexbox in 5 minutes

A really handy interactive intro to flexbox. Playing around with the properties and immediately seeing the result is a real help.

Futures of text by Jonathan Libov

This would be better titled “Futures of texting” but it’s an interesting grab-bag of observations. I’ve always felt that SMS has been overlooked as an input mechanism.

(Conversely, I’ve always felt that voice is really over-rated as input mechanism, but under-rated for output.)

Password Masking

A great investigation into the usability benefits of allowing users to fill in their passwords in plain text.

Major caveat: make sure you still offer the ability to mask passwords too.

Google’s experimental new “slow” label could revolutionize how we tackle web performance - Web Performance Today

It looks like Google is going to start explicitly labelling slow sites as such in their search results (much like they recently started explicitly labelling mobile-friendly sites). So far it’s limited to Google’s own properties but it could be expanded.

Personally, I think this is a fair move. If the speed of a site were used to rank sites differently, I think that might be going too far. But giving the user advanced knowledge and leaving the final decision up to them …that feels good.

Space Probes Art Print by Ariel Waldman

Now you can get a 7” x 10” print of the cast of Ariel’s fantastic spaceprob.es site.

I think this would look quite fetching in the Clearleft office.