Community Picks·2yNew Features in React 19 – Updates with Code Examples
React 19 introduces new features such as the React compiler, server components, actions, web components, enhanced hooks, asset loading, and form hooks. These changes aim to improve performance, simplify coding, and enhance the user experience.
asayer·2yHTMX 2.0 is here: Everything you must know about it
HTMX 2.0, released in June 2024, brings several significant improvements to the JavaScript library used for creating dynamic web applications directly in HTML. New features include better support for Web Components, adherence to HTTP standards, and improved extension management. The new version addresses limitations and non-standard behaviors of HTMX 1.0, and migration to HTMX 2.0 requires minimal effort due to the focus on backward compatibility. A public roadmap is being developed, and more details can be found through the HTMX community and GitHub page.
DEV·2yJavaScript is not the problem
A performance issue in an Angular 11 app was caused by a CSS rule, not JavaScript. The article discusses the use of JavaScript in web development and the importance of optimizing static assets and JavaScript bundles. It also addresses the role of Web Components and the Shadow DOM, concluding that excessive use of JavaScript is the problem, not JavaScript itself.
Community Picks·2yEnhance
Enhance provides everything you need to build a production ready web app, including server rendered custom elements that seamlessly upgrade to interactive Web Components. It allows for incremental upgrades of interactive elements and eliminates the need for full page renders. Enhance also focuses on deployment and provides a solution for launching apps.
Community Picks·2yPlain Vanilla
An overview of building web sites and applications purely with web standards without the need for frameworks or build tools. It covers the use of Web Components, modern CSS techniques, and strategies for creating and deploying web projects. This guide is ideal for experienced developers looking for a simpler, zero-maintenance approach to web development.
Community Picks·2yWhy Tailwind Isn't for Me
The author explains why they do not like Tailwind CSS, citing concerns about its HTML structure, compatibility issues with other CSS frameworks, reliance on non-standard features like `@apply`, lack of support for web components, and encouragement of div/span-tag soup in markup.
Community Picks·2ygithub/github-elements: GitHub's Web Component collection.
GitHub has created a collection of 17 open source custom web components. These include elements for input validation, autocomplete, clipboard copying, modal dialogs, drag-and-drop file attachment, filtering text, native emoji fallback, image cropping, markdown formatting, and more. Each component is designed to enhance the functionality and accessibility of web applications.
Bytes by ui.dev·2yBig W for Web Components
Declarative Shadow DOM is now supported by all major browsers, enabling server-side rendering for Web Components. This enhancement addresses previous limitations and improves SEO, streaming rendering, and prevents FOUC. Additionally, Expo's EAS Update offers a flexible tool for over-the-air updates, making the update process more efficient and affordable. The post also discusses various tips and insights on JavaScript and app development, including a JavaScript array reference trick and resources for improving React development skills.
Community Picks·2yThe Design System Ecosystem
A design system ecosystem is a collection of interconnected assets and components that support the development of digital products. It includes layers such as core design system, technology-specific implementation, recipe layer, smart component layer, and the product layer.
LogRocket·2yBuild an off-canvas menu with <dialog> and web components
Learn how to build an off-canvas menu using the <dialog> element and web components. Ensure accessibility and enhance user experience by following the steps provided. Style the menu using CSS to achieve desired animations and positioning.
Lobsters·2yHTMX and Web Components: a Perfect Match
The post discusses the use of Web Components and HTMX together to create reusable, framework-agnostic components. It explains the process of creating and using Web Components in the context of HTMX, provides examples of using Web Components with HTMX, and emphasizes the importance of a white box philosophy in component development.
Community Picks·2yGetting into web components - an intro
The post introduces web components and explores the basics and lingo associated with them. It also discusses the developer experience of creating web components and highlights the use of the Lit library for easier development. Recommended reads and resources are provided for further learning.
htmx·2y> htmx ~ Web Components Work Great with htmx
htmx allows for the seamless integration of Web Components in web projects by taking advantage of its DOM-based lifecycle. This approach, termed Islands of Interactivity, enables developers to mix and match different JavaScript frameworks within multi-page applications. By treating HTML with respect and using hypermedia principles, htmx offers a flexible and efficient way to manage complex frontend functionality without locking developers into a single paradigm or facing the challenges typical of major JavaScript frameworks.
Hacker News·2yThe Web Platform Framework
Brisa is a web platform framework designed for building fast and simple applications with minimal client-side JavaScript by default. It emphasizes server-side rendering (SSR) using JSX components and supports Web Components to manage client interactions. Brisa also offers features like handling browser events on the server, built-in internationalization (i18n), and multi-platform capabilities. The framework aims to unify server and client environments, leveraging native web APIs, Declarative Shadow DOM, and signals to enhance performance and developer efficiency. Additionally, the project is open-source and encourages community contributions.
Community Picks·2yTaming the Shadow DOM: Injecting Global Styles with Adopted Stylesheets
This post explores how to use adopted stylesheets to inject global styles into web components and bridge the gap between the Shadow DOM and global styles. It discusses the purpose of the Shadow DOM in web components and provides considerations for using adopted stylesheets.
This Week In React·1yThis Week In React #214: Base UI, Custom Elements, Next.js, React Router, i18n, OG, Apollo, Android XR, iOS targets, Nitro, RNTL, Volume Manager, Drag Select, brownfield, Zod, Node, SourceMaps, Bun, S
Exciting developments this week include a new headless component library for React, the introduction of Android XR with upcoming React Native support, and various interesting articles about custom elements and Web Components. Key updates feature React Bricks becoming more accessible, React 19's full support for custom elements, new features in Next.js, and a preview of Vite plugin for React Router framework features. The post also highlights major releases like Inertia 2.0 for Laravel integration, Apollo Client 3.12 with improved GraphQL fragment data masking, and React Native updates including new iOS targets and Google’s Android XR SDK.
Community Picks·1yI tried HTMX, again...
HTMX is a JavaScript library that allows developers to harness modern browser features directly within HTML without extensive JavaScript coding. It supports Ajax, CSS transitions, WebSockets, and server-sent events. HTMX simplifies dynamic web app development by reducing boilerplate code and enabling requests from any HTML element. It's particularly beneficial for developers who prefer not to dive deep into JavaScript or front-end frameworks. Wider adoption could lead to improved tooling and further innovation in this space.
Community Picks·2yThe carcinization of web frameworks
Web frameworks are converging towards a similar set of features, including immutability, single-directional flow of data, signals, and server-side rendering. Predictions for the future include resumability and wider adoption of web components. The proliferation of frameworks has led to a clearer understanding of browser needs and the potential for framework-like capabilities without the need for a full framework.
Community Picks·2yOpen Props: sub-atomic styles
Open Props provides sub-atomic styles that can be easily imported in CSS, PostCSS, JavaScript, and NPM. It offers a wide range of individual imports for different styles and themes. Users can also customize their Open Props build to suit their specific needs.
