Tags: im

Psiu Puxa Wallpapers

Yummy wallpapers for your desktop, tablet, and phone, from NASA and ESA.

Empire of the Air: The Imperial Airship Service

The first in a series of articles looking at the history of British airships a century ago …just in time for the revival.

Can’t code, won’t code - cracking the secret of gender imbalance in STEM

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.

The Blog That Disappeared - The New York Times

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.

Science and Culture: The value of a good science hack

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)

Stop the overuse of overflow menus — Medium

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.

ForEveryone.Net - Trailer on Vimeo

I can’t wait for this documentary to come out (I linked to its website a while back).

Persistent Domains by Tim Berners-Lee

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”.

.generation on Vimeo

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.

Jeremy Keith | < A > | HTML Special, CSS Day on Vimeo

The video of my talk on hypertext at the HTML Special before CSS Day. I’m pretty with my delivery here. There’s a bit of Q&A afterwards as well.

Revisionist History Podcast

Malcolm Gladwell’s new podcast is very good: perfect for huffduffing. And I really, really like the website—lovely typography, illustrations, and subtle animations.

Declarative Design Tools | Jon Gold

Jon introduces a new tool with a very interesting observation: up until now, all our graphic design tools have been imperative rather than declarative

With our current tools we’re telling the computer how to design the vision we have in our head (by tapping on our input devices for every element on the screen); in our future tools we will tell our computers what we want to see, and let them figure out how to move elements around to get there.

Tim Brown: Making time to read

I know exactly how Tim feels. It’s hard not to feel guilty when you’re reading something instead of spending the time doing “real work”, but it always ends up being time well spent:

Reading time can be hard to justify, even to oneself. There is no deadline. It’s not going to move any immediate projects forward (most likely). And it often feels like a waste of time, especially if your interests are diverse. But it’s important. Most great work is the product of collaborative thinking.

Everything is a Remix: The Force Awakens on Vimeo

The newest Kirby Ferguson video looks at remixing through the lens of the newest Star Wars film.

Render 2016 - Jeremy Keith on Vimeo

Here’s another version of my talk Resilience—the same one I gave at Beyond Tellerrand—this time from the Render conference in Oxford.

When Websites Won’t Take No for an Answer - The New York Times

Our Harry’s in the New York Times! Well, an article on dark patterns is in the New York Times, and Harry is Mr. Dark Patterns.

Archiving a Website for Ten Thousand Years - The Atlantic

Prompted by the way Craig is handling the shutdown of hi.co, Glenn Fleishman takes a look at other digital preservation efforts and talk to Laura Welcher at the Long Now Foundation.

A time capsule is bottled optimism. It makes material the belief that human beings will survive long enough to retrieve and decode artifacts of the distant past.

Jeremy Keith on Vimeo

Here’s the video of the talk I just gave at the Beyond Tellerrand conference in Düsseldorf: Resilience.

Sign O’ The Times - original video in pure CSS

This is quite wonderful: a recreation of the video for Prince’s Sign O’ The Times made entirely with HTML and CSS.

What Comes Next Is the Future: Trailer 2 on Vimeo

I particularly like Ethan’s Stop Making Sense era David Byrne suit.

chartd - responsive, retina-compatible charts with just an img tag

This could be a handy replacement for some Google Charts images of graphs. It uses SVG and is responsive by default.

I bet it wouldn’t be too tricky to use this to make some sparklines.

GitHub’s CSP journey - GitHub Engineering

A step-by-step walkthrough of how GitHub has tweaked its Content Security Policy over time. There are some valuable insights here, and I’m really, really happy to see companies share this kind of information.

Side Projects – AVC

I think the move away from side projects toward doing a startup day one is not all good. There was something great about the ability to experiment with an idea before committing to it and before sucking other people’s money into it.

RAFP: a proposal for performance measurements through requestAnimationFrame - QuirksBlog

Here’s an interesting proposal from ppk: use requestAnimationFrame to gauge how performant a browser in behaving and then enhance accordingly.

Introduction to Ember FastBoot by Tom Dale on Vimeo

I’m so happy that Ember is moving to a server-side rendering model. Not only that, but as Tom points out here, it’s crucial that the server-side rendering is the default and the client-side functionality than becomes an enhancement.

San Andreas State: Animal Cam

An immortal deer wanders the world of Grand Theft Auto for all eternity. It’s remarkably calm and relaxing.

Helium Dreams - The New Yorker

This article on airships has my new favourite sentence in the English language:

During the First World War, Germany and its allies ceased production of sausages so that there would be enough cow guts to make zeppelins from which to bomb England.

Of course it was Simon who pointed me to this. Of course.

Managing Mobile Performance Optimization – Smashing Magazine

Some solid sensible advice on optimising performance.

Instagram-style filters in HTML5 Canvas | Viget

Una’s [Instagram filters in CSS}(https://github.com/una/CSSgram) are great, but the browser support for CSS filters isn’t as good as, say, the browser support for canvas. Here’s a clever bit of scripting to polyfill filters using canvas.

ForEveryone.net

A film about Tim Berners-Lee and the World Wide Web. Details are scarce right now but watch this space.

Styling Broken Images

This is really, really clever. You can’t use generated content (:before and :after) on replaced content. The img element is replaced content …but only when the image actually loads. So if the image fails to load, you can apply specific fallback styles (using :before and :after).

A Design Science Primer

The Buckminster Fuller Institute has put together this collection of resources which explain the ideas behind “comprehensive anticipatory design science.”

Seems especially relevant in light of the first issue of the Journal of Design and Science from MIT.

The legacy of the Black Mountain College lives on.

Embracing simplicity by Adam Silver

The full text of Adam’s excellent talk at EnhanceConf.

Terraforming on Vimeo

There’s that Acheulean hand ax again.

The first ever object to be designed by man 1.7 million years ago was a flint hand axe. Flint has the same molecular structure as a crystal and they both consist of silica. The project juxtaposes the flint hand axe with the latest crystal technology; Xero chaton the world’s smallest precision cut crystal measuring 0.6mm in diameter, smaller than a grain of sand.

Preload: What Is It Good For? – Smashing Magazine

A comprehensive overview of rel="preload" which looks very useful indeed …I just wish it wasn’t (like “nofollow”) a nonsensical value for the rel attribute: a resource can’t have a relationship of “preload” to the linking document.

hunt

This looks like it could be quite a handy (and relatively lightweight) script for attaching events—like animations—to an item’s visibility, so the events only trigger when the item is scrolled into view.

All our imagined futures | A Working Library

Science fiction as a means of energising climatic and economic change:

Fiction, and science fiction in particular, can help us imagine many futures, and in particular can help us to direct our imaginations towards the futures we want. Imagining a particular kind of future isn’t just day dreaming: it’s an important and active framing that makes it possible for us to construct a future that approaches that imagined vision. In other words, imagining the future is one way of making that future happen.

But it’s important that these visions are preserved:

It’s very likely that our next Octavia Butler is today writing on WattPad or Tumblr or Facebook. When those servers cease to respond, what will we lose? More than the past is at stake—all our imagined futures are at risk, too.

Jeremy Kard

You can do anything with CSS these days.

Responsive Image Breakpoints Generator by Cloudinary

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.

Glittering Blue

Earth as seen on one day in 2015 from Himawari-8. Beautiful.

Revisiting the Float Label pattern with CSS — That Emil is Emil Björklund

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!

Why I love working with the web

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.

The Heroine’s Journey. - WordRidden

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:

  1. A Primer for Newcomers to Web Development (or anyone, really)
  2. Client-Server Model & the Structure of a Web Application
  3. HTTP & REST
  4. Stay tuned…

ScrollReveal

A nice self-contained script for animating items into view as the document scrolls.

I’d like be interested to hear what Graham thinks of this code—he’s my go-to person for smooth scroll-based animations.

(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”.)

Mike Hill - Industrial Design in Entertainment on Vimeo

A terrific analysis of industrial design in film and games …featuring a scene-setting opening that delineates the difference between pleasure and happiness.

jordanmoore/Modern-Default-HTML

This is so weird—Jordan Moore’s boilerplate responsive HTML template is exactly the same as mine! What are the odds‽

(I was once asked to contribute a boilerplate starter for

SpaceHolder – A space-themed image placeholder service.

We’ve got Space Ipsum for text. Now we have SpaceHolder for images.

Maciej Ceglowski - The Website Obesity Crisis on Vimeo

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.

My latest Twitter bot: @5point9billion (14 Dec., 2015, at Interconnected)

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.

The web accessibility basics – Marco’s Accessibility Blog

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:

If there’s one wish I have for Christmas from the web developer community at large, it is this: Be good citizens of the web, and learn proper HTML before you even so much as touch any JavaScript framework. Those frameworks are great and offer a lot of features, no doubt. But before you use hundreds of kilobytes of JavaScript to make something clickable, you may want to try if a simple button element doesn’t do the trick just as fine!

HIKE - Introduction to accessibility concepts for the Web

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)

Smaller, Faster Websites - - Bocoup

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.

UNCANNY VALLEY (2015) on Vimeo

A really nicely put together sci-fi short film.

briangonzalez/fontprep

The missing font generator for Mac OS X.

Very handy for subsetting fonts for the web. It doesn’t (yet) export WOFF2 unfortunately.

The “Blur Up” Technique for Loading Background Images | CSS-Tricks

Quite a few moving parts in this technique from Emil, but it’s very clever.

Old Weather: Whaling

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.

WTF is Solid?- Solid

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 !important. Yikes!

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.

Apollo 17 in Real-time

This is rather nice—a Spacelog-like timeline of Apollo 17, timeshifted by exactly 43 years.

Gene and the crew are on their way to the moon …the last humans to ever make the journey.

Meanwhile, Near Saturn… - WSJ.com

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.

The Clock of the Long Now on Vimeo

A short feature on the 10,000 year clock.

Tips for Creating and Exporting Better SVGs for the Web

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.

Moodboard — a small JavaScript library for presenting image moodboards on the web

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.

Some Thoughts on Hope, Cynicism, and the Stories We Tell Ourselves | Brain Pickings

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.

It’s the IMP

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.

Histography - Timeline of History

A nice navigable timeline of historical events from Wikipedia.

Designing The Future, John V Willshire, dConstruct 2015 on Vimeo

Just like Nick, John Willshire has put his slides together with the audio from his gobsmackingly good dConstruct presentation on metadesign.

The Future Mundane on Vimeo

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)

The anatomy of responsive images - JakeArchibald.com

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.

The West Pier, Brighton England on Vimeo

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.

Climate Futures on Matter

A collection of cli-fi and cli-fact.

Doing Science On The Web – Infrequently Noted

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.

Jeremy Keith – Enhance! – Beyond Tellerrand Düsseldorf 2015 on Vimeo

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.

Dave Shea – – beyond tellerrand DÜSSELDORF 2015 on Vimeo

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 web is awesome - blog.lmorchard.com

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.

Scribblit

This is so nifty! Mikey has made a site where you can order his interactive artwork.

Interactive? That’s right! Each framed picture comes with a pen so you can doodle over the picture (and wipe it clean again).

Check out The Fett and The Falcon!

Richard on Vimeo

The video of Richard’s great talk on responsive typography at the Up Front conference.

PDF: Designing For Deep Time: How Art History Is Used To Mark Nuclear Waste

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).

Spatial Interfaces — Elepath Exports — Medium

A detailed and humorous deep dive into motion design and spatial depth in digital interfaces.

Stephen Hay | The Back(side) of the Class | CSS Day on Vimeo

A great presentation from Stephen. He takes a thoughtful look at our processes and tools.

Deep Time : A History of the Earth

This infographic offers a visual way to explore the various stages of the Earth’s history using a 12 hour clock analogy.

INTERNET IMAGES ^ 10

This is just wonderful: Powers Of Ten recreated using images from the internet. Also available as a flip book!

Read more about it or watch the video.

When Responsive Images Get Ugly by Taylor Hunt on CodePen

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).

A Practical Guide to SVGs on the web

Handy tips for creating, optimising, and using SVG on the web, be it in CSS or HTML.

Paul Robert Lloyd | Responsive Principles | CSS Day on Vimeo

I really like the way that Paul’s talk builds on top of ideas laid down by Ethan and Frank. Good stuff.

Clifford Levy on Twitter

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.

A Complete Guide to SVG Fallbacks | CSS-Tricks

An up-to-date round-up of the various techniques available when you want to provide a fallback for SVG.

Google’s authentication-less, on-the-fly image resizing service

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).

Project Kronos on Vimeo

A beautiful bit of design fiction.

Keeping it simple: coding a carousel by Christian Heilmann

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.

Ari Weinkle — Feelers

By far the creepiest type experiment I have ever seen.

Natasha Lampard, Friday, 27 March 2015

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.

Tweets out of Context

Primer, but Twitter.

Home · Primer

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).

In Pieces - 30 Endangered Species, 30 Pieces.

Beautiful use of CSS transitions and transforms.

Also: CSS is officially the new Flash—”skip intro” is back.

Are You Living in a Simulation?

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.

Killing Time at Lightspeed

Interstellar travel time dilation and status updates: a clever narrative combo.

NASA GeneLab

A beautiful website for ISS-based biology experiments.