Oliver Caldwell's blog

The things that the CSS3 specification has introduced are amazing. Too bad that we have to use vendor prefixes at the moment and for the foreseeable future. There are quite a few ways of dodging them though. The main one that seems to be gaining traction is a little tool called prefix free. It is a 2kb JavaScript file that adds the prefixes in the frontend. I have mixed feelings about this method.

My main reservation is the fact that it runs in the frontend. You would never use less.js in your frontend while in production, only in development. With prefix free you would use it in production and development. I would imagine that you would see the site flick into life in some older browsers as the prefixes are applied.

There are a few server side solutions as well, which seem a bit better in my opinion. Such as CSSPrefixer which runs on Python.

I did a bit of research using MDN and caniuse.com and came up with this spreadsheet. Don’t worry, it is on Google docs, not Microsoft Excel. It shows you where the majority of the vendor prefixes lie. I then compiled this data to LESS with this script on jsFiddle. This list of mixins is now implemented in my framework, more. So with my framework included in your project you can use mixins and not have to worry about vendor prefixes.

1
2
3

a:hover {
    #more .transition(color 300ms ease);
}

The above code will compile to this.

1
2
3
4
5
6
7

a:hover {
    -webkit-transition: color 300ms ease;
    -moz-transition: color 300ms ease;
    -o-transition: color 300ms ease;
    -ms-transition: color 300ms ease;
    transition: color 300ms ease;
}

It may seem like a lot but it means that you will have as much backwards compatibility as possible.

So I suppose it comes down to your personal preference, you can opt for a frontend solution with prefix free. A backend one with CSSPrefixer or one that could be compiled in the front or backend such as more’s vendor prefix mixins.

I would love to have a discussion about these solutions and when you think we will not need them. So please, comment, tweet, email. And a merry christmas to anyone reading this if I don’t get to write another post before then.

Now that PHP Fog offers a free hosting plan it seems logical to move whatever small sites you have over to it. The free plan is already pretty fast, but if you had a sudden influx of users you can easily upgrade it due to it being a cloud hosting platform. For instance, on the home page of your apps control panel you can drag a slider around to control your database capacity. At $2 per 1gb I think that is pretty good. Of course, if you do not need much you can stick with the free amount of 20mb which will be pretty hard to ever get close to.

Read more →

I have just finished a little project I have been working on, appropriately named more. It is a framework for LESS including normalisation via an adapted normalize.css and a configurable grid system. For example, if you do not want to use the default 16 column grid, you can set it to 12 columns like so.

1

@grid-columns: 12;

It does more than just layout though, it also has mixins / functions that add vendor prefixes for you and adds fallback compatibility in IE for things like text-shadow, opacity and background opacity.

More can be found on GitHub at Wolfy87/more.

I hope you like it, I personally love using it (obviously, I wrote the damn thing), and I would love the hear you feedback.

I have just finished my first npm package, Sentinel. It allows you to watch your source files and run them through other programs when they change. It was designed to allow the complication of LESS to CSS every time I save my file, although it can be used for literally anything. From minification and validation of JavaScript to spell checking your documentation.

You can view in depth information and download it from its GitHub repository. It is still in the early stages at the moment, so I am open to suggestions and bug reports. It can also be installed via npm using the following line.

1

npm install sentinel -g

Please let me know what you think.