Why join the dark side (。▽皿▽) ?

Adding dark mode to websites/web-apps are trending now. Here are some of its benefits:

  • Dark mode is easy on eyes for some users
  • You can add various themes along with dark mode (for example, Sepia). This makes your app more interesting.
  • Your app looks infinitely better with dark mode.
  • Users may save some battery using dark mode.

It’s really easy (will take a day or so for small-sized website or app).

Demo

here is a demo: Codesandbox

CSS Variables

If you are living under a rock, CSS variables are like JavaScript variables. We can define CSS variables at one place in the stylesheet…


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/1.1 request vs HTTP/2 requests

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.
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…


Image result for react setstate

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

Checkboxes and radio buttons after styling

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 >


Over the years, I have developed many UIs. I have learned many approaches for the same — and here I have distilled down my “UI Development Workflow” that I have developed over years. No matter what the technology stack is, this process is applicable. It makes sure that we have required things (or at least contracts for those things) before we start coding.

This workflow is for UI development of one complete functionality (“Story” in agile terms). It makes sure that we avoid many pitfalls of UI development.

Step 1: Requirements

What's the Purpose of this functionality?

Do we have…

Nitin Jadhav

Full Stack Developer. UX & UI Designer. Resident Techie & Gamer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store