DEV Community: Josiah Victor

Retro’ing and Debugging 2024: A Year of Growth, Challenges, and Breakthroughs by Jovick-Coder

Josiah Victor — Thu, 23 Jan 2025 21:36:52 +0000

Table of Contents
1. Introduction: Reflecting on 2024
2. Debugging 2024: Challenges That Tested My Limits
- The Binnox Rider App
- Managing Multiple Projects
3. Retrospective: Lessons That Shaped Me
4. Achievements: Celebrating the Wins
- Professional Growth
- Financial Milestones
- Spiritual and Team Impact
- Personal Development
5. Looking Ahead: Roadmap for 2025
- 1. Return to Technical Writing
- 2. Financial Planning for Q4 Investment
- 3. Continuous Growth
6. Conclusion: Debugging Life and Embracing Growth
Wrap-Up and Feedback 💬
Stay Connected 🌐

1. Introduction: Reflecting on 2024

As we step into 2025, I find myself reflecting on 2024—a year filled with growth, challenges, and achievements. It wasn’t always easy, but the lessons I learned and the victories I celebrated made it one of my most transformative years yet.

From navigating tight deadlines to managing multiple projects, 2024 was about pushing boundaries and levelling up in every area of life. This is my retrospective on the challenges, lessons, and wins that shaped my year—and how I plan to carry this momentum into 2025.

2. Debugging 2024: Challenges That Tested My Limits

Every great year comes with its share of debugging moments. For me, 2024’s biggest challenges revolved around tackling high-stakes projects and managing my time effectively.

The Binnox Rider App

One of the most demanding projects of 2024 was developing a rider application for Binnox. This wasn’t your average app—it required real-time updates, efficient backend optimizations, and automated processes for rider and order management.

Key challenges included:

Reducing backend requests and improving response speed.
Implementing Socket.IO for real-time communication.
Using Redis caching to reduce database delays and costs.

I spent weeks researching these technologies and, in the end, had less than two weeks to build the entire system. The mental and technical stress was immense, but seeing the project come to life was worth every sleepless night.

Managing Multiple Projects

2024 wasn’t just about one project. I was working on several at once, each with its own deadlines and demands. Balancing these priorities was a constant struggle. To navigate this chaos, I relied heavily on:

To-Do Lists: Writing and updating them daily to organize my tasks.
Reminders: Staying on track with deadlines and priorities.
Focused Work Blocks: Tackling one task at a time to maintain clarity and efficiency.

3. Retrospective: Lessons That Shaped Me

Challenges often carry hidden lessons. Here are the key takeaways that shaped my 2024:

Learn Fast, Build Faster:

When faced with tight deadlines, I had no choice but to learn and implement new technologies simultaneously. This experience taught me that adaptability is one of the most important skills for growth.
Prioritization is Everything:

Managing multiple projects requires clarity. My system of to-do lists and reminders became my lifeline, ensuring I focused on what truly mattered each day.
Collaboration Matters:

Help regularly comes from unexpected places. Tools like ChatGPT, along with support from colleagues, sped up my research and problem-solving. Collaboration amplified my productivity and made tough tasks manageable.
Act Fast on Opportunities:

Whether it was learning a new skill or making an investment, 2024 taught me that hesitation can cost you. Acting decisively helped me capitalize on opportunities that led to both professional and financial wins.

4. Achievements: Celebrating the Wins

Professional Growth

Mastering Socket.IO and Redis caching elevated my backend development skills, making me a more versatile developer.
Completing the rider app for Binnox was a major professional milestone. It not only met business goals but also proved my ability to deliver under pressure.

Financial Milestones

2024 was my best financial year yet. I:

Acquired two assets that boosted my portfolio.
Made fast, calculated investments that yielded significant returns.

Spiritual and Team Impact

One of my proudest contributions was organizing weekly prayer sessions at Binnox. These sessions weren’t just about faith—they created a sense of unity and purpose among the team. The results spoke for themselves:

New Investors: We attracted new partnerships.
Revenue Growth: The company saw a notable increase in revenue.

Personal Development

On a personal level, 2024 was all about growth:

My relationship flourished as my partner and I set ambitious personal and financial goals—and achieved them.
I built habits like learning on the go, acting quickly, and managing tasks effectively, all of which I plan to carry forward.

5. Looking Ahead: Roadmap for 2025

With the lessons and momentum from 2024, here’s my vision for 2025:

1. Return to Technical Writing

I’m reigniting my passion for technical writing. Through blogs and social media, I aim to simplify complex topics for beginners and professionals alike while building a strong online presence.

2. Financial Planning for Q4 Investment

A major financial goal is in sight—a significant investment in Q4 2025. This means disciplined saving and careful planning throughout the year.

3. Continuous Growth

I’m committed to building on the habits I developed in 2024—fast learning, task prioritization, and collaboration. These will be the foundation for tackling new challenges and achieving bigger goals in 2025.

6. Conclusion: Debugging Life and Embracing Growth

2024 was a year of debugging—of facing challenges head-on and finding solutions that pushed me to grow. It was also a year of celebration, marked by achievements in my career, finances, and personal life.

As I move into 2025, I carry with me the lessons, skills, and habits that defined the past year. Here’s to a new chapter filled with possibilities, opportunities, and breakthroughs. Let’s make 2025 unforgettable!

Wrap-Up and Feedback 💬

Thank you for taking the time to read this article! I hope it helped simplify the topic for you and provided valuable insights. If you found it helpful, consider following me for more easy-to-digest content on web development and other tech topics.

Your feedback matters! Share your thoughts in the comments section—whether it's suggestions, questions, or areas you'd like me to improve. Feel free to use the reaction emojis to let me know how this article made you feel. 😊

Stay Connected 🌐

I’d love to connect with you! Let’s continue exchanging ideas, learning from each other, and growing together.

Follow me on my socials and let’s stay in touch:

Looking forward to hearing from you and growing this community of curious minds! 🚀

This is a submission for the 2025 New Year Writing challenge: Retro’ing and Debugging 2024.

Beginner's Guide to Structuring APIs in Node.js: Clean & Scalable

Josiah Victor — Thu, 23 Jan 2025 13:06:41 +0000

API Structure Intro Guide

Learn how to structure a Node.js REST API with this beginner-friendly guide. Includes folder organization, best practices, and tips for building scalable, maintainable APIs.

API Structure Intro Guide
- Table of Contents
- Introduction to Structuring APIs in Node.js
- Why is API Structure Important?
- Core Concepts for Structuring APIs
- Basic API Folder Structure
- Step-by-Step Explanation
  - 1. server.js
  - 2. Environment Variables (.env)
  - 3. Routes
  - 4. Controllers
  - 5. Models
  - 6. Configuration
- Best Practices
- Real-World Use Cases
- Conclusion
- Wrap-Up and Feedback 💬
- Stay Connected 🌐

Introduction to Structuring APIs in Node.js

APIs are the backbone of modern web applications, connecting the front end with the server. However, a poorly structured API can lead to messy, unmaintainable code. For beginners diving into Node.js, understanding how to organize your project from the start is key to building scalable, clean applications.

This guide will walk you through the basics of structuring a Node.js REST API. We’ll cover the essentials, best practices, and provide a practical folder structure you can adapt for your projects.
Read More on folder structure

Why is API Structure Important?

When starting out, many developers throw everything into one file. While this works for small projects, it becomes a nightmare as your codebase grows. A good API structure helps with:

Maintainability: Makes it easier to locate and modify code.
Scalability: Allows your application to grow without breaking.
Collaboration: Helps teams understand the code quickly.
Readability: Clean code is easier to debug and extend.

Core Concepts for Structuring APIs

Before jumping into folder structures, let’s understand some foundational principles:

Separation of Concerns: Keep different parts of your app (e.g., routes, database, logic) in separate files to avoid mixing responsibilities.
Modularity: Break your code into reusable modules.
Environment Variables: Store sensitive data like database credentials securely using a .env file.

Basic API Folder Structure

Here’s a simple structure for small projects, perfect for absolute beginners:

my-api/
├── server.js          # Entry point
├── package.json       # Project metadata and dependencies
├── .env               # Environment variables
├── /routes            # API route definitions
│   └── userRoutes.js  # Example: User-related routes
├── /controllers       # Request-handling logic
│   └── userController.js
├── /models            # Database models or schemas
│   └── userModel.js
└── /config            # Configuration files
    └── db.js          # Database connection setup

Step-by-Step Explanation

1. server.js

The entry point of your application:

Sets up the Express server.
Loads middleware and routes.

require('dotenv').config();
const express = require('express');
const userRoutes = require('./routes/userRoutes');
const connectDB = require('./config/db');

const app = express();
const PORT = process.env.PORT || 5000;

// Middleware
app.use(express.json());

// Database Connection
connectDB();

// Routes
app.use('/api/users', userRoutes);

app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

2. Environment Variables (`.env`)

Use a .env file to store sensitive data:

PORT=5000
MONGO_URI=mongodb+srv://username:password@cluster.mongodb.net/myDatabase

Install dotenv to load these variables into process.env:

npm install dotenv

3. Routes

Routes handle HTTP requests and point them to the appropriate controller.

/routes/userRoutes.js:

const express = require('express');
const { getAllUsers, createUser } = require('../controllers/userController');
const router = express.Router();

// GET all users
router.get('/', getAllUsers);

// POST create a new user
router.post('/', createUser);

module.exports = router;

4. Controllers

Controllers contain the logic for handling requests.

/controllers/userController.js:

const User = require('../models/userModel');

// GET all users
const getAllUsers = async (req, res) => {
  try {
    const users = await User.find();
    res.status(200).json(users);
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
};

// POST create a new user
const createUser = async (req, res) => {
  try {
    const { name, email } = req.body;
    const newUser = await User.create({ name, email });
    res.status(201).json(newUser);
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
};

module.exports = { getAllUsers, createUser };

5. Models

Models define the structure of your database documents. In this example, we use MongoDB and Mongoose.

/models/userModel.js:

const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  name: { type: String, required: true },
  email: { type: String, required: true, unique: true }
});

module.exports = mongoose.model('User', userSchema);

6. Configuration

The configuration folder contains files for connecting to external resources, such as databases.

/config/db.js:

const mongoose = require('mongoose');

const connectDB = async () => {
  try {
    const conn = await mongoose.connect(process.env.MONGO_URI, {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    });
    console.log(`MongoDB Connected: ${conn.connection.host}`);
  } catch (error) {
    console.error(`Error: ${error.message}`);
    process.exit(1);
  }
};

module.exports = connectDB;

Best Practices

Keep Code DRY (Don’t Repeat Yourself): Avoid duplicating logic; reuse functions and modules where possible.
Error Handling: Always handle errors gracefully using try-catch blocks or middleware.
Use Middleware: For tasks like authentication, request validation, and logging.
Versioning Your API: Use versioning (/api/v1/users) to handle future updates without breaking old clients.

Real-World Use Cases

Here are some ideas to practice:

A blog API (users, posts, and comments).
A task manager API (tasks, users, and deadlines).

Conclusion

Starting with a clean, structured API is the foundation of a maintainable project. By separating concerns and organizing your code logically, you’ll set yourself up for success as your application grows.

Remember, this is just a starting point! As you gain experience, you can adapt and expand this structure to fit larger, more complex projects.

Do you have any specific challenges or ideas you'd like us to explore in future posts? Let us know in the comments!

Wrap-Up and Feedback 💬

Stay Connected 🌐

I’d love to connect with you! Let’s continue exchanging ideas, learning from each other, and growing together.

Follow me on my socials and let’s stay in touch:

Looking forward to hearing from you and growing this community of curious minds! 🚀

Mastering Backend Node.js Folder Structure, A Beginner’s Guide

Josiah Victor — Sun, 12 Jan 2025 20:05:07 +0000

Mastering Backend Node.js Folder Structure: A Beginner’s Guide
- Table of Contents
- Introduction
- Why a Good Folder Structure Matters
- The Basic Folder Structure for Beginners
- Overview of the Structure
- Step-by-Step Setup:
- Breaking Down the Folders:
  - controllers/
  - models/
  - routes/
  - middlewares/
  - utils/
  - config/
  - server.js
- Advanced Folder Structure for Scalability
- Breakdown of Additional Folders
  - services/
  - tests/
  - public/
  - app.js
- Why This Structure Works for Scalability
- Best Practices for Organizing Your Code
- Conclusion
- Wrap-Up and Feedback 💬
- Stay Connected 🌐

Introduction

Organizing your codebase is one of the most important yet overlooked aspects of building a backend. Without a proper folder structure, even small projects can quickly become messy, making debugging and scaling a headache. If you’ve ever struggled to figure out where your code should go, you’re not alone—it’s a common challenge for beginners.

In this guide, we’ll simplify the process of structuring your Node.js backend. Starting with a beginner-friendly setup, we’ll explore the purpose of each folder, provide practical examples, and share best practices. By the end, you’ll have a clear roadmap to keep your projects clean, maintainable, and ready to grow.

Why a Good Folder Structure Matters

A good folder structure is like a well-organized toolbox. It makes your life easier and ensures your project can:

Scale: Grow without turning into a tangled mess.
Collaborate: Make sense to other developers on your team.
Debug: Quickly identify and fix issues. Even for small projects, starting with a clean structure saves time in the long run.

The Basic Folder Structure for Beginners

Overview of the Structure

project/
├── controllers/
├── models/
├── routes/
├── middlewares/
├── utils/
├── config/
├── server.js

Step-by-Step Setup:

Initialize Your Project:

Run the following commands in your terminal:

mkdir my-project
cd my-project
npm init -y
npm install express

Create Your Folders:

Use these commands to set up the structure:

mkdir controllers models routes middlewares utils config
touch server.js

Breaking Down the Folders:

controllers/

What it is:

The "brain" of your application. Controllers contain the logic that handles incoming requests and decides what data to send back to the client.

When to use it:
Every time a user sends a request (e.g., via an API call), the controller processes the request, interacts with the database if needed, and sends back the appropriate response.

Example:

Let’s say you have a user who wants to fetch a list of all registered users. The controller will:

Receive the request.
Fetch the user data from the database using the model.
Send the data back to the client.

Code Example:

// controllers/userController.js
const User = require('../models/User');

// Fetch all users
exports.getUsers = async (req, res) => {
    try {
        const users = await User.find(); // Query the database for users
        res.status(200).json(users);    // Send data to the client
    } catch (error) {
        res.status(500).json({ error: 'Something went wrong' });
    }
};

// Add a new user
exports.createUser = async (req, res) => {
    try {
        const newUser = new User(req.body); // Create a new user instance
        await newUser.save();              // Save it to the database
        res.status(201).json(newUser);     // Respond with the created user
    } catch (error) {
        res.status(400).json({ error: 'Invalid input' });
    }
};

models/

What it is:

The "blueprint" of your data. Models define the structure of your data and how it interacts with the database.

When to use it:

Whenever you need to save, retrieve, or manipulate data in your database, you use models. They enforce consistency in the data format (e.g., all users must have a name and email).

Example:

If you’re working with a MongoDB database, you might use Mongoose to define a model for users. This ensures that every user document has a consistent structure.

Code Example:

// models/User.js
const mongoose = require('mongoose');

// Define the schema for a user
const userSchema = new mongoose.Schema({
    name: { type: String, required: true },       // Name is required
    email: { type: String, required: true },     // Email is required and unique
    createdAt: { type: Date, default: Date.now } // Auto-generate timestamps
});

// Export the model for use in controllers
module.exports = mongoose.model('User', userSchema);

routes/

What it is:

The "map" of your application. Routes connect specific URLs (or endpoints) to the appropriate controller functions.

When to use it:

Every time you want to create a new endpoint (e.g., /users or /products), you define it in a route file. Routes ensure that incoming requests are directed to the correct controller.

Example:

For a /users endpoint, the route file will link the URL to the controller functions like getUsers or createUser.

Code Example:

// routes/userRoutes.js
const express = require('express');
const { getUsers, createUser } = require('../controllers/userController');
const router = express.Router();

// Map URLs to controller functions
router.get('/', getUsers);     // GET /users → fetch all users
router.post('/', createUser);  // POST /users → create a new user

module.exports = router;

middlewares/

What it is:

The "gatekeeper" of your application. Middleware functions run before your controllers, allowing you to handle tasks like authentication, logging, or input validation.

When to use it:

Whenever you need to process a request before it reaches the controller. For example, you can check if a user is authenticated or log details about incoming requests.

Example:

Let’s say you want to log every request your server receives. A middleware can handle this.

Code Example:

// middlewares/logger.js
module.exports = (req, res, next) => {
    console.log(`${req.method} request to ${req.url}`);
    next(); // Pass control to the next middleware or controller
};

utils/

What it is:

The "toolbox" of your application. Utility files store helper functions or modules that can be reused across your project.

When to use it:

Any time you have code that doesn’t belong in a controller, model, or middleware but needs to be used in multiple places. Examples include formatting dates, hashing passwords, or sending emails.

Example:
Imagine you need a reusable function to format timestamps.

Code Example:

// utils/dateFormatter.js
exports.formatDate = (date) => {
    return new Date(date).toLocaleDateString('en-US');
};

config/

What it is:

The "control center" of your application. This folder stores configuration files, such as database connection settings, API keys, or environment variables.

When to use it:

Any time you need to configure your app for different environments (e.g., development, testing, production).

Example:

Here’s a file to handle your MongoDB connection:

Code Example:

// config/db.js
const mongoose = require('mongoose');

const connectDB = async () => {
    try {
        await mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true });
        console.log('Database connected successfully');
    } catch (error) {
        console.error('Database connection failed:', error.message);
        process.exit(1); // Exit the process with failure
    }
};

module.exports = connectDB;

server.js

What it is:

The "heart" of your application. This file initializes the Express server, connects to the database, and sets up the middleware and routes.

When to use it:

Every project needs an entry point, and this is it.

Example:
Here’s a simple example of a server.js file:

Code Example:

// server.js
require('dotenv').config(); // Load environment variables
const express = require('express');
const connectDB = require('./config/db');
const userRoutes = require('./routes/userRoutes');

const app = express();

// Middleware
app.use(express.json()); // Parse JSON
app.use(require('./middlewares/logger')); // Log incoming requests

// Connect to the database
connectDB();

// Routes
app.use('/users', userRoutes);

// Start the server
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

Advanced Folder Structure for Scalability

As your application grows in complexity, a more organized and scalable folder structure becomes necessary. Here's a detailed breakdown of the advanced folder structure:

project/
├── src/
│   ├── controllers/
│   ├── models/
│   ├── routes/
│   ├── middlewares/
│   ├── utils/
│   ├── config/
│   ├── services/
│   ├── tests/
│   ├── app.js
├── public/
├── package.json
├── README.md

Breakdown of Additional Folders

services/

Business Logic Layer

The services folder contains reusable business logic that doesn't belong in the controller. This helps keep your controllers clean and focused solely on handling HTTP requests and responses.

Example Use Case:

You need to calculate discounts for an e-commerce application. Instead of writing this logic in the controller, you create a discountService.js file.

Code Example:

// services/discountService.js
exports.calculateDiscount = (price, discountRate) => {
    return price - (price * discountRate);
};

Then, your controller can simply call this function:

// controllers/productController.js
const { calculateDiscount } = require('../services/discountService');

exports.getProduct = async (req, res) => {
    const product = await Product.findById(req.params.id);
    const discountedPrice = calculateDiscount(product.price, 0.1);
    res.json({ product, discountedPrice });
};

tests/

Testing Code
The tests folder is essential for maintaining code quality as your app grows. It contains unit tests, integration tests, and sometimes end-to-end (E2E) tests.

Best Practices:

Use a testing library like Jest, Mocha, or Supertest.
Organize tests to mirror your src folder structure. For example, a test for controllers/userController.js might be in tests/controllers/userController.test.js.

Code Example:

// tests/controllers/userController.test.js
const request = require('supertest');
const app = require('../../src/app');

describe('GET /users', () => {
    it('should return a list of users', async () => {
        const response = await request(app).get('/users');
        expect(response.status).toBe(200);
        expect(response.body).toBeInstanceOf(Array);
    });
});

public/

Static Files

The public folder is where you store static assets like images, CSS, JavaScript, or fonts. These files are served directly to the client without being processed by your backend.

Use Case:

Serving a logo image for your application.
Hosting frontend files if you’re building a full-stack app with client-side rendering.

Example:

An image stored in public/images/logo.png can be accessed via http://yourdomain.com/images/logo.png.

Code Configuration:

To serve static files, configure Express like this:

const express = require('express');
const app = express();

app.use(express.static('public')); // Serves files in the 'public' directory

app.js

Application Setup

The app.js file initializes the core of your application. It’s typically used to:

Set up middleware.
Register routes.
Export the Express app for server configuration or testing.

Code Example:

// src/app.js
const express = require('express');
const userRoutes = require('./routes/userRoutes');
const loggerMiddleware = require('./middlewares/logger');

const app = express();
app.use(express.json());
app.use(loggerMiddleware);
app.use('/users', userRoutes);

module.exports = app; // Export for testing or server.js

Why This Structure Works for Scalability

Separation of Concerns:
Each folder has a specific responsibility, making the codebase easier to understand and maintain.
Reusability:
The services folder keeps your business logic reusable and avoids duplication.
Testability:
A clear structure ensures every part of your app is easy to test, leading to fewer bugs.
Ease of Collaboration: Teams can work on different parts of the app without stepping on each other’s toes.

Best Practices for Organizing Your Code

Start Small, Scale Later: Begin with a simple structure and refactor as your app grows.
Stick to Conventions: Use clear and consistent naming.
Stay DRY (Don’t Repeat Yourself): Extract repetitive logic into reusable utilities.
Use Environment Variables: Keep sensitive data like API keys out of your codebase.
Document Everything: Include a README with explanations for your setup.
Test Regularly: Add tests to catch bugs early.

Conclusion

Organizing your Node.js backend may seem daunting at first, but a good folder structure will save you time, reduce bugs, and make your code easy to maintain. Whether you’re starting small or building a large-scale application, following these guidelines will set you on the path to success.

Ready to dive deeper? Stay tuned for the REST API-focused structure coming next!

Wrap-Up and Feedback 💬

Stay Connected 🌐

I’ve been sharing my journey and insights for a while, and I’d love to connect with you! Let’s continue exchanging ideas, learning from each other, and growing together.

Follow me on my socials and let’s stay in touch:

Looking forward to hearing from you and growing this community of curious minds! 🚀

Document Object Model simplified.

Josiah Victor — Tue, 07 Jan 2025 18:53:20 +0000

Hello 👋 buddies, welcome to my blog. Today we will be simplifying the concept of DOM.

Introduction

When I started as a web developer, people often threw around the term "DOM" in the industry. Every JavaScript tutorial mentioned it, but I didn't know what it meant. Looking out for a straightforward explanation of DOM, the result of my exploration confused with advanced programming terms. Now having the understanding after a long search I thought it wise to help others in my previous situation with a simpler explanation.

Explanation

When you first heard of the term DOM what first came to your mind?

Documents
Object
Models

What do they mean ?

What's a document:

Web Documents are typically defined as a simple HTML file. A web document, such as this page, is typically made up of several files and is accessed via a URL (uniform resource locator). The HTML file itself contains most of the time style sheets, background images, other graphics, Java programs, and other files.

The document is your Html file.

The document is sent to the browser when loaded in form of an object."Object ??"

What's an object:

An object is a term you often hear about in programing, having a good understanding of an object is a Great start in javascript.

object in JavaScript may be defined as an unordered collection of related data, of primitive or reference types, in the form of “key: value” pairs. These keys can be variables or functions and are called properties and methods, respectively, in the context of an object. An object can be created with figure brackets {…} with an optional list of properties. A property is a “key: value” pair, where a key is a string (also called a “property name”), and the value can be anything.

let object = {
Key: Value
}

The object is represented in a tree-like format graphically in which all elements are referred to as nodes, and nodes are grouped based on HTML syntax arrangement, which has a parent-child relationship.

<div> <!-- parent element-->
<p><!-- child element to div element-->
<!-- text is also referred to as a node -->
Paragraph text <!-- child element top element-->
</p> 
</div>

Note: Because the vast majority of code that uses the DOM revolves around manipulating HTML documents, it's common to refer to the nodes in the DOM as elements, although strictly speaking not every node is an element.

The browser reader the Document has an object that can be graphically represented as a tree. ** What is a Model then??**

What's a Model:

Let us look at this from the dictionary point of view.

1.Usually a miniature representation of something. E.g.:- a plastic model of the human heart 2. A pattern of something to be made.Read more

Understanding the dictionary definition of a model let's relate it to a webpage, this is the representation of the Object created by the browser into a beautiful-looking layout where text, colors, images, etc. are organized and presented to the viewer. So I will call this the result after receiving and compiling the web document.

Conclusion

*let's look at it this way *

$$ Receiving ⇾ Convection ⇾ Presentation $$

Webpages pass-through this simple process every time the webpage is loaded for the first time and also when it is being refreshed.

Receiving:- it Receives the document either from a server or our local machine and

Convection:- readers of the document and convert each element into nodes

Presentation:- represent the object or tree created into the designed webpage to be displayed to the users.

In this case, when a change is made to the document, it has no direct effect on the module. The document is saved, and the browser creates a new object of the incoming document received, and then the model will be recreated or modified.

Congratulations

** Wow, what a journey, I am glad you made it to the end of this article.**

Wrap-Up and Feedback 💬

Stay Connected 🌐

This is just the beginning of my blogging journey, and I'd love to connect with you! Let's share ideas, grow, and learn together.

Follow me and let’s stay in touch:

Looking forward to hearing from you and growing this community of curious minds! 🚀

JavaScript Theme Toggle.

Josiah Victor — Fri, 20 May 2022 12:33:16 +0000

Hello there, pals. Hello and thank you for visiting my blog. We're going to build a theme toggle today.

Explanation

Today we'll look at the most basic technique to add a theme toggle to your website.
We'll make a list of everything we need to remember before getting down to business.
The inclusion of the toggle on a website is a design bonus.
It allows the user to select which one they want to use

HTML
CSS
and a little JavaScript.
We will be using Font Awesome 5 icons on the project, so I will be including the CDN link to my index.html file.

  <!-- Font Awesome cdn link  -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
    crossorigin="anonymous" />

HTML Structure

The structure of your HTML file depends on the kind of project you are working on. For our example in this article, we will keep it very simple, so our structure might not be very complicated.

The Font Awesome CDN link is on the header element, and the header has a link to our Custom CSS file.

In the body tag is having a parent container with the class .main-div, and two buttons with the class .theme-button. This will be used to toggle the theme of the webpage.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Theme Toggler</title>
  <!-- Font Awesome cdn link  -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
    crossorigin="anonymous" />

  <!-- Custom Style  -->
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="main-div">

    The theme switches between dark mode and light mode
    <button class="theme-button"><i class="fas fa-sun"></i> Dark Theme </button>
    <button class="theme-button"><i class="fas fa-moon"></i> Light Theme </button>
  </div>
</body>

</html>

CSS Style

Because we're dealing with two separate contexts, each light theme color must have a dark theme variant, and the colors must be established according to your duties, with colors for text, background colors, and so on. For this project, we'll use CSS variables because they provide us complete control over all styling while keeping our CSS style short and straightforward.

css variables

Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., --main-color: black;) and are accessed using the var() function (e.g., color: var(--main-color);). Read more.

Note: Custom property names are case sensitive : --my-color will be treated as a separate custom property to --My-color.

Let Create our own CSS variables

When changing the theme, keep in mind that the background and text colors will be modified. They'll go in the css variable, and the CSS attribute selector will be used to style the correct theme.

Note: This is the initial line of css style; all further css codes will be written below it.

.main-div[theme="light"] {
  --background-color: #fff;
  --text-color: #000;
  --shadow-color: 1px 1px 5px rgba(0, 0, 0, 0.5);
}
.main-div[theme="dark"] {
  --background-color: #000;
  --text-color: #fff;
  --shadow-color: 1px 1px 5px rgba(255, 255, 255, 0.5);
}

We won't have to define colors directly to the "background-color" or "color" properties instead, we'll use the variables created.variables can be used in css inserting the name of the variable in side a var() function.

Let's get our project styled
Our project is given basic styling by using css “'flexbox”' to center the contents of the page.

/* remove extra spaces */
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* style the main container element */
.main-div {
  background-color: var(--background-color);
  color: var(--text-color);
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-family: sans-serif;
}
/* style the theme toggle button element */
.main-div .theme-button {
  height: 50px;
  padding: 10px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 900;
}
/* style the theme toggle button element icon */
.main-div .theme-button i {
  font-size: 25px;
  margin-right: 10px;
}

JavaScript

This is where we write the JavaScript code to change the theme. This easy procedure will be followed for this project and all others using this method. We need too:

get the DOM element
render the button one by one depending on the current theme
on click of the button change the theme attribute of the main parent element

  // Get Html Element from DOM
  const mainDiv = document.querySelector('.main-div')
  const themeLight = document.querySelector('#theme-light')
  const themeDark = document.querySelector('#theme-dark')

  // hide the light
  themeLight.style.display = 'none'


  // add event listener to dark theme button
  themeDark.addEventListener('click', () => {
    // change main-div theme attribute to dark
    mainDiv.setAttribute('theme', 'dark')
    // show light them button
    themeLight.style.display = 'block'
    // hide dark them button
    themeDark.style.display = 'none'
  })

  // add event listener to light theme button
  themeLight.addEventListener('click', () => {
    // change main-div theme attribute to light
    mainDiv.setAttribute('theme', 'light')
    // show dark them button
    themeDark.style.display = 'block'
    // hide light them button
    themeLight.style.display = 'none'
  })

If you notice all we are doing is changing the theme attribute on the .main-div element and the other major work is done by css variables.
When the theme attribute changes from light to dark the values for our variables changes because .main-div[theme="light"] becomes false when the theme variable changes to dark the .main-div[theme="dark"] becomes true.

Store current theme

At this point, we have successfully toggled the theme. When the page reloads, the theme returns to its default light mode. We can add the ability of the webpage to remember the previously selected theme and apply it on the page when the page loads.
To accomplish this, we must employ a localStorage API.

localStorage API

The localStorage read-only property of the window interface allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions.Read more

For a better user experience, we will use local Storage which will store the user's current theme, that way when the user comes back to the website, their favourite theme will be applied automatically.

// storing the theme on the user's machine
localStorage.setItem('theme', 'dark');

//accessed the user's machine theme
localStorage.getItem('theme');
// dark

Let apply this to our code.

This can be placed in a function and the function will be called before another script runs, so it will update the webpage theme and render the correct button to the user.

I will be placing the code above my previous code and I will not be using a function for this, just to keep my sample simple.

  //accessed the user's machine theme
  const theme = localStorage.getItem('theme');

// hide a button base on the current theme saved
  if (theme === 'light') {
    // hide the light button
    themeLight.style.display = 'none'
  } else {
    // hide the dark button
    themeDark.style.display = 'none'
  }
  // change main-div theme attribute to the saved theme
  mainDiv.setAttribute('theme', theme)

To update the theme in the localStorage we placed a single line of code on our event handlers

Save the dark mode

   // storing the theme on the user's machine
    localStorage.setItem('theme', 'dark');

Save the light mode

   // storing the theme on the user's machine
    localStorage.setItem('theme', 'light');

Congratulations

It has been a long learning process, and I hope you understand the above-mentioned subject.

Give feedback

If you enjoyed and learned something new from this article, follow me for More web simplified topics, and do well to give me feedback by using the reaction emojis. Let me know how you feel about the explanation in the comment section. Give feedback, corrections, and recommendations.

Much 🥰

Let us connect

I would like to connect with any and every reader

Let us connect

victorjosiah19@Twitter

josiah-victor@LinkedIn

Document Object Model (DOM) Simplified

Josiah Victor — Wed, 18 May 2022 12:35:41 +0000

Hello 👋 buddies, welcome to my blog. Today, we will be simplifying the concept of DOM.

Introduction

When I started as a web developer, people often threw around the term “DOM” in the industry. Every JavaScript tutorial mentioned it, but I didn't know what it meant. Looking out for a straightforward explanation of DOM, the result of my exploration, confused with advanced programming terms. Now having the understanding after a long search, I thought it wise to help others in my previous situation with a simpler explanation.

![lets-do-this-lets-begin-lets-get-started-gif](https://tenor.com/view/lets-do-it-brad-mondo-lets-do-this-lets-begin-lets-get-started-gif-19930452.gif) ## Explanation **When you first heard of the term DOM, what first came to your mind?** 1. Documents 2. Object 3. Models
**What do they mean ?** ## What's a document: Web Documents are often defined as a simple HTML file. A web document, such as this page, is often made up of several files and is accessed via a URL (uniform resource locator). The HTML file itself contains most of the time style sheets, background images, other graphics, Java programs, and other files.
The document is your Html file
![web-documents](https://www.bitfarm-archiv.com/pics/web-documents.png) The document is sent to the browser when loaded in form of an object.**"Object ??"** ### What's an object: `An object is a term you often hear about in programing, having a good understanding of an object is a Great start in javascript.`
**object in JavaScript** may be defined as an unordered collection of related data, of primitive or reference types, in the form of **“key: value”** pairs. These keys can be variables or functions and are called properties and methods, respectively, in the context of an object. An object can be created with figure brackets {…} with an optional list of properties. A property is a “key: value” pair, where a key is a string (also called a “property name”), and the value can be anything. ```javascript let object = { Key: Value } ```
The object is represented in a tree-like format graphically in which all elements are referred to as nodes, and nodes are grouped based on HTML syntax arrangement, which has a parent-child relationship ![Dom-Tree-of-An-Example-Web-Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/301hq1osn2db7jjf9ky5.png)

<div> <!-- parent element-->
<p><!-- child element to div element-->
<!-- text is also referred to as a node -->
Paragraph text <!-- child element top element-->
</p> 
</div>

Note: Because the vast majority of code that uses the DOM revolves around manipulating HTML documents, it's common to refer to the nodes in the DOM as elements, although strictly speaking not every node is an element.

The browser reader the Document has an object that can be graphically represented as a tree.
** What is a Model then??**

What's a Model:

Let us look at this from the dictionary point of view.

Usually a miniature representation of something. e.g.:- a plastic model of the human heart 2.A pattern of something to be made.Read more Understanding the dictionary definition of a model let's relate it to a webpage, this is the representation of the Object created by the browser into a beautiful-looking layout where text, colors, images, etc. are organized and presented to the viewer. So I will call this the result after receiving and compiling the web document

Conclusion

let's look at it this way

Receiving -> Convection -> Presentation

In this case, when a change is made on the document it has no direct effect on the module except the document is saved and the browser creates a new object of the incoming document received, and then the model will be recreated or modified.

Congratulations

**Wow, what a journey, I am glad you made it to the end of this article.** ![Celebrate gif](https://tenor.com/view/celebrate-weekend-vibe-friday-be-like-gif-4811973.gif)

Give feedback

If you enjoyed and learned something new from this article,** Follow me for More web simplified topics, and do well to give me feedback by using the reaction emojis.

Let me know how you feel about the explanation in the comment section.
Comment for feedback, corrects, and recommendations.

**Much 🥰

Let us connect

This is my first article 🎉🎊.
I would like to connect with any and every reader

Let us connect

Twitter

LinkedIn

DEV Community: Josiah Victor

Retro’ing and Debugging 2024: A Year of Growth, Challenges, and Breakthroughs by Jovick-Coder

Table of Contents

1. Introduction: Reflecting on 2024

2. Debugging 2024: Challenges That Tested My Limits

The Binnox Rider App

Managing Multiple Projects

3. Retrospective: Lessons That Shaped Me

4. Achievements: Celebrating the Wins

Professional Growth

Financial Milestones

Spiritual and Team Impact

Personal Development

5. Looking Ahead: Roadmap for 2025

1. Return to Technical Writing

2. Financial Planning for Q4 Investment

3. Continuous Growth

6. Conclusion: Debugging Life and Embracing Growth

Wrap-Up and Feedback 💬

Stay Connected 🌐

Beginner's Guide to Structuring APIs in Node.js: Clean & Scalable

API Structure Intro Guide

Table of Contents

Introduction to Structuring APIs in Node.js

Why is API Structure Important?

Core Concepts for Structuring APIs

Basic API Folder Structure

Step-by-Step Explanation

1. server.js

2. Environment Variables (.env)

3. Routes

4. Controllers

5. Models

6. Configuration

Best Practices

Real-World Use Cases

Conclusion

Wrap-Up and Feedback 💬

Stay Connected 🌐

Mastering Backend Node.js Folder Structure, A Beginner’s Guide

Table of Contents

Introduction

Why a Good Folder Structure Matters

The Basic Folder Structure for Beginners

Overview of the Structure

Step-by-Step Setup:

Breaking Down the Folders:

controllers/

models/

routes/

middlewares/

utils/

config/

server.js

Advanced Folder Structure for Scalability

Breakdown of Additional Folders

services/

tests/

public/

app.js

Why This Structure Works for Scalability

Best Practices for Organizing Your Code

Conclusion

Wrap-Up and Feedback 💬

Stay Connected 🌐

Document Object Model simplified.

Introduction

Explanation

What's a document:

What's an object:

What's a Model:

Conclusion

Congratulations

Wrap-Up and Feedback 💬

Stay Connected 🌐

JavaScript Theme Toggle.

Explanation

HTML Structure

CSS Style

css variables

2. Environment Variables (`.env`)