How do you stop element breaking inside a CSS3 multi column layout

I came across a rather annoying feature today when I was trying to create a layout with CSS3 multi column. I wanted to stack some divs on top of each other in columns. My first attempt lead to this, which was not what I wanted: I wanted the tile’s to break to the next column …

4

Error.stack

In the statically typed code world I used to inhabit Call stacks were often used to diagnose the root cause of events. I wasn’t aware that JavaScript had a similar (albeit non ECMA5) way of performing error stack interrogation. It’s called Error.stack It makes bugs -particularly those ones that are deep inside of anonymous functions…

0

Reading Minified JavaScript

If you have viewed source on any website in the last few years then you will have certainly seen Minified JavaScript. This is JavaScript where all of the whitespace and unnecessary characters have been removed. Developers do this because it reduces the size of JavaScript files and makes sites load faster. I thought it might…

2

Request Animation Frame is your friend

If you are writing anything in JavaScript that animate then you are probably more than familiar with setInterval and setTimeout. These are both useful tools to create timing loops. However, when it comes to creating animations they are both pretty inefficient. I you use a timer period of less than 16.7ms to draw animations then…

0

Fonts Numerals

The IE test drive website has some new demos that show the use of OpenType font features . Over the next few weeks I thought I’d take a look at each of the different features in turn. OpenType is a technology that is supported by IE10 and Firefox 4+ allows you to use some of…

0

CSS3 vendor Prefixes and a nice box sizing tool

Chris Coyier tweeted last night about a CSS3 tool called box-shadow.info. If you’re gonna make a CSS3 helper app thingy, do like box-shadow.info and help people understand prefixes/compatibility. — Chris Coyier (@chriscoyier) March 5, 2012 It’s a great tool but what I love about it isn’t the the tool itself its the way that it…

0

Fonts and Small Caps

The IE test drive website has some new demos that show the use of OpenType font features . Over the next few weeks I thought I’d take a look at each of the different features in turn. OpenType is a technology that is supported by IE10 and Firefox 4+ allows you to use some of…

0

Fonts and Ligatures

I just noticed that the IE test drive website has some new demos that show the use of OpenType font features . Over the next few weeks I thought I’d take a look at each of the different features in turn. OpenType is a technology that is supported by IE10 and Firefox 4+ allows you…

0

Media Queries and Bandwidth

I just read a blog post that stated that media Queries were not a good idea because: your entire stylesheet, with resources, images, the works – for all viewports – is loaded, before the @media stuff is parsed by the browser. This isn’t entirely true. Although all of the CSS will be downloaded, background-images will…

0

Overlaying data on a video

I got asked by Gordon Rae on twitter today: @thebeebs Martin, can you recommend a good tutorial for overlaying data on video in HTML5 ? — Gordon Rae (@socialtechno) February 21, 2012 Firstly beware that just because a browser supports HTML5 video it might not be capable of overlays… this is true particularly on mobile…

0