$('input, select, textarea').focus(function(){
$('meta[name=viewport]').attr('content','width=device-width,initial-scale=1,maximum-scale=1.0');
});
$('input, select, textarea').blur(function(){
$('meta[name=viewport]').attr('content','width=device-width,initial-scale=1,maximum-scale=10');
});

Notice the tiny difference between focus and blur: onfocus you set the maximum-scale to 1 and onblur it’s set to 10. You shouldn’t use the code above, Wilfred Nas and Mathias Bynens optimized it in the comments to this snippet:

var $viewportMeta = $('meta[name="viewport"]');
$('input, select, textarea').bind('focus blur', function(event) {
$viewportMeta.attr('content', 'width=device-width,initial-scale=1,maximum-scale=' + (event.type == 'blur' ? 10 : 1));
});

The browser starts zooming in but immediately zooms out again when the elements gets focus. I like that.

Prevent iOs from zooming onfocus is a post from: Nerd

• Opera Next can be run at the same time as the regular Opera
• Firefox has an Aurora version (far future, unstable) and a beta version (more stable). You can run them alongside with the help of the ProfileManager
• Chrome has some Canary Builds which can be run alongside your regular Chrome.
• Internet Explorer Test Drive versions are released on a regular basis and can run next to IE9 (on Windows 7 only)

Developer builds is a post from: Nerd

Today I talked about this idea while I was giving a workshop. From that moment on Roy Tomeij, who was attending, was more silent than usual. Ten minutes later he interrupted me with this masterpiece. Ladies and gentleman, I present you the Adaptive CSS Zen Garden. Resize your browser window at your own risk!

The Adaptive CSS Zen Garden is a post from: Nerd

Serve your default stylesheet to all browsers except IE8 and lower. To those “browsers” you serve Andy Clarke’s universal ie6 css in a conditional comment. Then with the help of a simple javascript you immediately replace this css file with your default css file. Now those unlucky visitors will at least see a nicely styled easy to read minimal site. (View source on this page to see how it works)

I couldn’t think of a way to replace the fallback css before it gets loaded so the only negative side effect of this technique is that it uses an extra http request. I think it’s worth it: for me this JavaScript dependency was the only thing that kept me from using HTML5 elements.

Another HTML5 fallback strategy for IE is a post from: Nerd

try
do shell script "curl www.apple.com"
on error
do shell script "killall name-of-this-script"
end try

Fill in the name of your Automator application and if there’s an error the script will terminate itself. This way you can build multiple checks. For instance I have another check that stops the automator workflow if a certain disk is not mounted. And suddenly Automator becomes a handy tool.

Abort an Automator workflow is a post from: Nerd

In order to make this work you need many high volume feeds on the same subject. What better place than Twitter for this purpose? I copypasted/wrote a simple script that finds all URL’s in a twitter feed, follows the 301 or 302 redirects until it gets the 200 header, places this URL in a new feed item.

You’ll need to install this php script somewhere on a server, optionally change some texts around line number 329 and then add this URL as a spark to Fever:

http://yourdomain.com/dir-of-choice/?feed=http://nerd.vasilis.nl/feed/

You should replace http://nerd.vasilis.nl/feed/ with the feed you really want to add.
Now if someone can write a bookmarklet that actually lists all linked feeds in a document and gives you the option to copy them, or directly submit them to fever, I’d be happy to post it here.

Go ahead and laugh at my code, I know it sucks. But let me know how to improve it, I’m willing to learn.

Using Twitter feeds to feed your Fever is a post from: Nerd

* {display:block;}

Or display inline, or table-cell or whatever. All elements, including title, style and head can be used for styling now. Have fun with it!

(I have only tested this on FF3.5 and Safari. I guess it works on more browsers).

Display everything is a post from: Nerd

<div style=”background:url(path/to/image-w100xh75.jpg) no-repeat 50% 50%;width:100px;height:100px;”></div>

Easy it is. Unless the usability expert comes knocking on your door. Background images don’t behave the same as normal images. In most browsers, for instance, you can’t easily download a background image by right clicking on it.

So you do want the background positioning but you also want some important behaviour of a normal image. Here it is: Centered images in the middle of a block with normal usability.

It does not work in fluid or flexible layouts of course. But it does work in all serious browsers and in IE7. Haven’t tested it in IE6 but there’s no reason it wouldn’t work there. I’m not sure if it creates a performance issue. The images are downloaded only one time, so that’s not an issue. The only problem might be double memory usage. I haven’t tested that.

Centered images in the middle of a block without (total) loss of usability is a post from: Nerd

One way to build a layout like this is to measure all possible box-sizes to the pixel, create all background-images for these boxes (a few hundred in this extreme case) and start writing a CSS file of a few thousand lines. I chose to see if there’s another way to do this, with less code and much less images (one). And here I present this other way.

Equal height cols with a flexible width

Basically what this technique comes down to is to place an absolutely positioned div inside a statically positioned floating div which is inside a relatively positioned div with overflow set to auto. The absolutely positioned div can inherit the left position and the width of its direct parent, but if you define its top and its bottom it will, off course, inherit these from the containing, relatively positioned div. And this relatively positioned div will get its height from the highest statically positioned floating div. Why didn’t you think of this before? (-:

Check out these examples

1. Equal height cols with a flexible width
2. Equal height cols with a flexible width, a border and padding between the boxes
3. Equal height cols with a flexible width, padding between the boxes, rounded corners, dropshadows and flexible background-colors

IE6 needs JavaScript. I didn’t bother to include it here. Opera needs an update in order to display this correctly, I filed a bugreport. IE7 has difficulties with percentages.

Equal height boxes with flexible widths is a post from: Nerd

The known problem with an image with a caption below it is that it is impossible to make the text as wide as the image without setting the width of the image on the caption.

<div class="image-with-caption">
 <img src="image.jpg" alt="">
 <p>This is a caption below an image and the caption ignores the width of the image.</p>
</div>

The above code will look something like this:

---------------------------
|                         |
|                         |
|                         |
|                         |
|                         |
|                         |
|                         |
|                         |
---------------------------
This is a caption below an image and the caption ignores the width of the image.

But we want it to look like this:

---------------------------
|                         |
|                         |
|                         |
|                         |
|                         |
|                         |
|                         |
|                         |
---------------------------
This is a caption below an
image and the caption  is
as wide as the image.

This can be done by adding inline styles to the surrounding div (or to the caption itself).

<div class="image-with-caption" width="270px">
 <img src="image.jpg" alt="">
 <p>This is a caption below an image and the caption is as wide as the image.</p>
</div>

I don’t like inline styles. So there must be another way to set the width of the caption. Hello position:absolute!

.image-with-caption {
	float: left; /* we want this */
	position: relative; /* we need this */
}

.image-with-caption img {
	display: block; /* we don't need this but it solves things */
}

.image-with-caption p {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0; /* this will make it as wide as the image */
}

The above CSS will render our HTML as follows:

---------------------------
|                         |
|                         |
|                         |
|                         |
|                         |
|The caption is now placed|
|over the image, aligning |
|at the bottom            |
---------------------------

You can now decide to only show the caption when hovering over the image. Or you could add a margin below the image of two or three times the default line-height in order to fit the text below the image.

I know, I know, it is not the same as a flexible caption (flexible in height) below an image, and I sure know it can well result in unreadable and unaccessible text when the caption is very long (or the image is very small). And the photographer won’t be happy with text over his image and the copywriter won;t like his caption to be hidden. I just don’t like inline styles. And I love the power of position:absolute

P.S. Yes, I know there is a browser out there called IE6. If you understood what I wrote you can make up a fix. If you didn’t don’t use position:absolute.

Using position:absolute to avoid inline styles is a post from: Nerd