Put Together Quickly

The last month or so I've been working on and off on a new design for this site. I wanted to start using HTML5, CSS3, cleanup the layout and make the site easier to read.

Easier to Read Type

Le Monde Journal STD by Porchez Typofonderie

font-family: "lemonde-journal-1","lemonde-journal-2",
"Bodoni MT", Georgia, serif;

Museo Sans by exljbris Font Foundrys

font-family: "museo-sans-1","museo-sans-2",
'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

For the body I picked a 20px font size for the default paragraphs and headers using Le Monde Journal STD by Porchez Typofonderie and Museo Sans by exljbris Font Foundry for the header, footer and p.leader. Both fonts are made available and served from Typekit. Then I tried to get the measure and leading to where I thought it looked right, but I'm no typographer so I followed a few different resources to explain how and why to set these as best I could. And to help make any code a bit easier to read I've added syntax highlighting using Pygments.

The Layout

On the Layout side Dan Cederholm's Handcrafted CSS helped, in particular Ethan Marcotte's chapter "The Fluid Grid" and Ethan's article on responsive web design was a natural followup to that chapter.

The site is wrapped in one ID called page and then broken down into six different sections: header, nav, content, secondary, recents and footer. Using Ethan's responsive web design as a guide I made changes to the CSS based on max-width: 800px, max-width: 650px and min-width: 1200px.

Wide view at min-width: 1200px

Normal view

Narrow view at max-width: 800px

Small view at max-width: 650px

Development and Deploying

I wanted to keep with a static HTML site to keep things simple–no SQL, easy to backup and deploy. A while back I had replaced WordPress with a static HTML generator called Hyde which I still use. It uses Python and Django including support for all of Django template tags and filters.

So the workflow is I have a local copy of the site and after making changes or adding new stuff I simply run python /usr/local/hyde/hyde.py -g -s to regenerate the static HTML. Add a fabric script and I can regenerate the local stuff to test and then deploy it to the web server at MediaTemple.

You can view the source for the site at Github.

Things I'm still Working on

Getting categories and tags added to the site. Hyde supports categories, but I would need to add my own method to use tags along with categories.

Rework the CSS using LessCSS to see if using it or SASS can actually make managing CSS files any easier.

Encountered a bug when minifying CSS with media queries it would fail at the first query. This was using YUI Compressor, but I'm pretty sure it is something on my end and has nothing to do with compressing a CSS file with a media query.

Not too long ago I started setting up some EC2 AMIs and startup scripts for our engineers to use for development and with the addition of Buildout by one of those engineers it became what we referred to as dev-on-demand or "dod". For various reasons we have now since retired the dev-on-demand and just have a number of servers that the engineers can use.

Ideally you should be limited only by the performance of your machine or other resources to quickly fire up one or more virtual servers to work, test or learn with.

Vagrant is a tool for doing just that - to build and deploy virtualized dev environments. By using Oracle's VirtualBox along with Chef from Opscode, Vagrant is able to build out something from a simple dev setup to a complex dev environment that you can save, reproduce and then tear it all down when you are done. The reproducible part is something that I would point out if you are part of a team, because you can save standard setups that your team can use as a starting point or share entirely new configuration ideas with them.

And if you find yourself teaching a class or just needing to learn something new on your own Vagrant should be a good pick to use as your classroom.

Two little gotchas that I encountered after installing it on Mac OS 10.6:

$ sudo gem install vagrant
$ vagrant box add base http://files.vagrantup.com/base.box

When trying to add a new box after installing the Ruby gem I got the following error:

/usr/local/lib/ruby/gems/1.8/gems/nokogiri-1.4.1/
lib/nokogiri/nokogiri.bundle: 
dlopen(/usr/local/lib/ruby/gems/1.8/gems/
nokogiri-1.4.1/lib/nokogiri/nokogiri.bundle, 9): 
no suitable image found.  Did find: (LoadError)

I had to reinstall Ruby, because of some issue when I upgraded to Snow Leopard. After the reinstall I was able to get past this step and onto setting up Vagrant and starting the server.

$ vagrant init
$ vagrant up

Until I had this second error:

/usr/local/lib/ruby/gems/1.8/gems/
virtualbox-0.5.4/lib/virtualbox/global.rb:122:in `config': 
The path to the global VirtualBox 
config must be set. See Global.vboxconfig= 
(VirtualBox::Exceptions::ConfigurationException)

I had just installed VirtualBox (we use VMware Fusion at work) and I hadn't used it yet and just needed to run VirtualBox at least once to get vagrant up to work. After that the new box was downloaded, added and started right up.

If you're reading this and thinking thats nice, but we use X instead of Ruby, unless you are on a OS that Vagrant doesn't support it really shouldn't be an issue. At work we are a Python / Django shop and I was able to add a recipe for mod_wsgi and get a simple Django app up and running with no issues. And I'm sure if I had time a recipe could be expanded to fit our needs to use buildout getting our app onto one or more boxes.

Read more about Vagrant here and if you are managing any number of Unix/Linux servers and haven't yet heard of Puppet of Chef I'd encourage you to spend some time with at least one of them. For those on a Mac who might have always wondered why there isn't a default package management system on Mac OS X and have been looking for one check out Homebrew.

After years of arguments that Microsoft's bundling of IE reduced choice we now find that Apple is doing the same thing with OS X iPhone but only with more far reaching consequences.

When the Department of Justice brought civil action against Microsoft it was on the charge that Microsoft had abused its position in the PC market to bundle Internet Explorer with Windows. This was the result of Microsoft unfairly restricting the market for competing web browsers. A point argued by some that are now vocal in defending Apple's position of not making Flash available on OS X iPhone.

By not allowing a Flash player Apple prevents people from installing software written in Flash for OS X iPhone rather than their own development tools. This also allows them to maintain control by restricting how software is installed - only with their approval through the App Store. If the choice of not allowing Flash on the OS X iPhone was due to Flash crashing it why don't we see the same restrictions placed on any other application that crashes the OS? The issue isn't as much as preventing a user to be able to use Flash as much as it is a point of Apple controlling what can be installed on the OS X iPhone to protect their interests. No third party email clients, no third web browsers.

From the beginning OS X has shipped with the development tools unlike Windows and OS X benefited from this with innovation and competition among it's independent developers. Now you need to sign up for the iPhone Developer Program, agree to a Nondisclosure and Nonuse of Apple Confidential Information agreement, pay for your membership in the program before you can even submit an application to the App store. A bit different than when the Mac OS X was released.

If this is the beginning of a new era of computing the actions of Apple appear to put us on a path that will be more restrictive than Microsoft was even at the highest point of criticism of them bundling a web browser with their operating system.

So no Firefox, no Thunderbird, no Flash - no choice.

At the same time I do think a device like the iPad is a step in the right direction for combining the best from a few different mediums (print, television and radio) into a new mix. And I see it as an obvious evolution of a device like the Kindle, but that is only with the device. The restrictions placed on what can be installed and used on it is the same reduction in choice that we had with Microsoft bundling IE.