Mark Rothko paintings recreated with CSS gradients.
Mark Rothko paintings recreated with CSS gradients.
A look at the risks of relying on a purely graphical icon for interface actions. When in doubt, label it.
Still a few days left to back this great project for Brighton:
Build, tinker, make and play! For anyone with imagination, The Brighton Makerlab lets ages 8 to 80 create cool stuff with technology.
Get your next design game off to a quick start with this handy generator of nonsensical-yet-vaguely-plausible product ideas.
Hot on the heels of Github’s pattern library, here’s Heroku’s.
For when you just have to name something after a Culture General Systems Vehicle …or maybe a General Contact Unit.
Aw, this is so sweet! Jason describes getting inspired by Responsive Day Out to create Responsive Field Day:
I’ve encouraged anyone who would listen to subscribe to the podcast. It is my favorite conference that I’ve never been to.
Inspired by Responsive Day Out, the gang at Cloud Four are organising a one-day event on responsive design in Portland on September 25th. It’s gonna be a good one.
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).
You might want to keep an eye on what the Clearlefties are doing here for the next hundred days.
One down, 99 to go.
The responsive BBC News site is live! Hurrah!
Here’s a look at the highs and lows of the site’s story, emphasising the importance of progressive enhancement and all that enables: feature detection (by “cutting the mustard”), conditional loading, and a mobile-first approach.
SpaceX has a Flickr account, and you have permission to use these photos.
Jeffrey muses on progressive enhancement and future-friendliness.
Beautiful use of CSS transitions and transforms.
Also: CSS is officially the new Flash—”skip intro” is back.
A walkthrough on using the iOS app Workflow to huffduff audio files from just about any app.
This year’s map from TeleGeography is looking lovely.
A profile of the great work Aaron and Seb have been doing at the Cooper Hewitt museum. Have a read of this and then have a listen again to Aaron’s dConstruct talk.
Practical examples showing where you can use flexbox right now, along with some strategies on how to start doing it.
Slides of really great practical advice on writing clearly.
Alternative histories of communication.
A terrific little tool from Tim that puts performance into perspective by measuring how much money users are spending just to view your website on a mobile device.
The slides from Katie’s recent talk.
Performance is a rising requirement for building successful websites, but successful performance begins far earlier than development. So how do you get your entire team excited by it, specifically aesthetic-heavy designers?
Because in 10 years nothing you built today that depends on JS for the content will be available, visible, or archived anywhere on the web.
If you don’t have time to poke around StateOfWebType.com here’s the short version.
The most ambitious project from Archive Team yet: backing up the Internet Archive.
We can do this, people! Moore’s Law and all that.
(Initially it required jQuery but I tweaked it to avoid those dependencies and Yuri very kindly merged my pull request—such a lovely warm feeling when that happens.)
Superb. Absolutely superb.
A magnificent tour-de-force by Frank on the web’s edgelessness.
Read. Absorb. Read again. This is the essence of responsive web design, distilled.
These are principles of visual design—hierarchy, rhythm, etc.—nicely explored and explained.
A terrific bit of smart CSS thinking from Heydon Pickering.
You know he’s speaking at Responsive Day Out, right?
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.
A quick drag’n’drop way to base 64 encode your web fonts so you can stick ‘em in local storage.
Any sufficiently advanced vision piece is indistinguishable from Black Mirror.
This time it’s a great article by Karen Menezes filled with practical examples showing where you can use flexbox today.
A really handy interactive intro to flexbox. Playing around with the properties and immediately seeing the result is a real help.
This would be better titled “Futures of texting” but it’s an interesting grab-bag of observations. I’ve always felt that SMS has been overlooked as an input mechanism.
(Conversely, I’ve always felt that voice is really over-rated as input mechanism, but under-rated for output.)
A great investigation into the usability benefits of allowing users to fill in their passwords in plain text.
Major caveat: make sure you still offer the ability to mask passwords too.
It looks like Google is going to start explicitly labelling slow sites as such in their search results (much like they recently started explicitly labelling mobile-friendly sites). So far it’s limited to Google’s own properties but it could be expanded.
Personally, I think this is a fair move. If the speed of a site were used to rank sites differently, I think that might be going too far. But giving the user advanced knowledge and leaving the final decision up to them …that feels good.
Now you can get a 7” x 10” print of the cast of Ariel’s fantastic spaceprob.es site.
I think this would look quite fetching in the Clearleft office.
Craig has collected a selection of the videos he has filmed at conferences over the years. I’m honoured that my opening keynote at Beyond Tellerrand two years ago has been included.
There are some great Responsive Day Out videos here too.
Interstellar travel time dilation and status updates: a clever narrative combo.
It will come as no surprise that I agree with every single word that Tim has written here.
Unleash your inner Jackson Pollock.
The minimum dependency for a web site should be an internet connection and the ability to parse HTML.
Lea wasn’t happy with the lack of styling and extensibility of the datalist element, so she rolled her own lightweight autocomplete/type-ahead widget, and she’s sharing it with the world.
A fantastic new site from Ariel and Lisa: a collection of probes that are out in space right now, with oodles of facts for each mission and links through to more resources. SCIENCE!
A beautiful website for ISS-based biology experiments.
A great description of progressive enhancement.
Progressive enhancement in its basic form means not making assumptions
This is such a simple little adjustment, but I think it’s kinda brilliant: tweaking the display of your site’s maps to match the season.
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).
Objects that talk are useful, but objects that tattle aren’t.
Paul Kinlan writes an honest post-mortem of his push for Web Intents.
There are some valuable lessons here, particularly for the indie web’s web actions.
We were discussing the CSS3 grid layout module in the Clearleft office today, so naturally Rachel’s name came up. This is such a great resource for diving into this stuff.
Our new intern—L’il James—demonstrates good .gif skills in his write-up of the project he worked on at Hack Farm.
It’s like Downton Abbey and Silicon Valley had a baby.
A nice little pattern for generating a swish timeline in SVG from a plain ol’ definition list in HTML.
This RFC for ASCII (by Vint Cerf) is over 45 years old.
Last month it became a standard.
You know what? Just go and read everything that Jason writes, okay?
Ruddy good stuff.
Brewster Kahle’s short presentation at NetGain.
The engineering benefits of building websites with a layered approach.
Why, yes, I am talking about progressive enhancement yet again! Why do you ask?
Brilliant! Although it’s kind of like shooting fish in a barrel to make a Markov chain out of someone whose entire output is already one big Markov chain.
Adam Curtis: the Banksy of documentaries.
Tom doesn’t mention the phrase “progressive enhancement” once, but that’s okay—his post is still about progressive enhancement.
FastBoot is coming to Ember. That means server-side rendering. And that means progressive enhancement will become a possibility for Ember apps. Exciting!
There’s a whole bunch of great events happening in Brighton this March: Codebar, Curiosity Hub, She Codes Brighton, 300 Seconds, She Says Brighton, and Ladies that UX. Lots of these will be downstairs from Clearleft in Middle Street—very handy!
The Web is the printing press of our times; an amazing piece of technology facilitating a free and wide-scale dissipation of our thoughts and ideas. And all of it is based on this near 20-year old, yet timeless idea of the Hyper Text Markup Language.
Sensible words from Christian.
Web applications don’t follow new rules.
And frameworks will not help:
A lot of them are not really fixing fundamental problems of the web. What they do is add developer convenience. … This would be totally OK, if we were honest about it.
Tim Maughan reports on the same container ship trip that Dan W. is sending his postcards from.
I like the idea of there being an Apollo-sized project all around us, if you just know where to look.
First, towering above and over the ship, are the loading cranes. Vast structures mounted on huge, four-legged frames, they resemble the naked scaffolding of unbuilt skyscrapers, and trigger nostalgic reminders of Saturn V rocket launch towers from the 1960s.
Once in port at night I saw one suddenly fire into life next to the ship in a stroboscopic explosion of lights, before it tracked slowly above my high vantage point, bathing me in the orange glow of a dozen small halogen suns.
If you insist on having “social” sharing buttons, here’s a way to avoid bloating your page unnecessarily.
But you might want to reconsider whether you need them at all.
A beautiful sci-fi short from the European Space Agency, inspired by the Rosetta mission.
A cute way of exploring a collection of classic works.
Simon St. Laurent on uncertainty as a feature, not a bug.
I’ve said it before: if your client-side MVC framework does not support server-side rendering, that is a bug. It cripples performance.
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.
I really enjoyed chatting with the guys on the The Dirt podcast about progressive enhancement, but my goodness; it certainly sounds like I need to switch to decaf! Yappity-yapity-yap!
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.
A scholarship fund for women students at the Flatiron School, in memory of Chloe.
Spotify has named the program the Chloe Weil Scholarship as a memorial to Chloe Weil, an inspiring designer and engineer who took a strong interest in creating opportunities for women in technology.
Smart thinking on optimising the perceived performance of loading web fonts: if you prioritise the most widely-used weight and style (usually the regular roman), and load other weights and styles subsequently, then it appears as though the font is ready sooner.
Rushing doesn’t improve things, it might even slow you down. Focusing on a few things and doing them well is worthwhile. Sharing what you learn—even while you’re still figuring things out—is even better.
We hired Charlotte, our first junior developer at Clearleft recently, and my job has taken on more of a teaching role. I’m really enjoying it, but I have no idea what I’m doing, and I worry that I’m doing all the wrong things.
This article looks like it has some good, sensible advice …although I should probably check to see if Charlotte agrees.
I really like the self-examination that Ian and his team at Lonely Planet are doing here. Instead of creating a framework for creating a living style guide and calling it done, they’re constantly looking at what could be done better, and revisiting earlier decisions.
I’m intrigued by the way they’ve decided to reorganise their files by component rather than by filetype.
A short documentary on the wonderful Grace Hopper.
The Guardian have hit the big red button and made their responsive site the default. Great stuff!
(top tip: don’t read the comments)
Molly has contributed so much to the web and to the world. This is quite literally the least we can do.
It would really mean a lot to me if you donated to help cover her treatments.
Luke continues to tilt against the windmills of the security theatre inertia that still has us hiding passwords by default. As ever, he’s got the data to back up his findings.
Everyone who calls for WebKit in Internet Explorer is exactly the same kind of developer who would have coded to Internet Explorer 15 years ago (and probably happily displayed the best viewed in badge).
It’s happening again, and every petulant, lazy developer who calls for a WebKit-only world is responsible.
From the ashes of Opera, a new browser is born. Download the tech preview and take it for a spin—it’s quite nice.
Anna documents the most interesting bit (for me) of her new wearable/watch/wrist-device/whatever — the web browser.
This Eno-esque deck of cards by Scott could prove very useful for a lot of Clearleft projects.
I love Lyza’s comment on the par-for-the-course user-agent string of Microsoft’s brand new Spartan browser:
There must be an entire field emerging: UA archaeologist and lore historian. It’s starting to read like the “begats” in the bible. All browsers much connect their lineage to Konqueror or face a lack-of-legitimacy crisis!
I’ve been thinking about this a lot lately; alternate ways of paginating through the past e.g. by day instead of by arbitrary amount.
This is neat—Vasilis has built a one-pager that grabs a random example from my collection of design principles.
I really like that he was able to use the predictable structure of my HTML as an API.
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.
That’s Netscape 1.0n, released in December of 1994, running inside Windows 3.11, released in August of 1993, running inside of Google Chrome 39.0.2171.99 m, released about a week ago, on a Windows 7 PC, released in 2009.
But when it comes to trying to navigate the web with that set-up, things get a bit depressing.
Good news, Brighton! There’s a Maker Club opening up on London Road (above the new Presuming Ed coffee shop). Grab your robot kits and come along.
First, the browsers competed on having proprietary crap. Then, the browsers competed on standards support. Now, finally, the browsers are competing on what they can offer their users.
Remember Aaron’s dConstruct talk? Well, the Atlantic has more details of his work at the Cooper Hewitt museum in this wide-ranging piece that investigates the role of museums, the value of APIs, and the importance of permanent URLs.
As I was leaving, Cope recounted how, early on, a curator had asked him why the collections website and API existed. Why are you doing this?
His retrospective answer wasn’t about scholarship or data-mining or huge interactive exhibits. It was about the web.
I find this incredibly inspiring.