Forem: Nitin Jadhav

Easy theming with CSS Variables: Add dark mode to your app

Nitin Jadhav — Wed, 27 May 2020 07:25:54 +0000

Why join the dark side `(｡▽皿▽)` ?

Adding dark mode to websites/web-apps are trending now. Here are some of it's 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 demo: Codesandbox

CSS Variables

If you are living under rock, CSS variables are like JavaScript variables. We can define CSS variables at one place in stylesheet and can use those variables all over stylesheets instead of hard coded values. These are the building blocks of model css architecture.

body {
    --myFavColor: #BADA55; // variable defination
}

.myDiv {
    background-color: var(--myFavColor); //usage
}

You need to have a basic html page. I will use a simple html login form and some basic styling.

<body>
      <form action="" class="myForm">
        <h1>Login Form</h1>
        <div class="field">
          <label for="username">User Name</label>
          <input type="text" id="username" name="useraname" />
        </div>
        <div class="field">
          <label for="password">Password</label>
          <input type="password" id="password" name="password" />
        </div>

        <label> <input type="checkbox" name="rememberme" /> Remember Me </label>
        <div class="button-container">
          <button class="button" type="submit">Login</button>
        </div>
      </form>
    <script src="src/index.js"></script>
</body>

Note that all the styling is done through CSS classes, no inline styles is used.

Step #1: Add `light` CSS class with some CSS variable definitions

Add a light class. This will be a default light theme for our app.

.light {
  --background: #f1faee;
  --background-alt: #a8dadc;
  --foreground: #1d3557;
  --accent: #0e8185;
}

We can use these variables in our stylesheet, instead of hardcoded values.

body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: var(--foreground);
  background-color: var(--background);
}

.myForm {
  padding: 2rem;
  background-color: var(--background-alt);
  width: 24rem;
}
.myForm .field {
  padding: 1rem 0;
}
.myForm .field label {
  display: block;
  margin-bottom: 0.5rem;
}
.myForm .field input {
  border: 2px solid var(--accent);
  padding: 0.5rem;
  width: 100%;
}

.button-container {
  text-align: right;
}

.button {
  color: var(--background);
  background-color: var(--foreground);
  padding: 0.5rem 2rem;
  border: 0;
}

Optional: We may also want to add some CSS variables that are independent of any theme. Usually they are defined in html tag.

/* these variables are theme-independent */
html {
  --purewhite: #ffffff;
  --pureblack: #000000;
}

Step #2: Add `light` class to your `body` tag

<body class="light">
    <!-- html here -- >
</body>

Step #3: Add `dark` CSS class with exact variable definitions as of `light` class, but with different colours that are suitable for dark mode

.dark {
  --background: #1d3557;
  --background-alt: #457b9d;
  --foreground: #f1faee;
  --accent: #84a59d;
}

Once again, we have to add all of the variables that are there is light class.

Colours will usually be inverted (e.g. light text on dark background) as opposed to light class.

Step #4: Add a button to switch between themes

We have to add an action, which will replace the light class of body tag with dark class (and vice versa).

classList.toggle() method toggles a CSS class in given element's classes.

<button id="theme-toggle">Toggle Dark Theme</button>

//javascript
document.getElementById("theme-toggle").addEventListener("click", function() {
  document.body.classList.toggle("light");
  document.body.classList.toggle("dark");
});

Optional: You can add more themes like Sepia and use something like dropdown as theme switcher. You may also want to save/restore theme choice to/from local storage for persistence.

See the completed demo here: Codesandbox

That's it!

You just added a dark mode to your website/app.

HTTP/2: As web developer, What you need to change

Nitin Jadhav — Mon, 09 Mar 2020 13:49:01 +0000

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 request has to wait for previous request to finish.
Uses Binary encoding for request/response as compared to http/1.1 which uses text encoding. That means more accurate handling of Line endings, whitespace encoding etc. Binary encoding is also efficient to parse and use.
Stream Prioritization Each request stream can be prioritised. So browser can download a critical css file on priority while JS files may load with lower priority. (I haven't seen example of this in wild, but will update this point when the more details are available).
Stream dependencies: Dependencies between streams can also be specified. So we can say that one js file can be dependent on another one.
HTTP header compression Http/2 supports header compression. That means less data on wire.
Server Initiated Push Unlike Http/1.1, Http/2 server can start pushing files to client on its own even before client requests those. This reduced latency and wait for html-parsing-and-asset-request.

How to prepare for HTTP/2?

Stop bundling assets:
No need to bundle css/JS files since http/2 supports multiplexing. There is almost no overhead in making many web requests. It may also mean that we don't have to deploy entire bundle when only couple of files are updated.
Stop inlining JS/CSS/Images/SVG:
Fetch those as separate files. You might get advantage of browser caching with seperate files.
Use lazy loading for JS/css files. This is more efficient and reduces initial load time.
Stop creating image Sprites:
This in now unnecessary due to multiplexing. This also means simpler workflow and build script.
Stop domain sharding:
No need to spread your files across multiple domains, since we can fetch everything now from same domain.
Start Using HTTPS:
Its recommended standard with HTTP/2. You get more secure website/app by default.

But As always,

Make sure your audience is using latest browsers(HTTP/2 is now supported in nearly all browsers, except our usual suspect, IE < v10)
HTTP/2 is enabled on your server.

See you on HTTP2!

Improve your JavaScript with functional programming

Nitin Jadhav — Wed, 31 Jul 2019 08:26:23 +0000

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 is intended for beginner programmers. This series will have multiple posts.

Use Pure functions

A pure function is one which

Does not access anything else other than provided arguments.
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

const calculateArea = radius => 3.14 * radius * radius;

Use `map()` instead of `for/forEach` for array conversions

(you are probably already doing this)

Process and covert an array into a new array using for/forEach

const nums = [1,2,3,4,5,6];
const doubles = [];
for(let i = 0; i < nums.length; i++){
  doubles.push(nums[i] * 2);
}
// nums.forEach(item => doubles.push(item * 2)); // foreach version
console.log(doubles)

Instead, you should be using map() function (which is built-in in JavaScipt)

const nums = [1,2,3,4,5,6];
const doubles = nums.map(item => item * 2);
console.log(doubles)

Why use the `map()` instead of the above methods?

The code is almost human-readable ("map this array to that with function x"), easy to understand
It's minimalistic, uses fewer keystrokes, hence fewer potential bugs

Use `reduce()` instead of for loop for additive calculations

If you want to calculate something which depends on every value of array, use reduce() function. e.g. you need to add up every element of an array.

for/forEach method:

const array1 = [1, 2, 3, 4];
let sum = 0;
for(let i=0; i< array1.length; i++){
  sum+=array1[i];
}
// array1.forEach(item => sum+= item); //forEach version

// 1 + 2 + 3 + 4
console.log(sum);

const array1 = [1, 2, 3, 4];
const sum = array1.reduce((sum, current) => sum+current, 0);

// 1 + 2 + 3 + 4
console.log(sum);

Why use the `reduce()` instead of the above methods?

less boilerplater than for loop
A common construct, much cleaner to read
can be chained with other array functions like map: array1.map(i => i*2).reduce((sum, current) => sum+current)

use filter() method for array filter operations:

Filtering array with for loop for even numbers:

const array1 = [1, 2, 3, 4];

const evenArray1 = [];
for(let i = 0; i<array1.length; i++){
  if(array1[i] % 2 === 0){
    evenArray1.push(array1[i]); //copy only even elements
  }
}
console.log(evenArray1);

User `filter()` method instead:

const array1 = [1, 2, 3, 4];

const evenArray1 = array1.filter(item => item % 2 === 0);
console.log(evenArray1);

Use `every()` and `some()` insted of manual search with for loops

Checking if all items in an array satisfy certain criteria (even)

const array1 = [2,4,8];

let isAllEven = true;
for(let i = 0; i<array1.length; i++){
  if(array1[i] % 2 !== 0){
    isAllEven = false;
    break;
  }
}
console.log(isAllEven);

Use every() for the same:

const array1 = [2,4,8, 3];

let isAllEven = array1.every(item => item % 2 === 0)
console.log(isAllEven);

Checking if at least one item in an array satisfy certain criteria (even)

const array1 = [1, 3];

let isAtleastOneEven = false;
for(let i = 0; i<array1.length; i++){
  if(array1[i] % 2 === 0){
    isAtleastOneEven = true;
    break;
  }
}
console.log(isAtleastOneEven);

Use some() for the same:

const array1 = [1, 2, 3];

let isAtleastOneEven =  array1.some(item => item % 2 ===0)
console.log(isAtleastOneEven);

Use Partial functions to create new functions from existing functions using `bind()`

You can derive new functions from existing functions. E.g. you have a power function that calculates power of number.

const power = (p, num) => num ** p;

you can create a new function square() and cube() that uses existing function

const square = power.bind(null, 2);
const cube = power.bind(null, 3);

console.log(square(5))  // 25
console.log(cube(5))  // 125

Note on performance: Note that for loops are always faster than map() and other similar functions. For a small number of items, say up to a few hundred - both will have similar performance but for a large number of items, you may want to consider for loops.

In the next article, we will discuss some of the advanced functional programming concepts. Thanks!

[Done Quick] Easy Lazy loading with Angular 8

Nitin Jadhav — Sun, 02 Jun 2019 10:40:44 +0000

Here are the steps to quickly add lazy loaded modules (loads only after the user navigates to a specific feature or page):

Note that your app must be arranged as feature modules instead of one big AppModule. Make sure that you have installed latest angular cli with the command npm install -g @angular/cli.

step 1: create a Demo App

ng new MyApp --routing

step 2: Add a feature module and component inside the new module which needs to be lazily loaded

ng g module feature --routing
ng g component MyFeature --module=feature

step 3: In your app.component.html add a link to the lazy module

<a routerLink="/feature">Lazy feature</a>
note that this file also has <router-outlet></router-outlet>

step 4: Add Lazy loading to the main app router file (app-routing.module.ts). Notice the import statement - this is where the magic happens!

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'feature',
    loadChildren: () =>
      import('./feature/feature.module').then(module => module.FeatureModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

step 5: Finally, add lazy routing to feature module routing file (feature-routing.module.ts)

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MyFeatureComponent } from '../my-feature/my-feature.component';

const routes: Routes = [{
  path: '',
  component: MyFeatureComponent
}];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class FeatureRoutingModule { }

That's it! Run the project with ng serve and click the link in your new app. See the browser console for the lazy loaded module.

Forem: Nitin Jadhav

Easy theming with CSS Variables: Add dark mode to your app

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

Demo

CSS Variables

Step #1: Add light CSS class with some CSS variable definitions

Step #2: Add light class to your body tag

Step #3: Add dark CSS class with exact variable definitions as of light class, but with different colours that are suitable for dark mode