DEV Community: Rinon Tendrinomena

Coupling, Decoupling, and Cohesion

Rinon Tendrinomena — Mon, 09 Feb 2026 16:29:56 +0000

In software development, especially when writing JavaScript, two big ideas help make your code easier to work with, change, and understand: cohesion and coupling.

Think of your code like building with toys or organizing a kitchen. These concepts decide whether your project feels smooth or turns into a big mess.

Cohesion – "Keep related things together"

Cohesion means how well the code inside one file, function, or module belongs together.

High cohesion = everything inside does one clear job
Low cohesion = it's a random mix of unrelated stuff

Analogy: Imagine your kitchen drawer.

A messy junk drawer (low cohesion) has spoons, batteries, tape, old receipts, and a phone charger all mixed up. Finding anything takes forever.

A well-organized drawer (high cohesion) has only cooking tools in one place, only cleaning stuff in another. Easy to find, easy to use.

JavaScript example – low cohesion (avoid this):

// utils.js – does everything (bad!)
function calculateTotal(price, tax) {
  return price + tax;
}

function sendEmail(to, message) {
  console.log(`Email sent to ${to}`);
}

function getUserAge(birthYear) {
  return new Date().getFullYear() - birthYear;
}

function saveToLocalStorage(key, value) {
  localStorage.setItem(key, value);
}

This file does math, emailing, age calculation, and storage. Hard to understand, hard to test, hard to fix.

High cohesion (better):

// priceCalculator.js
export function calculateTotal(price, taxRate) {
  const tax = price * taxRate;
  return price + tax;
}

export function applyDiscount(total, percent) {
  return total * (1 - percent / 100);
}

One file = one job (price math). Clean and focused.

Coupling – "How much do modules know about each other?"

Coupling measures how connected two pieces of code are. How much one part depends on the insides of another.

High / tight coupling = modules are glued together
Low / loose coupling = modules talk nicely but don't know too much about each other

Analogy: Lego bricks vs superglued blocks.

Lego bricks snap together easily and you can pull them apart to rebuild (low coupling).

If you put superglue between every brick, you can't change anything without breaking the whole thing (high coupling).

Another visual – good vs bad coupling:

Left side (messy): everything connected to everything → hard to change.

Right side (clean): small groups connected only when needed → easy to work with.

JavaScript example – tight coupling (bad):

// userService.js
class UserService {
  getUser(id) {
    // Directly knows it's using localStorage (tight!)
    const data = localStorage.getItem(`user_${id}`);
    return JSON.parse(data);
  }

  saveUser(user) {
    localStorage.setItem(`user_${user.id}`, JSON.stringify(user));
  }
}

This code is glued to localStorage. If you want to switch to a server or IndexedDB later, you have to change this file and every place that uses UserService.

Loose coupling (good) – using dependency injection:

// storage.js (interface-like)
export class LocalStorageService {
  get(key) { return JSON.parse(localStorage.getItem(key)); }
  set(key, value) { localStorage.setItem(key, JSON.stringify(value)); }
}

// userService.js
export class UserService {
  constructor(storageService) {
    this.storage = storageService;   // just uses the interface
  }

  getUser(id) {
    return this.storage.get(`user_${id}`);
  }

  saveUser(user) {
    this.storage.set(`user_${user.id}`, user);
  }
}

// Usage
const storage = new LocalStorageService();
const userService = new UserService(storage);

Now UserService doesn't care how storage works. You can easily swap it for:

class ApiStorageService {
  async get(key) { /* fetch from API */ }
  async set(key, value) { /* send to API */ }
}

This is decoupling – removing the strong glue between parts.

Decoupling – The Action of Making Coupling Loose

Decoupling means actively reducing how much modules depend on each other's details.

Common ways in JavaScript:

Use function parameters instead of global variables
Pass dependencies (dependency injection)
Use interfaces / simple objects instead of concrete classes
Events / callbacks instead of direct calls
Separate files by responsibility

Why Should You Care?

Good cohesion + low coupling = your code is like Lego:

Easy to understand (one file = one clear idea)
Easy to change (swap one piece without breaking others)
Easy to test (test small parts alone)
Easy for teams (different people work on different pieces)
Easy to grow (add new features without chaos)

Bad cohesion + high coupling = your code is like a house of cards made of superglue:

Tiny change breaks many places
Hard to test
New developers get scared
Bugs hide everywhere

Quick Rule to Remember

Aim for:

High cohesion inside each module (one job per file/function)
Low coupling between modules (talk through simple contracts, not internals)

Next time you write JavaScript, ask yourself:

"Does this function/file do one main thing?" → Cohesion

"Does it know too much about other parts?" → Coupling

Keep practicing these ideas – your future self (and teammates) will love you for it!

🚀 I Built a Developer Resources Platform — Join Me and Share What Helps You Learn

Rinon Tendrinomena — Wed, 24 Dec 2025 13:02:16 +0000

As developers, we all collect links.

Articles, docs, videos, tools, GitHub repos, blog posts…

Most of them end up buried in bookmarks, Notion pages, or forgotten browser tabs.

So I decided to build something simple but powerful:

A developer resources platform where useful resources are curated, shared, reviewed, and discovered by developers around the world.

🔗 Live app: https://resources.onja.dev/

What Is This App About?

This platform is built to help developers find the right resources based on their needs, without wasting time searching everywhere.

Each resource includes:

Title & short description
Type (article, video, tool, course, etc.)
Tech stack
Source
Direct link

Resources are curated from the internet or added manually by the community.

What Can You Do as a Developer?

Once you’re logged in, you can:

Like resources
Mark resources as useful / not useful
Mark resources as complete
Recommend resources to friends
Comment and reply to comments on each resource
Filter resources based on your needs
Save recommendations for later

The goal is not just to list links — but to create signal over noise.

Community-Driven & Open

Every logged-in user can add a resource
Resources are reviewed and approved by admins to keep quality high
The platform is free to use
No paywalls, no ads — just useful content

You can also install it on your computer or phone like an app (PWA).

Want to Help as an Admin?

I’m actively looking for people who:

Enjoy curating quality dev resources
Want to help developers learn better
Believe in open, community-driven knowledge

👉 If you’d like to join as an admin, just leave a comment below this post

Tell me why you’re interested, and I’ll reach out.

Why I Built This

Developers everywhere — especially in growing tech communities — need easy access to the right learning materials.

This platform is my small contribution to:

Better learning
Less wasted time
Stronger developer communities

Join In

Explore the app: https://resources.onja.dev/
Add your favorite resources
Share feedback and ideas
Comment below if you want to help as an admin
This is also an open source project so I invite you to join me improving the app.Let me know in the comments section below if you want to contribute to it.

If this helps even one developer learn faster, it’s already worth it.

Thanks for reading — and I’d love to see what resources you find valuable 🚀

Exploring the Latest AI Models and Tools for Developers

Rinon Tendrinomena — Wed, 01 Oct 2025 14:55:04 +0000

Exploring the Latest AI Models and Tools for Developers

The landscape of AI-driven development is evolving rapidly, empowering developers with powerful models and tools. This article dives into the latest base models, coding assistants, coding agents, and app builders, offering a comprehensive look at how they can enhance productivity and innovation.

Base Models: The Foundation of AI Power

Base models are the backbone of modern AI applications, trained on massive datasets to handle tasks from coding to multimodal processing. Here are the standout models:

Claude 3.5 Sonnet (Anthropic): A leader in intelligence, this model excels in reasoning, coding, and safety, with enhancements in speed and efficiency. The potential "Sonnet 4.5" evolution hints at even greater agentic capabilities.
GPT-5 (OpenAI): Launched in August 2025, GPT-5 merges speed with intelligence, excelling in coding, UI generation, and complex problem-solving, rivaling human performance.
Gemini (Google DeepMind): A multimodal family optimized for text, audio, and images, Gemini 2.5 models lead in reasoning and large-scale coding tasks.
Grok 4 (xAI): Released in July 2025, this model boasts global intelligence with real-time search and multimodal prowess, ideal for enterprise coding and data tasks.
Llama 4 (Meta): An open-source giant with 405B parameter variants, it shines in multilingual tasks and on-device deployment.
DeepSeek-V3 (DeepSeek AI): A cost-effective open-source model, it dominates coding and math benchmarks, especially for Chinese-language applications.

Coding Assistants: Your AI Pair Programmers

Coding assistants integrate into development environments, offering real-time support to accelerate coding without full automation:

GitHub Copilot: Suggests code and automates Git tasks, acting as an asynchronous teammate for faster workflows.
Cursor: A smart editor with autocompletion and an "Agent" mode for complex tasks like debugging and refactoring.
Tabnine: Offers personalized completions with privacy-focused local deployment, boosting productivity across 30+ languages.
Amazon Q Developer: An enterprise tool with context-aware suggestions and cloud-native optimization, perfect for secure, scalable apps.

Coding Agents: Autonomous Development Partners

Coding agents take autonomy further, managing end-to-end tasks with minimal oversight:

Claude Code (Anthropic): Integrated with Sonnet 4.5, it handles migrations and bug fixes from the terminal with deep codebase insight.
OpenAI Codex: Updated in 2025, it writes features, fixes bugs, and collaborates in real-time, running locally or in the cloud.
Cline: An open-source agent for multi-step workflows like testing and deployment, reducing manual effort with Git integration.
Google Jules: Leverages Gemini 2.5 to navigate repositories, generate PRs, and refactor code for high-velocity teams.

App Builders: From Prompts to Production

App builders turn natural language into fully functional applications, streamlining UI, code, and deployment:

Lovable: Creates scalable apps from prompts, with easy AI feature integration and cloud support.
v0 (Vercel): Generates working apps like dashboards from prompts, accessible to non-developers via its Platform API.
Bolt: Scaffolds full-stack apps with databases and APIs, offering one-click deployments for rapid MVPs.
Bubble: A no-code platform with AI-enhanced workflows, enabling complex apps with databases for non-technical creators.

Conclusion

The AI ecosystem in 2025 offers a rich toolkit for developers, from foundational models to autonomous agents and app builders. Whether you're fine-tuning a base model, collaborating with a coding assistant, delegating to an agent, or prototyping with an app builder, these technologies are reshaping how we build software. Stay tuned for more updates as this space continues to evolve!

Blog Source: Grok

When JS blocks parsing your HTML

Rinon Tendrinomena — Wed, 17 Sep 2025 06:24:39 +0000

A browser builds a webpage step by step:

Reads the HTML file top to bottom.

It converts the text into tokens, then into the DOM tree.

If the browser encounters a <script>tag without async or defer:

It pauses HTML parsing immediately.
Downloads the JavaScript file (if external).
Executes that JavaScript. Only after execution finishes does it resume building the DOM.

Why does parsing stop?

Because JavaScript can modify the DOM or CSSOM while the page is loading.

For example:

<p id="greet">Hello</p>
<script>
  document.getElementById("greet").innerText = "Hi from JS!";
</script>

If the browser kept parsing ahead, it might waste effort building nodes that JS will delete/change anyway.
So it waits to ensure accuracy.

⚡ Example Timeline:

Case 1: Parser-blocking script

<html>
  <head>
    <script src="big-script.js"></script> <!-- blocks parsing -->
  </head>
  <body>
    <h1>Hello</h1>
  </body>
</html>

Browser starts parsing <head>.
Hits <script> → stops everything.
Downloads + runs big-script.js.

4 After execution → continues parsing <body>.
Result: <h1> appears later, delaying rendering.

Case 2: Script with defer

<html>
  <head>
    <script src="big-script.js" defer></script>
  </head>
  <body>
    <h1>Hello</h1>
  </body>
</html>

Browser keeps parsing DOM without stopping.
big-script.js downloads in background.
Executes only after DOM is fully parsed.
Page appears faster, no blocking.

So in short:

“JavaScript blocks parsing” means the browser halts HTML processing whenever it encounters a normal <script> tag until that script is fully executed.

Detailed Steps in DOM Construction

Rinon Tendrinomena — Mon, 15 Sep 2025 08:48:35 +0000

1. HTML source code → Bytes

When you request a webpage (https://example.com), the server sends raw bytes across the network (TCP packets).
These bytes are not text yet — they’re just sequences of numbers.

Example: the string <h1> in UTF-8 encoding is sent as bytes:

60 104 49 62

(< = 60, h = 104, 1 = 49, > = 62 in ASCII/UTF-8).

2. Bytes → Characters

The browser needs to decode the bytes into actual characters.
It uses the character encoding specified by the server (Content-Type: text/html; charset=UTF-8) or by the HTML <meta charset="utf-8">.

Example:
Bytes 60 104 49 62 → Characters <h1>.

3. Characters → Tokens

Now the browser runs the HTML tokenizer.
The tokenizer scans the characters and groups them into tokens, which represent meaningful chunks of HTML.

Types of tokens:

StartTag token: <h1>
EndTag token: </h1>
Text token: Hello World
Comment token:

At this point, the browser doesn’t know about parent/child relationships yet — it just has a sequence of tokens.

4. Tokens → Nodes
Each token is turned into a node (an object in memory).

Types of nodes:

Element nodes: <h1> → an element node named h1.
Text nodes: Hello World → a text node containing a string.
Comment nodes: .

5. Nodes → DOM Tree
The browser’s HTML tree builder arranges these nodes into a tree structure based on nesting rules of HTML

Example input:

<body>
  <h1>Hello</h1>
  <p>World</p>
</body>

Becomes a tree:

Document
 └── body (Element)
      ├── h1 (Element)
      │     └── "Hello" (Text)
      └── p (Element)
            └── "World" (Text)

Now this DOM tree is the structure your JavaScript code can traverse with APIs like document.getElementById().

Here's the structure summary:

HTML (bytes) → decode → characters → tokenize → nodes → structured DOM tree.

Technical Terms Every Developer Should Know

Rinon Tendrinomena — Wed, 19 Feb 2025 13:36:14 +0000

Whether you’re just starting out or looking to brush up on your knowledge, understanding the key terminology in web development is crucial. In today’s fast-paced tech landscape, frameworks come and go—but the fundamentals remain. In this article, we’ll break down core concepts from front-end and back-end development to the tools and protocols that tie it all together. Read on to deepen your technical vocabulary and set a solid foundation for your web projects.

Core Web Technologies

At the heart of every website are three cornerstone technologies:

HTML (HyperText Markup Language): HTML defines the structure of a webpage by using tags like <h1>, <p>, and <a>. It’s the backbone of any web document, forming the skeleton that browsers render for you.
CSS (Cascading Style Sheets): CSS is used to style the HTML content. It controls layout, colors, fonts, and responsiveness—ensuring your site looks great on any device.
JavaScript: JavaScript adds interactivity to web pages. It enables dynamic content, animations, and client-side logic. Modern JavaScript, often enhanced by frameworks and libraries, is a vital skill for any web developer.

The Document Object Model (DOM)—an API for HTML and XML documents—lets your JavaScript interact with the page, making dynamic changes possible without a full reload.

Networking & Protocols

Understanding how data travels on the web is key to building performant applications:

HTTP/HTTPS: The Hypertext Transfer Protocol (and its secure variant HTTPS) governs how data is transferred between the client and server. Familiarity with HTTP methods (GET, POST, PUT, DELETE) is essential for API communication.
DNS (Domain Name System): DNS translates human-friendly domain names into IP addresses. This system connects browsers to web servers seamlessly.
Web Standards: Standards ensure that websites work seamlessly across different browsers and devices. Organizations publish specifications for HTML, CSS, and more to maintain interoperability and accessibility.

Front-End Development

Creating compelling user experiences is at the heart of front-end development. Key concepts include:

Responsive Design: Using CSS media queries and flexible layouts, responsive design ensures your site looks great on any device—from desktops to smartphones.
Front-End Frameworks & Libraries: Tools such as React, Angular, and Vue.js simplify building interactive user interfaces by providing reusable components and robust state management systems.
AJAX & Single-Page Applications (SPAs): AJAX enables asynchronous data exchange with the server, allowing for smoother user experiences. SPAs load a single HTML page and dynamically update content, reducing full page reloads.
Progressive Web Apps (PWAs): PWAs combine the best of web and mobile apps by offering offline functionality and push notifications for an app-like experience.
Virtual DOM: Many modern libraries use a virtual representation of the DOM to optimize rendering, making updates faster and more efficient.

Back-End Development

Behind every dynamic website is a robust back end:

Server-Side Languages: Languages such as Node.js (JavaScript), Python, PHP, Ruby, and Java are used to build the logic that powers web applications. These languages handle tasks like processing requests, interacting with databases, and generating dynamic content.
APIs (Application Programming Interfaces): APIs allow different systems to communicate. RESTful APIs and GraphQL are common ways to expose back-end data to front-end applications.
Databases: Choose between SQL databases (like MySQL and PostgreSQL) for structured data and NoSQL databases (like MongoDB or Redis) for more flexible storage needs.
Server-Side Rendering (SSR) vs. Client-Side Rendering (CSR): SSR generates full HTML on the server, which can improve SEO, while CSR uses JavaScript in the browser to build the page dynamically, offering a smoother user experience after the initial load.

Tools, Processes & Methodologies

Efficient development isn’t just about code—it’s about the tools and practices that help you build, test, and deploy your projects:

Version Control (Git): Git allows you to track changes, collaborate with team members, and manage multiple versions of your code.
Package Managers & Bundlers: Tools like npm, Yarn, and Webpack help manage dependencies and optimize your code by bundling resources.
Continuous Integration/Continuous Deployment (CI/CD): Automate testing and deployment to reduce errors and speed up release cycles.
DevOps: DevOps practices bridge the gap between development and operations, fostering a culture of collaboration and continuous improvement.
Debugging & Testing Tools: Browser developer tools, unit testing frameworks, and integration testing suites are essential for identifying and fixing issues quickly.

Additional Key Concepts

Caching & CDNs: Storing content closer to users through caching and using Content Delivery Networks (CDNs) improves load times and reduces server strain.
Accessibility (a11y): Designing with accessibility in mind—following guidelines to ensure that your website is usable by everyone, including people with disabilities—is essential.
SEO (Search Engine Optimization): Practices that improve a website's visibility on search engines by ensuring semantic markup, fast load times, and mobile-friendly design.
Performance Metrics: Metrics such as Largest Contentful Paint (LCP), First Contentful Paint (FCP), and Time to Interactive (TTI) help you measure and optimize the user experience in terms of speed and responsiveness.
Microservices Architecture: Breaking your application into smaller, independent services that communicate over APIs can improve scalability and maintainability.
Semantic Web & Linked Data: Technologies such as RDF, OWL, and JSON‑LD enable richer, machine-readable data on the web, paving the way for smarter applications.

Staying on top of web development isn’t just about keeping up with the latest frameworks—it's about understanding the fundamentals that drive the technology. Whether you’re tweaking a CSS grid or designing a REST API, the more fluent you are in these technical terms, the better you’ll be at building scalable, accessible, and robust web applications.

By mastering these concepts, you not only improve your coding skills but also enhance your ability to communicate effectively with fellow developers and stakeholders. Take a moment to revisit these terms, explore each category further, and embrace the ongoing learning journey that is web development.

Understand JavaScript Object References and Copying - Brief Explanation

Rinon Tendrinomena — Fri, 22 Nov 2024 05:56:19 +0000

When working with objects in JavaScript, understanding the difference between object references and object copying is crucial. Here’s a detailed overview:

Object References

Objects are reference types:
- When you assign an object to a variable, you are assigning a reference to the memory location where the object is stored, not a copy of the object itself.
- Modifying the object through one reference affects all references to the same object.

   let obj1 = { name: "Alice" };
   let obj2 = obj1; // obj2 now references the same object as obj1
   obj2.name = "Bob";
   console.log(obj1.name); // Output: "Bob"

Equality checks:
- Two variables are equal if they reference the same object in memory, not if their contents are identical.

   let a = { key: "value" };
   let b = { key: "value" };
   console.log(a === b); // Output: false (different references)
   let c = a;
   console.log(a === c); // Output: true (same reference)

Object Copying

There are two main types of object copying: shallow copy and deep copy.

1. Shallow Copy

A shallow copy creates a new object, but it only copies the first level of properties. Nested objects or arrays are still referenced, not duplicated.

Techniques for Shallow Copy:

Object.assign():

 let original = { name: "Alice", details: { age: 25 } };
 let copy = Object.assign({}, original);
 copy.details.age = 30;
 console.log(original.details.age); // Output: 30 (shared reference)

Spread operator (...):

 let original = { name: "Alice", details: { age: 25 } };
 let copy = { ...original };
 copy.details.age = 30;
 console.log(original.details.age); // Output: 30 (shared reference)

Both methods create a shallow copy, meaning nested objects are still linked.

2. Deep Copy

A deep copy duplicates the entire object, including nested structures. The new object is completely independent of the original.

Techniques for Deep Copy:

JSON.parse() and JSON.stringify():

 let original = { name: "Alice", details: { age: 25 } };
 let copy = JSON.parse(JSON.stringify(original));
 copy.details.age = 30;
 console.log(original.details.age); // Output: 25

Limitation: This method does not handle functions, undefined, Infinity, or special objects like Date or RegExp.

StructuredClone() (Modern JavaScript):

 let original = { name: "Alice", details: { age: 25 } };
 let copy = structuredClone(original);
 copy.details.age = 30;
 console.log(original.details.age); // Output: 25

This method handles most edge cases (e.g., circular references) but is not supported in older environments.

Custom Libraries:

Use libraries like lodash:

   import cloneDeep from "lodash/cloneDeep";
   let original = { name: "Alice", details: { age: 25 } };
   let copy = cloneDeep(original);
   copy.details.age = 30;
   console.log(original.details.age); // Output: 25

Summary Table

Action	Result
Assignment (`=`)	Creates a reference. Changes to one variable affect the other.
Shallow Copy	Creates a new object but retains references for nested objects.
Deep Copy	Creates a completely independent object, including nested structures.

Understanding these concepts helps you avoid unintended side effects when working with objects in JavaScript!

NPM Config: customising how npm works

Rinon Tendrinomena — Fri, 22 Nov 2024 05:50:37 +0000

When we’re working with Node.js and npm, knowing how to adjust your settings can help make your work smoother. npm lets us change its settings through something called npm config, which helps control how npm behaves. These settings are saved in a file called .npmrc.

In this article, we’ll explain how npm config works, why it’s useful, and how you can use it to make npm fit your needs.

What Is `npm config`?

npm config is a way to adjust settings for npm so it works the way you want. You can use it to change things like:

Which website npm uses to download packages (the registry)
How npm saves packages in your project
Proxy settings for working behind a firewall

These settings are saved in a file called .npmrc, and npm looks at this file whenever you run npm commands.

How to Use `npm config`?

Some basic npm config Commands that developers should know about:

You can change npm settings using the npm config command. Here are some basic commands you can use:

- Set a new setting:

npm config set <key> <value>

For example, to change the registry npm uses to download packages, you can run:

npm config set registry https://registry.npmjs.org/

- Get a setting: If you want to see the current value of a setting, use:

npm config get <key>

- List all settings: To see all current npm settings, run:

npm config list

- Delete a setting: If you want to remove a setting, use

npm config delete <key>

- Edit the .npmrc file: You can open the .npmrc file directly to make changes by using:

npm config edit

Configuration Scopes (Where Settings Apply)

npm settings can apply in different places:

1. Global Settings:

These apply to all projects on your computer and are saved in a file in your home directory (~/.npmrc). To make a global setting, add the -g flag:

npm config set <key> <value> -g

2. Project Settings:

These settings apply only to the project you're working on. npm will look for a .npmrc file in the project folder.

3. User Settings:

These settings apply to all the projects under your user account.

4. Environment Settings:

These are temporary settings you can use when running npm commands. They’re often used in build pipelines or different environments.

Common npm Configurations

1. Registry:

By default, npm uses https://registry.npmjs.org/ to get packages. You can change this to a private registry if needed:

npm config set registry https://custom-registry.example.com

2. Proxy:

If you work behind a proxy (like in some company networks), you can set the proxy with npm:

npm config set proxy http://proxy.example.com:8080
npm config set https-proxy https://proxy.example.com:8080

3. Cache:

npm saves downloaded packages in a cache to make things faster. You can change where npm stores this cache:

npm config set cache /path/to/npm-cache

4. Strict SSL:

If you need to use self-signed certificates, you might have to turn off npm's strict SSL checking:

npm config set strict-ssl false

5. Save Options:

When you install packages, npm can save them in your package.json file. You can set npm to always save the exact version of a package:

npm config set save-exact true

6. Authentication Tokens:

If you're using private registries, you may need to set an authentication token:

npm config set //registry.example.com/:_authToken=YOUR_TOKEN

Working with Multiple .npmrc Files

You can have different .npmrc files for different purposes, allowing you to customize npm for global use, specific projects, or even temporary environments.

- Global Configuration:

This applies to everything and is usually stored in $HOME/.npmrc.

- Project Configuration:

A .npmrc file in your project folder will only apply to that project.

- User Configuration:

Settings that apply to all projects for your user account are stored in your home directory(~/.npmrc).

- Environment Variables:

You can also override settings by using environment variables, which are useful in CI/CD or development environments.

The priority order in which these configurations are applied is:

Command Line Flags: Any settings passed as flags directly into npm commands.

- Project .npmrc: Project-specific settings.
- User .npmrc: User-specific settings.
- Global .npmrc: Global settings.
- Default Settings: npm's default configurations.

This hierarchy ensures that project-specific configurations take precedence, allowing different settings for different projects.

Tips for Using npm config

1. Different Registries for Different Projects:

If you're working on multiple projects, you can set a different registry for each by placing a .npmrc file in each project's root folder.

3. Environment Variables:

You can set npm config values as environment variables in your terminal session, like this:

NPM_CONFIG_REGISTRY=https://registry.example.com

3. Switching Configurations:

You can switch between different .npmrc files if you're working in different environments (for example, development vs production).

Understanding and using npm config helps us customize how npm behaves, making it easier to manage different projects, private registries, proxies, and more. Whether we’re working on a single project or many, npm config gives us the flexibility to make npm work exactly how we need it.

By using .npmrc files, we can ensure consistent settings across projects and teams, saving us time and making development smoother.

Since we've just learnt more about npm config today, next time we run into a problem or need something special from npm, check if adjusting the config can help!

As always, thank you so much for reading and if you find this post helpful, share it with your friends.

NPM Config: customising how npm works

Rinon Tendrinomena — Thu, 17 Oct 2024 09:54:04 +0000

In this article, we’ll explain how npm config works, why it’s useful, and how you can use it to make npm fit your needs.

What Is `npm config`?

npm config is a way to adjust settings for npm so it works the way you want. You can use it to change things like:

Which website npm uses to download packages (the registry)
How npm saves packages in your project
Proxy settings for working behind a firewall

These settings are saved in a file called .npmrc, and npm looks at this file whenever you run npm commands.

How to Use `npm config`?

Some basic npm config Commands that developers should know about:

You can change npm settings using the npm config command. Here are some basic commands you can use:

- Set a new setting:

npm config set <key> <value>

For example, to change the registry npm uses to download packages, you can run:

npm config set registry https://registry.npmjs.org/

- Get a setting: If you want to see the current value of a setting, use:

npm config get <key>

- List all settings: To see all current npm settings, run:

npm config list

- Delete a setting: If you want to remove a setting, use

npm config delete <key>

- Edit the .npmrc file: You can open the .npmrc file directly to make changes by using:

npm config edit

Configuration Scopes (Where Settings Apply)

npm settings can apply in different places:

1. Global Settings:

These apply to all projects on your computer and are saved in a file in your home directory (~/.npmrc). To make a global setting, add the -g flag:

npm config set <key> <value> -g

2. Project Settings:

These settings apply only to the project you're working on. npm will look for a .npmrc file in the project folder.

3. User Settings:

These settings apply to all the projects under your user account.

4. Environment Settings:

These are temporary settings you can use when running npm commands. They’re often used in build pipelines or different environments.

Common npm Configurations

1. Registry:

By default, npm uses https://registry.npmjs.org/ to get packages. You can change this to a private registry if needed:

npm config set registry https://custom-registry.example.com

2. Proxy:

If you work behind a proxy (like in some company networks), you can set the proxy with npm:

npm config set proxy http://proxy.example.com:8080
npm config set https-proxy https://proxy.example.com:8080

3. Cache:

npm saves downloaded packages in a cache to make things faster. You can change where npm stores this cache:

npm config set cache /path/to/npm-cache

4. Strict SSL:

If you need to use self-signed certificates, you might have to turn off npm's strict SSL checking:

npm config set strict-ssl false

5. Save Options:

When you install packages, npm can save them in your package.json file. You can set npm to always save the exact version of a package:

npm config set save-exact true

6. Authentication Tokens:

If you're using private registries, you may need to set an authentication token:

npm config set //registry.example.com/:_authToken=YOUR_TOKEN

Working with Multiple .npmrc Files

You can have different .npmrc files for different purposes, allowing you to customize npm for global use, specific projects, or even temporary environments.

- Global Configuration:

This applies to everything and is usually stored in $HOME/.npmrc.

- Project Configuration:

A .npmrc file in your project folder will only apply to that project.

- User Configuration:

Settings that apply to all projects for your user account are stored in your home directory(~/.npmrc).

- Environment Variables:

You can also override settings by using environment variables, which are useful in CI/CD or development environments.

The priority order in which these configurations are applied is:

Command Line Flags: Any settings passed as flags directly into npm commands.

- Project .npmrc: Project-specific settings.
- User .npmrc: User-specific settings.
- Global .npmrc: Global settings.
- Default Settings: npm's default configurations.

This hierarchy ensures that project-specific configurations take precedence, allowing different settings for different projects.

Tips for Using npm config

1. Different Registries for Different Projects:

If you're working on multiple projects, you can set a different registry for each by placing a .npmrc file in each project's root folder.

3. Environment Variables:

You can set npm config values as environment variables in your terminal session, like this:

NPM_CONFIG_REGISTRY=https://registry.example.com

3. Switching Configurations:

You can switch between different .npmrc files if you're working in different environments (for example, development vs production).

By using .npmrc files, we can ensure consistent settings across projects and teams, saving us time and making development smoother.

Since we've just learnt more about npm config today, next time we run into a problem or need something special from npm, check if adjusting the config can help!

As always, thank you so much for reading and if you find this post helpful, share it with your friends.

Let's Connect on Twitter! 🚀

Rinon Tendrinomena — Thu, 26 Sep 2024 04:34:55 +0000

Hey fellow devs! 👋 If you're into web development, JavaScript, staying updated on the latest in tech, and other interesting topics, I'd love to connect with you over on Twitter! Please share your twitter handle in the comments section below if you also want others to follow you.

I will be tweeting about:

🔥 JavaScript tips & tricks
💡 React and TypeScript insights
🛠️ Cool dev tools and resources I discover
🎯 My latest coding projects and challenges if possible

Please follow me here: @Tojo_Rinon. That will mean a lot to me.

I’d love to keep the conversation going and share knowledge, ideas, and maybe a few coding memes along the way. See you there! 😄

I would love to follow you if you share your twitter handle with me!

Understanding Concurrency in React: A Guide to Smoother and More Responsive UIs

Rinon Tendrinomena — Wed, 21 Aug 2024 08:09:25 +0000

As web apps get more complex, keeping them fast and smooth for users can be tough. That’s where concurrency in React comes in. It helps React manage multiple tasks at once, making your app run better and feel more responsive.

What Does Concurrency Mean in React?

My short definition is of Concurrency in React is that React can handle several things at the same time. This is especially important with new features like Automatic Batching and Transitions, which help make your app feel smoother.

Let's take a look at the key ideas behind Concurrency:

1. Concurrent Rendering:
With concurrent rendering, React can handle multiple updates at the same time. If something more urgent happens, like a user clicking a button or switching between tabs, React can pause or interrupt one update to focus on the more important task. For example, if a user accidentally clicks on one tab and then quickly switches to another, React won't wait for the first tab to finish loading. Instead, it will switch to the most recent tab, keeping the app responsive and fast. Check the example made by the React team here.

2. Automatic Batching:
In React 18, automatic batching allows React to group several state changes together and apply them all in one go. This means that instead of updating the app for each individual state change, React combines them into a single update. This reduces the number of renders, making the app more efficient and faster.

Examples:
a. Form Inputs:
Suppose you have a form with multiple inputs. If you change the value of several inputs quickly, React will batch these changes into a single update. Without automatic batching, each input change might trigger a separate re-render, slowing down the app.

function MyForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleChange = (e) => {
    setName(e.target.value);
    setEmail('newemail@example.com');
  };

  return (
    <div>
      <input value={name} onChange={handleChange} />
      <input value={email} onChange={handleChange} />
    </div>
  );
}

In this example, both setName and setEmail will be batched together, so React will only re-render once, instead of twice.

b. Async Operations:
If you're handling multiple async operations, such as fetching data and updating state based on the results, automatic batching can combine these updates into one render.

import { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null); // State to store fetched data
  const [loading, setLoading] = useState(true); // State to track loading status
  const [error, setError] = useState(null); // State to handle errors
  const [retry, setRetry] = useState(false); // State to trigger a retry

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true); // Start loading
      setError(null); // Clear previous errors

      try {
        const response = await fetch('/api/data');

        if (!response.ok) {
          throw new Error('Network response was not ok');
        }

        const result = await response.json();
        setData(result); // Update data state with the fetched result
      } catch (error) {
        setError(error.message); // Set error state if fetch fails
      } finally {
        setLoading(false); // End loading
      }
    };

    fetchData();
  }, [retry]); // Dependency array includes retry to re-fetch data when retry changes

  const handleRetry = () => {
    setRetry(prevRetry => !prevRetry); // Toggle retry state to re-trigger fetch
  };

  return (
    <div>
      {loading && <p>Loading...</p>}
      {error && <p>Error: {error}</p>}
      {data && <p>Data: {JSON.stringify(data)}</p>}
      {!loading && !error && !data && <p>No data available</p>}
      {error && <button onClick={handleRetry}>Retry</button>}
    </div>
  );
}

export default DataFetcher;

During the data fetching process, several state updates occur:

setLoading(true) before starting the fetch.
setError(null) to clear any previous errors.
setData(result) after a successful fetch.
setError(error.message) if an error occurs.
setLoading(false) to signal that loading is complete.

Automatic batching combines these updates into a single render cycle. This means React processes these changes all at once, avoiding multiple renders.

3. Transitions:
Transitions let you mark some updates as less urgent. For example, when moving to a new page, React can keep showing the current page while it prepares the new one in the background. This makes the app feel smoother.

Examples of Transitions:
a. Page Navigation:
When navigating between pages, React can mark the navigation as a transition. This means React will keep showing the current page while it loads and prepares the new page in the background.

import { useTransition, useState } from 'react';

function App() {
  const [isPending, startTransition] = useTransition();
  const [page, setPage] = useState('home');

  const goToPage = (newPage) => {
    startTransition(() => {
      setPage(newPage); // Mark page change as a transition
    });
  };

  return (
    <div>
      <button onClick={() => goToPage('home')}>Home</button>
      <button onClick={() => goToPage('about')}>About</button>
      <button onClick={() => goToPage('contact')}>Contact</button>

      {isPending ? <p>Loading...</p> : <PageContent page={page} />}
    </div>
  );
}

function PageContent({ page }) {
  if (page === 'home') return <p>Home Page</p>;
  if (page === 'about') return <p>About Page</p>;
  if (page === 'contact') return <p>Contact Page</p>;
  return null;
}

In this example, clicking on different buttons triggers a page change. React will handle the page change as a transition, keeping the current page visible while preparing the new one.

b. Filtering a List:
When applying filters to a list, you can mark the filtering operation as a transition. This way, React can keep showing the current list while it processes and applies the new filter criteria in the background.

import { useTransition, useState } from 'react';

function ItemList() {
  const [isPending, startTransition] = useTransition();
  const [filter, setFilter] = useState('');
  const [items, setItems] = useState(allItems);
  const allItems = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];

  const handleFilterChange = (e) => {
    const newFilter = e.target.value;
    startTransition(() => {
      setFilter(newFilter);
      const filteredItems = allItems.filter(item => item.includes(newFilter));
      setItems(filteredItems);
    });
  };

  return (
    <div>
      <input value={filter} onChange={handleFilterChange} placeholder="Filter items" />
      {isPending ? <p>Filtering...</p> : <ul>{items.map(item => <li key={item}>{item}</li>)}</ul>}
    </div>
  );
}

Here, as you type in the filter input, React marks the filtering process as a transition. The list will update in the background, while the UI remains responsive.

4. Suspense:
Suspense lets React pause part of the UI while it waits for data to load. With concurrency, React can still update other parts of the UI, so users aren’t stuck waiting for everything to load.

Example:(From React docs)

import { Suspense } from 'react';
import Albums from './Albums.js';

export default function ArtistPage({ artist }) {
  return (
    <>
      <h1>{artist.name}</h1>
      <Suspense fallback={<Loading />}>
        <Albums artistId={artist.id} />
      </Suspense>
    </>
  );
}

function Loading() {
  return <h2>🌀 Loading...</h2>;
}

In this example, pretend we were fetching the artist details in the Albums component. While resolving the promise for getting the data, the UI will display a loading text. This means that users don't see a black page/UI while waiting for the artist's details to be loaded.

5. Priority Levels:
React gives different tasks different priority levels. Important tasks, like handling user input, are done first, while less important tasks, like background data loading, are done later. This keeps the app fast and responsive.

Concurrency in React helps keep your app responsive and fast, even as it gets more complex. By using these features, you can build apps that feel quick and smooth, giving users a better experience.

That's it! As always thanks for reading and I hope you learned more about Concurrency in React. There are more features I didn't write about yet as I don't this post to be very long.

Your comments and feedback are valuable to me! If you have any suggestions, corrections, or improvements, please feel free to share them.

Onja is looking for two developers

Rinon Tendrinomena — Tue, 14 May 2024 13:01:41 +0000

Hey guys, we need friends here in Madagascar:)
Sorry that I am posting something a bit different today, not a tutorial or an article. But it is still for developers.

About Onja

Onja is a social enterprise training underprivileged youth into world-class software developers.

We find the brightest students in Madagascar who can’t afford to continue their education, and train them in English language and software development. After just two-and-a-half years they are ready to work as remote front-end software developers in international tech teams.

Once in a job, our developers earn a good salary that helps them support their families and pay forward the opportunity to a new wave of students. They unlock exciting careers that fulfil their potential, and accelerate the development of their nation (see ‘How Onja Works’ below).

Our first cohort, ‘Wave 1’, consists of nineteen talented and committed graduates who are now working remotely for our partner companies in Europe and the US. With this immensely successful first cohort, and a proven social model, our goal is now to scale our impact: we aim to take on 360 new students over the next four years.

Our fast-growing team is very united, committed to the mission, and hardworking, but we also maintain a relaxed and peaceful atmosphere that you’ll find everywhere in Madagascar.

Onja is located in Toamasina, a lively city with beautiful beaches, nice restaurants, and with plenty to do and see. Toamasina is Madagascar’s second largest city (population 300,000) yet is surrounded by plenty of natural beauty, and even has a national park nearby.

Available developer positions:

Front-end Course

Responsibilities:

Rebuilding the existing course focusing primarily on React while including HTML, CSS, JavaScript, TypeScript and other related technologies, moving towards a scalable online-style programme. How this can be achieved is very open and will depend on you, another course designer, and some input from the wider team. We imagine it’s likely to include the following:
Finding existing online material and incorporate useful material into the course
Creating engaging video lectures, learning activities and course content
Collaborate with existing Onja lecturers, incorporating their specific experience into your course design.
Deciding on the criteria used to assess students’ performance and develop assessments.
As we are a startup social enterprise there will likely be opportunities to wear many hats, contributing to other parts of the organisation.

Back-end Node.js Course Designer

Responsibilities:

Conducting preliminary research to determine which languages and technologies should be included in the course.
Finding existing online material and incorporating useful material into the course
Creating engaging video lectures, learning activities and course content
Collaborate with past Onja lecturers, incorporating their specific experience into your course design.
Deciding on the criteria used to assess students’ performance and develop assessments.
As we are a startup social enterprise there will likely be opportunities to wear many hats, contributing to other parts of the organisation.

More details including what we offer should be found by opening the links above.

If you are interested and want to improve your skills by working with us, head to our website here or click the link above to apply.

DEV Community: Rinon Tendrinomena

Coupling, Decoupling, and Cohesion

Cohesion – "Keep related things together"

Coupling – "How much do modules know about each other?"

Decoupling – The Action of Making Coupling Loose

Why Should You Care?

Quick Rule to Remember

🚀 I Built a Developer Resources Platform — Join Me and Share What Helps You Learn

What Is This App About?

What Can You Do as a Developer?

Community-Driven & Open

Want to Help as an Admin?

Why I Built This

Join In

Exploring the Latest AI Models and Tools for Developers

Exploring the Latest AI Models and Tools for Developers

Base Models: The Foundation of AI Power

Coding Assistants: Your AI Pair Programmers

Coding Agents: Autonomous Development Partners

App Builders: From Prompts to Production

Conclusion

When JS blocks parsing your HTML

A browser builds a webpage step by step:

Why does parsing stop?

So in short:

Detailed Steps in DOM Construction

Here's the structure summary:

Technical Terms Every Developer Should Know

Core Web Technologies

Networking & Protocols

Front-End Development

Back-End Development

Tools, Processes & Methodologies

Additional Key Concepts

Understand JavaScript Object References and Copying - Brief Explanation

Object References

Object Copying

1. Shallow Copy

2. Deep Copy

Summary Table

NPM Config: customising how npm works

What Is npm config?

How to Use npm config?

Configuration Scopes (Where Settings Apply)

Common npm Configurations

Working with Multiple .npmrc Files

Tips for Using npm config

NPM Config: customising how npm works

What Is npm config?

How to Use npm config?

Configuration Scopes (Where Settings Apply)

Common npm Configurations

Working with Multiple .npmrc Files

Tips for Using npm config

Let's Connect on Twitter! 🚀

Understanding Concurrency in React: A Guide to Smoother and More Responsive UIs

What Does Concurrency Mean in React?

Onja is looking for two developers

About Onja

Available developer positions:

What Is `npm config`?

How to Use `npm config`?

What Is `npm config`?

How to Use `npm config`?