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


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

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


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

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


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

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


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

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:

  <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">

Further Reading

Credits: I have copied the code pen examples from here and upgraded the content -