One of the main drivers of wanting to redesign was a desire to move to HTML5. The specs are coming along nicely and browser support is surprisingly good. Internet Explorer is the least HTML5 friendly (i.e. no support) but thankfully clever people have already solved this. By adding the following into your
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
HTML5 is alive from George Ornbo on Vimeo.
..you are in the future.
HTML5 brings the ability for browsers to play video natively. No need for any third party players - it just plays. Granted some browsers aren’t quite up to speed but there are ways around this and I’ll blog about this shortly. Most readers of this blog use a browser that is compatible with HTML5 video. For those that don’t use a compatible browser they can always download the video and watch it offline.
To convert videos from the .flv format I was using I wrote a shell script. This converts the files to HTML5 compatible .mp4 and .ogv formats. If you want to use it you’ll need ffmpeg and ffmpeg2theora. All videos on this site now use HTML5.
I’ve moved the site to Jekyll, a static site generator written in Ruby. I’d already created one site using Jekyll and had felt liberated by it. With the help of Ruby Zen Master Jason Cale I’ve been learning more Ruby. I’m used to the command line so working with text files feels right to me. I’ve also moved the comments on this site to Disqus. It has always felt slightly wrong that I own other peoples comments and that they cannot edit or remove them. Disqus addresses this by giving comment authors ownership of what they write (if they choose to login of course). I moved comments over from ExpressionEngine using this script.
I’m still a big fan of ExpressionEngine and Rails for client sites but the fact I can easily publish a medium sized blog as a static site makes Jekyll extremely attractive to me. There no performance better than a static site and there is nothing more secure than a site with just HTML.
If you’d like to learn more about Jekyll check out the GitHub repository and/or read Tom Preston-Werner’s post Blogging Like a Hacker.
Using CSS3 means that users with more capable browsers will have a better experience. But I’ve taken measures to tweak the design for Internet Explorer users in particular and the site is compatible with IE6 upwards. Even so I’ve added the IE6 Notice that I created to the site to encourage IE6 users to upgrade.
I’ve never had a problem with less capable browsers being served a slightly different site. I happily used
-webkit-border-radius on the previous incarnation of this site.
I’ll admit here that I have an itch about making a compelling desktop experience on the web. Web technologies are evolving and the browser is progressively absorbing more of the tasks that were traditionally the domain of the desktop. The new design is unashamedly inspired by OSX and the desktop applications therein. Basically I wanted to see how close I could get to a desktop interface on the web, and I feel I’ve got pretty close.
Previously I’ve pimped myself as a full-service agency. In reality I’m a one man shop and my most rewarding work has come when I have been hired as a specialist as part of a larger team. I’ve also been creating more web applications as opposed to traditional content sites and I’m keen to to move deeper into programming and interface design rather than just support content sites for small to medium sized businesses. I’d really like to start talking more too and I think removing the facade of being an ‘agency’ will help that. I’m going to have to learn to come out of the shadows though..
My first ever talk is next week at the London ExpressionEngine Meetup. Come along!
Have an update or suggestion for this article? You can edit it here and send me a pull request.
Linux and Unix watch command tutorial with examples
Tutorial on using watch, a UNIX and Linux command for executing a program periodically and showing a fullscreen output. Examples of watching a file download, a network interface come up, and showing the five most CPU intensive processes.
Build your own Vim statusline
Statuslines in Vim are not hard to create. Making your own means one less dependency in your life.
Custom Vim Bindings in tmux 2.4
tmux 2.4 made a significant change to key bindings. Here is how to support custom keybindings for versions before and after tmux 2.4