DEV Community: Kolade Chris

THE ORDEALS OF A SELF-TAUGHT DEVELOPER IN NIGERIA

Kolade Chris — Thu, 08 Jul 2021 07:54:22 +0000

When you pray for the rain, you gotta prepare for the mud

– Denzel Washington

If you want to read about the **ordeals **of a self-taught developer in Nigeria, then you gotta be prepared for a long read. But I will try my best to keep this as short as possible.

I will be discussing the ordeals based on two major headings: electricity and employment.

On Electricity

"Epileptic" is an understatement in describing the power situation in Nigeria. No one would say there's no power supply, but the situation is worse than epileptic.

When I started coding, I and the CS graduate I was learning from would always go to the next compound to peep whether "light" (that's what we call electricity in Nigeria) is in the other street so we could go to an open pavilion there to charge our gadgets. That was because they only did give us "light" during midnight then. And between 6:00 - 7:00 a.m., it's gone. Presently, there has been a week we get electricity access for 1 hour every day. At times, we see none in 72 hours, and some other times, we use it for 12 consecutive hours, and then it's gone for another 72 hours.

*How do we get around this? *

Some are rich enough to get inverters or large power banks, but a lot of us charge our gadgets from the Aboki men (journeymen from the North). They charge ₦200 ($0.49) for a laptop and ₦50 ($0.12) for a phone. At times, they don't allow charging of laptops at all because they believe it consumes a lot of power.

There are places where there is steady access to electricity. I was once in such a place. But believe me, most of the residents have prepaid meters installed. In my current location, there's no prepaid meter, so the discos come every month and would deny one a total access to electricity on refusal to pay for a power not consumed in the right amount.

On Employment

Nigeria is a certificate-based society. Not only that, no one would employ you in the tech space unless you have 2-4 years of working experience, only to be paid between ₦30,000 ($72) and ₦130,000 ($315) as a starter.

The average self-taught developer has no CS degree or Bootcamp certificate, hence the difficulty in getting a developer job.

I have an experience with a firm I won't name which I will share.

I saw an opening for a Fullstack Developer. Immediately, I applied and was invited for an interview. The "interviewers" were impressed with my portfolio and at a time, they told me to stop sharing my live projects as I was just throwing all I have in. I know how to use the tools and also the platforms. We started negotiating salary. When they kept asking what I would like to take, I told them they surely have a structure and a package for such a role. In addition, I told them they should be paying what's fair and equitable judging by the standard of living in such a big city – my way of knowing whether I would work with them or not.

When they got back to me, all they could offer was ₦30,000 (that's $72.5) and a single-room apartment for a full-stack developer. It was then I knew that's the end of me with them.

It doesn't end there. They know I have the skills and capability, because they didn't just see my projects, we had a lot of talking too. So they have to have a hard copy of my CV with them. When I gave them my CV, they discovered my degree is not in CS or any other related course, I never attended any Bootcamp too. And then they said, "we hope you didn't learn from all these online courses and all". They want a full-stack developer who must not learn from Udemy and YouTube.
"You should resume immediately though". I said "Okay". Again, it was confirmed that's the start and the end of me with them.
I waved bye and never returned.

Other Ordeals

The Nigerian freelance developer who is not on Fiverr or Upwork experiences a lot of difficulties receiving money from clients. Paypal only takes our money but won't let us receive money and buy with the accounts unless we consult some workarounds. Payoneer as an alternative doesn't have a solid base here yet.

Laptops are becoming unaffordable in Nigeria. Believe me a lot code on phones. Code editors, terminal, and API tester apps all on a smartphone. At the beginning of the year, I recovered from a serious kidney condition and was in need of a laptop. My family raised a considerable amount, but all I could still get was a 4GB RAM laptop. I thought npm start would not take 6-10 minutes anymore but it remains like that.

Despite all these challenges, the Nigerian developers, self-taught or college-taught remain resilient and are making exploits all around the world. Look out for us. We'll get things done because we always find a way out of difficulties. It's like George Weah asking for a chance out of the ghetto to prove himself to the world. Arsene Wenger gave him that chance and he became the best footballer in the world.

I didn't come up with this to draw pity from anyone but to let you know there are Nigerians who don't believe in politics or "yahoo yahoo" (scamming over the internet) to succeed. There are lots of us channeling our smartness to the right course the world needs to look out for.

If you're a Nigerian seeing this, I know you have much more to say. Let the world know your situation in the comments.

Thank you for reading.
You can follow me on Twitter, where I tweet and engage in topics related to web development.

HOW TO MAKE A COUNTER APPLICATION WITH REACT USESTATE HOOK

Kolade Chris — Sat, 08 May 2021 13:21:01 +0000

In recent times, React.js has become very popular to the extent that almost every frontend developer wants to learn how to use it. Unless they are fanatically [or perhaps passionately] attracted to any other frontend library or framework actually. In React version 16.8 release, hooks were added and since then, working with React has become easier and fun, compared to when class-based components were the de facto method to build a robust web app with the library. In this article, I will guide you through the basics of React useState() hook by making a simple counter application.

To get up and running with React, we have to set up our development environment by installing React and will be using the CLI (Command Line Interface) tool create-react-app, which is very popular in the React ecosystem. You install create-react-app by running

npm-create-react-app myapp

In our case, myapp is the name of our app. After installation, change the directory to the myapp folder by running

cd myapp

I’m using myapp here but you can call your app anything you want. Run

npm start

to start the development server which is always available at port 3000, i.e. http://localhost:3000. When the server starts running on port 3000, you see a spinner as shown in the image below

Do some cleanups by removing the test files and everything in the App.js file.

To start bringing the counter app to life, import the useState hook from React by typing “import React { useState } from ‘react’” and the app.css file by typing “import ‘./app.css’”. Declare a function called App and return a div with Counter App in an h1 tag as shown in the snippet below:

import React, { useState } from "react";
import "./App.css";

const App = () => {
  return (
    <div>
      <h1>Counter App</h1>
    </div>
  );
};

export default App;

You can also use a fragment instead of div, as I did below

import React, { useState } from "react";
import "./App.css";

const App = () => {
  return (
    <>
      <h1>Counter App</h1>
    </>
  );
};

export default App;

We must export our App component using ES6 modules, that's why you can see

export default App

in the last line of the snippet.

Now, you should have Counter App shown in an h1 tag in the browser.

To start building the counter app, we have to declare a state with our useState hook. This is normally done by declaring two variables, the state and another to update the state, setState. This is done by using array destructuring and initializing the state to 0.

import React, { useState } from "react";
import "./App.css";

const App = () => {
  // Declare state and initialize it to 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <div className="title">
        <h1>Counter App</h1>
      </div>
    </div>
  );
};

export default App;

Seems I just cheated by placing my Counter App h1 in a div with the class name of title. Don't worry, you'll see why later.

In React, there are always multiple ways of doing things, so you can also declare a variable above the App component, initialize it to 0, and pass it into the useState hook. With respect to the counter app, I have declared a count and setCount variable.

import React, { useState } from "react";
import "./App.css";

const initialState = 0;

const App = () => {
  // Declare state and initialize it to 0
  const [count, setCount] = useState(initialState);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increase</button>
      <span>{count}</span>
      <button onClick={() => setCount(count - 1)}>Decrease</button>
    </div>
  );
};

export default App;

In the div [or fragment if you choose to] we returned, we have to add two buttons, one for increasing the counter and the other for decreasing it, then wrap our count variable inside a span tag. You can use the p tag if you want, but I don’t want to get an extra line, so I’m going with span, which does not create an extra line because it is an inline element.

import React, { useState } from "react";
import "./App.css";

const App = () => {
  // Declare state and initialize it to 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <div className="title">
        <h1>Counter App</h1>
      </div>
      <button>Decrease</button>
      <span>{count}</span>
      <button>Increase</button>
    </div>
  );
};

export default App;

To start increasing and decreasing the counter, we need to set up the functions to do that. This is done by passing an onClick function into the two buttons. We can execute the functions inline as shown below:

import React, { useState } from "react";
import "./App.css";

const initialState = 0;

const App = () => {
  // Declare state and initialize it to 0
  const [count, setCount] = useState(initialState);

  return (
    <div>
      <button onClick={() => setCount(count - 1)}>Decrease</button>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
};

export default App;

Right before the return statement, React allows us to write pure JavaScript, so, we can pass the identifier into the onClicks then write the functions before the return statement. I called the two functions handleIncrease and handleDecrease. This is cleaner and easier to read than executing the functions inline. And like I said earlier, there are always multiple ways of doing things in React. I want to show you the ways, so you can choose which works for you best.

import React, { useState } from "react";
import "./App.css";

const App = () => {
  // Declare state and initialize it to 0
  const [count, setCount] = useState(0);

  const handleIncrease = () => {
    setCount(count + 1);
  };

  const handleDecrease = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <div className="title">
        <h1>Counter App</h1>
      </div>
      <button onClick={handleDecrease}>Decrease</button>
      <span>{count}</span>
      <button onClick={handleIncrease}>Increase</button>
    </div>
  );
};

export default App;

Now, things should be working correctly, so head over to the browser and start increasing and decreasing Yaay 🙌

To make our little app a little more beautiful, let’s add the styles in the snippet below:

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

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

button {
  padding: 10px;
  border: 2px solid #3498db;
  border-radius: 4px;
  background-color: #2ecc71;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  transition: 0.5s ease;
}

button:hover {
  border: 2px solid #2ecc71;
  background-color: #3498db;
}

span {
  padding: 10px;
  font-size: 20px;
}

.title {
  margin-bottom: 16px;
}

h1 {
  color: #2ecc71;
}

After everything, this is what I have in my browser:

Thank you so much for reading. If you find any errors, please let me know in the comment section.
If you want to see an article on React useEffect() hook from me, comment below. If you would like any other article on React too, let me know and I would start working on it right away.

Connect with me via my portfolio or Twitter , where I spend most of my time engaging in web development related issues.

FOUR MISTAKES TO AVOID WHILE LEARNING TO CODE (MY CASE)

Kolade Chris — Sat, 01 May 2021 06:21:18 +0000

Beginners in web development, whether those on the self-taught college or Bootcamp path make avoidable mistakes during the journey to be embarked on to become a developer. A lot would argue the mistakes are a part of the journey, but they are actually avoidable. I decided to compile a list of mistakes beginners make and how to avoid them, using my past experience as a guide.

1. AVOIDING THE BASICS

While learning to code, a lot forget that nothing starts big in a day. I have once trapped in this myself at a time. After learning and rushing through just the basics of HTML and CSS, I quickly picked up JavaScript with a course, only to get to know I need to dwell more on HTML/CSS and practice with it before moving to JavaScript itself. No matter which language you're learning, you have to focus on the basics a lot, so It'd be easy for you to pick up advanced features when necessary. If you want to learn React, Vue, or Angular, strengthen your HTML/CSS, cross over to JavaScript, and know the advanced features, then pick up the framework of your choice. If you want to be a master in Django, then you need to be comfortable with python first.

2. CODING IN ISOLATION

Forgive me for talking too much about myself. But I faced a lot of issues while starting out to learn how to code, hence the reason to make myself an example for others so they don't slow down like me. Being an extreme introvert, I didn't make real progress until I reached out to the world by googling my bugs and reading blogs. Initially, I would face them on my own with the textbooks I was using, but the fact is no textbook has it all. Reach out to the world while learning to code. Join coding communities like the #100DaysOfCode, #DevCommunity, #WomenWhoCode and #CodeNewbies. You will see how open to the world you'd become and how fast your progress will go.

3. BEING SHY TO ASK FOR HELP

A lot of beginners in coding and web development often feel ashamed to ask for help. Remember the popular saying that no one is infallible. Personally, I wised up and took my ability to ask for help to the next level when I got to know even senior developers still hop around on google and StackOverflow and won't discover their programming bugs oftentimes until they tell a colleague to take a look.
As a beginner, you need to make Google and StackOverflow your friends, read documentations, ask colleagues and more knowledgeable individuals for help and get a mentor too.

4. NOT GETTING A MENTOR AND/OR ROLE MODEL

A lot would argue this is not a mistake. But I see it as one of those which slowed down my progress while starting out. If you're starting out as a self-taught developer, things could get very intimidating to the extent that you might consider giving up on coding for life. Due to this, you need someone to guide you and keep you from backsliding or rolling in 360 instead of going 180. I couldn't afford a mentor while starting out, but I picked three important people as role models and follow what they do by reading their blogs, taking their courses, and watching their videos, which really helped me a lot.

I hope this little piece gives you insights on how to deal with common beginner mistakes. Thanks a lot for reading.

You can contact me via my portfolio site , or Twitter , where I spend most of my time engaging in web development-related issues.

HTML CHARACTER ENTITIES: USEFUL MORE THAN YOU THINK

Kolade Chris — Fri, 23 Apr 2021 23:55:03 +0000

HTML character entities are texts, usually, a mixture of symbols used to display reserved characters, including emojis, in HTML. They begin with an ampersand (&) and end with a semicolon (;). The most widely used HTML entity on the web is the copyright symbol (©, coded ©, ©, and &COPY; ) found on a lot of websites footer, including my own portfolio.

Almost everybody seems not to notice these special characters are not for displaying the copyright symbol and random emojis alone. One other thing I find useful about them is making logos for websites. And sometimes, you might not need an icon library for your project at all as there is a code for almost every symbol, if not all actually.

Some HTML character entities include:

&#x00024; – Dollar
@ – asterisk
£ – pound
> – greater than
< – lesser than
&#x0002B – plus
☎ – telephone
♥ – Dark hearts
☆ – star
♀ – female
♂ – male
♪ – sung
♦ – diamond
✶ – sext
♠ – spade

You can find a lot of other HTML entities in the official list of character entities here and here.

In the code snippets below, I tried to craft a logo for a mystery soccer club with HTML character entities and CSS positioning:

    <div class="container">
        <span>
        <div class="lion">
            &#129409;
        </div>
        <div class="crown">
            &#128081;
        </div>
        <div class="ball1">
            &#9917;
        </div>
        <div class="ball2">
            &#9917;
        </div>
        <div class="text">
            <h4>KINGS FC</h4>
        </div>
        </span>
    </div>

/* The CSS */
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

div {
  display: inline;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

span {
  border: 20px outset orange;
  border-radius: 9px;
}

.lion,
.ball1,
.ball2,
.text {
  font-size: 30px;
}

.lion {
  position: relative;
  top: 40px;
  left: 78px;
}

.crown {
  position: relative;
  top: 10px;
  left: 26px;
  font-size: 35px;
}

.ball1 {
  position: relative;
  top: 68px;
  left: -2px;
}

.ball2 {
  position: relative;
  top: 69px;
  left: -100px;
}

.text {
  position: relative;
  top: 30px;
  left: 25px;
  color: orange;
}

The output in the browser:

Obviously, I could be more creative. You should be more creative too because HTML character entities are useful more than you think.

Thank you for reading.
Connect with me via my portfolio or my Twitter account @koladechris

TUTORS YOU SHOULD CHECK OUT ON UDEMY AS AN UPCOMING WEB DEVELOPER

Kolade Chris — Fri, 16 Apr 2021 23:34:27 +0000

DISCALIMER

I was not paid by any of the mentioned tutors to put this up. I’m not an affiliate of any of them too. This article was compiled based on positive reviews on Udemy and individuals in the web development field, the willingness to promote excellent tutors who are doing well and help anyone who wants to go on the path of self-taught development find the best tutors on Udemy.

These days, there are lots of free resources online with which anyone ready to learn web development could utilize. At times, one needs to step up beyond free resources and consider the paid ones. Because it is rare to see a content creator put in exactly the same efforts into free and paid content. In the same vein, getting familiar with the top tutors in the industry goes a long way in easing the pain that might arise from learning web development, especially those on the self-taught path. So, I decided to compile a list of Udemy tutors who have distinguished themselves in the web development niche. Enjoy.

BRAD TRAVERSY (@traversymedia)

From HTML/CSS to frontend frameworks and backend development, Brad has everything on web development, from the beginning and front to back. He also offers a lot for free on his YouTube channel. Personally, the free stuff is what poise me to buy/wishlist his premium contents.

RYAN DHUNGEL (@kaloraat)

If you want to be a MERN (MongoDB, Express, React, and Node JS) stack developer, there's no better content to consult than those of Ryan Dhungel. Ryan has both free and paid MERN Stack courses on Udemy. He has a YouTube channel where he normally does the trailer-kinda-videos for his courses, consider subscribing and following him on Twitter to get early access and discount links.

JONAS SCHNEIDERMAN (@jonasshmedtman)

Jonas has courses on everything web development right there on Udemy. A lot of his courses are highly rated and best sellers. His 94-hour JavaScript course has been dubbed the best ever and is a best seller.

COLT STEELE (Doesn't do Twitter, catch him on Reddit)

Colt is a real Bootcamp teacher and one person you would never get bored listening to. Once voted the best new tutor on Udemy, Colt has one of the best single complete web development courses covering HTML/CSS, JavaScript, Node JS, Express, and Mongo DB. The course also has the massive YelpCamp project, which is pretty common around. Colt also has courses on React, Python, SQL, and vanilla JavaScript.

ACADEMIND (@academimd_real)

Founded by Alex Schwarzmuller and his partner, Manu, Academind is one of the best for everything web development and even DevOps. They have a YouTube channel where they offer free content and make course announcements, alongside a website where one could become a member to get access to all their courses.

ANGELA YU (@yu_angela)

Founder of App Brewery, Angela is a well-versed woman who codes. Just like Colt Steele, she has one of the largest single courses on complete web development covering HTML/CSS, JavaScript, Node JS and React. She has another trendy course on Python called 100 Days of Python and lots more.

STEPHEN GRIDER (@ste_grider)

Stephen Grider is another "go-to" for everything React. He has highly rated courses on both React and React Native, with others including vanilla JavaScript. And worthy of note is the fact that his explanations are legendary.

Thanks a lot for reading.
Find me via my portfolio, ksound22.github.io, or Twitter via @koladechris, where I spend most of my time tweeting and engaging in web development-related issues.

HOW TO INSTALL AND RUN MONGO DB ON WINDOWS 10

Kolade Chris — Sat, 10 Apr 2021 08:10:27 +0000

This article was initially published on Hashnode

MongoDB is a NoSQL database that has gained popularity in recent times. Unlike SQL databases that are like advanced spreadsheets, MongoDB stores data in JSON-like key-value pair called BSON (Binary JSON) in order to support features JSON does not.

In this article, I will walk you through the step-by-step guide on how to install MongoDB on your Windows 10 operating system, with insights on GUI tools such as Mongo Compass and Robo 3t.

INSTALLING MONGO DB

STEP 1: First of all, you need to download MongoDB from the official website. You can do that here. Make sure you select msi as the package type and not zip.
Follow the installer wizard to install MongoDB.

Select Complete as your setup type and keep the next item on default.

You can choose to install Mongo Compass here; it would just take more time to install everything. My preference is to uncheck the box so I can download and install it separately.

Click install.

STEP 2: Once it is done installing, navigate to C:/ProgramFiles/MongoDB/Server/4.4/bin. There, you should find Mongo.exe, mongod.exe, and mongos.exe. They are Mongo, MongoDB, and Mongo shell respectively.

STEP 3: Click on the address bar and type cmd to launch your windows command prompt. Click on enter and run mongo --version. You will see the version of the MongoDB installed. This means MongoDB has been rightly installed on your machine.

In my case, it is version 4.4.4.

STEP 4: Next, close the command prompt and launch it in no directory this time. Run mongo --version. The response is “mongo is not recognized as an internal or external command operable program or batch file. Chill. This is because your path variable has not been assigned, meaning you have to set environment variables on your machine.

STEP 5: Search for "environment" on your machine and click “Edit the system environment variables”. You can find this in the control panel too.

STEP 6: Click on environment variables.

STEP 7: Under system variables, select path and click on edit.

STEP 8: In the next pop-up, click on New in order to paste your installation path. Go back to the directory where you got a proper installation response and copy the address.

STEP 9: Click on New again and paste the address you copied. Hit Enter and continue clicking OK until all the boxes are closed.

STEP 10: Now, close your command prompt. Relaunch it and run the mongo --version. This time you should get a proper response that MongoDB has been installed correctly. Run mongod --version too to make sure the database is installed.
Forgive me for switching to Git Bash. I like to use it or Windows Subsystem for Linux (WSL).

CONNECTING AND RUNNING MONGO DB

STEP 1: To connect your command line to MongoDB, type mongo and hit enter.
If everything is done correctly so far, the mongo server should be running on port 27017 by now.

STEP 2: To start using MongoDB, start by checking MongoDB default databases by running show dbs.

STEP 3: To create a database, run use firstDB. You can give it whatever name you want.

STEP 4: To create a collection, run db.<collection-name>.insert({“anything you want”: "anything you want"}). Feel free to add more. To show your collection, run show collections; your collection should show.

STEP 5: Run show dbs again to see the databases on your machine; you should see the database you created in step 3 above.

USING THE GUIs

To use the Mongo Compass GUI, download it here. Make sure you select the right platform for windows.
Install it, it is straightforward. Launch the Mongo compass and you should see the interface below.

You might have to make some simple selections in order to see the interface above.
To connect the Mongo Compass to MongoDB, click “Fill in collection fields individually”.

Leave everything the way it is and click connect and you should see the databases available on your computer.

Here, you can create, insert, read, update and delete without the command line. Once you do it here, it's done globally, so if you check your collection again in the command line by running db.<collection-name>.find(), you see what you’ve done in the GUI.

If you have ever used Mongo Atlas (MongoDB in the cloud), the interface is very similar to the one you see above.

As for Robo 3t, a third-party GUI tool, you can download it here.
It's simple to connect too and easier to work with than Compass, but I prefer Compass because of the Atlas-like interface.

As you can see above, I have inserted my middle name and nickname with Robo 3t.

Checking my database with db.person.find() gave me what you see above.

Thank you for reading.

Connect with me via my portfolio site, and Twitter via @koladechris, where I tweet and engage in anything web development.

MY FIRST YEAR CODING STORY

Kolade Chris — Sat, 03 Apr 2021 02:52:42 +0000

This article was initially published on hashnode

I call myself Kolade Chris Ksound. I'm a Blackman, an African, a Nigerian channeling his smartness to the right course, a son, brother, and web developer.

My coding story is still piling up, but I would like to tell you a little about it.
It’s been a year since I've been learning to code on my own. I have no CS degree as some may guess. After I graduated with a Bachelor's degree in Environmental Biology in 2018, I started feeling something was not right. The confidence I used to have that I would excel in the fields my course of study entails (Environment and Biology) suddenly faded away. There was a solution I had in mind – learn a skill. And then I remembered I once told myself I would learn how to make a website the first time I saw a web page in my life back in 2006 or 2007. I had tried to learn in 2012 when I had every access to a home laptop computer but didn't do anything meaningful to get started. I fired myself into action immediately after graduating by registering for a free HTML and CSS Course with IBM. According to their stories, the organizers were IBM workers who never had CS degrees but learned to code and made a bot for the company. I was wowed! But guess what, I never visited that website again until last year.

The mandatory national youth service of my country came banging on the door. And then I obeyed the clarion call. One day, while sitting alone on camp (I'm an extreme introvert so I could stay alone in a single place for hours), a marketer from an ICT company came to meet me and sold himself to me about a subsidized web development training his bosses organized for corps members (That’s what those serving my country as fresh graduates are called). Inside of me, I was like "what the heck! This guy is God-sent" I registered without hesitation from the money I had to use for feeding! After I left camp, the organizers never did anything to start until January 2020 (they should have started in September 2019). And to my surprise, when they put things together to start, they said I had to pay 60% of the total fee before they would have to start (that was when NYSC increased corpers monthly allowance to 33k. Don’t be shocked, it’s in Naira and not Dollars) I said wait, una wan carry straw suck my money because NYSC increased alawee? No shit naa. (You guys want to suck my money with straw because NYSC increase corps members allowance? No shit). Every appeal to make them start yielded no fruit. And then Covik one nine reached Nigeria. Wait, did I say Covik one nine? Oh! It is Covid-19.

I had been discussing the issue with a fellow corps member. He never told me he could get me started until those guys said I should pay 60% before they'd start. So, I reached an agreement with him to start. I also registered for a free Web dev course on Udemy. So the two were going on simultaneously. I was introduced to HTML and CSS. After getting a little bit confident weeks later, I started trying out things on my own.

I realized I need to learn more about the two. And that if I'm ever going to make a dynamic website, I must learn and know JavaScript. I got my balls together and applied all seriousness, broke away around April ending, and started doing things on my own. I always believe I'm better alone. Things became nicer when I got to know about Laurence Bradford’s Learn To Code With Me. Her website, learntocodewith.me is the single source of everything thing I was able to learn and the community I joined on Twitter, #100DaysOfCode. To cut the stories short, I got comfortable with HTML, CSS, and JavaScript (I felt like an idiot while learning JavaScript and dumped it two times). From JavaScript, I moved to React and the server-side with Node JS and Express JS (not focusing on the backend yet), got comfortable with the command line (that black thing on computer machines hackers and developers use) and here we are today.
Of Utmost inspiration to me are Laurence Bradford and Brad Traversy. I had my paths set out when I was able to get informed the way I’m supposed to via learntocodewith.me, but with Brad Traversy, I was able to find my feet and stay more focused. Both individuals, alongside a tutor I believe in so much, Ryan Dhungel remain my coding role models for life.

I’m not where I want to be yet, I’m not making money the way I want yet, and I’m not imparting lives the way I want yet, but I’ll be there one day.

Thank you for reading my story.
Get to know more about me via my portfolio website, ksound22.github.io , and my Twitter account, @koladechris.

BASIC JAVASCRIPT GOTCHAS FOR BEGINNERS

Kolade Chris — Sun, 28 Mar 2021 21:55:37 +0000

This article was initially published on hashnode

JavaScript is a programming language designed to add interactivity to websites. HTML and CSS could be enough to make a website, but to go far in web development and make websites interact with users, JavaScript is necessary. JavaScript is a programming language is so versatile and complicated to the extent that it could be very intimidating to learn. I struggled a lot while starting out, abandoned it twice, and once swore to never learn it again. But the pain became a painful pleasure that I enjoy today. I decided to compile a list of five “have-to-knows” for beginners in JavaScript. Enjoy!

1. Declare Variables the Right Way

Everyone is free to use const, let, and even var as long as none of the keywords are deprecated. For example, var MY_NAME is a constant just as const MY_NAME is, the only difference is that JavaScript does the tracking for you behind the scene by making the latter read-only [meaning it cannot be changed or reassigned] and you have to do the tracking yourself with the former. So take note: if you would reassign your variables, use var, if you don't want your variables to have the same name, use let, if you don't want clashes of any other kind and your program is large, use const, which is more than just a var and let in one package.
The snippet of code below demonstrates var and const in action.

const MY_NAME = "Kolade";
console.log(MY_NAME); //Kolade

const MY_NAME = "Kolade";
console.log(MY_NAME); //Uncaught SyntaxError: Identifier 'MY_NAME' has already been declared

2. You have to Store Data with Variables

Variables are the basic building blocks in JavaScript. It is important to declare variables to keep track of values as they change in the program. That is, if they are declared with the var or let keyword. In addition, to select elements effectively for example during DOM Manipulation, there is no way to walk around declaring variables.

3. Differentiating Between Operators is Important

A lot of programmers have problems differentiating between different JavaScript operators such as "=", "==", "===", >, <, and some more. No one is ever alone, Mathematical operators confused me from primary to tertiary education level. Up till now, I still curve my shoulders to get the difference between less than and greater than operators.

Just take note:

= is the assignment operator. That is, the one used to assign values to the variables.

== is the loose-equality operator and does type coercion, that is "7", a string, will be treated the same as 7, a number.

=== is the strict-equality operator and does not do type coercion, so "7" is not the same as 7.

Right angle bracket (>) is the greater-than operator. Demonstrated with the right shoulder.

Left angle bracket (<) is the less-than operator. Demonstrated with the left shoulder.

Other operators include !==, !=, >=, <=.

The snippets of code below are an example of type coercion.

const numOne = 7;
const numTwo = "7";

if (numOne == numTwo) {
  console.log("Type coercion occured");
} else {
  console.log("No type coercion"); // Type coercion occured
}

if (numOne === numTwo) {
  console.log("Type coercion occured");
} else {
  console.log("No type coercion"); // No type coercion
}

4. Conditionals and Ternaries Are Needed in Order to Make Decisions

As the name implies, a conditional is a piece of code that performs a task as long as something returns true. The most common conditional in JavaScript is the if statement. There are also if…else, if...else...if and an upgrade on if statements called switch. We looked at if statements in point three above. Ternaries on the other hand make you write an if statement in one line and is fun to work with while wanting to implement short-circuit operators for example, though it is advisable not to nest them. Refactoring the first if statement in point three to a ternary looks like the snippet of code below.

const numOne = 7;
const numTwo = "7";
numOne == numTwo ? console.log("Type coercion occured ") : console.log("No Type coercion ");   
//No Type coercion

5. No Walk Around Functions

To make your code readable and make your own life easy, you have to keep it DRY (Don't Repeat Yourself). In addition, there is the need to write reusable codes that can be executed anywhere in a program, this is where functions come in handy.
Functions are declared with the function keyword, assigned an identifier, and must be called with it, in order to execute it. For example, in the code below, the simple function with the identifier myName is declared to output John Doe to the console, to make it work, it is called by that identifier, myName(). You can call it at any other point within the program.
Things could get more complex when functions are assigned parameters, default parameters, and arguments.

function myName() {
  console.log("John Doe");
}
myName();

Thanks a lot for reading!

If you find this article helpful, share it with your friends and followers and follow me on my Twitter accounts @koladechris (my personal account) and @chriskaydevs (my brand account), where I spend most of my time tweeting and engaging on programming and web development tips.

THE 5 RIGHT WAYS TO GET STARTED IN WEB DEVELOPMENT

Kolade Chris — Mon, 22 Mar 2021 10:59:27 +0000

This article was initially published on hashnode

Web development is the building and maintenance of websites and web applications. It is basically what happens behind the scene in order to make websites and web apps look good and function in an intended way. Web developers get all these done with markup and programming languages. So, to get started in web development, you need to learn markup languages such as HTML and CSS at least. Then to go far, you must know programming languages such as JavaScript, Python, C#, and/or more.

Getting started in web development could vary based on geographical locations in my opinion. The way one needs to get started in the West, where there is defined access to the needed equipment and infrastructures, might be different from how an African needs to get started. This piece is not particularly dedicated to how an inhabitant of Africa needs to get started, it is for everybody irrespective of where they inhabit, but it goes a long way in helping Africans more.

1. START ON A SMARTPHONE

Personally, I didn't start on a phone, but that was because I never knew I could code on phone. To get started on a phone, I recommend downloading the Sololearn, Mimo, and ACode mobile Apps. When I discovered Mimo and Sololearn Apps, coding became much more fun as I felt I was playing games because I'm a lover of games. On getting to know Sololearn, learning the basics became easier for me. Sololearn is like a social media platform where you can post to ask questions, code using a built-in editor, and even compete with other coders in challenges. But to get far in coding, bear in mind you must code on a computer.

2. HUNT FOR FREE RESOURCES

Make platforms such as W3Schools, freeCodeCamp, MDN, and YouTube your friends. If you can learn by reading articles, then MDN and W3schools might be the best platforms for you. If you like to learn from videos, then scroll all the way to YouTube. You can learn the basics of whatever you want to learn on W3Schools and subscribe to web dev channels such as freeCodeCamp, Traversy Media, and Clever Programmers on YouTube.

3. GO FOR PAID RESOURCES

The best platform I would suggest for paid courses is Udemy. Udemy has tons of courses on web development one could take. On a normal day, the courses cost over $100, but Udemy does $9.99, $11.99, and $12.99 at some unannounced times. A lot of instructors are generous too sometimes as they create discount coupons. Every paid course also comes with a completion certificate. Other platforms are Coursera and LinkedIn Learning, but I'm yet to spend much time there so I literally have nothing to say about them.

4. PRACTICE

The best way to be sure you know what you're learning is to practice. When you learn from both free and paid resources, the next thing to do is build. Fortunately, a lot of tutors out there have their courses structured on real-world projects, so as you’re learning, you’re also building. You can take this to the next level by freelancing and even getting a full-time job, which does not come with ease.

5. KEEP LEARNING

Once you are confident, make sure you keep learning. The tech world evolves every day and we don't know what programming language or framework might emerge tomorrow. To stay relevant in the field, you must not stop learning. I used to think I would be okay with HTML and CSS, but then I realized I have to learn JavaScript for interactivity, when I got comfortable with JavaScript a little bit, I said I had to pick up a framework, I have picked up a framework and then I realize there are tons of things to learn more. It’s a “never-ending journey”.

CONCLUSION

There are more to getting started in web development. There is the need to get comfortable with both frontend and backend tools such as code editors, browser developer tools, alongside some other necessities based on the correct mindset and mentality. This article only pin-pointed important non-technical steps and would be followed by some other ones – both tutorial-based and others like this.

If you find this article helpful, share with your friends and followers and follow me on my Twitter accounts @koladechris (my personal account) and @chriskaydevs (my brand account), where I spend most of my time tweeting and engaging on programming and web development tips. You can contact me via my portfolio, ksound22.github.io, I read every message.

Thank you for reading. Keep coding!