Software Engineering is a fascinating world, today millions of developers spend their time crafting new pieces of miracle and reading code snippets from developers across the planet. Let's talk about your interesting relationship with naming a simple variable today.

The naming of variables has an emotional meaning attached to the developer who has coded that program. Some of the factors influencing the code author to name those variables are:

1. Author's understanding of that engineering problem.
2. How the code author solved a similar problem earlier i.e their past engineering experience.

Also, there are some hidden factors which influence their decisions:

1. Their life journey so far.
2. Their emotional state during which the author is coding that program.

Fun fact: So the author came up with that variable name. If you don't understand the author's thinking behind naming that variable, you may struggle to understand the whole program due to that single variable name.‬

‪PRO TIPS:

1. Detach yourself from the name of the variables instead look at what does the program aims at doing and then you will understand the logic line by line.
2. As you have a different perspective of the world around you, you may come up with the idea of renaming those variables which according to you represents the logic better which is also a bias created by your brain. So don’t start cursing the original author of the program.

Example: Reversing a singly linked list in-place

‪Some people create temporary variables naming them as next and prev to accomplish swapping of nodes and pointers, logically and conceptually singly linked list have no previous pointer.

So now you are confused looking at the program what is the role of variable prev here. Instead of getting confused, you should think about what does this program aims to solve. You should go through the code and understood it based on the operations being performed. Suddenly you will have a Eureka moment, now you come up with the idea of renaming those temporary variables as nextNode and newNextPtr which makes a little bit more sense but maybe it's just for you.

That's why understanding the moral, events, decisions, actions of any story are much more important than the character names and their fashion sense in any movie or a book 😝‬

‪That’s one of the hidden reason it's important to get your pull request reviewed thoroughly so that the code could be understood and be relatable by most of the people removing all the emotional and hidden past experiential baggage from it.

TIPS for reviewing a pull request, please check that:

1. PR is small enough (otherwise, break it up)
2. Variable names signify what they are being used for.
3. Code is readable and understandable.
4. Code is unit tested
5. The features are documented
6. Files are located and named correctly.
7. Files are following a decided naming convention like camelCase, PascalCase, snake_case, kebab-case.
8. Error states are properly handled
9. Bonus: Screenshots/screencast demo included

Keep creating and contributing to the world while exchanging your positive thoughts, ideas, actions to improve everything you come across in your life whether its a piece of code, place or a person. Happy Coding!

This blog aims to help you setup React with Redux and you can use my starter kit to kickstart your latest gig!

When do I need Redux?

• Complex data flows
• Inter-component communication
• Non-hierarchical data
• Many actions
• Same data used in multiple places

3 principles of Redux

1. One immutable store
2. Action trigger changes
3. Reducers update state

Flux and Redux Similarities

• Unidirectional flow
• Actions
• Stores

Flux Vs Redux

Pre-requisites

• Knowledge of React and Redux
• NPM 6.2.0
• Node v8+

Action Creator

sampleActionCreator(updateVal) {
	return {
		type: "SAMPLE_ACTION_TYPE",
		val: updateVal 
	};
}

Creating Redux Store

let store  = createStor(rootReducer);

Redux Store

• store.dispatch(action)
• store.subscribe(listner)
• store.getState()
• replaceReducer(nextReducer)

The only way you can change the store is by dispatching an action.

Creating a reducer, reducers must be pure

const initialState = {counter : 0};

export default function sampleReducer(state = initialState, action) {
    let newState;
    switch (action.type) {
        //add your cases according to action types
        case "SAMPLE_ACTION_TYPE":
            /* do the changes to state, keep in mind that state should be kept immutable */
             newState = {...state};
             newState.counter = newState.counter + action.val;
            return newState;

        default: return state;
    }
}

Forbidden in Reducers

• Mutate arguments
• Perform side effects
• Call non-pure functions like Date.now() or Math.random() etc.

Each reducer is a slice of application state

Write independent small reducer function that are each responsible for updates to a specific slice of state. We call this pattern "reducer composition". A given action could be handled by all, some or non of the reducer functions. A particular reducer function runs in accordance with the action type specified by the action dispatched.

Connecting React with redux

• Provider
• Connect

React redux provider

<Provider store={store}>
    <App/>
</Provider>

Connect

Wraps our component so its connected to redux store.

export default connect(
	mapStateToProps,
	mapDispatchTopProps
)(SamplePage)

Notice that here connect is a Higher order component. (Concretely, a higher-order component is a function that takes a component and returns a new component.)

Benefits:

• No manual unsubscribe
• No lifecycle method required
• Declared what subset of state you want
• Enhanced performance for free

A chat with Redux

React: Hey SampleAction, someone clicked this "Increment Value" button

Action: Thanks React!, I will dispatch an action so reducers that care can update state

Store: Ah, thanks action. I see you passed me the current state and the action to perform. I'll make a new copy of the state and return it.

React-Redux: Wow, thanks for the new date Store. I will now intelligently determine if I should tell React about this change so that it only has to bother with updating the UI when necessary.

React: I got the new data that has been passed down via props from the store. I'll update the UI to reflect this!

Why we are using Redux Thunk?

Redux Thunk is a middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. We can utilize action creators to achieve tasks like calling APIs, calling promises and only dispatching once we have received the response from the called entity.

Popular alternative to redux thunk : Redux Saga

Link to this starter kit : https://github.com/dynamicsingh/create-react-redux-thunk-app

Follow this repository as I keep updating as per the new version releases.

This blogs aims to help you setup GraphQL with NodeJS from scratch and help you make your own starter kit.

GraphQL is a very powerful query language used to communicate data between client and server.

• It allows more flexible & efficient approach than REST.
• No more Over- and Underfetching
• Benefits of a Schema & Type System
• Rapid Product Iterations on the Frontend
• GraphQL is platform independent

Pre-requisites

• Initial knowledge of GraphQL
• NPM 6.2.0
• Node v8+

Creating GraphQL server on NodeJS using express

• We will setup entry point to the graph in NodeJS.

Go to your terminal application

create a new directory

mkdir graphql_proj

then move inside that directory

cd graphql_proj

Initiate a project using NPM which will create package.json used for our dependency management.

npm init

answer all sort of questions like name of project, version, author, keywords, once done you would observe a package.json file inside the graphql_proj directory

Now lets installed our required dependencies

sudo npm install express --save

create express server

create a file inside graphql_proj directory named app.js and use the following code to make your express server up and running

const express = require('express');

const app = express();

app.listen(4000, () => console.log('Listening to 4000'));

and run using node command

node app.js

You should see "Listening to 4000" on your terminal.

Now lets setup GraphQL with this application

Install graphql and express-graphql for running GraphQL on our express server

sudo npm install graphql express-graphql

once the dependencies are installed, we will setup an endpoint for graphQL using which client can interact to our GraphQL server.

const express = require('express');

//allows express to understand graphql
const graphqlHTTP = require('express-graphql');

//initiate express
const app = express();

//setup middleware and graphqlHTTP handle graphql request
app.use('/graphql', graphqlHTTP({

}));

app.listen(4000, () => console.log('Listening to 4000'));

now if we open browser and goto localhost:4000/graphql, it gives

{"errors":[{"message":"GraphQL middleware options must contain a schema."}]}

to fix this error we will define the schema for our middleware function

Lets create our schema in  in our schema directory

i.e graphql_proj/schema/schema.js

We use loadash a commonly used library for data structure manipulation and operations.

const graphql = require('graphql');
const {GraphQLObjectType, GraphQLString, GraphQLSchema} = graphql;

const _ = require('loadash');


//schema defines the object types and relation b/w object types
//so the graph will have vehicles and car-manufacturers as object types

//dummy data
const vehicles = [
    {name: 'Jeep Compass', type: 'SUV', id: '1'},
    {name: 'Mercedes-Benz A-Class', type: 'Hatchback', id: '2'},
    {name: 'Mercedes S class', type: 'Sedan', id: '3'}
];

const VehicleType = new GraphQLObjectType({
    name: 'Vehicle', //name of the object type
    fields: () => ({ //use function as will have multiple types
        id: {type: GraphQLString},
        name: {type: GraphQLString},
        type: {type: GraphQLString}
    })
});


const RootQuery = new GraphQLObjectType({ //how we can jump into graph
    name: 'RootQueryType',
    fields: {
        /* name of the query used
         when requested from graphiql */
        vehicle: {
            type: VehicleType,
            args: {id: {type: GraphQLString}},
            resolve(parent, args) {
                /*this is where we can place our code
                 get data from db or APIs in real scenerio*/
                return _.find(vehicles, {id: args.id});
            }
        }
    }
});

/*query for vehicle
    vehicle(id:"2") {
        name,
        type
    }
 */


module.exports = new GraphQLSchema({
    query: RootQuery
});

and now graphql_proj/app.js becomes

const express = require('express');
const schema  = require('./schema/schema');
//allows express to understand graphql
const graphqlHTTP = require('express-graphql');

//initiate express
const app = express();

//setup middleware and graphqlHTTP handle graphql request
app.use('/graphql', graphqlHTTP({
    schema : schema
}));


app.listen(4000, () => console.log('Listening to 4000'));

Now setting up graphiql (GraphQL client interface) in graphql_proj/app.js

const express = require('express');
const schema  = require('./schema/schema');
//allows express to understand graphql
const graphqlHTTP = require('express-graphql');

//initiate express
const app = express();

//setup middleware and graphqlHTTP handle graphql request
app.use('/graphql', graphqlHTTP({
    schema : schema,
    graphiql: true //this is used to
}));


app.listen(4000, () => console.log('Listening to 4000'));

Now go to browser and you will see graphiql up and running at http://localhost:4000/graphql

Now paste the following query on left side of graphiql GUI to see the result

vehicle(id:"2") {
	name,
	type
}

I hope you enjoyed this blog.

We will discuss the benefits and use case for each of the paradigm.

Callbacks

1. Callback is a Higher-order Function
2. Came as part of ES5
3. Callback functions are derived from a programming paradigm known as functional programming
4. Problem: Pyramid of Doom / Callback Hell – when too many callbacks are nested in one another, it becomes difficult to understand and predict the code.

example of simple callback

function One(a, cb){
	cb(a+5);
}

One(4, (val)=> { //callback function
	console.log(val);
});

Promises

1. Use promises whenever you are using asynchronous or blocking code.
2. Each promise is immutable
3. Came as part of ES6
4. Promises are used to avoid callback doom
5. Promises are more powerful than callback as they are compose-able
6. To run promises in parallel create an array of promises and then use Promise.all(promisesArray)
7. Promise methods: Promise.prototype.catch(onRejected) Promise.prototype.then(onFulfilled, onRejected) Promise.prototype.finally(onFinally)
8. Static methods:  Promise.reject(reason) Promise.resolve(value) Promise.all(iterable) Promise.race(iterable)

const myFirstPromise = new Promise((resolve, reject) => {
  // do something asynchronous which eventually calls either:
  //
  //   resolve(someValue); // fulfilled
  // or
  //   reject("failure reason"); // rejected
});

Generators

1. Came as part of ES6
2. Generators are functions that you can use to control the iterator. They can be suspended and later resumed at any time.
3. Yield returns a value only once, and the next time you call the same function it will move on to the next yield statement.
4. Generators achieve yield delegation using chaining
5. Generators return iterators, and it means we can actually iterate over it synchronously.

//ways of declaring generators

function * generator () {}
function* generator () {}
function *generator () {}

let generator = function * () {}
let generator = function* () {}
let generator = function *() {}

let generator = *() => {} // SyntaxError
let generator = ()* => {} // SyntaxError
let generator = (*) => {} // SyntaxError


class MyClass {
  *generator() {}
  * generator() {}
}

const obj = {
  *generator() {}
  * generator() {}
}

function * generator() {
  yield 5;
}

const gen = generator();

gen.next(); // {value: 5, done: false}
gen.next(); // {value: undefined, done: true}
gen.next(); // {value: undefined, done: true}

For React Devs: Redux saga makes use of generators in sagas

function* ourSaga() {
  yield take('START_REGISTRATION');
  yield put(showLoginPopup());
}

sagaMiddleware.run(ourSaga);

Async/Await

1. async function returns promise implicitly
2. Came as part of ES7
3. The async function automatically knows what to do if you await a Promise—it will pause the function (just like with generators) until the Promise resolves
4. async await makes it much more easier to use promises. Developers from synchronous programming background will feel at home while using asyncand await
5. await blocks the execution of the code within the async function in which it is located.
6. If the output of function2 is dependent on output of function1 then I use await.
7. If two functions can be run in parallel create two different async functions and then run them in parallel.
8. Promise creation starts the execution of asynchronous functionality.
9. An asynchronous function is a function which operates asynchronously via the event loop, using an implicit Promise to return its result.
10. Every time you use await remember that you are writing blocking code. Over the time we tend to neglect this.
11. If your code contains blocking code it is better to make it an asyncfunction. By doing this you are making sure that somebody else can use your function asynchronously.

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  var result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: 'resolved'
}

asyncCall();

Before users start reading a single word of text on a web- site, they are already judging the typography. More than any other design element, type sends instant messages about a site’s content and purpose. Typography — its size, style, and system help to tell people what all this content is actually for. The quality and tone of a website’s typography also send instant messages about the people who made the site. Good type makes you look good. Bad type makes you look bad. We’ve all landed on a website that we immediately know is a dumping ground for stolen content and crappy ads. Without even reading that come-on for pimple cream or the latest work-at-home scheme, we’re already hitting the back button in search of a more savoury place to invest our time. Type is design’s smallest atomic unit — the framework for everything we try to communicate with our boxes, grids, CSS properties, and the other elements that go into making a website. A typeface’s contrast influences how small you can set that typeface so it’s still legible on your phone. The tools we use and the choices we make affect a design up and down the supply chain. Typography is a design’s voice.

When you choose a font, you not only make yourself aware of how you affect communication, but you also put yourself in reader’s shoes. Don’t just throw up your hands and use Helvetica (or, gasp!, Arial). You can do better than that, and I’ll show you how. Let's move on and nail each and every aspect related to typography

HOW WE READ
Type and typography wouldn’t exist without our need to express and record information. This is what makes typography not only an art of communication but one of nuance and craft because, like all communication, its value falls somewhere on a spectrum between success and failure. Reading is so intrinsic to every other thing about typography, it’s the best place for us to begin. Wait wait what? Did I use the two words Type and Typography? But you might be thinking they are same! Let's make your concepts clear :

Type: Characters or letters that are printed or shown on a screen.

Typography: Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point size, line length, line-spacing (leading), letter-spacing (tracking), and adjusting the space within letters pairs (kerning).

THE ACT OF READING
When I first started designing websites, I assumed everyone read my work the same way I did. It’s appealing to think that’s the case, but reading is a much more nuanced experience. Reading is not only informed by what’s going on with us at that moment but also governed by how our eyes and brains work to process information. What you see and what you’re experiencing as you read these words is quite different. As our eyes move across the text, our minds gobble up the type’s texture — the sum of the positive and negative spaces inside and around letters and words. instead, our brains do the heavy lifting of parsing the text and assembling a mental picture of what we’re reading. Without getting too scientific, let’s look at the physical process of reading isn’t linear. Instead, our eyes perform a series of back and forth movements called saccades, or lightning-fast hops across a line of text. A saccade’s length depends on our proficiency as readers and our familiarity with the text’s topic. If I’m a scientist and reading, uh, science stuff, I may read it more quickly than a non-scientist, because I’m familiar with all those science words.

Thank you, folks, for reading, this article was on special request of my friend Kushal Shah! I hope you guys like it!

Some awesome typographical rules which will help you ace the game of web development like a ninja. Follow these rules and make your user comfortable and happy.

1. Line height(in pixels) ÷ body copy font size(in pixels) = 1.48
1.5 is commonly used in classic books or novels, we follow this thumb rule. There are very few websites using anything less than this. But all across the web 1.48 is the standard value which makes your content look stable and readable.

2. Line length(pixels) ÷ line height(pixels)=27.8
The average line length is 538.64 pixels(excluding padding and margin), which is quite large considering that many websites still have body which 12 to 13 pixels of font-size.

3. Space between paragraph(pixels) ÷ line height (pixels) = 0.754
The paragraph spacing i.e space between the last line of one paragraph and the first line of the next paragraph rarely equals the leading(which is the main characteristic of perfect vertical rhythm). More often, paragraph spacing is 75% of paragraph leading because leading usually includes the space taken up by descenders and because most characters do not have descenders, additional white space is created under the line to create a perfect design for readers. White space improves comprehension i.e it de-clutters a page by giving items room to breath.

4. Optimal number of character per line is 55 to 75
If we look at classical typographical books, the optimal number of characters per line is between 55 to 75, but between 75 and 85 characters per line is more popular in practice. The appropriate number of characters in a line helps user to read more without loosing focus as well as it is comfortable for eyes to read with least possible movement of eye ball.

React lifecycle hooks are methods where you can do appropriate things

We'll look at all the available lifecycle methods, the order in which they are called and what kind of operations you can perform within a particular life cycle hook.

React version in discussion: v16

constructor()

can be used to set initial state of the component

componentWillMount()

• You can initialize state and initial props here
• Only hook that run on server rendering
• Don't make a ajax call here
• Sometimes based on props you can change the state here
• You can set global events like eg :

componentWillMount() {
		if(window.innerWidth > 500) {
           this.setState({innerWidth: window.innerWidth})                    
        }                         
}

render()

• Don't set state here, will lead to re-render
• DOM element can be removed once this is called

componentDidMount()

• This runs after the component has rendered
• This doesn't run until the child components have completed their hooks
• Only runs during initial life cycle
• Can make a ajax call here
• Can do subscriptions here and unsubscribe in componentWillUnmount method
• Don't run setState here

componentWillRecieveProps(nextProps)

• Not called on initial render
• Runs when you re-render by updating the state or prop
• We can setState here

ShouldComponentUpdate(nextProps, nextState)

• Runs when there is change in state or props
• Used for controlling the re-rendering of the component
• Can check the change in state
• returning false will will stop re-rendering of this component. This return true by default.
• Don't run setState here

componentWillUpdate()

• Runs after shouldComponentUpdate
• This is similar to ComponentWillMount
• Can do all set some variables based on states and props
• Don't run the setState here to avoid infinite loop

componentDidUpdate()

• Runs after updating render()
• Can setup third party UI elements here
• Can call setState here

ComponentWillUnmount()

• Runs when component dies
• Can cancel any outgoing network requests
• Can remove all event listeners associated with the component
• You can unsubscribe the subscriptions here.
• Don't run setState here

Sample Component will all lifecyle methods

class App extends Component {
    constructor() {
        super();
        this.state = {
            name: 'John';
    }
    }

    componentWillMount() {

    }

    componentDidMount() {

    }

    componentWillRecieveProps(nextProps) {

    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate() {

    }

    componentDidUpdate(prevProps, prevState) {

    }

    componentWillUnmount() {

    }

    render() {
        return <div>Hi</div>;
    }
}

Simple example showcasing lifecycle methods triggering order when a ParentComponent renders a ChildComponent

Update to this Article

These life cycle method are valid for React version before V.1.63

Methods deprecated in React V16.4 are:

• componentWillMount and can be used as UNSAFE_componentWillMount
• componentWillReceiveProps and can be used as UNSAFE_componentWillReceiveProps and replaced by getDerivedStateFromProps in V16.4
• componentWillUpdate and can be used as UNSAFE_componentWillUpdate and replaced by getSnapshotBeforeUpdate in V16.4

New article for lifecycle methods coming soon...

Cool colors include green, blue and purple are often more soft than warm colors. They are colors of night, water and are usually calming, relaxing, and somewhat reserved.

Blue (primary color)

Blue is the only primarily color within the cool spectrum, which means the other colors are created by combining blue with other warm colors i.e blue + yellow = green and blue + red = purple. Use cool colors in your designs to give a sense of professionalism or calmness.

Blue is often associated with sadness in the English language. Blue is also used extensively used to represent calmness and responsibility. Light blues can be refreshing, friendly and gives young feeling to design. Dark blues are more strong and reliable. Blue sometimes is also associated with peace and has spiritual and religious connotations in many

Green(secondary color)

Green is a very down-to-earth color. It can represent new beginnings and growth. It also signifies renewal and abundance. Alternatively, green can also represent envy or jealousy and lack of experience.

In design, green can have a balancing and harpooning effect and is very stable. It can be used designs related to wealth, stability, renewal and nature. Brighter greens are more energizing and vibrant which gives a fresh look to design, while olive greens are more representative of the natural world. Darker greens are most stable and representative of affluence.

Purple (secondary color)

Purple is associated with royalty. It is a fusion of red and blue and takes on some attributes of both. It’s associated with creativity and imagination. In Thailand, Purple is color of mourning for widows. Dark purples are traditionally associated with royalty and wealth. while lighter purples like lavender are associated with romance. In design, dark purples can give a sense of wealth and luxury while light purples are softer and are associated with spring and romance. Brighter purples more reddish gives both rich and energetic look.

I hope you enjoyed learning about cool color. In the next part, we will learn about Neutral colors.

Color in design is very subjective. What evokes one reaction in one person may evoke a very different reaction in someone else. Sometimes this is due to personality or sometimes due to cultural background. Color theory is science in itself. Sometimes changing the exact hue or saturation can evoke a completely different feeling or even can change the mood. We see colors everywhere flowers, sky, rocks, birds and what not. But within our brain colors are processed much faster than a supercomputer which attaches us to a different feeling, emotion. Some colors may make you happy, some make you excited and some may calm or relax you.

Warm colors include red, orange and yellow and variations of those three colors. These are the colors of fire, of fall leaves and of sunsets and sunrises and are generally energizing, passionate, and positive.You may use warm colors in your design reflect passion, happiness, enthusiasm and energy.

Red(Primary color)

Red is a very hot color. It’s associated with fire, violence and warfare. It’s also associated with love and passion. Red can actually have an effect on people raising their blood pressure and respiration rates.

Red can be associated with anger but also associated with importance, now you may figure out why the carpet is red at award shows.

Outside the western world, Red has different associations. For example, China, red is the color of prosperity. It can also be used to attract good luck. In South Africa, however, red is worn for mourning. In India, Red is worn by brides on their wedding days.

In design, red can be a powerful accent color. It can be having overwhelming effect if it’s used too much is designs, especially in purest form. It’s a great color to use when power or passion want to be portrayed in the design. Red can be very versatile, though, with brighter versions being more energetic and darker shades being more powerful and elegant. Red accents stand out against the black background and give a powerful high-end feeling to the site whereas darker shades of red give a powerful and elegant feel to the site and the very bright accents on the site give a sense of energy and movement. It is observed that Dark red, when combined with white and grey, gives a very elegant and professional impression.

Orange(falls between red and yellow)

Orange is a very vibrant and energetic color. It can be associated with the earth and with autumn. Because of its association with the changing seasons, orange can represent change and movement in general. In India Orange is used to represent spirituality. Because orange is also associated with the fruit of the same name, it can also be associated with health and vitality. In designs, orange commands attention without being as overpowering as red. It’s is considered more friendly and inviting and less in-your-face color. Orange accents can add visual interest and bring attention to design.

Yellow(Primary color)

Yellow is considered the brightest and most energising of the warm colors. it’s associated with happiness and sunshine. Yellow can also be associated with hope, as can be seen in some countries yellow ribbons are displayed by families who have loved ones at war. Yellow is also associated with danger not as strong as red. In countries like Egypt, yellow is for mourning. In Japan, it represents courage and in India, it’s a color of merchants.

In designs, bright yellow can lend a sense of happiness and cheerfulness. Softer yellows are used as a gender-neutral color for babies(rather blue or pink) and young children. Light yellows also give a more calm feeling of happiness than bright yellows. Dark yellows and gold-hued yellows can sometimes look antique and be used in designs where a sense of permanence is desired. Bright yellow is also used as a highlighter in physical as well as design world and is capable of attracting attention to the content or design. Background with yellow color can be showcase summer on the site to the visitors.

Hey, friends, next article would be related to Cool colors so stay tuned!

The life, meaning of which no dictionary contains
living or died, life forever sustains
Though the growth never stops, thy is the time
Life keeps changing its colors with the changing seasons and time
People called it a future, but they are the unborn colors
dark or shallow, smooth or rough
life is never easy never tough

With the growing age, these colors might change your choice
but loving the shallow beauty of cold colors never dies
Live as you want because GOD has not written any book
But a reference we called Gita, Bibble or Kuraan on which we are somehow hooked

There always lives a Power which changes these colors
Sometimes for dollars or for White Collars
The life, meaning of which no dictionary contains
living or dead, life forever sustains
Colors are the only beauty which every morning change!

By - Bhupinder Singh

School a word which is too small,
But stands for the life of students as a wall.
I don’t remember I cried or smiled on my first day at school,
But have tried to make people remember me as a cool.
All mischiefs and mess I created in my primary days,
I won’t forget them in my sorrow ways.
I was nothing but a seed,
But teachers have made me a wild breed (Lion)
This is the place where I stood in queue,
And made myself to stand out of the queue to prove myself true.

These fast forward days are hard to compete with,
But these days have taught me that only competition around is me.
Summer passed, winters arrived and shoulders strive,
But coming to school is the same path drive.
Every semester exam is like a hammer on the brain,
But only GODS (teachers) know who can handle this strain.
This is that sacred place where I have experienced my thoughts changing,

With the years changing and so people experienced me changing.
These days will never come back,
Though teachers always know, I am on the right track
I can’t express my inner feeling,
And there is no secret for revealing.

By - Bhupinder Singh