Smooth Scroll in native Javascript/css

How to get a smooth scroll without using Jquery ? or any other library? As of 2020, such a trivial task is well supported natively by browsers. Smooth scroll can be achieved via pure javascript or even pure css. Lets check out how to smooth scroll natively using both the ways. Smooth scroll in pure Css Set the scroll-behaviour property to smooth on any class (or the whole body) to …read more

Lint on precommit Git hook made easy

This post involves setting up eslint, stylelint, husky and lint-staged to ensure you lint on precommit git hook. Less than 5 mins of setup that will automate linting and make it a part of your daily development process. If you are unfamiliar with the libraries that will be used, lets quickly see what each one of them does. Libraries Used and What they do ESlint – Tool to identify and …read more

Can I use font-weight: 1000 ?

The font-weight property is used to set the boldness (weight) of the font. The amount of boldness you get depends on the font (font-family) being used. Is it possible to surpass the standard font-weight property values and it be font-weight: 1000 ? Quick answer: Depends on your browser! According to the Css Fonts Module Level 4 specification, font-weight can have any value between 1 and 1000 (inclusive). All other values …read more

13 Killer Ways to Center elements with CSS

Designers seem to be troubled time and again while centering items in their layout. Well, no more! There are several ways to center items, be it horizontally or vertically or both, of which I present 13 unique ways categorically and in order of their simplicity. Center elements Horizontally Centering elements horizontally is a fairly easy thing to do. It can be done in 3 ways: 1. Using text-align:center; for Inline …read more