Best of Frontend Development — March 2025
- 1
- 2
HuXn WebDev·1y
THE BIGGEST NEXT.JS COURSE ON THE INTERNET ( PART 1 )
This post introduces the largest Next.js course available online, detailing the comprehensive curriculum which includes Next.js, Prisma, Drizzle, AJ, Clerk, Motion, GraphQL, Stripe, TRPC, testing frameworks, and design systems. The course aims to make participants proficient in Next.js by building over 50 projects and completing 100 challenges with 98% of the code written in TypeScript. Additionally, prerequisites include familiarity with React.js.
- 3
Javascript developers·1y
Frontend Clean Architecture - (Reactjs, Nextjs)
Simple React project structure based on Atomic Design and Clean Architecture principles, aimed at organizing folders for scalable projects. No error handling, authentication, or logic included, just a clean setup to start faster.
- 4
Ahmad Shadeed·1y
CSS Relative Colors
CSS relative colors enable dynamic color generation directly in CSS without the need for pre-processors like Sass. This post explores how to apply opacity, create lighter or darker variations of a color, and use different color spaces (hsl and oklch) with practical examples. The article includes detailed explanations, code snippets, and interactive demos to help readers understand and implement this powerful feature in their projects.
- 5
tailwindcss·1y
Tailwind UI is now Tailwind Plus
Tailwind UI has been rebranded as Tailwind Plus, maintaining its one-time purchase model and lifetime access. Existing Tailwind UI All-Access license holders are automatically upgraded to Tailwind Plus. The new brand aims to provide enhanced features such as Tailwind Play accounts, custom editor themes, alternative color palettes, and more. Tailwind Plus also focuses on building a stronger community and offering early access to beta documentation and events.
- 6
LogRocket·1y
How to use CSS variables like a pro
CSS variables, also known as custom properties, allow developers to reuse values throughout a stylesheet, helping to write clean and efficient code. This tutorial provides a detailed guide on using CSS variables with practical examples, including dynamic changes with JavaScript, responsive design adjustments, and theme toggling. Learn how to define CSS variables globally or locally, apply fallback values, and harness cascading rules and specificities for styling flexibility.
- 7
The React Community·1y
8 Components to become React master
Discusses important concepts such as controlled vs. uncontrolled components, higher-order components (HOCs), render props, and hooks like useState and useEffect. Also covers context for state management and error boundaries. Highlights the importance of component structuring for clean, reusable, and maintainable code.
- 8
Hacker News·1y
Sync Engines are the Future
Sync engines are poised to revolutionize the way we handle data in web development by collapsing the database and server into a single entity. This approach simplifies the tech stack, ensuring data is consistently synchronized and reducing dependency on traditional database servers. This essay discusses the complexities of data synchronization, the limitations of existing tools like SQL, and the potential of sync engines to streamline backend and frontend operations.
- 9
Prismic·1y
50 Interactive CSS Scroll Effects To Try
Explore 50 engaging CSS scroll effects to enhance interactivity on your website. The list includes various animations like parallax, sticky, fade, and more, providing multiple ways to captivate users. Additionally, the post details tools and libraries such as AOS, GSAP plugins, and TAOS for further extending your scroll animation capabilities.
- 10
- 11
- 12
Chrome Developers·1y
Chrome for Developers
Chrome 135 introduces new features from the CSS Overflow 5 specification that enable the creation of scroll and carousel experiences without using JavaScript. These new CSS features include scroll buttons, scroll markers, and enhanced accessibility. The new CSS properties make it easy to create carousels, ensure proper element roles, and maintain accessibility standards. Resources and examples are provided to help developers utilize these features effectively.
- 13
- 14
- 15
CSS-Tricks·1y
Functions in CSS?!
CSS functions are being prototyped in Chrome Canary, providing new capabilities like arguments, default values, and returns. These functions allow reusable patterns with parameterized custom properties, making CSS more powerful and flexible. While still in early stages, functions can handle type-checking and lists, though early returns and some other functionalities are currently limited. The introduction of functions will significantly enhance the way CSS is written, although more improvements and broader support are needed.
- 16
- 17
Anthony Fu·1y
Photos Page
A frontend developer shares the creation of a personal photos page on their website, moving away from Instagram due to recent changes. Utilizing skills in web development, the author downloaded and processed their Instagram data, preserving memories and building a custom platform to share their photos.
- 18
neo4j·1y
LLM Knowledge Graph Builder Front-End Architecture and Integration
The Neo4j LLM Knowledge Graph Builder offers a user-friendly interface to upload various data sources and generate graphs using LLMs. Built with React, styled-components, and Tailwind CSS, the application ensures seamless real-time data updates via SSEs. Users can easily connect to Neo4j, upload files, generate and visualize knowledge graphs, and interact through a chat interface. Key features include schema adjustments, node de-duplication, and post-processing jobs for refined graph management. The tool is designed for intuitive usability, handling large datasets efficiently, and providing explainable AI interactions.
- 19
- 20
Lobsters·1yStop Using and Recommending React
The post asserts that React may no longer be a good choice for many projects, highlighting its various drawbacks including performance issues, the complexity of proper usage, and the limitations of the new React-Compiler. It suggests that though React is popular, it's not always suitable, especially for static-content-heavy projects. Alternative frameworks like Vue, Svelte, and Astro are recommended based on specific use-cases.
- 21
Awesome Go·1y
My 6 months with the GoTH stack: building front-ends with Go, HTML and a little duct tape
The GoTH stack combines Go, Templ, Tailwind, and HTMX to create an efficient front-end development experience. The author highlights their positive experiences with the stack over six months, noting the benefits of reusable components, easy HTML integration, and server-side rendering with AJAX. While there are some challenges, such as error handling and live updates, the overall experience was favorable. The stack simplifies development by reducing multi-language complexity and offers robust tooling and documentation.
- 22
Web Dev Simplified·1y
20 NEW CSS Features You Need To Know In 2025
Discover 20 game-changing CSS features that will elevate your web development skills. Learn about CSS layers, text wrap properties, nesting, container queries, relative colors, and more. These features offer new ways to manage specificity, improve text layout, and create responsive designs. Stay ahead with these modern CSS techniques and enhance your web projects.
- 23
CSS vertical alignment: Best practices and examples
Vertical alignment in CSS has evolved significantly, providing various methods for centering elements such as Flexbox, Grid, and inline techniques. Each method offers different advantages and limitations, making it important to choose the appropriate approach for your specific layout needs. Modern solutions like Flexbox and Grid are recommended for their flexibility and responsiveness, while traditional methods still offer compatibility in certain scenarios.
- 24
Fullstack Developer·1y
New release ↗: Animations for your tooltip components.
Popply is an animation library designed to enhance tooltip components with over 50 animations like fadeIn, slideIn, and zoomIn. It's easy to integrate by copying the desired animation into your styles folder and applying it to any tooltip. This library aims to improve user interaction with subtle motion effects.
- 25
Vuejs&Nuxtjs·1y
Vue Router Transition
A small library simplifies the process of configuring animations for Vue Router, allowing developers to add various transition effects to route changes with ease. The library enables customization of entry, exit, and self-entry animations through meta fields in the route configuration.
