标签：#React

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

Remix 3 is a full-stack web framework that moves away from React, focusing on web platform primitives. It integrates routes, request handlers, and UI components into a single structure, utilizing a forked Preact for the frontend. Unlike previous versions, it emphasizes server ownership of the request lifecycle. Migration from Remix 2 is not straightforward, as it requires changes to existing apps. By Daniel Curtis

Performance optimization in React is often surrounded by myths. Developers routinely wrap every single component in React.memo , wrap every function in useCallback , and wonder why their application is still sluggish or memory-heavy. Premature optimization can actually degrade app performance and clutter your codebase. To build fast React applications, you need techniques that address actual bottlenecks: unnecessary re-renders, unoptimized state placement, oversized bundles, and main-thread blocking. Here are five practical React performance optimization techniques that deliver measurable results in production. 1. Push State Down (Fix Rerender Cascades) Before reaching for useMemo or React.memo , evaluate your state placement . When state lives too high up in the component tree, every state update forces the entire sub-tree to re-render. ❌ The Anti-Pattern: State at the Root // Changing `color` forces <HeavyChartComponent/> and <ComplexTable/> to re-render! export default function App () { const [ color , setColor ] = useState ( ' #6366f1 ' ); return ( < div > < input type = "color" value = { color } onChange = { ( e ) => setColor ( e . target . value ) } /> < p style = { { color } } > Sample Text </ p > < HeavyChartComponent /> < ComplexTable /> </ div > ); } ✅ The Fix: Component Isolation Move the isolated state and its control into its own dedicated child component: Javascript function ColorPicker () { const [ color , setColor ] = useState ( ' #6366f1 ' ); return ( < div > < input type = "color" value = { color } onChange = { ( e ) => setColor ( e . target . value ) } /> < p style = { { color } } > Sample Text </ p > </ div > ); } export default function App () { return ( < div > < ColorPicker /> { /* These components are no longer impacted by color state changes */ } < HeavyChartComponent /> < ComplexTable /> </ div > ); } 2. Pass Components as Children (Component Composition) Sometimes state must remain in a parent component, but you don't want child components

I have been building VoxelDraft , a voxel editor that runs entirely in the browser without an account or installation. The editor supports block painting, layers, keyframe animation, GIF recording, local projects, and exports for OBJ/MTL, GLB, VOX, Minecraft Schematic, and Roblox RBXL. This post covers the architecture choices that kept those features manageable. Keep edit data serializable The editable model is an array of plain voxel records rather than a collection of Three.js objects: type VoxelData = { position : [ number , number , number ] color : string layerId ?: string } That decision makes JSON backups, local persistence, undo/redo snapshots, sharing, and format conversion much simpler. Three.js objects are derived render state, not the source of truth. Render repeated cubes with InstancedMesh Creating one mesh and one React component per cube becomes expensive as a model grows. VoxelDraft uses THREE.InstancedMesh where geometry and material can be shared. Each voxel contributes a transform matrix. Pointer intersections return the instanced mesh and instance ID, which can be mapped back to the editable voxel record. There are tradeoffs. Per-voxel colors need instance colors or grouping by material, and changing a single block still requires carefully updating the instance buffers. The reduction in draw calls is worth that complexity. Make exporters independent from UI The format exporters accept voxel records and produce a Blob . The UI is only responsible for validation and triggering a download. const blob = exportToVOX ( voxels ) const url = URL . createObjectURL ( blob ) VOX, Minecraft Schematic, and RBXL are generated directly. For GLB, the app builds a temporary Three.js scene and sends it to GLTFExporter from three-stdlib . Keeping binary generation separate from React event handlers makes exporters easier to test and reuse. Move GIF encoding off the main thread VoxelDraft records both animation output and modeling timelapses. GIF encoding can easi

Building a modern Customer Relationship Management (CRM) platform requires more than just displaying raw database records. Users expect interactive analytics, clear data visualization, responsive layouts, and lightning-fast UI updates . In this guide, we'll walk through architecting a sleek, responsive CRM analytics dashboard using React , Tailwind CSS , and Recharts . 1. Dashboard Architecture & Component Hierarchy To keep our CRM modular and easy to maintain, we break down the UI into specialized components: src/ ├── components/ │ ├── layout/ │ │ ├── Sidebar.jsx │ │ └── Header.jsx │ ├── dashboard/ │ │ ├── MetricCard.jsx │ │ ├── RevenueChart.jsx │ │ └── RecentDealsTable.jsx └── pages/ └── Dashboard.jsx 2. Key Performance Metric Cards KPI cards sit at the top of the dashboard to give team leaders instant insight into active pipeline value, customer acquisition, and conversion rates. Here is a clean, reusable MetricCard component built with Tailwind CSS: import React from ' react ' ; import { TrendingUp , TrendingDown } from ' lucide-react ' ; export const MetricCard = ({ title , value , change , isPositive , icon : Icon }) => { return ( < div className = "bg-white dark:bg-slate-900 p-6 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm transition-all hover:shadow-md" > < div className = "flex items-center justify-between" > < span className = "text-sm font-medium text-slate-500 dark:text-slate-400" > { title } </ span > < div className = "p-2.5 rounded-xl bg-indigo-50 text-indigo-600 dark:bg-indigo-950/50 dark:text-indigo-400" > < Icon className = "w-5 h-5" /> </ div > </ div > < div className = "mt-4 flex items-baseline justify-between" > < h3 className = "text-2xl font-bold text-slate-900 dark:text-white" > { value } </ h3 > < span className = { `inline-flex items-center text-xs font-semibold px-2 py-0.5 rounded-full ${ isPositive ? ' bg-emerald-50 text-emerald-600 dark:bg-emerald-950/50 dark:text-emerald-400 ' : ' bg-rose-50 text-rose-600 dark:bg

Every form I ever shipped before React 19 needed the same three pieces of state, and I wired them up...

I used to juggle ESLint and Prettier every day. Two tools. Multiple config files. Plugin conflicts. Slow checks. And that constant feeling that something was always fighting something else. Then I found Biome . Biome is a single, Rust-powered tool that does both formatting and linting. It replaces the classic ESLint + Prettier combo with one binary and one simple config. Why it feels different It’s extremely fast. According to the official benchmark, Biome formats ~35x faster than Prettier when processing 171,127 lines of code across 2,104 files (on an Intel Core i7 1270P). In real projects, the difference is impossible to ignore — checks that used to take seconds now finish almost instantly. One tool, one config. No more keeping a linter and a formatter in sync. Biome uses the same parser for both jobs, so they never disagree. High compatibility, clear feedback. The formatter is about 97% compatible with Prettier. The linter comes with hundreds of solid rules inspired by ESLint and TypeScript ESLint. And when something is wrong, the error messages actually tell you where the problem is and how to fix it. It just works. You can format, lint, and organize imports in a single command. It supports JavaScript, TypeScript, JSX, JSON, CSS, HTML, GraphQL, and more. Companies like Vercel, Cloudflare, Discord, Microsoft, and Google are already using it in production. That says something. I’m not saying you must drop everything tomorrow. But if you’re tired of slow tooling and config complexity, Biome is worth a serious look. Have you tried it yet?

An ecosystem whose job is to full-fill our dream of opening and collecting pokemon cards, which we all had in our childhood. Instead of just clicking a button to reveal static images, I wanted to recreate the whole experience of getting , collecting and showing off your pokemon cards , i even added live card auctions and card shows and PSA card grading simulator to give the full-on experience which pokemon has to offer. 🔗 Live Sandbox: https://pokemontcgsim.vercel.app 💻 GitHub Repo: https://github.com/sohamSanat/PokemonTcgSimulator ** Screen shots of different segments of the web app -> ** 1)Main page (pack opening) 2)Binder section where you sort your cards in the personal collections and see your cards’ portfolio 3)Card grading simulation where you can get your cards’ price increased based on the condition of your card 4)Card show where there are different vendors with their own specialty in cards 5)live cards auction of thousands of cards **Tech fluff for people who cares ;D -> Architecture & Major Engineering Achievements : -** 1)Era-Calibrated Pack Engine & Rarity Probability Mathematics: Pack generation creates historically accurate card pools from over 25 years of card sets, from 1999 Base Set to 2025 Mega Evolution. It recreates slot weights, ensures holos, and handles complex probability mechanics for Secret Illustration Rares and many other cards 2)gemini powered NPC Negotiation Engine: During the virtual card convention, users negotiate with 9 different NPC vendors through natural language interactions. The backend NLP pipeline analyzes the user’s language, tokenizes the negotiation and makes offers. 3)Simulated PSA Grading Laboratory & Restoration Studio: The multi-step card authentication system considers card centering, surface, corners, and edges, and provides realistic grade distribution (PSA 1-10) with dynamic slab encasement and grade multipliers. It also has an interactive pre-grading restoration studio where you can clean surfaces and press corne

TanStack Table V9 is a beta release of a headless UI library for creating tables in various JavaScript frameworks. It features improved state management, memory usage, and extensibility. The notable change is an opt-in feature model, allowing developers to load only necessary components. Migration is gradual, with tools provided for legacy support. The library remains free and developer-focused. By Daniel Curtis

Over the past few weeks, I've been focused on deepening my understanding of mobile analytics—not just by completing a course, but by putting those concepts into practice through hands-on implementation in React Native. Throughout this journey, I explored a wide range of topics, including: Firebase Analytics integration Google Analytics 4 (GA4) Event planning and naming conventions Screen view tracking Custom events and custom definitions Key Events (Conversions) User properties and User ID Acquisition and campaign tracking Audience segmentation Ecommerce measurement Checkout funnel analysis Promotions and marketing attribution BigQuery integration Realtime reporting and DebugView Analytics validation and best practices One of the biggest lessons I learned is that analytics is much more than logging events . A well-designed analytics strategy helps answer important questions about user behavior, feature adoption, user engagement, and conversion optimization. The quality of the insights you gain depends on having a well-planned event architecture, consistent naming conventions, and meaningful data collection from the very beginning. Completing this Udemy course gave me a strong foundation in Firebase Analytics and Google Analytics 4. Reinforcing that knowledge through hands-on implementation in React Native helped me better understand event planning, debugging, reporting, and analytics best practices for modern mobile applications. Course Certificate I'm happy to have successfully completed the Firebase Analytics & Google Analytics 4 (GA4) course on Udemy. Certificate: https://www.udemy.com/certificate/UC-4a23b92f-0857-4a75-83dd-ac186bdfdfbc The course covered both the fundamentals and advanced capabilities of mobile analytics, including GA4 reports, custom events, screen tracking, audiences, BigQuery integration, and data-driven decision making. It has been a valuable learning experience that strengthened both my theoretical understanding and practical implementation

The Nightmare of HTML-to-PDF in React If you’ve ever built a School ERP, HR portal, or Event Management system, you’ve probably hit this exact wall: Your client needs to print 5,000 ID cards or badges. Usually, this forces frontend teams to do one of two terrible things: Pay for an expensive backend PDF generation API (which raises huge GDPR/privacy concerns because you have to send sensitive employee photos to a 3rd-party server). Force the non-technical HR team to manually type names into Canva, crop photos, and manually drag them onto an A4 grid (an 80-hour manual data entry nightmare). I got tired of rebuilding complex html2canvas and jsPDF calculators from scratch for every project. So, I decided to automate the entire pipeline natively in the browser. Enter @stratametriq/id-card-designer — an open-source, turnkey drag-and-drop ID card studio and A4 mathematical rendering engine for React. What it does out of the box: Instead of building a canvas from scratch, you install this NPM package in one line of code. It gives your end-users a complete visual dashboard directly inside your own application. Here is a 60-second video of how it looks running in a live production environment: 👉 https://youtu.be/l9aXWqRSFCM?si=nEIaaqsxypmzCflm The Core Features: Dynamic Handlebars Data Binding Your users can design a visual template and drop in tags like {{studentName}} or {{employeeId}}. Our engine automatically binds these variables to your live database array. No manual typing required. Scannable Barcodes & QR Codes We built native QR and Barcode generators directly into the canvas. You just pass the ID string, and the engine renders a scannable vector code instantly. The Magic Moment: Precision A4 Batch Matrix When your HR admin selects 500 employees and hits "Batch Print", the real magic happens. Our client-side mathematical matrix calculates exact millimeter dimensions—arranging exactly nine PVC cards perfectly on standard A4 cut-sheets, complete with professional 0.35

React useDeepCompareEffect: Fix useEffect Object Dependencies (2026) You wire up a fetch. The endpoint takes a query object, so you pass it in the dependency array. The effect fires, sets state, the component re-renders, the query object is rebuilt — a brand-new object with identical contents — and the effect fires again. You have written an infinite loop, and React thinks it did exactly what you asked. function Results ({ term , page }: Props ) { const [ rows , setRows ] = useState ([]); const query = { term , page , sort : ' desc ' }; // new object, every render useEffect (() => { fetchRows ( query ). then ( setRows ); // setRows → re-render → new query → 🔁 }, [ query ]); } useDeepCompareEffect from @reactuses/core is a drop-in replacement for useEffect that compares dependencies by value instead of by reference. Same signature, same cleanup semantics — the effect just stops firing when nothing actually changed. Everything below is the real implementation, TypeScript-first, including the parts that cost you something. Why useEffect Can't See It React compares dependency arrays with Object.is , element by element. For primitives that's exactly what you want: 5 is 5 , 'desc' is 'desc' . For anything with an identity — objects, arrays, Date s, Map s, functions — it compares the reference , and a literal written inside a component body produces a fresh reference on every single render: Object . is ({ term : ' react ' }, { term : ' react ' }); // false — different objects So the dependency "changed" on every render, by React's definition. This isn't a bug in useEffect ; reference equality is the only comparison that's O(1), and React runs it on every render of every component. The cost of value comparison is real, and React declines to pay it on your behalf. Which leaves you paying it — one way or another. The Usual Workarounds, and Where They Fray Memoize the object. Correct, and the right answer when there's one dependency: const query = useMemo (() => ({ term , page

Have you ever looked at your raw DNA data from services like 23andMe or Ancestry.com and thought, "What on earth am I looking at?" Behind those megabytes of .txt or .vcf files lies the blueprint of you , but without a PhD in genetics, it's just a wall of "A, C, T, G." In this tutorial, we are going to bridge the gap between raw genomic noise and actionable insights. We’ll build an advanced Genomic RAG (Retrieval-Augmented Generation) pipeline. By the end, you'll have a system that takes raw SNP (Single Nucleotide Polymorphism) data, retrieves clinical significance from the ClinVar database, and generates an interactive risk guide using LlamaIndex and FAISS . If you are interested in Genomic Data Engineering , Bioinformatics with Python , or RAG (Retrieval-Augmented Generation) , this guide is for you. The Challenge: The "Needle in a Haystack" Problem A typical human genome has millions of variants. Most are harmless "junk" DNA, but some are "Pathogenic." Searching for these manually is impossible. We need a system that: Parses massive genomic files efficiently. Indexes trusted medical databases (ClinVar). Matches your specific variants against that knowledge base to provide context. The Architecture 🏗️ Here is how our data pipeline flows from raw pixels (well, raw base pairs) to structured insights: graph TD A[Raw SNP Data / VCF File] --> B(Pandas & Biopython Parser) B --> C{Filter High-Impact Variants} D[ClinVar Clinical Database] --> E(LlamaIndex Indexing) E --> F[FAISS Vector Store] C --> G[RAG Query Engine] F --> G G --> H[LLM: GPT-4o Synthesis] H --> I[Interactive Risk Report] Prerequisites 🛠️ To follow this advanced guide, you'll need: Tech Stack : Python 3.9+, Pandas, LlamaIndex, FAISS, and Biopython. Data : A sample VCF file (you can download public datasets from the 1000 Genomes Project) or your own exported 23andMe data. Step 1: Parsing the Genetic "Nonsense" First, we need to handle the raw data. 23andMe usually provides a tab-separated file. We use Panda

After hoisting, interviewers love dropping one-liners like: console . log ([] + []); console . log ([] + {}); console . log ({} + []); console . log ( NaN === NaN ); …and watching whether you guess, freeze, or calmly walk the coercion rules. This post is only output-based type coercion / equality questions. Try each snippet yourself first. Answers are hidden — click Show answer when you’re ready. TL;DR — what interviewers are testing Concept Trap + with objects/arrays Often becomes string concat , not math [] / {} stringification [] → "" , {} → "[object Object]" Bare {} + [] Parser may treat {} as a block , not an object NaN === NaN Always false — use Number.isNaN / Object.is == vs === == coerces; === does not Falsy vs “empty-looking” [] and {} are truthy typeof null Infamous "object" lie One-line mental model + asks both sides to become primitives. If either side is a string (after that), you get concatenation . Otherwise you get number math — and weird values become NaN . Warm-up: how + really decides When JS hits a + b , it roughly does: 1) Convert both sides to primitives (ToPrimitive) 2) If either result is a string → String(a) + String(b) // concat 3) Else → Number(a) + Number(b) // math For plain objects / arrays, ToPrimitive usually ends up calling .toString() : Value String(value) Number(value) [] "" 0 [1, 2] "1,2" NaN {} "[object Object]" NaN null "null" 0 undefined "undefined" NaN true "true" 1 false "false" 0 That’s enough to solve most [] + {} style questions. How to use this post Read the snippet Say the output out loud (or write it down) Only then open Show answer Read the step-by-step — don’t only memorize the final print Q1 — Classic [] + [] console . log ([] + []); Show answer Output "" (empty string — looks like a blank line) Step by step + wants primitives from both arrays. String([]) → "" (empty array joins to empty string). "" + "" → "" . Interview tip: People often say 0 or [] . Wrong. Empty array stringifies to "" , so you get string concat o

How multiple open browser tabs can accidentally DDOS your auth server, and how to fix it with the Web Locks API. Picture this: You’ve just shipped a state-of-the-art Axios response interceptor. You implemented a mutex lock ( isRefreshing ) and a promise queue ( failedQueue ) to handle concurrent 401 errors. You tested it within a single tab, and it worked like a charm. You gave yourself a high-five and closed your laptop. Then, a power user logs in. Like most humans on the internet, they don't use just one browser tab. They open Tab 1 for User Management, Tab 2 for Analytics, Tab 3 for Settings, and Tab 4 for Support Tickets. Fifteen minutes pass. Their short-lived JWT access token expires. The user switches back to Tab 1. In the background, all 4 open tabs wake up, detect the expired token, and fire off four independent POST /auth/refresh-token/ requests at the exact same millisecond. Tab 1 refreshes the token first, but Tab 2's request arrives a millisecond later, invalidates Tab 1's new token, and Tab 3 nukes the session entirely. Suddenly, all 4 tabs dump the user back to the login screen. Welcome to the Cross-Tab Token Trap . 1. The Problem: The Multi-Tab Stampede In modern single-page applications (SPAs), each browser tab operates in its own isolated JavaScript runtime environment. Memory is not shared. When an access token expires: isRefreshing = true in Tab A only stops requests inside Tab A . Tab B has no idea Tab A is currently refreshing a token. Tab C lives in complete ignorance of Tabs A and B. Tab A (Memory Space 1) ---> isRefreshing = true ---> POST /auth/refresh-token/ (Token Set 1) Tab B (Memory Space 2) ---> isRefreshing = true ---> POST /auth/refresh-token/ (Token Set 2 -> Revokes Set 1!) Tab C (Memory Space 3) ---> isRefreshing = true ---> POST /auth/refresh-token/ (Token Set 3 -> Revokes Set 2!) If your backend enforces Single-Use Refresh Token Rotation (where using a refresh token revokes all previous ones), multi-tab usage causes immediate ses