Forem: Alan Constantino

How to Create and Host Your First Website With Github

Alan Constantino — Sun, 06 Feb 2022 18:02:39 +0000

If you found this article useful consider donating.

This article was originally published on my blog.

In this article I'll teach you how to create your very own website and host it through GitHub completely for free. Let's get started!

GitHub Setup

Firstly, you'll need to create a GitHub account if you don't have one already.

Once that is complete you'll want to create a new public repository with the following name (case sensitivity doesn't matter):

<your_github_username>.github.io

Now that you've created the repository you'll want to clone it to your local machine with the following command:

git clone https://github.com/<username>/<username>.github.io.git

If you don't have git installed you can follow the instructions here to install it.

Now we can move on to actually creating the website.

Website Creation

You can write your own HTML and CSS to create your website however, for the purposes of this tutorial I'll be using a template from HTML5Up.

HTML5Up is a place where you can download and use premade HTML5 website templates for your own purposes completely for free.

After choosing and downloading your template, I'll be using the Aerial theme, you'll want to unzip the contents of the file to the GitHub directory you just cloned onto your machine.

Now your repository should look something like the following:

<username>.github.io/
├── assets/
├── index.html
├── LICENSE.txt
└── README.txt

You can go ahead and customize the HTML and CSS files to your liking but for this tutorial I'll just leave them as is.

Uploading Your Files to Your Repository

You're almost done! Now you need to push your changes up to your GitHub repository.

To push your changes to your repository you'll want to use either the command line or GitHub Desktop which is a GUI interface for working with GitHub repositories.

For the sake of simplicity I'll use GitHub Desktop to push the changes to my repository.

Upon launching GitHub Desktop you'll want to sign in and towards the top left of the application under the "File" option, you'll want to click on "Add local repository" and choose the repository you just cloned to your machine not too long ago.

Next you'll want to commit your changes to your main branch by clicking the blue button towards the bottom left side.

Great! Finally, you'll want to publish your branch by clicking on the "Publish branch" button towards the top left side of the application so your changes appear on GitHub.

Checking Your Website

Now you should be done! Congrats!

GitHub should be smart enough to publish your website automatically.

To make sure our website is live, go to the repository on GitHub and under the "Settings" tab, go to the "Pages" section.

If you don't see a green alert box saying your website is published (i.e. it's still a blue alert box) you just have to wait.

After a couple of minutes, GitHub should publish your website automatically at the following address:

https://<username>.github.io

If for some reason GitHub didn't detect your page automatically, you'll simply want to update the branch GitHub pages is pointing to. You have to make sure it points to the main branch and the root folder.

Congratulations, you have now published your very first website!

Optional: Custom Domain Name

As an optional step, I'll be showing you how to add a custom domain to your website.

First you'll want to buy your domain. My go to place for buying domains is NameCheap but you can use any domain provider.

Once you've bought your domain, you'll want to configure your domain provider's DNS settings to point to the GitHub servers by adding the following four IP addresses as A Record's:

185.199.108.153

185.199.109.153

185.199.110.153

185.199.111.153

Next you'll want to create a CNAME and make sure it points to your GitHub website like so:

Now head over to the local GitHub repository you cloned and add a file called CNAME.

Make sure it doesn't have a file extension and it's just the name CNAME.

Now inside of CNAME add the name of the domain you just purchased.

mydomain.com

Then you want to go to GitHub Desktop and
commit and publish your changes just like we did when we initially published our website.

You're almost done!

Finally you'll want to head over to your repository on GitHub and under the Settings tab in the Pages section, make sure that the custom domain listed is the one you wrote in the CNAME file.

Congratulations! Now you have a website with a custom domain!

If you're still unsure or are stuck in adding a custom domain to your website you can go here for a more detailed explanation.

If you found this article useful consider donating.

This article was originally published on my blog.

Creating Aliases on Linux and Mac

Alan Constantino — Wed, 13 Jan 2021 05:23:36 +0000

If you found this article useful consider donating.

Note: The following steps should also apply to MacOS as well.

Are you tired of typing long commands into the terminal? Did you misremember a flag causing an error making you pull out your hair for 2 minutes only to realize that flag doesn't exist? Well worry no more because I'll be showing you how to create aliases for all of those pesky hard-to-remember commands.

What are aliases?

An alias is just a fancy term for nicknaming a certain command.

They are very useful because instead of typing out a long command with several flags and options, you can nickname it to a shorter command (i.e. give it an alias) and simply remember the shorter command.

Editing the ".bashrc" File

The first step in creating aliases is to open up a new terminal window and head over to your user's directory like so:

cd /home/<username>

Note: By convention, you would usually define your aliases inside of the ".bashrc" file but because defining all of your aliases here can get out of hand pretty quick, we'll be creating a separate file in which we'll be defining our aliases.

From here, you'll want to open up the ".bashrc" file like so:

sudo nano .bashrc

Inside of ".bashrc" you'll want to paste in the following snippet of code:

# Alias
if [ -f ~/.bash_aliases ]; then
    . ~/.bash_aliases
fi

The snippet of code above simply tells bash that if the file ".bash_aliases" exists then load it and run it.

Now, enter CTRL + X then Y then ENTER to save the file.

Creating Aliases

Inside of the "/home/" directory, you'll want to create a new file called ".bash_aliases." You can do so with the following command:

touch .bash_aliases

It's in this file that you'll want to create your aliases. Open up the ".bash_aliases" file like so:

sudo nano .bash_aliases

Now, to create an alias you can do the following:

# MAKING AN ALIAS
## alias <name of alias>="<bash command>"
##
## Example:
## alias l="ls -lah"
##
## To apply changes run the following:
## source ~/.bashrc

alias l="ls -lah"

To save your file you can do CTRL + X then Y then ENTER.

Now, enter one last command to load our aliases.

source ~/.bashrc

That's it!

Now, if you type in your custom alias into the terminal, it would be like if you were actually typing the longer command that you aliased.

Note: Every time you edit the ".bash_aliases" file you will have to reload the ".bashrc" file or start a new terminal session for the changes to take effect.

Thanks and have a good one!

If you found this article useful consider donating.

Creating Your Own Deepfakes Without Coding Experience

Alan Constantino — Fri, 14 Aug 2020 17:49:34 +0000

If you've found this article useful, consider donating.

This article was originally published at my blog.

Deepfake Video Examples
Background
Things you'll need
Before starting
- Sign into your Google account
- Connecting to the Google Colab
Creating your own deepfakes
- (Step 1) Cloning the Repo
- (Step 2) Change your directory
- (Step 3) Mounting your Google drive folder on Colab
- (Step 4) Downloading the checkpoint (".pth.tar") files
- (Step 5) Create a folder called "first-order-model-motion" in your Google Drive
- (Step 6) Loading your image and video
- (Step 7) Creating the model and loading the checkpoints
- (Step 8) Creating the deepfake
- (Step 9) Saving your deepfake
Errors
Using your own image
Using your own video
Video tutorials

Deepfake Video Examples

The Mona Lisa and Elon Musk
Kim Kardashian and Dr. K
Woman and Edward Snowden

Background

In case you don't know, deepfakes are faked media that mimic another person's likeness, like so. This process is achieved through something called "deep learning," hence the name deepfake.

Creating your own deepfakes has been possible for a while now but the problem was that it required a lot of data, computing power, and time.

But now, thanks to the researchers Aliaksandr Siarohin, Stéphane Lathuilière, Sergey Tulyakov, Elisa Ricci and Nicu Sebe, their paper "First Order Motion Model for Image Animation," and their implementation, we are now able to create a deepfakes with a single image.

Better yet, not only can we create deepfakes with a single image, but they also don't take hours or days to make, now they take only mere seconds and at most a couple of minutes. In addition, no coding experience is required.

If you'd like to understand more of how this works, you can watch this video by Two Minute Papers.

Things you'll need

A Google account
An image of what you want to animate
- We'll be using a picture of The Mona Lisa
A video to extract the animation from
- We'll be using a video of Leonardo DiCaprio's face
Some free time

Before starting

Sign into your Google account

Once you go to the Google colab, you'll be greeted with a page that looks like the following:

You'll need to sign in to your Google account to interact with this document.

I'd suggest you create a new Google account here.

Connecting to the Google Colab

After you have signed in, you'll want to actually connect to the Colab.

To do so click on the connect button at the top right of the page.

If you don't get any error messages, you can skip straight to (Step 3).

If you get the following message, that means that you won't be able to use Google's GPU which essentially means you can't follow the tutorial at this time because all the GPUs are being used.

To fix this, you can either (1) wait and come back later, (2) upgrade to colab pro, (3) run this repository locally on your own machine (not covered in this tutorial but you can go here to follow a tutorial), or (4) create another Google account and try again.

If you click "Connect Without GPU" then, later on, you'll encounter the following error:

Creating your own deepfakes

Let's get started creating our own deepfakes.

(Step 1) Cloning the Repo

Once you are signed in, you'll want to hover over the brackets under the "Clone Repository" header.

You'll want to click on that play button to clone their repository.

(Step 2) Change your directory

Once you finish cloning the repository, you'll want to change your current directory to "first-order-model" by clicking on the next play button like so:

(Step 3) Mounting your Google drive folder on Colab

Next, you'll want to mount your google drive folder on the colab by clicking the next play button.

Before this can actually happen however, you have to click the link allowing the permission to do so:

Then you'll be prompted to sign in to your Google account again. Sign in to the same google account you originally signed into since starting this tutorial.

You will then see the following page:

Copy and paste the authorization code into the colab like so and hit enter:

(Step 4) Downloading the checkpoint (".pth.tar") files

Now you'll want to click on the following link:

You'll then get sent to a Google drive that will have several files.

You only need to download the files called "vox-adv-cpk.pth.tar" and "vox-cpk.pth.tar" but I would also suggest you download a video and an image from here too.

For the purposes of this tutorial, I'll be downloading the aforementioned files as well as "05.png," which is an image of The Mona Lisa, and "10.mp4," which is a video of Leonardo DiCaprio's face.

Downloading the files may take some time so just be patient.

(Step 5) Create a folder called "first-order-model-motion" in your Google Drive

Now you'll want to navigate to your Google Drive and create a folder called "first-order-motion-model" like so:

It's in this folder that you'll want to upload the files you just downloaded.

Note: You can also upload your own video and images but just make sure they are cropped to 256px by 256px.

For the purposes of this tutorial, we'll just be using an image of The Mona Lisa and a video of Leonardo DiCaprio's face.

This will also take some time so just be patient.

(Step 6) Loading your image and video

Now you want to go back to the Google Colab and under the "Load driving video and source image" header, make sure that 'source_image' and 'driving_video' point to the image and video you uploaded to your google drive.

Just make sure that the ending of the path has the correct name, i.e. '.../your_image_file.png' and '.../your_video_file.mp4'

Now you want to go ahead and click the play button.

This will take a couple of seconds but once that's done, scroll down and you should see something like this

(Step 7) Creating the model and loading the checkpoints

If you scroll down a bit further you should see the following:

In the image above you see a square icon because I was already running it but you should see a play icon.

Click on the play button and wait for it to finish.

(Step 8) Creating the deepfake

Now is the moment you've been waiting for, actually creating the deepfake.

Scroll down until you see the header "Perform image animation" and click on the play button like so:

Now you'll have to wait a little more but once that finished you should see something like the following:

Congrats! You just created your first deepfake!

(Step 9) Saving your deepfake

Now to actually save it, hover over the video and you should see an icon with three vertical dots.

Click on the icon with three vertical dots and then click download.

And voila, you're done!

Errors

If you encounter any errors, you can try to reset the runtime by doing the following:

Click on the "Runtime" tab.

Click on "Factory reset runtime."

Click "Yes" and reload the page.

If you still encounter errors you can watch this video here.

Using your own image

To use your own image, simply grab any facial image and crop it to 256px by 256px.

Also, make sure it's saved in the ".png" format.

Other image types may work, such as .jpg, but .png will give you the best results, at least in my experience.

Using your own video

If you want to use your own video you also have to crop it to 256px by 256px.

The Google colab provides a tool for you to do this.

Before we can actually crop our own video, we have to upload our video to our Google drive.

Scroll down to the header that says "Running on your data"

You'll want to paste the following line making sure you replace ".../my_video_file.mp4" to match your file name.

!ffmpeg -i /content/gdrive/My\ Drive/first-order-motion-model/my_video_file.mp4 -s 256x256 -c:a copy /content/gdrive/My\ Drive/first-order-motion-model/result.mp4

Then you should see a video called "result.mp4" in your google drive.

You can then use this video in step 6 and onward making sure that you use the name "result.mp4" for the video.

The video result can be a hit or miss. I'd suggest you crop the video yourself using video editing software.

Video tutorials

6-minute video tutorial.

In this tutorial, he makes you paste the following line of code: '!pip install PyYAML==5.3.1' at the beginning of Step 1. This line is not necessary.

20-minute video tutorial.

Creating a deepfake without using Google Colab.

Water Your Plant Using a Raspberry Pi and Python

Alan Constantino — Tue, 10 Mar 2020 07:18:57 +0000

If you've found this article useful, consider donating.

This article was originally published on my blog.

I'd like to point out that I am by no means an expert in electronics. If you were to ask me to make a circuit diagram or explain the minutiae of how a certain electronic piece works, I'd draw a complete blank. In reality, I completed this project by just tinkering around with electronic components and having a basic understanding of how electricity works. That being said, you should always exercise caution when working with electronics, especially when using external power sources. Do your own research before attempting to work with electronics and electricity!

I suck at taking care of plants, mostly because I forget to water them. So then I started thinking, "I'm sure someone out there has figured out a way to automate this process." Turns out, there are plenty of people who have. Namely in the form of using an Arduino or a Raspberry Pi to automatically water their plants. In this post, I'll be talking about how I used a Raspberry Pi and Python to automatically water my plant.

The following are the components I used in this project:

The links above are Amazon Affiliate links. By clicking on a link above and purchasing an item, I'd earn a little slice of the sale.

Once I had all the components I needed, it was time to do some research. The following are the resources I used to hookup the electronics and have a basic understanding of how they function:

Here is an image of the GPIO pins on the Raspberry Pi:

First, I started out by hooking up the relay to the Raspberry Pi like so:

The red wire (female to female) leads from the JD_VCC pin on the relay board to the 5V pin (pin 2) on the Raspberry Pi. The orange wire (female to female) leads from the VCC pin on the relay board to the 3.3V pin (pin 1) on the Raspberry Pi.

By hooking up these wires, we are giving the relay board power. To actually control an individual relay, we need to connect two more pins from the relay board to the Raspberry Pi, the GND (ground) pin and the IN1 pin.

The black wire (female to female) is the ground wire and that leads from the GND pin on the relay board to any ground pin on the Raspberry Pi (I used pin 34). The white wire (female to female) leads from the IN1 pin on the relay board to pin 12 on the Raspberry Pi. The white wire is what will allow us to turn on and off the relay with code.

You can wire up the relay and Raspberry Pi however you wish but just remember to change the pin numbers if you use the code I provide.

After the relay board and the Raspberry Pi are wired up, I then proceeded to connect the 12V adapter to the individual relay. DON'T CONNECT THE 12V WALL ADAPTER INTO A WALL OUTLET UNTIL AFTER YOU FINISH WIRING UP EVERYTHING, YOU DON'T WANT TO BE WORKING WITH LIVE POWER.

The 12V power supply comes with a handy adapter that you can use to connect wires. I wired up the red wire (male to male) to the + sign of the adapter and the brown wire (male to male) to the - sign of the adapter. I then added an alligator clip (female to male) to the brown wire.

The relay board has four individual relays and each relay has three outputs where you can screw in wires. The output in the middle is where you want to connect the positive lead of an external power supply while the output to the left of that is where you want to connect the positive lead of the device you want to power. This is the same for all of the individual relays on the board.

From the 12v adapter, I hooked up the red wire (positive/power) to the relay output in the middle. I then hooked up a new orange wire (male to male) to the leftmost output on the relay and attached an alligator clip (female to male) to the end of the orange wire.

Now we just need to connect the alligator clips to the water pump. It doesn't matter in which order you connect the alligator clips to the pump, all you're doing is just setting the water flow.

The way I set up my water pump, I wanted water to flow from left to right so I connected the black alligator clip to the pin that has a red dot next to it and I connected the other alligator clip to the other pin on the pump. If I were to reverse the way in which the alligator clips are connected, the water would flow would be from right to left.

Water flows in from the left tube, into the pump, out the right tube, and into the plant.

Finally, we come to the part I'm actually good at, the code. To interface with the GPIO pins on the Raspberry Pi, I used the gpiozero library. It's really easy to use and abstracts away a lot of the lower-level operations you'd usually need to learn in order to get started interfacing with the GPIO pins. You can find a link to the documentation here.

Before we can actually get started writing code, you have to hook up your Pi to a monitor, mouse, and keyboard or you can SSH into your Pi.

Once you have logged into your Pi, navigate to your Desktop and create a folder called "run." Inside of "run," you'll have another folder called "classes." Now within the "classes" folder, create a file called "Hardware.py" which should look something like this:

In this file, I just define a new class called Relay that inherits from the class OutputDevice.

Next, within the "classes" folder, create a new file called "TimeKeeper.py" which should look like the following:

Essentially, the purpose of this class is to keep track of the current time and the last time our plant gets watered.

Both "Harware.py" and "TimeKeeper.py" are in the folder called "classes." I then created a new file called "water_plant.py" which I placed outside of the "classes" folder.

The file "water_plant.py" looks something like this:

You can change the value of the "WATERING_TIME" and "SECONDS_TO_WATER" variables to whatever you'd like. The first variable determines at what time during the day the plant should receive water while the latter determines how long the plant will receive water.

I also set up email reminders so you receive an email whenever your plant gets watered as well as an email every Friday to remind you to check your water level. By default, I've disabled these reminders so the program doesn't crash on start, but if you want to enable them you have to do three things: 1) You have to change lines 26 and 27 to include your Gmail and password 2) You then have to uncomment lines 63, 65, and 68 3) You have to go here, log in with the Gmail you want to receive the reminders on, and toggle the switch to "ON" or else you'll receive an error when you try and send an email using your Gmail account. It's also important to note that the email reminders only work with a Gmail account.

Now that all the files are set up, you should have something that looks like the following directory tree structure:

run
├── classes
│ ├── Hardware.py
│ └── TimeKeeper.py
└── water_plant.py

You can place this "run" folder anywhere on the Raspberry Pi but I just decided to keep it on the Desktop.

Finally, instead of SSHing into the Pi or hooking it up to a monitor every time we want to run the "water_plant.py" script, I wanted the script to run whenever we turn on the Raspberry Pi so that way we can turn the Pi off and move it anywhere. Once we turn it on, we don't have to SSH into the Pi or connect it to a monitor just to run the script. To do this, we need to use the "crontab" command.

If you open a terminal window on your Pi, either by hooking it up to a monitor or by SSHing into it and you type in the following command:

sudo crontab -e

You should see something similar to this:

In this file, you're going to append the following code snippet:

@reboot python3 /home/pi/Desktop/run/water_plant.py

Then save it by doing CTRL+X → Y → Enter

Essentially, we just told the Pi "Hey whenever you reboot, run the python script 'water_plant.py' inside the 'run' folder located on our Desktop." If you didn't place the 'run' folder on your Desktop, just update the path to wherever you placed your "water_plant.py" script.

You can view the full code here or you can just clone the repository with the following command:

git clone https://github.com/AlanConstantino/rpi-plant-project.git

That's it! Now you should have a working Raspberry Pi that waters your plants every 24 hours! It even sends you email reminders every time your plant gets watered as well as every Friday reminding you to check your water level.

Keeping the Footer at the Bottom

Alan Constantino — Sun, 23 Feb 2020 21:18:07 +0000

If you've found this article useful, consider donating.

This article was originally published on my blog.

So recently I had to use the <footer> tag for a website I was building. To be honest, in all of my web development projects that I've made so far, I've never had the need to use the footer. That was until last week.

What's the big deal? It's just a footer tag that you include before closing out the body tag right? Sure, but the problem with footers is that by default, they don't stay at the bottom. Let me explain.

If your body tag were to contain the following:

your footer would be pushed all the way to the top. This happens because there isn't enough content to fill up the page and push the footer down.

For the most part, if your website has enough content to fill up the page, your footer should be pushed down to the bottom. However, on bigger screens, this might still be an issue.

So, how do we keep that pesky footer at the bottom? Well, today I'll be showcasing three solutions to this problem. The first and simplest solution is using flexbox, the second solution is using grid, and the final solution is using a wrapper. Alright, let's get started.

Flex Solution

First, the simplest, and in my opinion, the best solution, using flexbox. I'd say this is the simplest because it isn't that much code to write and it's simple to understand.

This is what our HTML looks like:

The HTML is going to look pretty much the same for all of these solutions, I'll be sure to point out the differences along the way.

Very briefly, in our <body>, we have a <header>, a <main>, and a <footer>. Inside our <main>, we have a <p> that just holds some lorem ipsum text.

This is what our CSS looks like:

Again very briefly, I remove all the padding and margin for everything. Our body is displayed as flex, has a 'flex-direction' of column, its minimum height is 100vh or 100 viewport height, and its background color is blue. As for the header, I just colored it green. Finally, I gave the footer a background color of red and I set its top margin to auto. This is important because, without this, the footer wouldn't stay at the bottom.

Now our footer looks something like this:

Let me explain how this works. We set our <body> to be displayed as a flex column and set its minimum height to be the full size of the viewport height. You can think of the <body> as a container that expands for the full height of the page. Now by setting our <footer>'s top margin to auto, we're essentially telling it to stay at the bottom of the <body> container. And that's how you use CSS flex to keep the footer at the bottom.

Grid Solution

Let's move on to the second solution, using CSS grid. Now I don't know about you but I don't like grid. I'd much rather use flexbox, but, as much as I hate to admit it, sometimes there is just no avoiding it.

The HTML code will be exactly the same as for the flex solution, the only thing that will differ will be the CSS link tag.

The CSS for the grid solution looks something like this:

Just like before, we first remove all the padding and margin for everything. Then we make the html height 100% and I made all the text color white. Next, our body has a minimum height of 100% and is displayed as a grid with 3 rows and has a background color of blue. Those rows will be the header, main, and the footer. The header has a background color of green and will start and end in the first row of the three that we defined for the grid. Finally, our footer will have a background color of red and will start and end at the third row of our grid.

Now let me explain how this works. In the body, we define three rows, the first and last are of size 'auto' while the row in the middle is a set size of 1fr. We use 'auto' for the first and last rows so they only take up the space they need.

We then set our header to be the first row of the grid keeping it at the top while setting our footer to the last row in our grid keeping it at the bottom. That's it!

You could manually define main to be in the second row like the following:


main {

  grid-row-start: 2;

  grid-row-end: 2;

}

but I just didn't do that.

Wrapper Solution

Finally, we have reached our last solution which is using a wrapper. The HTML for this solution is as follows:

The only difference here is that we use a <div> as a wrapper to wrap our <header> and our <main> tags. We also give the <div> a class of "wrapper."

The CSS for the wrapper solution is the following:

Just like before, we first remove all the padding and margin from everything. Then we assign background colors to the header, main, and footer. The header is green, the main is blue, and the footer is red. Now, we must define both the html and the body as a height of 100%. Next, we make a class called "wrapper" and give it a minimum height of 100%. Now, this is where things get a little... gross.

In main, we give it a bottom padding of 30px, this will be the size of the footer. Now in our footer, we give it a height of 30px and a top margin of -30px.

Let me explain why it needs to be done this way. So our main has a bottom padding of 30px. This is so that when there is enough content on the screen, it doesn't overflow into our footer like so:

The height of the footer should also be the same height as the bottom padding for our main, 30px. This should also be applied to the top margin but as a negative, if not then you end up with something like this:

You can see that there is a space towards the bottom of the screen in between our <main> and our <footer> and that's definitely not what we want. That's why we apply the top margin as a negative while making sure it's the same size as the <footer> height and the bottom padding of <main>. Now the footer should be displayed properly:

There we go, much better.

Conclusion

In conclusion, there are many ways to keep the footer at the bottom, however, in this article, I just mentioned three, the flex way, the grid way, and finally the wrapper way.

All of these solutions are great but the best one, in my opinion, is the flex one. It's easy to implement and you don't have to deal with a grid or a wrapper. The grid solution may be best for when you can't use flexbox or you’re stuck using a grid, while the wrapper solution may be best for when you already know how big the size of the footer is going to be.

You should keep these solutions in mind when thinking about how you're going to keep that pesky footer at the bottom of the page. You should choose the solution that best fits your needs.

You can check out the full code here.

Thanks for reading and have a good one!

5 Simple-To-Use APIs for Beginners

Alan Constantino — Mon, 10 Feb 2020 00:47:26 +0000

If you've found this article useful, consider donating.

This article was originally published on my blog.

Hello! In this article I'll be talking about five simple-to-use APIs to help inspire project ideas. The goal of this post is to inspire you to create a project, whether it be simple or complex, and start using APIs.

What Is an API?

Before talking about APIs you can use, I think we should understand what an API actually is and what it does.

API stands for Application Programming Interface. Simply put, an API is what allows programs or services to communicate with other programs or services.

A great example I came across (don't remember the original source) was thinking of an API as a waiter at a restaurant.

So you, the customer, talk to a waiter to get your food. The waiter then talks to the chef who actually makes your food. The chef gives the food to the waiter. Finally, the waiter then gives the food to you.

Unpacking this example, the user (customer) sends a request to an API (waiter). The API (waiter) then talks to the service you want to reach, usually a database (chef). That database (chef) then sends data (food) back to the API (waiter). And finally, the API (waiter) then gives you back data (food).

Great! Now that we know what an API is and have a general understanding of how it works, we can now move on to talking about simple APIs you can use.

Official Joke API

The first API I'll be talking about will the simplest one on the list: The Official Joke API.

This API is extremely simple to use, you basically use a URL to connect to one of the API's endpoints and it returns back data in JSON format. Easy! No need for pesky API keys.

For example, if we wanted a random joke from this API, we would simply use this URL: https://official-joke-api.appspot.com/random_joke and it would return one random joke.

You can also grab more than one joke by using the following URL: https://official-joke-api.appspot.com/random_ten. Now, the API will return 10 random jokes instead of just one.

You can check out the full list of endpoints here.

I built a simple Discord bot using this API. Basically, whenever you give the bot the following command, $joke, it returns one joke. You can check out the source code and images of the bot here. You can also check out a step-by-step guide on how to create the exact same Discord bot here.

Shibe.Online API

The next API I'll be talking about will be the shibes.online API. This is similar to the Jokes API I previously mentioned except instead of giving you back jokes it gives you back shibes. And who doesn't like shibes, am I right?

You can find more info about this API here.

To use this API you simply have to use this URL: http://shibe.online/api/shibes?count=[1-100]&urls=[true/false]&httpsUrls=[true/false] and replace every "[]" with a parameter.

An example query would be something like the following: http://shibe.online/api/shibes?count=100&urls=true&httpsUrls=true

The URL above would give me 100 links to shibe images in JSON format. It would also make sure that all images are URLs and that those URLs use https instead of http because of the true parameters we pass it.

I created a simple website that generates shapes based on user input and I used this API to embed images of shibes inside of those shapes. You can find the source code and images of the website I built here.

A similar project idea would be to create a random number of circles on a page and have shibe images embedded within each of those circles every time a user visits the site. You can also have those circles move around and bounce off the edge of the screen. And if you think that was too easy, you can try adding collision detection between those circles so they bounce off of each other as well as the sides of the screen.

Where the ISS At? API

This API is probably the coolest on this list in my opinion just because you're' able to track the ISS with it. Yes, you read that right, the International Space Station!

You can find more info about the API here.

This API gives you back data about the ISS in JSON format. You use the following URL https://api.wheretheiss.at/v1/satellites/25544 to get back data about the ISS like latitude, longitude, altitude, velocity, etc.

I built a website that tracks the ISS in real-time every couple of seconds and updates its location marker on a map. You can find images and the source code here. You can also visit the website itself here.

A cooler project you can build with this API is to make a website that notifies you whenever the ISS is overhead your current location.

A similar API you can use if you don't like "Where the ISS At?" is the Open Notify API. It's a little less accurate but it gives you more information like people aboard the ISS as well as its pass times.

PokeAPI

Do you like Pokemon? Did you ever want the power of the pokedex right at your fingertips? Well now you can with this API.

This API gives you back data about Pokemon, their move sets, encounters, evolutions, items, and much more. You can check out the full documentation here.

You can think of this API as a real-life pokedex that contains all the information about Pokemon that you'd ever want.

To use this API and get information about Pokemon, you can use the following URL https://pokeapi.co/api/v2/pokemon/[pokemon_name]. Now you just replace "[pokemon_name]" with a Pokemon name or its respective pokedex id and you'll receive back information about that Pokemon.

The project I built using this API was quite simple. I wanted to learn a little bit of jQuery and I also wanted to learn about CSS grid. So, I created a website that gets the original 151 Pokemon using jQuery and displays them on the screen using CSS grid. You can find the source code and and an image of the website here.

Open Trivia Database API

Finally we get to the final API on this list, the Open Trivia Database API. The Open Trivia Database is an assortment of trivia questions and answers and it has an API you can use for your own projects.

To use this API, you can go here and fill out their API helper to help you generate a link and get back the data you want.

To get up and running quickly using this API, you can use the following URL: https://opentdb.com/api.php?amount=10 to get back 10 random questions and answers based on different categories.

I created a Quiz Game which you can visit and play here. Essentially, whenever you click on a category, it will give you 10 questions based on that category and it keeps track of your overall score. At the end, it tells you how many questions you got right out of 10. You can view the source code and images of this project here.

More APIs

Excited about finding more APIs and possibly even trying out more complex APIs, you can head over to this GitHub repo to check and see a plethora of APIs that are open-source and free to use.

Conclusion

Well that was it for this post. You can use one of the aforementioned APIs to create a project whether it be simple or complex.

Keep in mind that not all APIs are this easy to use. Some require that you dig through their respective documentation to get a hang of how to make API calls. Others require that you use an API key in order to connect to the API.

The APIs I mentioned here don't really require much documentation reading and certainly don't require any pesky API keys which are perfect for beginners.

I hope this post inspired you to pick up an API and create a project with it. As always, thanks for reading and good luck!

Creating a Discord Bot With Python

Alan Constantino — Sun, 02 Feb 2020 05:11:17 +0000

If you've found this article useful, consider buying me a cup of coffee.

This article was originally published on my blog.

In this article we'll create a Discord bot using Python. The bot we'll be creating today will have a simple purpose, telling jokes. We will give the bot a command and it will return a random joke. This should be simple enough, let's get started!

Before Starting

I think it'll be useful to understand what an API is before we actually get started. API stands for Application Programming Interface. Simply put, an API is what allows programs or services to communicate with other programs or services.

A great metaphor I came across (don't remember the original source) was thinking of an API as a waiter at a restaurant.

Unpacking this metaphor, the user (customer) sends a request to an API (waiter). The API (waiter) then talks to the service you want to reach, usually a database (chef). That database (chef) then sends data (food) back to the API (waiter). And finally, the API (waiter) then gives you back data (food).

Great! Now that we know what an API is and have a general understanding of how it works, we can now move on to using one.

Acquiring the Jokes

To actually get the jokes, we'll have to use the Official Joke API. This API is extremely easy to use, you just use this link and every time you call it, it will return a random joke in JSON format. Simple!

Creating a Discord Application

To create a Discord bot and invite it into your own Discord server, you can follow these steps here.

You can name it whatever you'd like but I'll just name it "Jokes-Bot."

Also, under the Settings tab to the left, go to "OAuth2" > "Scopes" and tick the bot option. Then in the same page, go to "Bot Permissions" and tick the Administrator box.

Now copy the link from the "Scopes" section and paste it onto your browser to add the bot to your Discord server.

Cool! Now just take a note of the Discord bot token in the "Bot" tab because we'll be needing it later.

Downloading the Discord.py Library

We'll be using the Discord.py library to create our Discord bot.

To install this library onto your machine you can follow these steps, or simply run the following command on the command line.

python3 -m pip install -U discord.py

If you don't already have Python and pip installed you can go here to install them.

Installing the Requests Module

Finally we need to download and install one more thing. To actually send requests and receive data from an API using Python we'll need to download and install the python module Requests.

Simply type in the following command onto the command line to install this module.

pip3 install requests

Now it's finally the time you've all been waiting for, the code.

Testing the Bot

To test that our bot actually works, copy and paste the following code into your favorite text editor.

To learn more about what this code does go here.

Now insert your Discord bot token into the last line where it says "your token here." Save your python file as "discord_joke_bot.py" and then input the following command onto the terminal to run and test your bot.

python3 discord_joke_bot.py

If all went well you should see something like the following:

Now we can type the following command $hello into our Discord server and the bot should respond back with "Hello!"

Cool so the bot works.

Also, whenever we make changes to the bot, you'll have to restart the python script by running it again.

Making API Requests With Python

Now let's take a look at how to actually make API requests with Python and the Requests module.

The following code is what we'll be using to make requests to the Joke API.

Let me explain what's going on here.

On line 1 we import the Requests module.

Line 3 is the URL we'll be using and I just defined it in the global scope.

Now on line 6, I define a function named "check_valid_status_code" that will check if the status code from the API is successful or not.

If the status code is equal to 200, meaning it's a successful call, it will return back the request in JSON format. If it's unsuccessful, it will just return false.

Most of the time, whenever you make an API call, the API will return a status code. These status codes tell you whether an API call was successful or not. To learn more about status codes check out this article.

Now on line 13 I define another function named "get_joke." This function, as implied by its name will get a joke.

First it makes a GET request to the URL we pass it. Then it will call "check_valid_response_code" and store whatever it returns into a variable named "data." Finally it returns the variable "data."

Adding the $joke Command

We can finally move on to actually adding in our "$joke" command.

First let's import "joke_api.py" into the "discord_joke_bot.py" file with the following line:

import joke_api.py

Now, in the file named "discord_joke_bot.py," we can simply replace the if statement containing the "$hello" parameter on line 16 with the following if statement.

Let me explain what's going on here.

So first on line 1, we check if the message we type into Discord starts with the "$joke" string.

Then on line 2 we call "get_joke" function from the "joke_api.py" file and save it into a variable named "joke."

The variable "joke" stores a dictionary with the following keys: id, type, setup, and punchline.

The only dictionary keys we are interested in are "setup" and "punchline."

Now on line 4 we check if the variable "joke" is "False." If so we just return an error message.

Else, if it's not false we return the joke setup with "joke['setup']" adding a newline character, '\n' and then adding the joke punchline with "joke['punchline']."

Now if we test this in our Discord server with our bot we should receive a joke from our bot.

Great! It works.

Complete Code

In total we should have two files. Namely the "discord_joke_bot.py" file and the "joke_api.py" file.

The following is the "discord_joke_bot.py" file.

The following is the "joke_api.py" file.

Congratulations, you just created your first Discord bot using Python!

You can also find the complete code over at my Github.

Resources

Here is a list of resources that may be helpful:

Getting Started with the Terminal

Alan Constantino — Thu, 09 Jan 2020 11:35:51 +0000

If you've found this article useful, consider donating.

An updated version of this article can be found on my blog.

So, you want to learn how to use the Terminal. Great! As a developer, sooner or later, you’ll want to learn how to use the Terminal. Not only is this a handy tool to have under your belt, but it will also boost your productivity.

Before Starting

Before actually getting started learning commands, it’s useful to think of the directories (folders) as a hierarchical tree.

The root directory is “/” and inside of “/”, you have the following folders: bin, tmp, usr, and src.

In the illustration above, you can see that the first directory, often referred to as the “root” directory, is named “/”. That directory (folder) contains other directories such as bin, tmp, usr, and src. Those directories can have other directories or files and those child directories can have even more directories or files and so on.

Of course, the illustration above is just an example, it doesn’t actually reflect the folders and files that reside in your computer.

Now, what the terminal allows us to do is to traverse and manage the directory tree. This is why the terminal is so powerful, it allows us to quickly sift through folders and files in an efficient manner as well as being able to create, delete, or update a file or directory.

Opening Your Terminal

To open your terminal, use the following shortcut: “⌘ + Spacebar.” Now type in “Terminal” and then press the “Enter” key.

Now, you should have something on your screen that looks like

For the most part, you should be staring at a black window with white text and a cursor itching for your next command.

Important Note

It’s important to note that every directory on Mac/UNIX/LINUX has two hidden directories, namely “.” and “..”

The “.” means the current directory and “..” means previous or parent directory. Keep this in mind, it will be useful later.

Commands

Now that we have a terminal window in front of us, it’s finally time to get to the commands.

The first command you should type into the terminal should be the pwd (print working directory) command.

pwd — print working directory

pwd

This command prints the current directory you’re in onto the terminal.

Currently in the “/Users/alanconstantino” directory.

Congratulations, you just ran your first command on the terminal!

This command is useful for knowing where you currently are within the directory tree.

The next command we should try is ls or list.

ls — list

ls

This command lists all the directories and files from your current directory.

By typing ls, we can see all of the files and directories within the current directory.

Cool, now we can list all of the files and directories from our current directory.

But what if we want to list all the contents from another directory?

Simple, just type the following command:

ls [directory name]

We list all the files and folders inside of the “Desktop” directory.

Now we can list files and folders from our current directory or other directories.

But what if we want to change our current directory? That’s where the cd or change directory command comes into play.

cd — change directory

cd [directory name]

The cd command allows you to change your directory to another directory. This is how you’ll actually traverse the directory tree.

Example:

cd /

The command above changes your current working directory to your root directory.

“cd /” changes your current directory to your root directory.

Now, how do we back out of a directory or go to the previous/parent directory?

We have to use the following command:

cd ..

As I mentioned earlier, the “..” means the parent directory or previous directory. Effectively, the command above is telling the terminal “Hey, take me back to the previous directory.”

Changed directory from “/Users/alanconstantino/Desktop” to “/Users/alanconstantino.”

Also, if you use this command in the root directory, nothing happens because there isn’t a previous or parent directory to go back to, hence the name root.

But what if you want to go back more than one directory?

No problem, the following command is just what you need.

cd ../../

The command above tells the terminal “Hey, I want to go back two directories and make it snappy.” Okay, maybe not so much the snappy part, but it does take you back two directories.

Essentially, every “../” you add takes you back one directory.

So the following example will take you back three directories:

cd ../../../

Now that we know how to traverse the directory tree and list its contents, we should move onto more useful commands.

Before that though, we should probably clear our terminal screen because by now it may be a little tough to read.

clear

By typing in the following command into the terminal, you are able to clear what’s on screen.

clear

Clearing the terminal.

Now that our screen has been cleared, we can move onto more useful commands, like the mv (move) command.

mv — move

mv [source] [destination]

The mv (move) command simply moves a file or directory to another place.

From the skeleton command above, the “source” is what you want to move while the “destination” is where you want the file to end up.

For example, if I have something like the following:

one
├── myfile.txt
└── two

Where “one” and “two” are folders, and I want to move, “myfile.txt” to folder “two” I would simply do the following assuming I was already in the “one” folder location:

mv myfile.txt two

We moved “myfile.txt” to the folder “two.”

Of course, you could be anywhere in the directory tree to execute this command — and pretty much any command for that matter — but you just have to make sure you enter the full location path of the file you want to move and its destination.

For example, in the following screenshot, I’m in my root directory but I’m still able to move a file from my Desktop to the “two” folder from the previous example:

We moved “anotherfile.txt” to the “two” folder while in the root directory.

Now, what if we wanted to move a file or folder from wherever it is to our current location in the directory tree.

Well, remember earlier how I talked about the “.” being our current directory, we would have to use “.”

For example:

mv /somelocation/myfile.txt .

The example above moves “myfile.txt” to wherever we currently are in the directory tree.

Another command that’s similar to mv (move) is cp (copy).

cp — copy

cp [source] [destination]

The copy command is just like the move command except instead of moving a file or folder, it makes a copy of it leaving the original file unharmed.

To copy a file you would do the following:

cp myfile.txt /one

We copied “myfile.txt” to the “one” folder.

Now to copy a directory you have to add the “-r” option like so:

cp -r one two

We copy the contents of the “one” directory into the “two” directory.

All the “-r” option means is that it tells the terminal to copy the files recursively which is a fancy way of saying everything.

So by using the “-r” option, we tell the terminal “Please copy all the contents, including folders and files to our destination.”

It’s also important to keep in mind that most, if not all, commands can have options and there are different options for every command. You can also have more than one option.

Now, what if we wanted to open a file or folder from our terminal?

We would need to utilize the open command.

open

open [file/folder]

This command lets us open a file with its associated program.

For example, if we have a “.txt” file and we do the following command:

open myfile.txt

We open a file named “myfile.txt.”

this opens “myfile.txt” with your default text editor like so:

Here’s another example.

If you do the following command, it will open the finder window in the root directory.

open /

We opened a new finder window at the root directory.

The finder window will look something like the following:

A finder window showing the contents of the root directory.

It opens the finder window because that’s the program that is associated with the file or in this case the folder you’re trying to open.

So if we did the following command:

open .

it would open a new finder window from our current location because remember, the “.” means our current directory.

Now, let’s move onto actually making a directory from the terminal.

mkdir — make directory

mkdir [directory name]

To make a directory, you simply type the command above and give it a name like so:

We made a directory named “mydirectory.”

We can also create multiple directories like so:

We created two directories, one named “newdirectory” and another named “anotherdirectory.”

What if we wanted to make a file instead of a directory?

We would use the touch command.

touch

touch [file name]

This command simply creates an empty file.

For example, if we do the following:

touch myfile.txt

This creates a file named “myfile.txt” in our current directory.

We create a file named “myfile.txt.”

And similar to mkdir, you can create multiple files in one command like so:

We create “myfile.txt” in the current directory and “anotherone.txt” in the previous directory.

In the screenshot above, we create two files, “myfile.txt” and “anotherone.txt.”

The “myfile.txt” file is created in the current directory while the “anotherone.txt” file is created in the previous directory.

Let’s move on to deleting a directory.

rmdir — remove directory

rmdir [directory name]

The rmdir command is self-explanatory, it just deletes a directory.

We are deleting an empty directory named “emptydir.”

However, it’s important to note that when using this command, you can only remove an empty directory.

If your directory is not empty and you try to use the rmdir command, you’ll get something like the following:

We failed at removing the directory “folder” because it’s not empty.

Now how do we remove the contents of a directory you may be asking?

We would have to use the rm (remove) command.

rm — remove

rm [file name]

This command is probably the most powerful and yet the most dangerous one on this list which is why I saved it for last.

Once you use this command and delete something, it’s gone forever.

It doesn’t get put into your Trash for you to empty out later. No! Once you type in this command and hit enter, poof… it’s gone… forever…

This also applies to rmdir, once you remove a directory, it’s gone forever.

But unlike rmdir, the rm command has the ability to remove both a directory as well as a file.

With this in mind, let’s see it in action.

To remove a file, simply do the following:

rm myfile.txt

We removed a file named “myfile.txt.”

And just like some of the previous commands, we can delete multiple things at once by using the following format:

rm [file1] [file2] [etc]

We delete “afile.txt” and “anotherone.txt”

In the example above, we delete “afile.txt” from the current directory and subsequently delete “anotherone.txt” from the previous or parent directory.

If we wanted to delete only certain files that end in specific extensions (i.e. .txt, .png, .exe, etc) we would use the asterisk or “*” symbol. This symbol is often referred to as a wildcard.

For example, if we were in a directory and we only wanted to delete .txt files, we would do the following:

rm *.txt

We delete various .txt files.

As you can see, we deleted all the files that end with the “.txt” extension. If we had other files such as .png, .gif, etc, those files would be unscathed by the rm command.

So by using the “*” symbol we effectively tell the terminal to disregard the name of the file and only look at the extension of the file.

Now let’s get into the danger zone.

Earlier I said that most if not all commands have something called options. These options are added right after the command like so:

[command] [options] [other paramters]

Well, the rm command has two options that I’m going to show you which are dangerous if used without precaution and quite lethal in combination.

rm -r

The first is the “-r” option. As you may recall, I said that the “-r” option means do it recursively, which is just another way of saying all or targeting everything.

If you do the following command:

rm -r [directory]

it will delete everything inside of a directory including the folder itself.

So if I have the following directory:

newfolder
├── folder1
│      └── text1.txt
├── folder2
│      └── text2.txt
└── folder3
         └── text3.txt

and then I input the following command:

rm -r newfolder

It will delete everything within the “newfolder” directory as well as the folder itself.

We delete all of the contents of the “newfolder” directory including the folder itself.

As a side note, the ‘tree’ command isn’t available by default on Mac, you have to download and install it seperately.

Now we move onto the other option, “-f.”

rm -f

rm -f [file/directory]

Sometimes, when you use the rm command, you may get a prompt. This prompt may just be something like “Are you sure you want to delete the following file or directory?”

By using this option, you avoid having the prompt show up in the first place.

Essentially, this just tells the terminal, “Delete the following file/directory and don’t give me a prompt.”

Now we move onto the most lethal combination, “-rf.”

rm -rf

rm -rf [directory]

When you combine both the “r” and the “f” options, you’re telling the terminal “Delete all of the contents of the directory and don’t show me a prompt, capeesh.”

As you can probably guess, this is quite dangerous.

No need to fret though, as long as you’re cautious and don’t use this command on let’s say, you’re root directory, you should — for the most part — be fine.

So now that we know what the “r” and “f” options do, let’s run through an example.

Here I have a directory which looks something like this:

anotherfolder
└── myfolder
        ├── folder1
        │      └── file1.txt
        ├── folder2
        │      └── file2.txt
        ├── folder3
        │      └── file3.txt
        └── folder4
                 └── file4.txt

Now if I run the following command (assuming I’m already at the “anotherfolder” location):

rm -rf myfolder

It should delete all the contents inside the “myfolder” directory including the folder itself and I shouldn’t see any prompts.

All right, let’s give it a shot.

We remove all the contents of “myfolder” including the folder itself.

Sure enough, it worked.

Now let’s recap what we learned.

Recap

It’s useful to think of directories as a hierarchical tree with the topmost directory being the root directory.

The “.” means current directory while “..” means previous or parent directory.

We also took a look at the following commands:

pwd — prints the current working directory

pwd

ls — lists all the contents of the current directory

ls

cd — changes directory

cd [directory name]

clear — clears the terminal screen

clear

mv — moves files or folders from one place to another

mv [source] [destination]

cp — copies files or folders from one place to another

cp [source] [destination]

open — opens the file or folder with the associated program

open [file/directory]

mkdir — makes a new empty directory

mkdir [directory name]

touch — creates a new empty file with the name of your choice

touch [file name]

rmdir — removes an empty directory

rmdir [empty directory]

rm — removes a file

rm [file name]

rm -rf — removes the folder and its contents without showing any prompts

rm -rf [directory name]

And this is only scratching the surface of the terminal.

There are many more useful commands but these are just the basics to get you up and running.

Forem: Alan Constantino

How to Create and Host Your First Website With Github

GitHub Setup

Website Creation

Uploading Your Files to Your Repository

Checking Your Website

Optional: Custom Domain Name

Creating Aliases on Linux and Mac

What are aliases?

Editing the ".bashrc" File

Creating Aliases

Creating Your Own Deepfakes Without Coding Experience

Table of Contents

Deepfake Video Examples

Background

Things you'll need

Before starting

Sign into your Google account

Connecting to the Google Colab

Creating your own deepfakes

(Step 1) Cloning the Repo

(Step 2) Change your directory

(Step 3) Mounting your Google drive folder on Colab

(Step 4) Downloading the checkpoint (".pth.tar") files

(Step 5) Create a folder called "first-order-model-motion" in your Google Drive

(Step 6) Loading your image and video

(Step 7) Creating the model and loading the checkpoints

(Step 8) Creating the deepfake

(Step 9) Saving your deepfake

Errors

Using your own image

Using your own video

Video tutorials

Water Your Plant Using a Raspberry Pi and Python

Keeping the Footer at the Bottom

Flex Solution

Grid Solution

Wrapper Solution

Conclusion

5 Simple-To-Use APIs for Beginners

What Is an API?

Official Joke API

Shibe.Online API

Where the ISS At? API

PokeAPI

Open Trivia Database API

More APIs

Conclusion

Creating a Discord Bot With Python

Before Starting

Acquiring the Jokes

Creating a Discord Application

Downloading the Discord.py Library

Installing the Requests Module

Testing the Bot

Making API Requests With Python

Adding the $joke Command

Complete Code

Resources

Getting Started with the Terminal

Before Starting

Opening Your Terminal

Important Note

Commands

pwd — print working directory

ls — list

cd — change directory

clear

mv — move

cp — copy

open

mkdir — make directory

touch

rmdir — remove directory

rm — remove

rm -r

rm -f

rm -rf

Recap