Tags: ia

Web Design in 4 minutes

This is a wonderful way of progressively explaining the layered approach to building for the web that Charlotte was teaching in her Codebar workshop.

Dennis Cooper fears censorship as Google erases blog without warning | Books | The Guardian

Two weeks ago, writer and artist Dennis Cooper was checking his Gmail when something peculiar happened: the page was refreshed and he was notified that his account had been deactivated – along with the blog that he’d maintained for 14 years.

This is why the Indie Web exists.

His advice to other artists who work predominantly online is to maintain your own domain and back everything up.

How to Make Sense of Any Mess

Did you know that Abby Covert’s book is available online in its gloriously hyperlinked entirety?

MarkSheet: a free HTML and CSS tutorial - Free tutorial to learn HTML and CSS

This looks like a great resource for beginners looking to learn HTML and CSS.

Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns” (Pre-Release) – Smashing Magazine

I think it’s a safe bet that this new book by Heydon will be absolutely brilliant.

It’s a handbook with valuable, time-saving techniques that will help you avoid hacky workarounds and solve common issues effectively.

Standardizing the Social Web

The slides from Aaron’s talk at OS Bridge in Portland, looking at the formats and protocols powering the indie web.

Building better accessibility primitives

On the need for a way to mark parts of a document as “inert” while the user is interacting with modal content.

Intro to Flexbox

The slides from Arelia’s flexbox talk.

Developing Dependency Awareness – Smashing Magazine

A typically superb article by Aaron. Here, he breaks down a resilient approach to building for the web by examining the multiple ways you could add a button to a page. There’s a larger lesson here too:

We don’t control where our web-based products go or how our users access them. All we can do is imagine as many less-than-perfect scenarios as possible and do our best to ensure our creations will continue to do what they’re supposed to do. One of the easiest ways to do that is to be aware of and limit our dependencies.

Bad Character - The New Yorker

A fascinating thought experiment from Ted Chiang:

So let’s imagine a world in which Chinese characters were never invented in the first place. Given such a void, the alphabet might have spread east from India in a way that it couldn’t in our history, but, to keep this from being an Indo-Eurocentric thought experiment, let’s suppose that the ancient Chinese invented their own phonetic system of writing, something like the modern Bopomofo, some thirty-two hundred years ago. What might the consequences be?

Bowiebranchia

Nudibranchia or other opisthobranchia compared to the various looks of David Bowie.

The inside story of Facebook’s biggest setback | Rahul Bhatia | Technology | The Guardian

The history of Facebook’s attempt to steamroll over net neutrality in India …and how they failed in that attempt, thanks to a grassroots campaign.

Crucially, Facebook itself would decide which sites were included on the platform. The company had positioned Internet.org as a philanthropic endeavour — backed by Zuckerberg’s lofty pronouncements that “connectivity is a human right” — but retained total control of the platform.

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.

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.

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.

A Helpful Diagram

Blogging through Venn diagrams.

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.

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!

Dyslexia

An attempt to convey the experience of (one kind of) dyslexia through code.

Manifesto of the Committee to Abolish Outer Space – The New Inquiry

Fear and loathing in Houston.

  1. Humanity will never colonize Mars, never build moon bases, never rearrange the asteroids, never build a sphere around the sun.
  2. There will never be faster-than-light travel. We will not roam across the galaxy. We will not escape our star.
  3. Life is probably an entirely unexceptional phenomenon; the universe probably teems with it. We will never make contact. We will never fuck green-skinned alien babes.
  4. The human race will live and die on this rock, and after we are gone something else will take our place. Maybe it already has, without our even noticing.
  5. All this is good. This is a good thing.

All our imagined futures | A Working Library

Science fiction as a means of energising climatic and economic change:

Fiction, and science fiction in particular, can help us imagine many futures, and in particular can help us to direct our imaginations towards the futures we want. Imagining a particular kind of future isn’t just day dreaming: it’s an important and active framing that makes it possible for us to construct a future that approaches that imagined vision. In other words, imagining the future is one way of making that future happen.

But it’s important that these visions are preserved:

It’s very likely that our next Octavia Butler is today writing on WattPad or Tumblr or Facebook. When those servers cease to respond, what will we lose? More than the past is at stake—all our imagined futures are at risk, too.

The Secret Lives of Tumblr Teens | New Republic

A fascinating insight into some of Tumblr’s most popular accounts:

Some posts get more than a million notes—imagine a joke whispered in biology class getting a laugh from a city the size of San Francisco.

It’ll be a real shame when Tumblr disappears.

That’s “when”, not “if”. Remember:

In 2013, Yahoo bought Tumblr.

Banjos and Discrete Technologies | stevebenford

An examination of how sites like The Session are meshing with older ideas of traditional Irish music:

There is a very interesting tension at play here – one that speaks directly to the design of new technologies. On the one hand, Irish musicians appear to be enthusiastically adopting digital media to establish a common repertoire of tunes, while on the other the actual performance of these tunes in a live session is governed by a strong etiquette that emphasizes the importance of playing by ear.

There’s an accompanying paper called Supporting Traditional Music-Making: Designing for Situated Discretion (PDF).

The Pain With No Name · An A List Apart Article

This rousing call-to-arms by Abby the IA makes a great companion piece to her interview on The Big Web Show.

Prohibition Of Discriminatory Tariffs For Data Services Regulations, 2016 (PDF)

Good news for net neutrality from India:

No service provider shall enter into any arrangement, agreement or contract, by whatever name called, with any person, natural or legal, that has the effect of discriminatory tariffs for data services being offered or charged to the consumer on the basis of content.

Short note on improving usability of scrollable regions

Three very easy to implement additions to scrollable areas of your web pages: tabindex="0", role="region", and an aria-label attribute.

The accessibility stack: making a better layer cake » Simply Accessible

A great description of a solid architectural approach to building on the web (and not just for accessibility either).

Stupid Shit No One Needs & Terrible Ideas Hackathon

A one-day event where participants conceptualize and create projects that have no value whatsoever.

20 Years Ago Today

A lovely reminiscence from Matt on how he came to fall in love with the World Wide Web.

I really hope he posts this on his own site—it’ll be a shame when this disappears along with everything else being posted to Medium.

Mike Hill - Industrial Design in Entertainment on Vimeo

A terrific analysis of industrial design in film and games …featuring a scene-setting opening that delineates the difference between pleasure and happiness.

Temporary Constellations — Buckley Williams

This is a really lovely project by Dan and Nat—Christmas cards featuring the fleeting invisible constellations formed by the mesh of GPS satellites within which our planet lies.

HIKE - Introduction to accessibility concepts for the Web

It really isn’t hard to get the basics of accessibility right on the web …and yet those basics are often neglected.

Here’s a handy shortlist to run through, HIKE:

  • H stands for headings and semantic markup.
  • I stands for images and labels.
  • K stands for keyboard navigation.
  • E asks for you to ACT with a little extra love for custom components and more.

(ACT = ARIA, Colour Contrast, Text Size)

HTML Developers: Please Consider | HTML5 Doctor

The best ARIA role is the one you don’t need to use.

oldweb.today

Such a vividly nostalgic project. Choose an obsolete browser. Enter a URL. Select which slice of the past you want to see.

Digital archives in action. Access drives preservation.

Universal React ◆ 24 ways

I have no hands-on experience with React, but this tutorial by Jack Franklin looks like a great place to start. Before the tutorial begins he succinctly and clearly outlines the perfect architecture for building on the web today:

  • The user visits www.yoursite.com and the server executes your JavaScript to generate the HTML it needs to render the page.
  • In the background, the client-side JavaScript is executed and takes over the duty of rendering the page.
  • The next time a user clicks, rather than being sent to the server, the client-side app is in control.
  • If the user doesn’t have JavaScript enabled, each click on a link goes to the server and they get the server-rendered content again.

YES!!!

Y’know, I had a chance to chat briefly with Jack at the Edge conference in London and I congratulated him on the launch of a Go Cardless site that used exactly this technique. He told me that the decision to flip the switch and make it act as a single page app came right at the end of the project. I think that points to a crucial mindset that’s reiterated here:

Now we’ll build the React application entirely on the server, before adding the client-side JavaScript right at the end.

The proto-internet | Intelligent Life magazine

Mapping the submarine cables of the Victorian internet.

And by the way, why did nobody tell me about Cartophilia before now? I’m very disappointed in you.

It’s the IMP

There are Inception-like layers of nostalgia here: firstly, this web series of web pages made by Matt are a throwback to an earlier era, and secondly, the story being told goes all the way back to the birth of the ARPAnet.

The Radiation Threat to “The Martian” (PDF)

This is something that has been bugging me ever since reading the book:

While Andy Weir does a good job of representing the risks faced by Mark Watney, stranded on Mars and confronting one life-threatening challenge after another, he is silent on the threat of radiation, not just to Mark but particularly to the crew of the Hermes as they contemplate executing a daring rescue mission that more than doubles their time in deep space.

Well, this paper answers all my questions.

System shock — Medium

This is such a delightful story of a brilliant mistake—true typographic nerdery and nostalgia.

Read all the way through for a free gift.

Histography - Timeline of History

A nice navigable timeline of historical events from Wikipedia.

How can we fix internet comments?

Here’s an interesting approach to making comments more meaningful:

Instead of blindly publishing whatever people submit, we first ask them to rate the quality and civility on 3 randomly-selected comments, as well as their own. It’s a bit more work for the commenter, but the end result is a community built on trust and respect, not harassment and abuse.

Where to Put Your Search Role by Adrian Roselli

This is a very handy tip. I had been putting form role="search" all over The Session. Turns out that’s overriding the default role of “form”. Oops!

The West Pier, Brighton England on Vimeo

For almost a century and a half the West Pier has been Britain’s most iconic pier. Renowned for its wonderful architectural style, it has been visited and enjoyed by millions. Even today with its sculptural remains casting an eerie beauty over the seafront, the West Pier is still the most photographed building in Brighton.

(Xrisk 101): Existential Risk for Interstellar Advocates | Heath Rezabek - Academia.edu

Exemplars proposing various solutions for the resilience of digital data and computation over long timeframes include the Internet Archive; redundantly distributed storage platforms such GlusterFS, LOCKSS, and BitTorrent Sync; and the Lunar supercomputer proposal of Ouliang Chang.

Each of these differs in its approach and its focus; yet each shares with Vessel and with one another a key understanding: The prospects of Earth-originating life in the future, whether vast or diminishing, depend upon our actions and our foresight in this current cultural moment of opportunity, agency, awareness, ability, capability, and willpower.

Web Design - The First 100 Years

A magnificent presentation from Maciej that begins by drawing parallels between the aviation industry in the 20th century and the technology industry in the 21st:

So despite appearances, despite the feeling that things are accelerating and changing faster than ever, I want to make the shocking prediction that the Internet of 2060 is going to look recognizably the same as the Internet today.

Unless we screw it up.

And I want to convince you that this is the best possible news for you as designers, and for us as people.

But if that sounds too upbeat for you…

Too much of what was created in the last fifty years is gone because no one took care to preserve it.

We have heroic efforts like the Internet Archive to preserve stuff, but that’s like burning down houses and then cheering on the fire department when it comes to save what’s left inside. It’s no way to run a culture. We take better care of scrap paper than we do of the early Internet, because at least we look at scrap paper before we throw it away.

And then there’s this gem:

We complained for years that browsers couldn’t do layout and javascript consistently. As soon as that got fixed, we got busy writing libraries that reimplemented the browser within itself, only slower.

It finishes with three differing visions of the web, one of them desirable, the other two …not so much. This presentation is a rallying cry for the web we want.

Let’s reclaim the web from technologists who tell us that the future they’ve imagined is inevitable, and that our role in it is as consumers.

Interface Experience Maps, From the Notebook of Aaron Gustafson

This sounds like it could be a very useful tool to introduce early in projects to get a shared understanding of progressive enhancement.

keyboard (div) ✿ dabblet.com

Here’s a really nifty use of the :checked behaviour pattern that Charlotte has been writing about—an interface for choosing a note from a piano keyboard. Under the hood, it’s a series of radio buttons and labels.

Where visual design fits in a process – Occasional writing from @rivalee

I think the distinction between ‘how it works’ and ‘how it looks’ is blurrier than we think.

[this is aaronland] did I mention it vibrates?

history is time breaking up with itself

A great piece of hypertext from Aaron on the purpose of museums, the Copper Hewitt Pen, and matter battles.

Dev.Opera — UX accessibility with aria-label

A great run-down by Heydon of just one ARIA property: aria-label.

SmashingConf Oxford 2015: Richard Rutter on Don’t Give Them What They Want, Give Them What They Need

A great case study from Richard, walking through the process of redesigning the website for the Royal Borough of Kensington and Chelsea.

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.

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.

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.

Responsible Social Share Links — Jonathan Suh

If you insist on having “social” sharing buttons, here’s a way to avoid bloating your page unnecessarily.

But you might want to reconsider whether you need them at all.

Welcome to the new Guardian website

The Guardian have hit the big red button and made their responsive site the default. Great stuff!

(top tip: don’t read the comments)

The Smithsonian’s Cooper Hewitt: Finally, the Museum of the Future Is Here - The Atlantic

Remember Aaron’s dConstruct talk? Well, the Atlantic has more details of his work at the Cooper Hewitt museum in this wide-ranging piece that investigates the role of museums, the value of APIs, and the importance of permanent URLs.

As I was leaving, Cope recounted how, early on, a curator had asked him why the collections website and API existed. Why are you doing this?

His retrospective answer wasn’t about scholarship or data-mining or huge interactive exhibits. It was about the web.

I find this incredibly inspiring.

Describe Me

A great Zooniverse-style project for the website of Australia’s Museum Victoria that allows you to provide descriptions for blind and low-vision people.

Accessibility of Web Components

A great presentation on web components by Marcy, with an emphasis on keeping them accessible.

Steve Albini on the surprisingly sturdy state of the music industry

Steve Albini’s barnstorming keynote address at Melbourne’s Face the Music conference.

Thanks to Microsoft, Opera just got 100M potential new mobile browser users

I mentioned this a little while back, but it’s worth remembering just how many people are using Opera Mini …and how many more are about to join them.

Bring it on!

Free My Data | Download and archive social media data

A nice little collection from Erin and Ben: how to export your data from various services.

I should fork this on Github and add instructions for exporting your Huffduffer data.

ARIA Quicktip: Labelledby vs. Describedby, From the Notebook of Aaron Gustafson

Yesterday, Aaron gave a great talk at BD Conf about forms. In one example, he was using aria-describedby. I was a bit confused by the differences between aria-describedby and aria-labelledby, so Aaron has very helpfully clarified the distinction.

Is Facebook building a colonial web? by Alice Newton

internet.org might more accurately be called very-small-piece-of-internet.org

Why I Joined the IndieWeb Movement - Wingin’ It

I hope that many of you will watch me on this journey, and follow in my wagon tracks as I leave the walled cities and strike out for the wilderness ahead.

How did Twitter become the hate speech wing of the free speech party?

A look back at how Twitter evolved over time, with examples of seemingly-trivial changes altering the nature of the discourse.

Kevin finishes with a timely warning for those of us building alternatives:

In the indieweb world we are just starting to connect sites together with webmentions, and we need to consider this history as we do.

Digital Amnesia - YouTube

A documentary on our digital dark age. Remember this the next time someone trots out the tired old lie that “the internet never forgets.”

If we lose the past, we will live in an Orwellian world of the perpetual present, where anybody that controls what’s currently being put out there will be able to say what is true and what is not. This is a dreadful world. We don’t want to live in this world. —Brewster Kahle

It’s a terrible indictment of where our priorities were for the last 20 years that we depend essentially on children and maniacs to save our history of this sort. —Jason Scott

AurelioDeRosa/HTML5-API-demos

A collection of device APIs—which, despite the title, are all JavaScript, not HTML. Each API in the list has a link to its spec, an explanatory article, a demo, and the current level of support.

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).

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.

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

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 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.

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.

Practical ARIA Examples

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

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.

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!

shardcore » @bffbot1

Clingy.

She can only offer you unconditional algo-love.

Perhaps that’s the purest love of all.

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

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

Dystopia Tracker

Documenting depictions of dystopian futures and tracking which ideas are turning out to be predictions.

And They All Look Just the Same

Greg isn’t just lamenting a perceived “sameness” in web design here. He’s taking a long-zoom view and pointing out that there’s always a sameness …and you can choose to go along with it or you can choose to differentiate.

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.

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.

Our Comrade The Electron

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

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.

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.

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.

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.

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.

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.

About Variables in CSS and Abstractions in Web Languages | CSS-Tricks

Chris has a written a response to my post (which was itself inspired by his excellent An Event Apart presentation) all about CSS, variables, and abstractions.

I love this kind of old-school blog-to-blog discussion.

Spimes: A Happy Birthday Story « optional.is/required

Expanding on an exercise from last year’s Hackfarm, Brian and Mike have written a deliciously dystopian near-future short story.