A brief history of space concept art—Norman Rockwell, Chesney Bonestell, Robert McCall, Pat Rawlings, David Meltzer …all the classics.
Some interesting interface ideas here for informing users when a service worker is doing its magic.
In the future users may expect a site to work offline after visiting again, but until this happens, I think it is a good idea to let the users know about this feature.
Justin has been thinking about how we ensure our digital legacy survives our passing.
The history of the GIF—a tale of licensing, compression, and standards.
The devs at The Guardian walk through the process of building a progressive web app for the Olympics. There were some gotchas with the life cycle of service workers, but the pay-off was worth it:
Once you get there though, it’s quite magical when you load the page on a phone, switch it to airplane mode, reload, and continue using the app as though nothing was wrong.
Mozilla are updating their brand identity and they’re doing it in the open. A brave, but fascinating move.
An in-depth look at the current Shadow DOM spec. It’s well-written but I don’t think this will really click with me until I start playing around with it for myself.
It’s good to see that the examples have some thought given to fallback content.
There’s also a corresponding tutorial on custom elements
Yummy wallpapers for your desktop, tablet, and phone, from NASA and ESA.
I thoroughly enjoyed playing this game. On the face of it, it seems like little more than a cow-clicker, but the way that the plot and the gameplay unfolds is really delightful.
This feels like the kind of game that would only work on the web—keep it in a browser tab in the background, revisiting occasionally throughout the day.
Two pieces of good news from Google:
- 85% of websites qualify as mobile-friendly, so there’s no longer a need to explicitly label them as such in search results.
- Google will down-rank sites that have annoying pop-overs demanding you download an app or sign up to an email newsletter when you’re trying to read the damn page.
I giggled at quite of few of these mashups.
I’m in complete agreement with Heydon here:
But it turns out the only surefire way to make performant Web Stuff is also to just write less. Minify? Okay. Compress? Well, yeah. Cache? Sounds technical. Flat out refuse to code something or include someone else’s code in the first place? Now you’re talking.
Just like the “mobile first” mindset, if you demand that everything must justify its existence, you end up with a better experience for everyone:
A thorough explanation of
@supports from Jen, with plenty of smart strategies for using it in your CSS today.
The more I reflect on the current practices of the online advertising industry, the more I think that ad-blocking is a moral imperative.
The 10K competition—spiritual successor to Stewart Butterfield’s 5K.org—is back. This time there’s no escape clause with web fonts or jQuery. You can lazy-load in more content after the initial 10K payload …but whatever you’re building needs to be usable in that first 10K.
Give it a go. There’s nothing like having a constraint to really get the creative juices flowing.
I’m in a similar position to Remy:
But, like Remy, I’m interested in knowing what are the ideas and techniques embedded within large frameworks that will end up making their way into the web stack:
What I want to know is: what should I be taking away from React into my own continued evolution as a web developer?
There are some good responses in the comments.
Here’s an interesting use of service workers: figure out the difference (the delta) between the currently-cached version of a file, and the version on the network, and then grab only the bits that have changed. It requires some configuration on the server side (to send back the diff) but it’s an interesting approach that could be worth keeping an eye on.
A browser aimed specifically at web developers. It’s got some nice features around mobile device emulation.
There’s this really common use-case I’ve seen at Codebar and Homebrew Website Club, where someone is making a static site, but they just want a contact form that sends data via email. This looks like a handy third-party service to do just that. No registration required: it’s all done via the value of the
action attribute in the opening
I’ve always loved Jeffrey’s writing.
Another dive into the archives of the www-talk mailing list. This time there are some gems about the origins of the
input element, triggered by the old
A great series of short videos from Marcy on web accessibility.
A talk from Harry on the whys and hows of refactoring CSS. He mentions the
all: initial declaration, which I don’t think I’ve come across before.
Adult training represents a way into coding for millions of women who never learnt when they were younger. Meetups such as those run by organisations such as Women Who Code and Codebar can introduce women to the collaborative, problem-solving world of programming.
In the same vein as Hugo’s script, Ire walks through the steps involved in making an accessible modal window. Seeing all the thinking and code required for this really highlights the need for a way of making the document in the background inert.
Dan has been researching the history of design systems, annotating as he goes.
Some helpful “gotchas” that could save you some frustration if you’re starting out with service workers.
Build JS apps responsibly - cover your basics, render strategically and enhance into true apps.
If you’re going to dip your toes into the world of service workers, this handy library from the Chrome team is a good place to start.
I’ve been thinking about this a lot lately. It feels like a user’s browser history is an incredibly rich seam of valuable information just waiting to be presented in a more interesting way.
The ancestors of the Internet were kind enough to give us a communication standard which is free, transparent, and standardized. It would be a shame to see the tech communication landscape move further and further into the world of locked gardens and proprietary schemas.
A wonderful investigation of a culture-shifting mobile device: the kaleidoscope. A classic Gibsonian example of the street finding its own uses for technology, this story comes complete with moral panics about the effects of augmenting reality with handheld devices.
(I’m assuming the title wasn’t written by the author—this piece deals almost exclusively with pre-Victorian England.)
Some nifty layout tricks using the
writing-mode property in CSS.
Jake has written up the notes from the most recent gathering to discuss service workers. If you have any feedback on any of the proposed changes or additions to the spec, please add them. This proposal is the biggie:
We’re considering allowing the browser to run multiple concurrent instances of a service worker.
Google’s search results now include AMP pages in the regular list of results (not just in a carousel). They’re marked with a little grey lightning bolt next to the word AMP.
The experience of opening of those results is certainly fast, but feels a little weird—like you haven’t really gone to the website yet, but instead that you’re still tethered to the search results page.
Clicking on a link within an AMP spawns a new window, which reinforces the idea of the web as something separate to AMP (much as they still like to claim that AMP is “a subset of HTML”—at this point, it really, really isn’t).
On August 6th, 1991, Tim Berners-Lee sent a message to alt.hypertext newsgroup announcing his WorldWideWeb project.
Alex Langley’s Tech Chat Episode 14 - Has digital technology changed everything or has it changed nothing? on Huffduffer
Myself and Lizzie were on a local radio show, having a wide-ranging chat about technology, commenting on recent news stories. It was fun.
A nice introduction to using Service Workers to enable syncing in the background: when the user is offline, tasks get queued up and then when the user is back online, those tasks execute.
Here’s another clever CSS technique. It uses flexbox to add horizontal lines either side of centred content.
This is witchcraft. I’ve been deconstructing the CSS to figure out how this works and it’s really clever.
(Hint: try commenting out some of the CSS and see what happens.)
The security research that went into improving the spec for the Battery Status API. This is why it’s so important that the web holds itself to high standard.
Even most unlikely mechanisms bring unexpected consequences from privacy point of views. That’s why it is necessary to analyze new features, standards, designs, architectures - and products with a privacy angle. This careful process will yield results, decrease the number of issues, abuses and unwelcome surprizes.
Over the years I’ve come to realize that most difficult part of making websites isn’t the code, it’s the “hidden expectations”, the unseen aspects I didn’t know were my responsibility when I started: Accessibility, Security, Performance, and Empathy.
Adam and I share the same hopes and frustrations with web components. They can be written in a resilient, layered way that allows for progressive enhancement, but just about every example out there demonstrates a “my way or the highway” approach to using them.
We were chatting about this in the Design Systems slack channel, and it helped clarify some of my thoughts. I’ll try to poop out a blog post about this soon.
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.
I love this back and forth between Brad and Jonathon. I think they’ve both got some good ideas:
- I agree with Brad that you can start marking up these kind of patterns before you’ve got visual designs.
- I agree with Jonathon that it’s often better to have a generic wrapper element to avoid making assumptions about which elements will be used.
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.
A workshop for codebar students: Build a portfolio or blog site | Charlotte Jackson, Front-end developer
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.
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.
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.
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.
Susan describes the process behind creating Bocoup’s style guide…
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?
I really, really like what Ember is aiming for here:
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.
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).
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.
The Search For The Holy Grail: How I Ended Up With Element Queries, And How You Can Use Them Today – Smashing Magazine
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.
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.