Keep moving

I sold my flat which I had purchased in 2006. I got a good returns on it. The plan is to invest that money, earn money in 1 to 2 years, and then buy a bigger flat. I’ve managed to clear all my debts! I really am a free man, but now I need to focus on growth.

In the meantime, I’ve moved into a 2 BHK with my fiancee. I’ve taken this flat on rent. The rent is quite costly, and I really have to work hard to make ends meet. But I’m confident. I already have a couple of projects in hand, and I’m going to start day trading in a couple of days.

The new house is good. So much space! After growing up in a cramped 1 BHK, having two bedrooms is like a luxury. The hall is big, kitchen is mid-sized. The main bedroom is spacious. I’ve set one bedroom as my home office. And for my guitar playing.

The house is still slightly dirty, need to get some professional help to service the Air conditioner and clean the kitchen properly. Both of us are happy and contended for now.

Negative look-behind assertions

Regular expressions are very powerful. Here are some typical use cases:

  • Email validation
  • Password validation
  • Searching for a pattern in a string
  • Searching and capturing matches in a string

In my current project, I needed to parse a CSV file and a particular field had a float value. This value could appear as any of the following:

  • 0.678
  • 0.003782
  • 2e-08
  • 1.456e-06

So it could either be a literal float or it could be in scientific notation. I’m going to use Elixir as the implementation language. We first need to parse the string into a float. Use String.to_float/1 for this.

Fire up iex.

iex(3)> String.to_float("0.678")
0.678
iex(4)> String.to_float("123.678")
123.678
iex(5)> String.to_float("2e-08")       
** (ArgumentError) argument error
    :erlang.binary_to_float("2e-08")
iex(5)> 

Alright. so 2e-08 is not a valid scientific notation according to Elixir. What about this?

iex(6)> String.to_float("2.0e-08")
2.0e-8
iex(7)> 

Thats better! So Elixir expects the initial number to be a float with decimals. So lets use a regex to fix this.

iex(8)> String.replace "2e-08", ~r/(\d+)e/, "\\1.0e"
"2.0e-08"

So we replace a digit followed by e with the same digit with decimals and e appended. And now lets pipe this onwards.

iex(9)> String.replace("2e-08", ~r/(\d+)e/, "\\1.0e") |> String.to_float
2.0e-8
iex(10)> 

Cool.

iex(11)> String.replace("1.456e-06", ~r/(\d+)e/, "\\1.0e") |> String.to_float
** (ArgumentError) argument error
    :erlang.binary_to_float("1.456.0e-06")
iex(11)> 

Hmm… So you see that the digit gets replaced correctly. But we don’t want to do this for numbers which already are in decimal notation.

iex(14)> String.replace("1.456e-06", ~r/^\d+[^\.](\d+)e/, "\\1.0e")
"1.456e-06"
iex(15)> String.replace("2e-08", ~r/^\d+[^\.](\d+)e/, "\\1.0e")    
"2e-08"
iex(16)> 

We use a negative character class, and don’t replace the string if it contains a dot. However this screws up our earlier string. On a side note make sure you always have regression tests to catch these kind of bugs.

So I banged my head for a while as regular expressions are a tough beast to tame. And then I thought about using lookarounds. And specifically for this case a negative look-behind assertion.

So I need to look behind and make sure that there is no dot.

iex(16)> String.replace("2e-08", ~r/(?<!.)(\d+)e/, "\\1.0e")   
"2.0e-08"
iex(17)> String.replace("2.56e-08", ~r/(?<!.)(\d+)e/, "\\1.0e")
"2.56e-08"
iex(18)> String.replace("2e-08", ~r/(?<!.)(\d+)e/, "\\1.0e")   
"2.0e-08"
iex(19)> String.replace("0.0894", ~r/(?<!.)(\d+)e/, "\\1.0e")
"0.0894"
iex(20)> String.replace("1.456e-06", ~r/(?<!.)(\d+)e/, "\\1.0e")
"1.456e-06"
iex(21)> 

Works great!

I am like a dog barking

I am like a dog barking, and you are the one who is interpreting the spaces between the sounds and giving meaning to it.

— UG Krishnamurti

A few days ago there was a poll in Mumbai Mirror about how we should treat stray dogs. As you are aware, in Mumbai there are plenty of stray dogs everywhere. Some people love dogs and regularly give them food. Others are scared or disgusted and then blame it on the folks who give them food.

In the poll, a lady answered that we should treat stray dogs well, quoting Gandhi – You can judge a society by the way it treats stray dogs.

Unfortunately that quote is out of context and perhaps she didn’t bother to read the entire crux of what Gandhi actually meant. A civilized society would have no stray dogs. Stray dogs belong in an animal shelter. Healthy ones are treated, fed, trained and put up for adoption or they live their life in the shelter. Dogs who are diseased, old should be put out of their misery.

Feeding stray dogs is not the answer. The Government has to step up and ensure that our streets are free of stray dogs.

What is even more appalling is our attitude towards the humans who live on the streets. We turn a blind eye to them, but give food to dogs? I’m not talking of beggars, or people who choose to live on the streets. But think of the mentally ill people wandering the streets. Where is your empathy now?

Gut Flora

I remember having a conversation with one of my older relatives. We were discussing whether its better to rinse your mouth before having tea or after.

Naturally it was health related. My relative’s opinion, based on his discussions with his colleagues and friends, not to mention the fact that he is older; was that we should have a cup of tea or water before rinsing your mouth.

My opinion – it does not fucking matter.

Yes, during sleep our mouth probably gathers millions of bacteria. Wake up,
have a cup of water or tea and swallow that delicious bacteria which after all
is known to inhabit our gut system like crazy. Millions of millions of bacteria thrive inside our gut and are not particularly harmful. They also help the digestive process.

However, our stomach contains enzymes which usually kill these bacteria. Most of them inhabit the colon, the large intestine and then the small intestine. So if you swallow those bacteria from your mouth into your stomach, they are bound to be killed. So sad!

I say – rinse your month gently, spit and release them back into the soil!

Benchmarking your JavaScript code

What is benchmarking? It refers to the process of testing the performance of an implementation with respect to an already established one. For example, in the airspace industry we can assume that an F-16 is the benchmark for the fastest plane. Any new design should then compare (benchmark) itself against the performance of an F-16.

In this way, when we have more than one design, we can choose the best implementation based on its benchmark with the F-16.

However, sometimes its easier just to compare the performance between implementations. This is true especially in software development. If we have two or more implementations of a solution we can run a benchmark and choose the implementation which is the fastest or alternatively the one which consumes the least resources. Whatever suits the requirements. Note here that we don’t have a benchmark, instead we are comparing the results between implementations.

In this article, I’ll show you a super easy way to benchmark your JavaScript code. I have some code which needs to match a string against a list of domain names. Of course, my first thought was to use a RegExp. It works. And then I thought lets iterate over the list, and use String.indexOf(). Which one is faster? Benchmark them!

Requirements:
* Node.js
* Prior experience to npm and ES6

Lets see some code.

Here’s the initial code using a Regexp

let referrer = 'http://bing.com'
let engines = [ 'google', 'bing', 'yahoo', ]

let regex = new RegExp('(' 
              + engines.map(e => { 
                  return e.replace(/\./g, '\\.')
                })
                .join('|') 
              + ')', 'i')
if (referrer.search(regex)) {
  // got a match
}

We basically construct a RegExp object by iterating over engines, then use map to replace a literal period (.) with (\.), and then join the modified list using ‘|’

And then referrer.search(regex) tests whether the domain exists in engines.

Pretty simple and effective. However, its known than String.indexOf() is much faster than using regular expressions. You know the saying –

You see a problem and decide to use a regular expression. Now you have two
problems.

Here’s the code using indexOf():

for (let i = 0; i < engines.length; i++) {
  if (referrer.indexOf(engines[i]) > 0) {
    // got match
    break
  }
}

Benchmarking these two against each other gives us a known observation about which implementation is faster. Note I’m only focusing on execution speed here, and not on other requirements. Good science is experimentation and observation.

We will be using npm to manage our deps, so here’s my package.json

{
  "name": "bench",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "exec": "node o.js",
    "build": "./node_modules/.bin/babel b.js --presets babel-preset-es2015 --out-file o.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "benchmark": "^2.1.3"
  },
  "devDependencies": {
    "babel-cli": "^6.24.0",
    "babel-core": "^6.24.0",
    "babel-preset-es2015": "^6.24.0"
  }
}

In a working directory of your choice, place this package.json file. Then –

$ npm install

Contents of b.js

import Benchmark from 'benchmark'

let referrer = 'http://bing.com'
let engines = [ 'google', 'bing', 'yahoo', ]
let suite = new Benchmark.Suite

suite.add('RegExp', function() {
  let regex = new RegExp('(' 
                    + engines.map(e => { 
                        return e.replace(/\./g, '\\.') 
                      }).join('|') 
                    + ')', 'i')
  if (referrer.search(regex)) {
    // got a match
  }
})
.add('Array', function() {
  for (let i = 0; i < engines.length; i++) {
    if (referrer.indexOf(engines[i]) > 0) {
      // got match
      break
    }
  }
})
.on('cycle', function(e) {
  console.log(String(e.target));
})
.on('complete', function(e) {
  console.log('Fastest is ' + this.filter('fastest').map('name'))
})
.run({"async": true})

Now build your code. Which is basically using Babel to transpile your ES6 code into ES5.

$ npm run build

This will create o.js. Run the benchmark with –

$ npm run exec

This is the output I get

RegExp x 170,024 ops/sec ±2.18% (73 runs sampled)
Array x 2,878,075 ops/sec ±2.48% (73 runs sampled)
Fastest is Array

Awesome!

Using the Benchmark module is extremely easy. The add method adds a new benchmark. It takes two arguments. The first is the name of the benchmark, the second is a function to execute.

When a particular benchmark is done, the cycle event is called. You can output the results here. When all the benchmarks are done, the complete event is called.

I hope you learned something! Thanks for reading.

Redux+React app starter kit

On my journey to master Redux+React I went on to create a very simple Redux app.

Get the code here – https://github.com/arcofdescent/react-starter

Some details

This repo can be used both as a starter kit for developing Redux+React apps as well as a helpful guide to those wishing to see some simple code (I hope) in action.

Here’s a screen shot of the app

app

We use a very simple store containing two counters. The first counter
increments/decrements by 1. The second counter increments/decrements by 2. We also have a Messenger component which sends messages to the first counter.

In all there are three components all as children of the main App component.

App is a container which is aware of Redux. The three child components below it are not. They act as dumb components which simply update their views based on change in state.

I also hope you understand and appreciate the organization of the source tree.

tree

actions, components, containers, reducers go into their own directories. All styles use SASS.

Global style is defined in styles/app.scss

Component specific style is in the related component’s directory.

I’m using webpack to bundle all this stuff.

If you want to run this app:
* Download this repo (or clone it)
* cd into it
* npm install (assuming you already have node installed)
* npm run test (a very simple test)
* npm run start
* In your browser – http://localhost:8080

Organizing A large JavaScript application

As my project lickcreator keeps getting larger, the need to decide upon and implement a good directory structure becomes pretty important.

I previously had all my .js files in a common directory called src. Well that’s dirty, but its fine if you just have a few files (think less than 7).

I’m using Backbone.js so I would keep my files as

  • src
    • sheet_model.js
    • sheet_view.js
    • measure_model.js
    • measure_view.js
    • … (and so on)

As I expanded my app to roughly five main classes I realized I needed some organization strategy. The first thought for a developer would be to put all models in a model directory, all views in a view directory, and all collections in a collection directory.

What would this look like?

  • src
    • model
      • sheet.js
      • measure.js
      • beat.js
      • note.js
      • audio.js
    • view
      • sheet.js
      • measure.js
      • beat.js
      • note.js
      • audio.js
    • collection
      • sheet.js
      • measure.js
      • beat.js
      • note.js
      • audio.js

Looks much better. Of course, its not all about that! But you need to think ahead too. Now what If I add a new class to my app? This would mean creating a new file in each of the three directories – model, view and collection.

And I don’t want to start off with an empty file. (I should be using boilerplate code), so I would usually copy a model class to my new class. Same with the view and collection. You see how tedious this can get?

Here’s a better idea. What is more important to your app? The model directory or a class of your app. For example, Sheet.

Let me digress. lickcreator is a web based music notation app. You can create, edit, and play sheet music right in your browser. Using the wonderful Web Audio API. Now a sheet music usually consists of a Sheet, Measures and Notes. Along the way, you’re going to have Audio playback, interactivity, payments, users, social network integration, etc. So it really made sense to me to view my app as first a collection of top level subsystems. And then under each subsystem, we keep their MVC logic.

So back to the topic, I decided to invest my time in JavaScript ES6 and webpack and the investment is now paying off beautifully.

Here’s my directory layout now

  • src
    • audio
      • model.js
    • beat
      • model.js
      • view.js
      • collection.js
    • toolbar
      • model.js
      • view.js
    • menu
      • model.js
      • view.js
    • measure
      • model.js
      • view.js
      • collection.js
    • sheet
      • model.js
      • view.js
      • collection.js
    • note
      • model.js
      • view.js
      • collection.js
    • index.js

index.js is my entry point. I find this structure much easier on the mind. When I need to import a module, its easy for me to do

import Sheet from "./sheet/model";

and inside sheet/model.js if I need access to another model, I can do

import MeasureCollection from '../measure/collection';

Also creating a new class is easy. I just copy an existing directory into a new directory. 🙂

If you have any questions or just need to talk, you can contact me via Twitter. Thanks for reading!

React with webpack

Today, I’d like to show you how I used the awesome React UI library and the module bundler webpack to build an Android app using Cordova.

You can download my app for free!

Check it out, especially if you’re a guitar player.

Lets touch up on webpack briefly. The immediate beauty is the ability for your app to get an entry point. Have you been one of those unlucky folks who had to deal with a plethora of script tags to include your JavaScript code in your index.html? No more!

Here’s a simple webpack config

module.exports = {
  entry: {
    app: __dirname + '/src/index.js',
  },

  output: {
    path: __dirname + '/www/builds',
    filename: 'bundle.js',
  },
};

So index.js will be the first module to be executed. Of course, you should be using babel to get the advantage which JavaScript (ES6) offers. The ability to import modules.

Here’s my index.js

import React from 'react';
import ReactDOM from 'react-dom';
import ChordList from './components/ChordList';
import { Router, Route, hashHistory } from 'react-router';

$(document).on('deviceready', function() {

  ReactDOM.render(
    <Router history={hashHistory}>
      <Route path="/" component={ChordList} />
      <Route path="/chord/:chordName/:chordType" component={ChordDiagram} />
      <Route path="/chord_type/:chordName" component={ChordType} />
      <Route path="/help" component={Help} />
      <Route path="/use_cl" component={UseCL} />
    </Router>,
    document.getElementById('root')
  );

});

react-router is essential so the user can use the back button on their mobile status bar to navigate your app. Further on you can use Link tags to navigate to a certain page. Note that although this is a mobile app, we are using Cordova so it is essentially a web app. Personally I am learning react-native right now for any further mobile app development.

Let have a look at a very simple implementation of the ChordList component.

import _ from 'lodash';
import React from 'react';
import { Link } from 'react-router';

class ChordList extends React.Component {

constructor(props) {
  super(props);
}

get_chords() {
  return [ 'C', 'D__flat__', 'D', 'E__flat__', 'E', 'F',
    'G__flat__', 'G', 'A__flat__', 'A', 'B__flat__', 'B',
  ];
}

render() {

    let style = {
      paddingBottom: 35,
    };

    let lis = [];
    let i = 0;

    let a_style = {
      display: 'block', 
      padding: 15, 
      fontSize: '1.2em', 
    };

    this.get_chords().map(c => {

      let c_display = c;

      let row_color = (i % 2) == 0 ? '#dedba7' : '#cdca96';
      lis.push(<li key={i} className="list-group-item" 
                   style={{border: '1px solid #fff'}}>
               <a style={a_style} 
                dangerouslySetInnerHTML={{__html: c_display}}
                href={"#/chord_type/" + c} />
                </li>);
      i++;
    });

    return(
      <div>
        {lis}
      </div>
    );
  }
}

export default ChordList;

I hope you are familiar with ES6 as most of whats happenning like class, let, import, export, map, constructor is all ES6.

The React specifics which you should be aware of is the render() method where we make use of JSX. We loop over the items returned from the get_chords() method and create an li item.

React offers you a very thin UI framework and then gets out of your way. Make sure you create components which are lightweight and deal with a specific UI element/widget and you should be good to go. My app deals with a lot of SVG under the hood, so it is pretty complex. But using React, webpack and Node, brings a lot of sanity to the development workflow.

I also open sourced a Node module during the development of this app which you can check here – guitar-utils

If you need any help or have any questions you can look me up on twitter. Thanks for reading!

Meditation – Lotus position

I started practicing meditation in mid May 2016. Think about it. Practicing meditation. You can’t just do meditation. You have to practice it.

Anyway, it sure was difficult at the start. I sat with my legs crossed normally, my arms outstretched resting on my knees. Forefinger touching thumb. The usual stuff you will find in most meditation books or courses.

I think I fell into it quite easily. One thing which helped was focusing on my breathing. I have been doing focused breathing for almost 2 years now for relaxation. I thought I was doing meditation.

But I was wrong. The key concept to meditation is to not move. Once you assume a sitting position, don’t move. Take a few quick deep breaths, keep your back straight, and then start with slow breathing focusing on the air touching the tip of your nostrils. And, don’t move.

So it’s been almost 2 months now. I can’t say I’ve been regular, but I can now meditate for 15 minutes twice daily.

And yesterday I had a breakthrough. I did the Lotus position. Not sitting with legs crossed normally. So do this – first put your left leg (or ankle) on top of your crossed right leg. Let it rest comfortably in the gap the crossed right leg creates. Now the painful part. Pull up your right leg and push it towards your abdomen, and make it rest on top of your crossed left leg. It will hurt. If it hurts where you can’t do it, don’t do it. Rest for some time, try again.

Do this everyday. if you can’t get the Lotus, sit normally and meditate. But try the Lotus position everyday before you meditate. Eventually you will be able to get it. Remember, its all about practice. Your leg muscles will stretch and accommodate the new tension.

So last night, I sat in the Lotus position for 15 minutes. After that when I released my legs, it really hurt. But that has to happen.

The book I’ve been reading for practicing meditation is Mindfulness in Plain English by Henepola Gunaratana. Its an excellent resource. Very practical. Get it now! Its free.

Remember, pain is inevitable, suffering is optional. 🙂