Creating Favicons

When creating a site a favicon is pretty much a must these days and it has always bugged me that creating a favicon isn’t straight forward. For one thing different browsers support different standards of favicon, most modern browsers support png images but older browsers only support bmp images. Generally speaking this isn’t an issue and the .ico format allows for this as essentially it is simply a container format which contain several images, a browser in general will choose the most appropriate image for the correct right situation, and you can even specify which icon to use using a meta tag.

Creating an .ico file however which contains several files can require a specialist piece of software which usually isn’t free. You can of course use an online service to do this but I have had mixed results in creating them with this, especially when you want to provide many alternatives.

I have stumbled across a different method. You can use plain old ImageMagick to create them. Simply use the the following command:


convert image1.png image2.png image3.bmp favicon.ico

And that’s it, a favicon is created containing all of the images.

LessCSS unitless mixins

When doing development and you need to dimensions to a block element in CSS its pretty tedious to write:


.block {
width: 200px;
height: 200px;
}

I use LessCSS as my css pre-processor so wrote a handy little mixin to shorten this:


.size(@w, @h) {
width: @w;
height: @h;
}

Then to use it in the example above I would use:


.block {
.size(200px,200px);
}

Not much of a saving but when you do this 20-30 times in a less file the savings can add up. One thing that always bugged me though was that I had to pass through the px in the mixin arguments. I thought the way to get round this would be to change the mixin code to:


.size(@w, @h) {
width: @{w}px;
height: @{h}px;
}

However this always resulted in a syntax error. I guess the variable interpolation isn’t that great. I have however solved this today to achieve the simpler .size(200,200) that I am after use this funky syntax:


.size(@w, @h) {
width: ~"@{w}px";
height: ~"@{h}px";
}

Lovely jubbly or to extend it further in case you want to throw in a different unit but default to pixels:


.size(@w, @h, @unit: 'px') {
width: ~"@{w}@{unit}";
height: ~"@{h}@{unit}";
}

Local Domain Without Hosts File on OSX

Where I do a lot of local development I need to set up a lot of virtual hosts etc for each new project. I’m always looking for ways to shave a bit of time off this process and make it quicker and simpler to set up. In general all of my projects follow a similar pattern. I assign a 3 letter code to the project and use this to set up a local domain, always in the form of xxx.localhost. This convention in general makes things very quick for me but I still end up having to edit a few files to set up a new site.

One thing that has bugged me for a while is having to edit my hosts file to add a new entry. In DNS world I would have a wildcard domain *.localhost which mapped to my machine, however this isn’t available in the hosts file so I ended up having to manually add it each time and my hosts file contained hundreds of entries.

Today I deleted all those entries and instead set up dnsmasq to create a *.localhost situation. It was fairly straightforward, only bit slightly difficult was the need to add 127.0.0.1 to the list of DNS servers. I use Macports, but Homebrew is just as straightforward.

  • sudo port install dnsmasq
  • vim /opt/localhost/etc/dnsmasq.conf
  • add “address=/localhost/127.0.0.1” to the end of the file
  • sudo port load dnsmasq
  • Open up Network preferences, add 127.0.0.1 to the DNS Servers List
  • ping xxx.localhost – should return 127.0.0.1

That’s it. A wildcard DNS for *.localhost set up and working. One less file to remember to edit.

Remembering Nana Kath

I’ve thought quite hard about writing this post mostly because I am not too comfortable with public displays of emotion, things like what I am about to write are private. However this is no ordinary circumstance and I’d like to be able to look back in a few years time and remember how I felt and what this person meant to me. This post is for me.

Yesterday at about 5:30pm my Grandma passed away.

In simple terms I am devastated about this, my grandma was the only grandparent I knew, I don’t remark this in a bitter way its simply how life ended up. So devastated, yes, but in other ways I feel joyous and pleased. Joyous and pleased, for rather than this being a tragic situation, a life taken away in its prime, an unexpected shocking demise, it is a chance to celebrate a remarkable life.

Nana Kath, as she was known to everyone was just over 100 years old. Now in years to come this may not be a remarkable age, but today it is. Think about this, my Grandma was born Sept 22nd 1912, thats two years before the first world war. In 100 years she has lived through a lot and seen unprecedented change.

Unfortunately I couldn’t give you the history and life story of my Grandma, there are many facts I would end up getting wrong and 65 years had already been and gone when I was born. What I can tell you is that during all of the years I was privileged to have with her I have rarely met a keener mind. Her memory always amazed me, she recount stories from her childhood as if it was yesterday. In another time and place she would have achieved so much, but shackled by circumstances and the time of life she achieved everything a mother, grandmother and great-grandmother should.

Right up to the age of 100 she lived an independent life, a quiet life in the heart of yorkshire. She lost her beloved Charlie nearly 30 years ago, a long time to be apart.

In her last few years she was loved and remarked a sense of awe by all she knew and met. Her 100th birthday party being a fantastic celebration where she far outlasted even the most optimistic expectations of her. Family and friends from far and wide together in appreciation.

The last 6 months have been hard and in the end I like to think she knew it was time to go and I am thankful for the small mercy of her not suffering. Its time to be reunited with Charlie.

In her final days in hospital two tales epitomise my Grandma for me. When she was first admitted to hospital her first remark to the nurses was:

I hope you’re not going to put me in a ward with all the old folk.

And when a nurse found out she was 100 she asked whether she had received a telegram from the Queen and if she had put it up on her wall, her reply was:

Oh yes I got one of those but there’s no room for it on my wall, its full of important pictures of my family.

She kept her humour to the end and even in her wane was still a shining light.

R.I.P. Nana Kath, I love you.

LessCSS, Import and Media Queries

Today I found out the Media Queries are not supported at all in IE8. Not sure how I missed this, only that I haven’t used media queries extensively in any project until now. I have just finished off a site that has an adaptive layout for table and mobile. Having completed the majority of development in Chrome and I yesterday moved on to the dreaded cross-browser testing.

To my surprise when I open it up in IE9 there was appeared to be no serious issues. A pleasant surprise, the text lacked text-shadow in a few places, but this is an aesthetic issue not a downright broken issue so I can live with it. Feeling bolder I moved on to IE8 and was very disappointed when the site was a wreck, not slightly broken but very broken.

This was a bit unexpected as I tend to develop using well known patterns which only occasionally need tweaking. Something else must have been the issue. Following a brief conversation with a dev friend he pointed out that IE8 doesn’t support media queries. All of my layout and navigation was defined in media query, hence the massive fail.

The solution was a straight foward approach:

  1. Copy the CSS out of the media query into a separate file
  2. Conditionally include it in the header for IE8 (and below)

This approach does however pose a maintenance overhead, if I make changes to the desktop CSS this needs to be carried through to the external file. Ideally I want to be able to maintain one file which is referenced in the main file. The media query spec does not allow you to use a CSS import inside it, so this approach is not available.

Fortunately I use a CSS pre-processor to create my CSS, I use {less}, less allows you to use multiple files and import them into a single output file. My approach was to simply copy the less into an external file and use the @import syntax in the main file. I could then reference the compiled external file in a conditional comment.

@media only screen and (min-width: 769px) {
  @import "desktop";
}

This did not work unfortunately, the less parser currently does not understand this construct and the import is ignored. It is a well known issue and has been discussed for some time. It is fixed for now in the master branch and is scheduled for the 1.4 release but isn’t out yet. Instead I have used the following work around.

Wrap the code required in a mixin in an external file (desktop.less) i.e.

.desktop() {
  less code...
}

Then import the code outside of the media query and call the mixin inside the media query (main.less) i.e.

@import "desktop";
@media only screen and (min-width: 769px) {
  .desktop();
}

Finally I created an extra file which includes the code outside of the media query which can be compiled and conditionally added (ie.less) i.e.

@import "desktop";
.desktop();

One file to maintain, compiled into the main CSS file, and and another CSS file for conditional inclusion. When 1.4 is released my first approach will be available and you won’t need the extra file, until then this is a good work arund.

Ignoring the 10%

Browser support and cross-browser testing is a tricky subject. As a veteran of the browser wars I’ve seen a number of browsers dominate for a while then tail off as a new generation invariably comes through. In each generation we as web developers look to be in a better place but are always seem to be held back by the legacy of previous generations.

Back in the early 2000’s there were basically two browsers of note (I am deliberately generalising here and am well aware there were more than two browsers) IE6 and Netscape, roughly speaking it was a 90/10 split. IE6 was the ground breaking browser, way better then Netscape, and it was believe me. As a developer you spent most of your time developing to IE6 well aware of the fact it probably broke a bit in Netscape. Never a comfortable situation but it did allow you to take advantage of the better features in IE6 which seemed a good compromise.

Fast forward a few years and the next chapter in the browser wars, the standards movement. Raising Microsoft out of their slumber it pushed the web forward, IE7 was awful, IE6 the bane of developers lives with IE8 and Firefox the leading lights. It was bad for a few years but we moved forward, slowly but surely we started leaving behind IE6, sure there was still 10% of people using it but sacrificing these users for the good of the 90% was acceptable.

And now we are in modern times, Chrome has emerged as the new darling of browsers, IE9/10 makes it again one of the contenders, Firefox is still in the mix and everywhere mobile is the new must support platform. And then there is IE8… Yep you guessed it, representing about 10% of your users.

Given the importance being placed on mobile as a platform, and the fact that most mobile/tablet computers have fairly good support for modern standards is it time to sacrifice the 10% again. Some big sites and big players such as Google have already signalled the end of IE8, is it time for this to become the norm? IE8 usage will only drop and mobile looks set to increase, in my eyes the time is now…