The first thing I do every morning immediately after I wake up is, check my mobile for any emails/messages/updates etc. Today was no different. I was skimming through the updates and found an interesting blog post. I was impressed by the post and started scrolling the page to find the usual Like/G+/Save-to-my-swiss-bank-account buttons. That’s when I realized that there was no existing solution that was efficient and needed no authentication.
Dustin Curtis solved this problem by implementing the “kudos” feature in Svbtle. Unfortunately, Svbtle is not Open Source. So I decided to implement the feature myself and make it available as a reusable component that anybody could use by including the corresponding code. As a result, I created hi5!
hi5
“hi5” is a component that adds a hi5 button to your web page/blog. You should be able to see the circular button floating on the right side of this page. Yeah, that’s the hi5 button.
Note: The hi5 button is not mobile compatible yet. So I had to disable it on mobile till I fix it. I’ve opened an issue on GitHub about this specific requirement. Also, it’s not exactly a button. It’s a div element faked to appear like a button by means of CSS.
How it works
When the user hovers over the hi5 button and holds the mouse on the hi5 button for one full second, a callback is fired which increments the hi5 count exactly by 1 on the persistence layer. This update is now “pushed” to all the other open instances of the page. The count is updated on all the open instances in realtime.
Video showing the updates
In the above video, I have Chrome and Firefox browsers open and you can see how the count is incremented in realtime.
What was hi5 built with?
The hi5 component uses Firebase for persisting the hi5 counts and is built totally on client side JavaScript. It uses MD5.js and Cookie.js internally.
hi5 is available on GitHub at https://github.com/mohnish/hi5/. hi5 is licensed under MIT. Please feel free to use/contribute/report issues.
PS: The setup instructions in the README file need to be updated. Will do it as soon as I find time.
Comments