Best of HTML — 2025

1
Article
The New Stack·31w
CSS Finally Gets Inline Conditional Logic With New if() Function
CSS now supports inline conditional logic through the new if() function in the 2025 W3C specification. This function allows developers to set different property values based on conditional tests using style queries, media queries, or feature queries. The syntax follows JavaScript's if-else pattern and can be used for tasks like theme switching, responsive design, and feature detection. Currently, Chrome and Edge support the function, while Safari and Firefox are still implementing it. This marks the first time CSS offers inline logic processing without requiring separate code blocks.
395
40
2
Article
Community Picks·1y
HTML Symbols
Symbl offers a comprehensive library of special HTML symbols, entities, and icons for enhancing web projects. It includes diverse options like arrows, mathematical symbols, currency signs, and decorative icons. With easy copy-paste functionality, it's perfect for developers and designers looking to add unique characters to their websites, apps, and documents. The tool is free to use and requires no registration.
294
7
3
Article
Hacker News·28w
Pikaday
Most forms don't need JavaScript date pickers. Native HTML date/time inputs handle accessibility, performance, and internationalization automatically. For better usability, consider separate inputs for day/month/year, select dropdowns for limited options, or masked inputs with validation. Complex calendar widgets lead to more errors and accessibility issues. Keep forms simple by using native browser features and basic HTML elements that are easier to use and test.
279
15
4
Article
Una Kravets·24w
CSS 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.
279
7
5
Article
Hacker News·22w
Please Just Fucking Try HTMX
HTMX offers a middle ground between raw HTML limitations and JavaScript framework complexity. By adding HTML attributes that trigger server requests and swap in HTML responses, you can build interactive web applications without the overhead of React, Vue, or Angular. A case study shows a company reduced their codebase by 67%, cut JavaScript by 90%, and improved performance by switching from React to HTMX. The approach works best for typical CRUD applications, dashboards, and forms rather than highly interactive apps like Google Docs. The core benefit is simplicity: no build tools, no state management libraries, just HTML attributes and server-side rendering.
253
45
6
Article
Hacker News·42w
Make any website load faster with 6 lines of HTML
Chrome's Speculation Rules API enables near-instant page navigation by preloading and prerendering pages with just a few lines of HTML. The API supports prefetch (downloads HTML only) and prerender (fully renders pages in background) with configurable eagerness levels. While only supported in Chrome 121+, fallback JavaScript can provide similar functionality for Firefox and Safari using traditional prefetch/preload techniques with hover detection.
241
14
7
Article
Collections·24w
freeCodeCamp 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.
214
8
8
Article
Community Picks·1y
25 Ridiculously Impressive HTML5 Canvas Experiments
The post showcases 25 impressive HTML5 canvas experiments featuring various animations and interactive elements. From glowing hexagon patterns and falling confetti to interactive stars and fireworks, these examples demonstrate the capabilities of HTML5 canvas for creating visually appealing effects. The collection aims to inspire developers to explore creative possibilities with HTML5 canvas.
204
7
9
Article
Hacker News·36w
This 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.
189
18
10
Video
CodeHead·21w
The 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.
178
8
11
Article
Hacker News·52w
CSS Minecraft
Explore a Minecraft clone designed using only HTML and CSS, with no JavaScript involved. For optimal performance, close other tabs and programs. The project utilizes the CSS :has() pseudo-class, requiring an updated browser version for proper functionality.
174
11
12
Article
Web Performance Calendar·21w
Revisiting HTML streaming for modern web performance
HTML streaming allows servers to send HTML progressively rather than in one chunk, enabling browsers to render content as it arrives. HTMS is an experimental project that extends basic streaming with progressive placeholders that can be updated asynchronously within a single HTTP response. This approach delivers early First Contentful Paint, maintains SEO-friendly complete HTML documents, and achieves strong Lighthouse scores without client-side hydration. The technique works best combined with SSR, SSG, or tools like HTMX, though it introduces constraints around error handling once streaming begins and requires careful layout planning.
172
7
13
Article
Christian Heilmann·1y
Learning HTML is the best investment I ever did
HTML remains a fundamental technology for structuring web content, offering ease of use, accessibility, and essential interface elements. Despite its simplicity, many developers overlook its importance, leading to improper usage. HTML's robustness has been demonstrated over decades, and it continues to be critical, even with the introduction of new web technologies. Proper usage, such as correctly linking labels to form inputs and adhering to standards, can greatly enhance the usability and maintainability of web pages.
173
4
14
Article
Hacker News·30w
I Built an App to Encourage My Kids to Invest — Just One HTML File
A developer created a single-file HTML Progressive Web App to teach their children about investing and compound interest. The app, called D-investments, runs on an old smartphone mounted on the fridge and displays daily investment growth with configurable interest rates. It demonstrates how simple web technologies can solve real-world problems, turning financial education into an interactive, visual experience for kids.
160
15
15
Article
Fullstack Developer·1y
How To Become a better frontend developer.
Explore various projects with no specific rules to follow. Use any languages, libraries, or frameworks to recreate and learn from these projects to enhance your frontend development skills.
159
2
16
Article
CSS-Tricks·25w
Prevent 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.
150
5
17
Article
Hacker News·52w
My website is ugly because I made it
A developer shares their philosophy on creating personal websites, emphasizing authenticity over perfection. They detail specific CSS techniques used to make their site unique, including rotating navigation links with different fonts, adding texture with CSS-generated dots, and creating hover effects. The piece advocates for embracing imperfection and personal expression in web design rather than following conventional design standards.
141
15
18
Video
Joy of Code·1y
Animated 3D Sphere Intersection Using CSS And Trigonometry
Learn step-by-step how to construct a dynamic and animated 3D sphere intersection using CSS and trigonometry principles. Explore techniques for styling elements with gradients, positioning in 3D space, and using transformations. Discover how to dynamically animate circles with trigonometric calculations to achieve pulsating effects.
135
2
19
Article
Ahmad Shadeed·1y
First Look at The Modern attr()
This post explores the modern usage of the attr() function in CSS, highlighting its ability to handle various data types beyond text, such as color, length, and time. It demonstrates practical use cases including assigning column numbers in CSS grids, setting animation delays, adjusting textarea rows, and defining background images. Modern attr() offers flexibility and improves separation of concerns and reduces CSS conflicts, making CSS more modular and maintainable. Currently supported only in Chrome.
135
9
20
Article
Acko.net·42w
HTML is Dead, Long Live HTML
The DOM has become bloated with over 350 properties per node and 660 CSS properties, making it unsuitable for modern web applications. CSS's inside-out layout model creates complexity, while features like flexbox require speculative layout passes that can cause performance issues. The author argues for rethinking web UI from first principles, proposing simpler layout models that separate concerns and provide better primitives for building applications. Current proposals like HTML-in-Canvas are insufficient because they don't address the fundamental architectural problems of the web platform.
130
10
21
Article
CSS-Tricks·1y
Revisiting Image Maps
The post explores the use of image maps, an older web design tool, and discusses their advantages, challenges, and alternatives. It highlights a project for Mike Worth that required blending expressive '90s design with modern techniques. While discovering image maps weren't the right fit, the effort led to finding modern solutions by leveraging SVG and anchoring paths for clickable areas, emphasizing accessibility and responsiveness.
128
2
22
Article
CSS Tip·1y
Inverted radius shape with hover effect
Learn how to combine the inverted radius shape with modern CSS techniques to create a stylish hover animation. The guide uses minimal HTML, is powered by @property and CSS Mask, and is optimized with CSS variables.
124
3
23
Article
Simon Willison·23w
JustHTML is a fascinating example of vibe engineering in action
JustHTML is a pure Python HTML5 parser that passes all 9,200+ browser vendor tests and achieves 100% test coverage. The library was built over several months using AI coding agents (Claude Sonnet, Gemini Pro, Claude Opus) in VS Code, but with extensive human engineering oversight. The developer established the API design, integrated comprehensive test suites, built custom profilers and fuzzers, and made all architectural decisions while letting the AI handle code implementation. This represents "vibe engineering"—using AI agents professionally with proper code review, testing, and engineering practices—rather than "vibe coding" which produces unvetted prototypes. The project demonstrates how experienced engineers can leverage AI as a typing assistant while maintaining responsibility for design, quality, and architectural decisions.
122
9
24
Article
unixsheikh.com·36w
How I manage my bookmarks
A developer shares their custom bookmark management system using local HTML files stored in a Git repository. The approach involves creating categorized HTML files in a hidden folder, adding them to browser toolbars via file URLs, and syncing across devices using Git. This method intentionally adds friction to prevent casual bookmarking while maintaining simplicity and avoiding cloud dependencies or browser extensions.
115
12
25
Article
Lobsters·32w
The Web Is About to Get Better for Everyone, Everywhere
The European Accessibility Act, effective summer 2025, will require digital products in the EU to meet enforceable accessibility standards. This legislation will likely trigger a global upgrade in web accessibility, as companies typically build one version of their products rather than maintaining regional forks. Similar to GDPR's impact on privacy, the EAA will affect how teams design, build, and ship products, requiring semantic HTML, keyboard navigation, screen reader support, and inclusive design patterns. The improvements will spread through shared design systems, component libraries, and frameworks, benefiting developers worldwide and potentially influencing accessibility legislation in other regions.
113
40

See all HTML archives