DEV Community: ebube samuel nworie

Unlock Your Full Learning Potential with Glasp: The Ultimate Study Tool

ebube samuel nworie — Mon, 04 Mar 2024 17:00:57 +0000

Introduction

Glasp is a social web highlighter that you can use to highlight key points from a web page. You can also use it to create summaries of YouTube videos.
It is a useful tool if you engage in online research or content creation. It helps you to streamline the process of extracting valuable insights from different online sources. Glasp’s ability to create YouTube video summaries using ChatGPT and Claude AI models is valuable to those who want to easily get the main points from long video content.

In this article, you shall learn about Glasp’s features for highlighting, annotating, and summarizing YouTube videos. Also, you shall learn the benefits of using these features and their impact on my learning experience.

You can install the Glasp browser extension to your web browser from its website or as an app on Play Store.

For a detailed guide on how to install Glasp, click on this link

Glasp Highlighting and Annotation feature

Glasp enables you to highlight texts from web pages and PDFs. You select the desired text, a pop-up will appear with a color palette, choose your desired color. While highlighting, you can add a text annotation by clicking the note icon within the pop-up. It is useful when you want to write down additional thoughts to the highlighted text or you want to explain the highlighted texts in your own words.
Glasp helps you organize your highlights and annotations across different web pages, to allow you to revisit them.
You can export your highlights and annotations in various formats and you can also copy your highlights to your note-taking app.
Additionally, Glasp helps you share your highlights and annotations with others on social media.

Personal Experience when using the highlighting and annotation feature

In the image below, I highlighted a key point from an article about crypto airdrops that I learned from Investopedia’s blog post. I used Glasp’s annotation ability to take down notes. The highlights helped me understand the key points of the article and the note helped describe the key takeaway in my own words.

Benefits of using Glasp annotation and highlight feature:

The benefits of using Glasp for highlighting and taking notes when reading an article are numerous. However, I listed some of them below:

Intentional Approach to Learning: The Glasp highlighting feature improves the focus I give to the learning material. Complex topics can be boring to read and I would usually skim through the content. Glasp highlighting and annotation feature prompts me to focus on the content so I can highlight key points and give annotations to the highlights.
Deeper grasp of the study material: After you study the material and use Glasp to organize all the highlights, you will get a deeper comprehension of the learning material because the highlights you take are usually the focus area in the learning article.
Improved knowledge retention: When you take the highlights after reading the learning material, it will improve learning retention. Going through the highlights, you will get the main idea behind the learning material and fully understand what the learning material is all about.
Knowledge elaboration: Annotations allow you to write what you understood from a key point in your own words which in turn will help create a deeper understanding of the subject matter.

Glasp’s YouTube videos Summaries Feature

Glasp offers the ability to generate summaries of YouTube videos through the Glasp web browser extension, ChatGPT, and Claude AI models. It presents summaries, highlighting the key points covered in the YouTube video.

Personal Experience of using the Glasp's Youtube videos Summaries Feature

In the YouTube video below, Glasp extension and AI models helped me summarize the video by telling me what to expect from the video before watching it.

Glasp gave me an overview of the video by highlighting some of the key points from the video which are:

The video discussed strategies for participating in altcoin airdrops,
The speaker talked about difficulties in navigating test nets,
The speaker made a list of specific individuals to follow on Twitter
The video contained detailed instructions that the speaker provided for each test net.

This overview gave me an edge in filtering the content that I consumed from the video. I skipped unnecessary parts and focused on the necessary parts.

Benefits of using the Glasp's YouTube Video Summary Feature

Listed below are some of the benefits of using Glasp’s YouTube video summary when learning:

Understanding the big picture: Glasp summaries will provide you with the option to comprehend complex videos easily by giving you key take points to look out for when watching the video. The summaries give a better understanding of the YouTube video, to facilitate a deeper understanding of the video
Targeted Listening: Knowing the key points beforehand will allow you to focus your attention on specific aspects of the video.
Efficient Review: Even after watching the video, the summaries can serve as a tool to refresh your memory on the key takeaways.

Enhanced Learning Experience

In this section of the article, I’ll discuss the overall impact Glasp has made on my learning journey and how it has improved my learning efficiency.

Targeted Learning: Glasp’s annotation and highlighting allow me to concentrate on crucial information, which saves me precious time. The YouTube video summaries give a grasp of the main ideas of the videos which allows me to prioritize relevant parts of the videos and leave the unnecessary parts.
Active Engagement while Learning: Glasp’s highlighting ability forces me to actively study and concentrate on the learning material and not just passively go through the material.
Building Confidence: While I learn and add annotations, the personal notes reflect my newfound knowledge which reinforces the confidence in the knowledge I have gained from the learning material.
Demystifying Complexities: Glasp highlight and summary leads to further exploration of the topic. It was key for me to understand what testnets and airdrops were all about.

Conclusion

Glasp web browser extension is a useful tool for you to highlight key points of articles and PDFs in webpages. It allows you to focus on relevant information and easily retain knowledge by annotations. The YouTube video summary is also a useful tool to improve your learning experience by giving you key points of the video even before you watch it.

"Mastering Google Chrome: A Comprehensive Guide for Mobile Users"

ebube samuel nworie — Sat, 10 Feb 2024 10:47:55 +0000

Google chrome is a web browser used to access and browse the internet on mobile phones, desktops and smart devices.

However, in this tutorial I will focus on Google chrome for mobile devices.

New users may find it difficult to use the chrome web browser because it has a complex user interface, clustered icons and the small screen size of the mobile phone may also pose a challenge.

So, in this tutorial, you'll learn the step by step guide on how to use Google chrome for mobile phones.

What is Google Chrome

Google chrome is a free web browser that was developed by Google to enable users access the internet.

It can be used to display websites, perform online activities like shopping, live streaming, and more.

It is available for use across multiple devices and operating systems like iOS, windows, Android and ChromeOs.

Why Google Chrome?

Speed: It is a fast browser and produces search results within few miliseconds.
Cross device syncing: It provides syncing of passwords, bookmarks, history and more across multiple devices (desktops, tablets, mobile phones) of the same account for easy access.
Security: it has security features like safe browsing to protect you from phishing attacks, malwares and other cyber threats.
Offline Reading: Google Chrome provides offline reading feature for you to access web pages when you have no internet connection.
Integration with other Google services: It integrates other Google services like Gmail, Google calendar, Google meet and more to itself to provide unified user experience across Google's ecosystem.

Installation

To install Google chrome on your mobile devices, follow these steps:

Open the play store
Search for Google chrome

Tap on Google Chrome: fast & secure by Google LLC

Tap install
Follow on screen prompts and wait for the installation to be completed
After installation, Google Chrome app should be in your device

How to Use Google Chrome

In this section, I shall walk you through the basic steps to get familiar with using Google chrome.

To use the Google chrome app, click on the chrome icon in your mobile device

Navigation bar: The navigation bar located at the upper left region of the browser should be used to input search queries

Tabs: use the ‘+’ icon close to the navigation bar is used to create new tabs

Menu options: use the ‘three dots’ icon to access more Google chrome features.

Bookmark: use the star icon at the top left to bookmark a site

Download: Use the download icon at the top left to download an offline copy of a web page
Incognito browsing: This is used to access private browsing.
History: The history option allows you see the previous sites you visited
Downloads: This is used to view your downloaded files.
Settings: this provides you with other options to customize your web browser

Google Chrome Alternatives

There are several other web browsers aside Google chrome that allows you navigate the internet. Below are some of the popular ones:

Microsoft edge: This a web browser developed by Microsoft that can be used across all devices
Mozilla Firefox: A secured and lightweight browser used to access the internet
Brave: This is a web browser focused on user privacy.
Opera: It provides default features like ad blockers to make browsing the internet easy.
Safari: this is a web browser supported by only iOS devices.

In conclusion, Google chrome is a good web browser that provides you with great tools and features to access and navigate the internet.

Understand how to filter an array of items using php -part1

ebube samuel nworie — Wed, 10 Jan 2024 14:03:54 +0000

This is the first part of a four-part series on filtering an array of items using the PHP programming language.

Introduction

Array filtering is a common algorithm used by software developers to create filter options in software applications. These filters enable businesses using the software application to organize and display specific sets of items, such as books, music, or ordered items. In this series, I'll guide you through a step-by-step approach to filtering items using PHP programming language. While the logic remains consistent across programming languages, the syntax may vary.

Prerequisites:

This article is designed for beginners, although a basic understanding of programming would be beneficial.
Using an Integrated Development Environment (IDE) like Visual Studio Code or PHPStorm is recommended.

Body:

In this series, we'll work with a list of books containing book titles and author names, and we’ll be filtering the books by their authors.

Start by creating an array named $bookItems in PHP. Variables in PHP are declared using the $ sign.

<?php 
$bookItems = [
    [
        'author' => 'Debra Fine',
        'book' => 'The Fine Art of Small Talk'
    ],
    [
        'author' => 'David Goggins',
        'book' => 'Can\'t Hurt Me’    ],
],
[
‘author’=> ’David Goggins’
 'book' => 'Built not born’    
],
    [
        'author' => 'Debra Fine',
        'book' => 'The big talk’
    ],


]
?>

Next, create a function named filterByAuthor that accepts two parameters: the $bookItems array and the value to filter by, in this case, $author.

<?php
function filterByAuthor($bookItems, $author) {
    $filteredBooks = [];
    foreach ($bookItems as $bookItem) {
        if ($bookItem['author'] === $author) {
            $filteredBooks[] = $bookItem;
        }
    }
    return $filteredBooks;
}
?>

To display the filtered books, use a loop over the result returned by the filterByAuthor function, in this case we use the foreach loop :

<?php foreach (filterByAuthor($bookItems, 'David Goggins') as $book): ?>
    <h1><?php echo $book['book']; ?> by <?php echo $book['author']; ?></h1>
<?php endforeach; ?>

Conclusion:

This article shows how to filter an array of book items by their author using PHP. In the next article of this series, we'll focus on refactoring this code for better efficiency.

Feel free to ask any questions in the comment section below.

Build a Todo-list application with JavaScript | A comprehensive guide

ebube samuel nworie — Tue, 05 Sep 2023 12:31:20 +0000

This is a beginners guide to learn how to build a Todo-list application with JavaScript.

Introduction
A Todo list app is an application that allows users to be able to add items to a list and keep track of the items they added to the list. The list items could be Daly goals or monthly activities the user intends to achieve.
In this article, you'll learn how to build a Todo list application to keep track of your goals. It is a good project to add to your portfolio.

Prerequisite
Before you continue reading this article, you should have basic knowledge of HTML, CSS, and JavaScript and you should be familiar with JavaScript DOM manipulation.

Table of contents

Introduction
Prerequisites
The components of the Todo-list app
Understand how the Todo list app works
Use HTML to create the Layout of the Todo-list app
Style the Todo list app with CSS
Working with the JavaScript file
Get elements from HTML
Initialize the addList function
Conclusion

The components of the Todo-list app

The Todo list app contains:
An input field where a user can type in the Todo item.
An add button, that when clicked, the Todo item is added to the Todo list.
A div element that allows the add todo items to be displayed.
The Todo items are displayed together with two buttons, the "DONE" button and the "DELETE" button. The "DONE" button is to mark a completed Todo item while the "DELETE" button is to delete any item from the list.

Understand how the Todo list app works
When a user types a Todo item in the input field, and clicks the add button, the Todo item is added to the Todo list. Then below the displayed item are two buttons, 'DONE' button and 'DELETE' button. When 'DONE' button is clicked, the displayed Todo item is crossed and when the 'DELETE' button is clicked, the displayed Todo item is deleted from the list.

Now that you're familiar with the functionality of the application, let's write the codes to make the application a reality.

In your code editor, create HTML, CSS and JavaScript files and link them appropriately.

In the HTML head tag, add the link tag to link the CSS file

    <link rel="stylesheet" href="style.css" />

In the body of the HTML add the script tag, to link the JavaScript file

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

Create the Layout of the Todo list with HTML

Enclose the description of the web app which is "Todo list" in an h1 tag, to give it a big font size.

Add a div tag with the id "task-container" to the. HTML file.

Create an input field that has an id of "todo-input" and create a button element has an id of "add-input"

    <h1 id="todo-list">TODO LIST</h1> 
     <div id="task-container"> 
         <input type="text" name="todo-input" id="todo-input"> 
         <button id="add-input">add</button> 
     </div>

Style the Todo list app with CSS
Place the todo-list id at the center of the web page
Give the "task-container" id a coral background color,
Set the minimum height of the "task-container" to 50vh,
Give the "task-container" id a padding of 10px, a border radius of 10px, align all the text in the "task-container" id to the center, set the margin of the "task-container" id to auto.

#todo-list{ 
     text-align: center; 
 } 
 #task-container{ 
     background-color: coral; 
     min-height: 50vh; 
     padding: 10px; 
     border-radius: 10px; 
     text-align: center; 
     margin: auto; 
 }

Working with the JavaScript file
In this section, you'll learn how to implement the functionalities if there Todo list app using JavaScript.

Get elements from HTML
If you're familiar with JavaScript DOM manipulation, you'll understand that before you use any element from HTML, you must use a "document.getElement" method to fetch the element from HTML, and then assign the element to a variable name.

Use let keyword to assign a variable name, addInput and use document.getElementById to fetch the button element with it's "add-input" id.

Use let keyword to assign a variable name, todoInput and use document.getElementById to fetch the input field with it's "todo-input" id.

Use let keyword to assign a variable name, taskContainert and use document.getElementById to fetch the "task-container" id.

let addInput = document.getElementById("add-input"); 

 let todoInput = document.getElementById("todo-input"); 

 let taskContainer = document.getElementById("task-container");

Give the addInput variable a "click" event listener, so that on-click, the addList function will be executed.

addInput.addEventListener("click", addList)

Initialize the addList function
Use function declaration to initialize the addList function

function addList() {}

Note: The following lines of code are to be written inside the addList() function

In the addList function, use the createElement method to create a div element that was not initially written in the HTML file. The div element will be the container that displays the Todo list items.

let newList = document.createElement("div");

Append the newList variable to the parent element, which is the taskContainer variable using the appendChild() method.

  taskContainer.appendChild(newList);

The taskContainer is the parent element while the newList is the child element.
Appending a child element to the parent element will make it to be displayed under the parent element.

Note: taskContainer is a variable name given to the div tag with task-container id in the HTML file while newList was created with JavaScript using the createElement() method.

Then use the code below to create a paragraph element, and give it a variable name, outputText.
Make the innerText of the paragraph equal to the value of the text in the input field.

let outputText = document.createElement("p"); 
   outputText.innerText = todoInput.value;

Use the appendChild() method to append the outputText to the newList variable.
Set the value of the input field to empty.

newList.appendChild(outputText); 
   todoInput.value = "";

To make the texts in the outputText variable visible, use the JavaScript appendChild() method. The appendChild() method works by displaying the child element of a parent element. In this case, outputText variable is the child element of newList variable parent element.

The todoInput.value sets the input field to empty after the appendChild() is executed.

Next, is to output the "DELETE" button and the "DONE" button.

Give the delete button a variable name of deleteButton. Use the createElement() method to create a button element.
Give the button an innerText called "DELETE".
Use the appendChild() method to display the deleteButton variable under the newList variable parent element.
Add the click event listener to the deleteButton variable, and assign the deleteFunc function to execute the delete function on click.

  let deleteButton = document.createElement("button"); 
   deleteButton.innerText = "DELETE"; 
   newList.appendChild(deleteButton); 
   deleteButton.addEventListener("click", deleteFunc);

The next item to create is the button that a user can click when any task is done. Use the createElement() method to create a button element. Assign it a variable name called, completedButton. Give the button an innerText called "DONE". Use the appendChild() method to display the completedButton variable under the newList variable parent element. Add the click event listener to the completedButton variable, and assign the completedFunc function to execute the completed function on click.

let completedButton = document.createElement("button"); 
   completedButton.innerText = "DONE"; 
   newList.appendChild(completedButton); 
  completedButton.addEventListener("click", completedFunc);

Initialize the deleteFunc function, and set the innerHTML of the newList variable to empty. This will delete the Todo item from being displayed.

function deleteFunc() { 
     newList.innerHTML = ""; 
   };

Initialize the completedFunc function, and give the parent element of the completedButton a text declaration of line-through.

function completedFunc() { 
completedButton.parentElement.style.textDecoration = "line-through"; 
   };

After writing the entire addList() function, you should have these lines of code

function addList() {

    let newList = document.createElement("div");

    taskContainer.appendChild(newList);

    let outputText = document.createElement("p");
    outputText.innerText = todoInput.value;

    newList.appendChild(outputText);
    todoInput.value = "";

    let deleteButton = document.createElement("button");
    deleteButton.innerText = "DELETE";
    newList.appendChild(deleteButton);
    deleteButton.addEventListener("click", deleteFunc);

    let completedButton = document.createElement("button");
    completedButton.innerText = "DONE";
    newList.appendChild(completedButton);

    completedButton.addEventListener("click", completedFunc);

    function deleteFunc() {
        newList.innerHTML = "";
    };


    function completedFunc() {
        completedButton.parentElement.style.textDecoration = "line-through";
    };

}

Conclusion
In conclusion, you have built a functional Todo list application that you can use to create your Todo items and showcase as a project in your portfolio. If there are other functionalities you'll like to add to the Todo list application, you can as well add them.
Thank you for reading to the end, do well to like and leave a comment.

Build a multiple unit converter with JavaScript

ebube samuel nworie — Sun, 03 Sep 2023 22:07:32 +0000

This is a comprehensive guide to build a multiple unit converter web app.

Introduction
JavaScript possesses lots of functionalities, developers who code with JavaScript can create dynamic web applications. In this article you'll learn how to build a multiple unit converter. A unit converter is a tool that converts a number from one unit to another unit. For instance, a unit converter can convert a number written in meters to it's equivalent in kilometers, or a number written in Celsius to it's equivalent in Kelvin, etc. In this article you'll learn how to build a multiple unit converter that can convert numbers to six different units.

Prerequisites
Before proceeding with this article:
You should have basic knowledge of HTML, CSS and JavaScript.
You should also have understanding of JavaScript DOM manipulation.

Table of contents

Introduction
Prerequisites
How The Web app works
Create the layout of the web app with HTML
Style the web app with CSS
Implement the conversion functionality with JavaScript
Get elements from HTML
Write the conversion functionalities
Initialize the various unit conversion functions and write the codes for their functionalities
Conclusion

How The Web app works
The app contains a drop-down menu which contains six unit conversions, the app also contains an input element where a user can type in the numbers that he wants to convert, and lastly, the app contains a div element where the output of the converted number will be displayed.

When a user selects a unit conversion and inputs the number he wants to convert, the converted number is displayed in the output field.

Create HTML, CSS and JavaScript files
The first step to create this web application is to create HTML, CSS and JavaScript files and link them appropriately using the link tag for CSS and Script tag for JavaScript. The link tag is contained in the head tag, while the script tag is contained in the body tag.

<link rel="stylesheet" href="unitconverter.css" />

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

Create the layout of the web app with HTML
To create the drop down menu, use the tag and give it an id of "conversion-list", create multiple options tag containing the different unit conversions as shown in the code below.

<select id="conversion-list">
        <option>select conversion type </option>
        <option value="1">celsius to farenheit</option>
        <option value="2">farenheit to celsius</option>
        <option value="3">km to m</option>
        <option value="4">m to km</option>
        <option value="5">celsius to kelvin</option>
                <option value="6">kelvin to celsius</option>
    </select><br/>

Use the input tag to create the input element and give it the type number, with the id of input, you can add a placeholder text if you wish as shown in the code below.

<input type="number" id="input" placeholder="type your input here" /> <br /><br />

The next step is to create the output field where the converted numbers will be displayed. Use a div tag to create it and give it an id of output.

<div id="output"></div>

Style the web app with CSS
Every element in the app is centered according to the image in the introductory section. The text-align property is used to place the body of the app at the center as shown below:

body{
     text-align: center;
 }

The conversion list drop-down menu as shown in the introductory image has a curved shape, white background and blue text color. Write the following CSS codes to implement that feature.

#conversion-list{
     width: 300px;
     margin-bottom: 20px;
     border: 2px solid blue;
     border-radius: 20px;
     height: 30px;
     background-color: white;
     color: blue;
     font-weight: bold;
 }

Write the CSS code below to make the input field have a blue background color, a white text, a round border, increase it's width and add some other properties.

#input{ 
     border-radius: 15px; 
     border: 2px solid white; 
     font-size: 18px; 
     line-height: 1.5; 
     outline: none; 
     font-weight: bold; 
     color: white;
     padding: 5px 10px 5px 10px; 
     background-color: blue; 
     width: 300px;
 }

The output element is bold and has a large font size as shown in the introductory image. Look at the code below to implement the property.

output{
     font-size: 25px;
     font-weight: bold;
 }

Implement the conversion functionality using JavaScript
After creating the layout of the web app with HTML and styling the web app with CSS, the next step is to add the functionality of the web app, JavaScript is the language that'll be used to implement it.

Get the elements from HTML

let inputValue = document.getElementById('input');

let outputValue = document.getElementById('output');

let conversionList = document.getElementById('conversion-list');

The above code is used to tell JavaScript that you want to use the input id, output id and conversion-list id elements in the JavaScript file. These are the elements we created in our HTML file. Assign the elements to different variable names namely: inputValue which represents the input field, outputValue which represents the output div, conversionList which represents the drop-down list element.

Write the conversion functionality

The converter function defined in the code sample below contains multiple switch statements which affects the drop-down list element which was defined with the variable name, conversionList and the input field which was assigned the variable name, inputValue.
Consider the case "1" in the code sample below.
If conversionList.value is equal to "1", inputValue.oninput is equal to changeCelsiusToFarenheit function.

Note: "1" is an option value in the HTML drop-down list defined as conversionList in this JavaScript file.
changeCelsiusToFarenheit function will be defined later in the code.
The same code written for case "1" was written for the remaining 5 cases but they are assigned to different functions. And lastly the default statement which means that if none of the 6 values were clicked the defaultOutput function should be implemented. The defaultOutput function will also be initialized later in the code.

function converter() {

    switch (conversionList.value) {
        case "1": inputValue.oninput = changeCelsiusToFarenheit;
            break;

        case "2": inputValue.oninput = changeFarenheitToCelsius;
            break;

        case "3": inputValue.oninput = changeKmtoM;
            break;

        case "4": inputValue.oninput = changeMtoKm;
            break;

        case "5": inputValue.oninput = changeCelsiusToKelvin;
            break;


        case "6": inputValue.oninput = changeKelvinToCelsius;
            break;

        default: inputValue.oninput = defaultOutput;
            break;

    }

}

Initialize the various unit conversion functions and write their functionalities
The code below contains the actual logic contained in the functions to convert a number from one unit to another.
The formulas to convert the number typed in the input field to another unit is what is written in these functions. The result of the conversion is displayed in the output div.

function changeCelsiusToFarenheit() {
    outputValue.innerText = (inputValue.value - 32) * 5/9
}


function changeFarenheitToCelsius() {
    outputValue.innerText = (inputValue.value * 9/5) + 32
}


function changeKmtoM() {
    outputValue.innerText = (inputValue.value * 1000)
}


function changeMtoKm() {
    outputValue.innerText = (inputValue.value * 0.001)
}


function changeCelsiusToKelvin() {
    outputValue.innerText = (Number(inputValue.value) + 273)
}


function changeKelvinToCelsius() {
    outputValue.innerText = (Number(inputValue.value) + 273)
}


function defaultOutput() {
    outputValue.innerText = 0;
}

Lastly, the code sample below represents the function calls of each function. After writing each function, it must be called otherwise the codes in the functions won't run.

changeCelsiusToFarenheit()

changeFarenheitToCelsius()

changeKmtoM()

changeMtoKm()

changeCelsiusToKelvin()

changeKelvinToCelsius();

defaultOutput();

The above function calls are required for the conversion functions to be executed.
The function calls can be written before or after the function declaration.
This is because JavaScript doesn't hoist function declarations. To learn about JavaScript hoisting, check out this article written by me.

Conclusion
Congratulations for reading this article to the end, you should be able to build a multiple unit converter and add to your portfolio. If there are other functionalities or features you'll like to add to the web application, you can add them when building your own project.

Do well to like, share and leave a comment.

Understand Hoisting in JavaScript

ebube samuel nworie — Fri, 01 Sep 2023 18:31:08 +0000

When writing codes, developers often encounter errors. When you execute a variable, function or class before actually initializing it, the code can output a different result other than what was expected or the JavaScript interpreter can throw an error and this can lead to developers spending a large amount of time trying to debug the code. In this article, you'll learn about JavaScript hoisting. A behavior peculiar to JavaScript.

Prerequisite:
Before proceeding with reading this article, you must have a basic understanding of JavaScript.

Table of contents

What is hoisting
Characteristics of JavaScript hoisting
How variables are hoisted in JavaScript
Function hoisting
Function Declaration
Function Expression
Class hoisting
How to use hoisting when coding
Conclusion

What is Hoisting?
Hoisting in JavaScript refers to the behavior of the JavaScript interpreter to move the declaration of a variable, function, class or import to the top of the scope they were declared in before executing the code assigned to them.

Characteristics of Hoisting
Hoisting is a concept that does not occur in all programming language because in most programming language, the item must be declared before it is used otherwise there will be an error but JavaScript allows hoisting. Hoisting means the interpreter recognizes the declared data even though the data was not initialized at first.

Note: The data declared must be executed within the scope of declaration. In the latter sections, you'll have a better understanding of this concept.

The following are characteristics of JavaScript hoisting:

A function can be used in a scope before the line the variable was declared
A variable can be used before the referenced line, the interpreter throws an undefined and not an error
The declaration of the variable can cause behaviorial changes in its scope before the line in which it is declared. Source: (MDN doc)

How variables are hoisted in JavaScript
There are three methods to declare variables in JavaScript: either using var, let or const. JavaScript hoists variables declared with each method differently. In this section you shall learn how JavaScript hoists the variables declared with these different methods.

Using var keyword
In hoisting, when var keyword is used to declare a variable, the JavaScript interpreter doesn't throw an error rather it returns undefined.

var myAge = 56;
console.log(myAge);
//56

console.log(myAge)
myAge = 56
//undefined

Consider these two code samples above, in the first code sample, 'myAge' was declared before it was used, and it gave an output but in the second code sample, 'myAge' was used before it was declared, it returned undefined.

In the second code sample, the JavaScript interpreter carried the declared 'myAge' variable to the top and returned undefined because when the interpreter carried the 'myAge' variable to the top, it assigned it to no value, because it was not initially declared first, thereby returning undefined.

The undefined that was returned by the JavaScript interpreter is not an error, rather it is an undefined string, which means that the JavaScript interpreter noticed that 'myAge' was declared but because it was executed before being declared, the JavaScript interpreter hoisted the 'myAge' variable but assigns it no value which made the interpreter return the variable as undefined. An undefined data is a data that was declared but not assigned to a value.

Now consider another code sample where the variable was not declared to check if JavaScript will throw an error or return undefined as in the previous code sample we looked at.

console.log(hisAge);
var myAge = 56;
//hisAge is not defined

The code above shows an 'hisAge' variable being used but not declared. The JavaScript interpreter goes through the entire global scope and doesn't find any variable declared as 'hisAge' so it throws an error saying 'hisAge is not defined'.

Note: The JavaScript interpreter will only hoist variables that are defined within the same scope of usage.

Using let keyword
When let keyword is used to declare a variable, JavaScript hoists the variable quite differently from that of the var keyword.

console.log(myAge);
let myAge = 56;


//Cannot access 'myAge' before initialization

Consider the above code sample where let was used to declare the variable. You'll notice that the JavaScript console displayed 'cannot access myAge before initialization'. This is because JavaScript knows that myAge variable was declared in the code but when the interpreter reads the code, it hoists 'myAge'and declares that we can't access it unless we declare it first. Unlike the var method of declaring variable, which returns undefined. Let method of declaring variables wouldn't return anything rather JavaScript had to let you know that you can't execute the variable unless you declare it first. This attribute of JavaScript is called Temporal Dead Zone. The Temporal Dead zone starts execution of the code at the beginning of the declared variable's scope and ends the code execution when the variable is declared using the let or const keyword.

Using const keyword
The const keyword used in declaring a variable is similar to using the let keyword except that when using const keyword, the variable cannot be assigned for another use. In terms of hoisting, JavaScript outputs the same result. Consider the code sample below.

console.log(myAge);
const myAge = 56;
//Cannot access 'myAge'before initialization

In the above code sample, JavaScript throws the same error it threw when we used the let keyword to declare our variable.
The Temporal Dead Zone is also applicable when using the const keyword.

Function Hoisting
In this section , you'll learn about two different ways of writing functions. Function expression and function declarations.

function declaration

declaredFunction(2,3)
function declaredFunction (a,b){
console.log(a+b)         
}


//5

The above code sample contains a function that was declared before it was initialized. However, unlike variables, it neither returned undefined nor returned "cannot access before initialization", but why is that so?
It is because declared functions are not hoisted in JavaScript. You can execute a function in JavaScript before it's initialization wihin the same scope.
This type of functions that are executed before use in JavaScript are called, declared functions. In the next section, you shall learn about expressed functions which can be hoisted in JavaScript.

But before learning about expressed functions, consider the following code samples.

oneScope()
anotherScope()


function oneScope(){
function anotherScope(){
console.log('this is another scope')
}
console.log('this is one scope')
}


//this is one scope
//anotherScope is not defined

In the above code sample, both oneScope() and anotherScope() were called before initialization but oneScope() was executed while anotherScope() wasn't, the reason is because oneScope() was called in the same scope where it was initialized while anotherScope() was initialized in another scope. But consider the following code sample:

oneScope()
function oneScope () {
    anotherScope ()
    function anotherScope () {
        console.log('this is another scope')
    }
    console.log('this is one scope')
}

In the above code sample, anotherscope() was defined in the same scope of initialization and it gave the expected output.

Function Expression
Consider the following code samples, expressedFunction() was called before it's initialization, but JavaScript console threw an error, because JavaScript interpreter sees expressed functions just like variables when hoisting.

expressedFunction ()

let expressedFunction = function () {
    console.log('this is an expressed function')
}

//Cannot access 'expressedFunction' before initialization

let expressedFunction = function () {
    console.log('this is an expressed function')
}

expressedFunction ()

//this is an expressed function

Class Hoisting
Consider the following code sample:

console.log(new jonathanProfile(42, 'Norway'))

class jonathanProfile {
    constructor(age, country) {
        this.age = age;
        this.country = country;
    }
}


//Cannot access 'jonathanProfile' before initialization

In the code sample above, JonathanProfile class was called before initialization JavaScript threw the same reference error, it threw at let, const and expressed functions.

From the above code sample, you'll realize that JavaScript interpreter knew that that JonathanProfile class was initialized later in the code but because it was not declared initially, JavaScript had to throw a reference error.

The code below shows the code written in the correct order.

class jonathanProfile {
    constructor (age, country) {
        this.age = age;
        this.country = country;
    }
}
console.log(new jonathanProfile (42, 'Norway'))

//jonathanProfile {age: 42, country: 'Norway'}

In the above code, the JonathanProfile class was initialized before it was called.

Conclusion
It's important to know the behavior of each data type when executing a code, now that you're familiar with how JavaScript interpreter hoists codes, you'll write better codes and know the reason behind some of the bugs you encounter when coding.

Please do well to leave a like and a comment

Skills you need to become a frontend developer in 2023

ebube samuel nworie — Wed, 30 Aug 2023 15:43:54 +0000

Introduction
Frontend development is the use of programming languages to develop the visible sections of a web application. According to grabjobs.co, the average salary in Nigeria for a Front End Developer is about ₦102,621 per month and about ₦1,231,452 per annum. There is high demand for frontend developers in the world and the aim of this article is to provide you with a step by step guide on how to become a frontend developer.

Prerequisite
This is a beginner's guide, there is no prior knowledge required to understand this article.

Table of contents

What is frontend development
How to become a frontend developer
HTML
CSS
JavaScript
API integration
CSS libraries and CSS preprocessors
JavaScript libraries / frameworks
Typescript
Version control
Data structures and algorithms
Conclusion

What is frontend development
Frontend web development according to coursera.org is the act of building the frontend portion of web applications using web languages such as HTML, CSS, and JavaScript that allow users to interact with the web application.

How to become a frontend developer
To become a frontend developer, you need to learn the tools needed to build frontend web applications. The tools needed to become a frontend developer are: HTML, CSS, JavaScript, CSS libraries, CSS preprocessors, JavaScript libraries/ frameworks, API integration, version control, data structures and algorithms.

HTML
The very first skill to become a frontend developer is HTML and According to Astari, S.(2023), hostinger.com, HTML stands for HyperText Markup Language and it is a markup language for developing web page structures. HTML is used in creating and structuring the sections, paragraphs, and links of a web page using HTML elements such as tags and attributes.

CSS
The next tool to learn is CSS which according to javatpoint.com, CSS stands for Cascading Style Sheets and it is a style sheet language which is used to customize the look and formatting of a document written in HTML. It provides additional styling feature to HTML. It is generally used with HTML to change the style and look of user interfaces of web pages.

JavaScript
After learning CSS, you must become skilled in using JavaScript and Mozilla developer network defines JavaScript as a scripting language that enables you to create dynamic contents, control the functionality of a website and animate images in the website.

API integration
Learning how to integrate APIs into your web application is a core skill of every professional frontend developer. API stands for Application Programming Interface and is a set of protocols that allow applications to interact with each other. Cleo.com defines API integration as a process of connecting two or more applications by using APIs to exchange data.

CSS frameworks and CSS preprocessors

"A CSS framework is a library allowing for easier, more standards-compliant web design using the Cascading Style Sheets language " according to Wikipedia.org. popular CSS frameworks include bootstrap, Tailwind CSS.
and according to raygun.com, "CSS preprocessors are scripting languages that extend the default capabilities of CSS. They enable us to use logic in our CSS code, such as variables, nesting, inheritance, mixins, functions, and mathematical operations". Examples of CSS preprocessors are SASS, LESS, and stylus.

JavaScript libraries/ frameworks
A JavaScript framework extends the functionality of JavaScript and most of the JavaScript frameworks provides single page application ability. There are varieties of JavaScript libraries/frameworks which includes, React.js, Vue, Angular, Sveltte etc.

Typescript
Typescript uses the same syntax as JavaScript but extends the functionality of JavaScript codes. TypeScript extends JavaScript and improves the developer experience. It enables developers to add type safety to their projects.

Version control
According to gitlab.com, Version control facilitates coordination, sharing, and collaboration across the entire software development team.

Data structures and algorithms
Data structures are the building blocks of a programming language and algorithms are the methodologies used to solve problems in programming. Use platforms like leetcode and hackerrank to practice data structures and algorithm problems.

Recommendation
There are many courses online to learn the skills both free and paid, but not all courses are recommend, before taking any course check the reviews of others.

Conclusion
In conclusion, becoming a frontend developer takes time and effort, but following this guide will lead you to becoming one and landing a job as a frontend developer.

Best practices to become a job-ready developer in 2023

ebube samuel nworie — Wed, 30 Aug 2023 14:06:40 +0000

Introduction:
Picking a skill to learn is quite easy but becoming job ready with that skill is quite hard because it requires dedication and diligence to perfect the skill, it also requires knowing how to look for job opportunities to land yourself a job. In this article, you'll learn how to become a job ready developer, no matter your tech career field.

Prerequisite:
There is no requirement to reading this article.

Table of contents

Pick the right career path
Use online resources to get a learning roadmap
Get online or offline learning resources
Build projects
Build problem solving skills
Join tech communities
Apply for jobs and internships
Conclusion

Pick the right career path
This is the first step to become a professional in any field, pick a career path that suits what you want to achieve. There are numerous career paths in tech ranging from coding careers to no code careers. Search online to see what the job requirements for your chosen career is.

Use online resources to get learning roadmap
Use online resources like roadmap.sh, blog articles, YouTube videos, or ask professionals in the field to get a definite learning track for your chosen field.

Get online or offline learning resources
After getting a roadmap for your learning, next is to get the learning resources to teach you. There are online platforms both free and paid to access these materials like YouTube, Udemy, edx, Coursera, codecacemy, freecodecamp etc. Ensure you check the reviews of the course before learning from the material.

Build projects
The best way to get a hold of the knowledge you've learnt is by building projects. Build as many projects as possible and add them to an online portfolio such as GitHub, behance, netlify to enable potential employers see what you've done.

Build problem solving skills
Develop your problem solving skills by using online resources like leetcode and hackerrank. Employers look out for candidates with good problem solving skills.

Join tech communities
Joining and volunteering for tech communities is a good way to meet other professionals in your field and get help to land yourself a job.

Apply for jobs and internships
Apply to as many internship and job openings as possible, use platforms like LinkedIn, Twitter and job boards to know when there is a new job opportunity.

Conclusion
In conclusion, become familiar with the required skills needed to become a professional in your field and apply for as many job opportunities as possible.

DEV Community: ebube samuel nworie

Unlock Your Full Learning Potential with Glasp: The Ultimate Study Tool

Introduction

Glasp Highlighting and Annotation feature

Personal Experience when using the highlighting and annotation feature

Benefits of using Glasp annotation and highlight feature:

Glasp’s YouTube videos Summaries Feature

Personal Experience of using the Glasp's Youtube videos Summaries Feature

Benefits of using the Glasp's YouTube Video Summary Feature

Enhanced Learning Experience

Conclusion

"Mastering Google Chrome: A Comprehensive Guide for Mobile Users"

What is Google Chrome

Why Google Chrome?

Installation

How to Use Google Chrome

Google Chrome Alternatives

Understand how to filter an array of items using php -part1

Introduction

Prerequisites:

Table of Contents:

Body:

Conclusion:

Build a Todo-list application with JavaScript | A comprehensive guide

Build a multiple unit converter with JavaScript

Understand Hoisting in JavaScript

Skills you need to become a frontend developer in 2023

Best practices to become a job-ready developer in 2023