DEV Community: Aryan Dev Shourie

HTML You Think You Know (But Probably Don’t)

Aryan Dev Shourie — Thu, 08 Jan 2026 08:37:09 +0000

HTML is usually the first thing we learn in frontend development —
and the first thing we stop thinking deeply about.

Most of us write HTML every day, but rarely question:

Is this the right element?

How will this behave with a keyboard?

What does this mean to a screen reader, bot, or automation tool?

In this article, I revisit HTML from a frontend engineering perspective — not as “just markup,” but as the foundation of everything we build on the web.

What this article covers
🔹 Semantic HTML

Why choosing the right element matters more than styling or JavaScript, and how semantics affect accessibility, SEO, and long-term maintainability.

🔹 Accessibility basics most of us skip

Keyboard navigation, focus order, and how small HTML choices can either block or enable users.

🔹 Focus management (tabindex)

How browsers decide focus order, when tabindex helps, and when it quietly breaks your UI.

🔹 HTML features we underuse

Elements and attributes that already solve problems we often reimplement with JavaScript.

🔹 Why HTML matters even more in 2026

With AI agents, voice interfaces, Smart TVs, embedded browsers, and automated testing tools consuming our UIs, clean and intentional HTML has become a real advantage.

Why I wrote this

As frontend developers, we spend a lot of time optimizing JavaScript and frameworks.

But many real-world bugs — especially on:

Smart TVs

Embedded browsers

Accessibility-heavy apps

…come down to HTML fundamentals.

This article is a reminder that mastering HTML isn’t beginner work — it’s engineering work.

👉 Read the full article here:
https://aryanshourie.substack.com/p/html-you-think-you-know-but-probably

I’d love to hear your thoughts:

What’s one HTML concept you only truly understood later in your career?

Any underrated HTML features you rely on?

Let’s discuss 👇

How I Would Learn Frontend Development If I Started in 2026

Aryan Dev Shourie — Thu, 01 Jan 2026 07:16:56 +0000

Frontend development today has no shortage of tutorials, frameworks, and roadmaps — but that doesn’t always translate to real progress.

In this article, I share how I would approach learning frontend development if I were starting again in 2026, based on my experience building production web apps and Smart TV applications (LG webOS & Samsung Tizen).

I cover:

Why mastering HTML, CSS, and JavaScript still matters
Building real-world projects instead of basic clones
Learning how things work under the hood
Using AI tools and LLMs as learning accelerators (not shortcuts)
Exploring frontend beyond the browser

👉 Read the full article here:
https://aryanshourie.substack.com/p/how-i-would-learn-frontend-development

This article was originally published on my Substack newsletter, Frontend Engineering Weekly, where I share one practical frontend engineering post every week.

If you find the content valuable, do consider subscribing to my free Substack newsletter.

Would love to hear how you approached learning frontend 👇

Connect with me on LinkedIn :- Linkedin

Do check out my GitHub for amazing projects :- Github

Check out my website :- aryanshourie.dev

Securely storing passwords in a database

Aryan Dev Shourie — Sun, 02 Nov 2025 09:22:24 +0000

Introduction

Passwords are the digital keys 🔑 that protect user accounts and sensitive information. Unfortunately, many security breaches happen not because the hackers are genuises, but because the developers stored the passwords incorrectly in the database.

If an attacker ever gains access to your database, you want them to find useless gibberish, not the real passwords. Secure password storage ensures that even in a breach, the attacker gets nothing valuable.

In this article, we will discuss the several techniques which can be used for storing passwords in a database.

1. Storing passwords as plain text (🚫 The Worst Way)

Storing passwords as plain text means saving them exactly as the users type them. Example:

username | password
--------- | --------
ravi      | 123456
neha      | 123456

This is a complete disaster! 😱
Anyone with access - hackers, admins and scripts can easily see every password. If the database leaks, all the user accounts are instantly compromised.

Why this approach is bad ⚠:

Total loss of privacy. 🔒
Irreversible trust loss and legal risk.

👉 Never ever store passwords in plain text.

2. Simple Hashing (MD5, SHA-1 etc.)

A small improvement is to hash passwords using one way functions like MD5 or SHA-1. Example:

Password: "123456"
MD5 Hash: e10adc3949ba59abbe56e057f20f883e

It looks secure, but it is not. These algorithms are fast and predictable. The hackers can use Rainbow Tables or brute-force attacks to reverse them in seconds.

Why this approach is bad ⚠:

MD5 and SHA-1 are too fast.
The precomputed hash tables make reversing easy.
Identical passwords always produce identical hashes.

Example:

Ravi password = "123456" → MD5 = e10adc3949ba59abbe56e057f20f883e  
Neha password = "123456" → MD5 = e10adc3949ba59abbe56e057f20f883e

Attackers instantly know Ravi and Neha share the same password.
➡️ Simple hashing is not enough.

3. Slow Hashing (The Right Kind of Hashing ✅)

Modern systems use slow, adaptive hashing algorithms like bcrypt, scrypt or Argon2. These are specifically designed for passwords and take more time to compute ⌛ —making brute-force attacks painfully slow.

Why slow hashing wins:

Adjustable cost factor.
Built-in salting support.

Example:

bcrypt("123456") → $2b$12$Z4qZKZk...

Even if attackers know the algorithm, calculating millions of such hashes takes years, not seconds. 💪

4. Salting

A salt 🧂 is a random string added to each password before hashing. It ensures that even if 2 users have the same password, their hashes are totally different.

Example:

Ravi password = "123456"
Ravi salt     = "pqr_salt"
Stored hash   = H("123456pqr_salt")

Neha password = "123456"
Neha salt     = "xyz_salt"
Stored hash   = H("123456xyz_salt")

✨ Result: Different hashes, even for the same password.

Why salting is essential:

Protects against Rainbow Table attacks.
Adds uniqueness per user.

The salt is usually stored alongside the hash in the database.

5. Peppering

Peppering 🌶 is like salting, but with a secret twist.
A pepper is a secret key added to the password before hashing. Unlike salts, peppers are kept secret and not stored in the database.

There are 2 ways to use pepper:

i) Global Pepper: This means that the same secret will be used for all the passwords. It is stored in the environment variables or any secure config. It is easier to manage and configure. Example:

password + salt + PEPPER_SECRET

ii) Per-user Pepper: This means that a unique pepper will be used for each user. It offers stronger protection, but it is more complex to manage.

Why peppering helps:
Even if hackers steal the entire database (hash + salt), they still can’t verify passwords without the hidden pepper.

Conclusion

Storing passwords securely isn't optional—it’s your duty as a developer.
Bad practices like plain text or MD5 are ticking time bombs 💣 waiting to explode in a data breach.

The gold-standard approach includes:
✅ Slow hashing (bcrypt, Argon2)
✅ Unique salting for each password
✅Secret peppering for extra protection

Remember: you’re not just storing passwords—you’re storing user trust 🤝.

And that's it! This was just a quick overview about how passwords can securely be stored in a database.

Connect with me on LinkedIn :- Linkedin

Do check out my GitHub for amazing projects :- Github

Git Hooks: Automating Workflows in Git

Aryan Dev Shourie — Sat, 23 Aug 2025 09:44:54 +0000

Introduction to Git Hooks

Git is more than just a version control system. It also provides automation to improve developer productivity. One of these features is Git Hooks.

Git Hooks are scripts that Git automatically executes before or after specific events, such as commiting code, pushing to a remote repository or merging branches. They allow developers to automate tasks seamlessly within the Git workflow.

In simpler words, Git Hooks act like "triggered scripts" that run at different stages of Git's lifecycle.

The need for Git Hooks

Without Git Hooks, maintaining consistent standards across a team can be difficult. For example, the following issues may arise:

Developers may forget to run linting or tests before committing.
Sensitive files like API keys or credentials might accidentally get pushed.
Commit messages may lack standard formatting, making history harder to read.

Git Hooks solve these problems by automating checks and enforcing rules. Instead of relying on developers to remember every step, Git Hooks ensure quality and consistency by running predefined scripts automatically.

Types of Git Hooks available

Git provides a variety of Hooks that can be used in different stages of the workflow. These are categorized into two types:

Client-Side Hooks: Triggered by operations like committing, merging, or rebasing. Example: pre-commit, prepare-commit-msg, commit-msg.
Server-Side Hooks: Triggered on the server side when pushes are received. Example: pre-receive, update, post-receive.

How to find Git Hooks

When you initialize a Git repository, Hooks are available as sample scripts inside the .git/hooks/ directory. You can verify by using this command:

ls .git/hooks/

You will see files like pre-commit.sample, pre-push.sample etc. These sample files are not active by default, you can make them active by removing the .sample extension from the filename.

Example Usage of a Git Hook: Pre-Commit with Linter

Let's go through a step-by-step guide of setting up a pre-commit Hook to block commits if linting errors exist in the staged files.

Step 1: Navigate to the Hooks directory

cd .git/hooks/

Step 2: Create/Edit the Pre-Commit Hook

nano pre-commit

Step 3: Add the Hook script
Here is an example script to check for ESLint issues before allowing a commit:

#!/bin/sh

echo "Running lint checks..."

# Run ESLint on staged JavaScript files
STAGED_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep '\.js$')

if [ "$STAGED_FILES" = "" ]; then
  exit 0
fi

# Run eslint
npx eslint $STAGED_FILES
if [ $? -ne 0 ]; then
  echo "❌ Lint errors found. Commit aborted."
  exit 1
fi

echo "✅ Lint checks passed!"
exit 0

Step 4: Make it executable

chmod +x .git/hooks/pre-commit

Step 5: Test the Hook

Modify a .js file with linting issues.
Try committing:

git add file.js
git commit -m "Test commit"

If issues are found, the commit will be blocked until you fix them. This ensures that no developer can commit code with linting errors.

Advantages of Git Hooks

Automation: Automates repetitive tasks like running tests, linting, or formatting.
Consistency: Enforces code quality and project standards across the team.
Security: Prevents accidental commits of sensitive files or bad code.
Efficiency: Saves time by catching issues early, before code is pushed.
Flexibility: Hooks can be customized for different workflows and tools.

With Git Hooks in place, teams can maintain higher code quality, enforce rules effortlessly, and automate mundane checks—all directly within Git’s workflow.

And that's it! This was just a quick overview about using Git Hooks in your daily workflow.

Connect with me on LinkedIn :- Linkedin

Do check out my GitHub for amazing projects :- Github

Secure Tunneling Explained: Ngrok vs Cloudflared

Aryan Dev Shourie — Sat, 02 Aug 2025 11:21:35 +0000

Problem Statement

In development, testing, or remote collaboration, developers often need to expose a locally hosted web service to the Internet. Whether it is a Webhook testing endpoint, a locally running admin dashboard, or a demo site for a client, making a local server publicly accessible is not straightforward. Following the traditional approaches requires configuring firewalls, setting up ports and deploying to different servers. All of these things can be complex, insecure and time consuming.

Tunneling

For the above problem statement, the solution is Tunneling. It refers to creating a secure pathway between two endpoints - in this context, between a public URL and a local server by encapsulating the network traffic. This process allows a remote client to access a local service as if it were hosted on a public server, all while bypassing NAT, firewalls and complex DNS setups.

Following are the advantages of Tunneling:

It enables you to test integrations locally.
It helps in client demos without deploying code.
It facilitates remote development and debugging.

In this article, we will discuss the two widely used tools for Tunneling: Ngrok and Cloudflared Tunnel.

Ngrok

Ngrok is a popular tunneling tool that provides public URLs to your locally running applications, commonly used for testing webhooks and showcasing work in-progress.

Example usage of Ngrok
Step 1: Install Ngrok

# macOS
brew install ngrok

# or download from https://ngrok.com/download

Step 2: Start a local server

python3 -m http.server 8000

Step 3: Expose the server via Ngrok

ngrok http 8000

Output:

Forwarding                    https://abcd1234.ngrok.io -> http://localhost:8000

You can now access your local server from anywhere using https://abcd1234.ngrok.io

Advantages of using Ngrok:

Very easy to setup and use.
Supports both HTTP and TCP tunnels.
Provides a real-time web UI for inspecting traffic.
Secure and encrypted connections.

Disadvantages of using Ngrok:

The free version has usage limits. (example: 1 tunnel, random subdomains)
Requires signup and token for full functionality.
Not open-source.

Cloudflared Tunnel

It is a service by Cloudflare that exposes your local server securely through the Cloudflare network, eliminating the need to open firewall ports or configure DNS.

Example usage of Cloudflared Tunnel
Step 1: Install Cloudflared

# macOS
brew install cloudflared

# or download from https://developers.cloudflare.com/cloudflared

Step 2: Authenticate with Cloudflare

cloudflared login

This opens a browser and asks you to select the domain you want to use.

Step 3: Create and run a tunnel

cloudflared tunnel --url http://localhost:8000

Output:

https://random-string.trycloudflare.com -> http://localhost:8000

You can now access your local server from anywhere using https://random-string.trycloudflare.com

Advantages of using Cloudflared Tunnel:

Free and unlimited usage.
Integrates directly with Cloudflare for DNS and security.
Uses your own domain.
High reliability via Cloudflare's network.

Disadvantages of using Cloudflare Tunnel:

Required Cloudflare-managed domain for advanced usage.
Setup for persistent tunnels is more involved than Ngrok.

Conclusion

Tunneling tools like Ngrok and Cloudflared Tunnel have become essential in modern development workflows.

Use Ngrok for its simplicity and powerful dev tooling features.
Use Cloudflared Tunnel for more permanent, secure and production-grade tunnels.

Both are effective - choose based on your specific needs: simplicity or scalability.

And that's it! This was just a quick overview about the secure tunneling tools like Ngrok and Cloudflared Tunnel.

Connect with me on LinkedIn :- Linkedin

Do check out my GitHub for amazing projects :- Github

Understanding JavaScript naming best practices

Aryan Dev Shourie — Fri, 25 Jul 2025 15:16:18 +0000

JavaScript is one of the most popular programming languages out there. This is because it is the native language of the web. Every browser (Chrome, Safari, Firefox, Edge etc.) has a built-in JavaScript engine. JavaScript has support for different libraries and frameworks like React, Vue, Angular, jQuery etc. It also has a massive ecosystem via NPM (Node Package Manager) — the largest package registry in the world.

Due to the high popularity of JavaScript, its natural that it is the primary tech stack of the majority of software applications available in the market. Thus, it is essential for developers using JavaScript to create and maintain applications to follow best practices and coding guidelines.

One of the essential guidelines which is often overlooked is the JavaScript naming conventions. Following are the reasons why following JavaScript naming best practices is essential:

Improves code readability: Clear, descriptive names make it easier to understand what a variable, function, or class does.
Enables team collaboration: Consistent naming helps teams work together more efficiently. Everyone knows what to expect when reading or reviewing code.
Makes maintenance easier: The code written months or years ago becomes easier to revisit and modify.
Reduces bugs: Ambiguous or inconsistent names can lead to incorrect assumptions and logic errors.
Improves tooling support: Many linters, static analyzers, IDEs and AI tools can better assist when naming is consistent.

Core principles of JavaScript naming

Consistency is key
Consistency is the cornerstone of effective naming in JavaScript. Whether you prefer using camelCase or snake_case, the key is to stick with one style throughout the codebase. Here's why it matters:

Reduces cognitive load for developers.
Eases maintenance and refactoring.

Language matters
Although JavaScript supports variable names in any language, it is best to stick with English. Doing so offers many advantages:

Ensures universal code readability.
Facilitates collaboration across global teams.

The case for different cases
JavaScript follows different naming conventions based on context:

camelCase for variables, functions and methods.
PascalCase for classes and constructor functions.
UPPER_SNAKE_CASE for constants.
kebab-case for CSS classes and HTML attributes.

Practical naming guidelines

Variables and Functions
Boolean variables: The name of a boolean variable should start with an affirmative prefix, typically 'is' or 'has'. For example:

Bad ❌
const visible = false;

Good ✅
const isVisible = false;

Functions and Methods: Function names should be verbs that clearly describe their action. For example:

Bad ❌
function data(user) {
  // ...
}

Good ✅
function getUserData(user) {
  // ...
}

Arrays and other Collections
Always use plural nouns for arrays and other collections. For example:

Bad ❌
const bookItemList = ['1984', 'Brave New World', 'Fahrenheit 451'];
const userDataObj = new Map();
const selectedIdSet = new Set();

Good ✅
const books = ['1984', 'Brave New World', 'Fahrenheit 451'];
const userDataMap = new Map();
const selectedIds = new Set();

Classes and Objects
Classes should use PascalCase and be noun phrases. For example:

Bad ❌
class stringutils {
  static capitalize() {}
}

Good ✅
class StringUtils {
  static capitalize() {}
}

Constants
Always use UPPER_SNAKE_CASE for constants. For example:

Bad ❌
const retryAttemps = 3;
const apiUrl = 'https://api.example.com';

Good ✅
const RETRY_ATTEMPTS = 3;
const API_URL = 'https://api.example.com';

Common mistakes to avoid

Including types in names

Bad ❌
const userArray = ['John', 'Jane'];
const nameString = 'John';

Good ✅
const users = ['John', 'Jane'];
const name = 'John';

Ambiguous Abbreviations

Bad ❌
const usr = getUser();
const pwd = 'secret';

Good ✅
const user = getUser();
const password = 'secret';

Tools for maintaining naming conventions

To maintain consistent naming conventions in a JavaScript codebase, a variety of tools can be used. Here are the most widely used tools:

ESLint: it is used for linting, checking code quality issues and naming violations.
Prettier: it is used for code formatting, enforcing consistent style and ensuring spacing, quotes, semicolons etc.

Some community recommended coding guidelines

Below are some community-recommended naming convention guidelines and documentation resources you can follow for JavaScript:

Google JavaScript style guide: https://google.github.io/styleguide/jsguide.html
Airbnb JavaScript style guide: https://github.com/airbnb/javascript
MDN Web Docs (Mozilla Developer Network): https://developer.mozilla.org/en-US/docs/Web/JavaScript

And that's it! This was just a quick overview about the basic JavaScript naming best practices.

Connect with me on LinkedIn :- Linkedin

Do check out my GitHub for amazing projects :- Github

The SCP Command and how to use it💻

Aryan Dev Shourie — Fri, 11 Jul 2025 20:22:05 +0000

Recently at work, I had a task of developing and deploying an internal tool/application which basically lets us test certain playback stream URLs (DASH, HLS etc.) on Smart TVs using ShakaPlayer with Widevine DRM encryption.

So this application was deployed on one of our internal remote servers. There are a couple of other applications as well which are deployed on that remote server, but they had a simpler single-click deployment (pretty convenient 🙂).

As for this particular application, we had to deploy it manually by transferring the files from our local machine to the remote server (actually better because I got to learn something new 🤓).

The reason I shared the above story with you is that due to the above task, I got introduced to the SCP command in the Windows Command Line. Now I know that it may be a basic command for most of the experienced developers out there, but for me it was a new learning and I thought it would be nice sharing about it here and elaborating about how it is used.

Overview

SCP stands for Secure Copy Protocol. As the name pretty much suggests it is a command which is used to transfer directories/folders and files between 2 systems/locations using the SSH protocol. Now you may think that we already have the cp (copy) command for copying contents between locations 🤔, then what does SCP bring to the table ? The main advantage of SCP is that it ensures the data is encrypted 🔗⛓️ during the transfer.

Different use cases of SCP command

There are multiple use cases of the SCP command, these include :-

Copy/Transfer files from your local machine to a remote server.
Copy/Transfer files from a remote server to your local machine.
Copy/Transfer files between 2 remote servers.

Basic syntax of using the SCP command

scp [options] source-location destination-location

Example 1 => You want to copy a file 'myFile.txt' present on your local machine to a remote server, you can execute the command like this :-

scp myFile.txt username@remote_server_host:/path/to/destination

This will copy myFile.txt to the specified destination in the remote server.

Example 2 => You want copy a file 'myFile.txt' present on your remote server to your local machine, you can execute the command like this :-

scp username@remote_server_host:/path/to/myFile.txt /local_machine/destination

This will copy myFile.txt to the specified destination on your local machine.

Example 3 => You want to copy a file 'myFile.txt' present on one remote server to another remote server, you can execute the command like this :-

scp username@remote_server_host1:/path/to/myFile.txt username@remote_server_host2:/path/to/destination

This will copy myFile.txt from remote_server_host1 to the specified destination in remote_server_host2.

Different options which can be used with the SCP command

-r => used to recursively copy entire folders/directories
-v => used to switch to verbose mode i.e. while copying it will show the progress and debug information
-C => used to compress the data during copy/transfer
-q => used to switch to quite mode i.e. while copying it will not show any progress or error messages.

Important points to consider regarding SCP command

SCP primarily operates over SSH, so you will need to have SSH access to the target remote server.
Before using the SCP command, ensure that the remote server has SSH enabled and you also have appropriate permissions.

And that's it! This was just a quick overview about the basics of the SCP command, how and when to use it and more.

Connect with me on LinkedIn :- Linkedin

Do check out my GitHub for amazing projects :- Github

Useful JavaScript tips and tricks that you may not be aware of 💻👨‍💻

Aryan Dev Shourie — Sat, 21 Dec 2024 08:48:02 +0000

JavaScript is a widely used web programming language. If you are looking to start a career in Software Engineering, then chances are that you will encounter the concepts of JavaScript.

JavaScript is unarguably the most popular programming language in the realm of web development. While it has its own caveats and tricky/confusing concepts, learning and using JavaScript is almost necessary if you want to progress in your web development career.

In this blog post, I will list down some useful JavaScript tips and tricks to help you out in challenging situations while using this language.

Automatic Semicolon Injection (ASI) in JavaScript

Some languages like C#, C++ and Java are very strict about ending each line with a semicolon.

JavaScript also uses semicolons to indicate the end of a line, but using the semicolon in JavaScript is actually optional. By optional, it means that JavaScript will apply a set of complex rules to work out whether a semicolon should have gone there or not. This is known as Automatic Semicolon Injection.

Example:

function returnSomething()
{
  return
    {
      name: 'JavaScript Expert'
      contactMethod: 'Shine batsign at sky'
    }
}

Now upon first glance, you might think that logging this function call will show this particular object. But, if we call this function, we actually get undefined as the output.

Explanation: Because the opening bracket doesn’t occur on the same line as the return, ASI puts one semicolon in there for us. So, as far as JavaScript is concerned, our code actually looks like this:

function returnSomething()
{
  return ; // <-- semicolon inserted by ASI, remainder of function not evaluated.
    {
      name: 'JavaScript Expert'
      contactMethod: 'Shine batsign at sky'
    }
}

This is the process of ASI. To avoid such scenarios, we should carefully look the placement of braces and other syntax.

Non-sequential Array keys and indexes

Let’s imagine we have a simple array, we know we can pop, push, append, and do whatever we like with arrays. But we also know that JavaScript, like other languages, lets us access array elements by index.

However, what’s unusual about JavaScript is that you can also set elements by array index when the array isn’t even up to that index just yet.

Example:

var arr = [];
arr[0] = 1;
arr[1] = 2;
arr[100] = 100;
console.log(arr);
console.log('The length of the array is ' + arr.length);

Output:

[ 1, 2, <98 empty items>, 100 ]
The length of the array is 101

Finding the OS type using JavaScript

The window.navigator object contains information about the visitor's browser OS details. Some of the OS properties are available under the platform property.

You can use the below snippet to get the OS type:

console.log(navigator.platform);

Output:

Win32 (for Windows)
MacIntel (for modern macOS)
Linux x86_64 (64-bit Linux systems)
WebOS (for LG Smart TVs)
Linux (for Samsung Smart TVs)

How to detect whether a mobile browser is being used for browsing

You can detect mobile browsers by simply running through a list of devices and checking if the userAgent matches anything:

function detectMobileBrowser() {
  if (
    navigator.userAgent.match(/Android/i) ||
    navigator.userAgent.match(/webOS/i) ||
    navigator.userAgent.match(/iPhone/i) ||
    navigator.userAgent.match(/iPad/i) ||
    navigator.userAgent.match(/iPod/i) ||
    navigator.userAgent.match(/BlackBerry/i) ||
    navigator.userAgent.match(/Windows Phone/i)
  ) {
    return true;
  } else {
    return false;
  }
}

Apply CSS styles and colors on JS console messages

You can apply CSS styles and colors on the console messages using certain syntax. This can be very useful in differentiating certain messages from others.

Code example:

console.log(
        "%cStop!",
        "color:red;font-family:system-ui;font-size:4rem;-webkit-text-stroke: 1px black;font-weight:bold"
      );

Output:

And that's it! These are just a few of lesser known JavaScript tips and tricks which might come in handy for you in the future.

Connect with me on LinkedIn :- Linkedin

Do check out my GitHub for amazing projects :- Github

View my Personal Portfolio :- Aryan's Portfolio

The JavaScript History API

Aryan Dev Shourie — Fri, 20 Dec 2024 15:08:47 +0000

Introduction

The JavaScript History API is a part of the Web API that allows us to interact with the browser's session history. It provides methods and properties to navigate, manipulate and control the history stack, enabling developers to create more dynamic and interactive user experiences without requiring full page reloads.

Key features of the JavaScript History API

history.back()
history.forward()
history.go(n)
history.pushState()
history.replaceState()

The history.back() method

This method moves the browser to the previous page in the session history, equivalent to the browser's back button. This will only work if a previous page exists in the browser's history stack.

Example:

<!DOCTYPE html>
<html>
<body>

<h1>The Window History Object</h1>
<h2>The history.back() Method</h2>

<button onclick="history.back()">Go Back</button>

</body>
</html>

Output:

Clicking on the "Go Back" button will take the user to the previous page if it exists in the history stack.

The history.forward() method

This method moves the browser to the next page in the session history, equivalent to the browser's forward button. This will only work if a next page exists in the browser's history stack.

Example:

<!DOCTYPE html>
<html>
<body>

<h1>The Window History Object</h1>
<h2>The history.forward Method</h2>

<button onclick="history.forward()">Go Forward</button>

</body>
</html>

Output:

Clicking on the "Go Forward" button will take the user to the next page if it exists in the history stack.

The history.go() method

This method is used to navigate to a specific point in the browser stack. It takes an argument 'n', which specifies the number of the page we want to navigate to through the history stack.

The argument 'n' can accept the following values:

Positive 'n' takes user forward in the stack.
Negative 'n' takes user backward in the stack.
If 'n' has value 0, it reloads the current page.

The history.pushState() method

This method is used to add a new entry in the current session's history stack i.e. the collection of all the pages visited in the current browser tab.

Example:
We will create a button element and assign it a click handler. Inside the handler, we call the pushState() method. This adds a new entry with a different URL than the one of the current page.

// HTML ->
<button>Call pushState()</button>

// JavaScript ->
var button = document.querySelector('button');
button.onClick = function() {
    history.pushState(null, ' ', 'some-page');
}

Output:

Currently, the URL is - https://www.codeguage.com/courses/js/examples/pushstate

When you will click on the button, the URL will change to - https://www.codeguage.com/courses/js/examples/some-page

This confirms that a new entry has been added to the current session's history, also changing the URL in the browser's address bar. You can also see that the browser's back-arrow is also active now in the top-left corner, clicking on which will take you back to -
https://www.codeguage.com/courses/js/examples/pushstate

One extremely important thing to know is that pushState() changes the URL without ever checking whether it even actually exists or not. This is because the purpose of pushState() is not to load a webpage, but rather to just add a new entry to the history.

The history.replaceState() method

This method replaces the current entry in the current session's history stack with a new entry.

Example:
As before, we have a button with a click handler set. But this time, inside the handler, we call replaceState() to replace current history entry with a new one.

// HTML =>
<button>Call replaceState()</button>

// JavaScript =>
var button = document.querySelector('button');

button.onclick = function() {
   history.replaceState(null, '', 'some-page');
}

Output:

The current URL is -
https://www.codeguage.com/courses/js/examples/replacestate

When you click the button, the URL will change to -
https://www.codeguage.com/courses/js/examples/some-page

The browser URL has been replaced, and you can notice that the back-arrow key on the top left corner is NOT active, confirming that a new entry has NOT been added to the history stack, we have just replaced the current entry with a new one.

And that's it! You have successfully learnt about the JavaScript History API, and how to use and incorporate its different utilities in your applications.

Connect with me on LinkedIn :- Linkedin

Do check out my GitHub for amazing projects :- Github

View my Personal Portfolio :- Aryan's Portfolio

Introduction to HTML Web Components 💻📝

Aryan Dev Shourie — Sun, 18 Feb 2024 15:26:07 +0000

The HTML Web Components are reusable, custom HTML elements which you can define and create yourselves, and can be used anywhere within your HTML code.

As web developers, we know that creating a template and reusing that wherever possible is a good programming approach. This problem was solved by JavaScript UI libraries like React. But, in some use cases, adopting to React or other JavaScript libraries is not the requirement, and using plain HTML can accomplish this task now as well.

In 2024, the Browser support for Web Components is very enhanced. In this article, I will describe the basics of Web Components and demonstrate creating a basic Web Component as well.

What is a Web Component?

A Web Component is a custom HTML element that you can define with your own tag name. It is a reusable piece of code, which can be created and incorporated easily within your HTML application.
It is basically a set of JavaScript APIs that allow you to define custom elements and behavior, which can then be used as desired in your UI.

Basics of Web Components
To create a Web Component, you must first define a ES2015 Class to control the element. The class can be named anything, but it is advisable to name the Class similar to the purpose you are creating the component for. For example, if you are creating a Footer component, you should name your Class as "Footer".

The class that you create must extend from the HTMLElement interface. After doing this, you need to register your component with the browser by executing customElements.define.

You can refer below to see the basic structure of the Web Component -

class MyComponent extends HTMLElement {
    // component implementation code written here
}

customElements.define('my-component', MyComponent);

An important part to note is, there is a hyphen in the name "my-component". This hyphen is required in the specification so that we can differentiate the custom Web Components from the standard HTML elements.

Lifecycle Callbacks of the Web Components

The HTML Web Components have some Lifecycle Callback methods which are executed when the Browser calls the different parts of the component's lifecycle. These methods are -

connectedCallback: this method is executed when the component is first mounted/loaded onto the DOM.
disconnectedCallback: this method is executed when the component is unmounted/removed from the DOM.

To create the Web Component, initialize the component class and execute the call to customElements.define method -

// creating a class for the component by extending from the HTMLElement class
class CurrentDate extends HTMLElement {
    constructor() {
        super();
    }

    // calling the connectedCallback() lifecycle method of web components
    // it is executed when the components first mounts/loads on the page
    connectedCallback() {
        const date = new Date();

        this.textContent = date.toLocaleDateString();
    }
}

// registering the component to the CustomElement Registry
// the name of the custom component should always include a hyphen(-)
// this distinguishes it from the other official HTML elements
customElements.define('current-date', CurrentDate);

Since you are extending from the HTMLElement class, you have access to the textContent method, which is being used here to display the current date.

How to use the Web Component?

To use your custom Web Component, you can simply import it using the script tag in your HTML file -

<script src="./current-date.js"></script>

To use it in your HTML file, you can simply render the component within the HTML tags -

<h2>Today's date is - </h2>
<current-date></current-date>

To summarize, your full HTML file will look like this -

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Components tutorial</title>
    <script src="./current-date.js"></script>
</head>
<body>
    <h1>Introduction to Web Components</h1>

    <h2>Today's date is - </h2>
    <current-date></current-date>
</body>
</html>

You should see this output on your browser -

One of the most important benefits of using the HTML Web Components is that they are not dependent on any third-party libraries, so using them won't have any side-effects and they won't have a significant effect on your bundle size.

And that's it! You have successfully learnt about Web Components and how to incorporate them within your project.

Connect with me on LinkedIn :- Linkedin

Do check out my GitHub for amazing projects :- Github

View my Personal Portfolio :- Aryan's Portfolio

What is Linting and how to use a Linter tool💻

Aryan Dev Shourie — Wed, 08 Nov 2023 18:31:18 +0000

What is Linting?

Linting is defined as the automated checking of your source code for programmatic and stylistic errors. It is the process of performing static analysis on the source code to flag patterns that might cause errors or other problems.

What can Linting do?

Linting can detect errors in code and detect the errors that can lead to security vulnerabilities.
Linting can detect formatting or styling issues and makes the code more readable and optimized.
Linting makes maintaining the code much more easier.
Overall, Linting increases the quality of the code.

What are Linters?

The term "lint" was derived from the name of the tiny bits of fiber and fluff shed by clothing, as the command should act like a dryer machine lint trap, detecting small errors with big effects.

Today, we use the term "linters" for a class of tools that check code for common bugs and stylistic errors. Most linters are highly configurable so they can enforce the standards of your organization.

Why should you use Linters?

There are 2 main reasons to use a Linter -

To save yourself trouble by avoiding common problems
To enforce a common coding style across a team

Everyone makes mistakes when they’re coding. It’s easy to use the wrong type of bracket, forget a semicolon, or misspell something. Checking your code for these types of errors is the kind of thing that computers excel at. Rather than reviewing your code line by line for common syntax errors, you can tell a computer what types of errors to look for.

Types of Linters

There are tons of Linters available out there, choosing the appropriate and most useful ones will depend on your tech-stack. Primarily, for Front-End Development linters are used in three main domains -

JavaScript
CSS
Formatting

The most popular ones are - ESLint for JavaScript, Prettier for Formatting and Stylelint for CSS.

ESLint

There have been several popular JavaScript linters over the years, but ESLint is the most popular right now. ESLint places a particular emphasis on extensibility, with a very active community for plugins, modules and shared configs.

Stylelint

Stylelint is the most popular linter for CSS. It can even be used to lint CSS in other files, like script elements in HTML and CSS-in-JS. It is modeled heavily on ESLint, following the extensible model.

Prettier

The main focus of Prettier is to take care of code formatting and making the code as readable as possible. Things like code block indentation, preventing nested ternaries, preventing long code lines and unnecessary semicolons are taken care by Prettier. It provides support for many languages like JavaScript, CSS, HTML and Markdown.

How to use a Linter?

There are several options to use a linter, depending on how much control you have over your development environment.

At the most basic level, you can install a linter into your editor. Most linters have plugins for VS Code and other editors. If you add a lint config file to your project, then anyone with the linter installed in their editor will benefit from the shared set of rules.

Ignoring Linter rules

Most linters will allow you to set up an "ignore" file that tells the linter to not pay attention to certain files. Linters also usually include a special comment you can add to disable the linter rules for the next line or section of code. The comment may look something like this -

/* stylelint-disable-next-line declaration-no-important */
display: none !important;

This comment tells Stylelint to disable the “No !important” rule on the next line.

Connect with me on LinkedIn :- Linkedin

Do check out my GitHub for amazing projects :- Github

View my Personal Portfolio :- Aryan's Portfolio

Tutorial on creating a NextJS Application for beginners

Aryan Dev Shourie — Fri, 23 Jun 2023 19:23:56 +0000

NextJS is an open-source web development framework which provides us with extended features of ReactJS and gives us the building blocks to create web applications. In this article, I will explain some important points about NextJS and also build a sample NextJS application from scratch.

Features of NextJS:

Following are some effective features of NextJS that gives it the edge over other web development technologies:

Page-based Routing system: With NextJS, we don't need to install any external package from NPM or YARN to use Routing in our projects (like we install react-router-dom in React). We just create a page in a special folder, and NextJS creates a route for that page.
Pre-rendering: NextJS supports both Static-Site Generation (SSG) and Server-Side Rendering (SSR). Server-Side Rendering (SSR) prepares the content of a page on a server, while a one-page React application uses Client-Side Rendering (CSR). The problem with CSR is that it's not SEO-friendly because search engines will not see the page's actual content. Using SSR in NextJS can avoid such issues as a flickering page while data fetching, and our website content will be SEO friendly.

Built-in CSS and Sass support: NextJS provides support for any CSS-in-JS library.
Code splitting: NextJS allows developers to split their application code between 2 different components - Server Component and Client Component. All the Backend related code i.e. A.P.I. handling, Database integration and Data fetching should be written in Server Components whereas all the UI related code should be written in the Client Components.
Dynamic Components: Using NextJS, we can also import JavaScript modules and React components dynamically.

Creating our own NextJS application from scratch

For this tutorial, I am assuming that you have Node.js and NPM installed in your system. If not, you can follow the steps mentioned here - https://radixweb.com/blog/installing-npm-and-nodejs-on-windows-and-mac

I will be using the Visual Studio Code Editor to write and maintain my code. You can use any editor you desire, but if you want to install and configure it, follow the steps mentioned here - https://code.visualstudio.com/learn/get-started/basics

Now, lets start with creating our application!

Step 1 : Creating a NextJS application using create-next-app.
We already know that we can create a ReactJS application using the create-react-app command. Creating a NextJS application is not much different, as we can use the create-next-app command.

Type in the following command in your terminal :

npx create-next-app blog-app

On typing this command, you will be asked multiple questions regarding the setup of your project. Once you answer all the questions, a new NextJS application will be created based on your requirements.

Step 2 : Opening the application in VS Code and viewing the folder structure.
Go to the folder in which your application is located, right-click anywhere and you will see these options:

Click on Git Bash Here. A Git Bash terminal will open, type in the following command:

code .

Your NextJS application will now be opened in V.S. Code. You can now see the folder structure :

You will see the following files and folders present:

next.config.js: It is the configuration file for NextJS.
jsconfig.json: It is the configuration file for JavaScript.
.gitignore: It contains the Git files and folders to ignore.
.eslintrc.json: It is the configuration file for ESLint.
src: It is the optional application source folder.
app: It is the App Router.
public: It contains the static assets to be served.
layout.js: It contains the Common Layout of the application.
package.json: It contains the project dependencies and scripts.

Step 3 : Running your NextJS application.
Navigate to your project directory using this command:

cd blog-app

Run your application using the following command:

npm run dev

On your browser, go to http://localhost:3000 to view your application.
This should be the output on your screen:

Step 4 : Making changes in the application.
Go to src/app/page.js, replace the code present in the file with the following code:

import Image from 'next/image'
import styles from './page.module.css'

export default function Home() {
  return (
    <main className={styles.main}>
      <h1>Welcome to your first NextJS Application!</h1>
    </main>
  );
};

You will see the following output on the screen:

Step 5 : Making multiple routes for the application.
As said earlier, NextJS supports a file-based routing system. We do not need to install any external package to use routing in our application.
In this step, I will show you how to create 2 routes for our blog
application - localhost:3000/first-post & localhost:3000/second-post

Go to src/app, and create 2 new folders - first-post and second-post. Inside both these folders, create a new file page.js.

Go to src/app/first-post/page.js, and write the following code in it:

"use client"
import Link from "next/link";

function FirstPost(){
    return(
        <>
            <h1 style={{color : "#fff", position : 'absolute', top : '55%', left : '22%'}}>When to Use Static Generation v.s. <br/>Server-side Rendering</h1>
            <p style={{color : 'lightgray', fontSize : '15px', position : 'absolute', top : '68%', left : '22%'}}>June 19, 2023</p>

            <p style={{color : "#fff", position : 'absolute', top : '73%', left : '22%', fontSize : '19px'}}>We recommend using <b>Static Generation</b> (with and without data) whenever <br/>
            possible because your page can be built once and served by CDN, <br/>
            which makes it much faster than having a server render the page on every request.</p>

            <p style={{color : "#fff", position : 'absolute', top : '87%', left : '22%', fontSize : '19px'}}>You can use Static Generation for many types of pages, including:</p>

            <ul style={{color : "#fff", position : 'absolute', top : '93%', left : '25%', fontSize : '19px'}}>
                <li>Marketing pages</li>
                <li>Blog Posts</li>
                <li>E-commerce product listings</li>
                <li>Help and documentation</li>
            </ul>

            <p style={{color : "#fff", position : 'absolute', top : '110%', left : '22%', fontSize : '19px'}}>You should ask yourself: "Can I pre-render this page <b>ahead</b> of a user's <br/>
            request?" If the answer is yes, then you should choose Static Generation.</p>

            <p style={{color : "#fff", position : 'absolute', top : '120%', left : '22%', fontSize : '19px'}}>On the other hand, Static Generation is <b>not</b> a good idea if you cannot pre-<br/>
            render a page ahead of a user's request. Maybe your page shows frequently <br/>
            updated data, and the page content changes on every request.</p>

            <p style={{color : "#fff", position : 'absolute', top : '133%', left : '22%', fontSize : '19px'}}>In that case, you can use <b>Server-Side Rendering</b>. It will be slower, but the <br/>
            pre-rendered page will always be up-to-date. Or you can skip pre-rendering <br/>
            and use client-side JavaScript to populate data.</p>

            <Link href="/" style={{color : 'blue', position : 'absolute', top : '147%', left : '22%'}}>← Back to home</Link>

            <br/>
            <br/>
        </>
    );
};

export default FirstPost;

On your browser, visit http://localhost:3000/first-post, and you will see this output:

You have created your first route first-post!

Now, go to src/app/second-post/page.js, and write the following code in it:

"use client"
import Link from "next/link";

function SecondPost(){
    return(
        <>
            <h1 style={{color : "#fff", position : 'absolute', top : '55%', left : '22%'}}>Two Forms of Pre-rendering</h1>
            <p style={{color : 'lightgray', fontSize : '15px', position : 'absolute', top : '62%', left : '22%'}}>April 15, 2023</p>

            <p style={{color : "#fff", position : 'absolute', top : '67%', left : '22%', fontSize : '19px'}}>Next.js has two forms of pre-rendering: <b>Static Generation</b> and <b>Server-side <br/>
            Rendering</b>. The difference is in when it generates the HTML for a page.</p>

            <ul style={{color : "#fff", position : 'absolute', top : '77%', left : '25%', fontSize : '19px'}}>
                <li><b>Static Generation</b> is the pre-rendering method that generates the <br/>
                HTML at <b>build time</b>. The pre-rendered HTML is then reused on each <br/>
                request.
                </li>
                <li><b>Server-side Rendering</b> is the pre-rendering method that generates the <br/>
                HTML on <b>each request.</b></li>
            </ul>

            <p style={{color : "#fff", position : 'absolute', top : '97%', left : '22%', fontSize : '19px'}}>Importantly, Next.js lets you <b>choose</b> which pre-rendering form to use for <br/>
            each page. You can create a "hybrid" Next.js app by using Static Generation <br/>
            for most pages and using Server-side Rendering for others.</p>

            <Link href="/" style={{color : 'blue', position : 'absolute', top : '110%', left : '22%'}}>← Back to home</Link>

            <br/>
            <br/>
        </>
    );
};

export default SecondPost;

On your browser, visit http://localhost:3000/second-post, and you will see this output:

You have created your second route second-post!

Step 6 : Editing the home page.
Go to src/app/page.js, and write the following code in it:

import Link from "next/link";
import "./page.module.css"

export default function Home() {
  return (
    <main>

      <p style={{color : "#fff", position : 'absolute', top : '67%', left : '30%', fontSize : '20px'}}>Hello World!</p>


      <h1 style={{color : "#fff", position : 'absolute', top : '83%', left : '30%'}}>Blog</h1>

      <ul style={{position : 'absolute', top : '91%', left : '30%', fontSize : '21px'}}>
        <li>
            <p style={{color : 'blue'}}><Link href="/first-post">When to use Static Generation v.s. Server-Side Rendering</Link></p>
            <br/>
            <p style={{color : 'lightgray', fontSize : '15px'}}>June 19, 2023</p>
        </li>
        <br/>
        <li>
            <p style={{color : 'blue'}}><Link href="/second-post">Two forms of Pre-Rendering</Link></p>
            <br/>
            <p style={{color : 'lightgray', fontSize : '15px'}}>April 15, 2023</p>
        </li>
      </ul>
    </main>
  );
};

On your browser, visit http://localhost:3000/, and you will see this output:

And thats it!! You have successfully created your first NextJS application!

Now, our next and final step is to deploy it on Vercel

Vercel is an American cloud platform as a service company. It maintains the NextJS web development framework. Its frontend cloud gives developers frameworks, workflows, and infrastructure to build a faster, more personalized web app. We can deploy our NextJS application on Vercel in mere minutes.

Step 1 : Push your NextJS application code to Github.
Go to https://github.com/ and create a repository named nextjs-blog.

Open your terminal in V.S. Code, and write the following commands:

git init

git add.

git commit -m "Initial Commit"

git remote add origin https://github.com/<Your Username>/nextjs-blog.git

git push -u -f origin master

You have successfully pushed your code to Github!
Your repository now should look like this:

Step 2 : Create a Vercel Account
First, go to https://vercel.com/signup?utm_source=next-site&utm_medium=learnpages&utm_campaign=no-campaign to create a Vercel account. Choose Continue with GitHub and go through the sign up process.

Step 3 : Import your Repository
Once you’re signed up, import your nextjs-blog repository on Vercel.

You’ll need to Install Vercel for GitHub. You can give it access to All Repositories.
Once you’ve installed Vercel, import nextjs-blog.

Step 4 : Deploy your application
You can use default values for the following settings — no need to change anything. Vercel automatically detects that you have a Next.js app and chooses optimal build settings for you.

Project Name
Root Directory
Build Command
Output Directory
Development Command

When you deploy, your Next.js app will start building. It should finish in under a minute.

When it’s done, you’ll get deployment URLs. Click on one of the URLs and you should see the application starter page live.

Here is the sample URL of my NextJS application deployed on Vercel - https://nextjs-technical-blog-website.vercel.app/

And thats it! You have successfully learnt how to create and deploy a NextJS application!

Connect with me on Linkedin :- Linkedin

Do check out my Github for amazing projects:- Github

View my Personal Portfolio :- Aryan's Portfolio