Friday, January 29

Notes : Ryan Seddon: So how does the browser actually render a website | JSConf EU 2015

So how does the browser actually render a website?
Browser - A complex software.

Components that make up a browser
1) Bindings - Based on OS, the API etc. Talking to Network etc.

2) Rendering - Parsing, layout, painting etc.
Constructing a webpage.

3) Platform -  Depends on OS.

4) Javascript VM

1) Parsing HTML
a) HTML is forgiving by nature, if you forget to close a tag, it will not throw an error.
b) Parsing isn't straightforward - In most languages if you make an error, it will not work
c) It can be halted.
d) It will do speculative parsing

Valid HTML5
<div class="wat">My first Website</div>
<div>Visitor Count : 0</div>

In above code, even though it is not complete HTML, browser will parse it correctly.

Parsing flow

P.S : The last step is the DOM creation.


Parse Tree
Representation of your HTML

Dom Tree
Create a DOM tree where there is interaction of Javascript.

 HTML parsing can be halted by
<script></script>, <link></link> and <style></style>

The above tags will halt the parser as a script can alter the document

1) Network latency

2) Link and style could halt the JS execution

Speculative Parsing

The browser pauses for script etc. So it will create another thread or process and look ahead for images and other scripts, css etc.


Means the parsing process can be interrupted.

Performance Insights 1

1) Always put your </script> at the bottom
a) Parse is uninterrupted
b) Faster to render
c) Defer and async attributes . These are alternative to not putting script tag at bottom.
Defer will stop DOM content loading.
d) Trade off

CSS Parsing
It is pretty standard. We have a CSSOM i.e CSS Object Model.

2. Render/Frame tree
a) Combines the two object models, style rsolutions
b) This is the actual representation of what will show on screen
c) Not a 1 to 1 mapping of your HTML

So parsing of HTML and CSS can happen in parallel, Javascript can affect the parsing by interrupting.

Render tree has multiple trees as below
a) RenderObjects - Actual Node itself i.e the DOM node
b) RenderStyles
c) RenderLayers - The browser needs to know about the object if it is positioned absolute and if there is a z-index applied to it
d) Line boxes - Wrapping text, font size etc.

Things that are not in render tree
a) Non-visual elements head, script, title etc.
b) Nodes hidden by display: none;

Render Object has reference to DOM node
a) Visual output
b) Geometric info
c) Can layout and paint
d) Holds style an computed metrics

Calculating Visual Properties
a) Combine all styles
b) Defaults, external, style elements and inline
c) Complexity around matching rules for each element - CSS computation
d) Style computation - How much width, height etc to apply

3. Layout
Also called as reflow, re layout. It is a recursive process.
Traverse render tree
Nodes position and size
layout its children

Will batch layouts, incremental layouts
The browser will intelligently batch changes
Render tree items will flag themselves as dirty
The batch will traverse the tree and find all dirty trees
This happens asynchronously

Immediate layout
Doing a font size change will re-layout the entire document
same with browser re-size
Accessing certain properties via java script eg. node.setHeight

Performance Insight 2
Take note from the browser and batch
a) Act like the browser and batch your DOM changes
b) Do all your reads in one pass
c) Followed by writes

Takes all information from render tree and paints.
a) Will take the layed out render trees
b) It will create layers
c) Incremental process - Paint background color, background image, shadows etc.
d) Builds up over 12 phases.

a) Produces a bitmap from each layer. Bitmap is uploaded to the GPU as a texture, these texture will be composites into a final image

Performance Insight 3
Inline critical CSS
a) The most important bits of your site/app
b) Speeds up first paint times
c) External js and css can block
d) Delta last bitmap

Notes : Performance Beyond the Page Load by Ryan Seddon

Performance beyond the page load
Slow sites loose people

UI Performance

Browser Rendering Pipeline - 4 stages
1) Style Recalculation
Eg, Browser resize, Hover on button etc. The browser needs to figure out.

2) Layout/Reflow
This does not happen always. Figure out the position, layout etc on certain activity.

Reflow is the process by which the geometry of the layout engines formatting objects are computed - Chris waterson

3) Paint/ Rasterize paint 
Figure out where everything lies on the page. The browser then draws the graphic. Paint is about setting up the instructions. Paint does not always happen.

4) Composite
Takes all the instructions and gives to GPU to render the graphics.

60FPS/16.6MS matches with a average display i.e 60Hz

Use the transform and oapacity (CSS properties) so that browser does not have to do much and the animations load real fast. Refer

When using transform and opacity, the graphics card comes into picture, i.e the GPU

Thursday, January 28

Notes : Introduction to React.js

React - A javascript library for building user interfaces.

Heart of React
Declarative Component - Describes what your component looks like at any given point of time.
Components are actually re-usable API's that encapsulate a bunch of stuff.
1) The markup
2) The behavior
3) Javascript and CSS

React does not use explicit data binding.

1) How are things initially rendered on a browser?
Just one render function
render : function() { --- }

There is a two pass rendering
a) Generate the Markup which is String
b) Attach Events later once the string is generated.

2) Update of the views
Reconcilation - React automatically updates your DOM when the data changes. Keeps the UI fresh and up to date.
How does it work? The render function returns a representation of component at that point in time. So initially call render and get a representation, then when data changes, call the render function and get another representation. Now compare these two representation and find out differences. Compute the difference and based on the output, batch up DOM mutations and update the View.

Another way of writing your DOM code

For beginners, this is quite a useful tutorial. Go through the first 40 minutes and get the idea on how the react works. Definitely worth checking out.

Tuesday, January 26

Study Notes - Computer Network - Network Topology

A network may be represented as a graph with nodes representing computer or network devices like switches, routers etc and the links representing communication links.
Modes of communication may be broadcast or point to point (both may be shared or dedicated links)

LAN (Local Area Network) Topologies
1) Star
2) Ring
3) Bus

Shared broadcast links
  • point to point communication
  • Each pair of communicating nodes use the link for a short time
  • Other nodes ignore the communication
  • There has to be a distributed protocol to decide who gets to use the link.
Bus Topology
  • Single cable connects to all the computers
  • Each computer has a connector to a shared cable
  • Computers must synchronize and allow to transmit only one at a time

Advantages of Bus topology
  • Inexpensive to install
  • Easy to add stations
  • Use less cable than other topologies
  • Works well for small networks
Disadvantages of Bus topology
  • No longer recommended
  • Backbone breaks, whole network down
  • Limited number of devices can be attached
  • Difficult to isolate on problems
  • Sharing the same cable slows the response rate

Direct point to point communication (not shared)

  • Computers connected by communication channels that each connect exactly two computers
  • Forms mesh or point to point network
  • Allows flexibility in communication hardware, packet formats, etc
  • Provides security and privacy because communication channel is not shared

Star Topology

  • All computers connected to a hub
Extended Start Topology
  • A star network which has been expanded to include an additional hub or hubs.

Ring Topology
  • No beginning or end
  • All devices have equal access to media
  • Single ring - Data travels in one direction
  • Double ring - Allows fault tolerance
  • Each devices has to wait its turn to transmit
  • Most common type is Token ring (IEEE 802.5)
  • A token contains the data, reaches the destination, data extracted, acknowledgement of receipt sent back to transmitting device, removed, empty token passed on for another device to use.
Advantages of Ring Topology
  • Data packets travel at great speed, reason being it is a synchronous operation
  • No Collisions
  • Easier to find faults
  • Terminators not required
Disadvantages of Ring Topology
  • Requires more cable then bus
  • A break in the ring will bring it down
  • Not as common as the bus - less devices available
  • Ring is the most common topology in a wide area network
Token Ring
  • Many LAN technologies that use ring topology use token passing for synchronized access to the ring.
  • Ring itself is treated as a single, shared communication medium
  • Bits pass from transmitter, past other computers and are copied by destination
  • Hardware must be designed to to pass token even if attached computer is powered down.
Using the Token
  • When a computer wants to transmit, it waits for the Token.
  • After transmission, computer transmits token on ring
  • Next computer ready to transmit receives the token and then transmit

Mesh Topology
  • Not common in LAN
  • Most common used in WAN's to interconnect LAN's
  • Each node is connected to every other node
  • Allows communication to continue in the event of a break in any one connection. It is Fault Tolerant.
Advantages of Mesh topology
  • Improves fault tolerance
  • Can carry more data
Disadvantages of Mesh topology
  • Expensive
  • Difficult to install
  • Difficult to manage
  • Difficult to troubleshoot

Physical v/s Logical Topology
  • The actual layout of a network and its media is its physical topology
  • The way in which the data access the medium and transmits the packets is the Logical topology.

Factors included while deciding a topology

  • Cost
  • Scalability
  • Bandwidth capacity
  • Ease of installation
  • Ease of fault finding and maintenance


  • Capacity of a media to carry information
  • Total capacity may be divided into channels
  • A channel is a portion of the total bandwidth used for a specific purpose
Analog Signals V/S Digital Signals

  • Less error prone
  • Distortion of the signal between source and destination can be eliminated
  • In Digital communications, it is often possible to reconstruct the original signal even after it has been affected by noise
  • Old technology
  • Little control over distortion
  • when noise affects an analog signal, it is hard to deduce the original signal
Nyquist's Limit
  • Suppose we know the bandwidth (H) of a channel and the number of signal levels (V) being used. What is the maximum number of bits that we can transmit?
  • Nyquist's limit Max_bps = 2*H*log(base 2)(V) bits/sec
  • Example, If the bandwidth is 3100Hz and we are using 16 level modulation then the maximum bits per second that can be transferred is
    max_bps = 2*3100*log(base 2)(16) = 24800 bps
  • So higher the bandwidth, more bits can be communicated.

Benefits of Digital Transmission
  • Reliability
    - Can regenerate slightly damaged signals
    - There are only two states. Change to the closest. Eg. If the two states are voltages +10V (1) and -10V (0) and the signal is +8V, the signal is concluded to be 1
  • Error detection and correction
  • Encryption
    - Makes it possible to carry sensitive information over the network.
  • Compression
    - Compress before transmission and decompress at the destination end. So the overall load is lighter. 
Digital signalling current state encoding
  • Data is encoding by the presence or absence of a signal
  • A positive voltage may be either represented as 1 or a 0
  • The current state indicates the value of the data
Transmission System
  • Analog Transmission
    - Not used with digital signal
    - Transmits analog signals without regard whether it represents digital or analog data
    - Uses amplifiers - also boosts noise
    - ok for voice
    - Can distort digital data
  • Digital Transmission
    - Concerned with the content of the signal
    - Uses repeaters which recover the pattern of 0's and 1's and re-transmits
    - Can be used with analog signals if it carries digital data. It recovers the digital data from the analog signal and generates new clean analog signal
    - It is becoming standard.

Data Encoding techniques
Analog Encoding of Digital Information
  • Amplitude shift keying
    - Two binary numbers (0,1) represented by two different amplitude of the carrier wave
    - Rather inefficient
    - Uses up to 1200 bps on voice grade lines
    - Used to transmit digital data over optical fiber
  • Frequency shift keying
    - Two binary numbers (0, 1) represented by two different frequencies of the carrier wave
    - Less susceptible to error than ASK
    - Used up to 1200 bps on voice grade lines
    - Commonly used for high frequency radio (4 to 30Mhz)
  • Phase shift keying
    - Two binary numbers represented by phase shift of the carrier wave.
    - More efficient and noise resistant than FSK
    - Used up to 9600 bps on voice grade lines

Baud rate - Maximum number of times Signal Changes per second
Bit rate - Bits per second

Digital Encoding of Analog Information
  • Commonly used in digitizing voice
  • Technique is called Pulse Code Modulation (PCM)
    - Sampling theory states if a signal is sampled at a rate twice the highest frequency then the samples contain all the information of the original signal.
    - Voice data in the telephone system is limited to a maximum of 45Khz
    - 8000 samples / sec should be sufficient
    - Each of these samples is assigned a binary code (8 bits)
    - Typically 8 bits are used which gives 256 levels

Monday, January 25

Study Notes for - Computer Networks

Given a Class what is the total number of IP address present
Class A -> 2^31 -> IP address start with 0
Class B -> 2^30 -> IP address start with 10
Class C -> 2^29 -> IP address start with 110
Class D -> 2^28 -> IP address start with 1110
Class E -> 2^28 -> IP address start with 1111

IP address is of 32 bits.
Divide it into four parts of 8 bits i.e octats. Take each octat and convert it into decimal number representation and put a dot. It is called as dotted number decimal system. To find which class an IP address belongs to, take the first octate and convert it into a binary format.

Class A:
Number of IP adderess in Class A is 2^31
Take 32 bits and divide it into two parts
8 bits for Network ID
24 bits for Host ID

Out of the 8 bits of Network ID, first bit is 0 so 7 bits remain. So there are total 2^7 i.e 128 networks of Class A present
In a Network, how many IP addresses are present? It is 2^24 which is 16 million, therefore, 16 million IP address present in one network of IP address.

Range of Class A network is 1 - 126 Network ID

Class B:
Number of IP address present in Class B is 2^30
Class B always starts with 10

32 bits is Divided into 16 bits of Network ID and 16 bits of Host ID
In Network ID, first two bits is 10, so total 2^14 bits remain which is nearly 16k bits

Total number of IP address 2^16 per Network ID

First Octate will be 10_ _ _ _ _ _
10 0 0 0 0 0 0 -> 128
10 0 0 0 0 0 1 -> 129
10 1 1 1 1 1 1 -> 191

Range of Class B is 128 - 191
Please note, we have considered only the first octate.

Banks like SBI, IRCTC use this Class B IP addresses.

Class C:
Total IP address present in Class C is 2^29

32 bits, are divided into 24 bits of Network ID and 8 bits of Host ID
First 3 bits are 110 so total Network Bits remaining are 21 bits

First Octate
110 _ _ _ _ _
110 0 0 0 0 0 -> 192
110 0 0 0 0 1 -> 193
110 1 1 1 1 1 -> 223

Range is 192 - 223

Class D and Class E:
Did not divide into Network Id or Host Id, Entire IP address is left as is. So total IP address is 2^28
Range of Class D is 224 - 239
Class D is used for Multicasting

Range of Class E is 240 - 255
Usage of Class E is unknown

Number of Host that can be configured are 2 less than the number of Network ID available.

Types of Casting
1) Unicast - Sending a packet from one host to another host

Consider a netwrok with ID - It is CLASS A
We have a host in this network - >

From this host we want to send a packet to other host
Consider the Network ID to be
Consider the Host to be

We have a packet with Data (D) and Source Address (SA) and Destination Address (DA). Refer below image of Unicast example.

2) Broadcasting - Two types of Broadcast
a) Limited Broadcasting
b) Directed Broadcasting

Limited Broadcasting
Consider a network and a host. If we want to send message from this host to multiple other host in the same network. If we had to use Unicasting in this scenario, then note that in Class A there are nearly 2^24 i,e 16 million host available and using unicasting would mean that the host would have to send nearly 16 million packets. This may hurt the hardware and software. In such scenario, we use limited broadcasting.

In limited broadcasting, the packet will have message, followed by the Network ID as the source address and since it wants to send to all the host in that Network, so the destination address will be 32 bits of all 1's. If we encode it to dotted decimal number it will be So now this packet will be received by all the hosts in the network

So the limited broadcast address is

Directed Broadcasting
Consider a Network with some host which wants to be able to send message to another network to all the host, the network ID being So the packet will have one part with the message, the source address will be the network ID i.e and the Destination address will be 20 (which is network ID of destination) followed by all 1's i.e so it will be

So the Directed Broadcast address is (NID).255.255.255

Dividing a big network into smaller networks. A big network will have maintenance cost along with security cost. So the idea is to divide a big network into smaller networks. So maintenance of a small network is easier.

Disadvantage of Subnet:
Consider in a big network, if you had to reach a host, the identification can be achieved in 3 steps. Identify the Network, Identify the host and then the process in that host. However if you have a subnet, the identification becomes complex. Reach the network first, then the subnet, then the host and finally the host. So this requires 4 steps. This is a disadvantage, but the advantages of Subnet are more prominent.

Subnet Mast
32 bit number,
1's represent - Network ID and Subnet ID
0's represent - Host ID

Router uses a subnet mast to find out which IP address it will forward the packet to.

Routing table will contain, network ID, Subnet mast, and what is the interface.

Saturday, January 23

Random thoughts...

I am a frequent visitor to Quora, personal blogs, technical blogs of individuals etc. Quora being my favorite place of reading, I like the thoughts that people share there. I have never contributed to any questions, but I love reading. Following various topics, my favorite are about higher education, IIM, IIT etc because I, for one am looking forward to get my M.Tech or MBA this year. I want to pursue my higher education dream. So coming back to quora, I read this question about getting a 99+ percentile score in CAT but still not being accepted in any of the IIM colleges. Well, to think of it, that hurts bad. Being a average person, I am quite sure if I had to answer CAT, I would have required at least 2 years worth of preparation, which means complete dedication, lots of motivation, no distractions etc. etc. I have no analogy, however you get what I feel. But the person who answered this question was very motivated despite not being accepted in one of the college.

So what is it that keeps such individuals so motivated?
You can get a lot of answers to this question online, some may say it is the dedication, the passion or the hunger for success. By all means, it is true. However, what I feel is that the answer to this motivation lies within us. If I want to, I will, I have to. The attitude that we bring to the table. I am quite over to that comfort zone I have been living for so many years. I don't want to be travelling in that happy path anymore. It sucks. It is boring, stupid and ridiculously outdated. Not to the world, I want to be able to prove to myself that I can too.

At work, I find it best not to spend time on tea breaks and random talks. I have my black coffee and soon will start with the green tea. I don't need a group accompanying me for my breaks. I feel and strongly believe that if I am not contributing anything to the conversation and If I am not learning anything from it, then I don't belong.

I had plans of buying a Kindle, I fell in love with it the day I saw it. My British library membership is not serving me well, I mean, I don't have access to a lot of books, they just have books from British writers. Also it is pretty far from where I live, so if I have to go and get books, I spend at least 4 hrs of my time. It happens on a weekend, so that is, I feel not a good utilization of time. I rather sleep and relax than travel. So I will not be renewing my membership with them. The kindle I plan to buy is usually cost 5999 INR, however there is an offer for 5000 INR. I can buy it today, but considering the unusual costs that occurred this month, I will have to postpone my investment. I do have a book with me, The Da-Vinci code and it will keep me busy for at least a month, so kindle can wait. If they can give a discount today, they will for sure give away an offer sometime in future, may be even for a lot less. Apart from that, I need to prepare for my M.Tech entrance exam which is probably in the month of May and I to be frank, I have loads of material to prepare. I am far far behind. Wish me luck.

Friday, January 22

Notes : Creating a Scalable Javascript Application Architecture

One of my team leader suggested this video by Nicolas zakas about creating a scalable javascript application architecture.
Below are notes, I could jot down while viewing the video.

Small piece build independently and then combined to form one object. Each module can be developed/worked on independently without interference from other module.

An independently developed piece of functionality that form part of a big web page application. Each module has its own HTML, CSS and Javascript. A single module should live on its own. This makes sure, the module works on its own, and it should not disturb the functionality of other modules. This architecture is based on loosely coupled methodology.

Each module has its own sandbox, which limits what a module can do. Usually in a team, there should be a convention of writing code, so that all write correct code.

Module should have limited knowledge about other modules, they should only know about the sandbox that they are connected to.

Each modules job is to create meaningful User Experience. Eg, stock module to show stock information, weather module to show weather.

Modules should have rules.
1) It should only call its method and methods from the sandbox that it is connected to.
2) Don't access DOM elements outside of your sandbox.
3) Don't access non native global objects. eg, window, array.
4) Ask permission from sandbox to access certain thing, don't take it.
5) Don't create global objects.
6) Don't directly access other modules, keep your modules loosely coupled.

It ensures a consistent interface. Sandbox acts like a security guard.

Sandbox job
Consistency, make sure API don't change.
Security - Module should not be able to access methods which they are not allowed to.
Communication, eg need to interact with DOM in a particular way.

Application Core
Very important, but just manages the module. In other terminology, can be called as Application controller.
It is responsible for life cycle of module, i.e when the module to start and when to stop.

Application core job
1) Manages module lifecycle
2) Enable Inter-Module communication (Mediator pattern)
3) General error handling.
4) Must be extensible. Think about the future, your web application will keep changing, so plan for extension. Eg. of extensions.
a) Error handling
b) Ajax functionality
c) New module capabilities
d) General utilities - can be for example JSON, XML parsing.

Base library job
1) Browser normalization - It should know which browser is being used.
2) General purpose utilities
3) Extensible

To summarize
Base library should know about the browser being used. No other part of the application should focus on the browser type. Browser normalization is one of the key parameters of the Base library.
The Application Core, should be the one to know which Base library is being used.
The sandbox will act as a mediator and will only know about the existence of the application core.
And finally the modules, they should only know about the existence of the sandbox.

The advantage of this is multiple different application can be created from one framework. Each module can be developed individually and tested on its own. This is loosely coupling. The major advantage is, if you pull out a module from the web application, the web application can still be functional.

Thursday, January 21

21/01/2016 - Leg Day log

Today being the leg day, I was excited to go to the gym. I have always been lazy and demotivated during leg day sessions because for the obvious reasons, leg days are usually tiring. However the excitement went down the flush when I realized I was not feeling very well. I won't go in detail but in just a sentence, I did not want to workout today.

So I went pretty early to gym, because I did not want to break my rhythm, I have been skipping a lot. I started with simple stretching exercises followed by my 30 reps of pushups. Then I did 2 sets of squats without use of any bar of dumbbell. Next 1 set of squat with a bar. Then I started with 10 pounds squat followed by 20 and then 25 pounds for 10 reps each. We don't have squat racks in gym. So our squat session we required help of a spotter. In my gym, we have smith machine, so people usually use that for squating. To end the squat session, we did 1 set on the smith machine with 30 pounds.

I was feeling nauseated and my head was bursting. I had no clue. I took rest. We then went for leg extension and did 3 sets of 10 reps starting with 60 pounds and going up to 80 pounds.

This exercise was followed by calves extension workout with 3 sets and 10 reps starting with 50 pounds and subsequently increasing 10 pounds on each set.

I was too tired today to continue so thought why not do some cardio and abs. But the thought of doing some more workout made me feel sick. I stepped out of gym, and spend around 20 minutes still in the locker room.

So the gym session today was not that great, but now to think of it, I feel motivated and happy that I did not skip it. Tomorrow is the PUSH day, I might be trying some new exercises as compared to my push session the day before. 

Wednesday, January 20

20/01/2016 - Pull Day Log

Warm up exercises, followed by 1 set of 30 reps of push ups. I then did 1 rep Pull up without support.  It is really difficult at present for me to do pull ups. So I did pull ups on a pull up machine

Back Excercises
1) Pull up machine
3 Sets of 5 reps. Used weight of 70 pounds and for last rep reduced to 60 pounds.

2) Row machine
3 sets of 8 reps. Started with 60 pounds and reached up to 80 pounds.

3) Seated cable row
4 sets of 10 reps. Started with 80 pounds and increased 20 pounds for each set. For the first 2 sets, I was not seating on the floor, I was standing with my knees bent as if in a seated position. We do not have bench at the gym, so we need to sit on the floor and perform this exercise.

4) Straight arm Dumbbell pull over
3 sets of 10 reps. Started with 25 pounds dumbbell and for the last two sets performed with 30 pounds dumbbell. 

Biceps Exercises
1) EZ-Bar biceps curls
4 Sets  of 10 reps each. I started with just the bar, the progressively increased weight from 5 pounds and reached till 15 pounds. I love to perform this exercise however I am not confident if I can lift heavy.

2) Preacher Curl
3 Sets of 10 reps. Started with 30 pounds and performed the last two sets with 40 pounds. Even though preacher curl is highly recommended, I am yet to feel comfortable performing this exercise. The main reason being that comfort of the arms when doing this exercise. I find it difficult to lift and perform with complete range of motion. Sometimes it feels as if the machine is not proper and other times it feels that I still need to figure out the adjustment on the seat.


3) Alternate Biceps Curl
2 sets of 10 reps with a 15 pound dumbbell. By the time I reached this exercise I was already tired so settled with just 2 sets. Now to think of it, I feel embarrassed and ashamed, I could definitely do better.

Ab crunches
I ended my workout with 2 sets of 20 reps of ab crunches on a ab machine. Not sure if it would, but I feel that doing at least 1 set of abs at the end of the workout would be beneficial, but it gives mental peace.

I have leg day tomorrow and I plan to do squats and dead lift tomorrow. So stay tuned.

Tuesday, January 19

19/01/2015 - Push Workout Log

I was pretty early today, got up at 5.00 sharp. Watched christian guzman's push workout video so that I could start my day with Push. I had planned to write down complete PPL workout plan for myself, but...

Anyways, I plan to maintain a daily workout log so that I can track my progress and sub consciously I know if I bail out on a day, i would have nothing but guilt to mention here.

What is PPL?
PPL or Push, Pull and Leg workout is a program in which you perform push on day 1, pull on day 2 and leg on day 3 and continue the same cycle of PPL for the next 3 days followed by a rest day.

Push workout is usually a workout plan which involves push motions, similarly Pull workouts involve Pull motions. We then have Leg day (self explanatory)

It's past 9.30PM and I am nowhere close to a plan. I will log down today's workout session and may be watch another youtube video about a pull workout for tomorrow.

Today's Push workout
Started with warm up exercises, did 30 push ups to start with.

Chest workout
1) Incline Dumbbell bench press
3 sets of 10 reps each. Started with 25 pounds dumb bells and went up to 35 pounds.

2) Bench Press
3 sets of 8-10 reps. Started with 25 pounds and reached to 35 pounds. Had to take support for 35 pounds.

3) Cable crossover flys
4 sets of 10 - 12 reps. Started with 20 pounds slabs on each side and reached up to 50 pounds.

Shoulders workout
1) Dumbbell Military press
3 sets of 10-15 reps. Started with 25 pounds dumb bell and then ended with 30 pounds continuous for remaining two sets. I tried the last set for 35 pounds but it just fell back on me. Gravity is a bi***.

2) Dumbbell Front raises
3 sets of 10 reps. Started with 10 pound dumb bells and did last two sets with 15 pounds. I find it very difficult to do raises with heavier weight.

Triceps workout
1) Smith machine close grip triceps workout
3 sets of 10 reps each. Started with 25 pounds and reached till 35 pounds.

2) Cable V-Bar triceps pushdown.
4 sets of 10 reps, started with 50 pounds and reached 80 pounds.

Monday, January 18

IPL Fatancy League - Specification document

April will be when IPL begins, and making an IPL Fantacy league program is one of the crazy idea I have. There are so many fantacy league softwares out there, but I want to make one nevertheless. The IPL fantacy league software has all the software technicalities that I find interesting. I could use a framework like Ruby On Rails, front end framework react.js, no sql database, bootstrap etc. Below are the software specs the first draft per se.

IPL Fantacy League Software Spec 1.0

Cricket enthusiast will want to form their own team of players and earn points based on their performance in the game.

Evan the cricket game lover wants to be able to form his own IPL team  and earn points based on each player's performance in the game.

1) Evan will have to login to the system with his user credentials
2) He will be able to give a name to his team.
3) Evan, on each day of the match will be awarded 500 coins to start with.
4) He can bet 500 coins before the start of the match on a toss with specific guess.
5) Evan will be provided specific window for selecting his team players for that game. The team that he forms should consists of proper cricket team with 1 wicket keeper, 5 or so bowlers and a captain. Also IPL rules will apply, for example, the team will have only 4 players from outside India.
6) Evan can modify his team "n" number of times as long as it is being done before the time frame provided.
7) Based on the coins earned by the players in IPL match, Evan's coins and rank will be calculated. For example, each boundary hit by a player in Evan's team will get 10 coins, so on and so forth.
8) At the end of each game, Evan's rank will be computed.

Adam the IPL Fantacy league administrator should be able to input IPL scores easily, gather statistics of users accurately and ensure everything in the game is working fine.

1) Adam can login to system with super admin powers.
2) Adam can view complete details about each player/user, his ranking, his team selection, the coins earned etc.
3) Adam can block a user from playing IPL fantacy league.
4) Most importantly, Adam should be able to enter correct data/records after each match so that proper scores are calculated for each user playing.
5) Adam can also enter fun facts, statistics, commentary about IPL for users to read and learn.

Sunday, January 17

Ruby 101 - Part 2

After my successful blog post on Ruby 101 - Part 1 with millions of page views and thousands of comments ( yaah brah..just 1 view that too mine.. ;) ), i bring to you the part 2.

Basically we will just talk about Methods and Classes in Ruby.

1) Methods that return values

def sqare(num)
   return num*num

number = 2
numbersq = square(number)

def power(base, exp)
   product = 1
   while exp > 0
      product *= base
      exp -=1
return product


2) Methods that do not return value
def prompt(message)

prompt("Hello world")

3) Methods that take variable number of arguments
a) Variable no. of arguments

def sum(*args)
   total = 0
   for i in args
      total +=i
  return total

b) Default arguments

def growth(principal, years, rate=1.01)
   while years > 0
     principal *= rate
     years -=1
  return principal


class Name
  def initialize(first, middle, last)
     @first = first
     @middle = middle
     @last = last

aName ="jane", "Elizabeth", "Brown")
print aName.inspect

class Name
  def initialize(first, middle, last)
     @first = first
     @middle = middle
     @last = last

def first = (first_name)
   @first = first_name

attr_reader :first, :middle, :last
attr_writer :first, :middle, :last

def to_s
   print(@last + ", " + @first + " " + @middle)

aName ="Jane", "Elizabeth","Brown")
aName.first = "Joan"
aName.middle = "Barbara"
aName.last = "Smith"

Class Variables - Variable whose value can be accessed throughout the class
eg. @@count

class Person
   def initialize(name, age, gender)
      @name = name
      @age = age
      @gender = gender

   def to_s
      print("Name : ", @name, "\n")
      print("Age : ", @age, "\n")
      print("Gender : ", @gender, "\n")

  def birthday
     @age +=1

Inheritance - Access instance variable and methods from superclass

Take code from one file and put in another program, use require.

Saturday, January 16

Ruby 101 - Part 1

Some time back I made some Ruby notes while learning and so posting them here. I almost lost the pages, and before I loose to again for real, better to blog it, right? Below is the part 1 of the notes. Some basic concepts explained.

1) Install Ruby
>> ruby -v

2) For interactive ruby
>> irb

3) Create a new file in command prompt
>> notepad first.rb

4) Write your first program
puts ("Hello world")

5) Difference between print and puts
puts creates a new line after the string, print does not provide a new line

6) Get data from user using gets i.e input using gets
>> name = gets

gets gives a new line character i.e "\n". To remove "\n" we can use ruby function .chomp. gets receives all data as string. To use the numbers as Integers, we need to convert the string to integers i.e Integer(name) + Integer(name2)

7) Data types available in Ruby
a) string -> Can be created using single or double quotes
>> name = 'jane'
>> name = "Jane"

b) Numbers -> Can work with whole numbers, floats, binary, hexadecimal, negative numbers.

c) Array -> Store value in a structure. Range must have a sequence. Arrays can be just a collection of data.
>> [1,2,3,4,5]
>> names = ["John", "David"]
>>grades = [92, 84, 45, 87]

Access element of array. Use array name with offset/index i.e


Convert a range to array
>> digits = 0..9
>> nums = digits.to_a

d) Hashes -> Store collection of data. It is called associative structure where data is stored as key value pair.
>> number = {'David' => '52', 'John'=>'53'}
>> number['David']
=> '52'

>> number['Not exist']
=> nil

8) Local and Global variables
a) Local variable
number = 100

b) Global variable
$salary (provide a dollar sign)

c) Constants -> Variables hold same value throughout the program, constants are in uppercase.

Example program in ruby to find maximum number.
nums = []
i = 0
while i < 10
  num[i] = Random.rand(101)
  i+ =1
print (nums)
max = nums[0]
for i in 1..9
  if nums[i] > max
     max = nums[i]
puts("Maximum value is : " + max.to_s )

9) Arithmetic operators
a) Addition
b) Subtraction
c) Multiplication
d) Division
e) Modulo (Returns the remainder of division) i.e 4%2 returns 0
f) Exponential operator 2%%4 returns 16

10) Relational operators
a) Operators for comparisons
1<2 p="">1<=2

b) General comparison operator

c) Case statement

d) Logical operator
i) and &&
ii) or ||
iii) not !

eg. a=b=c=0
This is called chain assignment

eg. swapping without use of temp variable
a,b = b,a

11) If statement in Ruby

grade = gets
grade = Integer(grade)
if grade >= 70
12) Case statement
# case expression
# when exp1
#       statements
# when exp2
#       statements
# else
#       statements
# end

grade = gets
grade = Integer(grade)
case grade
   when 90..100
      letterGrade = "A"
   when 80..89
      letterGrade = "B"
      letterGrade = "C"

13) While loop
# while comparision
#    statement
# end

count =1
while count <=5
   puts ("Hello world")

14) Until Loop
# until comparision
#   statement
# end

count = 1
until count > 5
  puts ("Hello world")
15) Iterator based loop
Traverse a range
5.times do
  puts ("Hello world")
1.upto (10) do |x|
   puts ("x")
0.step (100,2) { |x| print x, " "}
1.step(10,2) { |x| sum+=x }
print sum 

16) Each iterator
num = [1,2,3,4,6]
for num in nums
   print num, "\n"

Altering loop control
eg, next, redo, break

Friday, January 15


Couple of ideas floating around in my sub conscious mind I'd like to post here.

1) Daily status manager.
In IT industry, everyone follows agile methodology, so we all know what a scrum meeting is. However some teams may not have a legit scrum call, it is a casual status meeting just so that the entire team is in a room and get familiar with what they are working. The team members discuss their status starting, what I did yesterday, what I will do today and any impediments? If any issues, team members discuss and try to reach to a solution. This is a good practice, first, all team members are together and second, everyone can share their views. However such informal meetings have nothing documented. Sometimes the scrum master may broadcast the summary via email. I don't feel that it is that useful, besides who reads remembers an email?

Another issue that is common is, the team member may have some important point to discuss, but during the meeting they might forget.

For such scenario, we can have the daily status manager. Each member can login and enter their status. They can enter notes, log hours etc. The team members should update their status before the scrum meeting. During scrum meeting, the same status message will be discussed, however if there are any comments or any dependency on another team member, scrum master can update the status. This software is kind of a scrum meeting log keeper, however one of the advantage of this software is that it is very very minimal. You  can call it twitter for scurm. Not unnecessary functionality.

2) Broadcaster
The target audience for this application will be a group with same interest. This is a mobile app, with heavy usage of push notification. Let's say you are part of a social or a religious group. Then the quickest way of receiving information is via watsapp. However watsapp is basically a chat application but with people you know. So in watsapp, atleast 1 person should know another person, then numbers need to be saved to create groups etc. Another way of sharing information is via SMS, but now a days, I feel, people usually ignore SMS and also we are not sure if it is completely reliable.

With broadcaster app, you have a dashboard where users can see all the broadcast boards that are available. They can then subscribe to the board and start receiving information. Any new information posted will be alerted to users via the Push Notification system. Also, users can create their own broadcast boards. We can add more functionality to it, such as RSVP, reminders, more information section, vote system etc. Watsapp is controlled by all users, however broadcaster will be a one to many system.

3) IPL fantacy
With IPL Season 9 this year, starting April 8th 2016, I feel we should have yet another simple yet fun web application where users login, create their fantasy league and earn points. We can have points for toss, highest number of boundaries etc and users can compare their scores with other users. We can have some sort of api or a manual entriy of every match statistics.

Thursday, January 14

It is huge...

I had a huge realization today that I have difficulty fitting in a group. It was yearly ratings day at work, I was 2nd in queue to meet with the manager. However, impatient I am, I requested if I could go first. I like to get rid of things as soon as possible, be it bad or good. I don't like surprises, well except if you are planning a birthday bash or gifting me with iPhone.

So the meeting went well, I did not fair well, and I am to blame for it. I lack in communication skills, my technical visibility is zero, and I am not that presentable. So the output of 8 months worth of work was expected. I can definitely do better. I can do better. I will do better. I will definitely do better. But that is not the main story I want to share.

So coming back to my not so good existence in the group. Well again, I am here to be blamed. I was rude, when I was asked what rating I got. I said I ain't telling anything because it is against company's policy and why should someone know what one earned? If that was not the case, why would we have private meetings to discuss one's progress, I ask. Anyways, I am past that life of gossiping and bitching about work. The truth is, I look forward to coming to work. I enjoy my day. I hear healthy conversations and listen to linkin park on a repeat mode. I don't want to live a life with regrets and I think no one should but then there is no point in complaining as well. Life is awesome. Say this 100 times everyday. Here you go, I just gave you my secret mantra.

Another reason of not being part of the herd is, I usually reach office at 9.15AM, have my boiled eggs, drink my black coffee and get to work. Spending half hour in the cafeteria at peak time i.e 11.30 or so, makes me uncomfortable. I am sure it is not wasting time, it is just chilling around with your group and feeling fun. However, I don't get excited about it. My way of enjoying is by reading articles online otherwise I have so much planned in life and I am way behind, so why not save some time by avoiding tea breaks.

Apart from that, I usually find I have nothing to put on the table. I am a complete mess and an ignorant dumb when people discuss their topics of interest. I have no interest in Bollywood, I hate politics of current affairs and I am a fool when it comes to small talk. I like to read technical blogs etc. I think everyone hates them.

I had this small issues during early days when I joined work, and started to crib about it. It is so much fun to crib, mind you, it is. I mean, it attracts ears, attention and it is so easy to repeat the same story over and over again. You will find your audience, so don't worry about that. However, later to think about it, I started feeling helpless and demotivated and at the same time guilty. As if I had committed a serious offence.

I may be still cribbing about stuff on this blog, but what the hell, this is my world. So you don't like it, stay out.

Apart from that, life was steady, I managed to get some real work done, avoided a huge blunder in CSS which would have affected almost all the main pages and considering that we are dev freeze soon, this could have been very difficult to solve. I had my back day today, lifted quite heavy and then was also quite early to office. When you reach on time without halting due to traffic, it is an achievement and so should be rewarded.

I had plans of writing ruby 101 today, but I forgot the material at office and so this post. I hope to write about ruby tomorrow and get at least one algorithm implemented. Tomorrow is my official blog day.

Ciao.. Adios amigos... Enjoy life. Live life king size..

To end, I'd like to share quote,

"If you live long enough, you'll make mistakes. But if you learn form them, you'll be a better person. It's how you handle adversity, not how it affects you. The main thing is never quit, never quit, never quit." - WIlliam J. Clinton.

Wednesday, January 13

Yet another day...

I was up way too early at about 4.00AM today and was lying on bed out of laziness. I put an alarm of 6.05AM but then while in nap, I had this Inception moment and was quite sure I would not be on time, so kicked myself out of bed and started my day with random chores. Got breakfast ingredients for the guest at home, had my black coffee and was ready to leave. At 06.55AM, my buddy M.B was on my door, he is very punctual, I adore this quality. His life experiences are worth listening to, I like talking with him. We left for the event and were first in queue. It was an awesome feeling. When you know there would be rush of thousands of people which would eventually require a queue and you realize you are the first one to get in, it brings smile. Well so the day begin pretty early today. I had to skip gym for obvious reasons, but it was all worth it.

I have slowly come out of that shyness of clicking pictures in public and initially though I was reluctant, I managed to take selfie with my buddy. He too took couple of selfies. Considering his age, 60+ and if he can get out of his comfort zone, why not me. I liked him more for that. Yes, I have weird buddies, not in my age group, but as long as you are comfortable with someone, age is just a number. I taught him how to take screen capture on mobile phone.

Later after the event, we had food and parted ways. Being a business man, I thought he would return home because it was already late afternoon, but he took a visit to his office. I was awestruck So much positive vibes. I had taken a leave so obviously I come home.

Talked a lot of motivation, positive energy and such nonsense with folks, ate my dinner and motivated forced myself to write the blog. I was actually planning to write down the notes about Ruby that I had prepared, they are around 10 pages, but then skipped that thought, may be tomorrow will have that up on this blog. I went and looked up my favorite bloggers that I have been reading for quite some time so that I get some inspiration, and to be honest, it kicked some adrenaline in me. I read about life, starbucks, Meri Jung (Anil kapoor movie) and so on.

When it comes to Indian cinema, I get emotional at movies like Meri Jung, Hum Saath Saath hain etc. I have told a lot of people about my taste in movies and believe me I've received weird comments and looks from them, one being, I have some female hormones in me and that I was manufactured incorrectly by the almighty because his wife disturbed him when he was making me. I laughed to this comment, to be honest, it does not even bother me. I like emotional stuff and I like to shed a tear or two to such stories. Imagine this is just fiction, there are heart breaking events that are happening to people around and yet they are fighting life.

I sent a message to AJS today and asked her about her book which I hope she will write one day. She is one true, motivated, straightforward person I have known and considering her career and educational qualification, I like to learn about her views on various subjects. We should always Surround our self with great minds. Each and everyone of us should have a mentor. I can think of many people who I would want to learn from. AJS is one of them.

Tuesday, January 12

Movies, Pictures, Pasta, Life...

I missed workout today. Laziness. Even though I know that missing workout will make me feel crap the entire day, I missed it. The winter season, the cold and the bed, there was this bad force that kept me away from my schedule. I am still far far behind that goal of being active in my life. But thinking about it, and writing about it keeps me alive. To add to the crap feeling, I drank tea with my colleagues. I had not been drinking for a long time now, usually would take black tea or black coffee. So all in all, even though it was a wonderful day, I did have some bad calories within me.

I have also been in a habit of taking a pic per day, so today I took pic of this farm that is opposite our office. I would everyday see laddies in green uniform work in the farm. I was so impressed with the hard work they did and it appears that all their hard work has paid, because it really looks green now. However, the sad part is that these women are inmates. Yes, our office is next to a huge jail and I learned from one of my lead that they were inmates. I don't see any guard watching them, but thinking about them makes me feel warm inside. But I believe that they are now happy with the work they get to do.

In food, I had awesome paneer sabji with methi roti. For dinner I had prepared the meggi pasta, and it was delicious. Yes, I read the macros and they were good, the pasta is made from rava/suji so no unnecessary fats.

In movies, I actually did not see any today, but I saw the trailer of sala khadoos staring R Madhavan. I had watched his Rehna hai tere dil mai when I was a kid in standard 10th with my best buddy Saurabh. I remember we had a day out, we ate food after school and went straight for a movie. I think it cost us around 40 INR. School days. Nostalgia. I mention Saala khadoos because, R Madhavan looks like a professional body builder in the movie. He is a boxer training a girl, I don't know if this is based on a real story, but nevertheless, the efforts that this actors take to look good on screen really motivates me. I am quite sure he must be in his late 40's, just like salmaan khan, but don't they look 30's?

Monday, January 11

Algorithms, Ted Talk, Life

I spent some time today learning about Algorithms. I thought of taking the MIT opencourse ware lectures in passing and now I find them very interesting. I wished such resources were available during my engineering days. It was fun learning about Asymptotic Notations, Sorting algorithms like Insertion sort and Merge Sort. I still need to revise them, however I feel good that I took one step.

Insertion Sort is a simple sorting algorithm, that sorts an array one element at a time. It is less efficient on a large array list however it has several advantages.
1) Very simple implementation
2) Very efficient on small data sets
3) It is Adaptive, i.e it is efficient for data sets that are already sorted. The time complexity is O(nk) when each element in the input is no more that K places from its sorted position.
4) It requires only a constant amount O(1) of additional memory space.

Insertion sort iterates consuming one input element in each repetition. It takes out one element, places it in its correct position and repeats until no element is left. Sorting is typical done in place. At each array position, it checks the value there against the largest value in the sorted list, if larger it leaves the element in place and moves to next.

The best case for insertion sort would be when the array is already sorted. In this case the insertion sort has a liner running time i.e O(n).

The simplest worst case would be when the array is sorted in reverse order. The scenario gives insertion sort a quadratic running time of O(n^2)

The average case would be when sorting a large data set.

for i = 1 to length (A) - 1

   x = A[i];
   j = j - 1;
     while j >= 0  and A[j] > x
         A[j+1] = A[j];
         j = j - 1;
     end while
     A[j+1] = x;

end for


Apart from learning, I also spent some time on watching youtube videos about Ted talks. I am a huge fan of such videos. I watched the talk given by Tia Lopez about how to read everyday. It was basically about how to improve our lives by improving and working on our health and wealth. He had a very good point about being successful in life. Having a mentor, how important it is and why you should have one. I have read quite a few articles on mentorship, and totally agree to what Tia had to say. I have planned to seek mentorship from one of our most intelligent and smart UX lead at work. She has very amazing soft skills and she is very very good in a debate. I appreciate her communication skills and this days, everyone has to be a people's person instead of being just a quite, simple and ignorant developer. You can watch the ted talk here


Life is pretty simple, I had some ups and downs and I strongly believe that I am a person who will make sure he does not get faced with a problem which he thinks will cause a minutely tiny unnoticeable quake in his life. Yes, that is true about me, I always run away from problems. I am working on this weakness, however, all in all, today was quite a pleasant day. I woke up late, so it was decided that I would be skipping gym, however, thanks to my gym buddy, I went and hit some weights.

To end this blog post, I wish to quote warren buffett,
"Someone is sitting in the shade today because someone planted a tree a long time ago." - Warren Buffett.

Sunday, January 10

Happy new year 2016

Happy new year!!!

I should have been very particular in writing this post, I always make new year resolutions and try to stick to them for some time at least. However this year, I thought it was not that important. I was in bed by 10.00 PM on 31st eve, nothing new, this is me. I was awake at midnight to the sound of fire crackers, also to the wishing of all the kids at the neighbor hood who were enjoying their night out on the parking area. They were so happy. I felt happy.

It is already 10th of January, feels like million days now and I don't have an particular memory of the New year's eve to cherish. For me New year's have always been to make myself better. Get out of the laziness, think new and do new. Get out of the comfort zone. I am trying hard and I believe I can. Last year, was nevertheless the best year, compared to all my previous years. It is just that I don't have any statistics to wow myself or the bunch of readers reading this. Because I did try new things in life, but I was not consistent at it. I still have not parted with laziness, procrastination and this qualities/habits or whatever they are continue to be part of my life. It is like they need a host to survive on and I am the most suitable candidate.

I made lots of new year resolutions, I am not sure if I want to list them down here. Is it because, in my stupid mind I am afraid that If I fail at my resolutions, what would you think about it? I don't know. I am confused.

I'll write in short about it anyway.

1) Work hard to get a good physique. I work out 6 days a week, at least 45 minutes each day, not so heavy lifting. I want to change that, If I want to achieve what I have dreamed of, I need to get out of my comfort zone.

2) Apply to the M.Tech entrance exam to be held in May, I guess. It is been pretty long after my engineering and I have no effing clue what Algorithms and Data structures are and If I need to excel, I really need to hit this area rock bottom.

3) Work on at least one Software product, end to end. Learn Ruby on Rails, Reach JS or Angular JS and build an application.

4) Start writing more, I have a blog setup and purchased a domain as well but I have always had a laid back attitude and did not write anything on it. I have ideas to work but, I feel tired when I have to actually get up and start the laptop. I read this article on medium about making a habit of writing 1000 words a day and how it is beneficial. I know it is useful, but to write 1k per day sometimes becomes very overwhelming. And to overcome this, I feel 500 words per day should be a quite achievable feat. The 500 words per day idea, by the way, is also from medium. :)

and the list goes on...

I have many more, but those are basically about my habits that I need to change. My Fear, my strong areas, self grooming, excelling in Job etc.

Cool, so I also crossed the 500 words mark today. I hope to keep writing everyday.

God bless.