Tags: place



Wednesday, January 31st, 2018

Wednesday, January 24th, 2018

Explore Georeferenced Maps - Spy viewer - National Library of Scotland

This is a fascinating way to explore time and place—a spyglass view of hundred year old maps overlaid on the digital maps of today.

Saturday, November 18th, 2017

Using SVG as placeholders — More Image Loading Techniques - JMPerez Blog

Here’s a clever to technique to improve the perceived performance of image loading with a polygonal SVG placeholder.

Thursday, March 2nd, 2017


These icons-as-a-service could be really useful for making quick’n’dirty HTML prototypes.

Sunday, January 24th, 2016

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!

Saturday, December 19th, 2015

SpaceHolder – A space-themed image placeholder service.

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

Thursday, July 9th, 2015

Blinking Fever - Tantek

A heartbreaking tale of companionship, memory and loss.

Thursday, April 9th, 2015

100 words 018

Steven Johnson has oft waxed lyrical on the benefits of keeping a spark file—the modern equivalent of a nineteenth century commonplace book.

I started keeping a spark file. But I was keeping it the late lamented Editorially so my experiment was cut short. This is far as I got…

The transatlantic telegraph cable :: the space elevator.

The web :: the patent that never was.

The Mechanical Turk as design fiction, influencing Babbage.

These are the ramblings of a madman. But I might be able to use some of this—I need to prepare a new talk for later this year.

Tuesday, February 18th, 2014

Label Pattern - CodePen

This looks like a nifty take on the ol’ using-labels-like-placeholders pattern for forms. I still prefer to have a label visible at all times, but this seems like a nice compromise.

Tuesday, March 26th, 2013

The Secret Door - Step Through To The Unknown… | Safestyle UK

Prepare to lose yourself for hours as you keep hitting “take me somewhere else” through these most bizarre and wonderful Google street view locations.

Strassenblickfernweh indeed.

Tuesday, March 19th, 2013

Placehold on tight

I’m a big fan of the placeholder attribute introduced in HTML5. In my book, I described the cowpath it was paving:

  1. When a form field has no value, insert some placeholder text into it.
  2. When the user focuses on that field, remove the placeholder text.
  3. If the user leaves the field and the field still has no value, reinstate the placeholder text.

That’s the behaviour that browsers mimicked when they began implementing the native placeholder functionality. I think Opera was first. Now all the major browsers support it.

But in some browsers, the details of that behaviour have changed slightly. In Chrome and Safari, when the user focuses on the field, the placeholder text remains. It’s not until the user actually begins to type that the placeholder text is removed.

Now, personally speaking, I’m not keen on this variation. It seems that I’m not alone. In an email to the WHATWG, Markus Ernst describes the problems that he’s noticed in user-testing where users are trying (and, of course, failing) to select the placeholder text in order to delete it before they begin typing.

It seems that a relevant number of users do not even try to start typing as long as the placeholder text remains visible.

But this isn’t so clear-cut. A quick straw poll at the Clearleft showed that opinions were divided on this. Some people prefer the newer behaviour …however it quickly became apparent that the situations they were thinking of were examples of where placeholder has been abused i.e. attempt to act as a label for the form field. In that situation, I agree, it would definitely be more useful for the labelling text to remain visible for as long as possible. But that’s not what placeholder is for. The placeholder attribute is intended to show a short hint (such as an example value)—it should be used in addition to a label; not instead of a label. I tend to use example content in my placeholder value and I nearly always begin with “e.g.”:

<label for="fn">Your Name</label>
<input id="fn" name="fn" type="text" placeholder="e.g. Joe Bloggs">

(Don’t forget: generating placeholders from datalists can be a handy little pattern.)

So if you’re using placeholder incorrectly as a label, then the WebKit behaviour is probably what you want. But if you’re using placeholder as intended, then the behaviour in the other browsers is probably more desirable. If you want to get Safari and Chrome to mimic the behaviour of the other browsers, here’s a handy bit of CSS (from that same thread on the WHATWG mailing list):

[placeholder]:focus::-webkit-input-placeholder {
  color: transparent;

You can see that in action on search forms at The Session for recordings, events, discussions, etc.

Now, if you do want your label—or input mask—to appear within your form field and remain even when the user focuses on the field, go ahead and do that. Use a label element with some CSS and JavaScript trickery to get the effect you want. But don’t use the placeholder attribute.

Wednesday, January 2nd, 2013

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.

Tuesday, September 11th, 2012

Improving Reality 2012 : Joanne Mcneil

Note’s from Joanne’s presentation at Improving Reality.

Sunday, August 12th, 2012

Generating placeholders from datalists

Here’s a cute little markup pattern for ya.

Suppose you’ve got an input element that has—by means of a list attribute—an associated datalist. Here’s the example I used in HTML5 For Web Designers:

<label for="homeworld">Your home planet</label>
<input type="text" name="homeworld" id="homeworld" list="planets">
<datalist id="planets">
 <option value="Mercury">
 <option value="Venus">
 <option value="Earth">
 <option value="Mars">
 <option value="Jupiter">
 <option value="Saturn">
 <option value="Uranus">
 <option value="Neptune">

That results in a combo-box control in supporting browsers: as you type in the text field, you are presented with a subset of the options in the datalist that match what you are typing. It’s more powerful than a regular select, because you aren’t limited by the list of options: you’re free to type something that isn’t in the list (like, say, “Pluto”).

I’ve already written about the design of datalist and how you can use a combination of select and input using the same markup to be backward-compatible. I like datalist.

I also like the placeholder attribute. Another recent addition to HTML, this allows you to show an example of the kind of content you’d like the user to enter (note: this is not the same as a label).

It struck me recently that all the options in a datalist are perfectly good candidates for placeholder text. In the example above, I could update the input element to include:

<input type="text" name="homeworld" id="homeworld" list="planets" placeholder="Mars">


<input type="text" name="homeworld" id="homeworld" list="planets" placeholder="Saturn">

I wrote a little piece of JavaScript to do this:

  1. Loop through all the input elements that have a list attribute.
  2. Find the corresponding datalist element (its ID will match the list attribute).
  3. Pick a random option element from that datalist.
  4. Set the placeholder value of the input to that option value.

Put that JavaScript at the end of your document (or link to it from the end of your document) and you’re all set. You might want to tweak it a little: I find it helps to preface placeholder values with “e.g.” to make it clear that this is an example value. You can do that by changing the last line of the script:

input.setAttribute('placeholder','e.g. '+value);

You also might want to show more than one possible value. You might want the placeholder value to read “e.g. Mercury, Venus, Earth, etc.” …I’ll leave that as an exercise for the reader.

Wednesday, April 4th, 2012

Obscura Day 2012 on April 28th | An International Celebration of Unusual Places

A day devoted to exploring unusual places all over the world. I couldn’t find anything for Brighton but it looks like there will be some stuff happening in London.

Monday, November 14th, 2011

Space Ipsum

This is officially the best lorem ipsum generator yet.

Friday, October 28th, 2011

Welcome to Small Demons

Turning text into hypertext. Pivot on people, places and things mentioned in books. I really, really like this.

Tuesday, June 14th, 2011

Latin Text Generator for Mac OS X - LittleIpsum

A cute little lorem ipusm generator for the mac.

Fillerama: A Filler Text Generator

One more alternative to lorem ipsum.

Vegan Ipsum

A veggie alternative to bacon ipsum.