Forem: Tomi budi

7 Lessons from 7 Years in Tech

Tomi budi — Tue, 17 Jun 2025 11:43:30 +0000

It's been 7 years since I started my journey in tech — from working at small startups, moving to larger companies, to building my own side projects. Along the way, I’ve learned a lot — not just about code, but also about mindset, habits, and personal growth.

Here are the 7 most meaningful lessons I’ve learned in the past 7 years.

1. Technology Always Changes

Frameworks come and go. New tools show up every month. If you try to chase everything, you'll burn out quickly. What matters more is learning how to learn — developing adaptability, understanding core concepts, and having the habit of exploring.

“It’s not about knowing everything — it’s about knowing how to find out.”

2. Soft Skills Are Superpowers

Early on, I thought coding was everything. But over time, I realized communication, listening, and teamwork often make the real difference. Many successful projects happened not because of perfect code — but because of clear collaboration.

3. Imposter Syndrome Is Normal

Feeling like you’re not smart enough, like everyone else knows more — that’s something I’ve felt many times, even now. But that feeling is not a reason to stop. In fact, it often pushes us to keep learning and stay humble.

4. Build a Digital Footprint Early

When I started consistently sharing progress, writing insights, and uploading projects to GitHub, new connections started to appear. People began to recognize what I could do. Opportunities followed — freelance gigs, communities, even job offers.

“If you don’t talk about your work, no one will know what you’re capable of.”

5. Focus Beats Busy

I used to take pride in working late into the night. But eventually, I realized that being busy doesn’t mean being productive. What matters is knowing what to prioritize — and making space to rest.

6. Learn to Ask the Right Questions

Many people stay stuck not because they don’t have answers, but because they don’t know what to ask. Being able to ask clear, focused questions is a powerful skill. It's one of the keys to becoming a good problem solver.

7. This Is a Marathon, Not a Sprint

It's tempting to always go full speed — take every course, build side projects, constantly push yourself. But if you burn out, everything stops. Managing your energy is crucial. Getting enough sleep, making time to rest — that’s not laziness. That’s sustainability.

Final Thoughts

This is just a snapshot of the stories and lessons I’ve gathered over the years. Maybe some of these lessons resonate with you. Or maybe you have your own versions.

If you have time, feel free to check out my newly updated portfolio at hellotoms.com — I’ve gathered my projects, writings, and documentation there as part of this journey.

Thanks for reading 🙌

Recipe to create stunning boilerplate Nextjs

Tomi budi — Tue, 11 Jul 2023 14:07:17 +0000

Revolutionize your Front-End Workflow: A Guide to crafting Beautiful Boilerplate Code Nextjs

Here is my recipe for creating your my boilerplate. Recently, my job has involved creating front-end projects from scratch, which can be inefficient with repetitive tasks. With my experience, I hope to provide insight for everyone to create their own boilerplate with their own style. Feel free to add, use or comment.

Tech Stack

I choose the most common tech stack that popular in this year to setup my boilerplate bellow are the details:

Next.js v12 for fast and reliable performance
Tailwind CSS for styling, with many pre-built components
Jest for high-quality code testing
Tanstack/React-Query for managing and caching data in React applications
Axios for HTTP requests
Day.js for easy-to-use date and time formatting The app is also set up as PWA, which means that users can access it offline and enjoy a seamless mobile user experience.

Unit Test/Coverage

To ensure good code quality, it is important to prepare unit tests for each component and function, and to cover them thoroughly. Setting up these tests should be one of the initial steps when creating a repository. I use instanbul-badges-readme to generate a report that shows the percentage of code coverage for the repository automatically.

How to install https://www.npmjs.com/package/istanbul-badges-readme

add on our script package.json

script: {
    "test:coverage-badge": "istanbul-badges-readme"
}

feel free to custom script name test:coverage-badge

here’s the result on my README.md

## uTests Coverage Status

| Statements                                                                         | Branches                                                                       | Functions                                                                           | Lines                                                                       |
| ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
| ![Statements](https://img.shields.io/badge/statements-77.12%25-red.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-54.23%25-red.svg?style=flat) | ![Functions](https://img.shields.io/badge/functions-87.09%25-yellow.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-81.11%25-yellow.svg?style=flat) |

Lighthouse Performance
make sure all things keep performance as long the code changes frequently merged onto main branch. We need to identify the root cause of the issue in order to fix it in small parts. I have chosen Google Lighthouse to measure the performance of my app and also create automatically generate a report.

let’s add custom script to generate report

script: {
    "lighthouse-report": "npx lighthouse-badges --urls https://localhost:3000 -o lighouse"
}

before you run the script make sure you have been run the app on https://localhost:3000 if not you can customize the script

then run the script lighthouse-report

wait few seconds let’s see the magic. all file needed generate on lighthouse directory then readme updated as well

here’s the result

### Lighthouse

![Lighthouse Accessibility Badge](./lighthouse/lighthouse_accessibility.svg) ![Lighthouse Best Practices Badge](./lighthouse/lighthouse_best-practices.svg) ![Lighthouse Performance Badge](./lighthouse/lighthouse_performance.svg) ![Lighthouse PWA Badge](./lighthouse/lighthouse_pwa.svg) ![Lighthouse SEO Badge](./lighthouse/lighthouse_seo.svg)

Setup Commit, Eslint, Prettier
The detail of cool setup like a pro https://dev.to/tomibudis/setup-repository-nextjs-app-like-a-pro-1lij

Publish NPM Registry
If you have a large organization that intends to utilize this boilerplate, it would be beneficial to publish it on a public or private registry. In my case, I have published it on the npm public scope. The advantage of doing so is that it allows for easy installation and communication with other teams.

https://docs.npmjs.com/creating-and-publishing-scoped-public-packages

in my case I just add on my script

script: {
    "publish": "npm public --access public"
}

Script to install own boilerplate with CLI

here the cool thing we can install our boilerplate in our terminal directly using bin script

const { execSync } = require("child_process");

const runCommand = (command) => {
  try {
    execSync(`${command}`, { stdio: "inherit" });
  } catch (err) {
    console.error(err);
    return false;
  }
  return true;
};

const repoName = process.argv[2];
const gitCheckoutCommand = `git clone https://github.com/tomibudis/codelabs-next-pwa.git ${repoName}`;
const installDepsCommand = `cd ${repoName} && npm install`;

console.log(`Init project ${repoName}`);
const checkedOut = runCommand(gitCheckoutCommand);
if (!checkedOut) process.exit(-1);

console.log("Installing dependencies...");
const installDeps = runCommand(installDepsCommand);
if (!installDeps) process.exit(-1);

console.log(
  "Init project successfully! follow the following command script to start."
);

Let's put this file in the bin directory and name it cli.js. You can customize this script to execute any command you want. Then, you can run the following command to install your boilerplate:

npx tomibudis/codelabs-next-pwa testing-clone-repo

Documentation

In order to make the boilerplate easy to maintain in the future, it is important to put proper documentation in place. This documentation should explain each section of the boilerplate, including the prerequisites, how to install it, and how to run it locally.

The documentation should be clear and concise, and it should be written in a way that is easy to understand. It should also be up-to-date, so that it reflects the latest changes to the boilerplate.

By putting proper documentation in place, you can make it easier for yourself and others to maintain the boilerplate in the future.

Here are some specific things that you should include in the documentation:

The prerequisites for installing and running the boilerplate.
The steps involved in installing and running the boilerplate.
A description of each section of the boilerplate.
Any troubleshooting tips that you have found to be helpful.

Conclusion

the result of my exploration as linked bellow, please feel free to suggest other things that would make the boilerplate better. Thank you!

github: https://github.com/tomibudis/codelabs-next-pwa
npm: https://www.npmjs.com/package/codelabs-next-pwa
preview: https://codelabs-next-pwa.hellotoms.com

Setup repository nextjs app like a pro 😎

Tomi budi — Fri, 03 Feb 2023 14:55:18 +0000

Introduction

I'd like to share my experience setting up a repository using Next.js, as it is a technology that is widely used in the tech industry. The purpose of this setup is to make our codebase more clean and maintainable. I don't want to waste your time by making you read this post, as I believe it will be a valuable addition to your development toolkit.

let’s get started…

Prerequisite

pnpm (package manager)
nodejs ^18.13.0
vscode (latest version)

since from node.js v17+ there is additional setup on your machine don’t forget to set env

NODE_OPTIONS=--openssl-legacy-provider

Linux → https://stackoverflow.com/questions/234742/setting-environment-variables-in-linux-using-bash

Windows → https://stackoverflow.com/questions/32463212/how-to-set-environment-variables-from-windows

MacOS → https://apple.stackexchange.com/questions/106778/how-do-i-set-environment-variables-on-os-x

First and foremost, let's install some extensions for Visual Studio Code, such as ESLint and Prettier. Once that is done, we can move on to the next section.

Step 1

install dependencies that needed

pnpm install eslint eslint-config-next eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-standard eslint-plugin-testing-library @typescript-eslint/eslint-plugin @typescript-eslint/parser -D

create a file .eslintrc.json

{
  "plugins": ["@typescript-eslint", "testing-library"],
  "extends": [
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended"
  ],
  // this is additional rules to block when has unnecessary variable
  "rules": {
    "@typescript-eslint/no-unused-vars": "error"
  }
}

ensure the file is loaded correctly. open output tab on vscode

Step 2

create a file .prettier.config.js

module.exports = {
  tabWidth: 2,
  trailingComma: "es5",
  singleQuote: false,
  endOfLine: "auto",
  plugins: [require("@trivago/prettier-plugin-sort-imports")],
    // you can customize the import order like you want
  importOrder: [
    "<THIRD_PARTY_MODULES>",
    "^~/utils(.*)$",
    "^~/hooks(.*)$",
    "^~/components(.*)$",
    "^~/constants(.*)$",
    "^[./]",
  ],
  importOrderSeparation: true,
  importOrderSortSpecifiers: true,
};

and again let’s make sure the prettier config is correct. back to output tab

Setting up pre-commit and conventional commit with commitlint is a good way to ensure code quality and consistency.

Pre-commit is a way to call a function before committing code changes to a git repository. This can be useful for running custom code tasks or enforcing standards by automating other scripts to run those tasks. One tool that can help with this is Husky, which allows developers to add git hooks that will automatically run specified tasks before committing code. This can help to ensure that code is well-formatted, free of errors, and adheres to established conventions.

install dependencies

pnpm install husky @commitlint/{cli,config-conventionalig} -D

activate hooks

pnpx husky install

add hooks

// pre-commit
pnpx husky add .husky/pre-commit `pnpx lint-staged`;

// commit message
pnpx husky add .husky/commit-msg `pnpx --no -- commitlint -- -edit ${1}`

then create a file .lintstagerc.js

module.exports = {
  "**/*.ts?(x)": (filenames) =>
    `next lint --fix --file ${filenames
      .map((file) => file.split(process.cwd())[1])
      .join(" --file ")}`,,
};

ensure the setup are correct.

above is image when git hooks called

ensure all stages are success like screenshot above

Conclusion

Feel free to give an input or feedback on my code

the detail repository you can take a look over here https://github.com/toms-studio/codelabs-next-web