Tags: a

Wicked Ambiguity and User Experience

This is my kind of talk—John Snow’s cholera map, the Yucca Mountain think-tank, the Pioneer plaque, the Voyager record, the Drake equation, the Arecibo signal, and the love song of J. Alfred Prufrock.

♫ These are a few of my fav-our-ite things! ♫

HTML5 accessibility

A glanceable one-stop-shop for how today’s browsers are dealing with today’s accessibility features. Then you can dive deeper into each one.

what3words | Addressing the world

In this English language alternative to latitude and longitude coordinates, the Clearleft office is located at:

cross.rooms.quick

Of the Web • Kyle Gach

I’ve been on the web for most of my life, but, without a site to call home, I haven’t been of the web for far too long.

On Building Component Libraries | Clearleft

Mark has dumped his brains!

Seriously, there is a lot of thought that has gone into this, and it’s just the beginning: Mark recounts the experience that Clearleft has had with delivering pattern libraries, laying the groundwork for releasing the library-generating tool that he has been building.

Watch this space.

Claude Shannon, the Father of the Information Age, Turns 1100100 - The New Yorker

A lovely profile of Claude Shannon (concluding with an unexpected Brighton connection).

Sign O’ The Times - original video in pure CSS

This is quite wonderful: a recreation of the video for Prince’s Sign O’ The Times made entirely with HTML and CSS.

The history of ‘this website is well-crafted’ hints | Holovaty.com

Adrian runs through the history of well-crafted websites:

  • 1990s: Dynamic websites
  • 2002: All-CSS layouts
  • 2003: Nice URLs
  • 2005: Ajax
  • 2009: Custom web fonts
  • 2010: Responsive web design

I think he’s absolutely right with his crystal ball too:

What’s a big hint that a site is crafted by forward-looking web developers? I’d say it’s service workers, the most interesting thing happening in web development.

But leaving trends aside, Adrian reminds us:

Some things never go out of style. None of the following is tied to a particular time or event, but each is a sign a website was made by people who care about their craft:

  • Making sure the site works without JavaScript
  • Semantic markup
  • Following accessibility standards

An Event Apart News: The Contributions of Others: A Session with Jeremy Keith

Eric asked me some questions and I was only too happy to give some answers.

Sebastian Ly Serena

The greatest form ever made.

Explore New Horizons - StarBnB

Discover exotic places with local hosts in a galaxy far, far away.

OOUX: A Foundation for Interaction Design · An A List Apart Article

I really, really like this approach. I’ve used something similar in my responsive design workshops, where I get people to break things down into nouns and verbs (objects and actions). I think there’s a lot of crossover with good URL design here too—this is kind of like REST for UX designers.

Updating Our Prefixing Policy | WebKit

Ted has snuck a blog post out from behind Apple’s wall of silence, and it’s good news: WebKit is not going to use vendor prefixes for new features.

The Way We Build : Airbnb Design

A look at the tools that AirBnB have made to help them in their design and development process. I hope they’ll share them.

I, Website | CSS-Tricks

Chris’s homage to I, Pencil.

I, Website, am a complex combination of miracles.

Beyond Work

An ongoing photography project from Curtis:

Beyond Work tells stories about humans at work, with no judgement or glorification. It’s an attempt at unearthing the social, cultural and functional world of work, that’s become invisible in everyday life.

The New York Herald, August 7, 1865

A transatlantic cable, hurrah!

Min | A smarter, faster web browser

I lightweight little web browser. It’s quite nice.

What Comes Next Is the Future: Trailer 2 on Vimeo

I particularly like Ethan’s Stop Making Sense era David Byrne suit.

Flexbox Patterns

Here’s a well put-together collection of common patterns that are now much easier thanks to flexbox.

IndieWebCamp Düsseldorf 2016 // beyond tellerrand

Marc writes about why you (yes, you!) should come to Indie Web Camp in Düsseldorf in just under two week’s time.

chartd - responsive, retina-compatible charts with just an img tag

This could be a handy replacement for some Google Charts images of graphs. It uses SVG and is responsive by default.

I bet it wouldn’t be too tricky to use this to make some sparklines.

Color Safe - accessible web color combinations

A nice tool for choosing colour palettes that look good and are also accessible.

IndieWebCamp Nuremberg on Flickr

Great photos from a great gathering.

IndieWebCamp Nuremberg

A Complete Guide to CSS Grid Layout | Chris House

This guide to CSS grid layout is the perfect companion piece to Rachel’s Grid by Example.

Layout Demos by Jen Simmons

If you want to keep up to date with all the coolest stuff landing in CSS, I recommend bookmarking this ever-changing page.

Goodbye CSRF - SameSite to the rescue!

I wasn’t aware of the forthcoming SameSite attribute for cookies—sounds very sensible indeed.

GitHub’s CSP journey - GitHub Engineering

A step-by-step walkthrough of how GitHub has tweaked its Content Security Policy over time. There are some valuable insights here, and I’m really, really happy to see companies share this kind of information.

Clarity 2016 Wrapup by Chris Coyier on CodePen

As well as compèring the event, Chris took the time to make notes at the Clarity conference, dedicated to all things patterny.

Interview with Håkon Wium Lie — net magazine — Medium

A trip down memory lane with Håkon.

It’s not like the web has been done. This is history in the making. The web is only 25 years old. It’s going to be around for a long time, so there are lots of things to develop.

The Internet Archive—Bricks and Mortar Version - Scientific American Blog Network

A profile of the Internet Archive, but this time focusing on its physical space.

The Archive is a third place unlike any other.

Kite - Programming copilot

This looks like it could be a very nifty tool to have at your disposal while coding. I like that it’s editor-agnostic.

A faster FT.com – Engine Room

A data-driven look at impact of performance:

The data suggests, both in terms of user experience and financial impact, that there are clear and highly valued benefits in making the site even faster.

Classic Programmer Paintings

Painters and Hackers: nothing in common whatsoever, but this are classical painters depictions of software engineering.

Why Javascript Development is Crazy

The state of Javascript development is overwhelming and confusing because everyone is overengineering their apps by default without even realizing it.

Interactive Form

I quite like this step-by-step interface for a form, all cleverly handled with the :focus pseudo-class. I’d want to refine some of the usability issues before using it in production, but the progressive disclosure is nice.

Node: Up and Running

One of these days I’m going to step outside of my PHP comfort zone and actually build something in Node. One of these days. When I do, this book looks like a good place to start (and the online version is free).

A debugging thought process

Remy walks us through his performance debugging routine …and now Una must write him a song.

Aligning text smartly in CSS

Here’s a clever way to get text centred when it’s short, but left-aligned when it wraps.

Day-of-talk countdown (with images, tweets) · larahogan · Storify

If you’re at all interested in public speaking, this is a great insight by Lara into what it’s like on the day of a talk.

Scroll Magazine, Edition 1

I wrote the foreword to this inaugural edition of Scroll Magazine which was published for the Respond conference down under. You can get your digital edition here, featuring interviews with Karen, Ethan, and Sara.

Side Projects – AVC

I think the move away from side projects toward doing a startup day one is not all good. There was something great about the ability to experiment with an idea before committing to it and before sucking other people’s money into it.

Messages to the Future, by Heather Ryan · The Manual

History, as the future will know it, is happening today on the web. And so it is the web that we must capture, package, and preserve for future generations to see who we are today.

Digital archivists run up against mismatched expectations:

But did you know that a large majority of web users think that when sharing their thoughts, images, and videos online they are going to be preserved in perpetuity? No matter how many licenses the general population clicks “Agree” to, or however many governing policies are developed that state the contrary, the millions of people sharing their content on websites still believe that there is an implicit accountability that should be upheld by the site owners.

A couple of alternatives to the hamburger menu | Kenan Yusuf

Two (similar) patterns for responsive navigation that don’t involve sweeping everything behind a hamburger icon.

When I’ve experimented with auto-overflowing horizontal patterns like this, I’ve found that a judiciously-placed box shadow can give a nice affordance.

The Useless Web

The best of the web is just one click away.

CSS Pseudo // Speaker Deck

Everything you ever wanted to know about CSS pseudo-classes (and pseudo-elements).

Progressive Web Apps have leapfrogged the native install model … but challenges remain

While many challenges remain, the good news is … it’s progressive. Developers can already see the benefits by sprinkling in these technologies to their existing websites and proceed to build on them as browsers and operating systems increase support.

Building a Device Lab

The book by Destiny Montague and Lara Hogan is online for free with a Creative Commons licence:

Learn to build a device lab with advice on purchasing, power solutions, and much more in this handy pocket guide.

Clarity Conf: Brad Frost

I wish I could’ve made it to the Clarity conference—I had a Salter Cane gig to play—but luckily for me, Brad took lots of notes.

Future Simple Steps - where to find your favourite ex-Five Simple Steps authors and their books

Now that Five Simple Steps has closed down, the individual authors are in charge of distributing their own books. This site links to all of those books.

Design Patterns on CodePen

Well, this is rather wonderful! A one-stop-shop for exploring UI patterns on CodePen …this is going to be time sink.

Don’t Forget The Web

Here’s the video of the talk I gave at Facebook’s Mobile @Scale event where I was the token web guy. The talk is pretty short but there’s some fun Q&A afterwards.

A Personal History of the Text Adventure – Read-Only Memory

Naomi Alderman:

The text adventure, like poetry, tends to attract a small band of devoted fans rather than hundreds of millions of casual players. And yet, those who care about writing know that they are where the form starts; and I can’t help feeling that videogames in general would be better if they took as much care over their words, and over their narratives, as text adventures do.

simpl.info

This is a very handy resource—a collection of minimum viable implementations of HTML5 features and JavaScript APIs.

RAFP: a proposal for performance measurements through requestAnimationFrame - QuirksBlog

Here’s an interesting proposal from ppk: use requestAnimationFrame to gauge how performant a browser in behaving and then enhance accordingly.

Should I use Grid or Flexbox?

Rachel compares two CSS layout modules; Grid and Flexbox. This distinction is crucial:

Flexbox is essentially for laying out items in a single dimension – in a row OR a column. Grid is for layout of items in two dimensions – rows AND columns.

№ ⸮ ‽ ℔ ⁊ ⸿  — or, a cavalcade of characters – Shady Characters

The numero sign, the reversed question mark, the interrobang, the l b bar symbol, the Tironian et, the capitulum, and the ironieteken.

Microsoft Cognitive Services: Introducing the Seeing AI app - YouTube

Seems like ages since I’ve seen Saqib. He’s been working on something very nifty indeed:

…Seeing AI, a research project that helps people who are visually impaired or blind to better understand who and what is around them. The app is built using intelligence APIs from Microsoft Cognitive Services…

Front-End Style-Guides: Definition, Requirements, Component Checklist

You know that front-end pattern libraries have hit the mainstream when the Nielsen Norman Group get in on the action.

As ever, I’m not sure their sweeping generalisations can be applied to every project, but their checklist approach makes for a good starting point.

NPM & left-pad: Have We Forgotten How To Program? | Haney Codes .NET

Not to sound all “Get off my lawn, kids!” but I think there might be something to this. When you’re requiring hundreds of dependencies to do little tasks that you should be able to code yourself, something’s not right.

But, for the love of all that is programming, write your own bloody basic programming functions. Taking on dependencies for these one-liners is just nuts.

That said, you don’t want reinvent hundreds of wheels either (as most of the comments point out). There’s a balance to be had.

Thomas Fuchs proposes a middle ground for JavaScript.

CSS and Scalability

Some good thoughts in here about writing scalable CSS …although the finger-pointing at sites (that are shipping at scale) reminds me a bit of that quote by copywriter Paul Butterworth: “Where the heck were you when the page was blank?”

toddmotto/public-apis: A collective list of public JSON APIs for use in web development.

Remember mashups? Mashups were cool.

If you fancy partying like it’s nineteen ninety web 2.0, here’s a growing list of public APIs that return JSON.

Dirty Tricks From The Dark Corners Of Front-End // Speaker Deck

Vitaly calls them dirty tricks but this is a handy collection of front-end development techniques. They’re not really dirty …just slightly soiled.

Mapping Mountains · Mapzen

Everything you never wanted to know about conveying elevation information on maps, delivered in Peter’s always-entertaining style and illustrated with interactive examples.

RFC 7763 - The text/markdown Media Type

Markdown gets its own media type: text/markdown.

Angola’s Wikipedia Pirates Are Exposing the Problems With Digital Colonialism | Motherboard

The street finds its own uses for colonial internet practices:

Because the data is completely free, Angolans are hiding large files in Wikipedia articles on the Portuguese Wikipedia site (Angola is a former Portuguese colony)—sometimes concealing movies in JPEG or PDF files. They’re then using a Facebook group to direct people to those files, creating a robust, completely free file sharing network.

Blandly. A Full-Service Integrated Digital Blanding Agency

Well, we might as well bin the Clearleft website rebranding project. Somebody has beaten us to it.

The copy & paste guide to your first Service Worker

Minimum viable Service Worker tutorial. Copy, paste, and don’t ask questions.

Also:

Exhibit A

Exhibit B

Salter Cane, The Self Help Group, Thursday 31st March - Brighton Source

Salter Cane play a dark, melancholic folk-rock, full of doom and darkness, murder and mayhem.

If that sounds like your idea of a fun time, come along to the Latest Music Bar in Brighton next Thursday.

Julie Rubicon

The act of linking to this story is making it true.

“I don’t think there’s any law against this,” I said. How could there be a law against something that’s not possible?

Introduction to Ember FastBoot by Tom Dale on Vimeo

I’m so happy that Ember is moving to a server-side rendering model. Not only that, but as Tom points out here, it’s crucial that the server-side rendering is the default and the client-side functionality than becomes an enhancement.

San Andreas State: Animal Cam

An immortal deer wanders the world of Grand Theft Auto for all eternity. It’s remarkably calm and relaxing.

Helium Dreams - The New Yorker

This article on airships has my new favourite sentence in the English language:

During the First World War, Germany and its allies ceased production of sausages so that there would be enough cow guts to make zeppelins from which to bomb England.

Of course it was Simon who pointed me to this. Of course.

Microsoft’s Radical Bet On A New Type Of Design Thinking

On universal design: “We’re reframing disability as an opportunity.”

One day someone will write a history of the Internet, in which that great series of tubes will emerge as one long chain of inventions not just geared to helping people connect in more ways, but rather, to help more and more types of people communicate just as nimbly as anyone else.

Web Manifest Validator

If you have a manifest.json file for your site, here’s a handy validator.

Webfonts

I love good typography but I have to agree with the sentiment expressed here.

System fonts can be beautiful. Webfonts are not a requirement for great typography.

Progressive web apps: the long game

Remy sums up the psychological end goal of progressive apps (HTTPS + Service Worker + manifest JSON file) prompting an add to home screen action:

This high bar of entry will create a new mental model for our users.

If I add this app to my home screen, it will work when I open it.

It’s a shame that this charge to turbo-boast the perception of the web on mobile is a bit one-sided: I would love to see Apple follow Google’s lead here. But if Android succeed in their goal, then I think iOS will have to follow suit just to compete.

Bruce Lawson’s personal site  : One weird trick to get online — designers hate it!

I don’t care about Opera Mini (I’m not its Product Manager). In the same way, I don’t care about walking sticks, wheelchairs, mobility scooters or guide dogs. But I care deeply about people who use enabling technologies — and Opera Mini is an enabling technology. It allows people on feature phones, low-powered smartphones, people in low-bandwidth areas, people with very small data plans, people who are roaming (you?) connect to the web.

Cosmic Surgery by Alma Haser — Kickstarter

Well, here’s an art project with a difference: it comes with a web site built by Josh, a story written by Piers Bizony, and a book made by Emily.

PX, EM or REM Media Queries? by Zell Liew

Just recently on a Clearleft project, some of us were discussing whether there was a reason not to use rems instead of ems for media queries. Apart from one older browser implementation difference, we couldn’t come up with much.

Some in-depth research here supports the use of em values for media queries. Very good to know.

Managing Mobile Performance Optimization – Smashing Magazine

Some solid sensible advice on optimising performance.

Reasons to Use Ad-Blockers – Coyote Tracks

If you think people using ad blockers are just anti-ad or want to freeload on publishers, you’re completely missing the point. The online advertising industry has been abusing users for 20 years now, and we’re sick of it.

A Helpful Diagram

Blogging through Venn diagrams.

Service Workers: Save your User’s Data using the Save-Data Header | Dean Hume

I hadn’t heard of the save-data header. This article shows how you can use a Service Worker to sniff for it and serve up smaller assets, but I’m guessing you could also sniff for it from the server.

CSS Flexbox Is Entirely Logical (Almost) / Paul Robert Lloyd

Paul is digging deep into flexbox and finding it particularly useful for internationalisation …but there are still some gotchas.

Web Progressions

This looks a good (free!) event in London all about the latest browser goodies, all wrapped in the “progressive apps” buzzword.

Alas, I’ll be making my way back from Indie Web Camp Düsseldorf the day this is on.

Instagram-style filters in HTML5 Canvas | Viget

Una’s [Instagram filters in CSS}(https://github.com/una/CSSgram) are great, but the browser support for CSS filters isn’t as good as, say, the browser support for canvas. Here’s a clever bit of scripting to polyfill filters using canvas.

Introducing A11y Toggle

Here’s a bit of convergent evolution: Hugo’s script is similar to what I wrote about recently.

He also raises a point that Kevin mentioned:

I would like to investigate on the details and summary elements as they are basically a native implementation for content toggles.

For some reason details never got much browser love, even though it’s clearly paving a well-trodden cowpath.

THE WALK OF LIFE PROJECT

The thesis: any film is improved by playing Walk Of Life by Dire Straits over the ending.

The proof: this website.

(this is absorbing and brilliant)

ECSS

Enduring CSS (not int the sense of “put up with” but in the sense of “long-lasting”) is a new book by Ben Frain all about writing and maintaining modular reusable CSS.

You can read the whole thing for free online or buy an eBook.

Jon Aizlewood | Visual inventories for agile design

Jon outlines his technique for keeping “the 30,000 foot” view when patterns are coalescing during a project.

See also: Andy P.’s experience of working with Jon this way.

Widespread XSS Vulnerabilities in Ad Network Code Affecting Top Tier Publishers, Retailers - Randy Westergren

An a revelation that comes as a shock to absolutely no one, the JavaScript injected by ad networks can be used as a vector for attack.

This industry-wide problem serves as a great example of how 3rd-party components can compromise the security of an otherwise secure site.

One more reason to install an ad blocker.

Design is choice by Jaime Caballero

A lovely outlook on designing with progressive enhancement:

There will always be users coming from places you didn’t expect, using devices you didn’t test for.

Simon McManus - YouTube

Come for the videos of EnhanceConf. Stay for the skateboarding beagle.

Material Conference 2016 by Joschi Kuphal & Brian Suda — Kickstarter

I’m am soooo there!

Iceland, July 22nd: a conference about the material of the web …right up my alley.

You can get a ticket by backing the project on Kickstarter. Be sure to check out all the options.

See you in Reykjavík!

IndieWeb — Deine Daten. Dein Netz. | Vortrag auf dem Webkongress Erlangen 2016 | Joschi Kuphal

It’s in German, but this presentation by Joschi is a great introduction to Indie Web ideas and building blocks.

ForEveryone.net

A film about Tim Berners-Lee and the World Wide Web. Details are scarce right now but watch this space.