Dev World·1y🚀 Frontend Designers & Developers, Meet Your New Best Friend! 🎨💻
Discover an incredible resource for frontend designers and developers with calltoinspiration.com. This site offers a vast collection of beautifully designed web components like forms, alerts, tabs, dropdowns, and cards. It's perfect for elevating your projects and unleashing your creativity. Check it out to design better and faster.
freeCodeCamp·50wThe Micro-Frontend Architecture Handbook
A comprehensive guide covering four main approaches to micro frontend architecture: iframes with cross-window messaging, Web Components with Shadow DOM, single-spa for orchestrating multiple SPAs, and Module Federation for runtime code sharing. Each method is explained with practical code examples, pros/cons analysis, and real-world use cases. The guide also covers additional tools like Piral, Luigi, and Import Maps, helping developers choose the right approach based on team structure, technical requirements, and deployment needs.
Hacker News·36wThis website has no class
A developer experiments with removing all CSS classes from their personal website, instead relying on semantic HTML elements, custom tags, and custom attributes for styling. The approach reduces CSS bundle size to ~5KB and improves accessibility, but requires more careful planning and deeper HTML/CSS knowledge. While successful for a personal project, the author acknowledges it may not scale well for larger teams with varied frontend expertise.
CSS-Tricks·1yWeb Components Demystified
Explore the fundamentals of web components with Scott Jehl's course, 'Web Components Demystified'. Learn about the creation and behavior of custom HTML elements, usage of HTML templates, encapsulation with Shadow DOM, and lifecycle methods for web components. The content highlights the differences between web components and JavaScript framework components like React. Also discussed are best practices for styling, handling slots, and using custom properties within Shadow DOM.
The New Stack·22wWeb Components Are the Comeback Nobody Saw Coming
Web components are experiencing a resurgence as developers tire of framework complexity and bloated bundles. Native browser APIs like custom elements and Shadow DOM offer framework-agnostic, lightweight alternatives that work across React, Vue, or vanilla JavaScript without modification. Major browser support is now stable, and libraries like Lit have improved developer experience. The interoperability advantage makes web components ideal for design systems and microfrontends, allowing teams to build reusable UI components once and deploy them anywhere. As performance budgets tighten and framework fatigue sets in, the native web platform capabilities are proving sufficient for most modern applications.
freeCodeCamp·1yA Brief Introduction to Web Components
Learn the basics of Web Components, a set of standardized browser APIs allowing the creation of custom reusable HTML elements in web applications. The tutorial includes interactive 'code playbacks' to guide you through building modular and encapsulated components for a frontend, emphasizing self-contained design and data management techniques. Key topics covered also involve comparison with React, handling custom events, and creating a complete app with authentication.
CSS-Tricks·24wHTML Web Components Proposal From 1998
Web components have roots dating back to a 1998 W3C proposal that introduced the concept of componentization for building applications using reusable building blocks. The proposal emphasized breaking down complex applications into manageable chunks without requiring deep understanding of internal implementation details. While often perceived as a recent feature, the idea of style encapsulation and component-based architecture has been evolving for nearly 30 years in web development history.
CSS-Tricks·48wCSS-Tricks
KelpUI is a new CSS library by Chris Ferdinandi that combines modern CSS features with Web Components. The library emphasizes base styles, utility classes, CSS variables for customization, and Web Components that keep HTML in the light DOM. It uses CSS Cascade Layers for logical structure, maintains low specificity selectors, includes accessible color palettes, and can be loaded from CDN or downloaded locally. The development process is being openly documented through a series of blog posts.
Awesome·44wMicrofrontends the right way
Microfrontends promise independent deployments and team autonomy but often introduce unnecessary complexity. While the concept addresses organizational challenges more than technical ones, several implementation approaches exist: iframes provide hard isolation but poor UX, web components offer framework-agnostic custom elements with shadow DOM, single-spa adds orchestration layers that create distributed system complexity, and Webpack's module federation enables runtime code sharing. Modern browsers support native ES modules for cross-domain imports, potentially reducing bundler dependency. Astro's island architecture emerges as a practical solution, loading UI components only when needed.
Cloud Four·28wSimple One-Time Passcode Inputs
Build fully functional one-time passcode (OTP) inputs using semantic HTML with proper attributes like inputmode, autocomplete, and pattern validation. The approach demonstrates how to create accessible, progressively enhanced OTP forms without complex JavaScript frameworks or multiple input elements, using a single text input with clear labeling and optional styling enhancements through CSS and lightweight web components.
Community Picks·48w<syntax-highlight> element
A web component library that provides syntax highlighting functionality using the CSS Custom Highlight API. The component can be imported as an ES module or via CDN, used with simple HTML markup by specifying a language attribute, and styled with CSS themes. Limited themes are currently available, but custom themes can be created.
The New Stack·34wStop Ignoring the Browser: The Biggest Frontend Shift in a Decade
Modern browsers now natively support features that once required frameworks like React and Angular. Native APIs for routing, state management, component isolation, and animations are reducing the need for heavy framework dependencies. While frameworks still offer value through conventions and ecosystem support, they're shifting from necessity to preference. Standards-based development using Shadow DOM, ES modules, Navigation API, and Web Components can deliver better performance with smaller bundle sizes, especially for mobile and edge computing environments. The web platform has matured enough to handle modern application development without framework intermediaries.
ThePrimeTime·1yA Different Approach To Frontend
The post suggests that a negative perception of front-end development may stem from a specific design philosophy. It encourages trying out web components, possibly with a bit of bus and HTMX, to rediscover an enjoyment in front-end projects. The author posits that mixing traditional and modern techniques could make front-end development more enjoyable.
DEV·1yShadow DOM: Building Perfectly Encapsulated Web Components
Shadow DOM provides true encapsulation for web components by attaching a hidden separate DOM tree to an element in the regular DOM tree. This encapsulation prevents styles and scripts from leaking in or out, making components modular and easily reusable. It’s particularly useful for styling third-party widgets, building reusable UI components, and enabling custom theming. Despite challenges like browser support and a learning curve, Shadow DOM helps create scalable, maintainable, and reliable web components.
MDN Blog·40wLaunching MDN's new front end
MDN Web Docs has launched a completely rebuilt front end, redesigned and reengineered from the ground up. The update focuses on modern web technologies following Baseline compatibility guidelines, featuring improved typography, consistent code rendering, refreshed icons using the Lucide library, a new search modal, and redesigned top navigation. The team used modern CSS and web components while ensuring wide browser compatibility through progressive enhancement.
tailwindcss·43wVanilla JavaScript support for Tailwind Plus
Tailwind Plus now includes vanilla JavaScript support through @tailwindplus/elements, a library of headless custom elements that make interactive UI components like dropdowns, dialogs, and command palettes work without requiring React or Vue. The library leverages modern web platform features like custom elements, the popover attribute, and native dialog elements to provide accessible, framework-agnostic components that can be styled with utility classes and work across different web frameworks.
Hacker News·35wMESH: I tried HTMX, then ditched it
A developer explores HTMX for HTML-first web development but finds it lacks the structure of SPA frameworks. They create MESH, a framework that combines server-side rendering with web components using a "one component = one endpoint" principle. The project demonstrates building interactive features like drag-and-drop and real-time collaboration, ultimately replacing HTMX with custom JavaScript while maintaining the benefits of modular SSR.
Lobsters·1yRewriting my site in vanilla web
The author discusses their experience rewriting their website using vanilla HTML, CSS, and JavaScript, moving away from frameworks and libraries to achieve greater simplicity and control. They explain their rationale, the principles they followed, and the methodologies they used, such as semantic HTML, TAC CSS, and Web Components with Light DOM. The post also touches on the advantages and challenges of this approach, tips for efficient conversion, and the pragmatic adjustments necessary for the project's success.
Horde·41wCreate Your Retro 8-Bit Profile Card with 8bitcn! 🎮
8bitcn launched a new profile card creator that lets users generate retro 8-bit style profile cards. Users can customize their cards with personal information and images, choose from multiple retro themes, download the results as images, and copy the code via Shadcn registry for integration into their projects.
Lobsters·1yboreDOM another boring JS framework
The post introduces 'boreDOM,' a new JavaScript framework designed for manipulating the DOM with a small JS footprint. It allows developers to use existing HTML, CSS, and JS files more effectively by leveraging <template> elements and custom tags. The framework offers support for component logic via external JS files, custom events, slots, and several useful attributes such as data-ref and shadowrootmode. While not groundbreaking, boreDOM aims to provide a simple and versatile solution for common web development tasks.
Frontend Focus·43wFrontend Focus Issue 703: July 30, 2025
A curated collection of frontend development articles covering new CSS features like carousel specs, masonry layouts, and scroll-spy functionality. Highlights include MDN's 20th anniversary celebration, practical React and Next.js patterns, WebAssembly DOM integration challenges, and Apple's upcoming Liquid Glass design aesthetic. Also features tools and resources including a world clock slider component and full-stack development guides.