The latest Strapi-related news and major events happening for Strapi – including announcements, remote-work, organization and tips on running a start-up. 

Company

Engineering

The Tutorials section covers an introduction to Strapi, some advanced technical content, product updates and releases. From basic workaround to in-depth development guides. 

Tutorials

How tos

The Ecosystem section covers everything related to the world of Headless CMS and Strapi's place in it. 

Ecosystem

Get all the latest updates, news and events.

Subscribe to the newsletter 📣

Your role in choosing the proper front-end framework is crucial to the success of your project. With many options available, each with its own set of advantages and challenges, understanding the key factors to consider is vital to make an informed decision. 


This article will examine five essential considerations to help front-end developers, technical leads, CTOs, comapanies, startups and so on, navigate this decision-making process. By evaluating project requirements, community support, performance, scalability, and the learning curve, you will understand how to make an informed decision to ensure that your chosen framework aligns with your front-end development goals.

Let's get started!

## 1. Project Requirements
As a key player in your project, understanding its specific requirements is paramount when it comes to selecting a front-end framework. 

Every project has specific requirements. Your project can be a simple website or a complex web application, and each has different requirements. So, your chosen framework must align with your project's specific requirements. 

Here are a few key elements to consider:

1.  **Functionality Needs:**
What is your project about? Does it require features like real-time data updates, complex state management, e-commerce functionalities, applicant or goods tracking, or a combination? 

Consider using frameworks that have been proven to effectively handle the features you want your application to have. For example, you can decide to use Astro or React for e-commerce applications. Both support component-based architecture, making it easier to manage and scale complex e-commerce sites. With these frameworks, you can build reusable components for product listings, shopping carts, and checkout processes.
2.  **Application Complexity:**
When building simple applications like a simple website, consider using lightweight frameworks like Vue.js, as they are easy to use and flexible. Svelte is also a good example of a lightweight framework that builds on HTML and has a small bundle size.

For large-scale, complex applications however, you might consider using React or Angular due to their extensive ecosystem.


## 2. Community Support and Ecosystem
The strength of a framework's community support and ecosystem is a significant factor to consider when choosing a front-end framework, and here's why:

1. **Community Size, Support, and Troubleshooting:**
A framework with a large and active community can prove very useful. This is because more resources, such as tutorials, documentation, and forums, are available to help you overcome challenges you might face when using the framework. 

It also means easier troubleshooting. There might be issues you'll face that have most likely been encountered and solved by others. You can find solutions to these problems on a variety of platforms, including Stack Overflow, Discord, GitHub, and Reddit.

For example, frameworks such as [React](https://dev.to/t/react) and [Vue](https://forum.vuejs.org/) have large, active communities that help members facing challenges with the framework, and they also actively contribute to the framework's development and maintenance.
2. **Library and Tooling Ecosystem:**
One critical factor to consider when choosing a framework is its ecosystem of libraries and tools that can accelerate front-end development. These third-party resources, such as libraries, plugins, components, and tools, are integral to popular frameworks and greatly enhance productivity. 
    
They can also save you time; you won't have to build everything from scratch. Vue.js, for example, has an official library called 'Vuex' that manages states in Vue.js applications. 
3. **Regular Updates and Long-term Viability:**
Frameworks with significant community support are more likely to receive regular updates and improvements as members suggest improvements.

These updates ensure the framework is updated with industry changes and security standards. A framework with a continuous release cycle gives its users confidence in its long-term viability.

## 3. Performance
Performance is an important consideration when selecting a front-end framework because it directly affects the user's experience and the overall efficiency of your web application. Here's why performance is essential when considering a framework:

1. **Load Times:**
Studies show that the average human attention span is around 8 seconds, so within this short time frame, you need to retain your users' attention when they visit your web application/website. You can't retain their attention if your website lags or loads slowly because slow load times lead to an increase in [bounce rate](https://en.wikipedia.org/wiki/Bounce_rate#::text=Bounce%20rate%20is%20an%20Internet,%20pages%20within%20the%20same%20site).

Faster load times improve user retention and provide a seamless experience. Frameworks like React, Astro, and Vue.js are known for their efficient rendering and quick load times, which help keep users engaged.
2. **Efficiency in Rendering:**
How a framework handles rendering might impact your project's responsiveness. For example, frameworks that use virtual DOM, like React, can efficiently update and render components, increasing performance. Learn about [How to Build a To-Do List Application with Strapi and React.js](https://strapi.io/blog/how-to-build-a-to-do-list-application-with-strapi-and-react-js).

Also, frameworks that support Server-Side Rendering (SSR), such as Next.js (built on React) or Nuxt.js (built on Vue.js), can improve performance by pre-rendering content on the server, thereby reducing the load on the client's browser.
3. **Optimization Ability:**
Code optimization results in high application performance. Performance optimization features like code splitting, lazy loading, and tree shaking help reduce the initial load and improve performance. React, Angular and Svelte offer built-in tools that can help you optimize your application's performance.


## 4. Scalability and Maintainability 
Scalability refers to the ability of a system to handle an increasing amount of work/load or its ability to expand to handle that growth. 

Maintainability refers to how easy it is to maintain a system, such as fixing bugs, adding new features, and updating it over time.

When selecting a front-end framework, you must consider how well it handles scalability and maintainability to ensure your project can grow and adapt quickly over time.

1. **Scalability:** 
As your project's features and user base grow, you'll need a framework to handle the additional workload or complexity. Frameworks like Angular are designed to support large-scale applications.
2. **Code Organization:** 
Nobody likes a messy codebase, especially when you have to refactor one you didn't initially work on. So, it's essential to keep an effective, organized codebase, as this helps maintain your project. 
Vue.js is a framework that supports modularity and clear separation of concerns. This makes it easy to manage the codebase and scale, helping to maintain code quality as your project grows.
3. **Component Reusability:** 
Reusing components improves scalability and maintainability, as it saves you the trouble of writing the same code repeatedly. React's component-based architecture enables developers to create reusable UI components, making it easier to maintain the application without having to rewrite a lot of code.



## 5. Learning curve

The learning curve of a front-end framework is also an important issue, especially when assessing how much time and effort will be required to become proficient in using it. 

When working on a new project that requires you to use a framework with which you are unfamiliar, you'll want one that's easy to learn and quick to implement. 

1. **Ease of learning:** 
Frameworks like Vue.js have a smooth learning curve, allowing beginner developers to catch up quickly. This can be especially useful if you're transitioning from other technologies and for teams that are onboarding new members. Angular, on the other hand, has a steep learning curve, which can be difficult for a beginner to fully understand at first.
2. **Quality Documentation and Tutorials:** 
The availability of exceptionally high-quality documentation impacts a framework's learning curve. React, for example, has significant documentation and various quality learning resources to help developers understand and use the framework more effectively.
3. **Community and Support:**
 A framework with an active community can help developers learn more effectively. Members of a framework's forum and discussion groups like Discord can help developers resolve issues and share best practices. Angular and React are examples of frameworks that provide excellent community support. [You can learn how to build a news app using Angular and Strapi](https://strapi.io/blog/how-to-build-a-news-app-using-angular-and-strapi).

## Switching frameworks: Why and When?
Sometimes, even after careful consideration, you might need to switch front-end frameworks. Switching can happen due to changing project requirements, limitations of the current framework, or new technological advancements. Knowing why and when to switch keeps your project running smoothly and efficiently.

### Scenarios that may require switching frameworks

1.  **Performance Issues:**
If your current framework is causing slow load times or poor performance, it may be time to consider switching. Also, related to performance issues, when your application grows, the initial framework or performance optimization methods might not handle increasing data or user loads efficiently. Switching to a more scalable framework can help manage larger applications better.

Let's take an example. 
    
When your e-commerce application starts as a small online store, you might use a lightweight framework like Vue.js due to its simplicity. However, as your business grows and you add more features like real-time inventory updates, good tracking, and customer reviews, Vue.js might need help to efficiently handle the increasing data and user loads. In this case, switching to a more scalable framework like Angular might come in handy to help you better manage the more extensive application. You can learn more Vue.js on [how to build a ticketing app using Vue.js and Strapi](https://strapi.io/blog/how-to-build-a-ticketing-app-using-vue-js-and-strapi).
2.  **Maintenance Challenges:**
Suppose the framework you are using is no longer actively being maintained or updated. In that case, you must switch to a more up-to-date, reliable option to avoid security challenges and ensure ongoing support.
3.  **Project Requirements:**
Switching may be necessary if your project requires additional features that are better supported by a different framework. For instance, switching to Next.js from React because of its better server-side rendering capabilities can benefit your project.


### Pros and Cons of Switching Frameworks
Switching frameworks mid-development or after production comes with some benefits and some setbacks.

#### Pros of Switching Frameworks
Here are some of the advantages of switching frameworks:
1. Modern frameworks can improve application performance. Switching from outdated to modern frameworks enables your application to handle larger loads more efficiently and improve your application's performance.
2. New frameworks often include the latest features that can enhance functionality. For example, frameworks actively maintained receive regular security updates, enabling them to bypass certain challenges that older, outdated frameworks may have.
3. Switching to a framework with a larger, active community can provide you with better support and faster issue resolution.

#### Cons of Switching Frameworks
As with everything that has its advantages, switching frameworks also has disadvantages.

1. Migrating to a new framework can be time-consuming and expensive. Companies may need to hire a developer proficient in that framework to rewrite or refactor existing code.  
For individuals, it will require learning new concepts and utilizing developer resources relating to the new framework.
2. Switching to a new framework requires time to adapt to the framework's tools and workflows, which can temporarily slow down front-end development and production.
3. Switching to a new framework might introduce new bugs and issues to the codebase that must be resolved before production.

## Conclusion
Each framework has unique strengths and challenges, so it is essential to assess these considerations against your project's specific needs. 

Thoroughly evaluating these factors is a sign of diligence and responsibility. It ensures that the framework you choose not only meets your project demands but also fosters the future growth of your project.

large_5 Considerations When Choosing a Front-end Framework.jpg

medium_5 Considerations When Choosing a Front-end Framework.jpg

small_5 Considerations When Choosing a Front-end Framework.jpg

thumbnail_5 Considerations When Choosing a Front-end Framework.jpg

5 Considerations When Choosing a Front-end Framework.jpg

Epic Next.js 14 Tutorial Part 10: Frontend Deployment To Vercel

How to Build an Invoicing App with Next.js, Strapi, and jspdf

## Introduction

Web development keeps changing, and it's all about building fast, reliable websites and apps. That's why many developers use tools like Strapi, a headless CMS, and Next.js.

But there's a way to make these tools work even better together: by using Strapi types and TypeScript.

In this post, we will cover how to set Strapi types in your front end so you, too, can have these awesome benefits.

Let's get started.

## Setting Up Initial Project

Instead of starting from scratch, I have [this](https://github.com/PaulBratslavsky/strapi-next-js-no-types) simple starter project that we will use.

![git-hub-page.png](https://api-prod.strapi.io/uploads/git_hub_page_6bbb7a4c91.png)

Go to the above repo and clone the project to your local computer. I will be using GitHub CLI since it is the easiest way.

In my terminal, I will run the following command.

```bash
  gh repo clone PaulBratslavsky/strapi-next-js-no-types
```

Once you clone the project `cd` into the project directory `strapi-next-js-no-types`, run the following command to set up **Strapi** and **Next JS**.

```bash
  yarn run setup
```

This will install all the required dependencies. Once it is done, we will seed our test data.

## Seeding Initial Data

Before seeding the data, let's ensure you create a `.env` file inside your `backend` directory and paste the contents of the `.env.example` file.

```env
  HOST=0.0.0.0
  PORT=1337
  APP_KEYS=AobODHcxZZcCl1QnSICbag==,ell4w82bPBXiCvJDn5ONHQ==,gWrzk+svSrpeSKrSwJt5Ng==,ifL/R/p7tizn8+6JZV99RA==
  API_TOKEN_SALT=/PxsuKz4iVK8yiQx14lSNQ==
  ADMIN_JWT_SECRET=9E3FdhrPvtS2fUtAV1sd9w==
  TRANSFER_TOKEN_SALT=022gQbf/VKd6PyTWFp5oaw==
  # Database
  DATABASE_CLIENT=sqlite
  DATABASE_FILENAME=.tmp/data.db
  JWT_SECRET=J003pNoJHC0d4+EN6VPXwQ==
```

You can now run the following command to seed our test data.

```bash
  yarn run seed
```

You will be prompted with the following message. Just click `y` followed by the **enter** key to proceed.

```bash
? The import will delete your existing data! Are you sure you want to proceed?
(y/N)
```

After the process is complete, you should see the following.

![seed-data.png](https://api-prod.strapi.io/uploads/seed_data_219dffc5d3.png)

Now that we have our basic data, we can start our application with the following command from the root of your project.

```bash
  yarn run dev
```

![admin.png](https://api-prod.strapi.io/uploads/admin_22b786be5b.png)

You will be prompted to create your first **Admin User**. After creating the user and clicking **Let's Start**, you will be greeted by Strapi's **Admin** Panel.

![dashboard.gif](https://api-prod.strapi.io/uploads/dashboard_6a318e0e6a.gif)

You should find our test data and permissions to allow public api access set.

## Let's Add Strapi Types

Let's take a look at at this basic code example. Currently we do not know what types `data` returns from our API..

```tsx
export default async function Home() {
  const data = await getData();

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
        {data.data.map((post: any, index: string) => {
          return <Card key={index} data={post} />;
        })}
      </div>
    </main>
  );
}
```

Let's add our Strapi types and fix this in the next section.

## Adding Strapi Types To Our Next JS Project

**Prerequisites**

To make this process easier, we will need these two things.

[Strapi Content API for dynamic content API response types](https://gist.github.com/Convly/6cf1e6d143bb0a90c8de2242fdedda8e)

[Script](https://gist.github.com/PaulBratslavsky/a95c4ec5aa3e2a3055ed11c81f94c1d3) to make copying our Strapi types to our project front end easy.

We will walk through the setup first, then we will go over the workflow.

Let's start by getting our types from Strapi.

All our generated Strapi types are in our `backend/types/generated` folder in the file called `contentTypes.d.ts.`

![strapi-types.png](https://api-prod.strapi.io/uploads/strapi_types_4db3372783.png)

We must have a copy of these types in our front-end project. To help us accomplish this, we will use the script provided above.

But first, run the following command to install @strapi/types to your project.

```bash
    yarn add --dev @strapi/strapi
```

Make sure you run the command from the `frontend` folder.

Inside the root of your project, create a file named `copyTypes.js` and paste the following code.

```javascript
const fs = require("fs");
const path = require("path");

const destinationFolder = "frontend/src/types";

const files = [
  {
    src: path.join(__dirname, "./backend/types/generated/contentTypes.d.ts"),
    dest: path.join(__dirname, `./${destinationFolder}/contentTypes.d.ts`),
  },
  {
    src: path.join(__dirname, "./backend/types/generated/components.d.ts"),
    dest: path.join(__dirname, `./${destinationFolder}/components.d.ts`),
  },
];

function copyFile({ src, dest }) {
  const destinationDir = path.dirname(dest);

  // Check if source file exists
  if (!fs.existsSync(src)) {
    console.error(`Source file does not exist: ${src}`);
    process.exit(1);
  }

  // Ensure destination directory exists or create it
  if (!fs.existsSync(destinationDir)) {
    fs.mkdirSync(destinationDir, { recursive: true });
  }

  // Read the source file, modify its content and write to the destination file
  const content = fs.readFileSync(src, "utf8");

  fs.writeFile(dest, content, (err) => {
    if (err) {
      console.error(`Error writing to destination file: ${err}`);
      process.exit(1);
    } else {
      console.log(`File ${src} copied and modified successfully!`);
    }
  });
}

files.forEach((file) => copyFile(file));

```

Let's update the `package.json` file in the root with the following inside the `scrips` object.

```json
 "copytypes": "node copyTypes.js"
```

You should now be able to run the following command.

```bash
  yarn run copytypes
```

Go ahead and do so.

You should see the following message.

```bash
➜  strapi-next-js-no-types git:(strapi-typed) ✗ yarn run copytypes
File copied and modified successfully!
✨  Done in 0.22s.
```

And see a new `types` folder found in `frontend/src/types` with a new file called `contentTypes.d.ts`.

![frontend-types.png](https://api-prod.strapi.io/uploads/frontend_types_d3f5dba2b7.png)

Finally, create a new file inside `frontend/src/types` folder named `types.ts` and add the following code.

```typescript
import type { Attribute, Common, Utils } from "@strapi/strapi";

type IDProperty = { id: number };

type InvalidKeys<TSchemaUID extends Common.UID.Schema> = Utils.Object.KeysBy<
  Attribute.GetAll<TSchemaUID>,
  Attribute.Private | Attribute.Password
>;

export type GetValues<TSchemaUID extends Common.UID.Schema> = {
  [TKey in Attribute.GetOptionalKeys<TSchemaUID>]?: Attribute.Get<
    TSchemaUID,
    TKey
  > extends infer TAttribute extends Attribute.Attribute
    ? GetValue<TAttribute>
    : never;
} & {
  [TKey in Attribute.GetRequiredKeys<TSchemaUID>]-?: Attribute.Get<
    TSchemaUID,
    TKey
  > extends infer TAttribute extends Attribute.Attribute
    ? GetValue<TAttribute>
    : never;
} extends infer TValues
  ? // Remove invalid keys (private, password)
    Omit<TValues, InvalidKeys<TSchemaUID>>
  : never;

type RelationValue<TAttribute extends Attribute.Attribute> =
  TAttribute extends Attribute.Relation<
    infer _TOrigin,
    infer TRelationKind,
    infer TTarget
  >
    ? Utils.Expression.MatchFirst<
        [
          [
            Utils.Expression.Extends<
              TRelationKind,
              Attribute.RelationKind.WithTarget
            >,
            TRelationKind extends `${string}ToMany`
              ? Omit<APIResponseCollection<TTarget>, "meta">
              : APIResponse<TTarget> | null
          ]
        ],
        `TODO: handle other relation kind (${TRelationKind})`
      >
    : never;

type ComponentValue<TAttribute extends Attribute.Attribute> =
  TAttribute extends Attribute.Component<infer TComponentUID, infer TRepeatable>
    ? IDProperty &
        Utils.Expression.If<
          TRepeatable,
          GetValues<TComponentUID>[],
          GetValues<TComponentUID> | null
        >
    : never;

type DynamicZoneValue<TAttribute extends Attribute.Attribute> =
  TAttribute extends Attribute.DynamicZone<infer TComponentUIDs>
    ? Array<
        Utils.Array.Values<TComponentUIDs> extends infer TComponentUID
          ? TComponentUID extends Common.UID.Component
            ? { __component: TComponentUID } & IDProperty &
                GetValues<TComponentUID>
            : never
          : never
      >
    : never;

type MediaValue<TAttribute extends Attribute.Attribute> =
  TAttribute extends Attribute.Media<infer _TKind, infer TMultiple>
    ? Utils.Expression.If<
        TMultiple,
        APIResponseCollection<"plugin::upload.file">,
        APIResponse<"plugin::upload.file"> | null
      >
    : never;

export type GetValue<TAttribute extends Attribute.Attribute> =
  Utils.Expression.If<
    Utils.Expression.IsNotNever<TAttribute>,
    Utils.Expression.MatchFirst<
      [
        // Relation
        [
          Utils.Expression.Extends<TAttribute, Attribute.OfType<"relation">>,
          RelationValue<TAttribute>
        ],
        // DynamicZone
        [
          Utils.Expression.Extends<TAttribute, Attribute.OfType<"dynamiczone">>,
          DynamicZoneValue<TAttribute>
        ],
        // Component
        [
          Utils.Expression.Extends<TAttribute, Attribute.OfType<"component">>,
          ComponentValue<TAttribute>
        ],
        // Media
        [
          Utils.Expression.Extends<TAttribute, Attribute.OfType<"media">>,
          MediaValue<TAttribute>
        ],
        // Fallback
        // If none of the above attribute type, fallback to the original Attribute.GetValue (while making sure it's an attribute)
        [Utils.Expression.True, Attribute.GetValue<TAttribute, unknown>]
      ],
      unknown
    >,
    unknown
  >;

export interface APIResponseData<TContentTypeUID extends Common.UID.ContentType>
  extends IDProperty {
  attributes: GetValues<TContentTypeUID>;
}

export interface APIResponseCollectionMetadata {
  pagination: {
    page: number;
    pageSize: number;
    pageCount: number;
    total: number;
  };
}

export interface APIResponse<TContentTypeUID extends Common.UID.ContentType> {
  data: APIResponseData<TContentTypeUID>;
}

export interface APIResponseCollection<
  TContentTypeUID extends Common.UID.ContentType
> {
  data: APIResponseData<TContentTypeUID>[];
  meta: APIResponseCollectionMetadata;
}

```

This file includes helpful interfaces to help us utilize our Strapi types.

In the next section we will put this to use.

## Applying Strapi Types In Our Frontend

Now that our project is set up, let's use our types.

Inside your frontend project, navigate to `frontend/srs/app/page.tsx` and replace the code with the following update.

```tsx
// import our types
import type { APIResponseCollection, APIResponseData } from "@/types/strapi";

import qs from "qs";
const query = qs.stringify({ populate: "*" });

async function getData() {
  const res = await fetch("http://127.0.0.1:1337/api/posts?" + query);

  if (!res.ok) {
    // This will activate the closest `error.js` Error Boundary
    throw new Error("Failed to fetch data");
  }

  return res.json();
}

export default async function Home() {
  // typescript will infer the type of `data` as `APIResponseCollection<"api::post.post">`
  const data = (await getData()) as APIResponseCollection<"api::post.post">;

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
        {data.data.map((post: APIResponseData<"api::post.post">) => {
          return <Card key={post.id} data={post} />;
        })}
      </div>
    </main>
  );
}

// typescript will infer the type of `data` as `APIResponseData<"api::post.post">`
// Look up types by content id "api::post.post"
function Card({ data }: { data: APIResponseData<"api::post.post"> }) {
  console.log(data, "############# STRAPI CARD DATA #############");

  const { title, description } = data.attributes;
  return (
    <a
      href="https://strapi.io"
      className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
      target="_blank"
      rel="noopener noreferrer"
    >
      <h2 className={`mb-3 text-2xl font-semibold`}>
        {title}{" "}
        <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
          -&gt;
        </span>
      </h2>
      <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>{description}</p>
    </a>
  );
}
```

Notice in the **gif** below that we are able to infer our Strapi types.

![types-demo.gif](https://api-prod.strapi.io/uploads/types_demo_b848ca3ef2.gif)

## Workflow

Before finishing up, let's add another field to our **post** collection and walk through the workflow.

### 1. Add A New Field

Inside Strapi Content Builder let's add a new field. We will add an `Enumeration` field named `status` with the following options.
- DRAFT
- SCHEDULED

![enum.png](https://api-prod.strapi.io/uploads/enum_dd4a8d72ee.png)

### 2. Run The `copytypes` Script

Run the following command to update Strapi types in the front end.

``` bash
  yarn run copytypes
```

Restart your application. And you will now see our `status` field.

![updated-tyopes.png](https://api-prod.strapi.io/uploads/updated_tyopes_e32a9f5f6d.png)

With these changes, TypeScript will now help us ensure we are using the correct data types, making our application more reliable and reducing potential runtime errors.

## Conclusion

This tutorial delved into improving the frontend experience by utilizing Strapi types and TypeScript together. 

By following the steps outlined, the real magic unveils itself.

When applying these predefined Strapi types within our frontend project. 

It leads to clearer, more maintainable code. It helps prevent many common mistakes when developers have to guess the shape or type of data they are working with.

This is just the start,  and while we wait for the SDK, I hope you find this approach helpful. 

Feel free to share your tips for using TS in the comment below.

GitHub: [Starter Code](https://github.com/PaulBratslavsky/strapi-next-js-no-types)
GitHub: [Final Code](https://github.com/PaulBratslavsky/strapi-next-js-no-types/tree/strapi-typed)


Improve Your Frontend Experience With Strapi Types And TypeScript

Check out the following related blog posts.

5 Considerations When Choosing a Front-end Framework

Juliet is a developer and technical writer whose work aims to break down complex technical concepts and empower developers of all levels.
