Forem: Ivad Yves HABIMANA

2. Why do we add @Module() on the Nest.js app module?

Ivad Yves HABIMANA — Mon, 03 Nov 2025 11:28:40 +0000

This article is part of the Nest.js Deep Dive Series. I recommend reading the previous article first to make following along easier.
You can find the code described in the article HERE

In the previous article, we introduced Nest.js, explained what it is, and created a simple Nest application in JavaScript.

Here is the code we currently have

import { NestFactory } from "@nestjs/core";

class AppModule {} // Just an empty class for now

const bootstrapp = async () => {
  const app = await NestFactory.create(AppModule); // we create the app with our module
  await app.listen(3000);
};

bootstrapp();

At this point, we are calling await NestFactory.create() and passing in AppModule to create our Nest.js application. The AppModule is currently just an empty class, so the code runs but doesn’t actually do anything.

In this article, we’ll take a closer look at what the AppModule is and how it’s supposed to work.

Nest.js Modules

According to the official Nest documentation

A module is a class that is annotated with the @Module() decorator. This decorator provides metadata that Nest uses to efficiently organize and manage the application structure.

But what does this really mean? Let’s break it down into simpler terms.

First, a module is a class
In the previous article, we initialized a Nest application by calling the NestFactory.create() function. This function expects a Nest.js module, which is why we were able to pass an empty class—it worked because, at its core, a module is a class.

However, a module is not just any class. The definition says, “A module is a class that is annotated with the @Module() decorator.”

This a@Module() decorator is what makes it special. It adds extra metadata that Nest internally uses to organize and manage the application structure.

To really understand this, we first need to understand what a decorator is.

What is a decorator?

At a high level, a decorator is a function that wraps another function, class, or method to add extra behavior to it, without modifying its original code.

source: https://www.telerik.com/blogs/decorators-in-javascript

Let's take a real-life example

We decorate things because we want them to look or behave differently. For example, you might take a plain box and wrap it in gift paper to turn it into a Christmas present. 🎁
In this case, the box hasn’t changed; it’s just been decorated to serve a new purpose as a gift container.

Another example is when someone uses lipstick for makeup; they are decorating their lips to make them have a different look

Notice that by decorating something, we don’t change its original structure. This gives us flexibility—we can apply or remove decorations as we like. Lipstick, for example, doesn’t permanently alter someone’s lips (it would be weird if they did 😁); they can always apply a different makeup style later.

Now let’s see this concept in code

class Box {
  constructor() {
    this.color = "white";
  }
}

We define a box that has a white color

function GiftContainer(color){
  return function (target){
    target.coverColor = color
  } 
}

We define a decorator GiftContainer that takes a cover color and applies it to the given "target" class

Here is the full code example

function GiftContainer(color) {
  return function (target) {
    target.coverColor = color;
  };
}

@GiftContainer("red")
class Box {
  constructor() {
    this.color = "white";
  }
}

const birthdayBox = new Box();

console.log(birthdayBox.coverColor); // Outputs "red"

We use the @ syntax to apply the decorator. It calls the GiftContainer function and passes the Box class as its target.

The real power of decorators comes from separating enhancement logic from the original implementation.

In Nest.js, for example, you might have the following code:

@Controller('')
class UserController(...)

Depending on how @Controller is implemented, applying it to UserController adds extra information and behavior that Nest can recognize internally to make your application work.

Using Decorators in our JavaScript Nest.js application

Now that we have a basic understanding of how decorator works, let’s integrate them into our Nest.js app from the previous article.

Note:
Currently, JavaScript doesn’t officially support decorator syntax—it’s still considered experimental. However, we can use Babel, a JavaScript transpiler, to enable decorators even before they become a standard feature.

Let's install the necessary Babel dependencies

npm install @babel/core @babel/cli @babel/plugin-proposal-decorators

@babel/core includes the base functionality that Babel needs to work
@babel/cli: Allow us to use Babel via command line (terminal)
@babel/plugin-proposal-decorators: Now the package that will allow us to use decorators.

After installing, we need to configure Babel so it recognizes our setup.

Create a file called babel.config.json paste the following configuration

// babel.config.json

{
  "plugins": [["@babel/plugin-proposal-decorators", { "version": "2023-05" }]]
}

This tells Babel that we’re using the decorators plugin (the one we just installed) and specifies the version we’re targeting (the latest one as of now)

Next, we need to update or start the script so Babel compiles our code before Node runs it:

// package.json

"scripts": {
  "start": "babel index.js -d dist && node dist/index.js"
}

Now our start script first runs Babel to compile index.js and output the result in a dist folder. Once that’s done, Node runs the compiled version (dist/index.js).

Now if you run npm start, our app should work as before, but now with Babel in place to support decorators.

Back to Our Module

Let’s revisit the definition of a module:

A module is a class annotated with a @Module() decorator. The @Module() decorator provides metadata that Nest makes use of to organize the application structure.

With our new understanding of decorators, we can guess what @Module() is doing; it wraps a class and attaches metadata that Nest uses internally to link different parts of the app together.

With our new knowledge of decorator, we can have an idea of what @Module() must be doing, it will wrap a class and provide some metadata that Nest will use internally to know which parts of the application are related. Let’s see this in action

We updated our application to be like the following

import { Module } from "@nestjs/common";
import { NestFactory } from "@nestjs/core";

@Module({})
class AppModule {}

const bootstrapp = async () => {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
};

bootstrapp();

Here, we imported the @Module decorator and applied it to our AppModule class.
We’re passing an empty object for now, since @Module() expects metadata—such as which controllers or providers belong to this module—but we haven’t added any yet.

You can have multiple modules in a Nest.js application, but you need at least one root module to initialize the app. The module passed into NestFactory.create() is known as the root module.

Now, if you run npm start again, your Nest application should start up just as before—only this time, it’s using proper module structure.

1. Set up a Nest.js application in Node.js from scratch

Ivad Yves HABIMANA — Fri, 22 Aug 2025 14:37:30 +0000

Hi reader!
Welcome to the "Nest.js Deep Dive" series. In this series, we’ll explore the internals of Nest.js to understand how it works and how you can start using it to build your backend applications.

We’ll begin with the complete basics and gradually build strong mental models that will give you confidence when developing your next Nest.js project.

I created this series after doing a lot of research and realizing that there weren’t enough resources that go deep into the framework for people starting. Most tutorials jump straight into practical usage without first building a strong foundation for beginners. This series is the resource I wish I had when I was learning Nest.js myself.

You can find the code discussed in this article HERE
Let’s get started...

What is Nest.js

According to the Nest.js documentation:

“Nest (NestJS) is a framework for building efficient, scalable Node.js server-side applications.”

Let’s break down this simple definition to understand what it means:

Nest.js as a framework: A framework is a foundational structure you can build software on, so you’re not starting entirely from scratch. Since Nest.js is a framework, it “forces” its users to structure their code in a predefined way, making it easier to maintain, test, and reason about.
.
Server-side application: Nest.js is built with Node.js to create applications that run on the server.

Let's talk a bit more about building a server-side application

The term "server" can mean different things depending on context. Sometimes it refers to a "physical computer" that provides resources to other computers (clients). Other times, it refers to the "software application" running on that machine for handling requests and sending back responses.

For example, when you open a profile page on Facebook, your browser sends a request to Facebook’s servers (the machines). On those servers, a "web server application" processes the request and responds with the page you see.

Nest.js and Express.js

Another popular framework for building web servers in Node.js is Express.js. In fact, under the hood, Nest.js uses Express (or similar frameworks) to simplify the process of creating server-side applications.

The main difference between the two is that Nest.js is opinionated, while Express is unopinionated. This means the creators of Nest.js have strong "opinions" and a set of best practices for how backend code should be organized and written. With Express, however, you are free to define your own structure and approach.

Enough with the words, let's start writing some code...

Creating the simplest Nest.js application

Usually, to create a Nest.js application, we use the Nest CLI. The CLI sets up and configures most of the boilerplate for you, giving you a working application in seconds.

The downside is that it works like magic; we don’t get to see what’s happening under the hood. In this article, we’ll create the base files ourselves. For simplicity, we’ll start by using Nest.js in a JavaScript environment.

Note: Nest.js uses and recommends TypeScript. We are only using JavaScript here for learning purposes. Later in the series, we’ll discuss using TypeScript and the CLI to simplify development once we understand the basics.

Set up a new Node.js application

npm init -y

Installing the required dependencies:

npm i --save @nestjs/core @nestjs/common @nestjs/platform-express rxjs reflect-metadata

Understanding the packages we just installed

@nestjs/core: This is the core package that includes essential functionalities and the environment needed to run a Nest application.
@nestjs/common: This contains elements commonly used across a Nest application, such as controller decorators and HTTP handling logic (we’ll cover this in detail later).
@nestjs/platform-express: Since Nest is built on top of Express, this package enables seamless integration between Nest and Express.
rxjs: Nest uses rxjs internally to handle asynchronous tasks and allow reactive programming, such as processing incoming requests or managing data flows.
reflect-metadata: This package allows Nest to attach additional metadata to classes and functions, which is required for decorators (we’ll explain decorators later in the series).

Initializing the Nest application

Create an index.js file and add the following piece of code

import { NestFactory } from "@nestjs/core";

const bootstrapp = async () => {
  const app = await NestFactory.create(); // creating the app
  await app.listen(3000); // listening on Port 3000
};

bootstrapp();

Running the code above with node index.js will cause an error because NestFactory.create() expects arguments, which we haven’t passed yet.

Even though the code will throw an error, let’s take a moment to understand what’s happening here:

We are importing the NestFactory object from the @nestjs/core package. As the name “factory” suggests, this object contains methods required to create a Nest application.
.
We define a function called bootstrap that initializes (or "bootstraps") a new Nest application by calling NestFactory.create(). This method returns a promise that resolves to the app object, so we await it to get the actual application instance.
.
From the app object, we call the listen method and tell it to listen on port 3000. This means any requests sent to port 3000 will be handled by our Nest application.

Now let’s fix our NestFactory.create() error

The NestFactory.create() method expects at least one argument, which is the root module of our application. For now, don’t worry too much about what a module is. At a high level, a module is simply a class that holds information about the available controllers, services (we’ll talk about these later), and other application logic. You can think of it as the "root of our application logic".

To keep things simple, we can just create a basic plain JavaScript class with nothing inside it for now, just to make NestFactory.create() stop crying 😂

Update the code in index.js to be the following

import { NestFactory } from "@nestjs/core";

class AppModule {} // Just an empty class for now

const bootstrapp = async () => {
  const app = await NestFactory.create(AppModule); // we create the app with our module
  await app.listen(3000);
};

bootstrapp();

That’s it, that’s the simplest Nest application you can create in JavaScript :). If you try to open http://localhost:3000 in the browser or something like Postman, you should get an error that looks like

{
    "message": "Cannot GET /",
    "error": "Not Found",
    "statusCode": 404
}

This is because we have not implemented any endpoint, but at least our web server application is up and running and responding to requests.

In the next article we will, we will build on our current progress go deep into Nest.js Module

See you next...

Building Jira apps with Atlassian Forge | A tutorial series for beginners

Ivad Yves HABIMANA — Mon, 01 Jan 2024 21:11:47 +0000

Hi reader!
Welcome to this article series where we will learn about building Jira apps with the Atlassian Forge platform.
I will be working with Forge, and during my research about it, I noticed that the community and resources about this topic are limited especially for a beginner getting started with it.

I am creating this series for me and anyone getting started with creating Jira applications as a learning resource that dives deeper into the basics and provides hands-on practice through a project we will be developing throughout the series.

In this first article, we will be answering some questions about what Jira and Forge are and why you should use them.

What is Jira

Jira is a powerful project management software developed by Atlassian that enables its users to plan, track, and manage their projects or product progress to deliver value efficiently.

With Jira features, you can have one big project to work on and divide it into smaller tasks that can be worked on sequentially by different people collaborating.

This is enough introduction to Jira for now we will get back to the topic later in the series, but you can learn more about Jira software Here

What is Atlassian Forge

Atlassian Forge is a cloud-based platform created by Atlassian to allow developers to build applications that integrate or interact with Atlassian products (including Jira).

For example, you are using Jira to manage your project and you realize that there is a feature you need that Jira does not provide by default.
Forge allows you to extend and customize Atlassian products beyond what's provided out of the box.
You can think of these applications as Chrome extensions that add new functionality to what the browser offers by default, and Forge as a set of tools that Atlassian provided for us to make the process of creating those applications easier

You may need to bookmark Forgse documentation as we will be referring to it a lot in the series.

In this series, we will learn the basics of Atlassian Jira and Forge from scratch, along the way we will also create an application as a project to apply our knowledge.

Now that we have an idea of what Jira and Forge are, in the next article, we will look into creating our first Jira project and Forge application

See you there...

Customizing Swiper.js prev/next arrow buttons and pagination bullets in React

Ivad Yves HABIMANA — Sat, 08 Apr 2023 18:24:12 +0000

I was working on an image carousel using the Swiper.js library in a React project and I had a hard time customizing the navigation buttons and pagination bullets to match my design,
luckily after some long research, I was able to find a solution which I am going to share with you in today's article.

In this guide, we will set up Swiper in React using the Swiper Elements (WebComponents) and after getting Swiper to work, we will customize the navigation arrows and pagination bullets using custom CSS.

Prerequisites

A Working React project: to keep things short I will start with a React project already set therefore to follow along you will need to have a React project already set up.

I will be using Vite to set up the React project using this guide but you can also use create-react-app or any other way you want.

You can find the React setup I will be using in HERE

A code editor: I will be using Visual Studio Code but feel free to use any editor of your preference.
Since this is a React guide I am assuming prior basic experience working with JavaScript and React applications.

That's all you need Let's get started

1. Installing Swiper

Swiper JS is a library used to create sliders for web and mobile devices and it can integrate well with Vanilla JavaScript, React, Vue, and Web components

You can install Swiper by running the following command in the terminal

# For npm
npm install swiper
# For yarn
yarn add swiper
# For pnpm
pnpm install swiper

This will install the Swiper package which will allow us to write the swipe logic.

Configuring Swiper in React

In many tutorials and articles, you will find Swipe being used in React by using Swiper React components like the following.

import { Swiper, SwiperSlide } from 'swiper/react'; // don't use this

According to the swiper documentation, this way is no longer recommended as Swiper React components are likely to be removed in the future.
Swiper recommends using their Web components instead and that's what we will be using.

Web components
Web Components are a set of standardized technologies that allow developers to create and use reusable custom elements in web applications. Web components will allow you to write your own HTML elements and easily reuse them without using a framework.

For example, with Web components, you can create your own element like <validated-input> which takes the normal HTML input and add CSS and JavaScript to it so that whenever used it will come with validation, error messages, and styles out of the box. For more information about Web components check the following article.

Swiper has created their own custom elements that are preconfigured to provide the swiping logic out of the box with a syntax that looks like you are writing normal HTML

Create a file called MySwiper.jsx and add the following code

import { register } from "swiper/element/bundle";
register();

const MySwiper = () => {
  return (
    <swiper-container navigation="true" pagination="true">
      <swiper-slide class="blue-slide">Slide 1</swiper-slide>
      <swiper-slide class="yellow-slide">Slide 2</swiper-slide>
      <swiper-slide class="green-slide">Slide 3</swiper-slide>
    </swiper-container>
  );
};

export default MySwiper;

In the top two lines, we are importing the register function from the swiper package which allows us to use the Swiper element in our component, and we register them by invoking the register() function.

The <swiper-container> is the Swiper custom element (Web component) which is used as the wrapper (parent) of our Swiper slides
The navigation = "true" attribute is used to add navigation arrows so that we can navigate between slides.
The pagination="true" attribute is used to add the pagination bullets which indicates the slide we are currently on.
The swiper-slide is another swiper custom element that creates individual slide
The class attribute is the same as a normal HTML class used to add CSS styles to the element.Notice that we are using class not className even if it's in React (you can read more about using web components in React projects in The React documentation).

I am using those classes (blue-slide, yellow-slide, and green-slide) to add different background colors for each slide. and centering the slide label text. You can find the current CSS HERE

After adding those styles and importing MySwiper component in the entry of the app you should have the following results in the browser.

As you may have noticed the color of the current navigation buttons is not clear and the pagination bullets are too small to see therefore we need to customize them.

By default, swiper provides the following CSS classes

swiper-pagination-bullet: for styling pagination bullets
swiper-pagination-bullet-active: for styling the active pagination bullet
.swiper-button-next: for styling the next (right) navigation arrow
.swiper-button-prev: for styling the previous (left) navigation arrow

But the catch here is that trying to add our custom CSS to these classes directly from our CSS files will not work because the web components are kind of isolated in their own DOM therefore our CSS styles may not be able to reach them.

To add custom styles we will need to inject styles directly into the component itself and we will use React refs for it.

Update MySwiper component to be like the following

import { useEffect, useRef } from "react";
import { register } from "swiper/element/bundle";
register();

const MySwiper = () => {
  const swiperRef = useRef(null);

  useEffect(() => {
    const swiperContainer = swiperRef.current;
    const params = {
      navigation: true,
      pagination: true,
    };

    Object.assign(swiperContainer, params);
    swiperContainer.initialize();
  }, []);

  return (
    <swiper-container ref={swiperRef} init="false"> 
      <swiper-slide class="blue-slide">Slide 1</swiper-slide>
      <swiper-slide class="yellow-slide">Slide 2</swiper-slide>
      <swiper-slide class="green-slide">Slide 3</swiper-slide>
    </swiper-container>
  );
};

export default MySwiper;

This is the exact same configuration we had earlier but we changed the way we are accessing the swiper container.

First we introduced the React useRef hook, which is allowing us to access the swiper container DOM node. We are using useEffect in this process to access the swiper container after React has finished rendering the page (so that it will not be null) You can read more about manipulating the DOM with refs HERE
We created the params object and we moved the navigation and pagination configurations we had earlier there. From now on all customizations to our swiper will live in this object.
After defining our swiper configurations we copy them to the swiper container using the Object.assign() method
Notice how we added the attribute init="false" to make sure that the swiper will not render before have applied our custom configuration.
swiperContainer.initialize(): we finally initialize the swiper after applying our configurations.

Adding custom styles

The Swiper container receives another property injectStyles which is an array of strings where each string will contain CSS styles to apply on Swiper elements

To apply the custom styles add the following changes (I am only mentioning a part of the previous file that I changed everything else stays the same)

  useEffect(() => {
    const swiperContainer = swiperRef.current;
    const params = {
      navigation: true,
      pagination: true,
      // These are new...
      injectStyles: [
        `
          .swiper-button-next,
          .swiper-button-prev {
            background-color: white;
            padding: 8px 16px;
            border-radius: 100%;
            border: 2px solid black;
            color: red;
          }
          .swiper-pagination-bullet{
            width: 40px;
            height: 40px;
            background-color: red;
          }
      `,
      ],
    };

    Object.assign(swiperContainer, params);
    swiperContainer.initialize();
  }, []);

We just introduced custom styles where we are targeting both the next and prev buttons (using the CSS classes I mentioned earlier) and add change their color to red and adding the white circled background with a black border.

On the pagination bullet, we are increasing the width and height to be 40px and changing their color to be red

After applying these changes you should have the following results in the browser

You can find the current progress in this Github repo

Bonus

What if you want to change the arrows and use completely custom ones? You can achieve this using the following code

  useEffect(() => {
    const swiperContainer = swiperRef.current;
    const params = {
      navigation: true,
      pagination: true,
      //add this
      injectStyles: [
        `
          .swiper-button-next,
          .swiper-button-prev {
            background-color: white;
            background-position: center;
            background-size: 40px;
            background-repeat: no-repeat;
            padding: 8px 16px;
            border-radius: 100%;
            border: 2px solid black;
            color: red;
          }

          .swiper-button-prev {
            background-image: url("/box-arrow-in-left.svg");
          }

          .swiper-button-next {
            background-image: url("/box-arrow-in-right.svg");
          }

          .swiper-button-next::after,
          .swiper-button-prev::after {
            content: "";
          }

          .swiper-pagination-bullet{
            width: 40px;
            height: 40px;
            background-color: red;
          }
      `,
      ],
    };

    Object.assign(swiperContainer, params);
    swiperContainer.initialize();
  }, []);

We are giving the next and prev buttons their custom svg icons (I downloaded the svg icons added them in the public folder of the project) by setting them as the background image and removing background-repeat and setting the background size and background-position.

 .swiper-button-next::after,.swiper-button-prev::after {
    content: "";
 }

This part is for hiding the default icons provided by Swiper itself since we are using our custom icons

Here is the result after adding custom arrows

And that's it, that's how you customize the navigation buttons and pagination bullets using Swiper web components. Hope this helps.

You can find the final code in the Github Repo

Day 160: Fighting with Swiper JS

Ivad Yves HABIMANA — Sun, 05 Feb 2023 21:47:09 +0000

Hi!
Today was all about fighting with Swiper JS. Swiper JS is a package used to create sliders for mobile and the web and today I was using it to implement a design but I had a hard time getting it to work and customizing it the way I wanted

Initially getting it working was quite straight forward but after it was working I tried to customize it to match the design I was working with but the styles were not working no matter what I tried to do. After long research, I found something that worked which still feels like a hack even though it is the recommended way from their docs. I was so irritated with this to the extent I started to work on an extended blog this that I will share soon

It was a good experience though I learned a lot about Swiper itself and also about fighting with CSS therefore I declare today as a success. Hopefully, the following week will be too

Signing off...

Day 159: A project never ends

Ivad Yves HABIMANA — Sat, 04 Feb 2023 22:42:49 +0000

"A project never ends" that's what they say means that there will always something to fix on a project even after it reaches production and starts being used by real people. But why really project never ends? why even the best team can not deliver a simple project

Speaking from my own experience the moment you have something solid to present everyone will start feeling accomplished and that whatever they had been doing is no longer motivating or fun to do. But in reality, at that exact, that's when you need to invest more time and energy to push the working hustle because at the end of the day, delivery is the most important thing

I have learned this through a lot of mistakes and deadlines not met but it's very important and something I will be working on to improve for my future work

signing off...

Day 158: Deep research day

Ivad Yves HABIMANA — Thu, 02 Feb 2023 20:17:43 +0000

Hi!
I usually update my journal in the mornings and today I woke up too late to write so I am writing the night which sounds weird as it is almost the next day. but yesterday was a research day I was going through things here and there diving through the rabbit hole of the internet and discovering a lot of content along the way.
I looked into 3d animations, Vue js, Vite, and different open-source projects. I really love and enjoy these research sessions because I always discover new things to learn and some interesting projects from very smart people on the internet I may be learning Vue JS sometime soon (who knows)

About the blog I said I will publish, I lied I was too lazy to write yesterday but it is planned and I know I will do it I just need to push myself more and spare some time for it but for now that was the status

Signing off...

Day 157: All over the place

Ivad Yves HABIMANA — Wed, 01 Feb 2023 06:10:02 +0000

Hi!
Yesterday was a bit of a mess, I can't even recall what I did (probably because I didn't do much :) I did some style refactoring and responsiveness fix for the page I was working on but other than that I was just sitting around.

I did some reading though! (not a total loser huh :) I want to finish the blog about the Event loop which I plan to release today or tomorrow at the latest as I strive to get back to writing and that would be the focus for today

Day 156: Hello Event loop...

Ivad Yves HABIMANA — Tue, 31 Jan 2023 05:18:23 +0000

Hi!
Yesterday was a good one! I spent it mostly going through JavaScript specifically learning about Event loop which is a crucial part of having asynchronous behaviour in JavaScript which by design is a synchronous single-threaded language.

Generally, JavaScript runs everything one line at a time and every line has to wait for the previous one to complete before it runs but this is not the case in the real-world application as we often want to run multiple things at the same time or don't want to block the program while we wait for this one thing to finish to run

This where asynchronous code and event loop comes into the picture where blocking code is put in the callback queue and the job of the event loop is to moderate the callback/task queue and the program call stack so that blocking code will be able to run when their time comes without blocking the rest of the program

whew! this was not clear enough I know, still much to cover to understand fully how the event loop works in the JavaScript runtime environment. I am preparing a more in-depth blog that will explain more about the topic maybe sometime this week

In the meantime, I am trying to get back in the flow of writing and keep consistency as in the good old days

Signing off for now...

Day 155: I'm back...

Ivad Yves HABIMANA — Mon, 30 Jan 2023 05:12:36 +0000

Hi!
Long time no see!
It's been a while since my last time here. to be precise it's been 141 days (quite a long time) and during this time I had been on another learning adventure but home (here) is the best, and here I am, back to the beginning again.

I stopped (or paused) blogging for a while because I thought I was busy that I would not find time to write but I recently realized that I have forgotten the main reason that I started the blogging challenge in the first place. When I started the main point was to challenge myself to write something about anything every day no matter how unmotivated or busy I thought I was. Just something too simple to avoid doing. And these small short articles I used them to document my learning journey, and stay focused and organized and that's where came motivation for writing tutorials and learned a lot in the process.

when I started I struggled with consistency but after realizing the benefits that come with it I was addicted to it and now I'm Back again, same place, same purpose: Writing daily to improve my coding, writing, and communication skills in general.

During this hibernation time, I had been doing mostly the fronted stuff and deep diving into JavaScript language itself, I got introduced to Next JS and did a lot of Tailwind CSS, and CSS animation. I have a lot to share with the community now and I plan to hustle to write a lot more this year.

See you around!

Signing off

Day 154: 3 days missed

Ivad Yves HABIMANA — Sun, 11 Sep 2022 05:17:50 +0000

Hi!
it's been a while I didn't update the journal for the past three days which is like the first time I missed a day so here is the thing. I radically changed so I couldn't make time on the usual time so I will have to change and pick another time which may be late late in the night or the morning either way I will try to make time for the blog

for the past 3 days I have been heavily working on the frontend cloning websites and implementing designs using plain html and CSS and also Tailwind CSS I have projects to work on which will be the focus for today also

Signing off...

Day 151: just busy

Ivad Yves HABIMANA — Wed, 07 Sep 2022 22:10:56 +0000

Hi!
now busy packing... byee
Signing off...