Code
Environments to run and share your code with. Designed with Sass, Backbone.js, & Handlebars.
When I joined the team, we were already building a platform for developers to run their code.
A New Homepage
Our homepage was focused on showing users what type of code they could run. After we built up regular returning user base, we wanted to incentivize users to continue to create new content. We wanted to build the smoothest path to creating content and showcase that content right on the homepage.
Creating Content
Rhe only path to creating a code example was with the “Create” button in the header. And users would see what languages were supported after starting the create flow.
We put the languages we supported in the hero. Users could tap on the one they were interested in and start writing code right away.
Keeping Users Engaged
Code examples were not easy to find. We wanted code creators to have their content recognized, and our consumers to feel the code they were looking at was always revolving.
We built a feed on the homepage to showcase new code and designed pages that were automatically generated for user selected tags.
Creator Recognition
To further encourage content creators, we added user profiles to give them visibility throughout CodeSnippets. Users were able to use their profile to track their current code snippets and drafts of their code before publishing.
Build & Runtime
One of the unique features of CodeSnippets is that users have access to their environment through a web terminal. Later, we gave users more control of their environments by exposing the configuration of their environments.
Mobile Refactoring
When we started, CodeSnippets was not a responsive webapp even though user base was at ~30% mobile users (it’s even higher today). While working on the product, I gradually rewrote our front-end to be more semantic, accessible, and responsive.
Thanks for reading. Runnable has since been acquired. We’ve open sourced our code and CodeSnippets has been shutdown. 🙁