DEV Community: Mustafa Anas

DIY Python YT Video Downloader ⬇

Mustafa Anas — Wed, 01 Apr 2020 06:01:34 +0000

(This article was originally published on my blog)

Recently, I saw a Python script written by a beginner for donwloading videos from facebook. He did it to learn some web scraping and files handling. I thought it is a really cool project for beginners to do in order to get better at Python and coding in general. So I decided to do a tutorial on how to write such a code for Youtube. Also, when finishing this short article, you will feel the joy of making somehting complete, coz I know it is important 😄.

(TL;DR 😞: You can skip this and jump to see the final code in this GitHub repo)

Short and Simple

I generally tend to keep my writings simple, short, and beginner-friendly. So I decided to skip the scraping bit and use a package to deal with YT videos. Youtube, just like any other tech giant, sure does not make it easy to access and use their data. And in order to download a video with python, you need to access the source streaming that video. So we will be using a package called pytube3 to access videos from links and download them. So go ahead and download the package with this command and make a python file main.py.

pip install pytube3

Then in main.py lets import the YouTube from pytube package.

from pytube import YouTube
# Dont worry about the number 3 part, it is just an upgrade for the package.

Now here is the checklist we want to follow:
- input yt link and store the video.
- filter stream options and choose the desired resolution.
- Download the video.
- Polish the mess.

Link and Video stored 🔗

First things first. We need the user to input a link to the video they want to download. Then use the YouTube package to store the video in a variable. The package will throw an error if the link is not from YouTube so we will handle the error too using try & except.

#main.py

from pytube import YouTube

link = input("   Enter video's link ...\n   ")
try:
    video = YouTube(str(link))
except:
    print('     Something went wrong')
    print('     Check if your link is valid')
    # Exit the code if there is an error
    exit('     Exiting app ...')

    # LOL, please mind the extra spaces.
    # I just dont like the text displayed in a terminal to start next to the window border 😆.

input yt link and store the video ✔️.

Now we need to let the user choose what quality they want the downloaded video to have, by index.
We will print a message with the options then use another input for the user to choose. Then store the available options in an array.

#main.py

from pytube import YouTube

link = input("   Enter video's link ...\n   ")
try:
    video = YouTube(str(link))
except:
    print('     Something went wrong')
    print('     Check if your link is valid')
    # Exit the code if there is an error
    exit('     Exiting app ...')

    # LOL, please mind the extra spaces.
    # I just dont like the text displayed in a terminal to start next to the window border 😆.

res = input('   Choose the number of the resolution you like!\n   0: 360p\n   1: 720p\n   2: 1080p\n   ')
options = [ '360p', '720p', '1080p' ]

Wait! Why did we name the options this way and store them in an array?
We will now use the number entered by the user to access the index of the chosen resolution in the array and pass it to the package.

Great. Now that we know what the user wants, we will call the package to filter the streams and get us the one with the chosen resolution. To do so, we will use the video.streams.filter method. We will pass them two params. First, the file extension of the video (we will use mp4), and the resolution value. If the resolution is not available, we will also throw an error.

#main.py

from pytube import YouTube

link = input("   Enter video's link ...\n   ")
try:
    video = YouTube(str(link))
except:
    print('     Something went wrong')
    print('     Check if your link is valid')
    # Exit the code if there is an error
    exit('     Exiting app ...')

    # LOL, please mind the extra spaces.
    # I just dont like the text displayed in a terminal to start next to the window border 😆.

res = input('   Choose the number of the resolution you like!\n   0: 360p\n   1: 720p\n   2: 1080p\n   ')
options = [ '360p', '720p', '1080p' ]

try:
    chosen_stream = video.streams.filter(file_extension = 'mp4', resolution = options[int(res)])
except:
    print('This resolution is not available')
    exit('Exiting app ...')

You can notice that the resolution param value is options[int(res)]. Which is the index of the value in our res array, entered by the user previously. We also wrapped res with int() to make sure the input was an integer not a string.

GREAT.

filter stream options and choose the desired resolution ✔️.

FINAL TOUCH

Now all that is left is to download the video from the chosen stream. To do so we will use the .download() method. It takes only one input which is the location you want to download the video to. We will dowload it in the same directory.
Now before we use the download method, there something little to notice. If you print the chosen_stream variable print(chosen_stream) you will see that it is actually stored in an array. So we will use download on chosen_stream[0].

#main.py

from pytube import YouTube

link = input("   Enter video's link ...\n   ")
try:
    video = YouTube(str(link))
except:
    print('     Something went wrong')
    print('     Check if your link is valid')
    # Exit the code if there is an error
    exit('     Exiting app ...')

    # LOL, please mind the extra spaces.
    # I just dont like the text displayed in a terminal to start next to the window border 😆.

res = input('   Choose the number of the resolution you like!\n   0: 360p\n   1: 720p\n   2: 1080p\n   ')
options = [ '360p', '720p', '1080p' ]

try:
    chosen_stream = video.streams.filter(file_extension = 'mp4', resolution = options[int(res)])
except:
    print('This resolution is not available')
    exit('Exiting app ...')

download_stream = chosen_stream[0].download('./')

Download the video ✔️.

Now lets print some cool stuff to the terminal and some more clearifying messages to polish this.

# main.py

from pytube import YouTube

# print a cool PD (Python Downloader)
print('''
        |=======\  |=======\        
        | ------ | |  ----  |
        | |    | | |  |  |  |
        | ------ | |  |  |  |
        |=======/  |  |  |  |  
        |          |  ----  |
        |          |=======/
''')

link = input("   Enter video's link ...\n   ")
print('\n')

try:
    video = YouTube(str(link))
except:
    print('     Something went wrong')
    print('     Check if your link is valid')
    exit('     Exiting app ...')

res = input('   Choose the number of the resolution you like!\n   0: 360\n   1: 720\n   2: 1080\n   ')
options = [ '360p', '720p', '1080p' ]

try:
    chosen_stream = video.streams.filter(file_extension = 'mp4', resolution = options[int(res)])
except:
    print('This resolution is not available')
    exit('Exiting app ...')

print('   Now downloading ', video.title)
download_stream = chosen_stream[0].download('./')

Polish ✔️
Follow me on twitter!

Real time websockets connection 🔥 with Nodejs (Chat App example).

Mustafa Anas — Thu, 09 Jan 2020 23:56:08 +0000

When I first started learning Full Stack JS development, I could barely understand the difference/relationship between a server and a client. I remember my first CRUD application was a mess. After I developed the server (back-end), I could not understand the step of sending the data to the client (front-end). So literally all I did was to export the functions that directly manipulate the database and use them on the client (basically compromising all the data).

You need bartenders and attendees to get the party going 🎆

It was only a matter of time until I wrapped my head around the difference/relation between the client and the server, and that they are two totally different things.
When you are browsing the internet with your own computer searching for news or whatever, you are always being the client. The server is just another computer waiting for you to ask for something so they can grab it for you. Think of it as a party. If someone invites you to a party, as an attendee, you are a client. The server in this analogy is the bartender. If you need a drink or food, bartenders are the ones who will serve you (servers).

You need a drink 🍺? you gotta ask for it!

In such parties, you can imagine how busy the servers can be. If you need something, you (the client) have to go to the bartender (the server) and ask for what you need. The server then can go and get you what you asked for.
The most common protocol used for communications between clients and servers is HTTP. HTTP is a request-response based communication. If the client needs a certain piece of data, it has to send a REQUEST (req) to the server. The server then reads the req and sends a RESPONSE (res) containing the data the client asked for. This is usually referred to as a handshake. The server can pretty much do nothing if the client does not initiate the response.
Lets create an express server with Nodejs and see how that works.
(express uses REST API which is also based on http)

Open your terminal
Go to the directory (folder) where you want to save the file
Run the command npm init -y
Run npm i express

Now if you open the folder, you will see a package.json file.
Create a server.js file and write the following:

const express = require('express')  // Import express
const app = express()  // create the express app


app.get('/server', (req, res) => {  // the location of the server (localhost:port/server)
    res.send('response')
})

app.listen(5000, () => {  // listen to port 5000 (localhost:5000/)
    console.log('listening ...')
})

As you can see, we set up a server at port 5000 and it receives requests at /server endpoint. If we get a request from the client to that endpoint, out server will send the string "response" as a response.
To run the server now, go to the terminal and run node server.js

Now that our server is ready, lets do the client work.
Open your browser and go to the url localhost:5000/server. By visiting the page, you are basically sending the server a request and waiting for it response. Once the page loads, you should see your response. (The screen should show response).
You can make as many endpoints as you want and have each end point serve different response.
Remember when I said the server can only send data as a response? so the client has to be the one sending the request. if you try to edit the code and send two reponses instead of one:

app.get('/server', (req, res) => {  // the location of the server (localhost:port/server)
    res.send('response')
    res.send('another response')
})

Save the code and run node server.js again. Then go back to your browser and visit localhost:5000/server. You can only see the first response ("response"). If you have a look at your terminal, you will see the following error: Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client. With HTTP, if you want to send another response, you need another request (sure one response can be more than just a string).
(Go here if you want to know more about RESTful API).

So what's exactly websockets? VIP bartenders?

Ok I admit. The bartenders analogy only takes us so far. Websocket connections are a bit more advanced and complex. I will keep it as simple as I can.
We agreed before that HTTP protocol is req-res based protocol. So for each response, you need a request. This is the main issue websockets (ws) connections solve.
With a ws connection, the client does not have to initiate the connection and send a request every time to receive a response. Instead, when the client first connects to the server, it establishes a bidirectional connection with the server. Once the connection is established, the server or the client can reach each other without the server having to wait for a request. So, the client can also receive something it did not know it would be coming. (did this remind you of messaging apps??).

A chat app is a perfect example to know the difference.
Imagine yourself as the client and your friend as the server. If you are only texting your friend, you have to send a message (a request), and wait for your friend to message back (a response). Where as if you call him, you can both talk and hear each other instantaneously.
(disclaimer: even messaging apps are built with web socket connections. I just used it as an analogy to explain the difference).

The picture below shows the difference between the regular HTTP connection and a websocket connection. A ws connection is closed when any of the two sides disconnects.

Lets build a simple chat app to see an example of a WS connection 👽

Lets first prepare our server. The one we just built was an express server built with regular REST api. We need to change that.
To build a WS connection, we need to install two extra npm modules

Go to the terminal
Run npm i http socket.io

Edit server.js to the following:

const express = require('express')
const app = express()
var http = require('http').createServer(app);  // build http server on top of the express one
var io = require('socket.io')(http);  // build a WS server on top of the http one.


// this runs whenever a client establishes a WS connection with the server
io.on('connection', (client) => {  
    console.log('a user connected')

    // this runs whenever the client sends something on the chat channel
    client.on('chat', (data) => {
        console.log('Message received -->', data)

        // this emits data back to all the users on the chat channel
        io.emit('chat', data)
    })
});


// Now make our new WS server listen to port 5000
io.listen(5000, () => {  
    console.log('Listening ... 🚀 ')
})

Great! Now our server can handle real time data transfers and establish bidirectional connections. Lets take a moment to explain things here.
socket.io is a javascript library for ws connections. There is a lot to it but lets understand it as simply as possible. After establishing the bidirectional connection. The user/s subscribe to named channels. The server later can choose to send certain data to certain channels. In the example above, we made a channel called "chat". Now once we work on the client in a bit, we will be able to send data to this channel. Once we do, the data first goes to the server. then the server emits (sends; io.emit('chat', data)) the same data again to the channel chat. This way not only the one who sent the data can receive it, but all those subscribing to the chat channel.

Socket.io makes it super easy to establish WS connections. As you can see, we prepared a chat server with just a few lines of code. Now lets see how this looks like on the client side. We will make it just as simple and create a minimal react chat app for the client.

Socket.io on the client side (React).

Lets first generate the usual React template and add the needed modules.

Go to your terminal
Make a new directory and cd into it (mkdir client; cd client)
Run npx create-react-app my_app
(once this is done)
Run npm i socket.io-client

After you run these commands in order, open your React app and lets edit /src/App.js:

import React, { useState } from 'react';  // do NOT forget to import useState
import logo from './logo.svg';
import './App.css';

//Import Socket.io
import openSocket from 'socket.io-client';


function App() {
  // this is where we will be storing the message the user can create before we send it
  const [newMessage, setMessage] = useState('')

  // these are where all the messages will be.
  // It will first be an empty array but we will 
  // fill it up everytime the server sends us something
  const [allMessages, setAllMessages] = useState([])

  // Establish a WS connection with the server 
  const socket = openSocket('http://localhost:5000');  // <-- make sure the port is the same

  // this subscribes to the 'chat' channel
  // Whenever there are new messages, we put them in the array hook.
  socket.on('chat', (data) => {
    setAllMessages([...allMessages, data])
  })

  // this function runs onClicking the send button
  const sendMessage = () => {
    console.log('SENT')

    // it emits the new message written by the user to the 'chat' channel
    socket.emit('chat', newMessage);

    // clear the message from the text input after sending
    setMessage('')
  }

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <div>
          <h2>Chat Messages</h2>
          <div>
            {/* This is where we will be displaying all the messages */}
            {
              allMessages.map(message => {
                return <div>{message}</div>
              })
            }
          </div>
          <input onChange={(e) => setMessage(e.target.value)} placeholder="type your message .." />
          <button onClick={() => sendMessage()}>↪</button>
        </div>
      </header>
    </div>
  );
}

export default App;

Sweet! This looks really simple and it will get the job done.
All we did in this piece of code is:

Establish a WS connection with our server
Create a text input / send message button
Display the messages in a <div>
Send any new message to the server (which will resend it to the chat channel)
Subscribe to the chat channel to get all the messages

Amazing 🙂 Now if we run this, we should have a working chat app!
go to the terminal and run npm start
(make sure that your server is also running. Navigate to the server directory and run node server.js)

After your React app runs, you should see it at http://localhost:3000. Try opening the same url in more than one tab and send messages from different tabs.
You will see that all the tabs will update instantaneously.
Socket.io makes WS connections incredibly simple. and they are proven to be more efficient on heavy loads. So if you are expecting a lot of traffic on the server, websocket connections manage just well.
Notice that if you refresh the page, all the messages will be deleted. That is because your server is not storing any message. We have no database to write messages to or fetch old messages from. Our server simply acts as a bridge between users on our chat app.

I am on a lifetime mission to support and contribute to the general knowledge of the web community as much as possible. Some of my writings might sound too silly, or too difficult, but no knowledge is ever useless.If you like my articles, feel free to help me keep writing by getting me coffee :)

Convert any .pdf file 📚 into an audio 🔈 book with Python

Mustafa Anas — Tue, 07 Jan 2020 09:21:30 +0000

(edit: I am glad you all liked this project! It got to be the top Python article of the week!)

A while ago I was messing around with google's Text to Speech python library.
This library basically reads out any piece of text and converts it to .mp3 file. Then I started thinking of making something useful out of it.

My installed, saved, and unread pdf books 😕

I like reading books. I really do. I think language and ideas sharing is fascinating. I have a directory at which I store pdf books that I plan on reading but I never do. So I thought hey, why dont I make them audio books and listen to them while I do something else 😄!

So I started planning how the script should look like.

Allow user to pick a .pdf file
Convert the file into one string
Output .mp3 file.

Without further needless words, lets get to it.

Allow user to pick a .pdf file

Python can read files easily. I just need to use the method open("filelocation", "rb") to open the file in reading mode. I dont want to be copying and pasting files to the directory of the code everytime I want to use the code though. So to make it easier we will use tkinter library to open up an interface that lets us choose the file.

from tkinter import Tk
from tkinter.filedialog import askopenfilename

Tk().withdraw() # we don't want a full GUI, so keep the root window from appearing
filelocation = askopenfilename() # open the dialog GUI

Great. Now we have the file location stored in a filelocation variable.

Allow user to pick a .pdf file ✔️

Convert the file into one string

As I said before, to open a file in Python we just need to use the open() method. But we also want to convert the pdf file into regular pieces of text. So we might as well do it now.
To do that we will use a library called pdftotext.
Lets install it:

sudo pip install pdftotext

Then:

from tkinter import Tk
from tkinter.filedialog import askopenfilename
import pdftotext

Tk().withdraw() # we don't want a full GUI, so keep the root window from appearing
filelocation = askopenfilename() # open the dialog GUI

with open(filelocation, "rb") as f:  # open the file in reading (rb) mode and call it f
    pdf = pdftotext.PDF(f)  # store a text version of the pdf file f in pdf variable

Great. Now we have the file stored in the variable pdf.
if you print this variable, you will get an array of strings. Each string is a line in the file. to get them all into one .mp3 file, we will have to make sure they are all stored as one string. So lets loop through this array and add them all to one string.

from tkinter import Tk
from tkinter.filedialog import askopenfilename
import pdftotext

Tk().withdraw() # we don't want a full GUI, so keep the root window from appearing
filelocation = askopenfilename() # open the dialog GUI

with open(filelocation, "rb") as f:  # open the file in reading (rb) mode and call it f
    pdf = pdftotext.PDF(f)  # store a text version of the pdf file f in pdf variable

string_of_text = ''
for text in pdf:
    string_of_text += text

Sweet 😄. Now we have it all as one piece of string.

Convert the file into one string ✔️

Output .mp3 file 🔈

Now we are ready to use the gTTS (google Text To Speech) library. all we need to do is pass the string we made, store the output in a variable, then use the save() method to output the file to the computer.
Lets install it:

sudo pip install gtts

Then:

from tkinter import Tk
from tkinter.filedialog import askopenfilename
import pdftotext
from gtts import gTTS

Tk().withdraw() # we don't want a full GUI, so keep the root window from appearing
filelocation = askopenfilename() # open the dialog GUI

with open(filelocation, "rb") as f:  # open the file in reading (rb) mode and call it f
    pdf = pdftotext.PDF(f)  # store a text version of the pdf file f in pdf variable

string_of_text = ''
for text in pdf:
    string_of_text += text

final_file = gTTS(text=string_of_text, lang='en')  # store file in variable
final_file.save("Generated Speech.mp3")  # save file to computer

As simple as that! we are done 🎇
(edit: I am glad you all liked this article! The intention of all my writings is to be as simple as possible so all-levels readers can understand. If you wish to know more about customizing this API, please check this page: https://gtts.readthedocs.io/en/latest/)

I am on a lifetime mission to support and contribute to the general knowledge of the web community as much as possible. Some of my writings might sound too silly, or too difficult, but no knowledge is ever useless.If you like my articles, feel free to help me keep writing by getting me coffee :)

For Beginners - Analyse your own daily activity by building a Python keylogger 👽

Mustafa Anas — Thu, 02 Jan 2020 06:27:11 +0000

A while ago, I was curious to know more about my own activity on the web. I tried installing my browser search history and do some analysis on that but I didnt like the result considering the effort done to analyze such big data. I wanted to keep it simple. So I thought why not start by capturing every single word my keyboard types and see what I can conclude from there.

So in This tutorial I will show you how to build a keylogger in Python that will allow us to store the words we type in a .txt file then we can see how to analyse/represent this data (It should be fun 😉).

FIRST THINGS FIRST 🎆 . I am close to my first 1000 followers on Dev even though I have not been super active yet. So I want to thank everyone who has been following me (I am glad you like my writings) and promise better engagement from now on 😄.

Great, lets get to it.

Simple Python - Save and Write keys pressed 🦄

This wont be any complicated. To do this we will only need two functions:

One that stores each key pressed in an array.
One that takes the keys stored in the array and write them in a .txt file.

Lets define the first function calling it on_press:

keys = []
def on_press(e):
    global keys  #access the array keys
    keys.append(e)  #add the key e to the array

This function takes an argument which will be the key pressed (we will pass it in a bit), then access the global keys array, then add the key pressed to that array. But so far out function does not run as we did not call it yet. So we need to call this function everytime a key is pressed. To do that we will import few modules from the pynput library.
at the very top of your .py file, lets add this line:

from pynput.keyboard import Key, Listener

To make sure you have pynput installed, run the command pip install pynput

and at the very bottom of the file, lets use the Listener library we imported to call the function we just defined (on_press) everytime a key is pressed.

with Listener(on_press = on_press) as listener:
    listener.join()

Great. Now our code looks like this:

from pynput.keyboard import Key, Listener

keys = []
def on_press(e):
    global keys  #access the array keys
    keys.append(e)  #add the key e to the array

with Listener(on_press = on_press) as listener:
    listener.join()

If we run it, we wont be seeing anything but the code will be recording the logs in the keys array.
Next step is to take these keys and output them into a .txt file.
Lets define our second function (that takes the keys stored in the array and write them in a.txtfile.).

def write_file(keys):
    with open("log.txt", "a+") as f: #the a+ tells python to create log.txt if it does not exist
        for key in keys:
            k = str(key).replace("'", "")
            if k.find("space") > 0:
                    f.write('  ')
            elif k.find("Key") == -1:
                    f.write(k)

Great. Now this function opens the log.txt file, goes throw the array we have, then write the key to the file (as f). However, we have few conditionals here. first we remove any ' key, then if the key pressed is "space", we dont want to write the word space so instead we will just type an actual space " " in a string. Otherwise, we just type the key as it is.

Great 🔥 Now we have the function ready, but when do we call it??
As you saw, there are two steps to the .txt file. First storing the keys in an array, second taking the keys from the array and typing them to a file. WHICH MEANS, we have to call the functiobn write_file only after we store the key in the array. However, since the write_file function goes through the array one by one, we cannot call it everytime we add a key to the array since it will type it again and again. So lets only call it everytime there are 10 keys in the array, and after we call it, we make that array empty again.

So lets edit the on_press function:

count = 0 # his keeps track of how many items there are in the array
keys = []

def on_press(e):
    global keys, count
    keys.append(e)
    count += 1
    if count >= 10:
        count = 0
        write_file(keys)
        keys = []  # make the array empty after we call the write_file function.

Looks like we did it!
Our final code looks like this:

from pynput.keyboard import Key, Listener

count = 0
keys = []

def on_press(e):
    global keys, count
    keys.append(e)
    count += 1
    if count >= 10:
        count = 0
        write_file(keys)
        keys = []

def write_file(keys):
    with open("log.txt", "a+") as f:
        for key in keys:
            k = str(key).replace("'", "")
            if k.find("space") > 0:
                    f.write('  ')
            elif k.find("Key") == -1:
                    f.write(k)

with Listener(on_press = on_press) as listener:
    listener.join()

yayy 🦄
Now run this code, try typing some sentences anywhere, they force close the code.
You will see a new log.txt file appear in the same directory your code is in. You will see the keys nicely formated as words in one line.
Now the next step is to read these words and try to analyze them.

As I said before, I wanted to keep it simple. So all I did was to count:

How many characters
How many lines
How many words
how many times each word was repeated.

For the sake of keeping this simple and beginner-friendly, We will make a new python file that will do the reading/analysis work. So lets make a new readKeys.py file in the same directory and start working there.

Open readKeys.py and type the following:

log_file = open("log.txt", "r+") #open file in reading mode (r)

chars = 0
lines = 0
letters = []

for i in log_file.read():
    if i == '\n':  # \n means Enter key which is a new line
        lines += 1
    chars += 1
    letters.append(i)

The loop we wrote reads the whole log.txt file that we got from the previouse code we wrote and counts how many characters and lines there are, and add the letters into an array. (we kind of re-did what we did in the previous code 😄).

Now what we want to do is to make a new array that has words and not letters.
The way we do this is by joining all the array letters into one string. Then we split this string to an array of words everytime we see a space
(split and join are helpful methods that Python provide us. Lets see how easy it is to use them).

key_string = "".join(letters)
word_string = key_string.replace('\n', " ")
final_keywords_list = word_string.split()

This might look too complex but it is really not. Each line here does a step we mentioned before:

Join the letter in one string
replace the Enter spaces with proper spaces
split the string into an array of words

So now. The final_keywords_list is an array of words.
Now we can do the last bit of analysis. Lets count the repetative words!

First we define an empty dictionary called counted. Then we go through the array of words.
For each word, if it exists in the dictionary, we increase its count. If it does not, we add it.

counted = {}

for letter in final_keywords_list:
    letr = str(letter)
    if letr in counted:
        counted[letr] += 1
    else:
        counted[letr] = 1

Sweet. Our code does what we want it to do so far. We have a dictionary that has each word typed and how many times it was repeated

Lets get to visualization!

Since we have the words counted, why not do some filtering and data visualisation? The way we have the data know allows us to do many things (Sure, the more time you keep this code running, the more words you capture, and the more accurate your analysis can be).

For the sake of this tutorial, I chose to do a bar graph comparing repetative words.
For this we will use a library called matplotlib. It is the most famous library used in Data Science. So lets get to it. First make sure you install it. Instructions here.

So far, our code looks like this:

log_file = open("log.txt", "r+")

chars = 0
lines = 0
letters = []
counted = {}

for i in log_file.read():
    if i == '\n':
        lines += 1
    chars += 1
    letters.append(i)

key_string = "".join(letters)
word_string = key_string.replace('\n', " ")
final_keywords_list = word_string.split()

for letter in final_keywords_list:
    letr = str(letter)
    if letr in counted:
        counted[letr] += 1
    else:
        counted[letr] = 1

Before we go ahead and draw a bar for each word in our dictionary, lets do some filtering.
If we run the code for a while, we will end up having A LOT of words captured. We wont really be able to draw a bar for every single word there is. So lets make a new dictionary containing the words that at least have been repeated 3 times.

new_dict = {}  #making a new empty dictionary

for item in counted:  #looping through the old one
    if counted[str(item)] >= 3:  #if repeated more than 3 times
        new_dict[str(item)] = counted[str(item)]  #add to the new dictionary

Amazing, now we can start drawing 🦄

First we need to import the library we installed:

import matplotlib.pyplot as plt  #calling plt just makes it more convenient

Now at the bottom of our code, lets start plotting the words:

plt.title('KEYLOG ANALYSIS', fontsize = 20)  #choosing a title for the graph
plt.bar(range(len(new_dict)), list(new_dict.values())) 
plt.xticks(range(len(new_dict)), list(new_dict.keys()))

plt.show()

Lets take a moment to explain that.
plt.bar() method takes many arguments. The default positional arguments are the x-coordinates of the graph (the words indexes), and the y-coordinates of the graph (the actual words).

plt.xticks() method is used to label the x-coordinates of the graph. So taking the keys of our dictionary as the second argument will plot each word beneath its bar.

Great. Now we are all set to try this out!
The final code looks like this:

import matplotlib.pyplot as plt

log_file = open("log.txt", "r+")

chars = 0
lines = 0
letters = []
counted = {}
new_dict = {}

for i in log_file.read():
    if i == '\n':
        lines += 1
    chars += 1
    letters.append(i)

key_string = "".join(letters)
word_string = key_string.replace('\n', " ")
final_keywords_list = word_string.split()

for letter in final_keywords_list:
    letr = str(letter)
    if letr in counted:
        counted[letr] += 1
    else:
        counted[letr] = 1

for item in counted:
    if counted[str(item)] >= 3:
        new_dict[str(item)] = counted[str(item)]

print(lines, "Lines", " || ", chars, "Character", " || ", len(final_keywords_list), "Words")
print('\n')

plt.title('KEYLOG ANALYSIS', fontsize = 20)
plt.bar(range(len(new_dict)), list(new_dict.values()))
plt.xticks(range(len(new_dict)), list(new_dict.keys()))

plt.show()

Now the rest is for you to do. Just run the first keylogger we wrote. Do some work with your keyboard. Once you are done, run this code and see what it tells you!
Please feel free to share the result in a screenshot below (it can be really funny sometimes 😆).
Also, feel free to clone the project on github and mess with it.

I am on a lifetime mission to support and contribute to the general knowledge of the web community as much as possible. Some of my writings might sound too silly, or too difficult, but no knowledge is ever useless.If you like my articles, feel free to help me keep writing by getting me coffee 😉 ❤️

LAST Part - teach your kids to build their own game with Python.

Mustafa Anas — Mon, 16 Dec 2019 15:37:57 +0000

So, without further due, lets pickup from where we left last time.
(Nope wait! if you havent, go check part 1 and part 2 then get back here. We'll be waiting!)
So far our code creates the main player and allows us to move it, create the enemies, and randomly place them in the battle field.

(want to jump and see the final outcome of this lesson? feel free to visit the original repo or jump to the end of this)

The code by now looks like this:

import turtle

from random import randint

pen = turtle.Turtle()

turtle.register_shape("ship.gif")
turtle.register_shape("invador.gif")

pen.penup()
pen.setposition(-300,300)
pen.pendown() #this line puts the pen on the paper

for side in range(3): #see number three? its what reminds Python,  THREE times!
  pen.forward(600)
  pen.right(90)

pen.forward(600)
pen.hideturtle()

player = turtle.Turtle()
player.shape('ship.gif')
player.penup()

enemies = []
for i in range(10):
  enemies.append(turtle.Turtle())

for enemy in enemies:
  x = randint(-300, 300)
  y = randint(0, 300)
  enemy.penup()
  enemy.setposition(x, y)
  enemy.shape('invador.gif')

def moveRight():
  x = player.xcor()
  x += 10
  player.setx(x)


def moveLeft():
    x = player.xcor()
    x -= 10
    player.setx(x)  

def moveForward():
    print('something')
    y = player.ycor()
    y += 10
    player.sety(y)

def moveBackward():
    y = player.ycor()
    y -= 10
    player.sety(y)

wn = turtle.Screen()
wn.listen()

wn.onkey(moveRight, 'd')
wn.onkey(moveLeft, 'a')
wn.onkey(moveForward, 'w')
wn.onkey(moveBackward, 's')

wn.bgpic("bg.gif")

turtle.done() #this just keeps the window open until we close it.
turtle.close() #this just fixes issues related to closing the window

Great. Now lets plan what we still have to do before we move on.

Keep on moving the enemies towards us as long as they are not dead
Allow the player to fire
We die if an enemy touches us
Display our score on the screen
Sure enough, emenies die if our bullet hits them

Lets tackle this step by step. First lets work on the enemies movement.
You can plan this differently as you wish, but for this tutorial, we will keep it simple. Enemies will keep moving towards the right side until they reach the white line. When they reach the white line, they will step down towards us, start again from the left side, and move towards the right side. Each time an enemy reaches the right white line, it will step closer to us and start over from the left side. If it reaches the bottom of the field without us killing it or it touching us, it will start all over again from the top of the field. If we manage to hit it with a bullet, we will make it start all over again from the top. Sounds good? Lets get this happening 🚀 .

Move the enemies
Notice that our aim is to keep on moving the enemies in one direction, unless they hit the white line, in which case we will make it start from the left side again.
So the first step is to keep on moving the enemy. This means that we need to write a piece of code that will always run. In code, we call this an infinite loop. Anything inside an infinite loop keep on running until we tell it to stop.

to create an infinite loop in Python we write:

while Ture:
    # this is the body of the loop

No we will write the code that moves the enemies in the body of the infinite loop.
Remember the methods xcor() and ycor() we used to move our player? we will use the same methods to move the emeies. Lets define the speed of the enemies and move them by writing the body of the loop

enemy_speed = 30 # this is the speed of our enemies - You can change it to make them faster/slower

while True:
    for enemy in enemies: # go through the enemies one by one
        x = enemy.xcor() # get the current x location of the enemy
        x += enemy_speed # change the x location of the enemy by its speed which is 30
        enemy.setx(x) # move the enemy to its new x location

Now if you run this code,you will see that the enemies will keep on moving to the right until they are out of the screen. This is good but we still need to tell the enemy that if you hit the one of the white lines, stop, got step close to the player, then move in the opposite direction.

To do so, we will use in if statement. This is a statement that only run if the condition we choose is right. Our condition is if the enemy hits one of the sides. How do we define such condition in the code?

Easy.

We check that if the current x location (xcor()) of the enemy is equal to 300 - enemy_speed.
WAIT ... what??
Ok lets take a second here.

Check the code you wrote previously to draw the battle field. Do you see pen.setposition(-300,300) ? this 300/-300 is the x location of the two sides of the field. The reason we subtract the speed of the enemy is to make sure it stays in the battle field. Because when the player is at 270, it will still move by 30. Which makes it at 300. THEN we can make at start again from the other side but at a step closer to us.

before we right the code. So far we talked about x to move the enemy to the right. But how do we move it towards us? ... You are right, we should decrease the y because we are at a negative y since we are at the end of the screen

Now inside the for loop (which is inside of our infinite loop), write this if statement:

enemy_speed = 30 # this is the speed of our enemies - You can change it to make them faster/slower

while True:
    for enemy in enemies: 
        if enemy.xcor() > 270: # check if the enemy hit the white line
          y = enemy.ycor() # get the current y location of the enemy
          y -= 40 # change the y location of the enemy by 40
          enemy.sety(y) # move it closer to us by y which is 40
          enemy.speed(0) # this makes the transition seems instant
          enemy.setx(-270) # move the enemy to the left side again
        x = enemy.xcor() 
        x += enemy_speed 
        enemy.setx(x)

GREAT! Now we have the enemies moving in the right direction. If you run the code and wait, you will see them moving slowly towards the bottom of the battle field. But the problem is, they keep on going down until they are out of the screen. So we need to stop them when they hit the bottom white line and make them start again from the top.
We need another if statement but for checking the y location this time:

enemy_speed = 30 # this is the speed of our enemies - You can change it to make them faster/slower

while True:
    for enemy in enemies: 
        if enemy.xcor() > 270:
            y = enemy.ycor() 
            y -= 40 
            enemy.sety(y) 
            enemy.speed(0) 
            enemy.setx(-270)

        if enemy.ycor() < -260: # check if the enemy hit the bottom white line
            y = 300  # set y to the new location at the top of the screen
            enemy.speed(0) # this makes the transition seems instant
            enemy.sety(y)  # move the enemy to the new location

        x = enemy.xcor() 
        x += enemy_speed 
        enemy.setx(x)

Yaay 🎆 now our enemies move perfectly!
Feel free to change the values of x, y, and enemy_speed to choose the speed that best fits you for the game.

Keep on moving the enemies towards us as long as they are not dead ✔

Now we still have some work to do with the enemies since we want to change their position if they get hit by our bullet, but this will have to wait until we make the player fire. So lets move to that now.

There are few things we need to do:

First, since all objects in our game are actually turtle objects, we will need to create a bullet turtle and hide it from the screen.
Second, we will create a function that runs when we press the firing button (the space bar in this case) which displays the bullet we created, move it to where our player is, then make it move forward.
Third, we will create a score variable, display it on the screen, then if the bullet touches any enemy, we will increase the score by one, then move that enemy to the top left of the battle field to start again. (True, our game only ends if we die :] )

to create the bullet, write the following code right before our moveRight() function:

bullet = turtle.Turtle()
bullet.color('yellow')
bullet.penup()
bullet.speed(0)
bullet.setheading(90) #this just makes the triangular turtle head towards the top of the screen
bullet.shapesize(2, 2)
bullet.hideturtle()
bullet_speed = 50
bullet_state = 'ready' #???

Most code above looks familiar, right? But why exactly did we add the bullet_state thing?
Since there are more than just one function responsible for the bullet, this helps us know when we can fire and when not. The goal is to fire one bullet every time we hit the space bar. So we will change the bullet_state once we hit the bar and change it again once our bullet reaches the end of the battle field.
(I understand that this might not make a lot of sense right now. Do not worry about it. You will understand more later when we use it)

Now if you run this code, you will not really see anything new. That is because our bullet is hidden and we did not show it yet. Lets create the function that fires.

Right below our moveBackward() function, add this:

def fire_bullet():
    # the global word makes bullet_state accessible from whitin the function. If you remove it, the code breaks
    global bullet_state 
    if bullet_state == 'ready':
        bullet_state = 'fire'
        x = player.xcor() # get the x location of the player
        y = player.ycor() + 10 # get the y location of the player
        bullet.setposition(x, y) # move the bullet to where the player is
        bullet.showturtle() # show the bullet

Great. The function is now ready but it does not run.
We need to tell Python to run it when we press space. You know how to do that right?
Add this blow its wn.onkey friends.

wn.onkey(fire_bullet, 'space')

This is how our game code looks like now:

import turtle

from random import randint

pen = turtle.Turtle()

turtle.register_shape("ship.gif")
turtle.register_shape("invador.gif")

pen.penup()
pen.setposition(-300,300)
pen.pendown() #this line puts the pen on the paper

for side in range(3): #see number three? its what reminds Python,  THREE times!
  pen.forward(600)
  pen.right(90)

pen.forward(600)
pen.hideturtle()

player = turtle.Turtle()
player.shape('ship.gif')
player.penup()

enemies = []
for i in range(10):
  enemies.append(turtle.Turtle())

for enemy in enemies:
  x = randint(-300, 300)
  y = randint(0, 300)
  enemy.penup()
  enemy.setposition(x, y)
  enemy.shape('invador.gif')

bullet = turtle.Turtle()
bullet.color('yellow')
bullet.penup()
bullet.speed(0)
bullet.setheading(90) #this just makes the triangular turtle head towards the top of the screen
bullet.shapesize(2, 2)
bullet.hideturtle()
bullet_speed = 50
bullet_state = 'ready' #???

def moveRight():
  x = player.xcor()
  x += 10
  player.setx(x)


def moveLeft():
    x = player.xcor()
    x -= 10
    player.setx(x)  

def moveForward():
    print('something')
    y = player.ycor()
    y += 10
    player.sety(y)

def moveBackward():
    y = player.ycor()
    y -= 10
    player.sety(y)

def fire_bullet():
    # the global word makes bullet_state accessible from whitin the function. If you remove it, the code breaks
    global bullet_state 
    if bullet_state == 'ready':
        bullet_state = 'fire'
        x = player.xcor() # get the x location of the player
        y = player.ycor() + 10 # get the y location of the player
        bullet.setposition(x, y) # move the bullet to where the player is
        bullet.showturtle() # show the bullet

wn = turtle.Screen()
wn.listen()

wn.onkey(moveRight, 'd')
wn.onkey(moveLeft, 'a')
wn.onkey(moveForward, 'w')
wn.onkey(moveBackward, 's')
wn.onkey(fire_bullet, 'space')

wn.bgpic("bg.gif")

enemy_speed = 30 # this is the speed of our enemies - You can change it to make them faster/slower

while True:
    for enemy in enemies: # go through the enemies one by one
        if enemy.xcor() > 270: # check if the enemy hit the white line
          y = enemy.ycor() # get the current y location of the enemy
          y -= 40 # change the y location of the enemy by 40
          enemy.sety(y) # move it closer to us by y which is 40
          enemy.speed(0) # this makes the transition seems instant
          enemy.setx(-270) # move the enemy to the left side again

        if enemy.ycor() < -260: # check if the enemy hit the bottom white line
            y = 300  # set y to the new location at the top of the screen
            enemy.speed(0) # this makes the transition seems instant
            enemy.sety(y)  # move the enemy to the new location

        x = enemy.xcor() # get the current x location of the enemy
        x += enemy_speed # change the x location of the enemy by its speed which is 30
        enemy.setx(x) # move the enemy to its new x location

turtle.done() #this just keeps the window open until we close it.
turtle.close() #this just fixes issues related to closing the window

Try running the code and pressing the space bar.
What happens? Do you see the yellow bullet? does it move?

If you think we missed something or did something wrong, then thing again 😉
This function should not be responsible for moving the bullet. It only fires the bullet. Thats why we have the bullet_state variable. When we press the space bar and fire the bullet, we change its state from 'ready' to 'fire'. But moving it should happen in the infinite loop (the infinite loop is responsible for moving stuff. Remember moving the enemies?).

What we want to do now is the following:
if the bullet state is fire, move the bullet towards the top. Keep on moving the bullet up until it either hits the top white line or one of the enemies. If so, change its state to 'ready' and hide it again.

So we need two new if statements in the body of the infinite while loop.
one that moves the bullet if the state is ready, and another that changes the state to 'ready' if the bullet hits the top white line (dont worry about hitting the enemies for now. We will create a new function for that).

Change the while loop to this:

while True:
    for enemy in enemies: 
        if enemy.xcor() > 270: 
          y = enemy.ycor() 
          y -= 40 
          enemy.sety(y) 
          enemy.speed(0) 
          enemy.setx(-270) 

        if enemy.ycor() < -260: 
            y = 300  
            enemy.speed(0)
            enemy.sety(y)  

        if bullet_state == 'fire': #chech if the state of the bullet is fire
            y = bullet.ycor() # get the y location of the bullet
            y += bullet_speed # increase the y location of the bullet by its speed
            bullet.sety(y) # move the bullet to the new location

        if bullet.ycor() > 275: # check if the bullet hit the top white line
            bullet.hideturtle() # hide the billet
            bullet_state = 'ready' # change its state to ready to enable the player to fire again

        x = enemy.xcor() 
        x += enemy_speed 
        enemy.setx(x)

Yayy 🎆 Now we can actually fire!
Lets now hurt our enemies 😠
if the bullet hits an enemy, we want to move the enemy back to the top and increase the score.
To know if a collision between the bullet and an enemy happened, we will we will make a function called isCollision() and run it in the infinite loop.
Add the function below right above this line:
wn = turtle.Screen()

def isCollosion(t1, t2):
    distance = math.sqrt(math.pow(t1.xcor() - t2.xcor(), 2) + math.pow(t1.ycor() - t2.ycor(), 2))
    if distance < 35:
        return True
    else:
        return False

The function above is a bit complex. You are not expected to understand how exactly this work but you might wanna ask your parent about it if you are a math geek 😄
In short, the function creates a circle with certain dimensions. Then it check if the distance between t1 and t2 (when we call the funtion, we can make t1 the bullet and t2 the enemy) is less than 35. If so, it means they are close enough and so they touched.
Also, since this is math stuff, we need to tell Python to bring the math tools (you know calulators and stuff) so at the top of your code add import math
(did you notice something? changing 35 to a smaller number makes it more difficult to hit an enemy as you would need to be more accurate - where as making it a bigger number makes killing easier)

Now it is time to run the function inside hte infinite loop.
Somewhere in the body of the for loop which is inside of while loop, write this:

while True:
    for enemy in enemies: # go through the enemies one by one
        if isCollosion(bullet, enemy):
          bullet.hideturtle()
          bullet_state = 'ready' #make the state ready to allow firing again
          enemy.setposition(-300, 300)

EVERYTHING IS WORKING REALLY PERFECTLY 🙌

Allow the player to fire ✔
Sure enough, emenies die if our bullet hits them ✔

You are way closer to becoming a realy game developer!
Only few things left. We need somewhere to show how many enemies we killed, and we need to stop the game if an enemy hits us.
Lets start with the first

At the top of our code, lets make a variable called score and make it equal to zero (no enemies killed at the beginning!)
score = 0

At the begining of the game, lets create a turtle that writes the score to the screen:

turtle.color("white")
turtle.penup()
turtle.setposition(-300, 250)
turtle.write("Your score is: {}".format(score), move=False, align="left", font=("Arial", 18, "normal"))
turtle.hideturtle()

Great. Now we need to increase the score every time a collision happens between a bullet and an enemy. To do so, we will have to clear what we wrote, increase the score, and write the score to the screen again. So lets update the function isColision() in the infinite loop to the following:

if isCollosion(bullet, enemy):
    bullet.hideturtle()
    bullet_state = 'ready' #make the state ready to allow firing again
    enemy.setposition(-300, 300)
    score += 1
    turtle.clear()
    turtle.color("white")
    turtle.penup()
    turtle.setposition(-300, 250)
    turtle.write("Your score is: {}".format(score), move=False, align="left", font=("Arial", 18, "normal"))
    turtle.hideturtle()

Amazing! now we can see how many enemies we have killed so far.
We are almost there!

Display our score on the screen ✔

Our code currently looks like this:

import turtle
import math

from random import randint

score = 0
pen = turtle.Turtle()

turtle.register_shape("ship.gif")
turtle.register_shape("invador.gif")

pen.penup()
pen.setposition(-300,300)
pen.pendown() #this line puts the pen on the paper

for side in range(3): #see number three? its what reminds Python,  THREE times!
  pen.forward(600)
  pen.right(90)

pen.forward(600)
pen.hideturtle()

player = turtle.Turtle()
player.shape('ship.gif')
player.penup()

enemies = []
for i in range(10):
  enemies.append(turtle.Turtle())

for enemy in enemies:
  x = randint(-300, 300)
  y = randint(0, 300)
  enemy.penup()
  enemy.setposition(x, y)
  enemy.shape('invador.gif')

bullet = turtle.Turtle()
bullet.color('yellow')
bullet.penup()
bullet.speed(0)
bullet.setheading(90) #this just makes the triangular turtle head towards the top of the screen
bullet.shapesize(2, 2)
bullet.hideturtle()
bullet_speed = 50
bullet_state = 'ready' #???

turtle.color("white")
turtle.penup()
turtle.setposition(-300, 250)
turtle.write("Your score is: {}".format(score), move=False, align="left", font=("Arial", 18, "normal"))
turtle.hideturtle()

def moveRight():
  x = player.xcor()
  x += 10
  player.setx(x)


def moveLeft():
    x = player.xcor()
    x -= 10
    player.setx(x)  

def moveForward():
    y = player.ycor()
    y += 10
    player.sety(y)

def moveBackward():
    y = player.ycor()
    y -= 10
    player.sety(y)

def fire_bullet():
    # the global word makes bullet_state accessible from whitin the function. If you remove it, the code breaks
    global bullet_state 
    if bullet_state == 'ready':
        bullet_state = 'fire'
        x = player.xcor() # get the x location of the player
        y = player.ycor() + 10 # get the y location of the player
        bullet.setposition(x, y) # move the bullet to where the player is
        bullet.showturtle() # show the bullet

def isCollosion(t1, t2):
    distance = math.sqrt(math.pow(t1.xcor() - t2.xcor(), 2) + math.pow(t1.ycor() - t2.ycor(), 2))
    if distance < 35:
        return True
    else:
        return False

wn = turtle.Screen()
wn.listen()

wn.onkey(moveRight, 'd')
wn.onkey(moveLeft, 'a')
wn.onkey(moveForward, 'w')
wn.onkey(moveBackward, 's')
wn.onkey(fire_bullet, 'space')

wn.bgpic("bg.gif")

enemy_speed = 30 # this is the speed of our enemies - You can change it to make them faster/slower

while True:
    for enemy in enemies: # go through the enemies one by one

        if isCollosion(bullet, enemy):
          bullet.hideturtle()
          bullet_state = 'ready' #make the state ready to allow firing again
          enemy.setposition(-300, 300)
          score += 1
          turtle.clear()
          turtle.color("white")
          turtle.penup()
          turtle.setposition(-300, 250)
          turtle.write("Your score is: {}".format(score), move=False, align="left", font=("Arial", 18, "normal"))
          turtle.hideturtle()

        if enemy.xcor() > 270: # check if the enemy hit the white line
          y = enemy.ycor() # get the current y location of the enemy
          y -= 40 # change the y location of the enemy by 40
          enemy.sety(y) # move it closer to us by y which is 40
          enemy.speed(0) # this makes the transition seems instant
          enemy.setx(-270) # move the enemy to the left side again

        if enemy.ycor() < -260: # check if the enemy hit the bottom white line
            y = 300  # set y to the new location at the top of the screen
            enemy.speed(0) # this makes the transition seems instant
            enemy.sety(y)  # move the enemy to the new location

        if bullet_state == 'fire': # check if the state of the bullet is fire
            y = bullet.ycor() # get the y location of the bullet
            y += bullet_speed # increase the y location of the bullet by its speed
            bullet.sety(y) # move the bullet to the new location

        if bullet.ycor() > 275: # check if the bullet hit the top white line
            bullet.hideturtle() # hide the billet
            bullet_state = 'ready' # change its state to ready to enable the player to fire again

        x = enemy.xcor() # get the current x location of the enemy
        x += enemy_speed # change the x location of the enemy by its speed which is 30
        enemy.setx(x) # move the enemy to its new x location

turtle.done() #this just keeps the window open until we close it.
turtle.close() #this just fixes issues related to closing the window

We are only a step away from getting this game done!
We need to make sure that if any of the enemies touches us, we will stop the game, and print out the final score. Can you guess how we are gonna know if we touched an enemy??
AAh right, we will use the isCollision() function!
Lets insert this function inside the for loop in our inifinite loop:

if isCollosion(player, enemy):
  player.hideturtle()  #hide player from the arena
  turtle.color('red')
  turtle.penup()
  turtle.setposition(0, 0)
  turtle.write("Game Over!", move=False, align="center", font=("Arial", 35, "normal"))
  turtle.setposition(0, -50) #Go to a new line      
  turtle.write("Your score is: {}".format(score), move=False, align="center", font=("Arial", 35, "normal"))
  turtle.done()  #Stop Game
  break

AND this was our last touch 🙋
lets review the whole code one last time:

import turtle
import math

from random import randint

score = 0
pen = turtle.Turtle()

turtle.register_shape("ship.gif")
turtle.register_shape("invador.gif")

pen.penup()
pen.setposition(-300,300)
pen.pendown() #this line puts the pen on the paper

for side in range(3): #see number three? its what reminds Python,  THREE times!
  pen.forward(600)
  pen.right(90)

pen.forward(600)
pen.hideturtle()

player = turtle.Turtle()
player.shape('ship.gif')
player.penup()

enemies = []
for i in range(10):
  enemies.append(turtle.Turtle())

for enemy in enemies:
  x = randint(-300, 300)
  y = randint(0, 300)
  enemy.penup()
  enemy.setposition(x, y)
  enemy.shape('invador.gif')

bullet = turtle.Turtle()
bullet.color('yellow')
bullet.penup()
bullet.speed(0)
bullet.setheading(90) #this just makes the triangular turtle head towards the top of the screen
bullet.shapesize(2, 2)
bullet.hideturtle()
bullet_speed = 50
bullet_state = 'ready' #???

turtle.color("white")
turtle.penup()
turtle.setposition(-300, 250)
turtle.write("Your score is: {}".format(score), move=False, align="left", font=("Arial", 18, "normal"))
turtle.hideturtle()

def moveRight():
  x = player.xcor()
  x += 10
  player.setx(x)


def moveLeft():
    x = player.xcor()
    x -= 10
    player.setx(x)  

def moveForward():
    y = player.ycor()
    y += 10
    player.sety(y)

def moveBackward():
    y = player.ycor()
    y -= 10
    player.sety(y)

def fire_bullet():
    # the global word makes bullet_state accessible from whitin the function. If you remove it, the code breaks
    global bullet_state 
    if bullet_state == 'ready':
        bullet_state = 'fire'
        x = player.xcor() # get the x location of the player
        y = player.ycor() + 10 # get the y location of the player
        bullet.setposition(x, y) # move the bullet to where the player is
        bullet.showturtle() # show the bullet

def isCollosion(t1, t2):
    distance = math.sqrt(math.pow(t1.xcor() - t2.xcor(), 2) + math.pow(t1.ycor() - t2.ycor(), 2))
    if distance < 35:
        return True
    else:
        return False

wn = turtle.Screen()
wn.listen()

wn.onkey(moveRight, 'd')
wn.onkey(moveLeft, 'a')
wn.onkey(moveForward, 'w')
wn.onkey(moveBackward, 's')
wn.onkey(fire_bullet, 'space')

wn.bgpic("bg.gif")

enemy_speed = 30 # this is the speed of our enemies - You can change it to make them faster/slower

while True:
    for enemy in enemies: # go through the enemies one by one
        if isCollosion(player, enemy):
          player.hideturtle()  #hide player from the arena
          turtle.color('red')
          turtle.penup()
          turtle.setposition(0, 0)
          turtle.write("Game Over!", move=False, align="center", font=("Arial", 35, "normal"))
          turtle.setposition(0, -50) #Go to a new line      
          turtle.write("Your score is: {}".format(score), move=False, align="center", font=("Arial", 35, "normal"))
          turtle.done()  #Stop Game
          break

        if isCollosion(bullet, enemy):
          bullet.hideturtle()
          bullet_state = 'ready' #make the state ready to allow firing again
          enemy.setposition(-300, 300)
          score += 1
          turtle.clear()
          turtle.color("white")
          turtle.penup()
          turtle.setposition(-300, 250)
          turtle.write("Your score is: {}".format(score), move=False, align="left", font=("Arial", 18, "normal"))
          turtle.hideturtle()

        if enemy.xcor() > 270: # check if the enemy hit the white line
          y = enemy.ycor() # get the current y location of the enemy
          y -= 40 # change the y location of the enemy by 40
          enemy.sety(y) # move it closer to us by y which is 40
          enemy.speed(0) # this makes the transition seems instant
          enemy.setx(-270) # move the enemy to the left side again

        if enemy.ycor() < -260: # check if the enemy hit the bottom white line
            y = 300  # set y to the new location at the top of the screen
            enemy.speed(0) # this makes the transition seems instant
            enemy.sety(y)  # move the enemy to the new location

        if bullet_state == 'fire': # check if the state of the bullet is fire
            y = bullet.ycor() # get the y location of the bullet
            y += bullet_speed # increase the y location of the bullet by its speed
            bullet.sety(y) # move the bullet to the new location

        if bullet.ycor() > 275: # check if the bullet hit the top white line
            bullet.hideturtle() # hide the billet
            bullet_state = 'ready' # change its state to ready to enable the player to fire again

        x = enemy.xcor() # get the current x location of the enemy
        x += enemy_speed # change the x location of the enemy by its speed which is 30
        enemy.setx(x) # move the enemy to its new x location

turtle.done() #this just keeps the window open until we close it.
turtle.close() #this just fixes issues related to closing the window

Keep on moving the enemies towards us as long as they are not dead ✔
Allow the player to fire ✔
We die if an enemy touches us ✔
Display our score on the screen ✔
Sure enough, emenies die if our bullet hits them ✔

MISSION ACCOMPLISHED
Now you just run it and enjoy 🎆 🎆 🎆 !!!

Throughout this series, I got a lot of support messages from parents and I really appreciate that I was able to get any kid's interest. If there are any suggestion/requests you want from/for me please feel free to DM me.

I am on a lifetime mission to support and contribute to the general knowledge of the web community as much as possible. Some of my writings might sound too silly, or too difficult, but no knowledge is ever useless.If you like my articles, feel free to help me keep writing by getting me coffee :)

teach your kids to build their own game with Python - 2

Mustafa Anas — Thu, 28 Nov 2019 05:03:57 +0000

Hello again!

I know and I am sorry!. I promised this second part a long time ago and didnt publish it. I am having a tough few weeks (job haunting is a real pain!!). But since the last part got a lot of positive reactions, I am publishing this and will make sure to publish the last part before this weekend.

(want to jump and see the final outcome of this lesson? feel free to visit the original repo or jump to the end of this)

So, without further due, lets pickup from where we left last time.
The last piece of code we wrote allowed us to create and move the main player (we still need to make sure it fires 🔥).
The code so far looks like this:

# 🐢🐢🐢
import turtle
pen = turtle.Turtle()

pen.pendown() #this line puts the pen on the paper
for side in range(3): #see number three? its what reminds Python,  THREE times!
  pen.forward(100)
  pen.right(90)
pen.forward(100)

player = turtle.Turtle()
player.penup()

def moveRight():
    x = player.xcor()
    x += 10
    player.setx(x)

def moveLeft():
    x = player.xcor()
    x -= 10
    player.setx(x)  

def moveForward():unicorn
    print('something')
    y = player.ycor()
    y += 10
    player.sety(y)

def moveBackward():
    y = player.ycor()
    y -= 10
    player.sety(y)

wn = turtle.Screen()
wn.listen()

wn.onkey(moveRight, 'd')
wn.onkey(moveLeft, 'a')
wn.onkey(moveForward, 'w')
wn.onkey(moveBackward, 's')

turtle.done() #this just keeps the window open until we close it.
turtle.close() #this just fixes issues related to closing the window

Sizes, dimensions, and cleaning

checked
As of now, if you run the code, it will draw a small box in the middle of the screen with small arrow (the player) that you can move.
So couple of things to do here:

[ ] draw a bigger box
[ ] hide the turtle that drew that box
[ ] make the player bigger

so lets start by making our box bigger. You remember how we drew that? all we did was to make the 🐢 move in four directions. Great! so now we know that all we need to do is to position the turtle in the right place before we make it move (and maybe make it walk a bit longer?). the way we position any turtle we create with Python is by using this function .setposition(x, y) (intuitive right?).
To understand what does x and y actually mean, lets try to implement them first and then see. Right after creating the pen (pen = turtle.Turtle()), and before putting the pen down (pen.pendown()) we will write this:pen.hideturtle()

border_pen.penup()
border_pen.setposition(-300,300)

Try running it, what heppens?
Yess the small box moved to the left top corner! but why there?
Try changing the values of either the first or the second number in the function, run it again, and see what happens.

.setposition(x, y)pen.hideturtle() takes two ar> guments. x is how far right or left (zero is the center), and y is how far up or down (again, zero is the center).

Great, so now we are starting from the left top corner and we have a loop that we already wrote which draws a box. All we need to do is make the sides of that box longer.

for side in range(3): 
  pen.forward(600)
  pen.right(90)
pen.forward(600)

Now run the code and check the dimension of the box (Sure feel free to change it the way you like. is is YOUR game 🦄)

draw a bigger box ✔

You still see that annoying arrow at the top left side of the box? Lets hide it before we forget about it.
After the pen has done the job (beneath the loop), lets add this line

pen.hideturtle()

Yaay its gone 🎆

draw a bigger box ✔
hide the turtle that drew that box ✔

Now we get to us, the player!
Currently we are a tiny arrow in the middle of a huge box heading east.
we need to be a bigger armory ship heading north 🚀
Lets do some changes. First go to this image here, download it, and save it right next to your python file.

There are three steps for giving a shape to our turtle:

Save the picture
Make turtle register the picture in its memory
tell turtle to give the registered picture to the player

Since you just saved the picture, the first step is done. Now the second step.
Turtle needs to know everything it is dealing with. So it has a command to register new shapes (JUST LIKE OUR PICTURE!)
to reigster our picture as a shape, lets add this line of code before we start drawing the box:

turtle.register_shape("ship.gif")

Notice, ship.gif is the name of the file you just saved. so if you want to download your own ship from the internet, make sure you either change its name or change the code to its name.

Last thing to do is to tell turtle heyy, this shape is for player.

below player = turtle.Turtle() add:

player.shape('sh or change the code to its name.

Last thing to do is to tell turtle heyy, this shape is for player.

below player = turtle.Turtle() add:

player.shape('ship.gif')

RUN AND SEE HOW GREAT IT FEELS TO RIDE A SPACE SHIP 🚀 🚀

Now that we are in the field, lets start calling enemies in.
Lets give it a thought first. An enemy is basically a new turtle object on the screen. So say we want to have 5 enemies, we create 5 turtle objects and give them a position (sure, later on they'll do more than just standing there!). Since we already know loops, I will introduce lists so we make our development process easier.

Lists and appending enemies

a list is basically a container. You can think of it as a pencil case for your pencils and pens. a closet for your clothes, or a container for your turtles 😄

Lets use a loop (like the one we used to create the arena box) to make a list that has 10 of our enemies (again, an enemy is a turtle).

enemies = []
for i in range(10):
    enemies.append(turtle.Turtle())

Sure enough, changing the number in the range will change the number of our enemies.
Now we have our enemies stored but not displayed on the screen. Lets create another loop to go over all the enemies in the list and put them somewhere on the screen. Wait, somewhere on the screen? this means that we dont even know exactly where!
Yess that is right. We will ask python to pick a random number between a range that we choose. And remember the X and Y system? we will have to tell Python to give each turtle a random y and a random x value. Thankfully Python has something ready that helps us choose random numbers every time we run the code. It is a package called randomand a particular function in that package is called randint

lets import the package in a new line after importing turtle.

from random import randint

Now lets use it. Below the loop that created the enemies in the list, we will write this loop:

for enemy in enemies:
    x = randint(-300, 300)
    y = randint(0, 300)
    enemy.setposition(x, y)

what is happening here is basically letting Python choose a random number for x (a number between -300 and 300), and a random number for y (a number between 0 and 300), then giving telling the enemy to go to this random position. The reason x is between -300 and 300 is so that it fits in the box we created, where we want all the game to happen. But why y is only between 0 and 300? well thats because we do not want it to be very close to where we are,since the idea is to have them run towards us to attack (Yess we will do that too 🔥).
Now if you run the code, the result will look like this:

It turned out that Python first puts the enemy in the middle of the screen then sends it wherever you tell it to. Which results in these lines as if you remember, we previously said that turtles are like pens on papers. To move, we need to take the pen away from the paper before moving it. So lets add this line too.

for enemy in enemies:
    x = randint(-300, 300)
    y = randint(0, 300)
    enemy.penup()
    enemy.setposition(x, y)

woww it is starting to look scary 👽
Lets make it worse by giving those enemies some proper shape.
First go here, download the invadors picture, and save it next to the other image/python file. Then lets go ahead and register the picture and assign it to the enemies.

turtle.register_shape("ship.gif")
turtle.register_shape("invador.gif")

for enemy in enemies:
    x = randint(-300, 300)
    y = randint(0, 300)
    enemy.penup()
    enemy.setposition(x, y)
    enemy.shape('invador.gif')

Looks good?
One last thing since we are dealing with pictures already, lets add a background picture to the whole game. Go here and download it.

turtle.register_shape("bg.gif")

then lets go below to the screen variable we created last time and assign it a background picture.

wn = turtle.Screen()
wn.bgpic("bg.gif")

If something went wrong, here is how the final code looks like:
(you can also see this repo for a commit history)

#  This file is for the follow up tutorial 🐢
import turtle

from random import randint

pen = turtle.Turtle()

turtle.register_shape("ship.gif")
turtle.register_shape("invador.gif")

pen.penup()
pen.setposition(-300,300)
pen.pendown() #this line puts the pen on the paper
for side in range(3): #see number three? its what reminds Python,  THREE times!
  pen.forward(600)
  pen.right(90)
pen.forward(600)
pen.hideturtle()

player = turtle.Turtle()
player.shape('ship.gif')
player.penup()

enemies = []
for i in range(10):
    enemies.append(turtle.Turtle())

for enemy in enemies:
    x = randint(-300, 300)
    y = randint(0, 300)
    enemy.penup()
    enemy.setposition(x, y)
    enemy.shape('invador.gif')

def moveRight():
    x = player.xcor()
    x += 10
    player.setx(x)



def moveLeft():
    x = player.xcor()
    x -= 10
    player.setx(x)  

def moveForward():
    print('something')
    y = player.ycor()
    y += 10
    player.sety(y)

def moveBackward():
    y = player.ycor()
    y -= 10
    player.sety(y)

wn = turtle.Screen()
wn.listen()

wn.onkey(moveRight, 'd')
wn.onkey(moveLeft, 'a')
wn.onkey(moveForward, 'w')
wn.onkey(moveBackward, 's')

wn.bgpic("bg.gif")

turtle.done() #this just keeps the window open until we close it.
turtle.close() #this just fixes issues related to closing the window

THIS REALLY LOOKS GOOD 🔥 🔥
Next lesson, the war shall begin! 👽

I am on a lifetime mission to support and contribute to the general knowledge of the web community as much as possible. Some of my writings might sound too silly, or too difficult, but no knowledge is ever useless.If you like my articles, feel free to help me keep writing by getting me coffee 😉 ❤️

teach your kids to build their own game with Python - 1

Mustafa Anas — Wed, 06 Nov 2019 07:12:56 +0000

I used to be a coding trainer few months ago. Our students were former street kids coming from under-privileged societies. You can imagine the lack of education they had. As a teacher there, I had to make my lessons fun and easy for them to grasp, so I would often use games to do so. I was going through my old files and I found this lesson plan I wrote to teach the kids how to build the famous game Space Invaders. At the beginning it seemed an impossible mission, but they actually loved it and got to love coding because of it!
Anywho, with no further details, I am going to share this lesson in three posts here. today is the first, hoping that any beginner or parent would find it helpful.

to follow up with this tutorial, you will need to have Python installed, and a text editor. OR, you could use this online text editor and create a project that uses turtle too (we'll talk more about this in a bit).

Using Turtle for Graphics

Python itself is just a programming language. It can go deep enough in ordering the computer what to do, but it does no graphics on its own! (think of it as Javascript, it still needs HTML to display anything).
For that reason, we will use a Python GUI (Graphical User Interface) Library called Turtle. A turtle is a pen that you put on the screen and move it however you want to end up having something drawn on the screen.

to order python to bring the pen which we will use to draw, we can type this line:

Pen = turtle.Turtle()

however, as we said, turtle is something that is not part of who Python is, so we will need to tell it to bring it from somewhere outside (do now worry, it knows where to find outside stuff).
So we will always include this line at the top of our file:

import turtle
Pen = turtle.Turtle()

GREAT! now that we have the pen, we need to start drawing!
Image your hand is holding the pen and not Python. for example, to draw a straight line to the right, you just move the pen to the right by sticking your hand to the paper and moving it to the right!
So we know we need to tell Python to do two things:

Put the pen on the paper (screen in Python's case!)
move the pen x amount of distance to the direction we want! So let do that:

import turtle
pen = turtle.Turtle()

pen.pendown() #this line puts the pen on the paper
pen.forward(100) #now move the pen forward 100 steps!

Now if you run your code, you will see a little arrow moving on the screen!
There are few things we should memorize now about how to move the pen. Because we not only have forward, but other things too!

pen.forward()
pen.backward()
pen.left()
pen.right()
pen.penup()

Now I want you to try each on your own before we continue.
...
...
They seem intuitive right? .backward() moves the pen backwards. Except that left and right do not actually move the pen but rotate it a certain degree.
Now try copying the code below and pasting it in your text editor. What do you see?

import turtle
pen = turtle.Turtle()

pen.pendown() #this line puts the pen on the paper
pen.forward(100) #now move the pen forward 100 steps!
pen.right(90)
pen.forward(100)
pen.right(90)
pen.forward(100)
pen.right(90)
pen.forward(100)

that is right!
we moved our pen in the right way to draw a square, great. Now lets increase the values in the brackets following forward because we want a bigger square! (this is where our game will be happening).

.
.
.

But hey wait a second, did you notice that in our code there is two lines that we repeated THREE TIMES! don't you think it is ugly to do so?
I mean there should be a way to tell Python to read something again and again without having to write it many times!

YES you guessed right!
we can actually only write those two lines one time, and tell Python to read them three times! this is how we do it:

import turtle
pen = turtle.Turtle()

pen.pendown() #this line puts the pen on the paper
for side in range(3): #see number three? its what reminds Python,  THREE times!
  pen.forward(100)
  pen.right(90)
pen.forward(100)

This is called a for loop. It allows you to do ONE thing MANY times without re-writing the same thing!

Great, now we have a big square, and we want our game to be inside it!

wait! did you know that you can change the color of your pen? just by typing .color('name_of_color'). Try it! ie: try pen.color('red')
Before continuing.

Before continuing, lets make sure we know what we want exactly in our game:

Our character that moves and shoots enemies!
Enemies characters that move towards us 👽
We get destroyed if an enemy touches us
An enemy dies if our bullet touches it! 🚀

Great! Now we can finish these one by one! First, lets create US. we are just a pen that moves inside the square. But wait wont we be drawing if we do so?. You are right, but remember when we said we can tell Python to put the pen away from the paper? what happens is, the pen still shows on the screen, but it does not leave trace behind it when it moves. So lets do that!

we create a new pen called player (we), and put it away from the paper.

import turtle
pen = turtle.Turtle()

pen.pendown() #this line puts the pen on the paper
for side in range(3): #see number three? its what reminds Python,  THREE times!
  pen.forward(100)
  pen.right(90)
pen.forward(100)

player = turtle.Turtle()
player.penup()

now if we try to move the player (player.forward(100)) it will move leaving nothing behind it. Anyways, we dont want to write the value every time we move it! Instead, we will tell Python to move it only one step every time we press a key!

Lets first tell Python to listen carefully, because when I press the letter D on my keyboard, I want the player to move one step ahead!

wn = turtle.Screen() #initiate the window
wn.listen()
wn.onkey(myFunction, `d`) #this waits until you press <kbd>D</kbd>

but wait what is myFunction??
That is an important question.
In Python, a function is a set of orders we give to the computers. What is an order? EVERY line of code written in Python or any other language is an order! so we could write a function that just says hello! or collect the lines of code we just wrote and draw a square! One special thing about functions, is that they do not happen until we call them!
Just like how your mom calls dad to ask him to get some stuff for home? you call a function to do something. so here, we need to tell myFunction to move our player only one step to the right! So each time we press d, our player moves a step ahead.
This is how we make this function:

def moveRight():
 x = player.xcor()
 x += 10
 player.setx(x)

Lets take a while here to explain this code;
the def word is just Python's way of knowing that what's after it is the name of the function (yes because you can name your function whatever you want 😄). Now we know that moveRight() is the name of the function. Now the two dots after the function just indicate that here is where the function starts. If we write them, then we press Enter, we will notice that the editor will immediately make us start the next line with a bit of space empty.
Why? this is how Python know that this line is part of this function

Great, Now lets see what is part of this function.

x = player.xcor() this sentence has some weird math behind it.
(if you happen to know what the Orthonormal system, you will know what this is). But all you really need to know is that this x now has the current position of our player (notice that the code says player.xcor()).
Now we said we wanted to move a step to the right. so we need to increate x by a step!
this is what this line does x += 10. You can try a number other than 10 and see how fast/slow your movement is.
Now after increaing the value of x (where our player used to be), we need to assign x again to our player. and this is what the last line does: player.setx(x)

Try running the code and moving the player.
Now you should be able to move to the right 🎆 after pressing D.

Easy right?
Now lets use the same logic to make to the left.
HOLD ONE 🔔
notice, when we moved to the right, we increased x, but when we move to the opposite direction, what should we do??

def moveLeft():
 x = player.xcor()
 x -= 10
 player.setx(x)

But to run this function, we need to ask Python to run it when we press the letter A on the keyboard! So lets make Python listen to the letter A again.

wn.onkey(moveLeft, 'a')

Great!
the only thing missing now is moving forward and backward!
To do so we can use the same logic BUT, math plays around a bit here.
When we were moving right and left, we were using xcor(). But now we will be moving forward and backward, that's why we will use ycor() instead.

wn.onkey(moveForward, 'w')
wn.onkey(moveBackward, 's')

def moveForward():
 y = player.ycor()
 y += 10
 player.sety(y)

def moveBackward():
 y = player.ycor()
 y -= 10
 player.sety(y)

now run your code and move around!!!
YAYY!! 🎆🎆🎆
We are free to move now!
this is how our final code looks like:

import turtle
pen = turtle.Turtle()

pen.pendown() #this line puts the pen on the paper
for side in range(3): #see number three? its what reminds Python,  THREE times!
  pen.forward(100)
  pen.right(90)
pen.forward(100)

player = turtle.Turtle()
player.penup()

def moveRight():
    x = player.xcor()
    x += 10
    player.setx(x)

def moveLeft():
    x = player.xcor()
    x -= 10
    player.setx(x)  

def moveForward():
    print('something')
    y = player.ycor()
    y += 10
    player.sety(y)

def moveBackward():
    y = player.ycor()
    y -= 10
    player.sety(y)

wn = turtle.Screen()
wn.listen()

wn.onkey(moveRight, 'd')
wn.onkey(moveLeft, 'a')
wn.onkey(moveForward, 'w')
wn.onkey(moveBackward, 's')

turtle.done() #this just keeps the window open until we close it

You have come a long way!
Next tutorial, we will get our enemies in the game, then start the fight!

I am on a lifetime mission to support and contribute to the general knowledge of the web community as much as possible. Some of my writings might sound too silly, or too difficult, but no knowledge is ever useless.If you like my articles, feel free to help me keep writing by getting me coffee 😉 ❤️

How I got my DEV articles to my React portfolio

Mustafa Anas — Mon, 04 Nov 2019 03:07:36 +0000

I started to put myself a portfolio around a month ago. Today I wanted to push myself towards putting more efforts into writing on DEV so I decided to fetch my articles here to my React website (well, that way if I want to look cooler, I have to write more). So here is how I did it.

I knew DEV has it right

I ran my protfolio locally and scraped the html page of my account here. However, I immediately realized that this community MUST have a very clean and well documented API! (you guessed it right, they do!).
It did not take me long until I got to https://docs.dev.to/api/. If you navigate there, you can find a clean explanation about the main routes you would want to use to get any data from this community.

The main routes are for authentication, articles, and users.
You can have a look at the documentation, it looks enough to even build your own CMS for DEV's api f you feel like!

Boh, anyways!
what does all this mean? How do I get my articles here to show on my React project?
Ok, lets get technical. 🚀

a React App, and an HTTP Client

So I am assuming you have a react project ready to test this with me. first thing you need to do is install an HTTP Client that will allow you to send HTTP requests to any webpage, and receive responses to your webpage. In our case we will use axios

go to your main react folder and run the command:

npm i axios

once the installation is done, first thing to remember is to import axios to your component.
Now we will make our component send a request to get certain articles. Intuitively, the url is going to be https://dev.to/api/articles. If you copy this link and paste it in your browser, it will show you a json object with 30 articles!
This is a default response from DEV on requests to this link. if you ask for articles, it will send you the hottest 🔥 30 articles on DEV. So, we need to be more specific and tell DEV who are the author of the article we want to get.

The author is going to be your username which you can copy from the link appearing in your browser when you head to your profile page. Great! now what do we do with it?
According to DEV's documentation, we need to pass the username as a parameter for the http request being sent to the server.
thus, our link will be:

https://dev.to/api/articles?username=your_user_name

if you copy and paste this in your browser, it will show your most recent 30 articles. Great!
Now we need to actually get all this information to our code and display it in our component.

lets create a stateless functional component and initiate and state called articles, and setArticles (for updating them).

import React, { useState } from 'react';
import axios from 'axios'

const Articles = () => {
    const [articles, setArticles] = useState()
    return ( 
        <div>
            ARTICLES
        </div>
     );
}

Great. Now when the component first renders to the page, we want to:

Send a request to DEV's API
Store the response in our state (articles)
Map over the state and display the data.

lets first send a request using axios to https://dev.to/api/articles?username=your_user_name

import React, { useState, useEffect } from 'react';
import axios from 'axios'

const articles = () => {
    const [articles, setArticles] = useState()

useEffect(() =>{
        axios.get('https://dev.to/api/articles?username=mustafaanaskh99')
        .then(e => setArticles(e.data))
    }, [])

    return ( 
        <div>
            ARTICLES
        </div>
     );
}

Notice that we imported useEffect to run our http request after the component is rendered.
the axios.get method is just like the rest get method (a way to get data from http links). At the end of the day, axios is just an HTTP client.

Now if you console.log(articles) in your component, you will see a json object with data about all your articles. What we will be displaying are the following:

title
cover_image (link to image)
url (link to article)
tags (an array)
positive_reactions_count (how money likes, saves, and unicorns)

right below the useEffect, if our state (articles) are filled up already, we will map over its values and for each: return the title followed by the image, the description of the article, a link that takes you to the article when you click the description, and the list of tags:

if(articles){
        return ( 
            <div>
                {
                    articles.map((article, index) => {
                        console.log(article)
                        return(
                            <div key={index}>
                                <article>
                                    <h2><strong> {article.title} </strong></h2>

                                    {
                                        article.cover_image ? (
                                            <figure>
                                                <img src={article.cover_image} alt="article-cover" />
                                            </figure>
                                        ) : (
                                            <figure></figure>
                                        )
                                    }
                                    <p>
                                        <a href={article.url} target="_blank" rel="noopener noreferrer">
                                            {article.description}
                                        </a>
                                    </p>
                                    <p>
                                        <span>
                                        {article.tags.toString()}
                                        </span>
                                        <br />
                                        <code>interactions: {article.positive_reactions_count}</code>
                                    </p>
                                </article>
                            </div>
                        )
                    })
                }
            </div>
         );
    } else {
        return(
            <div>
                <div>LOADING</div>
            </div>
        )
    }

Yay!! 🎆
you should be able to see the articles rendered on your page.
There are more data you can grab about your account and activity. If it interests you, I would suggest you log the data object to your console and check the fields available there.

Hope this was any helpful!

I am on a lifetime mission to support and contribute to the general knowledge of the developers community as much as possible. Some of my writings might sound too silly, or too difficult, but no knowledge is ever useless. I urge you to do the same and try to pay back your community your own way 😄 ❤️

Resume reviews/tips post?

Mustafa Anas — Sat, 28 Sep 2019 20:32:19 +0000

I am in the middle of my job haunting process, and it got me thinking ..
the last post I saw where we shared and rated each others resumes I got to see was in 2018. Can we do this again now?

There are lots of tips that have major affects on our resume perception that most of us do not know. Including how the resumes scanning software work, what is a convenient format, and what are the most crucial points someone needs to have in her/his resume.

Job seekers, please share a link to your resume below.
Experts, please give share us some of your time and knowledge by rating our resumes.

My resume

React State for Dummies - State and Virtual DOM

Mustafa Anas — Tue, 17 Sep 2019 19:19:30 +0000

This is part of a series of articles in which I try to break down the evolution of React State concept and try to showcase its importance by explaining the problems React State tackles in simple and intuitive way.

Hello again,
Lets skip the introductions and get right to it!

In the previous article, we developed a page shows a student name which we input in a text field and submit to the localStorage. We also had a button to clear the storage and erase the student name. All that we did in vanilla Javascript! The point was to showcase how much of a hustle there would be if we had to manually interact with the DOM every time we wanted to add or remove data (which is how it was before React came).

In this article, we will develop the same page but in React!
(if you have not read the previous article yet, I would suggest you go read it first then come check this one!)
At the end of this article, you would be able to compare the two different code and see for yourself how much time and effort React State saves and why.

No more blah blahs, lets get going ..

if this is your first time using React and you want to set it up first, go check this page to know how to get started!

first lets create a new folder and initiate a new react project inside it. You can copy paste the following command lines to your terminal:

npx create-react-app my_app
cd my_app
npm start

after running the following command, open your browser and head to http://localhost:3000/

you should be able to see the following default page:

Open the project in your preferred text editor, and you are ready to go!

Removing unnecessary files and adding Bulma

Adding Bulma:

Lets head to out terminal and install Bulma dependency in the root directory:

npm i Bulma

Now we only need to import the CSS library and dependencies to ur main HTML file. The main file in React can be found in public/index.html. In React, index.html is the main page. Then, the App component renders and returns some HTML that gets inserted in the index.html page.

So if you go to src/index.js you will see this line

ReactDOM.render(<App />, document.getElementById('root'));

This basically tells the <App /> component to insert itself in the HTML element that has an id of 'root'. (You can find a div that has that id inside the index.html page).

ANYWAYS, all we need to do now to get Bulma ready is to paste those two lines inside the <head></head> tag in the index.html page:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>

Removing files:

In our project directory (folder), lets open the src directory and start deleting some files. Since we will be using Bulma, we will delete the App.css and index.css files. Delete the App.test.js too because we wont do testing for the sake of this article. Finally, delete the logo.svg file as we wont be using it in our page.

your src directory should look like this now:

Sure, since we deleted some files that were being used in the default code, we need to do some cleaning before we go on. Go ahead and delete the imports to both the logo and the App.css in App.js and index.js, and delete everything inside App component to make it render a blank white page.

Your final App.js file should look like this:

import React from 'react';

function App() {
  return (
    <div className="App">

    </div>
  );
}

export default App;

As you can see, our App component is actually a functional component. In react, there are two types of components:

Functional Components
Class Components

We will dive deeper into both types later, but an essential difference is that you cannot use state with functional components (That's why hooks were created!. More on that and on functional programming in the next article). For this article we just want to see how state solved the hustle that we mentioned in the previous article, so we will change our App component to a class component.

this is how it will look:

class App extends React.Component {
  render() { 
    return ( 
      <div className="App">

      </div>
     );
  }
}

HTML to JSX

Now we are ready to start building the page in React. React uses HTML syntax but it is called JSX. Basically if you want to design a page in HTML, it is the same in React. All you have to do is put the HTML code inside the return() function. One minor difference though (you may have noticed), is that in react, class is called className, and all event listeners are camelCase (onclick = onClick).

So, we just need to do minor changes to the HTML code we wrote in the previous article and paste it inside the return() function. For now, We will just change class to classNameand delete all the onclick methods.

Our App.js should look like this by now:

import React from 'react';

class App extends React.Component {
  render() { 
    return ( 
        <section className="section">
          <div className="container">
              <h3 className="title">Student:</h3>
              <ul id="li" className="subtitle"></ul>
          </div>
          <section className="section">
              <div className="container">
                  <div className="columns">
                      <div className="columns">
                          <div className="column">
                              <input  className="input is-success" id="submit" type="text" placeholder="Student Name" />
                          </div>
                          <div className="column">
                              <input className="button is-success" type="button" value="Submit Student" />
                          </div>
                      </div>
                  </div>
                  <input className="button is-warning" type="button" value="Clear Storage" />
              </div>
          </section>
      </section>
     );
  }
}

export default App;

and the page looks like this:

Storing the value in state

So, all we have for this page is the name of the student which we should fetch from the localStorage. If the localStorage is empty however, we want to display Storage is Empty. Lets do this step by step:

Displaying the state:

So state is just a Javascript object that we can put whatever in it. For this case, we will store a vale that is called 'student_name'. To do so, we need to write the following inside React.Component{ here } but outside of render(return(...)).

Should look like:

class App extends React.Component {
  state = {
    'student_name': 'Storage is Empty'
  }
  render() { 
    ...
}

We stored the student name to be Storage is Empty by default for now. (later we will check if there is a student stored in the localStorage before we display Storage is Empty).

In React, everything inside the return() function is what gets rendered as HTML. BUT, what is cool about that is that you can insert dynamic data by inserting Javascript inside your JSX, HTML-like, code! and this is how we will be able to isnert our javascript State object that contains our student_name value into the page.

Inside our App.js file, we will go to where we want to insert the value (inside <ul></ul> in this case) and write the following:

<ul id="li" className="subtitle">
  <li>{this.state.student_name}</li>
</ul>

(the brackets {} is how you can insert Javascript inside JSX).
Now we can see our state data!

Updating the state:

We want to be able to update the state and see the changes in realtime! first lets create a function for that.

saveStudentInitial = () => {
    this.setState({
      student_name: e.target.value
    })
  }

As you can see, the syntax for updating any value in the state is this.setState({}) (we will talk about the weird this in the coming article).

This function says, take the event passed to you, extract its value, then update the student_name with it. But if you remember from the previous article, these changes usually do not appear on the page unless you manually manipulate the DOM!. Well, that is what is special about setState. It re-renders the component every time you use it, making the new changes appear. AND, if you had nested components, not all the app with re-render, but only the component in which you used setState. This is why using state is way easier and more efficient.

Now we need to call the function from the input field and pass it the event value. For now, lets call the function when the user changes the input so we test the realtime data changing.

Lets edit the input field code and make it call the saveStudentInitial():

 <input className="input is-success" onChange={(e) => this.saveStudentInitial(e)} id="submit" type="text" placeholder="Student Name" />

Now if you try typing anything inside the input field, you will see the name of the student changing as you type. Cool!

Now lets get this thing working Properly. We do not really want to update the student name as we type! but we still want to save the value of the name in the state as the user types, then submit it when the submit button is clicked. So, lets create a new value in the state object and call it input_value that is and empty string by default.

state = {
    input_value: '', 
    'student_name': 'Storage is Empty'
  }

In the saveStudentInitial function, instead of updating the student_name we want to update the input_value.

saveStudentInitial = (e) => {
    this.setState({
      input_value: e.target.value
    })
  }

Cool! We have the value stored in React in the front end, we just need to save it in the localStorage when the submit button is clicked.

Save the value to the localStorage after you set the state:

Lets create a function that saves the input_value in the localStorage and sets the student_name to be equal to the input_value!

saveStudent = () => {
    localStorage.setItem('student', this.state.input_value)
    this.setState({
      student_name: this.state.input_value
    })
  }

lets make this run when we click the submit button.

<input className="button is-success" type="button" value="Submit Student" onClick={() => this.saveStudent()}/>

Now if you try submitting any new name, it will show on the screen!. If you refresh the page though, you will see that the subtitle under Students: is back to Storage is Empty. But we just saved the value to the storage!
lets see what we should do now ..

check if there is any value in the storage when the page loads and change the state accordingly

Now every time the component is rendered / re-rendered, we want to first check if the storage is empty or not. If it is empty, wont do anything as the default value of student_name in our state is already Storage is Empty. BUT, if the storage has the student name, then we want to set the student_name in our state to that value.

componentDidMount = () => {
    let student = localStorage.getItem('student')
    if (student !== null){
      if (this.state.student_name !== student){
        this.setState({
          student_name: student
        })
      }
    }
  }

Ha?? What is componentDidMount?.
componentDidMount is a function that automatically runs ever single time the component gets rendered or re-rendered to the page. But that is why we need to be careful and that is why we have two if statements. We dont wanna be stuck in an infinite loop!

Cool! we are almost done. We just need to implement the Clear Storage properly!

set the state to default and empty the storage when clear Storage is clicked.

clearStorage = () => {
    localStorage.clear()
    this.setState({
      student_name: 'Storage is Empty'
    })
  }

Notice that every time we add new data, instead of refreshing the page, we just update the state! It does the DOM manipulation for us.
Lets not forget to call this function when the Clear button is clicked:

<input className="button is-warning" type="button" value="Clear Storage" onClick={() => this.clearStorage()}/>

Our final App.js now look like this:

import React from 'react';

class App extends React.Component {
  state = {
    input_value: '', 
    'student_name': 'Storage is Empty'
  }

  saveStudentInitial = (e) => {
    this.setState({
      input_value: e.target.value
    })
  }

  saveStudent = () => {
    localStorage.setItem('student', this.state.input_value)
    this.setState({
      student_name: this.state.input_value
    })
  }

  clearStorage = () => {
    localStorage.clear()
    this.setState({
      student_name: 'Storage is Empty'
    })
  }

  componentDidMount = () => {
    let student = localStorage.getItem('student')
    if (student !== null){
      if (this.state.student_name !== student){
        this.setState({
          student_name: student
        })
      }
    }
  }

  render() { 
    return ( 
        <section className="section">
          <div className="container">
              <h3 className="title">Student:</h3>
              <ul id="li" className="subtitle">
                <li>{this.state.student_name}</li>
              </ul>
          </div>
          <section className="section">
              <div className="container">
                  <div className="columns">
                      <div className="columns">
                          <div className="column">
                              <input className="input is-success" onChange={(e) => this.saveStudentInitial(e)} id="submit" type="text" placeholder="Student Name" />
                          </div>
                          <div className="column">
                              <input className="button is-success" type="button" value="Submit Student" onClick={() => this.saveStudent()}/>
                          </div>
                      </div>
                  </div>
                  <input className="button is-warning" type="button" value="Clear Storage" onClick={() => this.clearStorage()}/>
              </div>
          </section>
      </section>
     );
  }
}

export default App;

AND we are done!
We coded an efficient, easy to develop create, read, and delete page!
In the coming article we will talk more about functional programming and hooks!

Thanks for reading and do get it touch if you need any help!

React State for Dummies - How was it before React?

Mustafa Anas — Fri, 13 Sep 2019 07:56:46 +0000

Hello everyone and welcome to my first tech blog ever! It took me a lot of time and hesitation to decide to sit down and start sharing any bits of information, but here I am attempting to write and hopefully strengthen the tech's community's knowledge anyhow!

What was all this about anyways?

Throughout the history of all programming languages, the aim was always to have a language that is as efficient as possible in creating/manipulating and reading/displaying data. Developers wanted to have an efficient and easy way to add created data to the DOM. React is one of the frameworks that achieved a fast and straight forward way of doing so.

In order to understand what did React State solve and why it is important, we need to put ourselves in the shoe of the pre-React developers and see how they used to deal with creating data, saving it in the DB, and adding it to the DOM.

Let's do it the jQuery way!

Well, we will be using Vanilla Javascript rather than jQuery but the following code uses the logic that was very common between jQuery developers.

In this example, we will be saving a student's name in the localStorage of the browser and displaying it in our page. Let me begin by adding the HTML code.
(As I am not the best UI designer, I will use the help of Bulma.io just to make things a bit more appealing. All you need to do is run npm i bulma in the directory where you will be creating the files we create in this tutorial, then you can follow up with me and get the same result.)

<!-- main.html -->
<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
        <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script> 
    </head>

    <body>
        <section class="section">
                <div class="container">
                    <h3 class="title">Student:</h3>
                    <ul id="li" class="subtitle"></ul>
                </div>
                <section class="section">
                    <div class="container">
                                <div class="columns">
                                    <div class="columns">
                                        <div class="column">
                                            <input  class="input is-success" id="submit" type="text" placeholder="Student Name"/>
                                        </div>
                                        <div class="column">
                                            <input class="button is-success" type="button" value="Submit Student"/>
                                        </div>
                                    </div>
                                </div>
                        <input class="button is-warning" type="button" value="Clear Storage" />
                    </div>
                </section>
            </section>
    </body>
</html>

The first div that has a Student title and an empty ul as a subtitle is where we will be displaying our student name. You can see the following in the code:

<ul id="li" class="subtitle"></ul>

the list has an id because this is how we will access it to append the student name in it as a list item.

When you first load the page, it should look like this:

By clicking the Submit Student button after filling the input field, I want the name to be saved in the localStorage then appear right below Student:. By clicking Clear Storage button I want to delete the saved name in the storage then delete it from the page.

to keep things clean, lets create a seperate main.js file and link it to our main.html page.

I will add the following line to the bottom of </body>.

<script src="mainInitial.js"></script>

Saving the input in the localStorage

Now we need to create a function that runs when the Submit Student button is clicked. This function will take the value of the text input and saves it in the localStorage with a 'student' key.

// main.js
const saveStudent = (val) => {
    localStorage.setItem('student', val)
}

I will go to main.html file now, pass the text input value to the function, and run it when the button is clicked:

<input class="button is-success" type="button" value="Submit Student" onclick="saveStudent(document.getElementById('submit').value)"/>

Now our code actually saves the data in the localStorage of the browser. It just does not display it yet. You can try adding any random text and navigating to the localStorage in the storage in tools.

Reading data and displaying them

Remember the ul we gave an id for at the beginning? now we will grab the saved name in our storage, grab that list by its ID, then and append the name in the list as text.
Lets write an if statement that checks if there is any saved student in the localStorage and display it in the page. If not, we will display a text that says: Storage is Empty.

// main.js
const locStor = localStorage.getItem('student')
if(locStor == null){
    console.log('Storage is Empty')
    document.getElementById('li').append('Storage is Empty');
} else {
    let student = localStorage.getItem('student')
    document.getElementById('li').append(student);
}

Now if you run the new code in your browser, you page should look like this and display the last name you submitted:

and sure, if you did not submit any name yet, it should show the following:

Now before we move any further, to delete the saved name, lets create a function, clearStorage(), that clears the localStorage.

// main.js
const clearStorage = () => {
    localStorage.clear()
}

lets go back and link the button to the function:

<!-- main.html -->
<input class="button is-warning" type="button" value="Clear Storage" onclick="clearStorage()"/>

YAY Now we can add data to the localStorage and display it in the page! ... but wait a sec, there is something missing.

As you may have noticed, every time you submit a student name, you will need to refresh the page for the new name to be displayed. Same for clearing the storage, you will need to refresh in order to see the Storage is empty in the page. If the type of Submit Student input was type="submit" instead of type="button", the page will refresh on its own and you may not notice it. Anyways, we could instruct the page to reload every time we submit a student name but do we really want to do that?

Efficiency in displaying newly created data

In this example, we were only adding and deleting a one-line text. Even if we are to refresh the page every time we update the name or delete it, it will take no time, but this is not always the case. Imagine if we were adding hundreds of students information to the page, or thousands, or even more, it would be very heavy and not efficient to keep on refreshing. Instead, we will manipulate the DOM.

Lets start with adding data. Every time we click the submit button, we want to save the name in the localStorage (something we already did). Now since we will not be refreshing the page, we need to add this name immediately to the page (before we even send it to the localStorage) in order not to have to grab it from the page once again (less time -> better efficiency).

This is how we do it,

we will update the saveStudent function to the following:

const saveStudent = (val) => {
    let newStudent = document.createElement("li")
    let studentName = document.createTextNode(val)
    newStudent.appendChild(studentName)
    newStudent.setAttribute("id", "new_student")
    document.getElementById('li').append(newStudent);
    localStorage.setItem('student', val)
}

As you can see, we created a new li, then we created a text node that holds the name of the student, then we appended that node in the list item we just created. Before we stored the name, we appended it in the ul we have in our main.html file.

We made it! and now, the data stored in the localStorage and the displayed data are kind of synchronized. They are identical and our page looks just like if we would have pulled the data from the store, except we made it shorter and more efficient (Yes it is such a hustle, but this is what React State will tackle later as you will see).

If you noticed, while creating the node that holds the student name, we gave it an id that is "new-student". This is just so we can access the item and delete it easily when we want to clear the storage. Lets do that!

const clearStorage = () => {
    document.getElementById('new_student').remove()
    localStorage.clear()
}

Now if you try adding a student or clearing the localStorage, you will notice that it happens smoothly without having to refresh the page. However, this not very convenient or easy to do. Keep in mind that in this example we are only working on one list that has one name. Code with such techniques can easily get messy when dealing with bigger data and arranging it in tables or graphs or so.

React state came and provided an alternative, easy, and very convenient solution to this problem. It provided the State object. In simple words, state is just a Javascript object that can store whatever data you want it to store (in the page itself only). Changing any of the data in this object will tell React, uhh, the user seems to be updating the page!. React then goes and checks what data was changed and where was it used. Then it only re-renders (refreshes) the part in which the changed data was used. This eliminates the pain you have to go through while manipulating the DOM to display the correct data, and at the same time it does it efficiently without refreshing the page and reloading all the already displayed data.

In the next article I will be developing the same example using React state and proving how much pain it saves you :D.

Thanks for reading.