Here are 7 tips for working remotely

1. Get started early

One way to work from home productively is to dive into your to-do list as soon as you wake up. Simply getting a project started first thing in the morning can be the key to making progress on it gradually throughout the day.

2. Get your technology in order

Make sure to take your laptop home, and don't forget your charger — anything that might make working on your laptop from home a little easier. Make sure you have the right applications. Lots of remote workers are leaning heavily on Slack, Microsoft Teams, Skype, Zoom, or GoToMeeting.

3. Structure your day as you would in the office

To stay on schedule, segment what you'll do and when over the course of the day. If you have an online calendar, create personal events and reminders that tell you when to shift gears and start on new tasks. Google Calendar makes this easy.

4. Creating an “Office Environment” is important

Just because you're working from home doesn't mean you can't have a dedicated workspace or office. Try to set up your workspace in a well-lit room or one with as much natural light as possible. Have a good chair. Stand up.

5. Track your every hour

You must track how you're spending every hour of your day. Self-tracking will help you to decide when you're most productive (and when least). And where you're wasting your precious time.

6. Manage expectations

Have a discussion with your boss about what can actually be accomplished from home. Ask your manager what the priorities are and discuss how tasks will get done.

7. Schedule a distraction break for you

You schedule your tasks, meetings, and calls in the calendar, right? There's one more thing that you MUST plan: Distraction Breaks. Set the time when you'll use the phone or social media. Set the time for lunch. Set the time for a nap. These breaks will recharge you.

CSS learning resources

To understand the fundamentals, http://learnlayout.com/ is a really good website.

  

Documentation

https://developer.mozilla.org/en-US/docs/Web/CSS (This one is the best and most comprehensive, much better than w3school)

Important concepts to understand:

- “display” property - http://learnlayout.com/display.html / http://learnlayout.com/inline-block.html

- the box model + box-sizing - http://learnlayout.com/box-model.html / http://learnlayout.com/box-sizing.html

- position - http://learnlayout.com/position.html

- float - https://css-tricks.com/all-about-floats/

- clear fix (this one is by far the best and easiest to implement) - http://nicolasgallagher.com/micro-clearfix-hack/

- media queries - http://learnlayout.com/media-queries.html

Advanced links to improve techniques and code clean and maintainable code:

- this is a mini-game that helps understanding flexbox and all its possibilities, very fun and interesting! - http://flexboxfroggy.com/

- specificity, how to keep it low - https://css-tricks.com/strategies-keeping-css-specificity-low/

- mobile-first css coding - https://zellwk.com/blog/how-to-write-mobile-first-css/

- tips for sass - http://www.hongkiat.com/blog/sass-tips-tools-for-developers/

CSS/Sass frameworks and tools that can be helpful

http://postcss.org/ - css post-processor, provides very useful tools such as an autoprefixer to handle browser-compatibility

http://bourbon.io/ - sass library

https://purecss.io/grids/ - there are many other grid frameworks. knowing at least one can really help understanding how to create clean and standardised layouts

Blogs of great front-end developers, full of interesting posts!

https://csswizardry.com/archive/

http://nicolasgallagher.com/

https://www.paulirish.com/

https://una.im/

https://addyosmani.com/blog/

http://thesassway.com/

http://hugogiraudel.com/blog/

Conversation between 2 developers in 2016

I bet you won't stop laughing. for front end people ->
https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f

for open stack backend people->
https://circleci.com/blog/its-the-future/

It also made me realise how much I don't know/understand. Again speed at which industry is changing in terms of "new needs after every new solution" and that is a cycle.

Understanding a merge commit - git

This is what I sent today to my colleagues while explaining the reason for mysterious changes in a pull-request

That blank merge commit is the culprit. All changes which should be result of merge are blown away.
Explanation:-
First let's understand that a merge commit is also a commit with changes. Changes in source branch since its diversion (from destination branch) are auto-magically done as part of merge commit in destination branch. 
So a merge occurred without any changes (if its been blown away as it has been the case) in merge commit, is basically a reversal of all changes that have occurred in source branch since the destination branch diverged from it. Hope this clarifies the mystery.

To visualise how chain of commits are formed, diverged and merged, you can refer to the image in Understanding what GIT does under the hood rather than only learning commands and wondering

Basics of Basics of Web Application Development - Crash Course

I've not made mistake of repeating the words "Basics of" as you might have been thinking. I'm just calling these things so basic and integral to web development that they are basics of "basic concepts of web application development"

1. Protocol - Protocol means,

• same terms that are understood or agreed by two or more parties (e.g. client browser and server).
• a language (or call it sign language or code words) that is understood by two or more parties

2. HTTP - is a protocol/language of web. Web clients and web servers talk in this language with each others. For e.g.

Client says (in its code language i.e. HTTP Request) -

POST /v2/sessiontoken HTTP/1.1
Host: app.kashflow.com
Content-Type: application/json
Accept: application/json

{"username":"ismails", "password":"********"}

Interpretation of code language -

• Firstly, it is said by client which means it is a request - HTTP request.
• POST - it's an HTTP method. This means it is a request to create a resource (related to REST concepts). More details here.
• /v2/sessiontoken - it is a part of URL i.e. it will be appended to value of host header which is provided in 2nd line. So whole URL will form like http://app.kashflow.com/v2/sessiontoken. It is address of the recipient of this message i.e. for whom this code worded message is meant for. 
• HTTP/1.1 - This request is created using HTTP/1.1 version of sign/code language. It's modern. It might contain modern slangs ;-)
• From 2nd line starts all request headers and their values follow after colon sign i.e. `:`. Each header has a different meaning and the other party understands it's value accordingly. 
• Host- request will go to this server address. Address of the server for which this message is intended. Client is saying "Hey Mister! I'm talking to you"
• Content-Type - It is a message for the server that the body of this request that follows (last line), is in JSON format. If you want to interpret it please make a note about this. Client says "I'm talking in Spanish. Use interpreter accordingly ;-)"
• Accept - means "As a client I will only understand if you return me a response body which is in JSON format (Spanish language)" 
• After an extra line break comes body of the request. That is actual talk/speech of client to server.

So this is what client has told to the server. Now server gets the request. It understands/interprets/decodes the request. It processes i.e. takes action as per the request. (In this case, client expects the server to verify the username and password, create an authentication token  and respond with the same if username and password are valid. This part is creation/invention of a developer's mind. You as a developer will decide what you want the client to request and program the server to do as per the request.) Finally server informs back (HTTP Response) to the requester (client) about what action it took and/or its results.

Server says (in it's code language i.e. HTTP Response)

HTTP/1.1 201 Created
Content-Length: 829
Content-Type: application/json; charset=utf-8

{"SessionToken":"f3f14a8b-d370-4318-a629-0a124e47c014"}

Interpretation of code language -

• HTTP/1.1 - it specifies version of sign/code language this request in.
• 201 Created - It's HTTP status code. This means as per your request authentication token has been created. Different status codes mean differently. Look for more details here, here or here.
• Then starts HTTP response headers. Similar to request headers, each one has a meaning. 
• Content-Length specifies how long the content of body is
• Content-Type specifies format of response in the body (remember JSON format? Yep, It's client's wish answered)
• After an extra line break comes body of the response

If for example the username and passwords are invalid, the response would have been different

HTTP/1.1 400 Bad Request
Content-Length: 71
Content-Type: application/json; charset=utf-8

{"Message":"Invalid username or password", "Error":"InvalidCredentials"}

Look at HTTP status codes to decode this response.


3. Browser is an HTTP client.
So let's understand how browser talks HTTP.

1. Fire up chrome 
2. Hit F12 key to open up chrome dev tools. Context click and select inspect element if you are on Mac
3. Select network tab on chrome dev tools
4. Tick "Preserve log" checkbox
5. Type google.com in address bar (in chrome main window)
6. Hit enter.
7. Select the first request from the list in chrome dev tools window. 

This is what I get to see. Let's decode it.

HTTP Request

• GET request to `/` (it's a forward slash) i.e. root of the host google.com using HTTP 1.1 version of language
• Browser `Accept`s or understands only one of these "text/html, application/xhtml+xml, application/xml" other certain image formats etc

HTTP Response

• 302 Found . It means server is saying that "You have reached at correct address and with valid parcel (request), unfortunately, the information (resource) you are looking for has moved to other place (specified in location header)"
• Look at the 2nd request in the list (chrome dev tools). Is it a request to same URL which is specified in location header? Yes it is. Browser has interpreted the response correctly and requested other URL as per the response it got from the server.

More walk-through
Basic concepts of web applications, how they work and the HTTP protocol
HTTP in depth

Basic HTTP codes for quick reference

• 2xx - Success codes
• 200 - Success - OK - this simply means whatever you have requested is served. Meaning differs as per the request method and content.
• 201 - Created - this is generally a response of POST or PUT requests
• 204 - No Content - The server has successfully fulfilled the request and that there is no additional content to send in the response payload/body.
• 3xx - Redirection codes
• 301 - Redirction - the information you have requested is now available at some other URL which is provided in `location` header of response
• 302 - Redirection  - same as above. But a newer version. Look for more details on HTTP specs
• 4xx - Bad Request codes
• 400 - Simple bad request i.e. something bad with the request body. Change it correct it and send whatever server expects. Detailed explaination should be provided in response body

Understanding what GIT does under the hood rather than only learning commands and wondering

you can only really use Git if you understand how Git works

Repository

You get a .git folder when you do git init or git clone for the first time. That's your repository. Sometimes also referred to as local repository.

A git repository contains, among other things, the following:

• A set of commit objects.
• A set of references to commit objects, called heads (branch, tag and SHA1 names are types of head).

Remote Repository

If you have cloned from somewhere, so the URL/path (yes it can be local or on network also) you used to clone contains your remote repository. It is identical to what you get in your .git folder after cloning. `git remote -v` command lists all remotes available in the current repository and it's URL.

How GIT stores your commits or commit objects

A commit object contains 3 main things:

• Reference to the parent commit
• Changes  (adds/updates/deletes of words/lines/files) since parent commit or changes of this commit (it doesn't store whole file as it happens in centralized Version Control Systems like SVN/TFS/VSS/Perforce)
• An SHA1 name(38f7a44232faf4651dc085495e4ea770c951d7b2), a 40-character string that uniquely identifies the commit object. The name is composed of a hash of  relevant aspects of the commit i.e. changes, timestamp, parent commit SHA1 name, author etc.

Branches

Branches are basically references of commits or easy way to refer to commits i.e. ugly SHA1 name. In some of the cases when you merge/rebase, these markers for SHA1 name move from one commit to another commit rather than moving/modifying around multiple commits. We will get to know more about it in upcoming parts of this series.

Credits: This post is inspired by Understanding Git Conceptually.

Which is the basic web concept that even most of 2-3 years of experienced Web Developers don't understand

Basic concepts of web applications, how they work and the HTTP protocol
HTTP in depth