Forem: ElectronDome

WordPress: Old Tech or Unstoppable Force?

ElectronDome — Wed, 27 Aug 2025 15:54:13 +0000

Do you think WordPress is old and irrelevant in 2025?

Think again,

While flashy frameworks like React and Next.js grab all the hype, WordPress quietly continues to power over 40% of the internet. From small businesses launching their first website to big brands handling millions of visitors, WordPress remains the go-to choice. The reason? It solves problems that modern tools often overcomplicate — speed, cost, and accessibility. In a world obsessed with ‘new’ WordPress proves that sometimes the ‘classic’ still wins.

“The web keeps evolving, but one name refuses to step down: WordPress.”

First Let's checkout what are the real-world use-cases of WordPress,

Problem 1: Building a Website Costs Too Much

Many website builders and frameworks require subscriptions, licenses, or custom development.
Small businesses, bloggers, or NGOs can’t always afford that.

Solution: WordPress is Free & Open Source

No upfront cost to get started.
Thousands of free themes and plugins.
Huge global community keeps it evolving.

For beginners, it’s the easiest way to launch a site without touching code.

Problem 2: Adding Features Usually Requires Developers

In modern frameworks, adding even simple features (forms, analytics, SEO) often needs coding.
This slows down non-technical users.

Solution: WordPress Plugins means Endless Possibilities

Over 60,000 plugins for e-commerce, SEO, analytics, security, and more.
Install in one click, no developer required.
Example: Want an online store? Just add WooCommerce.

It’s like an app store for websites.

Problem 3: Non-Developers Struggle to Manage Websites

React, Next.js, or Webflow still demand technical knowledge for advanced customizations.
Non-coders often get stuck.

Solution: WordPress is Made for Non-Developers

Drag-and-drop builders (Elementor, Divi, Gutenberg).
Simple dashboard for content and media.
Perfect for bloggers, shop owners, and small businesses.
Even your grandma can publish a blog on WordPress.

Problem 4: Ranking on Google is Complicated

SEO optimization in custom setups is tricky and often requires experts.
Many modern builders lack strong SEO tools.

Solution: WordPress means SEO Superpowers

SEO-friendly structure by default.
Plugins like Yoast SEO and Rank Math make optimization easy.
Helps websites rank faster without needing deep SEO expertise.

Problem 5: Growing Websites Need Scalability

Some platforms work for small sites but fail under heavy traffic.
Businesses need reliability when scaling up.

Solution: WordPress Scales from Small Blogs to Big Brands

Runs everything from portfolios to enterprise sites.
Used by TechCrunch, Sony Music, Microsoft News.
With caching and CDNs, WordPress can handle millions of visitors.

Problem 6: Lack of Support in Other Platforms

Smaller platforms may disappear or stop updating.
Developers and resources may be limited.

Solution: WordPress Has a Massive Community

Millions of developers, designers, and freelancers available.
Tons of tutorials, forums, and resources online.
Future-proof — WordPress isn’t going anywhere.

So Basically, WordPress continues to dominate because it is simple, affordable, and powerful for content-driven websites blogs, company sites, portfolios, and e-commerce stores

But it’s not the answer to everything

When it comes to highly dynamic applications like social media platforms, real-time dashboards, streaming services, or enterprise-scale systems, frameworks like React and Next.js clearly outshine WordPress
They deliver lightning-fast performance, seamless interactivity, and developer-friendly scalability

In short: If you need a website, WordPress is still king but if you need a web application, React and Next.js are the modern champions and together they represent the two sides of the web we use every day.

At the end, it’s not about which one is better but which one is right for your project. And that’s exactly why WordPress continues to thrive while modern frameworks rise alongside it.

Decluttering Code: Because Fewer Bugs Live in Cleaner Rooms

ElectronDome — Wed, 20 Aug 2025 08:23:15 +0000

"Clean Code Starts with a Clean Room"

Hey Web Developers,

Do you keep your room clean and organized on your own?

If yes — great job! The discipline you maintain in your daily life often reflects in your professional work, especially in how you write and manage your code.

If not, maybe it’s time to start. Just like decluttering your room makes your mind feel fresh, decluttering your code can make your projects cleaner, faster, and easier to maintain.

In this post, we’ll see how frontend, backend, and database clutter happens — and the smartest ways to clean it up so your projects stay fast, maintainable, and easy to work with.

For a better understanding, we will go with a problem-solution based flow.

Let's start with the FrontEnd part,

Messy UI means Messy Mind

When your frontend gets cluttered, it’s like having a desk piled high with papers, cables, and random gadgets — even simple changes take forever because you can’t see the surface anymore.

Problem 1: CSS Bloat

Stylesheets full of unused classes from old designs.
Conflicting styles for the same element across files.
New styles created instead of reusing existing ones.

Solution:

Run a CSS Cleanup Tool – PurgeCSS or UnCSS can automatically strip unused styles.
Use Design Tokens – Centralize colors, spacing, and typography for consistency.
Adopt a Naming Convention – e.g., BEM keeps styles predictable and reusable.

In short, CSS is like your wardrobe — donate what you don’t wear, and organize the rest by category.

Problem 2: Repeated Components

Same button, card, or modal coded multiple times.
Slight variations leading to duplicated effort.

Solution:

Extract Reusable Components – If HTML/CSS repeats 2–3 times, make it a single component.
Use Props for Variations – One instead of two separate buttons.
Keep Components Small – Break down complex ones into smaller, testable parts.

In short, One versatile tool is better than carrying 10 similar ones.

Problem 3: State Management Chaos

Global state used unnecessarily.
Related state split across multiple hooks and files.

Solution:

Keep State Local When Possible – Only use global stores like Redux or Zustand for shared state.
Group Related State – Combine related values into one state object.
Prevent Over-Renders – Memoize heavy components with React.memo or Preact’s memo().

In short, State is like a to-do list — keep the main one in one place, don’t scatter sticky notes everywhere.

Problem 4: Heavy Assets & Slow Loads

Large images or scripts loaded upfront unnecessarily.

Solution:

Lazy Load – Use loading="lazy" for images and dynamic imports for components.
Compress Assets – Tools like ImageOptim, TinyPNG, and SVGO can help.
Use a CDN – Distribute assets for faster load times.

In short, Don’t carry your entire library when you only need one book.

Backend Clutter:The Danger of Feature Hoarding

A cluttered backend is like a workshop full of rusty tools — you don’t know which ones still work, and you waste time searching for the right one.

Problem 1: “God” Functions

Single functions handling multiple responsibilities.
Difficult to test and debug because everything is tangled.

Solution:

Follow Single Responsibility Principle – Each function does one job.
Refactor Large Functions – Split them into smaller, reusable helpers.
Write Unit Tests – Tests encourage simpler, more modular code.

In short, One sharp knife for each job is better than one dull knife for everything.

Problem 2: Unused Endpoints

Old APIs left in the codebase “just in case.”
Extra endpoints increasing attack surface.

Solution:

Deprecate Before Removing – Mark unused APIs and remove after a grace period.
API Documentation – Keep Swagger/OpenAPI docs updated to track usage.
Version Your APIs – Helps phase out older ones cleanly.

In short, Unused endpoints are like expired food — throw them out before they cause trouble.

Problem 3: Over-Engineered Logic

Excessive layers of abstraction for simple tasks.
Business logic scattered across multiple files unnecessarily.

Solution:

Keep Logic Flat Where Possible – Avoid too many indirections.
Centralize Business Logic – Store related logic in one well-named service/module.
Review for Simplification – During code review, ask “Can this be simpler?”

In short, Too many layers = too many hoops to jump through.

Database: Clutter in Tables = Slower Queries

A messy database is like a storage room with piles of random boxes — it might have what you need, but good luck finding it.

Problem 1: Unused Tables or Columns

Legacy tables from old features.
Columns no longer used by the application.

Solution:

Schema Audits – Regularly check for unused tables/columns.
Remove or Archive – If not used, drop them or store them separately.
Track Changes – Use migrations for controlled schema updates.

In short, Extra tables are like junk drawers — they seem harmless but hide the mess.

Problem 2: Poor Indexing

No indexes on frequently queried columns.
Too many indexes slowing down writes.

Solution:

Add Indexes Where Needed – Especially on WHERE and JOIN columns.
Monitor Query Performance – Use EXPLAIN in SQL to analyze execution.
Avoid Over-Indexing – Too many indexes can hurt write-heavy operations.

In short, Good indexing is like labelling storage boxes — you find things faster.

Problem 3: Duplicate & Stale Data

Old, irrelevant rows bloating the database.
Duplicate records causing inconsistent results.

Solution:

Set Data Retention Policies – Archive old data based on business needs.
Deduplicate Regularly – Use unique constraints or cleanup scripts.
Normalize Where Needed – Avoid repeating the same data across multiple tables.

In short, Stale data is like keeping old bills from 10 years ago — unnecessary and space-consuming.

Ok so not going much into more details,

Let's conclude

Decluttering code isn’t a one-off project — it’s a maintenance habit.
When your frontend is lean, your backend is tidy, and your database is clean, you ship features faster, fix bugs quicker, and enjoy coding a whole lot more.

Because in both life and code, the less clutter you keep, the more room you have to build something amazing.

Till then Happy Coding.

Exploring Css units beyond px

ElectronDome — Sat, 26 Jul 2025 11:10:19 +0000

Ever found yourself stuck choosing css units between px, rem, em, %, vh, or vw while styling your webpage?

Whether you're just starting with CSS or have been writing stylesheets for a while, understanding CSS units is essential for creating clean, consistent, and responsive designs.
With so many options available, it’s easy to get confused — but each unit has a purpose and knowing when to use which one can make your work faster and your layouts smarter.

In this blog, we’ll break down the most commonly used CSS units with beginner-friendly explanations, real-world use cases, and some deeper insights for those looking to level up their styling game.

When you're just starting with CSS, it's common to size everything using px (pixels). But as you dive deeper into responsive design and accessibility, you'll discover that there are better, more flexible units like rem, em, vh, %, and more.

In this guide, we’ll explore these CSS units beyond px, understand their use cases, and learn how to choose the right one depending on your layout needs. Whether you're a beginner or brushing up your CSS skills, this post will help you write cleaner, more scalable CSS.

The Css units can be basically classified into two different types:

Absolute units

As the name suggests, the absolute css units are fixed and does not depend on the size of the parent element or the viewport.

Absolute units include px, pt, pc, in, cm, mm, etc.

Relative units

Relative css units as the name implies are flexible and are relative to the parent element's size , the viewport's size or the root element's font size.

Relative units include rem, em, %, vh, vw, ex, etc.

Now let's talk about the most widely used css units one by one.

1. Pixels (px)

This is the most widely used unit of measurement.
px stands for pixel, the smallest unit of a digital display.
It's an absolute unit that represents a fixed size on screen, typically mapped to 1 physical device pixel (or scaled on high-DPI screens).
Best for precise elements like borders, icons, and 1px lines.
Does not scale with user settings (like browser zoom or font-size changes), making it less flexible for responsive or accessible designs.

Let us understand this with the help of an example:

Case-1: When the parent width is 80%

Case-2: When the parent width is 10%

So we see from the above examples that even if we are changing the dimensions of the parent element the child element dimensions are fixed and are not changing as they are in px.

2. Root em(rem) :

rem stands for root em, a relative unit in CSS.
It is relative to the root element's () font size.
If html { font-size: 16px; }, then 1rem = 16px.
Ideal for font sizes, padding, margin, and responsive design — ensures consistency across the entire layout.
Scales globally with just one change to the root font size — great for accessibility and theming.
Not ideal for components that need to scale based on their own font size use em instead in such cases.

3. Element em(em):

em is a typographic unit that represents the current element's font size.
It’s relative to the font size of the parent (or current element if overridden).
E.g., if font-size: 20px, then 1em = 20px.
Perfect for component-level spacing, such as padding/margin that should scale with text.
Flexible for self-contained components like buttons or cards.
Can compound in nested elements, making sizes unpredictable if not managed carefully.

4. Percentage(%):

% is a relative unit based on the size of the parent element.
Used for width, height, padding, margins, etc.
E.g., width: 50% means 50% of the parent’s width.
Great for fluid layouts and responsive containers.
Keeps layouts flexible across different screen sizes.
Behavior can be inconsistent, especially with vertical spacing or when parent size is not explicitly set.

5. Viewport Units: vh and vw

When you want elements to scale based on the actual size of the user’s screen, vh and vw are the go-to CSS units.

vh stands for viewport height
vw stands for viewport width

Both are relative to the dimensions of the browser window:

1vh = 1% of the viewport's height
1vw = 1% of the viewport's width

So:

100vh fills the full height of the screen
100vw stretches across the full width of the screen

Best use-cases

Fullscreen hero sections
Modals and overlays
Carousels and responsive banners
Fluid typography (especially with clamp())
Designing layouts that should always fill the screen, regardless of content

They enable truly responsive layouts where the size of elements is tied directly to the screen itself, not the parent element or font size.

Note: While vh and vw work seamlessly on desktops, they can behave unexpectedly on mobile devices.
Browsers may shrink the viewport height when toolbars (like the address bar) appear or disappear as users scroll
This causes elements sized with vh to jump or resize unexpectedly
To handle this, modern CSS introduces svh, lvh, and dvh, but support is still evolving, so always test on real devices.

6. Viewport Minimum(vmin):

vmin is 1% of the smaller side of the screen (width or height).
So lets say if the viewport is 1200x800, then 1vmin = 8px.
vmin is ideal when you want UI elements to scale based on the smallest constraint — useful for responsive typography, square boxes, or maintaining aspect ratios on both portrait and landscape orientations.
It is commonly used in viewport typography systems, like:

h1 {
  font-size: calc(1rem + 2vmin);
}

Can behave unpredictably on devices with dynamic toolbars or in split-screen views.

7. Viewport Maximum(vmax):

vmax is a viewport-relative unit equal to 1% of the larger dimension of the screen.
If viewport is 1200x800, then 1vmax = 12px.
Full-screen layouts or scaling elements that should follow the wider side of the screen
Maintains visual impact on large screens.
May overflow or break on narrow devices (like mobiles in portrait).
Use vmin and vmax when your layout needs to be adaptive, especially between mobile, tablet, and desktop in both orientations.

8. Fractional Unit(fr):

fr stands for fraction, used only inside CSS Grid layouts.
1fr means “1 part of the available space”.
Flexible and responsive grid column/row layouts. -Automatically distributes space without needing fixed widths. Cannot be used outside of display: grid.

Lets see three cases of grid usage in different forms:

Grid using fr units

grid-template-columns: 1fr 2fr 1fr

-Proportional layout that grows/shrinks with the container.
-Best for dynamic responsive layouts.
-Can misbehave if used with fixed-size grid containers.

Grid using px units

grid-template-columns: 100px 200px 100px

-Perfect when you need precise sizes (e.g., buttons/icons).
-Not responsive. Will overflow on small screens or shrink too much.
-Poor accessibility on zoomed or mobile views.

Grid using % units

grid-template-columns: 25% 50% 25%

-Useful for layouts relative to the container’s width.
-Parent must have a defined width for % to work predictably.
-Less flexible than fr when mixing fixed and flexible items.

9. Character Width(ch):

ch is relative to the width of the character "0" in the current font.
Typically used to size elements based on expected character count.
Perfect for input fields, code blocks, or text containers with fixed character widths.
Content-aware sizing for monospaced or text-heavy UIs.
In proportional fonts, width of "0" may not represent average character width accurately.

Example usage:

input {
  width: 30ch;
}

This means: the input will be wide enough to fit 30 characters of text (based on font).

10. x-height(ex):

ex is relative to the height of the lowercase letter “x” in the current font.
Useful for vertical alignment in typography-heavy layouts.
Specialized typography adjustments and vertical alignment. Font-sensitive vertical sizing.
Inconsistent across fonts; rarely used due to limited browser support and predictability.

Conclusion:

Yes — there’s a lot of units in CSS, and more are still arriving. Don’t sweat it. The CSS units you just explored (px, rem, em, %, the key viewport units, and fr) will already cover 99 % of what real projects demand: precise control where you need it, fluid scaling where you don’t, and rock‑solid support in every modern browser.

Think of the newer upcoming units as future helpers rather than extra homework. When they mature, they’ll solve niche problems (mobile toolbars, ultra‑fine typography) and make your codebase simpler, not harder. Master today’s proven units first; they’re more than enough to craft beautiful, responsive interfaces right now. Tomorrow’s additions will only make that job even easier.

So dive in with confidence — the tools you have are powerful, and the best is still yet to come. Happy coding!

Are Meta Tags still relevant in 2025?

ElectronDome — Fri, 18 Jul 2025 13:49:37 +0000

Hey Folks - Let's talk about the lesser known meta tag,

What is a meta tag?

In HTML, a meta tag provides metadata, which is data about the HTML document, that isn't displayed on the page itself. It is used by browsers, search engines, and other web services to understand the page's content and how to handle it.

So as the title asks Are Meta Tags still relevant in 2025?

The answer is "Yes". When it comes to writing clean, accessible, and SEO-friendly HTML, the unsung hero often hiding in the <head> of your webpage is the <meta> tag. Whether you're a beginner or a seasoned developer fine-tuning for performance and discoverability — meta tags matter!

But here is a key point to note down and that is not all meta tags are relevant in 2025 and you should include only those meta tags that is most important for your project(s) or application(s). Do not try to overuse meta tags.

Let's see a list of relevant and irrelevant meta tags:

RELEVANT META TAGS (2025)

1. General / SEO

<meta charset="UTF-8">
Specifies the character encoding so your webpage can correctly display all letters, symbols, numbers, and emojis from all languages (like English, Hindi, Chinese, Arabic, emojis, etc.).
<meta name="viewport" content="width=device-width, initial-scale=1">
Tells the browser to fit your website to the screen size of the device (like mobile, tablet, or desktop).
<meta name="description" content="...">
Provides a short summary of the page used by search engines in search results.
<meta name="robots" content="index, follow">
Tells all search engines to index the page and follow its links.
<meta name="googlebot" content="noindex">
Specifically Instructs Google crawler not to index this page.
<meta name="google-site-verification" content="...">
Proves site ownership to Google Search Console for verification.
<meta name="google" content="notranslate">
Prevents Google from offering automatic translation for the page.
<meta name="rating" content="adult">
Labels the page as adult content for SafeSearch and filtering systems.

2. Social Media (Open Graph / Twitter Cards)
Meta tags that control how your web page link appears when shared on social media platforms like Facebook, LinkedIn, Twitter and others

<meta property="og:title" content="...">
This tag sets the title text that appears when someone shares your webpage on social media.
<meta property="og:description" content="...">
Adds a short summary below the shared title.
<meta property="og:image" content="...">
Displays a preview image or thumbnail with the link.
<meta property="og:url" content="...">
Ensures the shared link points to the correct page.
<meta property="og:type" content="article">
Tells platforms the content type (like article, website, video).
<meta name="twitter:card" content="summary_large_image">
Enables a large image preview in Twitter/X posts.
<meta name="twitter:title" content="...">
Specifies the tweet’s title or heading.
<meta name="twitter:description" content="...">
Adds a short description below the title in the tweet card.
<meta name="twitter:image" content="...">
Displays an image in the tweet preview.
<meta name="twitter:creator" content="@yourhandle">
Credits the author’s Twitter handle in the card.

Note: As shown in the social meta tags list above, most platforms like Facebook, LinkedIn, WhatsApp, and others rely on Open Graph (og:) tags to generate link previews — so you don’t need separate tags for each platform. Twitter, however, uses its own twitter: tags, known as Twitter Cards.

3. Mobile & Responsive Design

<meta name="format-detection" content="telephone=no">
Prevents mobile browsers (especially iOS) from auto-linking phone numbers.
<meta name="theme-color" content="#0072FF">
Sets the browser’s UI color (like the address bar) to match your site’s branding.
<meta name="color-scheme" content="light dark">
Tells the browser your site supports both light and dark modes.

4. Progressive Web Apps (PWA)

<meta name="apple-mobile-web-app-capable" content="yes">
Enables full-screen app mode when saved to iOS home screen.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
Customizes the iOS status bar appearance in standalone app mode.
<meta name="apple-mobile-web-app-title" content="MyApp">
Sets a custom short name for the web app on iOS home screen.
<meta name="application-name" content="MyApp">
Defines the application name used by some browsers (like Windows or Android).
<meta name="msapplication-TileImage" content="icon.png">
Specifies the icon shown when the site is pinned to the Windows Start menu.
<meta name="msapplication-TileColor" content="#ffffff">
Sets the background color of the Windows Start tile.

5. Security & Privacy

<meta http-equiv="Content-Security-Policy" content="...">
Adds a layer of security by restricting what resources can load (if headers aren't set).
<meta name="referrer" content="no-referrer">
Stops the browser from sharing your page URL when someone clicks a link on your website.

6. Optional Metadata

<meta name="author" content="Your Name">
Defines the name of the page’s author for metadata purposes.
<meta name="publisher" content="Your Company">
Indicates the organization that published the content.
<meta name="generator" content="WordPress 6.0">
Specifies the software or platform used to create the webpage.

IRRELEVANT / OBSOLETE META TAGS (2025)

1. SEO / General

<meta name="keywords" content="..."> (ignored by all modern search engines)
<meta name="revisit-after" content="7 days">
<meta name="distribution" content="global">
<meta name="coverage" content="worldwide">
<meta name="abstract" content="...">

2. Deprecated or Redundant

<meta http-equiv="refresh" content="5; url=..."> (bad for SEO and accessibility)
<meta http-equiv="expires" content="0"> (ineffective in modern browsers)
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="Set-Cookie" content="..."> (does not work anymore)

3. Legacy Browser / Mobile

<meta http-equiv="X-UA-Compatible" content="IE=edge"> (for IE only, retired)
<meta name="HandheldFriendly" content="true"> (used by ancient browsers)
<meta name="MobileOptimized" content="width"> (used in old Windows Phone)
<meta name="mobile-web-app-capable" content="yes"> (replaced by manifest)

4. Accessibility / Language (Use HTML attributes instead)

<meta http-equiv="Content-Language" content="en"> Instead use:

5. Security Headers That Do Not Work via Meta

<meta http-equiv="X-Content-Type-Options" content="nosniff">
<meta http-equiv="Permissions-Policy" content="...">

Meta tags are the quiet conductors of the modern web: they don’t change what users see on-screen, yet they determine how your pages are rendered, discovered, previewed, and secured across browsers, search engines, and social platforms.

Feel Free to share your thoughts in the comment section.
Until then Happy Coding and Stay Tuned!

10 HTML Concepts That Every Web Developer Should Know

ElectronDome — Fri, 11 Jul 2025 14:23:09 +0000

Hey folks! Let’s talk HTML (but not the boring way)

Sure, we all know HTML is the backbone of the web. It’s been around since the dawn of the internet.

But let’s be real: HTML is more than just a bunch of tags wrapped in angle brackets.

When used right, it can shape powerful, accessible, and search-friendly websites that stand out from the crowd.

In this blog, we’ll explore 10 essential HTML concepts every web dev should know — with easy examples, smart use cases, and fun tips to help you level up. Let’s get started!

1. Use of Semantic Tags instead of <div> or <span>

The word “semantic” itself means study of meaning.
So, Semantic tags in HTML are the elements that clearly describe their meaning to both the browsers and the developers.
The <div> and the <span> tag are for styling but do not convey any meaning so sometimes the developer apart from the one who wrote the code gets confused by looking at the code and takes time to understand the code.

Semantic tags are used for :

Improving readability.
For better SEO.
For improving Accessibility.
Code becomes easier to maintain and update.

Let us understand this by looking into a code snippet
So following code snippet shows how is it when we use semantic tags Vs. without using it.

So here we can clearly see the difference as how semantic tags adds value to our code.

2. Importance of using alt attribute in <img> tag

alt is an attribute that is used with the <img> tag that provides an alternative information for an image if a user cannot view the image for some reason. alt attribute is the abbreviated form of alternative text.

Basic usage of alt attribute:

Not using alt attribute can lead to various issues like:

Missing alt means missed opportunity to rank in image search or improve your content relevance.
If the image fails to load, users see nothing — no description, no context.
While not technically a breaking error, some HTML validators will warn you that alt is missing — especially if your page claims to follow accessibility standards like WCAG or ARIA.
Screen readers for visually impaired users won’t know what the image is about
Now let’s see the two types of basic usage of alt

alt=”…”

Use it when the image adds meaning or content.
example usage of this is as follows:

See how this form of alt describes the meaning of the image. We can use this for product photos etc.

alt=” ”

Use it when the image is self-explanatory and do not need any explanation. example usage of this is as follows:

See here we do not need any kind of explanation so just alt=” ” is enough.

3. Using ARIA in your HTML Code

ARIA is the abbreviated form of Accessible Rich Internet Applications. It is a set of special HTML attributes that help improve accessibility for users who rely on assistive technologies like screen readers.
Native HTML elements (like <button>, <input>, etc.) come with built-in accessibility. But when you create custom UI components (like dropdowns, modals, or sliders using <div> and <span>), they lack semantic meaning. ARIA bridges that gap.

Common ARIA attributes are as follows:

Example-1 : Custom Button

Used when you’re not using the native <button> tag.

Example-2 : Expandable Menu

Tells screen readers that this button controls the menu and whether it’s open or closed.

So these were some of the examples that use aria to enhance the accessibility of their code.

4. type attribute in <button> tag

type is a very important attribute in the <button> tag.
Here are some lesser known facts about the type attribute

If we do not specify type in the button tag, the browser assumes type=”submit” as the default value.
The user should use type=”button” to avoid accidental submission of form.
One more interesting fact is the difference between <input type="submit"> and <button type="submit">

<input type=”submit”> is self-closing and you cannot put any HTML inside it.

<button type=”submit”>is not self-closing and we can put any HTML content inside it.

5. readonly Vs. disabled attribute in <input> tag

The readonly attribute in HTML <input> tags is used to make an input field non-editable by the user, without disabling it.

The disabled attribute in HTML is used to completely disable an input element, meaning the user cannot interact with it at all — no typing, no focusing, and its value won’t be submitted in a form.

6. Block-level Vs. Inline HTML elements

Let me give you a code snippet and you need to think of the placement of the elements before you look into the answer.

Here the three button elements are placed inside the div element. The obvious response by looking at it once would be as follows:

Figure 1: Wrong answer

But the correct answer to the placement of the buttons is as follows:

Figure 2: Correct answer

The reason being:

<button> is an inline element but <div> is a block-level element.

Inline elements in HTML are elements that flow within the text and do not force a line break. They only take up the necessary width for their content, unlike block-level elements which start on a new line and take up the full available width.

So, just by keeping a track of which HTML elements are block-level and which are inline HTML elements can save your lot of time.

7. <b> Vs. <strong>

<b> tag stands for bold and <strong> tag stands for strong.
Both the tags are used to make a specific text bold.
<b> is used for basic styling with no semantic meaning but <strong> tag is used where we want to provide a semantic meaning to a specific text like the user wants to show some warning messages, important points and emphasizing key points.
let us understand this with a code snippet

The output will be shown as follows:

The visual effect is the same for both the tags but <strong> adds a semantic meaning

8. <div> Vs.<section>

<div> is like a basic container where we can put any type of element.
<section> is like a semantic container which is used for grouping related content with a heading, heading is the most important thing in <section> tag.

9. <section> Vs. <article>

Use <article> for self-contained shareable content (like blog posts, comments, news stories).
Use <section> to group related content inside your page (like a "Features" section or a "Testimonials" block).

10. The lesser known <meta> tag

The meta tag is like a label on a file which tells the browser and the search engines what the page is about, how to display it, and how it should behave — but none of this is shown directly to visitors.
It is always placed inside the <head> of HTML:

Some more details about the above attributes:

charset: It sets the text encoding (usually UTF-8) and prevents weird characters from showing up. If a webpage supports multiple languages, including Hindi, Japanese, and Arabic and special characters show up as boxes or gibberish then use <meta charset=”UTF-8”>
viewport: It makes your page responsive and looks good on phones and tablets.
description: It describes your site to search engines and helps Google show better previews.
It is used to control the browser behaviour. One Use Case can be if a bank wants to prevent the sensitive pages from being cached by the browser then use meta tag like <meta http-equiv = ”cache-control” content = ”no-store”>
And that’s a wrap on the core HTML concepts every developer should know.

So go ahead — discover, experiment, build, break stuff, and build again. The web’s your playground.

Until next time — happy coding!

Understanding Web Development: The New Basics in 2025

ElectronDome — Fri, 04 Jul 2025 04:29:32 +0000

Web Development is an ART that only a Web Developer can Craft.

Hey folks,

Welcome to the wonderful world of Web Development!
These days, it feels like web development is sprinting through a tech marathon. One side is shouting, “AI will build everything for you!” while the others are still figuring out what version of JavaScript we are on.

Here is my take: AI won’t replace web developers — but it’s definitely becoming our new sidekick.

It is taking care of the repetitive work so we can focus on solving bigger challenges and building smarter experiences.

But AI isn’t the only game-changer in town.

Behind the scenes, the entire web stack is evolving — from how our browsers talk to servers (hello, HTTP/3!) to how graphics and code run in your browser (meet WebGPU and WASI). Similar to this, there are lot many
things that have evolved or are evolving

But

Before we zoom into what’s new in 2025, let’s quickly go over what web development actually means — especially if you’re just starting out or need a refresher.

What is Web Development?

At its core, web development is all about building and maintaining websites and web apps — everything from how they look, to how they behave, to how they talk to servers and store your data.

Depending on the roles and technologies involved, web development is generally split into three types:

Frontend Development

This is all the visual stuff — the part users actually see and interact with in their browser. That’s why it is also called as client-side development (because it runs in the client’s browser).
Common Technologies in use:

Structure & styling: HTML, CSS
Interactivity: JavaScript / TypeScript
Frameworks & Libraries: React, Angular, Vue

Backend Development

This is the behind-the-scenes logic — how the website or app works. It’s called server-side development because the code runs on the server and sends results to the frontend.
Common Technologies in use:

Server logic: Node.js, Python, Java, PHP
Databases: MongoDB, MySQL, PostgreSQL

Full Stack Development

Think of this as the complete package — frontend + backend + database + deployment. A full stack developer handles the entire flow from user interface to data storage and everything in between.

Now let’s take a look towards the major shifts in the web development technologies:

HTTP / 3

Let’s see what is HTTP in short first,
HTTP stands for the Hypertext Transfer protocol. It is the communication protocol used by web browsers and web servers to send and receive data over the internet.
HTTP/3 is the latest and fastest version of HTTP that is built on a new transfer protocol called QUIC.
Before the advent of HTTP/3, HTTP/1 and HTTP/2 were used which used Transmission Control Protocol(TCP) that had some issues like slow connections especially on mobile, Head-of-line blocking i.e. if one request is delayed all others in line after it must wait, another problem was poor handling of lost packets i.e. if a small piece of data is lost during the transfer of data, TCP makes you wait for it.
In short, HTTP/3 is a next-generation web protocol that solves the issues like speed, reliability and blocking problems of older HTTP versions.

Core Web Vitals

Core Web Vitals are a set of metrics defined by Google to measure the performance of a website by how real users experience a website. These metrics affect your website’s SEO ranking, so they’re important for both developers and business owners.
Originally, three main metrics were used:
LCP (Largest Contentful Paint) — How fast the main content appears
FID (First Input Delay) — How fast the site responds to user input
CLS (Cumulative Layout Shift) — How stable the layout is
The Problem With FID (First Input Delay) was
FID measured only the delay before the browser could start responding to a user’s first interaction (like a tap or click). But it didn’t track whether the website visually responded quickly, the experience felt smooth, the full interaction was fast.
In short, FID was too narrow. It focused just on the start of the interaction, not the full experience.
What’s New: INP (Interaction to Next Paint)
INP = Interaction to Next Paint.
Google introduced INP as a more complete measure of how responsive a site feels.
What INP Measures is not just the first input — it tracks all interactions: taps, clicks, scrolls, drags. Measures the full interaction lifecycle: When you click to how long it takes for the next visible update to appear.

WebGPU

WebGPU is a new web technology that lets your browser (like Chrome, Edge, Safari) talk directly to your computer’s graphics card (GPU).
This means:
Websites can now render high-quality graphics faster (like games, 3D designs, complex animations).
It can also speed up machine learning and other advanced computing tasks inside your browser — no need to install anything!
Before WebGPU, we had WebGL, WebGL2,Canvas/2D.
WebGL use was limited. It couldn’t use modern GPU features available on desktops or mobile devices. It was also not great for non-graphics tasks like AI or data processing.
Canvas/2D were used for simple drawings, charts, or 2D games. It was not suitable for high-end tasks.
What does WebGPU solve?
Old graphics APIs like WebGL that were hard to optimize now uses modern GPU power like DirectX 12, Vulkan, Metal.
WebGL was only for graphics, not for computing tasks but now WebGPU can do both — graphics and computations.
WebGPU is much faster and more efficient in case of complex 3D apps and ML models.

Passwordless SignIn

“Passwordless” means you can sign in to websites or apps without typing a password. Instead, you can use your fingerprint, face, or phone PIN — something you already use to unlock your device.
What are Passkeys?
Passkeys are a new, safer way to log in. They are digital keys stored on your device and protected by biometrics (like Face ID, fingerprint) or your device PIN.
You don’t need to remember anything.
You don’t need to type anything.
You just approve with your face or finger.
Passkeys are like magical keys on your phone that open your accounts — no passwords needed.
You just look at your screen or touch your finger, and you’re logged in.

That was just a wrap on some of the greatest shifts happening in web development! If you liked this, stick around — there’s a lot more coming your way.