| 5th | 10th | 15th | 20th | 25th | 30th | ||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 12am | |||||||||||||||||||||||||||||||
| 4am | |||||||||||||||||||||||||||||||
| 8am | |||||||||||||||||||||||||||||||
| 12pm | |||||||||||||||||||||||||||||||
| 4pm | |||||||||||||||||||||||||||||||
| 8pm |
Fortunately there’s a back-up on the Internet Archive, but this tale of Google’s overnight destruction of fourteen years of writing is truly infuriating.
When we use their services, we trust that companies like Google will preserve some of the most personal things we have to share. They trust that we will not read the fine print.
When you pitch your tent in someone else’s walled garden, they can tear down your home whenever they want.
Paul argues that the biggest problems for interoperability on the web don’t come from support (or lack of support) for entire features, but from the frustrating inconsistencies when features land in different browsers at different times with different implementations:
- Platform inconsistencies hurt us more than big feature differences, we should start to try and prioritize aligning the platform
- We need better tools to help us understand what the inconsistencies are and guidance on how to manage them
- Developers should raise more issues to keep browser vendors accountable when there are differences
Sixteen years on, this still rings true.
I realized there are dot-com people and there are web people. Dot-com people work for start-ups injected with large Silicon Valley coin, they have options, they talk options, they dream options. They have IPOs. They’re richer after four months of “web” work than many web people who’ve been doing it since the beginning. They don’t have personal sites. They don’t want personal sites. They don’t get personal sites. They don’t get personal. Web people can tell you the first site they ever saw, they can tell you the moment they knew: This, This Is It, I Will Do This. And they pour themselves into the web, with stories, with designs, with pictures.
This is a wonderful way of progressively explaining the layered approach to building for the web that Charlotte was teaching in her Codebar workshop.
Yves Peters examines the typography of Star Trek. Unlike Typeset In The Future, which looks at on-screen typography, this article dives into titles and promotional posters.
I love this back and forth between Brad and Jonathon. I think they’ve both got some good ideas:
Margaret Hamilton:
Never let fear get in the way! Don’t be afraid to continue even when things appear to be impossible, even when the so-called “experts” say it is impossible. Don’t be afraid to stand alone, to be different, to be wrong, to make and admit mistakes, for only those who dare to fail greatly can ever achieve greatly.
An entertaining presentation from South By Southwest on the UI element of last resort.
It’s funny because it’s true.
A good introduction to custom elements, one piece of the web components stack.
That said, when using custom elements—or anything involving JavaScript, for that matter—you should always design experiences for progressive enhancement, and plan for the possibility that JavaScript isn’t enabled or available.
Hmmm …that’s kind of hard when JavaScript is required to make custom elements work at all.
If you’re planning on giving Fractal a test drive, jump into this Slack channel. Mark and others will be able to help you out with any questions that aren’t covered in the docs.
These design principles are meant to guide the ongoing design and development of AMP. They should help us make internally consistent decisions.
I’ve added these to my collection of design principles.
Charlotte did a fantastic job putting this workshop together on the weekend. It was inspiring!
When I designed the Science Hack Day logo, I never expected to one day see it recreated with florescent E. coli.
The story of Science Hack Day …as told in the Proceedings of the National Academy of Sciences of the United States of America!
(a PDF version is also available)
The trouble with overflow menus is that you didn’t actually take anything away, you just obnoxiously obfuscated it.
Words of warning and advice from Daniel.
Instead of prioritizing, we just sweep complexity under the rug and pretend that it doesn’t exist.
A nice little walkthrough of a straightforward Service Worker for a content-based site, like a blog.
Mark sets the scene for Fractal, the fantastic tool he’s built for generating pattern libraries.
This 1.0 release is just a start; it hopefully provides a solid foundation on which we (and anyone else who wants to contribute) can build and expand on in the future.
Exciting!
This is the tool that we use at Clearleft to generate pattern libraries. It’s pretty damn cool. Mark built it. It’s pretty damn cool.
The life cycle of a Service Worker—with all its events and states—is the one bit that I’ve never paid that much attention to. My eyes just glaze over when it comes to installation, registration, and activation. But this post explains the whole process really clearly. Now it’s starting to make sense to me.
I’m not a fan of the checklist approach to accessibility, but this checklist of checklists makes for a handy starting point and it’s segmented by job role. Tick all the ones that apply to you, and this page will generate a list for you to copy and paste.
Well, this is interesting! It turns out you can turn your laptop into a beacon for broadcasting a URL to devices that support The Physical Web.
Fight the scourge of performance-killing redirect-laden t.co links in Twitter’s web interface with this handy Chrome extension.
A newsletter dedicated to all things related to design systems, style guides, and pattern libraries.
Slowly but surely the web is switching over to HTTPS. The past year shows a two to threefold increase.
I think Tyler’s onto something here:
I noticed three qualities that recurred in different combinations. Without at least two, the projects seemed doomed to failure.
- User-Friendly
- Collaborative
- Integrated
I certainly think there’s a difference in how you approach a pattern library intended as a deliverable (something we do a lot of at Clearleft) compared to building a pattern library for an ongoing ever-evolving product.
Phil’s write-up of teaching web development to beginners is immensely valuable in the run-up to the Codebar workshop that Charlotte is running this weekend. This bit gave both us a real “a-ha!” moment:
It only occurred to me at the end that I should have encouraged the students to try and fix each other’s bugs. If anyone had problems I’d go round and help people and often it’d be a little typo somewhere. Helping each other would acknowledge that this is entirely normal and that a second pair of eyes is often all that’s needed.
Shamefully, I haven’t been doing one-to-ones with my front-end dev colleagues at Clearleft, but I’m planning to change that. This short list of starter questions from Lara will prove very useful indeed.
Jason breaks down the myths of inputs being tied to device form factors. Instead, given the inherent uncertainty around input, the only sensible approach is progressive enhancement.
Now is the time to experiment with new forms of web input. The key is to build a baseline input experience that works everywhere and then progressively enhance to take advantage of new capabilities of devices if they are available.
Andrew picks out his favourite bits from this year’s Google I/O, covering web payments, CSS containment, and—of course—Service Workers and progressive web apps, although he does note (and I concur):
I wish Google would focus as much attention on ‘normal’ sites that perform navigations as they do on so called ‘app-shell’ (which is just a new name for single-page apps, as far as I can tell), but then many people will be building SPAs and these recipes will make those apps fly. In news publishing we seem to flip flop between traditional page navigations and SPAs, but I’ve never found a SPA news site (or a native app) that I really like more than a normal website. Maybe a really good progressive web app will change that. But I’m not convinced.
Still, as he says:
All this really just underscores how flexible ServiceWorker is and that with it we can disagree on what the right solution is, but we can all get what we want anyway.
A terrific rundown of all your options when it comes to web font loading.
Jason looks at the business reasons for and against building progressive web apps. In short, there’s everything to gain and nothing to lose.
Seriously, why would you not add a Service Worker and a manifest file to your site? (assuming you’re already on HTTPS)
I lived in Freiburg for years but I never knew of this story.
Two weeks ago, writer and artist Dennis Cooper was checking his Gmail when something peculiar happened: the page was refreshed and he was notified that his account had been deactivated – along with the blog that he’d maintained for 14 years.
This is why the Indie Web exists.
His advice to other artists who work predominantly online is to maintain your own domain and back everything up.
The roadmap for progressive web apps from Microsoft; not just their support plans, but also some ideas for distribution.
From the ARPANET to the internet, this is a great history of the Domain Name System:
Root DNS servers operate in safes, inside locked cages. A clock sits on the safe to ensure the camera feed hasn’t been looped. Particularly given how slow DNSSEC implementation has been, an attack on one of those servers could allow an attacker to redirect all of the Internet traffic for a portion of Internet users. This, of course, makes for the most fantastic heist movie to have never been made.
…and Anna describes the process of creating the Snyk style guide.
Susan describes the process behind creating Bocoup’s style guide…
A walkthrough of what’s new in Pattern Lab 2. It’s really interesting to see the convergent evolution of ideas here with what’s brewing in Fractal at Clearleft.
This is relevant to my interests because I think I’m supposed to be a senior developer. Or maybe a technical director. I’m really not sure (job titles suck).
Anyway, I very much appreciate the idea that a technical leadership position isn’t just about technical skills, but also communication and connectedness.
When we boiled down what we’re looking for, we came away with 12 traits that divide pretty cleanly along those three areas of responsibility: technical capability, leadership, and community.
For someone like me with fairly mediocre technical capability, this is reassuring.
Now if I only I weren’t also mediocre in those other areas too…
A handy tool for testing the legibility of different typefaces under all sorts of conditions.
Here’s a fun game to help practice those CSS selectors.
Did you know that Abby Covert’s book is available online in its gloriously hyperlinked entirety?
Hot on the heels of an accessible toggle, here’s an accessible modal dialog script.
I really, really like what Ember is aiming for here:
First, we deliver the raw content, ensuring those on slow connections or without JavaScript get they’re after as soon as possible. Next, we load the minimum set of JavaScript needed to interactivity for that page, keeping transfer time and parsing time low. Once the user has an interactive page, we can start preemptively loading other parts of the application, including frequently-accessed data.
That’s how you get the holy grail of resilience and performance:
Subsequent visits and interactions are therefore nearly instantaneous, because they don’t rely on the network.
I sincerely hope other frameworks are paying attention to this layered approach.
Oh, and I also like this observation:
There’s an age-old argument about the difference between “web pages” and “web apps”. In reality, there’s a continuum between the two.
Simon’s in-depth report on the Decentralized Web Summit.
Moonscape is a free and freely shareable high-definition documentary about the first manned Moon landing. Funded and produced by space enthusiasts from all over the world, it shows the full Apollo 11 landing and moonwalk, using only the original audio, TV and film footage and the original photographs, rescanned and restored from the best available sources, with full English subtitles (other languages will follow).
A way of declaring the scope of an element’s layout and paint styles, which browsers can then use as a hint to optimise performance. It’s already shipping in Chrome and Opera.
I’ve always loved the way that Edward Tufte consistently uses Bembo to typeset his books. Here’s a version made for screen and freely licensed.
An attempt to crack the element query nut. It relies on executing JavaScript at runtime so it doesn’t feel production-ready to me unless you’re already relying on JavaScript to render or style your content. Still, there’s a lot of good thinking has gone into the syntax—it’s worth investigating for that reason alone.
Depending on how you’re currently structuring your CSS and class attributes, web components might not make all that much of a difference to your workflow.
A handy Chrome extension to simulate different kinds of visual impairment.
Margaret Hamilton’s code after scanning and transcribing.
The code is commented too. But there might still be issues.
You can think of this as a short book or a long article, but either way it’s a handy overview of typography on the web:
A concise, referential guide on best web typographic practices.
Mind you, I take issue with this assertion:
Establishing a vertical rhythm is simple.
An alternative to using the :checked pseudo-class for sprinkling in some behaviour—you can use the :target pseudo-class. It might mess up the browser history though.
Ten of us reminisce about where we were and what we were doing a decade ago.
Ten years ago I was writing on my blog. Lots of other people were writing on their blogs back then too. That would soon change, though. Twitter and Facebook were picking up steam and soon they’d be luring bloggers away with enticing and seductive short-form convenience. I’ve stubbornly continued writing on my own site. I fully intend to keep on writing there for the next ten years too.
I can’t wait for this documentary to come out (I linked to its website a while back).
The second book in Adam Scott’s series on ethical web development is a nice quick read, covering URL design, Service Workers, and performance.
This sixteen year old cool URI has not changed. I think this idea of domains entering an archive state is worth pursuing.
Also, I love the science fictional footnote “Note for readers after 2100”.
Dave is making a nifty in-browser game that you can play by yourself or in co-operative mode. If your device has a gyroscope, you can use that to aim. Very cool!
(And it looks like it’s all set to become a progressive web app once it’s running on HTTPS.)
The World Wide Web, with all of its pages, blogs and so on- has allowed human expression in ways that would have been uneconomic and out of reach before. The most dramatic effect has been this ability for almost anyone to express himself or herself whenever they want to- and potentially be heard by many others.
Vint Cerf there, taking part in this wide-ranging discussion with, among others, Kevin Kelly and Bob Metcalfe.
The introduction leans a bit too heavily on Nicholas Carr for my liking, but it ends up in a good place.
The internet connects us cognitively and becomes a membrane through which our minds can interact, manifesting a whole new iteration of our species, who have begun to exist in a connected symbiotic relationship with technology.
The internet is the first technology we have created, that makes us more human.
A cautionary tale of digital preservation.
.generation is a short film that intimately documents three millennials in the year 2054 - uncovering their relationships with technology in the aftermath of the information age.