You can do anything with CSS these days.
A very handy tool for figuring out breakpoints for responsive images.
Upload an image in its largest size, play around with the settings, and then generate the breakpoints, the markup, and the resized images for each breakpoint.
Earth as seen on one day in 2015 from Himawari-8. Beautiful.
A clever technique by Emil to implement the “float label” pattern using CSS. It all hinges on browsers supporting the
:placeholder-shown pseudo-class which, alas, is not universal.
I was hoping that maybe
@supports could come to the rescue (so that a better fallback could be crafted), but that tests for properties and values, not selectors. Damn!
I love this. I really love this. Remy absolutely nails what makes the web so great.
There’s the ubiquity:
If the viewer is using the latest technology beefy desktop computer that’s great. Equally they could view the website from a work computer, something old and locked in using a browser called IE8.
Then there’s the low barrier to entry—yes, even today:
It’s the web’s simplicity. Born out of a need to connect documents. As much as that might have changed with the latest generation of developers who might tell you that it’s hard and complex (and they’re right), at the same time it is not complicated. It’s still beautifully simple.
Anyone can do it. Anyone can publish content to the web, be it as plain text, or simple HTML formed only of <p> tags or something more elaborate and refined. The web is unabashed of it’s content. Everything and anything goes.
I might just print this out and nail it to the wall.
If you sit back for a moment, and think about just how many lives you can touch simply by publishing something, anything, to the web, it’s utterly mind blowing.
I think I’ve shown great restraint in not linking to loads of think-pieces about Star Wars and The Force Awakens, because believe me, I’ve been reading—and listening to—a lot.
What Jessica has written here is about The Force Awakens. But more than that, it’s about Star Wars. But more than that, it’s about childhood. But more than that…
What I’m saying is: if you only read one thing about the new Star Wars film, read this.
How the Web Works: A Primer for Newcomers to Web Development (or anyone, really) by Preethi Kasireddy
This is a great reminder of the fundamental nuts’n’bolts of the internet and the World Wide Web: clients, servers, URLs, DNS, HTTP, TCP/IP, packet switching, and all the other building blocks we sometimes take for granted.
This is part one of a four-part series:
- A Primer for Newcomers to Web Development (or anyone, really)
- Client-Server Model & the Structure of a Web Application
- HTTP & REST
- Stay tuned…
A nice self-contained script for animating items into view as the document scrolls.
(I’m very confused by the tagline for ScrollReveal—”Easy scroll animations for web and mobile browsers”—eh? Mobile browsers are web browsers …”web” is not a synonym for “desktop”.)
A terrific analysis of industrial design in film and games …featuring a scene-setting opening that delineates the difference between pleasure and happiness.
We’ve got Space Ipsum for text. Now we have SpaceHolder for images.
A superb talk on performance, advertising, and the future of the web. No doubt a transcript will appear in due time on Maciej’s site and when it does, I will enjoy it all over again.
Trust me: you’ll want to watch this.
I always loved Matt’s light cone project—it was a big influence on the Radio Free Earth hack that I made with Chloe. Now it has been reborn as a Twitter bot. Here’s Matt’s documentation for his future self:
I haven’t made a habit of project write-ups before, but I’m taking an increasingly “long now” approach to the tech I make and use. How will I remember what I made in a decade? By reading this post.
Marco gives a run-down of the basics of getting accessibility right on the web. Nothing here is particularly onerous but you’d surprised how often developers get this wrong (or simply aren’t aware of it).
He finishes with a plea to avoid unnecessary complexity:
It really isn’t hard to get the basics of accessibility right on the web …and yet those basics are often neglected.
Here’s a handy shortlist to run through, HIKE:
- H stands for headings and semantic markup.
- I stands for images and labels.
- K stands for keyboard navigation.
- E asks for you to ACT with a little extra love for custom components and more.
(ACT = ARIA, Colour Contrast, Text Size)
The transcript of a great talk by Wilto, focusing on responsive images, inlining critical CSS, and webfont loading.
When we present users with a slow website, a loading spinner, laggy webfonts—or tell them outright that they‘re not using a website the right way—we’re breaking the fourth wall. We’ve gone so far as to invent an arbitary line between “webapp” and “website” so we could justify these decisions to ourselves: “well, but, this is a web app. It… it has… JSON. The people that can’t use the thing I built? They don’t get a say.”
We, as an industry, have nearly decided that we’re doing a great job as long as we don’t count the cases where we’re doing a terrible job.
A really nicely put together sci-fi short film.
The missing font generator for Mac OS X.
Very handy for subsetting fonts for the web. It doesn’t (yet) export WOFF2 unfortunately.
Quite a few moving parts in this technique from Emil, but it’s very clever.
A subset of one of my favourite sites on the web:
Explore the Arctic of the past from the deck of a whaling ship.
Choose your vessel and get transcribing.
The new style guide and pattern library for Buzzfeed.
It all looks pretty reasonable on the surface but if you poke around in the CSS, you’ll find 1157 uses of
The whole point of having an agreed-upon codebase in a pattern library is so that developers need never reach for nuclear options like
!important, so I’m afraid, for me, this is a demonstration of what not to do (in terms of CSS—the output of the HTML in the styleguide looks perfectly fine).
Solid uses immutable, atomic CSS classes…
CSS is “mutable”. By design. I don’t think we should be working against that.
A breathtaking overview of Cassini’s mission. The timeline video—matching up footage from Saturn with contemporary events on Earth—is a beautiful and haunting dose of perspective.
You can even watch a four hour video of every single one of the 341,805 images that Cassini has sent up till now.
A short feature on the 10,000 year clock.
Sara enumerates some handy tips aimed squarely at designers exporting SVGs. It focuses on Illustrator in particular but I’m sure a lot of this could equally apply to Sketch.
A lovely little script from Nat to create a nice montage of images. It works by progressively enhancing a regular series of images in the markup.
Critical thinking without hope is cynicism. Hope without critical thinking is naïveté.
Echoing Margaret Atwood’s observation:
If we abandon hope, we’re cooked. If we rely on nothing but hope, we’re cooked. So I would say judicious hope is necessary.
There are Inception-like layers of nostalgia here: firstly, this web series of web pages made by Matt are a throwback to an earlier era, and secondly, the story being told goes all the way back to the birth of the ARPAnet.
A nice navigable timeline of historical events from Wikipedia.
Just like Nick, John Willshire has put his slides together with the audio from his gobsmackingly good dConstruct presentation on metadesign.
Nick Foster has put the audio of his fantastic dConstruct talk together with his slides.
It’s a terrific, thought-provoking presentation, superbly delivered …and it even has some relevance to progressive enhancement! (you’ll know what I mean if you watch/listen to the whole thing)
This is the best moment to write a blog post:
I just had my responsive images epiphany and I’m writing it all down before I forget everything.
Writing something down (and sharing it) while you’re still figuring it out is, in my opinion, more valuable than waiting until you’ve understood something completely—you’ll never quite regain that perspective on what it’s like to have beginner’s mind.
For almost a century and a half the West Pier has been Britain’s most iconic pier. Renowned for its wonderful architectural style, it has been visited and enjoyed by millions. Even today with its sculptural remains casting an eerie beauty over the seafront, the West Pier is still the most photographed building in Brighton.
A collection of cli-fi and cli-fact.
Alex recounts the sordid history of vendor prefixes and looks to new ways of allowing browsers to ship experimental features without causing long-term harm.
The video of my talk at this year’s Beyond Tellerrand. I was pleased with how this went, except for the bit 16 minutes in when I suddenly lost the ability to speak.
A wonderful, wonderful history of the web from Dave at this year’s Beyond Tellerrand conference. I didn’t get to see this at the time—I was already on the way back home—so I got Dave to give me the gist of it over lunch. He undersold it. This is a fascinating story, wonderfully told.
So gather round the computer, kids, and listen to Uncle Dave tell you about times gone by.
The death of the web has been greatly exaggerated.
There’s nothing else like it. It’s constantly improving. It’s up to you what you do with it.
The video of Richard’s great talk on responsive typography at the Up Front conference.
Kelli Anderson’s thesis on the Human Interference Task Force project set up to mark nuclear waste sites for future generations (a project I’ve referenced in some of my talks).
A detailed and humorous deep dive into motion design and spatial depth in digital interfaces.
A great presentation from Stephen. He takes a thoughtful look at our processes and tools.
This infographic offers a visual way to explore the various stages of the Earth’s history using a 12 hour clock analogy.
This is a deep, deep dive into responsive images and I can only follow about half of it, but there are some really useful suggestions in here (I particularly like the ideas for swapping out images for print).
Handy tips for creating, optimising, and using SVG on the web, be it in CSS or HTML.
I really like the way that Paul’s talk builds on top of ideas laid down by Ethan and Frank. Good stuff.
I’d like to do this for all Clearleft web projects.
How important is mobile for @nytimes? We’re blocking access to our home page on desktop in our building.
An up-to-date round-up of the various techniques available when you want to provide a fallback for SVG.
Did you know Google runs a free an open image resizing service?
I did not! This could be quite useful. Seeing as it’s an https endpoint, it could be especially useful on https sites that pull images from http domains (and avoid those mixed-content warnings).
A beautiful bit of design fiction.
I like this nice straightforward approach. Instead of jumping into the complexities of the final interactive component, Chris starts with the basics and layers on the complexity one step at a time, thereby creating a more robust solution.
If I had one small change to suggest, maybe
aria-label might work better than offscreen text for the controls …as documented by Heydon.
SmashingConf Oxford 2015: Richard Rutter on Don’t Give Them What They Want, Give Them What They Need
A great case study from Richard, walking through the process of redesigning the website for the Royal Borough of Kensington and Chelsea.
By far the creepiest type experiment I have ever seen.
A long-zoom look at life, work, and success.
I’m not usually a fan of portmanteau neologisms, but I really like Tash’s coining of the word longtrepreneur.
Primer, but Twitter.
Github’s pattern library.
As always, it’s great to see how other organisations are tackling modular reusable front-end code (though I can’t imagine why anyone other than Github would ever want to use it in production).
Beautiful use of CSS transitions and transforms.
Also: CSS is officially the new Flash—”skip intro” is back.
Always worth bearing in mind when some perspective is needed.
If it is possible that our future species will go on to create simulations of our civilisation forerunners (us), then it is far more likely that we are currently in such a simulation than not.
Interstellar travel time dilation and status updates: a clever narrative combo.
A beautiful website for ISS-based biology experiments.
Smart thinking from Sara on providing a PNG fallback to browsers that don’t support SVG. Although, actually what I like about this solution is that it’s less about providing PNG as a fallback, and more about treating PNG as the baseline and SVG as the enhancement (an approach that the picture element is perfect for).
A nice little pattern for generating a swish timeline in SVG from a plain ol’ definition list in HTML.
Ant told us this harrowing story in the office two weeks ago. I honestly can’t imagine what it would be like to be in this situation.
This is a talk I gave at An Event Apart about eighteen months ago, all about irish music, the web, long-term thinking, and yes, you guessed it—progressive enhancement.
For people of a certain age, this will bring back memories of a classic screensaver.
If you had told me back then that the screensaver could one day be recreated in CSS, I’m not sure I would’ve believed it.
A cheap’n’cheerful way of monitoring uptime for domains.
But as people spend more time on their mobile devices and in their apps, their Internet has taken a step backward, becoming more isolated, more disorganized and ultimately harder to use — more like the web before search engines.
How to get Yosemite to display five-digit years. It’s a bit of a hack, but we’ve got another 7,985 years to figure out a better solution.
Yet another brilliant far-ranging talk from Bret Victor.
I’ve tried to get him to come and speak at dConstruct for the past few years, but alas, with no success.
Curiosity’s journey so far, nicely visualised.
Seb will be running this workshop again at the start of February—details here. I can’t recommend it highly enough—it’s so, so good!
This is quite beautiful in its simplicity: the hexadecimal colour value of the current time.
Scenes of space from sci-fi films.
With all my talk about extending existing elements instead of making new ones, I was reminded of one of my favourite examples of custom elements in action: Github’s extensions of the
Sounds like a cute idea, right?
In fact it’s the best thing you’re ever likely to read on Peruvian ursine immigration.
A fascinating look at how the humble password gets imbued with incredible levels of meaning.
It reminds me of something I heard Ze Frank say last year: “People fill up the cracks with intimacy.”
This strikes me as an eminently sensible idea by Emil: using the picture element to begin providing WebP alternatives to JPG.
Of course, picture-supporting browsers will have to adjust their decision-making algorithm to support this pattern.
A vision of humanity’s exploration of our solar system.
A friendly challenge from The Grey Lady for news sites to enable TLS.
Make a commitment to have your site fully on HTTPS by the end of 2015 and pledge your support with the hashtag #https2015.
A cute videolette on web standards.
A great primer on using
picture. I think I’ll be referring back to this a lot.
Tantek shares a fascinating history lesson from Tim Berners-Lee on how the IETF had him change his original nomenclature of UDI—Universal Document Identifier—to what we now use today: URL—Uniform Resource Locator.
Google has updated its advice to people making websites, who might want to have those sites indexed by Google. There are two simple bits of advice: optimise for performance, and use progressive enhancement.
Just like modern browsers, our rendering engine might not support all of the technologies a page uses. Make sure your web design adheres to the principles of progressive enhancement as this helps our systems (and a wider range of browsers) see usable content and basic functionality when certain web design features are not yet supported.
Patty Toland — Design Consistency For The Responsive Web (Smashing Conference Freiburg 2014) on Vimeo
Patty’s excellent talk on responsive design and progressive enhancement. Stick around for question-and-answer session at the end, wherein I attempt to play hardball, but actually can’t conceal my admiration and the fact that I agree with every single word she said.
I share the concerns expressed here about the “sizes” attribute that’s part of the new turbo-powered img element (or “the picture element and its associates”, if you prefer). Putting style or layout information into HTML smells bad.
This is a concern that Matt Wilcox has raised:
Change the design and those breakpoints are likely to be wrong. So you’ll need to change all of the client-side mark-up that references images.
I can give you a current use-case: right here on adactio.com, you can change the stylesheet …so I can’t embed breakpoints or sizes into my img elements because—quite rightly—there’s a separation between the structural HTML layer and the presentational CSS layer.
Following on from that post of Jason’s I linked to, Chris also emphasises that, for most use cases, you probably only need to use srcset (and maybe sizes), but not the picture element with explicit sources.
It’s really, really great that people are writing about this, because it can be quite a confusing topic to wrap your head around at first.
Jason points out that the picture element might not be needed for most responsive image use cases; the srcset and sizes attributes will probably be enough—that’s what I’m doing for the photos on my site.
You can catch a glimpse of my Daft Punk impression in this video of Seb’s frickin’ lasers.
Look, I would never usually link to a “listicle” on Buzzfeed, but this is all kinds of cumulative mirth.
A really nice little documentary about my friend Jeffrey.
Wonderfully creative use of CSS gradients, borders, box-shadows, and generated content.
Remember when I was talking about refactoring the markup for Code for America? Well, it turns out that Heydon Pickering is way ahead of me.
He talks about the viewpoint of a writer (named Victoria) who wants to be able to write in Markdown, or HTML, or a textarea, without having to add classes to everything. That’s going to mean more complex CSS, but it turns out that you can do a lot of complex things in CSS without using class selectors.
There are slides.
Here’s the very brief talk I gave about Indie Web Camp at Aral’s Indie Tech Summit here in Brighton a little while back (I was in the slightly-demeaningly-titled “stop gaps” section).
If you like what you hear, come along to the next Indie Web Camp—also in Brighton—in just over three weeks.
I can relate to every single word that Bastian has written here.
The longer I look at boilerplates, build tools, frameworks and ways to make my life as a developer easier, the more I long for the basics.
The image-stitching algorithm is trying its best.
Literally a library of patterns: y’know, for tiling background images. Old school!
Lighthouse are putting on their Improving Reality conference again this year. It’s the day before dConstruct. Come to both!
45 years ago today.