Skip to content

Instantly share code, notes, and snippets.

@RadValentin
Last active August 29, 2015 14:01
Show Gist options
  • Save RadValentin/50df895b6d01f03ff2a9 to your computer and use it in GitHub Desktop.
Save RadValentin/50df895b6d01f03ff2a9 to your computer and use it in GitHub Desktop.
Changelog Blog Entry
#github-changelog a robust notification system built on top of GitHub
##What is it?
Building a large web app that needs to be updated frequently can sometimes present interesting challenges. When pushing out an update do you force your users to reload the entire app so they're always running the latest version? Or do you keep the update silent and hope everything works out somehow?
Obviously the first version is better but not perfect. Ideally you'd want your users to know about the update but they should be able to reload at their own will without fear of losing state.
This is where [github-changelog](https://github.com/uberVU/github-changelog/) comes in. By using this simple jQuery plugin, every time an issue is closed on your GitHub repo, your users will get notified.
![changelog demo](https://dl.dropboxusercontent.com/u/42934143/images/demos/changelog-anim.gif)
##Why build it?
As with all of our projects we started with a real world use case. We wanted to communicate more of our work to our users and we wanted them to understand how our app is growing and changing with each new iteration. This in turn would encourage communication and would hopefully lead to us developing even better features in the future.
Seeing the potential for other apps to make use of our solution, we decided to create a plugin that would be easy to integrate across a large variety of usage scenarios.
##How did we build it?
// working around the GitHub API
// finding a way to deal with the rate limit
// wrestling with positioning :)
// coming up with a good structure for HTML/CSS/LESS
// putting it all together
###Understanding the problem
We've always placed great importance in understanding a problem before working on it. The best solution is the one that requires the least amount of work to achieve the expected result.
The first step taken was to understand the need that was going to be addressed: our users needed a better notification system.
We looked at the way that our current app was notifying users about updates and found that on each update the user would receive a message to reload the page. This was the functionality that we would improve.
###Coming up with a solution
Since our app was already using GitHub commit hooks to send these messages, we decided to build on that and use the GitHub API rather than making a completely separate notification system. This made sense because this way the process could be automated. Each new feature we ship is tied into a GitHub issue that gets closed. We could in turn show info from that issue to the user so that he can understand what's been changed and even empathize with the work that we're doing behind the scenes.
What followed were a series of discussions on how to tackle the issue. We talked with our engineers and UI guys, took notes and wrote documentation. Before writing any code we needed to know how the feature we were building would look and how it would work.
From these talks we came up with the basic HTML structure that would be used by plugin. We built wireframes, discussed usage scenarios and finally came up with a plan on how to style the HTML.
![changelog wireframe](https://dl.dropboxusercontent.com/u/42934143/images/changelog2.png)
The plugin needed only basic styling, as the user would probably want to write his own styles that match his app's design.
The things that we focused on here were:
* positioning - there should be a way to position the list in any corner of the screen and still have it be visible
* maintenance - we chose to use LESS to write the styling because it makes maintaining CSS much less of a hassle
The last and most important step was to
##The future
Our plugin, github-changelog, has been open-sourced from the start and we're open to anyone who wants to help us make it even better.
And of course, you can look forward to github-changelog becoming part of the uberVU app in the very near future :)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment