Archive: March, 2018

147

sparkline
                    5th                     10th                     15th                     20th                     25th                     30th     
12am  
4am        
8am                          
12pm                                      
4pm                            
8pm                            

Saturday, March 31st, 2018

Going to Seattle. brb

Really Bad Design Exercises || Matthew Ström: designer & developer

This is a fun—and useful—way of improving the interview process. The Rubik’s Cube examples brought a smile to my face.

Sessions Map

This is nifty—a map of all the Irish music sessions and events happening around the world, using the data from TheSession.org.

If you’re interested in using data from The Session, there’s a read-only API and regularly-updated data dumps.

Friday, March 30th, 2018

Ampersand: Interview with Mandy Michael – Clear(left) Thinking – Medium

I’m soooo excited that Mandy is speaking at Ampersand here in Brighton in June!

Be there or be square.

Putting Civilization in a Box Means Choosing Our Legacy

A run-down of digital preservation technologies for very, very long-term storage …in space.

Animated SVG Radial Progress Bars - daverupert.com

Using a single path SVG, a smidge of CSS, and ~6 lines of JavaScript.

In this days of monolithic frameworks, I really like seeing modest but powerful patterns like this—small pieces that we can loosely join.

Facebook Container Extension: Take control of how you’re being tracked | The Firefox Frontier

A Firefox plugin that ring-fences all Facebook activity to the facebook.com domain. Once you close that tab, this extension takes care of garbage collection, ensuring that Facebook tracking scripts don’t leak into any other browsing activities.

Back to the Blog – Dan Cohen

On moving from silos to your own website:

Over the last year, especially, it has seemed much more like “blog to write, tweet to fight.” Moreover, the way that our writing and personal data has been used by social media companies has become more obviously problematic—not that it wasn’t problematic to begin with.

Which is why it’s once again a good time to blog, especially on one’s own domain.

But on the other hand…

It is psychological gravity, not technical inertia, however, that is the greater force against the open web. Human beings are social animals and centralized social media like Twitter and Facebook provide a powerful sense of ambient humanity—the feeling that “others are here”—that is often missing when one writes on one’s own site.

That’s true …which is why brid.gy is such an incredibly powerful service for, well, bridging the gap between your own personal site and the silos, allowing for that feeling of ambient humanity.

Focusing on Focus Styles | CSS-Tricks

A deep dive into the :focus pseudo-class and why it’s important.

Brighton Brains

A directory of the regular science, technology, and creative events happening in Brighton.

Picture 1 Picture 2 Picture 3 Picture 4

Offline and lookin’ good…

I’ve never been so excited about a phone update as I am about iOS 11.3 — service workers on the iPhone! Squee!!

Thursday, March 29th, 2018

UX In Contact Forms: Essentials To Turn Leads Into Conversions — Smashing Magazine

The answers to these questions about forms are useful for just about any website:

  1. Is It OK To Place A Form In Two Columns?
  2. Where Should Labels Be Placed?
  3. Can We Use Placeholder Text Instead Of A Label?
  4. How To Lessen The Cognitive Load Of A Form?
  5. Are Buttons Considered Part Of A Form’s UX?
  6. Is It Possible To Ease The Process Of Filling A Form?
  7. Does The User’s Location Influence A Form’s UX?

Wednesday, March 28th, 2018

Who Does She Think She Is?

The internet does not hate women. The internet doesn’t hate anyone, because the internet, being an inanimate network, lacks the capacity to hold any opinion whatsoever. People hate women, and the internet allows them to do it faster, harder, and with impunity. It’s developed into a form of relaxation after a hard day of being ground on the wheel of late-stage capitalism. Melvin Kranzberg’s statement that “technology is neither good nor bad, nor is it neutral” holds true here: The internet lets us be whoever we were before, more efficiently, with fewer consequences.

Quick Reminder that Details/Summary is the Easiest Way Ever to Make an Accordion | CSS-Tricks

Hells, yeah! Want to make an accordion widget? Use the details element as your starting point and progressively enhance from there.

On the beach with some of the @Clearleft crew.

On the beach with some of the @Clearleft crew.

Variable Fonts

A simple resource for finding and trying variable fonts.

Nobody Said CSS Is Easy

One thing I gained a stronger awareness of (simply from working with checkboxes) is that it’s important to progressively enhance UI components, so that a fancy custom one is able to fall back to the default browser styles and functionality. This way, a user can still access the UI if JavaScript or CSS fail.

Tuesday, March 27th, 2018

I managed to totally b0rk my server so my website was down for hours …but because of the service worker script, I don’t think anyone noticed.

Design Doesn’t Care What You Think Information Looks Like | Rob Weychert

A terrific piece by Rob that is simultaneously a case study of Pro Publica work and a concrete reminder of the power of separating structure and presentation (something that I worry developers don’t appreciate enough).

Don’t get stuck on what different types of information are “supposed” to look like. They can take whatever shape you need them to.

Constellations

A fun game with pins and string in canvas.

The Missing Building Blocks of the Web – Anil Dash – Medium

Anil documents the steady decline of empowering features from web browsers: view source; in-situ authoring; transclusion, but finishes with the greatest loss of all: your own website at your own address.

There are no technical barriers for why we couldn’t share our photos to our own sites instead of to Instagram, or why we couldn’t post stupid memes to our own web address instead of on Facebook or Reddit. There are social barriers, of course — if we stubbornly used our own websites right now, none of our family or friends would see our stuff. Yet there’s been a dogged community of web nerds working on that problem for a decade or two, trying to see if they can get the ease or convenience of sharing on Facebook or Twitter or Instagram to work across a distributed network where everyone has their own websites.

(Although it’s a bit of shame that Anil posted this on Ev’s blog instead of his own.)

Designing Button States - Cloud Four

The canonical example in just about every pattern library is documenting button variations. Here, Tyler shows how even this seemingly simple pattern takes a lot of thought.

Compressive Images Revisited - TimKadlec.com

Tim explains why that neat trick of making a really big JPEG with quality set to 0% is no longer necessary, and how the savings you make in bandwidth with that technique are nullified by the expense of the memory footprint needed.

Monday, March 26th, 2018

Just Starting Out with CSS & HTML - CSS-Tricks

It’s great that we’ve got so many resources these days for keeping up with the latest and greatest developments in HTML, CSS, and JavaScript …but I think it’s really great that Chris maintains this collection of evergreen tutorials on the basics.

Steve Faulkner on Twitter: Typical/expected screen reader output

Really handy accessibility information in a single tweet.

Sunday, March 25th, 2018

Picture 1 Picture 2

An evening stroll around Kraków.

Picture 1 Picture 2 Picture 3

And the winners are…

Waiting in the wings at @IT_challenges, ready to present the winners in the front-end dev category with their much-deserved awards.

Waiting in the wings at @IT_challenges, ready to present the winners in the front-end dev category with their much-deserved awards.

Paul Ford: Facebook Is Why We Need a Digital Protection Agency - Bloomberg

The word “leak” is right. Our sense of control over our own destinies is being challenged by these leaks. Giant internet platforms are poisoning the commons. They’ve automated it.

Checked in at Wesoła Cafe. with Jessica map

Checked in at Wesoła Cafe. with Jessica

Saturday, March 24th, 2018

Picture 1 Picture 2 Picture 3 Picture 4 Picture 5 Picture 6

Eating my way across Kraków.

Out and about in Kraków.

Out and about in Kraków.

Checked in at Cheder. with Jessica map

Checked in at Cheder. with Jessica

Interface Lovers

Interviews with designers, where they talk about their backgrounds, tools, workflows, and day-to-day experiences.

Checked in at Wesoła Cafe. with Jessica map

Checked in at Wesoła Cafe. with Jessica

Friday, March 23rd, 2018

“Eggs with free catwalk on protect toast”

“Flakes shrouded with fruit on milk”

The Google Translate hits just keep on coming.

So @wordridden is trying out Google Translate on this Polish breakfast menu: “I’d like some Eggs Parentheses with Vaccine, please.” “Baked Luke Duel Laurel for me.” Also on the menu: “Eggs with expectations.”

Thursday, March 22nd, 2018

map

Checked in at Browar Lubicz. Piwa — with Jessica

Going to Krakow. brb

Wednesday, March 21st, 2018

Checked in at The Great Eastern. with James map

Checked in at The Great Eastern. with James

Stick a fork in this presentation and turn it over, ’cause it’s done.

Stick a fork in this presentation and turn it over, ’cause it’s done.

Links from a talk

In two weeks time, I’ll be in Seattle for An Event Apart. I’ll be giving a brand new talk. The title is The Way Of The Web (although perhaps a more accurate title would be The Layers Of The Web).

Here’s the description:

Do you ever get overwhelmed by the ever-changing nature of web design and development? Exhausting, isn’t it? How are you supposed to know which technologies and tools you should invest your time in? Will they stick around or will you just have to relearn everything in another few months? Join Jeremy as he takes a tour of the past, present, and future of working on the web. From the building blocks of HTML, CSS, and JavaScript through to frameworks and libraries right up to the latest and greatest Progressive Web Apps, this talk will examine our collective assumptions with a critical eye. By learning from the past, we can make sensible design decisions today to build the web of tomorrow.

There’s a direct evolution line from my previous talks—Resilence and Evaluating Technology—to this new one. (Spoiler: everything I talk about is in some way related to progressive enhancement …even if I never use the words “progressive" or “enhancement" in the talks.)

I’ve been preparing this new talk for months. It started with a mind map—an A3 sheet of paper with disconnected thoughts, like something from the scene in the crime movie where they enter the lair of the serial killer and find a crazy wall.

Then I set it aside and began procrastinating. But it was the good kind of procrastinating, right? I mean, I had made a start and all those thoughts were now bubbling around in my head.

Eventually I forced myself to put things in some sort of order and started creating slides. That’s the beginning of the horrible process bouncing between thinking “this is pretty good!” and “this is absolute crap!” To be honest, I never actually know if a talk is any good until I give it in front of an audience (practice runs at work are great for getting feedback but they’re not the same as doing the talk for real).

Anyway, I think the talk is ready to roll. If you see me giving this talk and you’re interested in diving deeper into the topics raised, I’ve gathered together some of sources I used.

Further Reading

Related posts on adactio.com

Progressive Web Apps

Books

Films

I started my new conference talk months ago by creating a mind map. I now realise it’s like doing “sketch-note first” talk prep—reverse engineering an entire presentation from one piece of paper.

I started my new conference talk months ago by creating a mind map. I now realise it’s like doing “sketch-note first” talk prep—reverse engineering an entire presentation from one piece of paper.

Empty half the Earth of its humans. It’s the only way to save the planet | Kim Stanley Robinson | Cities | The Guardian

Kim Stanley Robinson explores the practicalities of E.O. Wilson’s Half Earth proposal.

There is no alternative way; there is no planet B. We have only this planet, and have to fit our species into the energy flows of its biosphere. That’s our project now. That’s the meaning of life, in case you were looking for a meaning.

Mia the borador—such a good dog!

Mia the borador—such a good dog!

Hudl Uniform

This design system takes an interesting approach, splitting the documentation between designing and coding.

Write it down

Such a great piece of advice from Mark:

Whenever someone asks me to do something that I think seems ill-conceived in some way, I ask them to write it down. That’s it. Because writing is high effort. Making sentences is the easy bit, it’s the thinking I want them to do. By considering their request it slows them down. Maybe 30% of the time or something, they come back and say ‘oh, that thing I asked you to do, I’ve had a think and it’s fine, we don’t need to do it’.

Like Mark, I think I enjoy being on the receiving end of this too:

These days, I welcome being asked to ‘write it down’. It gives me permission to take a breath. To pause and reflect on what I’m asking. I’m convinced my heart rate drops a little. You see, in some environments this would be called ‘process’, or ‘red tape’. ‘Being asked to write something down is a blocker to my flow’. Those kinds of responses miss the mark. When being asked to ‘write something down’ it’s really shorthand for ‘take some time and think about what you’re asking’.

Writing is thinking.

Picture 1 Picture 2

I’m really enjoying these @CodebarBrighton gatherings where I get to teach HTML from first principles—I think I’m getting the hang of it.

Vox Product Accessibility Guidelines

Accessibility isn’t a checklist …but this checklist is a pretty damn good starting point. I really like that it’s organised by audience: designers, engineers, project managers, QA, and editorial. You can use this list as a starting point for creating your own—tick whichever items you want to include, and a handy copy/paste-able version will be generated for you.

The first visual identity for UK Parliament

Some lovely branding work for the UK Parliament, presented very nicely.

Elephant - WordRidden

We went on a safari after the Pixel Up conference in South Africa. It was an amazing experience …but there was also The Elephant Incident.

And now I don’t need to write about it because I could never come close to recounting it as brilliantly as Jessica has done here.

The darkness closed in quickly as we rattled along the trail, the flashbulb lightning not doing much to supplement the juddering glow of the headlights. We were, by all appearances, a happy and relaxed little group, pleased with the day’s sightings, mellowed out by the evening’s drinks, looking forward to a nice dinner with wine and then a good night’s sleep. But I kept thinking about the elephant encounter from the night before—and so, apparently, did young Tas, who was bundled up next to his dad and eventually said quietly: “I don’t want to see another elephant.” We all comforted him with false bravado: no, don’t worry, there won’t be any elephants, we’re fine, it’s all fine, everything is totally fine. And all the while I was peering into the trees, and attempting to gauge the relative freshness of the huge piles of elephant dung on the road, and really, really not wanting to see an elephant either.

FontDrop!

A handy browser-based tool for examining font files to see which features they support.

Facebook and the end of the world

I’d love to see some change, and some introspection. A culture of first, do no harm. A recognition that there are huge dangers if you just do what’s possible, or build a macho “fail fast” culture that promotes endangerment. It’s about building teams that know they’ll make mistakes but also recognize the difference between great businesses opportunities and gigantic, universe-sized fuck ups.

90 Minutes | Type Supply

Tal Leming’s thoroughly delightful (and obsessive) account of designing the 90 Minutes typeface for U.S. Soccer.

FIFA has strict regulations that govern the size and stroke weight of numbers and letters used on official match uniforms. This made me unbelievably paranoid. I had a nightmare that one of the national teams would be set for kickoff of an important match and the referee would suddenly blow the whistle and say, “Hey, hey, hey! The bottom stroke of that 2 is 1 mm too light. The United States must forfeit this match!”

The Design Genome Project | InVision

A beautiful looking site from InVision collecting case studies of design-led companies (although this site is weirdly over-engineered and entirely dependent on JavaScript for rendering some text on a screen—prepare yourself for janky scrolling).

Documenting Components – EightShapes – Medium

Part one of a deep dive by Nathan into structuring design system documentation, published on Ev’s blog.

Tuesday, March 20th, 2018

Am I a Real Developer?

A Voight-Kampff machine for uncovering infiltrators in the ranks.

Checked in at O'Shio. with Andy, James, James map

Checked in at O’Shio. with Andy, James, James

Brendan Dawes - Post from Instagram to Kirby

Brendan shows how he uses IFTTT and a webhook to post to his own site from Instagram. I think I might set up something similar to post from Untappd to my own site.

How Fast Is Amp Really? - TimKadlec.com

An excellent, thorough, even-handed analysis of AMP’s performance from Tim. The AMP format doesn’t make that much of a difference, the AMP cache does speed things up (as would any CDN), but it’s the pre-rendering that really delivers the performance boost …as long as you give up your URLs.

But right now, the incentives being placed on AMP content seem to be accomplishing exactly what you would think: they’re incentivizing AMP, not performance.

Announcing Windows 10 Insider Preview Build 17623 for Skip Ahead - Windows Experience BlogWindows Experience Blog

Well, Microsoft really buried the lede in this announcement:

…we will begin testing a change where links clicked on within the Windows Mail app will open in Microsoft Edge…

Yup, no matter which browser you’ve chosen to set as your default, hyperlinks will be hijacked to open with Edge. This is disgusting. It feels like a return to the shitty old days of Microsoft’s strong-arm tactics, just when Microsoft were gaining trust and respect.

Monday, March 19th, 2018

Just found out that my brother is running the @BarkleyMarathon this year. Wow!

Any sufficiently advanced (and embedded) process is indistinguishable from culture.

Strong culture = less process – The Man in Blue

For any single scenario you can name it’ll be easier to create a process for it than build a culture that handles it automatically. But each process is a tiny cut away from the freedom that you want your team to enjoy.

Sunday, March 18th, 2018

Hack for the craic: David McKeown on making hackathons fun for everyone

A great write-up of Science Hack Day Dublin—the 6th iteration is coming up next month.

What struck me about this hackathon is that the only end goal is for people to have a bit of fun and make stuff. There’s no flashy big-ticket prize and no commercial agenda. They’re not looking for start-up pitches or scalable business plans, and there’s no Dragons’ Den interrogation. Just good old-fashioned, high-tech making and mingling.

AMP is not the issue, it’s Google | Responsive Web Design

Google’s weight and power come because most of the world use it without knowing there’s an alternative. Perhaps it is time we started voicing our concerns through actions and start using alternative search platforms.

Twenty.

Congratulations, Jason—twenty years of kottke.org is a hell of an achievement!

I’ve been reading back through the early archives (which I wouldn’t recommend), and it feels like excavating down through layers of sediment, tracing the growth & evolution of the web, a media format, and most of all, a person.

Reading Visions, Ventures, Escape Velocities: A Collection of Space Futures edited by Ed Finn and Joey Eschrich, with guest editor Juliet Ulman.

Bye, bye, South Africa! Hello, Brighton. Thank you, @Farai_UXguy and @ClaudeMonly for taking such good care of us during @LetsPixelUp and beyond—that was really something special!

Bye, bye, South Africa! Hello, Brighton.

Thank you, @Farai_UXguy and @ClaudeMonly for taking such good care of us during @LetsPixelUp and beyond—that was really something special!

Saturday, March 17th, 2018

I’ve got the artwork for @beep’s difficult second album.

I’ve got the artwork for @beep’s difficult second album.

Picture 1 Picture 2

Sediba lodge—not too shabby.

Safari sunshine.

Safari sunshine.

Picture 1 Picture 2 Picture 3 Picture 4

Animals of Africa. 🦓🦏🦁

Picture 1 Picture 2

On safari with @LolaOye.

Picture 1 Picture 2

On safari with @beep and @wordridden.

Picture 1 Picture 2 Picture 3 Picture 4

Flowers in Africa.

Picture 1 Picture 2 Picture 3

On safari with Moyo.

Wednesday, March 14th, 2018

Picture 1 Picture 2

Soweto sunshine.

Picture 1 Picture 2

Exploring Johannesburg with @wordridden and @LolaOye.

Monday, March 12th, 2018

Swapping Images with the Sizes Attribute | Filament Group, Inc., Boston, MA

The hits just keep on coming from the Filament Group. Here Scott shares a really clever technique for creating an image magnifier using the sizes attribute of the img element.

The web is under threat. Join us and fight for it. – World Wide Web Foundation

What was once a rich selection of blogs and websites has been compressed under the powerful weight of a few dominant platforms. This concentration of power creates a new set of gatekeepers, allowing a handful of platforms to control which ideas and opinions are seen and shared.

Tim Berners-Lee on the 29th anniversary of Information Management: A Proposal.

Two myths currently limit our collective imagination: the myth that advertising is the only possible business model for online companies, and the myth that it’s too late to change the way platforms operate. On both points, we need to be a little more creative.

While the problems facing the web are complex and large, I think we should see them as bugs: problems with existing code and software systems that have been created by people — and can be fixed by people.

Picture 1 Picture 2 Picture 3

Had a really nice first day at #PixelUp2018 hanging out with lovely people.

Happy 29th birthday to the vague but exciting document that sparked the World Wide Web—“Information Management: A Proposal” by @timberners_lee, March 12th, 1989.

https://www.w3.org/History/1989/proposal.html

Sunday, March 11th, 2018

Picture 1 Picture 2 Picture 3 Picture 4

Eating our way through the farmer’s market.

Saturday, March 10th, 2018

Going to Johannesburg. brb

Useful accessibility resources

A whoooole bunch of links about inclusive design, gathered together from a presentation.

Bumped into @Cennydd at Heathrow, many hours ahead of the flight we’re both on. We are both clearly members of the @CraigMod school of air travel.

https://medium.com/message/lets-fly-d566ecd35678

It’s Dangerous to Go Stallone. Take Glyphhanger | Filament Group, Inc., Boston, MA

You’ll need to be comfortable with using the command line, but this is a very useful font subsetting tool from those clever folks at Filament Group.

Bitcoin Is Ridiculous. Blockchain Is Dangerous: Paul Ford - Bloomberg

An astoundingly great piece of writing from Paul Ford, comparing the dot-com bubble and the current blockchain bubble. This resonates so hard:

I knew I was supposed to have an opinion on how the web and the capital markets interacted, but I just wanted to write stuff and put it online. Or to talk about web standards—those documents, crafted by committees at the World Wide Web consortium, that defined the contract between a web browser and a web server, outlining how HTML would work. These standards didn’t define just software, but also culture; this was the raw material of human interaction.

And, damn, if this isn’t the best description the post-bubble web:

Heat and light returned. And bit by bit, the software industry insinuated itself into every aspect of global enterprise. Mobile happened, social networks exploded, jobs returned, and coding schools popped up to convert humans into programmers and feed them to the champing maw of commerce. The abstractions I loved became industries.

Oof! That isn’t even the final gut punch. This is:

Here’s what I finally figured out, 25 years in: What Silicon Valley loves most isn’t the products, or the platforms underneath them, but markets.

Technologist Hippocratic Oath | An optional oath for building ethically considered experiences

Everyone draws their lines in different ways and perhaps there is a spectrum of what is reasonable when implementing influential products. That’s exactly why technologists must seek to educate themselves on the patterns they are implementing in order to understand their psychological influence and other outcomes where intended use is not always the same as the reality of the user experience. Not only that, but we should feel empowered to speak up to authority when something crosses a line.

Campaign. — Ethan Marcotte

Ethan is understandably dubious about Google’s recent announcement regarding the relaxation of the AMP’s iron fist.

Because it’s great to hear the AMP team make some overtures toward a more open web—and personally, I’d like to thank them sincerely for doing so. But if we’re swapping one set of Google-owned criteria for another set of slightly more permissive Google-owned criteria, I’m not sure how much will have changed.

Friday, March 9th, 2018

Checked in at The Richmond. Listening in on the session — with Jessica map

Checked in at The Richmond. Listening in on the session — with Jessica

A workshop on building for resilience

In February, I tried out a new workshop two times—once at Webstock in New Zealand, and once in Hong Kong.

The workshop is called The Progressive Web: Building for Resilience. Here’s an excerpt form the blurb:

This workshop will show you to to think in a progressive way that works with the grain of the web. Together we’ll peel back the layers of the web and build upwards, creating experiences that work for everyone while making the best of cutting-edge browser technologies. From URL design to Progressive Web Apps, this journey will cover each stage of technological advancement.

Basically, it’s the workshop version of Resilient Web Design. If that book is the theory, this workshop is the practice.

Tim recently posted his tips for running workshops and there’s a lot in there that resonates with me. Like Tim, I’ve become less and less reliant on slides. In fact, this workshop—like my workshop on evaluating technology—has no slides. Instead it’s all about the exercises and going with the flow.

After starting with a warm-up, I canvas the room to see if there any specific topics, tools or technologies that people are particularly interested in covering. I’ll note those (on post-its slapped on the wall) for reference throughout the day, to try to make sure that those particular things are touched on at some point. Then I start with a thought experiment…

First of all, I get everyone to call out websites, services and apps that they use almost every day: Twitter, Facebook, Gmail, Slack, Google Docs, and so on. Those all get documented on the wall. Then it’s time to ask of each product, “What is the core functionality?” The idea here is to get beneath the surface-level verbs like swiping, tapping and dragging to get to the real purpose of a service: buying, selling, sharing, reading, writing, collaborating, and so on.

At this point I inform the attendees that the year is 1995. And now we’re going to build these services using the technology of this time. This is a playful way of getting answers to the question “What’s the simplest technology to enable the core functionality?” It’s mostly forms, links, and lots of heavy lifting on the server.

Then the real fun begins. “Enhance!” Moving forward in time, we get to add styles, we add interactivity with JavaScript, then Ajax, and then we get to really have fun with technologies like web sockets, geolocation, local storage, right the way up to service workers, notifications, and background sync. And the beauty of it all is that, if any of those technologies aren’t supported in a particular browser or device, the core functionality is still available.

Next, we apply this layered mindset to a new service. I split the attendees into groups, and each of them gets a procedurally-generated startup idea …generated by shuffling some cards. This is an exercise I first tried when I was teaching in Porto:

I made five cards with types of sites on them: news, social network, shopping, travel, and learning. Another five cards had subjects: books, music, food, pets, and cars. And another five cards had audiences: students, parents, the elderly, commuters, and teachers. Everyone was dealt a random card from each deck, resulting in briefs like “a travel site about food for the elderly” or “a social network about music for commuters.”

The first few exercises are good creative fun: come up with a name, then a logo, then a business model. Then it’s time to build. It starts with URL design. Then it’s content prioritisation (for a representative URL). Then it’s layout (sketching!). The enhancements have begun. “How might this URL benefit from Ajax?” “How might this URL benefit from geolocation?” “How might this URL benefit from offline storage?” “How might this URL benefit from a service worker?”

Workshop team 4 Workshop team 3 Workshop team 2 Workshop team 1

At this point, we’ve applied the layered, progressive approach at the scale of an entire service, and at the scale of an individual URL. Finally, we apply the same approach at the level of a component. It might be a navigation, or a carousel, or an interactive widget. In each case, the same process applies: “What’s the core functionality? What’s the simplest technology to enable that functionality? Enhance!”

Along the way, there are plenty of rabbit holes we can go down. Whether it’s accessibility, or progressive web apps, or pattern libraries, I go along with whatever people are curious about. But all of it ties back to the progressive, layered mindset I’m hoping to foster.

By the end of the day, I’m hoping that an attendee has one of two reactions:

  1. “What a waste of time! Everything in that workshop was blindingly obvious!” (in which case, excellent!—they’re already thinking in a progressive way), or
  2. “That workshop has completely changed the way I think about building on the web!” (I’m being hyperbolic here, but at the very least I’m hoping to impart a new perspective).

Having given the workshop a few times, I’m really pleased with how it went (and more important, I’m pleased that people enjoyed it). If this sounds like something that your company or team would enjoy, get in touch and we can take it from there.

I’m looking for a freelance front-end dev (HTML, CSS, some JS) to work on a @Clearleft project for two weeks at the start of April. Remote workers welcome.

If that’s you, email jeremy@clearleft.com with day rates.

If not, please retweet.

Bombshell: The Hedy Lamarr Story is a terrificly well-crafted documentary—thank you @AlexHaggiagHean, @KathHattan, @SusanSarandon and everyone who worked on @BombshellDoc.

The Technium: Protopia

I think our destination is neither utopia nor dystopia nor status quo, but protopia. Protopia is a state that is better than today than yesterday, although it might be only a little better. Protopia is much much harder to visualize. Because a protopia contains as many new problems as new benefits, this complex interaction of working and broken is very hard to predict.

Kevin Kelly’s thoughts at the time of coining of this term seven years ago:

No one wants to move to the future today. We are avoiding it. We don’t have much desire for life one hundred years from now. Many dread it. That makes it hard to take the future seriously. So we don’t take a generational perspective. We’re stuck in the short now. We also adopt the Singularity perspective: that imagining the future in 100 years is technically impossible. So there is no protopia we are reaching for.

How To Become A Centaur

We hoped for a bicycle for the mind; we got a Lazy Boy recliner for the mind.

Nicky Case on how Douglas Engelbart’s vision for human-computer augmentation has taken a turn from creation to consumption.

When you create a Human+AI team, the hard part isn’t the “AI”. It isn’t even the “Human”.

It’s the “+”.

Thursday, March 8th, 2018

Standardizing lessons learned from AMP – Accelerated Mobile Pages Project

This is very good news indeed—Google are going to allow non-AMP pages to get the same prioritised treatment as AMP pages …if they comply with the kind of performance criteria that Tim outlined.

It’ll take time to get there, but I’m so, so glad to see that Google aren’t going to try to force everyone to use their own proprietary format.

We are taking what we learned from AMP, and are working on web standards that will allow instant loading for non-AMP web content. We hope this work will also unlock AMP-like embeddability that powers Google Search features like the Top Stories carousel.

I just hope that this alternate route to the carousel won’t get lumped under the banner of “AMP”—that term has been pretty much poisoned at this point.

Checked in at Duke of York's Picturehouse for Bombshell: The Hedy Lamarr Story. Bombshell map

Checked in at Duke of York’s Picturehouse for Bombshell: The Hedy Lamarr Story. Bombshell

Happy International Women’s day @RiotJulesFern!

Happy International Women’s day @Hober!

Happy International Women’s day @Katie_Fenn!

New Dark Age: Technology, Knowledge and the End of the Future by James Bridle

James is writing a book. It sounds like a barrel of laughs.

In his brilliant new work, leading artist and writer James Bridle offers us a warning against the future in which the contemporary promise of a new technologically assisted Enlightenment may just deliver its opposite: an age of complex uncertainty, predictive algorithms, surveillance, and the hollowing out of empathy.

Appreciating @Herring1967’s tireless work on this day …so I’m doing as he suggests:

https://www.justgiving.com/fundraising/November19th

Google and HTTP

I share many of these concerns.

The web is huge. Even bigger than Google. I love that the web preserves all the work. I don’t think anyone has the right to change the web so they no longer work.

Wednesday, March 7th, 2018

Had some great discussions with @qubyte at Homebrew Website Club Brighton—webmentions, service workers, static sites …lots of food for thought.

Had some great discussions with @qubyte at Homebrew Website Club Brighton—webmentions, service workers, static sites …lots of food for thought.

Boxy SVG

This is impressive—a fully featured graphics app for creating SVGS right in your browser.

Metaballs

Metaballs, not to be confused with meatballs, are organic looking squishy gooey blobs.

Here’s the maths behind the metaballs (implemented in SVG).

Parallax scrolling with CSS variables | basicScroll

Don’t let the title fool you—this isn’t just for parallax scrolling (thank goodness!)—it’s for triggering any CSS updates based on scroll position. Using CSS custom properties makes a lot of sense. The JavaScript/CSS bridge enabled by custom properties is kind of their superpower. (That’s one of the reasons why I don’t like calling them “CSS variables” which makes them sound like Sass variables—they’re so much more than that!)

How we’ve made GOV.UK Elements even more accessible

A nice run-down of incremental accessibility improvements made to Gov.uk (I particularly like the technique of updating the title element to use the word “error” if the page is displaying a form that has issues).

Crucially, if any of the problems turned out to be with the browser or screen reader, they submitted bug reports—that’s the way to do it!

Measuring the Hard-to-Measure – CSS Wizardry

Everything old is new again—sometimes the age-old technique of using a 1x1 pixel image to log requests is still the only way to get certain metrics.

While tracking pixels are far from a new idea, there are creative ways in which we can use them to collect data useful to developers. Once the data is gathered, we can begin to make much more informed decisions about how we work.

Frequently Asked Questions [CSS Working Group Wiki]

Rebuttals to the most oft-asked requests for browsers to change the way they handle CSS.

Tuesday, March 6th, 2018

Photographs are photons on flypaper.

—The Ursa Major Moving Group

Brendan Dawes - Back your sh*t up!

My back-up strategy is similar to Brendan’s (using Super Duper and Backblaze):

In backup parlance there’s a thing called 3-2-1. That is, you should three copies of your files — two locally on different devices and one off site.

But I only do my local back-ups once a week (eek!)—I should do better.

Brightonians: who wants to join me on Thursday evening at @DukeOfYorks for the screening of Bombshell: The Hedy Lamarr Story? https://www.picturehouses.com/cinema/Duke_Of_Yorks/film/bombshell-the-hedy-lamarr-story-satellite-qanda

Brightonians: who wants to join me on Thursday evening at @DukeOfYorks for the screening of Bombshell: The Hedy Lamarr Story?

https://www.picturehouses.com/cinema/DukeOfYorks/film/bombshell-the-hedy-lamarr-story-satellite-qanda

Minimal viable service worker

I really, really like service workers. They’re one of those technologies that have such clear benefits to users that it seems like a no-brainer to add a service worker to just about any website.

The thing is, every website is different. So the service worker strategy for every website needs to be different too.

Still, I was wondering if it would be possible to create a service worker script that would work for most websites. Here’s the script I came up with.

The logic works like this:

  • If there’s a request for an HTML page, fetch it from the network and store a copy in a cache (but if the network request fails, try looking in the cache instead).
  • For any other files, look for a copy in the cache first but meanwhile fetch a fresh version from the network to update the cache (and if there’s no existing version in the cache, fetch the file from the network and store a copy of it in the cache).

So HTML files are served network-first, while all other files are served cache-first, but in both cases a fresh copy is always put in the cache. The idea is that HTML content will always be fresh (unless there’s a problem with the network), while all other content—images, style sheets, scripts—might be slightly stale, but get refreshed with every request.

My original attempt was riddled with errors. Jake came to my rescue and we revised the script into something that actually worked. In the process, my misunderstanding of how await works led Jake to write a great blog post on await vs return vs return await.

I got there in the end and the script seems solid enough. It’s a fairly simplistic strategy that could work for quite a few sites, but it has some issues…

Service workers don’t perform any automatic cleanup of caches—that’s up to you to do (usually during the activate event). This script doesn’t do any cleanup so the cache might grow and grow and grow. For that reason, I think the script is best suited for fairly small sites.

The strategy also assumes that a file will either be fetched from the network or the cache. There’s no contingency for when both attempts fail. So there’s no fallback offline page, for example.

I decided to test it in the wild, but I expanded it slightly to fix the fallback issue. The version on the Ampersand 2018 website includes a worst-case-scenario option to show a custom offline page that has been pre-cached. (By the way, if you haven’t got a ticket for Ampersand yet, get a ticket now—it’s going to be superb day of web typography nerdery.)

Anyway, this fairly basic script seems to be delivering some good performance improvements. If you’ve got a site that you think would benefit from this network/caching strategy, and it’s served over HTTPS, then:

  1. Feel free to download the script or copy and paste it into a file called serviceworker.js,
  2. Put that file in the root directory of your website,
  3. Add this in a script element at the bottom of your HTML pages:

if (navigator.serviceWorker && !navigator.serviceWorker.controller) { navigator.serviceWorker.register('/serviceworker.js'); }

You can also use the script as a starting point. You might find issues specific to your particular website. That’s okay—you can tweak and adjust the script to suit your needs.

If this minimal service worker script proves in any way useful to you, thank Jake.

Monday, March 5th, 2018

“Please keep politics out of your talk.” – The future is like pie.

I recently received this very instruction about speaking at an upcoming event. I honestly don’t know how I could talk about universality, progressive enhancement, and user experience without it being political. So I interpreted the request to be about partisanship rather than politics:

Sometimes when people hear the term “political,” they understand it as “partisan.” To be political is to acknowledge the lived experiences of people outside of yourself. To be partisan is to advocate for the beliefs or propaganda of a specific party affiliation.

Website owners of Brighton—it’s Homebrew Website Club this Wednesday at 6pm in the @Clearleft office. Come along and we’ll work on our personal sites together.

https://indieweb.org/events/2018-03-07-homebrew-website-club#UK

Offscreen Magazine Interview — by Craig Mod

Craig talks about reading, writing, books, publishing, and Amazon:

Kindle and non-Kindle book sales account for less than two percent of Amazon’s market cap. The Kindle could disappear tomorrow, and Amazon would not be materially affected. Even from a branding perspective, I don’t think AMAZON = BOOKS anymore, certainly not to younger consumers. AMAZON = PRIME. PRIME = A 3D PRINTER on a one-day time-delay that deposits anything you can imagine on your doorstep.

There’s also this about the double-edged sword of working at scale:

Does affecting one hundred lives turn you on? A thousand? A million? A billion? Why? What does it mean to have a positive impact on a life? How intimate does that connection need to be? Understanding your scale — the scale that moves you — is critical to understanding with whom and how you should work, how you should live.

Winning on Mobile

This looks like a handy tool for doing some quick’n’dirty competitor analysis when it comes to performance: create a scoreboard of sites to rank by speed (and calculate the potential revenue impact).

Many factors contribute to an engaging mobile experience. And speed is chief among them. Most people will abandon a mobile site visit if the page takes more than a few seconds to load. Use our Speed Scorecard to see how your site stacks up to the competition.

Sinclair ZX81 Issue One - Computing History

Happy birthday to the first computer I ever used.

It had 1K of storage. 1K! (When I got the brick-like 16K RAM pack to expand the storage, it was like gaining access to infinity.)

Update: Brendan has written down his ZX81 memories.

Australian Government Open Language for Design

The design system for the Australian government is a work in progress but it looks very impressive. The components are nicely organised and documented.

(I’ve contributed a suggestion for the documentation in line with what I wrote about recently.)

Sunday, March 4th, 2018

The People Part of Design Systems – Related Works – Medium

I like the idea of “design bugs”:

Every two weeks or so, a group of designers would get together for a couple of hours to fix what we called “design bugs.” These were things that didn’t hinder functionality and wouldn’t have been filed as an engineering bug, but were places where we were using an old component, an existing one incorrectly, or a one-off alteration.

AMP News | CSS-Tricks

Chris is trying to give a balanced view on AMP, but it’s hard to find any positive viewpoints from anyone who isn’t actually on the Google AMP team.

I know I’ve covered a lot of negative news here, but that’s mostly what I’ve been seeing.

Futurists & realists – The Man in Blue

Cameron contrasts Syd Mead with Frank Lloyd Wright.

Mastery of materials is a valuable thing to have. It will help you build what’s needed now and forge ahead into the near future. But vision is also valuable – it helps inspire and drive teams, and lays out a longer term future that can alter the path of humanity. What I take from the futurists and the realists is that there’s a place for every person and every process; what you need to do is find your own place, get comfortable, and own it.

Picture 1 Picture 2

Playing tunes.

The Voyage of Captain DaCosta – A Digital Narrative

What a beautiful and fascinating website!

This is a layered interactive narrative that traces the life of Captain Antonio DaCosta, a Black Portuguese sailor who visited Japan in 1597. From his early life as a slave in Lisbon to his voyage to Japan, this site weaves together his personal diary and drawings, along with artwork and historical notes from 1500-1700, the Age of Exploration.

Cub n Pup - puzzle game demo

A deceptively simple but thoroughly addictive little in-browser puzzle game.

(It would be neat if this were turned into an offline-first progressive web app; it’s already keeping everything locally.)

CodePen - Instagram.exe

I’m not sure why but I genuinely love this Windows 95 style interface for Instagram coded up by Gabrielle Wee.

Accessible By Design | Sparkbox | Web Design and Development

A primer on accessible colour contrast with links to some handy tools for testing.

Saturday, March 3rd, 2018

Listening to my heroes @cassiecodes, @aboydleslie, and @madebyzara tell the story of @codebar.

Listening to my heroes @cassiecodes, @aboydleslie, and @madebyzara tell the story of @codebar.

Battleship Solitaire: Mindless Podcast Companion

Once I got the hang of this game, I found it incredibly addictive. I would describe it as mindless fun, but I think it’s more like mindful fun: it has the same zen contemplative peacefulness as Sudoku. I can certainly see how it makes for a good activity while listening to podcasts.

Note: click once for water; double-click for ships. And don’t blame me if you lose hours of time to this game.

Friday, March 2nd, 2018

My Smart Home’s Not That Smart | Corey Vilhauer, Writer

There’s this idea that our homes — and our lives, and our workflows, and everything, really — should be micromanaged and accessed through technology, but, like many new experiments, this kind of technological advance has little actual real-world benefit. Like many new experiments, smart home technology is a perceived convenience masked as a wild hair — it’s advancement because we can, not because we need to.

A lyrical assessment of the current state of home automation.

Things are getting really smart on their own, but they’re still struggling to interact as a community — the promise of a smart home falling short because our appliances can’t draft a cohesive constitution. What’s more, we ourselves are struggling to modulate our reaction to these gadgets. We’re getting excited about automated lights and pretending the future has already come.

Just change it

Amber and I often have meta conversations about the nature of learning and teaching. We swap books and share ideas and experiences whenever we’re trying to learn something or trying to teach something. A topic that comes up again and again is the idea of “the curse of knowledge“—it’s the focus of Steven Pinker’s book The Sense Of Style. That’s when the author/teacher can’t remember what it’s like not to know something, which makes for a frustrating reading/learning experience.

This is one of the reasons why I encourage people to blog about stuff as they’re learning it; not when they’ve internalised it. The perspective that comes with being in the moment of figuring something out is invaluable to others. I honestly think that most explanatory books shouldn’t be written by experts—the “curse of knowledge” can become almost insurmountable.

I often think about this when I’m reading through the installation instructions for frameworks, libraries, and other web technologies. I find myself put off by documentation that assumes I’ve got a certain level of pre-existing knowledge. But now instead of letting it get me down, I use it as an opportunity to try and bridge that gap.

The brilliant Safia Abdalla wrote a post a while back called How do I get started contributing to open source?. I definitely don’t have the programming chops to contribute much to a codebase, but I thoroughly agree with Safia’s observation:

If you’re interested in contributing to open source to improve your communication and empathy skills, you’re definitely making the right call. A lot of open source tools could definitely benefit from improvements in the documentation, accessibility, and evangelism departments.

What really jumps out at me is when instructions use words like “simply” or “just”. I’m with Brad:

“Just” makes me feel like an idiot. “Just” presumes I come from a specific background, studied certain courses in university, am fluent in certain technologies, and have read all the right books, articles, and resources. “Just” is a dangerous word.

But rather than letting that feeling overwhelm me, I now try to fix the text. Here are a few examples of changes I’ve suggested, usually via pull requests on Github repos:

They all have different codebases in different programming languages, but they’re all intended for humans, so having clear and kind documentation is a shared goal.

I like suggesting these kinds of changes. That initial feeling of frustration I get from reading the documentation gets turned into a warm fuzzy feeling from lending a helping hand.

Notifications

Heydon keeps on delivering the goods. This time, he looks at making on-screen notification messages accessible using ARIA’s live regions.

As ever, structuring content is paramount, even where it pertains to dynamic events inside realtime web applications.

Questions To Ask Before Building a Component Library | Chromatic

  • What problems will a component library solve?
  • Is everyone on the project behind the component library?
  • How will the component library be used?
  • What tool(s) will be used to build the component library?
  • Where should the component library live?
  • How granular should the library be? How should it be organized?
  • How will component code be scoped? What about page layout?
  • What data will the library use? What else should it have?

Thursday, March 1st, 2018

Your Interactive Makes Me Sick - Features - Source: An OpenNews project

Browsers have had consistent scrolling behavior for years, even across vendors and platforms. There’s an established set of physics, and if you muck with the physics, you can assume you’re making some people sick.

Guidelines to consider before adding swooshy parallax effects:

  1. Respect the Physics
  2. Remember that We Call Them “Readers”
  3. Ask for Consent

Given all the work that goes into a powerful piece of journalism—research, interviews, writing, fact-checking, editing, design, coding, testing—is it really in our best interests to end up with a finished product that some people literally can’t bear to scroll through?

Be Kind, Design – Nat Dudley – Medium

The transcript of Nat’s superb Webstock talk.

We need to start thinking about inclusivity the same way as we think about mobile design. We realised with mobile, that we have to put that experience at the centre of what we do, otherwise it won’t be successful and we’ll fail mobile users. We realised we have to design mobile-first.

The same is true for inclusivity. Instead of it being an afterthought if it’s thought about at all, it needs to be our first thought. It needs to be central to our strategy, embedded in how we analyse and solve the problems we encounter. Designing inclusive-first is the only way we’ll manage to serve and protect all of the people who use what we build.

Fair Is Not the Default - Library - Google Design

Why building inclusive tech takes more than good intentions.

When we run focus groups, we joke that it’s only a matter of seconds before someone mentions Skynet or The Terminator in the context of artificial intelligence. As if we’ll go to sleep one day and wake up the next with robots marching to take over. Few things could be further from the truth. Instead, it’ll be human decisions that we made yesterday, or make today and tomorrow that will shape the future. So let’s make them together, with other people in mind.

I, for one. — Ethan Marcotte

Ethan adds his thoughts to my post about corporations using their power to influence the direction of the web.

Heck, one could even argue the creation of AMP isn’t just Google’s failure, but our failure. More specifically, perhaps it’s pointing to a failure of governance of our little industry. Absent a shared, collective vision for what we want the web to be—and with decent regulatory mechanisms to defend that vision—it’s unsurprising that corporate actors would step into that vacuum, and address the issues they find. And once they do, the solutions they design will inevitably benefit themselves first—and then, after that, the rest of us.

If at all.

Really looking forward to seeing @CassieCodes talk at this evening’s @AsyncJS in @TheSkiff.

https://asyncjs.com/limitation-breeds-creativity/

Third party CSS is not safe - JakeArchibald.com

We all know that adding a third-party script to your site is just asking for trouble. But Jake points out that adding a third-party anything to your site is a bad idea.

Trust no one.

Shipping system fonts to GitHub.com · @mdo

A look at the font stack that Github is using.

Gene Wolfe: A Science Fiction Legend on the Future-Altering Technologies We Forgot to Invent | The Polymath Project

We humans are not  good at imagining the future. The future we see ends up looking a lot like the past with a few things tweaked or added on.

Faraway February

For the shortest month of the year, February managed to pack a lot in. I was away for most of the month. I had the great honour of being asked back to speak at Webstock in New Zealand this year—they even asked me to open the show!

I had no intention of going straight to New Zealand and then turning around to get on the first flight back, so I made sure to stretch the trip out (which also helps to mitigate the inevitable jet lag). Jessica and I went to Hong Kong first, stayed there for a few nights, then went on Sydney for a while (and caught up with Charlotte while we were out there), before finally making our way to Wellington. Then, after Webstock was all wrapped up, we retraced the same route in reverse. Many flat whites, dumplings, and rays of sunshine later, we arrived back in the UK.

As well as giving the opening keynote at Webstock, I did a full-day workshop, and I also ran a workshop in Hong Kong on the way back. So technically it was a work trip, but I am extremely fortunate that I get to go on adventures like this and still get to call it work.