DEV Community: Nikolay Gushchin

Join me at the AI Coding Summit

Nikolay Gushchin — Fri, 12 Sep 2025 13:52:36 +0000

If you’re curious about the future of coding with artificial intelligence or want to connect with other leading minds in the field, this event is for you. Check out my official AI Coding Summit badge: https://gitnation.com/badges/ai-coding-summit/nikolay_gushchin
Join me and an amazing community of innovators and tech enthusiasts on October 23 & 24. Let’s explore, learn, and shape what’s next. Hope to see you there!

10 Open Source Projects You Shouldn't Miss as a JS Developer

Nikolay Gushchin — Wed, 04 Jun 2025 13:09:12 +0000

JavaScript’s ecosystem is thriving in 2025, with a mix of battle-tested tools and cutting-edge projects shaping how we build applications. Whether you’re working on the browser front-end or the Node.js back-end, staying up-to-date with key open-source projects can boost your productivity and skills. Below we highlight 10 open-source projects (front-end frameworks, dev tools, testing libraries, build systems, and back-end utilities) that every JS developer should know about in 2025. We’ve included each project’s GitHub link, star count, a brief description of why it matters, and notes on its learning curve. Let’s dive in!

1. Wasp – ⭐ 15k+ stars

Wasp is a modern, full-stack web framework that aims to simplify the development of web applications by providing a declarative syntax and built-in support for common features like authentication, routing, and database integration. It's designed to be easy to learn and use, making it accessible for developers of all skill levels.

Why it matters:
Wasp streamlines the process of building web applications by handling much of the boilerplate code and configuration typically required. Its declarative approach allows developers to focus on the core logic of their applications, increasing productivity and reducing the likelihood of errors.

Learning curve: Easy to Moderate.
Wasp is designed with simplicity in mind, making it approachable for beginners. Its clear syntax and comprehensive documentation help new users get up to speed quickly. For more advanced features, developers can delve deeper into its capabilities as needed.

2. Next.js – ⭐ 120k+ stars

Next.js is a full-stack React framework that enables server-side rendering, static site generation, and seamless routing out of the box. With over 120k stars on GitHub (and climbing), Next.js has become the go-to solution for building production-ready React applications. As of 2025, Next.js 15 remains “the most popular full-stack framework” in the JS ecosystem. The latest version brings performance boosts (leveraging the new Cache API) and a fully adopted Rust-based Turbopack bundler, significantly speeding up builds and dev server times. Next.js also offers API routes and middleware, blurring the line between front-end and back-end – you can create an entire application (frontend UI + backend API) in one project.

Why it matters: Next.js makes it much easier to build performant, SEO-friendly web apps with React. Features like automatic code-splitting, image optimisation, and static generation mean developers get great performance by default. Its integration with Vercel’s cloud platform and a huge community plugin ecosystem have solidified Next.js as an industry standard for React projects. In short, if you’re using React in 2025, you should explore Next.js for any serious project.

Learning curve: Moderate to Steep, depending on your background. If you already know React, Next.js is relatively straightforward to pick up – it’s essentially React with conventions for routing and data fetching. However, newcomers without React experience may struggle initially. The framework introduces some complexity (file-based routing, understanding server-side vs client-side rendering), so there’s “a bit of a learning curve”, especially if you’re new to SSR concepts. That said, Next.js is well-documented and supported by many tutorials. Once you grasp its conventions, it can actually simplify development by providing structure and defaults.

3. Svelte – ⭐ 80k+ stars

Svelte is a modern front-end framework that takes a radical approach: instead of doing heavy work in the browser via a virtual DOM, Svelte compiles your components to highly efficient vanilla JavaScript at build time. This approach results in smaller bundle sizes and fast runtime performance. Svelte has about 80k stars on GitHub and has grown a passionate community. In 2024, Svelte 5 was released, introducing new features like “runes” for explicit reactive state declarations. Notably, Svelte consistently tops developer satisfaction surveys – it had the highest positive opinion in the State of JS 2024 results – meaning developers love using it.

Why it matters: Svelte provides a refreshingly simple developer experience. You write components using HTML, CSS, and JavaScript in a single file; the syntax feels very close to plain web languages. There’s no complex state management library needed for reactivity – just use normal variables and Svelte reacts to changes automatically. This makes it easier to focus on building features rather than wiring up boilerplate. For JS developers, Svelte is a great example of innovation – it challenges the conventions set by React/Vue, and its ideas about compilation and reactivity are influencing other tools.

Learning curve: Easy. Svelte is often praised for its gentle learning curve and simplicity. If you know basic HTML/JS, you can start building with Svelte quickly – it requires minimal configuration and less boilerplate code than React or Angular. Its syntax is clean and the framework hides a lot of complexity behind the scenes. For beginners, Svelte can be very welcoming (some even say “super easy to use”), allowing you to achieve a lot with little code. Mastering more advanced SvelteKit (the full-stack framework for Svelte) features will take some learning, but getting started is straightforward and rewarding.

4. Dify – ⭐ 10k+ stars

Dify is an open-source platform designed to streamline the development of AI-native applications. It offers a user-friendly interface and robust backend support, enabling developers to build, deploy, and manage AI applications efficiently. With its focus on integrating large language models (LLMs) into applications, Dify is gaining traction in the developer community.

Why it matters:
As AI continues to permeate various aspects of software development, tools like Dify become essential. It simplifies the integration of AI functionalities into applications, reducing the complexity typically associated with such tasks. For JavaScript and TypeScript developers, Dify provides a valuable resource for incorporating AI features without delving deep into the intricacies of machine learning models.

Learning curve: Moderate.
Dify offers comprehensive documentation and a supportive community, making it accessible for developers new to AI integration. While some understanding of AI concepts is beneficial, the platform's intuitive design ensures that developers can get started with minimal hurdles.

5. Storybook – ⭐ 81k+ stars

Storybook is an open-source tool for developing UI components in isolation, popular among React, Vue, Angular, and Web Components users. With over 81,000 stars on GitHub, it's widely used by design systems teams and frontend developers to build, test, and document components outside of a full app environment.

Why it matters: Storybook helps teams build UIs faster and with greater consistency. It encourages a component-driven development workflow, enabling designers and developers to collaborate more effectively. With add-ons for accessibility, design tokens, and visual regression testing, it's a powerful ally for frontend teams and design systems.

Learning curve: Easy to Moderate. Installing and configuring Storybook is straightforward, and the documentation is excellent. Beginners can quickly create stories for their components. However, mastering advanced add-ons and integrating Storybook into CI/CD pipelines takes additional time. Still, it's beginner-friendly and scales with your skills.

6. NestJS – ⭐ 69k+ stars

NestJS is a progressive Node.js framework for building server-side applications. It’s built with TypeScript and draws inspiration from Angular’s architecture, providing a structured out-of-the-box application architecture (with modules, controllers, providers, etc.). NestJS has accumulated around 68k stars on GitHub, reflecting its popularity in the Node community. Nest provides features like dependency injection, a powerful CLI, and support for building REST APIs, GraphQL services, WebSockets, and microservices – all in one unified framework. Essentially, NestJS gives Node/Express developers a higher-level, opinionated framework to boost productivity and enforce best practices.

Why it matters: If you’re building a complex back-end or API in 2025, NestJS can significantly speed up development while encouraging clean code organisation. It brings patterns from larger languages (like Java/C#) into the JavaScript world – meaning things like typed DTOs, middleware, guards, etc., are well-supported. Companies love Nest for its scalability and maintainability (it’s termed “enterprise-grade” for a reason). By using Nest, you also get an ecosystem of plugins for things like validation, database integration (TypeORM/Prisma), and testing. In short, NestJS is important because it elevates Node.js development to a more structured, scalable level – and many new Node projects are adopting it.

Learning curve: Moderate. NestJS has a moderate learning curve – easier if you are already familiar with TypeScript and basic Node/Express, and possibly Angular’s concepts. Beginners might find the architecture overwhelming at first: there are a few new concepts (decorators like @Controller, @Injectable, etc., and the overall file structure) to learn. However, Nest is well-documented and its CLI can generate a lot of boilerplate, so you’re guided through the process. Many developers report that while Nest requires learning some patterns up front, it pays off by making large projects easier to manage. If you’ve struggled with unstructured Express code, Nest’s slightly steeper learning curve is worth the improved organisation and robustness.

7. Vite – ⭐ 50k+ stars

Vite is a next-generation front-end build tool that has taken the web development world by storm. Created by Evan You (of Vue.js fame), Vite serves as a lightning-fast development server and bundler for modern web projects. It leverages native ES module imports in development (no bundling needed for dev, so server start is nearly instantaneous) and uses Rollup under the hood for production builds. Vite’s popularity is evident – it’s one of the most loved and adopted tools, winning awards in the State of JS survey for its developer experience. By 2025, Vite has become the default build system for many frameworks (Vue, SvelteKit, Astro, etc.) and boasts an impressive ~50k stars on GitHub.

Why it matters: Vite dramatically improves the front-end development experience. When you spin up a Vite dev server, it’s ready in a blink, and module hot-reloading is extremely fast (it updates modules on the fly with fine-grained HMR, so changes reflect almost instantly in the browser). This tight feedback loop makes development enjoyable and efficient. Vite also requires minimal configuration – you can often drop it into a project and it just works, with sensible defaults for most frameworks. Its success has even pushed other tools (like webpack) to evolve. In essence, Vite is important because it allows developers to iterate faster and with less hassle, which is why it’s considered the “big winner” in modern JS tooling.

Learning curve: Easy. One reason for Vite’s success is how easy it is to adopt. For basic use, you hardly need to “learn” Vite at all – create a project with npm create vite@latest, and you’re off to the races. The tool hides the complexity of bundling; you mostly interact with it via a few simple commands (vite dev, vite build). Configuration (if needed) is typically done in a single vite.config.js file and is more straightforward than older bundlers. Since Vite adheres to standard ESM and has great documentation, developers usually face little friction. In short, even if you’re not a build-tools guru, you can use Vite and enjoy faster builds with minimal effort.

8. Playwright – ⭐ 73k+ stars

Playwright is a powerful end-to-end testing framework for web applications, created by Microsoft. It enables automated testing of web apps across Chromium, Firefox, and WebKit with a single consistent API. Playwright has quickly gained traction, earning about 73,000 stars on GitHub, and is seen as a state-of-the-art tool for browser automation and testing. It supports features like auto-waiting (no more flaky timing issues), headless or headed browsers, and even testing of downloads and other advanced scenarios. In 2025, Playwright continues to evolve with enhancements like component testing and sophisticated trace viewers for debugging test runs.

Why it matters: Testing is a critical part of development, and Playwright has emerged as a top choice for reliable cross-browser testing. It effectively fills the gap left by older tools like Selenium, providing a more developer-friendly and modern approach. With Playwright, you can write one test and be confident it runs on all major browsers, which is essential for ensuring your web app works for all users. It also integrates well with CI/CD pipelines and has helpful utilities (like code generation and video recording of tests). As web apps grow more complex, using Playwright helps catch issues early and ensures quality – skills with this tool are highly valued for JS developers working on serious projects.

Learning curve: Moderate (but well worth it). Playwright’s API is quite ergonomic and well-documented, so writing basic tests is straightforward even if you’re new to automated testing. For example, performing actions and assertions with Playwright feels natural (similar to interacting with document.querySelector and events in a browser). The challenge can be understanding async behavior and Playwright’s automagic waiting (which actually simplifies tests, but one must learn that Playwright waits for elements to be ready). Since it’s a full-featured tool, advanced use (like handling downloads, mobile emulation, etc.) may require reading the docs. Overall, developers find that Playwright, with its robust design, has a gentler learning curve than older test frameworks, and the effort invested pays off in more effective testing.

9. Prisma – ⭐ 40k+ stars

Prisma is a next-generation ORM (Object-Relational Mapping) for Node.js and TypeScript. It provides a type-safe database client for various databases (PostgreSQL, MySQL, SQL Server, SQLite, MongoDB, etc.). Prisma has risen rapidly in popularity – it recently celebrated 40,000 GitHub stars – by addressing many pain points of traditional ORMs. With Prisma, you define your data schema in a Prisma schema file, and it generates a performant TypeScript client. This client allows you to query your database using JS/TS with fully typed results. For example, if you query for a User, the result object is typed to have exactly the fields your schema defines, catching errors at compile time if you mistype a field. Prisma also includes a migration system and a visual data browser (Prisma Studio).

Why it matters: Working with databases is a necessity for many applications, and Prisma greatly improves developer productivity and confidence in that area. It eliminates a whole class of errors by ensuring your database queries are checked by the TypeScript compiler. Developers coming from a Java or C# background will appreciate Prisma’s high-level approach (no more writing tons of SQL or dealing with schema mismatches at runtime). Even for those used to writing SQL by hand, Prisma offers a nice balance: you can still write raw SQL when needed, but for most queries the fluent API is faster and safer. In 2025, Prisma is becoming the de-facto choice for databases in Node/TS projects, replacing older ORMs and even making some consider it over direct SQL due to the productivity gains. If your JS project touches a database, Prisma is a project you shouldn’t miss.

Learning curve: Easy to Moderate. Prisma’s data model and querying interface are quite straightforward – if you know basic database concepts (tables, relationships) and are comfortable with TypeScript, you’ll pick it up quickly. Defining a schema in Prisma’s SDL syntax is intuitive, and the generated client methods (e.g. prisma.user.findMany({ ... })) are easy to use. The documentation and community examples are excellent, so newcomers often get up to speed within a day or two. The “moderate” parts come with more advanced features (migrations, performance tuning, relational edge cases), but Prisma abstracts a lot of the repetitive work. In summary, adopting Prisma is usually smooth, and it pays off by making database interactions simpler and less error-prone for developers.

10. pnpm – ⭐ 32k+ stars

pnpm is a fast, disk space-efficient package manager for Node.js, seen as a major upgrade over npm and Yarn. It’s fully npm-compatible (you use the same package.json and registry), but under the hood pnpm innovates by storing all packages in a central content-addressable store and then linking them into project folders. This means if you have multiple projects with the same dependency, it’s not duplicated on disk – saving huge space and install time. pnpm has ~31.8k stars on GitHub and a rapidly growing user base, including big companies. It’s known to be considerably faster than npm for many operations and very useful for monorepos (multiple projects in a repo) due to its efficient handling of shared dependencies.

Why it matters: As projects grow, the shortcomings of legacy package managers become more painful (long install times, gigabytes of duplicate node_modules). pnpm solves these issues, offering speed, efficiency, and strictness. It’s often 2x faster than npm or Yarn in benchmarks, and its approach to node_modules (using symlinks) ensures that packages don’t accidentally hoist undeclared dependencies, leading to more reliable builds. For JS developers, pnpm can significantly reduce friction in day-to-day development – less time waiting for installs and fewer “works on my machine” problems due to dependency differences. In 2025, many projects (especially large-scale ones) have adopted pnpm as their default package manager, so it’s a tool you’ll encounter and want to be familiar with.

Learning curve: Easy. Adopting pnpm is usually as simple as installing it (npm install -g pnpm) and running pnpm install in your project. The commands are nearly identical to npm/Yarn (just prefixed with pnpm), so most developers need no additional training. There are some new features and options (like pnpm workspaces for monorepo support) which are well-documented, but you can get started without knowing them. One thing to get used to is pnpm’s stricter dependency resolution – by default, a package can only access its declared dependencies, which is actually a good thing (it surfaces misconfigured dependencies that npm might have allowed). Overall, pnpm is very newbie-friendly; if you’ve used any Node package manager, you can switch to pnpm in minutes and enjoy its benefits immediately.

Conclusion

The JavaScript landscape in 2025 is rich with open source projects that can transform the way you develop. From front-end frameworks like React and Svelte, to back-end tools like Deno and NestJS, to productivity boosters like Vite, Playwright, and pnpm, there’s a wealth of technology to explore. Each project on this list addresses specific challenges and embodies lessons learned by the community over years – whether it’s making apps faster, code more reliable, or development more enjoyable. JavaScript developers of all levels are encouraged to give these projects a try. Not only will they make you a more effective developer, but many are also great opportunities for contribution. Dive into their repositories, read the docs, join the communities, and consider contributing to their development. After all, the strength of open source comes from developers like you getting involved. Happy coding in 2025!

The Future of Frontend: Trends at the Intersection of Web Architecture and AI

Nikolay Gushchin — Tue, 13 May 2025 10:33:14 +0000

Introduction

The world of frontend development is undergoing a profound transformation. Over the next 3–5 years, expect to see web development seamlessly blending advanced web architectures with artificial intelligence. From AI-assisted coding to edge-delivered web apps, the frontend of the near future will be smarter, faster, and more distributed than ever. Yet amid these innovations, seasoned developers and tech-savvy business leaders alike recognise that the fundamentals – performance, accessibility, and user-centric design – remain paramount. Let's explore upcoming trends in frontend development and how they shape the future, with real examples from industry leaders like Vercel, Cloudflare, OpenAI, and Shopify.

AI’s Growing Role in Frontend Workflows

Artificial intelligence, especially large language models (LLMs), has quickly become a co-pilot in the development process. Modern AI-powered tools can generate code, catch bugs, optimise performance, and even assist in design. For instance, intelligent coding assistants like GitHub Copilot and Tabnine use AI to autocomplete code and suggest snippets based on context, reducing development time and the amount of errors. This means a developer can start writing a React component and have the AI suggest the structure and hooks, turning 30 mins of work into 5. AI isn’t just writing code – it’s also improving how we test and polish it.

Automated testing tools (e.g. Testim or Applitools) now leverage AI to generate UI test scripts and detect visual regressions, freeing developers from tedious QA routines, though I would still recommend using them along with manually written e2e tests. Similarly, AI-driven review bots can scan pull requests for potential bugs or security vulnerabilities and suggest fixes in real-time.

Beyond coding, AI enhances front-end content and design workflows: designers use Figma’s AI plugins to turn mockups into responsive HTML/CSS, and services like Microsoft’s Cognitive Services can auto-generate image alt text or check colour contrast for accessibility. Frontend teams are even tapping AI for dynamic personalisation – analysing user behaviour and adjusting the UI on the fly to suit each user’s needs. From writing unit tests to ensuring your app’s copy is inclusively worded, LLM-powered assistants are set to become a standard part of the frontend toolkit, amplifying productivity and creativity.

Evolving Frameworks: Partial Hydration and Beyond

Modern frontend frameworks are evolving to make web apps faster and developers’ lives easier. In recent years, there’s been a wave of “server-first” frameworks – from Next.js and Remix to SvelteKit, Astro, and Qwik – all aiming to shift more work to the server for efficiency. One key trend is partial hydration, often described as an “islands architecture.” Instead of sending a hefty bundle of JavaScript to the browser and hydrating an entire page, frameworks only hydrate interactive parts of the page, dramatically cutting down on unused code. Projects like Astro have popularised this approach (Astro dubs these interactive chunks “islands”).

Even React is moving in this direction with React Server Components. React’s new Server Components (RSC) paradigm allows UI components to run on the server by default, only sending necessary bits of UI logic to the client. The result is smaller client bundles and snappier load times. Shopify’s Hydrogen, a React-based framework for ecommerce, embraced RSC to “say goodbye to large bundle sizes” and hello to improved buying experiences. Alongside hydration improvements, frameworks are offering increased abstraction and better developer experience.

Meta-frameworks like Next.js, Nuxt, Remix and SvelteKit come with built-in routing, data fetching, and rendering optimisations so developers can focus on building features rather than boilerplate. Things like streaming server-side rendering (where HTML is sent in chunks as it’s generated) and automatic code splitting become default capabilities. Even Angular and Vue are exploring similar optimisations to stay competitive. The bottom line: the frontend frameworks of the future will make high-performance techniques (like server-side rendering and fine-grained hydration) the default, without requiring developers to be performance experts. This abstraction of complexity means faster development and more maintainable codebases, all while delivering a faster, smoother experience to users.

Edge Computing and Ultra-Low Latency Apps

The deployment of frontend applications is shifting from centralised servers to the edge. Edge computing means running your frontend (or its backend logic) on servers distributed around the globe, close to end-users. The benefit? Ultra-low latency and lightning-fast load times for everyone. In the next few years, expect most serious web apps to adopt some form of edge or serverless architecture for their frontend delivery.
Companies like Cloudflare and Vercel are leading the charge: Cloudflare Workers and Vercel Edge Functions allow developers to deploy code that runs in dozens of global data centres. When a user in London or Sydney requests your web app, the response can be generated from a server just a few milliseconds away, which also protects users from regional outages like that AWS outage in 2021. This drastically cuts time-to-first-byte and enables smooth, personalised content delivery at scale.
For example, an e-commerce site could detect a user’s region at the edge and render a personalised homepage with relevant products instantly, without a slow round-trip to a central server. Modern frameworks are already integrating with these edge platforms – Next.js, for instance, can deploy API routes and Middleware to run at the edge on Vercel’s platform. Serverless architecture complements this by allowing frontends to call lightweight cloud functions that auto-scale on demand, with no traditional servers to manage.
The result is a highly scalable frontend that can handle surges in traffic without breaking a sweat. Crucially, edge-rendering doesn’t just improve speed; it also enhances reliability (no single point of failure) and global accessibility of content. In short, the future frontend will be served from everywhere and anywhere, so users get a fast, responsive experience no matter where they are.

New Frontiers: WebAssembly and Web3 in the Browser

Some of the most exciting changes in frontend tech are coming from WebAssembly (Wasm) and Web3. WebAssembly has been around for a few years, but by 2025, it’s reaching a new level of maturity and adoption. In essence, Wasm is a low-level binary format that lets you run code written in languages like C++, Rust, or Go at near-native speed in the browser. This capability is unlocking web apps we wouldn’t have thought possible with just JavaScript. High-performance applications – think video editors, 3D visualisation tools, advanced games – are now viable on the web thanks to WebAssembly’s efficiency.

A great real-world example is Figma: the collaborative design app moved parts of its engine to WebAssembly, yielding a 3× faster load time for their web app, something that would be hard to achieve with plain JavaScript. Likewise, technologies like TensorFlow.js use a Wasm backend to run machine learning models in-browser faster, bringing AI features (like face detection or background removal) directly to web interfaces without server calls. In the coming years, we’ll see WebAssembly used even more widely – not replacing JavaScript, but augmenting it for performance-critical parts of web apps.

At the same time, Web3 technologies are reshaping what “web interfaces” mean in a decentralised context. The initial hype around blockchain is settling into practical front-end integrations. Frontend developers are increasingly building decentralised application (dApp) interfaces that interact with blockchain networks and smart contracts. This means handling things like cryptocurrency wallets and blockchain identities on the client side. It’s becoming common to integrate a wallet like MetaMask into a web app so users can sign in with their crypto wallet or purchase an NFT directly from the interface. For example, a dApp might allow users to connect their Ethereum wallet and then use a web UI to execute transactions on a smart contract – all through a familiar browser interface.

As Web3 UI/UX matures, expect more user-friendly decentralized apps where blockchain underpinnings are hidden behind sleek, intuitive interfaces. The challenge (and opportunity) for frontend developers will be to make decentralized tech feel as seamless as any Web2 experience. This also ties back to WebAssembly – for example, cryptographic algorithms or peer-to-peer logic can run in Wasm for efficiency. Together, WebAssembly and Web3 are expanding the possibilities of what web apps can do, from running native-speed code to empowering users with decentralised, trustless interactions.

Conclusion

The frontend of the future is poised to be smarter and more powerful – AI-assisted coding, highly optimised frameworks, globally distributed apps, and new in-browser capabilities are set to redefine web development. But no matter how many AI tools or new frameworks we throw into the mix, creating a great frontend still comes down to delivering value to users. That means keeping web experiences fast, accessible, and user-centric above all.
All the cutting-edge innovation serves as a means to these ends: performance improvements, better accessibility tooling, and more personalised yet easy-to-use interfaces. In fact, modern best practices double down on these fundamentals – developers are actively emphasising usability, accessibility, responsive design, and performance optimisation to craft web applications that truly resonate with users.
As we embrace AI and evolve our architectures, remembering the human at the other end of the screen is more essential than ever. The future of the frontend is incredibly bright and full of opportunity. By marrying new technologies with timeless UX principles, developers can create web experiences that are not only technologically advanced but also delightful and inclusive for everyone. Here’s to the next few years of frontend innovation – it’s going to be a fun ride for both developers and users.

5 Tricks for React Testing Library to make your unit tests better

Nikolay Gushchin — Tue, 28 Jan 2025 12:50:59 +0000

Writing tests for your React components is just as important as writing the components themselves. React Testing Library (RTL) is one of the most popular tools for testing React applications, and its simplicity and focus on testing user interactions make it a must-have for developers. But are you using it to its full potential? In this article, I’ll share five tricks that will help you get the most out of React Testing Library and make your unit tests more effective and maintainable.

1. Use `screen` for Queries Instead of Destructured Queries

A common mistake developers make is destructuring queries from render. While this works, it can lead to inconsistent test readability. Instead, use the screen object for all your queries.

Why it helps:

Improves test readability by avoiding unnecessary destructuring.
Clearly indicates you're interacting with elements rendered on the screen.

Example:

Instead of this:

const { getByText } = render(<Button text="Click me" />);
expect(getByText(/click me/i)).toBeInTheDocument();

Do this:

render(<Button text="Click me" />);
expect(screen.getByText(/click me/i)).toBeInTheDocument();

Using screen makes your tests more consistent and readable, especially when working with larger test files.

2. Prefer `findBy` for Asynchronous Elements

If your component renders elements asynchronously (e.g., after an API call or a timeout), always use findBy queries instead of getBy. This ensures your tests wait for the element to appear before running assertions.

Why it helps:

Prevents flaky tests caused by timing issues.
Makes your tests more robust when dealing with asynchronous components.

Example:

// Component fetches and displays a user's name asynchronously
render(<UserProfile />);
const userName = await screen.findByText(/john doe/i);
expect(userName).toBeInTheDocument();

Using findBy ensures that your test waits for the element to appear in the DOM before asserting it.

You can also achieve this using waitFor, however you can't use them together as findBy already is a combination of getBy and waitFor

// Component fetches and displays a user's name asynchronously
render(<UserProfile />);
await waitFor(() => {
  expect(screen.getByText(/john doe/i)).toBeInTheDocument();
});

3. Use the `within` Utility for Scoped Queries

Sometimes, you need to target elements inside a specific container. Instead of writing complex selectors, use the within utility to scope your queries to a specific part of the DOM.

Why it helps:

Avoids global queries that might match unintended elements.
Makes your tests more precise and focused.

Example:

render(
  <form>
    <fieldset name="Personal Information">
      <legend>Personal Information</legend>

      <label for="personal-name">Name</label>
      <input type="text" name="personal-name" id="personal-name" />

      <label for="personal-email">Email</label>
      <input type="text" name="personal-email" id="personal-email" />
    </fieldset>
    <button type="submit">Submit</button>
  </form>
);

const personalInfoSection = screen.getByRole('group', {
  name: 'Personal Information',
});

// Scoped queries within 'Personal Information'
const personalNameInput = within(personalInfoSection).getByLabelText('Name');
const personalEmailInput = within(personalInfoSection).getByLabelText('Email');

// Fill out the form
userEvent.type(personalNameInput, 'John Doe');
userEvent.type(personalEmailInput, 'john@example.com');

// Assert that the inputs have the correct values
expect(personalNameInput).toHaveValue('John Doe');
expect(personalEmailInput).toHaveValue('john@example.com');

This approach helps you write cleaner, context-specific tests.

4. Leverage `userEvent` for Simulating User Interactions

While React Testing Library provides utilities like fireEvent, the userEvent library offers a more realistic way to simulate user interactions. It mimics how real users interact with your app, including typing, clicking, and tabbing.

Why it helps:

Simulates events more realistically.
Handles more complex interactions like typing or pasting text.

Example:

import userEvent from '@testing-library/user-event';

render(<LoginForm />);
const emailInput = screen.getByLabelText(/email/i);
const passwordInput = screen.getByLabelText(/password/i);
const submitButton = screen.getByRole('button', { name: /submit/i });

await userEvent.type(emailInput, 'test@example.com');
await userEvent.type(passwordInput, 'password123');
await userEvent.click(submitButton);

expect(screen.getByText(/welcome/i)).toBeInTheDocument();

Using userEvent ensures your tests reflect real-world interactions more accurately.

5. Utilize `debug()` to Inspect the DOM

Struggling to figure out why your test is failing? Use RTL’s debug() method to print the current state of the DOM to your console. This is especially useful when working with complex components.

Why it helps:

Quickly identifies why elements are missing or tests are failing.
Makes troubleshooting faster and easier.

Example:

render(<MyComponent />);
screen.debug(); // Logs the current DOM structure to the console

You can also pass specific elements to debug():

const section = screen.getByRole('region');
within(section).debug();

This is a powerful tool for debugging and understanding what’s happening in your tests.

Bonus Tips:

Avoid Testing Implementation Details: Focus on testing what the user sees and interacts with, not internal component states.
Combine Matchers for Specificity: Use matchers like .toHaveTextContent() or .toHaveAttribute() for detailed assertions.
Clean Up After Tests: While React Testing Library does this automatically, calling cleanup() explicitly in afterEach ensures no DOM leaks.
Not necessarily related to RTL but I prefer using Jest along with Jest plugin which allows to run specific tests and shows coverage directly in IDE

Conclusion

React Testing Library is all about writing tests that reflect how users interact with your application. By applying these five tricks, you can write cleaner, more reliable, and maintainable tests. Whether it’s leveraging userEvent for realistic interactions or using within for scoped queries, these tips will help you elevate your testing game. Start implementing them in your next project and see the difference for yourself! 🎯

Happy testing! 🎉

5 Next.js Project Ideas with code samples

Nikolay Gushchin — Thu, 28 Nov 2024 13:03:13 +0000

Introduction

If you want to make your resume stand out or just want to try out new technologies, you should work on innovative projects. As an experienced JavaScript developer, I've seen directly how Next.js' powerful features, such as server-side rendering and static site generation, can make web development better. This post has five fun Next.js project ideas that will help you learn more about the framework and get better at developing it. Let's dive in!

Body

1. Build a Personal Blog with Static Generation

One of the coolest features of Next.js is Static Site Generation (SSG). Building a personal blog is an excellent way to get hands-on experience with SSG.

Why This Project?

SEO Benefits: Static pages are great for search engine optimization.
Performance: Faster load times since pages are pre-rendered.
Learning Opportunity: Understand how Next.js handles data fetching at build time.

Getting Started:

Create New Next.js App:

  npx create-next-app my-blog

Implement getStaticProps:

Fetch your blog posts during the build process.

  export async function getStaticProps() {
    const posts = await fetchPostsFromCMS();
    return { props: { posts } };
  }

Dynamic Routing for Posts:

Use [slug].js in your pages directory to create dynamic routes for each post.

2. Create an E-commerce Store with Server-Side Rendering

Take on the challenge of building an e-commerce platform to learn about Server-Side Rendering (SSR) in Next.js.

Why This Project?

Dynamic Content: Products and inventory levels change frequently.
SEO-Friendly: SSR helps with indexing dynamic pages.
Complex State Management: Good practice for handling global state.

Getting Started:

Set Up SSR:

  export async function getServerSideProps(context) {
    const products = await fetchProductsFromAPI();
    return { props: { products } };
  }

3. Develop a Real-time Chat Application

Push your boundaries by creating a chat app that uses Next.js API routes and WebSockets.

Why This Project?

Real-Time Communication: Learn about WebSockets and real-time data.
API Routes: Utilize Next.js' built-in API routes for backend logic.
Authentication: Implement user login and sessions.

Getting Started:

Set Up WebSocket Server:

You can use libraries like socket.io or ws.

Create API Routes:

Handle incoming messages and broadcast them to connected clients.

  // pages/api/socket.js
  import { Server } from 'socket.io';

  export default function SocketHandler(req, res) {
    if (!res.socket.server.io) {
      const io = new Server(res.socket.server);
      res.socket.server.io = io;
    }
    res.end();
  }

Client-Side Setup:

Create a Custom Hook for Socket Connection

Creating a custom React hook will help manage the socket connection and keep your components clean.

// hooks/useSocket.js
import { useEffect, useState } from 'react';
import io from 'socket.io-client';

export default function useSocket() {
  const [socket, setSocket] = useState(null);

  useEffect(() => {
    // Initialize socket connection
    const socketIo = io();

    setSocket(socketIo);

    function cleanup() {
      socketIo.disconnect();
    }
    return cleanup;
  }, []);

  return socket;
}

Implement the Chat Component

Now, create a Chat component that uses this hook to send and receive messages.

// components/Chat.js
import { useState, useEffect } from 'react';
import useSocket from '../hooks/useSocket';

function Chat() {
  const socket = useSocket();
  const [input, setInput] = useState('');
  const [messages, setMessages] = useState([]);

  // Listen for incoming messages
  useEffect(() => {
    if (socket) {
      socket.on('message', (message) => {
        setMessages((prevMessages) => [...prevMessages, message]);
      });
    }
  }, [socket]);

  // Handle sending messages
  const sendMessage = (e) => {
    e.preventDefault();
    if (input.trim() && socket) {
      socket.emit('message', input);
      setInput('');
    }
  };

  return (
    <div>
      <h2>Real-time Chat</h2>
      <div style={{ border: '1px solid #ccc', height: '300px', overflowY: 'scroll' }}>
        {messages.map((msg, index) => (
          <div key={index}>
            <strong>{msg.user}:</strong> {msg.text}
          </div>
        ))}
      </div>
      <form onSubmit={sendMessage}>
        <input
          type="text"
          placeholder="Enter message..."
          value={input}
          onChange={(e) => setInput(e.target.value)}
          style={{ width: '80%' }}
        />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

export default Chat;

4. Implement Authentication with NextAuth.js

Security is crucial. Learn how to add authentication to your Next.js app using NextAuth.js.

Why This Project?

User Management: Handle user sign-up, login, and sessions.
Third-Party Auth Providers: Integrate with Google, GitHub, etc.
Protected Routes: Learn to secure pages and API routes.

Getting Started:

Install NextAuth.js:

  npm install next-auth

Create Auth API Route:

  // pages/api/auth/[...nextauth].js
  import NextAuth from 'next-auth';
  import Providers from 'next-auth/providers';

  export default NextAuth({
    providers: [
      Providers.GitHub({
        clientId: process.env.GITHUB_ID,
        clientSecret: process.env.GITHUB_SECRET,
      }),
    ],
  });

Protect Pages:

Use getSession to check if a user is authenticated.

  import { getSession } from 'next-auth/client';

  export async function getServerSideProps(context) {
    const session = await getSession(context);
    if (!session) {
      return {
        redirect: {
          destination: '/api/auth/signin',
          permanent: false,
        },
      };
    }
    return { props: { session } };
  }

Personal Insight:

Implementing authentication was simpler than I thought, thanks to NextAuth.js. It abstracts away many complexities, letting me focus on building features.

5. Build a Progressive Web App (PWA) with Offline Support

Combine Next.js with PWA features to create an app that works offline and provides a native app experience.

Why This Project?

Enhanced User Experience: Faster load times and offline capabilities.
Service Workers: Learn how to cache assets and API responses.
App Manifest: Enable "Add to Home Screen" functionality.

Getting Started:

Install Dependencies:

  npm install next-pwa

Configure next-pwa:

// next.config.js
const withPWA = require('next-pwa')({
  dest: 'public'
})

module.exports = withPWA({
  // next.js config
})

Create a Manifest File:

Add manifest.json in your public directory with app details.

Test Offline Capabilities:

Use Chrome DevTools to simulate offline mode.

Conclusion

Jumping into these Next.js projects will not only enhance your skills but also give you tangible additions to your portfolio. Whether it's mastering data fetching methods, handling authentication, or making your app work offline, each project offers valuable learning experiences. So, pick a project that excites you and start coding! Who knows? You might just build the next big thing. Happy coding! 🚀

Async Tricks in JavaScript for Smoother Code

Nikolay Gushchin — Mon, 11 Nov 2024 15:06:52 +0000

Introduction

Ever found yourself staring at a loading screen, wondering if there's a better way to handle asynchronous operations in your JavaScript code? 😅 As web applications become more dynamic and data-intensive, mastering asynchronous programming isn't just a nice-to-have it's essential. In this article, we'll explore some async tricks in JavaScript that can help you write smoother, more efficient code.

Body

Understanding Asynchronous JavaScript

Before diving into the tricks, let's briefly recap why asynchronous programming is crucial in JavaScript. JavaScript is single-threaded, meaning it can execute one task at a time. Without async operations, tasks like fetching data from an API would block the main thread, leading to unresponsive applications.

1. Mastering Async/Await

Async/await, introduced in ES2017, has revolutionized how we handle asynchronous code, making it more readable and easier to manage.

Basic Example:

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();

  console.log(data);
}

Tips:

Always Use Try/Catch Blocks: Wrap your await statements in try/catch blocks to handle errors gracefully.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);

  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

Sequential vs Parallel Execution: Remember that using await in a loop will execute tasks sequentially. For parallel execution, store promises in an array and use Promise.all().

2. Leveraging Promise.all, Promise.race, and Promise.allSettled

Promise.all

Promise.all executes multiple promises in parallel and waits until all of them are resolved or any one is rejected.

Example: Fetch Multiple APIs in Parallel

async function getAllData() {
  try {
    const [users, posts, comments] = await Promise.all([
      fetch('/api/users').then(res => res.json()),
      fetch('/api/posts').then(res => res.json()),
      fetch('/api/comments').then(res => res.json())
    ]);

    console.log('Users:', users);
    console.log('Posts:', posts);
    console.log('Comments:', comments);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

Alternative Approach: sequential execution with Array.map

You can also achieve sequential execution with Array.map by using a function within the map callback and awaiting each operation.

async function fetchSequentially(urls) {
  const results = await Promise.all(
    urls.map(async (url, index) => {
      const response = await fetch(url);
      const data = await response.json();
      return data;
    })
  );

  return results;
}

// Usage
(async () => {
  try {
    const data = await fetchSequentially([
      '/api/data1',
      '/api/data2',
      '/api/data3'
    ]);

    console.log('All data:', data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
})();

Benefits:

Efficiency: Reduces total loading time compared to sequential requests.
Error Handling: If any promise rejects, Promise.all rejects, allowing you to catch errors.

Using Promise.race

Promise.race returns a promise that resolves or rejects as soon as one of the promises resolves or rejects.

Example: Implementing a Timeout for a Fetch Request

function fetchWithTimeout(url, timeout) {
  const fetchPromise = fetch(url);
  const timeoutPromise = new Promise((_, reject) =>
    setTimeout(() => reject(new Error('Request timed out')), timeout)
  );

  return Promise.race([fetchPromise, timeoutPromise]);
}

async function getData() {
  try {
    const response = await fetchWithTimeout('/api/data', 5000);
    const data = await response.json();
    console.log('Data:', data);
  } catch (error) {
    console.error(error.message);
  }
}

Benefits:

Timeouts: Useful for setting time limits on promises.
First Resolved/Rejection: Acts upon the first completed promise.

Using Promise.allSettled

Promise.allSettled waits for all promises to settle (either fulfilled or rejected) and returns an array of their results.

Example: Handling Multiple Promises Regardless of Outcome

async function getAllStatuses() {
  const urls = ['/api/users', '/api/posts', '/api/invalidEndpoint'];

  const results = await Promise.allSettled(
    urls.map(url => fetch(url).then(res => res.json()))
  );

  results.forEach((result, index) => {
    if (result.status === 'fulfilled') {
      console.log(`Response from ${urls[index]}:`, result.value);
    } else {
      console.error(`Error fetching ${urls[index]}:`, result.reason);
    }
  });
}

Benefits:

Comprehensive Results: Get the outcome of all promises, regardless of whether they fulfilled or rejected.
Error Isolation: One promise's rejection doesn't affect the others.

3. Async Iteration with for await...of

When dealing with streams of data or asynchronous iterables, for await...of can be incredibly useful.

Example:

async function processStream(stream) {
  for await (const chunk of stream) {
    console.log('Received chunk:', chunk);
  }
}

Use Cases:

Reading large files.
Processing real-time data streams.

4. Handling Errors Effectively

Proper error handling in async code prevents crashes and improves user experience.

Global Error Handling:

window.addEventListener('unhandledrejection', event => {
  console.error('Unhandled promise rejection:', event.reason);
});

Best Practices:

Catch Rejections: Always catch promise rejections.
Provide Feedback: Inform users when an error occurs.

5. Canceling Async Operations

Although JavaScript doesn't support canceling promises out of the box, you can implement cancellation tokens.

Using AbortController:

const controller = new AbortController();
const signal = controller.signal;

fetch('/api/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Fetch error:', err);
    }
  });

// Cancel the request
controller.abort();

Advantages:

Resource Management: Free up resources by canceling unnecessary requests.
User Experience: Improve responsiveness by aborting outdated operations.

6. Utilizing Async Generators

Async generators combine the power of generators and async functions, allowing you to work with asynchronous data streams.

Example:

async function* fetchPages(urls) {
  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    yield data;
  }
}

(async () => {
  const urls = ['/api/page1', '/api/page2', '/api/page3'];
  for await (const pageData of fetchPages(urls)) {
    console.log('Page data:', pageData);
  }
})();

Benefits:

Memory Efficiency: Process data chunks without loading everything into memory.
Control Flow: Handle asynchronous sequences elegantly.

Conclusion

Mastering asynchronous programming in JavaScript is key to building responsive and efficient applications. By leveraging async/await, promises, and other async patterns, you can write smoother code that not only performs better but is also easier to read and maintain. So go ahead, incorporate these async tricks into your projects, and experience the difference they make. Happy coding! 🚀

How good is Copilot in 2024

Nikolay Gushchin — Mon, 04 Nov 2024 14:29:19 +0000

Introduction

Ever find yourself stuck on a piece of code, staring at your screen as the hours tick by? 😅 We've all been there. But what if I told you that in 2024, GitHub Copilot has become the coding companion we always dreamed of? As an experienced JavaScript developer, I've seen tools come and go, but Copilot has genuinely levelled up this year. Let's dive into how good Copilot is in 2024 and how it can transform your coding experience.

Body

The Evolution of GitHub Copilot

Since its introduction, GitHub Copilot has been a game-changer for developers worldwide. Initially, it was a helpful assistant that could autocomplete code snippets and suggest functions. Fast forward to 2024, and Copilot has evolved into an even more powerful tool, thanks to advancements in AI and machine learning.

Enhanced Understanding of Context

One of the most significant improvements is Copilot's ability to understand the context of your project. It doesn't just look at the current file; it analyzes your entire codebase to provide more accurate and relevant suggestions.

Example:

If you're working on a React application and you start typing a function to handle user authentication, Copilot can suggest code that aligns with your existing authentication logic, ensuring consistency across your app.

Support for the Latest JavaScript Features

JavaScript is constantly evolving, and so is Copilot. It now fully supports the latest ECMAScript proposals and integrates seamlessly with popular frameworks like React, Vue, and Angular. Like when using new features like the ?? (nullish coalescing operator) operator, Copilot not only understands it but can also suggest optimal ways to implement it in your code.

Improved Code Quality and Optimization

Copilot in 2024 doesn't just help you write code faster, it helps you write better code. It offers suggestions for optimizing algorithms, reducing complexity, and adhering to best practices. For example, if you're writing a function to sort a large array, Copilot might suggest using a more efficient sorting algorithm or leveraging built-in methods to improve performance.

Integration with Testing Frameworks

Testing is a crucial part of development, and Copilot now assists with writing unit tests. It can generate test cases based on your functions, helping you achieve better test coverage with less effort. I, for example, don’t really like writing tests, especially starting a new test file for a new component, and Copilot has saved me probably hours setting up basic scenarios. It is not perfect and does not ensure coverage for the whole component, but it at least gives a starting point.

Better PR Descriptions

Copilot can integrate with GitHub itself. I have seen an example of a pipeline that used COpilot to analyse PR content and write a short PR summary, which was really helpful for the reviewers.

Personal Insights on Using Copilot in 2024

I was initially sceptical about relying too much on it. However, after integrating Copilot into my workflow, I noticed a significant boost in productivity, especially by cutting the most repetitive things that do occur in day-to-day coding.

Ethical Considerations

While Copilot is a fantastic tool, it's essential to use it responsibly. Always review the suggested code to ensure it meets your project's requirements and complies with licensing.

Conclusion

GitHub Copilot in 2024 has become an indispensable tool for JavaScript developers of all levels. It enhances productivity, improves code quality, and accelerates learning. Whether you're a beginner looking to learn the ropes or an experienced developer aiming to optimize your workflow, Copilot has something to offer. So why not give it a try and see how it can transform your coding experience? Happy coding! 🚀

Beyond the Code: The Human Side of JavaScript Code Reviews

Nikolay Gushchin — Sat, 26 Oct 2024 14:04:15 +0000

Ever had that moment when you're about to submit a pull request, and a tiny voice in your head whispers, "Is this code review-ready?" 😅 Or maybe you've been on the receiving end, scrolling through lines and lines of code, wondering how to provide feedback that's both helpful and kind. Welcome to the world of code reviews—a crucial yet often underestimated part of the development process.

The Importance of Code Reviews

Code reviews are more than a mere formality, even if you or your team treats them so, they're a gateway to better code quality, knowledge sharing, and team collaboration. In the fast-evolving landscape of JavaScript—with its ever-growing libraries and frameworks—code reviews help keep everyone on the same page. They ensure that best practices are followed, potential bugs are caught early, and the codebase remains maintainable.

Best Practices for Giving Code Reviews

Be Respectful and Constructive

Approach each review with the mindset of a mentor, not a critic. Instead of saying, "This function doesn't make sense," try, "Can you explain the reasoning behind this approach? Maybe we can simplify it.". Keep in mind that you are also working on this project, and it’s in your interest to understand the changes.

Focus on the Code, Not the Coder

Keep feedback objective. Comment on the code's functionality, readability, and adherence to standards without making it personal.

Use Clear and Specific Language

Ambiguous comments can lead to confusion. Instead of "This part is unclear," specify what's confusing: "The variable naming here is a bit ambiguous, maybe we can use something more descriptive like userProfile?"

Provide Code Examples

If you suggest a different approach, provide a snippet to illustrate your point.

Example:

"Consider using the Array.filter() method here for better efficiency:

   const activeUsers = users.filter(user => user.isActive);

Praise Good Work

Positive reinforcement goes a long way, trust me. If you see something well-implemented, let them know!

Best Practices for Receiving Code Reviews

Keep an Open Mind

Feedback isn't a personal attack, it's an opportunity for growth. Even seasoned developers have room to improve.

Ask for Clarification

If a comment isn't clear, don't hesitate to ask questions. This ensures you understand the feedback fully and can apply it correctly.

Explain Your Thought Process

If you made certain decisions for specific reasons, share them. This can lead to productive discussions and even better solutions.

Implement Feedback Promptly

Address comments in a timely manner to keep the development process moving smoothly. I have worked in teams that prioritise tickets right to left, i.e. while your ticket is in review, you should focus on it and not on tickets in progress. And it did wonders for lowering the review time for the whole team.

Tools to Enhance Code Reviews

Linters and Formatters

Tools like ESLint and Prettier automatically enforce code style guidelines, allowing you to focus on logic rather than formatting. And if you see an eslint ignore always ask why it is there, it's a good practice to document such cases.

Automated Testing

Incorporate tests using frameworks like Jest or Mocha to catch issues early and provide confidence in your code.

Pull Request Templates

Use templates to ensure all necessary information is included with each PR, such as the purpose of the changes and any relevant screenshots or logs. Clear PR descriptions saves a lot of time for people reviewing your code and to you as a result.

Personal Insights on Code Reviews

In my early days as a developer, I dreaded code reviews. It felt like an examination of my worth as a coder. But one experience changed that. I submitted a PR that introduced a new feature but also unintentionally created a bug. A senior developer reviewed my code and, instead of just pointing out the mistake, they took time of their work to walk me through how the bug occurred and guided me toward the solution.

Conclusion

Code reviews are an indispensable part of developing robust JavaScript applications. They foster collaboration, improve code quality, and accelerate personal and team growth. So next time you're on either side of a code review, embrace the process. Share your knowledge, learn from others, and don't forget to sprinkle in a bit of kindness. Happy coding! 🎉

DEV Community: Nikolay Gushchin

Join me at the AI Coding Summit

10 Open Source Projects You Shouldn't Miss as a JS Developer

1. Wasp – ⭐ 15k+ stars

2. Next.js – ⭐ 120k+ stars

3. Svelte – ⭐ 80k+ stars

4. Dify – ⭐ 10k+ stars

5. Storybook – ⭐ 81k+ stars

6. NestJS – ⭐ 69k+ stars

7. Vite – ⭐ 50k+ stars

8. Playwright – ⭐ 73k+ stars

9. Prisma – ⭐ 40k+ stars

10. pnpm – ⭐ 32k+ stars

Conclusion

The Future of Frontend: Trends at the Intersection of Web Architecture and AI

Introduction

AI’s Growing Role in Frontend Workflows

Evolving Frameworks: Partial Hydration and Beyond

Edge Computing and Ultra-Low Latency Apps

New Frontiers: WebAssembly and Web3 in the Browser

Conclusion

5 Tricks for React Testing Library to make your unit tests better

1. Use screen for Queries Instead of Destructured Queries

2. Prefer findBy for Asynchronous Elements

3. Use the within Utility for Scoped Queries

4. Leverage userEvent for Simulating User Interactions

5. Utilize debug() to Inspect the DOM

5 Next.js Project Ideas with code samples

Async Tricks in JavaScript for Smoother Code

How good is Copilot in 2024

Beyond the Code: The Human Side of JavaScript Code Reviews

1. Use `screen` for Queries Instead of Destructured Queries

2. Prefer `findBy` for Asynchronous Elements

3. Use the `within` Utility for Scoped Queries

4. Leverage `userEvent` for Simulating User Interactions

5. Utilize `debug()` to Inspect the DOM