Motivational Games For UI Developers
During the winter slump I drafted up some coding games to play with the UI team to keep things interesting. As work slowed down and the evenings got darker, it was important to keep things exciting.
Here are a few ideas for games you can try that each offer a unique learning opportunity for your team.
Blind Coding
The idea of blind coding is that you're unable to see what you've created in the browser, and will be relying on visualising what you've coded.
Take a design of a UI component from Dribbble and get your team to each open up a Codepen, collapsing the visual panel. You have a set time limit to turn the visual into code. Our UI meeting tends to last an hour so 15-20 minutes is a reasonable amount of time for one of these challenges.
To increase the difficulty, you can restrict looking up code so everything has to be done off by heart.
Timed Coding
Similar to the blind coding game, grab a simple UI component from Dribbble and open up a Codepen.
The aim of this game is to create the component from the image. Unlike the bling coding challenge, you have access to the visual panel. The only limiting factor here is to give your team a time limit and see how far they can get.
Again, restricting things like searches on Google or Stack Overflow will increase the level of difficulty.
These two excercises also show how people on your team think and approach problems differently. Make sure you spend some time comparing solutions at the end of the game.
Buddy Coding
Open up a Codepen and grab an image of a UI component from Dribbble.
The aim of this game is to pair up (or triple up if you have a large or odd numbered team) and code something together. However only one developer can be coding at any one time (Not just because there's only one mouse and keyboard on a computer), but a developer can only code for 60 seconds before switching to the next developer. This continues for a set amount of time until one group completes the component or the time runs out.
This is a challenging game which encourages team members to work together, identify differences in thought process and generate solutions quickly.
Halloween Horror Stories
Everybody has done something they regret while coding. Accidentally deleting a database on a live site, coded a layout using tables, or forced into using !important on something simple.
Whatever it is, these experiences, while detrimental at the time, can be huge learning opportunities and a chance to introduce a better process or internal checklist.
Share your horror stories of coding with the group and learn from each others mistakes.
Developer Bingo
As more of a passive game, Developer Bingo is a fun way to encourage sharing pull requests within the team for code reviews. Each Github pull request has a number assigned at the end. By using a random number generator, generate 7 numbers (Between 1-500 is a good number, but adjust this based on your usual PR count). At the end of the week, if somebody has posted a PR with a number that matches one generated, give them a prize!
Get in touch if you play UI games with your teams or have ideas for team games that revolve around coding!
