标签：#React

This is part of my Building Fluentic Style series, where I’m writing down the design decisions, tradeoffs, and small surprises from building Fluentic Style . It is one thing to make a styling library feel good in a client-side app. It is another thing to make it feel good in Next.js App Router. In a simple SPA-style development setup, most of the styling loop lives in one place: component renders in the browser Fluentic style chain resolves atomic CSS rule is inserted DevTools can inspect the generated rule sourcemap points back to authored code That is already a lot of work. But at least the browser is the main place where the style is produced and consumed. Next.js App Router changes the shape of the problem. Now the page can involve: server rendering React Server Components client components streamed HTML hydration client-side navigation HMR Webpack or Turbopack development sourcemaps production extraction So the hard part is not just “can Fluentic run in Next.js?” The hard part is: Can Fluentic keep the same CSS debugging experience when styles cross the server/client boundary? That is what this post is about. Docs for the Next.js integration are here: Next.js Integration DevTools And Sourcemaps Runtime And Dev Debug Without Getting Lost The Goal Was Not A Special Next.js API I did not want Fluentic to have one mental model for client apps and another one for Next.js. This should still be normal Fluentic: const card = style ({ padding : 16 , borderRadius : 12 , }). hover ({ boxShadow : ' 0 12px 30px rgb(15 23 42 / 0.16) ' , }); export function Card () { return < section css = { card } > Hello </ section >; } And this should still be normal Fluentic too: const buttonStyles = { root : style . slot ({ display : ' inline-flex ' , border : 0 , }), label : style . slot ({ fontWeight : 700 , }), }; const danger = style . scope ([ buttonStyles . root ({ backgroundColor : ' #dc2626 ' , }), buttonStyles . label ({ color : ' #ffffff ' , }), ]); The Next.js integration shou

There are exactly three sensible ways to get an SVG icon into a React codebase: paste it inline as a component, import the file through a build transform like SVGR, or reference it from a sprite. Most projects need only the first. This guide walks through the inline approach with Next.js and Tailwind specifics, and points to the deeper guides where a topic deserves its own article. Option 1: an inline JSX component Take a real icon from the catalog, convert the SVG attributes to JSX casing, and you have a dependency-free component. This is Lucide's search icon, exactly as it ships in the Lucide set , wrapped for React: export function SearchIcon ( props ) { return ( < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" strokeLinecap = "round" strokeLinejoin = "round" strokeWidth = { 2 } aria-hidden = "true" { ... props } > < path d = "m21 21l-4.34-4.34" /> < circle cx = "11" cy = "11" r = "8" /> </ svg > ); } The JSX gotchas are all attribute casing: stroke-width becomes strokeWidth , stroke-linecap becomes strokeLinecap , and class becomes className . Icon pages on this site do the conversion for you: every icon offers React, Vue, Svelte, and Solid snippets next to the raw SVG, so you can copy the JSX form directly. If you have a folder of SVG files instead, the free SVG to component converter batch-converts them in the browser. Prefer importing .svg files over pasting? That is the SVGR route, covered step by step in our React with Vite and SVGR guide . Next.js: server components by default An icon component like the one above has no state, no effects, and no event handlers, which makes it a perfect React Server Component. In the Next.js App Router it renders to static markup on the server and adds nothing to the client bundle: import { SearchIcon } from " @/components/icons " ; export default function DocsHeader () { return ( < label className = "flex items-center gap-2" > < SearchIcon className = "h-5 w-5 text-zinc

Welcome back to the React Mastery Series ! In the previous article, we explored useEffect Hook and learned how React handles side effects such as: API calls Timers Event listeners WebSocket connections Cleanup operations Today, we will explore two more powerful React Hooks: useRef and useMemo These Hooks are frequently used in production applications to: Access DOM elements Store values without triggering re-renders Optimize expensive calculations Improve application performance Understanding useRef Hook useRef is a React Hook that allows us to store a value that persists across renders without causing the component to re-render. Syntax: const reference = useRef ( initialValue ); The returned object looks like: { current : initialValue } The value is accessed using: reference . current useRef vs useState A common question: Why do we need useRef when we already have useState? The difference: useState useRef Updates trigger re-render Updates do not trigger re-render Used for UI data Used for storing values React tracks changes React does not track changes Example: const [ count , setCount ] = useState ( 0 ); Updating: setCount ( count + 1 ); causes: State Update | ↓ Component Re-render With useRef: const count = useRef ( 0 ); Updating: count . current ++ ; does: Value Updated | ↓ No Re-render Using useRef to Access DOM Elements One of the most common use cases of useRef is accessing DOM elements directly. Example: import { useRef } from " react " ; function SearchBox () { const inputRef = useRef (); function focusInput () { inputRef . current . focus (); } return ( < div > < input ref = { inputRef } /> < button onClick = { focusInput } > Focus Input </ button > </ div > ); } Flow: Button Click | ↓ focusInput() | ↓ inputRef.current | ↓ Input DOM Element | ↓ focus() Real-World Example: Login Page Imagine a banking login page. When the page loads: Open Login Page | ↓ Username Field Automatically Focused Implementation: useEffect (() => { usernameRef . current . focus ();

Introduction React is fast, but that doesn't mean every React application is. One of the most common performance problems—especially in growing applications—is unnecessary re-rendering . A small project with a few components may feel instant, but as your application grows, unnecessary renders can cause sluggish interfaces, input lag, excessive CPU usage, and poor user experience. The good news is that unnecessary re-renders are usually preventable once you understand why React re-renders components . In this article, we'll explore how React rendering works, learn how to identify performance bottlenecks, and apply practical optimization techniques such as React.memo , useMemo , useCallback , better state management, and component architecture. Whether you're building dashboards, e-commerce stores, SaaS products, or portfolio websites, these techniques will help you write more efficient React applications. Table of Contents Understanding React Rendering What Causes Unnecessary Re-renders? Identifying Performance Problems Optimizing with React.memo Optimizing Expensive Calculations with useMemo Preventing Function Recreation with useCallback State Colocation Splitting Components Optimizing Context Rendering Large Lists Using the React Profiler Best Practices Common Mistakes Performance Tips Security Considerations Accessibility Considerations SEO Considerations Real Project Example Conclusion Discussion Background Before optimizing anything, it's important to understand what React actually does. A render simply means React executes your component function to determine what the UI should look like. That does not always mean the browser updates the DOM . React compares the new Virtual DOM with the previous one and only updates the parts that actually changed. However, if many components re-render unnecessarily, React still has to: Execute component functions Recreate objects Recreate arrays Recreate event handlers Compare Virtual DOM trees All of that work adds up. Step

Welcome back to the React Mastery Series ! In the previous article, we explored React Rendering and Component Lifecycle . We learned: What causes a component to re-render How React reconciliation works The difference between rendering and DOM updates How lifecycle behavior is handled using Hooks Now let's learn how React applications respond to user interactions. Every modern application depends on events: Clicking buttons Typing into forms Selecting options Submitting data Dragging and dropping elements Keyboard shortcuts React provides a powerful event system to handle all these interactions. What is Event Handling? Event handling is the process of responding to user actions in an application. Examples: User Action | ↓ Event Triggered | ↓ Event Handler Executes | ↓ State Updated | ↓ UI Re-renders Example: A user clicks the "Transfer Money" button: Click Button | ↓ Handle Click Event | ↓ Validate Data | ↓ Call API | ↓ Update UI Events in Traditional JavaScript vs React Traditional JavaScript const button = document . getElementById ( " save " ); button . addEventListener ( " click " , saveData ); You manually: Find the DOM element Attach event listeners Manage updates React React attaches events directly inside JSX. < button onClick = { saveData } > Save </ button > React manages the event registration internally. React Event Syntax React events use: camelCase naming JSX expressions Function references HTML: <button onclick= "save()" > Save </button> React: < button onClick = { save } > Save </ button > Notice: onclick ❌ onClick ✅ Handling Click Events Example: function Button () { function handleClick () { console . log ( " Button clicked " ); } return ( < button onClick = { handleClick } > Click Me </ button > ); } When the user clicks: Click | ↓ handleClick() | ↓ Execute Logic Passing Functions vs Calling Functions A very common beginner mistake. Incorrect < button onClick = { handleClick () } > Save </ button > This executes immediately during rendering. Correc

Welcome back to the React Mastery Series ! In the previous article, we learned about State in React and how state changes make our applications interactive. Today, we will understand one of the most important concepts for every React developer: How does React render components? Many developers know how to write React code, but understanding when and why React renders is what separates a beginner from an advanced React developer. A strong understanding of rendering helps you: Build faster applications Avoid unnecessary re-renders Debug performance issues Use optimization techniques correctly Let's dive in. What is Rendering in React? Rendering is the process where React: Takes your component code Creates a representation of the UI Updates the browser DOM when necessary A simple way to visualize it: Component Code | ↓ React creates Element Tree | ↓ Reconciliation Process | ↓ Browser DOM Update Rendering does not always mean updating the browser DOM . React may render a component, compare the result, and decide that no DOM changes are required. Initial Render When a React application starts, the first rendering process happens. Example: function App () { return ( < h1 > Hello React </ h1 > ); } The flow: index.html | ↓ main.tsx | ↓ <App /> | ↓ React creates UI | ↓ Browser displays content This is called the initial render . What Causes a Re-render? A component re-renders when: 1. State Changes Example: const [ count , setCount ] = useState ( 0 ); setCount ( 1 ); When state changes: State Update | ↓ Component Re-renders | ↓ UI Updates 2. Props Change Example: < User name = "Siva" /> If the parent changes: < User name = "John" /> The child component receives new props and re-renders. 3. Parent Component Re-renders When a parent component renders, React also re-renders its children by default. Example: function Parent () { return ( <> < Child /> </> ); } If Parent updates, Child also gets rendered again. Later, we will learn how React.memo can prevent unnecessary child re

Welcome back to the React Mastery Series . In Day 1, we introduced the roadmap of this series and discussed what we will cover — from React fundamentals to enterprise-level architecture. Today, we will start with the most important question: What is React, and why was it created? What is React? React is an open-source JavaScript library for building user interfaces , especially single-page applications (SPAs). It was created by engineers at Meta (Facebook) and was initially released in 2013. React focuses on one core idea: Build complex user interfaces by breaking them into small, reusable components. Instead of creating a complete application as one large piece of code, React encourages developers to divide the UI into independent and manageable components. Example: A banking application dashboard can be divided into: Dashboard │ ├── Header │ ├── AccountSummary │ ├── TransactionList │ ├── TransferMoneyForm │ └── Notifications Each part can be developed, tested, and maintained independently. Why Was React Created? Before React, developers commonly used traditional JavaScript and libraries like jQuery to update web pages. For small applications, this approach worked well. But as applications became larger, several challenges appeared. 1. Managing Complex UI Updates Imagine a banking application where: Account balance changes Transactions are updated Notifications appear User profile information changes With traditional DOM manipulation, developers had to manually find elements and update them. Example: document . getElementById ( " balance " ). innerHTML = " $5000 " ; As the application grew, managing thousands of DOM updates became difficult. React introduced a different approach: Describe what the UI should look like, and React manages the updates. The Problem With Direct DOM Manipulation The browser provides the Document Object Model (DOM), which represents the HTML structure. Example: HTML | DOM Tree | Browser Rendering When we update the DOM frequently: Browser

Hello Dev Community! 👋 It is officially Day 166 of my full-stack engineering track! Today, I designed and implemented the active messaging canvas component ( ChatContainer.jsx ) for my messaging app, QuickChat ! 💬📷⚡ Focusing on dynamic chat alignment, text bubble rendering, image attachments, and input controls was today's core milestone. Here is how I structured the component. 🛠️ Technical Breakdown: ChatContainer & Attachment Pipeline As captured in my UI and VS Code setup ( Screenshots ): 1. Dynamic Alignment & Sender Detection Conditioned flexbox directions based on authentication state so sender messages lock to the right while recipient messages render on the left: javascript

React Hooks have revolutionized how we write React components, offering a powerful way to manage state and side effects directly within functional components. This paradigm shift has led to cleaner, more readable, and often more maintainable codebases by moving away from the complexities of class components. Why the Shift to Hooks? Before Hooks, managing stateful logic and side effects often meant relying on class components. This approach could introduce several challenges: understanding this binding, managing complex lifecycle methods across different phases of a component's life, and dealing with "wrapper hell" – deeply nested component structures resulting from Higher-Order Components (HOCs) and render props when trying to reuse logic. Hooks solve these problems by allowing developers to "hook into" React features directly from functional components. This makes logic reuse more straightforward and components inherently easier to understand and test. Essential React Hooks at a Glance Let's explore the core Hooks that form the backbone of modern React development: 1. useState : Adding State to Functional Components The useState Hook is the most fundamental. It allows you to declare state variables in functional components. Instead of dealing with this.state and a separate this.setState() method, useState provides a direct variable for your state and a dedicated function to update it. This simplifies local component state management significantly, making it more intuitive and less prone to errors. 2. useEffect : Handling Side Effects The useEffect Hook is designed for performing side effects in functional components. Side effects encompass operations like data fetching from an API, setting up event listeners or subscriptions, or directly manipulating the DOM. This Hook consolidates logic that was previously spread across multiple lifecycle methods like componentDidMount , componentDidUpdate , and componentWillUnmount in class components. A key aspect of useEffect i

Project Overview The project is a React-based web application that fetches data from a REST API and displays it in a dynamic dashboard. Users can navigate between pages, search data, and interact with multiple components that rely on asynchronous API calls. While testing the application, I noticed that navigating away from a page during an active API request occasionally caused React warnings and unnecessary memory usage. This issue affected the application's stability and could lead to performance degradation over time. The problem was caused by an asynchronous operation continuing even after the component had been unmounted. For example, an API request initiated inside useEffect would still complete after the user navigated away, attempting to update the component's state. React would warn that a state update was attempted on an unmounted component. Before useEffect(() => { fetch("/api/users") .then((res) => res.json()) .then((data) => setUsers(data)); }, []); If the component unmounted before the request finished, the callback still attempted to update the state. After I solved the issue by using the AbortController API to cancel the request during cleanup. useEffect(() => { const controller = new AbortController(); fetch("/api/users", { signal: controller.signal, }) .then((res) => res.json()) .then((data) => setUsers(data)) .catch((err) => { if (err.name !== "AbortError") { console.error(err); } }); return () => controller.abort(); }, []); This ensures that pending requests are cancelled when the component unmounts, preventing unnecessary state updates and avoiding memory leaks. Code Prince3963 (Patel Prince) / Repositories · GitHub Prince3963 has 48 repositories available. Follow their code on GitHub. github.com My Improvements This fix focused on improving both performance and application reliability. What I improved Prevented memory leaks caused by unfinished asynchronous requests. Added proper cleanup logic inside useEffect. Eliminated React warnings about u

This is an English translation of my original article on Qiita . An Android build failed in an Expo SDK 54 app. The project still used Expo SDK 54, but several Expo packages had been upgraded to versions intended for SDK 55. TypeScript checks passed, and the development server ran normally. I did not catch the mismatch until EAS Build reached the native build step. What the dependency list looked like The relevant part of package.json looked like this: { "dependencies" : { "expo" : "~54.0.33" , "expo-apple-authentication" : "~55.0.13" , "expo-dev-client" : "^55.0.27" , "expo-image-picker" : "^55.0.18" , "expo-linking" : "^55.0.12" , "expo-notifications" : "^55.0.19" , "expo-splash-screen" : "^55.0.18" } } The expo package was still on version 54, while several related packages were on version 55. This happened because those packages had been installed individually using their latest versions. The package version does not always match the Expo SDK number. For example, Expo SDK 54 uses expo-notifications 0.32 and expo-splash-screen 31. Looking only at major version numbers is not enough to determine SDK compatibility. Start with expo install --check Expo CLI can compare the installed packages with the versions expected by the current SDK: npx expo install --check It can also return the result as JSON: npx expo install --check --json This is more reliable than trying to infer compatibility from package.json manually. Expo CLI can fix the versions automatically: npx expo install --fix npx expo-doctor I wanted to review each change, so I used the reported versions to update package.json myself. The versions I changed These were the main corrections: - "expo-apple-authentication": "~55.0.13" + "expo-apple-authentication": "~8.0.8" - "expo-dev-client": "^55.0.27" + "expo-dev-client": "~6.0.21" - "expo-image-picker": "^55.0.18" + "expo-image-picker": "~17.0.11" - "expo-linking": "^55.0.12" + "expo-linking": "~8.0.12" - "expo-notifications": "^55.0.19" + "expo-notifications"

JDK 24 removed the monitor-related carrier-thread pinning that stalled Netflix and similar teams on Java 21. What has replaced it on JDK 25 LTS is downstream-resource saturation: The bottleneck moved and now demands explicit bounding in application code. This article maps the failure modes that surface after virtual-thread adoption and gives a practical sequence backed by a public benchmark. By Sandeep Bharadwaj

JavaScript vs React: Understanding How They Work Together If you're starting web development, you've probably heard about JavaScript and React. Many beginners think they are competitors, but they actually work together. Let's understand them in simple terms. What is JavaScript? JavaScript is a programming language used to make websites interactive. Without JavaScript, a website would mostly be static. JavaScript allows you to: Handle button clicks Validate forms Create animations Fetch data from APIs Update content without refreshing the page Example: document . getElementById ( " btn " ). addEventListener ( " click " , () => { alert ( " Hello World! " ); }); JavaScript is the foundation of modern web development. What is React? React is a JavaScript library created by Meta Platforms for building user interfaces. Instead of manipulating the webpage manually, React helps developers create reusable UI components. Example: function Welcome () { return < h1 > Hello World! </ h1 >; } React uses JavaScript to create dynamic and interactive user interfaces more efficiently. Simple Analogy Think of building a house: JavaScript = The tools and materials (bricks, cement, wood) React = A construction framework that helps you build the house faster and more efficiently You need JavaScript to use React. Key Differences Feature JavaScript React Type Programming Language JavaScript Library Purpose Adds logic and interactivity Builds UI components Learning Curve Easier to start Requires JavaScript knowledge Usage Works everywhere Used mainly for frontend applications Created By Netscape Meta (Facebook) DOM Updates Manual Virtual DOM for optimized updates Why React Became Popular As applications grew larger, managing UI with plain JavaScript became difficult. React solves this by providing: Component-based architecture Reusable code Better state management Faster UI updates with Virtual DOM Large ecosystem and community support This makes React ideal for building modern applications

Every year, thousands of people struggle to find blood donors during emergencies. I wanted to build something that could simplify that process while improving my full-stack development skills. So I built a Blood Donation Management System using the MERN Stack. The goal was simple: create a platform where donors, recipients, and volunteers can connect efficiently through a modern web application. In this article, I'll share the architecture, key features, and the lessons I learned while building it. Tech Stack : Frontend React.js React Router Tailwind CSS Axios Backend Node.js Express.js Database MongoDB Mongoose Authentication JWT bcrypt Deployment Vercel (Frontend) Render (Backend) The Problem Finding blood donors during emergencies is often difficult because information is scattered across social media and messaging apps. I wanted to build a centralized platform where users could: Register as blood donors Search donors by blood group and location Request blood Manage donation information Keep donor data organized 🏗️Project Architecture Client (React) │ REST API │ Node.js + Express │ ├── Authentication ├── Donor Management ├── Blood Requests ├── User Dashboard └── Admin Panel │ MongoDB Keeping the frontend and backend separated made the project easier to maintain and scale. Key Features Secure user authentication Role-based dashboard Blood donor registration Search donors by blood group Blood request management Responsive UI Protected routes RESTful API Project Structure client/ ├── components/ ├── pages/ ├── hooks/ ├── layouts/ └── routes/ server/ ├── controllers/ ├── middleware/ ├── models/ ├── routes/ ├── utils/ └── config/ Organizing the project into separate folders helped keep the codebase clean and easier to extend. Authentication Flow Authentication was implemented using JWT and bcrypt. The basic flow looks like this: Register ↓ Password Hashing ↓ MongoDB ↓ Login ↓ JWT Token ↓ Protected Routes This keeps user data secure while allowing authenticated access

A portfolio for thoughtful, reliable learning technology I am a senior full-stack software engineer with 20 years of experience building scalable web applications, primarily for learning and education. I recently published a focused portfolio to share the products, technologies, and engineering work behind that experience. Diogo Bastos | Senior Full-Stack Software Engineer Professional portfolio of Diogo Bastos, a senior full-stack software engineer. diogobastos.pages.dev The site is intentionally straightforward: a clear overview of my background, selected professional work, personal projects, certifications, and a public résumé. What you will find Learning technology work : projects across Pearson eDynamic Learning, HMH, and Neovation Learning Solutions. Full-stack engineering : React and TypeScript on the frontend; Node.js, Java, APIs, SQL, and cloud delivery practices on the backend. Recent personal projects : experiments in Python, FastAPI, React, AWS, and Java/Spring Boot. A concise, accessible build : the portfolio is a static site built with Astro, with attention to responsive design and usability. I care about turning complex product needs into dependable experiences for the people who use them. If you work in software engineering, learning technology, or product development, I would be glad to connect. Explore the portfolio: diogobastos.pages.dev Thanks for stopping by.

Beginner's Guide: Connect React with Supabase 🚀 If you already know basic React (components, useState , useEffect ), this guide will show you how to connect your React app to Supabase — an open-source Firebase alternative — and build a simple To-Do app with full CRUD (Create, Read, Update, Delete). Let's go step by step. No prior Supabase knowledge needed. What is Supabase? Supabase gives you a Postgres database , authentication , and instant APIs — without writing any backend code. Think of it as a backend-as-a-service. For this guide, we'll just use the database + auto-generated API part. Step 1: Create a Supabase Project Go to supabase.com and sign up (GitHub login is fastest). Click New Project . Fill in: Name : todo-app (anything you like) Database Password : save this somewhere safe Region : pick the closest one to you Click Create new project and wait ~1-2 minutes while Supabase sets everything up. Step 2: Create the todos Table In your Supabase project dashboard, go to the Table Editor (left sidebar). Click New Table . Name it todos . Add these columns (in addition to the default id and created_at ): Column Name Type Default task text — is_complete bool false Click Save . 💡 Tip: You can also do this via the SQL Editor by running: create table todos ( id bigint generated by default as identity primary key , task text not null , is_complete boolean default false , created_at timestamp with time zone default now () ); Turn off Row Level Security (for learning purposes only) Go to Authentication > Policies (or Table Editor > todos > RLS), and disable RLS for now so your students can read/write freely without setting up auth. ⚠️ Important for your session : Tell your juniors this is only for a demo/learning project. In a real production app, RLS should always be enabled with proper policies. Step 3: Get Your API Keys Go to Project Settings > API . Copy two things: Project URL (looks like https://xxxxx.supabase.co ) anon public key (a long string) You'll need both

Sharing a holiday home with family or friends is great until the admin starts. Who’s in next weekend? Did someone already claim Easter? Who was meant to book the cleaner? Where’s the WiFi password / insurance cert / “how to winterize the outdoor taps” note? For most groups this lives in five group chats, a half-maintained Google Calendar, and a Drive folder nobody trusts. I kept running into that pattern — so I built Shared Holiday Homes : software for families, friends, and co-owners who already share a place and need less chaos, not another generic calendar. The problem isn’t “finding a free date” Generic calendars are fine at showing blocks of time. Shared holiday homes need more than that: Double-booking protection that isn’t “hope nobody overwrites the event” Rules for peak weeks, min/max stays, booking windows, and optional approval Fairness visibility — who actually used the place this year Named jobs with owners and due dates (cleaning, maintenance, “fix the pump”) A home for house knowledge — docs, arrival notes, appliance quirks, emergency info If your group is small and high-trust, Google Calendar can work. Once you’re coordinating multiple households, peak seasons, and maintenance, the “calendar + WhatsApp” stack starts creating the arguments it’s supposed to prevent. I wrote a longer comparison here if you want the practical breakdown: Shared Holiday Homes vs Google Calendar What I built (and what I didn’t) The product is intentionally narrow. Private co-owner groups don’t need a full property-management system or a fractional-ownership marketplace. They need an operating layer for one shared house. In scope: One shared booking calendar Booking rules / seasonal rotations Shared task list Document library House guides (the handbook people can actually find) Out of scope on purpose: Selling property shares Matching investors Full bookkeeping / STR channel management That boundary mattered. Every time I was tempted to add “just one more admin feature,” I a

Working with databases is a big part of backend development, and choosing the right ORM can save you hours of work. Here are five of the most popular Node.js ORMs, along with their strengths and weaknesses, to help you pick the right one for your next project. 1. Prisma A modern, type-safe ORM built for TypeScript with an excellent developer experience. Pros • Great TypeScript support • Easy migrations • Excellent DX • Large community Cons • Less flexible for advanced SQL • Requires client generation Drizzle ORM A lightweight, SQL-first ORM focused on performance and simplicity. Pros • Very fast • Full TypeScript support • SQL-first approach • Lightweight Cons • Smaller ecosystem • Better if you know SQL 3. TypeORM A mature ORM with broad database support, widely used in enterprise and legacy projects. Pros • Rich feature set • Supports many databases • Strong relationship support Cons • More complex API • Slower development than newer ORMs 4. MikroORM A powerful TypeScript ORM designed for large and complex applications. Pros • Excellent relationship handling • High flexibility • Strong TypeScript integration Cons • Steeper learning curve • Smaller community 5. Sequelize One of the oldest and most established ORMs in the Node.js ecosystem. Pros • Battle-tested • Supports many databases • Large legacy adoption Cons • TypeScript support is weaker • Feels outdated compared to modern ORMs Which ORM do you use the most? 👇

100 Days of Solana, Day 100 Where I started I'd built REST APIs for years but had never touched a blockchain, or written a line of Rust. The curiosity how blockchain works, started my curiosity. What I expected I came in with a Web2 instinct: tests exist to prove your code does what it's supposed to do. Write the function, write a test that calls it, watch it pass, move on. A "failing test" was something you fixed, not something you shipped on purpose. What changed my understanding The moment this cracked open was building the capstone: a small Anchor program called proof-of-ship that lets a wallet permanently record, on chain, that it shipped something. The rule is simple — one ship record per wallet, forever. The rule lives entirely in the account's seeds: seeds = [ b"ship" , builder .key () .as_ref ()], bump Each wallet's record lives at one deterministic address. Try to create a second one, and init refuses, because an account already exists there. I wrote two tests. The first proved the happy path: call ship() , fetch the record, confirm the name and builder match. The second test is the one that changed how I think about testing: it ( " only lets each wallet ship once " , async () => { let rejected = false ; try { await program . methods . ship ( " Second try " , " This should never land " ). rpc (); } catch ( _err ) { rejected = true ; } assert . isTrue ( rejected , " second ship should have been rejected " ); }); This test isn't checking for a bug. It's checking that a rule holds. There's no function in my program called preventDuplicateShip() . There's no if statement rejecting the second attempt. The rule "one ship per wallet" isn't enforced by logic I wrote — it's enforced by the Solana runtime itself, because the PDA's address already has data in it. My job wasn't to write the rejection. My job was to prove the rejection actually happens. What I understand now On Web2 systems I controlled the whole stack, so "does it work" mostly meant "does the happy pa

We run a React app and an Angular admin panel at work. Same company, same brand, and on paper the same design. On screen it was a different story. The React button had a 6px radius; the Angular one had 4px. The focus rings were two slightly different blues. Nobody noticed until somebody did. And every time design changed a token, someone got to hand-port it into two codebases. Twice the work, and it still drifted. So I went looking for something that treated both frameworks as equals. The React kits don't speak Angular. The Angular ones don't share a look with anything on the React side. Nothing let me define the design once and have it show up, the same, in both. So I built bpdm/ui . One rule: the look lives in tokens I gave myself one hard rule: nothing about how a component looks is allowed to live inside the React or Angular code. Colour, spacing, radius, the easing on transitions, all of it sits in @bpdm/tokens as plain CSS variables, and both framework packages just read from there. The component owns structure, behaviour, and the accessibility plumbing. The look comes from the tokens. @import "tailwindcss" ; @import "@bpdm/tokens/tokens.css" ; Change one token and both frameworks move together. There's no "now go sync the Angular theme" step, because there's only one theme to sync. Four ship in the box (two light, two dark). Override the variables and you've re-skinned all of it. The same component, twice React: import { Button , Badge } from " @bpdm/ui " ; export function Example () { return ( < Button variant = "primary" > Get started < Badge appearance = "soft" > New </ Badge > </ Button > ); } Angular: import { Component } from " @angular/core " ; import { BpdmButton } from " @bpdm/ng " ; @ Component ({ selector : " app-root " , imports : [ BpdmButton ], template : `<button bpdmButton>Get started</button>` , }) export class App {} Same padding, same radius, same focus ring. The accessibility isn't literally shared code: Radix does that work on the React s