Oodles and oodles of videos of talks from London developer meetups.
Sunday, April 30th, 2017
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.
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
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
The rapture of the nerds:
Transhumanism’s simulation theology
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.
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.”
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.
A handy GUI for experimenting with CSS Grid Layout without having to recall the syntax.
Monday, April 10th, 2017
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.
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.
Saturday, April 1st, 2017
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).