Forem: Rinkaku

Switching to C from the Perspective of a Web Developer

Rinkaku — Tue, 18 Feb 2025 14:10:05 +0000

Looking back on my trajectory as a developer, it’s been a slow dive into the hidden depths of tech—from UX designer to Front End Developer, then Backend Developer, and finally to my current role as a Systems and Network Engineer. This year, I finally checked off a major wishlist item: mastering a systems integration language like C. I’m proud to say I’ve made C my main language, a solid gateway to other heavy hitters like C++, Go, and Rust.

This shift is all about personal preference. I craved a role where I wield real power over the computer’s resources, rather than something crafted to immediately dazzle the masses. I wanted to explore C’s simple yet dangerous landscape, where the art of manual memory management and those delightfully arcane algorithms reign supreme. These skills never go out of style and are infinitely more transferable than endlessly rotating between trendy JavaScript frameworks and never quite nailing one. For anyone trying to learn web development on their own, expecting to land a job while still enjoying a life outside work, it’s nothing short of a nightmare.

I don’t regret my intense year immersed in Web Development, though. It taught me commitment, persistence, problem-solving, and the fine art of breaking down colossal tasks into bite-sized challenges. But after wrestling with the torment of npm packages and tangled dependencies, I craved a return to basics: a language that feels unpretentious and honest. Despite clocking countless hours of code, I ended up with so few web projects to show for it, because every time I added one tiny feature, the whole thing would break, leaving me to spend agonizing weekends on bug fixes.

So moving forward, I’m sharing my insights straight from the trenches of systems programming. You could say my JavaScript burnout got so severe that I switched my aspirations, from singing its praises to being downright allergic to it. If you’ve ever felt that same way, consider this an invitation to rethink what it means to truly “control” the machine.

Steps to Add Pagination to Your React TypeScript Project

Rinkaku — Tue, 07 Jan 2025 16:18:05 +0000

With the number of articles both in my portfolio and blogging platform slowly increasing, adding pagination had become increasingly necessary. For the portfolio, pagination improves the viewing comfort for visitors. On the blogging platform, pagination was essential because the layout was not designed to handle more than ten articles at once. In this article, I’ll show you how to implement pagination without requiring changes to the backend.

Create a New Pagination Component

The first step is to create a pagination component that is separate from the parent component. This separation ensures:

Reusability: The component can be reused in other parts of the application or even other projects.
Scalability: Features like a dropdown to select the number of items per page can be added later.

Here’s the code for the Pagination component:

import React from "react";

interface PaginationProps {
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
}

const Pagination: React.FC<PaginationProps> = ({ currentPage, totalPages, onPageChange }) => {
  const handleClick = (page: number) => {
    if (page > 0 && page <= totalPages) {
      onPageChange(page);
    }
  };

  return (
    <div>
      <button
        onClick={() => handleClick(currentPage - 1)}
        disabled={currentPage === 1}
      >
        Previous
      </button>
      {Array.from({ length: totalPages }, (_, index) => (
        <button
          key={index + 1}
          onClick={() => handleClick(index + 1)}
          disabled={currentPage === index + 1}
        >
          {index + 1}
        </button>
      ))}
      <button
        onClick={() => handleClick(currentPage + 1)}
        disabled={currentPage === totalPages}
      >
        Next
      </button>
    </div>
  );
};

export default Pagination;

This component renders three types of buttons:

Previous Page Button: Disabled if the user is on the first page.
Page Number Buttons: Dynamically generated based on the total number of pages.
Next Page Button: Disabled if the user is on the last page.

When a user clicks on any of these buttons, the onPageChange event is triggered and updates the page state in the parent component.

Modify the Parent Component

The parent component handles API calls and manages pagination states. Here are the key steps:

Create State Variables:
currentPage to track the current page.
totalPages to calculate the total number of pages based on the fetched data.

Handle Page Changes:
Update currentPage when a user interacts with the Pagination component.
Dynamically slice the fetched data to display items for the selected page.

Here’s a simplified version of the parent component:

import { useEffect, useState } from "react";
import Container from "react-bootstrap/Container";
import BlogCard from "./BlogCard";
import Pagination from "../../components/Pagination";
import axios from "axios";

interface BlogPost {
  id: number;
  title: string;
  author: string;
  thumbnail: string;
  content: string;
  publishedAt: string;
}

const apiUrl = import.meta.env.VITE_API_URL;

export default function BlogList() {
  const [blogPosts, setBlogPosts] = useState<BlogPost[]>([]);
  const [currentPage, setCurrentPage] = useState<number>(1);
  const [totalPages, setTotalPages] = useState<number>(0);
  const itemsPerPage = 10;

  useEffect(() => {
    const fetchBlogPosts = async () => {
      try {
        const response = await axios.get(`${apiUrl}/api/blog`);
        setBlogPosts(response.data);
        setTotalPages(Math.ceil(response.data.length / itemsPerPage));
      } catch (error) {
        console.error("Error fetching blog posts", error);
      }
    };
    fetchBlogPosts();
  }, []);

  const handlePageChange = (page: number) => {
    setCurrentPage(page);
  };

  const startIndex = (currentPage - 1) * itemsPerPage;
  const currentItems = blogPosts.slice(startIndex, startIndex + itemsPerPage);

  return (
    <Container>
      <h2>Welcome to the blog</h2>
      {currentItems.map((blog) => (
        <BlogCard
          key={blog.id}
          id={blog.id}
          title={blog.title}
          thumbnail={blog.thumbnail}
          excerpt={blog.content.substring(0, 60) + "..."}
        />
      ))}
      <Pagination
        currentPage={currentPage}
        totalPages={totalPages}
        onPageChange={handlePageChange}
      />
    </Container>
  );
}

Conclusion

With this setup, you now have a scalable and reusable pagination component. It works seamlessly with the parent component and dynamically adjusts as the number of posts increases. This approach requires no backend changes, making it ideal for projects where the backend does not support pagination out of the box.

You can further enhance the component by adding features like a dropdown to select the number of items per page or search and filter options. For now, this implementation provides a solid foundation for handling pagination in React with TypeScript.

Steps to Add a New Column with Sequelize Migrations

Rinkaku — Tue, 07 Jan 2025 02:29:28 +0000

In an update for my blogging platform, I needed to add a thumbnail image column to make the articles more visually appealing. This update accompanied a shift from displaying all articles on a single page to showing each one on its own page, improving navigation as the number of articles grows.

The thumbnail column stores a string representing a link to an image. This approach keeps the database lightweight and separates concerns by handling image storage elsewhere.

Adding the New Column to the Model

To begin, I updated the BlogPosts model to include the thumbnail column. Setting allowNull: true ensured that adding a thumbnail was optional and avoided issues with older posts that didn’t have a thumbnail yet:

thumbnail: {
    type: DataTypes.STRING,
    allowNull: true, // Optional for older posts
    },

However, this change to the model alone wasn’t enough. The Postgres database didn’t recognize the new column, and I encountered the error:

error: the column "thumbnail" doesn't exist

This happens because Sequelize models define how the application interacts with the database, but they don’t automatically modify the database schema. To resolve this, I needed to use a Sequelize migration.

Preparing Sequelize for Migrations

Before creating the migration, I ensured the Sequelize CLI was initialized in the project. Before running the following command, which will create a config/ folder and related setup, be sure to install it first by entering npm install sequelize-cli

npx sequelize-cli init

Inside the config/ folder, I opted to use a config.js file instead of config.json. This allowed me to use environment variables with dotenv for configuration:

require('dotenv').config();

module.exports = {
   development: {
       username: process.env.DB_USER,
       password: process.env.DB_PASSWORD,
       database: process.env.DB_NAME,
       host: process.env.DB_HOST,
       dialect: "postgres",
   },
   production: {
       username: process.env.DB_USER,
       password: process.env.DB_PASSWORD,
       database: process.env.DB_NAME,
       host: process.env.DB_HOST,
       dialect: "postgres",
   },
};

I then removed the config.json file to avoid conflicts.

Generating the Migration File

Next, I created the migration file for adding the thumbnail column using the following command:

npx sequelize-cli migration:generate --name add-thumbnail-to-blogposts

This created a new file in the migrations/ folder, named something like:

20241206232526-add-thumbnail-to-blogposts.js

I modified this file to add the new column:

module.exports = {
  up: async (queryInterface, Sequelize) => {
      await queryInterface.addColumn('blogposts', 'thumbnail', {
          type: Sequelize.STRING,
          allowNull: true,
      });
  },

  down: async (queryInterface) => {
      await queryInterface.removeColumn('blogposts', 'thumbnail');
  },
};

Applying the Migration

To update the development database, I ran the following command:

npx sequelize-cli db:migrate

This successfully added the thumbnail column to the blogposts table, enabling me to store image links for each article.

Applying the Migration in Production

For the deployed version of the database, I followed these steps:

Backup the Production Database: Before making changes, I downloaded a backup to safeguard against misconfigurations.
Copy the Migration Files: I ensured the updated config.js file and add-thumbnail-to-blogposts.js migration file were present in the server repository.
Set Environment Variables: I verified that the production environment variables required by dotenv were configured correctly. These were set in the Setup Node.js App section of cPanel.
Run the Migration: I navigated to the backend app directory in the production terminal and ran:

npx sequelize-cli db:migrate --env production

This successfully added the thumbnail column to the production Postgres database.

Conclusion

Adding the thumbnail column made it possible to display images for each blog article, enhancing the platform's visual appeal and usability. These steps provide a structured and repeatable approach to adding new columns to the database using Sequelize migrations, which is critical for maintaining synchronization between the models and database.