web projects



CodeCook.io contains many code snippets for performing common task when creating software, websites and performing system administrative tasks. Our goal is to present simple task oriented code snippets with all the necessary meta information such as platform requirements and dependencies. We want you to quickly find the canonical method to solve a problem and easily asses both the benefits and drawbacks of each approach. Snippets can be static pieces of code but can also incorporate customizable parameters (resembling macros).

October 2014 view website

Etcetera records

Webshop for Etcetera records classical music albums.

September 2014 view website

RSP infrastructure projects

Infrastructure projects in the north of the Netherlands organized in an interactive map.

September 2014 view website

N31 Harlingen

n31harlingen.nl contains news and information of the progress of new N31 road construction projects in the Netherlands. The site is tailored for people with disabilities by using accessibility web standards.

July 2014 view website
grafischekamer.nl/ (mobile)

GK - Responsive Design

We developed the first version of GrafischeKamer.nl about a year and a half ago. With the increasingly popular responsive web design GK also received an upgrade and now adapts smoothly to devices in any format. Based on the site's content the site maintains its orginal layout for large screens and reflows to two columns for medium screens, moves its side content down on small screens and turns into a single column on the smallest devices.  

November 2013 try mobile app

GSR Aegir

Rent a rowboat? Watch how much balance you have at the bar? View match results? You'll find it on the brand new website of the Groningen Studenten Roeivereniging Aegir. All members, trainers and committees have an account through which they can manage everything at the club. Everything is done through a tailor-made content management system. The site runs on Django and uses Twitter Bootstrap.

August 2013 view website

First Q net

First Q is a network of consulting engineering firms across Europe. Their combined portfolio and expertise gives first Q an outstanding position. And their new site reflects this. With its network's projects and partners projected on the map of Europe. And with a shared portfolio and skillset presented in a uniform layout. The site is lightweight and responsive.

July 2013 view website


WebWatch offers live camera streams for building sites & projects. This portal site is meant to engage new clients. It has a responsive layout (adapts to device size) and uses the latest web standards.

January 2013 view website

atelier PRO extras

The atelier PRO site is extended with a handful of goodies. The site now comes with a full size image gallery with swipe support for mobile devices, an interactive timeline of the history and animated vision caroussel fully editable via the admin panel. For search engine optimization we've added xml sitemaps and infused the site with microformat and open graph metadata. Finally we've added a custom pdf generator which converts a project's webpage into a pdf as if it was formatted in Adobe InDesign.

September 2012 view website

Marijn Boterman

A portfolio with a variety of projects from architecture to graphics & animations packed into a sophisticated one page site. The playful grid layout transforms when visitors select a project. Expanded projects contain images and other media which fit seemlessly in the grid. Colorful filters complete this site.

This design is the result of close collaboration with Maijn Boterman.

August 2012 view website

Snijlab Upload Drawings

Snijlab is a digital manufacturing company specializing in laser cutting of sheet materials. To simplify submitting and checking drawings we've designed a drawing processing tool with a web interface. Visitors can just drop their drawings on a web page, after which they are uploaded, checked and analyzed on the server. For each drawing a preview is displayed with material & size options. When the visitor selects an option the price appears and the order can be submitted and paid online. The drawings are added to the cue and invoice & packaging slip are all automatically created. Check instruction video.

July 2012 view website

atelier PRO site

Do not be fooled by the light & airy appearance of this site (orginal graphic design by Giselle Segura Gelink). The architectural office atelier PRO has been around for a few decades and this site is packed with all its projects, posts and people. All closely interlinked and organized by dozens of different metadata types, such as project types, functions, status, team members & partners, size, costs, dates and more. You can filter on each of these. And there's even an archive. So enjoy exploring.

June 2012 view website

Grafische Kamer .nl

A simple yet elegant portfolio site developed for and in collaboration with the graphic design office Grafische Kamer. The portfolio is presented on a canvas on which the projects are animated when filtered via the category menu on the side. Each project has a primary color which is used for the interactive elements on a project's page, like the slideshow controls, thumbnails borders and share widget icons.

May 2012 view website

Booosting Buildings

Concept & graphic design for the booosting buildings exposition at Building Holland 2012. The expo presents four innovative building concepts by members of Booosting, all being realized in 2012. In the expo space itself a centrally placed cube acts as portal to the projects. Each building is symbolized by an icon on a the Booosting innovation map. Icon, project info and project presentation are connected through a simple line. QR-codes connect the physical material with online info & regristration for related events.

April 2012 view website

New Urban Configurations

New Urban Configurations is an international conference organized by Delft University of Technology. The site offers all the info you would expect. In addition it has a fully automated abstract & full paper management system. Even reviews can be done through a web interface, allowing the system to rate all papers. To spice up the mainly text based content, fullscreen backgrounds are added to the mix. Graphics are designed by Joost Hillen Architectuur.

March 2012 view website


When the experience of browsing through a site is at least as important as the the content we get to mix the design up a bit. Full screen images give a strong feel to this online introduction to life coaching. Navigation is pushed to the bottom of the screen acting as a scrollbar to move through the steps of this journey.

Graphic design by Marijn Boterman.

February 2012 view website

Snijlab Online Lasersnijden (beta)

Snijlab.nl is the first project using our brand new in-place-editor CanTouchThis. A regular content management system (cms) uses a set of forms to edit pages. With CanTouchThis you don't need forms as you can edit all the contents on the pages themselves! An editor can just click in a text and start typing; add a media like images, videos & more; click & drag to resize a text or image; or drag & drop elements to order them on a page. After each adjustment the page is saved automatically and that's it. So what you see, is what you (and your visitors) get.

February 2012 view website

DNA|DNA Strategisch Online

This is a true hybrid between a dynamic & a static website. It generates all web pages dynamically, gathering its contents and adapting the layout to give each page its own look but with elements. However instead of using a web based control panel (cms) and storing the content in a database, this project pulls all its content from html & xml files. The client can edit these files in their preferred application (in this case Dreamweaver), exactly like they were used to in their previous website. This way the hybrid has the intelligence of a modern website with the freedom of a classic static website.

January 2012 view website

Booosting Superbeton

The "Superbeton" expo organized by Booosting (the Dutch building innovation platform) presents design experiments with Ultra High Performance Concrete. A creative solution to a limited budget led us to combine the exposition objects and graphics with online information and media by implementing QR codes. When a visitor scans a QR code on an expo sign using a smartphone it'll pop up a web page of the project. Easy for bookmarking and sharing. 

December 2011 view website
m.activeids.nl (mobile)

Active IDs (mobile)

Touch optimized version of our own desktop website.

While developing cross device web applications we were in need of our own mobile app. And with last week's release of jQuery Mobile 1.0, the framework for touch behavior, and the arrival of our iPad2 we couldn't wait any longer.

Our app has an iOS mail like split view for larger devices and transforms in a compact view on smaller ones.

November 2011 try mobile app

#Slimhus blog

Private Client Collectives (NL: "Collectief Particulier Opdrachtgeverschap") is rapidly gaining popularity within the housing market in The Netherlands. Slimhus is an initiative of the architectural office atelier PRO responding to this trend. The Slimhus blog is part of their outreach to potential clients, and what better way than using a blog to involve them?

This blog is powered by Wordpress and customized to get that tactile designer's feel, complete with large images and cross social media connections.

October 2011 view website

NiBi Leden

With thousands of members NiBi, the Dutch institute for Bio Sciences needed a member management system. This web application allows new members to register, verify their account, adjust their profile and preferences, recover their password and even terminate their membership in a few clicks. At the same time the staff receives notifications on everything so they can send welcome packages, check payments and bulk import and export member data if required. All with the appropriate security in place.

September 2011 view website

free-D facades

What's great architecture without great detailing? So what would the online database for free form architecture be without a section for free form facades? No need to answer, because it's right here. Facades with impossible shapes & constructions realized in all kinds of materials are categorized by skin, structure and special features. Again 3 portals, hundreds of projects with even more images, videos and other media and a filter system that is faster than ever. Enjoy exploring.

May 2011 view website

Biologie Plus School

Yes, websites can be playful and informative. Biologie Plus School is an initiative to inform and educate primary school teachers in the essentials of bio sciences. The website is part of the NiBi web family which share a management system but each have their own custom look & feel on the visitors' site.

The shared system offers different page layouts which ensures a good balance between textual and multimedia content: A page can show media in a slideshow gallery, side by side, mixed with the text, as just a killer image or video on top of the page or as a simple plain page.

May 2011 view website

NiBi Web

Just like Biologie Plus School, NiBi.nl is part of the NiBi web family. NiBi, the Dutch institute for Bio sciences, opted for a custom content management system suitable for their current websites and easily extendible for future websites. While they share the management system eacht website has a custom look & feel.

The shared system offers different page layouts ensuring a good balance between text and multimedia: A page layout can be set to show media in a slideshow gallery, side by side, mixed with the text, as just a killer image or video on top of the page or as a simple plain page.

May 2011 view website

Mei Tour

The Mei Tour let's you virtually explore all architectural and urban projects of Mei Architecten & Stedenbouwers. The projects are presented on a customized map and can be viewed in 3D, Streetview, Google Earth and of course in text. Enjoy exploring.

April 2011 view website
m.mei-tour.nl (mobile)

Mei Tour (mobile)

This Mei Tour application is optimized for touch & mobile devices. In a compact view with just the map you can select a project. You can also quickly find a project in the searchable list.

Each project has a short page with a description and illustration. For 3D & more info you are refered to the full websites, which have all the features, but might not be supported on your mobile device.

April 2011 try mobile app

DNA|DNA Portal

Our first one-week-website! The result of a client with a clear vision and visual proposal realized in a matter of days. The project itself is a transition site existing of portal with a new look & feel, an interactive menu and a smart iframe to present both old pages as static new pages. Quick, simple and elegant.

April 2011 view website
m.vharch.nl (mobile)

VHArch - How Its Made (mobile)

The latest news & projects of VHArch are at your fingertips in the VHArch app for touch & mobile devices. The mobile portal provides a quick overview of everything new. With the searchable project list you have instant access to all projects. You can scroll back in time infinitely in the news item list.

Once you're on a project page or reading a news item you can easily navigate to the next and previous items or go to the desktop version for the full project experience.

March 2011 try mobile app

VHArch - How it's made

The architectural & engineering office of VHArch excels in technical innovation that bring their projects to a new level. It's the sense of craftmenship and fine tuning of details add quality to each project.

The VHArch website presents this How it's made approach in its design. As a visitor you can quickly browse through the projects visualized in full frame images or get to know the concepts & development of specific parts of the design. Hotspots on the project covers light up when hovering over them and each hotspot contains a gallery of rich media with images, videos, 3d models and more.

March 2011 view website

KCZY site with TouchUp

KCZY.nl has a simplistic design with an even simpler content management system: TouchUp. No more forms to manage the content, just login go to a page and click on what you want to edit and drag it to where you want it. Every type of content (text, tables, images, external media) has it's own in place editor. A revival of what you see is what you get.

February 2011 view website


free-D is the online platform for free formed architecture, facades and theory. All projects are categorized by shape or feature and can be easily found through category pages, advanced filters or search. The website contains rich multimedia with highly customized viewers.

November 2010 view website

Studio ROSA

Studio ROSA is a young office for spatial planning, urbanism and architecture. This site is meant as virtual business card as a reference during design competitions. In 2011 the site will be expanded with a full portfolio and cv's of the faces of Studio ROSA.

November 2010 view website

Cruquius Bedrijvig Terrein

The Cruquius Bedrijvig Terrein website is an integral part of a competition entry by Studio ROSA. Together with the presentation panels and a glossy, the site gives an impression of what Cruquius could be. On the website visitors can get an overview of the proposal and view the strategic design interventions in close up. It's also a mockup of how residents could be invited to contribute to the design via push pin comments.

November 2010 view website
dce.youngzaphod.org/mobile (mobile)

DCE Map (mobile)

The DCE Map presents the global activities of the IE&D minor of DCE, TU Delft. The DCE Map for mobile (beta) is lightweight and optimized for touch. It's is ideal for slow internet connections, which is the case in a lot of countries where the DCE projects are taking place. It's optimized for touch to make the projects easily accessible on mobile devices like smartphones and tablets.

You can quickly find a project on the map or in the searchable list to get basic project info. For the full project maps you are refered to the desktop version.

October 2010 try mobile app


The DCE Map presents the global activities of the International Entrepreneurship & Development (IE&D) minor of Delft Centre for Entrepreneurship (DCE), TU Delft. The map application's content is generated by students who have access to the custom made map editor. The map app let's visitors spatially explore the projects and give feedback via questionnaires and comments on the project maps.

September 2010 view website

Wonen in West Brabant

Wonen in West Brabant is a social / spatial investigation by Urban Synergy of two small towns Nieuw-Vossemeer and De Heen. The website is an map based questionnaire where visitors can share their opinion by answering questions placing markers on the map of their town. Both the client and the visitors can view the results on maps and in graphs. The results are used as part of Urban Synergy's research.

May 2010 view website

CSI.Lagos web portal


April 2010 view website


Booosting is the platform for building innovation in The Netherlands. The website serves to communicate its news and activities through its network. Members and visitors can stay up to date via newsletters and feeds, sign up for activities, find members in the network and explore innovative projects on the innovation map.

January 2010 view website

Active IDs Wiki

The Active IDs is dedicated to sharing home brewn ict related tutorials, tips & tricks, code snippets and plugins. All the content is contributed by Active IDs. The wiki is based on MediaWiki, the same system as Wikipedia. The wiki also provides a feed spreading news on new tutorials, plugins and more.

July 2009 view website

CSI.SP web portal

A wide variety of popular new services is used during the City Space Investigations - São Paulo (CSI-SP) workshop organized by Urban Detectives in 2009. The website is a portal to all the resources used and products created during the workshop. From slideshows and slidecasts of lectures, to online video documentaries, group and project blogs, maps of day-to-day tours and interactive posters of the results. And just like in the CSI.NY (2008) edition, a virtual walkthrough of the final exhibition.

June 2009 view website

(Inter)National Facades


The mini conference '(Inter)national Facades' held on 28 May 2009 at the Faculty of Architecture, TU Delft, The Netherlands is an initiative of Praktijkvereniging BouT (the student & practice association for Building Technology) in collaboration with the chair Design of Constructions. On this website the conference is reviewed and all presentations can be viewed as SlideCasts - slideshows with a synchronized audio track.

June 2009 view website

Spacelab frameworks

@Spacelab, research laboratory for the contemporary city, organizes international research projects as part of the educational curriculum. The results of each year's project is bundled into a booklet. The Spacelab frameworks provide a web interface to browse these booklets.

In these series the following frameworks were developed:
Venice, New Orleans & Capetown.

December 2008 view website

Product Develpment - TU Delft

During the first Building Technology master studio at Delft University of Technology students design new facade systems and build 1:1 prototypes of their designs. The product development website acts as a promo for the studio showing all aspects of the educational program through a virtual 3d representation of a facade prototype. Visitors can interact with the prototpe, rotate it and click on points of interests to get more info, videos and images.

June 2008 view website

CSI.NY Virtual Expo

The CSI.NY Virtual Expo is an interactive walkthrough through the exposition of the City Space Inivestigations - New York (CSI.NY) workshop held by Urban Detectives in April 2008. The expo was to be held in the faculty of architecture at TU Delft, which burnt down just before the expo opening. As an alternative to the physical expo and as memorial to the faculty of architecture this website offers a virtual expo. Visitors can walk around and view the individual student projects.

June 2008 view website

Urban Body Portal

Urban Body is a research & design studio at Delft University of Technology. The studio runs on a different site each year and each edition has its own website. The Urban Body portal provides an interface to quickly browse through all editions, get background information and sign up for the latest workshops.

September 2007 view website