DEV Community: Aryan Dev Shourie

BrowserAct Hands-On: Real Browser Automation from the CLI

Aryan Dev Shourie — Wed, 17 Jun 2026 08:37:21 +0000

A few days ago, I received an email from the BrowserAct team after they came across one of my articles. They introduced BrowserAct as a browser automation CLI built for AI agents and invited me to try it out.

Browser automation usually means selectors, waits, scripts, browser state management, and debugging.

Whether you're using Playwright, Selenium, or Puppeteer, even simple browser workflows often require writing and maintaining automation code.

When the BrowserAct team reached out and invited me to try their browser automation CLI, I was curious about one thing:

Can an AI-friendly CLI handle real browser workflows without requiring me to write Playwright or Selenium scripts?

Instead of writing a high-level overview, I decided to install BrowserAct, test it against real websites, create browser sessions, automate interactions, and evaluate how it performs in practical scenarios.

This article documents my hands-on experience and first impressions after testing BrowserAct on a real-world workflow.

What is BrowserAct?

BrowserAct is an open-source browser automation CLI that provides:

Browser automation
Browser session management
Chrome profile importing
Content extraction
Network inspection
Screenshots
CAPTCHA assistance
AI-agent friendly browser interactions

The interesting part is that BrowserAct tries to abstract browser automation into simple commands rather than requiring developers to write Playwright or Selenium scripts.

Installation

I installed BrowserAct using uv:

uv tool install browser-act-cli --python 3.12

After installation, I verified the available commands:

browser-act --help

The CLI immediately exposed commands for:

Navigation
Browser creation
Session management
State inspection
Content extraction
Network monitoring
Screenshot capture

At this point it was clear that BrowserAct was much more than a simple web scraping utility.

First Test: Content Extraction

I started with the simplest possible example.

browser-act stealth-extract https://example.com

Output:

# Example Domain
This domain is for use in documentation examples without needing permission. Avoid use in operations.
[Learn more](https://iana.org/domains/example)

The result was returned as clean Markdown.

No browser scripting.
No selectors.
No parsing logic.

Just a single command.

Testing a Real Website

Next, I wanted to see how BrowserAct handled a modern JavaScript-driven website.

I chose the Whale TV careers page.

browser-act stealth-extract \ https://www.whaletv.com/careers \ --content-type markdown

Output:

BrowserAct successfully extracted:

Job titles
Locations
Employment types
Job links

Some of the positions extracted included:

Smart TV App Engineer / Smart TV App Specialist
Product Manager
Technical Product Specialist
Android System Engineer

The extraction was surprisingly clean and readable.

Extracting a Detailed Job Description

Next, I tested a specific job posting.

browser-act stealth-extract \ https://www.whaletv.com/open-positions/smart-tv-app-engineer-smart-tv-app-specialist \ --content-type markdown

Output:

BrowserAct extracted:

Job title
Employment type
Location
Responsibilities
Technical requirements
Contact information

For example, the extracted technical stack included:

HTML5
CSS3
JavaScript
MySQL
SQL Server
Angular
Bootstrap
Lightning JS

This was more than simple HTML retrieval. The content was structured and immediately usable.

Creating a Browser From My Existing Chrome Profile

The next feature I wanted to evaluate was browser creation.

First, I listed the available browser profiles.

browser-act browser list-profiles

Output:

local_profile_101257381414961177 Your Chrome     local      shouriearyandev@gmail.com      Chrome
  browser:chrome_local_101261645860307073 whale-tv-evaluation managed    -                              whale-tv-evaluation

Total: 2 profiles

Tip: Use "browser-act browser create --source-profile <PROFILE_ID>" to create a browser from a profile.

I then created a browser using my existing Chrome profile.

browser-act browser create \ --type chrome \ --name "whale-tv-evaluation-test" \ --desc "Testing BrowserAct browser automation features" \ --source-profile <profile-id>

Output:

id=chrome_local_101361762646884363 name="whale-tv-evaluation-test" type=chrome
  desc="Testing BrowserAct browser automation features, navigation, interaction, and content extraction for Smart TV and developer tooling evaluation."
  imported_cookies=1606
  imported_ls_domains=160

BrowserAct reported:

imported_cookies=1592
imported_ls_domains=157

The browser was created successfully with existing browser state imported automatically.

Listing Available Browsers

To verify that the browser had been created successfully, I listed the available browsers.

browser-act browser list

Output:

The newly created browser appeared in the list and was ready to be used for automation.

Opening a Browser Session

After creating a browser, I opened a new browser session.

browser-act \ --session whale-test \ browser open \ <browser-id> \ https://www.google.com

Output:

session_name=whale-test
browser_type=chrome
url=https://www.google.com/
title=Google

BrowserAct immediately created a session and navigated to Google.
The output included:

session_name=whale-test
browser_type=chrome
url=https://www.google.com
title=Google

This confirmed that the browser was operational and ready for interaction.

Inspecting Page State

One of BrowserAct's most interesting features is the ability to inspect a page and receive a structured representation of its interactive elements.

browser-act \ --session whale-test \ state

Output:

Instead of exposing raw HTML, BrowserAct generated an interaction tree.

For example:

[14] Search Box
[17] Google Search
[18] I'm Feeling Lucky

This makes interaction significantly easier because actions can be performed using element indexes rather than CSS selectors.

Entering a Search Query

Using the index returned by the state command, I entered a search query.

browser-act \ --session whale-test \ input 14 "Whale TV careers"

Output:

input="Whale TV careers" element=14

BrowserAct successfully entered the text into the search box.

Clicking Search

Next, I triggered the search.

browser-act \ --session whale-test \ click 17

Output:

clicked=17

The click was executed successfully.

To allow the page to finish loading, I waited for the browser to become stable.

browser-act \ --session whale-test \ wait stable

Output:

wait completed: page is stable

This demonstrated how BrowserAct handles browser interactions through a simple command-driven workflow.

Navigating Directly to Whale TV Careers

Next, I wanted to test direct navigation to a website.

browser-act \ --session whale-test \ navigate https://www.whaletv.com/careers

Output:

url=https://www.whaletv.com/careers
title=whaletv.com/careers
new_tab=False

BrowserAct immediately navigated to the requested URL and reported:

url=https://www.whaletv.com/careers
title=whaletv.com/careers

At this point I was interacting with a real-world website rather than a simple test page.

Discovering Interactive Elements

After loading the careers page, I inspected the page state again.

browser-act \ --session whale-test \ state

Output:

BrowserAct identified actionable elements such as:

[11] Head of Ad Sales, Emerging Markets
[12] Ad Operations Specialist
[15] Accept Cookies

The conversion of page content into actionable elements is one of the most interesting aspects of BrowserAct's workflow.

Opening a Job Posting

Next, I clicked one of the available job listings.

browser-act \ --session whale-test \ click 11

Output:

clicked=11

BrowserAct opened the job posting and navigated to the detailed job description page.

Once again, I waited for the page to finish loading.

browser-act \ --session whale-test \ wait stable

Output:

wait completed: page is stable

The page was now ready for content extraction.

Extracting the Job Content

Finally, I extracted the content from the job details page.

browser-act \ --session whale-test \ get markdown

Output:

BrowserAct returned the complete job description including:

Responsibilities
Required qualifications
Employment details
Contact information

At this point I had completed an end-to-end workflow:

Create Browser
→ Open Session
→ Navigate
→ Inspect State
→ Click Elements
→ Wait
→ Extract Content

without writing a single line of browser automation code.

Commands Tested During Evaluation

During my evaluation, I successfully tested the following BrowserAct capabilities:

Content Extraction

browser-act stealth-extract <url>

Browser Profile Discovery

browser-act browser list-profiles

Browser Creation

browser-act browser create

Browser Sessions

browser-act browser open

Page Inspection

browser-act state

Browser Interaction

browser-act input 
browser-act click 
browser-act navigate 
browser-act wait stable

Content Extraction From Active Sessions

browser-act get markdown

Through this testing, I was able to evaluate BrowserAct across both extraction and browser automation workflows.

BrowserAct vs Traditional Browser Automation

During testing, I couldn't help comparing BrowserAct to tools such as Playwright and Selenium.

Traditional browser automation usually involves:

Writing code
Creating selectors
Handling waits
Managing browser state
Managing sessions

BrowserAct takes a different approach.

Instead of building automation through code, many workflows can be performed directly through CLI commands.

For quick tasks such as:

Extracting website content
Navigating pages
Opening browser sessions
Clicking buttons
Reading page content

the workflow feels significantly lighter.

That doesn't replace full automation frameworks, but it does make many common browser tasks much faster to execute.

Who Might Find BrowserAct Useful?

Based on my testing, BrowserAct could be useful for:

AI Agent Development

Developers building AI agents that need browser capabilities.

Research Workflows

Collecting information from websites and extracting structured content.

Browser Automation

Automating simple browser interactions without building a complete automation framework.

Developer Tooling

Internal tools that need browser-based capabilities.

Content Extraction

Extracting structured content from modern websites.

Final Thoughts

My goal was simple: install BrowserAct, test it on real websites, and determine whether it could handle practical browser automation workflows.

During testing I was able to:

✅ Install BrowserAct

✅ Extract content from multiple websites

✅ Extract detailed job descriptions

✅ Import an existing Chrome profile

✅ Create a browser

✅ Open browser sessions

✅ Navigate websites

✅ Inspect page structure

✅ Interact with page elements

✅ Extract content after navigation

Most importantly, I was able to complete an entire workflow:

Create Browser
→ Open Session
→ Navigate
→ Inspect
→ Click
→ Wait
→ Extract

using CLI commands instead of writing browser automation code.

For developers interested in browser automation, AI agents, content extraction, or developer tooling, BrowserAct is definitely worth exploring.

This was my first round of testing, and I focused primarily on installation, content extraction, browser creation, session management, navigation, and page interaction.

There are still several capabilities I haven't explored in depth yet, including verification handling, remote human handoff, screenshots, network inspection, multi-session workflows, and some of BrowserAct's more advanced browser management features.

Those areas deserve their own dedicated evaluation, which I'll likely cover in a follow-up article after additional testing.

What's Next?

This article focused on validating the core BrowserAct workflow:

In future testing, I plan to explore:

Remote human handoff with remote-assist
CAPTCHA and verification workflows
Screenshot generation
Network inspection capabilities
Parallel browser sessions
Chrome profile reuse across workflows
Multi-browser isolation strategies
More complex end-to-end automation scenarios

If those tests are successful, I'll publish a follow-up article documenting the results.

Resources

Try BrowserAct:

https://browseract.com?fpr=aryan21

BrowserAct GitHub Skills:

https://github.com/browser-act/skills

BrowserAct Documentation:

https://docs.browseract.com

Disclosure

This article includes an affiliate link. If you decide to try BrowserAct through my referral link, I may earn a commission at no additional cost to you.

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