Forem: Boyan Iliev

What is HTTP, HTTPS, and SSL

Boyan Iliev — Mon, 08 Nov 2021 13:19:34 +0000

Introduction

If you are a developer, you probably know what an SSL certificate is. If you don't know what it is, don't worry. An SSL certificate is a must-have on any website. It lets your web browser connect to a web server securely. SSL stands for Secure Sockets Layer, and it is a digital certificate that allows for an encrypted connection.

But let's back it up a bit. First, we need to know what lets a web browser and a webserver connect. To connect with a website, we need HTTP.

What is `HTTP`?

HTTP stands for Hypertext Transfer Protocol and this protocol is used to transfer data from the web servers to web browsers. So if you ever visit a website you can notice the protocol being added at the beginning of the web address. So for example http://www.website.com. This protocol is used to view different web pages on the internet.

By default in standard HTTP, all of the information is sent in clear text. What this means is when you type something, it gets sent over the public internet which means that hackers can view it, because it's all sent over in clear text.

This isn't a problem, that is if you only browse a website, but if there are any passwords involved, or any other personal information, such as credit card information, then a hacker could easily get that info. Due to the fact it's being sent over the public internet, a hacker could listen in as the data is being transferred and could steal it.

If you ever have to type in personal information, you should always check if you have a secure connection. And for you to have a secure connection, you would need to use HTTPS.

What is `HTTPS`?

HTTPS is HTTP, but secure. That's why there is an S added. Hypertext Transfer Protocol Secure. What this does is encrypt the data that is being retrieved by HTTP. It lets all of the data that is being transferred between the server and the computer secure. The way it does that is by making the data impossible to read by encryption algorithms that mix up the data that's being transferred.

So whenever you are on a site and you have to enter a password or some credit card information, make sure the web address looks like this - https://www.website.com. This means that the data that you pass in will be protected. You can also notice a padlock to the left of the web address, which also indicates you are using a secure HTTP.

Thanks to the encryption algorithms the data we put in comes out all scrambled up so that hackers can't understand and decrypt it.

HTTPS secures the data thanks to a protocol called:

`SSL`

SSL stands for Secure Sockets Layer and it is a protocol that's used to establish security on the internet. But how exactly does SSL work? Well, it uses public-key encryption to secure data.

What this means is when a computer connects with a website that is using SSL, the computer's web browser will ask the website to say who it is or identify itself. Then the webserver will send the computer a copy of the SSL certificate it has.

An SSL certificate is a small digital certificate that is used to validate the identity of a website. Or in other words, this lets your computer know that the website you're visiting is reliable and trustworthy.

So then the browser of the computer can check if it trusts the certificate and if it does it will send a message to the web server, to which then the web server will respond with a response so that an SSL session can begin.

Most SSL certificates have to be paid for, but there are also some free ones, for example:

Let's Encrypt

Let’s Encrypt is a Certificate Authority (CA) that provides an easy way to obtain and install free SSL certificates, thereby enabling encrypted HTTPS on web servers. You could check this post out on How To Secure Nginx with Let's Encrypt on Ubuntu so that you can get a little bit more familiar with Let's Encrypt.

Conclusion

This may seem confusing at first, but it's best to get to know how the internet actually works and the different protocols that are out there. If you notice almost all of the sites nowadays have HTTPS instead of HTTP, even though there isn't any data to be transferred between servers, and that's because Google has started flagging websites as Not Secure because they aren't protected with SSL.

I hope that this post has helped you learn a little bit more about these protocols that you use daily and how they work.

How to get the size of a directory in Linux

Boyan Iliev — Thu, 04 Nov 2021 09:17:37 +0000

Introduction

Linux is one of the most popular operating systems in the world. It is Unix-like, and it is also open-source. Quite a big percentage of developers use Linux because it can be customized in so many ways.

What's cool about Linux is its command line. Every 'hackers' paradise. There are a ton of commands. If you aren't familiar with any Linux commands, be sure to check out this post on the 8 Linux Commands Everyone Should Know.

There is probably a command for almost anything that you want to do. For example what if you wanted to get the size of a directory? Well luckily for you there is a command for that. In this post, we are going to talk about that command and see what it can offer.

The `du` command

This command lets the user get a quick view of the disk usage. The best way to use it is by giving it the directory you want to see the size of. It should look a little something like this:

du directory_name

// output
2314    directory_name

This will give you the size of all the files and at the very end, it will give you the size of the directory itself. You could point out the full path, or you could just give the name of the directory you want to see if you are already on the same path.

But we could make this even easier just b adding 2 flags. Flags help the command change its behavior. For the du command we could add the flags -s and -h.

-s stands for summarize and it will show you only the total size of the directory, without all those files popping up on your screen.

-h stands for human-readable and it will convert the size so that you can read it easier. Just by running the command without the -h flag doesn't specify you a unit of measurement.

So now to get the best of this command, you should run it like this with the -s and -h flags:

du -sh directory_name

// output
44.5M   directory_name

And if you wanted to see all of the directories sizes, you could just run this:

du -sh ./*

// output
12.2M   dir1
 2.5M   dir2
  55M   dir3

Another thing you can do is use pipe(|) and sort them by size, which will make it even easier for you to see their sizes. What | does is get the output from the command behind it and add it into the input of the command after it. So to sort the directories by size just run the following command:

du -sh ./* | sort -h

// output
  55M   dir3
12.2M   dir1
 2.5M   dir2

Conclusion

This is a pretty useful command that I think everybody should know, just because of how short and easy it is. I hope that this post has helped you and I wish you happy coding.

How to Replace All Occurrences of a String

Boyan Iliev — Thu, 08 Jul 2021 17:33:02 +0000

Introduction

One of the main data types in JavaScript is strings. These data types are used for storing and manipulating text. And luckily for us, there are quite a few methods that help us in manipulating these data types.

These methods are one of the many built-in methods of JavaScript. This is because JS has some built-in objects. Some of them are: Array, Math and String. And for each object, some properties and methods are associated with them.

In this post we are going to see How to Replace All Occurrences of a String with the replaceAll() method.

`replaceAll()` Method

In order to use this method, we first have to create our string. Let's add randomly ! inside this strong so that we can remove it.

let intro = 'My! n!ame! i!s Bo!yan!';

Now to remove it, we have to write the strings name, then add the replaceAll method next to it, and pass in the first argument which element we want to be replaced or removed. An important thing is to remember that you have to save the new string into a new variable. It should look something like this:

let newIntro = intro.replaceAll('!', '')
console.log(newIntro);

<- My name is Boyan

Now if you want to replace the elements, just pass in the second argument as what you want it replaced with. Let's replace the whitespace with -.

let newerIntro =newIntro.replaceAll(' ', '-');
console.log(newerIntro)

<- My-name-is-Boyan

Conclusion

This is pretty much it to the replaceAll() method. It is the main method used, if not the only method, that replaces all occurrences of a string.

I hope that this post has helped you and I would love to hear some feedback in the comments below.

Introduction To MongoDB and How To Use It

Boyan Iliev — Tue, 29 Jun 2021 14:08:16 +0000

Introduction

MongoDB is a NoSQL (not only SQL) database. In NoSQL databases, we store our data in a collection of documents. These documents are very similar to JavaScript objects or JSON objects. So if you are familiar with JavaScript, then you are going to like Mongo, because it will be easier to get the hang of it.

MongoDB is very scalable. It has built-in replication and sharding. It's performant, it's fast, and mostly, it's very flexible. Because the data structure is like a JavaScript object, you don't have to map out your entire data structure beforehand as you do with relational databases. Unlike a relational database like MySQL, where you have to create all your tables and all your columns, Mongo gives you the freedom to structure your data however we want through our application. This doesn't mean it's better than relational databases, it all depends on how you need to use your database.

Installing MongoDB

We are going to install MongoDB through Homebrew. If you don't have Homebrew installed, just run the code below in your terminal and that will install Homebrew.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Once you get Homebrew installed on your Mac, just run the three following commands. First, we run:

brew tap mongodb/brew

Then run:

brew install mongodb-community@4.4

Then after that, we will want to run it as a service with the following command:

brew services start mongodb-community@4.4

And finally, we need to run the following command so that we can connect and start using MongoDB.

mongo

This is what you should see after running the command:

Now that we have Mongo installed and ready, let's start with some of the main commands that you should know

Commands

Show Current Database

The command for seeing the current database is:

db

Show All Databases

In order to see all of the databases just run the following command:

show dbs

Switching and Creating Databases

If you want to switch which database you are using, just type in use followed by the database name.

use db_name

If you want to create a DB, just type in the use command again, followed by your new DBs name.

use new_db_name

If you run show dbs after creating a DB, the new DB won't show because it doesn't have anything in it, so don't worry when it doesn't show up after running the show dbs.

Dropping a Database

In order to drop a database, or in other words, delete it, you first need to switch to the database with the use command, and after that, you need to type in the following command:

db.dropDatabase()

Creating and Viewing Collections

To create a collection in the DB that you are using, you just have to run the following command and set the name of your collection:

db.createCollection('collection_name')

And if you want to view the collection, just run the show command followed by collections and that should print out the collections in your DB.

show collections

Inserting Rows

Now in order to insert a row, just type in the db followed by the name of the collection that you want to insert the row in, and then by insert, which is then followed by parentheses(). And in those parentheses, you pass in an object with whatever you want.

Here is an example of how this should look like:

db.users.insert({
    username: 'Batman_fan_44',
    followers: 3,
    following: [
        'Alred',
        'Robin'
    ],
    status: {
        name: 'Bruce Wayne',
        status: 'active'
    }
})

As you can see this looks just like a normal JavaScript object. You can store strings, numbers, arrays and can also have embedded objects inside. This is why Mongo is liked by so many, because of how similar it is to JS and how easy it is to use.

If you want to insert more than one row, instead of typing insert after the collections name, type in insertMany and then insert your rows in an array like this:

db.users.insertMany([
    {
        username: 'Tony Montana',
        followers: 1234
    },
    {
        username: 'Hannibal Lecter',
        followers: 5
    },
    {
        username: 'Rick Grimes',
        followers: 21
    }
])

These rows don't have as many stuff like likes or status. which our first row has, but that doesn't matter. Unlike relational databases, in Mongo, we don't have that strict data model that we have to follow. We can put whatever we want wherever we want, which is awesome!

Viewing Rows

To view the rows of a certain collection, just run the following command.

db.collection_name.find()

This will print out the data, but it will be hard to read. Luckily there is a method called pretty(), which formats all the rows.

db.collection_name.find().pretty()

And now it will be much easier to read.

These are some of the main commands that you should know. I recommend that you check out this MongoDB Cheat Sheet and have a look at some other commands that might be useful to you:

https://gist.github.com/bradtraversy/f407d642bdc3b31681bc7e56d95485b6

Conclusion

As you can see MongoDB looks identical to JavaScript. They have similar syntax and are pretty easy to get the hang of.

If you want to have a MongoDB database cluster production-ready, I strongly recommend using the new DigitalOcean managed MongoDB clusters which you can deploy with just the click of a button so that you won't have to worry about server maintenance, which can be very challenging sometimes.

If you want you can use this referral code which gives you free $100 DigitalOcean credit.

If you also want to learn more about SQL and how to use it, I highly recommend that you check out this Introduction to SQL opensource ebook. It helped me understand how to use SQL and I highly recommend it.

I hope that this post has helped you get more comfortable with using MongoDB and getting the hang of it.

How To Write Your First Node.js Script

Boyan Iliev — Tue, 08 Jun 2021 12:31:50 +0000

Introduction

Until recently(if you think that 2009 is recently), we could only run JS code in a web browser. Node is a JavaScript runtime that executes code outside of the browser. We can use the same JS syntax we know and love to write server-side code, instead of relying on other languages like Python or Ruby. You can build Web Servers, Command Line Tools, Native Apps(VSCode is a Node app!), Video Games, Drone Software, and a whole lot more.

In this post, I am going to show you how to write your first little Node script which will make you a directory with an HTML, CSS, and JavaScript file in it.

Getting Started

First, you need to check if you have Node installed on your machine. If you don't know if you have it, just go to the terminal and write:

node -v

This will print out the Node.js version which is currently installed. If you see an error and nothing prints, then you don't have Node installed.

In order to install Node, go to the node website and just press the download button.

https://nodejs.org/en/

After installing Node, we need to create a JavaScript file. Let's call this file script.js. In this file, we are going to write our script.

Now that we have Node installed and our file created, it's time to write our script. For this script, we are going to need to know what the process object is and how the fs module works.

How To Run Node Files

In order to run Node files, you just need to write node and then the file name next to it in the terminal. Th file must be in the same folder that you're in, or you need to reference that full path relative to where you are at the moment.

node script.js

`process` & `argv`

process is an object that's available which is in the global scope. It provides information about, and control over, the current Node.js process. It has a bunch of methods and properties. For example, we can see our current working directory.

process.cwd()

There is a method called process.argv. It returns an array containing the command line arguments passed when the Node.js process was launched. The first element will be the path where the node executable is, and the second will be the path to the JS file being executed. To call this method you need to go to your JS file and console.log() it.

console.log(process.argv);

Then after running your file, you should see this:

node script.js
[ '/usr/local/bin/node', '/Users/ghostman/scripts/script.js' ]

Any remaining element will be additional command-line arguments. We can pass them as arguments into a script. Not a function, but it's a similar idea. I can pass in arguments to a script.

Here is an example of a little script that prints out the additional command-line arguments:

const args = process.argv.slice(2)  -> slice to remove first two items.

for(let arg of args){
    console.log(`Hello ${arg}`)
}

Then when we run the file like this:

node script.js Batman Superman

Ou output should look like this:

Hello Batman
Hello Superman

This is a fun little script to help you understand how the file and node work together and how they can be used.

Now let's get to the fun part.

`fs` Module

The fs module enables interacting with the file system. It has hundreds of methods that you can use. Here is a list so you can see how much they are.

https://nodejs.org/dist/latest-v14.x/docs/api/fs.html

In order for us to use the fs module, we have to require it. We have to save it in a variable.

const fs = require('fs')

Now that we have our fs module, here are the methods that we will be needing for our script.

`fs.mkdirSync`

This method creates a directory in our current working directory. There is also an fs.mkdir method, but we will be using the synchronous method because it will not execute anything else until this method is completed. Here is an example of our method:

fs.mkdirSync('dirName')

`fs.writeFileSync`

This method creates files for us. Just like fs.mkdirSync, this method will not let anything else run until it has finished its process.

fs.writeFileSync('fileName')

You can check for errors with the try..catch statements if your code doesn't seem to work.

try {
    fs.writeFileSync('fileName')
} catch (e){
    console.log(e)
}

Writting Our Node Script

Now that you have a basic knowledge of Node, try writing a script that creates a directory with three files inside it on your own. If you can't, that OK. Here is how to write your script:

First, you need to require the fs module. Then you must use process.argv to set the name of your directory. After that, you need to use the fs.mkdirSync method and the fs.writeFileSync method to create the directory and the files:

const fs = require('fs')
const folderName = process.argv[2] || 'Project'

try {
    fs.mkdirSync(folderName);
    fs.writeFileSync(`${folderName}/index.html`);
    fs.writeFileSync(`${folderName}/style.css`);
    fs.writeFileSync(`${folderName}/app.js`);
} catch (err) {
    console.log(`Error!`);
console.log(err)
}

After writing the code for the script, we can run it like this:

node script.js SecretProject

If we don't give an additional command-line argument, it will automatically set the directory name to Project.

Consclusion

I hope that this post has helped you understand Node.js a little bit more and made you more comfortable with it. Don't be scared to try some new stuff and experiment with all those fs module methods.

Let me know if this has been of help to you through Twitter. You can follow me here.

8 Linux Commands Everyone Should Know

Boyan Iliev — Thu, 06 May 2021 07:25:17 +0000

Introduciton

It's a well-known fact that developers use terminals. And using a terminal is something that everybody should know. It is a good thing to know and do because it will help you in so many ways. It will help you in that job interview, or just in your everyday life. You must at least have the basic knowledge of how to use a terminal. For example how to change directories and view them and how to create a file.

In this post, I am going to show you some of the basic commands and how to get around in a terminal and not be completely lost.

1. `pwd`

pwd means Print Working Directory. It shows you the full path to your current directory. This is used so you don't get lost in all those directories that you have. If you don't know what a directory is, it is pretty much like a folder. It stores other folders and files in it.

pwd
/Users/user1

2. `ls`

The ls stands for List Files. It will show you the files and directories that are in your current directory.

ls
xmen avengers justiceLeague

3. `cd`

Now that you know how to list your files in your working directory and how to print the path to it, you will need to Change Directory. This is done by typing the cd command. You just have to type it and then next to it type the directory you want to visit. But this command only moves forward and backward. This means you can't just type a directory name that is deep inside your files just by typing its name. You have to type the full path to that dir.

cd avengers

If you want to go in multiple dirs, you need to use / after every dir, and then type the directory you want to visit inside the previous one.

cd ironMan/suitMark85

If you want to go back one dir, you need to type cd ... You could mix this with other dir like this:

cd ../../captainAmerica/steveRogers

Or if you just type cd by itself, it will send you to the home directory.

4. `mkdir`

Now that we know how to go to a directory and how to view what's inside them, we need to learn how to make one. It is done through the mkdir command. You just type the command and add the new directory name next to it.

mkdir secretDir

If you want to create multiple dir at once, just type all of them next to each other.

mkdir secretDir1 secretDir2 secretDir3

When doing these kinds of things be sure to use the pwd command so you know in which dir you are so that you don't create the new dirs in the wrong one.

5. `man`

The man command is used to check the manuals of a certain command. When you are not sure what a command does and what to have a detailed look at it, just type the man command and add the other command next to it.

man ls

When you are done viewing the manual, press q so that you can leave the file.

6. `touch`

The touch command creates a file (or multiple). It is almost the same as mkdir, but it's not used for making directories but for files with an extension(.txt, .html, .css ...).

touch index.html style.css app.js

7. `nano`

nano is a text editor using a command-line interface. When you create a file and want to add something small to it, just use nano to add it.

In order to edit a file, just type nano and the file name next to it.

nano index.html

Note that if there isn't such a file in your directory, for example, the index.html one, it will create a new one. So this means that you wouldn't need to use the touch command. bUt it's best to create a file with touch and then go to your code editor and do your coding there. nano is best used for those minor changes like for example a typo.

There are some shortcuts that would be nice for you to know. I would recommend checking this post out on some of those shortcuts.

11 Nano shortcuts that you should know

8. `rm`

Now that we know how to view dirs, create them, create files and edit them, we need to learn how to delete them. Deleting a dir or file is done with the rm command. You definitely want to be careful with this, because if you delete a file or dir, you won't be able to get it back. So if you want to delete a file just type rm and then the file name. Or if you want to remove multiple files, just type their names next to each other

rm index.html style.css app.js

Now if you want to remove a directory you can use rmdir, but this will only remove a dir that is empty. In order to delete a dir that is not empty, use the rm command with the flags -rf. If you don't know what flags are, think of them as extra options for your command. The ls command has lots of flags. I would recommend that you check the manual of the ls command so that you can see all its available flags.

So deleting a directory with other dirs or files inside should be done like this:

rm -rf avengers

Be very careful with these commands because if you delete a file or dir by accident, you won't be able to get them back

If you want to see some examples and a more detailed explanation for some of these commands be sure to check out this video:

Conclusion

Knowing how to use a terminal is crucial. It is. a huge bonus to know at least these commands, which will help you a lot.

I hope that this post has helped you and that you will be a little bit more confident the next time you see a terminal.

Introduction To JavaScript Promises

Boyan Iliev — Tue, 27 Apr 2021 15:23:09 +0000

Introduction

A Promise is an object representing the eventual completion or failure of an async operation. A promise is a returned object to which you attach callbacks, instead of passing callback into a function.

`new Promise`

In order to make a new Promise you need to write new Promise and then it will expect you to pass in a function with two arguments which are functions. The first one represents the resolution of this promise and the second one the rejection of this promise.

const requestPromise = (url) => {
    return new Promise((resolve, rejects) => {
        const delay = Math.floor(Math.random() * (4500)) + 500;
        setTimeout(() => {
            if(delay > 4000) {
                reject('Connection Timeout :(')
            } else {
                resolve(`Here is your fake data from ${url}`)
            }
        }, delay)
    })
}

Now in order to call the function multiple times with different URLs, we need to use the then method. The then method returns data if the async request is returned. But if the operation is failed, we must use the catch method. This is how it should look like:

requestPromise('reddit.com/api/chicken/page1')
    .then(() => {
        console.log('PAGE1 WORKED!!');
        requestPromise('reddit.com/api/chicken/page2')
            .then(() => {
                console.log('PAGE2 WORKED!!');
                requestPromise('reddit.com/api/chicken/page3')
                    .then(() => {
                        console.log('PAGE3 WORKED!!');
                    })
                    .catch(() => {
                        console.log('PAGE3 ERROR!!');
                    })
                    .catch(() => {
                        console.log('PAGE2 ERROR!!');
                    })
            })
            .catch(() => {
                console.log('PAGE1 ERROR!!');
            })
    })

As you can notice this is very long and repetitive. We can make it shorter and cleaner by using only one catch. In order for this to work, we need to return a promise from within our callback.

requestPromise('reddit.com/api/chicken/page1')
    .then(() => {
      console.log('PAGE1 WORKED!!');
      return requestPromise('reddit.com/api/chicken/page2')
    })
    .then(() => {
    console.log('PAGE2 WORKED!!');
    return requestPromise('reddit.com/api/chicken/page3')
    })
    .then(() => {
        console.log('PAGE3 WORKED!!');
    })
    .catch(() => {
        console.log('REQUEST FAILED!');
    })

Promises are resolved and rejected with values.

requestPromise('reddit.com/api/chicken/page1')
    .then((data) => {
      console.log('PAGE1 WORKED!!');
        console.log(data);           
      return requestPromise('reddit.com/api/chicken/page2')
    })
    .catch((err) => {
        console.log('REQUEST FAILED!');
        console.log(err);
    })


// IF IT WORKS IT WILL PRINT:
// PAGE 1 WORKED!!
// Here is your fake data from reddit.com/api/chicken/page1

// IF IT DOESN'T WORK:
// REQUEST FAILED!
// Connection Timeout :(

This is coming from a function.

`async` Functions

A newer and cleaner syntax for working with async code! It's still the same thing as a promise, but it's "prettier". There are two keywords that you need to know.

`async` keyword

1. Async functions always return a promise

2. If the function returns a value. the promise will be resolved with that value.

3. If the function throws an exception, the promise will be rejected.

async function hello(){   
}
//-> returns a promise even if empty


const sing = async () => {  
}
// -> we can use async arrow functions

Here are some examples:

const login = async (username, password) => {
    if(!username || !password) 
    throw 'Missing Credentials'
    if(password === 'password') 
    return 'Welcome!'
    throw 'Invalid Password'
}

login('demonslayer64')
    .then(msg => {
        console.log('LOGGED IN!')
        console.log(msg)
    })
    .catch(err => {
        console.log('ERROR!')
        console.log(err)
    })

//Returns:
ERROR!
Missing Credentials

login('demonslayer64', 'slayerdemon46')
    .then(msg => {
        console.log('LOGGED IN!')
        console.log(msg)
    })
    .catch(err => {
        console.log('ERROR!')
        console.log(err)
    })

//Returns:
ERROR!
Invalid Password

login('demonslayer64', 'password')
    .then(msg => {
        console.log('LOGGED IN!')
        console.log(msg)
    })
    .catch(err => {
        console.log('ERROR!')
        console.log(err)
    })

//Returns:
LOGGED IN!
WELCOME!

`await` keyword

1. The `await` keyword is used inside of functions declared with async.

2. `await` will pause the execution of the function, waiting for a promise to be resolved.

Here is an example with our function from earlier:

async function makeTwoRequests() {
    let data1 = await requestPromise('/page1');
    console.log(data1);
}

//Returns
<- >Promise {<pending>}
Here is your fake data from /page1

Conclusion

This is pretty much the basics of JavaScript promises. Let me know if this has helped you at all. Any feedback will be greatly appreciated!

How To Write A Good README File

Boyan Iliev — Thu, 22 Apr 2021 07:20:31 +0000

Introduction

If you're familiar with GitHub, then you know what a README file is. But if you don't know what it is, you can think of it as the introduction to your repository. It's very helpful that while looking at someone's repo you can just scroll down to their README file and have a look at what their project is all about.

It's crucial that your project gets introduced properly because if it isn't, the chances of someone pressing on the repo are low. That's why having a good README file shouldn't be overlooked and you should spend a good amount of your time on it.

In this post, I am going to share some tips with you about how you can improve your README file, and hopefully, it can help you with your repos.

Choose an easy name for your project

Before we dive into the README.md file let's quickly mention the name of the project itself.

When people search for different projects, the last thing they will want to see is:

"cool-javascript-game-about-colors-and-rgb-colors-and-even-more-colors"

Now I know that this example is a little over-exaggerated, but you get the point. No one is going to press on a repo with such a long name. It's best if you try to have a simple and short name for your project that gets right to the point.

So for the example, above we could just use:

"javascript-color-game"

A name like this has a higher chance of getting clicked on and taken a look at. So make sure that your repos name is simple and straight to the point.

Give a descriptive summary of your project

Now that we have the repo name cleared out, let's focus on the README.md file!

When someone visits your repo they can scroll down and read the README file. It should have a description of what your project is. But you wouldn't want it to be too short. And neither should it be too long. Now if it's a very big project then by all means you should give a proper explanation of what it is and what it does. But in most cases, it should be a well-written and structured text. There are five steps that I would recommend you follow while writing your README file.

Step #1

Write a quick introduction to what the project is about. For example, if you made a to-do list using JavaScript, write about that. But don't get into too much depth.

Step #2

Write what your code uses. For example HTML, CSS and JavaScript.

Step #3

Write a few more details about the project. Write things that would make you take interest in the project.

Step #4

Write something about yourself. You could say where you work, what your goals are, or share some of your previous projects. It's okay to share what you have created or what you are trying to accomplish

Step #5

And finally, use images. Show the reader what exactly the project is. Just by reading about it isn't going to get their full interest. But by seeing an image of it, they will be more likely to get more into it.

Conclusion

And these are some tips about writing a good README file. It's very important that you get comfortable writing these things. It could help you change the level of interaction your GitHub repo gets.

I hope that this post has helped you in improving your README files and I hope to see some great repos with great README files out on GitHub soon.

5 Tips On How To Stay Motivated And Productive As A Developer

Boyan Iliev — Tue, 13 Apr 2021 08:00:15 +0000

Introduction

Whether you are a senior developer, or you have just started getting into code, there comes a time when you start losing motivation. It is normal to lose motivation and that lack of motivation can sometimes stick for a long time. Unfortunately, there can be hundreds of reasons that can make you lose motivation. For example, you can't get your code to run the way you want it to. This happens to a lot of us and it can be hard to get back to being productive.

In this post, I would like to share with you some tips that you can try to help you stay motivated or get that motivation back.

Stay off your phone

It's no secret that our mobile devices are very addictive. Of course, some people can't afford to stay off their phone because it is connected with their work. But for most of us, it is a big waste of time. When we surf the internet we can really lose motivation. Spending way too much time on social media, YouTube, or Netflix can make us lose motivation and even make us depressed. This is why when you start feeling down and feel that you are getting a little unproductive, just leave your phone at the other end of the room. Or just try to stay off of it for as long as you can.

I noticed that this really helped me to be more concentrated and made me enjoy much more the time I spent coding.

Set mini-goals for you to complete

If you don't have a daily to-do list, I highly recommend that you make one. You can add in it all the stuff that you want to achieve the next day. So the night before you go to bed make a list and add a few small tasks to it. Some that will be helpful for you, but at the same time not that hard. When you finish one of those tasks and see the progress that you've done when crossing it out from your list will give you a boost of motivation.

Also, I would recommend that you try to complete the hardest tasks first. I personally prefer to get them out of the way first and then do the other stuff.

Wake up properly

The worst thing to do when you wake up is to get straight away on your phone. You've just slept 7-10 hours and you're body is dehydrated and your brain is confused. And it's not the best idea for your eyes to be staring at a screen before they have even opened up yet.

I would recommend that you lay in bed for 5 minutes so that you can fully wake up. Then go drink as much water as you can so that you can hydrate after a night of sleeping. Try to stay off any screens for as long as you can in the morning so that your body and mind can get ready for the day. You will feel much more energetic and will have all the power to do all of the stuff that you have to.

Surround yourself with tech-related stuff

Try to make the stuff you do during the day as connected to web development as possible. Seeing what other people create and the knowledge their share on all the different web dev community websites really makes you feel like you are a part of something big and lift you up. Try to chat with as many developers as you can. We have such an amazing community that just by getting surrounded by it can give you the motivation you need. Some of these sites are the DevDojo website and DEV. Also, another cool thing is the daily.dev extension.

Try sharing some of your knowledge or share a project your working on. See all the feedback you get. You can learn so many things that way. Or you can help someone else learn something. It's really fun and it can really boost your motivation and productivity when you see other developers that have the same interests as you.

And finally:

Look back at the things you have accomplished

When you think that you are stuck and can't get anywhere, for example, if you don't know how to get your code to run properly, just sit for a moment and think of how you used to be when you started programming. Think of all the progress that you have made in the last couple of months. This can boost your motivation and productivity by seeing how far you've come.

Conclusion

These things have really helped me stay motivated and productive. I kept losing motivation because I had to study for my exams and then I couldn't get motivated to code. When I started using these tips, I became more motivated than I have ever been.

I hope that this post has helped you get more productive and motivated!

DOM Event Listeners

Boyan Iliev — Mon, 05 Apr 2021 21:22:16 +0000

JavaScript is probably one of the most reliable and most powerful programming languages. But what takes JS to the next level is the DOM. The DOM stands for Document Object Model. In other words, with the DOM you can change the documents structure, style, and content. And with JavaScript doing that is very easy. Most of the websites that you use in your everyday life use JS. And they manipulate the DOM through it.

In this post, I am going to talk about the different ways you can add DOM Event Listeners. They allow JavaScript to register different event handlers on elements in an HTML document. Events are normally used in combination with functions, and the function will not be executed before the event occurs (such as when a user clicks a button).

Let's start with our first type of event.

Inline Events

This is not an ideal way to add Event listeners. Here the event is specified with a function as an attribute to the HTML tag. So let's say for example we want to add an event to our h1 tag that console logs a Hello World! when pressed. We just have to add an onclick event. This adds an event when an element is clicked. This is how it would look like:

<h1 onclick="console.log('Hello World!')">Click me</h1>

If you want something more fun, you can add a function to be executed when pressed. So let's create our greet() function.

function greet(){
    console.log('Hello World!');
}

Now let's add it to our h1

<h1 onclick="greet()">Click me</h1>

There are better ways to add an event listener. Again, this isn't an ideal way, because it can be overwritten. But it's good to keep in mind. You can also add the onclick event through JS.

First, you have to make a function, because the code always has to be in a function in order to work!

Now we have to select our h1 tag and save it to a variable.

let h1 = document.querySelector('h1');

Now to add the onclick event to our h1 variable, we have to write the variable, then add the event, and finally pass in the function that we want to be executed.

h1.onclick = greet;

As you can notice, we don't need to add parentheses(). Now whenever we press our h1, we will get a console log that says 'Hello World!'.

addEventListener

This is the best way to use event listeners. It is more diverse and it's easier to use once you get more used to it.

You just have to select the element to which we want to add an event listener, then we add the addEventListener to it and in its parenthesis, we add two arguments. The first argument is the type of the event, and the second one is the function that we want to run.

Let's make our greet function run when our h1 tag is clicked. This is how it should look like:

h1.addEventListener('click', greet);

As you can see, just like the inline event we didn't need to add parenthesis to our function. We could also create a function inside the event listener.

h1.addEventListener('click', function(){
    console.log('STOP CLICKING ME!')
})

If you have an event that only needs to be triggered when pressed only by one element, then add the function in the event listener. There won't be a need to make a specific function outside of it that you will need to call again in another event.

addEventListener can run two functions at the same time, while onclick gets overwritten by the last function. So if we make a function called name that console logs our name, and then a hello function that console logs the string "Hello" we can call them both at the same time.

h1.addEventListener('click', hello);
h1.addEventListener('click', name);

After we press the h1, we will see this in our console:

-> "Hello"
-> "DevDojo"

addEventListener has more options as well. For example, we can run the event only once, and then actually make it remove the event listener by itself. This is done pretty easily. We just have to add a third argument. We cover it in curly braces. In those curly braces, we add the keyword once and then put a colon and put the boolean true.

h1.addEventListener('click', greet, { once: true });

This is one of the many options addEventListener has.

Conclusion

I would recommend using addEventListener because it is more secure and it is much more diverse. This is what almost everyone uses. But it's good to know the other ways you can add event listeners.

I hope this post has helped you and I would love to hear some feedback from you. Make sure to follow me on Twitter and get in touch with me.

6 YouTube Channels About Web Development

Boyan Iliev — Fri, 26 Mar 2021 14:35:38 +0000

Introduction

Everyone watches YouTube. You probably spend many hours every week. I mean how else are you gonna catch up with all those cat videos. But YouTube isn't just about cat vids and celebrity drama. There are some awesome and helpful Web-Dev channels out there. Some people may be aware that there are such channels, but some people may not be.

I would like to share some of my favorite channels that help me out and I just enjoy watching daily.

Traversy Media

Channel Description:

"Traversy Media features the best online web development and programming tutorials for all of the latest web technologies including Node.js, Angular 2, React.js, PHP, Rails, HTML, CSS and much more"

I personally really love this channel, because of how nicely done their tutorials are. I highly recommend that you go and have a look at some of their videos.

DevDojo

Channel Description:

"The Dev Dojo is a resource to learn all things web development and web design. Learn on your lunch break or wake up and enjoy a cup of coffee with us to learn something new."

DevDojo really helped me out while I was getting into web development. And the DevDojo website helped me even more. There are so many educating posts on all the different technologies. DevDojos creator is Tony Lea and he creates some awesome stuff. One of the stuff that he has created is tails. It is a drag'n'drop page creator built for TailwindCSS. I love creating some websites with tails and using them. Also, another cool thing about the website is that if you write a post on it, your post could get picked as one of the posts of the week and you could win 20$. So be sure to check out both the DevDojo channel and the DevDojo website.

I would love it if Tony could bring back Daily Developer Thoughts. In this series he talks about some really interesting topics and I really enjoyed them. I hope to see them back again soon.

Florin Pop

Channel Description:

"Hello 👋, Florin here!

### I love to create Coding Tutorials and to Code Live, so you'll see a lot of those on this channel!

Together we're going to learn a lot about web development (HTML, CSS, JavaScript, ReactJS, NodeJS, Animations, Components, APIs and all the cool stuff 😎).

I also love challenges. Here are a few that #### I completed so far:

- 100 Projects in 100 Days

- 31 Videos in 31 Days

- Conquered the Entire freeCodeCamp Curriculum in a Month (while recording everything)

- 7 Days 7 Websites

More to come! 😃

🔔 Subscribe and stay tuned!"

Florin is one of the coolest YouTubers out there. You definitely need to check some of the challenges that he does and maybe try to do it yourself. In my opinion, he is one of the best web-dev YouTubers out right now.

Bobby Iliev

Channel Description:

"I am a professional System Administrator with a demonstrated history of working in the internet industry."

This is the smallest channel on this list, but it is one of the most helpful ones. Bobby does some really cool tutorials about Docker, Laravel, Nginx, Linux, and he has some courses about Introduction to Bash scripting, Docker Tips, and Building a blog with Laravel and Voyager.

Be sure to check it out and subscribe to his channel.

Code with Ania Kubów

Channel Description:

"Hello everyone. This channel is run by Ania Kubow. In this channel, I will be teaching you JavaScript, React, HTML, CSS, React-native, Node.js and so much more!

A little bit about me:

My background is in the financial markets, where I worked as a derivates broker out of University. After starting my first startup I became obsessed with coding and knew it was my calling. I am currently the proud owner of this YouTube channel where I have no shame in teaching people hard concepts through the use of diagrams and cute drawings. My aim is to teach you how to code, not to care about how silly I look doing it.

PLN from UAE then SGP now LDN 🇵🇱🇦🇪🇸🇬🇬🇧

Please Like, Comment your thoughts, Share and Subscribe for upcoming releases, and don’t forget to press the bell icon.

For contact:

Twitter: @ania_kubow

Instagram: @aniakubow"

Ania is an awesome JavaScript developer. She makes some awesome videos and tutorials on all sorts of different stuff that you can create. She creates so many fun little projects. Be sure to definitely go and check out her channel.

DigitalOcean

Channel Description:

"DigitalOcean provides the easiest cloud platform to deploy, manage, and scale applications of any size, removing infrastructure friction and providing predictability so developers and their teams can spend more time building better software."

DigitalOcean is a cloud infrastructure provider, but their community is awesome. They do some awesome tutorials, and they have a really interesting 1-hour Tech Talk in which they talk about what's new in the dev world. Be sure to go check their channel out as well.

Conclusion

YouTube is amazing but unfortunately, sometimes it's hard to find channels that could help you out. All of these channels are the ones that I spend the most time on. They help me learn new stuff and I generally enjoy watching what all these creators share with us. Be sure to subscribe to all of them and let them know to keep up the good work.

Array Methods And Callbacks In Javascript

Boyan Iliev — Wed, 03 Mar 2021 11:13:05 +0000

Introduction

One of the most important things in JavaScript is arrays. 99% of the time there is going to be an array in someone's JS script. And if you take a look into someone else's code, you will likely see them use an array method or callbacks.

Callbacks are functions that get passed on to another function as an argument.

These methods are built-in functions in JavaScript that you can use for your array.

In this post, we are going to talk about some of these callbacks and array methods and how to use them.

`forEach()`

forEach() used to be a lot more used before the for...of loop came out. This method allows us to run a function that runs our code once per item in some array.

Let's first create our array. We are going to call it numbers.

let numbers = [1, 2, 3, 4, 5];

And now let's use the forEach() method and print out all of the numbers in our array.

This is what you will most commonly see. Defining a function inline.

numbers.forEach(function (num){
    console.log(num);
})

This is very famous and is mainly used this way. We could pass in a name function that we have already created, but most of the time we will pass in a function that exists only for this.

If you want to pass a function that already exists, it should look something like this:

function print(el){
    console.log(el);
}

numbers.forEach(print);

This is pretty uncommon. You will hardly see this in someone else's code.

`map()`

The map() function creates a new array with the results of calling a callback on every element of the array. Let's create our first array.

const heroes = ['batman', 'spider-man', 'superman'];

Now let's use the map() method to create our new array called superHeroes and use the toUpperCase method.

The toUpperCasemethod returns the value to uppercase.

const superHeroes = heroes.map(function (t){
     return t.toUpperCase();
})

Now let's call our new array and see the results.

superHeroes

<- (3) ["BATMAN", "SPIDER-MAN", "SUPERMAN"]

We just made a new array, in which all the values are in uppercase. You can do so much more with this method. Give it a try and see how much fun stuff you can do with it.

Arrow `=>`

This method is probably one of the most useful ones. This is a newer syntax for defining functions. It allows us to write functions without actually having to write the keyword function. How cool is that!

They are super useful for when you have a short function to write for a one-time thing.

Arrow functions are used to create function expressions. But they can only be created from a variable. This is how it looks like:

const sum = (x, y) =>{
    return x + y;
}

So now to execute the function, it will be the same as executing any other function. That's because it is just like any other function, but with a nicer and cleaner syntax.

sum(5, 5);

<- 10

If you want to write a function with no arguments, then you just have to add the empty parenthesis.

const  greet = () =>{
    return 'Hello World!';
}

And we can call this function back like any other function.

greet();

<- "Hello World!"

If you have a function with only one argument, then you can write it without parenthesis.

const square = x =>{
    return x * x;
}

And then you have to call it back the same way as you usually do.

square(5);

<- 25

So remember, if you have two or more arguments - use parenthesis. If you have zero arguments - use parenthesis again. But if you have only one argument - you don't need to use parenthesis.

We can also make our arrow function even shorter with implicit returns. What this means is that we can get rid of the return keyword. We just have to turn our curly braces into parenthesis. So let's make our last function (square) a little bit shorter.

const square = x =>(
    x * x
);

As you can see we got rid of the return keyword and it got a little bit shorter. It's very important to know that we can only do this if there is only one line of code with a single value.

If our function is a super short one, we can have it all on one line. We just have to remove the parenthesis. This is how it should look.

const square = x => x * x

As you can see the arrow function makes it so much shorter and cleaner. This is very helpful for those short functions that you need in your code.

`filter()`

The filter() function creates a new array with all of the elements that the test implemented by the provided function. Let's create an array with some numbers in it.

const numbers = [1, 2, 3, 4, 5];

Let's use the arrow method and return the numbers that are greater than 2 while using the filter() method.

const newNumbers = numbers.filter(x =>{
    return x > 2;
})

Now if we call the newNumbers array that we just created, it's going to give us back all of the numbers that are greater than 2.

newNumbers

<- (3) [3, 4, 5]

every/some

These two methods are put together because they are very similar. The every method tests whether all elements in the array pass the provided function. It returns a Boolean value. As for the some method, it does the same as every, but it returns true if any of the array elements pass the test function.

These two methods always return true or false. Unlike the previous methods- map() and filter(), which return a new array.

Let's create a new array. It is going to contain the result of an exam.

const results = [92, 85, 78, 96, 77, 71, 89];

Now let's check if every student passes the exam. In order to pass it, they must have a score over 70.

results.every(score => score > 70);

<- true

We get true because all of the elements in the array are over 70. But now if we change the score of which you have to have to pass the exam to 75, we will get false.

The some method will say true if any of the elements in the array pass the function. So this means if we change the minimum score to be 75, we are still going to get true.

result.some(score => score < 75);

<- true

And if none of the array elements pass, then we will get false.

Conclusion

These methods may seem intimidating and scary at first, or probably a bit useless, but the more you use them and get comfortable with them, the more awesome stuff you can create. And you can create them much easier. You just have to keep on practicing and applying these methods to your day-to-day coding sessions.

I hope that this post has helped. I am currently learning all this stuff at the moment and I wanted to share them with the world. Any feedback will be greatly appreciated!

Forem: Boyan Iliev

What is HTTP, HTTPS, and SSL

Introduction

What is HTTP?

What is HTTPS?

SSL

Let's Encrypt

Conclusion

How to get the size of a directory in Linux

Introduction

The du command

Conclusion

How to Replace All Occurrences of a String

Introduction

replaceAll() Method

Conclusion

Introduction To MongoDB and How To Use It

Introduction

Installing MongoDB

Commands

Show Current Database

Show All Databases

Switching and Creating Databases

Dropping a Database

Creating and Viewing Collections

Inserting Rows

Viewing Rows

Conclusion

How To Write Your First Node.js Script

Introduction

Getting Started

How To Run Node Files

process & argv

fs Module

fs.mkdirSync

fs.writeFileSync

Writting Our Node Script

Consclusion

8 Linux Commands Everyone Should Know

Introduciton

1. pwd

2. ls

3. cd

4. mkdir

5. man

6. touch

7. nano

8. rm

Conclusion

Introduction To JavaScript Promises

Introduction

new Promise

async Functions

async keyword

1. Async functions always return a promise

2. If the function returns a value. the promise will be resolved with that value.

3. If the function throws an exception, the promise will be rejected.

await keyword

1. The await keyword is used inside of functions declared with async.

2. await will pause the execution of the function, waiting for a promise to be resolved.

Conclusion

How To Write A Good README File

Introduction

Choose an easy name for your project

Give a descriptive summary of your project

Step #1

Step #2

Step #3

Step #4

Step #5

Conclusion

5 Tips On How To Stay Motivated And Productive As A Developer

Introduction

Stay off your phone

Set mini-goals for you to complete

Wake up properly

Surround yourself with tech-related stuff

Look back at the things you have accomplished

Conclusion

DOM Event Listeners

What is `HTTP`?

What is `HTTPS`?

`SSL`

The `du` command

`replaceAll()` Method

`process` & `argv`

`fs` Module

`fs.mkdirSync`

`fs.writeFileSync`

1. `pwd`

2. `ls`

3. `cd`

4. `mkdir`

5. `man`

6. `touch`

7. `nano`

8. `rm`

`new Promise`

`async` Functions

`async` keyword

`await` keyword

1. The `await` keyword is used inside of functions declared with async.

2. `await` will pause the execution of the function, waiting for a promise to be resolved.

`forEach()`

`map()`

Arrow `=>`

`filter()`