| 5th | 10th | 15th | 20th | 25th | 30th | ||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 12am | |||||||||||||||||||||||||||||||
| 4am | |||||||||||||||||||||||||||||||
| 8am | |||||||||||||||||||||||||||||||
| 12pm | |||||||||||||||||||||||||||||||
| 4pm | |||||||||||||||||||||||||||||||
| 8pm |
A classic example of the holy grail of web performance and robustness—start with regular HTML sent from the server, enhance once it’s in the browser …if the browser is capable of it. In this case, it’s using JavaScript (React) on both the server and the browser.
Paradigm-busting disruption!
A straight-faced Jake talks us through the step-by-step iterations for turning a JavaScript-required web thang into a progressively enhanced zippy experience, supercharged with Service Worker.
The system makes the website. Don’t blame the web developer, blame the organisation. A web developer embedded in a large system isn’t the one making the websites.
To make a progressively enhanced website that performs well and loads quickly even on slow connections, you need to first make an organisation that values those qualities over others.
This article first appeared in Fast Company almost twenty years ago. It’s a fascinating look into the culture and process that created and maintained the software for the space shuttle. It’s the opposite of Silicon Valley’s “move fast and break things.”
To be this good, the on-board shuttle group has to be very different — the antithesis of the up-all-night, pizza-and-roller-hockey software coders who have captured the public imagination. To be this good, the on-board shuttle group has to be very ordinary — indistinguishable from any focused, disciplined, and methodically managed creative enterprise.
Two-thirds of the way through our 100 days project, Batesy takes stock of his journey so far.
(I should probably mention that I love each and every one of the pieces of hand lettering that he’s done …talented bastard.)
Susan points out some uncomfortable truths. It’s all very well for us to try and create a culture of performance amongst designers and developers, but it will all be nought if we could change the minds of people higher up the chain …who currently just don’t care.
I think she’s spot on when she points to this possible solution:
I think what I’m asking is, who will be the game changer in this conversation? Who will be the large, bulky site that will work towards performance and make it happen and then we will all point to them and say, see they did it. It seems to me that that is what it takes. Much like we pointed to ESPN and being able to use CSS for layout or The Boston Globe and being able to do responsive at a large scale, who will we point to for the performance overhaul?
In which Dan simultaneously goes to the Netherlands and Belgium in a Miévillian sort of way.
Have a listen to the dConstruct 2011 talk from Kars for context.
The slides from Paul’s talk-in-progress on design principles for building responsive sites. He gave us a sneak peak at Clearleft earlier this week. ‘Sgood.
Hillary, legendary for being the first to scale Mount Everest with teammate Tenzing Norgay, was on board, and Armstrong was, too, saying he was curious to see what the North Pole looked like from ground level, as he’d only seen it from the moon. Astronaut problems.
Apart from the best practices that can often be automated, there are many human decisions that have impact on page speed. A way to make page speed part of the conversation and optimising it part of a website’s requirement, is to set a performance budget.
This is a great blow-by-blow account of making an agency website perform better.
I love the side-by-side comparisons with other agencies, including Clearleft—the gauntlet has been thrown down!
It’s not about technology, performance and APIs – it’s about people.
Every single word that Lyza has written here speaks to me so, so much.
I have no idea what I’m doing and I’m nervous about messing up, but I keep doing this week after week because it feels important.
Get out of my head, Lyza!
I felt a great swell of pride watching Charlotte give an excellent presentation at the Talk Web Design conference at Greenwich University.
The best description of Mad Max: Fury Road. Read.
Much of the web’s early cultural and design history is at risk, despite efforts by the Internet Archive and renegade archivists. One of our realizations after 20 years on the web is that our responsibility isn’t just to the new; we also need to preserve what’s been built in the past.
I had a lot of fun chatting with Brad and Anna for the final episode of their small batch podcast on style guides and pattern libraries.
I believe that Mozilla can make progress in privacy, but leadership needs to recognize that current advertising practices that enable “free” content are in direct conflict with security, privacy, stability, and performance concerns — and that Firefox is first and foremost a user-agent, not an industry-agent.
Grant, like Emma, has recently started blogging again. This makes me very, very happy. And he’s doing it for what I consider to be all the right reasons:
But this is mostly a place for me to capture my thoughts, and an excuse to consider them, and an opportunity to understand them more fully.
More thoughts on the lack of a performance culture, prompted by the existence of Facebook Instant:
In my experience, the biggest barrier to a high-performance web is this: the means of production are far removed from the means of delivery. It’s hard to feel the performance impact of your decisions when you’re sitting on a T3 line in front of a 30 inch monitor. And even if you test on real devices (as you should), you’re probably doing it on a fast wifi network, not a spotty 3G connection. For most of us, even the ones I would describe as pro-performance, everything in the contemporary web design production pipeline works against the very focus required to keep the web fast.
The Indieweb approach has a lot in common with Ev’s ideas for Medium, but the key difference is that we are doing it in a way that works across websites, not just within one.
Katie, Divya, and the other great designers and developers at Sparkbox run workshops on HTML and CSS for girl scouts. They’ve shared their resources and I might just borrow some of them for Codebar.
I can relate 100% to what Dave is saying here:
I’m disenchanted with desktop. That conviction runs so deep, I groan when I see a desktop layout JPEG.
All too often we talk the talk about taking a mobile first approach, but we rarely walk the walk. Most designers and developers still think of the small-screen viewport as the exception, not the norm.
Zeldman looks back at Stewart Butterfield’s brilliant 5K contest. We need more of that kind of thinking today:
As one group of web makers embraces performance budgets and the eternal principles of progressive enhancement, while another (the majority) worships at the altar of bigger, fatter, slower, the 5K contest reminds us that a byte saved is a follower earned.
The controversial hamburger icon goes mainstream with this story on the BBC News site.
It still amazes me that, despite clear data, many designers cling to the belief that the icon by itself is understandable (or that users will “figure it out eventually”). Why the aversion to having a label for the icon?
A handy way of quickly finding out how the weather in your area compares to the weather on Mars.
Progressive Enhancement remains the best option for solving web development issues such as wide-ranging browser support, maintenance and future-proofing your application.
This looks like it’ll be brilliant! Nat is running a prototyping workshop the day before Responsive Day Out:
This workshop is for designers with no coding experience — if you’re an absolute beginner who wants to find out whether coding can help you with your job, this is for you!
Instead of coming up with all these new tools and JavaScript frameworks, shouldn’t we try to emphasize the importance of learning the underlying fundamentals of the web? Teach those who are just stepping to this medium and starting their careers. By not making our stack more and more complex, but by telling about the best practices that should guide our work and the importance of basic things.
The next Neal Stephenson book sounds like it’s going to be great.
Bastian sums up his experience of attending Indie Web Camp:
But this weekend brought a new motivational high that I didn’t expect to go that far. I attended the Indie Web Camp in Düsseldorf, Germany and I’m simply blown away.
This Async event at 68 Middle Street on June 11th looks like it’s going to good (and relevant to my interests).
Justin is at Indie Web Camp Germany with me and he’s been converting Am I Responsive? to https—here’s his write-up.
Here’s a really nifty use of the :checked behaviour pattern that Charlotte has been writing about—an interface for choosing a note from a piano keyboard. Under the hood, it’s a series of radio buttons and labels.
Ben Fino-Radin describes how the MoMA’s archivematica “analyzes all digital collections materials as they arrive, and records the results in an obsolescence-proof text format that is packaged and stored with the materials themselves.”
The 17th century blind Irish harpist has been immortalised as a crater on Mercury.
François is here at Indie Web Camp Germany helping out anyone who wants to get their site running on https. He wrote this great post to get people started.
This is nifty—Nicholas is also going for the 100 words exercise that I’ve been doing.
I’m going to be taking part in a discussion upstairs in The Eagle in Brighton on May 14th, all about digital preservation. I think it’s going to be really fun. It’s free—you should come along.
Apps:
Apps must run on specific platforms for specific devices. The app space, while large, isn’t universal.
Websites:
Websites can be viewed by anyone with a web browser.
And that doesn’t mean foregoing modern features:
A web browser must only understand HTML. Further, newer HTML (like HTML 5) is still supported because the browser is built to ignore HTML it doesn’t understand. As a result, my site can run on the oldest browsers all the way to the newest ones. Got Lynx? No problem. You’ll still be able to find matches nearby. Got the latest smartphone and plentiful data? It’ll work there, too, and take advantage of its features.
This is why progressive enhancement is so powerful.
My site will take advantage of newer technologies like geolocation and local storage. However, the service will not be dependent on them.