Wednesday, November 16

Angular JS Presentation

http://ilaxmidhar.github.io/angularjs-training/#

I was to give a presentation about Angular JS to my team, but due to my miscommunication, it got cancelled. I had spent a lot of time, first learning angular JS and then also working on some demo project which I planned to showcase to the team.

*Rants about me.. blah blah blah...*

Note to Self : People don't understand your sarcasm, don't effing try to be Chandler bing. You live in a developing country. *More Rant... blah blah blah... *

Anyways, I've uploaded the presentation on github pages. I loved using Reveal.js library for making presentations. It is one of the best library and I enjoyed working with it.

P.S: This post will not be complete without plethora of hashtags so here we go
#dontbestupid, #yousuckatsarcasm, #liveinindia, #idioticcommunicationskills, #ISUCK, #whocares, #livelife

Monday, June 27

What "if"

What "if" I had put in just a little extra efforts? What if I had solved that question paper again? What if I had...

The "If" is very subjective and whatever follows after "If" decides your fate.

Scene 1: What "If" I don't get selected even after putting so much efforts?
Scene 2: What "If" I had put in that extra efforts, I would have not missed that cut off.

It is the before and after scenario, but you get the gist.

So what is this post? Well, I recently answered this exam and when I saw my results, I had this "If" moment. What "If" instead of watching that FRIENDS episode which I had already seen umpteen times, I had solved that Maths problem? I could have got better rank, "If" I had prepared a little extra. I would have secured that Seat in my first round, I would not be left at the Mercy of the reserved categories. I cannot blame the Government or the reserved category candidates for my mistakes. I am sure they have their own reasons for their existence.

Well before giving the exam, I knew there was 50% reservation. Instead of thinking there are 60 seats, I should have concluded that there are 30 seats and work hard enough that I be in top 30. Not even top 30, work so hard that I am topping the list.

What went wrong?
Everything, and my Attitude. My attitude towards my goals. What makes me procrastinate, why I cannot get things done? May be I need help and the biggest change I need is in my Attitude.

Go get things done, you.

Life is just once, why waste it cribbing about your failures.

Thursday, June 16

Github - Pushing your code to Github

Lets say you have a project you want to upload to github for versioning. You can take following steps to get started.

1) Login to your account in github.com and create a new repository

2) Navigate to your project folder via the command prompt and run
    >> git init
    This will initialize a repository in your file system.

3) Now we need to add all the files into local repository, which will stage it for commit.
    >> git add .
    The "." or "dot" at the end of command is to add all the files in the directory.

4) Next, commit the files and add a message to the commit
    >> git commit -m "Initial Commit"
    Commits the tracked changes and prepares them to be pushed to a remote repository.

5) We are now ready to push the changes of local repository. However, we should first make a pull request so that our local repository is up to date. Usually this step should be taken before we add any files to the repository.
    >> git pull <your_repository_url>

6) If there are no conflicts or issues, you can now push your local repository changes to the remote repository.
   >> git push
   You will be asked for your username and password of github, after successful validation your code will be deployed to github.

Thursday, June 9

Introduction to TypeScript



What is Typescript?
It is superset of Javascript. EcmaScript 5, EcmaScript 6 are javascript specification, however they are not widely available across browsers. What Typescript allows us to do is transpile our ES6 code to ES5 so that it works on all browsers. It also allows us to leverage some ES7 future features.

Benefits of Strong Typing
- In Javascript you can create a varialbe and assign a number or string as per your usage. However in Strong Typing, you can strictly assign a variable of certain type and if the type changes, during compile time it throws an error. Thus Strong Typing catch errors at compile time vs. runtime.
- There is better tooling (refactoring, autocomplete, etc) and hence you can avoid several classes of errors. Example of autocomplete would be when you have a method with three arguments, it would specifically give you autocomplete for only three arguments and warn you if you pass a fourth argument.
- Strong typing allows you to explicitly intent i.e it allows you to write code for humans. For example
 var x: number = 3;
 var y: string = x; //Error
In Typscript you also have dynamic type (using any) i.e
var x: number = 3;
var y: any = x //Works!!! 

In Typescript, you can have Object Oriented Javascript.





Installing TypeScript
1) Install node
2) Install npm
3) npm install -g tsc

Thursday, May 26

Mobile Application Idea

Today, it was a geeknight here, even though I had registered for it, I felt an urge to NOT attend it. Somehow I feel that unless I know much about the subject it is a complete waste of time attending such sessions. I have been tinkering a lot around an idea of creating a Mobile application. Considering that it is quite easy to build an application these days, I still haven't found that eureka moment to actually sit and get started working on one application. The pain point being the initial setup. There are tremendous useful frameworks out there, but setting those up in windows is a tough task. I quit, before I start.

For a period of about 5-6 months, I ran this watsapp broadcast of sending out quotes daily. They were usually Motivational and Inspirational quotes. I had started with around 100+ people in my phone list and then after about 15 days I sent out a message to everyone, if they like the quotes and would want me to continue, they should reply. I got around 60ish replies.  I would send out quotes every single day, and it had become a very good habit until one day when I took a moment and realized that it could be that I am spamming people. "But they want me to send quotes" , I thought, or could it be that out of courtesy they ad replied. Anyways, what I learned from this experiment was
1) Understand your target audience
2) Have a two way communication
3) Even though you start from your family and friends, but don't trust on the outcome. They want you to feel happy, not your best critics.
4) Doing something everyday has greater benefits over doing occasionally. Even though I have stopped sending out quotes, few of them that I remember has helped me in my day to day life.
5) It was a manual task, first look for a good quote that you have not sent earlier, copy it, format it, and then send it out.

I feel that sending out daily quotes not only helped me, it also helped some others. It was not at all a waste of time.

However, Can I turn this into some application? Top of my head ideas that I would want to have in such application
1) User gets a notification every morning about a quote.
2) The application has entire screen covered with quote, also a picture if available.
3) User can comment on the quote, like, share etc.
4) User can browse through all the previous quotes.
5) The best approach appears to have a website and through this website API, the application be made. This way, I can have all the quotes lined up in the database. May be I will write some bot that will fetch the quotes and store in db.

I have to figure out the technology that I would want to use to build such application. Even though is a good idea, I would definitely want to learn a new technology out there.

Monday, May 16

Javascript - The DOM





DOM - Document Object Model

// Create a Simple Object
var object = {};

// It can have key value pairs
var object = {
   name : "Adam"
}

// An object can have another object
var object = {
   name:"Adam",
   address : {
      street : "Florida"
   }
}

// To access the values, use the dot notation
var name = object.name
alert(name);

Dom Functions
//Create a paragraph tag
var paragraph = document.createElement("p");

// Add a text to the paragraph
paragraph.textContent = "The DOM is ready to be viewed";

//Add text to body
document.body.appendChild(paragraph);


Event Listeners
//Create a Div element
var div = document.createElement("DIV");

// Set the height of the Element
div.style.height = "100vh";

//Append Element to DOM
document.body.appendChild(div);

// Add Event Listener to Element
div.addEventListener('mousemove', function(event){
    console.log(event);
 
    // Display client x and client y
   var x = event.clientX;
   var y = event.clientY;
   div.textContent = x + ', ' + y;
   div.style.backgroundColor = 'rgb(' + x + ', ' + y + ', ' + 100)';

});


Refactoring your Code
function fullScreen(element){
   //Create a element
   var newElement = document.createElement(element);

   // Set the height of the Element
   newElement.style.height = "100vh";

   //Append Element to DOM
   document.body.appendChild(newElement);

    return newElement;
}

function input(inputType, DOMElemenet, callback){
   // Add Event Listener to Element
    DOMElemenet.addEventListener(inputType, function(event){
        var x = event.clientX;
        var y = event.clientY;
        callback(DOMElement, x, y);
    });
}

function output(element, x, y){
    element.textContent = x + ', ' + y;
    element.style.backgroundColor = 'rgb(' + x + ', ' + y + ', ' + 100)';
}

input('mousemove', fullScreen('DIV'), output);

// So which function's you can change arguments

input('click', fullScreen('DIV'), output);





Helper Functions
SetInterval

function time(){
   var date = new Date();
   var hours = date.getHours();
   var minutes = date.getMinutes();
   var seconds = date.getSeconds();
   var arr = [hours, minutes, seconds].map(function(num){
      return num < 10 ? '0' + num: String(num);
   });


   hours = arr[0];
   minutes = arr[1];
   seconds = arr[2];

   return hours + minutes + seconds;
}

function output(time){
  var color = "#" + time;
  document.body.bgColor = color;
  document.body.textContent = color;
}

function startClick(callback, name){
  document.body.addEventListener('dblclick', function(event){
    callback(name);
  });
}

function stopClick(callback, name){
  document.body.addEventListener('click', function(event){
    callback(name);
  });
}


function init(){
   var tick = setInterval(function(){
     output(time());
   },  1000);

   stopClick(clearInterval, tick);
   startClick(init);
}

init();

Tuesday, May 10

Blood Relations

Blood Relative and Relative in law => Two types of Relations.

All relations from Father's side is Paternal
All relations from Mother's side is Maternal

So Father's brother is your Paternal Uncle and similarly your Mother's brother is your Maternal Uncle

Cousin Brother or Cousin Sister is not correct. It is simply Cousin.

Nephew -> Male child of your Sibling (Brother or Sister)
Niece -> Female Child of your Sibling (Brother or Sister)

Tricks to solve blood relations Problems
1) Applying to your self
2) Summarizing the statements
3) Moving step by step

Q : I met a person, who was your bother's mother's brother. What would be the relation with you.
A : Maternal Uncle

Q: Your sister's Aunts husband daughter
A : Cousin

Q: Introducing Ramesh, sudha said, brother's father is the only son of my Grandfather
A : (Only Son of my Grandfather => Father)
     (Brother's Father => My Father)
     Therefore, Ramesh and Sudha are siblings i.e Ramesh is sudha's Brother

Q : John Introduced Mary as daughter of the only Son of My father's wife. How is Mary related to John?
A : My Father's wife => My Mother
      Therefore, Mary as daughter of the only Son of my Mother. So John is Only Son.
      Therefore Daughter of John is Mary.

Father-in-law -> Spouse's(Husband or Wife) Father
Mother-in-law -> Spouse's(Husband or Wife) Mother

Brother-in-law -> Spouse's(Husband or Wife) Brother or Your Sister's Husband is your Brother-in-Law
Sister-in-law -> Spouse's(Husband or wife) Sister or Your Brother's wife is your Sister-in-Law

Tricky Question
A is Father of B, then B is _______ of A
The answer could be Son or Daughter because we don't know the gender. So the best answer is Child. Thus,
A is Father of B, then B is Child of A.

Q : D is the brother of B. M is the Brother of B. K is Father of M, and T is wife of K. How is B related to T? And How is T is related to B?
A : B is son/daughter of T
      T is Mother of B.

Q: P/Q means P is father of Q
     P+Q means P is mother of Q
     P-Q means P is Brother of Q
     P*Q means P is Sister of Q

    A*B/C-D+E
    Find A is E's ____________
    Ans : A is Grand Aunt of E
   
 Q : A is aunt of E?
  a) A-B+C/D*E
  b) A*B/C*D-E
  c) A/B*C+D-E
  d) A+B-C*D/E

 Ans is Option b)

Q : Rich is the only daughter of Arjun's father's wife's Mother-in-law's daughter's only brother. How is Arjun related to Richa.
A : Arjun is Brother of Richa
   

Thursday, April 28

Syllogism

Rule 1 : All + All = All

Problem I
Statement 1 : All boys are intelligent
Statement 2 : All intelligent are girls

Therefor the conclusion derived will be
All boys are girls
From statement 1 : Some intelligent are boys
From statement 2 : Some girls are intelligent

Problem II
Statement 1: All books are pens
Statement 2 : All pens are pencils

I : All books are pencils
II : All pencils are books

From Rule 1 we can derive that All books are pencils
Hence, only conclusion I is true.

Rule 2 : All + No => No
When predicate of 1st statement is equal to Subject of 2nd statement

Problem 1
Statement 1 : All tigers are horses
Subject is "Tiger" and Predicate is "Horse"

Statement 2 : No horse is dog
Subject is "Horse" and Predicate is "Dog"

Since Predicate of 1st statement is same as subject of 2nd Statement, we can apply the rule.

I : No Tiger is Dog
II : Some tigers are dog

Therefore, as per Rule 2, the conclusion would be
No Tiger is Dog

Hence, only conclusion I is correct. Conclusion II cannot be correct.

 Problem II
Statement 1: All students are scouts.
Statement 2 : No Scout is Lady.

I : No Student is lady
II :  Some scouts are students

Therefore the conclusion after applying Rule 2 is
No Student is lady

From statement 1 : All Students are scouts, we can conclude that Some scouts are Students.

Therefore, we can conclude that both the given conclusions are true.

Rule 3 : All + Some => No Conclusion

Problem I
Statement 1 : All pens are pencils
Statement 2 : Some pencils are papers

I : Some papers are pens
II : Some pens are not papers

From Rule 3 : We can concur that there is No Conclusion. Note that for Rule to be used, Predicate of Statement 1 should be same as Subject of Statement 2.


Problem II
Statement 1 : All bats are balls
Statement 2 : Some balls are nets

I : Some bats are nets
II : All nets are bats

Applying Rule 3, There is No Conclusion

Rule 4 : Some + All => Some
In this scenario, there will be 2 conclusions.

Problem I
Statement 1 : Some parrots are Doves
Statement 2 : All Doves are Peacocks

I : All peacocks are doves
II : Some peacocks are parrots

Applying Rule 4, we get two statements
Some Parrots are Peacocks
Some Peacocks are Parrots

From 2nd statement "All Doves are Peacocks" we can derive that "Some Peacocks are Doves"

There the 2nd conclusion alone is true.

Problem II
Statement 1 : Some books are pens
Statement 2 : All pens are papers

I : Some books are papers
II : Some papers are books

Applying Rule 4 i.e Some + All => Some, we get
Some books are papers
Some Papers are books

Therefore both the Conclusion are true.

Rule 5 : Some + No => Some Not 

Problem I
Statement 1 : Some Books are Toys
Statement 2 : No Toy is Red

I : Some books are red
II : Some books are not red

From Rule 5 : Some books are not red.
From statement 1 : Some Toys are Books
From Statement 2 : No Red is Toy.


Problem II
Statement 1 : Some trains are trees
Statement 2 : No Tree is a Picture

I : Some trains are picture
II : No train is a picture

From Rule 5 : Some Train is not Picture
From Statement 1 : Some trees are Trains
From Statement 2 : No Picture is Tree

From above derivation, we can say that no conclusion is true.

Rule 6 : Some + Some => No Conclusion

Problem I
Statement 1 : Some stones are cups
Statement 2 : Some cups are black

I : Some blacks are not cups
II : Some cups are Stones

As per Rule 6 -> There is no Conclusion

Problem II
Statement 1 : Some dogs are rats
Statement 2 : Some rats are horses

I : Some horses are dogs
II : No horse is a rat

As per Rule 6 -> No Conclusion.


Rule 7 : No + No => No Conclusion

Rule 8 : No + All/Some => Some Not Reversed

Problem I
Statement 1 : No File is an Elephant
Statement 2 : All elephants are Caps

I : Some Caps are elephants
II : Some Caps are not Files

As per Rule 8 :
Some Caps are not Files
From Statement 2 we can derive -> Some caps are elephants

Therefore, both the conclusion are correct

Problem II
Statement 1 : No Goat is Door
Statement 2 : All doors are chairs

I : Some chairs are doors
II : Some chairs are goats
III : Some chairs are not goats
IV : Some doors are goats

As per Rule 8:
Some chairs are not Goats

From Statement 2
Some Chairs are Doors
Also -> Some Doors are Chairs (From above derivation)

From statement 1
No Door is Goat

Therefore I and III are true



Problem with 3 statements

Statement 1 : Some newspapers are radios
Statement 2 : Some radios are Television
Statement 3 : No television is magazine

I : No newspaper is magazine
II : No Radio is magazine
III: Some radios are not magazines
IV : Some newspapers are televisions


Statement 1 : Some newspapers are radios
We can derive -> Some Radios are Newspapers

Statement 2 : Some radios are Television
We can derivie -> Some Television are Radios

Statement 3 : No television is magazine
We can derive -> No Magazine is Television

From Statement 1 and Statement 2, we cannot derive any conclusion
From statement 2 and statement 3 : We can get -> Some Radios are not magazine

Therefore only III is true.

Problem with 3 statements

Statement 1 : All fowls are kites
Statement 2: No kite is insect
Statement 3 : No fowl is kite

I : No Fowl is insect
II: No Insect is Fowl
III : Some Kites are Fowls
IV : No Kite is Fowl

Statement 1 : All fowls are kites
=> Some kites are Fowls
     => Some Fowls are Kites

Statement 2: No kite is insect
=> No Insect is Kite

Statement 3 : No fowl is kite
=> No Kite is Fowl

From Statement 1 and Statement 2
No Fowls are Insects
=> No Insects are Fowls

Therefore from all the derived statements, we can get the result that all the conclusions are True.


Friday, February 19

Notes : Brings Up Strong Reasons to Use React.js



- Search wise, in Google trends, React is most widely searched

- Angular is going a major re-write and looks more similar to React. So Angular 2.0 will have lots of API's broken for Angular 1.0, does it mean it is back to square one for Angular 1.0 users?

- Pick up a framework when you know you are building a Web application. Don't use it for making static websites.

- jQuery is still valid, so for web developers can it can be used very productively.

- Unlike Google, facebook is using React on their critical projects.

Wednesday, February 17

Notes : Introduction and Getting Started with React.js - JSConf 2015



1) Install Node.js

2) http://codewinds.com/jsconf-react-win

What makes react.js special?
- Simple to learn - Mostly it is the View.
- Composable components
- Declarative - Rather then doing jQuery manipulation, it is easily done via React.
- Easy to use with existing projects

React.js core concepts
- Just the view
- Virtual DOM - Keeps track of what is changed in DOM and updates it accordingly
- Components
- Top down data flow

You can use ES6

Just the view
class Greeting extends React.Component {
  render(){ // the heart of React.js
    // pass in any type of js objects, methods, or functions.
    return <div>{ this.props.user.name }</div>;
  }
}

Virtual DOM
- Render Virtual tree
- Fast Diff
- Adapters to DOM, ...

Components
Everything is components. You can have your code in different file, you can just import it and use it.



<Name value={this.props.name} /> => JSX code. It is a components.
props is built in react properties set up for you.

Top Down data flow

// from main.js
<App name={appName} items={items} />

// elsewhwere in App's render()
return (<div>
          <MainTitle title={this.props.name) />
          <div/>);


React.js API - JSX


Render, prop



React.js - State, events

when rendering, you can use this.state and this.props



React.js family

- react-router
- Flux
-React Native





Sunday, February 7

Notes : CSSconf EU 2014 | Addy Osmani: CSS Performance Tooling

When you want to be fast, you have to give up the things slowing you down.



3 Tiers of Optimization Tooling

1. Baseline
Minification, concatenation, Image optimization, Compression (Gzip, Zopfil), Asnyc scripts, Leverage caching, WOFF2 for fonts, Spriting. Avoid redirects

2. Get fast, Stay fast.
Inlining critical css, deferring non-critical assets to avoid render blocking, removing unused CSS, visual regression testing to verify changes. Performance bench-marking.

3. Nice to haves
Reduce duplicate colors, selectors, font-families, sizes.

Try to ship something in the range of 0 - 1000ms time. Sites that are slow to load loose visitors.

Step 1 : Measurement
Speed Index - The average time at which visible parts of the page are displayed. Expressed in milliseconds and dependent on size of the viewport.

Lower speed index score is better.

Step 2 : Performance Budget
It is basically you saying that I have this minimum expectations. For example, trying to get 1 sec page load.
Max 200ms server response.

Use webpagetest webapp..

Google's pagespeed app is also very useful. Ideally you should have a pagespeed of 85 on mobile and 90 on desktop.

The average page size is 1.8MB. Most of the size is due to images.

Use gulp image minification tools, css minification tools etc.
Optimizing HTML, CSS, Javascript etc.

What else advanced techniques that we can do to improve performance.?

1) Removing unused CSS.
Google devtools has an option which tells you how much unused CSS you have.

UNCSS - Powerful tool.



CSS Regression testing
Use phantomcss and regression.js

2) Optimize critical path CSS
Optimize critical rendering path. Just render visible content.
To do that, we can do inline css instead for it to fetch for the CSS file.
This is not just a scripting problem and it cannot be solved alone with javascript. This problem is a Multi part problem and needs to be automated. What do we really need to do?



a) Extract stylesheets from HTML - Choice of extraction of defining *.css files upfront

b) Generate the above the fold CSS - Decide on target viewports. Multiple? One sweet spot? Keep it small and lightweight under 14kb

c) Inline critical-path CSS in

d) Asynchronously load the rest of your styles - Remove them from the critical path.

3) Optimizing Images
Tools available and can be used
ImageOptim, GIFBrewery, Packed Image Diffs

Is it important for you to show animation on screen? Will just a jpeg not work? Important question when developing a website.

4) Use of mod_pagespeed enabled on your server.

===================================================================

Automate Performance measurement
1) WebPageTest CLI
2) Grunt-PerfBudget
3) PageSpeed Insights CLI
4) Grunt-PageSpeed
5) Phantomas CLI

Stylesheet complexity Analysis
Easiest way to keep CSS minimal is to minimize the repeatations.
Some tools like
1) Parker
2) Grunt-ColorGaurd
3) Stylestats



Thursday, February 4

Notes : 15 Lessons From 15 Years In UX - JESSE JAMES GARRETT


Jesse James Garrett — 15 Lessons From 15 Years In UX (SmashingConf NYC 2014) from Smashing Magazine on Vimeo.

1. Go Broad
Work on different kinds of problems.

2. Go Deep
Work for the quality, focus on one problem at a time.
Research the founder of a company, to understand their thinking properly.

3. Go for a Walk
Shifting your sensory inputs in any direction. There is a science behind this, if people change their working environment, it gives them capability to think in different ways.

4. Go farther than you think you should
If is easy to fall in trap on limitations. Limitations are your own creations. It is dangerous for you to cut off your thought due to external limitations.

Your own ideas should scare you. There is risk of failure and certainly you may look stupid, however you should rely on your own guts to go forward and work on that idea. Try to rely on people around you and get inspiration.

Designers are creative people and they need to get out of their comfort zone.

5. Put away your notes
Believe in your instincts.

6. Learn to spot your assumptions

7. Stay Curious
Pursue opportunities to evolve

8. Be as curious about your clients as you are about your users
Your clients should be able to relate to your choices and decisions.

9. Hang with different crowds
Helps understanding the technology, improves your communications. Some things that you know but it is difficult to articulate, talking to different people helps.

10. Cultivate allies.

11. Pick your battles
There are always compromises that you have to make. You need to figure out what really matters, what are the load bearing walls, what are things that create structure and integrity of a design.

12. Good work does not speak for itself. 
You should be able to sell your work. You should be able to explain your design to the world. You should have the ability to persuade and convince your opinion.

13. Changing a design is easy, changing mind isn't
It is never about a single product, it is a never ending process.

14. Pay attention to your failures.
Every failure carries a message about how to improve yourself as a designer.
Scale of a lesson is not directly proportional to failure. Small issues teach big lesson and vice versa.

15. Everything is always changing.
Change is continuous. Only difference between one change and another is a mater of degree. Your assumptions at one time may not be applicable. So always remember that change is happening. Don't resign over change.


Tuesday, February 2

Notes : Everything You Need to Know about Design You Didn't Learn in School - JoonYong Park

Everything You Need to Know about Design You Didn't Learn in School



- A bad workman blames his tools.
- It starts with you.

01. If you wait for the perfect opportunity, it will never happen. It starts with you.

Everyone is afraid of something. Fear. The stress of being good, looking good to your coworker, colleagues etc.
Learning new things so that you can overcome the fear.

"Is someone different at age 18 or 60? I believe one stays the same." - Hayao Miyazaki
When you get older, you just become lazy.

The process needs to be organic. Not forced. 
Designers and Developers work in real time.

02. Crave the challenge.

Don't get stuck behind the desk. 
Be a good person. To friends, family, girlfriends and boyfriends. Explore different things in life. Travel. Do something you love. Experience everything.
It's not just about knowledge. You can't just read about life. you have to experience it.

Knowledge is just 1-Dimensional, Experience can be considered as 3-D. 




03. Life Experience = Creativity

04. You're not as good as you think you are. 
Give respect and you'll get it. You can take your work only so far - a great team can take it to a whole new level.
Surround yourself with good people.

Putting it all together
It starts with you. Crave the challenge. Experience everything. Be humble and nice to people.

Thinking that you will change job because you don't have a good manger, or changing job because you don't like what you work, is not the correct attitude. Remember, It always starts with you. You need to learn new things, challenge yourself and push those limitations and thus create your own opportunities.

Monday, February 1

Notes : Mathias Bynens: 3.14 Things You Didn't Know About CSS (Updated) - CSSConf.Asia 2015



!important
!important has nothing do to with specificity. To fake !important, you can use the class multiple times.

Font Family
No need to have quotes in font family names which has white spaces.
Font family name beginning with integer are not correct, however you can fix this by giving quotes to such family names.

Attribute Values
Attribute values are usually quoted. It is not necessary to have quotes in HTML for attribute values, however for CSS you may require to have quotes. So the best practice is to use the quotes always.

CSS comments
CSS does not have single line comments. However for identifiers, if you give invalid text, spelling mistakes etc, it will be considered invalid however there will not be any parsing error.

HTML tags
You can omit closing tags in HTML and it is still valid. You can also omit the head and body tags and it will still be a valid HTML.

Using CSS without HTML - Refer nojs.css
We can use the body, head, before, after etc which are not part of HTML. To display some text, you can use the CSS content property.

Unicode in HTML and CSS
Every possible unicode value is valid for class and ID name in HTML. In ID it should not have a white space.  Eg of valid classes and ID

<div id="#id">Good luck styling me!</div>

<div class=".class">heh</div>

<div id="#id.class:hover{}">huh</div>

<div id="[attr='value']">not</div>


However how you would style it in css. So in CSS, you need to escape the character.


XSS - Cross site scripting
Execute custom javascript code. If you have control over the css of a website, it is possible to do all sorts of things like hitting the performance of a website, inserting your own content etc.

How to avoid CSS expression vulnerabilities?
1) Sanitize user input before injecting it in a CSS context
2) Disallow framing using the HTTP header
x-Frame-Options: Deny
3) use

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
<body>
<div class="wat">My first Website</div>
<div>Visitor Count : 0</div>
</body>

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.

Tokeniser


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.


Reentrant

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
DOM + CSSOM
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

4.Paint
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.

Painting
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 csstriggers.com

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


Bandwidth

  • 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

Digital
  • 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
Analog
  • 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_ _ _ _ _ _
So
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 11.0.0.0 - It is CLASS A
We have a host in this network - > 11.1.2.3

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

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 255.255.255.255. So now this packet will be received by all the hosts in the network

So the limited broadcast address is 255.255.255.255

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

So the Directed Broadcast address is (NID).255.255.255


Subnet:
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.

https://www.quora.com/Is-it-possible-to-score-99-5+-percentile-on-the-CAT-and-not-get-selected-for-IIM-A

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.


Modules
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.

Sandbox
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.