DEV Community: Hakeem Abdul

Arrays

Hakeem Abdul — Mon, 12 Oct 2020 01:00:47 +0000

Introduction To Arrays

What Are Arrays?

Arrays are single variables ( objects ) which can contain many data values (types ) in them arranged in a list. These values are enclosed in a square brackets and are seperated from one another by a comma.

An Array can hold multiple data values in itself and therefore can store a wide range of information in its variable.

An Array does not have a data type of its own.

Arrays are objects

Arrays are very important in the fact that they help in storing data(values) in a collective list and provides you with the easy accessiblity to get the individual content of each list item in the array and use them in your code. This beats the other alternative of you having to declare a variable individually for every single item(data) you want to use in your code.

If for example, you want create a variable to store the list of the types of watches you're selling on your business website, then an array should be the way to go instead of creating different variables for each of the watches you want to store in it.

Difference Between An Array And An Object.

If you have come across an object, then you would realize that an array and an object sometimes may get complicatedly similiar in ideas. The difference here is that an Array holds multiple data, all of which relates to certain type, purpose or kind. For example,

A list of all the names of the lawyers in a particular firm.
A list of the cars driven by the employees in a hospital.

...An object on the other hand, is best used as a variable set to contain the overall information relating to a particular item.

A data set of a lawyer's fullname, age, address, eyeColor etc.
- A data set of a car's name, speed rate, color, etc.

Creating An Array

An array can be created in two ways

An Array constructor function

const myArray = new Array();
An Array literal syntax

const myArray = [];

These arrays are all empty as there are no data values in them yet.

The first way may lead to complications, it is highly recommended you use the second way(Array literal syntax).

Storing Data Values In An Array

let footballTeams = [`Barcelona`, `Liverpool`, `Chelsea`, `Juventus`];

From the code example above, we have created a variable footballTeams and assigned an array of teams listed in the square brackets all seperated by a comma from the other.

Arrays dont have to contain only one data type (string) but can contain different data types all enclosed in the same array(string, numbers, boolean etc).

let myArray = [`Tino`, 20, true, `developer`];

Here, you'll see that the array contains different data types stored in it. This is an efficient way of storing information, profiles etc on your variables.

Here's another tip! we can also store an array(s) inside another array.

let avengers = [`iron man`, `captain america`, `thor` [`hawkeye`, `falcon`, 2020]]

From the code, you'll notice that inside the array, there is another array holding an information of two strings and a number.

Array(s) inside another array are called multidimensional arrays

Accessing Items From Arrays

The items or elements in an array sometimes may be needed to be accessed and used individually or perform certain tasks like loop iteration and so on.

The items in an array can be accessed using a method called the Bracket Notation.

The items each have a number tag or position that enables them to be accessed individually. This is called the Index Number.

let books  = [ 
    `comedy`,
    `thriller`,
    `action`,
    `drama`,
    `sci-fi`
];

In this instance, we have created an array of book genres and in order to access any of them, we employ the method above called the bracket notation.

We do this by using the bracket symbol [] and then writing into the bracket; the index number of the array-item we intend on getting.

The index number counts from 0 for the first item. That is,

first item = 0

second item = 1

third item = 2

Note: Computers generally start counting from 0.

And so on...

Therefore...

let books  = [ 
    `comedy`,
    `thriller`,
    `action`,
    `drama`,
    `sci-fi`
];

...accessing all array-items will then be

books[0];
//comedy
books[1];
//thriller
books[2];
//action
books[3];
//drama
books[4];
//sci-fi

Printing the code above on your browser console using the console.log() will give you all the results of all the array-items on your console.

Note that we said that array and objects were different in some cases, but the truth in general is that arrays are technically still objects. Still its best to refer to them as arrays to avoid complications.

Using the typeof operator on an array will return a result of object

let sports = [
`basketball`,
`football`,
`volleyball`
];
console.log(typeof (sports));     // Object

Numbered Indexes

The method used in the previous example, made use of the bracket notation and the indexes of each of the elements (items) in the array to access them individually.

This is what is meant by arrays using numbered indexes.

Arrays with named (using letters) indexes are called associative arrays

It is not advisable to use associative arrays in javascript as they lead to complications in your code

Use numbered indexes instead.

let colours  = [`black`, `blue`, `red`, `teal`]

// Accessing the red here
colours[2]; // gets the red item with the index of 2

console.log(colours[2]); // Prints out the result on the console

Another thing to note here is that the javascript parser is white space insensitive as similar to the browser engine.

So, in order for a cleaner code, your array can be arranged like this

let colours  = [ 
    `black`,
    `blue`,
    `red`,
    `teal`
]

NOTE:

A function can be an element in an array

An object can be an element in an array

Even an array can be an element inside another array.

Properties Of An Array

The Length Property

This is the most important property of an array and probably the only one you may need to use practically in your code.

The length property is a property attached to an array (object) that calculates and outputs the number of elements (items) in an array.

The length property is used to determine the number and as the name implies, the length of an array. It is very useful in loops iteration.

// Define an array books with elements

let movies  = [`comedy`, `thriller`, `sci-fi`, `drama`, `action`];

// Prints the length of the array on the console

console.log(movies.length);  // 5

The length property returns the result of 5 which is the number of the elements in the array books.

Looping Through An Array With The Length Property

A For loop is used best to loop through the items in an array

Note: We loop through arrays in order to perform a number of operations on the items of the array based on a laid out condition.

//Declaring the variables to be used in the loop iteration
let movies, count, i;

// Initializing the array
movies  = [`comedy`, `thriller`, `sci-fi`, `drama`, `action`];

//Initializing the variable count and assigning it to the length of the array
count = movies.length;

//For loop iteration
for (i = 0; i < count; i++){ 
console.log(  movies[i] )
//Results will be...
//comedy
//thriller
//sci-fi
//drama
//action
};

Other properties of an array are

Constructor property
Prototype property

Now that we have gotten a pretty deep introduction to arrays, lets turn a chapter and take a look at the most important and powerful things about arrays......the array methods.

ARRAY METHODS

Arrays have built-in functions that perform specific operations on the elements in the array and the array as a whole itself. These built-in functions are called methods.

Methods are basically special functions of objects that performs certain action on them and technically arrays can be referred to as objects.

Arrays have over 20 valid methods that can be used on them but we are only going to go over the major ones.

The `Pop()` Method

The pop method pops out or removes the last element (item) from an array.

let fruits = [`oranges`, `apples`, `pineapples`, `mangos`];

fruits.pop(); // fruits =[mangos]

The pop() method here removes the last item from the list, which in this case is mangos and then returns a new array with the value of the element(s) that was removed. That is...

fruits.pop() = [`mangos`];

This changes the initial list of the array, therefore...

fruits = [`oranges`, `apples`, `pineapples`];

Using the pop() method on an empty array [ ] will return the keyword undefined as the result.

The `Push()` Method

This is basically the opposite of the pop() method as the push() method is used to push in or add an element to the end of an array.

let languages = [`english`, `spanish`, `french`];

let newLang = languages.push(`hindi`);

console.log(languages); // ["english", "spanish", "french", "hindi"]

console.log(newLang);  // 4

The array languages was created and stored in it was a string of 3 words(languages).

The push() method takes the parameter(s) to be added in the brackets, separated by commas.

The variable newLang was created and used to store the altered array created as a result of adding in a new string to the end of the array using the push() method..

The initial array languages is now modified . It now produces a result of four strings including the newly added one.

The variable newLang produces a result of 4 which is now the length of the new array.

The `Unshift()` Method

The unshift() method is used to add new element(s) to the beginning of an array. This works like the previous push() method, only that instead of adding element(s) to the end of the array, the unshift() method adds from the beginning of the array.

// Initializes the tvSeries array
let tvSeries = [
    `The Walking dead`,
    `Game Of Thrones`,
    `Into The Badlands`
    ];

//Adds new elements to the tvSeries array using the unshift() method and then stores the result in the newList variable
let newList = tvSeries.unshift(`The Witcher`, `Blackish`);

//Prints the result of the newly altered array on the console
console.log(tvSeries);

//Prints the results of the length of the altered array on the console
console.log(newList);

The Shift() Method

The shift() method is the opposite of the previous unshift() method. The shift() method is used on arrays to remove or shift out the first element in a list.


//Creates a entertainers array with three strings data
let entertainers = [`Davido`, `Burna Boy`, `Wizkid`];

//Creates a removed variable, removes the first element from the original array and saves the results in the variable 
let removed = entertainers.shift();

//Prints out the results of the altered array on the console
console.log(entertainers);

//Prints out the result of the first element that was removed on the console
console.log(removed);

The `Concat()` Method

This method is used to concatenate (add) two or more arrays together.

A new array is created to store the results of the added arrays. The original arrays are left untouched.


//First array
let oldArtistes = [`Davido`, `Burna Boy`, `Wizkid`];

//Second array
let newArtistes = [ `Fireboy`, `Rema`, `Omah Lay`];

//Adds the two arrays with the concat() method and stores it in the allArtistes variable
let allArtistes = oldArtistes.concat(newArtistes);

//Prints the results of the first array which still remains the same
console.log(oldArtistes);

//Prints the results of the second array which stays the same
console.log(newArtistes);

//Prints the results of two arrays merged  together into one
console.log(allArtistes);

NOTE: In a case of adding more than one arrays, the same method is employed, only in this case...

The arrays to be added are put in the parantheses seperated from each other with a comma, e.g:

let totalArray = array1.concat(array2, array3, array4....arrayn);

The `Join()` Method

This method as the name implies joins all the elements in the array and returns them in a string format. The unique thing about this method is the fact that you can specify the separator used to separate the elements (, * - .etc)

let countries = [`Nigeria`, `Ghana`, `Egypt`];

let elements = [ `Hydrogen`, `Oxygen`, `Carbon`];

let athletes = [`Ronaldo`, `Jordan`, `Anthony`];

//uses a * operator to seperate the elements
console.log(countries.join(`*`));

//uses a , operator to seperate
console.log(elements.join(`,`));

//Uses a  (backspace) to seperate
console.log(athletes.join(` `));

NOTE:

The join() method by default uses the comma ( , ) operator to seperates the elements

The operator to be used in the join() method is to be put in the parantheses and inside the backticks ( ES6 template literal ).

The `Splice()` Method

This method is used to add, remove or replace element(s) in an array.

Syntax

The syntax of the splice() method is a little tricky...
The splice() method takes three parameters into its parameters which are

The index position of the element(s): this is the index number to start the counting from..

The number of elements to be removed from the array

The new element(s) to be added (*if two or more, separate with a comma)

testArray.splice( index number, No of elements to be removed, newelement1, newelement2....newelementn)

let planets = [`mercury`, `venus`, `jupiter`, `saturn`];

let splicedPlanets = planets.splice(2, 0, `earth`, `mars`);

console.log(planets);

console.log(splicedPlanets);

Explanation

The array planets was declared, and four string data was stored in it.
A variable splicedPlanets was created, and it was used to store the results of the product of the splice() method on the planets array.
The splice() method based on its parameters given was used to add two new elements into the array.
The method started its counting from index number 2 which was jupiter, it cuts out none of the elements due to its value for the no-of-elements-to-be-removed being 0, finally it places(adds) the two strings in its parameter in front of index no 2 where it started its count from. Hence its results..
If you noticed, the last result that was printed on the console returned an empty array [ ], this is because elements were added and not removed, so there wasnt any element(s) left to be returned to the new array stored in the splicedPlanets variable.

Another Example

let boardGames = [`scrabble`, `monopoly`, `yahtzee`, `ludo`, `risk`, `clue`];

let splicedGames = boardGames.splice(2, 2, `battleship`, `candy land` );

console.log(boardGames);

console.log(splicedGames);

Explanation

A boardGames array was created and used to store 6 strings
A splicedGames variable was created and used to store the product of the splice() method on the array.
The first parameter in the splice() method is 2, which means the counting started from index position 2 (yahtzee).
The second parameter is 2 which means the no-of-elements-to-be-removed was two (yahtzee & ludo).
The last parameter which took in the new element(s) was contained by two strings (battleship & candy land). Therefore, this new elements replaced the position of the ones that were removed from the array. Hence the results...
Again, if you notice that the last result on the console is giving us an array with two strings. This strings are the ones that were removed from the array and then finally returned to this new array that was stored in the splicedGames variable.

The `Slice()` Method

This method is often confused with the splice() method, because of how they both sound and thier functions.

The slice() method is used to slice out or cut out a piece (copy) of the elements of an array based on its parameters given. It creates a new array for the piece that was cut out from the original array.

Syntax

The slice() method takes in two parameters...

The first parameter is the starting index number.
The second parameter (optional) is the ending index number. >NOTE: The ending parameter is optional, since the first describes where to start from when slicing out the elements from the array, if the ending parameter is not defined, the rest of the element is cut out from the array starting from the index position in the first parameter.

let pizzas = [`cheese`, `veggie`, `pepperoni`, `buffalo`, `margherita`, `hawaiian`];

let slicedPizzas = pizzas.slice(2 );

console.log(pizzas);

console.log(slicedPizzas);

Explanation

The array pizzas was created, and 6 strings were stored in it.
A slicedPizzas variable was created and used to store the product of the slice() method on the array.
The method took one parameter 2 which was the starting index number (ending parameter optional).
From the index position of 2: (pepperoni), the rest of the elements in the array was cut out. This is because the ending parameter wasnt defined. Hence the results...
Lastly, you'll notice that the original array results printed on the console stayed intact, this is because only a copy of the sliced array was cut out.

Another Example

let music = [`jazz`, `rock`, `pop`, `hip hop`, `classical`, `afro beats`];

let slicedMusic = music.slice(1, 3 );

console.log(music);

console.log(slicedMusic);

Explanation

The array music was created, and 6 strings were stored in it.
- A slicedMusic variable was created and used to store the product of the slice() method on the array.
- The method took two parameters 1 & 3 which were the starting index number and the ending index number respectively.
- From the starting index position of 1: (rock) to the the ending index position of 3 (hip hop), the elements in between the defined positions in the array were all cut out excluding the last index which was 3: hip hop. Hence the results...

The `Sort()` Method

This method is used to compare and arrange elements of an array in an ordered pattern. The default pattern is alphabetically (for letters) and ascending (for numbers).


let shoeBrands = [`vans`, `jordan`, `puma`, `adidas`, `reebok`, `nikes`];

let sortedBrands = shoeBrands.sort();

console.log(shoeBrands);

console.log(sortedBrands);

Explanation

The array shoeBrands was created and 6 strings were stored in it.
The variable sortedBrands was created and used to store the product of the sort() method on the array.
The two results are all the same on the console as the method arranges all the elements in alphabetical order and alters the original order of the array.

Another Example

let numbers = [79, 1, 25, 10000];

numbers.sort();

console.log(numbers);

Explanation

The numbers array was created and used to store 4 number data types.
The sort() method was used on the array.
Although, the largest number there was 10000, it came second as sorted out by the method. This is because computers generally operates on 1's and 0's, therefore according to computer maths(binary), 10000 < 25 & 79. Hence the results...

The `Reverse()` Method

The reverse() method as the name implies is used to reverse the order of elements in an array.

let routine = [`wake up`, `say a prayer`, `brush my teeth`, `take a bath`, `go to work`, `sleep`];

let reversedRoutine = routine.reverse();

console.log(routine);

console.log(reversedRoutine);

Explanation

Without a need for much explanation, the workings of the reverse() method are quite obvious. It reverses the order or arrangement of the array and returns a new array with the elements arranged backwards.

NOTE: The original array is now altered and will give the same results as when its reversed.

Conclusion

This has been a pretty long ride, hope you enjoyed it. As much as we did, not all of the array methods were covered in this article for the sake of length and the case of too-much-information-ritis . Some important ones left out were

forEach()

map()

filter()

reduce()...

You"ll want to check this ones out as they are really powerful too when it comes to array iteration

THANK YOU!

Thank you for reading, your time invested is appreciated. Please leave a message if you found this article helpful or you have more to contribute.

INTRO INTO FUNCTIONS IN JAVASCRIPT

Hakeem Abdul — Sat, 22 Aug 2020 00:46:01 +0000

WHAT IS A FUNCTION

Function is an important concept in javascript as it forms a fundamental foundation on which you program your code to run. A function comprises of statements enclosed in block of codes that runs by performing a specific tasks that you've programmed into it.

Functions enables you to use code repeatedly without having to type the code individually anytime you want to use it.

A FUNCTION SYNTAX:

-Firstly, you start with writing in the keyword of 'function' e.g function

-Then you follow with the name of the function adding parantheses at the end of the name e.g myFunction();

-Parameters can be added into the parantheses, it is optional.

-lastly, you add curly braces to the syntax. e.g function myFunction(){}

NOTE:

The function name is allowed to contain digits, underscores, and dollar signs also.

The most used syntax of naming a function is joining one lowercase name to another name but this with a capitalized first letter in it,this method of writing is called the camel case method.
Example.
function alertUser(){}.

This is a widely used convention that makes the name of your functions or variables more readable and neat when you're going through your code

In a case where there are more than one parameters in the brackets, it is seperated using a comma.

The name of the function is case-sensitive

The curly brackets is used to contain the block of codes that is to be run by the function

LETS WRITE SOME CODES...

As we noted earlier, the codes that you intend to execute should be put into the curly braces.

Now the codeconsole.log() has been used to output a value on your browser console, but for this to work, the function needs to be called upon or invoked.

This activates the code in the function. A function by default is initially stored in memory by javascript, but needs to be invoked(called) in order to retrieve the saved data of the function from the memory, and activate the set of codes that are in it to be used.

You do this by writing the name of the code outside the function, that is outside the curly braces of the function including its brackets in the name, and then ending it with a semi-colon.

NOTE:

The brackets has to be added to the name of the function in order to invoke it.

A function can also be invoked when an 'event' occurs e.g when you click a button on a page.

An Example Of A Click Event:

RESULTS(before click)

RESULTS (after click)

PARAMETERS AND ARGUMENTS

Parameters and arguments are like a name to value pair respectively but this way is different from the ones you might have used in other areas of code.

Parameters are like input variables(reservoirs or containers) that recieve values from arguments, and are constant initially until arguments(values) are passed into them.

Arguments are the values that are given to the parameter variable to be used in the program.

NOTE:

Parameters accept any name format that is given to it, that is you can name it whatever and however you want.

Here it can be seen that the parameter has been put into the brackets(stack) and the block of code is me using a console.log to output a string value and then concatenating(using the + operator to join two values together) it with the parameter 'stack'.

Then the function has been called outside of it using its name, inside the brackets of the function name, the argument which now holds the string value of 'front-end developer'.

When this function is invoked and it gets executed, the value of the argument is passed into the parameter variable which is then used when it is concatenated with the string value in the console.log output.

USING MORE THAN ONE PARAMETERS AND ARGUMENTS

Now, in a case where you intend to use more than one parameters in your function code, these are the steps to follow

-You simply put in the parameter in the function name brackets separating it from the other with a comma and so on.

-The arguments should also be separated with a comma and should be placed in the order of the parameters that they are being passed into

THE CODE:

THE RESULTS:

SOME DEFAULT ACTIONS:

In a case, where a function is invoked with more parameters than arguments in a code, then after executing the code and setting the arguments(value) to the parameters, pair by pair, then the remaining argument(s) without a parameter to be passed into will be set to 'undefined'.

EXAMPLE

From the code and result shown, you'll notice that i used an ES6 syntax to write in the values of the strings and the variables(parameters).

If you are not yet familiar with ES6, i'll recommend checking out this Dev Ed youtube tutorial.

Back to the topic, from the code above, three parameters(name, age, hobby) have all been defined in the function, but there are only two corresponing arguments ('Hakeem', 19)available to be passed into them.

Therefore, when the values of the arguments have been passed into the recieving parameters(name, age), the remaining parameter(hobby), gets set to the default data of 'undefined', and gets outputed as so, because there isnt any available value to be passed into it.

Conclusion

This is just a brief and basic introduction into the concept of a function in javascript. There is more to it than this so if you intend to go in deeper and understand the whole concept, i would recommend you checking out the w3schools function lessons on their website or freecode curriculum on javascript.Thank you for reading and goodluck on your coding journey!!

UNDERSTANDING THE HOISTING CONCEPT IN JAVASCRIPT

Hakeem Abdul — Sun, 09 Aug 2020 23:58:33 +0000

HOISTING IN JAVASCRIPT

Before i go in to explaining what hoisting is and how it works on a javascript engine, i would like to give a definition of an important term in javscript called the execution context.The execution context is somewhat like a global wrapper that contains and handles the multiple codes that runs on our javascript engine. The execution context controls the order and the path through which codes are processed in the 'Behind-the-scenes part of the engine'. Whenever code is run in javascript, it is run inside the execution context.

Note that the execution context is an abstract concept that illustrates an enviroment where the codes you write runs and gets executed in your javascript engine.

This execution context works in two phases basically in the javascript engine

Firstly, when the code is run, the execution context is created, then the javascript engine organizes and stores the variables and functions in a memory space .
Secondly, it processes your code line after lines, reading and parsing the data on the line.

NOTE:

-The first step describes the term "hoisting", but i would still like to explain further on this term, so i wouldnt stop reading just yet . There is more i would like you to get, to ensure you solidify your understanding of what "hoisting" means.
-The variables and functions are initially sitting in memory(existing) until they are being called into use, then the javascript engine retrieves them.
-Your code is not what is really given to the computer directly rather, it is translated and converted by the compiler to data that the computer system can understand and execute.

WHAT SEEMS LIKE BUT ISNT HOISTING

Contrary to how it may seem, hoisting isnt a default response of javascript that physically moves the declarations of variables and functions to the top stack of your code to run.

EXAMPLE 1

From this example, it can be seen that in the code, the function has been called from the top and the variable outputed from the top using the console.log.

Looking at the result in the console of the browser, the function has been called but the variable is 'undefined'. Why did only the function work?, does hoisting only work for functions?, you might ask. But the fact is that hoisting actually works for both of them and it did work! but it just didnt give what you'd expect. The reason for this is that

When your code was run, the execution context was created(that abstract enviroment where codes are managed and compiled) in two phases; storing the functions and variables, and then processing the code.

The function was stored in 'whole', meaning that the function itself(myFunction) and the string data it held("function has been called") were all stored in memory for use.

And so it didnt matter that it was called some lines before actually getting to the function itself because during the first phase of the execution context, it was already existing in memory.

But in the case of a variable, it is not the same story. This is because only the declaration of the variable(var x) was setup and stored in memory, the initialization(var x ="Variable has been called") wasnt stored. This is because by default, javascript doesnt know finally what your variable might be set to and doesnt want to make that desicion for you while storing, therefore it initially set the data of the variable to undefined in memory. So when the execution context was created in the first phase, it set up a memory space for the variable x and set the value to the special keyword 'undefined' and when executing in the second phase by processing the code from the top line by line, it sees that the variable x is being outputed(printed out) before assigned to any data and therefore retrieves the default data of 'undefined' and set the variable to it.

NOTE:

All variables in javascript are initially set to undefined and will get outputed as so except the data of the variable has been set before 'console.logging' it on your browser.

Another thing to understand is that there is a difference in results between declaring a variable without assigning anything to it and not declaring a variable at all when trying to output it on the console of your browser.

EXAMPLE 2

CASE 1: DECLARING A VARIABLE WITHOUT ASSIGNING

In this case, it can be seen in the code that the variable has been declared but without any value assigned to it.

And as you would deduce from the previous explanation, the results in the console of the browser was outputed as undefined because it doesnt matter when the code is executed from top to bottom if there is a value assigned or not as the initial value will be set to undefined except the initialization was set before outputing it('console.logging').

CASE 2 : NOT DECLARING AT ALL

In this case, the variable hasnt been declared but is being outputed from the code. The results in the browser is as thus,

Now, from the console of the browser, we are getting an 'Uncaught ReferenceError' message saying x hasnt been defined(declared or initialized).

Ok but hol up now, what is the difference between the word 'Undefined' in the first case and this second case where there is an error showing that the variable x has not been defined. Now, there is something you need to understand about this two results.

Undefined is a javascript data type, it is a special key word that means that a variable has not been set to a value(has not been defined to mean or represent anything yet), but on the other hand , the result in case 2 is an error message that alerts you that the variable you are trying to output doesnt exists in the first place and so isnt defined to mean anything in your code.

CONCLUSION:

Hoisting is a default response in javascript where your functions(including its data) and variables(excluding its data) are stored and used up they are being called irrespective of the fact that they are below the code you use to call them up.

This is my personal definition of it anyways and the way i understand it to be and hope you understand it the same way.

Although, hoisting is javascript slick way of helping you run your code regardless of what order you write,it is best you dont rely on it or use it on your code. Rather, the better and safe way of writing code in your functions and variables is declaring and initializing them before outputing it line by line . This will help you avoid bugs and errors in your code.

I hope this entry on what hoisting is has been helpful and efficient to your understanding. Thank you for reading and keep improving!!!

Follow me @ Twitter

USING GOOGLE FONTS

Hakeem Abdul — Thu, 30 Jul 2020 16:38:18 +0000

HOW TO USE GOOGLE FONTS:

Fonts are different styles of writing texts in our documents. Fonts helps in customizing our projects and makes them stand out.

Custom fonts are already installed and available on systems and editors but there is still a wide variety of free fonts available on the google fonts website.

If you are new to using web fonts, i suggest you go through the W3schools fonts tutorial to help you understand how to use fonts before proceeding any further.

There are two ways to which a font can be used on your site.

CDN (Content Delivery Network) LINKED

This way a font is linked to your html document by attaching a url of the font link on the google fonts website.

Using Google fonts ONLINE

*Open the site up

*The display shows up with many fonts and their previews in sentences.

*You click on the plus symbol at the top right corner of the box containing the font you want to use.

*A pop-up shows up, you hover over it with your cursor and it comes right up.
Inside the pop-up, you see a link tag containing the URL source of the font you selected.

*You can go ahead and copy the link and paste it right in the document of your text editor. This link should be pasted above all other link tags in the head tag that contains them.

NOTE

You can pretty much navigate through the site in a case where you decide to customize the fonts by changing the font weight in the customize section by marking up the style option/options you choose. In doing this, the link URL actually changes and you'll need to copy the new link URL and paste it below the original first link tag.

In a case you decide to use another >font, you deselect the previous one by >clicking on the minus symbol in the pop >up content.

Pros:

This way enables the font source to be accessed faster and loads smoothly on your web page.

Cons:

This can only be used when there is internet access on your computer system.

NOTE:

The link tag to which the url name of the font file is attached to should always be put at the top before all other link tags in the head tag. The reason for this is that the compiler when executing code does it line by line and therefore would first execute the top link first and then use that information to process the rest of the code in your document.

2 HOSTED LOCALLY:

This way the font zip file is downloaded from the website directly.

After downloading the zip file, you can extract the contents to a folder and then saved it your projects file directory where you have your html and css file so you can access it in your document.
-This way the link tag wont be needed as the file would be used from either your internal css file or directly from your external css stylesheet.

Using Google fonts OFFLINE

In this case after you've selected your font, instead of copying the link, you download it.

*You can download the font file for offline use by clicking on the download icon the far top right of the pop-up content.

*After the file has been downloaded in zip format, you extract it to a folder and place the folder in your main project directory folder.

NOTE:

The external css style is used here.

Then we use the @font-face rule at the top of the document to access and implement the font file that was downloaded. It is used thus:
Here the src: is used to access the font file

NOTE:

*You should take note of the directory the font file is located in order to access it properly.

*Fonts generally have different file types that are used in the web. Examples are:

Truetype fonts (.ttf)
OpenType fonts (.otf)
The Web Open Font Format (.woff)
Embedded OpenType fonts (.eot)

the extension of the font file should be included in the name e.g (fontname.ttf)

Then after the name has been put in the src: then we used the font family property to name the file. This name is customizable and can be named whatever we want but you'll want to take note of the name used as that will be used later in the document to access the font file.

USING THE FONT:

The font file can be accessed using the font-family property and the customizable name of the font file.

Pros:

This way your font file can be accessed at any time without the need for internet. It is processed offline.

Cons:

Compared with the former online method, this method is a little bit slower when loading the fonts on your web page as the compiler when processing your code tries the retrieve the file from its source and display it on your page.

CONCLUSION:

Fonts are great resources used for customizing and making our web pages personal and unique. I hope this tutorial has been able to help you navigate your way towards using fonts both online and locally on your system. I encourage you to leave your comments and suggestions kindly about this brief overview of using google fonts. KEEP LEARNING AND GOODLUCK ON YOUR JOURNEY!!

HOW TO USE CSS VARIABLES

Hakeem Abdul — Fri, 24 Jul 2020 20:43:23 +0000

CSS VARIABLES

Designing complex websites with a lot of styling that are often repeated can become stressful and exhausting. This is where the custom properties of css variables comes to save the day with the use of css variables or cascading variables.

WHAT ARE CSS VARIABLES?

CSS VARIABLES are custom properties of CSS that enables a user to define a data(customizable name) and assign a particular value(property)to it for easy and faster access in a document. CSS variables are useful especially when a particular styling is repeated when designing elements.

Css variables enables you to make general changes to your code without having to repeat the code over and over again.

For example, if you intend to use some specific colours to style the contents of your site, then you need not write the code to do this anytime you want to do this, CSS variables enables you to define a 'storage point' for this data(colours) so that you can access and use them to style your contents easier and faster.

HOW TO USE CSS VARIABLES

THE ROOT PSEUDO CLASS:

The root pseudo class is used in the css file either internally or externally. It contains the variables used to define the style (name and the value) that will be used in styling of the intended elements.
It is represented as thus:
:root{}

DEFINING THE VARIABLES:

Firstly, in defining the variables which hold the name and the value of the variables, the name of the variables is customizable and can be named desirably, but needs to follow a specific syntax :
The name is preceeded by two dashes or hyphens like this --

You can them proceed to name it, for example : --header

NOTE:
-It can begin with a letter or an underscore
-The name is case sensitive

Although the variable can be named whatever you want given you follow the rules , it is always appropriate to give your variable a name that describes its function. For example, for a variable that will be used to modify the main colour of the content of your document, it can be named '--main-text-colour'.

When concatenating(adding more than one word to the name), it should then be joined by adding a - to it, for example:
--header-background or
--header-text-background.

After assigning a name to the variable, then a value should then be added to it using the normal standard of the name to the value pair, for example:

:root{ --header-background: green ;

--box-padding: 10px 5px; }

NOTE: The variable here has been defined by adding a name and a value pair to it, but has not been used to style any elements.

USING THE VARIABLES TO STYLE ELEMENTS:

Previously, we defined the variable to have a name of '--header-background' and a value of a green colour assigned to it. When using this to style your element, for example a header:

-You put in the name of the property you intend styling: background,color, font properties, etc.

-Then instead of assigning the custom values of that property, you substitute the defined variable containing the value you desire to use. This is done using the var() function.

ACCESSING YOUR VARIABLES USING THE VAR() FUNCTION:

You can access your custom variables using the var() function by writing in the variable name in the brackets.

This is an example of the variable being used to style the page that follows

THE CODE:

THE RESULTS:

So far, we have talked about using the :root pseudo-class to define variables used for a global scope(scope is where a variable is available in your code, a global scope in this context just simply means a general place where the use of a variable can be accessed by all the elements in your document). In a case, where you would want to define the variables and access it in a specific section or a div of the document, then the approach to doing this would be to

-Define the variables in the div directly, in this case the root pseudo element would not be needed since it is not a global scope anymore.

THE CODE:

THE RESULTS:

After defining the variables in the div or section scope, you can use them to style the contents in your document either in that same scope or a new block scope of that same element.

THE CODE:

THE RESULT:

CONCLUSION:

Although this is not an in depth explanation of the whole theory of css variables, i hope this content has been able to give you an overview of the concept of css variables, how to use them basically and the benefits of using them. Keep learning and goodluck!!

DEV Community: Hakeem Abdul

Arrays

Introduction To Arrays

What Are Arrays?

Difference Between An Array And An Object.

Creating An Array

Storing Data Values In An Array

Accessing Items From Arrays

Numbered Indexes

NOTE:

Properties Of An Array

The Length Property

Looping Through An Array With The Length Property

ARRAY METHODS

The Pop() Method

The Push() Method

The Unshift() Method

The Shift() Method

The Concat() Method

The Join() Method

The Splice() Method

Syntax

Explanation

Another Example

Explanation

The Slice() Method

Syntax

Explanation

Another Example

Explanation

The Sort() Method

Explanation

Another Example

Explanation

The Reverse() Method

Explanation

Conclusion

THANK YOU!

INTRO INTO FUNCTIONS IN JAVASCRIPT

WHAT IS A FUNCTION

A FUNCTION SYNTAX:

NOTE:

LETS WRITE SOME CODES...

NOTE:

RESULTS(before click)

RESULTS (after click)

PARAMETERS AND ARGUMENTS

NOTE:

USING MORE THAN ONE PARAMETERS AND ARGUMENTS

THE CODE:

THE RESULTS:

SOME DEFAULT ACTIONS:

Conclusion

UNDERSTANDING THE HOISTING CONCEPT IN JAVASCRIPT

HOISTING IN JAVASCRIPT

NOTE:

WHAT SEEMS LIKE BUT ISNT HOISTING

NOTE:

CASE 1: DECLARING A VARIABLE WITHOUT ASSIGNING

CASE 2 : NOT DECLARING AT ALL

CONCLUSION:

USING GOOGLE FONTS

HOW TO USE GOOGLE FONTS:

Using Google fonts ONLINE

Pros:

Cons:

Using Google fonts OFFLINE

USING THE FONT:

Pros:

Cons:

CONCLUSION:

HOW TO USE CSS VARIABLES

CSS VARIABLES

WHAT ARE CSS VARIABLES?

HOW TO USE CSS VARIABLES

THE ROOT PSEUDO CLASS:

DEFINING THE VARIABLES:

USING THE VARIABLES TO STYLE ELEMENTS:

ACCESSING YOUR VARIABLES USING THE VAR() FUNCTION:

THE CODE:

The `Pop()` Method

The `Push()` Method

The `Unshift()` Method

The `Concat()` Method

The `Join()` Method

The `Splice()` Method

The `Slice()` Method

The `Sort()` Method

The `Reverse()` Method