As a software developer, our primary task is to write code, and it is not just about writing it so that the program runs well. We also need to ensure that the code we write is clean, which means we must pay attention to things such as giving variable names, removing unused code, and maintaining consistency. While a developer can manually keep the code clean, it can be difficult when there is a lot of code to write, and when we working with a team.

Note: the topic we will talk about in here is not really cover/represent about "clean code", there are a lot another things about clean code outside.

This is where tools like code linters and formatters come in handy. As developers who use JavaScript especially, we must already know about ESLint and Prettier. Both of these are popular tools that useful in keeping our codebase clean and consistent. With ESLint we can trace syntax errors, logic errors, get code suggestions, etc, based on the ESLint rules that we already config. While Prettier is used for formatting our code which includes the semicolon usable, tab indentation, quotes usable, trailing comma, etc, it is based on our Prettier configuration as well. In the project, we can use one of them or even combine both of them.

About Biome

In August 2023, there was another code linter/formatter tool released, it's named Biome, so it's what we will talk about.

Fun fact: the first logo of Biome was looks like same with Remix logo XD.

What is this?

Biome is afast formatterfor JavaScript, TypeScript, JSX, and JSON that scores 97% compatibility with Prettier, saving CI and developer time.

Biome is aperformant linter for JavaScript, TypeScript, and JSX that features more than 200 rules from ESLint, typescript-eslint, and other sources.

That's two main points that I quote from the official site. So basically Biome is a JavaScript/TypeScript linter and formatter same as ESLint and Prettier, yeah so Biome alone does a thing that ESLint and Prettier do, and it is built on Rust.

Reasons to use it

Before trying to use it, let's get to know why we should try it, and maybe make it an ESLint and Prettier alternative for our development.

Better performance

Biome has a better performance on linting and formatting code, yup, as I mentioned below, Biome is built on 🦀 Rust. And then.., I don't know how to describe this anymore tbh.

Some pre-configured rules

If you have used ESLint and Prettier before, you know there are a lot of plugins to do simple things such as TypeScript, React plugins, or import sorter from Trivago. So Biome came in already with some useful top-level config options such as some I mentioned before, which are TypeScript, React, and import sorter.

IDE/Text editor integrations

Biome already has an official integration/plugin with Visual Studio Code and IntelliJ IDEA, and a plugin that is maintained by communities for some other editors such as Neovim, Emacs, Helix, and Sublime Text. Get to know more about this here.

Getting started

"Talk is cheap, show me the code demo", let's try to use it.

Here I will use the basic React Vite app for the implementation.

Install Biome

So, first of all, install the Biome itself as the development dependencies, here I will use PNPM as the package manager.

pnpm add --save-dev --save-exact @biomejs/biome

# if using NPM
npm i --save-dev --save-exact @biomejs/biome
# if using Yarn
yarn add --dev --exact @biomejs/biome

--exact will resolve the version of the package and add it to your package.json with an exact version number instead of a version range.

Init configuration file

Now create a Biome configuration file by running the init command.

pnpm biome init

# if using NPM
npx @biomejs/biome init
# if using Yarn
yarn biome init

After running that command, now we will have biome.json a file in our root project directory. The file will contain this code:

{
    "$schema": "https://biomejs.dev/schemas/1.6.3/schema.json",
    "organizeImports": {
        "enabled": true
    },
    "linter": {
        "enabled": true,
        "rules": {
            "recommended": true
        }
    }
}

Usage

After initiating the configuration file, now we can use it. There are three main commands.

1. Format files.

pnpm biome format <files> --write

# if using NPM
npx @biomejs/biome format <files> --write
# if using Yarn
yarn biome format <files> --write

2. Lint files.

pnpm biome lint <files>

# if using NPM
npx @biomejs/biome lint <files>
# if using Yarn
yarn biome lint <files>

3. Run both format and lint.

pnpm biome check --apply <files>

# if using NPM
npx @biomejs/biome check --apply <files>
# if using Yarn
yarn biome check --apply <files>

To make it easier, let's just add those commands into "scripts" in the package.json. So the package.json file would look like this:

{
  // ...
  "scripts": {
    // ...
    "format": "biome format --write ./src",
    "lint": "biome lint ./src",
    "check": "biome check --apply ./src"
  },
  // ...
}

So now we just run these commands easily. Go here for the advanced configurations.

Development status

The latest minor release of Biome came on 8 March 2024, which is version 1.6.0. It has some changes, such as "Partial support for Astro, Svelte, and Vue files" and some new rules. So it's good news for developers who casually use Astro, Svelte, and Vue.

Conclusion

Now should we use Biome and fully replace ESLint and Prettier?

1. It depends, currently, I use it for my project only, if you are going to use it on your work project, maybe you can discuss it with your team.

2. If there is an ESLint or Prettier plugin rule that always you use and is not available yet on Biome, then you can just use ESLint with Prettier.

And maybe there are other reasons to think about it.

So that's it, thank you ✨.

References

• https://biomejs.dev

• https://youtu.be/KI7mbm-BxqA?si=h16A0ZJYntzfGzZJ

From Wikipedia, this is what we get about Open Source:

Open-source software (OSS) is computer software that is released under a license in which the copyright holder grants users the rights to use, study, change, and distribute the software and its source code to anyone and for any purpose.

In simpler terms, it means that the software's underlying code is made accessible to the public, and anyone is allowed to view, modify, and share it.

Why contribute to Open Source?

By contributing to the project, we can help the community who made it and so many peoples who used the project, and your contribution history can be a valuable addition to their portfolio. We can even contribute some simple things such as typos, grammatical errors, or docs addition, so not every contribution should be a code change.

Pre-requisite

You only need to know about the basic of git such as cloning, push, and pull. And already have a GitHub or another git platform account.

Finding the project to contribute

Selecting a project that aligns with your interests and expertise is essential. Look for projects that you use or find interesting. To explore different projects, you can browse them on popular platforms like GitHub, GitLab, and Bitbucket.

Example

Recently I am on learning and exploring Jotai state management at tutorial.jotai.org (an Official interactive Jotai tutorials website) and found something wrong with the sentences, so here I will use this as an example to contribute because it was open source too.

I captured this from tutorial.jotai.org/quick-start/theme-setting which is one of the pages on the website, something's wrong, right? Yeah, there are some grammatical errors, especially the "for you app" sentence, this is what I want to fix, so let's just get started.

FYI: Jotai is one of the popular state management libraries for React app.

Get in touch with the project source

So, after finding the project that would we contribute to, let's open the source of the project. For this case, it is github.com/jotaijs/jotai-tutorial.

It is a Next.js project, if you don't know about Next.js it doesn't matter, because it is only for example.

Know what to change

Make sure we know what we will change through the project codebase. In my case, it is in ~/app/quick-start/theme-setting/markdown.ts.

Yup, that is the code that shows the grammatical errors.

Contribution guidelines

Getting to know about project contribution guidelines is one of the important parts. We should read and understand the contribution guidelines of the open source project we want to contribute to which is usually listed in the file CONTRIBUTING.md. Here is an example:

The file usually contains "How to contribute", "Code of Conduct", "Branching and Versioning", and "Coding Standards and Style Guidelines".

Start to make a changes

I will use GitHub because the project that I am exemplifying is on GitHub. So if the project you are going to contribute is on another platform like GitLab or Bitbucket, that's fine.

Fork the repository

On the project repository page, click the "Fork" button.

In this step, we can create a new name or description of the repository. But I will change nothing, so in this step, I will immediately click the "Create fork" button.

So here is my repository that forked from github.com/jotaijs/jotai-tutorial.

Clone the forked repository

Now on the forked repository clone the git repository to local. Copy the git URL.

Open the local directory for the project to the terminal, run git clone <GIT_URL> <PROJECT_FOLDER_NAME>, in here I pass the folder name to "jotai-tutorial".

And then open the project using code editor, I will use Visual Studio Code.

Make a changes

Because we already know what would we change, so just make the changes now using code editor.

Those are the changes I have been working on. Left (before) and right (after).

Push the changes

After we make the changes now create a new branch. Why did we create a new branch instead of using the main (main) branch? it's keeping the main branch clean. So in this case, I will create a new branch named fix/theme-switcher-grammar by running this command:

git checkout -b fix/theme-switcher-grammar

By running the command, we also automatically moved to the new branch. Then now I will commit the changes. Then add the changes to the staging and commit.

git add .
git commit -m "fix: grammatical errors in theme switcher page instructions"

And now push the new branch with changes to the fork on GitHub.

git push origin fix/theme-switcher-grammar

For the branch name and commit message, make sure we provide clear naming/message and related to what we change.

Back to the GitHub

Then if we back to the forked repository, there is will appear a notification like this with the button "Compare & pull request", and now let's click the button because we want to make a pull request.

Then we will get directed to the pull request page, we can fill the pull request title and description well. Make sure we fill in the title according to the context of the changes we make. In my case, I fill the title "Fix grammatical errors in theme switcher page instructions", and would be better if we provide the screenshots for the changes we make. If it's done, then we click the "Create pull request" button.

And done.

Now we need to wait for the review from the project maintainer, if it is approved it will be merged by them, otherwise, if there are still errors or something wrong then usually they will comment and tell us to improve the changes we made.

Conclusion

Contributing to open source projects is one of the ways that allows we to make a positive impact on the software community. By choosing the right project, engaging with the community, and submitting meaningful contributions, we can become an active part of the open source movement and advance our coding skills to new heights.

Want to read in Bahasa Indonesia version? here you go: https://medium.com/@up2dul/chakra-ui-0-perkenalan-b493f059ebe1

What is Chakra UI?

From the official website, this is what we get about Chakra UI:

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

So Chakra UI is one of the most popular React UI Component libraries. Chakra UI provides some built-in components that are ready to use, so this is a solution for those who don't want to create React components manually from scratch.

There are some other React UI components such as Material UI, Mantine, and Ant Design, but in this article, we will only learn about Chakra UI and not compare them.

Why use Chakra UI for React project?

Built-in accessibility

Chakra UI provides components that are designed with accessibility in mind and provides built-in support for common accessibility features such as screen reader compatibility and keyboard navigation. This makes it easier for developers to create accessible interfaces without having to implement these features from scratch. Get to know more about website accessibility: https://chakra-ui.com/blog/the-beginners-guide-to-building-an-accessible-web.

Custom hooks

When developing a website using React, we are always faced with a situation where we need custom hooks, and the great thing is, Chakra UI also provides utility custom hooks that are so useful, such as useBoolean, useClickOutside, and useClipboard. We don't need to install anything more, so just import the hooks that we want from '@chakra-ui/react'.

Active community

Chakra UI has an active and supportive community of developers who contribute to the development and provide support. This makes it easier to get help and find solutions to common problems.

Start using Chakra UI on the project

I don't provide the step for generating React project from scratch in this part, so if want to follow make sure you already have a React project using CRA, Vite, Next.js, or anything else.

So in the project directory, open the terminal and install Chakra UI along with some additional libraries. We can use npm, yarn, or pnpm to install it.

# npm
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

# yarn
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

# pnpm
pnpm add @chakra-ui/react @emotion/react @emotion/styled framer-motion

After that, we can add the Chakra UI component provider to the root of the application project, for example here is a file called App.jsx as an application root in the src folder.

// ~/src/App.jsx
import { ChakraProvider } from '@chakra-ui/react';

const App = () => {
  return (
    <ChakraProvider>
      <App />
    </ChakraProvider>
  )
}

If we use Next.js, then will be like this:

// ~/pages/_app.jsx
import { ChakraProvider } from '@chakra-ui/react';

const MyApp = ({ Component, pageProps }) => (
  <ChakraProvider>
    <Component {...pageProps} />
  </ChakraProvider>
);

export default MyApp;

So in essence, please adjust it according to the project folder structure used.

And then we can import the component that we want from Chakra UI. This is the example if we use Next.js:

// ~/pages/index.jsx
import Head from 'next/head';
import {
  Box,
  Button,
  Heading,
  Text,
} from '@chakra-ui/react';

const Home = () => (
  <>
    <Head>
      <title>Hello Chakra UI</title>
      <meta name='description' content='Hello Chakra UI' />
      <link rel='icon' href='/favicon.ico' />
    </Head>

    <Box as='section' mt='40px' textAlign='center'>
      <Heading fontSize='4xl'>Hello world</Heading>
      <Text mt='4px'>
        Welcome to Chakra UI
      </Text>
      <Button mt='20px'>Button from Chakra</Button>
    </Box>
  </>
);

export default Home;

Go to https://chakra-ui.com/docs/components to see the component list.

So the result will be like this:

Conclusion

Finally, we got to know what is Chakra UI, and why to use it, and we have had success installing it to our project. You can explore the other components and or even implement them in your React project. With such good documentation and active community from the developers and the users, so we don't need to worry about using it.

References

• https://chakra-ui.com/

• https://chakra-ui.com/blog/the-beginners-guide-to-building-an-accessible-web