My Ultimate Self Guide - for Better Living

| Comments

Everyone has their own way of living

This here is my self-guide I use to improve myself in a consistent manner. I learned this from many different sources(articles, books, word of mouth, etc.,) so If I haven’t mentioned your name/source let me know in comments I will give credits for the same.

Morning’s

“Each good morning we are born again, what we do today is what matters most” — Buddha

  • Become an early riser. It’s hard at the start, but if you do anything for 30 days a new habit is created.
  • If you have the gift of waking up automatically you are gifted, Others(majority) don’t keep your alarm in reachable area/in bed
    • Avoid Snooze/Negotiating with your pillow, As soon as the alarm goes, wake up and change the environment to get yourself up easily.
    • Do some activities immediately (Wash your face, Brush, Etc.,)
  • Do exercise in the morning to feel happy, be more productive & create a healthy lifestyle.
    • At least a few mins is good enough to boost Endorphins (1 min is enough for new starters - check Kaizen Technique)
  • There are hundred’s of articles explaining the benefits of doing exercise in the morning. So I leave it there

Waking up early and developing a routine can transform you into a very intelligent, organized, and successful person within a relatively short period of time (approx. 1–10 years). Just imagine this in your mind (2Hrs every day for 10 years)

“Lose an hour in the morning, and you will be all day hunting for it” — Richard Whately

First Things First

“Good is the enemy of great.” — Jim Collins

It’s easy to start the day with something that seems to be good/easy but ultimately isn’t all that important. Watch below video where Stephen Covey explains the importance of putting “first things, first.”

  • Read uplifting content to motivate, inspire you for the day (max 10 mins)
  • Do #1 priority task in the morning. Never let easy/small task fill in your day
  • Learn how to Prioritize your tasks

Notes on Self Development

Self-improvement isn’t a destination. You’re never done

  • Create Goals (Daily, Weekly, Monthly, Yearly)
    • Avoid Unrealistic goals: Do not overcommit and get disappointed if you don’t achieve.
    • Create reasonable and achievable goals to get your Endorphins level up. One step at a time!
  • Maintain goal(Daily, Weekly, Monthly, Yearly) streaks to make yourself consistent
    • Use App like Today to set time-based reminders and track streaks
  • Give 10x the value of what you say you will
    • It’s not about the price, it’s the value that matters.
    • “Quality is not an act, it is a habit.” — Aristotle
  • Use Kaizen Technique to create habits
    • “Little strokes fell great oaks.” —  Benjamin Franklin
    • Do something useful every day just for 1 min(very less time and easy do-able) and over the time it will become as your habit
  • Wherever You Are, Make Sure You’re There, Most people are never present
    • Google Search: In flow, Deep work, Focus.
  • The world looks for the best always; not the average person
    • Read Book: The Dip A Little Book That Teaches You When to Quit (and When to Stick)
    • If you don’t quit on bad/time-consuming tasks you are not going to succeed on that righteous goal in your todo list
    • So quit on unwanted things and spend time on useful things and be the best
  • Be consistent
    • The difference between Amateur and Professional is; the later is consistent no matter what.
    • If you’re not that good now, consistency will make you better.
  • Embrace multiple learning techniques and never quit learning
    • “Anyone who stops learning is old, whether at twenty or eighty.” — Henry Ford
    • By consistent learning - You make new connections in your brain, Open yourself to a new world of experience

Keep Your Energy Up

  • Two keen things to be limitless - Body, Mind
    • Body: Cardio(run), Strength(gym), Flexibility(yoga, sports)
    • Mind: Meditation, Brain Exercise
  • Eat healthily, Drink 3-4 liters of water every day
  • Stop looking for quick methods to make your body fit as it’s not going to last, instead gradually adopt to healthy life (Approx 1-4 Years)

Things to do before you go to sleep

The success of your morning begins the night before.

  • Having 7Hrs of good sleep is very important to wake up fresh and recharge your brain. Not having enough sleep ruins next day, so avoid it at any cost.
  • Take a few mins every night to mentally prepare yourself for next day. Make sure you write down your #1 priority task for tomorrow
  • Turn off WIFI/Mobile data
  • Keep your mobile/alarm far away from bed (To wake yourself up in one alarm)
  • Read a physical book, Avoid e-devices(kindle/tablet/mobiles)
  • Think about the tasks & goals you need to accomplish tomorrow and go to sleep
    • “Never go to sleep without a request to your subconscious.” — Thomas Edison
    • Your subconscious mind works when you sleep (Book: The Power of Your Subconscious Mind, Google search to find out more)

When you wake up the next morning, you’ll be primed for success. The only thing you need to do is immediately get out of bed.

“Successful mornings don’t happen by chance. They happen by choice. Neither does a successful life.” — Benjamin P. Hardy

CSS Style Guide - BEM Approach

| Comments

I’m trying to maintain a living CSS style guide which helps as a self guide for me & to get insights from others. Most of the content is picked from Spatie CSS Guidelines & few from Chainable BEM modifiers

Feel free to drop on comments section about what you use and what you feel can be changed here.

Table of Contents

BEM

BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development. I use a slightly changed modifier naming convention(see below).

1
2
3
4
5
6
7
8
9
10
11
12
.component                            /* Component */
.component__element                   /* Child */
.component__element__element          /* Grandchild. PS. Avoid Grandgrandchild */

.--modifier                           /* Single property modifier, can be chained */

.h-property                           /* Helpers (eg. `h-align-right`, `h-margin-top-s`) */

.js-hook                              /* Script hook, not used for styling */

.items                                /* Use plurals if possible */
.item

.component and .component__element

1
<div class="menu"></div>
  • A reusable component, which can be shared between pages/modules
  • Children are separated with __
  • All lowercase, can contain - in name
  • Avoid more than 3 levels so that your html is not filled with lengther class names
1
2
3
4
5
6
<div class="menu">
    <div class="menu__item">
        <div class="menu__item__icon"></div>
        <div class="menu__item__name"></div>
    </div>
</div>

Be descriptive with component elements. Consider class="team__member" instead of class="team__item"

1
2
3
<div class="team">
    <div class="team__member"></div>
</div>

You can use plurals & singulars for readability. Consider class="member" instead of class="members__member"

1
2
3
<div class="members">
    <div class="member"></div>
</div>

.–modifier

1
<div class="button --rounded --active"></div>
1
2
3
4
5
6
7
8
9
.button {
    &.--rounded {
        ...
    }

    &.--active {
        ...
    }
}
  • A modifier changes only simple properties of a component, or adds a property
  • Modifiers are always tied to a component, don’t work on their own
  • Multiple modifiers are possible. Each modifier is responsible for a property: class="alert --success --rounded --large". If you keep using these modifiers together, consider a variation (see below)
  • Since modifiers have a single responsibility, the order in HTML or CSS shouldn’t matter

.h-property

1
2
3
4
<div class="h-align-right"></div>
<div class="h-visibility-hidden"></div>
<div class="h-text-ellipsis"></div>
<div class="h-margin-top-s"></div>
  • Prefix with h- helps identify easily that’s its a helper class
  • Reusable utility classes throughout the entire project
  • Each helper class is responsible for a well-defined set of properties.
  • It should be clear that these are not components

.js-hook

1
2
3
4
5
<div class="js-map"
     data-map-icon="url.png"
     data-map-lat="4.56"
     data-map-lon="1.23">
</div>
  • Use js-hook to initiate handlers like document.getElementsByClassName("js-hook")
  • Use data-attributes only for data storage or configuration storage
  • Has no effect on styling whatsoever

DOM structure

  • All styling is done by classes (except for HTML that is out of our control)
  • Avoid #id’s for styling
  • Make elements easily reusable, moveable in a project, or between projects
  • Avoid multiple components on 1 DOM-element. Break them up.
1
2
3
4
5
6
7
<!-- Try to avoid, news padding or margin could break the grid-->
<div class="grid__col news"></div>

<!-- More flexible, readable & moveable -->
<div class="grid__col">
    <article class="news"></article>
</div>

Tags are interchangeable since styling is done by class.

1
2
3
4
<!-- All the same -->
<div class="article"></div>
<section class="article"></div>
<article class="article"></div>

Class Visual Grouping

1
<div class="js-hook component__element --modifier helper"></div>

Visual class grouping can be done with … | …

1
<div class="js-news-click | news__item --blue --small --active | h-padding-top-s h-align-right"></div>

Code Style

Use stylelint to lint stylesheets. Configuration is done at custom .stylelintrc which extends stylelint-config-standard.

1
2
3
4
5
6
7
8
9
10
{
  "extends": "stylelint-config-standard",
  "ignoreFiles": "resources/assets/css/vendor/*",
  "rules": {
      "indentation": [2],
      "at-rule-empty-line-before": null,
      "number-leading-zero": null,
      "selector-pseudo-element-colon-notation": "single",
    }
}

Installation

1
2
yarn add stylelint
yarn add stylelint-config-standard

Usage

Most projects have a lint script (with the –fix flag) available in their package.json.

stylelint resources/assets/css/**/**.css --fix -r

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/* Comment */
.component {                      /* Indent 2 spaces, space before bracket */
    @at-rule ;                    /*  @at-rules first */

    a-property: value;            /* Props sorted */
    b-property: value;
    c-property: .45em;            /* No leading zero's */

    &:hover {                     /* Pseudo class */

    }

    &:before,                     /* Pseudo-elements */
    &:after {                     /* Each on a line */

    }

    &.--modifier {

    }

    &.--modifier2 {

    }

    /* Try to avoid */
    @apply ;                     /* Use only for variations */

    &__subclass {                /* Unreadable and not searchable */

    }

    h1 {                         /* Avoid unless you have no control over the HTML inside the `.component` */

    }

}
                                 /* Line between classes */
.component__element {            /* Separate class for readability, searchability instead of `&__element`*/

}

Folder/File structure

5 folders and a main app.css file:

1
2
3
4
5
6
7
|-- base       : basic html elements
|-- components : single components
|-- helpers    : helper classes
|-- pages      : page related styles
|-- settings   : variables
|-- vendor     : custom files from 3rd party components like select2, jqueryui etc.
|-- app.css    : main file

app.css

Import in proper order to take care of variable declaration & specificity

1
2
3
4
5
6
@import "settings/**/*";
@import "base/**/*";
@import "components/**/*";
@import "pages/**/*";
@import "helpers/**/*";
@import "vendor/**/*";

Base Folder

Contains resets and sensible defaults for basic html elements.

1
2
3
4
5
6
7
|-- normalize.css
|-- html.css
|-- a.css
|-- p.css
|-- heading.css (h1, h2, h3)
|-- list.css (ul, ol, dl)
|-- 

Components Folder

Stand-alone reusable components with their modifiers.

1
2
3
4
|-- modal.css
|-- buttons.css
|-- table.css
|-- 

Helper Folder

Stand-alone helper classes for small layout fixes.

1
2
3
4
5
|-- align.css
|-- margin.css
|-- padding.css
|-- text.css
|-- 

Pages Folder

Page related styles (not reusable but needed for pages)

1
2
3
|-- about.css
|-- dashboard.css
|-- 

Settings Folder

Settings for colors, typography, etc. You can start small with one settings.css and split them up in different files if your variables grow.

1
2
3
4
5
|-- color.css
|-- fonts.css
|-- grid.css
|-- typography.css
|-- 

Vendor Folders

Imported and customized CSS from 3rd party components (you don’t want to lint this).

1
2
3
|-- jquery-ui.css
|-- select2.css
|-- 

This guide is inspired from various sources, thanks to those who shared their views which help me build this self guide.

Tools I Use

| Comments

“We become what we behold. We shape our tools, and thereafter our tools shape us.”
― Marshall McLuhan

Tools are very important for all professions, this article covers the main tools I use for my everyday work (I work as a frontend developer & user experience designer, so if you are in the same profession you may find this useful)

I will try to keep this post updated. (Last Updated: 18-Aug-2017)

Terminal

  • iTerm2 - my default terminal. I love those spilt pane in iterm2, try hitting Command (⌘) + d to split vertically & Command (⌘) + Shift + d split horizontally
  • oh-my-zsh - gives super power to my shell. Many useful Plugins & Themes.
  • z - remembers your frequently used directory and helps quickly cd into it, check the wiki for more details.

Code Editor / IDE

  • Visual Studio Code - recently became a fan of this open source editor from Microsoft. Love those git integrations and fast performance of the editor.
  • Atom - second favorite and minimal editor.
  • Sublime Text - super fast, Some of my favorite plugins

Browsers

Browser Extensions

  • Tab Suspender - chrome sucks a lot of memory and slows your machine, Use this extension which will kill unused open tabs and increase your RAM space
  • Tab Switcher - fast switch between open tabs. a) Press Command (⌘) + Shift + k use up & down arrow to navigate b) Click return to focus on the tab.

Will add a separate blog post about all of my extensions

Design

  • Sketch - pretty sleak and ease to use app for designing mobile, web apps.
  • Photoshop - all time favorite tool for designing mobile/web apps, graphics, branding, etc.,
  • Omnigraffile - for Functionality map preparation, User Interface Wireframing.

Check my design profile on Dribble, Behance

Productivity

  • Alfred - powerful mac spotlight alternative
  • Evernote - for quick notes taking
  • Skitch - for annotation on screenshots
  • LICEcap - quick record your screen and generate it as GIF
  • Quicktime - for screen casting, audio recording
  • Moom - quickly make any window full screen, snape to grip, move, etc.,
  • Fanstical2 - calander app with great user experience and nice look & feel

Others

  • Rocket - emoji autosuggestion on any app like slack.
  • Muzzle - automatically silence notifications while screensharing (PS. Read those funny notification messages on muzzle website)

Thanks for reading, let me know in the comments about what you use!

Remove Javascript console.log Automatically

| Comments

When writing a large JavaScript application, it is quite often that console.log and other debugging statements are left here and there. Obviously, at one point those statements need to be removed for the production version or even when the code needs to be checked in into the source repository. There are many different ways to do this, there exists a new tool called groundskeeper which can do this removal for you.

Written for Node.js, groundskeeper (GitHub: github.com/Couto/groundskeeper) is created by Luís Couto to handle logging removal by understanding the syntax tree of the code and deleting the relevant parts. It is not based on regular expression at all. Groundskeeper parses the code (via Esprima) and modify the syntax nodes (via falafel) associated with any logging. Beside a command-line tool, groundskeeper is also a library ready to be used in any other tools and build systems.

Using groundskeeper is pretty simple (as its documentation explained). Let’s assume we have the following filter-debug.js:

1
2
3
4
5
6
7
8
9
10
function filter(list, age) {
  var result = [];
  list.forEach(function (person) {
    if (person.name && person.age > age) {
      console.log('including', person.name);
      result.push(person);
    }
  });
  return result;
}

After its package is installed, running something like:

groundskeeper < filter-debug.js > filter.js

will give the following filter.js:

1
2
3
4
5
6
7
8
9
10
function filter(list, age) {
  var result = [];
  list.forEach(function (person) {
    if (person.name && person.age > age) {

      result.push(person);
    }
  });
  return result;
}

The line containing console.log is now a blank line. Because groundskeeper doesn’t delete the line, the processed output still has the same amount of lines of code as the original one.

How about debugger? We know that this statement may cause some problems with old web browsers. Fortunately groundskeeper can also get rid of any debugger statements in the code. In fact, you can even nuke any other custom application logger you might have. Here is a code fragment:

1
2
3
debugger
var list = filter(customers, 25);
RentalApp.Logger.print(JSON.stringify(list, null, 2));

which can be processed via:

groundskeeper -n RentalApp.Logger < rental.js

and give you the remaining output: var list = filter(customers, 25);

The biggest benefit of automatic removal is when it is combined with Git pre-commit hook so that no more manual step is necessary. This is pretty similar to the use of syntax validation trick. Here is an example of such a hook:

1
2
3
4
files=$(git diff-index --name-only --diff-filter=ACM HEAD | grep -P '\.js$')
for file in $files; do
  groundskeeper < $file > $file.tmp && mv $file.tmp $file
done

All touched *.js files will be processed via groundskeeper before they are checked in. This way, none of them will have stray console.log, debugger statements, or any other custom logger calls anymore. Thus, your repository is guaranteed to be free from debugging leftovers!

Avoiding Unwanted Scopes Creation in AngularJS

| Comments

One of the most appreciated features of AngularJs is scopes, at the same time scopes will give you nightmare if don’t avoid unwanted scopes from creating.

Preventing ng-model data scope is one of the main challenge you get quite often. While working with ng-model data, new unwanted scope can be created by ng-repeat or ng-if procedures. Let’s look at the below example

See the Pen Angular unwanted scope creation by Logesh Paul (@logeshpaul) on CodePen.

In the above example, the scope is created separately for innerScope and outerScope, so it does not share it’s data. We can handle this with single scope - One way to do this is we can use “Controller As” approach instead of using scope as a container for all data and functions.

One catchy solution is to keep everything in objects as shown is below example

See the Pen Angular avoiding unwanted scope creation by Logesh Paul (@logeshpaul) on CodePen.

Credits: http://www.jstips.co/en/angular/preventing-unwanted-scopes-creation-in-angularjs/

Let me what methods/best practices you follow to avoid unwanted scopes from creating in AngularJS.