标签：#frontend

Most developers learn CSS specificity once. They remember: #id > .class > div Then move on. Until one day… Everything looks correct. The CSS is present. The selector is correct. The z-index looks higher. And yet the UI is broken. That’s when CSS specificity stops being a beginner topic and becomes a production debugging problem. The Production Incident That Started This Recently, I was working on a microfrontend application. Everything worked fine initially. I opened a page, launched a modal and the UI looked correct. Then I navigated to another microfrontend. Its CSS got loaded. After returning to the original microfrontend, suddenly: ❌ Modal appeared behind page content ❌ Overlay behaved incorrectly ❌ z-index looked correct but wasn't working DevTools showed my CSS rule still existed. Yet another CSS rule was winning. The culprit? CSS Specificity. 🧠 What is CSS Specificity? CSS specificity is the algorithm browsers use to decide: Which CSS rule wins when multiple rules target the same element. Browsers don't simply apply: "The last CSS rule." That's one of the biggest misconceptions. Specificity is calculated first. Only when specificity is equal does source order become important. ⚔️ Example .modal { z-index : 9999 ; } .some-library .modal { z-index : 100 ; } HTML: <div class= "some-library" > <div class= "modal" ></div> </div> Many developers expect: .modal to win because the value is larger. But CSS doesn't compare values first. It compares selectors. 🧮 How Specificity Works Specificity is usually represented as: ID - CLASS - TYPE Specificity Table Selector Specificity * 0-0-0 div 0-0-1 .modal 0-1-0 [type="text"] 0-1-0 :hover 0-1-0 #dialog 1-0-0 Inline Style Highest MDN defines specificity as the weight browsers calculate to determine which declaration gets applied when multiple selectors match the same element. Example Calculation Selector: button .primary Contains: button → 0 -0-1 .primary → 0 -1-0 Total: 0-1-1 Another selector: #header button .primary Contai

This is the third and final part of my first React project for the Frontend Mentor's Digital Bank Landing Page Challenge . I'm excited to say that I finally finished it. Live Demo: https://bank-landing-page-react-gmtz.vercel.app/ Github Repo: https://github.com/ayra-baet/bank-landing-page-react Learning Component Reusability Beyond Small Elements At first, I thought this final part would mostly involve finishing the Articles and Footer. But while building, I realized something more important: React's reusability isn't limited to small UI elements like buttons or cards; entire sections can be reusable too. Earlier in this project, I reused a single Button component across the header, hero, and footer. This time, I noticed that the Features and Articles sections shared almost the same structure: both had an h2 heading both used a grid layout both wrapped child components The only real difference was that the Features section included a description paragraph. That immediately felt like a perfect use case for a reusable component with conditional rendering. So I created a reusable Section component: function Section ({ backgroundColor , title , description , children }) { return ( < section className = { backgroundColor } aria-labelledby = { ` ${ title } -heading` } > < div className = "container section__container" > < div className = "section__header" > < h2 id = { ` ${ title } -heading` } > { title } </ h2 > { description && < p > { description } </ p > } </ div > < div className = "section__grid" > { children } </ div > </ div > </ section > ); } Then I reused it inside my LandingPage component: function LandingPage () { return ( <> { /* other LandingPage JSX */ } < section id = "features" > < Section backgroundColor = "section--gray-100" title = "Why choose Digitalbank?" description = "We leverage Open Banking to turn your bank account into your financial hub. Control your finances like never before." > < Features /> </ Section > </ section > < section id = "articl

A meta tag audit is a pile of binary checks. Title present, yes or no. Title in range, yes or no. Description present. One H1. og:image set. Canonical present. Run them all and you get a few dozen booleans. The problem is that a wall of green and red checkmarks does not motivate anyone. People glance at it, feel vaguely bad, and close the tab. A single number does motivate. "You are at 62" is a thing a person will act on. But a number only works if it is honest, and a number is only honest if it is explainable. So we set one hard constraint before writing any scoring code: every point a page loses has to trace back to a named check with a specific fix. No mystery deductions. If you are at 62 and not 100, the tool can point at the exact items that cost you the other 38. That constraint shaped every decision that followed, and it is the reason the rubric looks the way it does. This is the write-up of how we got from a pile of booleans to a number we are willing to defend. Choosing the dimensions and the weights The first decision was how to group the checks. We landed on five dimensions, each with a fixed weight, and the overall score is their weighted average: Basic meta, 30 percent. Title tag and meta description. Headings, 20 percent. H1 count and heading-level hierarchy. Open Graph, 20 percent. og:title, og:description, og:image, og:url. Twitter Card, 15 percent. twitter:card, twitter:title, twitter:description, twitter:image. Technical, 15 percent. Canonical, html lang, viewport, robots. The weights are the opinionated part, and they encode what we actually believe about how pages get found now. Basic meta gets 30 percent, the largest slice, because the title and description are the strings an AI engine quotes when it summarizes or cites a page. They are the highest-value characters on the whole page, so a gap there should cost the most. Technical gets the smallest slice at 15 percent, but for a subtler reason than "it matters least." Technical failures are rarer

We run an app where you describe a task and an AI agent does it. The first step after you hit submit is a planning call: POST /api/web/tasks/plan, which turns your free text into a structured plan the agents can pick up. One submit should mean one plan. While testing locally I noticed two plan requests going out per submit. Same payload, fired back to back. The agents handled it fine because the second plan just overwrote the first, but it bothered me. A doubled write is a doubled write, and the next one might not be idempotent. First wrong guess: a double-click My first assumption was the obvious one. The user double-clicks, or the button is not disabled during the request, so two clicks sneak through. I added the disabled state, watched the network tab, and got two requests from a single click. So it was not the button. The thing I had stopped seeing The submit logic lived in an effect. When the form phase flipped to submitting, the effect ran and fired the plan call. There was a second effect too: when the user changed the tier or output format mid-flow, a matching effect re-planned, because a different tier means a different plan. Neither effect had any guard against running twice. And in development, React StrictMode mounts every component, unmounts it, and mounts it again, on purpose, to surface effects that are not safe to re-run. My plan effect was exactly the kind of effect StrictMode is built to expose. The double mount fired it twice. The detail that made it click: I built the app for production and watched the network tab there. Exactly one request. The double was a development-only artifact of StrictMode doing its job. The bug was never in production traffic, but the fact that StrictMode could double it meant my effect was not safe, and an unsafe effect is a latent bug waiting for a real remount. The fix: ref guards set before the await, not reset in cleanup The instinct is to reach for a boolean. The catch is where you reset it. If you reset the guard

Liquid syntax error: Variable '{{% raw %}' was not properly terminated with regexp: /\}\}/

Hello Developers! 👋 I recently completed my Bachelor of Computer Applications (BCA). For my final-year project, I built an Online Quiz Platform — a web application designed to make both conducting and taking quizzes simple, interactive, and efficient. This project allowed me to apply the concepts I learned throughout my degree and gain practical experience in full-stack web development. 🌐 Live Demo Project Link: nitinsmali / Online_Quiz My final year project is an Online Quiz Web Application designed for an user-friendly experience across devices. 🌐 Online Quiz System 🚀 Live Demo 🔗 https://onlinequiz-project.xo.je/online_quiz/ 🧠 About The Project The Online Quiz System is a full-stack web application designed to provide an interactive and engaging online quiz experience. Users can register, log in, attempt quizzes, track scores, and view leaderboard rankings in real time. This project was developed to strengthen concepts in: Full-Stack Web Development Frontend & Backend Integration Database Management Authentication Systems Hosting & Deployment Real-World Application Flow ✨ Features 🔐 Authentication System User Registration Secure Login System Session Handling Password Management 📚 Quiz Management Category-Based Quizzes Dynamic Questions Timer-Based Quiz System Automatic Score Calculation 🏆 User Performance Leaderboard Rankings User Profile Dashboard Quiz Score Tracking 💬 Feedback System Feedback Submission Database Storage 📱 Responsive UI Mobile-Friendly Design Interactive User Experience Clean Interface 🛠️ Tech Stack Frontend HTML5 CSS3 JavaScript Backend PHP Database MySQL Development Tools XAMPP Git & GitHub Hosting InfinityFree 📂 Project Structure … View on GitHub 📌 Project Overview The Online Quiz Platform is a web-based application that allows users to participate in quizzes, answer multiple-choice questions, and receive instant results. The primary goal of this project was to create a system that eliminates manual quiz evaluation and provides a smooth online

Building a Resilient Real-Time Chat System with WebRTC, Faye, and WebSockets: A Practical End-to-End Building a Resilient Real-Time Chat System with WebRTC, Faye, and WebSockets: A Practical End-to-End Tutorial In this tutorial you’ll build a small, resilient real-time chat system that works across browsers, mobile devices, and constrained networks. You’ll learn how to architect a client/server model with signaling, leverage WebRTC data channels for peer-to-peer messaging when available, and fall back to a robust WebSocket-based relay when direct peer connections fail. The focus is on practical patterns, testable code, and observability to keep a live chat running under load or flaky networks. Key takeaways Understand when to use WebRTC data channels vs. WebSocket relays for real-time chat Implement a signaling server to establish WebRTC connections safely and efficiently Build a resilient message delivery pipeline with idempotent processing and retry semantics Instrument the system for latency, jitter, and message loss to avoid silent failures Test end-to-end flows with simulated network conditions and automated resilience tests Overview of architecture Clients (web and mobile) connect to a signaling server to negotiate WebRTC peers and/or WebSocket sessions. If a direct WebRTC peer connection is possible, use a data channel for low-latency chat messages. If WebRTC is blocked (firewalls, NAT), route messages through a relay server using WebSockets. The relay can also bridge peers that can’t connect directly. A lightweight message store (in-memory for demo, with an optional Redis-backed queue in production) provides at-least-once delivery guarantees and retry capabilities. Observability: metrics for connection attempts, handshake times, message delivery latency, retry counts, and error rates. Tracing spans help diagnose cross-service flows. Tech stack (example) Frontend: TypeScript, WebRTC DataChannel, WebSocket Backend: Node.js with Express for signaling API, ws or

Building a Robust Real-Time Chat System with WebRTC DataChannels and a Sovereign State Channel Building a Robust Real-Time Chat System with WebRTC DataChannels and a Sovereign State Channel In this tutorial, you’ll build a practical, end-to-end real-time chat system that runs in the browser and uses WebRTC DataChannels for peer-to-peer message delivery, complemented by a lightweight sovereign state channel (SSC) to handle presence, typing indicators, and simple message syncing when peers go offline. The goal is to enable low-latency messaging without a centralized server for message routing, while still providing resiliency and a predictable UX through a minimal, well-defined control plane. What you’ll learn How WebRTC DataChannels work and how to negotiate connections between peers. How to implement a lightweight presence and typing indicator system without a traditional server. How to design a simple optimistic UI with local echo and conflict-free merging when peers reconnect. How to wire up signaling using a minimal HTTP-based relay (for initial handshake) and fall back to a local-only mode for true peer-to-peer operation. Practical considerations for security, NAT traversal, and offline resilience. Overview and architecture Peers: Two or more browsers that discover each other and exchange WebRTC offer/answer via a signaling channel. DataChannel: Reliable ordered data channel for chat messages. Sovereign State Channel (SSC): A small, independent state machine that runs in each peer to track presence, typing, last-seen, and a local message log. It syncs state with peers opportunistically when connectivity exists, and retains messages locally if the remote is offline. Signaling: A simple public signaling endpoint (could be a WebSocket or HTTP POST/GET) used only to exchange session descriptions and ICE candidates at first. After a peer-to-peer path is established, signaling traffic should go dormant unless reconnecting. Persistence: LocalStorage or IndexedDB to per

What are HTML Tags? HTML documents consist of a series of elements, and these elements are defined using HTML tags. HTML tags are essential building blocks that define the structure and content of a webpage. HTML tags are composed of an opening tag, content, and a closing tag. The opening tag marks the beginning of an element, and the closing tag marks the end. The content is the information or structure that falls between the opening and closing tags. For Example: <h1>Hello</h1> HTML Elements HTML elements are the essential components of a webpage and provide structure, organization, and meaning to content. Elements are defined by HTML tags which define how different types of content will appear in a browser window. For Example: <p> This is an element. </p> Block-Level Elements A page’s entire width is occupied by a block-level element. The document always begins with a new line. An HTML page generally has three tags i.e., <html> , <head> , and <body> tag. Example: The following is an unordered list, an example of block-level elements. List item 1 List item 2 Inline Elements A block-level element’s inner content can be formatted with an inline element by adding links and stressed strings. These elements help you to format text without disrupting the content’s flow. Example: The following code creates a hyperlink to a URL. It is an inline element because it is used within paragraphs, headings, or other text content to create hyperlinks. It does not disrupt the flow of the document by forcing new lines before or after its content. <a href="https://www.example.com"> Visit Example </a> CSS Properties CSS properties are used to decorate your web page and assign a unique behavior to your HTML element. CSS properties are the foundation of web design, used to style and control the behaviour of HTML elements. They define how elements look and interact on a webpage. Used to control layout, colors, fonts, spacing, and animations on web pages. It is essential for making web pa

Building a Self-Healing Data Pipeline with Event-Driven Idempotence Building a Self-Healing Data Pipeline with Event-Driven Idempotence A senior engineer’s sketchbook: a project I shipped to production that turned brittle batch jobs into resilient, observable, and self-healing data pipelines. The core idea is to treat data processing as an event-driven system with strict idempotence guarantees, automated reconciliation, and graceful recovery. The result was a measurable reduction in retry storms, faster time-to-insight for dashboards, and a foundation that scales with data volume without blowing up operator toil. Overview and motivation Problem: A data ingestion workflow relied on nightly batch jobs that often overlapped, causing late-arriving data, duplicate processing, and fragile error handling. Observability was ad-hoc, retries were uncoordinated, and operators spent days triaging failures. Solution: Reframe the pipeline around event streams with idempotent processing, push-based checkpoints, and a lightweight orchestration layer that can recover from partial failures without human intervention. Impact: 40% reduction in data latency for dashboards, 60% fewer retry-induced incidents, and a robust foundation for future scaling. Architecture at a glance Data sources emit events to a durable message bus (Apache Kafka or a cloud equivalent). A set of microservices subscribes to the stream, each performing a deterministic, idempotent transformation. A central idempotence layer guarantees that repeated events do not mutate state or produce duplicate side effects. A reconciliation service audits the target data store against the event log and replays or compensates as needed. Observability stack with per-event tracing, lineage, and anomaly detection. Key design principles Idempotence by default: Every processing step should be safe to replay. Use deterministic keys and avoid non-idempotent side effects without compensation. Exactly-once semantics where feasible: Impleme

Building a Real-Time WebSocket-Based Chat Server with Rust and WASM Building a Real-Time WebSocket-Based Chat Server with Rust and WASM In this tutorial, you’ll build a scalable, real-time chat server using Rust on the backend, WebSocket for bidirectional communication, and WebAssembly (WASM) for a fast, interactive frontend. You’ll learn how to structure a minimal, production-ready system with clean code, testable components, and practical deployment considerations. Overview Goals: Real-time messaging with low latency Safe, fast backend implemented in Rust Frontend capable of connecting via WebSocket and rendering messages efficiently Basic authentication, message persistence, and reconnection handling Testing strategies for end-to-end and unit tests Tech stack: Backend: Rust, Warp or Actix-Web, tokio, tungstenite or tokio-tungstenite for WebSocket Frontend: Rust + WASM (via wasm-bindgen) or a lightweight JS client Persistence: SQLite or PostgreSQL for message history Deployment: containerized (Docker), with a simple reverse proxy (Nginx) in front Prerequisites Rust toolchain installed (rustup, cargo) Basic knowledge of Rust and asynchronous programming Node.js/npm if you choose a JS frontend (optional since you can use Rust WASM) SQLite or PostgreSQL installed locally for testing 1) System design and data model Clients connect via WebSocket and join a chat room. The server maintains in-memory state for active connections and broadcasts messages to all connected clients in the same room. Messages are persisted to a database for history. Reconnection: clients reconnect on network hiccups; server replays recent history upon join. Scalability note: for multiple instances, use a message broker (Redis pub/sub) to broadcast messages between workers. Data model (simplified) Users: id, username Rooms: id, name Messages: id, room_id, user_id, content, timestamp 2) Backend: Rust WebSocket server Key components HTTP upgrade to WebSocket Per-room broadcast hub Connection manag

My talk “Frontend Ruby on Rails with Glimmer DSL for Web” went well at RubyConf Austria 2026 . Especially given that after the talk, Chad Fowler (the starter of RubyConf and famous book author of The Passionate Programmer , among other books) told me “good job”, and Obie Fernandez (a famous entrepreneur and book author of The Rails Way , among other books) told me he will try Glimmer DSL for Web because he doesn’t like React.js. Presentation Slides Direct Original Long Link: https://docs.google.com/presentation/d/e/2PACX-1vQ9oBnZpzK_eicVLGSqDmVzhsXsblONEKepnw5_xGHGXTM52JSjaS_ObYUJbx-zkb1M2ul9N2A2MnvU/pub?start=false&loop=false&delayms=60000&slide=id.g140fe579a5a_0_0 Glimmer DSL for Web GitHub: https://github.com/AndyObtiva/glimmer-dsl-web I ran a poll at the beginning of my talk, and everyone agreed that they love Ruby and that Ruby is superior to JavaScript, plus the majority indicated that they’d like to write less JavaScript and more Ruby during their Rails web development work. Several attendees told me my talk was great after the talk. Charles Nutter had me help him with his JRuby workshop afterwards by showcasing my other Glimmer project, Glimmer DSL for SWT , which runs on JRuby. In about 1 minute, I scaffolded a Hello World desktop app from scratch and then packaged it as a native executable on the Mac. Attendees were impressed. So, I’ve participated in presenting 2 events at this conference. I am very grateful for having such a great experience at RubyConf Austria 2026 overall, especially given that it uniquely included several classical/neoclassical/jazz concerts in between talks that entertained us and relaxed us. Chad Fowler concluded the conference with a beautiful Jazz piano and sax performance. Shout out to Hans Schnedlitz, Muhamed Isabegovic, and Zuzanna Kusznir (plus everyone who helped out) for organizing and hosting such a special Ruby conference!!! Original blog post version: https://andymaleh.blogspot.com/2026/06/rubyconf-austria-2026-frontend-r

Security is not a feature you bolt on after launch. It is not the CISO's problem alone. It is not a checklist you run through before a compliance audit. It is a shared responsibility across every engineer, every team, every layer of the stack. This guide walks through the three layers where most web vulnerabilities live — Frontend , In Transit , and Backend — using a threat modeling lens: thinking like an attacker so you can build like a defender. What Is Threat Modeling? Before writing a single line of defensive code, you need to think systematically about your system's attack surface. Threat modeling is the process of: Identifying entry points — Where does untrusted data enter your system? Form inputs, URL parameters, uploaded files, third-party APIs? Assessing potential impact — If this entry point is exploited, what can an attacker access or do? Designing defenses proactively — Before the exploit occurs, not after. It shifts your mindset from "let's hope nothing breaks" to "let's assume something will be tried." Part 1 — Frontend Security: Stopping XSS What Is XSS? Cross-Site Scripting (XSS) happens when untrusted data is rendered as executable code in a browser. An attacker injects a script; your application runs it on behalf of your users. The consequences are severe: session hijacking, credential theft, defacement, redirects to malicious sites. There are three flavours: ┌─────────────────────────────────────────────────────────────────┐ │ XSS TYPES │ ├──────────────────┬──────────────────────────────────────────────┤ │ Stored XSS │ Malicious script saved in your DB, │ │ │ served to every user who loads that data. │ │ │ Most dangerous — persistent and broad. │ ├──────────────────┼──────────────────────────────────────────────┤ │ Reflected XSS │ Script lives in a URL parameter. │ │ │ Requires tricking the user into clicking │ │ │ a crafted link. Temporary, per-request. │ ├──────────────────┼──────────────────────────────────────────────┤ │ DOM-Based XSS │ Entir

We talk about pagination as if it's purely a backend concern – the database does the heavy lifting, the API returns pages, and the frontend just renders them. But in 2026, that mental model is outdated. The frontend now owns more of the data-fetching lifecycle than ever: server components prefetch, client caches hydrate, optimistic updates mutate, and streaming responses trickle in chunk by chunk. The choice between cursor pagination and offset pagination has real consequences for how you write your React components, how your cache behaves, how scroll feels on the phone, and what happens when a user navigates back. This post is about those tradeoffs – from the frontend seat. The Landscape Has Changed A few things are different in 2026 that make this conversation more nuanced than it was three or four years ago: React Server Components are mainstream. Data fetching happens on the server in many apps, which shifts where pagination state lives and how navigation works. TanStack Query is the de-facto standard for client-side async state, with first-class infinite query support baked in. The "infinite scroll vs pagination" debate is mostly settled — infinite scroll wins for feeds and content-heavy apps; numbered pages win for dense data tables. Your pagination strategy should serve that decision, not fight it. LLM-powered search and filtering are becoming common, and those use cases have their own quirks around pagination stability. Edge caching and CDN-level pagination mean that certain offset-paginated responses can be cached by URL – a genuine advantage offset still holds. What Frontend Engineers Actually Care About When you strip away the SQL theory, here's what the pagination choice actually affects on the frontend: 1. Cache Key Design With offset pagination, the cache key is simple and predictable: posts?page=3&limit=20 . Every page is independently cacheable by URL — your CDN loves this. TanStack Query, SWR, and Apollo all handle this naturally. // Offset — clean,

As the web has evolved, so have the strategies for rendering content in browsers. Two of the most widely used approaches today are Server-Side Rendering (SSR) and Client-Side Rendering (CSR). Each has its strengths and trade-offs, and understanding when to use one over the other is key to building fast, scalable, and user-friendly applications. This article explores the key differences, benefits, and common use cases of SSR and CSR, with practical examples. What is Client-Side Rendering (CSR)? Client-Side Rendering means that the browser downloads a minimal HTML shell and renders the content using JavaScript. Most of the work, fetching data, templating, and updating the DOM, happens in the user's browser after the page loads. Benefits Rich interactivity: Ideal for dynamic single-page applications (SPAs). Fast navigation after initial load: Once loaded, switching between views is instantaneous. Great for app-like experiences: Think dashboards, SaaS tools, or email clients. Drawbacks Slower initial page load: The user sees a blank screen until JavaScript loads and executes. SEO challenges: Search engines may struggle to index dynamic content, unless SSR or prerendering is used. Poor performance on slow devices: All rendering logic happens in the browser. What is Server-Side Rendering (SSR)? Server-Side Rendering generates the full HTML on the server for each request. When a user visits a page, the server fetches the data, compiles the HTML, and sends it to the browser, which then hydrates the app into an interactive component. Benefits of SSR: Fast time-to-first-byte (TTFB): HTML is ready and shows up immediately. Better SEO: Search engines receive fully rendered pages. Good for public-facing content: Blogs, marketing sites, e-commerce pages. Drawbacks Increased server load: Every page request triggers rendering logic. Longer time to interactivity: HTML loads quickly, but hydration takes extra time. Requires server infrastructure: Cannot be purely deployed as static f

Frontend request code often involves repetitive state management. This article compares Axios and alova through a paginated list example, analyzing how request strategization reduces boilerplate and when it's a good fit. The Pattern: Paginated List in Two Ways A common requirement: fetch a user list with pagination. Approach 1: Axios const [ data , setData ] = useState ([]); const [ page , setPage ] = useState ( 1 ); const [ total , setTotal ] = useState ( 0 ); const [ loading , setLoading ] = useState ( false ); const [ error , setError ] = useState ( null ); const fetchUsers = async ( currentPage ) => { setLoading ( true ); setError ( null ); try { const res = await axios . get ( ' /api/users ' , { params : { page : currentPage , pageSize : 10 }, }); setData ( res . data . list ); setTotal ( res . data . total ); } catch ( e ) { setError ( e . message ); } finally { setLoading ( false ); } }; useEffect (() => { fetchUsers ( page ); }, [ page ]); This pattern appears in nearly every data-fetching component. The actual business logic — GET /api/users — occupies a single line. The rest is infrastructure: state declarations, loading toggles, error handling, and effect management. Approach 2: alova with usePagination const { data , total , loading , error , page , pageSize , nextPage , prevPage , } = usePagination ( ( page , pageSize ) => alovaInstance . Get ( ' /api/users ' , { params : { page , pageSize }, }), { page : 1 , pageSize : 10 } ); Both implementations are functionally identical. The key difference is where the state management logic lives: in the component (Axios) vs. inside the hook (alova). What Changed Component of Axios version Handled by alova loading state + toggling Managed internally by usePagination error state + try/catch Managed internally by usePagination data state + assignment Returned as reactive value page state + change handler Built-in nextPage / prevPage total state extraction Extracted from response automatically useEffect dependency tr

There is a fascinating psychological phenomenon in modern software engineering: the relentless pursuit of the upgrade. As frontend developers, we are conditioned to believe that speed and efficiency come from adopting the newest technologies. We migrate from Webpack to Vite to shave seconds off our build times. We transition between UI libraries in search of better reconciliation algorithms. We constantly audit our CI/CD pipelines. We treat performance as a destination we must reach by continuously adding or swapping out the moving parts of our toolchain. Yet, amidst this endless cycle of optimization, we consistently overlook the most sophisticated, highly optimized piece of software in our entire stack. It is the software you are using to read this article right now: the web browser. The Underappreciated Engine The modern browser is an absolute marvel of engineering. Over the past decade, teams of the world's most talented systems engineers have engaged in a fierce arms race to optimize browser engines like V8, SpiderMonkey, and JavaScriptCore. Today’s browsers feature Just-In-Time (JIT) compilation, sophisticated garbage collection, and massively parallelized rendering pipelines. They are capable of executing highly complex, interactive applications with a level of fluidity that was unimaginable a few years ago. However, when we evaluate developer tools—specifically the online IDE or the browser-based code editor—there is a stark contrast. The environments we use to write and test our code rarely reflect the speed of the engine they run inside. Why the Standard Web IDE Misses the Mark If you want to quickly prototype a component or isolate a bug, you will likely reach for a frontend playground or a popular Replit alternative. What happens next is often a masterclass in friction. The environment feels heavy. The interface is cluttered with features you didn't ask for. As you type, the live code editor experiences micro-stutters. The instant live preview isn't actu

A year ago, I wrote about our first year with micro-frontends . It was a frank retrospective: the win was framework autonomy and independent deploys, the cost was 20 GB of RAM during local dev, 15–20 minute deploy cycles, and a monorepo that became its own coordination tax. The closing line was the honest one — if I could choose again, I would think carefully about using Microfrontend or not. This article is the follow-up the previous one didn't write: what we actually built around Single-SPA to make it work. Not the architecture diagram. The workarounds. The dead code that's not really dead. The regexes we wish we didn't need. The .NET app no Single-SPA tutorial mentions. The browser-side singletons we use as message buses. The dev experience we documented and the parts we didn't. If you're evaluating Single-SPA in 2026, this is the article I wish I'd had a year ago. Where we left off The platform is a Single-SPA monorepo with seven in-repo apps and five shared packages. On top of that sit roughly ten standalone repositories for newer features, loaded at runtime via SystemJS import maps. Shared dependencies — React 18.2, ReactDOM, axios, react-bootstrap, single-spa 5.9.5 — are served from CDN and externalized in every webpack config. The architecture is textbook. The reality, a year in, is that the textbook stops where the workarounds start. The shell isn't where you think it is If you read our frontend repo you'd conclude the shell is whatever directory has single-spa in its package.json . That's where Single-SPA gets configured. That's where start() is called. There's even a webpack entry that, until recently, was producing an index.ejs HTML template. That HTML template is dead code. The real shell — the HTML the browser actually receives, in every environment — is rendered by an ASP.NET MVC application, in a Razor view. The frontend repo ships JavaScript modules. The .NET host ships the page that loads them. That's the unlock. Once you see this, every other work

The plan was simple Take the specs we'd written, turn them into Jira epics, stories and subtasks, and start sprinting. It took longer than expected. Here's what actually happened — and what I learned. Why automate Jira setup at all? HandyFEM has 8 epics, 37 stories and ~160 subtasks. Creating that manually would take a full day and be error-prone. More importantly: the specs were already written in a structured format. Translating structured data into Jira issues is exactly the kind of repetitive task that should be automated. So I wrote a Node.js script to do it via the Jira REST API. Problem 1 — Jira Spaces ≠ Jira Classic My account uses Jira Spaces — Atlassian's newer interface. The classic Jira has CSV import built in. Jira Spaces doesn't. This isn't documented anywhere obviously. You discover it by looking for the import option and not finding it. Lesson: always check which version of Jira you have before planning your workflow. The API still works, but some endpoints behave differently. Problem 2 — The API token wasn't the issue (until it was) First attempt: connection error. I assumed it was the token. It wasn't — it was an expired token from a previous session. Regenerating it fixed the connection. The real lesson: curl -u email:token https://your-domain.atlassian.net/rest/api/3/myself is the fastest way to verify auth before running any script. Problem 3 — customfield_10014 doesn't exist in team-managed projects In classic Jira, linking a story to an epic uses a field called customfield_10014 (Epic Link). In team-managed projects (Jira Spaces), this field doesn't exist. You use parent instead. The error was clear once I saw it: "customfield_10014" : "Field cannot be set. It is not on the appropriate screen, or unknown." Fix: remove customfield_10014 , keep only parent: { id: epicId } . Problem 4 — Board search doesn't work for team-managed projects The Agile API endpoint /rest/agile/1.0/board?projectKeyOrId=HFM returns empty for team-managed projects, even

CSS @function - DEV Community CSS just got its biggest quality-of-life upgrade since custom properties. For years, if you wanted... dev.to