DEV Community: Imamuzzaki Abu Salam

[Boost]

Imamuzzaki Abu Salam — Fri, 11 Jul 2025 03:42:05 +0000

Gittech

May 8 '25

How to Turn GitHub Projects Into Real Money

#programming #git #github #productivity

Comments 2

3 min read

My WeCoded Landing Page

Imamuzzaki Abu Salam — Sun, 30 Mar 2025 15:59:07 +0000

I designed a dynamic and immersive landing page for the WeCoded 2025 Challenge that celebrates diversity and inclusion in the tech industry. My vision was to create an experience that not only showcases inspiring stories from the community but also delivers an engaging, interactive interface that represents the vibrant energy of the WeCoded movement.

Source Code: https://github.com/ImBIOS/landing-wecoded

Demo

View the live demo: WeCoded 2025 Landing Page

The hero section with 3D animated background elements

How I Built It

Technologies Used

I built this landing page using a modern stack focused on interactivity and performance:

Next.js: For server-side rendering and overall framework
TypeScript: For type safety and improved developer experience
Three.js & React Three Fiber: For creating immersive 3D elements like the floating background spheres and interactive globe
Framer Motion: For smooth animations and transitions throughout the page
Tailwind CSS: For responsive styling with dark/light mode support
Axios: For API requests to the DEV platform

DEV API Integration

The heart of this project is the integration with the DEV Articles API. I implemented a dynamic content system that:

Fetches posts tagged with "wecoded" and "shecoded" from the DEV API
Displays them in a responsive, accessible grid with proper image handling
Allows users to toggle between WeCoded and SheCoded posts
Shows author information, reading time, and engagement metrics for each post

// Example of how I fetch posts from the DEV API
export async function fetchWeCodedPosts(): Promise<Post[]> {
  try {
    const response = await axios.get(`${BASE_URL}/articles?tag=wecoded&per_page=12`);
    return response.data;
  } catch (error) {
    console.error('Error fetching WeCoded posts:', error);
    return [];
  }
}

Unique Features

3D Interactive Elements

I created several 3D elements using Three.js to make the landing page more engaging:

Animated Background: Floating spheres with distortion materials in the WeCoded brand colors that respond to user interaction
Interactive Globe: A 3D globe showing global participation with interactive hotspots representing different cities worldwide

Dark/Light Mode

I implemented a fully responsive dark/light mode toggle using:

CSS variables for consistent theming
A custom cn utility that combines clsx and tailwind-merge for flexible class management
next-themes for theme persistence

// Custom utility for conditional class names
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Timeline Visualization

I created an interactive timeline that shows the evolution from SheCoded to WeCoded through the years, with animated transitions as users scroll through the page.

Accessibility

I prioritized accessibility by:

Ensuring proper contrast ratios for all text
Adding ARIA labels for interactive elements
Making sure the site works well with keyboard navigation
Testing with screen readers
Supporting reduce motion preferences

What I'm Proud Of

I'm particularly proud of how the 3D elements and animations work together to create an immersive experience without sacrificing performance. The interactive globe showing global WeCoded participation was a technical challenge that required understanding 3D geometry and geography coordinate systems.

The seamless dark/light mode transition was also a rewarding implementation, as it required thoughtful consideration of the color scheme to maintain the vibrant WeCoded brand identity in both modes.

Overall, this project allowed me to combine my passion for diversity in tech with my love for creative web development, resulting in a landing page that I hope will inspire others to join the WeCoded movement.

[Boost]

Imamuzzaki Abu Salam — Thu, 30 Jan 2025 10:14:16 +0000

Horizontal Calendar - a simple date picker for React Native

Tony Kharioki ・ Apr 1 '23

Complete Guide to Deploying Next.js Standalone with Bun and Docker

Imamuzzaki Abu Salam — Mon, 02 Oct 2023 02:16:36 +0000

Learn to deploy a Next.js standalone application using Bun and Docker as if you were deploying with Vercel. This guide includes a step-by-step walkthrough, tackling common errors, and more.

Why Deploy Next.js with Bun and Docker?

When Bun hit its stable version 1 and Vercel started supporting it as a package manager (though still relying on Node for runtime), I was intrigued. How could you simulate the Vercel deployment process locally? Specifically, how can you deploy a Next.js standalone app with Bun and Docker? This guide aims to answer these questions.

Prerequisites

Basic understanding of Docker, Next.js, and Bun
Node.js installed
Bun package manager installed

Step-by-Step Guide

Step 1: Setting Up Dockerfile

Here's the full dockerfile you'll need.

FROM imbios/bun-node:18-slim AS deps
ARG DEBIAN_FRONTEND=noninteractive

# I use Asia/Jakarta as my timezone, you can change it to your timezone
RUN apt-get -y update && \
  apt-get install -yq openssl git ca-certificates tzdata && \
  ln -fs /usr/share/zoneinfo/Asia/Jakarta /etc/localtime && \
  dpkg-reconfigure -f noninteractive tzdata
WORKDIR /app

# Install dependencies based on the preferred package manager
COPY package.json bun.lockb ./
RUN bun install --frozen-lockfile

# Build the app
FROM deps AS builder
WORKDIR /app
COPY . .

RUN bun run build


# Production image, copy all the files and run next
FROM node:18-slim AS runner
WORKDIR /app

ARG CONFIG_FILE
COPY $CONFIG_FILE /app/.env
ENV NODE_ENV production
# Uncomment the following line in case you want to disable telemetry during runtime.
# ENV NEXT_TELEMETRY_DISABLED 1

COPY --from=builder  /app/.next/standalone ./

EXPOSE 3001

ENV PORT 3001

CMD ["node", "server.js"]

Step 2: Custom Shell Script

Create a custom shell script ./build.sh.

#!/bin/bash
set -e

# Run Next.js build with passed arguments
next build "$@"

# Copy files only if not in a CI environment
if [ -z "$CI" ]; then
  cp -r ./public ./.next/standalone/public
  cp -r ./.next/static ./.next/standalone/.next/static
fi

Common Errors and Troubleshooting

I ran into some issues during my first attempt, especially errors prefixed with node:. I fixed them by using imbios/bun-node instad of oven/bun as the base image. Becase we need Node.js fallback for Bun's not yet implemented features.

Conclusion

By following this guide, you should have a Next.js app deployed, mimicking the Vercel deployment process, with Bun and Docker. Feel free to tweak and optimize the setup according to your project's needs.

What's Next?

Share this guide if you found it useful and leave a comment if you have any questions or improvements. Stay tuned for more!

Why is it so hard to create PWA with Next.js?

Imamuzzaki Abu Salam — Mon, 01 May 2023 23:59:21 +0000

Creating a Progressive Web App (PWA) with Next.js has not always been a smooth experience. In this post, we'll discuss the challenges developers faced in the past, the emergence of the next-pwa plugin, and the exciting future with the @imbios/next-pwa package.

Several Years Ago

Several years ago, creating a PWA with Next.js from scratch was quite challenging. Developers had to deal with a steep learning curve and manually configure various aspects of the PWA, such as service workers, caching strategies, and offline support. These complexities made it difficult for developers to create high-quality PWAs quickly and efficiently.

I 💖 `next-pwa`

When I first discovered the next-pwa plugin, it was a game-changer. This plugin simplified the process of creating PWAs with Next.js by providing a zero-config solution, making it much more accessible. I personally used it in the ImBIOS/cardus-app project and fell in love with its ease of use and powerful features.

appDir is The Game Changer

With the release of Next.js 13, a beta feature called appDir was introduced in 2022. This feature is an adoption of React 18's Server Components and represents a significant step forward for Next.js development. It streamlines the process of creating dynamic web apps and opens up new possibilities for developers.

I Should Take Action

Unfortunately, the last update to the next-pwa plugin was 8 months ago, and its maintainer has been inactive since then. This situation left developers in need of a solution that is compatible with the latest Next.js features, like appDir.

`@imbios/next-pwa` is The Solution

I made the difficult decision to resurrect the next-pwa plugin and republish it under a new package called @imbios/next-pwa. This updated package will ensure compatibility with the latest Next.js features and provide continued support for developers looking to create PWAs using Next.js.

In conclusion, while creating PWAs with Next.js was once a daunting task, the emergence of next-pwa and now @imbios/next-pwa has made the process more accessible and efficient. With ongoing support and compatibility with the latest Next.js features, developers can look forward to a bright future in PWA development.

Check the repo here: https://github.com/ImBIOS/next-pwa

How I Made a Reminder to Write a Blog Post Using GitHub Action

Imamuzzaki Abu Salam — Sun, 23 Apr 2023 03:21:03 +0000

As a writer, I understand the importance of consistency when it comes to publishing new content. However, there are times when life gets in the way, and it can be challenging to remember to write a new blog post. To help me stay on track with my sharing schedule, I created a simple reminder using GitHub Actions. In this post, I will share how I made this workflow.

What is GitHub Action?

GitHub Actions is a powerful tool that allows you to automate your workflows. You can use it to build, test, and deploy your code. You can also use it to perform a wide range of other tasks, such as sending notifications or scheduling reminders.

How I Created a Reminder to Write a Blog Post

To create a reminder to write a blog post, I'm using GitHub special repository of README.md and added a file named .github/workflows/blog-posts.yml. In this file, I defined the workflow that GitHub Actions would execute. Here's the initial content of the file:

name: Blog Posts

on:
  schedule:
    - cron: '0 0 * * 0' # Run at 00:00 every Sunday
  workflow_dispatch:

jobs:
  update-posts:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Update post list
        run: |
          sleep 1m
          curl -LO https://blog.imam.dev/feed.xml
          node src/list-posts.js
          rm feed.xml
      - name: Commit changes
        run: |
          git config --local user.email "github-actions[bot]@users.noreply.github.com"
          git config --local user.name "github-actions[bot]"
          git add -A
          git diff-index --quiet HEAD || git commit -m "Update blog posts"
      - name: Pull changes
        run: git pull -r
      - name: Push changes
        uses: ad-m/github-push-action@0fafdd62b84042d49ec0cb92d9cac7f7ce4ec79e
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}

This workflow is triggered every Sunday at 00:00. It then runs a script that updates the list of blog posts. The script is written in JavaScript and parses the RSS feed of my blog. It then generates a list of blog posts and updates the README.md file. Finally, it commits the changes and pushes them to GitHub. I'm using ouuan's repository as a reference for this workflow.

Where is the reminder came from? It's actually in the list-posts.js file. I added a reminder to the list of blog posts. Here's the content of the file:

const { readFileSync, writeFileSync } = require('fs')

/**
 * Convert XML string to JSON
 * @param {string} xmlString
 * @returns {object} json
 */
const xmlToJson = (xmlString) => {
  const regex = /<(\w+)([^>]*)>([\s\S]*?)<\/\1>/gm
  const matches = xmlString.matchAll(regex)
  const json = {}

  for (const match of matches) {
    const [, key, attributes, value] = match
    const subMatches = value.matchAll(regex)
    const subJson = {}

    for (const subMatch of subMatches) {
      const [, subKey, subAttributes, subValue] = subMatch

      if (subValue.match(regex)) {
        if (Array.isArray(subJson[subKey])) {
          subJson[subKey].push(
            xmlToJson(`<${subKey}${subAttributes}>${subValue}</${subKey}>`)[subKey]
          )
        } else if (subJson[subKey]) {
          subJson[subKey] = [
            subJson[subKey],
            xmlToJson(`<${subKey}${subAttributes}>${subValue}</${subKey}>`)[subKey],
          ]
        } else {
          subJson[subKey] = xmlToJson(`<${subKey}${subAttributes}>${subValue}</${subKey}>`)[subKey]
        }
      } else if (Array.isArray(subJson[subKey])) {
        subJson[subKey].push(subValue)
      } else if (subJson[subKey]) {
        subJson[subKey] = [subJson[subKey], subValue]
      } else {
        subJson[subKey] = subValue
      }
    }

    if (json[key]) {
      if (Array.isArray(json[key])) {
        json[key].push(subJson)
      } else {
        json[key] = [json[key], subJson]
      }
    } else {
      json[key] = subJson
    }
  }

  return json
}

/**
 * Sort JSON by pubDate
 * @param {object} json
 * @returns {object} sortedJson
 */
const sortJson = (json) => {
  json.sort((a, b) => new Date(b.pubDate) - new Date(a.pubDate))
  return json
}

// Read XML file and convert to JSON
const xmlString = readFileSync('feed.xml', 'utf8')
const feeds = sortJson(xmlToJson(xmlString).rss.channel.item)

// Create Markdown list of posts
const posts = feeds
  .slice(0, 5)
  .map(
    (item) =>
      `- ${new Date(item.pubDate).toISOString().split('T')[0]} [${item.title}](${
        item.link
      }?utm_source=GitHubProfile)`
  )

// Update README.md if posts have changed,
// Otherwise throw an error to remind me to write a blog post
const readme = readFileSync('README.md', 'utf8')
if (readme.includes(posts.join('\n'))) {
  throw new Error('No new blog posts')
} else {
  const updatedReadme = readFileSync('README.md', 'utf8').replace(
    /(?<=<!--START_SECTION:blog-posts-->\n)[\s\S]*(?=\n<!--END_SECTION:blog-posts-->)/,
    posts.join('\n')
  )
  writeFileSync('README.md', updatedReadme)

  console.log('Updated README.md')
}

The script reads the RSS feed of my blog and generates a list of blog posts. It then updates the README.md file with the list of blog posts. If there are no new blog posts, it throws an error to remind me to write a blog post.

It's just an error that will be thrown when the script is executed while the posts are still the same and it's not a reminder that will be sent to my email or something more visible to me. So, I decided to enable the notification for any failed workflow runs. Here's how to do it:

Click on the top right corner of the page and select Settings.
Select Notifications on the left sidebar.
Click on Actions.
Select Send notifications for failed workflows only.

Now, I will get a notification when the script is executed and there are no new blog posts. I can also see the notification on the GitHub website.

Another Way That I Explored

The previous workflow that I tell you about is a modified version so my README.md is always up to date. I also explored another way to create a reminder to write a blog post. But, it's a pure reminder without any README.md update mechanism, just a reminder.

To create a reminder to write a blog post, I created a new GitHub repository and added a file named .github/workflows/remind.yml. In this file, I defined the workflow that GitHub Actions would execute. Here's the content of the file:

name: Reminder to write a blog post

on:
  schedule:
    - cron: '0 10 * * 1-5'

jobs:
  remind:
    runs-on: ubuntu-latest
    steps:
      - name: Send a reminder
        uses: dawidd6/action-send-mail@v3.1.0
        with:
          server_address: smtp.gmail.com
          server_port: 465
          username: ${{ secrets.EMAIL_USERNAME }}
          password: ${{ secrets.EMAIL_PASSWORD }}
          subject: 'Reminder to write a new blog post'
          body: "Don't forget to write a new blog post today!"
          to: my-email@example.com

This workflow sends me an email reminder every weekday at 10:00 AM, reminding me to write a new blog post. I used a third-party action, dawidd6/action-send-mail, to send the email. I provided my email credentials as GitHub secrets, so they are not visible in the workflow file.

Conclusion

I have explored two ways to create a reminder to write a blog post. The first way is to update the README.md file of my GitHub profile. The second way is to send an email reminder. I'm currently using the first way because it's more visible than the second way. I can see the reminder every time I visit my GitHub profile.

Creating a reminder to write a blog post using GitHub Actions is a simple and effective way to stay on track with your blogging schedule. With this workflow in place, you'll never forget to write a new post again. If you're interested in creating your reminder workflow, be sure to check out the GitHub Actions documentation to learn more. Happy blogging!

3 Scalable Next.js Architecture Boilerplate

Imamuzzaki Abu Salam — Thu, 13 Apr 2023 23:08:27 +0000

Next.js is a React framework that allows you to build server-side rendered React applications. It is a great tool for building web applications, but it can be difficult to scale your application as it grows. In this article, we will look at some of the best Next.js boilerplates for building scalable web applications.

The community of Next.js developers has created a lot of boilerplates that you can use to start your project. These boilerplates are great for building scalable web applications. They are also easy to extend and maintain. In this article, we will look at some of the best Next.js boilerplates for building scalable web applications.

Why we need a boilerplate?

A boilerplate is a template that you can use to start a new project. It contains all the necessary files and folders to get started with a project. It is a great way to save time and effort when starting a new project.

By using a boilerplate, you can focus on the core features of your application instead of spending time on setting up the project. It also helps you to follow best practices and patterns that are used by the community.

What is a scalable Next.js application?

A scalable application is one that can handle a large number of users and requests. It is also easy to maintain and extend. It is important to build a scalable application from the beginning to avoid refactoring the code later.

Scalability is a very important factor when building a web application. It is important to choose the right tools and architecture to build a scalable application. We always need to keep in mind that our application will grow in the future, not just becoming a garbage that we bury in the GitHub repository.

The best boilerplate for building scalable Next.js applications

There are many boilerplates available for building scalable Next.js applications. Here are some of the best boilerplates that you can use to start your project.

Next.js Boilerplate by alexeagleson

This boilerplate is a great starting point for building a Next.js application. It is built with TypeScript and uses Next.js 12. It also uses Tailwind CSS for styling. It is a great boilerplate for building a scalable web application.

Feature highlights:

Next.js 12 (you can help to upgrade to Next.js 13 in the repo)
TypeScript
Engine Locking
ESLint
Prettier
Git Hooks (Husky)
VS Code Config
VS Code Debugging
Storybook
Component template
Commit linting

We can easily start a new project by cloning the repo and running the following commands:

gh repo clone alexeagleson/nextjs-fullstack-app-template
# or
git clone git@github.com:alexeagleson/nextjs-fullstack-app-template.git
# or
git clone https://github.com/alexeagleson/nextjs-fullstack-app-template.git
# or you can also use degit if you want to use the template without git at first

If you need TailwindCSS or any styling framework, you still need to install it manually. But, it's pretty good to kickstart with this project, it has a lot of help especially when we start with a team. It has a lot of good practices and it's easy to maintain. It's also easy to extend and add new features. We can follow the guide to create new component or write our own CLI to automate the process.

All sort of linting and formatting are already set up. We can also use the VS Code config to make it easier to work with the project. It also has a Storybook config that we can use to build our components. This boilerplate has commit-msg hook that we can use to lint our commit message. We can easily document our component by using the Storybook.

Repository: alexeagleson/nextjs-fullstack-app-template
Blog: How to Build Scalable Architecture for your Next.js Project

Next.js Boilerplate by ipenywis

He said in his explanation video of this boilerplate, it's The Senior React Project Setup You Need as a Junior Developer. You can easily create an architecture like a Senior.

In today's fast-paced world of web development, it's essential to have the right tools and frameworks at your disposal. That's where the Next.js app with Turborepo, Zustand, TailwindCSS, and TypeScript stack comes in - a powerful combination of cutting-edge technologies that can make your development process smoother, faster, and more efficient.

One of the key benefits of this stack is Next.js, a top-tier framework for building server-side rendered React applications. It provides automatic code splitting, optimized performance, and easy deployment, making it an ideal choice for developers who want to focus on building robust and scalable web applications without worrying about the underlying infrastructure.

Turborepo is another tool that can significantly improve your workflow by optimizing monorepo development. It enables developers to work with multiple packages within a single repository, saving tons of time and energy while making it easier to manage and maintain your codebase.

Zustand is a lightweight state management library that offers a simple and intuitive approach to managing state in React applications. It can help you keep your codebase clean and organized while making it easy to work with and update your app's state.

TailwindCSS is a utility-first CSS framework that can help you design responsive and customizable user interfaces with ease. With its intuitive utility classes and flexible customization options, you can create stunning designs that look great on any device or screen size.

Finally, TypeScript adds static typing to the language, providing better type safety and developer experience. This can help catch bugs early and ensure that your codebase is clean and organized.

Overall, the Next.js app with Turborepo, Zustand, TailwindCSS, and TypeScript stack is a powerful and modern choice for any developer looking to build cutting-edge web applications. While there may be a bit of a learning curve, the benefits are well worth the effort, including faster development times, improved performance, and easier maintenance of codebases. So why not give it a try and see for yourself?

Just give it a shot, it's really good. It's easy to extend and maintain.

Repository: ipenywis/your-react-boilerplate
Youtube: The Senior React Project Setup You Need as a Junior Developer

Next.js Boilerplate by T3

Create T3 App (CT3A) is a starter kit for building web applications using a specific set of modern technologies that form the T3 stack. The T3 stack consists of TypeScript, Express.js, and TypeORM. CT3A takes this stack and adds additional technologies to create a powerful and easy-to-use platform for building web applications.

One of the standout features of CT3A is the use of TypeScript. The creators of CT3A believe that TypeScript provides a more consistent and less frustrating experience than vanilla JavaScript, especially for developers new to web development. With TypeScript, developers get live feedback as they write code, which helps prevent errors and saves time in the long run.

Another key technology used in CT3A is Next.js, a popular web framework for building React-based applications. Next.js offers a lightly opinionated and heavily optimized approach to creating applications, which makes it easier for developers to make good decisions when building their apps.

CT3A also makes use of tRPC, an alternative to GraphQL that provides a seamless client development experience against a typesafe server, without all the boilerplate. By leveraging TypeScript, tRPC provides an incredible developer experience that is easy to use and highly performant.

In addition to these core technologies, CT3A also includes several other technologies that are commonly used in web development. These include Prisma, which provides end-to-end typesafety from the database to the app and offers a suite of tools to make daily interactions with the database easier. CT3A also uses Tailwind CSS, a popular utility-first CSS framework that makes it easy to create good-looking applications without worrying about naming classes or organizing files. Finally, CT3A includes NextAuth.js, a solution for bringing authentication and security to your Next.js application without the hassle of building it yourself.

Overall, Create T3 App is a great starting point for anyone looking to build modern web applications using a powerful and easy-to-use set of technologies. With TypeScript, Next.js, tRPC, Prisma, Tailwind CSS, and NextAuth.js, CT3A provides a comprehensive and highly performant platform for building modern web applications. If you're looking to build web applications with the latest technologies and best practices, CT3A is definitely worth checking out.

Link: Create T3 App

Conclusion

That's all for today. I hope you find this article useful. If you have any questions or suggestions, please let me know in the comment section below. Thank you for reading.

Hello React, Goodbye useEffect (I Hope)

Imamuzzaki Abu Salam — Sat, 24 Dec 2022 07:00:49 +0000

In this article, I will show you how to use React to replace useEffect in most cases.

I've been watching "Goodbye, useEffect" by David Khoursid, and it's 🤯 blows my mind in a 😀 good way. I agree that useEffect has been used so much that it makes our code dirty and hard to maintain. I've been using useEffect for a long time, and I'm guilty of misusing it. I'm sure React has features that will make my code cleaner and easier to maintain.

What is useEffect?

useEffect is a hook that allows us to perform side effects in function components. It combines componentDidMount, componentDidUpdate, and componentWillUnmount in a single API. It's a compelling hook that will enable us to do many things. But it's also a very dangerous hook that can cause a lot of bugs.

Why useEffect is dangerous?

Let's take a look at the following example:

import React, { useEffect } from 'react'

const Counter = () => {
  const [count, setCount] = useState(0)

  useEffect(() => {
    const interval = setInterval(() => {
      setCount((c) => c + 1)
    }, 1000)
    return () => clearInterval(interval)
  }, [])

  return <div>{count}</div>
}

It's a simple counter that increases every second. It uses useEffect to set an interval. It also uses useEffect to clear the interval when the component unmounts. The code snippet above is a widespread use case for useEffect. It's a straightforward example, but it's also a terrible example.

The problem with this example is that the interval is set every time the component re-renders. If the component re-renders for any reason, the interval will be set again. The interval will be called twice per second. It's not a problem with this simple example, but it can be a big problem when the interval is more complex. It can also cause memory leaks.

How to fix it?

There are many ways to fix this problem. One way is to use useRef to store the interval.

import React, { useEffect, useRef } from 'react'

const Counter = () => {
  const [count, setCount] = useState(0)
  const intervalRef = useRef()

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      setCount((c) => c + 1)
    }, 1000)
    return () => clearInterval(intervalRef.current)
  }, [])

  return <div>{count}</div>
}

The above code is a lot better than the previous example. It doesn't set the interval every time the component re-renders. But it still needs improvement. It's still a bit complicated. And it still uses useEffect, which is a very dangerous hook.

useEffect is not for effects

As we know about useEffect, it combines componentDidMount, componentDidUpdate, and componentWillUnmount in a single API. Let's give some examples of it:

useEffect(() => {
  // componentDidMount?
}, [])

useEffect(() => {
  // componentDidUpdate?
}, [something, anotherThing])

useEffect(() => {
  return () => {
    // componentWillUnmount?
  }
}, [])

It's effortless to understand. useEffect is used to perform side effects when the component mounts, updates, and unmounts. But it's not only used to perform side effects. It's also used to perform side effects when the component re-renders. It's not a good idea to perform side effects when the component re-renders. It can cause a lot of bugs. It's better to use other hooks to perform side effects when the component re-renders.

useEffect is not a lifecycle hook.

// Detect dark theme var iframe = document.getElementById('tweet-1501574622839463936-75'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1501574622839463936&theme=dark" }

import React, { useState, useEffect } from 'react'

const Example = () => {
  const [value, setValue] = useState('')
  const [count, setCount] = useState(-1)

  useEffect(() => {
    setCount(count + 1)
  })

  const onChange = ({ target }) => setValue(target.value)

  return (
    <div>
      <input type="text" value={value} onChange={onChange} />
      <div>Number of changes: {count}</div>
    </div>
  )
}

useEffect is not a state setter

import React, { useState, useEffect } from 'react'

const Example = () => {
  const [count, setCount] = useState(0)

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`
  }) // <-- this is the problem, 😱 it's missing the dependency array

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

I recommend reading this documentation: https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

Imperative vs Declarative

Imperative: When something happens, execute this effect.

Declarative: When something happens, it will cause the state to change and depending (dependency array) on which parts of the state changed, this effect should be executed, but only if some condition is true. And React may execute it again for ~~no reason~~ concurrent rendering.

Concept vs Implementation

Concept:

useEffect(() => {
  doSomething()

  return () => cleanup()
}, [whenThisChanges])

Implementation:

useEffect(() => {
  if (foo && bar && (baz || quo)) {
    doSomething()
  } else {
    doSomethingElse()
  }

  // oops, I forgot the cleanup
}, [foo, bar, baz, quo])

Real-world implementation:

useEffect(() => {
  if (isOpen && component && containerElRef.current) {
    if (React.isValidElement(component)) {
      ionContext.addOverlay(overlayId, component, containerElRef.current!);
    } else {
      const element = createElement(component as React.ComponentClass, componentProps);
      ionContext.addOverlay(overlayId, element, containerElRef.current!);
    }
  }
}, [component, containerElRef.current, isOpen, componentProps]);

useEffect(() => {
  if (removingValue && !hasValue && cssDisplayFlex) {
    setCssDisplayFlex(false)
  }
  setRemovingValue(false)
}, [removingValue, hasValue, cssDisplayFlex])

It's scary to write this code. Furthermore, it will be normal in our codebase and messed up. 😱🤮

Where do effects go?

React 18 runs effects twice on the mount (in strict mode). Mount/effect (╯°□°)╯︵ ┻━┻ -> Unmount (simulated)/cleanup ┬─┬ /( º _ º /) -> Remount/effect (╯°□°)╯︵ ┻━┻

Should it be placed outside of the component? The default useEffect? Uh... awkward. Hmm... 🤔 We couldn't put it in render since it should be no side-effects there because render is just like the right-hand of a math equation. It should be only the result of the calculation.

What is useEffect for?

Synchronization

useEffect(() => {
  const sub = createThing(input).subscribe((value) => {
    // do something with value
  })

  return sub.unsubscribe
}, [input])

// Detect dark theme var iframe = document.getElementById('tweet-1501737272999301121-474'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1501737272999301121&theme=dark" }

useEffect(() => {
  const handler = (event) => {
    setPointer({ x: event.clientX, y: event.clientY })
  }

  elRef.current.addEventListener('pointermove', handler)

  return () => {
    elRef.current.removeEventListener('pointermove', handler)
  }
}, [])

Action effects vs Activity effects

 Fire-and-forget            Synchronized
 (Action effects)        (Activity effects)

        0              ----------------------       ----------------- - - -
        o              o   |     A   |      o       o     | A   |   A
        o              o   |     |   |      o       o     | |   |   |
        o              o   |     |   |      o       o     | |   |   |
        o              o   |     |   |      o       o     | |   |   |
        o              o   |     |   |      o       o     | |   |   |
        o              o   |     |   |      o       o     | |   |   |
        o              o   V     |   V      o       o     V |   V   |
o-------------------------------------------------------------------------------->
                                       Unmount      Remount

Where do action effects go?

Event handlers. Sorta.

<form
  onSubmit={(event) => {
    // 💥 side-effect!
    submitData(event)
  }}
>
  {/* ... */}
</form>

There is excellent information in Beta React.js. I recommend reading it. Especially the "Can event handlers have side effects?" part.

Absolutely! Event handlers are the best place for side effects.

Another great resource I want to mention is Where you can cause side effects

In React, side effects usually belong inside event handlers.

If you've exhausted all other options and can't find the right event handler for your side effect, you can still attach it to your returned JSX with a useEffect call in your component. This tells React to execute it later, after rendering, when side effects are allowed. However, this approach should be your last resort.

"Effects happen outside of rendering" - David Khoursid.

(state) => UI
(state, event) => nextState // 🤔 Effects?

UI is a function of the state. As all the current states are rendered, it will produce the current UI. Likewise, when an event happens, it will create a new state. And when the state changes, it will build a new UI. This paradigm is the core of React.

When do effects happen?

~~Middleware? 🕵️ Callbacks? 🤙 Sagas? 🧙‍♂️ Reactions? 🧪 Sinks? 🚰 Monads(?) 🧙‍♂️ Whenever? 🤷‍♂️~~

State transitions. Always.

(state, event) => nextState
          |
          V
(state, event) => (nextState, effect) // Here

Where do action effects go? ~~Event handlers.~~ State transitions.

Which happen to be executed at the same time as event handlers.

We Might Not Need an Effects

We could use useEffect because we don't know that there is already a built-in API from React that can solve this problem.

Here is an excellent resource to read about this topic: You Might Not Need an Effect

We don't need useEffect for transforming data.

useEffect ➡️ useMemo (even though we don't need useMemo in most cases)

const Cart = () => {
  const [items, setItems] = useState([])
  const [total, setTotal] = useState(0)

  useEffect(() => {
    setTotal(items.reduce((total, item) => total + item.price, 0))
  }, [items])

  // ...
}

Read and think about it again carefully 🧐.

const Cart = () => {
  const [items, setItems] = useState([])
  const total = useMemo(() => {
    return items.reduce((total, item) => total + item.price, 0)
  }, [items])

  // ...
}

Instead of using useEffect to calculate the total, we can use useMemo to memoize the total. Even if the variable is not an expensive calculation, we don't need to use useMemo to memoize it because we're basically trading performance for memory.

Whenever we see setState in useEffect, it's a warning sign that we can simplify it.

Effects with external stores? useSyncExternalStore

useEffect ➡️ useSyncExternalStore

❌ Wrong way:

const Store = () => {
  const [isConnected, setIsConnected] = useState(true)

  useEffect(() => {
    const sub = storeApi.subscribe(({ status }) => {
      setIsConnected(status === 'connected')
    })

    return () => {
      sub.unsubscribe()
    }
  }, [])

  // ...
}

✅ Best way:

const Store = () => {
  const isConnected = useSyncExternalStore(
    // 👇 subscribe
    storeApi.subscribe,
    // 👇 get snapshot
    () => storeApi.getStatus() === 'connected',
    // 👇 get server snapshot
    true
  )

  // ...
}

We don't need useEffect for communicating with parents.

useEffect ➡️ eventHandler

❌ Wrong way:

const ChildProduct = ({ onOpen, onClose }) => {
  const [isOpen, setIsOpen] = useState(false)

  useEffect(() => {
    if (isOpen) {
      onOpen()
    } else {
      onClose()
    }
  }, [isOpen])

  return (
    <div>
      <button
        onClick={() => {
          setIsOpen(!isOpen)
        }}
      >
        Toggle quick view
      </button>
    </div>
  )
}

📈 Better way:

const ChildProduct = ({ onOpen, onClose }) => {
  const [isOpen, setIsOpen] = useState(false)

const handleToggle = () => {
  const nextIsOpen = !isOpen;
  setIsOpen(nextIsOpen)

  if (nextIsOpen) {
    onOpen()
  } else {
    onClose()
  }
}

  return (
    <div>
      <button
        onClick={}
      >
        Toggle quick view
      </button>
    </div>
  )
}

✅ Best way is to create a custom hook:

const useToggle({ onOpen, onClose }) => {
  const [isOpen, setIsOpen] = useState(false)

  const handleToggle = () => {
    const nextIsOpen = !isOpen
    setIsOpen(nextIsOpen)

    if (nextIsOpen) {
      onOpen()
    } else {
      onClose()
    }
  }

  return [isOpen, handleToggle]
}

const ChildProduct = ({ onOpen, onClose }) => {
  const [isOpen, handleToggle] = useToggle({ onOpen, onClose })

  return (
    <div>
      <button
        onClick={handleToggle}
      >
        Toggle quick view
      </button>
    </div>
  )
}

We don't need useEft for initializing global singletons.

useEffect ➡️ justCallIt

❌ Wrong way:

const Store = () => {
  useEffect(() => {
    storeApi.authenticate() // 👈 This will run twice!
  }, [])

  // ...
}

🔨 Let's fix it:

const Store = () => {
  const didAuthenticateRef = useRef()

  useEffect(() => {
    if (didAuthenticateRef.current) return

    storeApi.authenticate()

    didAuthenticateRef.current = true
  }, [])

  // ...
}

➿ Another way:

let didAuthenticate = false

const Store = () => {
  useEffect(() => {
    if (didAuthenticate) return

    storeApi.authenticate()

    didAuthenticate = true
  }, [])

  // ...
}

🤔 How if:

storeApi.authenticate()

const Store = () => {
  // ...
}

🍷 SSR, huh?

if (typeof window !== 'undefined') {
  storeApi.authenticate()
}
const Store = () => {
  // ...
}

🧪 Testing?

const renderApp = () => {
  if (typeof window !== 'undefined') {
    storeApi.authenticate()
  }

  appRoot.render(<Store />)
}

We don't necessarily need to place everything inside a component.

We don't need useEffect for fetching data.

useEffect ➡️ renderAsYouFetch (SSR) or useSWR (CSR)

❌ Wrong way:

const Store = () => {
  const [items, setItems] = useState([])

  useEffect(() => {
    let isCanceled = false

    getItems().then((data) => {
      if (isCanceled) return

      setItems(data)
    })

    return () => {
      isCanceled = true
    }
  })

  // ...
}

💽 Remix way:

import { useLoaderData } from '@renix-run/react'
import { json } from '@remix-run/node'
import { getItems } from './storeApi'

export const loader = async () => {
  const items = await getItems()

  return json(items)
}

const Store = () => {
  const items = useLoaderData()

  // ...
}

export default Store

⏭️🧹 Next.js (appDir) with async/await in Server Component way:

// app/page.tsx
async function getData() {
  const res = await fetch('https://api.example.com/...')
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.

  // Recommendation: handle errors
  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 Page() {
  const data = await getData()

  return <main></main>
}

⏭️💁 Next.js (appDir) with useSWR in Client Component way:

// app/page.tsx
import useSWR from 'swr'

export default function Page() {
  const { data, error } = useSWR('/api/data', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>

  return <div>hello {data}!</div>
}

⏭️🧹 Next.js (pagesDir) in SSR way:

// pages/index.tsx
import { GetServerSideProps } from 'next'

export const getServerSideProps: GetServerSideProps = async () => {
  const res = await fetch('https://api.example.com/...')
  const data = await res.json()

  return {
    props: {
      data,
    },
  }
}

export default function Page({ data }) {
  return <div>hello {data}!</div>
}

⏭️💁 Next.js (pagesDir) in CSR way:

// pages/index.tsx
import useSWR from 'swr'

export default function Page() {
  const { data, error } = useSWR('/api/data', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>

  return <div>hello {data}!</div>
}

🍃 React Query (SSR way:

import { getItems } from './storeApi'
import { useQuery } from 'react-query'

const Store = () => {
  const queryClient = useQueryClient()

  return (
    <button
      onClick={() => {
        queryClient.prefetchQuery('items', getItems)
      }}
    >
      See items
    </button>
  )
}

const Items = () => {
  const { data, isLoading, isError } = useQuery('items', getItems)

  // ...
}

⁉️ Really ⁉️ What should we use? ~~useEffect?~~ useQuery? useSWR?

or... just use() 🤔

use() is a new React function that accepts a promise conceptually similar to await. use() handles the promise returned by a function in a way that is compatible with components, hooks, and Suspense. Learn more about use() in the React RFC.

function Note({ id }) {
  // This fetches a note asynchronously, but to the component author, it looks
  // like a synchronous operation.
  const note = use(fetchNote(id))
  return (
    <div>
      <h1>{note.title}</h1>
      <section>{note.body}</section>
    </div>
  )
}

Fetching in useEffect problems

🏃‍♂️ Race conditions

🔙 No instant back button

🔍 No SSR or initial HTML content

🌊 Chasing waterfall

Reddit, Dan Abramov

Conclusion

From fetching data to fighting with imperative APIs, side effects are one of the most significant sources of frustration in web app development. And let's be honest, putting everything in useEffect hooks only helps a little. Thankfully, there is a science (well, math) to side effects, formalized in state machines and statecharts, that can help us visually model and understand how to orchestrate effects, no matter how complex they get declaratively.

Resources

Cardus App - Open Source Personal Warehouse Management App

Imamuzzaki Abu Salam — Wed, 07 Dec 2022 10:03:56 +0000

What I built

Cardus is a web app that allows users to create and manage their own warehouse of items. Users can add items to their warehouse, and easily identify what box is storing what item. Users can also share their warehouse or box with other users, allowing them to collaborate together.

Category Submission: Google Cloud Superstar

App Link

Web: https://cardus.vercel.app/

Screenshots

Description

Cardus App is a web app project to challange the boundry of web development for mobile user. The app is built with Next.js, a React framework, and deployed on Vercel. The app is also a PWA, which means it can be installed on mobile devices. The app also uses Trusted Web Activity, which allows the app to be installed on Android devices. The app also uses Google Cloud Platform to store images, and to run TensorFlow.js models to auto detect objects in item images.

I want the app to be seamlessly like native app, there are onboarding screen, beautiful transition, and smooth animations. The app also has a dark mode, which is a must for any modern app.

Link to Source Code

Cardus App: GitHub Repository

Permissive License

Apache-2.0 license

Background

⚡ Problem

My initial intention was just to help me manage the items stored in my parents' house. Because there they store things in cardboard boxes, and unfortunately when we need something, we forget where we put the things, so we look for them one by one and rearrange them whether we manage to find them or not.

I really don't like a lot of work that doesn't produce results, so I created this application so that we work a little but make sure we can find the items we need.

Difficult to label the storage box
Hard to know where is the storage box
Hard to know what items are in which storage

It's challenging to manage personal warehouse/storage

💡 Solution

Create a web app that allows users to create and manage their own warehouse of items
Users can add items to their warehouse, and easily identify what box is storing what item
Users can also share their warehouse or box with other users, allowing them to collaborate together

How I built it

📚 Tech Stack:

Next.js
React
MongoDB
Google Cloud Platform
TensorFlow.js
PWA
Trusted Web Activity

📖 The Process:

We started by creating a Next.js app, and then we created a MongoDB Atlas cluster. We wanted to easily communicate with MongoDB, so we also using ORM with Prisma. Mobile web app is our focus here, so we don't care about the desktop at first. We make it a PWA, a bottom navigation bar, top bar, and a dark mode. We also planning to make it a Trusted Web Activity, so we can install it on Android devices.

There are a lot of problem we're facing along the way. Using Google Cloud Storage API with serverless function is not easy, just by using this, we already facing a bunch of obstacles. Some can be solved by reading a forum and some just need a workaround to deal with. User love something smart, so we also want to make the app smart. We want to make the app able to detect the object in the image, so we use TensorFlow.js to do that. We also want to make the app able to scan the QR code, so we use ZXing to do that.

📝 What I learned:

How to use Next.js to build a web app
How to use MongoDB Atlas to store data
How to use Google Cloud Platform to store images
How to use TensorFlow.js to run models in the browser
How to use PWA to make the app installable
How to use Trusted Web Activity to make the app installable on Android devices

Additional Resources/Info

Big O Notation in JavaScript

Imamuzzaki Abu Salam — Mon, 21 Nov 2022 07:39:01 +0000

Big O Notation, collectively called Bachmann-Landau notation or asymptotic notation, is a way to describe the performance of an algorithm. It is used to describe the worst-case scenario of an algorithm. It is used to compare the performance of different algorithms. It describes the implementation of an algorithm in terms of the input size.

Big O notation characterizes functions according to their growth rates: tasks with the same growth rate are considered to be of the same order. It is a mathematical notation that describes the limiting behavior of a function when the argument tends towards a particular value or infinity. It is used to classify algorithms according to how their run time or space requirements grow as the input size grows. The letter O is used because the growth rate of a function is also called its order.

Iteration