标签：#frontend

Many online image converters require users to upload their files to a remote server before processing. For ordinary images this may be acceptable, but for personal photos, screenshots and documents, privacy becomes an important concern. I built a lightweight online image converter that processes images directly in the browser. It currently supports: JPG PNG WebP HEIC GIF SVG BMP TIFF Why browser-based processing? The main goal was to make image conversion simple, fast and privacy-friendly. Because the conversion happens locally: Images are not uploaded to a server Users do not need to create an account There is no installation process Network upload time is avoided Private files remain on the user’s device The basic workflow is simple: Select an image Choose an output format Convert the file Download the result Challenges Browser-based image conversion still has some limitations. Different browsers support image formats differently, especially formats such as HEIC and TIFF. Large images may also consume more device memory during processing. Some format features may not be preserved after conversion. For example, transparency may be lost when converting to JPG, and animated images may become static depending on the selected output format. These limitations need to be handled through clear prompts and error messages.

Angular 21 Module Federation: Build a Micro Frontend Workspace with One Host and Three Remotes If you're exploring Micro Frontends with Angular 21, one of the first questions you'll encounter is: "How do I set up a complete Module Federation workspace that actually works with Angular 21?" After a few iterations (and a couple of version mismatches), I successfully created a housekeeping/admin platform using Angular 21 Native Federation with: 1 Host Application 3 Remote Applications Shared routing Native Federation (esbuild) Single command startup By the end of this tutorial, you'll have the following architecture running locally: +----------------+ | host-app | | Port: 4200 | +--------+-------+ | --------------------------------------- | | | v v v +-------------+ +-------------+ +-------------+ | auth-app | | user-app | | role-app | | Port: 4201 | | Port: 4202 | | Port: 4203 | +-------------+ +-------------+ +-------------+ Project Overview This sample project represents a basic housekeeping/admin platform. Application Purpose Port host-app Shell, navigation, remote loading 4200 auth-app Login, logout, access denied 4201 user-app User management 4202 role-app Role management 4203 Host Routes /auth -> auth-app /users -> user-app /roles -> role-app Prerequisites My development environment: Angular CLI : 21.2.19 Node.js : 22.23.1 npm : 10.9.8 OS : macOS (arm64) Angular 21 works well with Native Federation. If you're starting fresh, I recommend pinning Angular CLI to version 21 to avoid compatibility issues. Step 1: Install Angular CLI 21 npm i -g @angular/cli@21 Verify: ng version Expected output: Angular CLI: 21.x Step 2: Create an Empty Workspace Instead of generating an application immediately, create an empty Angular workspace. ng new housekeeping-mf \ --create-application false \ --routing \ --style css \ --skip-git Move into the project: cd housekeeping-mf Step 3: Generate Applications Generate one host and three remotes. ng generate application host-app --routing

1. Introduction: What is TanStack Query? TanStack Query (formerly React Query) is a framework-agnostic state management library designed specifically to manage Server State —handling data fetching, caching, background updating, and cache invalidation. 2. Server State vs. Client State & The Memory Reality Client State: Owned and controlled entirely by the browser (e.g., isModalOpen , selected UI theme). Server State: Owned by the remote backend database (e.g., user profiles, posts, cart items). The browser only holds a read-only temporary snapshot . Where is data physically stored? Physical Location: By default, cached data lives strictly in the browser tab's JavaScript RAM (In-Memory) . Backend ("The Server"): Refers to your remote API/database (regardless of whether it runs on Kubernetes, Docker containers, serverless functions, or bare metal). Optional Persistence: You can opt to sync this RAM cache to localStorage , sessionStorage , or IndexedDB using TanStack Query Persisters. import React , { useState } from ' react ' ; import { QueryClient , QueryClientProvider , useQuery , useMutation , useQueryClient , } from ' @tanstack/react-query ' ; // 1. Initialize QueryClient (manages the RAM cache) const queryClient = new QueryClient ({ defaultOptions : { queries : { staleTime : 10000 , // Data stays fresh in RAM for 10 seconds }, }, }); // Mock API functions async function fetchPost ( postId ) { const res = await fetch ( `[https://jsonplaceholder.typicode.com/posts/$](https://jsonplaceholder.typicode.com/posts/$){postId}` ); if ( ! res . ok ) throw new Error ( ' Network error ' ); return res . json (); } async function createPost ( newPost ) { const res = await fetch ( ' [https://jsonplaceholder.typicode.com/posts](https://jsonplaceholder.typicode.com/posts) ' , { method : ' POST ' , headers : { ' Content-Type ' : ' application/json ' }, body : JSON . stringify ( newPost ), }); return res . json (); } // 2. Query Component (Fetching & Reading Data) function PostViewe

I run a large fleet of "preview it, then download it as PNG" web tools — name tags, certificate generators, price cards, badges — in five languages: Japanese, English, Spanish, French, Portuguese. Canvas 2D text rendering looks correct as long as you only test Japanese and English. It breaks when you run es/fr/pt through it. After stepping on these repeatedly, the failures collapse into four patterns. The premise: Latin languages run 1.4–2× longer than Japanese Design data first. The same label, measured across five locales: Example ja en es fr pt Tool name 22 chars 35 62 48 50 "Standard" button 4 8 10 20 12 Rule of thumb: fr/pt come out 1.4–1.7× longer than ja; es can balloon to nearly 3×. A font size and maxWidth tuned to fit Japanese will not fit the Latin locales. All four failure patterns grow from this. Pattern 1: hand-rolled wrapping via text.split(/\s+/) collapses on CJK The classic snippet — split on spaces, wrap word by word — does nothing for Japanese or Chinese, where words aren't space-delimited. An entire sentence becomes one unbreakable token and clips at the canvas edge. Test with real Japanese input and check that the final line renders to its last character. "Most of it showed up" is not a pass. Pattern 2: an ASCII-only tokenizer splits words at accented characters Fix pattern 1 with a character-class tokenizer like [A-Za-z0-9'\-_] and you've traded one regression for another: ç é ã ó ñ aren't in that class, so produção fragments into produ / ç / ão mid-word. An English test will never catch this. Generate actual PNGs with fr/es/pt samples and eyeball the area around accented characters. I never found another detection method — string-comparison tests can't see a rendering-level split. Pattern 3: the important word at the end vanishes into "…" Since fr/pt run 1.4–1.7× longer than the ja the layout was tuned for, text overflows its two lines and gets ellipsized. The cruel part: what disappears is the tail of the phrase — often the semantically criti

Round and round we go Gaining an advantage in AI design workflow's isn't based on better prompting. It's something we've been doing for decades... First off, this isn’t an "AI is taking my job" post. It’s a "who’s already got an edge?" post. As AI settles into creative workflows, a divide is opening up. Some people consistently get better results. Experience helps, but something deeper is at play... an insight sitting in plain sight. Enter the Art Director I’ve never carried the title, but I’ve worked with enough Art Directors to appreciate their superpower. It isn’t simply seeing the vision... it’s being able to articulate it. They instinctively know how to explain why something isn’t working and what needs to change. They choose words that shape an idea. Words that push, pull, tighten, soften, emphasize, and refine . Think about a typical creative brief. It rarely says, "Make a brochure." It says: "The typography should feel established, but not corporate." "Give the layout room to breathe." "The call-to-action should feel confident, not aggressive." None of those are technical instructions. They're creative direction. Today, the prompt bar is simply a new creative brief. Those same words can guide an AI model to the same destination. Prompt Seekers Lament Sometimes we become prompt seekers, searching for a magical combination of words that will produce perfection on the first try. Anyone in design knows how unrealistic that is. The first concept is rarely the finished concept. Designer presents, client reacts, designer refines, client reacts again... and round you go. Iteration wasn't a workaround. It was the process all along. Yet the trend on X is always some eye-catching image with everyone asking for the "one-and-done" prompt. AI is great at creating options. It's much less impressive at knowing which option is right. Cue the Director Instead of saying, "Something isn't right," an Art Director diagnoses the problem: "The composition is balanced, but the visua

I've just published a small npm package called @modyra/core that came out of a very specific pain: handling "slightly complex" app state in frontend projects without ending up with a mess of context, custom hooks and scattered stores. The focus of the package is: Minimal API, all in TypeScript, no hidden magic No heavy runtime: just tools to model the core of your app as a set of state modules Designed to plug into React/Angular/vanilla JS without forcing you to rewrite everything The idea is to treat your app's domain as a set of "core units" with clear responsibilities: each unit exposes state, actions and rules, and the rest of the app simply consumes them. It came out of a few projects where Redux/Zustand/signals etc. were fine, but started to feel either too verbose or not very close to the actual business domain. If you feel like taking a look and tearing it apart, feedback (including harsh ones) is very welcome: naming, API design, examples - everything is still fresh enough to change. And if you think the approach is worth exploring, a star on GitHub would really help me keep pushing the project forward.

Originally published on the MyTreda engineering blog: read here A support message described what looked like one confusing mobile bug. It turned out to be two independent ones — a cross-site cookie getting blocked by Safari's ITP, and a React Hook Form autofill desync — that just happened to both only show up on mobile. Full breakdown, code, and fixes below.

Я заглянул туда. Там дохуя документации. Дикий геморой мусорки. Бесконечный склад, который вгоняет меня в панику. Но как инструмент это незаменимая часть Web. Я беру нужный мне чертёж и строю то, что мне нужно. window глобальный объект. Подключение к API старого браузера. Это Мозг, который даёт мне инструменты: Скелет HTML: (document) Память Хранилище: (localStorage) Сеть API: подключение к контрактам других серверов для сбора информации (fetch) Но главное, что я заценил это обработчик событий onload. Это и есть чудо архитектуры. Связь CSS, JS, HTML в корневой папке предка HTML. Я скидываю в него свой модуль, и он гарантирует, что всё запустится, когда скелет будет готов.

🇮🇩 Originally written in Indonesian. This English version was AI-assisted and adapted for a more natural reading experience. It is not a literal translation. _open Introduction Lately, I've been having quite a few discussions with frontend developers about the frameworks they use. My question is actually pretty simple. "When you're building a web frontend, what framework do you usually use?" Almost everyone gave more or less the same answer. "It depends on the project." And honestly, I agree. There's no framework that's always the best choice for every situation. However, as the conversation went on, they started sharing their own experiences and preferences. Well... That's when I started noticing an interesting pattern. Among the developers I talked to, quite a few of them mentioned that they usually use Next.js / React for work, while Vue.js is what they often choose for personal projects. The interesting part is... I never actually asked, "What do you use at work?" or "What do you use for personal projects?" That explanation came up naturally as they explained why they preferred certain frameworks. At first, I thought it was just a coincidence. But after hearing the same pattern from several different people... I got curious. Why do so many developers who are comfortable with both frameworks end up separating how they use them? (・_・;) Disclaimer This isn't based on an official survey or research. It's simply an interesting pattern I noticed after talking with several frontend developers. Discussion Vue.js Looking at today's frontend ecosystem, Vue.js is clearly not a small framework. Its community is large. Its documentation is great. Its ecosystem is also quite mature. That said, compared to React and Next.js, its community is still smaller. Then another question comes to mind. If that's the case... Why do so many developers still choose Vue.js for personal projects? From the answers I heard, the main reason wasn't performance. And it wasn't because other framew

Artikel ini juga tersedia dalam bahasa Inggris Pendahuluan Beberapa waktu terakhir saya sering berdiskusi dengan beberapa frontend developer mengenai framework yang mereka gunakan. Pertanyaan saya sebenarnya sederhana. "Kalau membuat frontend web, biasanya pakai framework apa?" Hampir semuanya memberikan jawaban yang kurang lebih sama. "Tergantung kebutuhan." Dan saya setuju. Tidak ada framework yang selalu menjadi pilihan terbaik untuk semua kondisi. Namun, setelah pembahasannya berlanjut, mereka mulai menceritakan pengalaman dan preferensinya masing-masing. Nah... Di sinilah saya mulai menemukan pola yang menarik. Dari beberapa developer yang saya ajak berdiskusi, cukup banyak yang mengatakan bahwa mereka lebih sering menggunakan Next.js / React untuk pekerjaan, sedangkan Vue.js lebih sering digunakan untuk personal project. Padahal saya tidak pernah bertanya, "Kalau kerja pakai apa?" atau "Kalau project pribadi pakai apa?" Penjelasan itu muncul begitu saja ketika mereka mulai menjelaskan alasan di balik framework yang mereka pilih. Awalnya saya mengira itu hanya kebetulan. Tapi setelah mendengar pola yang sama dari beberapa orang... Saya jadi penasaran. Kenapa banyak developer yang sudah menguasai keduanya justru memilih memisahkan penggunaannya? (・_・;) Disclaimer Tulisan ini bukan hasil survei atau penelitian resmi. Ini hanyalah pola yang saya temui dari beberapa frontend developer yang sempat saya ajak berdiskusi. Pembahasan Vue.js Kalau melihat ekosistem frontend saat ini, Vue.js jelas bukan framework yang kecil. Komunitasnya besar. Dokumentasinya bagus. Ekosistemnya juga sudah cukup matang. Namun memang harus diakui, jika dibandingkan dengan React dan Next.js, komunitasnya memang masih lebih kecil. Lalu muncul pertanyaan. Kalau begitu... Kenapa masih banyak yang memilih Vue.js untuk personal project? Dari beberapa jawaban yang saya dengar, ternyata alasan utamanya bukan karena performa. Bukan juga karena framework lain kurang bagus. Melainkan karena pengalama

Frontend testing used to sound simple: open a page, find an element, click it, and verify the result. That description still works for basic workflows, but modern interfaces are no longer a single static DOM that changes in obvious ways. Components can render inside Shadow DOM. Modals can be portaled to a different part of the document. Server-rendered HTML can be replaced during hydration. Content can move because of CSS container queries. A page can look finished while several progressive-loading states are still changing underneath it. The hardest frontend bugs now tend to sit at the intersection of three things: State: what the application believes is happening. Timing: when the browser and framework apply changes. Geometry: where elements appear and whether users can actually interact with them. A stable test strategy has to observe all three. Shadow DOM and portals break naive assumptions about element location Component encapsulation is useful, but it changes how automation finds and interacts with elements. A control inside an open shadow root is not always reachable through the same selector strategy used for the main document. A portaled modal may appear visually next to a component while being rendered near the end of document.body . Focus can move into the modal even though the DOM hierarchy suggests that it belongs elsewhere. This guide to testing Shadow DOM and portaled modals without breaking browser automation suites covers the key challenges. The test should verify behavior, not merely the presence of a node: Can the user reach the control? Is the expected element visible above overlays? Does keyboard focus enter the modal? Is focus trapped correctly? Does Escape close it? Does focus return to the triggering element? Can a screen reader identify its label and role? Selectors still matter, but interaction boundaries matter more. A test that locates a button hidden behind another layer is not testing what the user experiences. Hydration creates a peri

GitHub announced Copilot Vision general availability on July 1, 2026, allowing developers to attach screenshots to Copilot conversations as visual context. Primary source: GitHub Changelog, “Copilot Vision is generally available” . A screenshot can shorten “make this component look like that.” It can also become an invisible source of truth: unlabeled attachment controls, image-only requirements, generated markup with no semantics, and an error state communicated only by a thumbnail badge. The accessibility target should be stronger than “a screen reader can upload a file.” A keyboard or screen-reader user must be able to understand the supplied requirements, remove or replace the image, follow processing state, and verify the generated interface. Add a text contract beside the screenshot Use a structured alternative, not a filename: <fieldset> <legend> Reference design </legend> <label for= "shot" > Screenshot </label> <input id= "shot" type= "file" accept= "image/png,image/jpeg" /> <label for= "requirements" > Required behavior and content </label> <textarea id= "requirements" aria-describedby= "requirements-help" ></textarea> <p id= "requirements-help" > Describe text, controls, order, states, and behavior that must not be inferred from appearance alone. </p> <p id= "upload-status" role= "status" aria-live= "polite" ></p> </fieldset> Example text contract: Dialog title: Delete workspace? Body: This cannot be undone. Focus starts on Cancel. Tab order: Cancel, Delete, close button. Escape closes and returns focus to the launch button. Delete is destructive; color is not its only indicator. The screenshot communicates spacing and visual hierarchy. The text carries names, order, behavior, and safety requirements. Model attachment states explicitly type AttachmentState = | { kind : ' empty ' } | { kind : ' reading ' ; name : string } | { kind : ' ready ' ; name : string ; alt : string } | { kind : ' error ' ; name : string ; message : string }; Render each state with

Getting Comfortable with HTML Attributes When I first started learning HTML, attributes felt like tiny details hiding inside the tags. I understood the basic structure of a webpage, but I didn’t fully understand why some elements had extra words like href, src, or alt. Over time, I realized attributes are what make HTML elements useful. They add meaning, behavior, and context. Without attributes, a webpage would still have structure, but it would feel limited and incomplete. What HTML attributes really do An HTML attribute gives extra information about an HTML element. It is written inside the opening tag and usually has a name and a value. In simple words, the tag creates the element, and the attribute explains something about that element. For example: Here, href tells the browser where the link should go. Why attributes matter Attributes may look small, but they make a big difference in how a webpage works. They can: Connect one page to another using links. Display images, videos, and other media. Improve accessibility for users and screen readers. Help CSS and JavaScript identify elements. Control forms, buttons, and user input. Without attributes, HTML would only show content. Attributes help that content become interactive and meaningful. Some attributes I use all the time href for links The href attribute is used with anchor tags. It tells the browser the destination of the link. src for images The src attribute gives the path to an image, video, or audio file. alt for accessibility The alt attribute describes an image. It is helpful when the image does not load and also important for screen readers. id and class for styling id gives a unique name to an element, while class is used when multiple elements share the same styling or behavior. placeholder and required in forms These attributes make forms easier for users to understand and complete. A few habits that helped me Use lowercase attribute names. It keeps the code cleaner and easier to read. Put attribu

Luca Mezzalira shares proven learnings from guiding hundreds of teams through the migration from monolithic web applications to distributed frontend architectures. He explains the core architectural difference between components and micro-frontends, outlines a 6-step decision framework spanning client vs. server rendering, and discusses how to utilize edge compute for safe, iterative rollouts. By Luca Mezzalira

Two buttons in a confirmation dialog look simple: Cancel and Confirm. Keyboard behavior makes the component a small state machine. A recent MonkeyCode change gives us a concrete example. Issue #862 and PR #863 add these shortcuts to the slash-command confirmation: ArrowLeft -> focus Cancel ArrowRight -> focus Confirm The reviewed implementation at commit c58bcd4 moves focus through button refs. That is a useful extra interaction. It is not a replacement for the dialog's accessibility foundation. Keep the baseline first For an alert-style confirmation, users still need: an accessible name and description; focus moved inside when the dialog opens; Tab and Shift+Tab constrained to dialog controls; Escape to dismiss when cancellation is allowed; visible focus; focus returned to the trigger after close; actual buttons whose labels explain the actions. The WAI-ARIA Authoring Practices Alert Dialog Pattern describes the modal semantics and keyboard foundation. Left/right mapping is a product shortcut, not a required AlertDialog convention. That means we must not steal keys from the established behavior around it. Isolate the extra mapping The companion keyboard.mjs starts with a pure function: export function arrowAction ( key ) { if ( key === " ArrowLeft " ) return " cancel " ; if ( key === " ArrowRight " ) return " confirm " ; return null ; } The event handler ignores unrelated and modified keys: export function handleDialogArrow ( event , controls ) { const action = arrowAction ( event . key ); if ( ! action || event . altKey || event . ctrlKey || event . metaKey ) return false ; event . preventDefault (); controls [ action ]. focus (); return true ; } Notice what is absent: no handler for Tab , Shift+Tab , Escape , or Enter . The native <dialog> and buttons in the minimal demo retain their normal jobs. In a React component, use a well-tested modal/dialog primitive for focus containment and dismissal, then add this narrow handler to its content. A complete minimal dialo

Imagine you're loading a dashboard. Four widgets, four APIs, fire them all at once: const [ users , revenue , alerts , activity ] = await Promise . all ([ fetchUsers (), fetchRevenue (), fetchAlerts (), fetchActivity (), ]); The alerts API is occasionally slow and sometimes returns a 500. When it does, your entire dashboard fails. Not one broken widget — four broken widgets. Promise.all rejects on the first failure and takes the other three successful results with it into the void. You reached for the right primitive for concurrency, but the wrong one for this use case. The four methods and what they actually do JavaScript gives you four ways to run promises concurrently. They differ in one thing: what happens when a promise fails or resolves first. Method Resolves when Rejects when Promise.all All succeed Any one fails Promise.allSettled All finish (success or failure) Never Promise.any Any one succeeds All fail Promise.race Any one finishes Any one fails first The instinct to reach for Promise.all is understandable — it returns all the values in a single array and feels like the obvious way to "do these things at the same time." But concurrency and failure handling are two separate questions. Promise.all answers both at once, and the answer to the second one is often wrong for the situation you're in. 🎮 Try it yourself ▶️ Open the interactive playground → Runs right in your browser — poke at it and watch the concept react live. Promise.allSettled — partial success Promise.allSettled waits for every promise to settle — resolve or reject — and returns a result array describing what happened to each one: const results = await Promise . allSettled ([ fetchUsers (), fetchRevenue (), fetchAlerts (), fetchActivity (), ]); for ( const result of results ) { if ( result . status === ' fulfilled ' ) { console . log ( ' got data: ' , result . value ); } else { console . error ( ' failed: ' , result . reason ); } } Each element has a status of 'fulfilled' (with a value ) or 'r

Hello Dev Community! 👋 It is officially Day 136 of my software engineering marathon! Today, I engineered the absolute heart of my MERN Stack capstone application, Sprintix : The complete Product Collection Grid & Faceted Filter Sidebar View ( /collection ) ! ⚛️🛍️🗂️ To prepare the application for seamless full-stack state management integration later, I built this layout using dynamic state arrays and object schemas. This ensures that switching from demo arrays to live API streams will happen effortlessly. 🛠️ Deconstructing the Day 136 Catalog Architecture As displayed across my browser rendering workspace in "Screenshot (311).jpg" and "Screenshot (312).jpg" , phase one of the product engine splits into structural layout segments: 1. Faceted Category Filter Sidebar Organized dedicated verification check-boxes mapping out specific consumer collections: Categories: Segmented target groups (Men, Women, Kids). Type Filters: Segmented style formats (Top Wear, Bottom Wear, Winter Wear). Styled within minimal box borders to give users an uncluttered desktop searching experience. 2. Header Control Grid & Sort Registries Installed a top-level workspace header showing "All Collection" alongside an interactive drop-down management node ( Sort by: relevant / low-to-high / high-to-low ). Ready to hold local state flags that rearrange the data arrays instantly before looping. 3. Deep Route Parameter Mapping Preparation Look at the hover elements in "Screenshot (311).jpg" ! Every single rendering card passes localized hex-token structures mapping toward dynamic pathways like: text /product/:id (e.g., /product/6a436b5c921b7aa010d29318)

Hello Dev Community! 👋 It is officially Day 134 of my software engineering marathon! Today, I successfully extended the layout grids of my MERN Stack capstone e-commerce application, Sprintix , by implementing fully responsive feature banners, newsletter hooks, and a clean global footer! ⚛️🛡️📬 A premium storefront relies heavily on trust anchors and consistent site-wide navigational structures. Today's focus was ensuring these terminal layers look flawless across all viewport breaking thresholds. 🛠️ Deconstructing the Day 134 Interface Terminal As captured in my local hosting environments within "Screenshot (301).jpg" and "Screenshot (302).jpg" , the system layout introduces high-fidelity structural blocks: 1. Trust Policy Infrastructure Positioned a 3-column micro-service layer layout framing crucial customer success policies (Easy Exchange, 7 Days Return, 24/7 Support). Balanced standard tracking font sizes and vector alignments to maintain optimal layout readability. 2. Immersive Newsletter Conversion Segment Engineered an engaging email onboarding banner using rich layered visual configurations. Integrated a responsive inline input element paired with an absolute action button to ensure the container shifts scales perfectly when transitioning down to mobile form factors. 3. Consolidated Multi-Grid Footer System Look at "Screenshot (302).jpg" ! Structured a highly scalable flex-wrapping matrix containing: Brand Identity Columns hosting contextual descriptive descriptions. Navigational Routing Indexes pointing clearly to operational views (Home, About Us, Privacy Policy). Direct Touchpoints aggregating structural contact details. Finished off the grid matrix with a clean full-width divider row holding structural copyright information. 💡 The Technical Win: Designing for Fluid Responsiveness First When building high-traffic online stores, mobile responsiveness isn't a secondary polish step—it has to be native. Writing components with flexible flexbox wrapping, relat

Headline: Tailwind v4 is the most significant rewrite since the framework launched — CSS-first config, Lightning CSS under the hood, container queries built-in, and no more tailwind.config.js . I migrated two production projects and here's what actually broke and what the upgrade tool misses. Tailwind CSS v4 arrived with a steeper upgrade curve than most version bumps in the JS ecosystem. The configuration story changed completely. The build engine changed. Several features that previously required plugins are now built-in. The headline change: no more tailwind.config.js In v3, configuration lived in a JavaScript file — theme extensions, plugins, content paths. In v4, it moves into your CSS: @import "tailwindcss" ; @theme { --color-brand : #6366f1 ; --spacing-18 : 4.5rem ; } Theme tokens become CSS custom properties under @theme , and Tailwind generates utility classes automatically. The content array is gone — v4 detects source files automatically. The new engine: Lightning CSS Tailwind v4 ships with Lightning CSS replacing PostCSS as the default: Build times drop significantly (cold rebuild went from ~8s to under 3s on the dashboard) CSS nesting works natively without a plugin Modern CSS features like color-mix() , @starting-style , oklch are transpiled automatically autoprefixer is no longer needed New features built-in Container queries — native in v4, no plugin needed: <div class= "@container" > <div class= "grid grid-cols-1 @sm:grid-cols-2" > ... </div> </div> 3D transforms — rotate-x-45 , rotate-y-12 , perspective-1000 for card flip effects without inline styles. Dynamic spacing — p-13 , mt-22 work without explicit definition. Migration: the upgrade tool and what it misses npx @tailwindcss/upgrade@next The codemod handles the mechanical parts. What it missed: Custom plugins — the JS plugin API changed; non-trivial v3 plugins need a rewrite to the new @plugin / @utility API theme() calls in CSS — replace theme('colors.zinc.900') with var(--color-zinc-900) ; gr

I built LiveShop , a mini live-shopping stream UI, to answer a question I kept running into as a frontend-curious grad: tutorials teach you how to render a list, but they never teach you what happens when that list gets hit with the kind of traffic a real live stream produces. So I built something that would force the problem to show up, then fixed it, then measured whether the fix actually worked. The setup LiveShop simulates a live-shopping broadcast - the kind of interface a small merchant might use to sell products while streaming. A mock event engine fires chat messages, reactions, and purchase notifications on an interval, standing in for what a real WebSocket connection to a streaming backend would deliver. On top of that sits a chat feed, a scrollable product carousel, and a floating reaction animation layer. None of that is unusual. The interesting part started once I asked: what happens when message volume spikes? Where it breaks A naive chat feed is just messages.map(m => <ChatRow key={m.id} {...m} />) . It's the first thing anyone reaches for, and it's fine — right up until it isn't. At 50 messages, nothing looks wrong. At a few hundred, every new message triggers a full re-render pass across every row in the DOM, including the hundreds that have already scrolled out of view and that nobody can see. The browser is doing layout and paint work for pixels that aren't on screen. In a real live stream, this is exactly the wrong failure mode, because message volume doesn't arrive evenly. It spikes — right after a product drop, right when something funny happens on stream, right when a popular creator says something quotable. That's precisely the moment a chat feed can't afford to stutter, and precisely the moment a naive implementation is most likely to. What I measured Rather than guess whether this mattered, I built a way to test it directly. LiveShop has a "Simulate spike" button that fires 500 messages instantly, plus a live FPS readout using requestAnimat