DEV Community: Ayodeji Akintubi

How to fix "react-scripts" is not recognized as an internal or external command

Ayodeji Akintubi — Mon, 08 Sep 2025 11:42:33 +0000

This error means react-scripts isn’t installed or isn’t properly accessible. Some solutions are:

a. Install react-scripts

The most common cause of this error is the absence of react-scripts. Install it:
npm install react-scripts
or
yarn add react-scripts

b. Check if you’re in the correct directory

Ensure you’re running the command from the root directory of your React project, where package.json and other related files are located. If you’re not in the root directory, navigate there with this command:
cd your-react-project-folder

c. Reinstall node_modules

Sometimes, a corrupt installation may trigger the problem. Fix it by deleting existing installations with this command:
rm –rf node_modules package-lock.json

Then, reinstall everything:
npm install

d.** Check your package.json**

Ensure react-scripts is listed in dependencies:

{
“dependencies”: {
“react-scripts”: “^5.0.1”
},
“scripts”: {
“start”: “react-scripts start”
}
}

If react-scripts exists, but it’s not version “^5.0.1”, but something like this:

install react-scripts as a dependency with this command:
Npm install react-scripts
Or
Yarn add react-scripts

The command will add react-scripts in package.json and install it in node_modules

After the installation, your package.json should look like this:
{
“dependencies”: {
"react": "^19.1.1",
"react-dom": "^19.1.1",
"react-scripts": "5.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}}

Why does ^0.0.0 happen?

This error occurs when:

npm cache corruption
Network issues during installation
Interrupted installation process
Version resolution conflict If the solutions above don’t fix the problem, recreate the project with: Npx create-react-app my-new-app

Then,
Cd my-new-app

After reinstalling and recreating the project, the command should work correctly.

If this helps you fix the error, kindly share your experience in the comment section.

Background image credit: Infy SKY

How to Solve "Error Getting Location: Only Secured Origins are Allowed" Error in JavaScript

Ayodeji Akintubi — Wed, 08 Nov 2023 07:21:01 +0000

In the dynamic landscape of web development, harnessing the power of geolocation is a common requirement for creating interactive and personalized user experiences.

However, when attempting to access location information through JavaScript, you may encounter a common stumbling block – the "Error Getting Location: Only Secure Origins are Allowed."

This error message signals a security measure implemented by browsers to restrict geolocation services to secure (HTTPS) origins.

In this guide, we will delve into the intricacies of this error, understand why it occurs, and explore practical solutions to navigate through this challenge.

By the end, you'll be equipped with the knowledge to seamlessly integrate geolocation services into your web applications, ensuring a secure and reliable user experience.

Let's unravel the mystery behind this error and discover the key strategies to overcome it in JavaScript.

What Triggers the Error?

The "Error Getting Location: Only Secured Origins are Allowed" in JavaScript is triggered as a security measure implemented by web browsers. This error specifically restricts the use of the Geolocation API to secure origins, which generally means websites served over HTTPS (Hypertext Transfer Protocol Secure).

1. Non-Secure Origins (HTTP)

The most common trigger is attempting to access geolocation services from a non-secure origin, i.e., a website served over HTTP. Browsers enforce this security policy to protect users' sensitive location data.

2. Mixed Content Policy

If your website is served over HTTPS but includes resources (such as scripts, images, or stylesheets) loaded over HTTP, it might still trigger the error. Browsers follow a mixed content policy, and any non-secure resource within a secure context can lead to a geolocation error.

3. Localhost Exception

While developing locally, accessing geolocation on localhost is usually allowed, even without HTTPS. However, some browsers may still enforce HTTPS even on localhost in certain cases.

Why the Restriction?

1. Security and Privacy

Geolocation data is sensitive as it can pinpoint a user's physical location. Requiring a secure connection ensures that this information is transmitted over an encrypted channel, safeguarding it from potential eavesdropping or man-in-the-middle attacks.
Data Integrity:

HTTPS helps maintain the integrity of the data exchanged between the user's device and the server. Without encryption, there is a higher risk of data tampering during transmission.

Solutions

1. Use HTTPS

The primary solution is to serve your website over HTTPS. Obtain an SSL/TLS certificate for your domain and configure your web server to enable secure connections.
Local Development:

During local development, geolocation access on localhost is often permitted. However, some browsers may enforce HTTPS even locally. Ensure that your development environment is configured appropriately.

2. Avoid Mixed Content

If your website is served over HTTPS, ensure that all resources, including scripts, images, and stylesheets, are also loaded securely. Address any mixed content issues to prevent the geolocation error.

3. Install Node.JS

A surefire way to solve this error is to install Node.JS on your PC and launch your application via it.
visit https://nodejs.org/en to download it

When I encountered the problem, I chose the "Recommended For Most Users" option and installed it in no time.

When you've successfully installed Node.JS, relaunch the application and you're good to go.

Open your terminal or Command prompt and run the following commands:
npm install -g http-server

Navigate to your project directory

cd /path/to/your/project

Find your project folder and launch it

Understanding these triggers and implementing secure practices will help you overcome the "Error Getting Location: Only Secured Origins are Allowed" in JavaScript, ensuring a secure and reliable geolocation service for your users.

How to Create a Draughts Game Board with HTML, CSS, and JavaScript

Ayodeji Akintubi — Mon, 28 Aug 2023 22:55:49 +0000

Otherwise known as Checkers, draughts "is a group of strategy board games for two players which involve diagonal moves of uniform game pieces and mandatory captures by jumping over opponent pieces."

You can create an amazing draughts game board with HTML, CSS, and JavaScript.

HTML Session

In the HTML section, create the board's skeleton with the table tag and its elements.

The draughts board consists of 64 cells with alternating black and white colors.

<tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>

<tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>

<tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>

<tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>

<tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>

<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>

  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>

  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>

CSS Section

Define the draught's properties such as the board size, cells, and color in this section.

table {
border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 3px 5px;
  width: 50px; 
  height: 50px;
}

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}

.game-board {
border-collapse: collapse;
border: 2px solid #000;
}

.cell {
width: 50px;
height: 50px;
text-align: center;
vertical-align: middle;
font-size: 24px;
cursor: pointer;
}

.black {
background-color: #000;
color: #fff;
}

JavaScript Section

Here is where you define the alternating black and white colors.

let table = document.getElementById("game-board");

let rows = table.getElementsByTagName("tr");

for (let i = 0; i < rows.length; i++) {
let cells = rows[i].getElementsByTagName("td");

for (let j = 0; j < cells.length; j++) {
if ((i + j) % 2 === 0) {
cells[j].style.backgroundColor = "black";
} else {
cells[j].style.backgroundColor = "white";
}
}
}

Conclusion
You can effortlessly create the a checkers board with the above code

Webflow or WordPress: A Comprehensive Comparison of Two Web Development Titans

Ayodeji Akintubi — Sun, 13 Aug 2023 20:50:59 +0000

In the ever-expanding web development universe, two towering behemoths stand as beacons of innovation and creativity: Webflow and WordPress.

Picture this: On one hand is a web development platform that offers a canvas where design dreams come alive with a wave of a virtual brush, while on the other hand is a platform that transforms code into a symphony of functionalities through an avalanche of performance-enhancing plugins.

Welcome to the ultimate showdown – a tale of two titans vying for the throne of the best web development platform.

So, tighten your seatbelts as we embark on a journey through the intricacies, possibilities, and unique worlds of Webflow and WordPress where you'll find satisfying answers to some common questions such as Which is better, Webflow or Wordpress? What is easier, Webflow or WordPress?.

By the end, you'll be able to make an informed decision when contemplating which of the two is ideal for your next web development project.

Webflow: The Modern Canvas of Design

What is Webflow?

Webflow is a new cloud-based Content Management System (CMS) headquartered in San Francisco, USA. Founded in 2013, the paid software as a service (SaaS) design tool operates in the web browser and allows smooth and swift website or online store creation.

Webflow is gradually shifting the web development paradigm with its emphasis on no-code, visual design, low-code, and efficient workload while offering them a visual interface to design and build websites without extensive coding knowledge.

Webflow's Outstanding Features

Some outstanding features that are driving Webflow's popularity through the roof are:

Visual Design and Responsive Design: Webflow's standout feature lies in its visual design capabilities. Designers can create pixel-perfect layouts using the intuitive drag-and-drop interface.

Additionally, Webflow allows for creating responsive designs, ensuring websites look and function seamlessly across various devices.

No-Code/Low-Code Flexibility: Webflow empowers users who are not well-versed in coding to build complex websites. With its user-friendly interface and pre-built components, beginners can dive into web development without the steep learning curve of traditional coding.

CMS and E-Commerce: Webflow offers a built-in content management system (CMS) that facilitates content creation and management. While it doesn't offer robust extensions and plugins as WordPress, it provides essential content management features.

Its ever-improving e-commerce capabilities make it a viable option for small online stores, freelancers, and other professionals who are looking for the best alternative to WordPress.

Hosting and Performance: Webflow offers hosting directly within the platform, ensuring smooth integration of design and hosting. Additionally, Webflow's hosting is optimized for speed and performance, which contributes to faster loading times.

Pros

• Powerful visual editor.
• Plugins aren’t necessary.
• Paying customers have access to direct customer support.
• Impressive performance optimization.
• Amazing on-site and on-page SEO.

Cons

• It can be more expensive than WordPress.
• Low third-party integration.
• Smaller plugin library.
• Its flexible editor can be overwhelming

Target Audience

This great web development tool is ideal for small business owners, solopreneurs, web design agencies, freelance web designers, tech companies, and large brands.

On the other side of the spectrum stands WordPress, a longstanding and highly popular content management system that has powered millions of websites.

WordPress: The Versatile Powerhouse

What is WordPress?

WordPress is a highly popular and longstanding CMS that has powered millions of websites.

WordPress' Outstanding Features

WordPress currently powers most of the world's websites, thanks to its impressive features that include:

Customization and Plugins: WordPress is renowned for its unparalleled customization options. With a vast library of easily-integratable plugins and themes and plugins, users can add performance-boosting functionalities such as SEO optimization.

Membership sites and forums can also be added to a website via the appropriate plugins. This extensibility has contributed to its widespread adoption across diverse industries.

Community and Support: WordPress can boast a vast user community where users can access a wealth of tutorials, resources, and forums. The active community also assists with troubleshooting and finding relatively straightforward solutions to issues. This is one of the fundamental factors behind WordPress’s growth and acceptance.

SEO and Blogging: WordPress has more robust SEO capabilities, thanks to its array of integrations and SEO plugins and integrations which makes it popular among bloggers who appreciate SEO-friendly structure.

Pros

• Relatively cheap.
• Responsiveness guaranteed.
• Modular.
• SEO-friendly
• Ideal for an array of websites.

Cons

• Too much plugins.
• Security vulnerabilities.
• Coding knowledge is required.

Webflow vs WordPress Comparison at a Glance

Security Webflow has built-in security features that make it better secured than WordPress while developers need to integrate appropriate plugins into a WordPress site to boost its security.
Themes/Templates Webflow offers over 1,000 themes or templates to choose from while WordPress offers over 10,000 templates.
Customization As a no-code tool, Webflow is easily customizable while you need plugins to customize a WordPress site. The plugins can sometimes be limited.
Ease of Setup Webflow is super easy to set up, one of the major reasons it’s the preferred choice of non-coders while you need some coding skills to set a WordPress site up.
SEO Optimization Webflow offers limited automated SEO optimization while appropriate plugins are required for SEO optimization on WordPress websites.

When to Choose Webflow:

• If you have zero or little coding skills and experience.
• You want a swift web development and launch.
• You don’t want to outsource your web development.

When to Choose WordPress:

• You have coding experience.
• You can afford to outsource web development.
• You are familiar with plugins and their integration.

Which is Right for You?

Choosing between Webflow and WordPress ultimately depends on your project's scope, your skillset, and your goals. If you're a designer seeking creative freedom without getting deep into coding, Webflow could be your go-to solution.

On the other hand, if you're looking for a versatile platform that can accommodate complex websites and offers extensive plugin options, WordPress might be the better choice.

It's important to consider factors such as the learning curve, desired features, scalability, and budget. While Webflow provides a streamlined design experience, WordPress stands as a reliable powerhouse with a massive community and countless extensions.

The Verdict

In conclusion, both Webflow and WordPress have their distinct advantages, catering to different types of users and projects. Carefully evaluating your needs and goals will guide you toward the platform that best aligns with your vision for your website.

Whichever platform you choose, the evolving landscape of web development ensures that both Webflow and WordPress will continue to shape the digital world in significant ways.

Image credit: WPBeginner

How to Create an Engaging and Animated Menu Bar with HTML and CSS

Ayodeji Akintubi — Tue, 01 Aug 2023 18:39:28 +0000

One of the surefire ways to enhance user experience on your website is by creating engaging and user-friendly navigation menus .

An animated menu bar not only makes navigation intuitive but also visually appealing.

You can create impressive and captivating animated menu bars that will keep users glued to your website.

In this tutorial, we will walk you through the step-by-step process of building a sleek and animated menu bar using HTML and key CSS concepts such as transitions.

We will cover key concepts like CSS transitions, transformations, and pseudo-classes to bring life to your navigation.

By the end of this tutorial, you'll have the knowledge and skills to design your animated menu bar that can elevate your website's overall look and feel.

So, let's dive into the world of web animations and create an eye-catching animated menu bar that will leave your visitors impressed!

HTML
In the HTML page, you lay the foundation for the menu. Here is where you will create the appropriate menu for your website.

For instance, if you intend to create a menu with the About Us, Home, and other necessary menus, you can write this code:

Menu Bar

        <ul>
            <li><a href="#" >Home</a></li>
            <li><a href="#"> About Us</a></li>
            <li><a href="#"> Services</a></li>
            <li><a href="#"> Blog</a></li>
            <li><a href="#"> Contact Us</a></li>
        </ul>

In the above code, the code connects the HTML file with the CSS file to style the code.

Without the CSS code, here's the created menu bar:

The menu above is far from being intuitive, sleek, and visually appealing.

For the desired effect, let's style the menu via our CSS.

*CSS *

For easy connection, create a .css file and name it style.css or whatever catches your fancy. Note, though, that the css file name must correspond with the name in the html section.

Save this file in the same location or folder with your html file. Otherwise, the css and html files won't connect.

Then, add this code:

/The body section removes default borders and margins to allow you lay the menu as you desire/

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

/This section removes the default bulleted listing/

   ul {
    list-style-type: none; 
     background-color: #333;
     overflow: hidden; 
        }

/The float element aligns the menu to the right. You can change it to left if you wish to create a left-aligned menu/

   li {
    float: right; 
       }

/Here is where you style each anchor. The text-decoration element removes the default menu underline./

   li a {
    display: block; 
    color: white; 
    text-align: center;
    padding: 14px 16px; 
    text-decoration: none;
   }

/Here is where the real animation takes place. The transition-duration element changes the menu color within 3 seconds while the border-radius element changes the menu shape/

   li a:hover{
    background-color: yellow;
    transition-duration:  3s;
    width: 200px;
    border-radius: 75% 25%;
    color: black;
   }

** Final Result
**

Each menu changes background color, shape, and text color when you hover over it.

Conclusion
You have effortlessly created an animated menu bar. Tweak the code and see what each line of code does or according to your preference.

How I Transitioned into Tech at 40: The Journey and the Challenges

Ayodeji Akintubi — Sat, 22 Jul 2023 16:52:20 +0000

From toiling as a well digger, navigating the streets as a commercial motorcyclist, to molding blocks under the scorching sun, my life was a relentless struggle for meager rewards.

At 40, I stood at a crossroads, seeking a new path to transform my life. Living on #30,000 (about $15 then) as a family man was depressing. I was living from hand to mouth.

A simple Facebook post changed the narrative for good.
Embracing an audacious decision, I embarked on a remarkable journey into the world of technology.

The transition from manual labor to the realm of coding and innovation was both exhilarating and daunting.

Amidst the odds, I braved the challenges of poor electricity and network connectivity, determined to rewrite my destiny and unravel the untapped potential of Tech.

Let me share my story.

Fate's Twist: From Block Maker to Tech Writer

In 2010, life's circumstances led me to Ibadan, West Africa's largest city, in search of a better living. To make ends meet, I embraced manual block making, thinking it would be a temporary solution.

However, it became my sole income source, alongside well digging and commercial motorcycling.

Then, a simple Facebook post altered my path forever. At 40, I stumbled upon a chance to become a freelance writer. Despite doubts and imposter syndrome, I seized the opportunity, messaging the poster with my basic Itel 2020 phone. He scheduled a Facebook meeting for all applicants.

About 30 minutes before the meeting time on the interview day, I was tens of kilometers away from home Only God knows how I covered that distance in 45 minutes against the regular 1 hour.

After the interview, the employer gave me a chance because I had "the potential but rusty." He gave me a lifeline on a platter of gold and I took it with both hands and a grateful heart.

Although obstacles such as poor electricity, network connectivity, and family responsibilities tried to hinder my journey, determination prevailed.

My mentor guided me into a new career as I approach 41. Today, I thrive as a technical writer, having delved into web development along the way, a career twist that was way beyond my wildest imagination some 7 years ago.

The blocks I once molded are now stepping stones to a brighter future as a web developer cum technical writer.

The highlight of my Tech career was when one of my Tech articles made it to Googles first page. It was a dream come true

The journey into Tech at 40 reshaped my life and unleashed newfound possibilities. Despite the obstacles of inadequate electricity and network woes, I conquered them with determination and perseverance.

Today, I stand as a testament to the transformative power of embracing change and pursuing a passion that defies age and circumstances.

Nothing should stand on your way to greatness. Turn those obstacles into stepping stones.

Don't let the sky be your limit but your springboard to greater heights.

Remember, na who give up fuck up (Don't give up but keep trying until you make it).

Unlock Your Potential with a Click: Streamline Your Website with a Downloadable Resume

Ayodeji Akintubi — Mon, 12 Jun 2023 22:01:59 +0000

One of the most effective ways to win a potential client over is through an impressive resume detailing your skillset, years of experience, portfolio, and other necessary information that proves your expertise.

Reaching prospective clients with your resume is a lot easier in this tech age. Simply integrate a downloadable resume into your portfolio website and you're good to go.

This article provides fast step-by-step guide to include a downloadable resume into your website.

Step 1: Prepare and store your resume

Prepare your resume and save it where intending users can access it easily. Some common storage places are Dropbox and other cloud storage facilities and servers.

Step 2: Generate a download link

If Dropbox,

Log in into your Dropbox.
Click on the Resume.
Click on "Create link and copy"
Copy the generated link
Insert this code in your index file: Download Resume PS: Replace “path/to/your/resume.pdf” with the generated Dropbox link

Create an CSS file and style the anchor tag. For instance, add this code in your CSS file:

a.download-link {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
text-decoration: none;
border-radius: 5px;
font-weight: bold;

Result:

Tested and Proven Ways to Solve “Error Code: ‘MODULE_NOT_FOUND, requireStack” Error

Ayodeji Akintubi — Thu, 04 May 2023 14:31:20 +0000

You’ve probably come across the MODULE_NOT_FOUND or requireStack error message while using the powerful Node.js tool.

Hitting this wall can be a frustrating experience, especially if you’re working against time. The realization that you can’t proceed with the project while struggling with the fast-approaching deadline can be mentally exhausting.

How do you go around this problem and get the job done before the fast-approaching deadline?

Well, let’s dig into what can trigger this error message and practical ways to fix the error.

What Triggers the "MODULE_NOT_FOUND" Error?

If you take a critical look at the error message, what triggers it is a no-brainer: a malfunctioning Node.js. This may be caused by a missing file or any other hidden problem that prevents Node.js from loading when invoked.

Some other possible causes of this error are:

Corrupt or Missing Module: If the target module is corrupted or missing, Node.js won’t be able to load it, leading to the error message.
Node.js Versions Incompatibility: If you require a module which is incompatible with your Node.js version, Node.js won’t load the module and that may trigger the requireStack error.
Installation Errors: Some hidden errors during Node.js installation may lay the foundation for the MODULE_NOT_FOUND error.

Hence, irrespective of what triggers the MODULE_NOT_FOUND error, you can’t proceed with building your app with the malfunctioning module.
This underscores the importance of knowing how to fix this problem pronto.

How do You Fix the requireStack Error?

Now that you’ve identified the cause of the requireStack error message, it’s time to fix it. The most effective solution to this problem is to update your Node.js.

There are a couple of ways to update your Node.js, depending on your platform.

1. How to Update Node Version on Windows Operating System

Windows users need the package manager NVM (Node Version Manager) to fix the problem. This tool enables you to manage different versions of Node on your Operating System. With NVM, you can update, install, or switch from one Node version to another.

*How to Update Node Version on Linux Operating System
*
Linux users can fix this problem with NVM. Consider this step-by-step guide to updating your Node.js with NVM on Linux:

• First check your Node version with this code: nvm –version
• If you’re using an outdated Node.js version, update it with this command: nvm install node --reinstall-packages-from=node.
• When you’re done updating Node.js, confirm the version by running this command again: nvm –version.

2. Update it from Node.JS Website

This option comes in handy for Windows and Mac users.
• Visit www.nodejs.org
• Click on the download options. Use the appropriate installer for your Operating System.
• Once the installer is completely downloaded, launch it.

• Follow the provided prompts until you’re done updating the Node.js.
• Confirm the update by running vnm –v again.

Node.js is a major development tool, thanks to its simplicity of use, constant updates, and performance-enhancing features.

Rather than lose these supporting features to a random error, update your Node.js version and get over the challenge in no time.

Different Ways of Writing JavaScript Functions

Ayodeji Akintubi — Wed, 26 Apr 2023 09:59:42 +0000

Functions are fundamental to your versatility as a JavaScript developer. They offer you flexibility, absolute control over your code, and other benefits that make it imperative for you to master the art of function declaration.

Many newbie JavaScript developers struggle to create functions because they have zero clue about the available options.

You can write JavaScript functions in three different ways which are:

1. - Function Declaration
2. - Function Expression
3. - Arrow Function

Let’s review these function types one after the other.

Function Declaration

In a function declaration, you declare the function directly without assigning it to a variable.

function functionName(parameters) {

//the code to be executed goes here

}

For example:

function sum() {
….. // content

}

Consider the example below:

function sum(a,b) {

return a + b;

}

console.log (sum(5,6)); // result = 11.

2. - Function Expression

In a function expression, you assign the function to a variable name. the following example demonstrates how you declare a function expression.

const x = functionName(parameters) {

//code goes here

}

Example:

let x = function sum(a,b) {

return a + b;

}

console.log(sum(2,20));

3. - Arrow Function

The arrow function was introduced in the JavaScript ES6 version. It is an alternative way to the methods discussed above.

Arrow functions are shorter and easier to use.

Here, you replace the “function” keyword with =>.

Consider this:

sum = (a, b) => a + b;

console.log(sum(34,20)); // result = 54

Note that you can use brackets if the function will cover multiple lines. A typical example is shown below:

const bigger = (a, b) => {

if (a > b) {

return ${a} is bigger;

} else {

return ${b} is bigger;

}

console.log (bigger(45,90)); // result: 90 is bigger

You can choose any of the methods discussed above to create a function, although the arrow method is currently the standard method.