DEV Community: Anthony Bañon Arias

Universal Naming Conventions for Multi-Language Projects

Anthony Bañon Arias — Tue, 21 Oct 2025 23:53:36 +0000

Introduction

When your stack includes multiple programming languages and frameworks,naming can quickly become chaos.

Each language has its own style:

Python uses snake_case,
Java prefers camelCase,
React components love PascalCase,
and databases often go for lower_snake_case.

In large or polyglot projects, switching conventions constantly becomes a mental tax and a source of subtle bugs.

This post proposes a unified, language-agnostic naming convention system — inspired by PEP 8 (Python), Java Code Conventions and Google Style Guides — to keep every part of your codebase consistent, no matter the language or framework.

General Naming Principles

Before applying specific conventions, keep these universal principles in mind:

Be consistent: The same idea should always have the same name pattern.
Be descriptive: Names should reveal intent, not just data type.
Avoid abbreviations: Prefer userProfile over usrProf.
Avoid noise words: Skip redundant suffixes like ManagerClass, HelperUtil.
Use singular nouns for class names (User, not Users).
Use verbs for functions or methods (calculateTotal(), fetchUser()).
Prefer clarity over cleverness: Future you (or another dev) should understand it instantly.

Unified Naming Convention Table

Context	Convention	Example	Notes / Applies To
Project / Repository	kebab-case	clothing-store, user-auth-service	Common across GitHub, Docker, CI/CD
Folders	snake_case	clothing_store, shop_lite	Lowercase only, use _ for spaces
Files	camelCase	userController.py, dataModel.c	Follow Google C++ Style
Classes / Components	PascalCase	UserController, ProductCard, OrderService	Used in Java, JS, C#, Python classes
Variables / Functions	camelCase	getUserOrders, calculateTotal	Standard in JS, Java, C#, PHP
Constants	UPPER_SNAKE_CASE	MAX_RETRIES, DEFAULT_TIMEOUT	For values that should not change
Database Tables / Collections	snake_case plural	users, order_items, product_reviews	Consistent in SQL and NoSQL
Database Fields / Columns	snake_case singular	first_name, created_at	Never use camelCase in DB
API Endpoints (REST)	kebab-case	/api/v1/user-orders	Lowercase, hyphen-separated paths
Environment Variables	UPPER_SNAKE_CASE	DATABASE_URL, JWT_SECRET	Universal across .env files
Git Branches	kebab-case with prefix	feature/add-auth, fix/login-bug	No spaces, accents, or uppercase
Docker Services	snake_case	web_app, mongo_db, redis_cache	Works across YAML and Compose
Configuration Files	lowercase	.env, docker-compose.yml, package.json	Standard convention across tools

Final Thoughts

Consistency is the invisible architecture that makes a project feel professional.

When every file, class, and variable follows a shared logic — switching between Java, Python, or JavaScript feels effortless.

Adopting a unified naming convention isn't about rigidity; it's about freeing your brain to focus on solving problems, not remembering whether it was UserService or user_service.

Build once, name forever.

📚 References

SQL Commands Guide

Anthony Bañon Arias — Wed, 08 Oct 2025 14:50:34 +0000

Introduction

Structured Query Language (SQL) is the standard language used to manage relational databases.

It allows us to create, manipulate, and secure data efficiently, regardless of the database system (MySQL, MariaDB, PostgreSQL, SQLite, Oracle, etc.).

This post summarizes the main components of SQL and their most important commands.

Each section includes the type of command, syntax, and a concise description, serving as a quick reference or learning manual.

🧩 Data Definition Language (DDL)

DDL is used to define and modify the structure of database objects such as tables, schemas, and views.

Type	Syntax	Description
`CREATE DATABASE`	`CREATE DATABASE database_name;`	Creates a new database.
`CREATE TABLE`	`CREATE TABLE table_name (column_name data_type, ...);`	Defines a new table with specified columns and data types.
`ALTER TABLE`	`ALTER TABLE table_name ADD	DROP
{% raw %}`DROP TABLE`	`DROP TABLE table_name;`	Permanently deletes a table and its data.
`TRUNCATE TABLE`	`TRUNCATE TABLE table_name;`	Deletes all data from a table but keeps its structure.
`RENAME TABLE`	`RENAME TABLE old_name TO new_name;`	Renames a table.
`CREATE INDEX`	`CREATE INDEX index_name ON table_name (column_name);`	Creates an index to improve query performance.
`DROP INDEX`	`DROP INDEX index_name ON table_name;`	Deletes an index.

🧮 Data Manipulation Language (DML)

DML is used to insert, update, delete, and retrieve data from database tables.

🟢 SELECT — Retrieve Data

Type	Syntax	Description
Select all columns	`SELECT * FROM table_name;`	Retrieves all data from a table.
Select specific columns	`SELECT column1, column2 FROM table_name;`	Retrieves specific columns.
With condition	`SELECT * FROM table_name WHERE column = value;`	Filters rows based on a condition.
With multiple conditions	`SELECT * FROM table_name WHERE col1='x' AND col2>10;`	Uses logical operators (`AND`, `OR`, `NOT`).
With sorting	`SELECT * FROM table_name ORDER BY column ASC	DESC;`
With grouping	`SELECT column, COUNT(*) FROM table_name GROUP BY column;`	Groups results for aggregation.
With limit	`SELECT * FROM table_name LIMIT 10;`	Restricts the number of returned rows.

🟠 INSERT — Add Data

Type	Syntax	Description
Insert all columns	`INSERT INTO table_name VALUES (value1, value2, ...);`	Inserts data into all columns in order.
Insert specific columns	`INSERT INTO table_name (col1, col2) VALUES (val1, val2);`	Inserts data into specific columns.
Insert multiple rows	`INSERT INTO table_name (col1, col2) VALUES (v1, v2), (v3, v4);`	Inserts multiple rows at once.

🔵 UPDATE — Modify Data

Type	Syntax	Description
Basic update	`UPDATE table_name SET column=value;`	Updates all rows in a table.
Conditional update	`UPDATE table_name SET column=value WHERE condition;`	Updates only rows that match the condition.
Multiple columns	`UPDATE table_name SET col1=val1, col2=val2 WHERE id=1;`	Updates several columns simultaneously.

🔴 DELETE — Remove Data

Type	Syntax	Description
Delete all rows	`DELETE FROM table_name;`	Removes all data from the table.
Conditional delete	`DELETE FROM table_name WHERE condition;`	Removes rows that meet the condition.

👁️ View Definition

Views are virtual tables based on the result of a query.

Type	Syntax	Description
Create a view	`CREATE VIEW view_name AS SELECT column1, column2 FROM table_name;`	Defines a view to simplify queries.
Modify a view	`ALTER VIEW view_name AS SELECT ...;`	Changes the view definition.
Delete a view	`DROP VIEW view_name;`	Removes a view from the database.

🔄 Transaction Control

Transactions ensure data integrity by grouping operations into atomic units.

Type	Syntax	Description
Start transaction	`BEGIN;` or `START TRANSACTION;`	Begins a new transaction block.
Commit transaction	`COMMIT;`	Saves all operations within the transaction.
Rollback transaction	`ROLLBACK;`	Cancels the transaction and reverts changes.
Savepoint	`SAVEPOINT name;`	Creates a point within a transaction to roll back to.
Rollback to savepoint	`ROLLBACK TO SAVEPOINT name;`	Undoes operations back to a savepoint.
Release savepoint	`RELEASE SAVEPOINT name;`	Deletes a savepoint marker.

🧱 Integrity Constraints

Constraints ensure data validity and consistency within the database.

Type	Syntax	Description
Primary key	`PRIMARY KEY (column_name)`	Ensures unique and non-null values per row.
Foreign key	`FOREIGN KEY (col) REFERENCES other_table(col)`	Enforces referential integrity between tables.
Unique	`UNIQUE (column_name)`	Prevents duplicate values.
Not null	`column_name data_type NOT NULL`	Disallows empty (NULL) values.
Check	`CHECK (condition)`	Validates data against a logical condition.
Default	`column_name data_type DEFAULT value`	Sets a default value for a column.

🔐 Authorization and Security

Defines access permissions for users and roles.

Type	Syntax	Description
Create user	`CREATE USER 'username'@'host' IDENTIFIED BY 'password';`	Creates a new user account.
Grant privilege	`GRANT privilege ON database.table TO 'username'@'host';`	Gives permissions (e.g., SELECT, INSERT).
Revoke privilege	`REVOKE privilege ON database.table FROM 'username'@'host';`	Removes permissions.
Drop user	`DROP USER 'username'@'host';`	Deletes a user.
Show privileges	`SHOW GRANTS FOR 'username'@'host';`	Displays granted permissions.

💬 Embedded and Dynamic SQL

Used to integrate SQL into programming languages.

Type	Syntax	Description
Embedded SQL	`EXEC SQL statement;`	SQL written directly inside host language code.
Dynamic SQL	`PREPARE stmt FROM 'SQL statement'; EXECUTE stmt;`	Builds and executes SQL statements dynamically at runtime.

🏁 Conclusion

SQL is a vast language that unifies the way databases are created, manipulated, and secured.

By understanding its main components — DDL, DML, Views, Transactions, Integrity, Authorization, and Embedded SQL — developers can efficiently design robust and scalable database systems.

This guide serves as a complete quick reference to keep at hand while coding or learning database management.

Master these commands step by step, and you’ll have the foundation of nearly every relational database in the world.

Understanding Web Rendering Strategies

Anthony Bañon Arias — Wed, 10 Sep 2025 00:15:03 +0000

Introduction

When building modern web applications, one of the most critical decisions is how to render your content. For years, the conversation revolved mainly around SSR (Server-Side Rendering) vs CSR (Client-Side Rendering). But today, the ecosystem is much richer: we also have SSG, ISR, Hydration, Streaming, Edge Rendering, and Hybrid approaches.

In this article, we’ll break down the main rendering strategies, explore their differences, and compare their pros and cons.

Rendering Strategies Overview

Here’s a comparison of the most common rendering strategies used in web development:

Strategy	Meaning	How it works	Example Frameworks
SSR (Server-Side Rendering)	Render on the server	Server generates full HTML with data and sends it to the browser on each request.	Django, Symfony (Twig), Laravel (Blade), EJS, Next.js (SSR mode)
CSR (Client-Side Rendering)	Render in the client	Server sends almost empty HTML + JS. Browser builds the UI entirely.	React, Angular, Vue (SPA mode)
SSG (Static Site Generation)	Pre-rendered static	Pages are pre-built into static HTML at build time. Server just serves files.	Next.js (SSG), Gatsby, Hugo, Jekyll
ISR (Incremental Static Regeneration)	Regeneration on demand	Like SSG but pages can be regenerated in the background when data changes.	Next.js (with revalidate)
Hydration	Adding interactivity	Server delivers HTML (SSR/SSG), then client injects interactivity with JS.	React SSR + hydration, Vue SSR, SvelteKit
Streaming SSR	Progressive rendering	Server streams parts of HTML progressively for faster perceived load.	React 18 streaming, Angular Universal
Isomorphic / Universal	Shared client & server code	Same app runs both server-side and client-side.	Next.js, Nuxt.js, Remix
MPA (Multi-Page Application)	Classic multipage	Each route is a new page rendered on the server.	Django, Symfony, Laravel (traditional)
SPA (Single-Page Application)	One-page web app	Single HTML loads once, internal navigation handled client-side.	React SPA, Angular SPA, Vue SPA
Edge Rendering	Render at the edge	HTML is rendered at CDN/Edge servers closer to the user.	Next.js on Vercel Edge, Cloudflare Pages
Hybrid Rendering	Mix of approaches	Some pages use SSR, others SSG, others CSR.	Next.js, Nuxt.js, Remix

Pros & Cons of Each Strategy

Strategy	Advantages	Disadvantages
SSR	SEO-friendly, fast first load, dynamic data	Higher server load, slower navigation (full reloads)
CSR	Rich interactivity, fast navigation, feels like an app	Poor initial SEO (without prerendering), slower first load
SSG	Super fast (CDN-ready), cheap hosting, great SEO	Build times increase with content size, not ideal for frequently changing data
ISR	Best of SSG + dynamic updates, scalable	Requires CDN/infra support, slightly more complex setup
Hydration	Great balance: SEO + interactivity	Can cause large JS bundles and slower hydration time
Streaming SSR	Faster perceived load, good for big pages	Still relatively new, more complex implementation
Isomorphic / Universal	Code reuse across server/client, flexible	More complexity in build and architecture
MPA	Simple, traditional, SEO-friendly	Full page reloads, less “app-like”
SPA	Smooth UX, fast client navigation	SEO issues (unless SSR/SSG), slower first paint
Edge Rendering	Extremely fast (close to user), scalable	Vendor lock-in (depends on provider), still maturing
Hybrid Rendering	Flexibility: choose best per route	More setup complexity, harder to maintain

Conclusion

Modern web development goes far beyond the old SSR vs CSR debate. Developers now have a spectrum of rendering strategies to choose from, depending on project requirements:

Need SEO + fast load? → SSR, SSG, or Hybrid
Need high interactivity? → CSR or SPA
Need scalability? → ISR or Edge Rendering

Most modern frameworks like Next.js, Nuxt.js, and Remix adopt a hybrid approach, allowing you to mix and match SSR, CSR, and SSG per route. This flexibility is why hybrid rendering is quickly becoming the standard for modern apps.

Checking `null`, `undefined`, Empty, and Falsy Values in JavaScript

Anthony Bañon Arias — Sun, 17 Aug 2025 19:52:32 +0000

🔹 Introduction

If you have written JavaScript for a while, you’ve surely faced one of the most common challenges:

👉 distinguishing between null, undefined, empty strings, zero, or other "falsy" values.

It can be confusing, since JavaScript has its own truthy/falsy evaluation system. Sometimes you only need to check whether a variable exists, but in other cases you must know whether it is specifically null, undefined, "", or even an empty object or array.

This article provides a comprehensive cheatsheet to cover all these scenarios, with explanations, code snippets, and practical use cases. Save it as your personal reference when debugging or writing clean conditions in JavaScript.

🔹 General Concept: Truthy vs Falsy

In JavaScript, values are evaluated in Boolean contexts as either truthy or falsy.

✅ Falsy values (evaluate to `false`):

false
0, -0, 0n (BigInt zero)
"" (empty string)
null
undefined
NaN

Everything else is considered truthy (including "0", "false", [], {}, etc.).

Example:

if (!0) console.log("0 is falsy");       // ✅
if (!"") console.log("Empty string");    // ✅
if (!null) console.log("Null is falsy"); // ✅

Cheatsheet: Common Checks

Check	Code	What it validates
Falsy in general	`if (!x)`	`null`, `undefined`, `0`, `""`, `NaN`, `false`
Is defined	`if (x !== undefined)`	Ensures `x` is not `undefined`
Is null	`if (x === null)`	Only `null`
Is null or undefined	`if (x == null)`	True for both `null` and `undefined`
Is NOT null/undefined	`if (x != null)`	Means `x` has a real value
Empty string	`if (x === "")`	String with length `0`
Non-empty string	`if (typeof x === "string" && x.trim() !== "")`	Ensures it’s a meaningful string
Valid number	`if (!isNaN(x))`	Not `NaN`
Empty array	`if (Array.isArray(x) && x.length === 0)`	Array with no elements
Non-empty array	`if (Array.isArray(x) && x.length > 0)`	Array with elements
Empty object	`if (x && Object.keys(x).length === 0)`	Object without properties
Non-empty object	`if (x && Object.keys(x).length > 0)`	Object with properties

Use Cases and Examples

1. Checking if a variable has any value

let user;
if (user == null) {
  console.log("User is either null or undefined");
}

2. Avoiding errors with optional values

let config = {};
if (config.apiKey != null) {
  console.log("API Key is set:", config.apiKey);
}

3. Detecting empty input

let input = "";
if (input === "") {
  console.log("Please provide a value");
}

4. Validating arrays

let items = [];
if (Array.isArray(items) && items.length === 0) {
  console.log("The list is empty");
}

5. Ensuring an object has properties

let settings = {};
if (settings && Object.keys(settings).length === 0) {
  console.log("Settings object is empty");
}

Best Practices

Use == null when you want to catch both null and undefined.

if (value == null) console.log("Null or undefined");

Use === null or === undefined when you want strict checks.
Always check type + content for strings and arrays (typeof x === "string" && x.trim() !== "").
Use Array.isArray() instead of instanceof Array for reliability.
For objects, combine truthiness and Object.keys(obj).length to ensure they are not empty.

Conclusion

Dealing with null, undefined, empty strings, or falsy values is part of everyday JavaScript coding. The key is knowing when to use general falsy checks (if (!x)) versus specific conditions (x === null, Array.isArray(x), etc.).

With this cheatsheet, you’ll avoid common pitfalls and write cleaner, more robust conditions. Bookmark this article or keep it handy as a quick reference for your next JavaScript project. 🚀

🔗 References:

JavaScript Arrays

Anthony Bañon Arias — Sun, 17 Aug 2025 16:32:45 +0000

🔢 JavaScript Arrays: The Complete Guide to Methods

Arrays are one of the most fundamental data structures in JavaScript.

Whether you are working with lists, collections of objects, or results from an API, mastering Array methods will make your code cleaner, faster, and easier to maintain.

In this article, we’ll go through all major Array methods, group them by functionality, and show examples you can use right away.

🔗 Reference: MDN Web Docs – Array

📦 Why Arrays Matter

An array in JavaScript is an ordered list of values.

Arrays can hold numbers, strings, objects, or even other arrays.

They also come with a rich set of built-in methods that allow you to add, remove, transform, search, and iterate over data.

🔤 Array Methods by Category

1. 🔄 Adding and Removing Elements

Method	Description	Example
`push()`	Add element(s) to the end	`[1,2].push(3) // [1,2,3]`
`pop()`	Remove last element	`[1,2,3].pop() // [1,2]`
`unshift()`	Add element(s) to the start	`[2,3].unshift(1) // [1,2,3]`
`shift()`	Remove first element	`[1,2,3].shift() // [2,3]`
`splice(start, deleteCount, ...items)`	Add/remove/replace elements	`arr.splice(1,1,"x")`

2. 🔍 Searching & Checking

Method	Description	Example
`indexOf()`	First index of a value	`["a","b"].indexOf("b") // 1`
`lastIndexOf()`	Last index of a value	`["a","b","a"].lastIndexOf("a") // 2`
`includes()`	Checks if value exists	`[1,2,3].includes(2) // true`
`find(fn)`	First element matching condition	`[1,2,3].find(x=>x>1) // 2`
`findIndex(fn)`	Index of first match	`[1,2,3].findIndex(x=>x>1) // 1`
`some(fn)`	At least one passes test	`[1,2,3].some(x=>x>2) // true`
`every(fn)`	All elements pass test	`[1,2,3].every(x=>x>0) // true`

3. 🔁 Iteration

Method	Description	Example
`forEach(fn)`	Runs function for each element	`[1,2,3].forEach(x=>console.log(x))`
`map(fn)`	Creates new array with mapped values	`[1,2,3].map(x=>x*2) // [2,4,6]`
`filter(fn)`	Keeps elements that match condition	`[1,2,3].filter(x=>x>1) // [2,3]`
`reduce(fn, init)`	Accumulate values left → right	`[1,2,3].reduce((a,b)=>a+b,0) // 6`
`reduceRight(fn, init)`	Accumulate right → left	`[1,2,3].reduceRight((a,b)=>a-b) // 0`
`flatMap(fn)`	Map + flatten one level	`["a b","c"].flatMap(x=>x.split(" ")) // ["a","b","c"]`

4. 📐 Sorting & Rearranging

Method	Description	Example
`sort(fn?)`	Sorts array in-place	`[3,1,2].sort() // [1,2,3]`
`reverse()`	Reverses order	`[1,2,3].reverse() // [3,2,1]`

5. ✂️ Slicing & Copying

Method	Description	Example
`slice(start?, end?)`	Returns shallow copy of part	`[1,2,3].slice(1) // [2,3]`
`concat()`	Merges arrays	`[1,2].concat([3]) // [1,2,3]`
`flat(depth)`	Flattens nested arrays	`[1,[2,[3]]].flat(2) // [1,2,3]`
`copyWithin(target, start, end?)`	Copies elements within array	`[1,2,3,4].copyWithin(0,2) // [3,4,3,4]`
`fill(value, start?, end?)`	Fills with value	`[1,2,3].fill(0) // [0,0,0]`
`toSpliced()` (ES2023)	Immutable version of splice	`[1,2,3].toSpliced(1,1) // [1,3]`

6. 📏 Information & Conversion

Method	Description	Example
`length` (property)	Number of items	`[1,2,3].length // 3`
`join(sep)`	Converts to string with separator	`[1,2,3].join("-") // "1-2-3"`
`toString()`	Default string conversion	`[1,2,3].toString() // "1,2,3"`
`toLocaleString()`	Localized string	`[123456].toLocaleString("de-DE")`
`Array.isArray(val)`	Checks if value is an array	`Array.isArray([]) // true`
`Array.from(iterable)`	Creates array from iterable	`Array.from("abc") // ["a","b","c"]`
`Array.of(...items)`	Creates array from arguments	`Array.of(1,2,3) // [1,2,3]`

🧑‍💻 Practical Example

Let’s bring all this together in a small script:

// =====================
// 🔤 Array Methods Demo
// =====================

// 1. 🔄 Adding and Removing Elements
let arr = [1, 2];
arr.push(3); // Adds element to the end -> [1, 2, 3]
console.log("push:", arr);

arr.pop(); // Removes last element -> [1, 2]
console.log("pop:", arr);

arr.unshift(0); // Adds element to the beginning -> [0, 1, 2]
console.log("unshift:", arr);

arr.shift(); // Removes first element -> [1, 2]
console.log("shift:", arr);

arr.splice(1, 1, "x"); // Removes 1 element at index 1, inserts "x" -> [1, "x"]
console.log("splice:", arr);

// ----------------------------------

// 2. 🔍 Searching & Checking
let nums = [1, 2, 3, 2];

console.log("indexOf:", nums.indexOf(2)); // First index of 2 -> 1
console.log("lastIndexOf:", nums.lastIndexOf(2)); // Last index of 2 -> 3
console.log("includes:", nums.includes(3)); // true, because 3 exists

console.log("find:", nums.find(x => x > 2)); // Finds first > 2 -> 3
console.log("findIndex:", nums.findIndex(x => x > 2)); // Index of first > 2 -> 2

console.log("some:", nums.some(x => x > 3)); // false, no element > 3
console.log("every:", nums.every(x => x > 0)); // true, all positive

// ----------------------------------

// 3. 🔁 Iteration
let base = [1, 2, 3];

base.forEach(x => console.log("forEach element:", x)); // Logs each element

let doubled = base.map(x => x * 2); // Creates [2,4,6]
console.log("map:", doubled);

let filtered = base.filter(x => x > 1); // Keeps [2,3]
console.log("filter:", filtered);

let sum = base.reduce((a, b) => a + b, 0); // Adds all -> 6
console.log("reduce:", sum);

let reduceR = base.reduceRight((a, b) => a - b); // Right to left ((3-2)-1) -> 0
console.log("reduceRight:", reduceR);

let flatMapped = ["a b", "c"].flatMap(x => x.split(" ")); // Split and flatten -> ["a","b","c"]
console.log("flatMap:", flatMapped);

// ----------------------------------

// 4. 📐 Sorting & Rearranging
let sortArr = [3, 1, 2];
sortArr.sort(); // Sorts ascending -> [1,2,3]
console.log("sort:", sortArr);

sortArr.reverse(); // Reverses -> [3,2,1]
console.log("reverse:", sortArr);

// ----------------------------------

// 5. ✂️ Slicing & Copying
let copyArr = [1, 2, 3, 4];

console.log("slice:", copyArr.slice(1, 3)); // [2,3]
console.log("concat:", [1, 2].concat([3, 4])); // [1,2,3,4]

let flatArr = [1, [2, [3]]].flat(2); // Flattens nested arrays -> [1,2,3]
console.log("flat:", flatArr);

console.log("copyWithin:", [1, 2, 3, 4].copyWithin(0, 2)); // [3,4,3,4]
console.log("fill:", [1, 2, 3].fill(0)); // [0,0,0]

console.log("toSpliced:", [1, 2, 3].toSpliced(1, 1)); // New array [1,3]

// ----------------------------------

// 6. 📏 Information & Conversion
let infoArr = [1, 2, 3];

console.log("length:", infoArr.length); // 3
console.log("join:", infoArr.join("-")); // "1-2-3"
console.log("toString:", infoArr.toString()); // "1,2,3"
console.log("toLocaleString:", [123456].toLocaleString("de-DE")); // "123.456"

console.log("Array.isArray:", Array.isArray(infoArr)); // true
console.log("Array.from:", Array.from("abc")); // ["a","b","c"]
console.log("Array.of:", Array.of(1, 2, 3)); // [1,2,3]

📌 Conclusion

JavaScript arrays are more than just lists — they are powerful tools with dozens of built-in methods.
By mastering these methods, you can:

Manipulate collections safely

Transform and filter data efficiently

Write more expressive and functional code

Whether you’re building small scripts or large-scale applications, knowing when and how to use these methods will save you time and reduce bugs.

📚 Reference

Mozilla Developer Network. (n.d.). Array - JavaScript | MDN. Retrieved August 2025, from https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array

`Object` Methods

Anthony Bañon Arias — Sun, 17 Aug 2025 15:02:56 +0000

📦 JavaScript `Object` Methods: A Complete Guide

Working with objects is at the heart of JavaScript programming.

Whether you are building classes, handling API responses, or manipulating data structures, knowing the native Object methods will make your code more powerful, secure, and expressive.

In this article, we will explore the most important Object methods available in JavaScript, see examples in action, and understand when to use each of them.

🔗 Reference: MDN Web Docs – Object

🔑 Why `Object` Methods Matter

JavaScript objects are dynamic, meaning you can create, extend, freeze, or inspect them at runtime.

Native Object methods provide a safe and standard way to handle these operations without reinventing the wheel.

📦 Complete List of `Object` Methods

🔤 Method	📌 Description	💻 Example	🔁 Use Cases
`Object.keys(obj)`	Returns an array of keys (enumerable own properties).	`Object.keys({a:1,b:2}) // ["a","b"]`	Iterations, debugging
`Object.values(obj)`	Returns an array of values.	`Object.values({a:1,b:2}) // [1,2]`	Stats, aggregations
`Object.entries(obj)`	Returns array of `[key,value]` pairs.	`Object.entries({a:1}) // [["a",1]]`	Mapping, converting to `Map`
`Object.fromEntries(arr)`	Creates an object from key-value pairs.	`Object.fromEntries([["a",1]]) // {a:1}`	Transforming results of `map`, `filter`
`Object.assign(dest, ...src)`	Copies properties from sources into destination.	`Object.assign({}, {a:1},{b:2})`	Cloning, merging configs
`Object.create(proto, props?)`	Creates a new object with the given prototype.	`const o = Object.create(null)`	Prototype patterns, inheritance
`Object.defineProperty(obj, prop, desc)`	Defines a single property with fine control.	`Object.defineProperty(user,"id",{value:1, writable:false})`	Permissions, library design
`Object.defineProperties(obj, props)`	Defines multiple properties at once.	`Object.defineProperties(user,{id:{value:1},name:{value:"Ana"}})`	Advanced configuration
`Object.getOwnPropertyDescriptor(obj, prop)`	Gets the descriptor of a property.	`Object.getOwnPropertyDescriptor(user,"id")`	Debugging, validation
`Object.getOwnPropertyDescriptors(obj)`	Gets descriptors for all properties.	`Object.getOwnPropertyDescriptors(user)`	Deep cloning with descriptors
`Object.getOwnPropertyNames(obj)`	Returns all own property names (even non-enumerable).	`Object.getOwnPropertyNames(Math)`	Internal inspection
`Object.getOwnPropertySymbols(obj)`	Returns all symbol properties.	`Object.getOwnPropertySymbols(obj)`	Metaprogramming
`Object.getPrototypeOf(obj)`	Gets the prototype of an object.	`Object.getPrototypeOf(new Date())`	Class inspection, OOP
`Object.setPrototypeOf(obj, proto)`	Sets a new prototype for an object.	`Object.setPrototypeOf(obj, Array.prototype)`	Advanced patterns
`Object.is(val1, val2)`	Compares values like `===` but handles `NaN` and `+0/-0`.	`Object.is(NaN,NaN) // true`	Safe validations
`Object.isExtensible(obj)`	Checks if new properties can be added.	`Object.isExtensible(obj)`	Object security
`Object.preventExtensions(obj)`	Prevents adding new properties.	`Object.preventExtensions(obj)`	Lock down structures
`Object.seal(obj)`	Prevents adding/removing properties (but allows value changes).	`Object.seal(user)`	Fixed object structures
`Object.isSealed(obj)`	Checks if an object is sealed.	`Object.isSealed(obj)`	Debug, validations
`Object.freeze(obj)`	Freezes object (no changes allowed).	`Object.freeze(user)`	Config objects, constants
`Object.isFrozen(obj)`	Checks if object is frozen.	`Object.isFrozen(obj)`	Debug, immutability

🧑‍💻 Practical Example

Here’s a short script based on our Persona class, showcasing several methods in action:

// Define a simple class
class Persona {
  constructor(nombre, edad, dni) {
    this.nombre = nombre;
    this.edad = edad;
    this.dni = dni;
  }
}

const persona1 = new Persona("Anthony", 25, "12345678");

console.log("========== BASIC INSPECTION ==========");

// Object.keys -> returns own enumerable property names
console.log(Object.keys(persona1)); 
// ["nombre", "edad", "dni"]

// Object.values -> returns values of enumerable properties
console.log(Object.values(persona1)); 
// ["Anthony", 25, "12345678"]

// Object.entries -> returns [key, value] pairs
console.log(Object.entries(persona1)); 
// [["nombre","Anthony"],["edad",25],["dni","12345678"]]

// Object.fromEntries -> creates object from entries
const entries = [["name", "Alice"], ["age", 30]];
console.log(Object.fromEntries(entries));
// { name: "Alice", age: 30 }


console.log("\n========== CREATION & COPYING ==========");

// Object.assign -> copy properties into a new object
const copy = Object.assign({}, persona1);
console.log(copy); 
// { nombre: 'Anthony', edad: 25, dni: '12345678' }

// Object.create -> create object with prototype
const proto = { greet() { return "Hello from prototype!"; } };
const objWithProto = Object.create(proto);
console.log(objWithProto.greet()); 
// "Hello from prototype!"


console.log("\n========== PROPERTY DEFINITIONS ==========");

// Object.defineProperty -> define single property with descriptor
const user = {};
Object.defineProperty(user, "id", { value: 1, writable: false });
console.log(user.id); // 1
user.id = 2; // ignored because writable: false
console.log(user.id); // still 1

// Object.defineProperties -> define multiple properties
Object.defineProperties(user, {
  name: { value: "John", writable: true },
  role: { value: "Admin", writable: false }
});
console.log(user); // { id: 1, name: "John", role: "Admin" }

// Object.getOwnPropertyDescriptor -> inspect one property
console.log(Object.getOwnPropertyDescriptor(user, "id"));
// { value: 1, writable: false, enumerable: false, configurable: false }

// Object.getOwnPropertyDescriptors -> inspect all
console.log(Object.getOwnPropertyDescriptors(user));


// Object.getOwnPropertyNames -> get all property names (including non-enumerable)
console.log(Object.getOwnPropertyNames(user));
// [ 'id', 'name', 'role' ]

// Object.getOwnPropertySymbols -> get symbol properties
const sym = Symbol("secret");
user[sym] = "hidden";
console.log(Object.getOwnPropertySymbols(user));
// [ Symbol(secret) ]


console.log("\n========== PROTOTYPES ==========");

// Object.getPrototypeOf -> get prototype of an object
console.log(Object.getPrototypeOf(persona1)); 
// Persona {}

// Object.setPrototypeOf -> set a new prototype
const newProto = { salute() { return "Hey!"; } };
Object.setPrototypeOf(persona1, newProto);
console.log(persona1.salute()); // "Hey!"


console.log("\n========== COMPARISONS ==========");

// Object.is -> strict comparison (handles NaN and +0/-0)
console.log(Object.is(NaN, NaN)); // true
console.log(Object.is(0, -0)); // false
console.log(Object.is(25, 25)); // true


console.log("\n========== EXTENSIBILITY & SEALING ==========");

// Object.isExtensible -> check if we can add properties
console.log(Object.isExtensible(persona1)); // true

// Object.preventExtensions -> block adding new properties
Object.preventExtensions(persona1);
persona1.newProp = "test"; // ignored
console.log(persona1.newProp); // undefined

// Object.seal -> block adding/removing properties, allow changes
Object.seal(persona1);
persona1.nombre = "Lucas"; // allowed
delete persona1.edad;      // ignored
console.log(persona1); // { nombre: "Lucas", edad: 25, dni: "12345678" }

// Object.isSealed -> check if sealed
console.log(Object.isSealed(persona1)); // true

// Object.freeze -> block all modifications
Object.freeze(persona1);
persona1.edad = 99; // ignored
console.log(persona1.edad); // 25

// Object.isFrozen -> check if frozen
console.log(Object.isFrozen(persona1)); // true

📌 Conclusion

Mastering Object methods is crucial for every JavaScript developer.
They let you inspect, clone, protect, and extend objects safely.
By combining these methods with classes and object-oriented programming, you gain more control over your code and data structures.

If you’re diving deeper into OOP or functional programming, these tools will quickly become indispensable.

📚 Reference

Mozilla Developer Network. (n.d.). Object - JavaScript | MDN. Retrieved August 2025, from https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Object

String Methods and Properties

Anthony Bañon Arias — Sat, 02 Aug 2025 22:33:54 +0000

📚 Mastering JavaScript String Methods and Properties

Strings are one of the most fundamental data types in JavaScript, and mastering their methods can significantly improve your code quality, readability, and performance.

In this guide, we'll go through every essential string method and property you need to know in modern JavaScript. You'll learn what each method does, how to use it, and whether it's useful in contexts beyond strings — like arrays, objects, or regular expressions.

🧠 Why Learn String Methods?

✅ Make your code more expressive and clean
🛠️ Solve common text manipulation problems
💡 Better understand JavaScript's built-in functions
🧩 Work more easily with arrays, inputs, and file data

📋 All String Methods and Properties in One Place

🔤 Method/Property	📌 What It Does	💻 Usage	🔁 Context
`length`	Returns the number of characters	`"abc".length // 3`	✅ Also in arrays
`charAt(n)`	Character at position `n`	`"hello".charAt(1) // 'e'`	❌
`at(n)`	Like `charAt()` but supports negative indexes	`"hello".at(-1) // 'o'`	✅ Also in arrays
`codePointAt(n)`	Returns Unicode code point	`"🌍".codePointAt(0)`	❌
`fromCharCode(n)`	Creates string from char code	`String.fromCharCode(97)` → `'a'`	❌
`fromCodePoint(n)`	Unicode-safe version	`String.fromCodePoint(128512)` → 😀	❌
`concat()`	Joins strings together	`"a".concat("b") // "ab"`	✅ In arrays too
`includes()`	Checks if text exists inside	`"abc".includes("b") // true`	✅
`startsWith()`	Checks if string starts with	`"abc".startsWith("a") // true`	✅
`endsWith()`	Checks if string ends with	`"abc".endsWith("c") // true`	✅
`indexOf()`	Finds position of first match	`"banana".indexOf("a") // 1`	✅ In arrays
`lastIndexOf()`	Finds last match position	`"banana".lastIndexOf("a") // 5`	✅
`slice(start, end)`	Extracts part of the string	`"abcde".slice(1, 4) // 'bcd'`	✅ In arrays
`substring(start, end)`	Like `slice`, no negatives	`"abcde".substring(1, 4)`	❌
`split(sep)`	Converts string to array	`"a,b,c".split(',') // ['a', 'b', 'c']`	✅
`trim()`	Removes spaces at both ends	`" hello ".trim()`	❌
`trimStart()`	Removes start spaces only	`" hello".trimStart()`	❌
`trimEnd()`	Removes end spaces only	`"hello ".trimEnd()`	❌
`toLowerCase()`	Converts to lowercase	`"HELLO".toLowerCase()`	❌
`toUpperCase()`	Converts to uppercase	`"hello".toUpperCase()`	❌
`normalize()`	Unicode normalization (accents, etc)	`"café".normalize("NFD")`	❌
`repeat(n)`	Repeats string `n` times	`"ha".repeat(3) // 'hahaha'`	❌
`replace(old, new)`	Replaces first match	`"hello".replace("l", "r") // 'herlo'`	✅ With RegExp
`replaceAll(old, new)`	Replaces all matches	`"lol".replaceAll("l", "x") // 'xox'`	✅
`match(regex)`	Returns match with regex	`"abc123".match(/\d+/) // ['123']`	✅
`matchAll(regex)`	All matches (iterable)	`[..."ab1cd2".matchAll(/\d/g)] // [["1"],["2"]]`	✅
`search(regex)`	Index of match by regex	`"abc123".search(/\d/) // 3`	✅
`padStart(len, str)`	Pads at start	`"5".padStart(3, "0") // '005'`	❌
`padEnd(len, str)`	Pads at end	`"5".padEnd(3, "0") // '500'`	❌
`localeCompare(str)`	Compares respecting locale	`"a".localeCompare("b") // -1`	❌
`toString()`	Converts to string	`(123).toString() // "123"`	✅ Works on all types
`valueOf()`	Returns primitive string	`new String("x").valueOf() // "x"`	✅

🔁 Context Explained

The Context column indicates whether a method or property is exclusive to strings or also available in other data types like arrays, numbers, or objects.

✅ means the method/property is used in other contexts beyond strings (e.g. length is also in arrays, toString() works on numbers, booleans, etc).

❌ means it is string-only and won’t work on other types.

✅ Bonus: Common Patterns

// 🔍 Capitalize first letter
const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);

// 🔄 Convert CSV to array
const csv = "name,age,city";
const headers = csv.split(","); // ["name", "age", "city"]

// 🧼 Clean and normalize
const clean = str => str.trim().normalize("NFD").replace(/[\u0300-\u036f]/g, "");

🧾 Conclusion

JavaScript strings are far more powerful than just storing text. With these methods, you can:

✨ Format user input
🔍 Parse files and API data
🔄 Convert data types
📏 Validate and clean text
🔐 Work securely with Unicode and international characters

Mastering these string tools gives you a solid foundation for any frontend or backend project. Bookmark this guide, and practice each method in your browser console or your favorite editor!

CSS Inheritance

Anthony Bañon Arias — Sun, 27 Jul 2025 00:02:26 +0000

🔍 Understanding CSS Inheritance: What Gets Passed Down and What Doesn’t

When writing CSS, understanding how inheritance works can help you write cleaner, more maintainable stylesheets. However, not all CSS properties behave the same way. Some are naturally inherited by child elements, while others are not—requiring you to re-declare them explicitly.

In this post, I’ll guide you through:

What CSS inheritance actually means
Which properties are inherited by default
Which ones aren't (but maybe you think they are!)
A visual reference table to help you remember
Some tricky exceptions and how to manage them

📘 What Is CSS Inheritance?

In CSS, inheritance means that some properties applied to a parent element are automatically applied to its child elements—even if you didn’t explicitly declare them again.

For example:

body {
  color: darkblue;
}

All children of the body (like paragraphs, headings, and links) will inherit this color, unless they override it themselves.

But not all properties behave this way.

🧠 Default Inheritable Properties

Here are the main categories of CSS properties that are inherited by default:

Category	Properties (examples)
Text	color , letter-spacing, line-height, text-align, text-indent, text-transform, visibility, white-space, word-spacing
Typography	font, font-size, font-family, font-style, font-weight, font-variant, line-height
Table Layout	border-collapse, border-spacing, caption-side, empty-cells
List Styling	list-style, list-style-position, list-style-type, list-style-image
Quotes	quotes
Directionality	direction, unicode-bidi

These are inherited automatically because it makes sense semantically typography, direction, and lists should stay consistent through content structure.

🔁 Non-Inherited Properties That Affect Children (by Context)

These properties are not inherited, but their presence on a parent element modifies how the children behave, appear, or render.

Category	Property	Effect on Children
Display/Layout	display	Defines whether children become flex/grid/inline-block items
Positioning	position	Changes how children are positioned relative to the parent (relative, absolute)
Overflow & Clipping	overflow, clip-path, contain	Controls whether children overflow, are clipped, or hidden
Visual Effects	opacity, transform, filter	Apply visual transformations that visually affect children too
Flex/Grid Context	flex, grid, gap	Turns children into flex/grid items; sets spacing context
Z-index & Stacking	z-index	Sets stacking context affecting all descendants
Writing Context	direction, writing-mode	Changes the text or layout direction for children
Isolation & Blend	isolation, mix-blend-mode	Changes how children blend or isolate within stacking contexts
Perspective	perspective, transform-style	Affects how child transforms are rendered in 3D space

❌ Non-Inherited Properties That Affect Only the Element Itself

These properties apply only to the element where they are declared. They do not influence or change the behavior of children.

Category	Properties
Box Model	margin, padding, width, height, min/max-width, border, box-sizing
Visual Appearance	background, background-color, box-shadow, border-radius
Positioning	top, right, bottom, left, float, clear
Visibility/Interaction	visibility, cursor, pointer-events, user-select, resize
Layout & Display	display, flex, grid, gap, align-self, order
Transformations	transform, scale, rotate, translate
Transitions/Animations	transition, animation, animation-delay, animation-duration
Typography (non-inherited)	line-clamp, text-overflow, white-space

🔧 Forcing Inheritance, Resetting, or Reverting in CSS

CSS provides special keywords to control the value of any property beyond its default behavior. These are extremely useful when dealing with inheritance or when resetting styles in complex environments.

Keyword	Meaning
inherit	Forces the property to inherit its value from the parent element, even if it's not normally inheritable.
initial	Resets the property to its default initial value as defined by the CSS specification (usually the browser default).
unset	Acts as inherit if the property is naturally inheritable, otherwise behaves as initial.
revert	Reverts the property to the value set by the user-agent stylesheet or a previously applied CSS layer like Bootstrap, Tailwind, or a browser reset stylesheet.

🔄 When to Use Each Keyword

✅ Use inherit when you explicitly want child elements to take a value from their parent.
🧹 Use initial to remove custom styles and go back to the clean browser default.
🤷‍♂️ Use unset when you're unsure if the property is inheritable—it covers both cases.
🔙 Use revert to undo overrides from libraries or external stylesheets, returning to the system/base stylesheet.

📌 Example

p {
  color: red;
}

span {
  color: inherit; /* Will become red because <span> is inside a <p> */
}

button {
  all: unset; /* Removes all styling including margin, padding, border, etc. */
}

📊 Visual Reference Table

Here’s a compact visual table for quick reference:

Inherited by Default?	Examples
✅ Yes	color, font-*, line-height, visibility, text-align, list-style, quotes
❌ No	margin, padding, display, flex, position, grid, z-index, background, border, width, height, box-shadow

🧠 Conclusion

Understanding what gets inherited in CSS (and what doesn’t) is key to writing effective and predictable styles. Inheritable properties are mostly related to typography and content flow, while most layout and visual styling needs to be defined explicitly.

If you ever find yourself confused, refer back to this post or use the inherit keyword to take full control.

Thanks for reading!

✨ Everything You Need to Master the DOM

Anthony Bañon Arias — Tue, 24 Jun 2025 19:35:45 +0000

A Complete Guide to Using the DOM

📚 Introduction

When you first step into web development, one of the most empowering things you can learn is how to interact with the DOM (Document Object Model) using JavaScript. The DOM is essentially the interface between your HTML and your JavaScript code. Being able to select, modify, style, and dynamically manipulate DOM elements is at the heart of making websites interactive and responsive.

In this article, we will explore a comprehensive set of methods to manipulate the DOM. We'll cover everything from selectors, content manipulation, CSS styling, class controls, node traversal, event handling, and creating elements dynamically. Whether you're a beginner or brushing up your skills, this guide will be your go-to reference.

🔍 DOM Selectors

1. `document.getElementById(id)`

Selects a single element by its ID.

document.getElementById("myTitle");

2. `document.getElementsByClassName(className)`

Returns a live HTMLCollection of all elements with the specified class.

document.getElementsByClassName("card");

3. `document.getElementsByTagName(tagName)`

Selects all elements with a given tag name.

document.getElementsByTagName("div");

4. `document.querySelector(selector)`

Returns the first element that matches a CSS selector.

document.querySelector(".highlight");
document.querySelector("#title");

5. `document.querySelectorAll(selector)`

Returns all elements that match a CSS selector.

document.querySelectorAll(".item");

📃 Content Manipulation

1. `innerHTML`

Gets or sets the HTML content inside the element, including nested tags.

element.innerHTML = "<strong>Hello!</strong>";

2. `innerText`

Gets or sets the visible text, taking CSS visibility and layout into account.

element.innerText = "Visible only text";

3. `textContent`

Gets or sets all text content, including hidden elements (ignores styling).

element.textContent = "Text without rendering";

4. `value`

Used for form elements like <input>, <textarea>, and <select> to get or set their value.

inputElement.value = "New value";

📅 Styling Elements

1. Inline Styles

Sets inline CSS directly on the element.

element.style.color = "blue";
element.style.backgroundColor = "#f4f4f4";

2. Computed Styles

Returns the computed style (final styles including those from CSS files).

const styles = getComputedStyle(element);
console.log(styles.margin);

🖌️ Classes: Add, Remove, Toggle

Use the classList property to manage element classes efficiently.

element.classList.add("active");      // Adds a class
element.classList.remove("hidden");   // Removes a class
element.classList.toggle("dark-mode"); // Toggles a class on/off
element.classList.contains("visible"); // Checks if class exists

🧰 Node Traversal and DOM Relationships

1. Accessing Parent and Child Elements

parentNode: Returns the parent node of the element.
children: Returns a live HTMLCollection of the child elements.
firstElementChild: Returns the first child that is an element.
lastElementChild: Returns the last child that is an element.

const parent = element.parentNode;
const kids = element.children;
const firstChild = element.firstElementChild;
const lastChild = element.lastElementChild;

2. Accessing Sibling Elements

previousElementSibling: Gets the previous sibling that is an element.
nextElementSibling: Gets the next sibling that is an element.

const prev = element.previousElementSibling;
const next = element.nextElementSibling;

3. Creating and Inserting Elements

You can dynamically create elements and insert them into the DOM.

const newDiv = document.createElement("div");
newDiv.textContent = "I am new!";
document.body.appendChild(newDiv);

4. Insertion Methods

appendChild(): Adds a node to the end.
prepend(): Adds a node to the beginning.
insertBefore(): Inserts before a reference node.
replaceChild(): Replaces a child node.
removeChild(): Removes a child node.

parent.appendChild(child);
parent.prepend(child);
parent.insertBefore(newNode, referenceNode);
parent.replaceChild(newNode, oldNode);
parent.removeChild(child);

⚖️ Attribute Management

Use these methods to manipulate element attributes.

element.setAttribute("src", "image.jpg");      // Sets an attribute
element.getAttribute("href");                 // Gets an attribute value
element.removeAttribute("disabled");          // Removes an attribute
element.hasAttribute("checked");              // Checks if attribute exists

🔊 Events and Listeners

Add interactivity by responding to events.

element.addEventListener("click", () => {
    console.log("Element clicked!");
});

element.removeEventListener("click", handlerFunction);

Common Events

click: when an element is clicked
submit: when a form is submitted
change: when an input value changes
mouseover: when hovering over an element
keydown: when a key is pressed

You can also attach events inline (not recommended for maintainability):

<button onclick="alert('clicked')">Click me</button>

🌐 Dynamic Element Creation Example

function addUser(name, dni) {
    const userList = document.getElementById("userList");
    const p = document.createElement("p");
    p.innerHTML = `<strong>Name:</strong> ${name} | <strong>DNI:</strong> ${dni}`;
    userList.appendChild(p);
}

🚀 Conclusion

Manipulating the DOM is the cornerstone of building interactive web applications. Mastering selectors, content updates, dynamic element creation, and event handling will make you a more confident and capable frontend developer. These tools give you full control over how your site behaves and responds to user actions.

Always remember: the DOM is your canvas, and JavaScript is your brush.

📓 References

Mozilla Developer Network (MDN). (n.d.). Document Object Model (DOM). Retrieved from: https://developer.mozilla.org/en-US/docs/Web/JavaScript
Mozilla Developer Network (MDN). (n.d.). Working with the DOM. Retrieved from: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

Thanks for reading! 🚀 You can follow me on Dev.to or connect on LinkedIn for more posts like this!

What Are Global Attributes in HTML?

Anthony Bañon Arias — Sun, 08 Jun 2025 23:59:44 +0000

What Are Global Attributes in HTML?

Global attributes are common to all HTML elements and enhance usability, accessibility, styling, and behavior. They can be applied to most tags and are vital for creating flexible and interactive web pages.
This guide covers key global attributes with:

✅ Clear definitions
🛠️ Practical use cases
🧪 Real-world examples

🔹 1. `accesskey`

Assigns a keyboard shortcut to focus or activate an element.
Example:

<button accesskey="s">Save</button>

Pressing Alt + S (browser-dependent) activates the button.
Use for: Faster keyboard navigation and accessibility in apps.
Pros:

Improves accessibility
Enables faster navigation for power users

Cons:

May conflict with browser or OS shortcuts
Users might not be aware of the keys

🔹 2. `autocapitalize`, `autocorrect`, `spellcheck`

Control how text input is capitalized, corrected, and spell-checked.

Example:

<input type="text" autocapitalize="words" autocorrect="on" spellcheck="true" />

Use for: Enhancing UX in mobile or language-sensitive forms.

Pros:

Improves typing accuracy
Helps users write properly formatted text

Cons:

Behavior can vary across browsers/devices
May interfere with technical or code input

🔹 3. `autofocus`

Automatically sets focus on the element when the page loads.

Example:

<input type="text" autofocus />

Use for: Login fields, search boxes, or any element needing initial focus.

Pros:

Enhances user flow
Ideal for forms and logins

Cons:

Only one autofocus per page works
May interfere with screen readers

🔹 4. `class` and `id`

Identify elements for styling or scripting.

Example:

<div id="header" class="gray dark">Title</div>

Use for: CSS styling and JavaScript interactions.

Pros:

Powerful selectors for CSS/JS
Enables reusable styles and logic

Cons:

Overuse can create spaghetti code
Must be unique (id) or consistent (class)

🔹 5. `contenteditable`

Makes the element editable by the user.

Example:

<div contenteditable="true">Edit this text</div>

Use for: Inline editing and custom text editors.

Pros:

Simple way to add editing to the UI
Native browser support

Cons:

Limited formatting controls
Needs additional scripting for saving changes

🔹 6. `data-*`

Stores custom data in HTML elements.

Example:

<button data-user-id="42">Edit</button>

console.log(button.dataset.userId);

Use for: Passing extra data to scripts without affecting layout.

Pros:

Clean way to attach custom metadata
Keeps HTML and JS loosely coupled

Cons:

Not meant for styling
Can be misused for logic-heavy applications

🔹 7. `dir`

Sets text direction (ltr or rtl).

Example:

<p dir="rtl">مرحبا بك</p>

Use for: Supporting right-to-left languages.

Pros:

Essential for proper localization
Improves readability

Cons:

Must be handled consistently across elements
Can cause layout issues if forgotten

🔹 8. `draggable`

Allows the element to be dragged.

Example:

<div draggable="true">Drag me</div>

Use for: Custom drag-and-drop UIs.

Pros:

Enables interactivity without external libraries
Native HTML5 support

Cons:

Limited customization without JS
Not supported uniformly across all elements

🔹 9. `hidden`

Hides the element without removing it from the DOM.

Example:

<div hidden>This is hidden</div>

Use for: Temporarily hiding elements without deleting them.

Pros:

Easy way to toggle visibility
Keeps layout logic intact

Cons:

Hidden elements are still in the DOM
Doesn’t free up memory or resources

🔹 10. `lang`

Specifies the language of the element's content.

Example:

<p lang="es">Hola mundo</p>

Use for: Improving SEO and accessibility in multilingual content.

Pros:

Helps search engines and screen readers
Essential for accessibility and localization

Cons:

Often overlooked
Needs to match actual language content

🔹 11. `style`

Applies inline CSS styles.

Example:

<p style="color: red;">Red Text</p>

Use for: Quick tests or overrides, not for production styles.

Pros:

Fast to apply
Overrides external styles

Cons:

Harder to maintain
Not reusable or scalable

🔹 12. `tabindex`

Controls keyboard navigation order.

Example:

<button tabindex="1">First</button> <button tabindex="2">Second</button>

Use for: Customizing tab order for better navigation.

Pros:

Enhances accessibility
Controls logical flow of interaction

Cons:

Misuse can create confusing navigation
Negative values may have side effects

🔹 13. `title`

Shows a tooltip on hover.

Example:

<span title="Full name">Anthony</span>

Use for: Providing extra information without cluttering the UI.

Pros:

Easy to add tooltips
Works across all modern browsers

Cons:

Not customizable
May not be accessible via screen readers

🔹 14. `translate`

Indicates whether content should be translated.

Example:

<p translate="no">BrandName</p>

Use for: Preventing translation of names, code, or product terms.

Pros:

Prevents translation errors
Preserves brand consistency

Cons:

Relies on translation engines supporting it
Can be misused on translatable content

🧪 Advanced or Experimental Attributes

inert: Disables user interaction.
is: Used with custom elements.
role: Defines ARIA role for accessibility.
slot, part: For Web Components.
popover: Native popover behavior.
virtualkeyboardpolicy, writingsuggestions: Enhance mobile UX.

✅ Best Practices

Set lang for SEO and screen readers.
Use data-* for JS logic, not for styling.
Avoid inline style in production.
Combine accesskey, tabindex, autofocus for navigation.
Pair advanced attributes with proper JavaScript support.

📌 Conclusion

Mastering global attributes empowers you to build more accessible, dynamic, and user-friendly HTML. Use them wisely to enhance interaction, layout control, and responsiveness.

📚 References

Mozilla Developer Network. (n.d.). HTML global attributes. Retrieved from https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes

What Are Transparent Content Models in HTML5 (And When Should You Use Them)?

Anthony Bañon Arias — Sun, 08 Jun 2025 14:23:37 +0000

Understanding Transparent Content Models in HTML5: Practical Guide with Examples

When working with HTML5, some elements are defined as having a transparent content model. This might sound complex at first, but it's an incredibly useful concept—especially when writing semantically rich, accessible, and well-structured HTML documents.

In this post, we'll explore what a transparent content model means, go through real-life use cases, and review HTML elements that follow this model—complete with code examples and clear explanations.

🌐 What is a Transparent Content Model?

In HTML5, if an element has a transparent content model, it means:

"If an element has a transparent content model, then its contents must be structured such that they would be valid HTML, even if the transparent element were removed and replaced by the child elements."

— MDN Web Docs (Mozilla Contributors, n.d.)

This means that the element behaves as if it were invisible in terms of what kind of content it allows. It doesn't impose content restrictions of its own but instead adopts the content model of its context (its parent or surrounding elements).

📌 Why is this useful?

This ensures that elements used for semantic or structural purposes (like <a>, <del>, or <mark>) don’t interfere with the validity or structure of the surrounding HTML.

🧩 List of HTML Transparent Elements

Here are common elements that have a transparent content model:

<a> — anchor (link)
<del> — deleted text
<ins> — inserted text
<mark> — highlighted text
<abbr> — abbreviation
<cite> — citation
<dfn> — definition
<code> — inline code
<kbd> — keyboard input
<samp> — program output
<var> — variable
<time> — date/time
<bdi> — bidirectional isolation
<bdo> — bidirectional override

Let’s explore them one by one with explanations and practical code examples.

🔗 `<a>` – Anchor (Link)

<p>Visit our <a href="https://example.com" title="Go to Example site" target="_blank" rel="noopener noreferrer">website</a>.</p>

href: destination URL
title: tooltip on hover
target="_blank": opens in a new tab
rel="noopener noreferrer": improves security when opening external links

Use when: linking to internal or external resources.

❌ – Deleted Text

✅ – Inserted Text

<p>Original price: <del cite="https://example.com/history" datetime="2024-06-01">$50</del></p>
<p>New price: <ins cite="https://example.com/update" datetime="2025-06-01">$35</ins></p>

cite: source of the change
datetime: when the change was made

Use when: showing changes in legal documents, edits, or prices.

🟡 – Highlighted Text

<p><mark>Important:</mark> Always back up your files before updating.</p>

Use when: emphasizing parts of a text like warnings or tips.

🆎 – Abbreviation

<p>We use <abbr title="Cascading Style Sheets">CSS</abbr> for styling web pages.</p>

title: full version shown on hover

Use when: abbreviating technical or long terms.

📖 – Citation

<p>I just finished reading <cite>The Great Gatsby</cite>.</p>

Use when: referencing the name of a book, article, or other creative work.

📚 – Definition

<p><dfn title="A markup language for structuring web content">HTML</dfn> is the foundation of the web.</p>

title: definition shown on hover

Use when: defining a new or technical term in a document.

👨‍💻 `– Inline Code`

<p>Use <code>console.log('Hello, World!')</code> to print to the console in JavaScript.</p>

Use when: writing small code snippets within text.

⌨️ – Keyboard Input

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save your document.</p>

Use when: describing keyboard shortcuts or commands.

🖥️ – Sample Output

<p>The server responded with: <samp>404 Not Found</samp>.</p>

Use when: displaying output returned by a program or command.

❓ – Variable

<p>The value of <var>x</var> changes dynamically depending on input.</p>

Use when: referring to a variable in code, math, or logic.

📅 – Time and Date

<p>Next meeting: <time datetime="2025-06-10T14:00">June 10 at 2:00 PM</time>.</p>

datetime: machine-readable timestamp

Use when: displaying event dates, publication dates, or times.

🌍 – Bidirectional Isolation

<p>User: <bdi>مستخدم123</bdi> has logged in.</p>

Use when: displaying user-generated content that might include text with different directionality (like Arabic or Hebrew).

↔️ – Bidirectional Override

<p><bdo dir="rtl">This text will be displayed from right to left.</bdo></p>

dir: can be rtl (right-to-left) or ltr (left-to-right)

Use when: you need to force the direction of text for presentation purposes.

✅ Conclusion

Transparent content model elements are:

Semantically rich
Structurally flexible
Safe to nest inside various parent elements

These elements enhance your HTML without breaking its validity, making your documents more accessible, maintainable, and meaningful.

Use them to improve clarity, usability, and semantic richness in your web projects. ✨

References

Mozilla Contributors. (n.d.). Content categories: Transparent content model. MDN Web Docs. Retrieved June 8, 2025, from https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Content_categories#transparent_content_model

What is Recursion?

Anthony Bañon Arias — Thu, 08 May 2025 14:39:25 +0000

Guide for Beginners

Recursion is a powerful programming concept where a function calls itself to solve smaller instances of a problem. This technique is especially useful when a problem can be naturally divided into similar subproblems.

✅ When Can Recursion Be Used?

To use recursion effectively, three key conditions must be met:

Base Case: A condition that stops the recursion.
Recursive Case: The function must call itself with a simpler or smaller input.
Progress Toward Base Case: Each recursive call must move closer to the base case.

If these aren't met, the function will recurse infinitely, eventually causing a stack overflow.

📂 Types of Recursion

Type	Description	Example	Where It Resolves
Simple Recursion	Function calls itself once per invocation	Factorial, Fibonacci	When returning from base
Tail Recursion	Recursive call is the last statement, no operation after it	Accumulative sum	During descent (no waiting)
Mutual Recursion	Functions call each other	`is_even()` ↔ `is_odd()`	When returning from base
Multiple Recursion	Function makes multiple recursive calls	Fibonacci, Tree Traversal	When returning from base
Backtracking	Explore options and undo decisions when needed	Sudoku solver, Maze	When returning (and exploring again)
Descending Recursion	Goes down to the base case and then computes on the way back	Factorial, Fibonacci	After reaching the base case
Accumulative Recursion	Builds up a result during the recursive descent	Summing a list, Tree folding	During descent

🧩 Key Recursion Patterns

Pattern	Description	Example
📉 Descending	Reaches the base case and solves on the way back	Factorial, Towers of Hanoi
📈 Accumulative	Builds a result while descending	Sum list elements
🔁 Mutual (Alternating)	Alternates between functions	`is_even(n)`, `is_odd(n)`
🔄 Backtracking	Explores paths, undoes, and tries again	Maze solver, n-Queens

✍️ Simple Examples

1. Factorial (Simple Recursion)

def factorial(n):
    if n == 0:
        return 1
    return n * factorial(n - 1)

2. Tail Recursion (Sum Accumulator)

def sum_tail(n, acc=0):
    if n == 0:
        return acc
    return sum_tail(n - 1, acc + n)

3. Mutual Recursion (Even/Odd)

def is_even(n):
    if n == 0:
        return True
    return is_odd(n - 1)

def is_odd(n):
    if n == 0:
        return False
    return is_even(n - 1)

4. Multiple Recursion (Fibonacci)

def fibonacci(n):
    if n == 0:
        return 0
    elif n == 1:
        return 1
    return fibonacci(n - 1) + fibonacci(n - 2)

5. Backtracking (Maze Path Finder - conceptually)

def solve_maze(maze, x, y):
    if is_goal(x, y):
        return True
    for direction in possible_moves(x, y):
        if solve_maze(maze, new_x, new_y):
            return True
    return False  # backtrack if no direction works

📋 Summary Table

Type	Simple	Multiple	Accumulative	Descending	Backtracking	Resolves When
Factorial	✅	❌	❌	✅	❌	After base case
Fibonacci	✅	✅	❌	✅	❌	After base case
Sum Accumulated	✅	❌	✅	❌	❌	During descent
is_even/is_odd	❌	❌	❌	✅	❌	After base case
Maze Solver	❌	✅	❌	✅	✅	During backtrack

🧠 Conclusion

Recursion is more than just a function calling itself — it's a way of thinking about problems. It allows you to divide tasks into smaller parts, handle dynamic structures like trees and graphs, and model decision-making processes like backtracking. By understanding the types, patterns, and proper use cases, you can write more elegant and efficient code.

Want to dive deeper? Try visualizing recursion using stack traces or call trees — it really helps!

✍️ Written by Anthony Banion – passionate backend developer, tech writer & student of systems analysis. Follow me for more learning guides!

DEV Community: Anthony Bañon Arias

Universal Naming Conventions for Multi-Language Projects

Introduction

General Naming Principles

Unified Naming Convention Table

Final Thoughts

📚 References

SQL Commands Guide

Introduction

🧩 Data Definition Language (DDL)

🧮 Data Manipulation Language (DML)

🟢 SELECT — Retrieve Data

🟠 INSERT — Add Data

🔵 UPDATE — Modify Data

🔴 DELETE — Remove Data

👁️ View Definition

🔄 Transaction Control

🧱 Integrity Constraints

🔐 Authorization and Security

💬 Embedded and Dynamic SQL

🏁 Conclusion

Understanding Web Rendering Strategies

Introduction

Rendering Strategies Overview

Pros & Cons of Each Strategy

Conclusion

Checking `null`, `undefined`, Empty, and Falsy Values in JavaScript

🔹 Introduction

🔹 General Concept: Truthy vs Falsy

✅ Falsy values (evaluate to false):

Cheatsheet: Common Checks

Use Cases and Examples

1. Checking if a variable has any value

2. Avoiding errors with optional values

3. Detecting empty input

4. Validating arrays

5. Ensuring an object has properties

Best Practices

Conclusion

🔗 References:

JavaScript Arrays

🔢 JavaScript Arrays: The Complete Guide to Methods

📦 Why Arrays Matter

🔤 Array Methods by Category

1. 🔄 Adding and Removing Elements

2. 🔍 Searching & Checking

3. 🔁 Iteration

4. 📐 Sorting & Rearranging

5. ✂️ Slicing & Copying

6. 📏 Information & Conversion

🧑‍💻 Practical Example

📌 Conclusion

📚 Reference

`Object` Methods

📦 JavaScript Object Methods: A Complete Guide

🔑 Why Object Methods Matter

📦 Complete List of Object Methods

🧑‍💻 Practical Example

📌 Conclusion

📚 Reference

String Methods and Properties

📚 Mastering JavaScript String Methods and Properties

🧠 Why Learn String Methods?

📋 All String Methods and Properties in One Place

✅ Bonus: Common Patterns

🧾 Conclusion

CSS Inheritance

🔍 Understanding CSS Inheritance: What Gets Passed Down and What Doesn’t

📘 What Is CSS Inheritance?

🧠 Default Inheritable Properties

🔁 Non-Inherited Properties That Affect Children (by Context)

❌ Non-Inherited Properties That Affect Only the Element Itself

🔧 Forcing Inheritance, Resetting, or Reverting in CSS

🔄 When to Use Each Keyword

📌 Example

📊 Visual Reference Table

🧠 Conclusion

✨ Everything You Need to Master the DOM

A Complete Guide to Using the DOM

📚 Introduction

✅ Falsy values (evaluate to `false`):

📦 JavaScript `Object` Methods: A Complete Guide

🔑 Why `Object` Methods Matter

📦 Complete List of `Object` Methods

1. `document.getElementById(id)`

2. `document.getElementsByClassName(className)`

3. `document.getElementsByTagName(tagName)`

4. `document.querySelector(selector)`

5. `document.querySelectorAll(selector)`

1. `innerHTML`

2. `innerText`

3. `textContent`

4. `value`

🔹 1. `accesskey`

🔹 2. `autocapitalize`, `autocorrect`, `spellcheck`

🔹 3. `autofocus`

🔹 4. `class` and `id`

🔹 5. `contenteditable`

🔹 6. `data-*`

🔹 7. `dir`

🔹 8. `draggable`

🔹 9. `hidden`

🔹 10. `lang`

🔹 11. `style`

🔹 12. `tabindex`

🔹 13. `title`

🔹 14. `translate`

🔗 `<a>` – Anchor (Link)

👨‍💻 `– Inline Code`