Best of Web Development — June 2025

1
Article
freeCodeCamp·45w
The 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.
432
9
2
Video
JavaScript Mastery·45w
Build 3 Full-Stack Web Apps That Will Land You a Dev Job (12-Hour Full Course)
A comprehensive 12-hour course teaching React development through building three production-ready applications: a movie app with trending features, a serverless file management system, and an AI-powered travel admin panel. Covers React 19 fundamentals, hooks, state management, component architecture, styling with Tailwind CSS v4, and deployment strategies. Uses modern tools like Next.js 15, Appwrite for backend services, and includes practical examples of authentication, file handling, and API integration.
384
6
3
Article
freeCodeCamp·45w
The Front-End Monitoring Handbook: Track Performance, Errors, and User Behavior
A comprehensive guide to building a frontend monitoring SDK from scratch, covering three main areas: performance monitoring (Core Web Vitals like FCP, LCP, CLS, plus API timing and resource loading), error tracking (JavaScript errors, Promise rejections, resource failures), and user behavior analytics (page views, scroll depth, click tracking). The tutorial provides practical code examples for implementing data collection using browser APIs like PerformanceObserver, MutationObserver, and various event listeners, along with reporting mechanisms and optimization techniques for production environments.
282
4
4
Article
ITNEXT·41w
Hacker Screen Builder
A web-based tool that creates cinematic hacker-style interfaces through drag-and-drop widgets including satellite maps, 3D globes, progress bars, and facial recognition animations. Built using AI assistance from ChatGPT for ideation, Google AI Studio for frontend generation, and GitHub Copilot for backend development. Features customizable widgets, screen testing, and shareable links for saved configurations.
230
13
5
Article
LogRocket·44w
Top 5 Next.js alternatives for React developers
Explores five alternatives to Next.js for React developers who want different approaches to building web applications. Covers Remix for full-stack apps with web-native patterns, Astro for content-heavy sites with island architecture, TanStack Start for type-safe full-stack development, Vike for flexible SSR control, and Vite + React Router for lightweight client-side apps. Each option offers different trade-offs in complexity, performance, and developer experience compared to Next.js.
187
11
6
Article
System Design Codex·43w
Essential Roadmap to Learn API Development
A comprehensive guide covering the essential topics for learning API development, from understanding basic concepts like REST and HTTP methods to advanced topics including authentication mechanisms (OAuth 2.0, JWT), API design principles, testing strategies, and deployment considerations. The roadmap includes practical tools like Postman and OpenAPI, security best practices, and hands-on experience with public APIs from services like Google Maps and Stripe.
160
1
7
Article
Community Picks·44w
iro.js
iro.js is a JavaScript color picker widget that provides an SVG-based interface for selecting colors. It supports multiple color formats (hex, RGB, HSV, HSL, and kelvin temperatures) through a unified API, allows multiple colors for harmony selection, and requires no external dependencies. The library can be installed via NPM, CDN, or direct download, and offers customizable options, event handling, and easy integration with modern frameworks.
157
9
8
Article
LogRocket·45w
When to use Flexbox and when to use CSS Grid
CSS Flexbox excels at one-dimensional layouts for aligning items in rows or columns, making it perfect for UI components and simple alignment tasks. CSS Grid handles two-dimensional layouts with both rows and columns simultaneously, ideal for complex page structures. The key principle is using Grid for overall layout architecture and Flexbox for component-level alignment. Both systems can be combined effectively - Grid for the main page structure and Flexbox within individual sections for precise element positioning. Modern web development benefits from understanding when each tool serves its purpose best rather than trying to force one solution for all layout needs.
142
4
9
Video
Awesome·44w
C# is cool again and you can't avoid it anymore...
C# has evolved significantly from its enterprise-focused origins into a modern, cross-platform language with features like records, pattern matching, nullable reference types, and async/await. The .NET ecosystem has been transformed with .NET Core (now simply .NET), offering cross-platform support, modular architecture, and excellent performance. Modern C# includes minimal APIs for quick web development, LINQ for database querying, source generators for compile-time code generation, and frameworks like Blazor for frontend development and MAUI for cross-platform mobile apps.
137
20
10
Article
LogRocket·45w
Modern CSS carousels: No JavaScript required
Chrome 135 introduces new CSS pseudo-elements ::scroll-button() and ::scroll-marker() that enable building fully functional carousels without JavaScript. These features create interactive scroll buttons and visual markers with built-in accessibility support, including automatic screen reader announcements and keyboard navigation. The pseudo-elements work with existing CSS features like scroll-snap-type for smooth navigation and can be styled like regular HTML elements.
131
4
11
Article
Community Picks·42w
Liquid Glass, but in CSS
A detailed technical breakdown of recreating Apple's new Liquid Glass design language using CSS and SVG filters. The implementation involves multiple layers including specular highlights with box-shadow, backdrop blur and color filters, SVG displacement maps for refraction effects, and chromatic aberration simulation. The technique requires advanced CSS filter knowledge and has significant browser compatibility limitations, working primarily in Chrome with performance considerations for GPU usage.
129
11
12
Article
Medium·45w
5 Hidden Laravel Features That Will Instantly Clean Up Your Code
Laravel offers several underutilized features that can significantly improve code quality and readability. Key features include @forelse for handling empty collections in Blade templates, when() method for conditional query building, sortByDesc() for collection sorting, isEmpty() for cleaner empty checks, and whereRelation() for simplified relationship filtering in Laravel 9+. These methods replace verbose conditional statements and make code more expressive and maintainable.
129
4
13
Article
Community Picks·44w
Tailwind CSS Animations Plugin: Community-Powered Animation Magic
A comprehensive Tailwind CSS animations plugin by @midudev that provides over 60 pre-built animation classes for web developers. The plugin includes common animations like fade-in/out, slide transitions, rotations, bouncing effects, and complex animations like heartbeat, dancing, and jelly. Installation is straightforward via npm, making it easy to add engaging animations to websites without writing custom CSS.
128
7
14
Article
Codrops·43w
Coding a 3D Audio Visualizer with Three.js, GSAP & Web Audio API
A comprehensive guide to building an interactive 3D audio visualizer that combines Three.js for 3D rendering, Web Audio API for real-time sound analysis, and GSAP for smooth animations and draggable UI elements. The tutorial covers creating custom GLSL shaders for audio-reactive effects, implementing frequency analysis to drive visual distortions, and building a sci-fi interface with momentum-based interactions. The result is a glowing orb that pulses and morphs in sync with music while users can drag control panels around the screen.
123
5
15
Video
Theo - t3․gg·44w
Why Tech Companies Are Moving Off React
A detailed analysis of why some tech companies are considering moving away from React, examining the framework's evolution through hooks, concurrent mode, server components, and the React compiler. The discussion argues that React's recent developments primarily benefit large-scale applications, addressing performance issues and complexity management that big companies face. The author counters claims that React is failing at scale, demonstrating how features like hooks improved code composability, server components solve server-driven UI problems, and the compiler optimizes performance automatically.
118
30
16
Article
Community Picks·42w
Top 5 Monorepo Tools for 2025
Compares five leading monorepo tools for 2025: Bazel (Google's production-grade polyglot build system), Gradle (JVM-focused multi-project builds), Turborepo (JavaScript/TypeScript optimized by Vercel), Pants (multi-language with automatic dependency inference), and Nx (comprehensive JavaScript framework with smart caching). Each tool targets different use cases - from enterprise polyglot codebases to frontend-heavy stacks. The guide emphasizes choosing based on language ecosystem, team size, and CI requirements rather than raw performance metrics, while acknowledging that monorepos require significant tooling investment to realize productivity gains.
114
2
17
Article
Chrome Developers·44w
A new way to style gaps in CSS
CSS gap decorations is a new feature available in Chrome and Edge 139 that allows developers to style gaps between items in flex, grid, and multi-column layouts without using border or pseudo-element workarounds. The feature extends the column-rule property to work with grid and flexbox layouts and introduces a new row-rule property. It offers benefits like no layout impact, repeat syntax for patterns, cleaner markup, and enhanced customizability through new properties like rule-break, rule-outset, and gap-rule-paint-order. The feature is currently in developer trial and requires enabling experimental web platform features.
110
4
18
Article
Collections·44w
A Guide to Creating Blurry Glass Effects with CSS
Glassmorphism creates modern frosted glass effects in web design using CSS techniques like backdrop-filter, radial gradients, and pseudo-elements. Basic approaches use gradient backgrounds and borders for solid backgrounds, while advanced methods employ CSS masks and backdrop filters for true transparency. A Glassmorphism CSS Generator tool based on Glass UI library provides ready-to-use code snippets with MIT licensing, offering backdrop-filter blur effects and browser compatibility information for streamlined implementation.
110
5
19
Video
Web Dev Simplified·42w
No One Talks About This Amazing VSCode Feature
VS Code has a built-in port forwarding feature accessible through the terminal's ports tab. You can forward any local port (like localhost:3000) to create a publicly accessible URL. This feature is particularly useful for testing webhooks and sharing local development sites with others. The forwarded ports can be set to private (requiring authentication) or public (accessible to anyone), making it valuable for various development scenarios.
100
6
20
Article
TestDriven.io·41w
Developing a Real-time Dashboard with FastAPI, MongoDB, and WebSockets
A comprehensive tutorial demonstrating how to build a real-time order dashboard using FastAPI for the backend API, MongoDB with Change Streams for database operations, and WebSockets for live data streaming. The guide covers setting up MongoDB replica sets, implementing CRUD operations for order management, configuring Change Streams to monitor database events, and creating a responsive frontend that displays real-time updates as orders are created, modified, or deleted.
95
2
21
Article
Dev World·45w
Forget the Rules: Build a Developer Portfolio That’s Unapologetically Yours
Developer portfolios don't need to follow rigid templates or universal formulas. Authenticity matters more than following conventional rules like having exactly 3-5 projects or using minimalist designs. Employers care about proof of coding ability, problem-solving skills, and clear documentation rather than flashy aesthetics. Building passion projects that reflect your genuine interests creates more memorable portfolios than generic tutorial clones. The key is showcasing real skills through projects you're excited about, whether that's through a single complex project, GitHub READMEs, or unconventional designs that match your personality.
95
6
22
Video
ByteGrad·43w
Next.js CSR vs SSR vs SSG vs ISR and now PPR!
Explains the key rendering strategies in Next.js: Client-Side Rendering (CSR) runs components in the browser, Server-Side Rendering (SSR) executes on the server, Static Site Generation (SSG) pre-renders pages at build time for optimal performance, Incremental Static Regeneration (ISR) allows updating static pages without full rebuilds, and Partial Pre-Rendering (PPR) combines static and dynamic content on the same page. The guide covers when to use each approach, how Next.js automatically chooses rendering methods, and practical implementation examples including server components, client components, and optimization techniques.
92
3
23
Article
Svelte Developers·45w
JavaScript Framework Showdown: Why SvelteKit Emerges Victorious
SvelteKit outperforms Next.js and Nuxt.js in the JavaScript framework competition through its revolutionary compilation approach that eliminates runtime overhead. Unlike traditional virtual DOM frameworks, SvelteKit compiles components into efficient vanilla JavaScript, resulting in smaller bundle sizes, faster load times, and superior performance. The framework offers a gentler learning curve while maintaining power, making it ideal for performance-critical applications where bundle size and runtime performance are crucial.
91
20
24
Video
Web Dev Cody·44w
Why I work on side projects
A developer shares their approach to building multiple side projects as a learning strategy. Rather than focusing on completion or monetization, they use each project to explore specific technical questions like Stripe integration, subscription systems, or AI code generation. The key is setting focused learning goals, avoiding too many new technologies at once, and building a repository of reusable components. This method helps expand knowledge beyond what's available in regular employment, creating a foundation for tackling future challenges with confidence.
88
25
Article
Collections·42w
Building a Comprehensive Calendly Clone with Next.js, TypeScript, and Tailwind CSS
A comprehensive tutorial for building a Calendly-like scheduling application using Next.js 15, TypeScript, React 19, and Tailwind CSS. The project includes user authentication with Clerk, Google Calendar integration, event management, PostgreSQL database with Drizzle ORM, and real-time scheduling functionality with timezone handling. The tutorial covers both frontend and backend development, resulting in a production-ready application with public booking pages and intuitive navigation.
82
3

See all Web Development archives