Forem: Jung Rama

Why I love to use Ant Design to build scalable web app

Jung Rama — Fri, 05 May 2023 08:55:42 +0000

As a developer, you know that creating a scalable and maintainable web application is no easy feat. Fortunately, Ant Design can help. This powerful and flexible design system offers a wide range of UI components, icons, and layouts that can be easily customized and integrated into any project. What I love about Ant Design is its consistency and standardization, which make it easy to create intuitive and user-friendly interfaces. The reusable UI components also save me time and effort, while the flexibility and customizability of the system allow me to modify the components to fit the specific needs of each project. Whether you're building a small app or a large enterprise-level system, Ant Design can help you create a professional-looking interface with ease.

Consistency and Standardization
One of the main reasons I love using Ant Design is the consistency and standardization that it provides. Ant Design follows a consistent design language, making it easy for developers to create intuitive and user-friendly interfaces. The UI components are designed to be reusable and consistent across different applications, making it easier for developers to build scalable and maintainable applications.

Flexibility and Customizability
Another reason I love Ant Design is its flexibility and customizability. Ant Design offers a wide range of UI components and layouts that can be easily customized to fit the needs of any project. Developers can easily modify the styles and behaviors of the components to match the requirements of the project.

Accessibility
Ant Design is designed to be accessible and inclusive. The design system follows the WCAG 2.1 guidelines, ensuring that the components are accessible to all users, including those with disabilities. This is a crucial aspect of web development, as accessibility ensures that all users can access and use the application without any barriers.

Active Development and Support
Ant Design is an open-source project that has a large and active community of developers. The project is constantly being updated with new features, improvements, and bug fixes. The community also provides excellent support, making it easy for developers to get help when they need it.

In conclusion, Ant Design is an excellent choice for building scalable web applications. Its consistency, flexibility, accessibility, and active development support make it a great choice for developers of all skill levels. Give it a try https://ant.design/

Inertia boost my fullstack development up to 60%✨, here is why

Jung Rama — Fri, 05 May 2023 08:55:11 +0000

As a web developer, you know that building a web application from scratch can be time-consuming, especially when it comes to the front-end and back-end. From my experience Inertia.js can boost my full-stack development time by up to 60%? In this article, I'll breakdown why Inertia.js is a game-changer for small web applications.

Faster Development Time
With Inertia.js, you can build both the server-side and client-side of your application with just one codebase. This means you don't have to spend time writing and maintaining separate front-end and back-end code, resulting in faster development time. Plus, having a unified API for building small to medium-sized web applications allows you to build applications with ease and speed.

Minimal Learning Curve
If you're already familiar with popular front-end frameworks like Vue.js, React, or Svelte, you'll have no problem picking up Inertia.js. The learning curve is minimal, and you'll be up and running in no time. This means you can start building your application without wasting time on learning a new framework.

Improved Performance
Inertia.js uses partial hydration, which improves the performance of your application by only re-rendering the parts of the page that need updating instead of re-rendering the entire page. This means your web application will load faster and provide a smoother user experience. With faster page loads, your users will be more engaged with your application, resulting in higher retention rates.

Simple API
Inertia.js provides a simple and intuitive API, making it easy to build small web applications. The API reduces the chances of errors and bugs, saving you time and resources on testing and debugging. With Inertia.js, you can focus on building your web application's functionality and user experience rather than worrying about complicated API structures.

Kachow ✨✨, Inertia.js is the secret weapon for developers who want to create web applications in a snap. Its unified API and support for popular front-end frameworks make it easy to learn and use. Inertia.js is the perfect choice for building small web applications. So, if you're a developer looking for a web development framework that will save you time and effort.

Use Strapi Transformer to make your Strapi API response more clean.

Jung Rama — Fri, 05 May 2023 08:03:40 +0000

If you're building a web application, you may be using Strapi as your content management system. Strapi is a popular open-source headless CMS that provides a flexible and customizable content management system for building web applications. One of the key benefits of Strapi is its ability to provide and generate an API that can be used to access and manipulate content.

However, sometimes the response of the API may not be in the format that we need. In such cases, we can use Strapi Transformer to transform the API response and make it more clean and structured.

What is Strapi Transformer?
Strapi Transformer is a plugin that allows you to transform the API response using a set of predefined transformations. It provides a simple and intuitive way to manipulate the response data and get the data in the format that we need.

How to Install Strapi Transformer
The Strapi Transformer plugin is not included in the default installation of Strapi. Therefore, we need to install it manually. Here are the steps to install the Strapi Transformer plugin:

Open the terminal and navigate to the root directory of your Strapi project.
Run the following command to install the Strapi Transformer plugin:

npm install strapi-plugin-transformer

Once the installation is complete, restart the Strapi server using the following command:

npm run develop

Once you have installed the Strapi Transformer plugin, you can use it to transform the API response. The plugin configuration is stored in a config file located at ./config/plugins.js. If this file doesn't exists, you will need to create it.

Minimal Configuration

module.exports = ({ env }) => ({
  // ..
 'transformer': {
    enabled: true,
    config: {
        prefix: '/api/',
        responseTransforms: {
          removeAttributesKey: true,
          removeDataKey: true,
        }
     }
  },
  // ..
});

With this you can remove the attribute object that kinda annoying, for example :

Before :

{
  "data": {
    "id": 1,
    "attributes": {
      "title": "Lorem Ipsum",
      "createdAt": "2022-02-11T01:51:49.902Z",
      "updatedAt": "2022-02-11T01:51:52.797Z",
      "publishedAt": "2022-02-11T01:51:52.794Z",
        "data": {
          "id": 2,
          "attributes": {
            "title": "Dolor sat",
            "createdAt": "2022-02-15T03:45:32.669Z",
            "updatedAt": "2022-02-17T00:30:02.573Z",
            "publishedAt": "2022-02-17T00:07:49.491Z",
          },
        },
    },
  },
  "meta": {},
}

After :

{
  "data": {
    "id": 1,
    "title": "Lorem Ipsum",
    "createdAt": "2022-02-11T01:51:49.902Z",
    "updatedAt": "2022-02-11T01:51:52.797Z",
    "publishedAt": "2022-02-11T01:51:52.794Z",
    "data": {
      "id": 2,
      "title": "Dolor sat",
      "createdAt": "2022-02-15T03:45:32.669Z",
      "updatedAt": "2022-02-17T00:30:02.573Z",
      "publishedAt": "2022-02-17T00:07:49.491Z",
    },
  },
  "meta": {},
}

If you're interested in learning more about Strapi Transformer and the various configurations it offers, you can check out the full documentation on the Strapi Marketplace. This comprehensive resource provides in-depth information about the plugin, including detailed instructions on how to set it up, customize its settings, and use it to transform API responses to meet your specific needs. Check the documentation here https://market.strapi.io/plugins/strapi-plugin-transformer