Forem: Fakorede Damilola

Git flow and github flow

Fakorede Damilola — Fri, 09 Sep 2022 10:39:00 +0000

Recently I had the opportunity to learn a concept, that well, looked quite scary whenever I was asked in an interview.

The interviewer gives a very strong face with no smile at all and asks.. what is git flow.
Me: *sweating already :) *

So after going through git and GitHub flow, I want to share what I have learned, and help you realize why it is quite an important concept to be familiar with.

Git flow and GitHub flow are steps you take when building software or app. This is quite common in a company setting. Since in a company, you will be working with other developers, and you have a goal, a timeline, and more often than none, a project manager bugging you :):).

So in a situation where we have multiple developers working on a single product at different times of the day. There can be errors that can occur if this is not properly handled

So how does this flow help you?

As I said, I like to think of git and git flow as processes that define specific ways to work with other developers and make the process easy

The GitHub flow actually looks and feels quite simpler to use than the git flow but I am going to talk about the two and show you how it works

GIT FLOW

Here is how the git flow works.

There is always a branch by default called main(or master) where the live/production code stays (by convention). One file goes missing in that master branch, and the site might come crashing down. So due to the peculiarity and the sensitivity, you usually don't touch this branch
Another branch is created called the develop branch (by convention) which should contain all the code from main ( basically checked out from main), new changes are added to this branch from the feature branch
The feature branch contains the different features being worked on. This can be multiple branches with different names, a naming system for example will be feature/notification, feature/api, feature, etc
This honestly can be different anyhow I just want to give you a feel of how the feature branch works

When a feature branch has been completed and/or tested, it is then merged to the develop branch, since this is where the code currently being worked on stays

After a few merges to the develop branch (from the feature branches) and the project manager thinks it is time to push this to the master branch for others to see the beautiful updates, a release branch is fork(Git fork operation will create a completely new copy of the target repository) from develop

A release branch will mean all the feature up to that point is ready to move to live and no new feature will be added to that release branch

Once the release branch has been tested (or whatever trick and hoops it is made to pass through), and it is ready to be released, the release branch gets merged into the main branch and
tagged with a version number.
In addition, it should be merged back to the develop branch in case there are any differences or critical changes made to the release branch. ( just to be safe)

Maintenance/hotfixes branches are used to patch production releases, and this is forked directly from the main branch. After which it is merged back to the main branch and the develop branch (to keep it in sync)

Now let's do a quick recap of what is needed for the git flow

1) main (master) branch: This holds the production code

2) develop branch: This is created from the main branch

3) feature branch: these are created from the develop branch (e.g feat/notification, feature/buy, etc)

4) release branch: The branch that will be sent off to the main branch. forked from develop

5) hotfix branch: crated from the main branch, used to fix production/ emergency error

honestly, that is a whole lot...let's talk about the GitHub flow

GitHub flow

The GitHub flow uses two branches

The main (or master) branch is where the live/ production code stays (similar to the git flow)
The feature branch which is every other branch, is where developers work from, which are pulled off from the main branch. Once a feature is completed, a pull request (PR) is opened to the main branch, and after proper testing, etc. It is merged with the main branch (production)

That is pretty simple and straight forward right :):)

Depending on the culture of the company, they can decide to use git or GitHub flow, but honestly, I prefer the latter.

Getting familiar with this concept might require working with it on your projects. Since quite many companies will want to use these flows, it is better that you familiarize yourself with them.

In this article, I hope you have been able to learn the difference between git flow and GitHub flow, and how they work.

Thank you

Common Questions in Regular Expression

Fakorede Damilola — Wed, 10 Feb 2021 09:47:05 +0000

In my last article introduction to regular expression, I explained what regular expression is, some of the methods involved and so on. In this article I will be going through a few regular expression questions that should help you get comfortable with regex. Note that this questions might not be the interview questions you are expecting but I hope it gives you an edge when it comes to solving questions in regular expressions.
Like the famous saying in programming you can do one thing in a thousand different ways and I, for one will definitely use just one of this different ways. If you feel there is a better way I should have solved a particular problem, let me know in the comment section below.
Let's get down to business.

Email Validation :
Create a function that will test if a given input is an email or not. Note that the emails can come is different formats for example devto123@gmail.com, dev.to@example.com and so on. Using the gmail format, that is only letters, number, and periods are allowed. Return a boolean

Solution
From the question above, we are testing to see if an input is an email or not and it is pretty obvious that we will end up using regex, that is the test method.
Basically we have to write a regex that matches different formats of email. When solving questions like this, it is better you start from ground zero. What do you know about the question / what were we told. Here is a few things we know about emails
1. It should start with an alphanumeric character and casing does not matter.
2. A dot can be used somewhere in the string but not necessarily. If it is then it must be immediately followed by one or more characters.
3. There must be an @ after which a few other characters must follow.
4. It must end with a .com or .co and so on.
This might look like a really long process for just one question and it actually is. I won't recommend doing this in an examination or interview. But when you are at your comfort, this can really help you understand the question especially for beginners. Although you don't have to write it out like I did but then it won't hurt.
So now that we know what the mail looks like, let's move on and see how this can help us.
1. Emails must start with letters and casing doesn't matter. In regex, must start is the ^ and we can easily match alphanumeric characters with \w ===[a-zA-Z1-9_]. But there is a problem with this, it should not allow underscore. So we have to write it out, that is [a-zA-Z1-9]. In order to match more than one character, we use the +. All together /^[a-zA-Z1-9]+/.
2. A period can be somewhere in the string but not necessarily. In regex, a period is a wild card. Making it a normal character, we need the backslash to escape it. To make it optionally we use ?. At this point, you have this /^[a-zA-Z1-9]+\.?/. If there is a period, it should be followed by one or more string, so basically repeating step one. /^[a-zA-Z1-9]+\.?[a-zA-Z1-9]+/.
3. @ should follow. This is pretty straightforward /^[a-zA-Z1-9]+\.?[a-zA-Z1-9]+@/. After which a few letters should follow, that is /^[a-zA-Z1-9]+\.?[a-zA-Z1-9]+@[a-zA-Z1-9]{3,}/.
4. Must end with .com, .ca and so on. /(\.\w{2,3})$/. The parenthesis is used to just group regex together. Summing it all up we have this.
```
function validateEmail(str){
let regex = /^[a-zA-Z1-9]+\.?[a-zA-Z1-9]+@[a-zA-Z1-9]{3,}(\.[a-zA-Z0-9]{2,3})$/;
return regex.test(str)
}
```
I know this is pretty long, and I won't be doing this for other questions. I just wanted to show you a better way to approach questions especially algorithm. I hope this will help you out when solving other questions.
Date validation :
Create a function to test if a string is a valid date format. The format is DD-MM-YYYY or D-M-YY. Note that the separator can be :,_,- or /.

Solution
Like what we did above, splitting this question will make it easier.
- DD / D : From our calendar, the days are always less than or equal to 31. We are basically matching 01-31 or 1-31. /0?[0-9]/ will be used to match numbers less than 10 while making the 0 optionally, /[12][0-9]/ will match from 10-29 (remember [12] is a character set and it means either 1 or 2) and /3[01]/ since we can't have more than 31 days. All together /(0?[0-9]|[12][0-9]|3[01])/. Remember that | stands for or
- MM / M : 12 months in the calendar, matching 0-12 or 01-12. Basically since we cannot have more than 12 months, we can't match it all at once. So /0?[0-9]/ and /1[0-2]/. Altogether /(0?[0-9])|(1[0-2])/.
- YY / YYYY : Since this has no specific number it is pretty straightforward. Just remember 4 or 2 digits. That is /[0-9]{2}|[0-9]{4}/
- Separator : Piece of cake right /[:\/_-]/. All together we have this.
```
function validateDate(str){
let regex = /^(0?[0-9]|[12][0-9]|3[01])[:\/_-](0?[0-9])|(1[0-2])[:\/_-][0-9]{2}?[0-9]{2}$/
return regex.test(str)
}
```
Vowel count:
Return the number of vowels in this string

Solution
Try it your self‼️‼️‼️
There is quite a number of ways you can do this, a for loop will work just fine but right now you have the power of regex so why not try that.
The closest thing you can use to actually get quantity in regex is the match method(returns an array) and then you can easily call a .length on the array returned.
```
function vowel(str){
return str.match(/[aeiou]/ig).length
}
```
Don't forget the i and g flag. Piece of cake right.
Palindrome :
Create a function to test if a string is a palindrome. Note that special characters, spaces and so on should not be considered when testing the string for example, race_-+C ar and m-.um are both palindrome.

Solution
Before we move forward we need to understand what a palindrome is. A palindrome is basically a string that when reversed spells out the same thing. For example racecar. If there was a special character or space in the string above it might not be a palindrome, for example ra_-ce car != rac ec-_ar. That is why the question says all non alphanumeric character should be removed before testing.
Even though the question says we should test if a string is a palindrome, it is pretty obvious you cannot use any method from regex. I mean what would you be matching or testing against. So that is not an option.
The first thing we can do know is to remove all non alphanumeric character. Regex could come in pretty handy here with the replace method.
```
let str="ra c e-_.c;+-a.?).;#r"
str.replace(/[\W_]/g,"") //\W matches All non alphanumeric character expect the underscore, which we also need to match, then replace them.
```
With this we should have the exact string we are suppose to test alone without the other characters.
Since a palindrome is basically the reverse of the actual string, we can do just that. Convert the string to an array with the split method and call the reverse method on that array. Then simply join the array back with the join method and you have the reverse which you can easily test to see if they are the same.
```
function palindrome(str){
let string = str.replace(/[\W_]/g,"")
let array = string.split("")
let str2 = array.reverse()
let string2 = str.join("")
return string === string2 ? true :false
}
//shorter version
function palindrome(str){
return str.replace(/[\W_]/g,"")
.split("")
.reverse()
.join("") ? true : false
}
```
Hexadecimal colors :
Create a function to test if the given string is an hexadecimal color for example #333, #333333

Solution
So we are back to testing and at this point you should know that we will be using regex. Can you give it a try.
Here is what we know about hexadecimal colors. It can be three(3) or six(6) characters and it must be between 0-9 or A-F that is, sixteen different characters.
An hexadecimal must start with an # and can be followed by A-F or 0-9 three times so basically /^#([A-Fa-f0-9]){3}/. But it can also be six alphanumeric characters. That is /^#([A-Fa-f0-9]){6}/. Since it is three or six together we can do this
```
function validateHexadecimal(str){
let regex = /^#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6})$/
return regex.test(str)
}
```
Spinal case :
Create a function to convert a string to a spinal case. For example This Is A JavaScript_String = this-is-a-javascript-string, thisIsJavascript = this-is-javascript

Solution
Try it out first.
This question is in a way tricky because the strings can come in very different formats. Basically the task is to add an hyphen between words. If this sentences are always separated with _ or - it will be pretty easy. But it can also be camelCase like the example above. In situations like this, you will have to split it at all occurrence of a capital letter and then add the hyphen. Note that the string returned should always be in lowercase.
Now that we know what should and shouldn't be there, we can move forward.
- The easiest thing to do is to remove all alphanumeric characters first. That is str.replace(/[\W_]/g,"").
- Now that all the special characters are gone, we can easily split the words either with spaces or with capital letters. That is str.split(/(?=[A-Z])|\s/). So basically, when going through the string, it is either it looks ahead to see if the next letter is in uppercase or it checks if there is a space and splits at that point.
- With the array that was returned from the split method, a map method can be called to convert all to lowercase and then join with an hypen. Summing it altogether we have this
```
function spinalCase(str){
str=str.replace(/\W_/g,"")
return str.split( /(?=[A-Z])|\s/)
.map(str=>str.toLowerCase())
.join("-")
}
```
Check HTML :
Create a function to test if the given string is an HTML or not. Examples includes ,<> .

Solution
An HTML string will always have an opening and closing parenthesis with zero or more string, but a backslash is optional
```
function validateHTML(str){
let regex = /<([A-Za-z]*) *\/?>/
return regex.test(str)
}
```
Breaking this down, we are basically saying
- It should start with <
- Zero or more characters [A-Za-z]
- Zero or more spaces " *"
- An optional backslash and the final closing tag.
Password validator :
Create a function to check if a given password follows this given format. Above 8 characters, at least a lowercase character, an uppercase character, a digit and a special character.

Solution
A password validator can be tricky. But let's start from the easier part, which should be making sure the password is 8 characters or above.
```
/[\w\W]{8,}/ //\w to match alphanumeric and underscore and \W to match special character 
```
Now we need to make sure that at least one of each character actually appears in the password. We have to do this for each of the different characters but it is basically the same thing, so I will explain just one of them.
Uppercase:
To match for uppercase, we need to use a look ahead (?=...). A look ahead makes sure that a character is followed by another specific character and basically returns true or false based on that. That is /^(?=.*\[A-Z])/. It goes through the string and checks to see if zero or more characters (the period is a wild card used to match any character) are followed by an uppercase character. It uses asterisk because it is possible the uppercase is the first character.
So we do this for all the other types of characters we want to make sure occurs at least once in the string.
```
/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\W)/
```
If one or more of this returns false, for example a digit cannot be found it results to false.
But if one or more of this occur in the string, we can then go ahead to match for the quantity. That is, the number of characters in the string. putting it altogether
```
function validatePassword(str){
let regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\W)[\w\W]{8,}$/
return regex.test(str)
}
```

So we have come to the end of this rather long article, I really hope you learnt something and you are more comfortable with regular expression now. With this, algorithms and regex
should to a level pose no threat to you again. Just follow the patterns we used to solve some of this questions and you will be fine. If you have any suggestions or questions let me know in the comment section.
If you enjoyed this, smash that like button and share it with your friends. You can also follow me on Twitter @fakoredeDami.
Thank you for reading.

Introduction to Regular Expression in JavaScript

Fakorede Damilola — Sun, 31 Jan 2021 02:46:58 +0000

Have you ever been in a situation in school or college where your teacher gives you two to three different solutions on how to solve particular problem based on how it is structured, he/she will be like "if the question has an even number use solution a, if it has a prime number use solution c" and so on. Then after dropping about three different approaches, he then drops a fourth one and calls it the almighty formula( no matter the type of number, this solution will solve everything). This happened to me quite a number of times back in school and honestly it was annoying.

Coming back to JavaScript or programming in general, we tend to have our own almighty formula for strings. This formula can solve almost everything relating to strings from matching to testing and so on. This is called regular expression or regex.

So what is a regular expression

Regular expressions are basically patterns used to match character combinations in some part of a string. Different ways of creating a regular expression includes

A regular expression can be created using a regular expression literal. (A regular expression literal is made of two backslashes for example /regex/)
Calling the constructor function of the regex object for example new regExp("abc+d")

The first one is best used when you know the character combinations you want to match , while the second one is used if for example you are storing the regex in a variable or passing it from a user input.
Regular expression has a couple of built in methods that are basically used to test strings with the defined pattern. Here are the ones we will be looking at today

Test
Match
Replace and
Split

Don't worry about how the expression are created, we will also talk about that.

Test

The test method is one of the most common method you will be using, and it basically takes a regular expression and tests it with a text you pass in. The test method returns true if a part of the text you pass in matches the regular expression.

/abcd/.test("abcd") // returns true.

Basically a literal expression matches letter for letter with the string passed to it except otherwise stated. So in this case, /abcd/ matches "abcd" exactly, a for a and b for b etc,

Match

The match method also searches through a string that you pass in, but this returns the exact match found as an array. Note that the match method also returns the position where the match was found and the text passed except you use a g flag, which you will learn about below. But basically with the g flag it returns just the matched string alone

 "abcd".match(/abc/) // returns ["abc", index: 0, input: "abcd", groups: undefined]
"abcd".match(/abc/g) // returns ["abc"]

It searches the same way the test method does but instead of returning true/false ,it returns an array.

Replace

The replace method basically does just that replace. The replace method like the match and test method searches the whole string but instead of returning true if found or an array, it replaced that exact match with another string you pass in.

 "Java is awesome".replace(/Java/,"JavaScript") // returns "JavaScript is awesome"

Split

If you have worked with JavaScript for a while, then you should be familiar with the split method. The split basically takes a string or sentence and breaks it into an array based on the value you pass to it. This value is the separator .

"JavaScript is awesome guys".split(" ") // ["JavaScript","is","awesome","guys"]

Basically the split method loops through the string and anywhere it finds the separator that was passed (in this case, a space), it breaks it into an array. The split method also accepts regex as a separator which we will see later.

Flags

Before we move to constructing various regex, we will take a detour and talk about flags in regex.
Flags are optional when writing regex, but they help us a great deal. we are going to talk about 2 of the most important ones in javascript.

i - The i flag makes searches case insensitive, that is it makes it such that there is no difference btw a and A
g - The g(global) flag looks through the whole string and get multiple matches. Without it regex finds the first match and stop.

Now that we have talked about some methods and flags in regex, we will now write different forms of regex. Note that as we write this regex, we will also be testing it using any of the methods or flags described above and this will be random, but any method or flag can be used based on what you want to do.

Like I said earlier, we can test for the exact string.

let regex=/Quick/
let string1 ="Quick"
let string2="quick"
regex.test(string1) // return true
regex.test(string2) // return false

From above, the regex matches the exact word with the exact cases (uppercase for uppercase)

You can search for multiple strings using the or operator |

let regex =/quick|brown|lean/
console.log(regex.test("the quick fox")) // returns true
let string ="the quick brown fox"
console.log(string.match(regex)) // returns ["quick", index: 4, input: "the quick brown fox", groups: undefined]

This returns the first match found.
With the global flag, it returns all match found

console.log(string.match(/quick|brown/g)). // returns ["quick", "brown"]

The dot/period . is called a wildcard and it matches any character, number, symbol and so on. But it matches just one character.

let regex =/hu./g 
let string = "This are words with hu, hug, hum, hub and huh"
console.log(string.match(regex)) // returns ["hu,","hug","hum","hub","huh"]

You remember the flags right, normally regex should find the first match and stop but because of the global flag, it goes through everything.

Character class [] lets you define a group of character you want to match. It basically matches any character inside that character class.

let string="this are b_g strings e.g bOg big bAg bug"
console.log(string.match(/b[oui_]g/gi)) // returns ["b_g","bog","big","bug"]

Without the i flag bOg and bAg won't be matched because in regex A is different from a. But the i flag makes it such that regex does not match cases.

The hypen - when used inside a character set, let's you define a range of characters or numbers instead of listing them out

console.log("bay bby bcy bdy".match(/b[a-c]y/g)) // returns ["bay", "bby", "bcy"]
console.log("123456789".match(/[5-8]/g)) // returns ["5", "6", "7", "8"]

The caret ^ symbol when used inside a character set makes sure that none of the string in that set is matched. It can be used with or without the hypen

console.log("bay bby bcy bdy".match(/b[^a-c]y/g)) // returns  ["bdy"]

The caret ^ symbol when used at the beginning of a regular expression outside the character set basically means that the string passed in must start with that particular word or number.

console.log("123456789".match(/^[5-8]/g))// returns null

From above, we are basically saying the string must start with 5,6,7 or 8.

The dollar $ symbol makes sure that a string ends with a particular character or characters. Similar to the caret, just different positions

console.log(/JavaScript$/i.test("I love javascript")) // returns true
console.log(/JavaScript$/i.test("I love javscript")) //returns false

The + symbol allows you to match the same character multiple times

console.log(/huh+/.test("huhhhhhhhhhhh")) // returns true

The * symbol lets you match the same character multiple times also, but while the + symbol lets you match one or more times the * matches zero or more time. Basically with the +, the character you are matching must appear at least once but with the * it might or might not appear.

console.log(/huh*/.test("hu")) // returns true

? is used to make a character optional that is, it might exist or not

console.log(/colou?r/.test("color")) // returns true

A look head looks ahead of the string to check if a particular letter exists. Positive look ahead makes sure that the string specified exist (?=...) for example (?=u) and the negative look ahead makes sure the string is not there (?!...)

console.log("yes!".match(/yes(?=!)/g)) // returns ["yes"]

In the example above we only want to match yes if it is followed by an exclamation mark.

console.log("yes?".match(/yes(?=\?)/g)) // returns ["yes"]

? is a special character in regex like we have seen above, so in order to check for it you need to escape it. The same way you escape quotation inside a string.

We can also check for groups of characters using parentheses ()

console.log(/ex(pect|cept)/.test("expect")) // returns true

The next set of characters we will be looking at are certain alphabets that have special meaning in regex, but in order to use them for this their special purpose, you use the \ to escape them like we escaped ? above.

\w is used to match all uppercase, lowercase, numbers and underscore. This is basically the same as [a-zA-Z0-9_], just really shorter.

console.log("JAVASCRIPT _ react = 5 and 6 :)".match(/\w/g)) // ["J", "A", "V", "A", "S", "C", "R", "I", "P", "T", "_", "r", "e", "a", "c", "t", "5", "a", "n", "d", "6"]

\W is used to match anything that is not an alphabet, number or underscore, similar to [^a-zA-Z0-9_].

console.log("JAVASCRIPT _ react = 5 and 6 :)".match(/\W/g)) // returns [" ", " ", " ", "=", " ", " ", " ", " ", ":", ")"]

It basically matched the spaces, =, : and )

\d is used to match digits or numbers, similar to [0-9]

console.log("JAVASCRIPT _ react = 5 and 6 :)".match(/\d/g)) // returns ["5","6"]

/D is used to match anything that is not a digit or number, similar to [^0-9].

console.log("JAVASCRIPT _ react = 5 and 6 :)".match(/\D/g)) // returns ["J", "A", "V", "A", "S", "C", "R", "I", "P", "T", " ", "_", " ",...].

The \s matches form fields, carriage return level, white line and new lines

console.log("JAVASCRIPT _ react = 5 and 6 :)".split(/\s/g)) // returns ["JAVASCRIPT", "_", "react", "=", "5", "and", "6", ":)"]

The \S matches anything except from form fields, carriage return level, white line and new lines

console.log("JAVASCRIPT _ react = 5 and 6 :)".match(/\S/g)) // returns ["J", "A", "V", "A", "S", "C", "R"...]

Quantifiers

Quantifiers {} are used to match specific number of characters. You can specify the values like this, {x,y} where x is the lower bound and y is the higher bound, so basically the number of characters written must be between x and y

console.log(/huh{2,5}/.test("huhhh")) //returns true
console.log(/huh{2,5}/.test("huh")) //returns false

You can also decide to use just x. Using only x means the number of character inserted must be from x to infinity.

console.log("huhhhhhhhhhhhhhhh".replace(/h{2,}/,"g")) //returns hug

You can also use the quantifier to match an exact number of character like below

console.log("huhhhh".replace(/h{4}/,"g"))

If you have read it to this point congratulations. I know this is a really long and exhausting article but that is regex for you. I hope you have learnt a lot from this.
There are a few characters and combinations I left out, I felt this are the ones you will mostly use.
It is OK if you feel overwhelmed with this, when I first learnt regex, I was confused and this was mostly because I did not know when to use it and also because it looked really difficulty to construct.
So in my next article, we are going to go through a couple of coding problems that should help you get comfortable with regex. I am also going to mix it a few other non regex questions so that you can know when you can or cannot use it(I might be wrong about this), see you next time, bye for now.

Thank you.

Introduction to algorithm and the big O notation

Fakorede Damilola — Fri, 27 Nov 2020 20:50:29 +0000

Algorithms are very important in programming, every programmer will definitely end up writing an algorithm one way or another. In this article, I am going to explain

The term algorithm
The best possible solution for an algorithm
The big-O notation
Measuring performance (asymoptoic function)

The term algorithm

An algorithm is a sequence of steps (instructions) used to solve a clearly defined problem. There are two things you should note here, a sequence of steps and a clearly defined problem. So basically, an algorithm is any piece of code that you write (a line, 20 lines etc), that solves a problem. In as much has the problem follows the same pattern, that program you write should be able to solve it.
Let's look at an example.
write a program that sums up all the numbers from 1 to 10.
This can be easily done with a for loop. I will use JavaScript to solve this question

function sumNumber(){
let sum=0 
for (let i=0;i<=10;i++){ 
sum =sum+i 
} 
return sum 
}
console.log(sumNumber())

This function above sumNumber should be an algorithm. Why, because it solves a clearly defined problem (i.e it summed all the number from 1 to 10) which is what I asked for. But notice I said should be an algorithm and not it is an algorithm. This is not because it is a five line code and the bosses in programming write a single line, or because it is a simple for loop and real nerds with use reduce to solve it. But this is not an algorithm simply because this function is solving an exact question. In the definition above, I said it is a sequence of step that solves a clearly defined problem. We got the sequence of steps part (our five liner was awesome and we did not have to move through the whole planet or write 500 lines to get it done), but our algorithm solved the question for a clearly defined and exact problem. As programmers, we solve problems. We write code that helps solve the difficulties our users might have. So imagine a user wants to sum up all the numbers from one to 100 and comes to our code. Luckily our code won't break up, but it will give a devastating result which we don't want. So how can we write this so that it can solve a clearly defined but not exact problem, which is what all algorithms should do. What if instead of assuming that every number a user wants to add up will always be 10, why don't we take the longer route and assume it is unknown and only becomes known when our user inputs that number. That way our function will always loop to the number the user inputs and not 10.

function sumNumber(n){ 
let sum=0 
for (let i=0;i<=n;i++){ 
sum =sum+i 
} 
return sum 
}
console.log(sumNumber(100))

So by changing the number in the parenthesis, we can change the value of n, and therefore change our result. Therefore adhering to the definition altogether i.e sequence of steps (This five line is awesome) and clearly defined (no matter the number inputted, has long as the problem is to add up all the numbers from 1 to that number, our algorithm is more than able to solve it.)

The best possible solution for an algorithm

There is a popular saying in programming that you can solve one thing in 1000 different ways. A developer could decide to use the reduce higher order array or even a math formula etc. The fact is different people solve the same problem different ways. But then one method of solving a problem should to an extent be considered better than another (i.e the best possible solution). So the question now is what is the criteria for picking the best possible solution. Is it the

Minimum amount of code (whoa one-liner, this is the best algorithm programmer :) )
Best performance (the algorithm that takes the least amount of time to finish)
Least amount of memory (the algorithm that does not take a lot of resources on the computer) or
Personal preference (you like code A over code B)

Oftentimes, the best solution is the best performance (takes the least amount of time). So with the problem above, let's try to measure the best performance. In the browser, there is a performance object on which we can call the now method and this gives the current time stamp. So, we can easily get the timestamp before and after our program runs and also their differences to see how long the program ran.

function sumNumber(n){ 
let sum=0 for (let i=0;i<=n;i++){
 sum =sum+i 
} 
return sum 
} 
let start,end 
start =performance.now() 
sumNumber(3) 
end =performance.now() 
console.log(end-start) //1.0576668876

I am guessing your result is not the same has mine, and that is OK. The problem with getting the performance this way is that it depends on a lot of factors such has the speed of your laptop, the amount of programs running in the background etc. There are too many variables that can affect your result and this can definitely lead to errors if performance was judged this way. But for now let's stick with this. If you try increasing the number to 5, then 10 you will see that the result is literally the same thing. Same thing goes with 100 and even 1000. But If you try 100000, 1000000 and 10000000 (try not to go too large), you will begin to notice a trend

start =performance.now() 
sumNumber(100000) 
end =performance.now() 
console.log(end-start) //20.1 
start =performance.now() 
sumNumber(1000000) 
end =performance.now() 
console.log(end-start) //20.8 
start =performance.now() 
sumNumber(10000000) 
end =performance.now() 
console.log(end-start) //198.2

It tends to take a longer time for bigger numbers and that is the way it should be, but it is at the rate of ×10 of the previous number when we add an additional zero to that number. E.g if we double the number, the performance is also doubled and if we multiply the number by 10, the performance is also multiplied by 10.
But for performance, we should not really care about the values gotten, cause like I said earlier, this values depends on a number of factors. But the general trend should be observed, especially for larger numbers.
Considering this on a graph, we would draw a linear graph i.e has the values get larger so does the time and with the same factor. The varying values is generally due to other factors and that is how you judge algorithms, not with numbers but with the general trend. So with this trend, we can write a statement about the performance of an algorithm based on the time it take in relation to the input. This is called time complexity. The function above can be said to have a linear time complexity( has the value increases, the time increases at the same rate i.e linearly).

The big O Notation

From above, we have seen that has our performance (time) increases by the same factor which our value increases which we called linear time complexity. But that is not the only time complexity we have. There is also the constant time complexity. Can you think of a way the algorithm above can have a constant time complexity??
What if instead of looping everytime we want to get the sum of numbers we use a simple math formula. So basically instead of our algorithm stopping at the for loop and running that same line for e.g 10,000 times which might take 5s, it just simply uses our formula and run once i.e

function sumNumber(n){
return (n/2)*(n+1) 
}

Now when you try this for all n and calculate the performance with performance.now(), you will get almost the same values and remember, we don't really care about the values because they are polluted by other activities running on our conputer, but instead we care about the general trend which is has the values (n) increases, the time remains the same. No matter the value of n i.e constant time complexity. So from this two algorithms, which one do you feel is the best method to use and solve this problem i.e Is it the linear time complexity (has the value increases the time increases by the same value) or the constant time complexity (has the value increases the time remains the same). I feel it is the constant time complexity. But the issue is, it is not for every algorithm you can find a math formula or a way to get the trend to be a constant time complexity. Sometimes you just have to stick With the linear time complexity. But there are other time complexity such as quadratic Time complexity (has the value increases, the time doubles by that factor), the cubic Time complexity etc.
But when talking to other people, developers especially, there is a way to describe this time complexity using the big O notation. For example, the linear time complexity can be written has o(n) pronounced has (o of n). This is written in terms of the performance that is has n values increase, the time increases by the same value (n). Can you guess constant time complexity :). This will be o(1) has the value increases, the performance remains constant i.e 1. quadratic Time complexity o(n^2), cubic Time complexity o(n^3), logarithmic time complexity o(log n) (i.e has the values increase, the performance increases by a value of log of that number).

Measuring performance (asymoptoic function)

Now that we understand big O Notation and how to get the performance, the next question is how can we know the time complexity of a given algorithm. We could follow the route above and calculate for specific values and take note of the general trend (but that will take a while and some trends are not so straight forward e.g logarithmic trend ), or we could try to memorize it for each algorithm (that sounds fine but then we will have to start cramming and look for all possible algorithm etc).
But there is a way we can get the big O via asymoptoic analysis. We can do this through three steps.

Define the function (not the algorithm function but the math function. I Will explain this)
Find the fastest growing term
Remove the coefficients

Let's take for example the sumNumber algorithm above and talk about this three things in details.

Define the function

From above, I said the function I am talking about is not the algorithm sumNumber but the mathematical time complexity function. Now how do we get the mathematical time complexity function? In this case, that of function sumNumber. We need to find the number of expression execution i.e each expression. Basically, each line of code and we will count how many times it takes that line to run. So let's test for n=1 and n=n.

function sumNumber(n){
let sum=0 
for (let i=0;i<=n;i++){ 
sum =sum+i 
} 
return sum 
}

So for n=1,
The first line let sum=0 runs once. That is this algorithm defines that line just once and that is all.
The second line for (let i=0;i<=n;i++){ also runs once. This defines the condition for the loop.
The third line sum =sum+i is inside the loops and this will keep on running based on the value of n, i.e it runs from 1 to n which in our case is one, so it runs once.
The fifth line return sum also run once. It returns the answer once.
For n=n,
This is quite similar to n=1 above, the first and second line run once each like above.
The third line sum =sum+i will run from i=1 all through n, and in this case the n is actually n, so it will run n times.
Now, we will add all the values together.
For n=1
That is 1+1+1+1 = 4.
For n=n
The sum will be 1+1+n+1 =3+n.
Now remember, since in algorithm we are not solving for an exact problem but for unknown values, it will only make sense to use the result gotten from n=n. I used n=1 just to help you understand.
For n values, the math function = 3+n. We can rewrite this has 1*n + 3 (remember 1*n is still n). Like I said earlier, we don't really care about numbers but trends because number tends to be polluted. So we could easily turn that math function into a trend T =a*n + b, i.e the performance(T) for n no of values is this.

Fastest growing term

So from above, we already have this function T =a*n + b , now the next thing is to find the fastest growing term.
From the function, it is pretty obvious that b will remain the same no matter the value of n, it is a constant. But not a. As the value of n increases so those the value of a. Therefore a is the fastest growing term and we can reduce our function to T= a*n.

Remove the coefficients

We are left with T=a*n, removing the coefficients (a), T=n. Which is our finally statement i.e T increases has n increases with the same factor o(n).
Now can you try this method for the constant time complexity. Let me know your answer in the comment section below.

Thank you for reading to this point, you can follow me on twitter @fakoredeDami

Building a connect-four game with JavaScript

Fakorede Damilola — Sat, 14 Nov 2020 21:14:41 +0000

The connect four game can be likened to two players building a wall, each player with a different brick(i.e color). The rule is simple, each person drops a brick one at a time. Like an actually wall, a player must drop the brick on top of another cause a brick cannot stand alone in the air. The game is won when one of the two players can lay up their brick in an horizontal / vertical or diagonal manner made up of four bricks (i.e connect-four).

Here is how you can build your connect four game using HTML, CSS and JavaScript. I will be covering the

basic HTML and CSS
variables and data needed in JS
board and DOM load in JS
restart game function

basic HTML and CSS

The structure of this project is straightforward. This skeleton(HTML and CSS) will house data from the JS

HTML

<div class="container">
<div class="currentPlayer">The current player is 
<span class="player"></span>
<div class="board"></div>
<div class="restart">
<button class="playAgain">play again</button>
</div>
</div>

From above, we have a span with a class player that will tell us whose turn it is to play, The grid class will house the game board and the restart class with house the button to easily renew the game.

CSS

.board { 
border:1px solid black; 
display:flex; 
flex-wrap:wrap; 
height:276px; 
width:330px; 
background:blue 
} 
.board div { 
height:40px; 
width:40px; 
margin:3px;
border-radius:20px 
}
.square{ 
background:white; 
} 
.taken { 
/*background:red !important */
} 
.player-one { 
background:red;
}
.player-two { 
background:yellow; 
}
.restart{ 
background: red; 
width: 200px; 
height: 200px; 
position: fixed; 
top: 100px; 
left: 100px; 
display: none; 
justify-content: center; 
align-items: center; 
flex-direction: column; 
}

Most of what is going on in the CSS might make little or no sense to you, has we start working with JS, you will begin to understand what is going on.
But from here, we are setting up the board which will house a lot of divs. This are all block elements, but the flex property arranges them horizontally. The flex-wrap moves the div to the next line once it is about to reach the end of the board (remember we gave it a width and height).
The .board div styles each div inside the board. player-one and player-two gives each player a different color of brick. (Note that the commented parts is to help you understand what is going on, and they have no actually effect on the game. Has time goes on, we will comment and uncomment them to show what is actually going on).

variables and data needed in JS

let board=document.querySelector(".board") 
let player=document.querySelector(".player") 
let playAgain=document.querySelector(".playAgain") 
let restart=document.querySelector(".restart") 
let box=0 
let winningArray = [ 
[0, 1, 2, 3], [41, 40, 39, 38],[7, 8, 9, 10], 
[34, 33, 32, 31], [14, 15, 16, 17], [27, 26, 25, 24], 
[21, 22, 23, 24], [20, 19, 18, 17], [28, 29, 30, 31], 
[13, 12, 11, 10], [35, 36, 37, 38], [6, 5, 4, 3], 
[0, 7, 14, 21], [41, 34, 27, 20], [1, 8, 15, 22], 
[40, 33, 26, 19], [2, 9, 16, 23], [39, 32, 25, 18], 
[3, 10, 17, 24], [38, 31, 24, 17], [4, 11, 18, 25], 
[37, 30, 23, 16], [5, 12, 19, 26], [36, 29, 22, 15], 
[6, 13, 20, 27], [35, 28, 21, 14], [0, 8, 16, 24], 
[41, 33, 25, 17], [7, 15, 23, 31], [34, 26, 18, 10], 
[14, 22, 30, 38], [27, 19, 11, 3], [35, 29, 23, 17], 
[6, 12, 18, 24], [28, 22, 16, 10], [13, 19, 25, 31], 
[21, 15, 9, 3], [20, 26, 32, 38], [36, 30, 24, 18], 
[5, 11, 17, 23], [37, 31, 25, 19], [4, 10, 16, 22], 
[2, 10, 18, 26], [39, 31, 23, 15], [1, 9, 17, 25], 
[40, 32, 24, 16], [9, 7, 25, 33], [8, 16, 24, 32], 
[11, 7, 23, 29], [12, 18, 24, 30], [1, 2, 3, 4], 
[5, 4, 3, 2], [8, 9, 10, 11], [12, 11, 10, 9],
[15, 16, 17, 18], [19, 18, 17, 16], [22, 23, 24, 25], 
[26, 25, 24, 23], [29, 30, 31, 32], [33, 32, 31, 30], 
[36, 37, 38, 39], [40, 39, 38, 37], [7, 14, 21, 28], 
[8, 15, 22, 29], [9, 16, 23, 30], [10, 17, 24, 31], 
[11, 18, 25, 32], [12, 19, 26, 33], [13, 20, 27, 34] 
]; 
let currentPlayer=1

From above, we get the board, the player, and the restart button from the HTML5 via querySelector. The box variable will be used to check if the board is filled and the winningArray is just an array that houses the different possible way a player can win the game, currentPlayer changes whose turn it is to play.

board and DOM load in JS

Like my earlier article on memory game, most of the heavy lifting will be done via JS.

document.addEventListener("DOMContentLoaded", loadDOM)

On DOM load, we will call a function loadDOM which will set the game and everything

//load dom function

function loadDOM(){ 
createBoard() 
player.innerHTML=currentPlayer 
let squares =document.querySelectorAll(".board div") 
Array.from(squares).forEach(square=>{ 
square.addEventListener("click",clickBox)
})
playAgain.addEventListener("click",reset) 
}

The first thing here is to call createBoard which will create the gameBoard, after which we will set the player innerHTML to let the user know whose turn it is to play. Finally, we get all the divs inside the board via querySelectorAll and add a click eventListener to watch out for a click.

// createBoard function

function createBoard(){ 
for(let i=0;i<49;i++){ 
let div =document.createElement("div") 
div.setAttribute("data-id",i) 
div.className = "square" 
if (i>=42){ 
div.className="taken" 
} 
board.appendChild(div) 
} 
}

In this game, we are going to need exactly 49 divs. So we loop from 0 to 49 and every time we create a new div, give it a dataset attribute (this will be used later) and add a class of square to each div. This is to give all the divs a generic styling. Moving forward, we put a conditional statement from 42 i.e all divs from no 42 to 49 should have a class taken. Like I earlier stated, a player can only drop a brick on top of another. so this 7 bottom div will act like our ground level. This is similar to a house. A house stands on a ground not on the air. So in this case, the seven brick is serving as our ground. After all this, we simply append all the divs to the board which we got via querySelector.
You can uncomment the CSS class of taken to see the divs we will be using has the ground level.
After setting up the board and all, we are going to add an eventListener for every time we click a div and check if the player is actually dropping a block on top of another.

//clickBoard function

function clickBox(){ 
let squares =document.querySelectorAll(".board div") 
let click =parseInt(this.dataset.id) 
if( squares[click+7].classList.contains("taken") && !squares[click].classList.contains("taken")){ 
if(currentPlayer===1){ 
currentPlayer=2 
player.innerHTML=currentPlayer
this.className="player-one taken" 
checkWon() 
}else if(currentPlayer===2){ 
currentPlayer=1 
player.innerHTML=currentPlayer 
this.className="player-two taken" 
checkWon() 
} 
if(box===42){ 
setTimeout(()=>alert("boxes filled"),300)
setTimeout(()=>restart.style.display="flex",500) 
} 
}else{
alert("You cannot build on an empty space or on a space that has been built on")
} 
}

Here is how the clickBoard function works, we first get all the squares (i.e divs created. We could not do that globally at the top because they have not been created then) via querySelectorAll And then get the id of the div clicked with dataset (which is used to hold data in html5 and can then be accessed in js. This actually returns a string, so to turn it into a number you wrap it with parseInt). After which we check if the element below it i.e the seventh square after it (since it is a six by seven grid, the block below it will be seven steps ahead) already has a class taken (i.e it has been clicked) and if also the square you are clicking on does not already have the className of taken. If the former is true (i.e you are dropping a brick on top of another) and the latter is false (i.e you are dropping a brick at an empty spot), then we add one to the box variable and simply check who is dropping the brick player-one or player-two and add a className of taken and player-one (if it was player one that dropped the brick). This will give that div a color(via css) which will fill that space. But if one or any of the two conditions is not what it should be, we simply alert the player that they are doing something they should not. After which we simply change the value of currentPlayer and put it on the screen via innerHTML. Finally after each player clicks on a div and we add the className and change the value of whose turn it is to play, we then check if the game has been won with the checkWon function.

//the checkWon function

function checkWon(){
let squares =document.querySelectorAll(".board div")
for (let y=0;y<winningArray.length;y++){
let square =winningArray[y]
if(square.every(q=>squares[q].classList.contains("player-one"))){
  setTimeout(() =>alert("player one(red) wins "), 200)
  setTimeout(() =>restart.style.display="flex", 500)
  }else if(square.every(q=>squares[q].classList.contains("player-two"))){
  setTimeout(() =>alert("player two(yellow) wins"), 200)
  setTimeout(() =>restart.style.display="flex", 500)
}
}
}

The checkWon function like the clickBoard function first gets the squares (div) and then loops over the winningArray. Each value of the array is stored in a variable square and then a conditional statement is called. Note that each value in the winningArray is basically another array with a set of numbers (from 0-42, similar to the value we gave to each div via dataset i.e above). So everytime we get a new array from winningArray, we call an higher order function called every on that array, (this loops through every element in that array and cross check it with the condition stated). So basically, it loops through each element in the array i.e gets the value which is a number, and then it passes that number into squares (remember squares is basically all the divs which we got via querySelctorAll. So to get a div, we access it like an array with the number we got from this current looping) and then we simply check if that particular div has a className of player-two or player-one, meaning there is already a brick there. the every higher order function like I said earlier loops through each element of the array you specified, but it adds a special effect, if the condition you specified in the every parenthesis is true for every element, then it returns true, but even if just one value in that array does not agree with the condition it returns false. E.g if every div selected already has a class of player-two it returns true. So moving forward, the first if statement in the checkWon loop function simply check if any set of the divs in the game board matches any of the pattern defined in the winningArray and if all that set of div contains a class of player-one. If it does, alert the user that player one has one and you can then display the popup div to give players the access to play again. Else you should check if the set of divs has a class of player-two then alert the user that player two has won the game and display the popup div .If no set of div matches any of the defined pattern, we move ahead to check if all the board has been filled (remember we kept adding one to the box variable every time a player clicks on a spot). Since the number of divs on the gameBoard is 42, we check if variable box is equal to 42. If it is, we alert the user that it is gameOver and display the restart button to allow players restart the game. If there is still space on the board, i.e box is not equal to 42, the game will continue and every time a player clicks on a div it checks again.

restart game function

From above, an eventListener has been added for every time the restart button is clicked, this calls the reset game function. The reset game function is a simply function that clears the game board ,prepares for another game(via the loadDOM function which we defined above) and hides the popup afterward. This is the reset function.

function reset(){
board.innerHTML="" 
loadDOM() 
restart.style.display="none" 
}

This is my codepen link to the game.
You could also use make this game player VS AI, this uses the minmax algorithm. I think and there are some pretty great articles on it, you can check it out. But I really don't understand it yet :( .

This is how you create a connect four game. If you have any question or better idea let me know in the comments below.

Thank you, Adios

Create a memory game with JavaScript

Fakorede Damilola — Thu, 05 Nov 2020 08:04:20 +0000

The memory game is a pretty interesting game, and has been around for a while. You are given a set of cards containing images which are turned to the back, when you click on an image, it flips over and reveals the image. If you click on two images that are exactly the same, that is a win for you.

I would like to walk you through how to build a memory game using plain HTML, CSS and JavaScript.
Here is what we will be doing :

Setting up the basic HTML and CSS
Defining the variables and data in JS
Setting up the board on DOM load in JS
Check if the cards clicked is correct
Restart the game

Setting up the basic HTML and CSS

The HTML and CSS for this project is pretty simply. We are creating the skeleton which will house data from the JS.

HTML

<div class="container">
<div class="data">
<div class="score">Score : <span class="scoreBoard">0</span></div>
<div class="click">Click : <span class="clickBoard">0</span></div>
</div>
<div class="grid">
<div class="popup">
<button class="playAgain">play Again</button>
</div>
</div>
</div>

From above, we have a div with a class score and click that will be populated via JS, a grid class that will house the images which is the game board and a popup class with a button to easily renew the game.

CSS

.grid { 
width: 90%; 
height: 300px; 
display: flex; 
flex-wrap: wrap; 
margin: 60px auto; 
} 

.grid img { 
margin: 2px; 
transform-style: preserve-3d; 
transition: transform 0.5s; 
} 

.grid img.flip { 
transform: rotateY(180deg); 
} 

.popup { 
background: red; 
width: 200px; 
height: 200px; 
z-index:20;
position: fixed; 
top: 100px;
left: 100px; 
display: flex;
justify-content: center; 
align-items: center; 
flex-direction: column;
}

.data { 
display: flex; 
justify-content: space-between; 
padding: 20px 30px; 
font-size: 23px; 
} 

.data span { 
color: rgb(206, 121, 11);
font-size: 30px; 
}

From here, we are setting up the grid (gameboard) and the grid img styling. The grid img has the transform-style and the transition property which allows the card to flip when the flip class is added to it(i.e via JS) and the popup is styled as a fixed div.

Defining the variables and data in JS

Most of the heavy lifting of this game will be carried out in the JS file, the board will be populated etc

let cardArray = [ 
{ name: "fries", img: "fries.png", }, 
{ name: "fries", img: "fries.png", },
{ name: "pizza", img: "pizza.png", },
{ name: "pizza", img: "pizza.png", }, 
{ name: "milkshake", img: "milkshake.png", },
{ name: "milkshake", img: "milkshake.png", }, 
{ name: "ice-cream", img: "ice-cream.png", },
{ name: "ice-cream", img: "ice-cream.png", },
{ name: "hotdog", img: "hotdog.png", },
{ name: "hotdog", img: "hotdog.png", },
{ name: "cheeseburger", img: "cheeseburger.png", },
{ name: "cheeseburger", img: "cheeseburger.png", }, 
]; 

//define variables and get DOM element

let grid = document.querySelector(".grid"); 
let scoreBoard = document.querySelector(".scoreBoard"); 
let popup = document.querySelector(".popup"); 
let playAgain = document.querySelector(".playAgain"); 
let clickBoard = document.querySelector(".clickBoard"); 
let imgs; 
let cardsId = []; 
let cardsSelected = []; 
let cardsWon = 0; 
let clicks = 0;

So we have a cardArray, which is just a list of objects containing images and their names. The names will be used when we want to compare two images that were clicked. You will notice each object is actually double, and that is because you will be trying to compare two images on the board.
The grid, scoreboard, popup, playAgain and clickBoard are elements from the HTML that we are getting into the JS and will inject data into them.
imgs is a variable that we will initialize from here and will hold the images created, cardsId and cardsSelected are arrays that will contain the cards clicked on. While cardsWon and clicks will record the wins and no of clicks respectively

Setting up the board on DOM load in JS

This will be done with an eventListener called DOMContentLoaded, which will be added to the document itself. The eventListener works immediately the DOM loads (hence the name).
This eventListener will house some functions that will start the game

document.addEventListener("DOMContentLoaded", function () {
//define functions 

createBoard(grid, cardArray); 
arrangeCard();
playAgain.addEventListener("click", replay); 

//add a click function for images 

imgs = document.querySelectorAll("img");
Array.from(imgs).forEach(img => 
img.addEventListener("click", flipCard)
) 
});

I called a function here (createBoard) that will create the board with the images and all, I scattered the images for difficulty (arrangeCard), and I added an eventListener for each image to watch out for clicks (flipCard)

//createBoard function

function createBoard(grid, array) { 
popup.style.display = "none"; 
array.forEach((arr, index) => { 
let img = document.createElement("img"); 
img.setAttribute("src", "blank.png");
img.setAttribute("data-id", index); 
grid.appendChild(img); 
})
}

// arrangeCard function

function arrangeCard() { 
cardArray.sort(() => 0.5 - Math.random())
}

// flip Card function

function flipCard() { 
let selected = this.dataset.id;
cardsSelected.push(cardArray[selected].name); 
cardsId.push(selected); 
this.classList.add("flip"); 
this.setAttribute("src", cardArray[selected].img); 
if (cardsId.length === 2) { 
setTimeout(checkForMatch, 500);
} 
}

The createBoard function removes the popup, loops over the image array with forEach, this receives two arguments. Each object in the array and the index(optional) which is the position of that object in the array and starts from zero. For each object, simply create an image element, set the src attribute to display the image and add a data attribute (data attribute are simply objects that holds values in the html5 which you can use in JS via dataset). The value of the id will be the index i.e from 0 etc.
The flipCard function looks out for click. Once an image is clicked, it gets the id (remember the attribute we set above data-id, we can access it via dataset.id or if it was data-name it would be dataset.name). The this keyword basically tells it to select the image that was clicked. So we get the id of the image clicked to a variable selected, we then use this variable to get the object clicked and then push the name property of that object into the cardsSelected array. The id of the image clicked will also be pushed into the cardsId array. We add a class of flip to the img clicked to create a sort of flipping effect and then change the image to reveal the image beneath.
This process will be repeated when the second image is clicked and then we will check to see if they are the same image

Check if the cards clicked is correct

Once two images has been clicked, we wait for about .5s (to give a nice user experience ), and then we call the checkForMatch function

// checkForMatch function

function checkForMatch() { 
let imgs = document.querySelectorAll("img"); 
let firstCard = cardsId[0];
let secondCard = cardsId[1];
if (cardsSelected[0] === cardsSelected[1] && firstCard !== secondCard) { 
alert("you have found a match"); 
cardsWon += 1; 
scoreBoard.innerHTML = cardsWon; 
setTimeout(checkWon,500) 
} else { 
imgs[firstCard].setAttribute("src", "blank.png");
imgs[secondCard].setAttribute("src", "blank.png"); alert("wrong, please try again"); imgs[firstCard].classList.remove("flip"); imgs[secondCard].classList.remove("flip"); 
} 
cardsSelected = []; 
cardsId = []; 
clicks += 1; 
clickBoard.innerHTML = clicks; 
}

function checkWon() {
if (cardsWon == cardArray.length / 2) {
alert("You won") 
setTimeout(()=> popup.style.display = "flex" ,300); 
}
}

The checkForMatch function first gets all the images on the board, then gets the Ids of the images clicked from the "cardsId" array ( This will allow us easily get access to their object). We will then checked if the first value in cardsArray is equal to the second and if it is not the same image that was clicked twice.
If the images are the same we tell the person they got it and adds to the number of cardsWon, and then check if all the cards have been selected with the gameWon function. If the images are not the same (else), we simply remove the flip Class and change the image back. After the if/else statement, we want to clear the arrays for the next time the user clicks on an image and add to the number of clicks
The checkWon function simply check if the value of cardsWon is equal to the length of the card divided by 2. If it is tell the person the game is over and display the popup replay button

Restart the game

The restart game function is a simply function that clears the game board and scoreboard and prepares for another game. This is the replay function.

// The replay function

function replay() { 
arrangeCard(); 
grid.innerHTML = "";
createBoard(grid, cardArray);
cardsWon = 0;
clicks = 0; 
clickBoard.innerHTML = 0; 
scoreBoard.innerHTML = 0; 
popup.style.display = "none"; 
}

It basically arranges the cardsArray again, empties the gameBoard (grid), create a new board and resets the scores.

And that is how you create a memory game. Here is a codepen link for the finished project.
Like the popular saying in programming, there is a thousand ways to do one thing, so please try creating your memory game and if your method is different let me know in the comments.

Thank you

You can follow me on twitter @fakoredeDami

Uploading Images on MongoDB via nodeJS

Fakorede Damilola — Sat, 31 Oct 2020 11:49:30 +0000

Images are very important on our websites and gives life to the internet. A website without one or two images will be very close to boring.
Images like content can be uploaded on a database for easy access, and today I am going to show you how to easily upload images to MongoDB via nodeJS.
Today I will explain how to

Setup the necessary tools
Upload images to MongoDB
Get the list of image object (in an array)
Get a single image object
Display the actual image
Delete an image

Setup the necessary tools

Before we move forward, we are definitely going to need some packages from NPM (Node Package Manager), such has

Express : basically a Node.js web application framework
Mongoose : Object Data Modeling (ODM) library for MongoDB and Node.js. It basically handles relationship between data
Multer : Is used for uploading files
Gridfs-stream : Allows streaming of files to and from mongodb
Gridfs : This is a specification for storing and retriviing files that excess the BSON-document size limit of 16MB

npm i express mongoose multer multer-gridfs-storage gridfs-stream

We will be uploading straight to MongoDB atlas, which is a remote MongoDB database, you can also use the local instance but the connection string will be different.

The first thing is to import the required modules, and some core nodeJS modules, and just create the basic server

const express = require('express')
const path = require('path')
const crypto = require('crypto')//to generate file name
const mongoose = require('mongoose')
const multer = require('multer')
const GridFsStorage = require('multer-gridfs-storage')
const Grid = require('gridfs-stream')
const app = express()

// other code here

const PORT =5000
app.listen(PORT,()=>console.log(`Server started on port ${PORT}`))

Next is to add the connection string. If you are using the local instance , yours will probably be 27017...

const mongoURI = "mongodb+srv://fako:fako@nodejspassport-nahp0.mongodb.net"

Next thing is to, create a connection via mongoose, initialize a variable for stream(i.e gfs) and once the connection is open, set the gfs variable to Grid(gridfs-stream) and then pass the collection where our images will be stored to gfs :). Note that this collection will be divided into two, imageUpload.chunk and imageUpload.files

let conn = mongoose.connection
let gfs
conn.once('open', () => {
    //initialize our stream
    gfs = Grid(conn.db, mongoose.mongo)
    gfs.collection('imageUpload')
})

Now, we are going to create a storage object with a given configuration.
The first property will be the uri string which we specified above and the second is called file, a function to control the file storage in the database. It is invoked per file with the parameters req and file in that order and returns an object of a promise that resolves to an object. Some of the property of the object include
filename : The desired filename for the file (default: 16 byte hex name without extension), but you can override this with your given name
content-type : The content type for the file (default: inferred from the request)
bucketname : The GridFs collection to store the file (default: fs)
missing property will use the default

let storage = new GridFsStorage({
    url: uri,
    file: (req, file) => {
        return new Promise(
            (resolve, reject) => {
                       const fileInfo = {
                    filename: file.originalname,
                    bucketName: "imageUpload"
                }
                resolve(fileInfo)

            }
        )
    }
})

Set the multer storage engine to the newly created object, we will use this upload variable has our middleware, so that it actually upload to the database

const upload = multer({ storage })

Upload images to MongoDB

Now to actually upload an image. The upload variable will be added has a middleware and .single will be called on it (because we are uploading a single file each time. You can upload multiple files has an array). You will then pass the name you specified in your input field i.e in the frontend (e.g input type="file" name="upload"

app.post("/upload",upload.single("upload"),(req,res)=>{
res.json({file:req.file})
})

I am not really going to deal with the frontend in this article, but you should have a basic html file with an input file field that on submit will make an AJAX request to localhost:5000/upload, and if you try it out, that should work :). If you were to check atlas or your local database, and you should see the file uploaded.

Get the list of image object (in an array)

To get the list of image object is pretty straight forward,

app.get('/files', (req, res) => {
    gfs.files.find().toArray((err, files) => {
        //check if files exist
        if (!files || files.length == 0) {
            return res.status(404).json({
                err: "No files exist"
            })
        }
        // files exist
        return res.json(files)
    })
})

We are basically using gridfs-stream(gfs) like we will use mongoose. Go to the url with /files and you will see an array of the uploaded files

Get a single image object

To get a single file, all we need is the filename and we can call a findOne on gfs i.e

app.get('/files/:filename', (req, res) => {
    gfs.files.findOne({ filename: req.params.filename }, (err, file) => {
        //check if files exist
        if (!file || file.length == 0) {
            return res.status(404).json({
                err: "No files exist"
            })
        }
        //file exist
        return res.json(file)
    })
})

Display the actual image

To get the image itself,

app.get('/image/:filename', (req, res) => {
    gfs.files.findOne({ filename: req.params.filename }, (err, file) => {
        //check if files exist
        if (!file || file.length == 0) {
            return res.status(404).json({
                err: "No files exist"
            })
        }
        //check if image
        if (file.contentType === 'image/jpeg' || file.contentType === "img/png") {
            //read output to browser
            const readStream = gfs.createReadStream(file.filename)
            readStream.pipe(res)
        } else {
            res.status(404).json({
                err: "Not an image"
            })
        }
    })
})

The first thing to do is check if the file actually exists, if it does, go ahead and check if it is actually an image by looking at it contentType. If is actually an image, then read it to the browser by creating a readStream.

Delete an image

Deleting an image is just as easy, all you have to do is make a delete request i.e

app.delete("/files/:id", (req, res) => {
    gfs.remove({ _id: req.params.id, root: 'imageUpload' }, (err, gridStore) => {
        if (err) {
            return res.status(404).json({ err: err })
        }
        res.redirect("/")
    })
})

and that is how you upload an image to MongoDB via NodeJS. Thank you

You can follow me on twitter @fakoredeDami

Creating a custom cursor using CSS?

Fakorede Damilola — Fri, 11 Sep 2020 12:47:51 +0000

Cascading Style Sheet (CSS) offers you the opportunity to create pretty awesome designs. from SVGs to animation to the box model concept, CSS let's you go wild with your imagination acting has the only barrier.

One of such awesome designs is creating your custom cursor.
There are over 30 different kinds of cursor, from pointer to help. this codepen shows you the different kind of cursor available.

Creating a custom cursor is fairly simple, I will show you the easy way which uses an SVG then we will move from there.

CREATING A CUSTOM CURSOR USING AN SVG IMAGE

Create a simply html page with just the body tag.
Create your style sheet and just give the body tag a background color of red.
Get a cool SVG that you want to use and just link it to your CSS. Note that for this to work you also have to pass a second value of auto. This will be the default cursor in case the image is not available.

body {
background:red;
cursor:url('cursor.svg'),auto;
}

Try it out. It worked I hope.

Now that is awesome. But we want to go further than that. We wanna add cool animation, such that when you click, it does this and that etc.
It might actually be possible to do that with the svg, but that might get out of hand. So we will create another type of cursor.

CREATING A CUSTOM CURSOR USING ELEMENTS

Now let's first get rid of everything we have done earlier

Then create a simple div with a class of cursor.
Style the div. You can style this div anyhow, make it a triangle, square etc. I am going with a circle and also, give the body a couple other styles

body {
margin: 0;
padding: 0;
height: 100vh;
background:black;
} 
.cursor {
width:20px
height:20px
border:2px solid white;
border-radius:50%;
}

So moving on, the next thing to do is give our div a position that is relative to the body tag. position:absolute; will work just fine. I will not go in-depth about positioning, just know that this will place the div at the top left corner of the parent tag in this case that is the body tag

.cursor {
//other styles
position:absolute;
}

Now to make it a functional cursor we will add a few scripts

Create a script file and link it to your html, get the cursor tag and add an eventListener of mousemove to the whole body

let cursor =document.querySelector(".cursor")
document.addEventListener("mousemove",function(e){
console.log(e)
})

mousemove basically gives you the position of your mouse has you hover the screen. it returns an object which contains a lot of properties. But what we need is the pageX and pageY. This two values is basically the position of the cursor from the left and top of your browser window respectively and this is what we are going to use to change the position of the div element

// MouseEvent {isTrusted: true, screenX: 470, screenY: 219, clientX: 470, clientY: 148, …}
document.addEventListener("mousemove",function(e){
cursor.setAttribute("style",
`top: ${e.pageY}px;left:${e.pageX}px`
)
})

Now, you should have a cursor that moves with your default cursor. Nice. Note that you could totally do this a different way,you can change the values respectively using JS with cursor.style.left and cursor.style.top. That also works. Like the popular saying there is about a thousand ways to do one thing.
But there is a slight issue, the div is actually not at the exact point the cursor is, there is kind of a small difference. This is the same thing that happens when you try to position an element to the center of a page with position absolute. It is always slightly off and that is because it takes the whole element to the center which is not suppose to be so. Half of the element has to be on one side and the other half on the other side. So in this case, all you need to do is every time you position it with pageX and PageY, subtract exactly half of the width and height of that element from this two values i.e

document.addEventListener("mousemove",function(e){
cursor.setAttribute("style",
`top: ${e.pageY-10}px;left:${e.pageX-10}px`
)
})

One other problem with custom cursor is the fact that you cannot click on anything. You can actually, it just won't work. Button, anchor tags etc :( . But thankfully there is a solution. In your cursor class just add this.

pointer-events:none;

And you are good to go. To make it more awesome, you can go ahead and remove the custom cursor with

cursor:none;

in your body tag.

Now, you can totally stop here, that is cool. But I want to add some cool animation to this. So let do that next

So let add an effect for every time we click. So every time I click something in the document, it should expand and disappear for about .5s.
So to do this, we will work with CSS first. A class 'expand' with an animation

.expand {
animation: cursorAnim 0.5s forwards;
border: 1px solid red;
}
@keyframes cursorAnim {
0% {transform: scale(1) }
50% { transform: scale(3) }
100% { transform: scale(1); opacity: 0 }
}

So this is basically straight forward, expand has an animation property, at 50% it scales to 3x it value and at 100%, it disappears.
Now we need JavaScript to add this class to the cursor i.e every time you click the document or anywhere, add the expand class and after .5s remove it

document.addEventListener("click", function () {
cursor.classList.add("expand");
setTimeout(() => {
cursor.classList.remove("expand");
}, 500);
});

And that is how you create your custom mouse.
I hope you enjoyed reading it.

In this article, I talked about:

How to create your custom cursor using an image,(don't forget to add a second value of auto)
How to create your custom cursor using a div element (don't forget position:absolute and pointer-events:none)
And how to add animation to your custom div cursor.

Publishing a package on NPM

Fakorede Damilola — Mon, 24 Aug 2020 10:40:50 +0000

One of the things that makes a web developer's job interesting is the fact that a random person can just type a word on google and your website pops up. But it gets better, You can have someone use your work in their code.

I recently learnt how to publish packages on NPM for other people to use and I want to explain how you can too. But first, I want to talk about PACKAGES and MODULES in node because this two things really confused me and I hope it can help someone out there get clarity.

PACKAGE

From the node JS docs, A package is a file or directory that is described by a package.json file. Basically, a package is a piece of code that you write and has a package.json file to describe it. So, this file below is a package why?? because of the fact that it has a package.json file with it

//index.js file
function checkNumber(val){
if(val%2===0){
return "is Even"
}else{
return "is Odd"
}
}

//package.json file
{
  "name": "check_number",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Fako",
  "license": "MIT"
}

As you can see from the code above the package.json file is simply a file that describes another file in this case the index.js file. You can create a package.json file by typing npm init in your terminal and answer the questions. Any answer that you don't like can easily be replaced by typing it right beside that question.

Modules

Also from the node JS docs, A module is any file or directory in the node_modules directory that can be loaded by the Node.js require() function.
But to be loaded by the Node.js require() function, a module must be one of the following

A folder with a package.json file containing a "main" field.
A folder with an index.js file in it.
A JavaScript file. Note that modules are not required to have a package.json file. I.e not all modules are packages (only those that have a package.json file) but all packages are modules.

Now let's create a package.

Description

This is a package which will take in an array of numbers and return the average of those numbers. Sounds funny right, but that is packages. Simply your reusable code that you make available for everyone.
Note: you will need node JS and NPM installed on your system.
Start with creating a new folder, I will name mine avgNumber inside it create a file index.js. This has to be named specifically that because

This is the convention
That is the first place your system will look at when you try to use this folder/package anywhere. Remember that was what we described in the package.json file above

"main": "index.js"

although you can change this, but I would strongly advice against that.
In your index.js file, this is the code you need

let sum = 0,
  avg;
module.exports = function avgNumber(arr) {
  for (let i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
  avg = sum / arr.length;
  return avg;
};

Here we are simply exporting a function that takes in an array of numbers and returns the average.
We can try what we have now, outside this avgNumber folder, create a new file main.js. I am creating the file outside the folder because I want to keep my package contained. Just my package and nothing else.
Now in main.js

const avg = require("./avg_number");
console.log(avg([1, 2, 3, 4, 5]));

Since it is not yet an official 'npm package', I have to require it like I would require a folder. Notice the way I am not going ./avg_number/index.js, that is because JS by default already knows to look for an index file inside avg_number folder.
And from here, open up your terminal and type

node main.js

and voila it runs....... I hope :):).
So now let publish the package for the whole world to see you are an awesome developer.

Create an account with npmjs.org
In your root directory terminal, run npm login and fill in the required details
From your terminal, cd into avgNumber with cd avgNumber.
Create a package.json file from your terminal with npm init. Note, Like every other product around the world, the name of your product must be special and this is no difference. The name written in your package.json file is what other people will use to install your package so you have to look for a catchy and fine name. I am not a name wizard like cisco (from flash) so I will just tag my name with the package. That adds a nice ring to it.

package name: (package) fako_average

Note that by default the package name is the name of your root directory.
Press enter to see the other options and change them based on what you want.

Now run

npm publish

Your package is now available for download from anywhere around the world.
Note that running npm publish will extract every file or folder from the directory you are running it and publish. So make sure you run npm publish inside the folder you want to make available.
Now, try to install it npm i fako_average, and you will immediately get a node modules which should contain your package and now you can go back to the main.js file and remove the ./ and note that you will have to change the name too what is written in your package.json file dependencies and run it again.

Before I end this session, I quickly want to add the fact that when you download packages like express etc, you tend to get a lot of other folders in your node_modules. This is because express itself depends on this other folders/modules to work and so installing express will install them also. But note that when you check your package.json, the dependency part, you will only see express meaning others are just modules (from our definition above).

Thank you for reading. You can follow me on twitter @fakoredeDami.

Beginner's guide to LESS

Fakorede Damilola — Sun, 09 Aug 2020 17:35:38 +0000

CSS is annoying and can get frustrating. As a developer, it is really annoying having to write cool functions in JS and then turn to CSS and start with background:yellow;, color:yellow;, padding:yellow, :). Although CSS is getting better with new features like variables etc, but I feel LESS is a better option. So this is a brief introduction to LESS based on what I have learnt.

So, what is LESS

LESS is not bootstrap, or anything close to that. It definitely does not let you write classes and give you magical styles. In my opinion, I feel using LESS might even increase your CSS, but you will end up with a beautiful and comfortable CSS.

LESS makes writing of CSS way easier, introducing syntax like functions, variables etc.

INSTALLING LESS

You can either install it on your system, or use the LESS CDN. I prefer installing it, cause using the CDN might give unexpected behaviors.
So to install LESS, npm install -g less.
WORKING WITH LESS

Create two files. styles.less and styles.css. We will work in the LESS file which will then be converted to CSS using lessc styles.less styles.css

Note:Everything here should be written on the less file. Run lessc styles.less styles.css to see the changes in your css file

variables

To create a variable in LESS, you use the @ symbol e.g @width:50px;. and then you can use it anywhere e.g

@width:50px;
@primaryColor:red;
body{width:@multipler;}

and then run lessc styles.less styles.css in your terminal, and nice, CSS has been transformed.

Maps

Like JS objects or maps, this is a data-type in LESS. You can define values like breakpoints etc

@breakpoints: {
  desktop: 900px;
  tablet: 760px;
  phone: 480px;
};

You can then use this for your media queries

@media (min-width: @breakpoints[phone]) {
body{
width:@breakpoints[desktop];
}
 }

Math functions

You can use some Math functions like round, floor etc and Math operations like *, /. For example

h3{
 height: floor(@breakpoints[tablet] / 3);
}

Remember to run lessc styles.less styles.css to see the changes in your styles.css

Color operations

LESS provides color operations like lighten and darken, which takes your color and increases or decreases the lightness of the color based on the percentage specified

body{
 background:lighten(@primaryColor,60%);
}

Guards

Similar to if statement in js, guards is used to evaluate a style using when. For example,

body:hover when (lightness(@primaryColor)<70%){
background:green;
}

note that this will check the lightness of "red", not what we specified for the background.

Variable interpolation

This is simply using variables to set name or value. For example, I love naming my classes based on what they are used for e.g section-1-data-img,section-1-data-content,section-1-data-heading.

@section1:section-1-data;
.@section1-img{}
.@section1-content{}

Scoping in LESS

LESS also has scoping. For example, defining another value for @primaryColor inside a media query won't change the value outside the media query e.g

@media (min-width: @breakpoints[phone]) {

  @primaryColor: green;
  h2 {
   background:@primaryColor;
    height: @breakpoints[phone];
  }
}

Nested CSS rules

Nesting CSS rules with LESS is basically specificity e.g if this is our HTML

<div>
<ul>
<li><a>this is a link</a></li>
</ul>
</div>

to style the a tag in LESS

div ul li {
background:@primaryColor;
 @secondaryColor: violet;
  border: 2px solid @secondaryColor;
a{
color:blue;
font-size:25px;
}
&:hover{
background:black;
}
&{
padding:30px;
}
}

Basically, the & is used to get the whole selector. In this case div ul li:hover.

Imports in LESS

It is actually quite easy to import in LESS. You can import LESS files, CSS,PHP etc.Note that every other import require an extension except from LESS.
You can create a file called variable.less which will contain all your variables and import into styles.less

//variable.less
@primaryColor:red;
@secondaryColor:yellow;

//styles.less
@import "variable";
body{
background:@primaryColor;
}

To import css e.g fonts

@import (css)
  url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

You can even go wild and move a whole style to another file and import it into styles.less. This will import it at the exact place you specified it.

Detached rule set

Detached rule set is basically writing a property in one place and using it in other places. E.g you can define a box-shadow in one place and use it elsewhere. Detached rule set uses the @ symbol

@box-shadow:{
box-shadow:3px 3px 5px blue;
font-size:30px;
}
div{
@box-shadow();
}

The issue with Detached rule set is simply the fact that redefining a value will override every former value e.g

@box-shadow:{
background:blue;
}

This will be the only value defined in box-shadow.

Mixins

Mixins, :) this is the big fish.
Mixins is like detached rule set but better such that adding a new value will not override the former value. Mixins uses period

.font(){
font-size:40px;
}
.font(){
font-family:Arial;
}

This will merge the two together.

Parameterizing Mixins

Mixins also allow arguments and default value for arguments

.box(@width:30px;@color:@primaryColor,@style:dashed){
  border: @width @color @style;

}
// or
.box(@width:30px;@color:@primaryColor,@style:dashed){
  border: @arguments;
border-radius:@width;
}

I passed default values, just in case you decide not to put any value.

.div{
.box()
}
// or
.div{
.box(30px,brown,solid)
}

Mixins as functions

Mixins can act as functions also , receiving arguements and returning values

.arithmetic(@x,@y){
@add:@x+@y;
@multiply:@x*@y;
@divide:@x/@y;
}

Using it elsewhere

.div{
width:.arithmetic(200px,300px) [@add];
height:.arithmetic(15px,6px) [@multiply];
font-size:.arithmetic(15em,5) [@divide];
}

Personally, I feel mixins should be used in other files and then imported into the main less files for easy readability but that is me.

So....... that is LESS from my point of view with some of the major things I learnt. You can know more about LESS by reading the documentation.

Till then Adios

Introduction to HTML5 web components

Fakorede Damilola — Wed, 22 Jul 2020 11:13:38 +0000

Have you ever tried opening maybe, twitter or stackoverflow, and you found your way to the source code in the console, and you find a big soup of divs and divs and divs, ooh hey is that a paragraph no :( div, divs, divssssss. Web developers have a problem. Sorry lot of problems actually

Undescriptive Markup

I mean, just take a look at that picture,some websites will try a litte by adding classnames so that you can understanding what is going on, but everywhere is still.....you know the word DIVSSSSS
Style Conflicts

I don't know about you but most times, my styles don't work. CSS can get really frustrating. It either I
-avoid style conflict using highly css selectors
-or use !important to force styles.
But hey, there is no guarantee my style won't conflict. I mean, my parents always picture a well behaved family photo with us children but never quite get that :):)
No native templates

There is no way I can import a inert html for use in my html. I mean, I can import js with script of css with style, but no native way to import html. What do I do,
-I slap html in script tags e.g <script type="text/html"
-I store HTML in hidden DOM elements and manually extract
-I use iframes to get seperate scopes and styling.
No bundling

What if I want to bundle some css,js and html together?
I have to add the links line by line.
Have you tried using bootstrap
No Standards

We have no standard for creating html5, javascript and css projects today. Yes we have lot of solution providers out there, like jquery, bootstrap, kendoui etc. But all this solves problems in different ways.
Try to think of a car. e.g BMW, although the car might be a new model, with lot of cooler stuffs etc, but some things might never change e.g the radio, the gear etc. I mean they already have this already why do they need to create it again. They already have a template which can be shipped and use anywhere they want.

So 5 problems in all :(, but finally a solution

Web Components

Web components offer four main things

The use of templates

Like the radio of a BMW car, why should you always build or write out the same thing from the scratch, when you can just reuse what you already have. I mean, it even gets better,why rewrite what someone has already written. you can define inert, reusable standards with web markups
Custom elements

I don't know about you, but I like the idea of been able to create my own elements
Shadow DOM

This provides encapsulation of our markup and styling

Major browsers now support web components and it is pretty stable, so you should not have a problem with that. They include Opera, chrome,edge, safari and firefox

There are lot of abstraction for web components out there like polymer. But like JS and Jquery, it is very important to learn the foundation first before abstractions.

So in summary, why should you use web components

Descriptive markup

Web components will make our markup, easier to read, navigate and understand
Don't start at ground zero

BMW does not create a new radio from scratch for every car, so why should you.
Easily replaced and upgrade

I don't have to proof read 500 lines of css to know why it is white instead of brown.
Fewer integration mistakes
Clearer interface / API

So, thank you for coming to my talk show :) I hope you are has excited has I am about web components. Watch out for my next article has we dissect each of it one by one. from templates to Imports.

Forem: Fakorede Damilola

Git flow and github flow

GIT FLOW

GitHub flow

Common Questions in Regular Expression

Introduction to Regular Expression in JavaScript

So what is a regular expression

Test

Match

Replace

Split

Flags

Quantifiers

Introduction to algorithm and the big O notation

Define the function

Fastest growing term

Remove the coefficients

Building a connect-four game with JavaScript

HTML

CSS

Create a memory game with JavaScript

HTML

CSS

Uploading Images on MongoDB via nodeJS

Creating a custom cursor using CSS?

CREATING A CUSTOM CURSOR USING AN SVG IMAGE

CREATING A CUSTOM CURSOR USING ELEMENTS

Publishing a package on NPM

PACKAGE

Modules

Description

Beginner's guide to LESS

So, what is LESS

INSTALLING LESS

WORKING WITH LESS

variables

Maps

Math functions

Color operations

Guards

Variable interpolation

Scoping in LESS

Nested CSS rules

Imports in LESS

Detached rule set

Mixins

Parameterizing Mixins

Mixins as functions

Introduction to HTML5 web components

Undescriptive Markup

Style Conflicts

No native templates

No bundling

No Standards

Web Components

The use of templates

Custom elements

Shadow DOM

Descriptive markup

Don't start at ground zero

Easily replaced and upgrade

Fewer integration mistakes

Clearer interface / API