Collaborative Prototyping Using Gist and Bl.ocks
Oftentimes, front end developers need to design, implement, deliver prototype quickly and collaboratively.
My previous workflow of delivering prototypes involves setting up a git repository, a remote static assets hosting service like divshot.io, coding, collaborate through git, deploying to the remote server, etc. When dealing with many prototypes, especially small components, the workflow seems to be time consuming.
But here is the great news.
Yes, you can optimize your prototyping workflow by using Github Gist and bl.ocks.
Just in case you have no idea what Gist is, Gist is a simple way to share snippets and pastes with others. All gists are Git repositories, so they are automatically versioned, forkable and usable from Git.
Bl.ocks is a simple viewer for your web pages hosted on Gist. Checkout this example written by Mike Bostock hosted by Bl.ocks. Original gist can be found here.
To serve your prototypes on Bl.ocks, you just have two step to perform
- Create a gist. Be sure to name your page index.html otherwise Bl.ocks will not recognize and present it.
- Open up http://bl.ocks.org/your-github-handle/your-gist-id, the prototype should be alive now.
It can be easier to figure out the URL of your block by using Bl.ocks browser add-ons. After installing the add-on, link to the corresponding block will be shown along with your gist.
It will be very helpful and productive to use Gist and Bl.ocks when you are prototyping small components like a header bar, a dropdown, animations, data visualizations etc.
