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.

Popular posts from this blog

The 29 Healthiest Foods on the Planet

The 29 Healthiest Foods on the Planet > The following is a "healthy food hot list" consisting of the 29 food that will give you the biggest nutritional bang for you caloric buck, as well as decrease your risk for deadly illnesses like cancer, diabetes and heart disease.
Read more

Lists and arrays in Dart

(This is Part 3 in a series about Dart. Check out Part 2, Function in Dart .) Warning : We expect the Dart libraries to undergo potentially sweeping changes before Dart goes to alpha. This document is relevant as of 2011-12-22. Intro Dart is a "batteries included" effort to help app developers build modern web apps. An important "battery" is the bundled core Dart libraries, providing common and rich functionality. Dart is building a solution for large, complex web apps, and providing well tested, integrated, and common libraries is key to helping a web app developer be more productive out of the box. The Collection libraries are a crucial set of APIs that Dart developers get for free. Much more than simple arrays and maps, the Collection library includes standard ways to filter, iterate, inspect, compose, and sort your data. This post specifically looks at List<E> , Dart's ordered, indexable collection of objects. Aside: The Dart project is lucky...
Read more

Converting Array to List in Scala

Now, this has to have a built-in somewhere in Scala , because it just seems too common. So, how to convert an Array to a List in Scala? Why do I need this? I needed to drop to Java for some functionality, which in this case returns an Array. I wanted to get that Array into a List to practice my functional programming skillz. **Update**: I figured out how to convert Arrays to Lists the Scala way. Turns out it's a piece of cake. val myList = List.fromArray(Array("one", "two", "three")) or val myList = Array("one","two","three").elements.toList The call to elements returns an Iterator , and from there you can convert to a List via toList . Nice. Because my first version wasn't actually tail recursive, what follows is a true tail recursive solution, if I were to implement this by hand. The above, built in mechanism is much better, though. object ArrayUtil { def toList[a](array: Array[a]): List[a] = { d...
Read more