react, redux, Javascript

My Experience with React and Redux

How it started

We, at BlogVault, decided to completely redo our web application UI, which is currently powered by Backbone.js with Underscore templates. Exploring options, we tried using MarionetteJs on top of Backbone.js for our specialized migration dashboard that powers migration for our partner web-hosts like wpengine, savvii, cloudways etc. While MarionetteJs provided a decent improvement over our Backbone.js code with its common-practice architectural solutions, the code still looked hacky at times.

In Backbone.js responsive views listen to models and collections and re-render once underlying data is updated. However Backbone.js being so minimal (which is often credited as a plus point), it leaves most design completely on developers. This is where the problem starts, if you are not a disciplined coder there are enough ways to screw up. For example – manipulating DOM directly upon success callback. I have seen enough people posting such code on various forums. This may not be a big issue at beginning, but as the application keeps growing and you keep adding new features, you realize your views are not in perfect sync with your models and collections anymore. A quick fix would be manually manipulating DOM to update UI, which as insane as it sounds, is not at all a rare practice, such code snippets are posted all over the internet in abundance. This was just one example, there are many other. This leads to spaghetti data-flow, abrupt DOM manipulations, and at times massive memory leaks. This was one of the big reason we wanted to move away from Backbone.js.

Next we considered AngularJs, however dropped it almost immediately after we learned that Angular 2.0 (which at that time was not released and currently is in beta) won’t be backward compatible.

Finally we decided to try Facebook’s newly released view library React and application architecture Flux. Rewriting everything in React and Flux had its own risks. React was brand new, meaning considerably smaller community, lesser plugins and most terrifying – fewer StackOverflow posts! Also most of the code is in ECMA6, and to add further,  Flux is a non-MVC (or MV*?) architecture. However experimenting with few examples we decided to give it a try.


What is React and Redux?

The official site for React defines it as “a javascript library for building user interfaces”. And Redux is officially defined as “a predictable state container for JavaScript apps”. Lets look at them in detail.

Redux can easily be distinguished with most of the object-oriented MV* architectures, as:

  • the complete state of your application is maintained inside a single object called store.
  • at any given time the App’s state (store) is immutable, and
  • data flows strictly in one direction.

That’s a lot to digest if you are new to this. However the more we dive into the real world problems, more it makes sense.


How they work?

Data in a Flux architecture flows in single direction:

Action > Dispatcher > Store > View


Action suggests something just happened. Dispatcher is called and it sends the action to the store. Store modifies itself (without mutating existing structure) in response to action. Finally, as per the state of store, view gets updated.

Redux is an extremely light implementation of Flux architecture. It implements the above Flux data-flow in following sequence:

Action > Dispatch > Reducer > Store


In Redux implementation, an action is a plain object describing what happened. A function store.dispatch(action) is called to pass action to store. By this time, Redux knows something happened and depending on action, it has the result for what happened (suppose as action triggered a server request and got response). Now, in reducer we specify how the store’s state should change in response to that action. Once the reducer modifies the state, React picks up the new store and re-renders view automatically.


Now coming back to React. As it should be clear by now, React is the view part of our implementation. If I have to explain it in the vaguest possible way, I can say its comprises of two parts:

  • a template written in jsx.
  • a mechanism to maintain its own internal state in memory.

At the end React processes these two parts and churns out good-old-plain HTML that your browser understands.

Given the capability of maintaining states, it makes React extremely powerful and a delight to write UI on. Think of this – you need to display a message based on some event. Generally you will do DOM manipulation in event handler. However in React all you need to do is set a state in event handler and as per your template, React will automatically re-render that particular part. That’s powerful, and clean!

In fact I recently read somewhere someone comparing DOM manipulation with goto statements. Its as bad! There is no definitive source of truth and hence tracking down the source of manipulation is walking into hell-hole.



React and Redux together are fairly powerful and provides robust and efficient solution for building a single page application. In Redux, since the data-flow is restricted to one direction, scope for screwing up is significantly reduced. React has beautiful in-built data-binding which responds to state changes flawlessly. And lastly React provided various components lifecycle callbacks which helps write elegant easy-to-maintain code.

It was difficult learning curve attributed to – relatively fewer resources, smaller (yet massively growing) community, ECMA6 based javascript (which was completely new to me), new concepts like virtual DOM etc. However once I got the basics clear, everything seem to fall in line. :)

linux, Mariadb, mysql, Ubuntu

How I screwed MySQL install with MariaDB and recovered

Broken packages are mess! I recently installed MariaDB to give it a try. After testing, I decided to uninstall it for now and maybe come back later. I was careless while removing MariaDB and ended up messing MySQL configs (MariaDB runs on top of MySQL). Things were only to get worse from here. A high priority task pops up that requires me to access MySQL. Unable to access it, I decide to completely remove MySQL and do a fresh install – basically a hard reset. If only things were that simple in real world. By this time my MariaDB was half removed, MySQL configs were a mess and I was now about to remove MySQL completely. Here’s what happened:

Alright, maybe I did not uninstall MariaDB correctly. Lets try removing that once more:

Same error! Ok, I clearly screwed MySQL. I should try installing it back. Lets see how that goes:

Unmet dependencies? Ok! I know what to do in such cases:

Nothing! That’s scary. There’s no way forward (installing) and there’s no way backward (uninstalling). I am basically stuck!

Maybe autoclean is a good idea? Sadly no difference.

I noticed both MySQL and MariaDB remove commands were exiting because of ‘mysql-server-5.6’, so fixing it was my best bet. I also noticed the error raised while removing mysql-server was from file `/var/lib/dpkg/info/mysql-server-5.6.postrm` as evident in following line:

/var/lib/dpkg/info/mysql-server-5.6.postrm: line 53: /usr/share/mysql-common/configure-symlinks: No such file or directory


So what if I comment the line that’s raising this error? Risky, but desperate times – desperate measures. After creating a backup of the file, I edited it to remove the line that raised the error and retried. Here’s what happened :

Finally! Editing the file worked and I was able to remove both packages. Next I fresh installed mysql-server and it worked perfectly. What a relief! :)


Recover your iPod playlist within seconds

I had to leave for Goa the other day and I was packing my bare essentials when I came across my age old forgotten iPod. Finding it out of blue was a bliss and I decided to take it along. I put it on charge and it was ready to rock.

2015-08-30I never realized what wonder old playlists can do. Listening to those old tracks I felt as if I was transported back to those good old carefree college days. After returning from Goa I decided to export those tracks to my computer, however there was an issue. We all know for some reason Apple renames music files and rearrange them in random folders. This makes it impossible to figure out which file corresponds which track.

Here take a look:

ipod files list

These are all random filenames. However to my relief these files were not encrypted and their ID3 tags were still intact. That meant all I needed to do was rename these files and I was good to go.

However given the size of my playlist (6.5 GB) there was no option to do this manually. So I wrote a little script that could help me out.


My script goes through these files, collecting their ID3 tags, maintaining a hash and finally copying these files over user provided destination to respective folders based on album name and the file itself is renamed on track title. Running the script restored back my playlist within 105 seconds. Here’s the benchmark:

0.160000 7.470000 7.630000 (105.228952)

And this is how my playlist looks now on my file system:

Selection_007 Selection_008

Here is the source code:

Feel free to star, fork, follow or contribute on GitHub. :)

plugin, wordpress

Announcing Release of “The Video Popup” plugin at WordPress Repository

My plugin “The Video Popup” got approved and is now available for download in wordpress repository. Its a light-weight plugin that generates a YouTube video popup when a page is scrolled to the bottom. You can check it out here:

The next version of the plugin is expected to have:

  • support for vimeo
  • custom point of trigger
  • overlay video popup

Feel free to suggest more features in comments below or rate the plugin in the repository. ;)

Project Euler, ruby

Project Euler in Ruby

I recently started solving project Euler. I am using Ruby to solve these problems. My aim is to get results in optimum time. I try refraining myself from using brute force however I have used them couple of places where the sample data was limited and it did not make any considerable difference in performance.


In the process I also tried implementing a few mathematical algorithms like – Fermat’s Factorization and Quadratic Sieve wherever necessary. Its a great experience solving these problems. Given the nature of these problems it demands you to be intelligent in your approach. Many times its quite tempting to use brute force and I did that too (ended up restarting my crashed laptop).

And boy! its fascinatingly addictive. I’ve been digging wiki for countless algorithms, analyzing their pros and cons and selecting them accordingly for my solution – and not to mention coding them.

As Project Euler discourages posting answers online, I won’t be posting answers however I will be sharing my solutions. In the end of each solution I have posted Ruby Benchmark score calculated on my system.

Here’s the link to my GitHub repository:

Its a work in progress, so feel free to fork it, star it and collaborate to make it better.

Cheers! :)


The Video Pop-up Plugin: WordPress

This plugin is still not released. You can access the source code here:

Its been long since I originally wrote this plugin, however I think now it would be nice to get it out in the wordpress repository and let it live its life!

This post serves as the formal introduction to the plugin. Let’s start from the basics.

What do you mean by video pop-ups?
A Pop-up launches when you visit certain websites. Their main aim is to try to catch the visitors attention and to bring something to their notice. As the plugin name suggests, it will help you pop-up videos on your site.

Currently the plugin supports only youtube videos. I hope to extent support for vimeo soon by the next version upgrade.

When is the pop-up triggered?
The pop-up is triggered when the user scrolls to the bottom of the page (footer). This makes sure user has least distractions on the site, only when he reaches to the end, he gets the pop-up. This makes its less annoying for visitors. However future version may provide customization over trigger.

How to setup the plugin?
Once you install the plugin to your site, you need to activate it. After the plugin is activated, you can find ‘Video Popup’  settings in your dashboard left pane.


Click on the ‘Video Popup’ setting button to get the settings page. As below:


By default the height is 325px and width is 420px. You can however define your own custom dimensions.

Once you save changes, the popup gets activated.


Users have the option of minimizing/maximizing the video.


Getting Started With Google Web Starter Kit

Yesterday (Friday 20 Jun 2014) Google released its web starter kit. Here’s the formal overview of the project (GitHub):

“Web Starter Kit is a starting point for multi-screen web development. It encompasses opinionated recommendations on boilerplate and tooling for building an experience that works great across multiple devices. We help you stay productive and aligned with the best practices outlined in Google’s Web Fundamentals.”

The first thing that comes to one’s mind is – ‘Is this a bootstrap or foundation alternative?‘.

As per the developers the web starter kit is a very basic boilerplate to get started on web development and it is not developed to compete with bootstrap, foundation or any other such framework.

I tried to develop a basic webpage using the web starter kit. The first thing you realize is its very light weight. Its built on node, ruby, sass and gulp. It was my first experience with gulp and have to say I was impressed. The way it organizes the website assets and helps in testing with various browsers is amazing. It even takes care of minifying your css and js files.

Getting started

Getting Web Starter Kit

Get the framework directly by cloning it from github.

git clone

The working directory will be: web-starter-kit/app

Installing Dependencies

As mentioned above, web starter kit is built on node, ruby, sass and gulp, which means you need to have these on your system before kicking-off with the starter kit.

You can check the same with following commands:

node -v
ruby -v
sass -node -v
gulp -v

If these commands respond back correctly, you are good to go, else install them as follows:


sudo apt-get install python-software-properties python g++ make
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs

Ruby (using rvm)

sudo apt-get install curl
\curl -L | bash -s stable
source ~/.rvm/scripts/rvm
rvm requirements
rvm install ruby
rvm use ruby --default
rvm rubygems current


sudo gem install sass


sudo npm install --global gulp

This will install Gulp globally. Next, install the local dependencies Web Starter Kit requires:

cd web-starter-kit
sudo npm install

Finally to build the project, go to web-starter-kit/app and run:


That’s it! We are good to go now.

Starting the server:

Start the server by typing:

gulp serve

This will load you application on the browser. With gulp serve running, start editing your application in a different tab and observe the changes instantly in the browser.

Here is the demo webpage I made using the web-starter kit. Clone it to get basic idea of how it works. Fork to contribute building a better demo app. :)