Image for post
Image for post

Reaching more and more people is a priority of a webpage and that includes people with disabilities and people who use screen readers to browse the webpage. It’s our job and responsibility to provide them the same information we all receive.

Besides ensuring information, it’s crucial to use well structured, readable, maintainable code. To fill that void, HTML accessibility comes into view. It ensures us that all people get the same content and information irrespecitve of their physical condition, age, race, and location. Today, we will cover this topic in broad.

Semantic HTML

Semantic means Correct interpretation of the meaning of a…


Image for post
Image for post

Do you want a fast website? Smooth website? Then you should care about WebP. It makes websites lighter and makes it faster. WebP combines the feature of PNG and JPEG. It is the new king of the image format.

What is WebP

This is an image format like PNG/JPG/GIF but it has more interesting features that make it more versatile. Actually, It was developed and released by Google.

Some of its main features are:

  1. It supports both Lossy and Lossless Compression. IF you don’t know what lossy or lossless mean, read my previous article
  2. WebP lossless images are 26% smaller in size compared…

Image for post
Image for post
Photo by Smart on Unsplash

We all are familiar with variables. But Sass Variable is magic like no other. It makes your web development fun and engaging. There are lots of ways to use Sass Variable. Let’s explore this.

Make your life easy

Look at this code,

p {
background-color: #445522;
letter-spacing: 2px;
}
h1 {
background-color: #445522;
letter-spacing: 2px;
color: black;
text-transform: uppercase;
}

I used the same background-color and letter-spacing in both p and h1 tags. But in a real project, you will write the same value in many different places. If you want to change a small thing like color, then you have to go to…


Learn everything about Sass import with a mini project

Image for post
Image for post
Photo by Markus Spiske from Pexels

Unity is strength. It also goes with Sass. In CSS import, the browser sends separate HTTP requests for each CSS file which causes poor performance. But in Sass, all the files are concatenated into one file and only one request is sent to the server which improves performance.

You want to be Pro in Sass and CSS ?? Then, it’s mandatory to know how Sass @import works.

Let’s see What we will be learning today

  1. What is Sass @import?
  2. The necessity of Sass import
  3. Difference between CSS import and Sass import
  4. How to use Sass
  5. Sass partials
  6. Importing CSS file

Learn Everything About JavaScript Promise, How to Create a Promise, How a Promise Works, and All.

Image for post
Image for post

ES6 introduced Promise in JavaSCript which brought a new revolution in the way how we write asynchronous code. Previously we had to face Callback hell , but now with the help of Promise, writing asynchronous code became easier. Let’s dive into the topic.

What is previously used to achieve asynchronous tasks?

It’s a Callback hell. Don’t be confused to see “hell”. if you don’t know what callback is please read this article. But Callback creates a problem which is called “Callback hell”. Callback hell makes code complicated to read and debug. So, it wasn't sustainable. …


Learn Using Default Parameter in a smart and concise way

Image for post
Image for post
Photo by Sierra Dungan on Unsplash

All of you have used the JavaScript function before. Before going into the default parameter, I am going to recap what a is parameter and the argument in a function.

parameter: Parameters are those values that are given at the time of function declaration. In the code below, “a” and “b” are parameters.

argument: Argument is those values that are passed to the function in the time of function invocation. In the code below “c” and “d” are arguments.

Default Parameter: It’s a value that is used when no arguments are passed to its associated parameter. …


Image for post
Image for post

Spread and rest operator is one of the coolest features of ECMA6. Using these operators makes our code easy to read and also they are easy to use.

Spread Operator

Spread operator allows iterables(arrays, objects, and strings) to be expanded into single arguments. It’s denoted by three dots(…) followed by the variables or the array/string/object we want to unpack/expand. Let’s see how it works

Write the above code and run it in the console. In the first console, you will get an array as output. But in the second console, you will get only values without an array. Three dots (…)…


Image for post
Image for post

Destructuring: It’s a technique for unpacking objects, arrays, and assigning them to variables. What is unpacking?

Why is destructuring necessary?

  • It helps you to unpack values from arrays, objects, strings, and so on.
  • It helps to deal with functions that have a lot of parameters, default values
  • It’s convenient to write, easy to maintain and friendy to read
  • Saves us from writing repetitive code
  • Saves your time
  • Makes you follow the DRY principle of coding

Destructuring in javascript

Let's see how we would write code without destructuring:

By using the destructuring method, we can write the same code as

This is a very easy and…


Image for post
Image for post

We all love to use Keyboard Shortcuts. There is a proverb that “The more Keyboard Shorcuts you use, the more technical guy You are”. To give users the freedom to use Shortcuts there is an HTML Global Attribute Named “accesskey”. Let’s Explore it.

What is the accesskey attribute?

It is used for creating keyboard shortcuts mostly used by web designers and software designers to increase a better user experience. Also, we can focus on and target HTML elements with the “accesskey” attribute.

With Which HTML elements we can use this attribute?

We can use it with “Input, area, button, legend, a label, textarea” these elements.

How to use it?

First, we need to create an element like this:


Image for post
Image for post
Photo by Bruno Berger on Unsplash

The scope is a term which decides which variable is accessible from which position. It decides the accessibility of variables. There are many kinds of scope.

Global scope: They are accessible from anywhere of the code

Local scope: It is mainly of two types as Function scope and blocks scope.

Function scope: Anything declared inside a function is inaccessible from the outside of the function.

Block scope: IF you declare something inside if/for/while block, it creates a block scope. Anything inside a curly brace is a block scope. But remember that only let and const can be used to create…

Md Shahab Uddin

Front-End Developer & Tech Writer

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