Tags: a

Responsive design testing tool – Viewport Resizer

A handy little bookmarklet for quickly checking how a site might look at different screen sizes, and you can customise it to use whichever screen sizes you like.

Learn CSS Selectors interactively

This visual approach to demonstrating how CSS selectors work is really handy.

Peter Nixey - How to be a great software developer

I’m not sure if I agree completely with every point, but this is a great shortlist of things you can do to make your code more resilient and understandable (thereby making you, by any sensible definition, a better programmer).

How America’s Leading Science Fiction Authors Are Shaping Your Future

Eileen Gunn writes in the Smithsonian magazine on the influence of science fiction.

Science fiction, at its best, engenders the sort of flexible thinking that not only inspires us, but compels us to consider the myriad potential consequences of our actions.

The Indieweb | Parallel Transport

or: how I learnt to stop worrying and love the blog.

This is a really nice introduction to the basics of the Indie Web …with nice illustrations too.

webcompat.com

I like this idea. It would be nice to see it catch on…

  1. Report a bug for any website or browser.
  2. Our team of volunteers diagnoses the bug.
  3. We send a fix to the site owner or browser.

Mediating Music by Rudiger Meyer

A thoughtful in-depth piece that pulls together my hobby horses of independent publishing, responsive design, and digital preservation, all seen through the lens of music:

Music, Publishing, Art and Memory in the Age of the Internet

New product opportunities for the Internet of Normal Things | Berg Blog

I like Matt’s observation here that the simple combination of a barebones data format like HTML delivered over HTTP is a good-enough low-level API for joining up all kinds of internet-connected things.

In the last 60 years, the biggest software platform for interop and integration – for new products, services, businesses, and value creation – has not been Android, or iOS, or Windows, or the PDP-11. The biggest and best platform has been the web.

One implication is that successful products are not necessarily those with seamless, beautiful, tightly-controlled “experiences”, but rather the ones that are capable of talking to each other.

Small things, loosely joined.

James Bridle — Where You Are

The GPS system is a monumental network that provides a permanent “YouAreHere” sign hanging in the sky, its signal a constant, synchronised timecode.

Wearables versus there-ables.

Some interesting thoughts that follow on nicely from Scott Jenson’s ideas around just-in-time interactions:

What if the technology was actually already in the room when we got there? Maybe that’s the kind of Internet-of-things that will be more sustainable and will win long-term.

The Sticky Pagination Fixer

If you insist on having a fixed header on your site, please, please, please add this script to your site. I often use the spacebar to page down so this would be a life-saver.

Avoiding ‘words to avoid’ | Inside GOV.UK

I love the thinking behind this plugin that highlights the weasel words that politicians are so found of.

Designing in the Borderlands by Frank Chimero

This is a wonderful piece of writing and thinking from Frank. A wonderful piece of design, then.

A personal view on generalists and trans-media design

Tobias Frere-Jones: My Kind of Neighborhood

Some sleuthing uncovers an interesting twist in New York’s psychogeography:

All of the buildings have been demolished, and in some cases the entire street has since been erased. But a startling picture still emerged: New York once had a neighborhood for typography.

Meyrin: CERN Terminal Font « optional.is/required

Here’s the font that Brian created at the line-mode browser hack day at CERN.

Creating Style Guides · An A List Apart Article

A great article by Susan on getting started with creating a styleguide for any project.

I’ve seen firsthand how style guides save development time, make communication regarding your front end smoother, and keep both code and design consistent throughout the site.

Airbag Intl. / Archives

Greg says:

We need a web design museum.

I am, unsurprisingly, in complete agreement. And let’s make lots of copies while we’re at it.

Daring Fireball: Rethinking What We Mean by ‘Mobile Web’

John echoes some of my recent thinking about what qualifies as a web browser and, by extension, what qualifies as the web:

We shouldn’t think of “the web” as only what renders in web browsers. We should think of the web as anything transmitted using HTTP and HTTPS. Apps and websites are peers, not competitors. They’re all just clients to the same services.

That said, I think he is perhaps underestimating the power of URLs. Addressability—particularly over an extended time period—remains the powerful feature of the web.

Google Night Walk

A nice stroll around Marseilles at night without any of the traditional danger.

FIRST web page viewed by “FIRST” browser via c.1965 modem and terminal - YouTube

What a wonderful way to go online!

Hemingway

A useful text editor that analyses your writing for excess verbiage and sloppy construction. It helps you process your words, as it were.

The Pastry Box Project: The Values of the Web by Brad Frost

I don’t work in the tech industry. I work on the Web.

Readmill Epilogue - Readmill

If your startup gets acquired and shut down by a larger company, this is the way to announce it—no “we’re excited to announce”; no “incredible journey”. Instead there’s an apology and regret (which is exactly what your users will be feeling).

Confessions Of A CSS Expert

Funny because it’s true:

The thing I regret the most is how my class addiction affected my relationship with HTML.

Rise of the IndieWeb - Amber Case - FutureTalks - YouTube

A great talk by Amber on the history of personal publishing and the ideas and technologies driving the Indie Web movement.

A Modern Designer’s Canvas | Smashing Magazine

The transcript of Malarkey’s recent talk. Good thoughtful stuff.

Patatap

Fun!

Layout in Flipboard for Web and Windows — Flipboard Engineering

A fascinating look at how Flipboard combines art direction and algorithms to generate layouts.

Council Toolkit

A reusable set of responsive patterns and templates for UK councils.

Bruce Lawson’s personal site  : Notes on accessibility of Web Components

Bruce’s thoughts on ensuring accessibility in Web Components. He thinks that the vocabulary of ARIA is up to the job, so that’s good enough for me.

Section for peer-reviewed Custom Elements · Issue

Some sensible thoughts from Addy on how Web Components might be peer-reviewed.

Aerotwist - Web Components and the Three Unsexy Pillars

A healthy dose of scepticism about Web Components, looking at them through the lenses of accessibility, security, and performance.

I share some of this concern: Web Components might look like handy ready-made out-of-the-box solutions, but the truth is that web developers have to do much more of the hard graft that was traditionally left to the browser.

Cleanup of Silicon Valley Superfund site takes environmental toll | The Center for Investigative Reporting

A terrific piece of well-illustrated data-driven journalism.

Spotlight – a pure JavaScript application for GOV.UK Performance | Technology at GDS

A nice tale of progressive enhancement from gov.uk, talking about how they made their analytics dashboards (which are public, by the way) using JavaScript on the server and on the client.

I believe this is what the kids are calling isomorphic JavaScript.

Type Connection

A cute approach to pairing typefaces: treat it like a dating game.

Making ubuntu.com responsive: intro | Ubuntu Design Blog

Yaili is documenting the process of retrofitting ubuntu.com to be responsive. I’ll be avidly reading each post in this series.

Meet the Geniuses on a Quixotic Quest to Archive the Entire Internet | TIME.com

A short video featuring Jason Scott and Brewster Kahle. The accompanying text has a shout-out to the line-mode browser hack event at CERN.

[this is aaronland] because ephemera are just memories that didn’t try hard enough

I like the way Aaron thinks. I also like the way he makes.

Our Comrade The Electron

This is a wonderful piece by Maciej—a magnificent historical narrative that leads to a thunderous rant. Superb!

Device-Agnostic by Trent Walton

A terrific post from Trent, touching on all the important facets of building for the web: universality, progressive enhancement, performance …great stuff!

BBC Radio 4 Extra - The Hitchhiker’s Guide to the Galaxy - The Hitchhiker’s Guide to the Galaxy Game - 30th Anniversary Edition

One of the most fiendish user-unfriendly (but oh-so-witty) adventure games of all time is now online for you to enjoy with some added graphical flourishes.

Learning about, and deploying IndieWeb tools | Dan Gillmor

Well, this is pretty nifty: Dan Gilmour is at Indie Web Camp in San Francisco and he’s already got some code up and running on his site.

Y’know, I’m not missing South by Southwest in the slightest this year …but I’m really missing Indie Web Camp.

Particle Fever

I can’t wait to see this documentary on the monumental work at CERN.

The Pastry Box Project, Scott Jehl, Friday, 7 March 2014

Scott writes an absolutely spot-on skewering of the idea that progressive enhancement means you’re going to spend your time catering to older browsers. The opposite is true.

Progressive Enhancement frees us to focus on the costs of building features for modern browsers, without worrying much about leaving anyone out. With a strongly qualified codebase, older browser support comes nearly for free.

If the Moon Were Only 1 Pixel - A tediously accurate map of the solar system

A lovely visualisation that combines two of my loves: space, and the correct use of the subjunctive.

Can This Alternative Smartphone Deliver Real Privacy to the Masses? | Co.Exist | ideas + impact

Fast Company features Aral’s tantalising Indie Phone project that he’s been working on at Clearleft Towers.

Good to see Oskar the dog getting the recognition he deserves.

On the top floor of a commercial building in the old maritime city of Brighton, England, Balkan has been quietly hacking away at Indie Phone for the last several months with the rest of his team—Victor Johansson, an industrial designer, Laura Kalbag, a professional web designer (and Balkan’s partner), and her Husky, Oskar.

Aerotwist - My Performance Audit Workflow

Excellent tips and tools from Google’s Paul Lewis on performance testing.

Mosaic - Wellcome Trust

I did some consulting with the Wellcome Trust on this new magazine-like project, and it’s great to see it go live—excellent stories of science, all published under a Creative Commons licence.

Mobile-first and IE8 Solution – Introducing grunt-legacssy (Updated) | Robin Plus

A handy way of automating the creation of old-IE stylesheets using Grunt. This follows on from Jake’s work in using preprocessors and conditional comments to send a different stylesheet to IE8 and below—one that doesn’t contain media queries. It’s a clever way of creating mobile-first responsive sites that still provide large-screen styles to older versions of IE.

CSS A/Z

The alphabet illustrated with CSS.

Node School in Brighton

Tom is running a Node School at 68 Middle Street on the evening of March 27th. I plan to attend and finally wrap my head around all this Node stuff.

4 Million Ravelers

A lovely bit of data celebration from Ravelry on the occasion of their 4 millionth user.

I’ve said it before and I’ll say it again: if you want to see a successful example of a real social networking site, don’t look at Facebook; look at Ravelry.

Platformed. — Unstoppable Robot Ninja

The importance of long-term thinking in web design. I love this description of the web:

a truly fluid, chaotic design medium serving millions of imperfect clients

Sharing Podcasts - daverupert.com

Great suggestions from Dave for podcasters keen on allowing easier sharing.

Oh, how I wish Soundcloud would do this and be less of an audio roach motel!

being a client (tecznotes)

Mike writes about what it was like being a client for a change. After working with him on the Code for America project, I can personally vouch for him as a dream client:

Clearleft’s pattern deliverables are the special-special that made the final work so strong. Jon Aizlewood’s introduction to the concept convinced me to contact Clearleft. Jeremy Keith’s interest in design systems kicked off the process, and Anna Debenham’s fucking rock star delivery brought it all home.

Jonathan T. Neal | Thoughts on Media Queries for Elements

Some good ideas on the idea of element-level media queries, a feature that developers are crying out for and browser makers are saying is too hard. This post has some thoughts on how to deal with the potential issues.

Responsive tables

An interesting pattern for handling complex data tables in responsive designs. It’s a desktop-down approach, but pretty smart.

madgex/lazy-ads

Great stuff from James Wragg and the gang at Madgex: a way of lazy-loading ads for responsive sites without messing with the ad code.

Why we left AngularJS: 5 surprisingly painful things about client-side JS

It’s funny: while I agree with the warning that this article provides (“rich client-side JavaScript frameworks aren’t a good fit for every site, especially content sites”), the reasons given here aren’t the reasons that I have any issues with.

22.7 Million Pixels Of Raw Slideshow Power

This may be the only slideshow on a website I’ve ever actually bothered to click all the way through.

Label Pattern - CodePen

This looks like a nifty take on the ol’ using-labels-like-placeholders pattern for forms. I still prefer to have a label visible at all times, but this seems like a nice compromise.

jrcryer/generator-pattern-primer

Nice! A Yeoman generator for scaffolding your own pattern primer.

(Those are just words, aren’t they? Y’know, as opposed to a sentence that would actually make sense to most right-thinking people.)

Approaching Principles for Independent Archives | Equivalent Ideas

Thoughts from Luke Bacon on two topics that fascinate me: archives and design principles.

I’ve added these principles to my collection.

Labcase - Open Device Lab, in a case.

This is a really great idea—a portable open device lab. It’s UK-based and you can hire it out for a few days at a time.

More details here.

Robin Rendle › A Visual Lexicon

Some great thoughts in here about web development workflow and communication between designers and developers.

I believe that the solution is made up of a variety of tools that encourage conversation and improve our shared lexicon. Tools such as styleguides, pattern libraries, elemental and modular systems that encourage access not only by developers, but by designers, shareholders and editors as well.

Origins of Common UI Symbols

A lovely little tour of eleven ubiquitous icons.

Getting Started With Pattern Libraries ∙ An A List Apart Blog Post

A great post from Anna on the front-end styleguides she’s worked on for A List Apart and Code for America. ‘Twas a pleasure working with her on the Code for America project.

A-mer-ica! Fuck yeah!

Early History of HTML - 1990 to 1992

A fascinating look at the early history of HTML, tracing its roots from the dialect of SGML used at CERN.

Notes on a responsive Guardian redesign – Lozworld™

A great write-up of the design process behind The Guardian’s responsive site. It’s really gratifying to see UX designers talking about performance.

Play Steamshovel Harry, a free online game on Kongregate

Such a classic game, well worth playing again.

Kyle Bean - Whistleblower

If you picked up the Guardian this weekend, you’ll have seen some brilliant work by Kyle on the cover (and inside) the magazine section.

2001: A Space Odyssey | Typeset In The Future

Okay, this might just be my new favourite blog:

This site is dedicated to all aspects of movie and TV typography and iconography as it appears in Sci-Fi and fantasy movies.

The first post is all about 2001, and the writing is just the right shade of fun.

I’m already looking forward to future posts. (See what I did there?)

The Pastry Box Project: Finish your projects

Words of wisdom from Seb when it comes to personal projects: finish what you start.

Most people don’t finish their projects so simply by getting it done, you’re way ahead of the crowd.

Realizing One Web

A nice look at responsive design, progressive enhancement, and the principle of One Web.

You Might Not Need jQuery

A handy resource if you’re used to using jQuery for everything but you want to try going JavaScript commando.

Don’t get me wrong: jQuery is great, but for a lot of projects, you might not need 90% of the functionality it provides. So try starting with vanilla JS and only pulling in jQuery if and when you need it.

Laser Age / The Dissolve

A great series of articles on the sci-fi films of the ’60s and ’70s:

The Laser Age examines a rich period in the history of science-fiction filmmaking that began in the late 1960s and faded away by the mid 1980s.

…all wrapped up in a nice responsive design too.

Best Collaborative Project : The Net Awards 2014

Well, this is nice: the Line-mode browser hack has been nominated in the Best Collaborative Project in the Net awards.

But 24 Ways has also been nominated, and let’s face it, that really is the best collaborative project.

A List Apart Pattern Library

Another front-end style guide for the collection. This time it’s from A List Apart. Lovely stuff!

Why is Progressive Enhancement so unpopular? — All in the head

Like Drew, I’ve noticed some real hostility to the idea of progressive enhancement recently. Like Drew, I don’t really understand where this attitude comes from. It’s not like progressive enhancement prevents you from doing anything you would do otherwise: it’s just another way of approaching the way you build for the web.

I hope I’m wrong, but I suspect that some developers are letting their tools dictate their principles—the tail wagging the dog (where the tail is Angular, Ember, etc.).

Scrolling is easier than clicking

This observation by Josh seems obvious in hindsight (all the best insights do), but there’s a powerful idea there:

So here is the real difference: scrolling is a continuation; clicking is a decision. Scrolling is simply continuing to do what you’re currently doing, which is typically reading. Clicking, however, is asking the user to consider something new…is this new thing the same as what I’m already doing, or something new?

Curiosity Hub

This nifty place in Brighton is just down the street from me:

Our classes allow kids to get creative with exciting, cutting-edge technology and software.

There are no small changes | Inside Intercom

Des is right, y’know.

Scope grows in minutes, not months. Look after the minutes, and the months take care of themselves.

kimono : Turn websites into structured APIs from your browser in seconds

This tool for building ScrAPIs is an interesting development—the current trend for not providing a simple API (or even a simple RSS feed) is being interpreted as damage and routed around.

speaking.io

Some easily-digestible nuggets of advice on public speaking.

A Dive Into Plain JavaScript

A nice introduction to writing vanilla JavaScript, especially if you’re used to using jQuery.

DevDocs

A handy one-stop-shop for documentation on web technologies.

Fast Enough - TimKadlec.com

Some sensible thinking from Tim on measuring performance gains.

funzeye/Web-Thang

Web-Thang is a chrome extension that replaces all instances of the term ‘web thang’ or ‘web thang/web thang’ with the term ‘web thang’.

Bulletproof Accessible Icon Fonts | Filament Group, Inc., Boston, MA

An in-depth look at using icon fonts without any nasty edge-cases ruining your day.

Donate Your Dusty Device

Got an old phone lying around that you don’t need any more? Why not donate it to a device lab? You know it makes sense.

Operation War Diary

A collaboration between Zooniverse and the Imperial War Museum. Now citizen scientists can become citizen historians by classifying diaries from World War One.

An Ingeniously Designed Speaker That Creates Crowdsourced Playlists | Wired Design | Wired.com

Hey, look! The Clearleft interns are in Wired. That’s nice.

How did we end up with a centralized Internet for the NSA to mine? - O’Reilly Radar

A great analysis of how centralised hubs are the easiest attack vector for bad actors like the NSA and GCHQ:

How did we get such industry concentration? Why is a network famously based on distributed processing, routing, and peer connections characterized now by a few choke points that the NSA can skim at its leisure?

Endangered species of the Web: the Link by Christian Heilmann

Chris is putting together a series about the neglected building blocks of the web. First up; the much-abused hyperlink, the very foundation of the world wide web.

It is the most simple and most effective world-wide, open and free publishing mechanism. That it is why we need to protect them from extinction.

Photography, hello — Software ate the camera, but freed the photograph by Craig Mod

Craig recently had a piece published in the New Yorker called Goodbye, Cameras. It’s good …but this follow-on piece on his own site is truly wonderful.

Read. Absorb. Ponder.

Being close to the network does not mean being on Facebook, thought it can mean that, too. It does not mean pushing low-res images to Instagram, although there’s nothing wrong with that. What the network represents, in my mind, is a sort of ledger of humanity. The great shared mind. An image’s distance to it is the difference between contributing or not contributing to that shared ledger.

The Long Web - Jeremy Keith at FOWD NYC 2013 - YouTube

There were some technical difficulties with microphones, and it was a bit weird presenting inside a cinema, but I still had fun yapping on at last year’s Future Of Web Design in New York.

Scrap Ideas — David Cole

David Cole shares the ideas for projects he would like to develop further, but probably never will. I like this a lot (and there are some great ideas in here).

New service: WebMentions for static pages

Want to implement webmentions but you’re using static pages a-la Jekyll? No problem. Pelle’s got you covered.

Screen shots of computer code

There’s something very satisfying about this televisual sleuthing:

Images of the computer code appearing in TV and films and what they really are.

The Avangelist | What happens to my data when I die?

Having experienced the death of a friend, I wonder how many have considered the ghosts in the machine.