Best of Web Development — April 2026

  1. 1
    Article
    Avatar of csstipCSS Tip·4w

    Convert Complex SVG Shapes into CSS

    An SVG-to-CSS converter tool has been updated to support multiple SVG path elements, not just a single path. It merges multiple path elements by concatenating their 'd' attribute values and converts them into a single CSS shape() function, producing responsive single-element code. A border-only version using border-shape is also available (Chrome-only). The technique works when paths form separate portions of the same shape, share the same color, and have no transforms applied. The author emphasizes that shape() is not a replacement for SVG but a proof-of-concept tool.

  2. 2
    Article
    Avatar of infoworldInfoWorld·4w

    HTMX 4.0: Hypermedia finds a new gear

    HTMX 4.0 is a major release that replaces the legacy XHR transport layer with the modern Fetch API, enabling native streaming of HTML fragments via ReadableStream. Key changes include: Idiomorph DOM morphing algorithm now bundled in core (was an extension in 2.x), explicit prop inheritance replacing implicit inheritance, removal of the brittle localStorage history engine, status-specific error swapping syntax (e.g. hx-status:404), a new <hx-partial> tag for cleaner multi-target server responses, and native View Transitions API integration. Despite HTMX 2.0 being declared the final version, the team jumped to 4.0 to honor the 'no 3.0' promise while delivering a refactor that adds more power with less complexity, keeping the library at ~14KB.

  3. 3
    Article
    Avatar of mdnblogMDN Blog·5w

    Under the hood of MDN's new frontend

    MDN rebuilt its frontend from a React SPA (called 'yari') to a web components-based architecture using Lit, eliminating technical debt accumulated from ejected Create React App configs, entangled CSS, and the fundamental mismatch between a React wrapper and static documentation content. The new stack uses Lit web components for islands of interactivity, custom server components for static HTML templating, and Rspack (a Rust-based Webpack-compatible bundler) for builds. Key architectural wins include lazy-loading web components by name convention, shipping only the CSS needed per page, progressive enhancement via Declarative Shadow DOM, and a development environment that starts in 2 seconds instead of 2 minutes. The Baseline project guided browser compatibility decisions throughout.

  4. 4
    Article
    Avatar of webweb.dev·2w

    New to the web platform in April

    Chrome 147 and Firefox 150 shipped to stable in April 2026, bringing several new web platform features. Highlights include the contrast-color() CSS function reaching Baseline (returns black or white for maximum contrast against a given color), scroll-driven animation range properties becoming Baseline, the ariaNotify() method for screen reader announcements, auto sizes for lazy-loaded images, element-scoped view transitions, the CSS border-shape property for non-rectangular borders, SVG textPath path attribute support, modulepreload for JSON and CSS modules, and Math.sumPrecise. Beta releases (Chrome 148, Firefox 151, Safari 26.5) preview name-only container queries, lazy loading for video/audio, CSS container style queries, and the :open pseudo-class.

  5. 5
    Article
    Avatar of lobstersLobsters·4w

    The Business Case for Vanilla JS

    A developer argues for using Vanilla JS and native browser APIs over SPA frameworks like React for production web apps. The core argument is that React's abstraction leaks heavily (hooks, hydration, component trees), browser APIs are stable and well-documented, and plain JS is simpler to maintain long-term. The author shares personal experience abandoning Preact mid-project in favor of direct DOM manipulation, finding it easier and more reliable. The post challenges the assumption that modern frameworks are necessary or superior for most use cases.

  6. 6
    Article
    Avatar of telerikTelerik·3w

    What’s Next for React in 2026

    Analysis of the State of React 2025 survey results reveals where the ecosystem is heading into 2026. React Server Components have ~45% adoption but only ~33% positive sentiment, while Suspense leads in both adoption and satisfaction. SPAs remain dominant at 84%, with newer patterns like streaming SSR and islands architecture still niche. Developer interest is growing around upcoming Canary APIs like ViewTransition and Activity. The UI component library space remains fragmented, with the top libraries sitting at 50-57% usage. AI tooling is changing how React code is written but not the fundamental architectural decisions teams must make.

  7. 7
    Article
    Avatar of devtoDEV·4w

    Two Ways to Think of AI Without Outsourcing Your Mind

    Two analogies for thinking about AI as a developer tool without losing your own skills. First, treat AI like a calculator in math class — build foundational skills before relying on it to speed up work. Second, think of yourself as the surgeon in an operating room, with AI as supporting staff: you coordinate and stay in charge. The core message is that coding with AI still requires real skills first.

  8. 8
    Article
    Avatar of devstogetherstrongDevs Together Strong·4w

    Four Lines in <head> Changed My Site Speed

    Adding four HTML resource hint directives — preload, prefetch, and preconnect — to the <head> element can reduce Largest Contentful Paint (LCP) by around 600ms. These <link> attributes give the browser early context about critical resources, improving page load performance with minimal code changes.

  9. 9
    Video
    Avatar of codeheadCodeHead·4w

    Frontend Concepts I Bet You DIDN'T KNOW

    A quick overview of frontend concepts that many developers use but don't fully understand. Topics covered include hydration, partial hydration, islands architecture (Astro.js), streaming SSR, React Fiber and concurrent rendering, time slicing, the pitfalls of useMemo and stale closures, and the JavaScript event loop's microtask vs macrotask execution order.

  10. 10
    Video
    Avatar of kevinpowellKevin Powell·5w

    I'm a CSS noob

    A developer shares a critical YouTube comment calling them a 'CSS noob' for allegedly promoting bad practices and obfuscating code. The post reflects on receiving negative feedback about CSS advice shared publicly.

  11. 11
    Article
    Avatar of laravelLaravel·4w

    How I Built an AI-Powered CRM with Laravel in a Week

    A senior freelance PHP developer shares how he built an AI-powered CRM MVP for an emergency response center in under a week using Laravel. The stack included Laravel Herd for local development, Laravel Cloud for CI/CD and deployment, Tailwind CSS and Alpine.js for the frontend, and the Laravel AI SDK with OpenAI Whisper for voice transcription. Push notifications via Laravel WebPush enabled a PWA experience indistinguishable from a native app. The project's success has the developer considering turning it into a multi-tenant micro-SaaS.

  12. 12
    Article
    Avatar of allshadcnAll ShadCN·3w

    Termcn

    Termcn is a component library that brings the shadcn/ui design system to terminal user interfaces. Created by Aniket Pawar, it is now listed on AllShadcn.

  13. 13
    Article
    Avatar of wordpressdevWordPress Developer·5w

    @wordpress/build, the next generation of WordPress plugin build tooling

    @wordpress/build is a new build tool for WordPress plugins that replaces webpack and Babel with esbuild, offering significantly faster builds and zero-config convention-based discovery. It auto-generates PHP script registration files from package.json conventions, supports scripts, script modules, and styles in a single pass, and already powers all 100+ Gutenberg packages. The tool uses fixed folder conventions (packages/, routes/, blocks/ proposed) and a namespace model for cross-plugin dependency externalization. The long-term plan is for it to become the internal engine of @wordpress/scripts, so wp-scripts build continues to work but gets faster with auto-generated PHP. The API is still being shaped and the team is actively seeking feedback from plugin developers, especially around block plugin structure, monorepo-free setup, and the externals/namespace model.

  14. 14
    Article
    Avatar of frontendmastersFrontend Masters·2w

    Auto `sizes` on Images – Frontend Masters Blog

    The `sizes` attribute on HTML images is difficult to write and maintain by hand. The post advocates for using the `auto` sizes feature as the practical solution for responsive images.

  15. 15
    Article
    Avatar of googleossGoogle Open Source Blog·4w

    Jaspr: Why web development in Dart might just be a good idea

    Jaspr is an open source web framework for Dart that brings a Flutter-like development experience to web development, supporting SSR, SSG, and client-side rendering in a single cohesive framework. Created by Kilian Schulte as a solo project starting in 2022, Jaspr has grown to power the official dart.dev, flutter.dev, and docs.flutter.dev websites serving over a million monthly active users. The framework leverages Dart's unique compiler architecture to offer stateful hot-reload, full-stack debugging, and production builds via dart2js or dart2wasm (WebAssembly). A jaspr_content plugin handles content-driven sites from Markdown, currently powering over 3,900 documentation pages. The author argues Jaspr is ideal for Flutter teams wanting fast, SEO-friendly websites while sharing business logic and models across mobile and web codebases.

  16. 16
    Article
    Avatar of astro_sourceAstro·1w

    Astro 6.2

    Astro 6.2 ships several new features: a redesigned SVG optimizer API with a pluggable SvgOptimizer interface (replacing the old svgo flag), an experimental custom logger with built-in JSON output suited for coding agents, and a new getFontFileURL() helper for accessing font data during prerendering (useful for OG image generation with Satori). Minor additions include allowedHosts propagation to adapter preview servers and a new 'jsx' value for compressHTML. The release also previews Astro v7 alpha, which upgrades to Vite 8 and promotes the Rust-based compiler to the default, replacing the previous Go compiler for faster build times.

  17. 17
    Video
    Avatar of bytemonkByteMonk·3w

    7 API Types Every Developer Should Know (REST, gRPC, GraphQL & More)

    A breakdown of seven API types developers should know: REST (stateless, HTTP-based, ideal for most CRUD apps), SOAP (XML-based, enterprise-grade security for banking/healthcare), gRPC (binary protocol buffers over HTTP/2, up to 10x faster, supports streaming), GraphQL (single endpoint, fetch exactly what you need, self-documenting schemas), Webhooks (event-driven reverse callbacks), WebSockets (persistent bidirectional connections for real-time apps), and WebRTC (peer-to-peer browser communication for video/audio with no server in the middle). Each type is explained with real-world use cases like Netflix, GitHub, Stripe, and Zoom.

  18. 18
    Article
    Avatar of twirThis Week In React·5w

    This Week In React #276: Next.js, Boneyard, MUI, React Router, Ink, shadcn, Docusaurus, Comark, Forms, Shaders

    Weekly roundup covering React and React Native ecosystem news. React highlights include Boneyard (auto-generated skeleton screens), Ink 7.0 (React CLI renderer with React 19.2 support), Material UI 9.0, Mantine 9.0, React Hook Form 7.72 with form-level validation, Docusaurus 3.10, React Router 7.14 with Vite 8 support, and a new Comark markdown parser. React Native 0.85 ships with a new Shared Animation Backend (enabling native driver for layout props), DevTools improvements for simultaneous CDP connections, and Metro TLS support. Also covered: ViewTransition support for RN Fabric (in progress), Skia Graphite pre-release, RN Windows 0.82, and the axios npm supply chain compromise. Other JS ecosystem news includes JSIR (Google's JavaScript IR proposal), esbuild 0.28, ESLint 10.2, and Ky 2.0.

  19. 19
    Article
    Avatar of chromeChrome Developers·4w

    Chrome for Developers

    Chrome 148 beta introduces a range of CSS and Web API improvements. CSS highlights include name-only container queries, lazy loading for video/audio elements, the new `revert-rule` keyword, `at-rule()` for feature detection, and `text-decoration-skip-ink: all`. On the Web API side, notable additions are the Prompt API for on-device AI (text, image, audio), SharedWorker re-enabled on Android with an extended lifetime option, Web Serial API on Android, WebGPU linear_indexing, Web Authentication Immediate UI mode, and WebRTC `alwaysNegotiateDataChannels`. New origin trials include HTML-in-canvas, Container Timing, Declarative CSS Module Scripts, OpaqueRange, and Agentic Federated Login.

  20. 20
    Article
    Avatar of lobstersLobsters·5w

    Someone good at CSS help, my website design is dying

    A developer encounters a subtle CSS rendering issue when trying to add rounded top corners and a border to card-style article elements. The first attempt at applying border-radius to the article element does nothing because child elements overflow their container. Adding border-radius to the header fixes the visual rounding but introduces a white fringe artifact at the border junction. The root cause is anti-aliasing: clipping two overlapping semi-transparent surfaces separately before compositing them causes white to bleed in at the edges. Using overflow: auto on the article element is the more correct approach but still doesn't fully eliminate the artifact, leaving the problem unresolved.

  21. 21
    Article
    Avatar of shopifychangelogShopify Developer changelog·4w

    New CSS variable for mobile safe area insets

    Shopify has introduced a new CSS custom property, `--shopify-safe-area-inset-bottom`, for embedded apps running on Shopify Mobile. Automatically set by App Bridge, it provides the pixel height of host UI overlays like the floating bottom navigation bar. Most apps require no changes since bottom padding is applied automatically, but apps with custom fixed-bottom elements (sticky footers, FABs) should use `var(--shopify-safe-area-inset-bottom, 0px)` in their CSS to avoid content being obscured. The change takes effect April 15th, 2026.

  22. 22
    Video
    Avatar of gamefromscratchGamefromscratch·4w

    Phaser 4 is HERE - Biggest Release Ever!

    Phaser 4 has been released, marking the biggest update in the JavaScript/TypeScript 2D game framework's 10+ year history. The centerpiece is a completely new WebGL renderer with a node-based architecture that replaces the V3 pipeline. Key performance improvements include a Sprite GPU Layer capable of rendering millions of sprites at up to 100x the previous speed, a new Tile Map GPU Layer that renders entire maps as a single quad with per-pixel shader cost, smarter multitexture batching, and just-in-time rendering. Additional changes include a unified filter system combining FX and masks, new game objects (gradient, noise variants, stamp), improved lighting, and built-in support for AI coding tools like Cursor, Copilot, and Codex. Phaser remains MIT-licensed and open source, with an optional commercial editor available for $12–$15/month.

  23. 23
    Article
    Avatar of infoworldInfoWorld·2w

    The best JavaScript certifications for getting hired

    JavaScript remains the most in-demand programming language for over a decade, and certifications can help candidates stand out in hiring pipelines — especially for early-career developers or career switchers. Experts note that certs are not a primary hiring signal but can serve as a credibility anchor or tie-breaker in high-volume or compliance-driven roles. A curated list of notable JavaScript certifications is provided, including CIW JavaScript Specialist, FreeCodeCamp's JS Algorithms and Data Structures, W3Schools JavaScript Developer Certificate, JS Institute's JSA and JSE certifications, Mimo JavaScript Certification, the now-retired OpenJS JSNAD, and Certificates.dev's Senior JavaScript Developer cert. Strong portfolios with real projects still outweigh certifications in most hiring decisions.

  24. 24
    Article
    Avatar of flutterFlutter·4w

    We rebuilt Flutter’s websites with Dart and Jaspr

    Flutter's team migrated dart.dev, flutter.dev, and docs.flutter.dev from a fragmented stack (Eleventy/Node.js and Wagtail/Python) to a unified Dart-based setup using Jaspr, an open-source web framework. Jaspr supports client-side rendering, server-side rendering, and static site generation, with a component model familiar to Flutter developers. Key benefits include a single Dart toolchain, partial hydration for performance and SEO, Markdown-driven content via Jaspr Content, and seamless use of new Dart features like dot shorthands, null-aware collection elements, and WebAssembly compilation. The migration was a collaborative effort with Jaspr's creator Kilian, who also built out Jaspr Content to meet the sites' needs.

  25. 25
    Article
    Avatar of nxNx·3w

    Sharing Tailwind CSS Styles Across Apps in a Monorepo

    Tailwind v4's CSS-first configuration with @theme makes it straightforward to share design tokens across multiple apps in a monorepo. By placing a globals.css file with @theme directives in a dedicated shared package and referencing it via pnpm/npm workspaces, all apps can import the same colors, typography, and spacing tokens. Each consuming app just needs the @tailwindcss/vite plugin and a CSS entry point that imports both Tailwind and the shared package. For automating @source directives so Tailwind scans the right files across the dependency graph, the @juristr/nx-tailwind-sync Nx sync generator handles this automatically. A full working GitHub example is provided.

See all Web Development archives