# modern web development

A software development discipline for building and publishing interactive websites and web applications.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## Primer on Jinja Templating

DevFeed: [Primer on Jinja Templating](<https://devfeed.tech/articles/primer-on-jinja-templating-10823.md>)

Original publisher: [Read original article](<https://realpython.com/primer-on-jinja-templating/>)

Author: Philipp Acsany

Published: 2026-09-13T14:00:00Z

Content type: tutorial

Language: en

Sources: [Real Python](<https://devfeed.tech/sources/real-python.md>)

Topics: [Template](<https://devfeed.tech/topics/template.md>), [Python](<https://devfeed.tech/topics/python.md>), [web applications](<https://devfeed.tech/topics/web-applications.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [Flask](<https://devfeed.tech/topics/flask.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [HTML](<https://devfeed.tech/topics/html.md>), [Django](<https://devfeed.tech/topics/django.md>)

Tags: [building](<https://devfeed.tech/tags/building.md>), [code](<https://devfeed.tech/tags/code.md>), [content](<https://devfeed.tech/tags/content.md>), [django](<https://devfeed.tech/tags/django.md>), [features](<https://devfeed.tech/tags/features.md>), [framework](<https://devfeed.tech/tags/framework.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [html](<https://devfeed.tech/tags/html.md>), [learn](<https://devfeed.tech/tags/learn.md>), [learning](<https://devfeed.tech/tags/learning.md>), [python](<https://devfeed.tech/tags/python.md>), [tutorial](<https://devfeed.tech/tags/tutorial.md>), [web-applications](<https://devfeed.tech/tags/web-applications.md>)

### AI overview

A practical introduction to Jinja templating in Python. The tutorial covers installation, template creation and rendering, dynamic content, conditionals, loops, filters, macros, nesting, standalone text generation, and integration with Flask.

### Source excerpt

With Jinja, you can build rich templates that power the front end of your web applications. But you can use Jinja without a web framework running in the background. Anytime you want to create text files with programmatic content, Jinja can help you out.

## Shopify extends lifeline to Tailwind as vibe coding erodes web dev platform's bottom line

DevFeed: [Shopify extends lifeline to Tailwind as vibe coding erodes web dev platform's bottom line](<https://devfeed.tech/articles/shopify-extends-lifeline-to-tailwind-as-vibe-coding-erodes-web-dev-platform-s-bottom-line-8542.md>)

Original publisher: [Read original article](<https://www.theregister.com/devops/2026/09/10/shopify-extends-lifeline-to-tailwind-as-vibe-coding-erodes-web-dev-platforms-bottom-line/5295672>)

Author: Brandon Vigliarolo

Published: 2026-09-10T19:43:55Z

Content type: news

Language: en

Sources: [www.theregister.com - Articles](<https://devfeed.tech/sources/www-theregister-com-articles.md>)

Topics: [Web Development](<https://devfeed.tech/topics/web-development.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>)

Tags: [acquisition](<https://devfeed.tech/tags/acquisition.md>), [acquisitions](<https://devfeed.tech/tags/acquisitions.md>), [ai-and-ml](<https://devfeed.tech/tags/ai-and-ml.md>), [css](<https://devfeed.tech/tags/css.md>), [devops](<https://devfeed.tech/tags/devops.md>), [foss](<https://devfeed.tech/tags/foss.md>), [framework](<https://devfeed.tech/tags/framework.md>), [open-source](<https://devfeed.tech/tags/open-source.md>), [shopify](<https://devfeed.tech/tags/shopify.md>), [tailwind](<https://devfeed.tech/tags/tailwind.md>), [vibe-coding](<https://devfeed.tech/tags/vibe-coding.md>), [web](<https://devfeed.tech/tags/web.md>), [web-developers](<https://devfeed.tech/tags/web-developers.md>)

### AI overview

Shopify's acquisition gives the open-source CSS framework Tailwind a stable long-term home amid pressure on web development platforms from vibe coding.

### Source excerpt

Acquisition gives open source CSS framework 'a stable long-term home'

## TikTok Is Quietly Putting Web Apps Inside Its App

DevFeed: [TikTok Is Quietly Putting Web Apps Inside Its App](<https://devfeed.tech/articles/tiktok-is-quietly-putting-web-apps-inside-its-app-9279.md>)

Original publisher: [Read original article](<https://webdesignerdepot.com/tiktok-is-quietly-putting-web-apps-inside-tiktok/>)

Author: Alex Harper

Published: 2026-09-10T17:33:18Z

Content type: article

Language: en

Sources: [Web Designer Depot](<https://devfeed.tech/sources/web-designer-depot.md>)

Topics: [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [interactive website](<https://devfeed.tech/topics/interactive-website.md>), [App](<https://devfeed.tech/topics/app.md>), [React Native](<https://devfeed.tech/topics/react-native.md>)

Tags: [app-development](<https://devfeed.tech/tags/app-development.md>), [app-ecosystem](<https://devfeed.tech/tags/app-ecosystem.md>), [browser](<https://devfeed.tech/tags/browser.md>), [digital-platforms](<https://devfeed.tech/tags/digital-platforms.md>), [embedded-apps](<https://devfeed.tech/tags/embedded-apps.md>), [framework](<https://devfeed.tech/tags/framework.md>), [future-of-apps](<https://devfeed.tech/tags/future-of-apps.md>), [in-app-experiences](<https://devfeed.tech/tags/in-app-experiences.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [mini-apps](<https://devfeed.tech/tags/mini-apps.md>), [mobile-apps](<https://devfeed.tech/tags/mobile-apps.md>), [mobile-web](<https://devfeed.tech/tags/mobile-web.md>), [platform](<https://devfeed.tech/tags/platform.md>), [react](<https://devfeed.tech/tags/react.md>), [social-commerce](<https://devfeed.tech/tags/social-commerce.md>), [social-media](<https://devfeed.tech/tags/social-media.md>), [technology](<https://devfeed.tech/tags/technology.md>), [tiktok](<https://devfeed.tech/tags/tiktok.md>), [tiktok-apps](<https://devfeed.tech/tags/tiktok-apps.md>), [tiktok-developers](<https://devfeed.tech/tags/tiktok-developers.md>), [ui-design](<https://devfeed.tech/tags/ui-design.md>), [ux-design](<https://devfeed.tech/tags/ux-design.md>), [web](<https://devfeed.tech/tags/web.md>), [web-apps](<https://devfeed.tech/tags/web-apps.md>), [web-design](<https://devfeed.tech/tags/web-design.md>), [web-designers](<https://devfeed.tech/tags/web-designers.md>), [web-development](<https://devfeed.tech/tags/web-development.md>)

### AI overview

TikTok Minis let third-party, web-based experiences run inside TikTok, using technologies such as HTML, JavaScript, React, and Vue. The article examines how this could blur the boundaries between websites, social networks, and apps while noting TikTok's platform, configuration, and approval constraints.

### Source excerpt

TikTok isn't just hosting videos anymore--it's quietly letting web-based experiences live inside the app. TikTok Minis could blur the line between social network, browser, and app platform, and web designers should be paying attention.

## Tailwind Labs is joining Shopify

DevFeed: [Tailwind Labs is joining Shopify](<https://devfeed.tech/articles/tailwind-labs-is-joining-shopify-3479.md>)

Original publisher: [Read original article](<https://tailwindcss.com/blog/tailwind-is-joining-shopify>)

Published: 2026-09-09T13:15:00Z

Content type: news

Language: en

Sources: [Tailwind CSS Blog](<https://devfeed.tech/sources/tailwind-css-blog.md>)

Topics: [Web Development](<https://devfeed.tech/topics/web-development.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>)

Tags: [css](<https://devfeed.tech/tags/css.md>), [framework](<https://devfeed.tech/tags/framework.md>), [open-source](<https://devfeed.tech/tags/open-source.md>), [shopify](<https://devfeed.tech/tags/shopify.md>), [tailwind](<https://devfeed.tech/tags/tailwind.md>), [user-interfaces](<https://devfeed.tech/tags/user-interfaces.md>)

### AI overview

Tailwind Labs is joining Shopify, which will provide a long-term home for maintaining Tailwind CSS. The team says Tailwind and its other open-source projects will remain MIT-licensed and community-led.

### Source excerpt

We're joining Shopify to give Tailwind a stable long-term home where it will be actively maintained for the millions of people who depend on it.

## React 19.3

DevFeed: [React 19.3](<https://devfeed.tech/articles/react-19-3-2998.md>)

Original publisher: [Read original article](<https://react.dev/blog/2026/09/09/react-19-3>)

Author: The React Team

Published: 2026-09-09T00:00:00Z

Content type: release

Language: en

Sources: [React Blog](<https://devfeed.tech/sources/react-blog.md>)

Topics: [React UI animations](<https://devfeed.tech/topics/react-ui-animations.md>), [web animation](<https://devfeed.tech/topics/web-animation.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [Web platform](<https://devfeed.tech/topics/web-platform.md>)

Tags: [animation](<https://devfeed.tech/tags/animation.md>), [api](<https://devfeed.tech/tags/api.md>), [browser](<https://devfeed.tech/tags/browser.md>), [css](<https://devfeed.tech/tags/css.md>), [react](<https://devfeed.tech/tags/react.md>), [release](<https://devfeed.tech/tags/release.md>), [view-transitions](<https://devfeed.tech/tags/view-transitions.md>)

### AI overview

React 19.3 stabilizes View Transitions and Fragment Refs. The article focuses on using View Transitions to animate UI updates, with CSS and Web Animations API customization options.

### Source excerpt

React 19.3 adds new features like View Transitions, Fragment Refs, browser(), Trusted Types, and more.

## Affordable and Fast Migration

DevFeed: [Affordable and Fast Migration](<https://devfeed.tech/articles/affordable-and-fast-migration-3400.md>)

Original publisher: [Read original article](<https://astro.build/case-studies/evil-martians/>)

Published: 2026-09-08T00:00:00Z

Content type: article

Language: en

Sources: [The Astro Blog](<https://devfeed.tech/sources/the-astro-blog.md>)

Topics: [migration](<https://devfeed.tech/topics/migration.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>)

Tags: [architecture](<https://devfeed.tech/tags/architecture.md>), [astro](<https://devfeed.tech/tags/astro.md>), [migration](<https://devfeed.tech/tags/migration.md>), [performance](<https://devfeed.tech/tags/performance.md>), [react](<https://devfeed.tech/tags/react.md>)

### AI overview

Evil Martians migrated its corporate website and blog from Gatsby to Astro in nine days while retaining existing React components. The move reduced homepage JavaScript and page weight, improved mobile Lighthouse performance, and aimed to reduce maintenance burden from Gatsby-specific dependencies and tooling.

### Source excerpt

How Evil Martians moved from Gatsby to Astro in nine days without rewriting a single React component

## What's new in Swift: August 2026 Edition

DevFeed: [What's new in Swift: August 2026 Edition](<https://devfeed.tech/articles/what-s-new-in-swift-august-2026-edition-2938.md>)

Original publisher: [Read original article](<https://swift.org/blog/whats-new-in-swift-august-2026/>)

Author: Dave Lester

Published: 2026-09-04T16:30:00Z

Content type: news

Language: en

Sources: [Swift.org](<https://devfeed.tech/sources/swift-org.md>)

Topics: [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [Vapor](<https://devfeed.tech/topics/swift-vapor.md>), [Back end](<https://devfeed.tech/topics/backend.md>)

Tags: [backend](<https://devfeed.tech/tags/backend.md>), [cloudflare](<https://devfeed.tech/tags/cloudflare.md>), [demo](<https://devfeed.tech/tags/demo.md>), [frontend](<https://devfeed.tech/tags/frontend.md>), [swift](<https://devfeed.tech/tags/swift.md>), [wasm](<https://devfeed.tech/tags/wasm.md>), [webassembly](<https://devfeed.tech/tags/webassembly.md>)

### AI overview

A Swift community update highlights Elementary and ElementaryUI, projects for server-rendered and browser-based web UIs. It also describes Swift-to-WebAssembly progress and a Cloudflare full-stack demo using shared message types.

### Source excerpt

Welcome to "What's new in Swift," a curated digest of releases, videos, and discussions in the Swift project and community. Here's an update from guest contributor Simon Leeb on Swift's progress as a language for web scenarios: Hi, Simon here! I am the creator of the elementary-swift project, a collection of packages born from a simple wish: I want to build web UIs in Swift and ultimately help Swift become a first-class choice for the web. This journey began after I started using Swift for backend services. The web frontend, however, still lived in a separate ecosystem, and I really wanted it to feel as ergonomic, safe, and efficient as the Swift I was writing everywhere else. That led to the creation of Elementary: a modern and efficient HTML rendering library with a familiar declarative API, built for the web. It integrates easily with frameworks like Vapor and Hummingbird, and has become a practical option for server-rendered web UIs. Around that same time, years of community work in the swift-wasm project made compiling Swift to WebAssembly increasingly viable, while Embedded Swift was taking its first experimental steps. This made me wonder: "How hard can it be to use Embedded Swift and build a state-driven web UI framework that produces tiny WebAssembly binaries?" Turns out: quite hard, actually! But it was too late. Despite my better judgment, I was in the middle of creating what is now known as ElementaryUI. Where Elementary renders HTML on the server, ElementaryUI runs in the browser itself. You can watch my talk at Swift@FOSDEM 2026 if you want to know more about the why, what, and how. To showcase where the project is heading, I recently posted a small Full-Stack Swift on Cloudflare demo. It features Swift in the browser communicating with a Swift backend on an edge worker through shared message types. I hope it gives people a concrete sense of how much the core technologies and the surrounding tooling have advanced. ElementaryUI is still young, with plen

## How Turbopack chunks your JavaScript

DevFeed: [How Turbopack chunks your JavaScript](<https://devfeed.tech/articles/how-turbopack-chunks-your-javascript-3282.md>)

Original publisher: [Read original article](<https://nextjs.org/blog/turbopack-chunking>)

Author: Sam Poder

Published: 2026-09-03T16:00:00Z

Content type: article

Language: en

Sources: [Next.js Blog](<https://devfeed.tech/sources/next-js-blog.md>)

Topics: [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [web applications](<https://devfeed.tech/topics/web-applications.md>)

Tags: [cache](<https://devfeed.tech/tags/cache.md>), [code](<https://devfeed.tech/tags/code.md>), [compression](<https://devfeed.tech/tags/compression.md>), [http](<https://devfeed.tech/tags/http.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [next-js](<https://devfeed.tech/tags/next-js.md>)

### AI overview

The article explains how Turbopack groups JavaScript into chunks for Next.js applications. It examines the tradeoff between minimizing downloaded code and minimizing network requests, including the effects on caching and compression.

### Source excerpt

Turbopack's chunking speeds up page loads and enables sharing code across pages. We shipped new experimental features to improve chunking in Next.js 16.3.

## July in Servo: more platforms, faster canvas, web fonts in SVG, and more!

DevFeed: [July in Servo: more platforms, faster canvas, web fonts in SVG, and more!](<https://devfeed.tech/articles/july-in-servo-more-platforms-faster-canvas-web-fonts-in-svg-and-more-3547.md>)

Original publisher: [Read original article](<https://servo.org/blog/2026/08/31/july-in-servo/>)

Author: The Servo Project Developers

Published: 2026-08-31T00:00:00Z

Content type: release

Language: en

Sources: [Servo Blog](<https://devfeed.tech/sources/servo-blog.md>)

Topics: [servo engine](<https://devfeed.tech/topics/servo-engine.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [Vulnerabilities](<https://devfeed.tech/topics/vulnerabilities.md>)

Tags: [animation](<https://devfeed.tech/tags/animation.md>), [apis](<https://devfeed.tech/tags/apis.md>), [cache](<https://devfeed.tech/tags/cache.md>), [css](<https://devfeed.tech/tags/css.md>), [linux](<https://devfeed.tech/tags/linux.md>), [rust](<https://devfeed.tech/tags/rust.md>), [security](<https://devfeed.tech/tags/security.md>), [servo](<https://devfeed.tech/tags/servo.md>), [servo-engine](<https://devfeed.tech/tags/servo-engine.md>), [servo-rendering-engine](<https://devfeed.tech/tags/servo-rendering-engine.md>), [svg](<https://devfeed.tech/tags/svg.md>), [web](<https://devfeed.tech/tags/web.md>), [web-browser](<https://devfeed.tech/tags/web-browser.md>), [web-browser-engine](<https://devfeed.tech/tags/web-browser-engine.md>), [web-engine](<https://devfeed.tech/tags/web-engine.md>), [web-rendering-engine](<https://devfeed.tech/tags/web-rendering-engine.md>)

### AI overview

Servo 0.5.0 is a July release with Linux aarch64 binaries, visible DOM text selections, web-platform features, and additional DOM APIs. It also addresses vulnerabilities in quick-xml and crossbeam-epoch and updates ANGLE.

### Source excerpt

Servo 0.5.0 contains all of the changes we landed in July, which came out to 488 commits, and we now publish binaries for Linux aarch64 (@mukilan, #46760)! DOM text selections are now visible (@mrobinson, @SimonSapin, #46698, #46864, #46742, #46889, #46126). Interactive selection is coming soon! For security fixes, see § Security. We've shipped several new web platform features: 'Cache-Control: stale-while-revalidate' (@arayaryoma, #46060) 'text-decoration-thickness' (@nicoburns, #46592) 'box-decoration-break', for the most part (@Psychpsyo, #45492) '@font-feature-values', for the most part (@simonwuelker, #45308) 'font-language-override', for the most part (@simonwuelker, #46618) 'font-variant-alternates', for the most part (@simonwuelker, #45308) Plus a bunch of new DOM APIs: Ed448, X448, and KMAC algorithms in SubtleCrypto (@kkoyung, #46402, #46141, #46180, #46583, #46606, #46622, #46334, #46376) 'insertHorizontalRule', 'insertImage', 'insertText', and 'forwardDelete' commands in document.execCommand() (@Psychpsyo, #46608, #46597, #46538, #46838) AnimationEffect (@simonwuelker, #46677) new Touch() (@yezhizhen, #46741) duplex property on Request (@Taym95, #46858) effect property on Animation (@simonwuelker, #46677) getKeyframes() and setKeyframes() on KeyframeEffect (@simonwuelker, #46118) id property on LargestContentfulPaint (@shubhamg13, #46828) read-only CSSFontFeatureValuesRule (@simonwuelker, #46728) This is another big update, so here's an outline: You can help! Security Real world compat Work in progress Embedding API For users and developers More on the web platform Performance and stability New contributors You can help! If you're working on a pull request that you think might be interesting for the next monthly update, even if you're not 100% sure, tell us about it by following the steps below: You add the monthly update label to your pull request, or comment @servo-highfive monthly update Highfive posts a comment asking you some questi

## Creating Web Widgets Using the Document Picture-in-Picture API

DevFeed: [Creating Web Widgets Using the Document Picture-in-Picture API](<https://devfeed.tech/articles/creating-web-widgets-using-the-document-picture-in-picture-api-4258.md>)

Original publisher: [Read original article](<https://css-tricks.com/creating-web-widgets-using-the-document-picture-in-picture-api/>)

Author: Daniel Schwarz

Published: 2026-08-27T14:41:06Z

Content type: tutorial

Language: en

Sources: [CSS-Tricks](<https://devfeed.tech/sources/css-tricks.md>)

Topics: [Web Development](<https://devfeed.tech/topics/web-development.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [interactive website](<https://devfeed.tech/topics/interactive-website.md>)

Tags: [api](<https://devfeed.tech/tags/api.md>), [articles](<https://devfeed.tech/tags/articles.md>), [browser](<https://devfeed.tech/tags/browser.md>), [chrome](<https://devfeed.tech/tags/chrome.md>), [css](<https://devfeed.tech/tags/css.md>), [firefox](<https://devfeed.tech/tags/firefox.md>), [html](<https://devfeed.tech/tags/html.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [picture-in-picture](<https://devfeed.tech/tags/picture-in-picture.md>), [web](<https://devfeed.tech/tags/web.md>)

### AI overview

A tutorial on using the Document Picture-in-Picture API to create persistent web widgets, including a cloned stock ticker. It covers HTML, CSS, JavaScript, browser support checks, and styling considerations for content moved into a DPIP window.

### Source excerpt

The general idea is that we create a Document Picture-in-Picture window (DPIP window), and then we put HTML, CSS, and JavaScript into it. Creating Web Widgets Using the Document Picture-in-Picture API originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

## Resolved: CSS Class Prefix Selector

DevFeed: [Resolved: CSS Class Prefix Selector](<https://devfeed.tech/articles/resolved-css-class-prefix-selector-4263.md>)

Original publisher: [Read original article](<https://css-tricks.com/resolved-css-class-prefix-selector/>)

Author: Geoff Graham

Published: 2026-08-21T15:13:03Z

Content type: opinion

Language: en

Sources: [CSS-Tricks](<https://devfeed.tech/sources/css-tricks.md>)

Topics: [Web Development](<https://devfeed.tech/topics/web-development.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>)

Tags: [chrome](<https://devfeed.tech/tags/chrome.md>), [css](<https://devfeed.tech/tags/css.md>), [feature](<https://devfeed.tech/tags/feature.md>), [links](<https://devfeed.tech/tags/links.md>), [selectors](<https://devfeed.tech/tags/selectors.md>)

### AI overview

The article discusses a resolved CSS proposal for wildcard class-prefix selectors such as `.prefix-*`. It considers readability, performance, compatibility, specificity, and the wait for browser support.

### Source excerpt

A newly resolved proposal would allow us to select classes that are a prefix for variations with a wildcard, like .prefix-*. Resolved: CSS Class Prefix Selector originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

## How Baseline Can Help You Ship Less JavaScript

DevFeed: [How Baseline Can Help You Ship Less JavaScript](<https://devfeed.tech/articles/how-baseline-can-help-you-ship-less-javascript-4324.md>)

Original publisher: [Read original article](<https://smashingmagazine.com/2026/08/how-baseline-can-help-ship-less-javascript/>)

Author: hello@smashingmagazine.com (Jad Joubran)

Published: 2026-08-07T13:00:00Z

Content type: tutorial

Language: en

Sources: [Articles on Smashing Magazine -- For Web Designers And Developers](<https://devfeed.tech/sources/articles-on-smashing-magazine-for-web-designers-and-developers.md>)

Topics: [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Web platform](<https://devfeed.tech/topics/web-platform.md>), [browser](<https://devfeed.tech/topics/browser.md>), [Web](<https://devfeed.tech/topics/web.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [article](<https://devfeed.tech/tags/article.md>), [browser](<https://devfeed.tech/tags/browser.md>), [coding](<https://devfeed.tech/tags/coding.md>), [guide](<https://devfeed.tech/tags/guide.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [techniques](<https://devfeed.tech/tags/techniques.md>), [web-platform](<https://devfeed.tech/tags/web-platform.md>)

### AI overview

A practical guide to auditing JavaScript dependencies against modern browser capabilities using Baseline. It explains how to identify libraries that the web platform can replace, estimate bundle-size savings, and account for browser support and fallback needs.

### Source excerpt

The gap between "you need a library for this" and "the browser does this" keeps closing. A practical guide to auditing your dependencies and finding what the web platform can now handle for you.

## CSS:the bomb inside your inbox

DevFeed: [CSS:the bomb inside your inbox](<https://devfeed.tech/articles/css-the-bomb-inside-your-inbox-7674.md>)

Original publisher: [Read original article](<https://portswigger.net/research/css-the-bomb-inside-your-inbox>)

Author: Gareth Heyes

Published: 2026-08-06T22:00:00Z

Content type: article

Language: en

Sources: [PortSwigger Research](<https://devfeed.tech/sources/portswigger-research.md>)

Topics: [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [passwords](<https://devfeed.tech/topics/passwords.md>)

Tags: [atlas](<https://devfeed.tech/tags/atlas.md>), [browser](<https://devfeed.tech/tags/browser.md>), [bug](<https://devfeed.tech/tags/bug.md>), [css](<https://devfeed.tech/tags/css.md>), [firefox](<https://devfeed.tech/tags/firefox.md>), [html](<https://devfeed.tech/tags/html.md>), [passwords](<https://devfeed.tech/tags/passwords.md>), [ui](<https://devfeed.tech/tags/ui.md>)

### AI overview

A security paper on abusing discrepancies between CSS/HTML sanitizers and browser rendering in webmail clients. It describes techniques that can cross trust boundaries, spoof UI actions, exfiltrate tokens, and steal passwords, including an Outlook UI-control issue involving HTML labels.

### Source excerpt

Gareth Heyes - gareth.heyes@portswigger.net - @garethheyes It's quite common for webmail clients to render untrusted CSS in a trusted UI. They attempt to make this safe using CSS sanitization. In this

## Shopify and Vercel are rebuilding Hydrogen for faster storefronts

DevFeed: [Shopify and Vercel are rebuilding Hydrogen for faster storefronts](<https://devfeed.tech/articles/shopify-and-vercel-are-rebuilding-hydrogen-for-faster-storefronts-774.md>)

Original publisher: [Read original article](<https://vercel.com/blog/shopify-and-vercel-are-rebuilding-hydrogen-for-faster-storefronts>)

Author: Susan Aziz

Published: 2026-07-30T04:00:00Z

Content type: news

Language: en

Sources: [Vercel News](<https://devfeed.tech/sources/vercel-news.md>)

Topics: [Web Development](<https://devfeed.tech/topics/web-development.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [SDKs](<https://devfeed.tech/topics/sdks.md>)

Tags: [agents](<https://devfeed.tech/tags/agents.md>), [api](<https://devfeed.tech/tags/api.md>), [framework](<https://devfeed.tech/tags/framework.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [next-js](<https://devfeed.tech/tags/next-js.md>), [open-source](<https://devfeed.tech/tags/open-source.md>), [shopify](<https://devfeed.tech/tags/shopify.md>), [skills](<https://devfeed.tech/tags/skills.md>), [svelte](<https://devfeed.tech/tags/svelte.md>), [vercel](<https://devfeed.tech/tags/vercel.md>)

### AI overview

Shopify and Vercel are rebuilding the Hydrogen headless-storefront framework as an open-source, runtime-agnostic project. The new version supports frameworks including Next.js, Nuxt, and Svelte, with built-in type-safe API clients and cart state.

### Source excerpt

Shopify and Vercel Open source and runtime agnostic, runs anywhere JavaScript does Skills let agents extend any storefront with a single command Feature development cut from months to a week for retailers like Paige Shopify powers commerce for millions of merchants worldwide, and Hydrogen is its framework for building headless storefronts. The Shopify team is partnering with Vercel to rebuild Hydrogen from the ground up. The new version is open source and runtime agnostic so developers can build with Next.js, Nuxt, Svelte, or any framework they choose. As a result, storefronts that once required custom glue code now ship with best practices built in, from type-safe API clients to cart state in a single import. Read more

## When It Makes Sense To "Block" The Main Thread

DevFeed: [When It Makes Sense To "Block" The Main Thread](<https://devfeed.tech/articles/when-it-makes-sense-to-block-the-main-thread-4316.md>)

Original publisher: [Read original article](<https://smashingmagazine.com/2026/07/when-makes-sense-block-main-thread/>)

Author: hello@smashingmagazine.com (Victor Ayomipo)

Published: 2026-07-17T08:00:00Z

Content type: article

Language: en

Sources: [Articles on Smashing Magazine -- For Web Designers And Developers](<https://devfeed.tech/sources/articles-on-smashing-magazine-for-web-designers-and-developers.md>)

Topics: [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Chrome extension](<https://devfeed.tech/topics/chrome-extension.md>), [Latency](<https://devfeed.tech/topics/latency.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [Chrome](<https://devfeed.tech/topics/chrome.md>), [Concurrency](<https://devfeed.tech/topics/concurrency.md>)

Tags: [architecture](<https://devfeed.tech/tags/architecture.md>), [browser](<https://devfeed.tech/tags/browser.md>), [chrome](<https://devfeed.tech/tags/chrome.md>), [chrome-extension](<https://devfeed.tech/tags/chrome-extension.md>), [coding](<https://devfeed.tech/tags/coding.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [latency](<https://devfeed.tech/tags/latency.md>), [main-thread](<https://devfeed.tech/tags/main-thread.md>), [performance](<https://devfeed.tech/tags/performance.md>), [techniques](<https://devfeed.tech/tags/techniques.md>), [thread](<https://devfeed.tech/tags/thread.md>)

### AI overview

This article examines when blocking the browser's main thread can be faster than transferring work to a background worker. Using a Chrome screenshot extension as an example, it explains how serialization, copying, and deserialization can introduce enough latency to outweigh the responsiveness benefits of offloading computation.

### Source excerpt

The common rule of thumb is to never "block" the browser's main thread when running JavaScript tasks. But is this a hard rule? Victor Ayomipo describes a use case he encountered involving a screenshot extension where he made an exception to the rule and decided that blocking the main thread was absolutely the right thing to do.

## Vercel and Shopify are rebuilding Hydrogen

DevFeed: [Vercel and Shopify are rebuilding Hydrogen](<https://devfeed.tech/articles/vercel-and-shopify-are-rebuilding-hydrogen-782.md>)

Original publisher: [Read original article](<https://vercel.com/blog/vercel-and-shopify-are-rebuilding-hydrogen>)

Author: Amelia Charles

Published: 2026-06-30T04:00:00Z

Content type: news

Language: en

Sources: [Vercel News](<https://devfeed.tech/sources/vercel-news.md>)

Topics: [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [SDKs](<https://devfeed.tech/topics/sdks.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [api](<https://devfeed.tech/tags/api.md>), [cdn](<https://devfeed.tech/tags/cdn.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [next-js](<https://devfeed.tech/tags/next-js.md>), [open-source](<https://devfeed.tech/tags/open-source.md>), [react](<https://devfeed.tech/tags/react.md>), [shopify](<https://devfeed.tech/tags/shopify.md>), [svelte](<https://devfeed.tech/tags/svelte.md>), [vercel](<https://devfeed.tech/tags/vercel.md>)

### AI overview

Vercel and Shopify are rebuilding Hydrogen as an open-source, runtime-agnostic toolkit for headless storefronts. It centralizes Shopify API utilities, cart state, and server-side integrations while supporting frameworks including React, Next.js, Nuxt, and Svelte.

### Source excerpt

Hydrogen made headless storefronts easy to ship, but not portable. At Vercel Ship 26 in New York, we announced that we are working with Shopify to rebuild it from the ground up, a shared bet on a more open web. The new version is open source and runtime agnostic, meaning it can run anywhere JavaScript does. You can build with Svelte, Nuxt, Next.js or even bring your own custom framework. Our strategy includes three layers: core, client and server. The core Core is the JavaScript we all used to write for the Shopify API, and never shared. Now it lives in one place. Take formatMoney. The open web already solved most of this with Intl.NumberFormat. But the Shopify API doesn't hand you a number. It responds with a custom type, MoneyV2, and the amount is a signed decimal number serialized as a string. The result is the same, but you're not writing or maintaining the glue code anymore. When the API changes, the upgrade is trivial. Centralize the core and you fix each bug once, ship improvements to everyone, and get back to building. The client Rendering what the core returns involves the same repeated decisions. Cart state is the obvious one. Anyone who's built a commerce app has written a version of this. Different code every time, all chasing the same things. With Hydrogen, the client layer now handles the cart. State management becomes one import. Centralize this and you get the best practices for free, so you can spend your time on the parts that are actually yours to build. It's available for React today on the Hydrogen preview branch, with more frameworks coming. The server Developers need full-stack access to build storefronts that scale without sacrificing performance. Static content should serve instantly from a CDN while dynamic data like inventory streams in. The open-source community solved this with frameworks like Next.js, Nuxt, and SvelteKit: full-stack capabilities with no lock-in to a proprietary runtime. Say your storefront caches product queries with on

## Modern CSS theming with light-dark(), contrast-color(), and style queries

DevFeed: [Modern CSS theming with light-dark(), contrast-color(), and style queries](<https://devfeed.tech/articles/modern-css-theming-with-light-dark-contrast-color-and-style-queries-28815.md>)

Original publisher: [Read original article](<https://una.im/modern-css-theming/>)

Published: 2026-06-22T00:00:00Z

Content type: tutorial

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [color](<https://devfeed.tech/topics/color.md>), [Media Queries](<https://devfeed.tech/topics/media-queries.md>)

Tags: [color](<https://devfeed.tech/tags/color.md>), [css](<https://devfeed.tech/tags/css.md>), [dark-mode](<https://devfeed.tech/tags/dark-mode.md>), [dynamic-theming](<https://devfeed.tech/tags/dynamic-theming.md>), [media](<https://devfeed.tech/tags/media.md>), [scheme](<https://devfeed.tech/tags/scheme.md>), [support](<https://devfeed.tech/tags/support.md>), [themes](<https://devfeed.tech/tags/themes.md>)

### AI overview

This tutorial explains how to combine light-dark(), contrast-color(), style queries, custom properties, and related CSS color features to create adaptive themed components. It covers light and dark color schemes, context-sensitive palettes, automatic text contrast, and different elevation effects for each theme.

### Source excerpt

Combine three new CSS features to build fully adaptive themed components.

## Astro 7.0

DevFeed: [Astro 7.0](<https://devfeed.tech/articles/astro-7-0-3263.md>)

Original publisher: [Read original article](<https://astro.build/blog/astro-7/>)

Author: Matthew Phillips; Emanuele Stoppa; Matt Kane

Published: 2026-06-22T00:00:00Z

Content type: release

Language: en

Sources: [The Astro Blog](<https://devfeed.tech/sources/the-astro-blog.md>)

Topics: [Web Development](<https://devfeed.tech/topics/web-development.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [AI-assisted coding](<https://devfeed.tech/topics/ai-assisted-coding.md>), [Netlify](<https://devfeed.tech/topics/netlify.md>)

Tags: [agents](<https://devfeed.tech/tags/agents.md>), [astro](<https://devfeed.tech/tags/astro.md>), [cache](<https://devfeed.tech/tags/cache.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [logging](<https://devfeed.tech/tags/logging.md>), [netlify](<https://devfeed.tech/tags/netlify.md>), [performance](<https://devfeed.tech/tags/performance.md>), [release](<https://devfeed.tech/tags/release.md>), [routing](<https://devfeed.tech/tags/routing.md>), [rust](<https://devfeed.tech/tags/rust.md>)

### AI overview

Astro 7.0 focuses on faster builds through Rust-based compiler and content-processing changes, a new rendering strategy, and Vite 8 with Rolldown. It also adds route caching, Advanced Routing, and features for AI-assisted development.

### Source excerpt

Astro 7.0 brings faster builds with Vite 8, a new Rust compiler, Advanced Routing, background dev server support, and structured logging.

## Announcing Web Serial Support in Firefox

DevFeed: [Announcing Web Serial Support in Firefox](<https://devfeed.tech/articles/announcing-web-serial-support-in-firefox-4152.md>)

Original publisher: [Read original article](<https://hacks.mozilla.org/2026/05/web-serial-support-in-firefox/>)

Author: Haik Aftandilian

Published: 2026-05-21T18:00:05Z

Content type: release

Language: en

Sources: [Mozilla Hacks - the Web developer blog](<https://devfeed.tech/sources/mozilla-hacks-the-web-developer-blog.md>)

Topics: [web applications](<https://devfeed.tech/topics/web-applications.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>)

Tags: [api](<https://devfeed.tech/tags/api.md>), [device-apis](<https://devfeed.tech/tags/device-apis.md>), [devices](<https://devfeed.tech/tags/devices.md>), [firefox](<https://devfeed.tech/tags/firefox.md>), [hardware](<https://devfeed.tech/tags/hardware.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [python](<https://devfeed.tech/tags/python.md>), [support](<https://devfeed.tech/tags/support.md>), [usb](<https://devfeed.tech/tags/usb.md>), [web-apis](<https://devfeed.tech/tags/web-apis.md>)

### AI overview

Firefox 151 for Desktop adds Web Serial API support, allowing web applications to communicate with compatible serial-connected hardware without native software.

### Source excerpt

Support for Web Serial in Firefox 151 for Desktop Firefox can now connect directly to microcontrollers, development boards, 3D printers, power meters, and other serial-connected hardware from the web. Starting in Firefox 151 for Desktop, support for the Web Serial API allows web applications to communicate with compatible devices without requiring native software. Web Serial [...] The post Announcing Web Serial Support in Firefox appeared first on Mozilla Hacks - the Web developer blog.

## Nuxt MCP Toolkit now supports MCP apps

DevFeed: [Nuxt MCP Toolkit now supports MCP apps](<https://devfeed.tech/articles/nuxt-mcp-toolkit-now-supports-mcp-apps-1034.md>)

Original publisher: [Read original article](<https://vercel.com/changelog/nuxt-mcp-toolkit-mcp-apps>)

Author: Ben Sabic

Published: 2026-05-19T14:00:00Z

Content type: release

Language: en

Sources: [Vercel News](<https://devfeed.tech/sources/vercel-news.md>)

Topics: [AI Chat](<https://devfeed.tech/topics/ai-chat.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [agent](<https://devfeed.tech/tags/agent.md>), [apps](<https://devfeed.tech/tags/apps.md>), [chatgpt](<https://devfeed.tech/tags/chatgpt.md>), [claude](<https://devfeed.tech/tags/claude.md>), [html](<https://devfeed.tech/tags/html.md>), [mcp](<https://devfeed.tech/tags/mcp.md>), [responses](<https://devfeed.tech/tags/responses.md>), [tool](<https://devfeed.tech/tags/tool.md>), [tools](<https://devfeed.tech/tags/tools.md>), [ui](<https://devfeed.tech/tags/ui.md>), [vue](<https://devfeed.tech/tags/vue.md>)

### AI overview

Nuxt MCP Toolkit adds MCP app support, allowing agent tools to return interactive HTML that Claude and ChatGPT can render inline. It provides APIs for declared tools, hydrated data, follow-up prompts, and tool calls from the UI, while bundling Vue SFCs into self-contained HTML at build time.

### Source excerpt

The Nuxt MCP Toolkit now supports MCP apps. Your agent tools can return interactive HTML responses that MCP clients like Claude and ChatGPT render inline, rather than plain-text responses. Declare a tool with the defineMcpApp macro, then read pre-hydrated data, trigger follow-up prompts, or call other tools from inside the UI with the useMcpApp composable. The toolkit bundles each Vue SFC into a self-contained HTML file at build time and serves it from your MCP endpoint. Read the Nuxt MCP Toolkit documentation to get started. Read more

## Tailwind CSS v4.3: Scrollbars, new colors, and more

DevFeed: [Tailwind CSS v4.3: Scrollbars, new colors, and more](<https://devfeed.tech/articles/tailwind-css-v4-3-scrollbars-new-colors-and-more-3501.md>)

Original publisher: [Read original article](<https://tailwindcss.com/blog/tailwindcss-v4-3>)

Published: 2026-05-08T20:00:00Z

Content type: release

Language: en

Sources: [Tailwind CSS Blog](<https://devfeed.tech/sources/tailwind-css-blog.md>)

Topics: [Tailwind CSS](<https://devfeed.tech/topics/tailwind.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [Webpack](<https://devfeed.tech/topics/webpack.md>), [Next.js](<https://devfeed.tech/topics/next-js.md>), [Netflix](<https://devfeed.tech/topics/netflix.md>), [Vercel](<https://devfeed.tech/topics/vercel.md>)

Tags: [css](<https://devfeed.tech/tags/css.md>), [netflix](<https://devfeed.tech/tags/netflix.md>), [next-js](<https://devfeed.tech/tags/next-js.md>), [releases](<https://devfeed.tech/tags/releases.md>), [tailwind](<https://devfeed.tech/tags/tailwind.md>), [vercel](<https://devfeed.tech/tags/vercel.md>)

### AI overview

Tailwind CSS v4.3 introduces first-party scrollbar styling, size-container utilities, direct utilities for additional CSS properties, tab-size controls, stacked and compound variants in CSS, and default values for functional utilities. The article also covers v4.2 additions, including new color palettes, a webpack plugin, logical property utilities, and OpenType feature controls.

### Source excerpt

Tailwind CSS v4.3 is here with first-party scrollbar styling, even more logical property utilities, new zoom and tab-size utilities, better @variant support, and all the v4.2 stuff we shipped while forgetting blogs existed.

## Starlight 0.39

DevFeed: [Starlight 0.39](<https://devfeed.tech/articles/starlight-0-39-3338.md>)

Original publisher: [Read original article](<https://astro.build/blog/starlight-039/>)

Author: Chris Swithinbank

Published: 2026-05-07T00:00:00Z

Content type: release

Language: en

Sources: [The Astro Blog](<https://devfeed.tech/sources/the-astro-blog.md>)

Topics: [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [astro](<https://devfeed.tech/tags/astro.md>), [changelog](<https://devfeed.tech/tags/changelog.md>), [cli](<https://devfeed.tech/tags/cli.md>), [css](<https://devfeed.tech/tags/css.md>), [docs](<https://devfeed.tech/tags/docs.md>), [release](<https://devfeed.tech/tags/release.md>)

### AI overview

Starlight 0.39 adds more flexible autogenerated sidebars, CSS styling improvements, and multilingual documentation enhancements. It also provides an automated CLI upgrade path and migration guidance.

### Source excerpt

Get more flexible autogenerated sidebars, improved styling, and stronger multilingual docs support with the latest Starlight release.

## Build Custom Widgets in Port

DevFeed: [Build Custom Widgets in Port](<https://devfeed.tech/articles/build-custom-widgets-in-port-12179.md>)

Original publisher: [Read original article](<https://www.port.io/blog/build-custom-widgets-in-port>)

Author: Naama Ben Oliel Ronen

Published: 2026-05-04T16:55:30Z

Content type: tutorial

Language: en

Sources: [Developer Experience & Platform Engineering Blog | Port](<https://devfeed.tech/sources/developer-experience-platform-engineering-blog-port.md>)

Topics: [Front end](<https://devfeed.tech/topics/frontend.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [API](<https://devfeed.tech/topics/api.md>), [Authentication](<https://devfeed.tech/topics/authentication.md>), [dashboards](<https://devfeed.tech/topics/dashboards.md>)

Tags: [api](<https://devfeed.tech/tags/api.md>), [authentication](<https://devfeed.tech/tags/authentication.md>), [dashboards](<https://devfeed.tech/tags/dashboards.md>), [real-time](<https://devfeed.tech/tags/real-time.md>), [tooling](<https://devfeed.tech/tags/tooling.md>), [ui](<https://devfeed.tech/tags/ui.md>), [user-interface](<https://devfeed.tech/tags/user-interface.md>)

### AI overview

This article explains how platform teams can build custom frontend widgets that run natively inside Port. It describes using a team's preferred stack, accessing Port context and catalog data, applying permissions and parameters, and building examples such as calendars, incident timelines, readiness panels, and cost visualizations.

### Source excerpt

Your data model is extensible. Now your UI is too.

## 20 Mistakes That Quietly Destroy JavaScript/TypeScript Codebases (Part 1)

DevFeed: [20 Mistakes That Quietly Destroy JavaScript/TypeScript Codebases (Part 1)](<https://devfeed.tech/articles/20-mistakes-that-quietly-destroy-javascript-typescript-codebases-part-1-18102.md>)

Original publisher: [Read original article](<https://thetshaped.dev/p/20-mistakes-that-quietly-destroy-javascript-typescript-codebases-common-code-smell-patterns>)

Author: The T-Shaped Dev

Published: 2026-05-02T02:19:25Z

Content type: tutorial

Language: en

Sources: [The T-Shaped Dev](<https://devfeed.tech/sources/the-t-shaped-dev.md>)

Topics: [JavaScript](<https://devfeed.tech/topics/javascript.md>), [TypeScript](<https://devfeed.tech/topics/typescript.md>), [Code](<https://devfeed.tech/topics/code.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>)

Tags: [bugs](<https://devfeed.tech/tags/bugs.md>), [code](<https://devfeed.tech/tags/code.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [mistakes](<https://devfeed.tech/tags/mistakes.md>), [patterns](<https://devfeed.tech/tags/patterns.md>), [typescript](<https://devfeed.tech/tags/typescript.md>)

### AI overview

This tutorial examines common JavaScript and TypeScript codebase mistakes that increase maintenance costs without necessarily breaking builds or tests. Part 1 focuses on type modeling, error handling, and module design, including TypeScript strict mode and unsafe type escapes.

### Source excerpt

Common JS/TS patterns that feel fine until they don't. 11 mistakes, before/after code for each. (11 min)

[Next page](<https://devfeed.tech/topics/modern-web-development.md?cursor=WyIyMDI2LTA1LTAyVDAyOjE5OjI1KzAwOjAwIiwgIjlkMzFiZWNjLWJjNzgtNDNmZS05OWFjLWE3YWQ1NjM3Zjg5MyJd>)