Eric Douglas Pratt

JavaScript Academy at Isobar

2012

I was six months into my tenure at Isobar (a digital marketing agency based in Boston) and it was an exciting era in the world of front-end web development. jQuery was at the height of its power and new best practices like responsive web design and progressive enhancement were emerging.

We had a passionate and close-knit team of front-end developers at the time. Some, like me, were CSS experts who had only a basic knowledge of JavaScript. There was much to learn. As a way of teaching myself these deeper concepts and bringing the team along with me for the journey, I decided to develop a series of exercises and hold collaborative training sessions where we'd all work on them together. I called it JavaScript Academy.

A poster advertising the second run of JS Academy sessions I held. The code in the background is the minified version of the Modernizr library.
Table of Contents

Guiding Principles

One of the things I hated most about job interviews in the tech world was when companies gave you academic or algorithmic problems to solve that bore no resemblance to the problems you would encounter in the course of your actual job. The first principle I set down when creating the exercises for JavaScript Academy was that they had to be as similar as possible to a real client project we'd be asked to work on.

The second principle was a practical one: the exercises had to be simple enough to complete in less than an hour. Attendees would bring their laptops into the conference room, I would give a short talk explaining the topic, and then everyone would dive in and work on the exercise, hopefully completing it by the time the hour was up. Anyone who finished early joined me in being able to go around answering any questions the others might have.

Building the Custom Academy Site

Try it live here! (requires quick creation of username and password)

My original intention was to use JSFiddle to distribute the exercise and allow attendees to code the solution. But when developing the first exercise, I realized making it as real-world as possible meant I needed a server-side component. I needed the ability for my students to code a real-life Ajax request — not a mock one — to save data to the server and get actual, fresh data back. So I set out to create my own version of JSFiddle with a few custom server-side APIs available to call.

This provided me the opportunity to correct something that had always annoyed me about JSFiddle: the result was displayed in an iframe about a quarter the size of the screen. This made it difficult to do responsive testing at any breakpoint, and also occasionally introduced quirks that you wouldn't have if it was a real website in a full browser window. So I added a third principle: users of the Academy site would be able to view their solutions running in a full browser window; no iframes.

The editing panes of an exercise on the JS Academy site: one each for JS, HTML, and CSS. Users could edit, save, and click "View" to see their changes in a new tab.

For ease of setup, I hosted the Academy site on the same PHP/MySQL web hosting that I used for my professional resume site. URL routing in PHP was done through a combination of an Apache .htaccess file and a custom URL router I had written in PHP for my own site. I set up a simple MySQL database to power the user accounts, exercise information, and custom data APIs for various exercises. I found a fairly solid in-browser text editing library called CodeMirror and used that to power the coding interface.

The front page of the Academy site, with login and account creation functionality.

The Exercises

Cocktails and JSON

Session Held: March 21, 2012

Level: Intermediate

Target Audience: Front-End Engineers

Your client is Pernod Ricard. The ask is to create a website that allows customers to browse and create cocktail recipes using the brands of liquor owned by Pernod Ricard. This exercise will utilize the JSON format for loading data from the server, sending data to the server, and passing data to jQuery templates. It is also recommended to namespace your code using JavaScript objects.

This exercise gave attendees the HTML and CSS for an interactive cocktail recipe website, and asked them to write the JavaScript to load recipes from the server and save new recipes to the server.

Cocktails, JSON, and Module Pattern

Session Held: April 4, 2012

Level: Intermediate

Target Audience: Front-End Engineers

Today's exercise synthesizes everything we've learned so far. We're going to take the same exercise from last week and implement the solution using Module pattern. If you missed a lesson, don't worry, go ahead and review what you missed. If you're up-to-speed, you get to play with Module pattern today, and then help others.

Third-Party Reference Material:

For this session, I gave a short talk on Module pattern, then asked attendees to reimplement the previous week's exercise using Module pattern.

Basic Canvas

Session Held: April 18, 2012

Level: Intermediate

Target Audience: Front-End Engineers

This exercise gives you a basic introduction to drawing and animation in the HTML5 Canvas element. You'll be building a clone of the famous game Breakout!

This exercise was complex enough that I broke it into two separate sessions. For the first session, I provided instructions to build half of the solution.

Basic Canvas II

Session Held: May 2, 2012

Level: Intermediate

Target Audience: Front-End Engineers

Continuing our creation of a Breakout clone, this exercise walks you through basic collision detection, keyboard and mouse events, and the finishing touches of the game!

For the second session, I provided the full set of instructions and attendees were able to create a fully-working Breakout game.

CSS3 Media Queries

Session Held: May 16, 2012

Level: Intermediate

Target Audience: Front-End Engineers

The number and variety of Internet-enabled devices is growing, but most websites still aren't flexible enough to accommodate all of them. Responsive design is an increasingly-popular and resource-efficient solution to this problem. In this exercise, we'll use CSS3 media queries to modify a basic layout based on the width of the screen.

Third-Party Reference Material:

For this session, I gave a quick talk on responsive design and then had attendees use CSS media queries to create a simple layout matching the provided diagram.

BostonGlobe.com Responsive Design

Session Held: May 30, 2012

Level: Intermediate

Target Audience: Front-End Engineers

This exercise builds on last week's exercise and has you create a more complex responsive layout similar to BostonGlobe.com.

This session asked attendees to build a complex, real-world responsive layout that mimicked the exact layout of BostonGlobe.com's homepage at the time, including a tricky repositioning of the "Ad #2" block between the tablet and desktop breakpoints.

CSS3 Transform and Transition

Session Held: April 24, 2013

Level: Intermediate

Target Audience: Front-End Engineers

In this exercise, you'll build an animated photo slideshow that mimics what it would look like if photos were slowly tossed, one by one, onto a table.

For this exercise, I provided an API that returned a list of photo URLs and a partially-coded website to display them. Attendees had to initialize the site in JavaScript and fill in the appropriate CSS to make the photos animate in, one by one, in a style that matched the provided example.

CSS Box Shadow

Session Held: May 8, 2013

Level: Fundamentals

Target Audience: Visual Designers, Front-End Engineers

There are many ways of creating shadows in Photoshop that can't be achieved using CSS. In those cases, when the shadow is important, we fall back to representing the shadow with images, which tend to slow down the page load time a bit. This exercise will give you a basic understanding of the types of shadows that can be created using CSS, so that when possible, we can create a pleasant visual experience that is also quick to load!

This exercise was meant to introduce visual designers to the capabilities and limitations of box shadows in CSS. Attendees were given a partially-complete website, pictured at the top, and needed to add a shadow to match the bottom screenshot, making the text legible.

CSS Responsive Grids

Session Held: May 8, 2013

Level: Intermediate

Target Audience: Front-End Engineers

This CSS exercise will take you through three different approaches that create the same responsive grid, and will illustrate why one is favored over the others as a best practice.

This session asked attendees to walk through three different approaches using CSS to create a responsive grid of image thumbnails and descriptions.

Feedback

I remember my boss telling me that JavaScript Academy was one of the most effective training programs he'd ever seen. This was immensely gratifying to hear, especially given how much work it took to put it on! I also heard from some of the junior front-end developers that my sessions were what gave them the confidence to take larger roles on their client projects, especially when it came to more complex JavaScript tasks.