Sunday, April 30th, 2017
Oodles and oodles of videos of talks from London developer meetups.
Friday, April 28th, 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).
Another instance of Fractal in the wild, this time for the Federalist design system.
- 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
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.
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.
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.
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.
Wednesday, April 26th, 2017
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.
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.
Tuesday, April 25th, 2017
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?
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.
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.)
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
Saturday, April 22nd, 2017
Going to Leeds. brb
Friday, April 21st, 2017
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.
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.”
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.
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.
Wednesday, April 19th, 2017
Brightonians with websites: it’s Homebrew Website Club this evening in @68MiddleSt, 6pm - 7:30pm.
The rapture of the nerds:
Transhumanism’s simulation theology
Designing the Patterns Day site
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.
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 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.
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 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.
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
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.
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.
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.
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.
Frank has published the (beautifully designed) text of his closing XOXO keynote.
Roll up, roll up! Get your tickets for Patterns Day:
Brighton, June 30th.
Sunday, April 16th, 2017
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.
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.
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?
Chris gives a step-by-step walkthrough of enabling webmentions on a Wordpress site.
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
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.
- Temporarily Hidden Content
- Purposefully Visually Hidden Content
- Purposefully Visual-Only Content
This is a really clear explanation of how CSS works.
Friday, April 14th, 2017
Andy compares the impending shutdowns of Ffffound and Mlkshk. They’re quite, quite different when it comes to handling data rescue.
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
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:
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
A collection of interface patterns for granting or denying permissions.
Here’s the opening keynote I gave at the Render Conference in Oxford. The talk is called Evaluating Technology:
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 only just wrapped my head around the idea of variable fonts and now here’s colour fonts to really mess with my mind.
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…
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:
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!
A handy GUI for experimenting with CSS Grid Layout without having to recall the syntax.
Monday, April 10th, 2017
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:
The theme of this year’s AEA (ideas emerging across talks) — do not just do a thing on your project because others do on theirs. #aeasea— Jen Simmons (@jensimmons) April 3, 2017
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”:
- large company X uses technology Y,
- company X must know what they are doing because they are large,
- 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.
There are some great resources out there for levelling up in Grid-fu:
- Jen’s experimental layout lab shows what’s possible.
- Her exercises in Codepen are a great way to test your knowledge of Grid.
- So is CSS Grid Garden.
- Rachel’s extensive Grid by Example is the perfect way to find the Grid solution to your layout scenario.
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.
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.
Brewster Kahle outlines his vision for library collaboration in curating and distributing digital works.
If you ever need to pull up some case studies to demonstrate the business benefits of performance, Tammy and Tim have you covered.
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.
A small black mirror.
Sunday, April 9th, 2017
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.
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.
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.
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
Reading The Sense Of Style by Steven Pinker.
Friday, April 7th, 2017
Getting ready to watch Wire perform in studio at KEXP.
Tuesday, April 4th, 2017
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”.
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.
Monday, April 3rd, 2017
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.
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%).
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.
I’ve made one of them there “ask me anything” things so that you can ask me, well …anything.
Sunday, April 2nd, 2017
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.
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.
Saturday, April 1st, 2017
Going to Seattle. brb
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).