Blog

Astro 3.0 has made waves in the web development community as the first major framework to support the View Transitions API. This groundbreaking feature allows for seamless and visually appealing transitions between different states or views in web applications. With just a few lines of code, developers can easily incorporate fade, slide, morph, and persist animations across page navigation, creating a more immersive user experience.

Testing is an essential part of the software development process, ensuring that applications function as expected and remain stable over time. In this blog, we will explore the best practices for testing Next.js applications using popular testing tools like Jest, Cypress, Playwright, and React Testing Library. By following these guidelines, you can maximize your confidence in your code, catch bugs early, and deliver high-quality software to your users.

The React Compiler is a experimental compiler that has been open sources to the community in order to receive feedback and ideas. As you can imagine this means it is not production ready yet. However, it is a great way to get a feel for what this compiler of React does and can do. Keep in mind that this experimental compiler needs React 19 to work.

As you might have heard already contentlayer is in a bit of a pickle with the amount of support the project is getting, you can read more about it

Next.js made their new release candidate available on May 23rd, 2024. This release includes a number of new features and improvements, as well as bug fixes and performance enhancements. This post will provide an overview of the new features in this release.

Next.js has been a game-changer in the world of web development, especially for developers using React. With the introduction of the App Directory, Next.js has taken a significant leap forward, offering a more efficient and powerful way to build applications. In this comprehensive guide, we will explore the ins and outs of the Next.js App Directory, its advantages, and how it fits into the overall landscape of web development.

Guild meetings serve as vital forums for collaboration and innovation within organizations, with each meeting tailored to the unique needs of its respective guild. At YoungOnes, where we have different scrum teams, our Frontend Guild meetings play a crucial role in aligning our efforts within the frontend landscape while also facilitating knowledge sharing about the industry.

React 19 has just been released in beta form. In this article, I'll explain the key features and functionalities introduced in this updated version. The beta release allows libraries to adjust their code to take advantage of React 19. While I won't cover everything, I'll discuss the most important changes. For a complete list of updates, you can follow the link at the end of this article.

This blog post, I share my personal experience using Framer a software-as-a-service (SaaS) website builder designed for users with little to no coding experience. If you're interested in building a website without writing code, my journey with Framer might help you decide whether this tool is right for you.

Next.js, the popular React framework, has released its highly anticipated version 14 with a series of game-changing features and improvements. This update brings significant performance enhancements, simplified data mutations, and a preview of partial prerendering capabilities. Whether you're a long-time Next.js user or just getting started, Next.js 14 offers a range of benefits that can take your web development projects to the next level.

In the world of React development, there is a constant drive for improvement and innovation. One such area where this drive is evident is in the handling of form state and status. Two hooks useFormState and useFormStatus, have emerged as powerful tools for managing form-related data and enhancing the user experience. In this article, we will explore the benefits and applications of these hooks, highlighting their role in progressive enhancement and React actions.

In the ever-evolving world of web development, staying ahead of the curve is crucial. It's no longer enough to create visually appealing websites - user experience and efficiency are now the driving forces behind successful online platforms. That's where v0 comes in. v0, developed by Vercel Labs, is a groundbreaking generative user interface system powered by AI. It revolutionizes the way we design and build interfaces, offering copy-and-paste friendly React code that is tailored to individual project needs.

Note: This article is a comprehensive guide on how to use data attributes for web development. It covers the basics of data attributes, their syntax, usage, and benefits. The primary focus is on accessibility, as data attributes and ARIA attributes play a crucial role in improving the accessibility and usability of web applications.

JavaScript, the dynamic and versatile programming language, has taken the digital world by storm. With its vibrant community, continuous evolution, and vast ecosystem of libraries and frameworks, JavaScript has become a powerhouse in the world of web development. However, as the JavaScript ecosystem grew, so did the complexity and slowness of the development process. Enter Bun 1.0, a groundbreaking toolkit designed to simplify and accelerate JavaScript and TypeScript development without compromising the essence of these powerful languages.

Next.js, the popular React framework, has released its latest version, Next.js 13.5, with significant improvements in local development performance and reliability. This update brings a range of enhancements, including faster server startup, improved Hot Module Replacement (HMR), reduced memory usage, optimized package imports, and improvements to the next/image component. Additionally, over 438 bugs have been patched in this release. Let's dive into the details of these improvements and explore how they can benefit developers.

As a developer, finding the right UI component library for your Next.js project can greatly enhance your productivity and help you deliver a polished and consistent user interface. With so many options available, it can be overwhelming to choose the best one. In this article, we will explore the top five UI component libraries that are well-suited for Next.js projects. Each library has its own set of features, advantages, and community support, so let's dive in and find the perfect fit for your project.

In the ever-evolving world of web design, motion design and microinteractions have emerged as powerful tools to enhance user experience and engage visitors. By adding elements of animation and interactivity, designers can create a more dynamic and immersive digital environment. In this article, we will explore the concepts of motion design and microinteractions, and discuss how to effectively implement them in React and Next.js. Let's dive in!

Frontend development has witnessed remarkable advancements in recent years, revolutionizing the way websites and applications are designed and developed. As the industry continues to evolve, one technology stands out as a game-changer: Artificial Intelligence (AI). AI has the potential to transform frontend development by simplifying processes, automating repetitive tasks, and accelerating decision-making. In this article, we will delve into the future of frontend development and explore how AI is reshaping the industry to create more sophisticated and user-centric web experiences.

Conditional rendering is a powerful technique in React that allows developers to dynamically display different content or components based on specific conditions in their applications. By leveraging conditional statements and operators, such as &&, developers can create more interactive and personalized user interfaces. In this comprehensive guide, we will explore the best practices and common pitfalls of conditional rendering in React, empowering you to master this essential skill. So, let's dive in and unlock the art of conditional rendering in React!

Next.js is a popular framework for building React applications, and it continually evolves to provide cutting-edge features. One such experimental feature is Server Actions. In this article, we will delve into the alpha state of Next.js Server Actions, their application in server components and client components, and the pros and cons of this technology.

Technical debt is a concept in software development that describes the implied cost of future rework required when choosing an easy, limited solution instead of a better approach that could take more time. Like monetary debt, if technical debt is not repaid, it can accumulate "interest," making it harder to implement changes. This article delves into the causes, consequences, and strategies for managing technical debt, ultimately aiming to help software development teams maintain high-quality, efficient projects.

Next.js is a popular framework for building React applications, and it continually evolves to provide cutting-edge features. One such experimental feature is Server Actions. In this article, we will delve into the alpha state of Next.js Server Actions, their application in server components and client components, and the pros and cons of this technology.

As the world of web development continues to evolve, the advent of App Folder Architecture has come with its own set of challenges. The App Folder has become a popular choice for developers using Next.js and React for its potential in streamlining development processes. However, it's essential to understand the current problems faced by developers when implementing this architecture. In this article, we will delve into the issues surrounding the App Folder, focusing on Next.js, React, Emotion, and Mantine, while exploring potential solutions and alternatives for overcoming these challenges.

This article is a comprehensive guide on building a blog using Next.js, a powerful framework for building React applications. It covers various aspects of developing a blog, including architecture, data fetching, rendering markdown, SEO optimization, and more.