As of March 2020, HTTP/2 is used by 43.8% of all the websites. This numbers will only grow. This is short summary of my recent exploration of subject.

A Quick Overview of HTTP/2

• HTTP/2 is a new Protocol that is replacing HTTP/1.1 thats currently de-facto standard of web.
• Main motivation behind it is Performance.
• Its backward compatible. Clients and browsers can use HTTP/1.1 as usual if they don’t support HTTP/2.
• With HTTP/2, SSL is recommended for performance reasons, but not compulsory.

What improvements HTTP/2 brings?

• Multiplexing:

Http/2 can fetch multiple files (usually HTML, JS CSS files etc) simultaneously from server. It uses same TCP connection for multiple files, hence multiplexing. Only one TCP connection is necessary.
In comparison, Http/1.1 allows 4–8 max connections to server (per domain) at same time, restricting number of files you can fetch. One…

If you want to write your JavaScript code in a better way, one of the most effective techniques is functional programming (FP). It’s no difficult than the language itself — don’t let anyone else tell you otherwise. This series will have multiple posts.

Use Pure functions

A pure function is one which

1. Does not access anything else other than provided arguments.
2. Does not modify anything outside of a function. It may return the calculated value based on arguments. This means that they will always return the same output when provided with the same input.

Example of pure function

function calculateArea = (radius) => 3.14 …

Want to start a quick Web/HTML+SASS+HTML modules project with auto reload? You don't have to fiddle with nodemon/local-server/webpack/other such tools anymore!

ParcelJS is the new module bundler that out of the box supports everything (well, almost everything) with no config at all. With Parcel, you not only get a zero-config auto-reloading local dev server but much more out of the box:

• Hot module reloading, obviously
• SASS, postCSS, postHTML, Stylus
• Code splitting using JS dynamic import
• And much more!11!!1!

here is how to get started:

• Create a new directory “my-project” and insider it, start new npm project using

npm init -y

• …

Tailwind CSS has reduced my style-development time to half. It’s amazing and something that you should try!

Tailwind CSS is a utility first CSS framework that enables rapid CSS development — it’s basically a set of CSS classes that we can apply on HTML tags to get results and try things quickly. I am sure you have used bootstrap at some point of time and you know for responsiveness, bootstrap has classes like row, col and col-lg-2. Apply and forget.

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3…

React has two ways of setting a local state. The setState() function with state object as a parameter, while the second way is setState() function with function as a parameter. Which one you should use in your code? what’s the benefit of one over other? let’s see.

First form with state object as a parameter.

this.setState({
    someValue: state.somevalue + 1
});

The problem with this approach is when you repeatedly call this function, react tries to batch the state update and you might lose some of your updates.

...const someFunc() {
    ....
    setState({myVar: myVar+1});
    setState({myVar: myVar+1});
    setState({myVar: myVar+1});
}

…

I started with frontend programming 5 years back with jQuery and AngularJS. I later switched to React. For project requirement, I recently learned Angular 5.

Update: I opted for library “ngxs” instead of ngrx for state management. It is much more elegant (IMO) and have very less boilerplate. I feel much more productive with ngxs than with ngrx.

Here is my opinion on how these frameworks fare in comparison:

Angular 2+ vs React…

You probably know github hosting is free for open source projects. But incase you are not aware — you can also host your personal website there for free! Few months back — I purchased my domain name. Here are all steps how build my freely hosted react-based website.

STEP 1

Purchase a domain name — mine is http://nitinj.com (warning: Its work in progress!), got from an indian domain provider.

STEP 2

Start a new react project with create-react-app (I know, react can be overkill for personal websites, but I am planning to add some advanced & interesting stuff).

STEP 3

…

I recently struggled with styling checkboxes and radios with CSS. While I could use libraries like iCheck, I wanted to avoid Javascript and jQuery. Why add another library to application just for the sake of visual styles?

Here is my implementation of CSS-Only solution to this problem.

Check Live Demo

It's easy:

Create a plain checkbox in this format:

<div class='example' >
    <input type='checkbox' id='my-checkbox' >
    <label for='my-checkbox' >My Checkbox</label >
</div >
<div class='example' >
    <input type='radio' name='radio-group-1' id='my-radio1' >
    <label for='my-radio1' >My Radio 1</label >
    <input type='radio' name='radio-group-1' id='my-radio2' >
    <label for='my-radio2' >My Radio 1</label >
</div >