DEV·9wBecoming 1% better each day.
A developer announces their commitment to a 100-day learning journey focused on frontend development and data structures. They plan to document daily progress through blog posts as an accountability mechanism, learning one topic at a time without rigid planning after previous attempts at structured roadmaps failed.
Awesome·9wThe framework war is over. There are no winners...
Ryan Carniato's 2025 JavaScript ecosystem review argues the framework wars are ending as architectural patterns converge. React faces criticism for virtual DOM overhead, server components complexity, and AI-generated legacy code patterns. Modern frameworks are shifting toward isomorphic-first architectures with out-of-order streaming, server functions, and signal-based reactivity. After years of server-side rendering hype, frameworks are reversing course to balance server and client logic, with some returning to vanilla JavaScript approaches.
Product Hunt·7wfloors.js: Turn your website into Habbo Hotel - one script tag
floors.js is a lightweight JavaScript library (~4kb gzipped) that transforms any website into an isometric 3D social space inspired by Habbo Hotel. By pasting a single script tag, visitors appear as blocky avatars, can walk around, and chat in real-time via WebSockets. Built with vanilla JS and Three.js, it requires no framework, no cookies, no visitor signup, and is GDPR-friendly. It auto-detects page links as rooms and supports SPAs including React, Next.js, Vue, Nuxt, and Astro. The tool also enables site owners to see and message visitors in real-time while they browse.
DesignCourse·7wClaude Code Skills are the Future of Frontend
A demonstration of Claude Code's custom 'skills' feature applied to frontend development, specifically creating a reusable Three.js shader hover effect skill. The author shows how to define a skill that prompts for configuration options (effect type, intensity, animation style) and then applies chromatic aberration, wave, or distortion WebGL effects to gallery images in a vanilla HTML project. The broader argument is that building a library of such reusable AI skills will replace manual Stack Overflow research and become the dominant workflow for frontend developers.
DEV·10wThe Bug That Made Me Question Reality for a Few Hours
A developer shares a debugging story about intermittent production failures caused by a missing environment variable. The issue appeared random because the variable existed locally in a config file but was absent in production, causing inconsistent behavior. The key lesson: bugs that seem random often stem from unvalidated assumptions about environment consistency. The fix involved adding validation and defaults to prevent silent failures.
Collections·9wExploring WebMCP: A New Standard for AI Agent and Website Interaction
WebMCP (Web Model Context Protocol) is an emerging JavaScript API specification backed by Google and Microsoft that enables web applications to expose their functionality to AI agents in a structured way. It introduces two APIs—a Declarative API for HTML form actions and an Imperative API for complex JavaScript interactions—allowing AI agents to interact with websites without scraping HTML or processing screenshots. Chrome offers an early preview, and the W3C Web Machine Learning Community Group has published a draft specification. WebMCP reduces token usage and resource consumption while enabling agents to collaborate with users in a shared interface, with broader rollout expected mid-year. Developers can experiment via Chrome's early preview or the MCP-B polyfill.
DEV·9wI Built a SaaS in 30 Days. Here’s Exactly What Happened.
A developer shares their 30-day journey building StackTrace, a log analysis SaaS that converts production logs into readable incident summaries. Starting from zero, they reached 312 signups, 41 paying users, and $1,287 MRR by focusing on solving one specific problem, shipping quickly with a boring tech stack (Next.js, Node.js, PostgreSQL), and iterating based on user feedback. Key lessons include charging from day one, avoiding premature complexity, building only what users request, and being transparent about both successes and failures like churn and pricing experiments.
The Githubers·8wLearning React First Is Actually a Mistake
Starting with React before mastering JavaScript and browser fundamentals creates knowledge gaps that hinder long-term growth. React abstracts away DOM manipulation, state management, and rendering concepts that beginners need to understand first. A better learning path involves mastering JavaScript fundamentals, browser APIs, and building vanilla JS apps before adopting React. This approach transforms React from mysterious syntax into a logical solution to real problems, creating developers who can debug and adapt rather than cargo-cult code patterns.
Game Developers·9wBirdMMO!
A developer built a multiplayer bird photography MMO in 2 days using AI-assisted development with Three.js and Socket.io. The game features 30 biomes, day/night cycles, an achievement system, and collection mechanics. The project demonstrates rapid prototyping capabilities with modern web technologies and AI coding assistance.
Nx·7wA Monorepo Is NOT a Monolith
Common objections to monorepos are addressed and debunked one by one. A monorepo is not a monolith — deployment and repository structure are orthogonal concerns. Code ownership can be enforced at the folder or project level using tools like GitHub CODEOWNERS or Nx's @nx/owners. Module boundaries and dependency constraints prevent the 'big ball of mud' problem. CI scalability is solved through affected-only builds, remote caching, distributed task execution, and test atomization. AI coding agents actually benefit from monorepo structure rather than being overwhelmed by it. Real challenges include the need for trunk-based development, more sophisticated CI setup, and careful handling of breaking changes to shared libraries.
Hacker News·8wHow I use Obsidian
A detailed walkthrough of how Obsidian's CEO Steph Ango structures his personal knowledge vault. Covers his bottom-up, folder-minimal approach to note organization, heavy use of internal links, fractal journaling (daily fragments → weekly → monthly → yearly reviews), template and property conventions, a 7-point rating scale, and a Jekyll + Netlify publishing pipeline for his personal site. Includes a downloadable vault template on GitHub.
Vercel·10wIntroducing Geist Pixel
Geist Pixel is a new bitmap-inspired typeface that extends the Geist font family with five distinct variants (Square, Grid, Circle, Triangle, Line). Built on a strict pixel grid, it maintains the same typographic rigor as Geist Sans and Geist Mono with consistent metrics, predictable scaling, and production-ready implementation. Each glyph was manually refined for clarity and includes 480 glyphs, 7 stylistic sets, and support for 32 languages. The font is available via npm or Google Fonts and integrates seamlessly with existing Geist typography through aligned vertical metrics and CSS variables.
This is Angular·9wNg-News 26/04: Micro Frontends at Google
Doug Parker from the Angular team discussed Google's approach to micro frontends, emphasizing complete isolation without shared dependencies and using Protocol Buffers for inter-service communication. He advises exploring alternative solutions before adopting micro frontends and warns against using them solely to reduce team communication. TypeScript 6.0 will be the last version written in TypeScript before the Go rewrite, with Angular already preparing for the transition. Angular DevTools received updates to better visualize Signal Graph resources.
Chrome Developers·8wChrome for Developers
Chrome 145 introduces column wrapping for multi-column layouts with `column-wrap` and `column-height` properties, allowing columns to wrap vertically instead of creating horizontal overflow. The release includes a new Origin API that provides an `Origin` object for safer origin comparisons and parsing. Device Bound Session Credentials (DBSC) enhances security by binding user sessions to specific devices using hardware-backed key pairs and short-lived cookies, making stolen session cookies harder to exploit.
Hacker News·8wWeb Components: The Framework-Free Renaissance
Modern browsers now natively support everything needed to build sophisticated, reactive UIs without React, Vue, or Angular. Web components — built on Custom Elements, Shadow DOM, templates, and the native event system — offer encapsulation, loose coupling, and long-term stability that frameworks cannot match. The article argues that the browser has effectively become the framework, and that the upgrade treadmill, dependency overhead, and abstraction layers of popular frameworks are avoidable. It walks through practical patterns: event-driven component communication using custom events that bubble up the DOM, data flowing down via attributes and properties, and Shadow DOM for true style encapsulation. A dashboard example illustrates how independent panels can respond to shared filters without global state or prop drilling. The piece acknowledges frameworks still make sense for teams with deep existing expertise, but advocates for web components — especially for new projects, smaller teams, or long-lived products — and suggests AI assistants can accelerate the learning curve.
Josh W Comeau·7wSprites on the Web • Josh W. Comeau
A deep dive into using sprite-based animation on the web, inspired by Twitter's 2015 'Like' button implementation. The technique uses a spritesheet (a single image containing all animation frames) combined with CSS `object-fit: cover`, `object-position`, and the lesser-known `steps()` timing function to flip between frames. The post covers the full implementation, explains the nuances of `jump-none` vs `jump-end` step positions in looping vs non-looping animations, and discusses when sprites are appropriate (pixel-art style characters, game assets) versus when procedural CSS/JS animation is preferable (particle effects that benefit from randomness). Includes a real-world example of an animated cat character with dynamic state changes.
As a Programmer·10w100 HTML CSS JavaScript Projects for Beginners in 2026
A hands-on course offering 100 beginner-friendly web development projects built with HTML, CSS, and JavaScript. Projects include e-commerce shopping carts, QR code generators, UI components like pricing cards and contact forms, and interactive features like quiz games and color palette generators. Each project is taught step-by-step with complete code walkthroughs, workspace setup guidance, and responsive design implementation.
DEV·7wThe Developer I'm Grateful I Never Became
A reflective personal essay from an eight-year developer who argues that building for real constraints, real users, and real stakes naturally prevents the ego-driven 'architect of empty buildings' trap. The author contrasts their own path—always grounded in practical problem-solving—with the common developer pattern of building for validation, aesthetics, or imagined audiences. Key takeaway: code is a tool for solving real problems, and engineering judgment only forms when something external pushes back against your work.
Lobsters·8wDeath to Scroll Fade!
A developer rant against the ubiquitous 'scroll fade' web design trend, where page elements fade in as they scroll into view. The author argues it's tacky, often demanded last-minute by stakeholders, and raises real concerns: accessibility issues for users with vestibular disorders, cognitive overload, cross-platform inconsistency, and negative impact on Core Web Vitals like LCP. The post crowdsources practical arguments to push back against scroll fade requests, while humorously suggesting developers collectively pretend the technique is now illegal.
DEV·10wAbove the API: What Developers Contribute When AI Can Code
AI coding assistants create a divide between developers who use them for delegation versus judgment. Research shows junior engineers using AI finish faster but score 17% lower on mastery tests. The critical skills that remain valuable are architectural thinking, verification capability, maintenance of existing systems (v2+), simplification discipline, and domain expertise. These "above the API" skills are traditionally learned through friction, mentorship, and public knowledge sharing—transmission mechanisms now at risk. Developers who treat AI as a confident junior requiring review maintain value, while those who blindly accept AI output lose understanding. The piece argues for deliberate verification habits, public knowledge contribution, and explicit mentorship to preserve these judgment skills across generations.
Codrops·10wMaking Motion Behave: Inside Vladyslav Penev’s Production-Ready Interaction Systems
Vladyslav Penev shares his approach to building production-ready interactive web experiences, focusing on his StringTune library and StringTune-3D. He demonstrates how to create high-performance motion systems where CSS, WebGL, and DOM interactions work cohesively. Key techniques include GPU-accelerated effects, layout-driven 3D anchoring, scroll-based animations with inertia, and treating 3D objects as first-class UI citizens. The article walks through real projects (Fiddle.Digital, Kaleida) showing practical solutions for cursor interactions, video streaming optimization, shader-based transitions, and making Three.js obey web layout rules. Penev emphasizes building reusable modules, stress-testing under real constraints, and keeping motion systems predictable through normalized inputs.
CodePen·8wChris’ Corner: All Together Now
Modern CSS has evolved to handle tasks that previously required JavaScript. Features like custom selects with `appearance: base-select`, anchor positioning, scroll-driven animations, and scroll state queries now enable complex UI patterns purely in CSS. When combined, these capabilities demonstrate CSS's transformation into a more powerful, intelligent language that covers most presentation and interaction needs without JavaScript.
Kevin Powell·7wAnd they say CSS isn't a programming language
A walkthrough of a CSS-only shortest path finder demo (by Tmania on CSSON.dev) that calculates and highlights the shortest route between draggable nodes using advanced CSS features. The demo uses CSS math functions like hypot(), CSS counters for displaying distances, view timelines to track element positions, container style queries with range syntax to compare distances, anchor positioning for connecting nodes, and registered custom properties — all without any JavaScript logic (JS is only used for drag-and-drop). The author explores the code live, explaining how each CSS feature contributes to the pathfinding algorithm.
