Forem: Godswill Umukoro

Getting started with Netlify forms

Godswill Umukoro — Mon, 05 Dec 2022 11:39:39 +0000

Netlify is awesome! You can deploy static websites, single-page applications, serverless functions, and more.

They have also made it easy to collect form submissions from your website. The documentation page contains all you need to get started.

At the end of this article you will be able to:

Submit forms to your Netlify account
Setup spam protection
Get an HTTP response from the Netlify API using AJAX
Display custom success and error notification messages on the current web page

If any of these sound exciting to you, let's get started.

Basic form Setup

 <form name="Getting Started" method="POST" data-netlify="true" data-netlify-honeypot="bot-field">
    <input name="bot-field" class="dnone">
    <input type="text" name="firstname" id="fn" placeholder="First name" required>
    <input type="email" name="email" id="em" placeholder="Email address" required>
    <button type="submit">Get started</button>
</form>

data-netlify="true" This informs Netlify that you wish to receive submissions in your Netlify site admin panel.

data-netlify-honeypot="bot-field" This is a hidden spam protection form field that lures bot users into completing a field that human users can’t detect. Be sure to hide the corresponding input field using CSS. I hid mine in this example by declaring "display: none" within the dnone class.

At this point, you can submit forms to Netlify and view them in your site admin panel under the "Forms" tab

Display Success or Error Messages

Next, we need a way to notify users about the status of their form submission.
Was the form sent successfully or not? This is the question almost every person asks after filling out an online form.

To achieve this, we will be using AJAX

const form = document.querySelector('form')
const successElement = document.querySelector('#success');
const errorElement = document.querySelector('#error');

form.addEventListener('submit', event => {
    event.preventDefault();

    const myForm = event.target;
    const formData = new FormData(myForm);

    successElement.classList.add('dnone');
    errorElement.classList.add('dnone');

    fetch("/", {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body: new URLSearchParams(formData).toString(),
    })
        .then((response) => response.ok ? successElement.classList.remove('dnone') : errorElement.classList.remove('dnone'))
        .catch(() => errorElement.classList.remove('dnone'));
})

Using Javascript, we select the form, success, and error message HTML elements.

Next, we target the form to override the form submission event with JavaScript. To do this, we add a submit event listener to the form and prevent its default behavior with event.preventDefault()

Using the FormData Interface, we were able to derive the values of every input in the form. We could skip this step if we were sending the HTML form directly to the server. However, in this case, we would be sending the form with JavaScript, so we build the body of the request using formData

Now we make a POST request to submit the form using the global fetch method. It takes the resource URL we are submitting to. In the case of Netlify, that will be the current root page which can be simply represented by /.

The fetch method takes a second parameter to specify the request method, headers, and body of the request. We can pass POST as the request method in this case since it is a POST request. Netlify needs the content-type headers so we specify that as:

headers: { "Content-Type": "application/x-www-form-urlencoded" }

And finally, we can pass our body as the query string which was built with FormData

body: new URLSearchParams(formData).toString(),

The Fetch API will asynchronously process our request and return a response.
We use the .catch to handle failures on the request, and the .then to handle a successful response. There's a possibility of getting an unsuccessful server response like a 4xx or 5xx error within the .then method, so we make sure to check for a 2xx success response by using response.ok.

.then((response) => response.ok ? successElement.classList.remove('dnone') : errorElement.classList.remove('dnone'))

What it looks like

Final Code

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Getting started with Netlify Forms</title>

    <style>
        #success {
            color: green;
        }

        #error {
            color: red;
        }

        .dnone {
            display: none;
        }
    </style>
</head>

<body>
    <form name="Getting Started" method="POST" data-netlify="true" data-netlify-honeypot="bot-field">
        <input name="bot-field" class="dnone">
        <input type="text" name="firstname" id="fn" placeholder="First name" required>
        <input type="email" name="email" id="em" placeholder="Email address" required>
        <button type="submit">Get started</button>

        <!-- sign up notification message -->
        <p id="success" class="dnone">Thanks! You’ve been registered successfully.</p>
        <p id="error" class="dnone">Sorry, we had an issue connecting to the server.</p>
    </form>

    <script>
        const form = document.querySelector('form')
        const successElement = document.querySelector('#success');
        const errorElement = document.querySelector('#error');

        form.addEventListener('submit', event => {
            event.preventDefault();

            const myForm = event.target;
            const formData = new FormData(myForm);

            successElement.classList.add('dnone');
            errorElement.classList.add('dnone');

            fetch("/", {
                method: "POST",
                headers: { "Content-Type": "application/x-www-form-urlencoded" },
                body: new URLSearchParams(formData).toString(),
            })
                .then((response) => response.ok ? successElement.classList.remove('dnone') :
                    errorElement.classList.remove('dnone'))
                .catch(() => errorElement.classList.remove('dnone'));
        })
    </script>
</body>

</html>

Resources

Find the Github Link

View the Live Demo

Did you find this article helpful?
Help spread the word so more people can get started with Netlify forms... and hey, check out my Youtube videos

Working with the Node.js File System

Godswill Umukoro — Mon, 13 Jun 2022 11:21:29 +0000

Firstly, we'll import the file system core module
const fs = require('fs');

Next, Let's read data from a file

fs.readFile('./notes.md', (err, data) => {
  if (err) {
    console.log(err);
  }
  console.log(data.toString());
});

Great, we'll see how to write to files next, this code will create a new file if the referenced one does not exist

fs.writeFile('./note.md', 'I am a new file', () => {
    console.log('created a new file succesfully')
})

Awesome, now let's delete the file if it already exists, or create it if it does not

if (fs.existsSync('./note.md')) {
  fs.unlink('./note.md', (err) => {
    if (err) {
      console.log(err);
    } else {
      console.log('file deleted');
    }
  });
} else {
  fs.writeFile('./note.md', 'I am a new file', () => {
    console.log('file created');
  });
}

Next, let's work with directories. We'll see how to create a new directory or delete it if it already exists.

if (fs.existsSync('./new-folder')) {
  fs.rmdir('./new-folder', (err) => {
    if (err) {
      console.log(err);
    } else {
      console.log('folder deleted');
    }
  });
} else {
  fs.mkdir('./new-folder', (err) => {
    if (err) {
      console.log(err);
    } else {
      console.log('folder deleted');
    }
  });
}

Did you find this article helpful? Help spread the word so more people can learn how to work with the file system in Node.js. Follow me on Twitter and tell me how you found this useful.

The Myths and Principles of Productivity

Godswill Umukoro — Mon, 03 Jan 2022 19:40:38 +0000

This article was curated from my personal notes while studying the Productivity Masterclass - Principles and Tools to Boost Your Productivity by Ali Abdaal

The 3 Myths of Productivity

#1 The Myth of “I Don’t Have Time”

Time is what we want most but use worst - William Penn.

We are not limited by time, we are limited by the choices we make with our time.

When presented with an invitation you can not engage with at the moment, instead of responding by saying "Sorry, I don't have time", you might say “ I’m sorry, I’ve got a lot on my plate right now, I don’t quite have the bandwidth.”

This is because we do have time, but we're consciously avoiding doing that specific task. It simply means that we would rather spend time working on something else other than that specific task.

#2 The Motivation Myth

Motivation is fundamentally a feeling. Relying on our feelings as a way of setting our course in life and getting what we need to be done is a recipe for disaster because feelings are fleeting.

Discipline enables us to go directly from thought to action regardless of how we’re feeling at the current time.

A professional doctor wakes up in the morning, prepares his day, and proceeds to go to the hospital irrespective of his current state of motivation.

We tend to rely on motivation when we don’t get the outcomes from our actions immediately.

A Procrastinator's mindset: Thought > Motivation > Action
A Disciplined person's mindset: Thought > Action

How to Become More Disciplined

Make the Action fun and more pleasureable
Make the consequences of Inaction more painful
Shorten your feedback loop
Keep the outcome clearly in mind

#3 The Myth of Multitasking

Focusing on one thing at a time is infinitely better than trying to multitask.

Task switching, ie. trying to do multiple things at one go is a lot less productive than focusing on just the one thing we need to get done.

Doing tasks one at a time helps put you in flow state where we perform and feel our best.

When we are in the flow state, we report high levels of productivity, life satisfaction, and happiness.

Avoid distractions when you’re in the flow state. Keep your phone away from your study spot.

Comfort zone | Stretch zone (The Flow State) | Panic zone

The Three Laws of Productivity

#1 Parkison’s Law

work expands so as to fill the time available for its completion - Northcote Parkinson.

Think about your 10-year plan, stop and think about how you could achieve it in 6 months.

Creating an artificial constraint will push you to achieve your goal sooner.

#2 Pareto Principle

Also known as the 80/20 rule, the Pareto Principle states that 80 percent of results come from 20 percent effort.

A student having a forthcoming exam and having to study 10 topics may decide to study each topic sequentially. A much better approach would be to study the basics of every topic ie. 80/20 on the basics, then go another 80/20 on deeper topics and keep going 80/20 on every iteration of the study session.

#3 Newton’s First Law of Motion

An object is at rest or traveling at a constant velocity unless it’s acted on by an external imbalanced force.

If we are still, it requires an external force to push us into action. But if we are moving already, it no longer requires any external force to keep us moving, we will keep moving by default.

This is why it’s much harder to start something than to continue doing something once we’ve already started. All we need to that one bit of push to get started, and then we can just keep on going.

Thanks for reading this far. Did you find this article helpful? Help spread the word so more people understand how to spend their time more productively. Follow me on twitter and tell me how you found this useful.

My Commitment to #100DaysOfCode | Part 2

Godswill Umukoro — Sun, 02 Jan 2022 19:46:39 +0000

I'm starting 2022 by committing to Quincy Larson's 2022 Become-a-Dev New Year's Resolution Challenge on Twitter.

I'm positive this will keep me accountable and focused on reaching my goals for 2022. Some of which are:

Become Proficient in React and Firebase
Earn a high-income monthly salary
Read 10 Books

While the curriculum in this #100DaysOfCode challenge may not directly lead me to reach those outlined goals, it's a sure-fire way to keep me on my toes and push me to code every day.

The goal is to spend 30 minutes every day on the #100DaysOfCode challenge and use the momentum to hack on the specific skillset I'm trying to gain.

If you would love to see my daily log for the challenge, I have a whole Github repository dedicated to this.

Thanks for reading this far. Did you find this article helpful? Follow me on Twitter and tell me all about it.

2021 - A Year In Review and Goals for 2022

Godswill Umukoro — Sat, 01 Jan 2022 00:24:54 +0000

It is January 1st, 2021. A few weeks ago, around 1 am, I returned to Lagos - the city where I grew up. The bus I boarded from Abuja broke down a couple of times, in addition, the driver was unwell the whole time. It was my first experience traveling by road on a journey that spanned over 467 miles. What an adventure that was, I couldn't wait to see my family. It's been one year since I relocated to Uyo, Akwa Ibom State for the National Youth Service Corps (NYSC), a compulsory program set by the Nigerian government to be undertaken by every university graduate.

The plan was to visit my family for two weeks and return to Abuja where I wished to reside permanently, however with every additional week spent in Lagos, the unrealistic my plan to relocate to Abuja seemed. It became certain the move would not turn into a reality. I had cast all my hopes on relatives who assured me of their financial backing in making my relocation a success. But it felt like I'd be causing myself harm if I continued to hope on their failing promises. I accepted my fate and resorted to live in Lagos.

From the time I was a kid, I had the intention to move out of the house. Simply because living conditions were at the very least, unconducive. If I had to live in Lagos, I told myself, "I'll have to move into my own apartment".

Throughout NYSC, I saved up all the stipend sent from the government, which was N19,800 ($48.06) every month, in addition to money made from freelance work, I had a cumulative amount of N400,000 in the bank. This still wasn't enough to rent an apartment and settle in.

I began applying for local tech jobs with my bachelor's degree in Computer Science and got one interview for the role of Technical Support at a server company. The monthly salary was N55,000 ($133.51) and I was expected to work 6 days a week. I turned down the offer and continued building websites as a freelancer.

Eventually, I registered my business name Gnest Tech and got a few clients via referrals and word of mouth.

Mentorship

I wasn't satisfied with the infrequent rate at which I got clients, so my goal was to get a fully-remote tech job from abroad. That was when I focused on building connections with awesome people on Twitter.

Shortly after, I found an amazing mentor, Levi Meahan who was willing to help me reach my goal. We started 1:1 video call sessions, he'll answer any questions I had on Twitter too. It's always refreshing to know someone has got your back and is interested in seeing you reach your goal.

The more I engaged on Twitter, the more I connected with like-minded people who were willing to help out. Dan Mall is someone who is always happy to help out. We held video meetings where he taught me about public speaking and gave me some general advice when I needed them the most.

I completely studied the CS50 course, a series of Computer Science lectures offered by Havard.

During that time, I committed to the #100DaysOfCode Challenge. and completed it.

How I Got Scammed and Almost Lost it

Some of my acquaintances introduced me to this "new opportunity". Unaware of this being a Multi-level Marketing (MLM) scheme, I jumped right into it. Of course, I wanted to move out at all costs, without doing any research on my own, I invested some of my savings, at first, I was getting a return on investment, so I proceeded to invest all my savings and even took a loan to invest even more money. Like all MLMs, the tricksters behind the show took off with all the money.

At this point, I was left with a deep feeling of sadness. Not sure what steps to take next, my mental health greatly deteriorated. I had to relocate to a rural territory, where only a few people know me with the intention of clearing my mind off my losses and channeling all my feelings towards working on my skills so I can pay off my loans and live a better life.

Channeling the Hurt Toward Creativity

Burning with a passion to build my skills, I consistently studied, wrote articles, and hosted Twitter Spaces. Some of the amazing people I got to feature were:

Ryan Burgess

James Quick

Rob Kendal

Alexandria

Savvas Stephanidess

Jodie Koffi

My blog quickly grew to over 3.5k views.

I was privileged to co-organize Black Tech Twitter, a safe space where underrepresented folks come together to discuss and aid each other. Before long, this community created some buzz on Twitter, even the official Twitter Dev Team gave us a shoutout.

I continue to build custom web applications for my client, while I spend other time improving my coding skills, creating content, and developing healthy habits.

Three months ago, I began my Master's program, studying Information Technology at the National Open University of Nigeria.

Conclusion

This has been a year filled with many twists, turns, and lessons.

I'm glad I had to go through everything because it made me a much better person today.

Goals for 2022

Become proficient in React and Firebase
Make a high-income monthly salary
Read 10 books.

Thanks for reading this far. Did you find this article helpful? Follow me on Twitter and tell me all about it.

How JavaScript gets Maintained

Godswill Umukoro — Tue, 28 Dec 2021 12:28:11 +0000

JavaScript

JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification.

Javascript is different because there isn't a single JS package to download and install on your computer. Rather the implementation is done by browsers and its up various browsers to implement new features when they get released by TC39 and ECMA International.

This means that different browsers will support different features at any given point in time.

Websites like caniuse.com help us understand language implementation inconsistencies across different browsers.

A Quick History

Javascript was first released under the name LiveScript in 1995 as the main scripting language for the Netscape browser.

In 1996 Netscape submitted the programming language to a standards creation organization called ECMA International in hopes to create a standard on how to use a language across different browsers and that standard named ECMAScript was created and released the next year, 1997.

There are two parties that contribute to updating and maintaining ECMAscript, TC39 and The open source community.

The Open Source Community

Anyone can create a proposal and a TC39 community member can champion a proposal, who will support and try to get that proposal into the latest version of ECMAScript.

ECMA

A standards creation organization in charge of all sorts of different standards.

ECMAScript

A specification for a programming language, think of it as a text reference that describes how a language should work, and not a programming language itself.

TC39

Technical Committee Number 39 is in charge of creating, maintaining, and finalizing ECMAScript proposals that will get included in newer versions of ECMAScript.

40-60 delegates meet six times each year to discuss proposed changes to the spec.

This is just one of the many sub-committees that reside under the ECMA International organization.

Resources

How JavaScript is Maintained? ECMAScript vs JavaScript, ES Features, and More Explained - Ijemma Onwuzulike

Did you find this article helpful? Help spread the word so more people understand how Javascript is maintained. Follow me on twitter and tell me how you found this useful.

CSS is Awesome and Here's Why

Godswill Umukoro — Fri, 22 Oct 2021 07:30:00 +0000

This article was curated from Miriam Suzanne's talk

The entire web was originally made for linking documents together. The web is an open standard, which means everyone can contribute to its growth.

Over time as the web grows, we see a dramatic move from linking documents to making games, real-time applications, art, the list goes on. Today, entire businesses exist and flourish on the web.

Does CSS Work on the Modern Web?

Tim Berners Lee designed the web to be device agnostic. This inadvertently triggers a design problem and a radical shift in power from creators to consumers. Thus, giving the audience control over the display of content.

In reality, we design for an unknown infinite canvas because we never have all the variables.

Put simply; when we design for the web today, we design for change and adaptation.

What does Cascading Stylesheet mean?

The cascade is a set of rules for how different styles will fit together and override each other and in the end, the browser fits all those variables together and comes out with a single final rendering style. Only the browser can do this because it has all the information required.

As web designers, we are suggesting and not controlling the output.

A Declarative Language

CSS is a declarative language which means that we describe the intent rather than specific steps by giving the browser as much information as possible such as subtext and implications so that the browser can make smart decisions about what to do with those styles.

CSS is Intentionally Contextual

Design for the web isn't contingent on just the size of the screen. Other factors are to be considered. For example, the interface; how are you interacting with the website? Is it a keyboard, touch screen, braille keyboard, are you listening to websites with your headphones? There are so many interfaces that using one style just won't make sense. So context is very important to CSS.

A Pliable Presentation Layer

CSS is a presentation layer subject to change. We can layer styles on top of each other, but they have to be optional because people are using the internet through systems where they may not see this presentation.

That's why Graceful degradation and Progressive enhancement are built into CSS. The whole thing is supposed to fall apart in a graceful way. That's how the web is designed to function.

CSS is Different by Design

Like theater, CSS is contextual. We can make those suggestions but can't insist on a final design. CSS is intentionally different and was created to work this way.

The Web Adapts to Context

When we build applications for the web, we get universal device support. The trade-off is we lose control, and that's a feature. CSS exists to help us with adaptive design.

Resources

Did you find this article helpful? Help spread the word so more people understand why CSS is awesome. Follow me on twitter and tell me how you found this useful.

How To Quit Vim

Godswill Umukoro — Sat, 10 Jul 2021 09:59:05 +0000

Lately, I found myself playing with a lot with Amazon LightSail with the goal of hosting LAMP stack applications. At first, I didn't really like it, but the more I tinkered with LightSail did I get more comfortable with the service.

Then it got to the point where I had to edit documents directly from the terminal and vim document.php was the first thing that came to mind. After making all my edits, It was time to close vim and continue with my adventure in the world of terminals, then I recalled all the funny memes about the strange impossibility of quitting vim 😅

Step One: Remember to Escape

Hit esc key on your keyboard

If No Changes Were Made: Quit Vim

Type this command :q accompanied by the enter key on your keyboard

Save changes and Quit Vim

Type this command :x accompanied by the enter key on your keyboard

Quit Vim Without Saving Changes

Type this command :q! accompanied by the enter key on your keyboard

I hope you found this useful. Happy coding!

Simplest way to Add Dark Theme to any Website

Godswill Umukoro — Tue, 29 Jun 2021 11:51:56 +0000

The Problem

I like fancy websites. You know websites that have great UI/UX, impressive load time speed, pretty animations, Scalable Vector Images, Dark theme and light theme toggle button.

But the problem is... I suck at CSS and JS (at this moment, I'm working on it duh 🙄). As a result, many tutorials and blog articles on how to implement these fancy features on a website aren't exactly for me.

The question is: what's the simplest, most basic way to add dark theme functionality to my website?
I'm also not interested in copying code I don't understand.

The Solution

The best way to learn they say is by building, so I woke up two days ago and was like, lets do this!
My personal website could use a redesign so I said to myself, I'll rebuild my website and add that a dark theme functionality to it.

I chose to follow a minimalist design for he website. After writing some basic HTML and CSS, I added the dark theme functionality with the following CSS code:

/* Light mode by System theme */
@media (prefers-color-scheme: light) {
    body {
        background-color: inherit;
        color: inherit;
    }
}

/* Dark mode by System theme*/
@media (prefers-color-scheme: dark) {
    body {
        background-color: #121212;
        color: whitesmoke;
    }
}

prefers-color-scheme checks if the user has selected light or dark theme. The user can do this either via the operating system settings or via the browser settings.

What does this mean?

You website could look different on browsers. Light or Dark.
You just implemented dark theme on your website with just a few lines of CSS code.

Some Links

Check my new personal website here
Check the full code on Github
Learn more about prefers-color-scheme

Build a Calculator with PHP

Godswill Umukoro — Tue, 22 Jun 2021 20:47:30 +0000

Prerequisites: HTML and CSS knowledge is helpful but not mandatory

What is PHP?

PHP stands for Hypertext Preprocessor, you can say it has a recursive initialism 😃 It is a server-side programming language that makes it easy to build dynamic web applications.

If you already know how to build websites with HTML and CSS, that's pretty damn awesome! But let's say you need to make your website more dynamic, for example, create a login system, or a social network where users can post something. You'll need a database management system to store your website's user details and posts. In order to connect your website to the database, you will need a server-side programming language. There are many different options to pick from, but in this lesson, we will use PHP.

In this lesson, we will not be connecting to the database or performing user authentication. This will be a simple use of the PHP language to implement a calculator.

PHP does not run on the browser, but on the server, that's why it's called a 'server-side' programming language. In other to use PHP, we will need to set up a server to host our files. Once the server runs our PHP codes, it sends the output in form of HTML, we can then style it our desired styling so our website looks nice. Don't worry, I'll link the code to everything used in this lesson so you can check and compare with yours. Also, feel free to say hi to me on Twitter. Ready to build your calculator? let's go!

Setting up our local environment

To run PHP, you need a server. You can turn our computer into a server to run our PHP code. To accomplish this, you will install a web server solution stack on your computer. There are a number of available option, I'll list my suggestions below:

Windows / Linux: XAMPP

Mac: MAMP

Once you have the software installed, It should look like this:

Windows / Linux:

Mac:

Next, you'll need to navigate to the htdocs directory. You can find it on:

Windows: C:\xampp\htdocs

Linux: /opt/lampp/htdocs/ ~/Desktop/htdocs/

Mac: /Applications/MAMP/htdocs

This is where we will write our PHP code.

If you are able to make it this far congrats! Now let's write some code.

Writing the HTML

Let's write some simple HTML code that displays a basic form with two text inputs, one select field with five options, and one button on the page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Calculator</title>
</head>
<body>
  <h1>Calculator World</h1>
  <form>
    <input type="text" placeholder="operand 1">
      <select>
          <option selected>None</option>
          <option>Add</option>
          <option>Subtract</option>
          <option>Multiply</option>
          <option>Divide</option>
      </select>
    <input type="text" placeholder="operand 2">
    <button>=</button>
  <div>
  </div>
  </form>
</body>
</html>

Your web page would look like this.

You're doing awesome, next. we will style our page, so it looks clean to some extent. Feel free to skip this section if don't care about styling.

Styling with CSS

You can style your calculator however you want, I'll just give mine some basic styling. See code below.

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body {
    display: flex;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: lightgray;
}
h1 {
    margin-top: -10%;
    margin-bottom: 26px;
    font-size: 3.8rem;
    font-family: monospace;
}
form {
    display: flex;
    width: 80%;
    justify-content: space-evenly;
    align-items: center;
    background: whitesmoke;
    border-radius: 30px;
}
form input, button, select {
    padding: 20px;
    font-size: 1.2rem;
    border: none;
    background: inherit;
}
form input:focus {
    outline: 1px solid dimgray;
}

form button {
    background: dimgray;
    color: whitesmoke;
    border-radius: 50%;
}
div {
    color: dimgray;
    font-weight: 900;
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 600px) {
    h1 {
        font-size: 3rem;
    }
    form {
        width: 95%;
        padding: 0 5%;
    }
    form input, button, select {
        width: 100%;
        margin: 0 5px;
        border-radius: 20px;
    }
    form button {
        /*border-radius: 0;*/
        /*padding-left: 20px;*/
        /*padding-right: 0;*/
        width: 10%;
    }
}

Next, let's connect our CSS to the HTML by including the link tag. See the example below:

    <link rel="stylesheet" href="./style.css">

Your calculator would look similar to this if you used my style. If you styled yours differently, I'd like to see it 😃 simply tag me on Twitter and I'll check it out.

Now, Let's enable the calculator to perform some basic calculations.

Giving it Functionality

PHP makes it easy to mix and match code within our HTML code using these tags <?php ?>. Anything written within those tags is regarded as valid PHP code. Be sure to save your file with the .php file extension.

We want whatever value the user inputted to get displayed after the = button. So within our form, just after the button element, we will write some PHP code to calculate user inputs as requested.

To get user inputs, we will need to give each element inside the form a name as shown below:

    <input type="text" placeholder="operand 1" name="one">
    <select name="operator">
...
    <input type="text" placeholder="operand 2" name="two">
    <button name="equals">=</button>

Then, we'll give the form a method that specifies what request type we will use in sending the form. For this, we have two options, POST or GET. We will use the latter in our code. Then we need to set an action attribute that tells the browser which file will process the form it's sending, in this case, it's going to be the same file. My file is named index.php. If you named your file differently, be sure to check that it matches with the value provided in the action attribute. See the example below.

  <form action="index.php" method="GET">

Next, we will target each element inside the form and write some logic on them. I'll show the PHP code in its entirety below, then explain what each line means afterward.

<div>
      <?php
      if(isset($_GET['equals'])){
            $operandOne = $_GET['one'];
            $operandTwo = $_GET['two'];
            switch ($_GET['operator']){
                case 'None':
                    echo 'Select and operator';
                break;
                case 'Add':
                     echo $operandOne + $operandTwo;
                break;
                case 'Subtract':
                      echo $operandOne - $operandTwo;
                break;
                case 'Multiply':
                      echo $operandOne * $operandTwo;
                break;
                case 'Divide':
                     echo $operandOne / $operandTwo;
                break;
                default:
                    echo 'Nothing was supplied';
                break;
            }
        }else {
            echo '0';
        }
      ?>
  </div>

Explaining the above PHP code:

<?php Starts the PHP tag so anything we write within it is regarded as valid PHP code.
if(isset($_GET['equals'])){ Checks if the button, which has the name 'equals' has been clicked
$operandOne = $_GET['one']; This statement declares a variable and initializes its value to whatever got passed in by the user into the first input field with the name 'one'.
$operandTwo = $_GET['two']; Creates a variable and initializes its values to what got passed into the second input field with name 'two'.
switch ($_GET['operator']){ A switch statement on what option got selected by the user on the select element.
case 'None': This line says if the user selected None, perform the following action.
echo 'Select and operator'; This string gets printed on the page
break; Ends the switch statement
case 'Add': If the user selects Add, perform the following action.
echo $operandOne + $operandTwo; Add both values and print the sum on the page
break; Ends the switch statement
case 'Subtract': If the user selects Subtract, perform the following action.
echo $operandOne - $operandTwo; Subtract the second value from the first and print the result on the page
break; Ends the switch statement
case 'Multiply': If the user selects Multiply, perform the following action.
echo $operandOne * $operandTwo; Multiply both values and print the result on the page
break; Ends the switch statement
case 'Divide': If the user selects Divide, perform the following action.
echo $operandOne / $operandTwo; Divide the second value from the first and print the result on the page
break; Ends the switch statement
default: If none of the above happens, do the following
echo 'Nothing was supplied'; Prints the string
break; End the program
} Ends Switch block
}else { Else statement
echo '0'; Prints string to the screen until the if statement evaluates to true
} Ends the Else statement
?> Closes the PHP tag

Seeing it work

Thanks for reading this far, I hope you found this article helpful. If you got stuck at any point, please see the complete code on Github

How hard is it to learn how to code?

Godswill Umukoro — Fri, 30 Apr 2021 06:08:16 +0000

Learning how to code is a topic that has been massively campaigned both by people who code, and people who do not code.

There have been many misconceptions with regards to the question 'how hard is it to learn how to code?'

In this video, I share my experience with learning to code and being a programmer for six years.

You can watch the Video here:

How To Self Study Technical Things

Godswill Umukoro — Tue, 27 Apr 2021 15:09:10 +0000

You get excited about learning a new skill and suddenly got filled with so much motivation that you feel ready to crush your goals. So you sign up for a course, but after only a few weeks, all that passion and motivation just cooled off and just didn’t last.

This is because learning technical things is hard, and self-learning is even harder.

Just because you immensely studied through a couple of courses doesn’t necessarily make you well equipped to utilize it in the real world. Learning technical things involves a lot more than just taking courses, as that is only 20% of the effort required to succeed.

The Framework for Learning

This is a sure framework to successfully self-study technical things.

1. Learn just enough
2. Do a project
3. Iterate
4. Accountability

Now let's discuss each step in detail:

1. Learn Just Enough

The Probem

The problem with learning technical things isn’t that there aren’t enough resources. The problem is that there are too many resources available and is easy to fall into the trap of the paradox of choice which often leaves you feeling overwhelmed making you abandon your goal of learning in the first place.

The Solution

Understand this: It doesn’t really matter which course you pick. The market for introductory courses is oversaturated so you can get amazing courses either for free or at an incredibly discounted price. Just choose any of the best-selling courses/materials and you can be guaranteed high-quality educational material that teaches you the basics of the field.

Once you start using an introductory learning material, you may face another potential problem I'll like to call 'The Learning Gap'.

The Learning Gap

Consuming information from a bunch of courses won’t get you far. There is a gap between beginner and intermediate that cannot be crossed with doing courses. We learn technical things so that we can use them. In some other fields, eg. Biology, the point of learning is to get knowledge into your head. But with technical things like programming, the focus is on application. This is why it doesn’t matter what information you have in your head if you don’t know how to implement it.

Doing a bunch of theoretical courses is just about 20% of actually being able to independently implement. The best way to learn is by directly practicing real-life implementation. Hence the importance of project-based learning.

Project-Based Learning

Real learning begins when you work on a project. You will soon notice your theoretical knowledge come alive and start serving its purpose, helping you become a better programmer.

Let's face it, it's boring when you're just learning a bunch of information. It's a surefire way of losing interest because what makes learning technical things exciting and interesting is when you're actually using the skills to build projects.

Learn the Minimum:

Choose an introductory course or book to learn the basic concepts and terminologies of the skills you want to learn.
Don’t try to memorize or learn every single detail.

Even after doing all of this, It's just the beginning of the learning process. Real learning starts with the project.

2. Work on a Project:

Pick a project that interests you and attempt to build it by yourself. This is the best way to learn.

3. Iterate

Iterate, Iterate, Iterate: Now that you’ve built yourself a project, you have just opened up your path to really mastering the skill. Choose another project to do, and you will find out there are a lot of gaps in your knowledge, but that’s okay, you have the right frame of mind and you realize that’s the whole point. You 'interate' on what you learned by filling the gaps in your knowledge and diving deeper into the areas that will help you complete your project.

As you become more skilled, you also have a better grasp of what projects interest you and how to choose the best projects to fill in skills that you want to learn so you can do more awesome projects. That’s what most people get wrong about learning. Learning is a cyclical process

4. Accountability

This importance of this is seen in a few weeks or months after starting the learning process when your enthusiasm and motivation starts wearing off and your goals start looking unachievable, when you become overwhelmed by all the jargon and concepts, when you’ve spent 5 hours trying to debug your code, when you hit a roadblock and all you just wanna do is give up, when you start asking your self questions like ‘is the goal really even worth it?', maybe I’m just too dumb to do this anyway.

These times when you are at your weakest and most prone to give up are when accountability matters the most. It truly is your key to pushing through and succeeding. But how can you gain accountability?

Gaining Accountability

Introspection: Figure out what actually matters to you. It may be money, prestige, or family and friends.

Optional Framework Upgrade

How do you know when you’ve learned enough to start doing your project?

Start your learning by finding your project first!
Get a job in that field or start your project with consequences that matter to you
Take notes of only high-level concepts and focus on understanding. Do not take copious amounts of notes and try to get all the details because knowing it won’t help you much in doing it. You will pick up the practical details anyway when you’re implementing the project.
Don’t get married to any learning resource. Resources are just tools, what matters is accomplishing your goals. Learning is not a linear process. If you feel like a course is going into details or subjects that are not really relevant to your project, then skip it or find another resource. Maybe the parts you skipped will become relevant when you’re going through the iterate phase, then revisit it. Do not feel obligated to finish a course you don’t think is relevant anymore. Remember, your ability to complete your project is your guiding light so do what you have to do to learn just enough so you can start working on your project.

Conclusion

Thank you for reading the article till its end.

Understand this: You can learn that new skill you've always wanted to learn.

If you found this article helpful, be sure to follow me on Twitter for similar contents.

This article was inspired by Tina Huang Be sure to watch her video that explains this topic in detail.