Tag: open source

Dashboard

A while ago, I wanted to build a data aggregation service that’d allow its users to fetch data from a set of data sources defined by them. I wanted to allow the users to configure the data fetch interval for each source. This led to the birth of the Dashboard project.

Dashboard is a data aggregating web application that provides a way to customize and display the aggregated data. It’s an open source project. The code is hosted on GitHub.

Features

Webhook support to receive data
Fetch data from various sources at different intervals
Plugin support to enable extensibility

Use Cases

Dashboard can be used to display any arbitrary updates from various sources. Some specific use cases of Dashboard can be –

Keeping track of health of endpoints
Display data received from Git hooks
Monitor blogs for updates

The possibilities are endless.

Stack

The application backend is written in Go. For this use case, Go fits perfectly well and I really like Go. The current implementation of frontend is in vanilla JS (I feel primitive just saying that 😜). However, I do plan on using Vue or Preact.

For details regarding the future of the project and more, please check out the README file of the project.

Focus

Before I started working on this project, I made sure I focused on 3 things:

Simplicity
Extensibility
Data parsing/display

Every time I took a decision around a particular feature implementation, I went through this list to ensure none of these aspects were sacrificed.

Simplicity: I wanted to make the app very simple to setup, configure, and use. I put in a lot of emphasis on the simplicity of the application. There is no database. The installation is pretty straight forward. Just download the binary file and run it. Thank you, Go!

Extensibility: I made sure to allow users to write their own plugins. These plugins are shareable. Users can display data from whichever source they want to via these plugins.

Data parsing/display: Once we fetch the data from a source, we need to have control over which parts of it we want to display in the UI. The user should be able to display only the data that matters. Right now, this is static. But, I’m working on a solution to allow users to map data.

Development

The project is under development and is still in Alpha stage. I plan on working on it in my free time. Any contribution to the project is welcome.

License

As always, I’ve open sourced the project under the standard MIT license. GitHub: https://github.com/mohnish/dashboard.

Hope you like my project. Feel free to contribute to the project. Cheers! 🍺

Tags aggregator, golang, open source

Programming Side Projects

Rearrange Tabs

OCD is weird. It makes a person do weird things. For instance, I find it annoying to have tabs not grouped by their purpose. When I’m working, I usually have the documentation opened in one tab (which usually is the left tab) and the tab to its right, absolutely, has to be the tab that’s running my local copy of the app that I’m currently working on.

I’m used to using the mouse to rearrange my tabs all the time. Sometimes, I have multiple windows open (if I’m at work, since I have a dual-monitor setup) at the same time. I’ve always wanted to have keyboard shortcuts that did all this. That’s the reason I wrote a new Google Chrome Extension called Rearrange Tabs.

Rearrange Tabs

Rearrange Tabs is a tiny Google Chrome Extension that you can install right now to use keyboard shortcuts to move your tabs around in your Google Chrome browser.

To move a tab to its left

Windows: Shift+Alt+Left
Mac: Ctrl+Shift+Left

To move a tab to its right

Windows: Shift+Alt+Right
Mac: Ctrl+Shift+Right

Edit: Previously the shortcut to move the tab on Mac was Alt+Shift+<Arrow>. I had to update this since it was overriding the word highlight shortcut and made it hard to edit text inside the browser. That is fixed now.

Edit 2: You can now customize your keyboard shortcuts to move the tabs.

To customize your keyboard shortcut by following these steps:

Open your extensions page (or visit chrome://extensions from your URL bar)
Scroll to the bottom
Click on Keyboard Shortcuts
Under the “Rearrange Tabs” section, you can configure whichever shortcut you want

Update: The extension got featured on Lifehacker & Changelog 🎉

Here’s how it looks like:

You can find it here.

Rearrange Tabs can

Move tabs around in a window using keyboard shortcuts
Duplicate current tab to a new window [this is WIP]
Separate active tab out from the current window into a new window using keyboard shortcuts [this is also WIP]

As always, I’ve open sourced Rearrange Tabs. ❤️

You can find it here https://github.com/mohnish/rearrange-tabs

Feel free to open an issue or a pull request 🙂

Tags chrome extension, google chrome, javascript, open source

Programming Side Projects

Money

A year ago, I was trying to organize my bank accounts and found that it was really hard for me to understand where I was spending most of my money. So I started doing some research in order to find a good tool/application which would do this for me.

Mint, of course, was my first tool of choice. Mint is a pretty good application, but not the right one for me. I’ve been a Mint user since a long time and never found it to be really helpful for me in organizing and understanding my expenditures. Every single time I logged in to Mint, it complained about Bank Account Authentication Failures™. I’ve tried re-connecting my bank accounts over a 100 times and it still never works. Moreover, I’m not really comfortable letting a 3rd party access my bank details anymore. Also, it’s not that great at auto-categorizing my bills/expenses anyway and it still lacks some of the features that I thought would be cool and helpful for me.

So I moved on to a few other solutions and tried them. Some needed me to sell one of my kidneys to buy the app, while others just lacked features. Almost every single time, I ended up having a 50% positive impression of the apps. None of them were feature rich or flexible enough for me to find them actually useful.

I was frustrated and gave up on the search. The only thing that was left for me to do was to write an app that would basically have all the features I wished to have.

Introducing Money

🎉 💵 Money is a simple web application that helps you keep track of your expenses/bills and gives you insights on where your money went. Currently, the app is under active development and lacks features. But the idea is to eventually have all the awesome features I’ve dreamt of, implemented in the application.

Stack

Money is built using Ruby on Rails and BackboneJS. It uses Bootstrap for the UI.

Implementation details

My initial goal was to have a native mobile app (and eventually that’s what I want to do). Since I don’t have the time to do that, I chose to go ahead and implement a web app with mobile-first approach. The current app itself is a JSON API, which is consumed by the Backbone frontend (that ships with the app) client using the OAuth2 client credentials flow. The API can be used to build native clients on various platforms.

The best part about Money app is that it’s open source ❤️ and licensed under the awesome MIT License. It is available at https://github.com/mohnish/money. Feel free to fork it or deploy your own instance or build your own features or extend it to whatever the way you want it to be or build your own client or file issues. I already have an instance deployed and running.

I will keep you guys posted about the updates. Current version of Money app is 1.7.1.

Thank you

Shoutout 🎉 to Sindhu Monica and Sandeep Appikonda for helping me test the app and improving the UX of the app.

Tags open source, ruby, ruby on rails

Programming Side Projects

Open Source

Up until a few years ago, I never really understood the value of Open Source Software (OSS). I used to think of it as something really lame because the quality that comes out of such software is usually “low”. Now why was I under such an impression? Linux. As a Windows user, I’ve always loved the OS for its ease of use and support for games. I found Linux to be a half-assed OS just because it didn’t support the games I played and it was relatively “difficult” to use. I couldn’t wrap my head around why Linux was such a big deal.

Web development

I started web development using WYSIWYG tools like Adobe Dreamweaver. I loved Dreamweaver. It was fantastic. It had every single feature that I wanted and more. I was happy.

Soon, I had to move from static HTML web sites to dynamic content serving websites using PHP. I thought PHP was awesome and powerful. I got serious with PHP development and started using software like Apache, MySQL etc. WAMP was pretty much my setup to start working on any new web app. I slowly switched to Eclipse for PHP (I was already an Eclipse for Java user). There were many tools that I needed which worked only on Linux. As a result, I had to “compromise” and switch to LAMP as my default development stack. At this point, everything I was using was OSS.

After a while, I moved on to Ruby. Moving to Ruby from Java/PHP was delightful. Ruby makes programming fun. My love for ruby got me thinking about how awesome open source is. The very concept of someone writing a beautiful programming language and giving it away for free was something that I couldn’t comprehend. Also, by this point of time, I started liking Linux. Linux felt powerful and easy to use especially for development.
It felt really good using Linux. If you’re a ruby developer and you’re into web development, you’re bound to use Sinatra or Rails at some point. It was when I started using Rails I understood the true value of OSS. I was making money by using tools that were written by others and given away for free.

<3 Open Source

Linux, Ruby and Rails convinced me as a developer that open source is really cool. There are many other pieces of OSS such as jQuery, NodeJS etc that contributed to it.

Licensing

The most important aspect of an open source project is the license under which it’s being distributed. A license grants/restricts usage rights to an open source project. A good open source license gives its users the flexibility to use/modify/distribute it. Hence, having a license in an open source project is very important.

For this very purpose I’ve created a ruby gem called “opensource”.

Opensource

opensource is a ruby gem that you can install and use to add a license to your open source project. You can install it by running the following command (assuming you have ruby 2.0+ installed)

gem install opensource

Once you have it installed, you can setup your credentials and start using the gem to create licenses.

The gem is open sourced under MIT license and you can find the source code at https://github.com/mohnish/opensource. You can find more information about the usage of the gem there. Please feel free to contribute back to the project. Contributions are always welcome <3.

I encourage each and everyone of you to contribute to open source software. It’s wonderful and satisfying.

Tags open source, ruby

Programming Side Projects

Hi5

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.

Tags javascript, open source