Archive: April, 2017

109

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

Sunday, April 30th, 2017

Mad Max Fury Road in black and chrome in @DukeOfYorks was fantastic! What a grey! What a lovely grey!

Mad Max Fury Road in black and chrome in @DukeOfYorks was fantastic!

What a grey! What a lovely grey!

Sessions by Pusher

Oodles and oodles of videos of talks from London developer meetups.

Friday, April 28th, 2017

A Case for Progressive Web Applications in 2017

If your company is or is planning on doing business in emerging markets, architecting your web applications for performance through progressive enhancements is one easy way to drastically improve accessibility, retention, and user experience.

This article uses “progressive enhancement” and “progressive web app” interchangeably, which would be true in an ideal world. This is the first of a three part series, and it sounds like it will indeed document how to take an existing site and enhance it into a progressive web app—a strategy I much prefer to creating a separate silo that only works for a subset of devices (the app-shell model being pushed by Google).

Introducing Fractal and Federalist | U.S. Web Design Standards

Another instance of Fractal in the wild, this time for the Federalist design system.

Why Fractal?

  • It’s open source.
  • It’s easy to use.
  • It generates standalone HTML previews of each component.
  • It uses or supports many of the technologies we use already.
  • Fractal offers a customizable theme engine.

Thursday, April 27th, 2017

Font Map · An AI Experiment by IDEO

Fontlandia is yours to explore.

By leveraging AI and convolutional neural networks to draw higher-vision pattern recognition, we have created a tool that helps designers understand and see relationships across more than 750 web fonts.

Using NPM as a Build Tool | gablaxian.com

For a small to medium sized project, this sounds like a sensible way to approach build tasks. It feels nice and close to the metal.

Device intervention. — Ethan Marcotte

But here’s the thing about browsing the modern web with a six year-old laptop: nearly every browser tab causes my fan to spin, and my laptop to warm. Elements of web pages slowly, noticeably, gracelessly ka-chunk-fall into place as they render. While I browse the web, I feel each one of my laptop’s six years.

SpeedTracker

This is a great free service for doing a bit of performance monitoring on your site. It uses WebPageTest and you do all the set up via a Github repo that then displays the results using Github Pages.

It won’t give you the power or control of Calibre but it’s a handy option for smaller sites. Here are the results for adactio.com running on a Moto G over 3G.

Obrigado, Eduardo!

Cassini survived!

https://saturn.jpl.nasa.gov/

Wednesday, April 26th, 2017

Making some performance tweaks to https://adactio.com

Making some performance tweaks to https://adactio.com

Sideways Dictionary

This is a rather lovely idea—technical terms explained with analogies.

I just finished writing something about HTTPS and now I wish I had used this.

Painting with Code : Airbnb Design

Very clever stuff here from Jon in the tradition of Bret Victor—alter Sketch files by directly manipulating code (React, in this case).

I’m not sure the particular use-case outlined here is going to apply much outside of AirBnB (just because the direction of code-to-Sketch feels inverted from most processes) but the underlying idea of treating visual design assets and code as two manifestations of the same process …that’s very powerful.

Stark

A plug-in for Sketch that allows you to simulate colour blindnesses and check colour contrasts.

1 day public speaking workshop in Brighton for digital professionals - £95 + VAT Tickets, Thu, 18 May 2017 at 10:00 | Eventbrite

I’m not going to be around for this, but I wish I could go. If you’re in Brighton, I highly recommend this one-day workshop from Matt. He’s been doing some internal workshops at Clearleft and he’s pretty great.

Clearleft wall-facers.

Clearleft wall-facers.

Tuesday, April 25th, 2017

Could we reboot a modern civilisation without fossil fuels? | Aeon Essays

Is the emergence of a technologically advanced civilisation necessarily contingent on the easy availability of ancient energy? Is it possible to build an industrialised civilisation without fossil fuels?

This thought experiment leads to some fascinating conclusions.

So, would a society starting over on a planet stripped of its fossil fuel deposits have the chance to progress through its own Industrial Revolution? Or to phrase it another way, what might have happened if, for whatever reason, the Earth had never acquired its extensive underground deposits of coal and oil in the first place? Would our progress necessarily have halted in the 18th century, in a pre-industrial state?

Replacing Disqus with Github Comments · Gazoo.vrv

If you’re using Disqus to power the comments on your blog, you might like to know that it’s pulling on loads of nasty tracking scripts. Bad for privacy and bad for performance.

The Washington Post cuts off ad tech vendors slowing its site - Digiday

I’d love to see other publishers take a firm stand against the shoddy ad tech from data brokers slowing down their sites.

We go to our partners and say, ‘This is how fast things need to be executed; if you don’t hit this threshold, we can’t put you on the site.’

(I mean, I’d really like to see publishers take a stand against invasive tracking via ads, but taking a stand on speed is a good start.)

DRM for the Web is a Bad Idea | Internet Archive Blogs

The Encrypted Media Extensions (EME) addition to HTML is effectively DRM with the blessing of the W3C. It’s bad for accessibility, bad for usability, bad for security, and as the Internet Archive rightly points out, it’s bad for digital preservation.

On a train back to Brighton after an excellent few days in Leeds in the care of its proud ambassador, @CSSwizardry.

Monday, April 24th, 2017

In a front row seat with @GillSibthorpe at All Day Hey.

In a front row seat with @GillSibthorpe at All Day Hey.

Loving @AliceBartlett’s shadow puppet show at All Day Hey.

Loving @AliceBartlett’s shadow puppet show at All Day Hey.

Saturday, April 22nd, 2017

Sampling.

Sampling.

Going to Leeds. brb

Friday, April 21st, 2017

Going to Lewes to play music all evening with @SalterCane.

Come on by if you’re in the neighbourhood: https://saltercane.com/tidings/54

Brighton digital companies just did something brilliant… | Declan Cassidy

A write-up of the BrightSparks programme that Clearleft is taking part in.

Each company agreed to help support one local child from a low-income family, on free school meals or with a yearly household income of under £25k.

💯 on Lighthouse for https://patternsday.com/

💯 on Lighthouse for https://patternsday.com/

That clever @gablaxian switched https://patternsday.com/ over to HTTPS/HTTP2.

100/100 on PageSpeed Insights.

Next stop: a service worker.

Thursday, April 20th, 2017

Suggested edit for https://polaris.shopify.com/

“Our design system helps us work together to build a great experience for Breitbart.”

There are maps for these territories | Clearleft

A great piece from Danielle on the different mental models needed for different languages. When someone describes a language—like CSS—as “broken”, it may well be that there’s a mismatch in mental models.

CSS isn’t a programming language. It’s a stylesheet language. We shouldn’t expect it to behave like a programming language. It has its own unique landscape and structures, ones that people with programming language mental maps might not expect.

I believe that this mismatch of expectation is what has led to the current explosion of CSS-in-JS solutions. Confronted with a language that seems arbitrary and illogical, and having spent little or no time exposed to the landscape, developers dismiss CSS as ‘broken’ and use systems that either sweep it under the rug, or attempt to force it into alignment with the landscape of a programming language — often sacrificing some of the most powerful features of CSS.

The work I like. — Ethan Marcotte

Ethan’s been thinking about the trends he’s noticed in the work he’s doing:

  • prototypes over mockups,
  • preserving patterns at scale, and
  • thinking about a design’s layers.

On that last point…

The web’s evolution has never been charted along a straight line: it’s simultaneously getting slower and faster, with devices new and old coming online every day.

That’s why I’ve realized just how much I like designing in layers. I love looking at the design of a page, a pattern, whatever, and thinking about how it’ll change if, say, fonts aren’t available, or JavaScript doesn’t work, or if someone doesn’t see the design as you and I might, and is having the page read aloud to them.

Wednesday, April 19th, 2017

Today’s oyster.

Today’s oyster.

Brightonians with websites: it’s Homebrew Website Club this evening in @68MiddleSt, 6pm - 7:30pm.

Approximate Text Search Made Easy

A step-by-step explanation by Henrik on how he implemented fuzzy search on his music site—something I could do on The Session. He even talks about expanding this to work with ABC notation.

Ghost in the Cloud | Issue 28 | n+1

The rapture of the nerds:

Transhumanism’s simulation theology

Designing the Patterns Day site

Patterns Day is not one of Clearleft’s slick’n’smooth conferences like dConstruct or UX London. It’s more of a spit’n’sawdust affair, like Responsive Day Out.

You can probably tell from looking at the Patterns Day website that it wasn’t made by a crack team of designers and developers—it’s something I threw together over the course of a few days. I had a lot of fun doing it.

I like designing in the browser. That’s how I ended up designing Resilient Web Design, The Session, and Huffduffer back in the day. But there’s always the initial problem of the blank page. I mean, I had content to work with (the information about the event), but I had no design direction.

My designery colleagues at Clearleft were all busy on client projects so I couldn’t ask any of them to design a website, but I thought perhaps they’d enjoy a little time-limited side exercise in producing ideas for a design direction. Initially I was thinking they could all get together for a couple of hours, lock themselves in a room, and bash out some ideas as though it were a mini hack farm. Coordinating calendars proved too tricky for that. So Jon came up with an alternative: a baton relay.

Remember Layer Tennis? I once did the commentary for a Layer Tennis match and it was a riot—simultaneously terrifying and rewarding.

Anyway, Jon suggested something kind of like that, but instead of a file being batted back and forth between two designers, the file would passed along from designer to designer. Each designer gets one art board in a Sketch file. You get to see what the previous designers have done, leaving you to either riff on that or strike off in a new direction.

The only material I supplied was an early draft of text for the website, some photos of the first confirmed speakers, and some photos I took of repeating tiles when I was in Porto (patterns, see?). I made it clear that I wasn’t looking for pages or layouts—I was interested in colour, typography, texture and “feel.” Style tiles, yes; comps, no.

Jon

Jon’s art board.

Jon kicks things off and immediately sets the tone with bright, vibrant colours. You can already see some elements that made it into the final site like the tiling background image of shapes, and the green-bordered text block. There are some interesting logo ideas in there too, some of them riffing on LEGO, others riffing on illustrations from Christopher Alexander’s book, A Pattern Language. Then there’s the typeface: Avenir Next. I like it.

James G

James G’s art board.

Jimmy G is up next. He concentrates on the tiles idea. You can see some of the original photos from Porto in the art board, alongside his abstracted versions. I think they look great, and I tried really hard to incorporate them into the site, but I couldn’t quite get them to sit with the other design elements. Looking at them now, I still want to get them into the site …maybe I’ll tinker with the speaker portraits to get something more like what James shows here.

Ed

Ed’s art board.

Ed picks up the baton and immediately iterates through a bunch of logo ideas. There’s something about the overlapping text that I like, but I’m not sure it fits for this particular site. I really like the effect of the multiple borders though. With a bit more time, I’d like to work this into the site.

James B

Batesy’s art board.

Batesy is the final participant. He has some other nice ideas in there, like the really subtle tiling background that also made its way into the final site (but I’ll pass on the completely illegible text on the block of bright green). James works through two very different ideas for the logo. One of them feels a bit too busy and chaotic for me, but the other one …I like it a lot.

I immediately start thinking “Hmm …how could I make this work in a responsive way?” This is exactly the impetus I needed. At this point I start diving into CSS. Not only did I have some design direction, I’m champing at the bit to play with some of these ideas. The exercise was a success!

Feel free to poke around the Patterns Day site. And while you’re there, pick up a ticket for the event too.

Tuesday, April 18th, 2017

Offline-first for Your Templated Site (Part Two)

I’m really interested in this idea of service-worker side templating (I know that Glenn is working on something really, really cool in this area too). Can’t wait for part three of this series! (hint, hint, Jeff)

Progressive Web Apps - ILT  |  Web  |  Google Developers

A step-by-step guide to building progressive web apps. It covers promises, service workers, fetch, and cache, but seeing as it’s from Google, it also pushes the app-shell model.

This is a handy resource but I strongly disagree with some of the advice in the section on architectures (the same bit that gets all swoonsome for app shells):

Start by forgetting everything you know about conventional web design, and instead imagine designing a native app.

Avoid overly “web-like” design.

What a horribly limiting vision for the web! After all that talk about being progressive and responsive, we’re told to pretend we’re imitating native apps on one device type.

What’s really disgusting is the way that the Chrome team are withholding the “add to home screen” prompt from anyone who dares to make progressive web apps that are actually, y’know …webby.

The Elements of Bureaucratic Style

I’m currently reading The Sense of Style by Steven Pinker, and it resonates nicely with this article on the numbing effect of the bureaucratic style exemplified in phrases like “officer-involved shooting.”

Watching the cell phone videos of the assault has, for most people, the immediate effect of provoking outrage and awakening a desire for justice. The purpose of bureaucratic speech is to dull these responses. It suggests your outrage is not worth it, that it’s fine to go back to what you were doing, that it’s best to move along and mind your own business.

Organize your CSS properties however you dang like – Michael.blog

Neither matters all that much and you can use every method on the same project without the universe imploding.

Some interesting approaches in the comments too.

PhD Thesis: Cascading Style Sheets

Håkon wrote his doctoral thesis on CSS …which is kinda like Einstein writing a thesis on relativity. There’s some fascinating historical insight into the creation of the standards we use today.

Back to the Cave – Frank Chimero

Frank has published the (beautifully designed) text of his closing XOXO keynote.

Batesy’s art board.

Batesy’s art board.

Ed’s art board.

Ed’s art board.

James G’s art board.

James G’s art board.

Jon’s art board.

Jon’s art board.

Roll up, roll up! Get your tickets for Patterns Day:

http://patternsday.com/

Brighton, June 30th.

Sunday, April 16th, 2017

Adventure

The Internet Archive is now hosting early Macintosh software emulated right in your browser. That means you can play Adventure: the source of subsequent text adventures, natural language parsing, and chatbots.

Colossal Cave Adventure (also known as ADVENT, Colossal Cave, or Adventure) is a text adventure game, developed originally in 1976, by Will Crowther for the PDP-10 mainframe. The game was expanded upon in 1977, with help from Don Woods, and other programmers created variations on the game and ports to other systems in the following years.

In the game, the player controls a character through simple text commands to explore a cave rumored to be filled with wealth.

ANALEMMA TOWER - Clouds Architecture Office

A thoroughly impractical—but fun to imagine—alternative to a space elevator:

Analemma inverts the traditional diagram of an earth-based foundation, instead depending on a space-based supporting foundation from which the tower is suspended. This system is referred to as the Universal Orbital Support System (UOSS). By placing a large asteroid into orbit over earth, a high strength cable can be lowered towards the surface of earth from which a super tall tower can be suspended. Since this new tower typology is suspended in the air, it can be constructed anywhere in the world and transported to its final location.

The construction might sound like Clarke’s The Fountains Of Paradise, but I imagine life in the tower would be more like Ballard’s High Rise.

Phishing with Unicode Domains - Xudong Zheng

Domains registered with punycode names (and then given TLS certificates) are worryingly indistinguishable from their ASCII counterparts.

Can you spot the difference between the URLs https://adactio.com and https://аdаctіо.com?

@Mentions from Twitter to My Website

Chris gives a step-by-step walkthrough of enabling webmentions on a Wordpress site.

Where Do We Come From? What Are We? Where Are We Going?

This wide-ranging essay by Nick Nielsen on Centauri Dreams has a proposition that resonates with my current talk about evaluating technology:

Science produces knowledge, but technology only selects that knowledge from the scientific enterprise that can be developed for practical uses.

Then there’s this:

The most remarkable feature of how we got from the origins of our species to the complex and sophisticated civilization we have today is that, with few exceptions, none of it was planned. Technology was not planned; civilization was not planned; industrialization was not planned; the internet was not planned.

Saturday, April 15th, 2017

Inclusively Hidden | scottohara.me

Comparing different ways to hide content accessibly:

There are three reasons behind hiding content in an interface, and it’s important to identify what those reasons are, as they will correlate with the appropriate technique needed to hide such content.

  1. Temporarily Hidden Content
  2. Purposefully Visually Hidden Content
  3. Purposefully Visual-Only Content

The invisible parts of CSS · MadebyMike

This is a really clear explanation of how CSS works.

Friday, April 14th, 2017

Closing Communities: FFFFOUND! vs MLKSHK – Waxy.org

Andy compares the impending shutdowns of Ffffound and Mlkshk. They’re quite, quite different when it comes to handling data rescue.

Think you know the top web browsers? – Samsung Internet Developers – Medium

So do you really know which are the top browsers, both amongst your existing customers and your potential audience? Perhaps it’s worth taking a closer look; it might just be time to check your site in some of the lesser-known, yet popular browsers like UC, Yandex and Samsung Internet.

Thursday, April 13th, 2017

Friday drinks on a Thursday.

Friday drinks on a Thursday.

The Setup - Jeremy Keith · Hey!

As part of an ongoing series where we ask industry professionals what they use to get the job done, we speak to Jeremy, technical director at Clearleft.

I couldn’t resist the smartarse answer about my “dream setup.”

Before you take off for the Easter weekend, be sure to grab your ticket for Patterns Day:

http://patternsday.com/

Brighton, 2017-06-30

Digital Assistants, Facebook Quizzes, And Fake News! You Won’t Believe What Happens Next | Laura Kalbag

A great presentation from Laura on how tracking scripts are killing the web. We can point our fingers at advertising companies to blame for this, but it’s still developers like us who put those scripts onto websites.

We need to ask ourselves these questions about what we build. Because we are the gatekeepers of what we create. We don’t have to add tracking to everything, it’s already gotten out of our control.

Wednesday, April 12th, 2017

Guess I’ll have to remove my rel=”me” link from my site to http://ffffound.com/home/adactio

I’ll miss ya, http://ffffound.com/

IF Data Permissions Catalogue

A collection of interface patterns for granting or denying permissions.

Jeremy Keith at Render 2017 - YouTube

Here’s the opening keynote I gave at the Render Conference in Oxford. The talk is called Evaluating Technology:

We work with technology every day. And every day it seems like there’s more and more technology to understand: graphic design tools, build tools, frameworks and libraries, not to mention new HTML, CSS and JavaScript features landing in browsers. How should we best choose which technologies to invest our time in? When we decide to weigh up the technology choices that confront us, what are the best criteria for doing that? This talk will help you evaluate tools and technologies in a way that best benefits the people who use the websites that we are designing and developing. Let’s take a look at some of the hottest new web technologies and together we will dig beneath the hype to find out whether they will really change life on the web for the better.

A Todo List

A great step-by-step walkthrough by Heydon of making an accessible to-do list, the “Hello World” of JavaScript frameworks.

There’s a lot of great knowledge in here that can be applied to plenty of other interface elements too.

Tuesday, April 11th, 2017

I love it when a plan comes together. http://patternsday.com

I love it when a plan comes together.

http://patternsday.com

Color fonts! WTF? 🌈

I only just wrapped my head around the idea of variable fonts and now here’s colour fonts to really mess with my mind.

Reflections on Resilient Web Design - Scott Dawson

I’m genuinely touched that my little web book could inspire someone like this. I absolutely love reading about what people thought of the book, especially when they post on their own site like this.

This book has inspired me to approach web site building in a new way. By focusing on the core functionality and expanding it based on available features, I’ll ensure the most accessible site I can. Resilient web sites can give a core experience that’s meaningful, but progressively enhance that experience based on technical capabilities.

Giddy with excitement as I announce…

Patterns Day!

http://patternsday.com/

A one-day event in Brighton on June 30th. Come one, come all!

Announcing Patterns Day: June 30th

Gather ‘round, my friends. I’ve got a big announcement.

You should come to Brighton on Friday, June 30th. Why? Well, apart from the fact that you can have a lovely Summer weekend by the sea, that’s when a brand new one-day event will be happening:

Patterns Day!

That’s right—a one-day event dedicated to all things patterny: design systems, pattern libraries, style guides, and all that good stuff. I’m putting together a world-class line-up of speakers. So far I’ve already got:

It’s going to be a brain-bendingly good day of ideas, case studies, processes, and techniques with something for everyone, whether you’re a designer, developer, product owner, content strategist, or project manager.

Best of all, it’s taking place in the splendid Duke Of York’s Picture House. If you’ve been to Remy’s FFconf then you’ll know what a great venue it is—such comfy, comfy seats! Well, Patterns Day will be like a cross between FFconf and Responsive Day Out.

Tickets are £150+VAT. Grab yours now. Heck, bring the whole team. Let’s face it, this is a topic that everyone is struggling with so we’re all going to benefit from getting together for a day with your peers to hammer out the challenges of pattern libraries and design systems.

I’m really excited about this! I would love to see you in Brighton on the 30th of June for Patterns Day. It’s going to be fun!

Griddy

A handy GUI for experimenting with CSS Grid Layout without having to recall the syntax.

Monday, April 10th, 2017

Congratulations to @stuntbox, @hannahsbirch, @robweychert and everyone else at @ProPublica for the well-deserved Pulitzer. Great work/people

Getting griddy with it

I had the great pleasure of attending An Event Apart Seattle last week. It was, as always, excellent.

It’s always interesting to see themes emerge during an event, especially when those thematic overlaps haven’t been planned in advance. Jen noticed this one:

I remember that being a theme at An Event Apart San Francisco too, when it seemed like every speaker had words to say about ill-judged use of Bootstrap. That theme was certainly in my presentation when I talked about “the fallacy of assumed competency”:

  1. large company X uses technology Y,
  2. company X must know what they are doing because they are large,
  3. therefore technology Y must be good.

Perhaps “the fallacy of assumed suitability” would be a better term. Heydon calls it “the ‘made at Facebook’ fallacy.” But I also made sure to contrast it with the opposite extreme: “Not Invented Here syndrome”.

As well as over-arching themes, it was also interesting to see which technologies were hot topics at An Event Apart. There was one clear winner here—CSS Grid Layout.

Microsoft—a sponsor of the event—used An Event Apart as the place to announce that Grid is officially moving into development for Edge. Jen talked about Grid (of course). Rachel talked about Grid (of course). And while Eric and Una didn’t talk about it on stage, they’ve both been writing about the fun they’ve been having having with Grid. Una wrote about 3 CSS Grid Features That Make My Heart Flutter. Eric is documenting the overall of his site with Grid. So when we were all gathered together, that’s what we were nerding out about.

The CSS Squad.

There are some great resources out there for levelling up in Grid-fu:

With Jen’s help, I’ve been playing with CSS Grid on a little site that I’m planning to launch tomorrow (he said, foreshadowingly). I took me a while to get my head around it, but once it clicked I started to have a lot of fun. “Fun” seems to be the overall feeling around this technology. There’s something infectious about the excitement and enthusiasm that’s returning to the world of layout on the web. And now that the browser support is great pretty much across the board, we can start putting that fun into production.

The full stack design system - Inside Intercom

A look at the history of design systems and how they differ from pattern libraries. Or, to put it another way, a pattern library is one part of a design system.

Transforming Our Libraries from Analog to Digital: A 2020 Vision | EDUCAUSE

Brewster Kahle outlines his vision for library collaboration in curating and distributing digital works.

Web Performance Optimization Stats

If you ever need to pull up some case studies to demonstrate the business benefits of performance, Tammy and Tim have you covered.

Recommended Reading: Resilient Web Design, a Free e-Book from Jeremy Keith – WordPress Tavern

A jolly nice review of Resilient Web Design.

After just a few pages in, I could see why so many have read Resilient Web Design all in one go. It lives up to all the excellent reviews.

Strange Beasts on Vimeo

A small black mirror.

Sunday, April 9th, 2017

CodePen - CSS Grid Template Builder

Here’s a handy interface if you want to get your head around named areas in CSS Grid, also known as doing layout with ASCII art.

Eric’s Archived Thoughts: Grid-Powered Drop Quotes

I’ve been digging into CSS Grid a lot during the past week, so this post from Eric is very timely. On the surface it looks like a fairly simple use case but as you read through the explanation, it starts to become clear that the underlying thinking could be used in a lot of situations.

And, yes, like Eric, I too have been bitten by the Grid bug:

I’m working on my first redesign in a dozen years. If that doesn’t give you some sense of the power of Grid, well, I just don’t know what will.

Career-change coder: how Siri got into programming - with the help of codebar - The Unit

Before leaving Brighton to head back to Sweden, Siri describes how Codebar helped her get started with front-end development:

I went along every week to work on my site, and was overwhelmed by the support and dedication of the mentors. Seeing the talented and diverse programmers in action made me re-think my preconceptions, and I soon realised that anyone can learn to code, from a 68-year-old retired teacher, to a twenty-seven-year-old female career-changer like me.

Container Query Discussion | CSS-Tricks

Chris rounds up the discussion that’s been happening around container queries, for and against.

Personally, I’d like to see about 100 different use cases fleshed out. If it turns out some of them can be done sans container queries, awesome, but it still seems highly likely to me that having container queries available to us would be mighty handy.

Saturday, April 8th, 2017

Hanging out with Lola.

Hanging out with Lola.

Letting sleeping dogs lie.

Letting sleeping dogs lie.

Reading The Sense Of Style by Steven Pinker.

Friday, April 7th, 2017

Working.

Working.

Getting ready to watch Wire perform in studio at KEXP.

Tuesday, April 4th, 2017

In the @AnEventApart green room with @kryshiggins, @vlh, and an excited @una. 🙂😀🤗😁

In the @AnEventApart green room with @kryshiggins, @vlh, and an excited @una. 🙂😀🤗😁

Salter Cane

I somehow missed this when it published last year—a profile of my band Salter Cane.

Salter Cane can be labeled ”gothic country”, ”melancountria”, “country noir”, ”folk noir” and ”alt-country darkmeisters”.

Sketchnotes from AEA Seattle | Krystal Higgins

I love Krystal’s sketchnotes from my talk at An Event Apart Seattle. Follows on nicely from Ethan’s too.

Jeremy Keith Interview

I had a chat with Toby Osbourn over Skype. He’s writing a book all about print stylesheets so that’s we talked about.

Grid Garden - A game for learning CSS grid

Its the sequel to Flexbox Froggy—this time it’s grid!

I’m a sucker for CSS gamification.

A bit more on container queries. — Ethan Marcotte

Ethan wrote about container queries on his website. Paul wrote his counter-argument on his website. Now Ethan responds. It’s fun to watch two gentlemen engage in civilised discourse.

Blogs, man. They’re gonna big, I tells ya.

LukeW | An Event Apart: Evaluating Technology

Luke is a live-blogging machine. Here’s the notes he made during my talk at An Event Apart Seattle.

If it reads like a rambling hodge-podge of unconnected thoughts, I could say that you had to be there …but it kinda was a rambling hodge-podge of unconnected thoughts.

People of @AnEventApart, if you enjoyed the James Burke clip, check out this audio:

http://archive.dconstruct.org/2012/admiralshovel

Nigiri.🍣

Nigiri.🍣

The CSS Squad.

The CSS Squad.

Monday, April 3rd, 2017

Wish you were here, @iamdanw.

Wish you were here, @iamdanw.

Microsoft just announced that CSS grid is in development for Edge so I just won a dollar from @chriscoyier. Sucker!

Microsoft just announced that CSS grid is in development for Edge so I just won a dollar from @chriscoyier. Sucker!

The Most Exciting Design Systems Are Boring | Big Medium

Design-system builders should resist the lure of the new. Don’t confuse design-system work with a rebrand or a tech-stack overhaul. The system’s design patterns should be familiar, even boring.

The job is not to invent, but to curate.

Interesting thoughts from Josh on large-scale design systems and how they should prioritise the mundane but oft-used patterns.

When the design system is boring, it frees designers and developers to do the new stuff, to solve new problems. The design system carries the burden of the boring, so that designers and developers don’t have to.

Cascading HTML Style Sheets — A Proposal

It’s fascinating to look back at this early proposal for CSS from 1994 and see what the syntax might have been:

A one-statement style sheet that sets the font size of the h1 element:

h1.font.size = 24pt 100%

The percentage at the end of the line indicates what degree of influence that is requested (here 100%).

Questioning Container Queries / Paul Robert Lloyd

Paul’s being contrary again.

Seriously though, this is a good well-reasoned post about why container queries might not be the the all-healing solution for our responsive design problems. Thing is, I don’t think container queries are trying to be an all-encompassing solution, but rather a very useful solution for one particular class of problem.

So I don’t really see container queries competing with, say, grid layout (any more than grid layout is competing with flexbox), but rather one more tool that would be really useful to have in our arsenal.

adactio/ama: Ask @adactio anything!

I’ve made one of them there “ask me anything” things so that you can ask me, well …anything.

Sunday, April 2nd, 2017

Bloody Mary time with @drinkerthinker and @beep.

Bloody Mary time with @drinkerthinker and @beep.

Balance

This year’s Render conference just wrapped up in Oxford. It was a well-run, well-curated event, right up my alley: two days of a single track of design and development talks (see also: An Event Apart and Smashing Conference for other events in this mold that get it right).

One of my favourite talks was from Frances Ng. She gave a thoroughly entertaining account of her journey from aerospace engineer to front-end engineer, filled with ideas about how to get started, and keep from getting overwhelmed in the world of the web.

She recommended taking the time to occasionally dive deep into a foundational topic, pointing to another talk as a perfect example; Ana Balica gave a great presentation all about HTTP. The second half of the talk was about HTTP 2 and was filled with practical advice, but the first part was a thoroughly geeky history of the Hypertext Transfer Protocol, which I really loved.

While I’m mentoring Amber, we’ve been trying to find a good balance between those deep dives into the foundational topics and the hands-on day-to-day skills needed for web development. So far, I think we’ve found a good balance.

When Amber is ‘round at the Clearleft office, we sit down together and work on the practical aspects of HTML, CSS, and (soon) JavaScript. Last week, for example, we had a really great day diving into CSS selectors and specificity—I watched Amber’s knowledge skyrocket over the course of the day.

But between those visits—which happen every one or two weeks—I’ve been giving Amber homework of sorts. That’s where the foundational building blocks come in. Here are the questions I’ve asked so far:

  • What is the difference between the internet and the web?
  • What is the difference between GET and POST?
  • What are cookies?

The first question is a way of understanding the primacy of URLs on the web. Amber wrote about her research. The second question was getting at an understanding of HTTP. Amber wrote about that too. The third and current question is about state on the web. I’m looking forward to reading a write-up of that soon.

We’re still figuring out this whole mentorship thing but I think this balance of research and exercises is working out well.

Hello, Seattle.

Hello, Seattle.

Saturday, April 1st, 2017

Going to Seattle. brb

AMP: breaking news | Andrew Betts

A wide-ranging post from Andrew on the downsides of Google’s AMP solution.

I don’t agree with all the issues he has with the format itself (in my opinion, the fact that AMP pages can’t have script elements is a feature, not a bug), but I wholeheartedly concur with his concerns about the AMP cache:

It recklessly devalues the URL

Spot on! And as Andrew points out, in this age of fake news, devaluing the URL is a recipe for disaster.

It’s hard to avoid the idea that the primary objective of AMP is really about hosting publisher content inside the Google ecosystem (as is more obviously the objective of Facebook Instant Articles and Apple News).

Mandolin played in the trenches.

Mandolin played in the trenches.

Whale aisle.

Whale aisle.