DEV Community: Abhishek singh

HTML Interview Preparation Topics

Abhishek singh — Sun, 20 Oct 2024 20:04:27 +0000

1. What is HTML?

HTML stands for Hypertext Markup Language, used to create web pages and provide structure to the content on the web.

<!DOCTYPE html>: Defines the document as an HTML5 document.
<html>: The root element wrapping all content.
<head>: Contains meta-information like character encoding, viewport settings, and page title.
<title>: Sets the title of the webpage.
<body>: Contains the visible content of the webpage.

2. Difference Between Tag and Element?

Tags are enclosed within angle brackets (< >). For example, <p> is a start tag for a paragraph, and </p> is an end tag.
Element: Includes both the start tag, content (if any), and the end tag.

3. Types of Lists

There are three types of lists in HTML:

Ordered List (<ol>)
Unordered List (<ul>)
Description List (<dl>)

Example:

<dl>
  <dt>HTML</dt> <!--description term-->
  <dd>HyperText Markup Language</dd> <!--description definition-->
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

4. Basic Structure of Tables

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
</table>

5. Difference Between Link and Anchor?

<a> (anchor): Creates hyperlinks to other pages.
- href: Specifies the URL.
- target: Specifies where to open the link (e.g., new tab).
- download: Allows file download.
<link>: Defines relationships between the current document and external resources (e.g., stylesheets).
- rel: Specifies the relationship (e.g., stylesheet).
- href: Specifies the URL of the external resource.

6. What are Attributes?

Attributes provide additional information about HTML elements and are written in the opening tag.

7. Difference Between Inline and Block Elements?

Block Level Element: Takes up the full width available.
Inline Element: Takes only the necessary width.

8. Forms

HTML forms allow users to submit data. Forms typically include input elements like text fields, checkboxes, radio buttons, and submit buttons.

<form>: Contains action URL and method (GET/POST).
<input>: Fields for user data.
<label>: Associates text with input elements.
<button>: Triggers form submission.

9. `<article>`

The <article> element is a semantic tag used to represent self-contained and independent content, introduced in HTML5.

10. `<aside>`

The <aside> element is used for content related to the main content but separate from it (e.g., sidebars).

11. Audio and Video

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
</video>

12. `<canvas>`

The <canvas> element allows for dynamic, scriptable rendering of 2D and 3D graphics.

13. Semantic HTML

Focuses on using tags that describe the meaning of the content, making web pages more accessible and SEO-friendly.

14. Accessibility

Ensures people with disabilities can navigate your website by using semantic tags, alt text for images, and proper form labeling.

15. Best Practices

Use proper indentation for readability.
Write meaningful content, like <title> and alt attributes.
Ensure valid HTML by using W3C Markup Validation Service.

16. CSS Performance Optimization Techniques

When a browser loads a page, it pauses HTML parsing to fetch and apply CSS.

Key Concepts:

CSS is render-blocking by default, meaning the browser won't render the page until all CSS is loaded.

Optimization Techniques:

Critical CSS: Inline the minimum CSS needed for above-the-fold content.

   <style>
     body { margin: 0; }
     h1 { color: blue; }
   </style>

CSS Media Attributes: Load CSS conditionally based on device characteristics.

   <link rel="stylesheet" href="styles.css" media="screen and (min-width: 600px)">

Defer Non-Critical CSS: Load non-essential CSS asynchronously.

   <link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">

Minify CSS: Remove unnecessary spaces and comments to reduce file size using tools like CSS-Nano.

17. Loading and Parsing JavaScript

JavaScript can significantly impact page load times, so optimizing how you load and execute JS is crucial.

Key Concepts:

JavaScript is render-blocking by default.
Scripts are parsed and executed in the order they appear.

Optimization Techniques:

Defer and Async Attributes:
- defer: Downloads scripts during HTML parsing but executes them after the document is parsed.
```
 <script src="script.js" defer></script>
```

async: Downloads and executes scripts as soon as they're available (order not guaranteed).
```
 <script src="script.js" async></script>
```

Place scripts at the end of <body>: Ensures HTML is parsed before JavaScript executes.
Minify and Bundle JS: Use tools like UglifyJS or Terser to reduce file size and improve performance.

18. Preloading vs Prefetching

Preload: Loads critical assets early.

  <link rel="preload" href="critical-styles.css" as="style">

Prefetch: Downloads resources for future navigation.

  <link rel="prefetch" href="next-page.html">

19. Lazy Loading

Delays loading of certain resources until they are needed.

Lazy Load Images:

  <img src="image.jpg" alt="Image" loading="lazy">

Lazy Load JavaScript:

  document.getElementById('load-script').addEventListener('click', () => {
    import('./heavy-script.js').then(module => {
      // Use the module
    });
  });

Summary

To optimize CSS and JavaScript loading and parsing:

Inline critical CSS and defer non-essential styles.
Use defer or async to prevent render-blocking JS.
Minify and bundle CSS and JavaScript for better performance.

Can you solve these Javascript Mind Twister Puzzles by ChatGPT? 🤯

Abhishek singh — Fri, 05 May 2023 17:41:07 +0000

I had a fascinating experience when I reached out to ChatGPT for mind twister puzzles. As someone who enjoys a good mental challenge, I was thoroughly intrigued by the puzzles that were presented to me. Some of the puzzles were particularly perplexing and left me feeling utterly confused, but this only served to make the experience more thrilling. Overall, I was grateful for the opportunity to exercise my cognitive abilities and engage in a mentally stimulating activity.

I have organized the puzzles, complete with answers and explanations for each one. With a link at the end of every Question and Answer, readers can easily navigate. I hope that this blog post will be a valuable resource for those who enjoy mental challenges and provide a good read.

📢 Let's begin...

1. What is the output of the following code snippet?

a: console.log(1 + "2" + "2");
b: console.log(1 + +"2" + "2");
c: console.log(1 + -"1" + "2");
d: console.log(+"1" + "1" + "2");
e: console.log("A" - "B" + "2");
f: console.log("A" - "B" + 2);

📄🫡

Answer a - Answer b
Answer c - Answer d
Answer e - Answer f

2. What is the output of the following code snippet?

for (var i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 100);
}

📄🫡

Answer

3. What is the output of the following code snippet?

const a = {b: 1};
const b = {c: 2};
const c = {...a, ...b};
console.log(c);

📄🫡

Answer

4. What is the output of the following code snippet?

const a = [1, 2, 3];
const b = [1, 2, 3];
const c = "1,2,3";
console.log(a == c);
console.log(b == c);
console.log(a == b);

📄🫡

Answer

5. What is the output of the following code snippet?

function a (){
  return arguments;
} 
console.log(a(1, 2, 3));

📄🫡

Answer

6. What is the output of the following code snippet?

const a = [1, 2, 3];
a[10] = 10;
a: console.log(a);
b: console.log(a.length);

📄🫡

Answer

7. What is the output of the following code snippet?

const a = [1, 2, 3];
a[-1] = 0;
console.log(a);
console.log(a.length);

📄🫡

Answer

8. What is the output of the following code snippet?

const a = {a: 1, b: 2};
const b = {b: 3, c: 4};
const c = {...a, ...b};
console.log(c);

📄🫡

Answer

9. What is the output of the following code snippet?

console.log(typeof NaN);
console.log(NaN == NaN);
console.log(NaN === NaN);

📄🫡

Answer

10. What is the output of the following code snippet?

const a = "hello";
a.toUpperCase();
console.log(a);

📄🫡

Answer

Answers:-

Note `In JavaScript, the + operator is used for both addition and string concatenation. When you use the + operator with a number and a string, JavaScript converts the number to a string and then concatenates the two strings together.

Answer 1 a

In the expression 1 + "2" + "2", the first + operator is between a number (1) and a string ("2"), so JavaScript converts the number to a string and concatenates it with the string "2". The result of this operation is the string "12".

The second + operator is between two strings ("12" and "2"), so JavaScript simply concatenates them together, resulting in the string "122".

Therefore, the output of the code console.log(1 + "2" + "2"); would be "122".

Go to ✈️
Question 1

Answer 1 b

In the expression +"2", the + operator is used as a unary operator on the string "2". Since the string "2" can be converted to a number, the result of this operation is the number 2.

Therefore, the expression 1 + +"2" + "2" can be rewritten as 1 + 2 + "2".

The first + operator is between a number (1) and a number (2), so JavaScript adds them together, resulting in the number 3.

The second + operator is between a number (3) and a string ("2"), so JavaScript converts the number 3 to a string and concatenates it with the string "2". The result of this operation is the string "32".

Therefore, the output of the code console.log(1 + +"2" + "2"); would be "32".

Go to ✈️
Question 1

Answer 1 c

In the expression - "1", the - operator is used as a unary operator on the string "1". Since the string "1" can be converted to a number, the result of this operation is the number -1.

Therefore, the expression 1 + -"1" + "2" can be rewritten as 1 + (-1) + "2".

The first + operator is between a number (1) and a number (-1), so JavaScript adds them together, resulting in the number 0.

The second + operator is between a number (0) and a string ("2"), so JavaScript converts the number 0 to a string and concatenates it with the string "2". The result of this operation is the string "02".

Therefore, the output of the code console.log(1 + -"1" + "2"); would be "02".

Go to ✈️
Question 1

Answer 1 d

In the expression +"1", the + operator is used as a unary operator on the string "1". Since the string "1" can be converted to a number, the result of this operation is the number 1.

Therefore, the expression +"1" + "1" + "2" can be rewritten as 1 + "1" + "2".

The first + operator is between a number (1) and a string ("1"), so JavaScript converts the number 1 to a string and concatenates it with the string "1". The result of this operation is the string "11".

The second + operator is between a string ("11") and a string ("2"), so JavaScript concatenates them together, resulting in the string "112".

Therefore, the output of the code console.log(+"1" + "1" + "2"); would be "112".

Go to ✈️
Question 1

Answer 1 e

In JavaScript, the - operator is used for subtraction between two numbers. When you use the - operator with a string, JavaScript tries to convert the string to a number.

In the expression "A" - "B", JavaScript tries to subtract the numbers represented by the strings "A" and "B". However, since these strings cannot be converted to numbers, the result of this operation is NaN (Not a Number).

Therefore, the expression "A" - "B" + "2" can be rewritten as NaN + "2".

The + operator is between NaN and a string ("2"), so JavaScript converts NaN to the string "NaN" and concatenates it with the string "2". The result of this operation is the string "NaN2".

Therefore, the output of the code console.log("A" - "B" + "2"); would be "NaN2".

Go to ✈️
Question 1

Answer 1 f

In the expression "A" - "B", JavaScript tries to subtract the numbers represented by the strings "A" and "B". However, since these strings cannot be converted to numbers, the result of this operation is NaN (Not a Number).

Therefore, the expression "A" - "B" + 2 can be rewritten as NaN + 2.

The + operator is between NaN and a number (2). Any arithmetic operation involving NaN will result in NaN.

Therefore, the output of the code console.log("A" - "B" + 2); would be NaN.

Go to ✈️
Question 1

Answer 2

This code block creates a for loop that iterates over i from 0 to 4. For each iteration of the loop, it schedules a function call to console.log(i) using the setTimeout method with a delay of 100 milliseconds.

The setTimeout method is used to execute a function after a specified delay. In this case, the function is an arrow function that logs the value of i to the console.

However, because of the asynchronous nature of the setTimeout method, the function calls are not executed immediately, and the loop continues to run before the scheduled function calls are executed.

When the scheduled function calls are eventually executed, they will use the value of i that exists at the time of execution. At this point, the for loop has already completed and the value of i is equal to 5.

As a result, the output of this code block will be five 5 logged to the console with a delay of 100 milliseconds between each log statement.

Go to ✈️
Question 2

Answer 3

This code block creates three objects: a, b, and c. a has a property b with a value of 1, and b has a property c with a value of 2.

The "..." operator is the spread operator, which is used to expand the properties of an object into another object or an array. In this code block, the spread operator is used to create a new object c that combines the properties of a and b.

The spread operator in const c = {...a, ...b}; first spreads the properties of a into c, and then spreads the properties of b into c. Since there are no common property names between a and b, the properties are simply added to c.

Therefore, the value of c will be an object with two properties: b with a value of 1 and c with a value of 2.

The output of console.log(c); will be {b: 1, c: 2}.

Go to ✈️
Question 3

Answer 4

In JavaScript, when using the equality operator (==) to compare two values, if the operands are of different types, JavaScript tries to convert one or both of the operands to a common type before making the comparison.

In this code block, a and b are both arrays containing the same values [1, 2, 3]. c is a string that contains the same values as a and b, separated by commas.

When a == c is evaluated, JavaScript tries to convert c to an array. Since c is a string, it is converted to an array with one element, which is the string "1,2,3". This is not equal to a, which is an array with three elements, so the expression evaluates to false.

Similarly, when b == c is evaluated, JavaScript tries to convert c to an array. Again, c is converted to an array with one element, which is the string "1,2,3". This is not equal to b, which is an array with three elements, so the expression evaluates to false.

However, when a == b is evaluated, both operands are arrays of the same type, so JavaScript compares the values of the arrays. Even though a and b contain the same values, they are different arrays in memory, so the expression evaluates to false.

Therefore, the output of console.log(a == c); and console.log(b == c); will be false, and the output of console.log(a == b); will also be false.

Go to ✈️
Question 4

Answer 5

In this code block, a is a function that returns the arguments object. The arguments object is a built-in object in JavaScript that is available inside functions and contains an array-like list of the arguments passed to the function.

When a is called with the arguments 1, 2, and 3 (a(1, 2, 3)), it returns the arguments object that contains an array-like list of the arguments passed to the function. In this case, the arguments object will contain three elements: 1, 2, and 3.

The output of console.log(a(1, 2, 3)); will be the arguments object, which looks like an array but is not an actual array. Depending on the environment, the output may look something like this: Arguments [ 1, 2, 3 ] Or Arguments { '0': 1, '1': 2, '2': 3 }

In general, it's not recommended to use the arguments object in modern JavaScript code because it can make code harder to read and maintain. Instead, it's better to use the rest parameter syntax (...args) to capture a variable number of arguments as an actual array.

Go to ✈️
Question 5

Answer 6

In this code block, a is an array with three elements [1, 2, 3]. However, when a[10] = 10 is executed, a new element is added to the array at index 10, with the value 10. This means that the array a now has a length of 11, and the elements at indices 3 through 9 are undefined.

When console.log(a) is called, the output will be the array a, which looks something like this: [1, 2, 3, undefined, undefined, undefined, undefined, undefined, undefined, undefined, 10]

When console.log(a.length) is called, the output will be the length of the array a, which is 11. Even though only four elements have been explicitly defined in the array (a[0], a[1], a[2], and a[10]), JavaScript automatically assigns a length to the array based on the highest index that has been assigned a value plus one. In this case, the highest index assigned a value is 10, so the length of the array is 11.

Go to ✈️
Question 6

Answer 7

In this code block, a is an array with three elements [1, 2, 3]. However, when a[-1] = 0 is executed, a new element is added to the array at index -1, with the value 0. This might seem unusual, but in JavaScript, array indices are actually just object property names, and any property name can be used, including negative numbers. However, using negative indices can make code harder to read and understand, so it's generally not recommended.

When console.log(a) is called, the output will be the array a, which looks something like this: [1, 2, 3, '-1': 0]

Notice that the element at index -1 is included in the output as a property with the name '-1'.

When console.log(a.length) is called, the output will be the length of the array a, which is 3. This is because the length property of an array in JavaScript always returns one more than the highest index in the array. In this case, the highest index is 2, so the length of the array is 3. The fact that there is a property with the name '-1' does not affect the length of the array, since the length property only considers elements with non-negative integer indices.

Go to ✈️
Question 7

Answer 8

In this code block, a and b are two objects with properties a, b, c and b, c, 4 respectively. When c is assigned the result of the spread operation {...a, ...b}, it creates a new object c by combining the properties of a and b using the spread operator.

The resulting object c will have the properties of both a and b, and any properties with the same name will be overwritten by the value of the property from b. In this case, since both a and b have a property named b, the value of b in the resulting object c will be 3 (from b). Similarly, c will have properties a, b, and c, with values 1, 3, and 4, respectively.

When console.log(c) is called, the output will be the object c, which looks something like this: {a: 1, b: 3, c: 4}

Notice that the b property in c has the value 3, which was taken from b and overwritten the value of b in a.

Go to ✈️
Question 8

Answer 9

The NaN (Not a Number) value in JavaScript is a special value that represents the result of an undefined or unrepresentable mathematical operation, such as dividing zero by zero, or multiplying infinity by zero. NaN is a numeric value, but it is not equal to any other value, including itself.

When console.log(typeof NaN) is called, the output will be number. This is because NaN is considered a special numeric value in JavaScript.

When console.log(NaN == NaN) is called, the output will be false. This is because NaN is not equal to any value, including itself. Even though NaN is a numeric value, it is not considered equal to any other numeric value or NaN itself.

When console.log(NaN === NaN) is called, the output will also be false. This is because the === operator tests for both equality of value and type, and since both NaN values are of the same type (number), the result is still false.

Therefore, it is important to be careful when working with NaN in JavaScript and to check for NaN values explicitly, such as by using the isNaN() function or the Number.isNaN() method.

Go to ✈️
Question 9

Answer 10

In this code block, a is a constant string variable containing the value "hello". When the toUpperCase() method is called on a, it returns a new string with all characters in uppercase, but it does not modify the original string a itself.

Therefore, even though the toUpperCase() method is called on a, the value of a itself remains unchanged and still contains the string "hello". When console.log(a) is called, the output will be "hello", since the value of a has not been modified by the previous call to toUpperCase().

If you want to change the value of a to the uppercase version of "hello", you need to assign the result of the toUpperCase() method back to a, like this:

const a = "hello";

a = a.toUpperCase();

console.log(a); // "HELLO"

In this case, the value of a will be "HELLO", since it has been assigned the result of calling toUpperCase() on the original string "hello".

Go to ✈️
Question 10

How many did you got right✅? Let me know in the comments 🤖

Setup NextJS with typescript, EsLint, prettier and husky

Abhishek singh — Mon, 06 Jun 2022 12:01:36 +0000

This is a short blog on setting up a project with NextJS, EsLint, prettier and husky.

Next.js is a React framework that gives you building blocks to create web applications.
EsLint is a pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.
Prettier is an opinionated code formatter that supports many different programming languages, like JavaScript. JSON. JSX.
Husky improves your git commits and more 🐶 woof!

01 Setting up Nextjs with typescript

npx create-next-app [project-name] --typescript

this will setup nextjs project for you

02 Setting up Eslint in the project

eslint comes pre-setup through npx create-next-app we don't have to install eslint simply run the below command in your terminal

npm init @eslint/config

which will guide you through a series of configuration settings

a. How would you like to use ESLint?

To check syntax only
To check syntax and find problems
To check syntax, find problems, and enforce code style

To check syntax, find problems, and enforce code style

since we not only want to find problems in our code we want to enforce a common code style (Airbnb)

b. What type of modules does your project use?

JavaScript modules (import/export)
CommonJS (require/exports)
None of these

JavaScript modules (import/export)

Note JavaScript modules (import/export): The ES module format is the official standard format to package JavaScript code for reuse and most modern web browsers natively support the modules.
Note Node.js, however, supports the CommonJS module format by default. CommonJS modules-load using require(), and variables and functions export from a CommonJS module with module.exports.

c. Which framework does your project use?

React
Vue.js
None of these

React

d. Does your project use TypeScript?

yes/no

yes

e. Where does your code run?

Browser
Node

Browser

f. How would you like to define a style for your project?

Use a popular style guide
Answer questions about your style

Use a popular style guide

Airbnb: https://github.com/airbnb/javascript

Since Airbnb is the most popular style guide and industry standard in most companies.

g. What format do you want your config file to be in?

JavaScript
YAML
JSON

JSON

We will select JSON because it is preferred over other file formats

h. Would you like to install them now?

No / Yes

Yes

i. Which package manager do you want to use?

npm
yarn
pnpm

npm

03 Now let's Setup prettier

First lets install necessary packages for setting up prettier in our project

npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

Then go to .eslintrc.json file and add following configurations to "extends" property and "plugins" property

NOTE The extends property value is either: a string that specifies a configuration(either a path to a config file, the name of a shareable config, eslint: recommended, or eslint: all ) or an array of strings where each additional configuration extends the preceding configurations.

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "plugin:react/recommended",
    "next/core-web-vitals",
    "airbnb",
    "plugin:prettier/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "rules": {}
}

Now let's create a local prettier configuration file

touch .prettierrc

And then add the following configuration to the .prettierrc file.

{
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "trailingComma": "es5",
  "printWidth": 80
}

Install prettier in your local code editor in my case I'm using vscode.
Then go to vscode settings and search for Default Formatter change it to Prettier-Code formatter.

after that make sure format on save is turned on in your vscode settings this will format your code every time you save your file.

04. Now let's configure eslint rules to our liking

first, let's install the package for Airbnb typescript configuration

npm install eslint-config-airbnb-typescript --save-dev

Then add configurations to the .eslintrc.json file

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "plugin:react/recommended",
    "next/core-web-vitals",
    "airbnb",
    "airbnb-typescript",
    "plugin:prettier/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "rules": {
    // suppress errors for missing 'import React' in files
    "react/react-in-jsx-scope": ["off"],
    // gives warning if spread props getting passed to component ex. (...props)
    "react/jsx-props-no-spreading": ["warn"],
    // suppress errors for Function component is not a function declaration turning off allows us to use arrow functions
    "react/function-component-definition": ["off"]
  }
}

Now add scripts in our package.json file

  {
  "name": "final",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "check-format": "prettier --check .",
    "check-lint": "eslint . --ext ts --ext tsx --ext js",
    "check-types": "tsc --pretty --noEmit",
    "format": "prettier --write ."
  },
  "dependencies": {
    "next": "12.1.6",
    "react": "18.1.0",
    "react-dom": "18.1.0"
  },
  "devDependencies": {
    "@types/node": "17.0.40",
    "@types/react": "18.0.12",
    "@types/react-dom": "18.0.5",
    "@typescript-eslint/eslint-plugin": "^5.27.0",
    "@typescript-eslint/parser": "^5.27.0",
    "eslint": "^8.17.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-next": "12.1.6",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.30.0",
    "eslint-plugin-react-hooks": "^4.5.0",
    "prettier": "^2.6.2",
    "typescript": "4.7.3"
  }
}

Now let's add .eslintignore and .prettierignore file at the root of our project

touch .eslintignore .prettierignore

Then ignore the following files and folder in both files

/node_modules next.config.js .next

Now run scripts to check if any error is being thrown

npm run format

npm run check-format && npm run check-lint

If all things went well no error should be thrown.

05. Now, let's set up husky in our project.

First, run the following command in terminal

npx husky-init && npm install

This should setup husky in our project

Now add some configuration to our pre-commit file under .husky folder.

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

echo '🏗️👷 Styling, testing and building your project before committing'

# Check Prettier standards
npm run check-format ||
(
    echo '🤢🤮🤢🤮
                Yaaaaaccccccckkkkkkkkkk 🤢🤮🤢🤮
            Prettier Check Failed. Please Run npm run format, add changes and try commit again.';
    false;
)

# Check ESLint Standards
npm run check-lint ||
(
        echo '😤🏀👋😤 Bla Bla Bla Bla 😤🏀👋😤 
                ESLint Check Failed. Make the required changes listed above, add changes and try to commit again.'
        false; 
)

# Check tsconfig standards
npm run check-types ||
(
    echo '🤡😂❌🤡 Failed to check the types. 🤡😂❌🤡
            Please Make the changes required above.'
    false;
)

# If everything passes... Now we can commit
echo '🤔🤔🤔🤔... Alright.... Code looks good to me... Trying to build now. 🤔🤔🤔🤔'

npm run build ||
(
    echo '❌👷🔨❌ Send Help Build has failed ❌👷🔨❌
            Next build failed: View the errors above to see why. 
    '
    false;
)

# If everything passes... Now we can commit
echo '✅✅✅✅ Yo you got this... I am committing this now. ✅✅✅✅'

Now try to commit the following checks should be automatically done in our project before committing

git add .
git commit -m 'test'

If all went well you should be able to commit your changes to your file

DEV Community: Abhishek singh

HTML Interview Preparation Topics

1. What is HTML?

2. Difference Between Tag and Element?

3. Types of Lists

4. Basic Structure of Tables

5. Difference Between Link and Anchor?

6. What are Attributes?

7. Difference Between Inline and Block Elements?

8. Forms

9. <article>

10. <aside>

11. Audio and Video

12. <canvas>

13. Semantic HTML

14. Accessibility

15. Best Practices

16. CSS Performance Optimization Techniques

Key Concepts:

Optimization Techniques:

17. Loading and Parsing JavaScript

Key Concepts:

Optimization Techniques:

18. Preloading vs Prefetching

19. Lazy Loading

Summary

Can you solve these Javascript Mind Twister Puzzles by ChatGPT? 🤯

1. What is the output of the following code snippet?

2. What is the output of the following code snippet?

3. What is the output of the following code snippet?

4. What is the output of the following code snippet?

5. What is the output of the following code snippet?

6. What is the output of the following code snippet?

7. What is the output of the following code snippet?

8. What is the output of the following code snippet?

9. What is the output of the following code snippet?

10. What is the output of the following code snippet?

Answers:-

Answer 1 a

Answer 1 b

Answer 1 c

Answer 1 d

Answer 1 e

Answer 1 f

Answer 2

Answer 3

Answer 4

Answer 5

Answer 6

Answer 7

Answer 8

Answer 9

Answer 10

How many did you got right✅? Let me know in the comments 🤖

Setup NextJS with typescript, EsLint, prettier and husky

01 Setting up Nextjs with typescript

02 Setting up Eslint in the project

03 Now let's Setup prettier

04. Now let's configure eslint rules to our liking

05. Now, let's set up husky in our project.

9. `<article>`

10. `<aside>`

12. `<canvas>`