Tuesday, July 24, 2012

How we built the new Dart homepage

I work with the Dart team, and we needed to update our dartlang.org site. It was a fun project to rebuild dartlang.org, so I wanted to give a shout-out to some of the libraries and tools that we used.

Dart project home page
The new dartlang.org


Requirements for the new dartlang.org included:

  • work on multiple screen sizes
  • display more obvious calls to action
  • load faster
  • clean up CSS
  • display more info on the home page
To achieve these goals, we used the following tools:
Bootstrap, from Twitter, is a slick set of CSS styles and simple JavaScript plugins. Bootstrap has a grid system, pre-defined styles, and most importantly a sane set of defaults for adaptive layouts.

Jekyll is a static site generator. I'm a big fan of static sites, but I didn't want to give up modular templates and layouts. We can split up our files into headers, footers, bodies, includes, etc, and then use Jekyll to compile everything in static and complete files.

The Jekyll Sitemap plugin is used to generate a sitemap.xml file. Search engines can find the site's resources using this single comprehensive XML file.

The Jekyll asset bundler plugin concatenates our JavaScript files into a single download. Reducing HTTP connections is a good thing. This plugin is neat in that it doesn't concat unless running a formal build. During development, you still see the individual files.

I was tired of writing HTML by hand, so we used Markdown (and specifically kramdown). With Markdown, you can write more logical text files with very simple formatting rules. A processor will convert the text into structured HTML. For docs like articles and tutorials, Markdown is wonderful.

Pygments converts Dart, HTML, and other code to styled HTML. Thanks to Olov Lassus, we have a Dart lexer for pygments!

Compass is a toolkit for SCSS, and SCSS is a much much better way to write CSS. We wanted a much better way to write CSS, and SCSS's nesting and variables are very productive.

Bootstrap uses LESS, an alternative to SCSS. But we wanted to use SCSS, so we found this SCSS version of Bootstrap. Bonus, it uses a slick set of font based sprite icons from Font Awesome.

Using Make for very simple build tasks was the quickest thing to do. Nothing special here, just a few tasks to clean the build, run the jekyll server, and deploy to app engine.

optipng makes optimizing PNG images easy. We even have it wired into our makefile to easily scan through our site and shrink our images.

App Engine, Google's scalable web serving platform, was a natural fit for serving the site. 

The dartlang.org site is open source. If you'd like to contribute, please do get in touch at the Dart mailing list.
Post a Comment

Disclaimer

I'm probably required to say that the views expressed in this blog are my own, and do not necessarily reflect those of my employer. Also, except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the BSD License.