Adept is dedicated to keeping our internal dev team up to date with the latest tools and technologies—the goal being to expand our knowledge, and support our projects and clients by staying as far ahead of the curve as possible.

Devland  is  a perfect world where new projects kick off exactly as your teams roll off of launches, and a perfect balance of profitable billable hours, internal product work, and new technology exploration is struck within 45 hours per week. 

Oh, and where the Apple Watch isn’t kind of a disappointment.

In the real world, giving designers and developers valuable time to sandbox new ideas and evolving technology can be challenging. In busy agencies, it’s often the first scheduling casualty. Yet, these opportunities are critically important to keeping the team (and your clients) ahead of the technology curve.

How We Stay Ahead of the Technology Curve

To ensure our team gets this time on their schedules, Adept has friendly internal development competitions that challenge our designers and developers to come up with a creative technology solution for open ended problems. The competition is called The CodePen Challenge (though we don’t always use CodePen), and we host it once a month. 

The rules are simple. We generate a challenge by randomly selecting a core technology tool—like a specific API or mobile device feature—and a business or consumer trend like the Internet of Things or augmented reality. Then each team has two to three hours to create a working prototype for a development solution that addresses the challenge.

Let’s take a look at what Adept’s development team came up with during our last CodePen Challenge.

The Code Challenge: Create a Video-based Children's Game

For the latest CodePen Challenge, we split our dev team into two groups. Each had the same challenge: use video to create a children’s game.

Team 1: The GIF Memory Game

GIF_Matching_Game.pngTeam 1 updated the classic game of memory to become an engaging, GIF-tastic, synapse connector. Using only the best known GIFs on the interweb, users would flip cards two at a time to make a match. How did three designers and developers pull this together in two short hours?

Build Notes:

  • Used the Instagram API to source GIFs
  • Fairly straightforward implementation of HTML5 and CSS3
  • JavaScript and HTML5 video were used to manage the game logic

Key Takeaways:

  • Auto-playing multiple videos requires very thoughtful optimization, and building game mechanics to reduce simultaneous system demands.
  • Building a game as simple as memory requires a surprising amount of gameplay logic decisions from a UX standpoint, as well as a game performance standpoint.

Team 2: Audio/Video Matching Game


Team 2 took the matching concept a step further, asking users to view a series of six videos while simultaneously listening to a single audio track. To win, users must match the slightly off-time audio track to the correct video. It was actually a pretty challenging puzzle that would have felt right at home in the fad of impossible games for adults, spurred on by  Flappy Bird a couple of years ago.

Build Notes:

  • Leveraged Vimeo to source all of the videos
  • Used Backbone.js to build the app out

Key Takeaways

  • CodePen is highly flexible, though we did find that it may not be the optimal environment for building a JavaScript-based web app.
  • A better alternative for leveraging CodePen for similar builds will be to work on the JS separately, and pull updated code into CodePen for refinement. 

The Real Outcome of Code Challenges

It’s important to get dev teams collaborating outside of the context of regular project work. By prioritizing time to explore different technologies and ideas, Adept is able to keep current with various dev tools, while exploring innovative ideas for our clients that would likely not arise from the most common project requirements.