Building a Daily Coding Habit

Tommy Ju — Fri, 27 Feb 2026 01:49:11 +0000

Introduction

Some weeks, coding feels effortless. I sit down at my computer, open my IDE, and naturally slip into focused work on a project that excites me.

Other weeks, even opening my editor feels heavy. It takes real willpower to concentrate, and I’m overwhelmed by how much there is to learn.

This article is about what I’ve learned from both building momentum and losing it — and how to create a sustainable daily coding habit.

The Long-Term Power of Consistency

"Habits are the compound-interest of self improvement." — James Clear

On any single day, coding might not feel transformative. But over months and years, small repeated actions compound.

Becoming a strong software developer isn’t about intense bursts of effort followed by burnout. It’s about steady, repeatable practice. Consistency beats intensity in the long run.

When coding becomes a habit rather than a heroic effort, progress stops depending on motivation.

How to Make Coding a Daily Habit

Building a daily coding habit is simple in principle: show up every day, no matter how small the effort.

“Showing up” doesn’t always mean writing hundreds of lines of code. It can look like:

Coding for five hours
Coding for five minutes
Reading documentation
Reviewing a codebase
Writing about something you learned
Breaking a feature into smaller tasks
Reflecting on a recent project

Start with tasks that match your energy level. On low-energy days, reduce the scope until it feels almost too easy. If you feel friction, break the task down into even smaller pieces.

Why "Just Showing Up" Works

Many of us focus too much on outcomes: finishing the project, shipping the feature, mastering the framework.

But meaningful change starts deeper — at the identity level.

We act in alignment with who we believe we are. When you show up consistently, even in small ways, you gather evidence that says:

"I am someone who codes."

Identity and behavior reinforce each other.
Your identity influences your actions.
Your actions reinforce your identity.

By coding regularly you strengthen your identity as a developer. And once that identity solidifies, showing up becomes a natural extension of who you are.

The Trap of Perfectionism

Perfectionism used to stop me from starting at all.

If I couldn’t do something perfectly, I didn’t want to do it. I would delay projects because I had high expectations and didn’t want the result to fall short.

But software is inherently iterative. Skills are iterative. Growth is iterative.

Progress requires drafts. Rough drafts. Messy drafts. Broken drafts.

The habit of starting imperfectly is far more powerful than the habit of waiting for perfect conditions.

Conclusion

The hardest part of building a daily coding habit isn’t learning new technologies. It’s learning to show up consistently

Lower the bar. Reduce friction. Accept imperfection.

Focus less on intensity and more on identity.

Because when you show up often enough, coding stops being something you try to do and starts becoming part of who you are.

Making SVGs Customizable with CSS in Next.js (2026)

Tommy Ju — Sat, 21 Feb 2026 00:53:27 +0000

Introduction

Are you confused by SVG icons that refuse to be styled with CSS?

This article will give you a scalable workflow for styling SVG icons in your Next.js project.

We will address the problems of:

CSS properties not applying to static SVG images
Hard-coded attributes within SVG files that overwrite CSS properties

(The steps in this guide are specifically for Next.js v16+ and Typescript, but the concepts also apply to general React projects)

Why CSS Doesn't Work on Static SVGs

When you try to use an SVG like this:

<img src="your_icon.svg" className="icon" />

# or

<Image
    src="your_icon.svg"
    alt="GitHub"
    width={48}
    height={48}
    className="icon"
/>

The SVG is treated as a static external image file, similar to a PNG or JPG. You can resize it, but you cannot style or animate the contents with CSS. The root cause is not the <img> or <Image> tag itself, but the fact that the SVG is being loaded from the public/ directory which is specifically meant for static assets.

Solution

To make our SVGs customizable with CSS, we will convert them to React components using SVGR and move them out of the the /public directory:

Install SVGR as a dev dependency

npm install --save-dev @svgr/webpack
# or use yarn
yarn add --dev @svgr/webpack

Configure SVGR in next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */

  turbopack: {
    rules: {
      "*.svg": {
        loaders: ["@svgr/webpack"],
        as: "*.js",
      },
    },
  },
};

export default nextConfig;

We are using the TurboPack asset bundler which is the fully supported default in Next.js v16.

Use the SVG in your code as follows, you must ensure that the SVG is not stored in /public.

import GithubIcon from "@/icons/github.svg";

export default function ExternalLinks() {

    return (
        <GithubIcon
            width={24}
            height={24}
            className="icon"
        />
    );
}

Congratulations! Your SVG is now a React component rendered in the DOM as JSX, rather than a static file in /public. This makes it fully styleable, interactive, and dynamic.

Cleaning Hard-Coded SVG Attributes that Overwrite CSS

Some SVGs may contain hard-coded attributes that overwrite your CSS styles. In the following image, the LinkedIn icon refuses to be any color other than black.

If you open the SVG file in your text editor, you can confirm this by looking for hard-coded attributes such as fill, stroke, and style:

<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

<!-- Hard-coded fill attribute prevents color changes with CSS -->
<path d="..." fill="#0F0F0F"/>

</svg>

Solution

For smaller projects you can manually replace or remove hard-coded attributes that affect the appearance of the SVG.

However, this may be time consuming if you have many SVG files. Here's how you can automate this process using SVGO.

We will modify the SVG to inherit its color from CSS via the color property, making it compatible with both plain CSS and utility frameworks like Tailwind.

Install SVGO as a dev dependency
```
 npm install -D svgo
```

Create a file in the root directory called svgo.config.js with the following code

module.exports = {
  plugins: [
    {
      name: "preset-default",
      params: {
        overrides: {
          removeViewBox: false, // keep viewBox for proper scaling
        },
      },
    },

    // Remove hard-coded fill, stroke, and style attributes
    {
      name: "removeAttrs",
      params: {
        attrs: "(fill|stroke|style)",
      },
    },

    // Add fill="currentColor" to the root <svg>
    {
      name: "addAttributesToSVGElement",
      params: {
        attributes: [
          { fill: "currentColor" }
        ],
      },
    },
  ],
};

Add a script in package.json for cleaning the SVG files, ensure that the path points to the location where your SVG files are stored
```
"scripts": {
  "clean-icons": "svgo --config=svgo.config.js [PATH_TO_SVG_DIRECTORY]/*.svg"
},
```
Run the script to automatically modify the hard-coded attributes from your SVG files that overwrite your CSS
```
npm run clean-icons
```

Conclusion

By converting your SVGs to React components with SVGR and cleaning hard-coded attributes with SVGO, you can create fully dynamic, styleable, and maintainable icons in Next.js. This workflow ensures your SVGs respond to CSS, support animations, and remain scalable.

Feel free to adapt this workflow to your own projects and share any tips or improvements you discover along the way!

DEV Community: Tommy Ju

Building a Daily Coding Habit

Introduction

The Long-Term Power of Consistency

How to Make Coding a Daily Habit

Why "Just Showing Up" Works

The Trap of Perfectionism

Conclusion

Making SVGs Customizable with CSS in Next.js (2026)

Introduction

Why CSS Doesn't Work on Static SVGs

Solution

Cleaning Hard-Coded SVG Attributes that Overwrite CSS

Solution

Conclusion