Tags: a

An Event Apart News: AEA Resources: Articles, Links, and Tools From An Event Apart Chicago 2014

Hyperlinks relating to the talks delivered at An Event Apart in Chicago, including those connected to my rambling musings on progressive enhancement.

A Single Div

Wonderfully creative use of CSS gradients, borders, box-shadows, and generated content.

Opera signs licensing agreement with Microsoft - Opera Software

Opera Mini is about to be installed as the default browser on a few more million phones.

You might want to think about how your Angular-powered JavaScript-required web thang works in one of the world’s most popular web browsers.

How to secure your site in an afternoon - Josh Emerson

Josh walks through the process he took to enabling SSL on his site (with particular attention to securing assets on CloudFront).

A device agnostic approach to inlining CSS | Blog | Decade City

I very much agree with Orde’s framing here: I don’t think it makes much sense to talk about “above the fold” CSS …but it makes a lot of sense to talk about critical CSS.

And, yeah, it’s another example of progressive enhancement.

Improving accessibility on GOV.UK search | Technology at GDS

Alice Bartlett shares her experience of getting aria-live regions to work in a meaningful way.

Pop Sonnets

Modern pop songs retold as Shakespearian sonnets.

Jeremy Keith on the importance of creating products that last | netmag | Creative Bloq

I was interviewed for a feature in issue 257 of net magazine.

In this interview, I pause. And continue.

CSS Guidelines – High-level advice and guidelines for writing sane, manageable, scalable CSS

Harry has written down his ideas and recommendations for writing CSS.

The shoebox - a manifesto for transmat.io

Glenn eloquently gives his reasons for building Transmat:

When I was a child, my brothers and I all had a shoebox each. In these we kept our mementoes. A seashell from a summer holiday where I played for hours in the rock pools, the marble from the schoolyard victory against a bully and a lot of other objects that told a story.

The Internet’s Original Sin - The Atlantic

Ethan Zuckerman riffs on Maciej’s talk at Beyond Tellerrand about the vortex of nastiness that we’ve spiralled down thanks to the default business model of the web: advertising.

A Ficly Farewell on The Writer’s Room - Official Ficly Blog

Now this is how to shut down a service: switch to a read-only archive, and make the codebase (without user credentials) available on Github.

Heydon Pickering | Effortless Style | CSS Day on Vimeo

Remember when I was talking about refactoring the markup for Code for America? Well, it turns out that Heydon Pickering is way ahead of me.

He talks about the viewpoint of a writer (named Victoria) who wants to be able to write in Markdown, or HTML, or a textarea, without having to add classes to everything. That’s going to mean more complex CSS, but it turns out that you can do a lot of complex things in CSS without using class selectors.

There are slides.

RWD Podcast Episode #15 : Jeremy Keith — Responsive Web Design

I had a good ol’ chat with Justin Avery from Responsive Web Design Weekly. We talk about performance, Responsive Day Out, and yes, progressive enhancement.

Tantek Çelik - The once and future IndieWeb - YouTube

Tantek’s great talk on the Indie Web from Web Directions Code in Melbourne earlier this year.

Seeing Like a Network — The Message — Medium

How computers work:

One day, a man name Alan Turing found a magic lamp, and rubbed it. Out popped a genie, and Turing wished for infinite wishes. Then we killed him for being gay, but we still have the wishes.

Then we networked computers together:

The network is ultimately not doing a favor for those in power, even if they think they’ve mastered it for now. It increases their power a bit, it increases the power of individuals immeasurably. We just have to learn to live in the age of networks.

We are all nodes in many networks. This is a beautiful description of how one of those networks operates.

Ind.ie Summit - Video 8 - Jeremy Keith on Vimeo

Here’s the very brief talk I gave about Indie Web Camp at Aral’s Indie Tech Summit here in Brighton a little while back (I was in the slightly-demeaningly-titled “stop gaps” section).

If you like what you hear, come along to the next Indie Web Camp—also in Brighton—in just over three weeks.

The Internet of Things Will Ruin Birthdays — The Message — Medium

A peak at a near-future mundane dystopia from Joanne McNeil that reminds me of Brian’s spime story

Doing is knowing: “Sweet Jane” and the Web — Wordyard

When Rock’n’roll and Web 2.0 collide, the result is not pretty.

Web Archeology - daverupert.com

A bit of web history reacted by Paravel: the Microsoft homepage from 1994. View source to see some ooooold-school markup.

Ah, memories!

The U.S. Digital Services Playbook

Design principles for the newly-formed USDS. I’ve added these to my collection.

UX How-To with Luke Wroblewski - YouTube

A fantastic collection of short videos from Luke on interaction design for devices of all shapes and sizes.

Make yourself a nice cup of tea, hit “Play all”, sit back, relax and learn from the master.

A Spacecraft for All: The Journey of the ISEE-3

A nice bit of interactive citizen science storytelling from Google.

Note: if you have Adblock Plus installed, this won’t load at all. Funny that.

Tablesaw - A Flexible Tool for Responsive Tables

Those lovely people at Filament Group share some of their techniques for making data tables work across a range of screen sizes.

On Blogging - Plausible Thought

If you enjoy writing, or want to enjoy writing, just do it. You’ll probably worry that you have nothing to say, or that what you write is terrible, or that you couldn’t possibly write as well as Neil Gaiman. But silence those voices, get your head down and hit publish on something. Anything. And then do it again. And again.

Pure CSS parallax scrolling websites | Keith Clark

This is clever: a way to achieve parallax scrolling without JavaScript—much more performant.

Of course, you might want to ask yourself why you want a parallax effect in the first place.

Drip, Drop, Groundswell

Cole Peters calls upon designers and developers to realise the power they have to shape the modern world and act accordingly.

It is in those of us who work in tech and on the web that digital privacy may find its greatest chance for survival. As labourers in one of the most pivotal industries of our times, we possess the knowledge and skills required to create tools and ecosystems that defend our privacy and liberties.

I don’t disagree, but I think it’s also important to recognise how much power is in the hands of non-designers and non-developers: journalists, politicians, voters …everyone has a choice to make.

Open standards for contact details and calendar events | Technology at GDS

I’ve been suggesting h-event and h-card as open standards for UK government sites.

We Work in a World of Assumptions – The Pastry Box Project

Dan Donald gets to the heart of progressive enhancement:

Assumptions in themselves don’t have to be inherently bad but let’s recognise them for what they are. We know very little but that can hopefully enable us to be far more flexible and understanding in what we create.

The Web Manifest specification | HTML5 Doctor

The Web Manifest spec is still very much in draft, but it’s worth reading through Bruce’s explanation of it now. Basically, it will provide a way for us to specify in one external file what we currently have to specify in umpteen meta tags and link elements.

A lot can change in 6 years - Allen Pike

An astute comparison of the early years of the web with the early years of the app store. If there’s anything to this, then the most interesting native apps are yet to come. App Store 2.0?

The Mobile Web should just work for everyone - IEBlog

One more reason why you should never sniff user-agent strings: Internet Explorer is going to lie some more. Can’t really blame them though—if developers didn’t insist on making spurious conclusions based on information in the user-agent string, then browsers wouldn’t have to lie.

Oh, and Internet Explorer is going to parse -webkit prefixed styles. Again, if developers hadn’t abused vendor prefixes, we wouldn’t be in this mess.

Events « Brighton Digital Festival

There are 90 events happening in September during the Brighton Digital Festival (including dConstruct, of course). From Maker Faire to an evening of slash fiction, there’s something for everyone.

How we make RWD sites load fast as heck

Scott shares the code that Filament Group are using to determine which style declarations are critical (and can be inlined) and which are non-critical (and can be loaded asynchronously). It makes quite a difference in perceived performance.

By the way, I really, really like the terminology of “critical” and “non-critical” CSS, rather than “above the fold” and “below the fold” CSS.

RWD Bloat - daverupert.com

Dave wanted to figure out if having a responsive site necessarily meant taking a performance hit, so he ran the numbers on his own site. It turns out all of performance-related issues are not related to responsive design.

Full-width pinned layouts with flexbox

Zoe uses one little case study to contrast two different CSS techniques: display-table and flexbox. Flexbox definitely comes out on top when it comes to true source-order independence.

The Virtual Haircut That Could Change the World | Design | WIRED

A nice profile of BERG’s Little Printer. That Matt Webb is a smart cookie. He is also a very thoughtful cookie.

Jeremy Keith - Pencil vs Pixel

I met Cesar at An Event Apart in San Diego earlier this year. We had a nice lunchtime chat and he suggested that I come on his show, Pencil vs Pixel. I was, of course, honoured and I accepted his invitation immediately.

MORNING, COMPUTER | Warren Ellis on Pacific Daylight Time

If you were in any doubt that Warren Ellis is going to blow the roof off the Brighton Dome at dConstruct, this is what happens when he decides to write a little something every day.

How to build a device lab | Tutorial by Destiny Montague and Lara Swanson

A set of slides from Destiny Montague and Lara Swanson at Etsy with their advice on setting up a device lab. Lara also wrote about the device lab on the Etsy code blog.

Simplicity

I can relate to every single word that Bastian has written here.

The longer I look at boilerplates, build tools, frameworks and ways to make my life as a developer easier, the more I long for the basics.

Radio-Controlled Web Design · An A List Apart Article

Turns out that the :checked pseudo-class selector allows you to do some clever interaction without JavaScript.

Let’s Talk About RTL

Some very handy techniques for working with right-to-left text.

ZX Spectrum Screenshotter Example - an album on Flickr

Over 700 screenshots of ZX Spectrum games, captured by Jason Scott. Some of these bring back memories.

A Maintainable Style Guide - Ian Feather

The challenges of maintaining a living breathing front-end style guide for an always-evolving product (the Lonely Planet website in this case).

GitHub’s CSS · @mdo

Mark Otto talks through the state of Github’s CSS and the processes behind updating it. There’s a nice mix of pragmatism and best practices, together with a recognition that there’s always room for improvement.

Twelve Tomorrows | MIT Technology Review

This year’s collection of twelve sci-fi stories from Technology Review features three dConstruct speakers: Lauren Beukes, Cory Doctorow, and Warren Ellis.

A Brief History of Bloggering - The Morning News

An alternative history from a parallel timeline.

He started coding his own just weeks after Tim Berners-Lee, a tunnel engineer helping to build the STERN protein collider, discovered ancient scrolls buried in the Swiss soil that revealed the secrets of HTML.

Panorama Fail

The image-stitching algorithm is trying its best.

The Camera in the Mirror

Kubrickian pictures taken by the Google robot wherein it captures its own reflection.

Software, It’s a Thing — Medium

The first Lunar Orbiter, Andy Warhol’s Amiga, and George R.R. Martin’s WordStar …the opening address to the Digital Preservation 2014 conference July 22 in Washington, DC.

Just as early filmmakers couldn’t have predicted the level of ongoing interest in their work over a hundred years later, who can say what future generations will find important to know and preserve about the early history of software?

(Mind you, I can’t help but feel that the chances of this particular text have a long life at a Medium URL are pretty slim.)

Unfinished Business special: Rumpus On The Planet Of The Apes with Brendan Dawes and Jeremy Keith on Huffduffer

This was a lot of fun for us. It might even be fun to listen to.

If you haven’t seen Dawn Of The Planet Of The Apes, then listen ye not—this is a spoilerific podcast episode.

Unfinished Business special: Rumpus On The Planet Of The Apes with Brendan Dawes and Jeremy Keith

The Pattern Library

Literally a library of patterns: y’know, for tiling background images. Old school!

Guy Walks Into a Bar - The New Yorker

If you’re going to check out the New Yorker’s nice new responsive site, might I suggest you start here?

Google’s ‘Nearby’ Lets Your Smartphone Talk to the Internet of Things | Motherboard

An early look at the just-in-time interactions that Scott has been working on:

Nearby works like this. An enabled object broadcasts a short description of itself and a URL to devices nearby listening. Those URLs are grabbed and listed by the app, and tapping on one brings you to the object’s webpage, where you can interact with it—say, tell it to perform a task.

Meet the Online Tracking Device That is Virtually Impossible to Block - ProPublica

Well, thanks to the ass-hattery of AddThis, the use case of your site’s visitors switching off JavaScript for (legitimate) security reasons just became a lot more plausible.

But you’re using JavaScript as an enhancement, right? You’re not relying on it for core tasks, right?

“The Internet Never Forgets” — sixtwothree.org

The Internet forgets every single day.

I’m with Jason.

I encourage you all to take a moment and consider the importance of preserving your online creations for yourself, your family, and for future generations.

James Bridle’s Critical View From Above | Crane.tv Contemporary Culture Video Magazine

James talks about his latest project, The Right To Flight.

Improving Reality 2014 — Visibility Is A Trap

Lighthouse are putting on their Improving Reality conference again this year. It’s the day before dConstruct. Come to both!

Cotton Bureau – Future Friendly by Brad Frost

For your consideration.

If enough people want a print run of this lovely Future Friendly T-shirt, then they’ll make a new batch.

The profits go to the Internet Archive.

What’s the design process at GDS? | Government Digital Service

A look behind the scenes of gov.uk. I like their attitude to Photoshop comps:

We don’t want a culture of designs being “thrown over a wall” to a dev team. We don’t make “high fidelity mock ups” or “high fidelity wireframes”. We’re making a Thing, not pictures of a Thing.

And UX:

We don’t have a UX Team. If the problem with your service is that the servers are slow and the UX Team can’t change that, then they aren’t in control of the user experience and they shouldn’t be called the user experience team.

Breach - A browser for the HTML5 era

A new browser on the block (though not a new rendering engine), this one is written is written entirely in JavaScript. It’s worth taking it for a spin to see some of the interesting interface ideas around tabs and loading indicators.

Personally, I’m all for more browsers. The more, the merrier.

Jeremy Keith on progressive enhancement - YouTube

Almost six minutes of me squinting in the sun and sharing my reckons while seagulls squawk in the background.

The Making of Aprilzero

The first in a series of posts looking at the process behind builfing this “quantified self” site:

As with most decisions in my life, I asked myself: What would Tony Stark do?

Apollo 11 Saturn V Launch (HD) Camera E-8 on Vimeo

45 years ago today.

Smart Fixed Navigation

Here’s an intriguing approach to offering a navigation control that adapts as the user scrolls.

I’m not too keen on the way it duplicates the navigation in the markup though. I might have a play to see if I can find a way to progressively enhance up from a link-to-footer pattern to achieve this.

The right to flight: why I’m flying a balloon over London this summer

Watch the skies: James Bridle’s balloon will be hovering above London distributing wifi.

Urban Giants on Vimeo

A look at the architectural history of the network hubs of New York: 32 Avenue of the Americas and 60 Hudson Street. Directed by Davina Pardo and written by her husband Andrew Blum, author of Tubes: A Journey to the Centre of the Internet.

These buildings were always used as network hubs. It’s just that the old networks were used to house the infrastructure of telephone networks (these were the long line buildings).

In a way, the big server hotel of New York—111 Eight Avenue—was also always used to route packets …it’s just that the packets used to be physical.

The Internet’s Own Boy: The Story of Aaron Swartz by Brian Knappenberger

The Aaron Swartz film is available on the Internet Archive under a Creative Commons attribution non-commercial share-alike license.

Navigating the Guardian | Help | The Guardian

A peek behind the scenes of an interesting new navigation pattern on the Guardian’s still-in-beta responsive site.

You can try it out here

Web 2024 | Robin Berjon

Here’s a dystopian vision of the web in ten years time, where professional developers are the only people able to publish on the web.

This is why it worries me when I come across very smart people who don’t seem to see a problem with the creation of web pages being taken out of the reach of any human being with an internet connection and a smattering of declarative languages—HTML, CSS—and into the hands of an elite minority of JavaScript programmers.

simpl.info

A handy reference for HTML, CSS, and JavaScript features. Each feature has a bare-bones demo at a nice guessable URL e.g. http://simpl.info/datalist/

Things we learnt designing ‘Register to vote’ | GDS design notes

A concise case study from gov.uk:

Designing for the constraints of mobile is useful – if we get the fundamentals of the service working on small screens and slow network speeds, it can work on more capable devices.

The Developer’s Dystopian Future – The Pastry Box Project

My interest in rich client-side apps has almost entirely reversed, and now I’m more interested in doing good ol’ server rendering with the occasional side of progressive enhancement, just like we did it in 2004.

This post resonates with me 100%.

Where will I be in 10 years? I don’t know. I hope I still will have some in-demand skills to pay the bills. But it feels like all I see are DevOps and JavaScript, and I know less and less every day about those things.

Practical ARIA Examples

Heydon Pickering put together a great collection of accessible self-contained interface patterns that demonstrate smart use of ARIA.

Science Hack Day Shanghai 2014 - an album on Flickr

Photos from the first Science Hack Day in China which just wrapped up.

The Eccentric Genius Whose Time May Have Finally Come (Again) - Doug Hill - The Atlantic

A profile of Norbert Wiener, and how his star was eclipsed by Claude Shannon.

Pinboard Turns Five (Pinboard Blog)

On the fifth anniversary of Pinboard, Maciej reflects on working on long-term projects:

Avoiding burnout is difficult to write about, because the basic premise is obnoxious. Burnout is a rich man’s game. Rice farmers don’t get burned out and spend long afternoons thinking about whether to switch to sorghum.

The good news is, as you get older, you gain perspective. Perspective helps alleviate burnout.

The bad news is, you gain perspective by having incredibly shitty things happen to you and the people you love. Nature has made it so that perspective is only delivered in bulk quantities. A railcar of perspective arrives and dumps itself on your lawn when all you needed was a microgram.

Valley of the Meatpuppets | superflux

The transcript of Anab Jain’s talk from the FutureEverything Festival.

Monday, 7 July 2014 – The Pastry Box Project

Words of wisdom from Scott on the clash of brand guidelines and the flexible nature of the web:

One thing I am pretty sure of though, is that having a fast, accessible, user-friendly site can reflect incredibly well on a company, and I’d love to see more guidelines and expectations that prioritize these aspects of a service as branding requirements in addition to the usual visual details.

The elements of HTML

This (literally) charts the evolution of HTML, tracking which elements have been added and which have been removed.

Sana’a (Idle Words)

A new essay from Maciej on Idle Words is always a treat, and this latest dispatch from Yemen is as brilliantly-written as you’d expect.

Marginalia | Parallel Transport

A brilliant idea (and implementation) from Kartik. By combing webmentions and fragmentions, it’s possible to allow a kind of distributed marginalia: you post a comment on your site about a specific passage in a post on my site and a smattering of CSS and JavaScript can display it in the right context.

How are apps made? by Craig Mod

With the usual caveat that I wish this were published on Craig’s own site, I particularly like this passage:

Apps, too, are ephemeral. Some of the most ephemeral software we’ve ever produced. Ephemeral if for no other reason than because of their gated homes. Our apps cower below the fickle whim of App Store Gods, struck down for no reasonable reasons or for very reasonable reasons. It doesn’t matter which, the end result is always the same: gone, forever.

Good, Form & Spectacle - design & cultural heritage

The brilliant George Oates has started a new design company with an emphasis on cultural heritage: “explicit notes to the future, local archives of global content.” Watch this space

A no-javascript toggle content feature

A clever way of doing progressive disclosure with CSS.

Learn JavaScript & jQuery - a book about interactive front-end web development

This looks like it could be a great book for anyone looking to get starting with JavaScript.

SKYLON Users’ Manual (PDF)

Tech specs for a spacecraft that doesn’t exist (yet).

Responsive Day Out 2 by adactio on SoundCloud

Here’s the Creative Commons licensed music that was playing during the breaks at Responsive Day Out 2.

adactio : responsiveconf2 on Huffduffer

Thanks to the tireless efforts of the magnificent Drew McLellan, the podcast of all the talks from Friday’s Responsive Day Out 2 are now available for your listening pleasure.

Guardian beta · The container model and blended content – a new approach to how we present content on the Guardian

This is what Oliver was talking about Responsive Day Out 2 — a new approach to information architecture.

Cast off your sidebars! You have nothing to lose but your grids!

Hamburger Fancy: Archive

This Tumblr blog has the grandiose ambition of being “a showcase of the hottest hamburger icons on the web”, but amazingly, they’ve actually succeeded in documenting every single example of a cool hamburger icon.

The Man Who Turned Paper Into Pixels on Vimeo

A short film about Claude Shannon and Information Theory — not exactly as in-depth as James Gleick’s The Information, but it does a nice job of encapsulating the fundamental idea.

shardcore » @bffbot1

Clingy.

She can only offer you unconditional algo-love.

Perhaps that’s the purest love of all.

Getting Back That Lovin’ Feeling on Sparkbox

A lovely little tale of empowerment through HTML and CSS.

Signs from the near future

We better get used to them…

Tantek Celik, “Why We Need the IndieWeb”, #PDF14 - YouTube

Tantek’s talk at the Personal Democracy Forum on the past, present, and future of independent publishing on the web.

Permanence - Matt Gemmell

Some good ideas from Matt on the importance of striving to maintain digital works. I find it very encouraging to see other people writing about this, especially when it’s this thoughtful.

How To Use Huffduffer (get audio from internet onto phone) - YouTube

Chase Reeves likes Huffduffer so much, he made a video about it.

DeviceLab | Swapping Device Stands for Lego…

Here’s a nifty way of building stands for your device lab: LEGO!

Instructions included.