The purpose of cryptography is to ensure secure communication between two people or devices who are connecting through insecure channels.

The sender often employs an encryption key to lock the message, while the recipient uses a decryption key to unlock the message.

In general, cryptography employs two strategies:

1. Symmetric-key Cryptography (Private key): With this technique, the encryption and decryption keys are both known to the sender and receiver. Some examples of algorithms that use this technique include One Time Pad cipher, Vernam cipher, Playfair, Row column cipher, and Data Encryption Standard (DES).

2. Asymmetric Key Cryptography (Public key): With this technique, each person has two keys: the Private (secret and accessible to the creator) and Public keys (freely available to anyone). The sender and receiver use different keys for encryption and decryption. Some examples of algorithms that use this technique include the Rivest–Shamir–Adleman algorithm (RSA), Diffie - Hellman Key Exchange (DHE), and the Digital Signature Algorithm (DSA).

The Encryption Model for Secured Data Transmission

Software engineers generally have to authenticate with servers or other services like GitHub for version control.

As opposed to using password authentication, they can use public key authentication to generate and store a pair of cryptographic keys on their computer. Then they can configure the server running on another computer to recognize and accept those keys.

This is the asymmetric key cryptography technique flow we discussed earlier and it is a more secure authentication process.

In this tutorial, you will learn how it all works, what SSH means, and how to generate SSH keys with an RSA algorithm using SSH keygen.

Prerequisites

• A working computer running on any operating system.

• Basic knowledge of navigating around the command-line.

• A smile on your face :)

Brief Introduction to SSH (Secure Shell Protocol)

Public key authentication using SSH is a more secure approach for logging into services than passwords. Understanding SSH is easier once you understand how cryptography works from the above intro.

Here's a helpful basic definition:

"The Secure Shell Protocol is a cryptographic network protocol for operating network services securely over an unsecured network." (Source)

SSH is used between a client and a server both running on the SSH protocol to remotely login into the server and access certain resources through the command line.

Source: SSH Academy

There is an open-source version of the SSH protocol (version 2) with a suite of tools called OpenSSH (also known as OpenBSD Secure Shell). This project includes the following tools:

• Remote operations: ssh, scp, and sftp.

• Key generation: ssh-add, ssh-keysign, ssh-keyscan, and ssh-keygen.

• Service side: sshd, sftp-server, and ssh-agent.

How to Generate an SSH Public Key for RSA Login

Our goal is to use ssh-keygen to generate an SSH public key using the RSA algorithm. This will create a key pair containing a private key (saved to your local computer) and a public key (uploaded to your chosen service).

Now to proceed, follow the steps below to achieve this:

1. Install OpenSSH if you don't have it installed already using the command below:

// for mac

brew install openssh

// for linux

sudo apt install openssh-client && sudo apt install openssh-server

2. Create a private/public key pair with an RSA algorithm (2046-bit encryption by default), using the command:

ssh-keygen -t rsa

3. Or, if you want to create with an RSA algorithm with 4096-bit encryption, use the command:

ssh-keygen -t rsa -b 4096

4. Enter a file location to save the key to (by default it will save to your users directory (for example, (/Users/bolajiayodeji/.ssh/id_rsa) ).

5. Enter a passphrase for extra security to your private key. Generally, a good passphrase should have at least 15 characters (including at least one upper case letter, lower case letters, numerical digits, and special characters) and must be difficult to guess. You can use one of those password generators online or use hexdump to generate a paraphrase easily like so:

hexdump -vn16 -e'4/4 "%08X" 1 "\n"' /dev/urandom

6. Once you've successfully created your password, your private key will be saved in /<your_chosen_directory>/.ssh/id_rsa and your public key will be saved in /<your_chosen_directory>/.ssh/id_rsa.pub.

Now you can copy the created key into the authorized_keys file of the server you want to connect to using ssh-copy-id (this tool is a part of openSSH) like so:

ssh-copy-id username@remote_host

Alternatively, you'd want to add your SSH private key to the ssh-agent and store your passphrase in the keychain. You can then add the SHH key to your server's account via a dashboard UI or so (for example, using tools like Git or GitHub).

Conclusion

Although a strong password helps prevent brute-force attacks, public key authentication provides a much more secure authentication process using cryptography.

I hope you found this article helpful. In addition, you can check out the ssh-keygen manual page and the following resources for further learning:

• Connecting to GitHub with SSH

• Get started with OpenSSH for Windows

Cheers! 💙

For each of these software applications that you open or commands you run, it creates a process or task.

One beautiful feature of the Linux operating system and of modern computers in general is that they provide support for multitasking. So multiple programs can run at the same time.

Have you ever wondered how you can check all the programs running on your machine? Then this article is for you, as I'll show you how to list, manage, and kill all the running processes on your Linux machine.

Prerequisites

• A Linux distro installed.

• Basic knowledge of navigating around the command-line.

• A smile on your face :)

A Quick Introduction to Linux Processes

A process is an instance of a running computer program that you can find in a software application or command.

For example, if you open your Visual Studio Code editor, that creates a process which will only stop (or die) once you terminate or close the Visual Studio Code application.

Likewise, when you run a command in the terminal (like curl ifconfig.me), it creates a process that will only stop when the command finishes executing or is terminated.

How to List Running Processes in Linux using the ps Command

You can list running processes using the ps command (ps means process status). The ps command displays your currently running processes in real-time.

To test this, just open your terminal and run the ps command like so:

This will display the process for the current shell with four columns:

• PID returns the unique process ID

• TTY returns the terminal type you're logged into

• TIME returns the total amount of CPU usage

• CMD returns the name of the command that launched the process.

You can choose to display a certain set of processes by using any combination of options (like -A -a, -C, -c, -d, -E, -e, -u, -X, -x, and others).

If you specify more than one of these options, then all processes which are matched by at least one of the given options will be displayed.

The ps command manual page.

Type man ps in your terminal to read the manual for the ps command, which has a complete reference for all options and their uses.

To display all running processes for all users on your machine, including their usernames, and to show processes not attached to your terminal, you can use the command below:

ps aux

Here's a breakdown of the command:

• ps: is the process status command.

• a: displays information about other users' processes as well as your own.

• u: displays the processes belonging to the specified usernames.

• x: includes processes that do not have a controlling terminal.

This will display the process for the current shell with eleven columns:

• USER returns the username of the user running the process

• PID returns the unique process ID

• %CPU returns the percentage of CPU usage

• %MEM returns the percentage memory usage

• VSV returns the virtual size in Kbytes

• RSS returns the resident set size

• TT returns the control terminal name

• STAT returns the symbolic process state

• STARTED returns the time started

• CMD returns the command that launched the process.

How to List Running Processes in Linux using the top and htop Commands

You can also use the top task manager command in Linux to see a real-time sorted list of top processes that use the most memory or CPU.

Type top in your terminal and you'll get a result like the one you see in the screenshot below:

You can type q to exit the session.

An alternative to top is htop which provides an interactive system-monitor to view and manage processes. It also displays a real-time sorted list of processes based on their CPU usage, and you can easily search, filter, and kill running processes.

htop is not installed on Linux by default, so you need to install it using the command below or download the binaries for your preferred Linux distro.

sudo apt update && sudo apt install htop

Just type htop in your terminal and you'll get a result like the one you see in the screenshot below:

How to Kill Running Processes in Linux

Killing a process means that you terminate a running application or command. You can kill a process by running the kill command with the process ID or the pkill command with the process name like so:

kill [PID]

or

pkill [COMMAND]

To find the process ID of a running process, you can use the pgrep command followed by the name of the process like so:

pgrep iTerm2

To kill the iTerm2 process in the screenshot above, we will use any of the commands below. This will automatically terminate and close the iTerm2 process (application).

kill 25781

or

kill iTerm2

Conclusion

When you list running processes, it is usually a long and clustered list. You can pipe it through less to display the command output one page at a time in your terminal like so:

ps aux | less

or display only a specific process that matches a particular name like so:

ps aux | grep Chrome

I hope that you now understand what Linux processes are and how to manage them using the ps, top, and htop commands.

Make sure to check out the manual for each command by running man ps, man top, or man htop respectively. The manual includes a comprehensive reference you can check if you need any more help at any point.

Thanks for reading – cheers! 💙

When you're using version control and you're distributing features across branches, there's a lot of communication between your local computer and your online repository on GitHub. During this process, you might need to reset back to the project's original copy.

If resetting a branch scares you, then don't worry – this article will introduce you to remote branches, remote head, and how you can easily reset a remote branch to remote head.

Prerequisites

• Basic knowledge of how to use the terminal.

• Git installed (Learn how to install Git here if you haven't already).

• Basic knowledge of GitHub and repositories.

• A grin on your face. 😉

What is a Branch in Git?

A branch is a core concept in Git and GitHub that you'll use all the time. Branches help you manage different versions of one project.

The main branch is always the default branch in a repository and is considered "production and deployable code". You can create new branches like prod-staging or prod-current from the main branch.

All branches in https://github.com/freeCodeCamp/freeCodeCamp

What is a Remote Branch in Git?

A remote branch is a reference to the state of the branches in a remote repository (a version of your project hosted on the internet or on a network like GitHub).

When you clone a repository, you pull data from a repository on the internet or an internal server known as the remote (it looks something like (remote)/(branch)).

What is Origin (or Remote Head) in Git?

The word origin is an alias that Git created to replace the remote URL of a remote repository. It represents the default branch on a remote and is a local ref representing a local copy of the HEAD in the remote repository.

In summary, origin/HEAD represents the default branch on the remote, which is defined automatically when you clone a repository from the internet.

How to Reset a Remote Branch to Origin in Git

Now that you have background knowledge of how remotes and branches work, let's solve our problem and reset a remote branch to origin using the git reset --hard command.

Before you do this (if this your first time), make sure that you back up your branch before you reset it in case something goes wrong. You can back it up like so:

git commit -a -m "Branch backup"
git branch branch-backup

Now run the command below to reset your remote branch to origin. If you have a different remote and default branch name (not origin or main, respectively), just replace them with the appropriate name.

git fetch origin
git reset --hard origin/main

If you have created some new files or directories, they may still remain after resetting. You can use the command below to clean up the working tree by recursively removing files from the previous branch that are not under version control.

git clean -xdf

• The -x flag removes all untracked files, including ignored build directories.

• The -d flag allows Git to recurse into untracked directories when no path is specified.

• The -f flag overwrites the default Git clean configuration and starts cleaning untracked files and directories.

Conclusion

If your remote repository’s name is not “origin” and the branch named is not “main” ​in the remote repository, don't forget to update the commands above with the appropriate names. You can always run git remote show origin to check this.

I hope this article has made you more comfortable with working with and resetting branches. You should also join the new freeCodeCamp chat server to network with other learners and ask questions. Thanks for reading! 💙

Linux is one of the most popular Unix based operating systems. It's open source, and is used all over the world across many industries.

One amazing feature of the Linux operating system is the Command Line Interface (CLI) which allows users to interact with their computer from a shell. The Linux shell is a REPL (Read, Evaluate, Print, Loop) environment where users can enter a command and the shell runs it and returns a result.

The ls command is one of the many Linux commands that allow a user to list files or directories from the CLI.

In this article, we'll go in depth on the ls command and some of the most important flags you'll need day-to-day.

Prerequisites

• A computer with directories and files

• Have one of the Linux distros installed

• Basic knowledge of navigating around the CLI

• A smile on your face :)

The Linux ls Command

The ls command is used to list files or directories in Linux and other Unix-based operating systems.

Just like you navigate in your File explorer or Finder with a GUI, the ls command allows you to list all files or directories in the current directory by default, and further interact with them via the command line.

Launch your terminal and type ls to see this in action:

How to list Files in a Directory with Options

The ls command also accepts some flags (also known as options) which are additional information that changes how files or directories are listed in your terminal.

In other words, flags change how the ls command works:

 ls [flags] [directory]

PS: The word contents used in throughout the article refers to the files and directories being listed, not the actual contents of the files/directories ?

List files in the current working directory

Type the ls command to list the contents of the current working directory:

List files in another directory

Type the ls [directory path here] command to list the contents of another directory:

List files in the root directory

Type the ls / command to list the contents of the root directory:

List files in the parent directory

Type the ls .. command to list the contents of the parent directory one level above. Use ls ../.. for contents two levels above:

List files in the user's home directory (/home/user)

Type the ls ~ command to list the contents in the users's home directory:

List only directories

Type the ls -d */ command to list only directories:

List files with subdirectories

Type the ls * command to list the contents of the directory with it's subdirectories:

List files recursively

Type the ls -R command to list all files and directories with their corresponding subdirectories down to the last file:

If you have a lot of files, this can take a very long time to complete as every single file in each directory will be printed out. You can instead specify a directory to run this command in, like so: ls Downloads -R

List files with their sizes

Type the ls -s command (the s is lowercase) to list files or directories with their sizes:

List files in long format

Type the ls -l command to list the contents of the directory in a table format with columns including:

• content permissions

• number of links to the content

• owner of the content

• group owner of the content

• size of the content in bytes

• last modified date / time of the content

• file or directory name

List files in long format with readable file sizes

Type the ls -lh command to list the files or directories in the same table format above, but with another column representing the size of each file/directory:

Note that sizes are listed in bytes (B), megabytes (MB), gigabytes (GB), or terabytes (TB) when the file or directory's size is larger than 1024 bytes.

List files including hidden files

Type the ls -a command to list files or directories including hidden files or directories. In Linux, anything that begins with a . is considered a hidden file:

List files in long format including hidden files

Type the ls -l -a or ls -a -l or ls -la or ls -al command to list files or directories in a table format with extra information including hidden files or directories:

List files and sort by date and time

Type the ls -t command to list files or directories and sort by last modified date in descending order (biggest to smallest).

You can also add a -r flag to reverse the sorting order like so: ls -tr:

List files and sort by file size

Type the ls -S (the S is uppercase) command to list files or directories and sort by size in descending order (biggest to smallest).

You can also add a -r flag to reverse the sorting order like so: ls -Sr:

List files and output the result to a file

Type the ls > output.txt command to print the output of the preceding command into an output.txt file. You can use any of the flags discussed before like -la — the key point here is that the result will be outputted into a file and not logged to the command line.

Then you can use the file as you see fit, or log the contents of the file with cat output.txt:

.

Conclusion

There are tons of other commands and combinations you can explore to list out files and directories based on your needs. One thing to remember is the ability to combine multiple commands together at once.

Imagine you want to list a file in long format, including hidden files, and sort by file size. The command would be ls -alS, which is a combination of ls -l, ls -a, and ls -S.

If you forget any command or are unsure about what to do, you can run ls --help or man ls which will display a manual with all possible options for the ls command:

Thanks for reading!

Since Linus Torvalds (the famous creator of the Linux operating system kernel) created Git in 2005 for Linux kernel development, it has become the most widely used modern version control system in the world.

In this article, I'll introduce you to the Git clone and Git branch workflows and I'll show you how you can clone a specific branch based on your needs. Let's begin! ?

Prerequisites

• Basic knowledge of the terminal

• Ability to type commands in the terminal

• Git installed (I'll still show you how)

• A GitHub account

• A smile on your face (Put up that smile friend ?)

Quick Introduction to Git and GitHub

According to Wikipedia,

Git is a distributed version control system designed to track changes to a project (code) in software development. It is intended to enforce coordination, collaboration, speed, and efficiency among developers.

GitHub, on the other hand, is a web-based hosting service for version control using Git. It offers all of the distributed version control and source code management functionality of Git as well as adding more features for computer code.

How to Install Git on Windows

Download and install the latest Git for Windows Installer here.

How to Install Git on Linux

Here are the commands based on your Linux distro:

Debian or Ubuntu

sudo apt-get update
sudo apt-get install git

Fedora

sudo dnf install git

CentOS

sudo yum install git

Arch Linux

sudo pacman -Sy git

Gentoo

sudo emerge --ask --verbose dev-vcs/git

How to Install Git on a Mac

Download and install the latest Git for Mac installer here.

Or you can type this command:

brew install git

Now that we've got Git installed, let's move on to the tutorial.

Introduction to Git Clone

Git allows you to manage and version your project(s) in a "repository". This repository is stored on a web-based hosting service for version control, like GitHub.

You can then clone this repository to your local machine and have all the files and branches locally (I'll explain more about branches soon).

For example, you can clone freeCodeCamp's repository with SSH like so:

git clone git@github.com:freeCodeCamp/freeCodeCamp.git

Introduction to Git Branches

When working on a project, you will likely have different features. And multiple contributors will be working on this project and its features.

Branches allow you to create a "playground" with the same files in the master branch. You can use this branch to build independent features, test new features, make breaking changes, create fixes, write docs or try out ideas without breaking or affecting the production code. When you're done, you merge the branch into the production master branch.

Branching is a core concept in Git which is also used in GitHub to manage workflows of different versions of one project. The master branch is always the default branch in a repository that is most often considered "production and deployable code". New branches like passwordless-auth or refactor-signup-ux can be created from the master branch.

All branches in freeCodeCamp's repository

How to Clone Git Branches

While you can clone repositories with the git clone command, keep in mind that this clones the branch and the remote HEAD. This is usually master by default and includes all other branches in the repository.

So when you clone a repository, you clone the master and all other branches. This means you will have to checkout another branch yourself.

Let's say your task on a project is to work on a feature to add passwordless authentication to a user dashboard. And this feature is in the passwordless-auth branch.

You really don't need the master branch since your "feature branch" will be merged into master afterward. How then do you clone this passwordless-auth branch without fetching all other branches with "a bunch of files you don't need"?

I created this sample repository to explain this. This repository holds a simple blog built with Nextjs and has four dummy branches:

• master

• dev

• staging

• passwordless-auth

In Nextjs, any file inside the folder pages/api is mapped to the /api/* path and will be treated as an API endpoint instead of a page. In our repository, I have created different dummy APIs in this directory to make each branch different.

The master branch holds the file pages/api/hello.js while passwordless-auth holds the file pages/api/auth.js. Each file just returns a dummy text response. See master's hello API response here (with a special message for you ?).

Let's clone the repository:

git clone git@github.com:BolajiAyodeji/nextjs-blog.git

This gives us access to all branches in this repository and you can easily toggle between each to see each version and its files.

git branch -a

Wondering where the remotes/origin/.. branches came from?

When you clone a repository, you pull data from a repository on the internet or an internal server known as the remote. The word origin is an alias created by your Git to replace the remote URL (you can change or specify another alias if you want).

These remotes/origin/.. branches point you back to the origin repository you cloned from the internet so you can still perform pull/push from the origin.

So when you clone master onto your machine, remotes/origin/master is the original master branch on the internet, and master is on your local machine. So you will pull/push from and to the remotes/origin/master.

In summary Remote is the URL that points you to the repository on the internet while Origin is an alias for this remote URL.

How to Clone a Specific Branch

Now let's clone a specific branch from our demo repository. There are two ways to clone a specific branch. You can either:

• Clone the repository, fetch all branches, and checkout to a specific branch immediately.

• Clone the repository and fetch only a single branch.

Option One

git clone --branch <branchname> <remote-repo-url>

or

git clone -b <branchname> <remote-repo-url>

With this, you fetch all the branches in the repository, checkout to the one you specified, and the specific branch becomes the configured local branch for git push and git pull . But you still fetched all files from each branch. This might not be what you want right? ?

Let's test it:

 git clone -b passwordless-auth git@github.com:BolajiAyodeji/nextjs-blog.git

This automatically configures passwordless-auth as the local branch but still tracks other branches.

Option Two

git clone --branch <branchname> --single-branch <remote-repo-url>

or

git clone -b <branchname> --single-branch <remote-repo-url>

This performs the same action as option one, except that the --single-branch option was introduced in Git version 1.7.10 and later. It allows you to only fetch files from the specified branch without fetching other branches.

Let's test it:

git clone -b passwordless-auth --single-branch git@github.com:BolajiAyodeji/nextjs-blog.git

This automatically configures passwordless-auth as the local branch and only tracks this branch.

If you run cd pages/api you'll find the auth.js file in the passwordless-auth branch as expected from the previous setup.

Conclusion

You might be running out of internet or storage space but you need to work on a task in a specific branch. Or you might want to clone a specific branch with limited files for various reasons. Fortunately, Git provides you the flexibility to do this. Flex your muscles and try it out, there's much more "Git" to learn.

One at a time, yeah? ✌?

The ability to find answers to problems is key, and these answers can be gotten by either debugging, googling or asking questions. These are skills everyone should learn.

While asking questions is great, doing it the wrong or less effective way might lead to many hours of unproductive work. In this article show you how to ask effective questions, become a better googler, and hone your problem-solving skills.

The Read Search Ask Method

freeCodeCamp came up with this amazing method for their students called the Read Search Ask method where you can solve your problems efficiently while respecting other people’s time, too.

It is expected that you follow these steps in order before you ask a question.

• Read the error or documentation

• Search Google or Stackoverflow

• Ask for help

Read your errors

The first step to finding a solution(s) to your problem is to understand the problem itself. Many developers ask questions without understanding the problem. Remember you want to ask questions efficiently and also respect the time of the individual you will be asking.

Most often, the answers to your bugs are in the errors itself. It's not considerate to ask questions that you could have solved yourself if you had read the error itself.

One great way to debug your errors is to log the error on your console or terminal and read the errors. Five things can happen at this stage:

• You identify the bug

• You determine the location of the bug (possible a file or section of your code)

• You understand the cause(s) of the bug

• You outline possible fixes of the bug

• You implement the possible fixes

Most often, just this step alone can help you solve your problem. The more you practice this, the better you become at debugging and fixing issues. Some bugs might be more complex than your capacity, and then you need to seek external help or resources.

Read the Documentation

Let's assume you couldn't fix your issues from the first step (but you were able to identify the bug at least). Then you need to read some documentation.

This might not apply to all bugs, but make sure to run your issue through this step before moving to the next. After identifying your bug, it's time to determine the cause and outline possible fixes.

Documentation is a set of documents provided on paper, or online, or on digital or analogue media, such as audio tape or CDs. Examples are user guides, white papers, on-line help, quick-reference guides. Paper or hard-copy documentation has become less common. ~ Wikipedia

Documentation serves as the official guide of a particular programming language, framework, library or technology. The best place to get the first-hand resource on a specific issue is to check the official help guide of the technology.

You might have misconfigured something, installed some wrong package or forgot to import something. But when you read the docs of the tech responsible for the bug it can help you find a fix quickly.

Recently I was working on a Gatsby project, and I ran into some console errors and blank white page in production. But this didn't occur in development.

TypeError: t.test is not a function

So vague right? After identifying the bug location, reading the docs and trying out several fixes, I discovered something: in the Gatsby Google analytics plugin configuration, I left the array meant to avoid sending pageview hits from custom paths empty.

plugins: [
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: 'UA-XXXXXXXX-1',
        head: false,
        anonymize: true,
        respectDNT: true,
        exclude: [''],
        pageTransitionDelay: 0,
      }
]

After 3 hours of reading the error, trying to identify the bug and reading Gatsby docs, I figured out that the exclude[] option had no values in it. Removing this fixed my issue since I didn't need to exclude any page after all.

This shows why you should spend some time debugging. It might take some time, and it will be frustrating. The bug might look stupid, the fix might be simple, but it's worth it. The more time you spend debugging, the better you become and the faster you will fix even more complex bugs next time.

Search

Now if you have read your errors and several docs, but your bug is becoming more complex, it's time to search the web "effectively".

One of the best places to search for solutions to your issues is Google since it already crawls content from numerous webpages, dev communities, and docs like StackOverflow, Hashnode, freeCodeCamp News, MDN, CSS tricks, Hackernoon, and many others.

Here are some helpful Google search tips you can try to get answers more efficiently:

• Add a specific domain to channel your search to a particular website and save some time. You can append the site: sitename to your search, and it'll return only results from that website.

• Search for specific title and text in specific sites. This will allow your results to include resources related to the title or text keyword you specified.

intitle:axe

intitle:axe intext:web ui testing

intitle:axe intext:web ui testing site:bolajiayodeji.com

• Add specific keywords to your search and pull out individual details like file paths. If your bug is related to Python, add it to your search query. If it is related to objects, add that too. This will streamline the results to a wider range of possible resources related to your bug, since there are objects in just about every programming language.

• Google automatically omits most non-alphanumeric characters from your queries. Symbols like `!@#$%^&*(){}[]<> are not included in your search. So you can focus on more specific keywords, as discussed above.

• Copy and paste your errors (removing specific information); there is a 99.9% chance that someone else has encountered the same error and has maybe opened some issue or written an article about it. Never underestimate the power of StackOverflow and GitHub issues.

• Search within the past few years since programming changes pretty quickly. This will ensure you don't hit redundant resources.

• Reiterate, try different keywords and more general keywords multiple times, and open multiple tabs until you find an answer. This might be awkward at first, but as you consistently do this, you'll get better, and with time it will take you less time and fewer tabs to find an answer.

Ask

Now comes the sought-after diamond. I would advise, before you ask ANY questions, that you make sure you have completed steps 1 and 2.

This might be hard, but the earlier you get used to this, the better you grow. I've had people ask me questions, and when I copy and paste their question into Google, the first result answers the question 100%. This doesn't feel great.

Most often, I'll have to send the link to them. Meanwhile, they could have done this themselves and saved me some time while increasing their problem-solving skills.

Even if your next-door neighbour works at Google, if your dad is a Software Engineer, if your close friend has two more years experience beyond you, try not to ask them questions until you have invested time into finding solutions yourself. This will help you:

• Build more self-confidence, as you won't need to rely so much on others. (What if that close friend is unavailable to respond to you someday, what will you do?!)

• Save the time of whomever you are planning to ask questions. There are tons of developers around the world, and you might not be the only one asking that same person questions. By completing steps 1 and 2 first, you are also helping others with less experience or more complex problems get answers quickly.

• Build your problem-solving, debugging, research and googling skills. These are essential skills that will help you become a better developer. You only master a skill when you consistently practice it, so try to practice this regularly and watch yourself grow and master the art.

But let's say that you have completed both steps, and you still need external help from a mentor, senior developer, team lead, the local community, group, or friend. How then do you ask questions effectively?

• Complete step 1 and make sure you understand the problem already

• Complete step 2 so you might at least have gotten some insights into possible causes and solutions of the problem

• Now do some research: you are either asking the question in dev communities like Stackoverflow or Hashnode or requesting help from an individual you feel has more experience than you.

• Developers answering questions on dev communities are sacrificing their time to help you. Help them also by asking "clear and concise questions". You should choose your words deliberately and precisely, constructing your sentences carefully to avoid confusion. From step 1 and step 2, properly draft your questions based on:

  • The "problem" you have encountered

  • Your thoughts on what you think might be wrong "based on your research."

  • Proof of research efforts (Devs will be happier to help you once they see you have made some effort already). Add links to resources you have checked and solutions you have tried already.

  • Be conversant with tools like CodePen, CodeSandBox, GitHub Gist, Repl.it, and GitHub so you can easily provide a link to a snippet of your code, a working project or mimimal reproduction without having to type so much text. Please try as much as possible not to paste code that is more than one line in chat.

  • Take clean and clear screenshots where necessary. Most often, you can take a snapshot of your console errors for smaller issues. Try not to strain your helper's eyes. Take specific and clear screenshots related to your error.

• Be sure you're asking the right person or community. Don't ask a python related question to someone who knows just Java. Your research from the previous step will help you here. It's also great to bookmark specific communities, individuals or groups where you will regularly ask questions based on how helpful their responses have been to you.

• Now don't be afraid to ask. I've had my share of toxic responses from people who respond with comments like "this is simple", "come on, google it", "you should know this", and you might get that too :(. The internet is a combination of good and toxic individuals who might be or not welcoming. Be confident in yourself, you have done your part by completing steps 1 and 2, so ask the question freely.

Conclusion

You don't need to "know it all", you just need to "know it and know how and where to find more knowledge."

Dear 10x, Senior, "It's Simple", Engineer: please note that you're discouraging developers who are asking these questions. I had to battle so much with my self-confidence some years ago, and it took me a while to get over it.

There is so much for learners to battle with already (learning, imposter syndrome, and personal issues), so please don't add to it. Be welcoming, make them feel like they belong here, and support them.

Your response can intentionally or unintentionally influence someone's decision to ask questions freely next time. If you can't or won't be available, you can either not respond at all or respond in a friendly way with feedback.

Refer people to your friends if you don't have the time or capabilities to attend to them, give constructive criticism, and try not to leave a question without feedback or impact.

Beginner developers need support. Learning to code is hard, especially if you're doing it alone. If you're learning in a traditional classroom, be sure to network with the other students. Do homework together. Discuss the problems. If you're learned online, it's very easy to get discouraged. Find chat spaces with others who are on a similar journey and use that space to encourage one another. Twitter also makes the experts accessible to you (reason #49948 why I love Twitter). Find the experts in whatever it is you're learning and consume their content. Ask them questions if you need to. The key is not to do it alone. ~ Angie Jones

The industry is growing daily. We are all trying to learn and get better at different levels. A lot of developer communities are supportive and make their resources available for consumption. Make sure you are a part of this movement, consume those available resources, contribute to these resources, and be a helper in any way you can.

Thank you to all the amazing developers across the globe, creating and sharing contents/ projects. Your contributions are the pillars holding up the tech ecosystem today. ??

Quick note, I interview awesome women in tech on the She Inspires at Hashnode where I understand the current health of the tech industry, get insights from their personal and career growth, and inspire other women to become better. Read all past interviews here, trust me it's worth your time. :)

Don't spend your entire life waiting for the best time to make that move – write that article, build that side-project, apply for that job or ask that question today. The best time is always now!

Communities are usually built on shared struggles of individuals learning in a particular region, and the goals of each community differ per the individual's collective needs.

Over the years, these developer communities have grown across the world with different goals and missions but still with the general aim of providing a platform for developers to learn, interact, share ideas, support each other and grow.

"If you want to go quickly, go alone. If you want to go far, go together." – African Proverb

To better help those looking out for communities to join, I have put together a list of 20 best communities in no particular order ranging from Engineering, Design, Data Science, Machine Learning, Developer Relations, Technical Writing, and more.

If you know any more communities you have found helpful, please share them in the comments section for the benefit of all :).

1. Women Who Code

Women Who Code is an international nonprofit organization that provides a global community for women in tech with events, coding resources, jobs, mentorship, and more. They aim to inspire, support, and help women develop technical skills and excel in their careers.

Join now to get exclusive access to their community, events, scholarships, free event tickets, job boards, and more.

2. Hashnode

Hashnode is an online community where developers share knowledge and grow their careers. Developers from around the world participate in consequential discussions on Hashnode. You can write stories, ask open-ended questions as well as technical questions, ask questions anonymously, and start polls. You can also ask popular tech teams and developer influencers questions or learn from stories of awesome women in tech.

Hashnode's Devblog platform enables you to create your personal blog on your custom domain in a few simple steps with everything you need to grow as a blogger. (No Paywall, Free domain, SSL, Automatic backup of posts, Markdown, AMP Support and more). Own your canonical, make your contents independent and build your domain authority.

3. Freecodecamp

freeCodeCamp is a nonprofit organization that helps people learn to code for free through thousands of videos, articles, interactive coding lessons and thousands of freeCodeCamp study groups around the world.

You learn by completing coding challenges and building projects alongside verified certifications.

4. StackOverflow

Stack Overflow is a question and answer site for programmers with tons of questions and answers on a wide range of topics in computer programming.

You can learn from already asked and answered questions, share your programming knowledge by answering asked questions or share your issues/bugs here.

5. HackerNews

Hacker News is a social news website focusing on computer science and entrepreneurship, where you can submit a link to technical content.

This is a great place to promote your contents to a wide range of viewers and find amazing contents from other technical geeks.

6. Hackernoon

Hackernoon is a tech media site that delivers stories and opinions written by real tech professionals and read by Technologists, Software Developers, Bitcoiners, Blockchain Enthusiasts.

You can write technical articles here and learn from a wide range of available unfettered technical contents.

7. SitePoint Community

SitePoint community is a community for web designers and developers to discuss everything web development from HTML, CSS, JavaScript, PHP, Photoshop, SEO, and more.

Similar to StackOverflow, you can ask and answer all web development questions here.

8. Kaggle

Kaggle is an online community of data scientists and machine learning practitioners with a vast repository of community published data and code with over 19,000 public datasets and 200,000 open notebooks. Kaggle also offers courses on Machine Learning, Pandas, Python, Deep Learning, Data Visualization, SQL alongside competitions, and discussions to help you grow.

9. Indie Hackers

An Indie hacker is "a person building an online project that can generate revenue." Indie Hackers is a global community of developers who are sharing their projects, strategies, and revenue statistics behind their companies and side projects.

You get to learn from the founders behind hundreds of successful online businesses and connect with others who are starting and growing their own companies through their global meetups, discussions, articles, and more.

10. Code Newbie

Code Newbie is the most supportive community of programmers and people learning to code. It started as a weekly Twitter chat made to provide much-needed support to people learning to code. It has since grown into a supportive, international community of people learning to code.

11. Digital Ocean Community

This is an inclusive place where developers can find or lend support and contribute to the community of DevOps and cloud computing enthusiasts. The community provides comprehensive guides, tutorials, trends for developers, Q/A sessions, and much more.

12. Product Hunt

Product Hunt is an exciting community of featured amazing products launched every day. It's a place for product-loving enthusiasts to share and find out about the latest mobile applications, websites, hardware projects, and tech creations.

13. Reddit

Reddit is global community of thousands sub communities, endless conversations, and authentic networking with tons of never-ending streams for developers like r/reactjs, r/vuejs, r/JAMstack_dev, r/Python and more.

14. DevCareers

DevCareer is a nonprofit organization that is focused on supporting upcoming developers with mentorship and resources to enable them to become world-class developers. They provide laptops, co-working space, resources, mentorship, and job placements for software developers in Africa who pass through the program.

15. The Interaction Design Foundation Community

The Interaction Design Foundation Community provides an exciting opportunity for designers to create and hone their portfolio while getting ready for a new User Experience job. They offer courses from UX experts, local UX Design Meet-ups in cities across the world, UX discussions, collaboration, and much more.

16. Daily UI

Daily UI is a free series of daily UI design challenges, design inspiration, and surprise rewards to make you become a better designer in 100 days. Their amazing daily reminders will motivate you to keep learning.

17. Dev.to

DEV is a community of software developers helping one another out. DEV provides a place for developers to collaborate and network while learning and sharing their knowledge.

18. DevRel Collective

DevRel Collective is a community of developer relations enthusiasts that exists to facilitate sharing information, resources, and encouragement among the DevRel community.

If you are actively involved in developer communities, advocacy, or event management, you should join this community.

19. Facebook Developer Circles

Developer Circles from Facebook is a program designed to create locally organized communities for developers. These communities educate and provide a forum for discussion and knowledge sharing around topics that are top-of-mind for developers in a particular market.

Find a local Developer Circle nearest to you here.

20. Google Developers Groups

GDG brings software developers with similar interests together to meet through meetups and hands-on workshops. The community welcomes everyone and anyone interested in tech from beginners to experienced professionals.``

Find a GDG chapter nearest to you here

Conclusion

"There is no power for change greater than a community discovering what it cares about." – Margaret J. Wheatley

The bond in developer communities has grown from just "technical groups" to "family groups" where everyone is passionate about sharing knowledge, giving back, and helping everyone reach higher heights.

Isn't this just amazing? Cheers to the new age where sharing knowledge and togetherness become the order of the day. ??

Recently on Hashnode I asked, "Which commit message convention do you use at work?" and I got some amazing responses with users explaining the conventions they use at work and for their personal projects.

In this article, I'll go over how to write good commit messages and why you should.

I published this article, along with many others, on my blog here.

Introduction to version control with Git

Version control software is an essential part of modern-day software developer practices.

By far, Git is the most widely used version control system in the world. It is a distributed and actively maintained open source project originally developed in 2005 by Linus Torvalds, the famous creator of the Linux operating system kernel.

New to Git? Check out the official getting started guide or this slide from a past talk I gave.

What is a commit message?

The commit command is used to save changes to a local repository after staging in Git. However, before you can save changes in Git, you have to tell Git which changes you want to save as you might have made tons of edits. A great way to do that is by adding a commit message to identify your changes.

Commit Options

• -m

This option sets the commit's message.

git add static/admin/config.yml
git commit -m "Setup multiple roles for netlify-cms git gateway"

• -a or --all

This option automatically commits all (including new) tracked, modified or deleted files.

git commit -a -m "Add a new role for netlify-cms git gateway"

• --amend

This option rewrites the very last commit with any currently staged changes or a new commit message and should only be performed on commits that have not been pushed to a remote repository, yet.

git add .
git commit --amend -m "Update roles for netlify-cms git gateway"

Why should you write good commit messages?

You might say, "It's just a personal project." Yes, you work alone now, but what happens when you work with a team or contribute to open source?

A well-crafted Git commit message is the best way to communicate context about a change to other developers working on that project, and indeed, to your future self.

Have you ever tried running git log on one of your old projects to see the "weird" commit messages you have used since its inception? It can be hard to understand why you made some changes in the past, and you'll wish you read this article earlier :).

Commit messages can adequately communicate why a change was made, and understanding that makes development and collaboration more efficient.

How to write commit messages with Git

Before now, I only used git commit -m "Fix X to allow Y to use Z" on my personal projects with just a subject and no extra description. This is great for small and clear fixes like git commit -m "Fix typo in README.md, but in cases of more extensive changes, you would need to add some extra details.

Editor method

Run git commit without a message or option and it'll open up your default text editor to write a commit message.

To configure your "default" editor:

git config --global core.editor nano

This would configure Git to use nano as your default editor. Replace "nano" with "emacs," "vim," or whatever your preference is.

In the opened editor, the first line is the subject (short description), leave a blank line after it, and everything else is the extended description (body).

<Summarize change(s) in around 50 characters or less>

<More detailed explanatory description of the change wrapped into about 72
characters>

Command Line method

git commit -m "Subject" -m "Description..."

The first -m option is the subject (short description), and the next is the extended description (body).

How to write good commit messages

There are several conventions used by different teams and developers to write good commit messages. I'll only outline some general rules and tips for writing commit messages–you have to decide what convention you want to follow. And if you work for a company or contribute to open source, you have to adapt to their convention :).

For consistency, you can use one convention for work and another for personal projects as you might change jobs sometime, and the convention might also change.

Be sure to check out this thread for some amazing commit message conventions or add yours to help someone make a decision.

Here's a great template of a good commit message originally written by Tim pope

Capitalized, short (50 chars or less) summary

More detailed explanatory text, if necessary.  Wrap it to about 72
characters or so.  In some contexts, the first line is treated as the
subject of an email and the rest of the text as the body.  The blank
line separating the summary from the body is critical (unless you omit
the body entirely); tools like rebase can get confused if you run the
two together.

Write your commit message in the imperative: "Fix bug" and not "Fixed bug"
or "Fixes bug."  This convention matches up with commit messages generated
by commands like git merge and git revert.

Further paragraphs come after blank lines.

- Bullet points are okay, too

- Typically a hyphen or asterisk is used for the bullet, followed by a
  single space, with blank lines in between, but conventions vary here

- Use a hanging indent

If you use an issue tracker, add a reference(s) to them at the bottom,
like so:

Resolves: #123

Looks great, right? Here's how you can make yours great too:

1. Specify the type of commit:

• feat: The new feature you're adding to a particular application

• fix: A bug fix

• style: Feature and updates related to styling

• refactor: Refactoring a specific section of the codebase

• test: Everything related to testing

• docs: Everything related to documentation

• chore: Regular code maintenance.[ You can also use emojis to represent commit types]

2. Separate the subject from the body with a blank line

3. Your commit message should not contain any whitespace errors

4. Remove unnecessary punctuation marks

5. Do not end the subject line with a period

6. Capitalize the subject line and each paragraph

7. Use the imperative mood in the subject line

8. Use the body to explain what changes you have made and why you made them.

9. Do not assume the reviewer understands what the original problem was, ensure you add it.

10. Do not think your code is self-explanatory

11. Follow the commit convention defined by your team

Conclusion

The most important part of a commit message is that it should be clear and meaningful. In the long run, writing good commit messages shows how much of a collaborator you are. The benefits of writing good commit messages are not only limited to your team, but indeed expand to yourself and future contributors.

Want to learn more about Git and become a professional "version controller"? Check out these excellent resources:

• https://try.github.io/

• https://git-scm.com/book/en/v2

• https://www.git-tower.com/learn/

• https://learngitbranching.js.org/

• https://github.com/commitizen/cz-cli

In simple terms, C++ is a sophisticated, efficient, general-purpose programming language based on C.

It was developed by Bjarne Stroustrup in 1979.

One of C++'s main features is the compiler. This is used to compile and run C++ code.

A compiler is a special program that processes statements written in a particular programming language like C++ and turns them into machine language or "code" that a computer's processor uses. (Source)

I actually wrote this article because I had a C++ assignment which required using a compiler. As usual, everyone was using the CodeBlocks IDE and Visual Studio IDE. But I was already used to Visual Studio Code for all my programming stuff.

I then set out to find a way of compiling C++ directly inside my own VsCode Editor, hence this article :).

In this article, I'll show you how to set up your compiler in VsCode and give you some links to some of the best C++ resources.

Prerequisites

• Prior knowledge of C++
  (I assume you're learning C++, about to start learning, or just reading this for fun. This article is not a C++ 101 tutorial – some understanding of C++ is needed.)

• Visual Studio Code Editor
  Download here and read the setup docs for Windows, Linux and Mac

• Internet connection (!important)

Disclaimer!

I will be using a Windows OS throughout this article, but I'll provide links to resources that will help those using other operating systems.

Now let's get started!

Download and install a C++ compiler

• Head to www.mingw.org and click the “Download/Installer” link to download the MinGW setup file, or click here for Windows, here for Linux, and here for Mac

MinGW, a contraction of "Minimalist GNU for Windows", is a minimalist development environment for native Microsoft Windows applications. (Source)

• After downloading, install MinGW and wait for the “MinGW Installation Manager” to show up.

• When the “MinGW Installation Manager” shows up, click on mingw32-gcc-g++ then select “Mark for Installation”

• In the menu at the top left corner, click on “Installation > Apply Changes”

• Wait and allow to install completely. Ensure you have a stable internet connection during this process.

Edit your PATH environment variable to include the directory where the C++ compiler is located

PATH is an environment variable on Unix-like operating systems, DOS, OS/2, and Microsoft Windows, specifying a set of directories where executable programs are located. In general, each executing process or user session has its own PATH setting. - Wikipedia

After installing MinGW, it can be found in C:\MinGW\bin. Now you have to include this directory in your environment variable PATH. If you've been using computers for a while now you should know how to do this already, but if you don't, here are a few resources:

• Click here for a Windows OS guide

• Click here for Linux

• Click here for a Mac OS guide

Install Code Runner extension in VS Code

Now we have our compiler set up, let's install Code Runner

Code Runner allows you to Run code snippet or code file for multiple languages:

C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, and custom command.

• Click here to download

• Or search in VsCode marketplace tab

• After installing restart VsCode

• Open your C++ file in Vscode. Here's a basic hello world program below:

#include <iostream>
using namespace std;
int main() 
{
    cout << "Hello world!";
    return 0;
}

Save this file as test.cpp

Run your code using Code Runner

• Use the shortcut Ctrl+Alt+N

• Or press F1 and then select/type Run Code

• Or right-click the Text Editor and then click Run Code in the editor context menu

The code will run and the output will be shown in the Output Window. Open the output window with `Ctrl+ shortcut.

To stop the running code

• Use the shortcut Ctrl+Alt+M

• Or press F1 and then select/type Stop Code Run

• Or right-click the Output Channel and then click Stop Code Run in the context menu

Hurray, you just successfully set up your C++ environment in VsCode!

Conclusion

Here's a quick hint: By default, VsCode's output terminal is read-only. If you're running code that requires user input like:

#include <iostream>
using namespace std;

const double pi = 3.14159; 

void calculate()
{
  double area; 
  double radius;

  cout<<"Enter Radius: "<<endl; 
  cin>>radius;

  area = pi * radius * radius; 

  cout<<"area is: "<<area<<endl;
 }

int main()
{
  calculate(); 
  return 0;
}

you won't be able to type into the terminal, Cannot edit in read-only terminal.
To fix this, you need to manually enable read-write.

• In VsCode, Go to File > Preference > Setting.

• In the User tab on the left panel, find the extensions section

• Scroll and find 'Run Code Configuration'

• Scroll and find a checkbox Run in Terminal (Whether to run code in Integrated Terminal) Check the box.

OR

• In your setting.json file, add:

"code-runner.runInTerminal": true

Hurray, you're done and ready to roll :).

C++ resources

Here are some C++ resources you can use to get started with learning C++

• https://www.learncpp.com/

• https://www.codecademy.com/learn/learn-c-plus-plus

• https://www.udemy.com/free-learn-c-tutorial-beginners/

• https://www.sololearn.com/Course/CPlusPlus/

• https://www.youtube.com/watch?v=vLnPwxZdW4Y

• https://www.tutorialspoint.com/cplusplus/cpp_useful_resources.htm

• https://makeawebsitehub.com/learning-c/

Credits

• MinGW Project

• Code Runner by Jun Han

Thank you for reading!

Developers, teams, and businesses of all sizes use Heroku to deploy, manage, and scale apps. Whether you're building a simple prototype or a business-critical product, Heroku's fully-managed platform gives you the simplest path to delivering apps quickly.

With features like Heroku Runtime, Heroku Postgres (SQL), Heroku Redis, Add-ons, Data Clips, App metrics, Smart containers, Enterprise-grade support, GitHub Integration and lots more, Heroku gives developers the freedom to focus on their core product without the distraction of maintaining servers, hardware, or infrastructure.

One of Heroku's core feature is deploying, managing, and scaling apps with your favorite languages [Node, Ruby, Python, Java, PHP, Go, and more].
In this article, I'll show you how to take an existing Node.js app and deploy it to Heroku – everything from creating your Heroku account to adding a database to your deployed application.

Prerequisites

In my previous article, I wrote about "Building a SlackBot with Node.js and SlackBots.js" and I promised to write a follow-up article to show how to host the SlackBot on either Heroku, Zeit or Netlify and publish it to the Slack Apps store. Well, this is the follow-up article but without the "Publishing to Slack Apps" part. We'll cover that in another article.

I assume you have/ know the following already:

• Read my previous article

• Built the inspireNuggets SlackBot

• Git, Node, and npm installed

• A free Heroku account

• Heroku CLI installed

Bonus

If you don't have npm, Node, and Heroku CLI installed or a Heroku account already, here's a quick bonus [ Yes, you're welcome :) ].

Installing npm and Node

• Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine.

• npm is the package manager for Node.js. An open-source project created to help JavaScript developers easily share packaged modules of code.

You can simply download Node.js here. Don't worry, npm comes with Node.js, so doing this installs both ✨

Creating a free Heroku account

Kindly head here and fill the Signup form. It's pretty simple.

Installing Heroku CLI

The Heroku Command Line Interface (CLI) makes it easy to create and manage your Heroku apps directly from the terminal. It’s an essential part of using Heroku. [ Well, you can decide to use the GitHub integration feature and Heroku Dashboard but yes you should learn how to use the CLI ]
Heroku CLI requires Git, the popular version control system. If you don’t already have Git installed, I wrote this article to help you.

Heroku CLI for Mac OS

brew tap heroku/brew && brew install heroku

or download the installer.

Heroku CLI for Ubuntu

sudo snap install --classic heroku

Heroku CLI for Windows

Download the installer for 64-Bit or 32-Bit.

Other installation methods

Please read this.

Getting started with Heroku CLI

• Verify your installation

heroku --version

heroku/7.30.1 linux-x64 node-v11.14.0

• Login to your Heroku account

There are two ways to do this:

• Web based auth

heroku login

Follow the instructions and login via your web browser then return to your terminal.

• CLI auth

This is a safer option as it saves your email address and an API token to ~/.netrc for future use.

heroku login -i

Deploying your Node.js App

I presume you've built the SlackBot already. If you haven't, please clone the finished project.

The project is a simple Slackbot that displays random inspiring techie quotes and jokes for developers/designers.

git clone https://github.com/BolajiAyodeji/inspireNuggetsSlackBot.git && cd inspireNuggetsSlackBot

Now let's deploy our app to Heroku ??. I'll show you two ways to do this:

Deploy via the Heroku Git

This is done via the Heroku CLI.

☑️ Checklist

• Specify the version of Node.js that will be used to run your application on Heroku in your package.json file.

"engines": {
    "node": "10.16.0"
  },

• Specify your start script.
  Simply create a Procfile (without any file extension) and add

web: node index.js

Heroku first looks for this Procfile. If none is found, Heroku will attempt to start a default web process via the start script in your package.json.

• Start your app locally using the heroku local command to be sure everything works fine

heroku local web

Your app should now be running on http://localhost:5000.

• Don't forget to .gitignore

/node_modules
.DS_Store
/*.env

? Let's Deploy

How this works is, you have the project working on local already and you've pushed to GitHub already.

• Run heroku create

Basically, this command creates a new Heroku app for you with some randomly generated domain and adds Heroku to your local Git repository.

• Now run git push heroku master

This is the magic command, it pushes your app to Heroku, installs it there, and launches it on your allocated domain.

In the example above, it's https://lit-cove-58897.herokuapp.com/

You can always make changes to your app settings and domains in your Heroku Dashboard

• Now visit your app in your browser

heroku open

• You can also view information about your running app using one of the logging commands. This is very useful in debugging errors.

heroku logs --tail

Deploy via GitHub integration

You can configure GitHub integration in the Deploy tab of apps in the Heroku Dashboard.

☑️ Checklist

• All previous checklists apply here – ensure you have the app deployed to GitHub already

? Let's Deploy

How this method works is that you push your entire project to GitHub and integrate it to Heroku. Every time you push, it deploys from GitHub to Heroku. Pretty cool right?

• Login to your Heroku Dashboard and create a new app

• Select your app name and region

Now your app has successfully been created

• Click the deploy tab and scroll to the Deployment method section

• Click the Connect to GitHub button

• Now you have the Connect to GitHub section, search for the repository and deploy.

• Now your app was deployed successfully

Automatic deploys

Now your app is deployed but you'll have to keep deploying manually. You need to enable automatic deploys for a GitHub branch, so Heroku builds and deploys all pushes to that branch.

• Scroll to the Automatic Deploys section

Select the branch you want to deploy. Ideally, this should be the master branch but change this according to your preference.

Now every push to master (or the branch you chose) will deploy a new version of this app.

Node.js Buildpack

In Heroku, Buildpacks are scripts that are run when your app is deployed. They are used to install dependencies for your app and configure your environment.

After deploying your app, ensure you add a Node.js buildpack to your project.

• Go to Settings and scroll to the Buildpack section

• Click the Add Buildpack button and select Node.js in the Popup modal.

• Now the new buildpack configuration will be used when this app is next deployed. Make some changes to your app and push to GitHub – it will automatically deploy.

Adding a Database to your deployed App'

The Heroku add-on marketplace has a large number of data stores, from Redis and MongoDB providers, to Postgres and MySQL.

Heroku provides three managed data services to all customers in the form of Add-ons:

• Heroku Postgres

• Heroku Redis

• Apache Kafka on Heroku

Writing about this three will make this article too long. It's pretty simple and I'll add some links to the Heroku Docs.

• Heroku Postgresql Docs

• Heroku Redis Docs

• Apache Kafka on Heroku Docs

Conclusion

Every Heroku account is allocated a pool of free dyno hours. Heroku (free) dynos are great for hosting apps and personal projects. The downside, however, is that your app will fall asleep if it doesn't receive any web traffic within 30-minutes :(.

You can use external tools to ping your server periodically so it never falls asleep.

Here are some to consider:

• Pingmydyno

• Heroku self ping

• Wakemydyno

• Kaffeine

Heroku is meticulously designed to help developers be as productive as possible. The platform removes frustrating obstacles and mundane tasks, so you can stay free of distraction in your development flow. Wherever you are on the learning path, Heroku helps you love app development even more. - Heroku

The Heroku experience provides services, tools, workflows, and polyglot support—all designed to enhance developer productivity. There is more to using Heroku and I hope you explore more and build amazing stuff with Heroku.

If you're a student, Kindly register for the GitHub Student Developer Pack to get One free Hobby Dyno for up to two years.

The pack give students free access to the best developer tools in one place so you can learn by doing.

Teamwork in Slack happens in channels — a single place for messaging, tools and files — helping everyone save time and collaborate.

One of the awesome features of Slack is Slack Apps, integrations and Slack Bots.

A Slack bot is a type of Slack App designed to interact with users via conversation. Your bot can send DMs, it can be mentioned by users, it can post messages or upload files, and it can be invited to channels. Cool right?

If you use Slack already, you should be familiar with some creative Slack bots like Standupbot, Birthdaybot and more.

In this article, I'll walk you through building your first Slack bot from start to finish with Node.js and SlackBots.js

PS: This article was published on my blog first.

SlackBot Description

We're going to build a simple Slackbot that displays random inspiring techie quotes and jokes for developers/designers.

I built a chrome extension that displays random inspiring techie quotes for developers/designers on your new tab (you can download it here). We'll be using the quotes JSON from this extension as our quotes API and the Chuck Norris Jokes API for the jokes.

When a user mentions our bot and adds inspire me, the bot returns a random quote from inspireNuggets. When the user types random joke, it returns a random joke from the Chuck Norris API. And when the user types help, it returns the instruction guide.

@inspirenuggets inspire me

@inspirenuggets random joke

@inspirenuggets help

This article is not really about what we'll be building - it's just to show you the concept behind Slack bots and how to build yours. After you go through it, you can think about something else and build a different bot, as there're many possibilities.

You can clone or fork the final project here.

Pretty interesting right? Let's get started.

Prerequisites

We'll build this bot with Node.js and SlackBots.js. You don't need to know how to write Node.js, since I'll walk you through it. Still, knowing it is an advantage. You should also have

• Basic JavaScript knowledge

• ES6 JavaScript

• Slack workspace

• Some experience with Slack

• Some version control skills

Setup environment

Let's set up and install Node.js and Npm first.

• Download node here. If you have it installed already, skip this step. If you prefer to use a package manager to install, read this for all operating systems.

• Check if you have Node installed

node -v

• Node.js comes with Npm, so you don't have to install that again.

npm -v

Now that we have Node.js setup, let's initialize our project.

Create your project directory (I called mine Slackbot) and initialize git:

git init

Next, create an index.js file:

touch index.js

And initialize Npm:

npm init

Simply answer all questions that come afterwards. If you're having issues, here's my own package.json:

{
  "name": "slackbot",
  "version": "1.0.0",
  "description": "A simple Slackbot that displays random inspiring techie quotes for developers/designers.",
  "main": "index.js",
  "scripts": {
    "start": "index.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/BolajiAyodeji/slackbot.git"
  },
  "author": "Bolaji Ayodeji",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/BolajiAyodeji/slackbot/issues"
  },
  "homepage": "https://github.com/BolajiAyodeji/slackbot#readme"
}

Install Dependencies

Now let's install and setup all the libraries we need.

SlackBots.js

SlackBots.js is a Node.js library for easy operation with the Slack API.

npm install slackbots

In index.js:

const SlackBot = require('slackbots');

Axios

Axios is a promise-based HTTP client for the browser and node.js. If you know Fetch or AJAX, this is just a library that does the same thing with way cooler features. You can see them here.

npm install axios

In index.js:

const axios = require('axios')

Nodemon

To run a script in Node.js, you have to run node index.js. Whenever you make changes to this file, you have to rerun node index.js. This sucks when you're making so many changes like we'll be doing. That's why we need nodemon, a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected.

npm install -g nodemon

In package.json, locate the scripts section and add a new start script:

"scripts": {
    "start": "node index.js"
  }

If you run npm start, the file will run but won't restart on change. To fix this, use the nodemon we installed instead of node like so:

"scripts": {
    "start": "nodemon index.js"
  }

Dotenv

I won't explain this in-depth. In a few days, I'll publish an article around environmental variables, but for now just know that we use this to hide secret keys and tokens like the Slack Access Token we would be using. This way you don't have to push your secret keys to GitHub.

There are several ways to do this, but I prefer using dotenv. Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env.

npm install dotenv

In index.js:

const dotenv = require('dotenv')

dotenv.config()

After all installation, your package.json should look like this:

{
  "name": "inspireNuggetsSlackBot",
  "version": "1.0.0",
  "description": "A simple Slackbot that displays random inspiring techie quotes and jokes for developers/designers.",
  "main": "index.js",
  "scripts": {
    "start": "nodemon index.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/BolajiAyodeji/inspireNuggetsSlackBot.git"
  },
  "author": "Bolaji Ayodeji",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/BolajiAyodeji/inspireNuggetsSlackBot/issues"
  },
  "homepage": "https://github.com/BolajiAyodeji/inspireNuggetsSlackBot#readme",
  "devDependencies": {
    "dotenv": "^8.0.0"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "slackbots": "^1.2.0"
  }
}

Create your Slack workspace

Now that we have that all set up, we need a Slack workspace to run our bot in development. Creating a workspace is pretty easy, read this to learn more.

Register your Slack Bot

Now that you have a workspace, you should have a Slack URL with your workspace name. Mine is mekafindteam.slack.com.

Now you'll need to create a Slack App. Create one here.

Enter your App name and ensure you're in the workspace you created if you're in multiple workspaces.

Now you'll see the settings > Basic Information page. Click the first tab Add features and functionality:

Since we're building a bot, select the Bots field.

Now you'll see the Bot user page:

Click the Add a Bot User button.

Your display name will automatically be filled in from your already chosen App name. You can update it, but I'll advise you use the same name everywhere with the same alphabet case to avoid errors.

Now, toggle the Always Show My Bot as Online switch to always show your bot as Online. Remember this bot is just like a user in your workspace. Afterwards, click the Add Bot User button.

Save all changes now:

Next, return to the Basic Information page and select the Install your app to your workspace tab.

Click the Install App to Workspace:

Click allow and wait to be redirected back to the Basic Information page.

Note the Manage distribution tab: this section is needed when you want to make your Bot available for installation by others. For now we're just building in development and I won't be covering distribution in this article. In my next article, I'll show you how to deploy your Slack bot and make it available as an App to other workspaces.

If you check your Slack workspace now, you should see the App installed in the Apps section.

For now, it's offline - once we start building the bot, we'll turn this on.

Customize your Slack bot

Now we've created our bot, let's do some customization.

Still, on the Basic Information page, scroll down to the Display Information section:

This is basic stuff: just upload a logo, change your background color, and add a short description.

Your icon should be 512x512px or bigger and your background color should be in HEX. Read more on the App guidelines here.

Here's what mine looks like after customization:

Slack bot OAuth Tokens

Now that we have our Slack bot setup, let's grab out token keys.

In the navigation bar, locate the Features section and click the OAuth & Permission tab:

You'll see two Access Tokens:

• OAuth Access Token

• Bot User OAuth Access Token

Copy the Bot User OAuth Access Token.

This will change every time you re-install this app or when you install it in another workspace. The token should start with xoxb-.

Keeping credentials secure is important whether you're developing open source libraries and tools, internal integrations for your workspace, or Slack apps for distribution to workspaces across the world. - Slack

This is why we have installed Dotenv - we'll set that up in the next section.

Building the bot

Now let's build our bot :).

First, let's keep our Access Token somewhere.

Create a .env file and add this:

BOT_TOKEN=YOUR_SLACK_ACCESS_TOKEN_HERE

Now let's start our SlackBot.js:

const bot = new SlackBot({
    token: `${process.env.BOT_TOKEN}`,
    name: 'inspirenuggets'
})

We've just created a bot variable that initializes a new SlackBot instance which has two values, our token and app name.

I used the ES6 template string syntax to bring in our token key from our .env file. dotenv has this covered for us.

Make sure you use the same name you used while creating your Slack app, or else you'll have authentication errors.

Now start the app:

npm start

nodemon should be running now and our Slack app should be online too.

Start handler

Our Bot does nothing now even though it's running. Let's return a message.

bot.on('start', () => {
    const params = {
        icon_emoji: ':robot_face:'
    }

    bot.postMessageToChannel(
        'random',
        'Get inspired while working with @inspirenuggets',
        params
    );
})

The bot.on handler sends the welcome message. We passed two parameters, the 'start' and a function which holds a params variable which also holds the slack emoji. Slack emoji have codes, and you can find them here. I used :robot_face:, but you can change this to your preferred emoji.

We also initialized the bot.postMessageToChannel function which is a SlackBot.js method to post a message to a channel. In this function, we pass the channel name we want to post to, the message in a string, and the params variable we declared earlier for the emoji. I used the #random channel and sent Get inspired while working with @inspirenuggets to it. Your app should restart automatically and your bot should do this:

Cool right?
You can also post messages to users and groups.

    // define existing username instead of 'user_name'
    bot.postMessageToUser('user_name', 'Hello world!', params); 


    // define private group instead of 'private_group', where bot exist
    bot.postMessageToGroup('private_group', 'Hello world!', params);

Error Handler

Let's also write a function to check for errors and return them:

bot.on('error', (err) => {
    console.log(err);
})

Message Handler

Now let's build the main bot functionality.

Like I said earlier, we'll be using the quotes JSON from the extension I built as our quotes API. The JSON can be found with this URL: https://raw.githubusercontent.com/BolajiAyodeji/inspireNuggets/master/src/quotes.json

When a user mentions our bot and adds inspire me, the bot returns a random quote from inspireNuggets. When the user types random joke, it returns a random joke from the Chuck Norris API. And when the user types help, it returns the instruction guide.

First, let's check for our command words from the user message (inspire me, random joke, and help):

function handleMessage(message) {
    if(message.includes(' inspire me')) {
        inspireMe()
    } else if(message.includes(' random joke')) {
        randomJoke()
    } else if(message.includes(' help')) {
        runHelp()
    }
}

Now let's create the three function we need

inspireMe()

Our demo JSON is not really an API, it's just some JSON I used in the Chrome Extension. We're only accessing it from GitHub raw contents. You can use any API you prefer, you'll just have to iterate differently to get your data depending on if your API returns an array or object - whichever it returns, it's not a big deal.

Check out my previous articles on:

• Manipulating Arrays in JavaScript and

• Iterating through JavaScript Objects  -  5 Techniques and Performance Tests.

function inspireMe() {
    axios.get('https://raw.githubusercontent.com/BolajiAyodeji/inspireNuggets/master/src/quotes.json')
      .then(res => {
            const quotes = res.data;
            const random = Math.floor(Math.random() * quotes.length);
            const quote = quotes[random].quote
            const author = quotes[random].author

            const params = {
                icon_emoji: ':male-technologist:'
            }

            bot.postMessageToChannel(
                'random',
                `:zap: ${quote} - *${author}*`,
                params
            );

      })
}

We just used Axios to get the JSON file which returns some data:

[
    {
        "number": "1",
        "author": "Von R. Glitschka",
        "quote": "The client may be king, but he's not the art director."
    },
    {
        "number": "2",
        "author": "Frank Capra",
        "quote": "A hunch is creativity trying to tell you something."
    },
.
.
.
.
]

This JSON currently contains 210 quotes and I update them frequently. So we want to get a random quote plus the author name every time the user request it. From our Axios response, we just do this:

const quotes = res.data;
const random = Math.floor(Math.random() * quotes.length);
const quote = quotes[random].quote
const author = quotes[random].author

And just like we did with the welcome message, we just return the quote and author instead of a string message:

`:zap: ${quote} - *${author}*`

Let's test this:

Type @inspirenuggets inspire me

Yayyy! It worked!

PS: You can always change the emoji type for every request. If you noticed I changed the inspireMe() to :male-technologist:

randomJoke()

We're getting the jokes from the Chuck Norris API from this endpoint https://api.chucknorris.io/jokes/random.

{
"categories": [],
"created_at": "2016-05-01 10:51:41.584544",
"icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
"id": "6vUvusBeSVqdsU9C5-ZJZw",
"updated_at": "2016-05-01 10:51:41.584544",
"url": "https://api.chucknorris.io/jokes/6vUvusBeSVqdsU9C5-ZJZw",
"value": "Chuck Norris once choked a wildcat to death with his sphincter muscle."
}

This is a real API that returns a random joke on every request, so we don't have to do Math.floor() again.

function randomJoke() {
    axios.get('https://api.chucknorris.io/jokes/random')
      .then(res => {
            const joke = res.data.value;

            const params = {
                icon_emoji: ':smile:'
            }

            bot.postMessageToChannel(
                'random',
                `:zap: ${joke}`,
                params
            );

      })
}

By now, you should understand how this works already. Make a post with the channel name, message and params.

runHelp()

This is similar to our welcome message: we just want to return a custom text when the user adds help to the request.

function runHelp() {
    const params = {
        icon_emoji: ':question:'
    }

    bot.postMessageToChannel(
        'random',
        `Type *@inspirenuggets* with *inspire me* to get an inspiring techie quote, *random joke* to get a Chuck Norris random joke and *help* to get this instruction again`,
        params
    );
}

Now let's test all three commands:

Everything works fine now, congratulations!!!! You just built your SlackBot.

There are an endless number of possibilities of Bots you can build with this to automate your own work or teamwork.

You can build a bot that:

• Fetches your tasks from somewhere and reminds you when you type hey what next,

• Welcomes every user to your workspace (I built this during one of the HNG Internship's),

• Gives you football matches updates while you're working,

• Tells your team when you hit a milestone in number of registered users,

and many more...

It's just about having somewhere to get the data from, and some basic iteration skills and the bot.postMessageToChannel() method.

Automation is one thing we should learn as developers. We have a lot to do, so we should automate the simpler tasks so we have time for the more difficult ones. I hope with this you can automate your tasks and I look forward to the creative ideas you'll bring to life.

Final Code

Here's our final index.js

const SlackBot = require('slackbots');
const axios = require('axios')
const dotenv = require('dotenv')

dotenv.config()

const bot = new SlackBot({
    token: `${process.env.BOT_TOKEN}`,
    name: 'inspirenuggets'
})

// Start Handler
bot.on('start', () => {
    const params = {
        icon_emoji: ':robot_face:'
    }

    bot.postMessageToChannel(
        'random',
        'Get inspired while working with @inspirenuggets',
        params
    );
})

// Error Handler
bot.on('error', (err) => {
    console.log(err);
})

// Message Handler
bot.on('message', (data) => {
    if(data.type !== 'message') {
        return;
    }
    handleMessage(data.text);
})

// Response Handler
function handleMessage(message) {
    if(message.includes(' inspire me')) {
        inspireMe()
    } else if(message.includes(' random joke')) {
        randomJoke()
    } else if(message.includes(' help')) {
        runHelp()
    }
}

// inspire Me
function inspireMe() {
    axios.get('https://raw.githubusercontent.com/BolajiAyodeji/inspireNuggets/master/src/quotes.json')
      .then(res => {
            const quotes = res.data;
            const random = Math.floor(Math.random() * quotes.length);
            const quote = quotes[random].quote
            const author = quotes[random].author

            const params = {
                icon_emoji: ':male-technologist:'
            }

            bot.postMessageToChannel(
                'random',
                `:zap: ${quote} - *${author}*`,
                params
            );

      })
}

// Random Joke
function randomJoke() {
    axios.get('https://api.chucknorris.io/jokes/random')
      .then(res => {
            const joke = res.data.value;

            const params = {
                icon_emoji: ':smile:'
            }

            bot.postMessageToChannel(
                'random',
                `:zap: ${joke}`,
                params
            );

      })
}

// Show Help
function runHelp() {
    const params = {
        icon_emoji: ':question:'
    }

    bot.postMessageToChannel(
        'random',
        `Type *@inspirenuggets* with *inspire me* to get an inspiring techie quote, *random joke* to get a Chuck Norris random joke and *help* to get this instruction again`,
        params
    );
}

What Next?

Our bot only runs in development now, and to use it we always have to npm start.

This isn't cool, right? We'll want to host it somewhere it can run every time. In my next article, I'll show you how to host this on either Heroku, Zeit or Netlify and publish it to the Slack Apps store so anyone around the world can use it.
Also, don't forget to add this in your .gitignore before pushing to GitHub:

/.env
/node_modules

Subscribe to my newsletter to get updated.

Useful Resources

• Slack API

• Slack API Docs

• SlackBot.js

• Slack Apps

• Slack Apps Guidelines

• An introduction to Slack apps

• inspireNuggets

• inspireNuggetsSlackBot

Traditionally, forms are managed with the help of a server (also known as server side), but this is more efficient when you’re processing the data from the form, maybe a user registration form where the form data is validated, authenticated and saved in a database.

When you’re building a simple form where you’re only receiving data from the user and not processing (i.e contact form) the goal is to get the data from the form and send to your company support email (e.g info@…, support@…)

Using a server here is not ideal and is only an overkill, a very common way of doing this is via PHPMailer ( The classic email sending library for PHP). PHPMailer is used with PHP and requires a lot of boring server configurations. What if you’re just building a static site? There should be an easier way of doing this client side right?

In this article, I’ll introduce you to two methods of handling form data client side in static sites. There are other methods but I’ve used these two and considered them to be the best and easiest (no hard feelings :) ).

NO hectic configurations, NO servers, NO serious stuff, just build your form, do some little tweaks, the user submits and bingo it heads straight to your designated email. :)

STARTER FORM

For the purpose of this article, I’ve built a basic form with HTML5 and Bootstrap 4, you can fork it from the Codepen below.

Currently, this form uses none of the methods we’ll talk about, at the end of the article, I’ll provide the full code for both methods, you can then update the form and test. I’ve added a little validation, don’t worry about that

Now, let’s get started!!

METHOD ONE

Formspree provides functional HTML forms via their platform with no PHP or JavaScript. Send your form to their URL and it’ll be forwarded to your email. No PHP, Javascript or sign up required — perfect for static sites!

Wait!, wait!!, wait!!! it’s Open Sourced too

FORM HANDLING WITH FORMSPREE

• Build your form, we’ve done that already

(Follow the next step and update this form to use this method)

<form action="https://formspree.io/you@email.com" method="POST">
    <input type="hidden" name="_subject" value="Bolaji's Form">                 
    <input type="hidden" name="_next" value="/thanks.html" >
    <input type="text" name="name">
    <input type="email" name="_replyto">
    <input type="text" name="phone">
    <input type="submit" value="Send">
</form>

Now let’s go over the new stuff added above.

• We changed the form’s action-attribute to [https://formspree.io/you@email.com](https://formspree.io/you@email.com) [replace your@email.com with your own email.] This is simply sending your form data to formspree then to your email. Formspree is acting as a third party here.

• I’ve added some name attributes to the input fields. This is just configuring each field so we can grab the data and send to formspree.

— For Email address, I added a _replyto attribute (This just mean, you’ll be able to quickly reply to the user who originally submitted via email)

— I’ve added a _subject attribute. This value is used for the email’s subject so that you can quickly reply to submissions without having to edit the subject line each time.

— I’ve added a _next attribute. By default, after submitting a form the user is shown the Formspree “Thank You” page. You can provide an alternative URL for that page like so: <input type=”hidden” name=”_next” value=”/thanks.html" />

formspree default success page

custom success page I built for a client.

• We added a value attribute to the send button [value=”Send”]

This is our Thanos, one snap at this button and your form is erased and its data sent to your email.

That’s all to using formspree :) Although there are other configuration settings for several other features, you can check here.

THINGS TO NOTE!

• You don’t need to signup to use formspree, just add your action attribute and you’re good to go. You only signup if you want a Paid plan.

• Make sure your form has the method=”POST” attribute

• Formspree uses reCAPTCHA to identify spam submissions. After a user clicks our Thanos, they’ll have to do some CAPTCHA verification. Cool way of stopping spam submissions.

• After that, the form is sent to your designated email and the custom success page is displayed!

• Formspree does not read your form data, they have no access to it, they’re just a delivery service, you send your parcel sealed to them, they deliver to your customer, cool right? :)

• Formspree is free for 50 submissions per form per month ONLY! Need more, you can upgrade to the Paid plan.

• Formspree has both Free and Paid plans. Paid plans have several other features like admin dashboard, unlimited submissions, AJAX handling e.t.c Paid plans and their features can be found here

If you’re building a basic site, you shouldn’t worry about Paid plans, Paid plans are mostly needed by Enterprise applications and companies, the Free plan would cover all your needs. I use this for some client projects too :)

• Formspree premium users can submit forms via AJAX. Just set the Accept header to application/json. If you’re using jQuery this can be done like so:

    $.ajax({
        url: "https://formspree.io/FORM_ID",
        method: "POST",
        data: {message: "hello!"},
        dataType: "json"
    });

Well, this is for paid users :)

If you don’t use jQUERY like me and you’re tired of the lengthy AJAX default syntax, check out simpleAJAX library, a simple library I built for handling HTTP requests. Like so:

const http = new simpleAJAX;

const data = {
    "name": "Bolaji Ayodeji",
    "email": "hi@bolajiayodeji.com",
    "message": "hi"
};
http.post('https://formspree.io/FORM_ID', data,
(err, user) => {
    if(err) {
     console.log(err)
    } else {
     console.log(user);
   }
 });

A star would make me happy! :)

If you're into React, ZEIT has a comprehensive guide on using Formspree with Create React App, complete with deployment instructions. Highly recommended!

METHOD TWO

Netlify offers form handling for sites deployed on their platform.

FORM HANDLING WITH NETLIFY

• Create an account on Netlify and deploy your site there.

Please watch this 14min video by @JamesQuick below if you don’t know what Netlify is. Learn about all of the awesome features in Netlify like Continuous Deployment, Lambda Functions, Split Testing, Preview Branches, and more!

• Now that you have deployed your site, let’s create the form again

    <form action="/thanks.html" name="Bolaji's form" method="POST" data-netlify="true">
        <input type="text" name="name">
        <input type="email" name="email">
        <input type="text" name="phone">
        <input type="submit">
    </form>

Now let’s go over the new stuff I added above.

• Netlify is quite easier, you simply add the netlify attribute data-netlify="true"to the <form> tag, and you can start receiving submissions in your Netlify site admin panel.

• Here, the action attribute serves as your custom success page

That’s all, your form submissions goes straight to your Netlify admin panel

Settings > Build & deploy > Environment > Environment variables

(Watch the video above if you don’t understand what the panel means)

Things to note!

• Your site must be hosted on netlify to use this method

• You must add the netlify attribute for the form to work

• You can find all submissions to your Netlify forms in the Forms tab of your site dashboard. Settings > Forms

• Netlify has free and paid plans too

https://www.netlify.com/pricing

• Netlify has several built-in notification options for verified form submissions, including email and Slack notifications. (Only available in Paid plans). You can find them in Settings > Forms > Form notifications.

• Netlify also integrates with Zapier, so you can set up triggers that send your verified form submissions to any of the 500+ applications in their catalogue.

• All notification emails are sent from team@netlify.com, and any replies to a notification will go to that address. If you would like to respond to a form submitter, you will need to enter their address manually.

• Netlify Forms can receive files uploads via form submissions too :).

To do this, add an input with type="file" to any form. When a form is submitted, a link to each uploaded file will be included in the form submission details.

• Netlify is limited to 100 submissions per month and 10MB uploads per month for the FREE plan, If you want more, you’ll need to upgrade

form submissions in the admin panel

And that’s all!!

FINAL HTML FORM CODE

<!--formspree.html-->

<form action="https://formspree.io/you@email.com" method="POST">
   <input type="hidden" name="_subject" value="Bolaji's Form">                 
   <input type="hidden" name="_next" value="/thanks.html" >
   <div class="form-group">
      <label>Name:</label>
      <input type="text" class="form-control" id="name" placeholder="Name">
      <div class="invalid-feedback">
         Name must be between 2 and 20 characters
      </div>
   </div>
   <div class="form-group">
      <label>Email:</label>
      <input type="text" class="form-control" id="email" placeholder="Email address">
      <div class="invalid-feedback">
         Enter a valid email address
      </div>
   </div>
   <div class="form-group">
      <label>Telephone:</label>
      <input type="text" class="form-control" id="phone" placeholder="Phone number">
      <div class="invalid-feedback">
         Enter a valid number
      </div>
   </div>
   <input type="submit" value="Send" class="btn btn-info btn-block">
</form>

<!--netlify.html-->

<form action="/thanks.html" name="Bolaji's form" method="POST" data-netlify="true">
   <div class="form-group">
      <label>Name:</label>
      <input type="text" class="form-control" id="name" placeholder="Name">
      <div class="invalid-feedback">
         Name must be between 2 and 20 characters
      </div>
   </div>
   <div class="form-group">
      <label>Email:</label>
      <input type="text" class="form-control" id="email" placeholder="Email address">
      <div class="invalid-feedback">
         Enter a valid email address
      </div>
   </div>
   <div class="form-group">
      <label>Telephone:</label>
      <input type="text" class="form-control" id="phone" placeholder="Phone number">
      <div class="invalid-feedback">
         Enter a valid number
      </div>
   </div>
   <input type="submit" value="Send" class="btn btn-info btn-block">
</form>

CONCLUSION

One thing to note about formspree is that the free version leaves your email address exposed to scrapers and bots so you might want to set up a temporary disposable email address while you use it. If you want to hide your email address by default, you’ll need to upgrade your plan.

Do you want extra practice? Watch this tutorial video below by Brad Traversy and learn how to add a contact or any type of form to your website by using the Netlify form feature including file uploads and spam filtering. [Full guide + practical code]

Useful Links

• netlify.com/docs/form-handling

• forestry.io/blog/5-ways-to-handle-forms-on-..

• gridsome.org/docs/guide-forms

• zeit.co/guides/deploying-react-forms-using-..

• zeit.co/guides/deploying-statickit-with-zei..

Thanks for reading!

The https:// clone URLs are available on all public and private repositories. These URLs work everywhere, even if you are behind a firewall or proxy.

When you interact with a remote repository using HTTPS URLs on the command line, you’ll be asked for your GitHub username and password, this sucks right?

Well using an HTTPS remote URL has some advantages: it’s easier to set up than SSH :), and usually works through strict firewalls and proxies. However, it also prompts you to enter your GitHub user credentials every time you pull or push a repository :(.

You can fix this by configuring Git to store your password for you.

Here’s how:

• Update the URL of origin remote using SSH instead of HTTPS;

git remote set-url origin git@github.com:username/repo.git

or

• Make Git store the username and password and it will never ask for them.

git config --global credential.helper store

• Save the username and password for a session (cache it);

git config --global credential.helper cache

• You can also set a timeout for the above setting

git config --global credential.helper 'cache --timeout=600'

Bingo, you just fixed it, Git will never ask for your credentials again.

CONCLUSION

However, due to security reasons, it is advisable that you use SSH to interact with GitHub, especially if you work for a company or you’re using a computer that isn’t yours.

Using the SSH protocol, you can connect to GitHub without supplying your username or password every time.

Learn how to connect to GitHub with SSH here.

By far, Git is the most widely used modern version control system in the world today. Git is a distributed and actively maintained open source project originally developed in 2005 by Linus Torvalds, the famous creator of the Linux operating system kernel.

Unlike older centralized version control systems such as SVN and CVS, Git is distributed: every developer has the full history of their code repository locally. Git also works well on a wide range of operating systems and IDEs (Integrated Development Environments).

In this article, I’ll show you how to install Git, set it up for the first time, useful tips and resources to learn more/ learn advanced git concepts. Let’s roll!

I assume you already know what Version control is, if you don’t, kindly check out this slide to learn more.

Here’s a quick recap of what Version control means: Version Control is: the process of managing changes to source code or set of files over time.

Version control is the process of managing changes to source code or set of files over time.

Version control software keeps track of every modification to the code in a special kind of database. If a mistake is made, developers can restore and compare earlier versions of the code to help fix the mistake while minimizing disruption to all team members or contributors.

Now that you know what Version Control and Git mean, let’s install it.

FOR MAC OS:

Download Git for macOS or install using Homebrew

brew install git

FOR LINUX OS:

Download Git for Linux or
Install for Debian-based Linux systems

sudo apt-get update
 sudo apt-get upgrade
 sudo apt-get install git

or
Install for Red Hat-based Linux systems

sudo yum upgrade
 sudo yum install git

FOR WINDOWS OS:

Download Git for Windows

HERE’S A MORE DETAILED INSTALLATION GUIDE FOR DIFFERENT SYSTEMS ON GIT OFFICIAL DOCS

Now that you have Git on your system, let’s set up the Git environment.
Git comes with a tool called git config that lets you get and set configuration variables that control all aspects of how Git looks and operates.

• First set your identity, your name and email address like so:

git config --global user.name "bolajiayodeji"
 git config --global user.email mailtobolaji@gmail.com

the --global option makes sure these values are used throughout your system

• Next set up the default text editor you’ll use whenever you need to enter a message in Git. This is not compulsory, if you don’t configure this, Git will use your default editor. If you want to use something else, configure like so:

git config --global core.editor emacs

• Next, set up colors for your Git console.

For Linux OS users, you can use third pary Zsh configurators like oh my zsh to customize your terminal look with themes :).
To configure this, do this:

git config --global color.ui true

The color.ui is a meta configuration that includes all the various color.* configurations available with git commands.

Now Git is ready for use.

CHECK YOUR SETTINGS

git config --list

user.name=bolajiayodeji
 user.email=mailtobolaji@gmail.com
 color.ui=true

Want to learn some super Git commands?

I wrote an article: Git Cheat Sheet that covers some important Git commands you’ll need.

CONCLUSION

Version control software is an essential part of the every-day of modern-day software developer practices. Once accustomed to the powerful benefits of version control systems, many developers wouldn’t consider working without it even for non-software projects.

In this article, I would show you various methods of manipulating arrays in JavaScript [^^]

What are Arrays in JavaScript?

Before we proceed, you need to understand what arrays really mean.

In JavaScript, an array is a variable that is used to store different data types. It basically stores different elements in one box and can be later assesssed with the variable.

Declaring an array:

let myBox = [];   // Initial Array declaration in JS

Arrays can contain multiple data types

let myBox = ['hello', 1, 2, 3, true, 'hi'];

Arrays can be manipulated by using several actions known as methods. Some of these methods allow us to add, remove, modify and do lots more to arrays.

I would be showing you a few in this article, let’s roll :)

NB: I used Arrow functions in this post, If you don’t know what this means, you should read here. Arrow function is an ES6 feature.

toString()

The JavaScript method toString() converts an array to a string separated by a comma.

let colors = ['green', 'yellow', 'blue'];

console.log(colors.toString()); // green,yellow,blue

join()

The JavaScript join() method combines all array elements into a string.

It is similar to toString() method, but here you can specify the separator instead of the default comma.

let colors = ['green', 'yellow', 'blue'];

console.log(colors.join('-')); // green-yellow-blue

concat

This method combines two arrays together or add more items to an array and then return a new array.

let firstNumbers = [1, 2, 3];
let secondNumbers = [4, 5, 6];
let merged = firstNumbers.concat(secondNumbers);
console.log(merged); // [1, 2, 3, 4, 5, 6]

push()

This method adds items to the end of an array and changes the original array.

let browsers = ['chrome', 'firefox', 'edge'];
browsers.push('safari', 'opera mini');
console.log(browsers); 
// ["chrome", "firefox", "edge", "safari", "opera mini"]

pop()

This method removes the last item of an array and returns it.

let browsers = ['chrome', 'firefox', 'edge'];
browsers.pop(); // "edge"
console.log(browsers); // ["chrome", "firefox"]

shift()

This method removes the first item of an array and returns it.

let browsers = ['chrome', 'firefox', 'edge'];
browsers.shift(); // "chrome"
console.log(browsers); // ["firefox", "edge"]

unshift()

This method adds an item(s) to the beginning of an array and changes the original array.

let browsers = ['chrome', 'firefox', 'edge'];
browsers.unshift('safari');
console.log(browsers); //  ["safari", "chrome", "firefox", "edge"]

You can also add multiple items at once

splice()

This method changes an array, by adding, removing and inserting elements.

The syntax is:

array.splice(index[, deleteCount, element1, ..., elementN])

• **Index** here is the starting point for removing elements in the array

• **deleteCount** is the number of elements to be deleted from that index

• **element1, …, elementN** is the element(s) to be added

Removing items

after running splice() , it returns the array with the item(s) removed and removes it from the original array.

let colors = ['green', 'yellow', 'blue', 'purple'];
colors.splice(0, 3);
console.log(colors); // ["purple"]
// deletes ["green", "yellow", "blue"]

NB: The deleteCount does not include the last index in range.

If the second parameter is not declared, every element starting from the given index will be removed from the array:

let colors = ['green', 'yellow', 'blue', 'purple'];
colors.splice(3);
console.log(colors); // ["green", "yellow", "blue"]
// deletes ['purple']

In the next example we will remove 3 elements from the array and replace them with more items:

let schedule = ['I', 'have', 'a', 'meeting', 'tommorrow'];
// removes 4 first elements and replace them with another
schedule.splice(0, 4, 'we', 'are', 'going', 'to', 'swim');
console.log(schedule); 
// ["we", "are", "going", "to", "swim", "tommorrow"]

Adding items

To add items, we need to set the deleteCount to zero

let schedule = ['I', 'have', 'a', 'meeting', 'with'];
// adds 3 new elements to the array
schedule.splice(5, 0, 'some', 'clients', 'tommorrow');
console.log(schedule); 
// ["I", "have", "a", "meeting", "with", "some", "clients", "tommorrow"]

slice()

This method is similar to splice() but very different. It returns subarrays instead of substrings.

This method copies a given part of an array and returns that copied part as a new array. It does not change the original array.

The syntax is:

array.slice(start, end)

Here’s a basic example:

let numbers = [1, 2, 3, 4]
numbers.slice(0, 3)
// returns [1, 2, 3]
console.log(numbers) // returns the original array

The best way to use slice() is to assign it to a new variable.

let message = 'congratulations'
const abbrv = message.slice(0, 7) + 's!'; 
console.log(abbrv) // returns "congrats!"

split()

This method is used for strings. It divides a string into substrings and returns them as an array.

Here’s the syntax:string.split(separator, limit);

• The **separator** here defines how to split a string either by a comma.

• The **limit** determines the number of splits to be carried out

let firstName = 'Bolaji';
// return the string as an array
firstName.split() // ["Bolaji"]

another example:

let firstName = 'hello, my name is bolaji, I am a dev.';
firstName.split(',', 2); // ["hello", " my name is bolaji"]

NB: If we declare an empty array, like this firstName.split(''); then each item in the string will be divided as substrings:

let firstName = 'Bolaji';
firstName.split('') // ["B", "o", "l", "a", "j", "i"]

indexOf()

This method looks for an item in an array and returns the index where it was found else it returns -1

let fruits = ['apple', 'orange', false, 3]
fruits.indexOf('orange'); // returns 1
fruits.indexOf(3); // returns 3
friuts.indexOf(null); // returns -1 (not found)

lastIndexOf()

This method works the same way indexOf() does except that it works from right to left. It returns the last index where the item was found

let fruits = ['apple', 'orange', false, 3, 'apple']
fruits.lastIndexOf('apple'); // returns 4

filter()

This method creates a new array if the items of an array pass a certain condition.

The syntax is:

let results = array.filter(function(item, index, array) {
  // returns true if the item passes the filter
});

Example:

Checks users from Nigeria

const countryCode = ['+234', '+144', '+233', '+234'];
const nigerian = countryCode.filter( code => code === '+234');
console.log(nigerian); // ["+234", "+234"]

map()

This method creates a new array by manipulating the values in an array.

Example:

Displays usernames on a page. (Basic friend list display)

const userNames = ['tina', 'danny', 'mark', 'bolaji'];
const display = userNames.map(item => {
return '<li>' + item + '</li>';
})
const render = '<ul>' + display.join('') + '</ul>';
document.write(render);

another example:

// adds dollar sign to numbers
const numbers = [10, 3, 4, 6];
const dollars = numbers.map( number => '$' + number);
console.log(dollars);
// ['$10', '$3', '$4', '$6'];

reduce()

This method is good for calculating totals.

reduce() is used to calculate a single value based on an array.

let value = array.reduce(function(previousValue, item, index, array) {
  // ...
}, initial);

example:

To loop through an array and sum all numbers in the array up, we can use the for of loop.

const numbers = [100, 300, 500, 70];
let sum = 0;
for (let n of numbers) {
sum += n;
}
console.log(sum);

Here’s how to do same with reduce()

const numbers = [100, 300, 500, 70];
const sum = numbers.reduce((accummulator, value) =>
accummulator + value
, 0);
console.log(sum); // 970

If you omit the initial value, the total will by default start from the first item in the array.

const numbers = [100, 300, 500, 70];
const sum = numbers.reduce((accummulator, value) => accummulator + value);
console.log(sum); // still returns 970

The snippet below shows how the reduce() method works with all four arguments.

source: MDN Docs

More insights into the reduce() method and various ways of using it can be found here and here.

forEach()

This method is good for iterating through an array.

It applies a function on all items in an array

const colors = ['green', 'yellow', 'blue'];
colors.forEach((item, index) => console.log(index, item));
// returns the index and the every item in the array
// 0 "green"
// 1 "yellow"
// 2 "blue"

iteration can be done without passing the index argument

const colors = ['green', 'yellow', 'blue'];
colors.forEach((item) => console.log(item));
// returns every item in the array
// "green"
// "yellow"
// "blue"

every()

This method checks if all items in an array pass the specified condition and returntrue if passed, else false.

check if all numbers are positive

const numbers = [1, -1, 2, 3];
let allPositive = numbers.every((value) => {
return value >= 0;
})
console.log(allPositive); // would return false

some()

This method checks if an item (one or more) in an array pass the specified condition and return true if passed, else false.

c_hecks if at least one number is positive_

const numbers = [1, -1, 2, 3];
let atLeastOnePositive = numbers.some((value) => {
return value >= 0;
})
console.log(atLeastOnePositive); // would return true

includes()

This method checks if an array contains a certain item. It is similar to .some(), but instead of looking for a specific condition to pass, it checks if the array contains a specific item.

let users = ['paddy', 'zaddy', 'faddy', 'baddy'];
users.includes('baddy'); // returns true

If the item is not found, it returns false

There are more array methods, this is just a few of them. Also, there are tons of other actions that can be performed on arrays, try checking MDN docs herefor deeper insights.

Summary

• toString() converts an array to a string separated by a comma.

• join() combines all array elements into a string.

• concat combines two arrays together or add more items to an array and then return a new array.

• push() adds item(s) to the end of an array and changes the original array.

• pop() removes the last item of an array and returns it

• shift() removes the first item of an array and returns it

• unshift() adds an item(s) to the beginning of an array and changes the original array.

• splice() changes an array, by adding, removing and inserting elements.

• slice() copies a given part of an array and returns that copied part as a new array. It does not change the original array.

• split() divides a string into substrings and returns them as an array.

• indexOf() looks for an item in an array and returns the index where it was found else it returns -1

• lastIndexOf() looks for an item from right to left and returns the last index where the item was found.

• filter() creates a new array if the items of an array pass a certain condition.

• map() creates a new array by manipulating the values in an array.

• reduce() calculates a single value based on an array.

• forEach() iterates through an array, it applies a function on all items in an array

• every() checks if all items in an array pass the specified condition and return true if passed, else false.

• some() checks if an item (one or more) in an array pass the specified condition and return true if passed, else false.

• includes() checks if an array contains a certain item.

Let’s wrap it here; Arrays are powerful and using methods to manipulate them creates the Algorithms real-world applications use.

Let's do a create a small function, one that converts a post title into a urlSlug.

URL slug is the exact address of a specific page or post on your site.

When you write an article on Freecodecamp News or any other writing platform, your post title is automatically converted to a slug with white spaces removed, characters turned to lowercase and each word in the title separated by a hyphen.

Here’s a basic function that does that using some of the methods we learnt just now.

const url = 'https://bolajiayodeji.com/'
const urlSlug = (postTitle) => {
let postUrl = postTitle.toLowerCase().split(' ');
let postSlug = `${url}` + postUrl.join('-');
return postSlug;
}
let postTitle = 'Introduction to Chrome Lighthouse'
console.log(urlSlug(postTitle));
// https://bolajiayodeji.com/introduction-to-chrome-lighthouse

in postUrl, we convert the string to lowercase then we use the **split()**method to convert the string into substrings and returns it in an array

["introduction", "to", "chrome", "lighthouse"]

in post slug we join the returned array with a hyphen and then concatenate it to the category string and main url.

let postSlug = `${url}` + postUrl.join('-');
postUrl.join('-') // introduction-to-chrome-lighthouse

That’s it, pretty simple, right? :)

If you’re just getting started with JavaScript, you should check this repository here, I’m compiling a list of basic JavaScript snippets ranging from

• Arrays

• Control flow

• Functions

• Objects

• Operators

Don’t forget to Star and share! :)

PS: This article was first published on my blog here