JavaScript Garden
Icons designed for the site's sitebar menu
JavaScript Garden is the product of bored afternoons hanging out in the Stack Overflow JavaScript chatroom after the Year 4 End of Year exams and waiting for Junior College to start, at the end of 2010.
It was there that I met Ivo Wetzel, a talented and opinionated JavaScript developer who was answering JavaScript and Node.js questions on Stack Overflow. He often complained about the poor quality JavaScript questions and answers on Stack Overflow, and we would often reply “well why don’t you write your own tutorial?” So one day he did.
The Sidebar
I took on the task of designing the site. A lot of attention was paid to the sidebar, which was important as JavaScript Garden is designed as a single page website, navigating around the very long page needed to be easy and simple. We decided that a scrolling sidebar would be unwieldy and inelegant, and therefore the sidebar needs to collapse automatically on smaller screens.
The first iteration of the design consisted of collapsed menus that would expand on hover. However, this proved impossible to use if the user was moving the mouse downward along the menu, since as previous submenu collapsed the position of the next submenu shifted upwards, moving the user’s target away from the mouse. This was disorientating and uncomfortable to use, so we scraped this idea.
The next version of the sidebar expanded out automatically as the user scrolled downwards. The submenus nearest to the current submenu will expand first, until there is no space left for further submenus to open. This was the version we finally adopted for the page. You can see the menu in action by resizing your browser window on the page. The menu will respond automatically to these changes, as shown on the right.
Responsive Design
We needed the site to reach the largest possible audience. This meant using the then new CSS3 Media Queries to adapt the site’s design to smaller tablet and smartphone screen sizes. The desktop version of the site uses a fixed three column layout. For tablets with screen width below 1000px, the navigation sidebar is collapsed to the upper right corner of the screen, and for smartphones with screens less than 600px wide, the sidebar containing notes was collapsed, forming a single column layout.
The collapsed navigation bar allowed readers to quickly jump to the next or previous section. Combined with the ability to slide out to reveal chapter title and translations, this allows for quick navigation without taking up significant amount of screen space on smaller devices.
Coda
The site was featured and made front page of both Proggit and Hacker News, and was featured on JavaScript Weekly twice. Several readers also generously donated their time to translate the article to several languages, including Russian, Chinese and Korean. Through this project both Ivo and I enjoyed a brief moment of Internet fame. Ivo got a job at Zygna Germany, and I got several emails including an offer from a local startup which I turned down because school was starting again.