80beans

NUik.nl

NUik.nl just launched, the latest addition to the family of NU.nl websites. It’s an iGoogle-like application which displays content from the NU.nl network and some external content (more in the future). Users can create new pages and add widgets to them, which are often highly customizable. Widgets also work on iGoogle (click the “settings” icon to find out the URL for the gadget, as Google calls it)!

Widgets are built by several parties. We made the TV guide, NUjij and RSS widgets and gave extensive support to the other developing parties.

Credits
Client: ilse media
End client: NU.nl
We did: HTML, CSS, JavaScript & PHP (the widgets are rendered by Shindig)

DNews Fernsehen

Unfortunately we didn’t have the time to transform the Dutch TV-guide we built for NU.nl to a German version, but NU.nl did an excellent job themselves. The result is “DNews Fernsehen“, which uses “our” front-end (and probably back-end to a large extent too).
Joris & the rest of the team, good luck with the German website!

On the Loose

For Creative Monkeys we did the technical development for On the Loose, a site to accompany a series of programs about the worlds #1 kite boarders. Since it’s a blog, we decided to use Wordpress and built a custom theme.

Credits
Client: Creative Monkeys
We did: Wordpress theme (HTML, CSS, JavaScript & PHP)

Familie.nl

For ilse media we did the development of a totally new version of Familie.nl, a website to connect with your family. Share calendar events, photo’s and video’s and stories. Build and share your family tree and put events on your map and timeline.

In the near future, a lot of new features will be added.

Credits
Client: ilse media
End client: Familie.nl (Schoolbank B.V.)
We did: HTML, CSS, JavaScript & PHP (the family tree component was not built by us)

Syntactically Awesome StyleSheets

Syntactically Awesome StyleSheets, or simply “Sass” is a great way of structuring your CSS using Ruby syntax. It spices up writing your CSS in several ways (use constants, do calculations, etc), with the most notable feature being the ability to use nested rules. This turns this:

#main
  :width 97%

  p, div
    :font-size 2em
    a
      :font-weight bold

  pre
    :font-size 3em

into

#main {
  width: 97%; }
  #main p, #main div {
    font-size: 2em; }
    #main p a, #main div a {
      font-weight: bold; }
  #main pre {
    font-size: 3em; }

Just save your Sass file as public/stylesheets/sass/application.sass (filename may vary), and Sass will generate a public/stylesheets/application.css. This file will be re-generated after making changes to your *.sass file. Don’t forget to set an ignore property on your *.css files, since you don’t want to have those under version control.

We decided to use it for all our new projects, which has boosted our CSS productivity. Because of the structured syntax, also the not-so-CSS-savvy programmers can easily find what they are looking for in the CSS file. Highly recommended! See the above mentioned website for detailed installation and usage instructions.

Tip: to convert your plain old CSS to Sass, use the “css2sass” command line tool (included with haml): css2sass oldfile.css newfile.sass.