Open Source Initiative at CodeChem

Open Source Initiative at CodeChem

It's Not Just a Global Pool of Free Code

Open-source development promotes free ideas exchange, flexible software solutions, and better iterations. All engineers like it because it's time-effective, safe, and enhances scalability and integration. But why do developers who write open-source code contribute to projects for free?

Well, we have the answer, and it is unselfishness and devotion to the community which builds our experience and helps us through our daily challenges.

So let's explore a few examples of how CodeChem's crew contributed to the open-source community.

We will start with our colleague Dejan Slamkov, who worked on the chakra-fields open-source NPM package. While working on his project, Dejan realized that a lot of boilerplate code was happening and wanted to do something about it. The project he worked on was a frontend application that used Chakra UI (React) for styling UI components and Formik as a package that handled form input validation.

Dejan initially continued working on his project and minimized the boilerplate code there. Later he realized that other developers using Chakra UI and Formik might benefit from his work. He then decided to expand his work from the project and make that an NPM package.

The package makes working with Chakra UI and Formik easier, and it uses UI form components from Chakra UI and turns them into controlled components using Formik state. The styling of the components is 100% extensible, and the package does not add style to the Chakra UI styling."

Here are the key features of the package:

  • Cleaner code

  • 100% extensible styling

  • The library can handle some caveats from using Chakra UI components and Formik together

  • Possibility to add Formik validation functions as props to the form components

  • Reusability

  • Floating label

As we previously mentioned, the motivation was to improve things for everyone and to simplify and improve our work!

Let's see the package in action and see a little before and after, i.e., work with and without it:

Before chakra-fields:

It looks a little bit too much, doesn't it? Let's fix that:

Next, we move on to Chakra UI-animations package from our colleague Andrej Acevski. It is a powerful package for developers to bring the Chakra UI projects to a higher level. The goal is to enhance the UX and make the projects more engaging. The package integrates animations so everyone can apply them from buttons to modals, and other Chakra UI components.

This package is a perfect solution because CSS animations can be intricate and time-consuming, especially when the code is more complex. With the chakra-ui-animations package, developers can easily add animations to their projects.

Andrej discovered that this package is easy to use and accessible to everyone enthusiastic about the development. The main goal and motivation were to add visual interest and guide the users through the user interface by providing easy-to-use animation solutions.

It seems that this package added some fine-tuning to Chakra UI projects, so let's go to the solution:

Besides the chance for progress, CodeChem's love for open-source contribution opens many doors. It makes development more accessible for everyone and encourages other young open-source architects to bring their innovative solutions to the table.

We nurture this culture through collaboration and unselfish devotion to the community. You can also read our blog post about Hacktoberfest, which helped the open-source community. Find more about it here.