Tags: im

Keep ’em Separated — ericportis.com

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.

Responsive Images: If you’re just changing resolutions, use srcset. | CSS-Tricks

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.

» Don’t use <picture> (most of the time) Cloud Four Blog

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.

Laser Light Synths unedited footage on Vimeo

You can catch a glimpse of my Daft Punk impression in this video of Seb’s frickin’ lasers.

44 Medieval Beasts That Cannot Even Handle It Right Now

Look, I would never usually link to a “listicle” on Buzzfeed, but this is all kinds of cumulative mirth.

Jeffrey Zeldman: 20 years of Web Design and Community on Vimeo

A really nice little documentary about my friend Jeffrey.

A Single Div

Wonderfully creative use of CSS gradients, borders, box-shadows, and generated content.

Heydon Pickering | Effortless Style | CSS Day on Vimeo

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.

Ind.ie Summit - Video 8 - Jeremy Keith on Vimeo

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.

Simplicity

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.

Panorama Fail

The image-stitching algorithm is trying its best.

The Pattern Library

Literally a library of patterns: y’know, for tiling background images. Old school!

Improving Reality 2014 — Visibility Is A Trap

Lighthouse are putting on their Improving Reality conference again this year. It’s the day before dConstruct. Come to both!

Apollo 11 Saturn V Launch (HD) Camera E-8 on Vimeo

45 years ago today.

Urban Giants on Vimeo

A look at the architectural history of the network hubs of New York: 32 Avenue of the Americas and 60 Hudson Street. Directed by Davina Pardo and written by her husband Andrew Blum, author of Tubes: A Journey to the Centre of the Internet.

These buildings were always used as network hubs. It’s just that the old networks were used to house the infrastructure of telephone networks (these were the long line buildings).

In a way, the big server hotel of New York—111 Eight Avenue—was also always used to route packets …it’s just that the packets used to be physical.

simpl.info

A handy reference for HTML, CSS, and JavaScript features. Each feature has a bare-bones demo at a nice guessable URL e.g. http://simpl.info/datalist/

The Man Who Turned Paper Into Pixels on Vimeo

A short film about Claude Shannon and Information Theory — not exactly as in-depth as James Gleick’s The Information, but it does a nice job of encapsulating the fundamental idea.

An Event Apart and The Picture Element (a Monkey Do blog post)

A look at how the website for An Event Apart is using the picture and Picturefill …featuring Jessica as the cover girl.

It’s OK not to use tools by Jonas Downey of Basecamp

Today, a basic HTML/CSS site seems almost passé. But why? Is it because our new tools are so significantly better, or because we’ve gone overboard complicating simple things?

He’s right, y’know.

Single Element CSS Spinners

A lovely little selection of loading indicators powered by CSS animations and transitions.

Where Time Comes From on Vimeo

A profile of Demetrios Matsakis, keeper of time at U.S. Naval Observatory, America’s equivalent to Greenwich in its importance for timekeeping in the modern world.

Designing in the Borderlands by Frank Chimero

This is a wonderful piece of writing and thinking from Frank. A wonderful piece of design, then.

A personal view on generalists and trans-media design

Dr. Easy on Vimeo

I finally got around to reading Red Men by Matthew De Abaitua recently. It’s like Nick Harkaway crossed with Jeff Noon.

Here’s hoping that this short film will be developed into a full-length feature.

Patatap

Fun!

Council Toolkit

A reusable set of responsive patterns and templates for UK councils.

Meet the Geniuses on a Quixotic Quest to Archive the Entire Internet | TIME.com

A short video featuring Jason Scott and Brewster Kahle. The accompanying text has a shout-out to the line-mode browser hack event at CERN.

[this is aaronland] because ephemera are just memories that didn’t try hard enough

I like the way Aaron thinks. I also like the way he makes.

CSS A/Z

The alphabet illustrated with CSS.

jrcryer/generator-pattern-primer

Nice! A Yeoman generator for scaffolding your own pattern primer.

(Those are just words, aren’t they? Y’know, as opposed to a sentence that would actually make sense to most right-thinking people.)

Orbit Ever After - Trailer on Vimeo

This fun-looking short film—funded by Brighton’s Lighthouse Arts—is screening at the Duke Of York’s Cinema on Saturday, March 1st followed by a panel discussion with the director and science-comedienne Helen Keen.

A List Apart Pattern Library

Another front-end style guide for the collection. This time it’s from A List Apart. Lovely stuff!

kimono : Turn websites into structured APIs from your browser in seconds

This tool for building ScrAPIs is an interesting development—the current trend for not providing a simple API (or even a simple RSS feed) is being interpreted as damage and routed around.

Fast Enough - TimKadlec.com

Some sensible thinking from Tim on measuring performance gains.

Spimes: A Happy Birthday Story « optional.is/required

Expanding on an exercise from last year’s Hackfarm, Brian and Mike have written a deliciously dystopian near-future short story.

Time - YouTube

The video of my closing talk at this year’s Full Frontal conference, right here in Brighton.

I had a lot of fun with this, although I was surprisingly nervous before I started: I think it was because I didn’t want to let Remy down.

OriDomi - origami for the web

A fun little JavaScript library for folding the DOM like paper. The annotated source is really nicely documented.

The (other) Web we lost

John shares his concerns about the increasing complexity involved in developing for the web.

An Open Letter - Handheld 2013

This was my favourite moment from the Handheld conference in Cardiff.

asciidisco/grunt-patternprimer

This is handy: a version of my pattern primer that can be run with Grunt.

Jeremy Keith – The Power Of Simplicity – border:none

This is the talk I gave at the border:none event in Nuremberg last month. I really enjoyed it. This was a chance to gather together some thoughts I’ve been mulling over for a while about how we approach front-end development today …and tomorrow.

Warning: it does get quite ranty towards the end.

Also: it is only now that the video is released that I see I spent the entire talk looking like a dork with a loop of wire sticking out of the back of my head.

Pattern Library | MailChimp

The markup for the patterns that Mailchimp use on their products. I love getting a glimpse of how companies handle this kind of stuff internally.

NSA files decoded: Edward Snowden’s surveillance revelations explained

A superb piece of hypertext from The Guardian.

Percussive Maintenance on Vimeo

Have you tried turning it off and on again?

Do as Little as Possible ∙ An A List Apart Column

I heartily concur with Lyza’s mini-manifesto:

I think we need to try to do as little as possible when we build the future web …putting commonality first, approaching differentiation carefully.

It’s always surprised me how quickly developers will reach for complex, potentially over-engineered solutions, when—in my experience—that approach invariably creates more problems than it solves.

Simplicity is powerful.

BBC Click: 10 Sept 2013: Brighton Digital Festival on Huffduffer

A report from the BBC on this year’s Brighton Digital Festival including interviews with Honor, Timo, and Seb.

BBC Click: 10 Sept 2013: Brighton Digital Festival

Immaterials, dConstruct and Culture Ships on Vimeo

Iain M.Banks and dConstruct, together at last.

The History of the Internet in a Nutshell

A timeline of technology.

Ask About Going Home

Some examples to illustrate the UK Border Agency’s latest campaign.

Simon Stålenhag Art Gallery

Scenes from a future Sweden.

SVG Fallbacks | CSS-Tricks

Alas, that clever SVG fallback trick I linked to a couple of days ago has some unexpected performance side-effects.

A Timeline made with Timeglider, web-based timeline software

Improve your word power: here’s a timeline of terms used to describe male genitalia throughout history. And yes, there is a female equivalent.

SVG and image tag tricks

A very, very clever hack to provide fallback images to browsers that don’t support SVG. Smart.

How Laura Poitras Helped Snowden Spill His Secrets - NYTimes.com

Metajournalism.

Surfin’ Safari - Blog Archive » Improved support for high-resolution displays with the srcset image attribute

WebKit nightlies now have support for srcset. I’m pleased to see that it’s currently constrained to just handling the case of high-density displays; it doesn’t duplicate the media query functionality of picture.

I’ve always maintained that the best solution to responsive images will be some combination of srcset and picture: they each have their strengths and weaknesses. The “art direction” use case is better handled by picture, but the “retina” use case is better handled by srcset.

A Breathing Earth

Beautiful animated GIFs showing the lungs of our planet.

The Pixar Theory by Jon Negroni

I like this theory!

Inge Druckrey: Teaching to See on Vimeo

Sit back, relax, and enjoy this classic documentary on graphic design, courtesy of its producer Edward Tufte.

Hot Topics Panel with Jeremy Keith - Mobilism 2013, Day 2, Afternoon, Final session on Vimeo

The closing hot topics panel I moderated at this year’s Mobilism conference in Amsterdam, featuring Remy, Wilto, Jake, and Dan.

timg

This is a really nice and simple idea: view photos from a specific place taken at a specific time. Voyeuristic fun.

Improving Reality 2013

The line-up for this year’s Improving Reality conference looks great (as always).

It’s the day before dConstruct so why not come on down to Brighton a day early and double your fun?

How to get your tweets displaying on your website using JavaScript, without using new Twitter 1.1 API

A little piece of JavaScript to strip out the styling from Twitter widgets.

Oh, no! How horrid! Now Twitter won’t control the “user experience” of that widget!

Instead, the person who actually posted the tweets in the first place gets to decide how they should be displayed. Crazy idea, isn’t it?

Leveraging Advanced Web Features in Responsive Design

A terrific case study in progressive enhancement: starting with a good ol’ form that works for everybody and then adding on features like Ajax, SVG, the History API …the sky’s the limit.

Jeremy Keith – Beyond Tellerrand – beyond tellerrand 2013 on Vimeo

I gave the opening keynote at the Beyond Tellerand conference a few weeks back. I’m talked about the web from my own perspective, so expect excitement and anger in equal measure.

This was a new talk but it went down well, and I’m quite happy with it.

Jeremy Keith - What We Talk About When We Talk About The Web on Vimeo

My presentation from the Industry conference in Newcastle a little while back, when I stepped in for John Allsopp to deliver the closing talk.

Request Quest

A terrific quiz about browser performance from Jake. I had the pleasure of watching him present this in a bar in Amsterdam—he was like a circus carny hoodwinking the assembled geeks.

I guarantee you won’t get all of this right, and that’s a good thing: you’ll learn something. If you do get them all right, either you are Jake or you are very, very sad.

Auto-Forwarding Carousels, Accordions Annoy Users

Carousels are shit. Auto-animating carousels are really shit. Now proven with science!

The State Of Responsive Web Design on Smashing Mobile

A comprehensive look at the current state of things in the world of responsive design, with a look to possible future APIs.

Using icon fonts

A handy walkthrough of using icon fonts. The examples here use the excellent IcoMoon service

Responsive Day Out highlights on Vimeo

A lovely little highlight reel that Craig put together from the Responsive Day Out.

Sensible jumps in responsive image file sizes

Some good thinking from Jason here. In a roundabout way, he’s saying that when it comes to responsive images—as with just about every other aspect of web development—the answer is …it depends.

Here is today

A long-zoom data visualisation.

Scalable Bitmaps

Some thoughts (and code) on responsive images.

A Digital Tomorrow on Vimeo

A design fiction video depicting technology that helps and hinders in equal measure.

Internet Archive on Vimeo

A beautiful short film on the amazing work being done at the Internet Archive, produced on the occasion of their 10 petabyte celebration.

Truly awe-inspiring.

National Geographic Found

Celebrating 125 years of National Geographic, this Tumblr blog is a curated collection of photography from the archives. Many of the pictures are being published for the first time.

First public use of what Became Proxima Nova by Mark Simonson

Who knew? The reissue of the classic thirteen-part Star Wars radio series was the first appearance of a proto-Proxima Nova.

Out of Sight, Out of Mind: A visualization of drone strikes in Pakistan since 2004

This powerful timeline illustrates how drone attacks have increased dramatically under Obama’s administration.

Thumbs and Ammo

Ay!

Dark Archives in Contents Magazine

A really lovely piece on the repositories of information that aren’t catalogued—a fourth quadrant in the Rumsfeldian taxonomy, these dark archives are the unknown knowns.

Using SVG on CSS-Tricks

Chris takes a look at all the different ways you can use SVG today.

The Edge of the Web at Responsive Day Out

Slides, videos, and links from Paul’s presentation at the Responsive Day Out.

CSS 3D Clouds

A beautiful experiment with CSS transforms and a smattering of JavaScript.

Protip: All browsers that support SVG background images also supports multiple background images.

A very hand tip from Ben on using SVG background images with a PNG fallback for IE8 and below.

YOU HAD ONE JOB!

Funny and painful in equal measure.

Responsive typography demo

This is a pretty wacky experiment in altering font size based on the user’s distance from the screen (allow the page to access your camera and enable the “realtime” option for some real fun). I don’t know how much real-world application this has, but it’s a cute’n’fun exercise.

A primer to front-end SVG hacking by David Bushell – Web Design & Front-end Development

Everything you ever wanted to know about using SVG today.

Search in a Giphy

A search engine for animated gifs. Oh, yes.

Stratocam

Communal satellite eyes. A Mac screensaver is also available.

The Creeping Garden

I, for one, welcome our slime mould overlords.

The slime mould is being used to explore biological-inspired design, emergence theory, unconventional computing and robot controllers, much of which borders on the world of science fiction.

Stick-n-find

Spimify your household with these bluetooth location stickers. Now you can google your shoes.

Flickr: ugordan’s Photostream

Gorgeous colour-processed images from NASA probes. I could stare at the fountains of Enceladus all day.

Interview with Lauren Beukes about Shining Girls

Lauren talks about The Shining Girls and the tools she uses to write with.

The paradoxes of time travel by David Lewis

A well-written white paper on time travel. Alas, it relies a bit too much on semantic nitpickery to offer any real insight.

Implementing off-canvas navigation for a responsive website by David Bushell

This off-canvas demo is a great practical example of progressive enhancement from David. It’s also a lesson in why over-reliance on jQuery can sometimes be problematic.

Snapshot Serengeti

The latest project from Zooniverse is, as you would expect, an extremely enjoyable and useful way to spend your time: classifying animals that have captured in camera trap images.

The opening tutorial is a lesson in how to do “on-boarding” right.

Flickr, codeswarming

A beautiful timelapse visualisation of code commits to Flickr from 2004 to 2011.

Form Follows Function

A gorgeous collection of experiments that showcase just how much is possible in browsers today.

PlaceIt by Breezi - Generate Product Screenshots in Realistic Environments

A cute little service for mocking up pictures of your site being used on different devices. Just drag and drop a screenshot on to an image.

Snow Fall: The Avalanche at Tunnel Creek - Multimedia Feature - NYTimes.com

Excellent journalism combined with excellent art direction into something that feels just right for the medium of the web.

Deploying New Image Formats on the Web - igvita.com

A well-reasoned argument for tackling image optimisation on the server, using content-type negotiation.