Learning From My First Startup

| Comments

I always had these sparking thought in my mind about starting something new to serve the users right after I gained 2 years of experience in software industry, I discussed many times with my friends to come up with something to start own and run a business.

Ideas like “Project Management Software - like basecamp 😉”, “TechyTees - E-commerce to sell tech printed tees”, “Curated best products only e-commerce website”, “A Todo App”, “Automate House - Refill groceries, clean house, laundry all in one”, “Employment School - that teaches what’s needed for work than random theories”, just to mention a few.

Some of the ideas seem vague now; where I stand with 10 years of experience, but that’s okay I’m improving and learning in my own phase.

Note that I used the word idea because I only discussed with few people and it didn’t fly. The first startup/side project I worked along with my friends & was able to successfully launch a workable product to market was TaxOn, without there support this would have been just another idea. So big thanks to Uthira Moorthy, Saravana, Adithya, Deepak, Anuj & Thiyagu who worked really hard to get the product out.

It wasn’t well received as I thought it would be, So I’m writing this post to track my understanding & learning about it.

Failure Reasons (In my opinion)

  • We haven’t done proper user research & market fit validation.
  • User will only use the app if they want to see the tax calculation (which happens only 2-3 time in a year).
  • The bot which we introduced to keep the user retention isn’t helpful as many people are not interested to learn about tax saving, finance planning, etc,
  • We haven’t considered post-release marketing, post-release development to give regular updates. I didn’t have the money/time to — market, keep the team working, polishing the product to customer needs.
  • Our revenue factor/business model to create “tax saving services” is not that intuitive.

Things to consider before startup (Again, In my opinion)

  • Think big, Start small: Your idea should scale, if your idea can benefit only a few users then it’s not enough. So imagine your business can benefit big user base but validate that with a minimum viable product (MVP).
  • Validate idea from random users: Your idea will seem so fascinating to you & and to your close friends. So don’t validate your idea with close friends/relatives; they will say it’s awesome anyway. Do proper user research — a) choose your end user b) prepare a list of questions to ask your end user c) go talk to them and collect feedback about the problem your idea solves d) analyze the feedback received and see if people are really interested.
  • Build product for today: Don’t think more futuristic, There are many startups which build awesome IOT products but customers are not really ready to use it today. Create something which users can use today.
  • Solid execution Plan: There is no such thing as overnight success, success takes years. Be prepared to afford a solid working team for your idea (Starting stages are experimental, you never know which will work)
  • First 20 users: Try to create a minimal viable product & try to acquire first 20 users(again friends/relatives doesn’t really count here). Work with them to get feedback and acquire the next set and keep going. Continue solving user problems and you grow big eventually.
  • Fail Fast: If you think your idea isn’t good enough and not working as expected, don’t hold it on your back. Use your time & energy wisely. Shutdown your unsuccessful project.

I hope this might give some insights to you & I wish you all the best for “idea → startup → successful product”.

Thanks for reading and share it with your friends.

Better Yields Best

| Comments

In this short post, I will cover how powerful habit is and how it can help you achieve your goal.

Habit is a “second natural” thing we can create by consistently doing it for 60 days, even Robin Sharma mentions it in one of his videos.

What is second natural, well when you do an activity for more than 60 days your body and mind register it so well that you should be able to do that activity with ease & much better every next time you do it. An example would be if you program/code on a computer for more than a year, you don’t have to look at the keyboard for typing; it becomes your second natural way to know where the “A” key is with help of muscle memory.

This applies to all professions, if you do a certain activity over and over again you will do it faster, better, & efficient, that it will become your second natural thing.

Now let’s see how can this help you become successful,

  1. Set a goal
  2. Create a list of activities to achieve your goal
  3. Do that activity for 60 days so that it will become a habit

And that helps you achieve your goal in a faster and consistent phase.

You’re not going to get great at anything in a month  —  that’s not the way the world works. But you 100% can get better at anything in a month.

Do it “better” every time it will yield the “best”.

Bonus Tip: Create a habit tracker and check-in every day once you achieve it, this will get you motivated to do it every day.

Looking for a minimal habit tracker?

  • Tweet this article / Share it on Facebook
  • Send your email ID in direct message
  • I will share you the sheet which I’m using (screenshot shown below)

New Features in HTML 5.1

| Comments

HTML started evolving at a faster pace after the major release of HTML 5.0, W3C and WHATWG is developing the standard backed by a great community to bring in useful features in every version. Let’s look at some of the key features of HTML5.1

Context Menus / Right Click Menus

We have been using right click on web browser to use certain actions on page like copy, paste, define, etc., Well you can use the <menu> tag to define a menu consisting of one or several <menuitem> elements and then bind it to any element using the contextmenu attribute.

The <menuitem> can be defined as three types:

  • checkbox to select or deselect an option
  • command to execute an action on click
  • radio to select one option from a group

How it looks

Demo

See the Pen HTML contextmenu by Logesh Paul (@logeshpaul) on CodePen.

PS. At the time of writting this post, the feature is only supported in firefox.

Browser Support

Can I Use menu? Data on support for the menu feature across the major browsers from caniuse.com.

Details and Summary Elements / Accordions

We have long been using accordions in our websites if we want to show less content and on user interest reveal the extra information. But the way we usually do is with help of JS/CSS. Well with HTML 5.1 there is this new <details> & <summary> tag to take care of those.

The way to do it is simple define a parent <details> element with a <summary> element inside it. Clicking on the summary toggles the visibility of the rest of the content from the <details> element.

How it looks

Demo

See the Pen HTML 5.1 detail, summary by Logesh Paul (@logeshpaul) on CodePen.

Browser Support

Can I Use menu? Data on support for the menu feature across the major browsers from caniuse.com.

New Input Types (month, week, datetime-local)

The input type is getting enhanced more and in HTML 5.1 we have three new types.

  • month, week - allow you to select a week or a month. You get to see a dropdown calendar like the one we have seen in jQueryUI Calendar. When you try to access the values from JavaScript you will receive a string something like: "2016-W43" for the week input and "2016-10" for the month input.
  • The datetime-local input consists of two parts — the date, which can be selected in a similar way to the week or month input, and the time part, which can be typed in separately.

How it looks

Demo

See the Pen HTML 5.1 input types by Logesh Paul (@logeshpaul) on CodePen.

Browser Support

Can I Use input-datetime? Data on support for the input-datetime feature across the major browsers from caniuse.com.

Validating Forms with form.reportValidity()

HTML5 defines the form.checkValidity() method which allows you to check the inputs of a form against the defined validators and returns a boolean value as a result.

The new reportValidity() is very similar — it also allows you to validate a form and retrieve the result, but additionally reports the errors to the user right in the browser.

How it looks

Demo

See the Pen HTML5.1 validate by Logesh Paul (@logeshpaul) on CodePen.

Browser Support

Can I Use constraint-validation? Data on support for the constraint-validation feature across the major browsers from caniuse.com.

Multiple image support for responsive design

In HTML 5.1, you can use <picture> tag together with the srcset attribute to make responsive image selection possible. The <picture> tag represents an image container that allows developers to declare different image resources in order to adapt to the user viewport size, screen pixel density, screen type, and other parameters used in responsive design.

The <picture> tag itself doesn’t display anything, it functions as a context for the multiple image resources. You need to declare the default image resource as the value of the src attribute of the <img> tag, and the alternative image resources go within the srcset attributes of the <img> and <source> elements.

Code example:

1
2
3
4
5
6
<picture>
  <source srcset="mobile.jpg, mobile-hd.jpg 2x" media="(max-width: 360px)">
  <source srcset="large.jpg, large-hd.jpg 2x" media="(min-width: 1920px)">

  <img src="default.jpg" srcset="default-hd.jpg 2x" alt="your image">
</picture>

Further Reading

Credits: I have copied the code pen examples from here and upgraded the content - https://www.sitepoint.com/whats-new-in-html-5-1/

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.