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.
5 comments

Popular posts from this blog

  • Sponsor:  Register today for  New Game, the conference for HTML5 game developers . Learn from Mozilla, Opera, Google, Spil, Bocoup, Mandreel, Subsonic, Gamesalad, EA, Zynga, and others at this intimate and technically rich conference. Join us for two days of content from developers building HTML5 games today. Nov 1-2, 2011 in San Francisco.  Register now ! This is the second article in a Box2D series, following the Box2D Orientation article. The Box2DWeb port of Box2D contains a nice example to show off the basics of integrating physics simulations into your web app. This post will provide a walkthrough of the example, explaining the high level concepts and code. First, let's see the example in action. The code for the above is open source and available on GitHub. It was adapted from Box2DWeb's example . Animating Before we look at Box2D, it's important to understand how the above simulation is animated. You might think setInterval or setTimeout is
  • In which I port a snazzy little JavaScript audio web app to Dart , discover a bug, and high-five type annotations. Here's what I learned. [As it says in the header of this blog, I'm a seasoned Dart developer. However, I certainly don't write Dart every day (I wish!). Don't interpret this post as "Hi, I'm new to Dart". Instead, interpret this post as "I'm applying what I've been documenting."] This post analyzes two versions of the same app, both the original (JavaScript) version and the Dart version. The original version is a proxy for any small JavaScript app, there's nothing particularly special about the original version, which is why it made for a good example. This post discusses the differences between the two implementations: file organization, dependencies and modules, shims, classes, type annotations, event handling, calling multiple methods, asynchronous programming, animation, and interop with JavaScript libraries. F
  • Angular and Polymer, sitting in a DOM tree, B-i-n-d-i-n-g. First comes components, Then comes elements, Then comes the interop with the node dot bind. Angular , a super heroic MVC framework, and Polymer , polyfills and enhancements for custom elements built on top of Web Components, can live harmoniously in the same app. This post shows you how to connect Angular-controlled components to Polymer-controlled elements via data binding. And we do it all in Dart . Angular and Polymer I get asked "Should I use Angular or Polymer?" a lot. My answer is, "Yes". That is, both libraries have distinct strengths, and you can use both in the same app. Polymer excels at creating encapsulated custom elements. You can use those custom elements in any web app or web page, regardless if that app is built with Angular, Ember, etc. Angular excels at application engineering, with dependency injection, end-to-end testability, routing, and services. Here are som