Isaac de Andrade·23wThe Lost Art of Programming Offline
Programming without internet access reveals gaps in knowledge and forces reliance on local resources like man pages, system header files, and existing code. This constraint-based approach helps identify mastered domains versus weak areas, makes learning more efficient and personal, and strengthens fundamental skills by eliminating dependency on Stack Overflow, documentation sites, and AI assistants.
Una Kravets·24wCSS Wrapped 2025
Chrome 135 introduces Invoker Commands, allowing buttons to perform actions on dialogs and popovers declaratively using commandfor and command attributes, eliminating the need for JavaScript onclick handlers. The feature supports built-in commands like show-modal, close, and toggle-popover that mirror their JavaScript counterparts, plus custom commands prefixed with double dashes that can be handled via the toggle event. A polyfill is available for broader browser support.
Collections·24wfreeCodeCamp Launches New JavaScript and Responsive Web Design Certifications
freeCodeCamp launched three new certification programs covering JavaScript, Python, and Responsive Web Design. Each certification includes hundreds of hours of interactive content, five hands-on projects, and a 50-question proctored exam with anti-cheating measures. The programs cover core concepts like DOM manipulation and asynchronous JavaScript, Python data structures and algorithms, and responsive design with CSS Flexbox and Grid. All certifications are free, permanently valid, and don't require webcam or ID verification.
Lobsters·24wVanilla CSS is all you need
Modern CSS has evolved to include native variables, nesting, container queries, and advanced features like :has() and color-mix(), making build tools and preprocessors unnecessary for many projects. An analysis of three production applications from 37signals (Campfire, Writebook, and Fizzy) reveals a consistent nobuild CSS architecture using OKLCH colors, character-based spacing, semantic component classes with minimal utilities, and progressive adoption of cutting-edge CSS features. The approach demonstrates that vanilla CSS can handle real-time chat, publishing platforms, and project management tools with 14,000 lines across 105 files, achieving sophisticated interactions like animated dialogs, dynamic theming, and stateful UI without JavaScript or build steps.
LogRocket·24wStop using JavaScript to solve CSS problems
Modern CSS features like content-visibility, container queries, and scroll-driven animations now handle tasks developers traditionally solved with JavaScript. Content-visibility provides native virtualization without libraries like react-window, container queries enable responsive design based on parent containers rather than viewport width, and scroll-driven animations run on the compositor thread for better performance. While JavaScript remains necessary for truly infinite lists, precise measurements, and dynamic layouts, most common use cases benefit from CSS-first solutions with simpler code and better performance.
CodeHead·21wThe Fun Way To Learn Web Development
Learning web development becomes engaging when you focus on building small, tangible projects rather than passively consuming tutorials. Project-based learning with constraints, sharing work publicly, and using AI as an experimentation tool rather than a copy-paste shortcut creates momentum. Consistency through 30-minute daily sessions compounds faster than marathon study sessions, making learning feel like a challenge rather than homework.
CSS-Tricks·25wPrevent a page from scrolling while a dialog is open
Chrome 144 introduces a fix for preventing page scrolling when modal dialogs are open by extending overscroll-behavior to work on non-scrollable containers. By setting overscroll-behavior: contain on both the dialog element and body, and making the dialog a scroll container with overflow: hidden, developers can now solve this long-standing issue without JavaScript workarounds that previously required fixing body positioning.
Cassidy's blog·24wCSS Clamp
The CSS clamp() function enables responsive sizing by setting a value between minimum and maximum bounds with a preferred middle value. It accepts three parameters (minimum, preferred, maximum) and can replace verbose media queries with a single line of code. Common use cases include fluid typography and flexible column widths that adapt smoothly across viewport sizes while maintaining readability constraints.
CSS-Tricks·22wMasonry Layout is Now grid-lanes
The CSS Working Group has officially decided on `display: grid-lanes` as the syntax for triggering masonry layout in CSS. After years of debate starting in 2017, the CSSWG resolved to reuse grid templating and placement properties for masonry. All major browsers (Chrome, Safari, Firefox) had already implemented experimental versions with different syntaxes but are now working on switching to `grid-lanes`. The feature is not yet available in stable browsers, but implementation work is underway across all major browser engines.
Blogging and all that Malarkey·20wA new gold mine graphic animation
A designer shares their process of creating an animated gold mine graphic for a contact page, replacing an earlier version they disliked. The workflow involved pencil sketching, creating vectors in Sketch, then implementing CSS animations for swaying buckets and swinging lamps, plus vanilla JavaScript for dust particles and gold shimmers. The graphic features pioneer characters positioned at a mine entrance with atmospheric effects.
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.
Smashing Magazine·24wMasonry: Things You Won’t Need A Library For Anymore — Smashing Magazine
CSS Masonry layout is coming to browsers as a native feature, eliminating the need for JavaScript libraries like Masonry.js. The article explores how modern web platform features—including popovers, dialogs, container queries, and anchor positioning—can replace third-party dependencies, resulting in better performance, smaller bundle sizes, and simpler code. Built-in Masonry offers significant advantages over JavaScript solutions: no render-blocking scripts, faster responsiveness, and familiar CSS syntax similar to Grid and Flexbox. The piece also provides resources for tracking new web features and ways developers can influence browser vendors' priorities through surveys and the Interop project.
CSS-Tricks·23wWhat Else Could Container Queries… Query?
Container queries have evolved beyond simple size queries to include scroll-state queries, anchored container queries, and potentially many more types. The article explores current container query capabilities including detecting scrollability, sticky positioning, and anchor position fallbacks. It discusses future possibilities like querying any CSS property value, detecting element wrapping or ellipsing, counting child nodes, and determining flex/grid positions. The author predicts container queries will become increasingly versatile, potentially offering dozens of query types similar to how media queries have expanded.
CSS-Tricks·24wThat Time I Tried Explaining HTML and CSS to My 5-Year Old Niece
Teaching HTML and CSS to a five-year-old using a house-building analogy reveals fundamental insights about web development. HTML acts as the structural bricks that define what exists on a page, while CSS decorates those bricks with colors, sizes, and positioning. The exercise demonstrates how explaining basics forces developers to slow down and appreciate the foundational simplicity of web technologies, reminding us that beneath all the complexity, the web runs on straightforward building blocks.
Bram.us·24wThe Google Antigravity website, rebuilt with Modern CSS
A recreation of Google's Antigravity website using modern CSS features instead of scroll-jacking JavaScript. The implementation showcases advanced CSS capabilities including scroll-driven animations, anchor positioning, container queries, CSS Houdini PaintWorklet, and experimental features like scroll-state queries and sibling-index(). Built with progressive enhancement to ensure compatibility across browsers, with minimal JavaScript usage limited to PaintWorklet registration and cursor position tracking.
ThePrimeTime·21wThey did what to SQL?
A satirical commentary on TailwindSQL, an absurd open-source project that proposes writing database queries using CSS class syntax similar to Tailwind. The piece humorously critiques the concept of executing SQL queries from the client side using HTML classes, highlighting the obvious security implications and questioning the practicality of build-time query execution. The commentary uses heavy sarcasm to mock the trend of over-engineering simple solutions and the proliferation of questionable developer tools.
Kevin Powell·22wStop using the legacy color syntax
Modern CSS color syntax no longer requires the 'A' suffix in RGBA/HSLA or comma separators. The new space-separated syntax uses a forward slash before alpha values (e.g., `rgb(255 0 0 / 0.5)`). This syntax is mandatory for newer color functions like OKLCH, LAB, and the color() function, which support wider color gamuts beyond sRGB. The most practical benefit is relative colors, which allow manipulating existing color variables on-the-fly, such as adding transparency to any color format using syntax like `hsl(from var(--color) h s l / 0.5)`. The legacy comma syntax still works and doesn't require refactoring existing projects.
Theo - t3․gg·21wCSS got WAY better in 2025
Chrome shipped 22 new CSS and UI features in 2025, including customizable select elements, native popover and dialog controls, scroll-based animations, view transition improvements, and declarative UI patterns. Major additions include invoker commands for JavaScript-free interactions, anchor positioning with container queries, scroll state queries, tree counting functions for staggered animations, and the shape function for complex clipping paths. New text layout controls enable proper vertical centering, while DOM state-preserving moves keep video and iframe state during reparenting. Most features work in Chromium browsers but lack Firefox and Safari support.
Hacker News·24wBuilding a toast component
Sonner is a React toast library downloaded 7M+ times weekly. Its success stems from unique stacking animations using CSS transitions instead of keyframes for smooth interruption, momentum-based swipe gestures, and an Observer Pattern for state management that avoids React Context. Key implementation details include dynamic height calculations for stacking, velocity-based dismissal, tab visibility detection to pause timers, and pointer capture for consistent drag behavior. The library prioritizes developer experience with a simple API and comprehensive documentation.
Product Hunt·24wEaseMaster: A bezier curves & spring motion editor + code exporter
EaseMaster is a visualization tool for creating and exporting cubic bezier curves and spring physics animations. It generates ready-to-use code for CSS, Tailwind, Framer Motion, and GSAP, helping developers design smooth easing functions and motion effects for web interfaces.
Lobsters·21wGoodbye SASS
A developer shares their experience migrating from SASS to native CSS after modern features like nesting became widely supported. They replaced SASS with simple file concatenation and esbuild for minification, reducing critical dependencies. The decision prioritizes long-term maintainability over short-term optimization, as esbuild is optional for minification while SASS was required for compilation. The approach reflects lessons from maintaining a website for over 30 years, emphasizing the importance of choosing tools based on what happens when they disappear.
CSS Tip·24wThe Hidden Selectors of The HTML Element
Explores alternative CSS selectors for targeting the HTML root element beyond the standard `html{}` and `:root{}`. Demonstrates lesser-known approaches including the nesting selector `&`, `:scope`, `:has(head)`, `:not(* *)`, and `:not(* > *)`. Explains how these selectors work by leveraging fallback behaviors and unique characteristics of the HTML element, such as being the only element without a parent or having head and body as children.
Una Kravets·22wDirectional CSS with scroll-state(scrolled)
CSS scroll-state queries now include a `scrolled` value in Chrome 144 that detects scroll direction (up, down, left, right). By setting `container-type: scroll-state` on a parent element, you can apply styles based on the user's most recent scroll direction. Common use cases include hiding navigation bars when scrolling down and showing them when scrolling up, or creating directional scroll entry animations. The feature works as progressive enhancement, with unsupported browsers simply ignoring the scroll-state queries while maintaining existing functionality.
Web Dev Simplified·20wI Love the NEW CSS Functions
CSS now supports custom functions using the @function syntax, enabling developers to create reusable logic like responsive sizing and color manipulation. Functions follow CSS cascade rules, use the 'result' property instead of return statements, support default parameters and type annotations, and can be overridden using CSS layers. Practical examples include building a transparency function and a responsive value switcher that adapts based on media queries.
Hacker News·22wIntroducing CSS Grid Lanes
CSS Grid Lanes is a new layout feature available in Safari Technology Preview 234 that enables masonry-style layouts using `display: grid-lanes`. It leverages CSS Grid's column/row definition syntax to create flexible, responsive layouts without media queries. Items automatically flow into lanes based on available space, similar to traffic changing lanes. The feature supports spanning items across lanes, explicit placement, bidirectional layouts (waterfall or brick), and includes an `item-tolerance` property to control placement sensitivity. Grid Lanes makes complex layouts like photo galleries, article grids, and mega menus significantly easier to implement with minimal CSS.