---
title: "JavaScript Temporal Is Coming: A Simpler Way to Work With Dates"
description: "Temporal is a modern JavaScript API that makes handling dates and times easier and more reliable. Here's why it's a big deal."
date: "2025-04-17"
tags: ["JavaScript", "Temporal", "Dates", "Time", "Web APIs"]
image: 'https://res.cloudinary.com/dhboldbpa/image/upload/v1744911351/devamiya/blogs/MS-OR-CH1_bs135j.png'
---

# 🕰️ JavaScript Temporal Is Coming: A Simpler Way to Work With Dates

Handling dates and times in JavaScript has always been... frustrating. But that’s about to change with **Temporal**, a new built-in object for date and time management.

Browser support is still experimental, but developers can already explore this modern and powerful API.

---

## 🤔 Why Do We Need Temporal?

JavaScript’s existing `Date` object was created in 1995 and hasn’t aged well. It:
- Only supports local time and UTC
- Doesn’t handle time zones well
- Is unreliable when parsing dates
- Is **mutable**, which can lead to bugs

Because of these issues, most developers use libraries like Moment.js or date-fns.

Temporal aims to fix all of this with:
- Time zone support
- Reliable parsing
- Immutable objects
- Better date math (like DST and calendar changes)

---

## 📚 What Does Temporal Offer?

Temporal introduces new classes for different types of date/time work:

| Use Case | Temporal Class |
|----------|----------------|
| Time durations | `Temporal.Duration` |
| Exact moments in time | `Temporal.Instant` |
| Date/time with time zone | `Temporal.ZonedDateTime` |
| Plain (no time zone) values | `Temporal.PlainDate`, `Temporal.PlainTime`, etc. |
| Current time | `Temporal.Now` |

---

## ✨ Example 1: Get the Current Date and Time
```js
const dateTime = Temporal.Now.plainDateTimeISO();
console.log(dateTime); // e.g., 2025-01-22T11:46:36.144

const nyTime = Temporal.Now.plainDateTimeISO("America/New_York");
console.log(nyTime); // e.g., 2025-01-22T05:47:02.555
```

---

## 🧧 Example 2: Find the Next Chinese New Year
```js
const chineseNewYear = Temporal.PlainMonthDay.from({
  monthCode: "M01",
  day: 1,
  calendar: "chinese",
});

const currentYear = Temporal.Now.plainDateISO().withCalendar("chinese").year;
let nextCNY = chineseNewYear.toPlainDate({ year: currentYear });

if (Temporal.PlainDate.compare(nextCNY, Temporal.Now.plainDateISO()) <= 0) {
  nextCNY = nextCNY.add({ years: 1 });
}

console.log(`Next Chinese New Year: ${nextCNY.withCalendar("iso8601").toLocaleString()}`);
```

---

## 🕓 Example 3: Calculate Time Until a Launch
```js
const launch = Temporal.Instant.fromEpochMilliseconds(1851222399924);
const now = Temporal.Now.instant();
const duration = now.until(launch, { smallestUnit: "hour" });

console.log(`Launch in: ${duration.toString()}`); // PT31600H
```

Note: Formatting of durations may differ across browsers right now.

---

## 📊 Example 4: Sort Time Durations
```js
const durations = [
  Temporal.Duration.from({ hours: 1 }),
  Temporal.Duration.from({ hours: 2 }),
  Temporal.Duration.from({ hours: 1, minutes: 30 }),
  Temporal.Duration.from({ hours: 1, minutes: 45 }),
];

durations.sort(Temporal.Duration.compare);
console.log(durations.map(d => d.toString()));
// [ 'PT1H', 'PT1H30M', 'PT1H45M', 'PT2H' ]
```

---

## 🧪 Browser Support & Trying It Out

Temporal is still in **experimental** stages:
- **Firefox**: Available in Nightly (enable `javascript.options.experimental.temporal`)
- **Chrome & Safari**: In development

You can also try it now using the [`@js-temporal/polyfill`](https://tc39.es/proposal-temporal/docs/) and test examples in the console.

---

## 🎉 Final Thoughts

Temporal is a **game-changer** for working with time in JavaScript. It:
- Solves major issues with the old Date API
- Supports time zones and different calendars
- Offers powerful and flexible new methods

Explore more in the [MDN Temporal docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Temporal) — they’re packed with examples!

Now is the perfect time to learn Temporal and level up your JS time skills ⏳


JavaScript Temporal Is Coming: A Simpler Way to Work With Dates

---
title: "Web Performance Considerations for CSS in 2025"
description: "Explore how to write CSS that keeps your site fast and responsive, from reducing render-blocking to optimizing critical styles."
date: "2025-04-09"
tags: ["CSS", "Web Performance", "Frontend", "Optimization", "Best Practices"]
image: 'https://res.cloudinary.com/dhboldbpa/image/upload/v1744959218/devamiya/blogs/MS-OR-CH4_w12uwy.png'
---

# 🎨 Web Performance Considerations for CSS in 2025

CSS often flies under the radar in performance conversations — but poorly managed styles can **wreck** your loading times, cause layout shifts, and increase time-to-interactive.

Let’s break down how to make your CSS **performance-first** in 2025.

---

## ⚠️ 1. Minimize Render-Blocking CSS

CSS is **render-blocking** by default. That means the browser **won’t paint anything** until the CSS is loaded.

### ✅ Solutions:
- Use **critical CSS** in `<style>` tags for above-the-fold content
- Defer non-essential styles with `media="print"` + `onload`

Example:
```html
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
```

---

## 🧱 2. Use Atomic CSS or Utility-First Frameworks

Frameworks like **Tailwind CSS** or **Vanilla Extract** promote smaller, faster stylesheets by:
- Avoiding duplication
- Generating only the used styles
- Encouraging **build-time CSS generation**

This results in leaner styles and faster rendering.

---

## ✂️ 3. Remove Unused CSS (PurgeCSS / Built-in Tools)

Tools like **PurgeCSS**, **Terser**, or built-in Next.js optimizations remove unused styles.

With Tailwind + Next.js:
```js
// tailwind.config.js
content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
```

👉 This ensures unused classes don’t make it into the final CSS bundle.

---

## 📦 4. Avoid Huge CSS Frameworks (If Not Needed)

Bootstrap, Material UI, etc., are great — but often include **100x more CSS** than you need.

If performance is key:
- Use **component-first** or **utility-first** frameworks
- Or, selectively import what you use (tree-shakeable CSS-in-JS)

---

## ⚙️ 5. Inline Critical CSS

Inlining styles needed for the first paint improves **LCP** (Largest Contentful Paint).

Next.js and tools like [Critters](https://github.com/GoogleChromeLabs/critters) do this automatically:
```js
withCSS: true,
optimizeCss: true
```

---

## 🎯 6. Use Font Loading Best Practices

Fonts = style + performance.
- Use `font-display: swap` to avoid FOIT (Flash of Invisible Text)
- Preload fonts:
```html
<link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin>
```
- Serve modern formats like `woff2`

---

## 🔍 7. Avoid Large @import Chains

`@import` inside CSS files adds extra HTTP requests and slows down rendering.

Instead:
- Combine styles into fewer files
- Use `link` tags in HTML or modern build pipelines (like PostCSS)

---

## 🧪 8. Use DevTools and Coverage Tab

In Chrome DevTools:
- Open the **Coverage** tab to see unused CSS
- Use the **Performance** tab to trace rendering costs from stylesheets

This helps you identify bloated or blocking styles.

---

## 🧘 9. Simplify Your CSS Cascade & Specificity

Overly complex selectors can:
- Slow down rendering (especially on large DOM trees)
- Make debugging painful

Tips:
- Use flat class selectors (`.btn-primary` over `div ul li a.btn`)
- Avoid `!important` wars
- Use component-scoped styles (CSS Modules, Vanilla Extract, etc.)

---

## 🧰 Tools To Level Up CSS Performance

| Tool | Use Case |
|------|----------|
| PurgeCSS | Remove unused styles |
| PostCSS | CSS transformations + plugins |
| Critters | Inline critical CSS for SSR apps |
| Chrome DevTools | Real-time auditing |
| Lighthouse | Performance scoring |

---

## 🧠 Final Thoughts

CSS is powerful, but with power comes responsibility 😅. Keeping your styles lean and fast makes your app feel snappy, professional, and trustworthy.

In 2025, performance-first CSS means:
- Writing only what you need
- Loading it at the right time
- Keeping the cascade manageable

> Performance isn’t just about JavaScript — your styles matter too.

---

## 📚 Resources

- [CSS Tricks: Rendering Performance](https://css-tricks.com/rendering-performance-css/)
- [Google Fonts Performance Guide](https://developers.google.com/fonts/docs/performance)
- [Tailwind CSS Performance Tips](https://tailwindcss.com/docs/performance)

---

Got a tip or question about CSS perf?  
Let’s chat on [Twitter/X](https://twitter.com/amiya_panigrahi) or [email me](mailto:hi@devamiya.me)!

Web Performance Considerations for CSS in 2025

---
title: "Optimizing Web Performance in 2025: Real-World Techniques"
description: "Master modern web performance in 2025 with actionable tips, tools, and strategies to make your websites blazing fast."
date: "2025-03-23"
tags: ["Web Performance", "Next.js", "React", "Optimization", "Frontend"]
image: 'https://res.cloudinary.com/dhboldbpa/image/upload/v1744958820/devamiya/blogs/MS-OR-CH3_jzn6ib.png'
---

# ⚡ Optimizing Web Performance in 2025: Real-World Techniques

Website speed isn’t just about user experience anymore — it directly affects **SEO**, **conversion rates**, and **core web vitals**. In 2025, performance is a **must-have**, not a nice-to-have.

Here are the **latest, real-world strategies** for optimizing web performance with modern stacks like Next.js, React, and beyond.

---

## 🚦 1. Prioritize Core Web Vitals

Google still cares deeply about:
- **LCP (Largest Contentful Paint)** < 2.5s
- **FID (First Input Delay)** < 100ms (now replaced by **INP**)
- **CLS (Cumulative Layout Shift)** < 0.1

👉 Use [Lighthouse](https://pagespeed.web.dev/) and [Web Vitals Extension](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma) to audit your app.

---

## 📦 2. Reduce JavaScript Bundle Size

- Use **React Server Components (RSC)** to offload logic to the server
- Dynamically import heavy components with `next/dynamic`
- Remove unused code via **tree-shaking** and `sideEffects: false`
- Replace bloated packages with lighter alternatives

Example:
```ts
const Editor = dynamic(() => import('@/components/Editor'), {
  loading: () => <p>Loading...</p>,
  ssr: false,
});
```

---

## 🖼️ 3. Optimize Images the Smart Way

- Use `next/image` for automatic resizing and lazy loading
- Prefer modern formats like **AVIF** and **WebP**
- Compress images before uploading (e.g. [Squoosh](https://squoosh.app))

Example:
```tsx
<Image src="/hero.webp" alt="Hero" width={1200} height={600} priority />
```

---

## 🚀 4. Enable HTTP/2 + Caching + Compression

- Serve your site via **HTTP/2** or **HTTP/3** for multiplexing
- Use **Gzip** or **Brotli** compression
- Cache static assets with long TTLs (`Cache-Control: public, max-age=31536000, immutable`)
- Use **CDNs** (like Vercel, Cloudflare) to serve assets closer to users

---

## 🔥 5. Use Edge Rendering and Incremental Static Regeneration (ISR)

In Next.js:
- Use `export const dynamic = "force-dynamic"` for edge rendering
- Use `revalidate` for ISR:
```ts
export const revalidate = 60; // revalidates every 60 seconds
```

Benefit: You get **fast-first render** with **fresh data** behind the scenes.

---

## 🧠 6. Load Only What You Need (Code-Splitting)

Split your app at the page/component level. With Next.js, this is automatic for pages, but you can also manually split components:
```ts
const Chart = dynamic(() => import('@/components/Chart'));
```

Bonus tip: Bundle visualizer tool
```bash
npm install -D @next/bundle-analyzer
```

---

## ⚙️ 7. Monitor Performance Continuously

- Set up **Real User Monitoring (RUM)** tools like:
  - Vercel Analytics
  - Sentry Performance
  - LogRocket
  - SpeedCurve

Monitoring ensures you catch regressions early and **optimize based on real usage**.

---

## 🧪 8. Preload Smartly

- Use `<link rel="preload">` for fonts, above-the-fold images, or API calls
- Prioritize critical CSS and fonts
- Avoid layout shifts by using `font-display: swap` and defined image dimensions

---

## 🔍 9. Audit Third-Party Scripts

- Audit all analytics, chatbots, embeds
- Lazy load non-critical scripts
- Self-host if possible

> Every third-party script is a potential performance killer.

---

## 🧰 10. Tools of the Trade (2025 Edition)

| Tool | Purpose |
|------|---------|
| Lighthouse | Auditing performance |
| WebPageTest | Deep perf insights |
| bundle-analyzer | JS size analysis |
| next/image | Image optimization |
| React Profiler | Component-level bottlenecks |
| Vercel Analytics | RUM + core vitals tracking |

---

## 🌟 Final Thoughts

Speed isn’t a single fix — it’s a **culture of performance**.

In 2025, it’s about embracing **smart defaults** (like RSC and ISR), using tools wisely, and staying **obsessed with the user experience**.

> The web is fast when we make it fast. Let's build for speed.

---

## 📚 Resources

- [Next.js Performance Docs](https://nextjs.org/docs/advanced-features/measuring-performance)
- [Google Web Vitals](https://web.dev/vitals/)
- [Smashing Magazine: Performance Checklist](https://www.smashingmagazine.com/2023/12/web-performance-optimization-checklist/)

---

Want a performance audit of your site? Or have questions?  
Reach out on [Twitter/X](https://twitter.com/amiya_panigrahi) or [drop a message](mailto:hi@devamiya.me)!


Optimizing Web Performance in 2025: Real-World Techniques

---
title: "React Server Components: The Future of Frontend?"
tags: ['nodejs', 'react']
image: 'https://res.cloudinary.com/dhboldbpa/image/upload/v1744004372/devamiya/blogs/React_Server_Components_mpbhge.png'
description: "Explore how React Server Components are changing the game for frontend performance and developer experience in 2025."
date: "2025-03-12"
---


# 🚀 React Server Components: The Future of Frontend?

Frontend development is evolving fast, and one of the most exciting innovations in recent years is **React Server Components (RSC)**. First teased by the React team in 2020, RSCs have finally matured and are now production-ready in frameworks like **Next.js 14**.

So, what are they, why do they matter, and how do they shape the future of frontend development?

---

## 🧩 What Are React Server Components?

React Server Components are a new kind of React component that **run only on the server**, with **zero client-side JavaScript**. That means:

- No bundle size increase 💡
- No hydration needed 🚫💧
- Better performance, especially on slow devices ⚡

RSCs let you **fetch data on the server**, render part of your UI, and stream it to the client. This means faster initial loads and less JavaScript shipped.

---

## 🌐 RSC vs Client Components

| Feature               | Client Components          | Server Components             |
|-----------------------|----------------------------|--------------------------------|
| Runs on               | Browser (client)           | Node.js (server)               |
| Ships to browser?     | ✅ Yes                     | ❌ No                          |
| Can use browser APIs? | ✅ Yes                     | ❌ No                          |
| Can fetch data?       | ✅ Yes (but async)         | ✅ Yes (on server)             |
| JS bundle impact      | 📈 Increases               | 📉 Zero                        |

The idea is to **split your UI**: use Server Components where interaction is not needed (e.g. static content, fetched data), and Client Components where interactivity matters (e.g. buttons, modals).

---

## ⚙️ RSC in Next.js 14+

Next.js has embraced RSC in its **App Router** (introduced in v13), making it the go-to framework for using RSC today.

Example:
```tsx
// A Server Component
export default async function ProductList() {
  const products = await fetchProductsFromDB();
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}
```

No `useEffect`, no client-side fetching, no loading spinners — it's all done on the server!

To make a Client Component in App Router, simply add `'use client'` at the top:
```tsx
'use client';
import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}
```

---

## 💡 Why RSC Is a Big Deal

- **Performance**: Less JavaScript = faster load times
- **Better UX**: You can stream parts of the UI as they’re ready
- **Developer Experience**: Code feels more like traditional server-side rendering, but with React’s DX

It’s like getting the best of both SSR and CSR, without the usual trade-offs.

---

## 🧪 Is It Production-Ready?

Yes — **Next.js App Router** with React Server Components is **stable and recommended for new apps**. Major platforms like **Vercel**, **Shopify**, and **Vimeo** are already using RSC in production.

That said, there’s still a learning curve:
- Debugging SSR can be tricky
- Some libraries aren't RSC-compatible yet
- Requires Node.js server (not for static-only sites)

---

## 🌍 The Future Is Server-First

With React Server Components, the frontend is going **server-first** again — but in a smarter, more flexible way. As bandwidth and device diversity grow, sending less JS to users is more important than ever.

RSC lets us build faster, more efficient apps — and it’s just getting started.

---

## 📚 Resources

- [React Server Components Official Docs](https://react.dev/learn/server-components)
- [Next.js App Router](https://nextjs.org/docs/app/building-your-application/routing)
- [Vercel on Server Components](https://vercel.com/blog/react-server-components)

---

What are your thoughts on RSC? Are you using them in production yet?  
Let's chat on [Twitter/X](https://twitter.com/amiya_panigrahi) or [drop a comment](mailto:hi@devamiya.me)!


React Server Components: The Future of Frontend?

---
title: "How to Level Up Your Full-Stack Game with tRPC and Next.js"
description: "Discover how tRPC empowers full-stack development by enabling end-to-end type safety and seamless communication in your Next.js apps."
date: "2025-02-11"
tags: ["tRPC", "Next.js", "Full-Stack", "TypeScript", "API"]
image: 'https://res.cloudinary.com/dhboldbpa/image/upload/v1744004670/devamiya/blogs/trpc_next_nippcf.png'
---

# 🧠 How to Level Up Your Full-Stack Game with tRPC and Next.js

Full-stack development in 2025 is all about **speed, safety, and simplicity**. And if you’re tired of writing API schemas, DTOs, and constantly syncing types between your frontend and backend — say hello to **tRPC**.

In this post, we’ll break down how **tRPC + Next.js** gives you superpowers for building type-safe, full-stack apps _without writing a single line of API boilerplate_.

---

## 🚀 What Is tRPC?

**tRPC** (short for TypeScript Remote Procedure Call) lets you **create fully typesafe APIs** without needing a REST or GraphQL layer. Your frontend talks to the backend **directly through function calls**.

You define your procedures once on the server — and call them from the client as if they were local functions, all with full TypeScript support.

---

## ⚙️ How It Works in Next.js

tRPC integrates perfectly with **Next.js App Router** or **Pages Router**, and works with React Server Components too.

Here’s the general flow:

1. Define procedures in a **router** on the server
2. Export the router and set up a tRPC server handler (API route or middleware)
3. Use `createTRPCReact()` to access procedures from the client

---

## 🔧 Example Setup (App Router)

### 1. Create your backend router
```ts
// server/api/trpc.ts
import { initTRPC } from '@trpc/server';

const t = initTRPC.create();
export const appRouter = t.router({
  hello: t.procedure.query(() => 'Hello from tRPC!'),
});

export type AppRouter = typeof appRouter;
```

### 2. Create the tRPC server handler
```ts
// app/api/trpc/[trpc]/route.ts
import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import { appRouter } from '@/server/api/trpc';

export const dynamic = 'force-dynamic';

export async function GET(req: Request) {
  return fetchRequestHandler({
    req,
    endpoint: '/api/trpc',
    router: appRouter,
    createContext: () => ({}),
  });
}
```

### 3. Use it on the client
```ts
// app/page.tsx
'use client';

import { trpc } from '@/utils/trpc';

export default function HomePage() {
  const hello = trpc.hello.useQuery();

  return <div>{hello.data ?? 'Loading...'}</div>;
}
```

---

## 🛠 Why Use tRPC?

✅ **End-to-end type safety**  
✅ **No schema duplication**  
✅ **Developer experience is 10/10**  
✅ **Built-in React Query support**  
✅ **Flexible + framework-agnostic core**

> “If TypeScript is your love language, tRPC is your soulmate.”

---

## 🔍 When Not to Use It?

- If your app needs a **public API**, REST or GraphQL may be better
- If your team isn’t TypeScript-savvy, the learning curve might be steep
- If you’re doing **microservices** with non-TypeScript services, tRPC won’t help there

---

## 📦 Bonus: Add Zod for Input Validation

tRPC works great with **Zod** to validate inputs:
```ts
import { z } from 'zod';

const appRouter = t.router({
  greet: t.procedure
    .input(z.object({ name: z.string() }))
    .query(({ input }) => `Hello, ${input.name}`),
});
```

---

## 🌍 Final Thoughts

tRPC isn’t just a tool — it’s a philosophy: **“Don’t repeat yourself. Especially not types.”** 

With tRPC and Next.js, you’re building APIs _by not building APIs_ — just calling strongly typed procedures, backed by full inference and validation.

> Ready to level up your stack? Give tRPC a spin and never look back.

---

## 📚 Resources

- [tRPC Official Docs](https://trpc.io/docs)
- [tRPC with Next.js App Router Guide](https://trpc.io/docs/router/app-router)
- [Zod - TypeScript-first schema validation](https://zod.dev)

---

Got questions or tips about tRPC?  
Hit me up on [Twitter/X](https://twitter.com/amiya_panigrahi) or [email me](mailto:hi@devamiya.me)!


How to Level Up Your Full-Stack Game with tRPC and Next.js

---
title: 'Why JavaScript is single threaded?'
date: '2024-07-22'
tags: ['nodejs', 'react']
image: 'https://res.cloudinary.com/dhboldbpa/image/upload/v1707680358/devamiya/blogs/javscript-single-thread_eyp2np.png'
---

JavaScript is a `High-level`, `single-threaded`, `JIT-compiled`, `Garbage collected`, `prototype-based`, `multi-paradigm`, `dynamic language `with a non-blocking event loop also with functions as first class citizens. 

# Single Threaded

JavaScript is signle threaded Non Blocking programming language with an event loop in it.

this means it can execute only one signle piece 

```js
const parent = () => {
  const child = () => {
    console.trace();
  }
  child();
}

parent();
```
!["Signle Threaded"](https://res.cloudinary.com/dhboldbpa/image/upload/v1680429703/single-thread_ks5xci.png)

Why JavaScript is single threaded?

---
title: 'Choreography vs Orchestration in Microservices'
date: '2024-03-27'
tags: ['nodejs', 'react']
image: 'https://res.cloudinary.com/dhboldbpa/image/upload/v1707677839/devamiya/blogs/MS-OR-CH_tsfcoy.png'
---

![nodejs](https://res.cloudinary.com/dhboldbpa/image/upload/v1707677839/devamiya/blogs/MS-OR-CH_tsfcoy.png)


# What is microservices ?
`Microservices` are an architectural approach to building software applications as a collection of loosely coupled services that communicate with each other over the network. When building microservices-based systems, there are two main approaches to coordinating the interactions between the services: `choreography` and `orchestration`.

# Choreography

`Choreography` is a decentralized approach to service coordination, where each service communicates with other services directly to achieve a desired outcome. In a choreographed system, each service is responsible for its own behavior and communicates with other services using events and messages. Choreography can be thought of as a collaboration between services, where each service contributes to the overall behavior of the system.



# Orchestration

`Orchestration`, on the other hand, is a centralized approach to service coordination, where a central orchestrator service is responsible for coordinating the interactions between the services. In an orchestrated system, the orchestrator service controls the flow of messages between services and is responsible for ensuring that the services work together to achieve a desired outcome. Orchestration can be thought of as a conductor directing an orchestra, where each service plays a specific role in the overall behavior of the system.

![choregraphy](https://res.cloudinary.com/accion-labs/image/upload/v1587636984/content-ms/ccaie7tqigrlgnpnl3iu.jpg)


#  Which one to use ?

Both `choreography` and `orchestration` have their own advantages and disadvantages. `Choreography` is more flexible and allows services to be added or removed without affecting the overall behavior of the system. However, choreography can also be more complex to implement and may require more testing to ensure that all services are working correctly.

`Orchestration`, on the other hand, can be `easier to implement `and can provide a more predictable and consistent behavior for the system. However, orchestration can also be less flexible and may require more maintenance if services need to be added or removed from the system.


# Conclusion

In summary, the choice between `choreography` and `orchestration` for coordinating microservices depends on the specific needs of the system. `Choreography` can be a good choice for systems that require `flexibility` and `scalability`, while `orchestration` can be a good choice for systems that require `consistency` and `predictability`. Ultimately, both approaches can be effective when implemented correctly and can help developers build robust and scalable microservices-based systems.

Choreography vs Orchestration in Microservices

---
title: 'Atomic Design in ReactJS'
date: '2023-06-30'
tags: ['nodejs', 'react']
image: 'https://res.cloudinary.com/dhboldbpa/image/upload/v1706120158/devamiya/blogs/vvmhnu7f1pu2wgz3ncp8.png'
---
![Atomic Design](https://res.cloudinary.com/dhboldbpa/image/upload/v1706120158/devamiya/blogs/vvmhnu7f1pu2wgz3ncp8.png)

 
Atomic design is a popular design methodology that has gained immense popularity in recent years. The main idea behind atomic design is to break down the interface of a web application into smaller, reusable components that can be easily combined to create more complex UIs. ReactJS is a popular JavaScript library that is often used to build UI components, and it is a perfect match for atomic design principles. In this blog post, we will explore atomic design in ReactJS and how it can be used to build reusable and maintainable UI components.

# What is Atomic Design ?

`Atomic Design` is a methodology for creating design systems that can be used to build interfaces. The methodology is based on breaking down the interface into smaller, more manageable components. These components are organized into a hierarchy that starts with the smallest, most basic components and builds up to more complex components. 

# Why we need this ?

The need for some kind of a design system appears when we start to get overwhelmed by the count of components on a project. In projects where there are a hundred or two hundred components, it is not easy to remember everything.


# Structure

The five levels of the atomic design hierarchy are:

 1. `Atoms`: These are the smallest building blocks of a design system. Atoms are the basic elements such as buttons, inputs, and labels.

2. `Molecules`: These are a combination of two or more atoms. They are relatively simple components, such as forms or cards.

3. `Organisms`: These are complex components made up of molecules and atoms. Examples include headers, footers, and navigation menus.

4. `Templates`: These are the page-level templates that bring together organisms and molecules to create a complete page layout.

5. `Pages`: These are the final output of the design system. Pages are the actual content that users see and interact with.

The idea behind atomic design is that each level of the hierarchy should be reusable and modular, making it easier to create new designs and maintain existing ones.


![Folder Structure](https://res.cloudinary.com/dhboldbpa/image/upload/v1680334594/Screenshot_2023-04-01_at_1.05.50_PM_tziini.png)



Atomic Design in ReactJS

---
title: 'Introducing react.dev'
date: '2023-04-03'
tags: ['nodejs', 'react']
image: 'https://res.cloudinary.com/dhboldbpa/image/upload/v1683360513/devamiya/blogs/REACT-NEW-DOC_ghx0aw.png'
---
![React.dev](https://res.cloudinary.com/dhboldbpa/image/upload/v1683360513/devamiya/blogs/REACT-NEW-DOC_ghx0aw.png)


React, one of the most popular JavaScript libraries for building user interfaces, has recently launched a new blog site, `react.dev`. This new blog site is an exciting development for React developers as it offers a wealth of information on React, its ecosystem, and related technologies.

React.dev is the official blog site for React, managed by the React team at Facebook. The site features a clean and modern design that is easy to navigate. It offers a rich collection of blog posts, tutorials, and documentation that cover a wide range of topics related to React.

One of the standout features of react.dev is its in-depth tutorials that cover everything from basic concepts to advanced techniques. These tutorials are written by experts in the field and provide step-by-step instructions for building real-world applications using React. The site also includes a comprehensive documentation section that covers all aspects of React, including its core features, hooks, and the latest updates.

In addition to tutorials and documentation, react.dev also features a series of blog posts that cover a range of topics related to React and its ecosystem. These blog posts are written by members of the React team as well as external contributors, and they provide valuable insights into the latest trends and developments in the React community.


My favorite aspects on it : 

1. The focus on hooks and functional components
2. The guides with many diagrams, illustrations and interactive challenges
3. The emphasis of React as a cross-platform solution, not web-only
4. API pages well separated in references/usage, current/deprecated, client/server
5. The overall consistency of the whole experience

there were controversial aspect as well, specifically regarding the recommendation of a limited selection of frameworks (Next.js, Remix, Gatsby, Expo) for starting a new React project, while not endorsing several others (Vite, Create-React-App, client-side SPA...).

# Conclusion 

**From basic to advanced topics, these docs cover everything you need to learn how to use the best of modern React to create user interfaces**. If you are new to the React world, this documentation will definitely help you a lot with the interactive examples. For experienced React developers, this documentation brings together several important advanced concepts that are sure to help you create better UI components.


Introducing react.dev

---
title: 'The Node.js system'
date: '2023-01-01'
tags: ['nodejs', 'react']
image: 'https://res.cloudinary.com/dhboldbpa/image/upload/v1707676895/devamiya/blogs/NodeJS_hchdkp.png'
---

![nodejs](https://res.cloudinary.com/dhboldbpa/image/upload/v1680894848/devamiya/blogs/NodeJS_lgv54q.png)


When I started learning Node.js, I always wondered, how does it work? How is it inside Node.js? Event loop and Event Queue jargons are digested. But what exactly is going on? Where do those jargons Event Loop and Event Queue come from.To satisfy my curiosity as well to know the answer to my previous question, I went in depth as much as I can and came across some things which I’d like to share with you. In brief, this article is about **Node.js System** — a glimpse of internal workings of Node.

If you are familiar with Node.js, it is a known fact that Node.js is single threaded. If you are from programming/computer science background you know what a thread means. Consider this scenario: traditionally — an I/O request comes to a web server and is assigned to an available thread, and for each concurrent connection there is one thread available. That request is handled on the specific thread until it is fulfilled and the response is sent.

This scenario is a perfect example of **Blocking I/O** because while handling a particular request by a specific thread, there will be some idle time when the operations are being done (such as retrieving a file, opening it, reading it, etc.). A single thread consumes memory. A longer running thread for each connection and then sitting idly for some amount of time is not considered an efficient way in the [world of Node.js](https://medium.com/@amanhimself/the-node-way-philosophy-of-a-platform-f9738ed5f9d2).

## Enter Reactor Pattern- Heart of Node.js

Reactor Pattern is an idea of non-blocking I/O operations in Node.js. This pattern provides a handler(in case of Node.js, a callback function) that is associated with each I/O operation. When an I/O request is generated, it is submitted to a demultiplexer.

This demultiplexer is a notification interface that is used to handle concurrency in non-blocking I/O mode and collects every request in form of an event and queues each event in a queue. Thus, the demultiplexer provides the Event Queue, which we often hear. When a request is collected by the demultiplexer, it returns the control back to the system and does not blocks the I/O. At the same time, there is an Event Loop which iterates over the items in the Event Queue. Every event has a callback function associated with it, and that callback function is invoked when the Event Loop iterates.

The callback function further mostly have other callbacks associated within representing some asynchronous operations. These operations are inserted in the Event Queue by the demultiplexer and are ready to be processed once the Event Loop iterates over them. That is why calls to other operations must be asynchronous.

When all the items in the Event Queue are processed and there are no pending operations left, Node.js terminates the application automatically.

## Building Blocks of Node.js

- Reactor Pattern
- [libuv](http://docs.libuv.org/en/v1.x/)
- A set of Bindings
- Chrome’s V8
- Core JS Library

## libuv

Pronounced as “lib u v”, is library written in C language to make Node.js compatible with every OS and provide the non-blocking I/O behaviour. libuv is the low-level engine that implements reactor pattern thus providing an API for creating the Event Loop, managing an Event Queue and running asynchronous I/O operations. It is built specifically to provide a unified experience over different Operating Systems.

## Need for libuv?

Each operating system has its own interface for the demultiplexer. Such as Kqueue for Mac OS X, IOCP for Windows and Epoll for Linux. Different multiplexers will behave differently when handling an I/O request. And then, each I/O operation can differ in its behaviour within the same operating system. This creates an inconsistency and to overcome this inconsistency libuv is the solution.

I am not going to talk about internal workings of libuv here, not an expert on that, myself. For more info on libuv [check their docs](http://docs.libuv.org/) or this [slide](http://www.slideshare.net/saghul/libuv-nodejs-and-everything-in-between) by Saúl Ibarra Corretgé [(@saghul)](https://twitter.com/saghul) is a good start.

[Also, libuv is independently maintained by awesome developers.](https://github.com/libuv/libuv)

## Set of Bindings

These set of bindings are responsible for wrapping and exposing libuv and other low-level functionality to JavaScript.

## V8

It’s a runtime engine[ developed by Google for Chrome browser for JavaScript](https://developers.google.com/v8/). It is the reason Node.js is fast and efficient.

## Core Library

This is a JavaScript library that implements high-level Node.js API (a.k.a. node-core).

The image borrowed above clarifies and represents a complete Node.js System. I hope this article has made things more clear as it did to me.



