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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
@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.
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.
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.
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.