thatsmekaustubh: September 2016

Wednesday, September 14, 2016

Git branching and merging [pending update]

kaustubh@kaustubh-desktop:$ git log --all --decorate --oneline --graph
*   a2.2.1.1 (HEAD, flappyChicken) hello world -> htmlWalaBranch -> 5 --> html5games --> flappyBirdGames --> flappyChicken, flappypig merging branches
|\  
| * a2.2.1.2 (flappyPig) hello world -> htmlWalaBranch -> 5 --> html5games --> flappyBirdGames --> flappyPig
* | a2.2.1.1 hello world -> htmlWalaBranch -> 5 --> html5games --> flappyBirdGames --> flappyChicken
|/  
* a2.2.1 (flappyBirdGames) hello world -> htmlWalaBranch -> 5 --> html5games --> flappyBirdGames
* a2.2 (puzzleGames, html5Games, 2dPhysicsGames, 2dBoardGames, 2dArcadeGames) hello world -> htmlWalaBranch -> 5 --> html5games
| * a2.1 (html5Webapps) hello world -> htmlWalaBranch -> 5 --> webapps
|/  
* a2 (html5WalaBranch) hello world -> htmlWalaBranch -> 5
| * b2 (cssframeworks) hello world -> cssWalaBranch -> cssframeworks
| | * b1 (cssCores) hello world -> cssWalaBranch -> cssCores
| |/  
| * b (cssWalaBranch) hello world -> cssWalaBranch
| | * a1 (html4WalaBranch) hello world -> htmlWalaBranch -> 4
| |/  
|/|   
* | a (htmlWalaBranch) hello world -> htmlWalaBranch
|/  
| * c (jsWalaBranch) hello world -> jsWalaBranch
|/  
* BASECODE (master) hello world

For simplification I have renamed commit codes to BASECODE, a,b,c etc. explaining each as follows:

Id	Commit Description
BASECODE
a
a1
a2
a2.1
a2.2
a2.2.1
a2.2.2.1
a2.2.2.2
a2.2.1.1
b
b1
b2
c

Kompozer install(ubuntu) and quick review

Ubuntu Kompozer install command:

sudo apt-get install kompozer

Official website : Click Here

After installation on opening Kompozer you will see a tooltip which you can ignore to continue. Next screen shall be as follows, I am numbering items in image to explain them in short in table that follows:

First Screen on opening Kompozer

As a beginner, one should be acquainted with these 5 options at first.

Item Code	Short Description
1	Design View : Potrays output as you will see, this is also a WYSIWYG editor where you can directly start editing and relevant HTML witll be generated
2	Split View: Here you see part of HTML code at bottom of screen and design on top so that you can edit any to get the desire look and feel
3	HTML view: HTML is complete source code view of document with code highlighting functionality for web developer
4	Quick access menu: You are provided with mostly used items on the top so that you can add edit delete most used HTML tags easily. Most of them also have wizard to help you figure out what is to be done
5	DOM explorer: Have you ever imagined a tree with branches and sub branches to its twigs. Well HTML document follows that kind of structure where in everything is inside html tag but could be explored in tree like structure using DOM explorer

You can use this tutorial as base and try to design a webpage in this another post as a start : Next post

Friday, September 9, 2016

Posting my experience with Logitech K480

How did I get it?
I was like always checking out deals on different sites, just when this lightning deal(amazon) caught my attention which said K480 for 1899INR and I knew I had never seen this any less 2500 on different occasions so I had to book it :P
Unexpectedly delivery charges were free and it said will be delivered in two days but got delivered the next day!

Initial impressions (day 1: more like working day 1)
First of all its heavy but I guess it gives it sturdy ness.
Setup with android devices was pretty easy just for new buyers if asked for pin type it using keyboard and press enter it works that way.
The main problem I faced was with windows. Initially it connected like a charm and I did some shortcuts and it worked but once I changed device using keyboard; windows 7 setup was dead! No matter what I do it was dead. I tried remove device and that caused me to hit a dead end - now keyboard is not even shown in search new device.
PS: I have done driver uninstall/ install, couple of reboots, service log on changes, registry key changes for that sake; its still a dead end for K480 with win7.

Hoping to find a solution soon.

Impressions continued day 2
Keyboard gave me hard time today connecting to my phone, actually my phone was the only device which accepted it how it was in no time. I turned on my phones bluetooth and then turned on keyboard, it didn't connect on itself. I thought it might be some sequence issue so I switched between devices still same. I had to search and add this keyboard to phone again.
I wonder what went wrong between these two :P

Note for readers: This post is posted from my Lenovo K3 Note and my brand new Logitech keyboard K480 (which i haven't paid for it yet :P)

Friday, September 2, 2016

Quick shell based network setup [linux]

By default most linux OS have their network config set to DHCP. How to change it and get going with custom settings.

This is what DHCP setting looks like

auto eth0
iface eth0 inet dhcp

For same we need to edit interfaces file as following:

sudo vi /etc/network/interfaces

Contents of file considering we are editing for eth0 card

auto eth0
iface eth0 inet static
address 192.168.2.1
netmask 255.255.255.0
gateway 192.168.X.X
dns-nameservers X.X.X.X Y.Y.Y.Y Z.Z.Z.Z

After saving above configuration we need to restart networking service to apply changes

 sudo /etc/init.d/networking restart

Checking of new configuration can be done as follows

$ ifconfig eth0
$ ifconfig

Thursday, September 1, 2016

Navigation / Menu (Dynamic) using bootstrap

Point to be noted is that bootstrap has already taken care of different screens so when you are coding the bootstrap page its dynamic to screen size. This post covers one of such amazing example where you design a navigation for large screen and it automatically becomes collapsible for mobile screens.

Here is the code,

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Navigation Example</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>
  <nav class="navbar navbar-default">
    <!-- inverse to have black -->
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
        <a class="navbar-brand" href="#">
          <!-- <img alt="Brand" src="..."> -->
          Brandname
        </a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <form class="navbar-form navbar-left" role="search">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <h1>Hello, world!</h1>
</body>Example

</html>

Output:

DESKTOP/ LARGE SCREEN

Desktops/ Large screen devices

MOBILE/ SMALL SCREENS

Explanation:

Note that I have intentionally included jquery before bootstrap js inclusion becoz if not done so dynamic navigation fails to expand and collapse

Line 15: If you change navbar-default to navbar-inverse you shall have dark theme
Line 25: href value defines what is to be done when clicked on Logo or brand name
Line 26: uncomment it and set company logo here if you want

Layout / Grid system in Bootstrap

Bootstrap divides page as mainly usable and not used part by mentioning class name as container for div tag.All the content we need to show is inside this div tag

This container is then divided into 12 equal parts indicating a block of layout. Basic concept of layout is a tabular structure. But tables have drawbacks in layout as we cannot overlap table on each other and it is very strict with columnar and row-wise structure.

Here bootstrap we use this 12 parts scheme to layout our visual components in a div with class name row

and each unit we show has class name starting with col-[+]-[*]

Note:

[+] here indicates values as lg(large screen), md(lappy/desktop), sm(tablet), xs(mobile)

[*] here indicates value from 1 to 12

One thing to understand here is that the value you set for one component should be either 12 or components in row(div) should addup to 12

Lets say layout we wish is two column for desktop display the code will look like

<div class="row">
  <div class="col-md-8"></div>
  <div class="col-md-4"></div>
</div>

This will divide page to give output somewhat like in image below:

Getting started with bootstrap [setting up]

CDN URL
CSS: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
JS : https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js

index.html source code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello World Example</title>
    <link href="[css cdn url/relative path]" rel="stylesheet">
    <script src="[js cdn url/relative path]"></script>
</head>
    <body>
        <h1>Hello, world!</h1>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    </body>Example
</html>

Ńote:
On line no. 8 and 9 you can replace the CDN url mentioned above or download files and set relative path to source code.

Git go to any moment (commit) in time

Get this straight you are accessing repo thats already setup and has commits branches etc in it

Here's how you go to any period of commit in a repo status
Git repo url : https://github.com/thatsmekaustubh/appengine.git
You start by cloning it in your working directory

git clone https://github.com/thatsmekaustubh/appengine.git 004appengine

To know all commits you can find it using this command

git log

To know all branches you can find it using this command

git show-branch -a

This shall give a picture of all flows of development
this in present moment of time is

start__masterBranch
|__experimentsBranch

Commits were

false commit (hello world example)
Hello world example with commmand to run
Users API example

The command shows

git log

all commit id's

You can switch between branches as

git checkout <branchname>

And go to particular commit by saying

git checkout <commitid>

Github getting started

Account Part:
Signup to github and then login
once logged in you will see my repo in which you should click on Create New Repository
Fill in details and say create
On the machine you wish to code and submit changes to github you need a SSH key setup on both peers (mentioned in another tutorial)

Coding Part:
Say,

git init

on your code whereever it is

Code your files (Note: that you are on master right now) [detailed post on branching and merging]

To add all changes say

git add --all

(this stages all non-committed files)

To commit say,

git commit -m 'Your message for the commit'

Syncing part:
You might want to sync this changes to github website so,
Type this

git remote add origin https://github.com/<username>/<reponame>.git

To send commit to server type

git push --all

This shall get your code on git hub open repository to be shared with all

thatsmekaustubh