DEV Community: Israel Rotimi

New devs with real projects — are you struggling to get hired too?

Israel Rotimi — Tue, 17 Feb 2026 01:42:48 +0000

I’m curious how others are experiencing the entry-level dev market right now.

I’ve put real effort into learning & building a couple production-ready projects — not just tutorials, but things I've shipped. I thought that would move me closer to being “job ready,” yet applications still seem to go nowhere.

So I want to compare notes:

If you’re a newer developer with solid projects, are you also struggling to get hired? What feedback (if any) are you getting? Do you feel the bar has moved, or are we missing something important?

Would genuinely like to hear what others are seeing.

My Debut as a Backend Developer: How I deployed a URL Shortener API

Israel Rotimi — Thu, 19 Jun 2025 10:52:32 +0000

Hey there, nice to talk about my dev journey again.
I've been a frontend developer for majority of my career, even though I learned Node.js early on I had not fully dived in and deployed a fully functional project end-to-end - until now.
Here's I explain what it was like, what I faced and how I built it.

The challenge

I searched online for backend projects to build and took the the basic overview they gave as a starting point.
I was to build a URL Shortener service where a long URL can be sent to the server and a shortened URL returned. I was to create a catch-all route that would intercept the requests from a shortened URL search for it's matching long URl and redirect to it. Simple Right? Not really.

My solution

So, I Started building. I set up basic app stucture, then I stopped taught long and hard and came up with this solution.

I'll only need one database model or Schema, since there'll be no auth in the app.
I would

retrieve the long URL from the request
store it in the DB Schema
generate a unique ID for the URL
And store that simultaneously with the longer URL

I figured that generating a unique ID was a simpler solution I could implement rather than actually performing operations on the original string as that would be entering the realm of Cryptography.

I used AI to come up with a solution to generate a unique string and it came up with a simple solution that would work just fine until my app had many users and was used many times a day.

 shortenedStringId: {
        type: String,
        unique: true,
        // This implementation can generate approx. 56.8 billion unique strings.
        // That'll be okay for now, but if you want to use in production
        // Consider installing a package like nanoid to generate unique strings
        // or consider implementing a more robust solution.
        default: function() {
            const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
            let result = '';
            for (let i = 0; i < 6; i++) {
                result += chars.charAt(Math.floor(Math.random() * chars.length));
            }
            return result;
        }
    },

Challenges I faced

I faced some real challenges when I tested what I built. But thanks to a robust error management system I put in place, an error middleware, I could pinpoint were the error was coming from.
I fixed a few import errors but couldn't pinpoint one bug.
Finally I placed it in Chatgpt and asked it if it was valid.
I turned out to be a subtle error were I forgot to destructure the URL from req.params

//My previous code
const url = req.body;
// LLM corrected
const { url } = req.body;

This emphasizes how a fresh pair of eyes sometimes could spot what you didn't.

Next Steps

Building this App taught me debugging as a backend developer and increased my confidence in handling problems.
In returning the shortened URL, I wasn't sure of the live URL so I used req.baseUrl but that didn't work as expected.

res.status(201)
    .json({
      originalURL: newUrl.targetURL,
      shortURL: `${req.baseUrl}/${newUrl.shortenedStringId}`,
    })

I don't know a better solution, if you know a better solution, please mention in the comments.

Check out the GitHub repo at https://github.com/israelrotimi/url-shortener
And please leave a star ⭐

It's deployed on render https://url-shortener-api-o0n2.onrender.com/

Make an interactive drum using the HTML Audio API

Israel Rotimi — Mon, 05 May 2025 07:43:35 +0000

In this article, you'll learn about the HTML Audio API and make a fun project too.

Prerequisites

Basic knowledge of HTML, CSS and JavaScript is required.

The Audio API

The AudioAPI is part of the HTMLMediaElementaccording to MDN, which is an interface that enables to use multimedia in our web applications.

It gives us various methods that enable us to programmatically interact with audio in the browser.

API methods

You can create the audio element in HTML

<audio id="noise">
  <source src="noise.mp3" type="audio/mpeg">
</audio>

And access it using JavaScript.
You can also create it dynamically using the Audio object

const noise = new Audio("/path/to/some/noise.mp3");

It takes the path to the audio file as a parameter

Some of the methods you can use are:

Audio.play() - plays the audio.
Audio.pause() - pauses a playing sound.

Events on the audio element:

canplaythrough - Fired when the media resource is fully loaded.
pause- Fired when Playback has been paused.
play - Fired when Playback has begun
playing- Playback is ready to start after having been paused or delayed due to lack of data.

For a complete list check MDN

Practical: Building an interactive drum

We will build an interactive drum with HTML, CSS and JavaScript.

First you'll need drum sounds. A Google search should give you promising results.

Get single beat sounds so you can implement different drums.

I'll be using 4 drum sounds.

tribal-dry-drum
hand-tribal-drum
hard-horror-drum
short-bass-hit

I got them from MixKit.
They are all in .wavformat which may not be compatible with all browsers. You can use open source software like Audacity to convert to other formats and implement a fallback system.

The project: Web Drums

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Web Drums</title>
</head>
<body>
  <h1>Web Drums</h1>
  <p>Beat the drums to make your own melody</p>
  <div id="stage">
    <div id="drum-1" class="drums"></div>
    <div id="drum-2" class="drums"></div>
    <div id="drum-3" class="drums"></div>
    <div id="drum-4" class="drums"></div>
  </div>

  <script src="app.js"></script>
</body>
</html>

We define a #stage and we're we put our drums. We use div elements for the drums

CSS

#stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

We give the #stagegrid positioning and align it's children in 2 columns

.drums {
  height: 100px;
  border-radius: 50%;
  background: peachpuff;
}

We then give the drums a border-radiusand color so they can resemble drums.

JavaScript

const drum1 = document.getElementById("drum-1");
const drum2 = document.getElementById("drum-2");
const drum3 = document.getElementById("drum-3");
const drum4 = document.getElementById("drum-4");

We get references to all the drums.

const sound1 = new Audio("/beats/hand-tribal-drum.wav");
const sound2 = new Audio("/beats/hard-horror-hit-drum.wav");
const sound3 = new Audio("/beats/short-bass-hit.wav");
const sound4 = new Audio("/beats/tribal-dry-drum.wav")

We then load the sounds.

drum1.addEventListener("click", () => {
  sound1.play()
});
drum2.addEventListener("click", () => {
  sound2.play()
});
drum3.addEventListener("click", () => {
  sound3.play()
});
drum4.addEventListener("click", () => {
  sound4.play()
});

Finally, we play the sounds when each drum is clicked.

Here's a link to the repo on GitHub: github.com/israelrotimi/webdrums

Go ahead and play with your drum!
This is a basic implementation, I encourage you to build upon it.

In conclusion, In this article you learned about the HTML Audio and how to use it.
I believe you'll use it in your web projects.
If you have any suggestions or additions, let us know in the comments.

I am a full stack NextJS developer and technical writer. I'm actively looking for gigs.

Cheers

How to write Semantic HTML

Israel Rotimi — Sat, 03 May 2025 09:56:16 +0000

Hi there,
I bet HTML was one of the first languages you learned.
But how many times have you given thought as to using a sectioninstead of a div?
In this article we'll explore why Semantic HTML is so important and how to write it.

What is Semantic HTML

What do we mean by

Semantic

It simply means 'meaningful'.
Writing HTML that meaningful to both humans and computers.
If someone viewing your HTML code can't tell what pieces of markup are for without comments, then it's probably not Semantic.

Why Semantic HTML

Here are a few reasons

Semantic HTML is the standard recommended by W3C
It is better recognized by browsers and can benefit from default styling.
It is better interpreted by screen readers
It increases accessibility
It gives our code structure, for instance, compare this:

<div>logo</div>
<div id="hero">
  <h1 id="main-heading">Topic</h1>
  <h1 id="subheading">Sub Topic</h1>
</div>
<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Et eligendi dolorum explicabo,
earum atque accusamus sequi quo,
excepturi fugiat totam repellat incidunt
harum magni dignissimos dolores neque a ab autem.
</div>
<div id="footer">Footer</footer>

With this:

<nav>
  <h3>Logo</h3>
</nav>
<header>
  <h1>Topic</h1>
  <h3>Sub Topic</h3>
</header>
<section>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
  Voluptatem consectetur qui rerum,
  tenetur corporis ex explicabo omnis quam,
  earum expedita ipsam pariatur natus illo,
  officiis! Corporis, reiciendis unde deserunt facilis.
</section>
<footer>
  Footer
</footer>

give me feedback in the comments.

Some Semantic Tags

Here are some semantic HTML Tags for everyday use:

nav
section
form
header
footer
aside
p
small
and so on...

How to write Semantic HTML

To write Semantic HTML, you just need to be more thoughtful.
Before you wrap that piece in a divand throw CSS at it, think 🤔,
What am I trying to to achieve?
What is this piece of content going to do?

A guide on which tags to use for what

section Use it whenever you want to group content into sections, e.g, about section, contact section.

small Use when you want to de-emphasize a piece of text.

aside Use when you have content that will be separate from the normal flow of the document.

form Use it to wrap input elements

In conclusion, Everyone can benefit from Semantic HTML and clean descriptive code in general. I hope you found this useful. Let me know in the comments.

I am a full stack NextJS developer and Technical Writer, I'm open to collaboration and discussions.
Cheers.

CSS Selectors for Beginners

Israel Rotimi — Thu, 20 Mar 2025 05:55:57 +0000

When styling a webpage, you need to know CSS and understand how to use the right selectors to achieve your desired result. Selectors help you target specific HTML elements to apply styles efficiently.

1. Universal Selector (`*`)

The universal selector applies styles to all elements on the page.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Use it sparingly, mainly for resetting default styles.

2. Element Selector (`element`)

The element selector targets all instances of a specific HTML tag.

p {
    color: blue;
    font-size: 16px;
}

You can use this for general styling of common elements (e.g., body, h1, p).

3. Class Selector (`.class`)

The class selector targets elements with a specific class.

.highlight {
    background-color: yellow;
    font-weight: bold;
}

<p class="highlight">This text is highlighted.</p>

Best for reusable styles across multiple elements.

4. ID Selector (`#id`)

The ID selector targets an element with a specific id.

#header {
    background-color: navy;
    color: white;
    padding: 10px;
}

<div id="header">Welcome to My Website</div>

Use for 'one-off' styles only.

5. Grouping Selector (`A, B, C`)

This allows styling multiple elements at once.

h1, h2, h3 {
    font-family: Arial, sans-serif;
    color: darkslategray;
}

It helps to avoid redundant styles and keep CSS clean.

6. Descendant Selector (`A B`)

Targets elements inside a specific parent.

nav ul {
    list-style-type: none;
    padding: 0;
}

<nav>
    <ul>
        <li>Home</li>
        <li>About</li>
    </ul>
</nav>

They Keep selectors short and readable.

7. Child Selector (`A > B`)

Targets direct children only.

div > p {
    color: red;
}

<div>
    <p>Styled paragraph</p>  <!-- Affected -->
    <section>
        <p>Not affected</p>  <!-- Not affected -->
    </section>
</div>

Use when only direct children need styling.

8. Adjacent Sibling Selector (`A + B`)

Targets an element immediately after another.

h1 + p {
    color: green;
}

<h1>Heading</h1>
<p>This paragraph is green.</p>
<p>This one is not.</p>

Use for styling elements right after another.

9. General Sibling Selector (`A ~ B`)

Targets all matching siblings after a specific element.

h1 ~ p {
    color: orange;
}

<h1>Heading</h1>
<p>This is orange.</p>
<p>This is also orange.</p>

Use when multiple elements after a specific one need styling.

Conclusion

Mastering selectors makes styling easier and more structured! 🚀
What do you normally use when styling?

I'm a full stack JS/TS developer open to collaboration and job offers. Feel free to reach out to me

How Flexbox makes responsive design so much easier

Israel Rotimi — Thu, 20 Mar 2025 05:13:04 +0000

Since the advent of mobile devices and the massive adoption of these devices by users, developers have had to build websites that adapt well to different screen sizes. There are various methods to employ in responsive design, but layout was the most tricky—until Flexbox.

Before Flexbox: Using Floats and Positioning

Before Flexbox, developers relied on CSS floats, inline-block, and absolute positioning to create layouts. These methods worked but often required extra markup, clearfix hacks, and tricky positioning adjustments.

Example: A Simple Two-Column Layout Using Floats

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Float Layout</title>
    <style>
        .container {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            overflow: hidden; /* clearfix to contain floated elements */
        }
        .left-column {
            width: 70%;
            float: left;
            background-color: lightblue;
            padding: 20px;
        }
        .right-column {
            width: 30%;
            float: left;
            background-color: lightcoral;
            padding: 20px;
        }
        /* Clearing floats */
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
    </style>
</head>
<body>

    <div class="container clearfix">
        <div class="left-column">Main Content</div>
        <div class="right-column">Sidebar</div>
    </div>

</body>
</html>

This method had problems:

It required clearfix hacks to prevent layout breaking.
Columns could collapse if their content exceeded the available space.
Reordering elements required complex DOM changes.

Example: Centering an Element Using `position: absolute`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Absolute Centering</title>
    <style>
        .container {
            position: relative;
            width: 100%;
            height: 100vh;
            background-color: lightgray;
        }
        .box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: teal;
            padding: 20px;
            color: white;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="box">Centered Box</div>
    </div>

</body>
</html>

While this method works, it requires absolute positioning and transform hacks, making responsive adjustments harder.

How Flexbox Simplifies Layouts

With Flexbox, you can easily create complex layouts without floats or positioning hacks. It provides properties for alignment, distribution, and responsiveness.

Example: Two-Column Layout Using Flexbox

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Layout</title>
    <style>
        .container {
            display: flex;
            max-width: 800px;
            margin: auto;
        }
        .left-column {
            flex: 2; /* Takes up more space */
            background-color: lightblue;
            padding: 20px;
        }
        .right-column {
            flex: 1; /* Takes up less space */
            background-color: lightcoral;
            padding: 20px;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="left-column">Main Content</div>
        <div class="right-column">Sidebar</div>
    </div>

</body>
</html>

Why is this better?

No need for clearfix hacks
Automatic element sizing (no need for fixed widths)
Easier responsiveness (use flex-wrap to stack columns on smaller screens)

Example: Centering with Flexbox

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Centering</title>
    <style>
        .container {
            display: flex;
            justify-content: center; /* Center horizontally */
            align-items: center; /* Center vertically */
            height: 100vh;
            background-color: lightgray;
        }
        .box {
            background-color: teal;
            padding: 20px;
            color: white;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="box">Centered Box</div>
    </div>

</body>
</html>

Why is this better?

No need for absolute positioning
No transform hacks
Works dynamically without recalculating margins

Example: Responsive Flexbox Layout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Flexbox</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .box {
            flex: 1;
            min-width: 200px;
            background-color: salmon;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="box">Box 1</div>
        <div class="box">Box 2</div>
        <div class="box">Box 3</div>
    </div>

</body>
</html>

Why is this better?

flex-wrap ensures responsiveness (boxes stack when screen shrinks)
gap provides spacing without extra margins
No complex media queries needed

Conclusion

Before Flexbox, layouts relied on floats, positioning, and inline-block hacks, making responsiveness difficult. Flexbox eliminates these problems by providing a more intuitive and powerful way to align and distribute elements.
The next time you feel overwhelmed by Responsive design, just remember flexbox.
What are your thoughts on this.

I'm a full stack JS/TS developer available for hire. Feel free to reach out to me for your next project

What building a phone number validator taught me about RegEx: FCC solution

Israel Rotimi — Sun, 23 Feb 2025 01:37:23 +0000

Hi again, It's Israel, with another blazing article. 🔥🚀
This is a continuation of the series as I document my journey to getting the FreeCodeCamp certifications.
Let's dive in.

What are Regular Expressions

Regular expressions are patterns used to match character combinations in strings. In JavaScript, regular expressions are also objects.

TBH, I've done something similar before when I started learning JavaScript, like 2 years ago. I did a form validation project following a tutorial where I validated a name, phone number, email and password using regular expressions.

So I thought, should be easy right? No. I have to give it to FreeCodeCamp, some of their projects aren't just tough, they're thorough ensuring proficiency in the skill and not just competence. That's some work they put in there.

The challenge:

I was given a task to build an app that validates US phone numbers in five different formats!
I immediately built the UI with basic styling.
Here's the code:

Do check my profile on FreeCodeCamp at: https://www.freecodecamp.org/Israel-Rotimi

In my script.js file I wrote this code:

const userInput = document.querySelector("#user-input");
const checkBtn = document.querySelector("#check-btn");
const clearBtn = document.querySelector("#clear-btn");
const resultsDiv = document.querySelector("#results-div");

// Event Listeners
checkBtn.addEventListener("click", () => {
  const input = userInput.value;
  if (input === ""){
    alert("Please provide a phone number");
  }else {
    if(validatePhone(input)){
      resultsDiv.innerHTML = `Valid US number: ${input}`;
    }else {
      resultsDiv.innerHTML = `Invalid US number: ${input}`;
    }
  }
})
clearBtn.addEventListener("click", () => {
  resultsDiv.innerHTML = "";
})

The first part defines references to the DOM elements

const userInput = document.querySelector("#user-input");
const checkBtn = document.querySelector("#check-btn");
const clearBtn = document.querySelector("#clear-btn");
const resultsDiv = document.querySelector("#results-div");

The next part has two event listeners, one performs the validation function and one clears the resultsDiv.

// Event Listeners
checkBtn.addEventListener("click", () => {
  const input = userInput.value;
  if (input === ""){
    alert("Please provide a phone number");
  }else {
    if(validatePhone(input)){
      resultsDiv.innerHTML = `Valid US number: ${input}`;
    }else {
      resultsDiv.innerHTML = `Invalid US number: ${input}`;
    }
  }
})
clearBtn.addEventListener("click", () => {
  resultsDiv.innerHTML = "";
})

Inside the validatePhone function, I define a regular expression, test the string against the regex using built-in method regExp.test and return the result.

function validatePhone(num){
  const re = /^(1\s?)?((\(\d{3}\)|\d{3})\s?-?\d{3}\s?-?\d{4})$/;
  const result = re.test(num);
  return result;
}

as simple as it looks, this part took 80% of my time!
I had to tweak and tweak till it passed all tests, And trust me, when I say they're thoroughly tested.

Let's break the regex down: /^(1\s?)?(($\d{3}$|\d{3})\s?-?\d{3}\s?-?\d{4})$/
^(1\s?)? This part allows for an option '1' with without white space. The caret ^ indicates that this pattern must start a string.
() is used to group things together, here we're grouping the '1' and white space characters together.
? is used to mark optional characters. In our string it is used to make 1 optional
(($\d{3}$|\d{3}) this part matches the first three digits with or without parentheses
| is used as literal or as in (($\d{3}$ | \d{3})
\d matches any digit
we use backslash to escape the bracket $ and $
{} is a quantifier, it specifies how much it should repeat the character before it.
\s?-? matches a white space or dash optionally
$ this ensures the string ends with the characters specified before it.

And that is my solution. Please share your experience with regular Expressions in the comments

How to find a palindrome: my FCC solution

Israel Rotimi — Sun, 23 Feb 2025 00:03:22 +0000

Hi there, 👋
As of the time of writing, I only have one FreeCodeCamp Certificate, Responsive web design with HTML and CSS.
(It's on my LinkedIn page). That doesn't accurately reflect my skills cause I use more JavaScript these days. So, I'm on a quest to get the other FCC (FreeCodeCamp) certifications to increase my skill and credibility as a developer.

This is a post in a new series I'll be putting up. My quest to get the remaining FCC certs (or as much as I can get) and add to my portfolio. I know FCC certs are not professionally recognized but they are credible and you get to build projects that can be recognized (depending on how you build them). Okay, enough intro, let's dig in.

The problem:

I'm on the home page for the JavaScript Algorithms and Data Structures Certification.

And the first required project is a to build a palindrome checker.

What is a Palindrome?

A palindrome is a word or phrase that can be read the same way forwards and backwards, ignoring punctuation, case, and spacing.

How I approached the problem

It didn't seem too hard and I thought out the process (and tested it on VScode) before coding the solution.
First, you define your input and output like so:


    <div id="wrapper">
        <h1>Palindrome Checker</h1>
        <form action="">
            <input type="text" id="text-input" name="text-input">
            <button id="check-btn">Check</button>
            <p id="result"></p>
        </form>
        <div class="info">
            <p>A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.</p>
        </div>
    </div>

You can add styling, these are the styles I used:

#wrapper {
    width: 100vw;
    height: 100vh;
    background-color: #1f153d;
    overflow: hidden;
    color: white;
    margin: auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
form {
    text-align: center;
    padding: 10px 20px;
    border-radius: 10px;
    background-color: white;
    color: black;
}
button {
    background-color: #1f153d;
    padding: 10px;
    border-radius: 5px;
    color: white;
}
.info {
    padding: 10px;
    margin-top: 20px;
    border-radius: 10px;
    background-color: green;
    width: 50%;
}

It should look like this:

For the functionality, we reference all DOM elements we'll be using:

const textInput = document.getElementById('text-input');
const checkBtn = document.getElementById('check-btn');
const result = document.getElementById('result');

Then listen for clicks on our button:

checkBtn.addEventListener('click', () => {})

inside the function we ensure the input is not empty, then we call the function isPalindrome() to check if the string is a palindrome.

checkBtn.addEventListener('click', () => {
    const text = textInput.value
    if (text === "") {
        alert("Please input a value")
    }
    if (isPalindrome(text)) {
        result.innerHTML = `${text} is a palindrome`;
    } else {
         result.innerHTML = `${text} is not a palindrome`;
    }

});

Let's implement the isPalindrome function below.

function isPalindrome(text) {
    // Convert to lowercase to get rid of casing
    text = text.toLowerCase();
    // Split the string by all white space characters into an array 
    text = text.split(/\s+/);
    // Join the array to get rid of the white space
    text = text.join("");
    // Using this regular expression, remove all punctuation marks
    text = text.replace(/[\.\(\)\[\]\{\}<>_,!?"':;-]/g, "");
    // Finally perform your test
    let reversedText = text.split("").reverse().join("");
    return reversedText === text; // return the result
}

The function first convert's the string to lowercase, it then removes the white space and the punctuation. It then reverses the string and compares the reversed string with the original.
If you spells the same way, the function returns true else it returns false.

So, that was how I completed the first of 5 certification projects required for the FCC certificate. If you've taken the course or earned the certs, let us know in the comments. You've got a different view let us know in the comments.

I'm a Full Stack JavaScript Developer who's job searching, open to freelance and working on passion projects. Want to learn more about me, check my LinkedIn, also check out my projects on GitHub

MongoDB is a business choice

Israel Rotimi — Sat, 15 Feb 2025 08:47:10 +0000

Yep, just discovered it.

In the ever-evolving landscape of web development, selecting the right database is crucial for both performance and scalability. As a frontend developer specializing in Next.js, ReactJS, and TailwindCSS, I recently embarked on integrating a backend into a dashboard application I initially built using a mock API. This journey led me to explore MongoDB, and the experience has been enlightening.

I've always considered myself a MERN stack developer although I had never actually touched MongoDB, that is, until now.

I just completed a task I was given as an assesment for a for a frontend job, (find out more about it here), where I built a dashboard app with React and pulled data from a mock API.
Since I was done with that I decided to build a backend for it and turn it into a portfolio project. That was how I dabbled into MongoDB

I used MongoDB atlas for my project. I went on to designing the Schema for my backend using mongoose and TBH, it's pretty flexible. Scalability is built in from the get go.
The fact that you can define your data in JSON-like structures is just awesome as it gives JavaScript devs a native feel.
Unlike in SQL DBs where you have to define tables for different datasets and then join the tables which can get complicated quickly if your application's data doesn't have much shape.

Schema Design: A Comparative Insight

In traditional SQL databases, structuring data for an application that includes users, blogs, comments, and likes would require multiple tables and complex JOIN operations. For instance, you'd need separate tables for users, blogs, comments, and likes, each with defined relationships and constraints.

In contrast, MongoDB's document-oriented approach allows for embedding related data within a single document. This means that a blog post can contain its comments and associated likes directly within its document structure. Such embedding reduces the need for JOIN operations, potentially enhancing read performance and simplifying data retrieval.

Say, for instance, my I have an App where users can write blogs and comment on blogs and rate them. In SQL DBs, I will need one table for users, one for blogs, one for comments:

CREATE TABLE Users (
    id INT PRIMARY KEY AUTO_INCREMENT,
    username VARCHAR(255) UNIQUE NOT NULL,
    -- ... other user fields
    createdAt TIMESTAMP,
    updatedAt TIMESTAMP
);

CREATE TABLE Blogs (
    id INT PRIMARY KEY AUTO_INCREMENT,
    title VARCHAR(255) NOT NULL,
    content TEXT NOT NULL,
    author_id INT NOT NULL,  -- Foreign key referencing Users
    createdAt TIMESTAMP,
    updatedAt TIMESTAMP,
    FOREIGN KEY (author_id) REFERENCES Users(id)
);

CREATE TABLE Comments (
    id INT PRIMARY KEY AUTO_INCREMENT,
    content TEXT NOT NULL,
    user_id INT NOT NULL,  -- Foreign key referencing Users
    blog_id INT NOT NULL, -- Foreign key referencing Blogs
    createdAt TIMESTAMP,
    updatedAt TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES Users(id),
    FOREIGN KEY (blog_id) REFERENCES Blogs(id)
);

CREATE TABLE Likes (
    id INT PRIMARY KEY AUTO_INCREMENT,
    user_id INT NOT NULL, -- Foreign key referencing Users
    comment_id INT NOT NULL, -- Foreign key referencing Comments
    createdAt TIMESTAMP,
    updatedAt TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES Users(id),
    FOREIGN KEY (comment_id) REFERENCES Comments(id)
);

Then I will have to link all of them together using Joins.
Not bad, but in MongoDB:

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const userSchema = new Schema({
  username: { type: String, required: true, unique: true },
  email: { type: String, required: true, unique: true },
  password: { type: String, required: true }, // Securely hash this in your app
  blogs: [{
    title: { type: String, required: true },
    content: { type: String, required: true },
    comments: [{
      content: { type: String, required: true },
      user: { type: Schema.Types.ObjectId, ref: 'User', required: true },
      likes: [{ user: { type: Schema.Types.ObjectId, ref: 'User' } }],
      timestamps: true
    }],
    timestamps: true
  }]
}, { timestamps: true });

const User = mongoose.model('User', userSchema);

module.exports = { User };

Why MongoDB Stands Out

Several features make MongoDB a compelling choice for developers:

Flexibility: MongoDB's schema-less design accommodates evolving data models without the need for extensive migrations.
Scalability: Built-in sharding and replication support horizontal scaling, ensuring the database can handle increased load as applications grow.
Performance: Storing data in BSON (Binary JSON) format allows for efficient data retrieval and manipulation, which is particularly beneficial for applications requiring high throughput.
Developer-Friendly: The alignment with JSON and JavaScript ecosystems streamlines the development process, reducing the cognitive load when switching between frontend and backend development.

Conclusion

Integrating MongoDB into my project has been a transformative experience. Its alignment with modern JavaScript frameworks and its flexible, scalable nature make it an excellent choice for developers looking to build robust applications efficiently. For those considering a transition from traditional relational databases or starting new projects, MongoDB offers a compelling blend of performance and ease of use.

Please share your thoughts and opinions in the comments below.

*Follow me on LinkedIn: https://linked.com/in/israel-rotimi and check out my other posts. I'm open to Job offers and freelance work. Feel free to contact: izzyrotimi@gmail.com *

Struggling with JavaScript? Read this

Israel Rotimi — Fri, 24 Jan 2025 23:17:39 +0000

So you've learned HTML and CSS, even built a simple website and now you're learning JavaScript. It's been weeks now, even several months and you barely understand a thing! I've been there.

In this article, I will show you how to learn JavaScript fast and avoid burning out before you even start.

Why you struggle with JavaScript

JavaScript can feel like a steep hill to climb, especially when compared to HTML and CSS. Here are some common reasons why you might be struggling:

Too much information, too fast: JavaScript has a vast ecosystem with endless tutorials, frameworks, and libraries. It’s easy to feel overwhelmed.
Syntax and concepts: If you’re new to programming, concepts like closures, promises, or async/await can seem like a foreign language.
Not enough practice: Simply watching tutorials or reading guides isn’t enough. Without practical application, the concepts won’t stick.
Skipping the basics: Diving into advanced topics without a solid foundation can leave you confused and frustrated.

The right approach

If you want to learn JavaScript effectively, you need a structured approach that prioritizes practice and builds your confidence step by step. Here’s what works:

Master the fundamentals: Focus on understanding variables, data types, loops, functions, and conditional statements before moving to advanced topics.
Learn incrementally: Tackle one concept at a time. Don’t jump into frameworks or libraries before you’re comfortable with vanilla JavaScript.
Practice, practice, practice: Write code every day. Solve small problems, build simple projects, and review your solutions.
Test your understanding: Use test cases to validate your code. This not only improves your problem-solving skills but also prepares you for real-world scenarios.
Work on projects: Build practical and challenging applications that integrate multiple concepts. Projects give you a sense of achievement and look great on your portfolio.

Suggested roadmap

Here’s a four-week roadmap to mastering JavaScript:

Week 1: Fundamentals

Learn about variables, data types, and operators.
Practice using loops and conditional statements.
Write functions and understand scope.
Suggested exercise: Write a function to check if a number is prime.

Week 2: ES6+ Features

Learn about let/const, template literals, and arrow functions.
Understand destructuring, spread/rest operators, and modules.
Get comfortable with promises and async/await.
Suggested exercise: Write a function to fetch data from an API using async/await.

Week 3: Arrays, Objects, and Text

Master array methods like map, filter, and reduce.
Work with objects: create, update, and loop through them.
Practice string manipulation techniques.
Suggested exercise: Create a function to count the occurrences of each word in a string.

Week 4: Build Projects

Consolidate your knowledge by building real-world projects:
- A to-do list app.
- A scientific calculator.
- A simple weather app using an API.
Use test cases to validate your code.
Suggested exercise: Build a scientific calculator that uses all the math functions you’ve learned.

If you're a beginner I suggest learning some theory and actively practicing what you learned.
To help you follow this roadmap, I’ve created a JavaScript Learning App. This app provides interactive exercises, test cases, and guided projects to take you from beginner to job-ready in four weeks. Give it a try and start your JavaScript journey today!

Participating in a hackathon: My experience

Israel Rotimi — Fri, 10 Jan 2025 04:10:00 +0000

When you have nothing to lose, then you should probably try

I participated in the JSMastery hackathon organized by JSMastery for reaching 1 million subscribers on YouTube.

I spent one week trying to come up with an idea, I then started developing the idea 5 days to submission deadline😰.

I used AI to give me a head start then developed from there. TBH, AI helped me meet the deadline by not allowing me waste time weeding in the dark.

The hackathon's theme was Build and Deploy. So you could build anything, so long as you deploy it. So I built an online game portal where you can find and play games online for free.
I used the freetogame API which only had PC games. I couldn't find a free service for mobile games so I stuck with what I had.

So, the challenge was to build a frontend that displays these games in a user friendly way. Easy right? no, not at all.
I used Next.js to build this, so I was becoming more cconversant with the framework in the process.

When it came to implementing search functionality, I blacked out.
I didn't know to somehow capture the state of the search term nd query the API. cause state is native to the component it's used in. But I overcame that hurdle.

Long story short, everything went well... till I decided to deploy it, then all hell let loose😱. Vercel rolled out a ton of bugs for me. I solved them one by one but one wan't clear and seemed impossible to solve

Error: in categories/categoryTabs.tsx type object doesn't match type Promise

I tried fixing it with AI but everything AI gave did not work. Instead it gave this error

Error: ...PageProps is missing the following properties from Promise

I tried all I could, went back and forth with the AI to no avail.
I submitted my project with the URL to the live site which wasn't live yet and the GitHub repo, risking being disqualified. I submitted few hours to the final deadline.
To add to the pain we were having a power outage (It's common where I come from) the night I submitted and the night before so I was forced to do the debugging and submission on my tablet.

Next morning, power was restored.I then decided to setup copilot within VScode since it was now free. I told it my problem it was the same things as before, so I gave it my code as reference and told it the others didn't work. It then offered the fix which was to treat the Params object as a Promise:
before

const page = async ({params}: { params: { category: string } }) => {
  console.log(params)
    const {category} = await params;
    const games = await fetchGamesByCategory(category);
...
}

after fix

//Change the the params type to a Promise instead of an
//object, and then await the params to get the category
const page = async ({params}: { params: Promise<{ category: string }> }) => {
  console.log(params)
    const {category} = await params;
    const games = await fetchGamesByCategory(category);
...
}

And that solved it.

Key takeaways:

Use AI in ideating and debugging
Install GitHub copilot, it's free!
Embrace the process
Don't give up.

You can check out the repo with the full git history as well as the live site and tell me what you think about it.

What Building💻 a WebGL App Taught Me About Debugging

Israel Rotimi — Thu, 12 Dec 2024 21:17:44 +0000

Painful Insights from a more than a month-long journey

Hi there 👋,
I'm Israel Rotimi and I'm a JavaScript developer, I specialize in all things JavaScript from frontend to backend, feel free to reach out to me.

So, I was building a website for myself. It's a portfolio website that incorporates animations into the design. So I was actually following a tutorial on youtube on the same project, then I ran into an error I couldn't seem to solve when I added a 3d object to the scene.

The object was rendered using three.js and the stack was Next.js.
Everything worked fine until I added the object.
It would compile successfully in the terminal and will start rendering in the browser, then all of a sudden throw this screen.

My heart stopped💔. I thought does my computer not support webgl!
I can't afford another right now, then I thought webgl was said to be supported a variety of systems why shouldn't mine support it. I was using chrome updated to the latest version, so I tried to see if there was anything in the code I could do to solve it.
I then searched through all the settings looking for webgl, all I saw was this setting: "Use graphics acceleration where possible" and it was turned on. So I abandoned the project for the next few weeks.

After being motivated again, I decided to take a look at the project. I asked claude ai for help and it suggested isolating the suspected cause. I did that and same error then I used firefox dev instead of chrome and it worked without the error. I later tried it on edge but it gave the same error as in chrome.

I continued development with firefox dev but was worried my project couldn't run on other browsers. I searched through the settings on edge and found the same setting I saw on chrome: "Use graphics acceleration where possible" and it was enabled. I disabled the setting to see what would happen.

To my greatest surprise, the app ran without the error. I did the same on chrome and same result.

Here's what I learned from this journey

Be systematic in your debugging approach: Isolate the problem, test different browsers (where that applies), test across multiple use cases
Don't just give up too easily; It's not the end of the world
When you feel stuck, take a break, then come back refreshed
Lastly, be curious, experiment. I wouldn't have known why my app wasn't working if I didn't change the setting

BTW, I'm still working on that project but you can check it out here: https://github.com/israelrotimi/my-3d-nextjs-portfolio If you do please leave a ⭐ and leave your thought's about that in this thread as well. Thanks

Please share your thoughts and takeaways. I'd like to know if anyone has been in a similar situation. Kindly share

DEV Community: Israel Rotimi

New devs with real projects — are you struggling to get hired too?

My Debut as a Backend Developer: How I deployed a URL Shortener API

The challenge

My solution

Challenges I faced

Next Steps

Make an interactive drum using the HTML Audio API

Prerequisites

The Audio API

API methods

Practical: Building an interactive drum

The project: Web Drums

How to write Semantic HTML

What is Semantic HTML

Why Semantic HTML

Some Semantic Tags

How to write Semantic HTML

A guide on which tags to use for what

CSS Selectors for Beginners

1. Universal Selector (*)

2. Element Selector (element)

3. Class Selector (.class)

4. ID Selector (#id)

5. Grouping Selector (A, B, C)

6. Descendant Selector (A B)

7. Child Selector (A > B)

8. Adjacent Sibling Selector (A + B)

9. General Sibling Selector (A ~ B)

Conclusion

How Flexbox makes responsive design so much easier

Before Flexbox: Using Floats and Positioning

Example: A Simple Two-Column Layout Using Floats

Example: Centering an Element Using position: absolute

How Flexbox Simplifies Layouts

Example: Two-Column Layout Using Flexbox

Why is this better?

Example: Centering with Flexbox

Why is this better?

Example: Responsive Flexbox Layout

Why is this better?

Conclusion

What building a phone number validator taught me about RegEx: FCC solution

What are Regular Expressions

The challenge:

How to find a palindrome: my FCC solution

The problem:

What is a Palindrome?

How I approached the problem

MongoDB is a business choice

Struggling with JavaScript? Read this

Contents:

Why you struggle with JavaScript

The right approach

Suggested roadmap

Week 1: Fundamentals

Week 2: ES6+ Features

Week 3: Arrays, Objects, and Text

Week 4: Build Projects

Participating in a hackathon: My experience

Key takeaways:

What Building💻 a WebGL App Taught Me About Debugging

Painful Insights from a more than a month-long journey

1. Universal Selector (`*`)

2. Element Selector (`element`)

3. Class Selector (`.class`)

4. ID Selector (`#id`)

5. Grouping Selector (`A, B, C`)

6. Descendant Selector (`A B`)

7. Child Selector (`A > B`)

8. Adjacent Sibling Selector (`A + B`)

9. General Sibling Selector (`A ~ B`)

Example: Centering an Element Using `position: absolute`