Forem: Idukpaye Osazuwa

Javascript Functions Explained to a Five-Year-Old

Idukpaye Osazuwa — Fri, 22 Dec 2023 10:40:56 +0000

The Javascript Function Sandwich

The thing about knowledge is that it is not in one place like you can read one mathematics textbook on geometry and expect to be god, different textbooks bring different things to the table. (Geometry is not easy)

Anyway, in this article, we are doing the impossible by providing a comprehensive guide of functions with exercises and more, I promise even if you are a five-year-old reading this, you will learn a lot just trust me, OK.

What is a Function???

You have seen functions in maths and programming, right? Well, they are the same. In anywhere, a function is something that takes in input and returns output. What is passed into the function is called an argument, e.g. Imagine a function that takes in 2 numbers and adds them or squares them or one that checks if you are going to follow me (that would be nice though), just imagine, a function could be ANYTHING.

Coming Back to Javascript?

Now, let’s relate everything to Javascript, how do we declare functions? We can declare functions, in the simplest way using the function keyword, (Although that's not how the cool kids do it these days, we will get there.)

    function addTwoNumbers(x, y){
            console.log(x + y)
    }

Our function is very simple, it takes two numbers x and y, and prints the result. (The two numbers it takes are called arguments, bet you forgot). I know it is quite early but try to make an age calculator (basically takes in years and returns them in days)

Why are getting undefined from our function? well, you might know but we will come back to this later.

Function Scoping ()

Listen up, well uh I mean read up, A scope is like an environment. (Note env is the same as environment in this article)

    let followers = 6

This is the default env, we assign a variable to followers and it is easily accessed from anywhere in our program. This env is called the global scope but functions have their env called the local scope and this local scope is local i.e. it is only accessible through our function and our function alone. It sounds simple but when we get to more complex stuff like closure make sure to remember this alright.

    let followers = 10000
    //One Day we will get there
    function back_to_reality(){
    let followers = 6
     console.log(followers)
    }
    back_to_reality()

What is the output of this code? 10000 or 6. Well, the answer is 10000 why? just kidding the answer is 6 because functions have their own environment rather scope, it only sees the followers it knows, the one which is defined inside of it.

Functions as Values

We defined a function as something that takes in input and returns a value right? Our function isn't returning a value which is why we that undefined in the console.

    function addTwoNumbers(x, y){
            console.log(x + y)
    }

Remember this function, well we are going to assign it to a variable and try to access it.

    let you = 1
    let followers = addTwoNumbers(you, 6)
    console.log(followers)
    // -> Result is undefined

The result is undefined, when your functions do not return anything you can’t use it as a value. On the contrary, to make our functions return a usable value that we can store in a variable, we use the return keyword.

    function addTwoNumbers(x, y){
            return x + y
    }

    let you = 1
    let followers = addTwoNumbers(you, 6)
    console.log(followers)
    // -> Result is 7

The Call Stack

The Call stack is quite complicated and honestly, I do not fully understand it myself. Now, let’s imagine you had a to-do list of tasks you wanted to do, and every time you finish one task you remove tasks from the list. (unless you like working ) but what if you are doing one task like buying bread and before you buy bread you need to get money from your mom, so you get money from your mom and then buy the bread right? The Call Stack is like a to-do list for functions, look at the following code.

    function buybread(money){
        const get_money_From_Mom = getMoney() 
        console.log('The Bread has been brought.')
    }

The Call Stack when this function is called goes like this, firstly, It calls the **buybread *function and realise that hey, before I can finish this function I need to call another function (which in this case is **getMoney()*) and then finishes with the rest of the function.

You might the wondering, why the heck am I learning this boring theory? why? well, when learning something as confusing as recursion, you will find it invaluable.

Javascript Closure

Prepare yourself this is an advanced javascript topic but we will try our best. Now, jokes apart we talked about function scoping a few minutes ago right? Now, we going to take it one step further.

The Essence of that lesson was to show that a function has a scope and the variables inside it are private right? Now what happens when the function is called every time, it means, it means that those variables are, are, (complete it for me), created every time they are invoked.

The fact that they are created every time brings an interesting question. What happens to the LOCAL variables when the function call that created them is no longer active? do the variables disappear? Nope! let’s take an examples

    function countFollower (name){
        let newFollower = name
            //closure function
        return {
            register(){
            console.log(`${newFollower} have followed Tech Upfront`)
        }
       }
    }

In the above code, we do the following:

Assign variable newFollowerto the argument name
Return a function that runs for every instance when the newFollower variable is created
You might be saying, which instance? I did not get it. Calm down and take an example.

    let follower = countFollower('You')
    let newFollower = countFollower('Your Friend')
    follower.register()
    newfollower.register()

The Output is:

    "You have followed Tech Upfront"
    "Your Friend have followed Tech Upfront"

Simply put, a closure is a function that runs on every instance when the local variables are created. Now, when we start talking about instances don’t act confused.

Exercises on Closure

Now, honestly, I do not expect you to understand anything I have said easily, remember learning is a race, it is not about who starts it but who finishes it, do not give up on whatever you are learning! Answers are at the bottom of the article hopefully.

Exercise One: The Simple Counter

This is what you are to do:

Write a function that accepts a number n as an argument
Define a function, increment that runs on the INSTANCE the variable is created and the function should increment the the value of n
That’s all, start working.

Exercise Two: The Complex Counter

This is what you are to do:

Write a function that accepts a number n as an argument
Define 3 three functions: increment, decrement, and reset
Note: they should be on the INSTANCE (couldn’t stress this enough), and the variable is created.
They should increase, decrease, and reset the numbers respectively.

Exercise 3: A function that accepts two numbers and picks the lower one.

Exercise 4: A function that accepts a number and returns true only if it is an even number.

The Way Cool Kids Define Functions

Arrow Notation

    function addTwoNumbers(x, y){
            return x + y
    }

It is quite boring, it can be defined like this:

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

Do not over-react, there is nothing there, functions can be defined like this

    () => {
     return 'Hey , i am a no name function'
    }

So we give the no-name function a name and suddenly we have

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

Recursion

This is a complex topic, I wanted to include it in the article but sorry next time, I’m too tired and I do not want to confuse you more than I have already done. Thanks for reading, I spent two days writing this, it means a lot.

Solutions to Exercises (only 1 )

    let createCounter = function(n) {
        return () => { 
         n++
       }
    };
    /** 
     * const counter = createCounter(10)
     * counter() // 10
     * counter() // 11
     * counter() // 12
     */

Use the Concept of Number 1 to do Number 2 because they work on the simple principle which is closure (that INSTANCE I talked about before). Numbers 3 and 4 are basically if checks, oops I shouldn’t have said or written it.

6 New Syntax Changes in Web Development

Idukpaye Osazuwa — Sun, 20 Aug 2023 11:53:41 +0000

Web Development has seen some interesting changes lately. HTML, CSS, and Javascript have gotten some nice updates and that's exactly what we are going to talk about in this article.

A New HTML Tag

Making Modals and pop-ups hasn't always been an easy thing to do. First, you will have a backdrop then the modal, and some hacked-up javascript and CSS. I'm happy to tell us that this new HTML makes the modal way easier. It is called the tag and as the name suggests it is used for making dialogs.

<dialog open>
<!---The open Attribute make it show by default 
   otherwise it is hidden --->
  <h1>Hey Guys</h1>
   <form method='dialog'>
   <!-- We can now use a special method of dialog to close the modal-->
        <button type='submit' class='btn' >Close the Modal</button>
    </form>
</dialog>
<button class='btn' >I am Just a Random button</button>

CSS Nesting

If you have ever used sass/scss before you will know that nesting CSS properties is such a powerful tool. Nesting allows you to style related properties e.g let's say we want to style the button with a class of '.btn' and it should only apply to the button inside the . Well can nest it like so,

dialog {
 color:red;
 .btn{
  padding:10px;
  color:red;
  }
}
/* Now this will only style the button inside the dialog, 
is the syntax not just clean */

Individual Transform Properties

Back in the day transform used to look like this:

 .some-element{
 transform:scale(1.1), translateX(20px), rotate(45deg)
 }

But now, we have Individual Transform Properties so it looks like this

.some-element{
scale:1.1;
translateX:20px;
rotate:45deg;
}

Color Mixing

It is possible to now mix two colors in CSS, using a new function. Let's say we want to mix red and yellow it goes like this:

.some-element{
color:color-mix(in srgb, red, yellow);
/*The Color Will Be Orange 🍊*/
}

Javascript Changes

New Array Method

Getting the last element in the array has been somehow weird. Let me explain, let's say we have an array like so:

const arr = ['red','blue','green']
/*To get the first element we say*/
console.log(arr[0])
/*But to Get the Last we can't say just -1 we use: */
console.log(arr[arr.length -1]]

Isn't it somehow weird right? So with the new array method, it looks like this

const arr = ['red','blue','green']
/*First element*/
console.log(arr.at(0))
/*Last Element*/
console.log(arr.at(-1))
/* it allows us to use -1 */

New Immutablity Function

const arr = ['red','blue','green']
const copy = arr

What is the problem with this code? The problem is that if you change the arr you will also change the copy as well, so it is not really a copy but a reference. To fix this you use structuredClone

const arr = ['red','blue','green']
const copy = structuredClone(arr)

Now, this creates a real copy, and changing it does not alter the original array.

Conclusion

That was the various new changes that you should be aware of. If you enjoyed this article consider supporting me on https://www.buymeacoffee.com/alex03 otherwise make sure to like and drop a follow

"Secret Weapons: 10 VS Code Extensions You Didn't Know You Needed"

Idukpaye Osazuwa — Sat, 08 Apr 2023 22:09:31 +0000

When working in visual studio code there are certain extensions that can make life easier and can make you complete a task in a short period of time. Welcome to 10 visual studio code extensions that simply make your life way easier.

1. Live Server
This is by far one of the most important extensions especially when you are just getting started with web development. It simply allows making it possible when you save your HTML file it automatically refreshes in the browser.

2.Debugger for Chrome

This one is also very useful because allows you to debug JavaScript in the Chrome browser.

3.Prettier

This one has saved a lot of time. It formats and arranges your code properly so you do not have to do it manually with spaces and tabs.

4.Path IntelliSense

We all know that remembering file names can all be challenging well not anymore, this extension autocompletes file names for you as you type, saving you time and effort.

5.Auto Rename Tag

There are sometimes when you mistakenly a wrong HTML tag and you want to change it, you will have to rename both tags but with this extension, you rename the opening tag and it automatically renames the closing one. It feels so nice!

6 Console Ninja

It allows see console.logs in visual studio code, you will definitely find the one useful if you are a javascript developer!

7. GitLens:
This extension makes you more efficient when working git and it is literally called git supercharged.

8.React/svelte/vue/angular
You are going to need to download an extension for the framework you use, whether that being React, svelte, etc because it will massively make your life easier!

9.IntelliSense for CSS class names
This extension provides autocomplete suggestions for class names in your CSS, saving you time and effort.

10.npm
This extension Integrates with the npm package manager, allowing you to install and manage packages directly from Visual Studio Code.

Bouns

Frontend Mentor QR Component

Idukpaye Osazuwa — Sat, 11 Feb 2023 11:50:26 +0000

Hey, guys welcome to this step-by-step tutorial on how to build a preview card component. Without wasting time let's jump right into it. To get started download these starter files. Make sure you signup/signin to frontend mentor if necessary.

In case you want a video tutorial: Check out mine

Getting Started with the HTML(study it carefully)`
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">

  <title>Frontend Mentor | QR code component</title>

<link rel="stylesheet" href="./style.css">
</head>
<body>
  <div class="container"> <!---Always good to have coontainer, it will 
help us center it!
!--->

      <div class="card">
          <div class="card-img">
            <img src="./images/image-qr-code.png" alt="">
          </div>

          <div class="card-content">
            <div class="card-title">

         <h3> Improve your front-end <br/> skills by building projects</h3>

            </div>
            <div class="card-body">
     <p>
      Scan the QR code to visit Frontend Mentor and take your coding skills                               to the next level
     </p>    
            </div>
          </div>
      </div>

  </div>


<!--- Attribution not required!--->
</body>
</html>

/* From style Guide and it's for the font */
@import url("https://fonts.googleapis.com/css2family=Outfit:wght@400;700&display=swap");
/* It centers the card in the dead center */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
/* Some basic card styles */
.card {
  width: 300px;
  background: white;
  padding: 15px;
  border-radius: 20px;
}
/*Helps us control the image*/
.card-img img {
  height: 300px;
  border-radius: 20px;
}
/* Applying a bacckground and font */
body {
  background-color: hsl(212, 45%, 89%);
  font-family: "Outfit", sans-serif;
}
.card-content {
  text-align: center;
  padding: 10px;
}

.card-body {
  color: hsl(220, 15%, 55%);
}
h3 {
  font-size: 22px;
}

Build a CSS Preview Card Component

Idukpaye Osazuwa — Sat, 10 Sep 2022 10:12:46 +0000

Hey, guys welcome to this step-by-step tutorial on how to build a preview card component.
Without wasting time let's jump right into it. To get started download these starters files. Make sure you signup/signin to frontendmentor if necessary.

Getting Started with the HTML(study it carefully)

<main>
<div class='container'> <!-- Always Good to have a container -->
<div class='card'> <!-- for the actual card. div--self explantory -->
    <div class='left'></div> <!-- space for background image. -->
    <div class='right'>
            <h4>
              Preview
            </h4>
            <h1>
              Gabrielle <br> Essence Eau <br>De Parfum
            </h1>
            <p>
              A floral, solar and voluptuous interpretation 
              composed by Olivier Polge, 
              Perfumer-Creator for the House of CHANEL.
            </p>
            <div class="text-container">
              <span id="big-text"> $149.99</span>
              <span id="small-text">$169.99</span>
            </div>
            <button>
               <img src="./images/icon-cart.svg" alt="">Add to cart
            </button>
    </div>

</main>

The CSS Code

body {
  background-color: hsl(30, 38%, 92%);
  /*you can find the color in the style-guide.md*/
  font-family: system-ui;

}

.container {
  /*This set of styles will center everything in the container(in this case the card)*/
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.left {
  width: 50%;
  height: 450px;
   /*Adding the background image */
  background-image: url("./images/image-product-desktop.jpg");
  background-position: center;
  background-size: cover;
  /*Rounded corners at specific locations*/
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.right {
  width: 50%;

  margin-left: 20px;
}
.card {
  width: 600px;
  /*Remember that body is not white;this makes the card stand out*/
  background-color: #fff;
  display: flex;
  /*Rounded corners at specific locations*/
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
/*The text container contains the $169.99 & $149.99*/
.text-container {
  display: flex;
  align-items: center;
  width: 70%;
}
/*Self Explanatory*/
h4 {
  letter-spacing: 3px;
  color: grey;
}
/*Self Explanatory*/
p {
  color: grey;
  line-height: 25px;
}
/*Self Explanatory*/
#big-text {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 20px;
/*Remember that this color can be found in the style-guided.md*/
  color: hsl(158, 36%, 37%);
}
/*Self Explanatory*/
#small-text {
  color: grey;
  text-decoration: line-through;
}
button {
/*when styling a button remember that the padding is very important*/
  padding: 15px 20px;
/*stripping away browser defaults*/
  border: none;
  outline: none;
  color: #fff;
  /*Remember the button has an Image*/
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: hsl(158, 36%, 37%);
  /*because we are giving the .right div margin:20px therefore width:80%*/
  width: 80%;
  /*Rounded Corners*/
  border-radius: 10px;
}
/*The image inside the button*/
button img {
/*This will adjust it a lit bit */
  padding-right: 10px;
}
/*This styles will on apply to devices below 600px*/
@media (max-width: 600px) {
  .card {
    flex-direction: column;
    /*Changes the layout of the card*/
    height: 600px;
  }
  .right {
    width: 80%;
    /*becuase of the margin 80% not 100% for mobile*/
  }
  button {
    margin: 10px;
  }
  .left {
    /*changing the product image*/
    background-image: url("./images/image-product-mobile.jpg");
    background-position: center;
    background-size: cover;
     /*border radius configuration*/
    border-bottom-left-radius: 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    width: 100%;
    height: 300px;
  }

  br {
    display: none;
    /*this will make our br tags disappear*/
  }
  #big-text {
    margin-bottom: 10px;
  }
}
/** Happy Coding!**/

Conclusion

IF YOU LIKED THE POST, THEN YOU CAN BUY ME MY FIRST COFFEE EVER, THANKS IN ADVANCE.

20+ React Libraries to Jumpstart your next project

Idukpaye Osazuwa — Sat, 10 Sep 2022 10:00:13 +0000

In the universe of npm, there are a lot of packages to choose from, so knowing which one to choose from can be very difficult. In This article, we will first look at the categories of libraries which are server-side-rendering, animation,state-management, and General Utilities and we will then look at the packages under these categories.

1.General Utilities

The npm packages in this category are just packages that are helpful so few specific tasks and you may eventually need them. The packages in this include:

moment.js -- very good for working with dates
Axios -- good for handling async tasks
React-hot-toast, React-toastify — handling small notifications and toasts
react-icons," @mui"/icons-material — For icons
react-paginate — For pagination
React-share — Share things Socially
React-slick, react-responsive-carousel — For Carousel
clsx — For conditional classes
react-intersection-observer — For intersection
react-dropzone — For file upload and drag and drop

2. Animation

Bringing animation to your site just makes it more fun and pleasant for your viewers. That being said, the packages under animation include:

GSAP
Framer motion
React-spring
Anime.js

3. State Management

Sometimes the data in your React.js application can be very difficult to manage effectively and the React content API isn't just good enough. That being said, the packages under state management include:

Redux
Redux Toolkit -- my personal favourite
Recoil
Mobx
React Context -- not recommended for big projects

4. server-side rendering

if you are building a highly optimized robust website you will need an SSR framework because they make routing easier, they fetch data on the server and return to the component, they optimize images so it doesn't bottleneck performance, and much more. That being said, the packages under server-side rendering include:

Next.js
Gatsby.js -- for only SSG (static site generation)
Remix

Conclusion

if you enjoyed please do not forget to drop a follow and a reaction and follow me. IF YOU LIKED THE POST, THEN YOU CAN BUY ME MY FIRST COFFEE EVER, THANKS IN ADVANCE.

10 React Principles, Concepts Every React developer Must know

Idukpaye Osazuwa — Sat, 10 Sep 2022 08:55:36 +0000

React is not easy; there are so many concepts and principles to know. Welcome to 10 React concepts, terms, and principles every React developer Must know.

1. create-react-app

This is one of the most popular ways to get started with a React application. This is quite a CLI; it is more advanced than you think but basically, this is how we create a new application:

npx create-react-app [name of your app]

as a bonus; if you want to add typescript, it's really simple:

npx create-react-app [name of your app] --template typescript

As I previously said, there is way more to it. Check out their official documention.
Once you've created a new React app you wil start writing something called JSX instead of HTML.

2. JSX

This stands for Javascript and XML. It is basically a way for us to insert javascript and dynamic values into our HTML. JSX is the fundamental thing that makes React a declarative framework. Now you know what JSX is, you are ready to start creating components.

3. Class-based Components

These are the old kind of components (introduced in React 16.8); they use classes to define components.

class Clock extends Component{
// Application Code //
}
export default Clock

The problem with the class-based components is that they are deprecated and very hard to learn for beginners. This brings us to another type of component.

4. Functional Component

These components are defined by a simple function and are more modern to write (introduced in React 17).

function clock(){
// application data //
}
export default Clock

These components are easier and cleaner to write, but there is one just big limitation. Functional components by themselves can not do most of the important things class-based components can do such as store state etc. This brings us to another concept.

5. Hooks

Because functional components can't do most of the things a class-based component can do such as hold data and etc. Hooks are a way to extend the functionality of a functional component. The most important one is -- which is yet another concept.

6. `useState` hook

This is undoubtedly the most important React hook, In fact, functional components are useless without them. Its function is to create state(which is reactive data) for functional components.

const [sampleState,setSampleState] = useState('I am a sample state')

The usestate hook by itself is not totally complete. So it is frequently used with another hook.

7. `useEffect` hook

That hook is no other than the useEffect hook. This hook is very confusing, but it's basically used to run code on a specific condition.

useEffect(() =>{
// some logic
},[condition])

8. props

Now we've looked at how components store internal data(useState); let's look at how components share data with each other; Well, they do so using props. Let's briefly look at how they work.

function body(){
<nav color='red' /> // the color is the prop
}
// now let's receive that data inside the nav component
function nav(props){ // destructing is possible but let's keep it simple
const color = props.color
}

9. Higher-Order-Component

A higher-order component is an advanced technique in React that is used for supercharging and reusing components. it takes a component as its argument and returns something else

const EnhancedComponent = higherOrderComponent(WrappedComponent);

10. key

To render a list of data effectively; we assign a unique ID to each item in the list. That is called a key.

Conclusion

I really hope you enjoyed the article and found it useful if so, please leave a reaction and comment down your own unique React Concept

5 JS Concepts you should know before Learning React

Idukpaye Osazuwa — Tue, 06 Sep 2022 18:41:36 +0000

Reactjs is by far one of the most popular javascript frameworks to learn in 2022, but for you to learn Reactjs(or any other JS framework) you need the following prerequisites. The basic ones are HTML, CSS, and JS(obviously) but in this article, we are going to go one step further and look at what you exactly need to know in Javascript to grasp Reactjs properly, easily, and efficiently.

1. Array Methods

Arrays are one of the most important ways of storing data in javascript; hence there are so many array methods. In React,(or any javascript framework) arrays methods are used all time, knowing them earlier will give you a strong foundation in Javascript and React. Array methods you should know:

The map Array method -- very common
The filter Array method -- very common
The find Array method
The reduce Array method

Do not worry if you do not know all these array methods. Check out MDN to help out.

2. Async Javascript and promises

This one is also equally important. In React(or any other javascript framework), you may be required to make requests to a server and that's where async Javascript comes in. Make sure to learn async and await, which is just a new syntax (ES8) that makes writing async javascript easier and cleaner.

Helpful articles to learn Async Javascript

MDN
geeksforgeeks or try out this nice video series

3. Proper Understanding of Destructing

This is used a lot in React for things like hooks and etc. Destructing is just basically a way to unpack values from arrays into distinct variables. Consider this example:

//Array destructing
const numbers = [1,2]
const [a,b] = numbers;
console.log(a)
// expected output:1
console.log(b)
// expected output:2
//Object destructing
const numbers = {a:1,b:2}
const {a,b} = numbers;
console.log(a)
// expected output:1
console.log(b)
// expected output:2

In array destructing, what happens was that we made an array of numbers and destructed the values into the variables a and b, and the same is true for object destructing. That was a brief and basic tutorial to destructing.

4. Functions

You might be reading this and thinking "I already know functions".Functions are way more complicated than you think, but for you to learn React you do not need a crazy knowledge of functions. Make sure you understand arrow functions properly because they are used a lot. If you don't, check out this MDN post to help you out

5. ESM Modules

This is not that important but it is still worth learning. ESM Modules is just a cleaner and easier way of importing your files and other stuff in your Javascript apps. ESM Modules is available to vanilla javascript; so it is not special to any javascript framework.

Conclusion

Those are the concepts that I recommend you learn before learning any javascript framework in my opinion. If you enjoyed it, please leave a reaction, follow me for more, and support me if possible. Thank you for reading!

Progressive Web Apps: Let’s Make Something Installable

Idukpaye Osazuwa — Tue, 06 Sep 2022 18:32:11 +0000

A Website with The Right Vitamins

What is a PWA

A Progressive Web App(PWA) is a type of application that exhibits native app-like features, A PWA is installable and has offline support and it is fast than noarmal. A PWA, as I like it to say is a website with all the right vitamins. In this tutorial, we will build a simple PWA that is installable and can work offline.

Let’s Get Started

So create an index.html file, and in the head tag gives it a special link tag to a manfest.json file — we need to file to tell the browser that this is a PWA. I am using materlize.css so I get a nice navbar style.

We need some icons at least these sizes, 192*192,512*512, or else you can’t have a PWA. Therefore in the manfest.json file let’s fill in the necessary configurations for our PWA.

Let’s break it Down!

The ‘name’ property is the name of the application, the description is simply the description of the app, while we have an array of our different icons, (192*192,512*512). The ‘start_url’ is where the application will start from, The ‘display’ property is how we want our app to be displayed — it is set to standalone which means it opens without the browser. Finally, the ‘theme_color’ is simply the color of the borders of the application.

Registering A Service Worker

What we have to do next is to register a service worker; when we register a service worker we can stop requests and cache files for offline use. ServiceWorkders run on a separate javascript thread, and they are very powerful, so we can only use them on **https://,**but the only exception is localhost. In the main.js, which I linked up to the index.html, that is where we will register the service-worker.

So make a file called sw.js. Then, we are going to make an array of the files we want to cache for offline use.

Service-workers have a life cycle, they don’t just run for every page refresh, they are installed and activated. So let’s cache all our important files for offline use to do this let’s listen for the install event.

So what are doing is simply listening for the install event, and self is automatically available to us, because this is a registered service-worker file.

So now, we listen for the fetch event, and we try to respond with what is in the cache or we default fetch that request. That is it. By now, you should have a fully functional installable PWA. Thank you for reading.

PS

IF YOU LIKED THE POST, THEN YOU CAN BUY ME MY FIRST COFFEE EVER, THANKS IN ADVANCE.

What is the difference between SSR, ISR, CSR, SSG

Idukpaye Osazuwa — Tue, 30 Aug 2022 14:32:43 +0000

Introduction

SSR, ISR, CSR, and SSG are called rendering modes because they are the different ways in which web apps render each other. In this article, we will look at each of them in detail and talk about the type of web technology/framework utilizing each of them.

CSR

CSR stands for Client Side Rendering. It is a process where the page is loaded on the client's browser rather than on the server. CSR is a rendering mode in which the browser sends a request to the server and the server responds by sending an empty HTML page with only a reference to your JavaScript bundle and your CSS styles.CSR apps are called Single Paged Applications

How does CSR work?

Initial Request from the browser
The server responds by sending back an empty HTML page with only a reference to your JavaScript bundle and your CSS styles.
The browser then starts downloading the JavaScript of the page.
The browser then executes the JavaScript.
The page is now interactive.

Advantages of using CSR

Mobile app feel -due to the navigation performance of the app; it has a mobile app feel
Great with Progressive Web Apps - Client Side Rendered applications work great with PWAs because the code can be entirely rendered on the browser.
Quicker navigation of the website - CSR offers quicker navigation between pages because no new HTML file has to be downloaded

Main disadvantages of using CSR

Not good for SEO - CSR is not good for SEO because it takes time to convert JavaScript to HTML, and also because the response gotten from the server is an empty HTML page with only a reference to a JavaScript bundle and CSS styles.

When to use CSR

When your application has large and dynamic data.
When your application has a very complex UI with many pages / features.

Examples of Client-Side Frameworks

React
Vue
Angular

SSR

SSR stands for Server Side Rendering. SSR is a procedure where rendering is executed by the server. It is a rendering mode in which the client sends a request to the server and instead of the server delivering an empty HTML page, it responds by delivering a fully populated HTML page.

The server will serve the page on demand every single time meaning the HTML is generated on each request.

How does SSR work

Request is sent to the web server by the client.
The browser then connects to the server, which already has the pre-rendered HTML and CSS code for the page.
The server then responds by sending back a fully occupied HTML page.
The browser then downloads the JavaScript of the page which is readily available on the server.
The browser then executes the JavaScript.
The page is now fully loaded and interactive.

Advantages of using SSR

Good for SEO - Since Server Side Rendered pages have a faster initial page load time, search engine bots can crawl and index pages very well.
Amazing User Experience - Since SSR pages have a faster initial page load time, they provide a good user experience.
No slow internet connection barrier - If a user has a slow internet connection, he/she can view the rendered HTML page while the JavaScript is processing.

Main disadvantages of using SSR

Server cost - SSR applications often need bigger and powerful servers to provide high performances which often lead to high expenses in acquiring and maintaining the servers.
The complexity of deployment and hosting - Configuring your app to work in a different environment on a server can be difficult
Slow page transitions.

When to use SSR

When you want good SEO performance.
When you want faster data transmission.
When you have dynamic content.

Examples of Server Side Frameworks

NuxtJs
NextJs
SvelteKit

SSG

SSG stands for Static Site Generator. SSG is a tool that generates a full static HTML website on a CDN(content-delivering network).In SSG the HTML is generated at build time.

How SSG works

At build time before the content reaches the CDN, a SSG or Framework reads content from the files.
The content then gets rendered to HTML based on templates and served to the CDN.
The results are then saved in a directory and laid out to match the source files and keep them available when requests to view the contents are made.

Advantages of using SSG

Blazingly fast - Statically generated websites are blazingly fast because the content of your website is generated as HTML files ahead of time. When a user comes to your application and requests for a certain page, the server will quickly respond and serve it. It doesn't have to generate any HTML, it just serves it.
Easiest to Host.
Great SEO performance.

Main disadvantages of using SSG

Build time - The biggest penalty of SSG is the build time because once the pages are published, the only way to update them is by building the application again which might take some time.

When to use SSG

When you have a lot of static content.
When you want good SEO performance.
When you want a fast website.

Examples of SSG Frameworks
NuxtJs
NextJs
Gatsby

ISR

ISR stands for Incremental Static Regeneration. It is a rendering mode that uses static generation on a per-page basis without needing to build the entire site.

Examples of frameworks with ISR capabilities

NuxtJs
NextJs

Conclusion

I hope you enjoyed it! if you want to support me, please follow me or buymeacoffee here Thanks! Have a nice day

10+ digital skills in 2022 to get you a job

Idukpaye Osazuwa — Mon, 22 Aug 2022 22:10:26 +0000

Introduction

The world is turning out to be increasingly cutting-edge, and the interest in digital skills is ascending too; because we live in a digital period. There are countless digital skills out there in 2022, yet in this article, we will take a look at 5 digital skills that can get you a job, thus some honorable notices to learn in 2022.

1. Coding

Coding means building applications or software. The Average Salary of a programmer varies basically by the programming language he/his uses. Coding isn’t that hard, it’s just about solving problems.

Difficulty: Anyone can start (even young children)
Computing Resources: not much needed, but will increase as you get proficient(min:4GB ram).
Where can I start: Trying Learning Web-development(Javascript)
How can I start: By watching YouTube videos, or buying a paid course online
When will I get a Job: if you are serious; about 6 months, or else 1 to 2ys

2. Video Editing

Video editing simply means using a computer application to improve other people's videos, and making them better.

Difficulty: Easy, but varies on the type of software, some are hard
Computing Resources: Very much needed, because it deals with graphics
How can I start: By watching YouTube videos, or buying a paid course online
When will I get a Job: if you are serious; about 3 months, or else 0.5 to 1yrs

3. Digital Marketing

Digital marketing involves promoting products or services over the internet using technologies over the internet. There are so many chapters in digital marketing as affiliate marketing or email marketing but do our research to know the difference.

Difficulty: It’s not easy
Computing Resources: very little needed
How can I start: Google Digital Garage
When will I get a Job: It Depends

4. Graphics Designing (UX, UI)

This means designing the interface for software applications, hence it is also called user-experience; user-interface:

Difficulty: Easy.
Computing Resources: Very much needed, because it deals with graphics
How can I start: By watching YouTube videos, or buying a paid course online
When will I get a Job: if you are serious; about 3 months, or else 0.5 to 1yrs

5. Content Creation

This digital skill is unique. It requires knowing one or more digital skills in this list and making content on it(which could be writing articles or making YouTube videos). I am a content creator and I create tech-related content.

Remember that you do not need a crazy level of proficiency to create content about something, and it can make you popular on the Internet. You do not need a skill to be a content creator, you can use your creativity to create something useful or funny to watch or read.

Honorable Mentions

Copywriting
SEO && SEO Marketing
Data Science
Data Analytics
Data Science
Data visualization
Social Media Marketing

Conclusion

There you have it! those there are the best digital skills to learn in 2022. Thanks for reading, and please leave a reaction and/or follow me or buymeacoffee here. Have a nice day!

I discovered that the text-editor Atom was built with Electron but no protons

Idukpaye Osazuwa — Tue, 16 Aug 2022 10:09:42 +0000

Forem: Idukpaye Osazuwa

Javascript Functions Explained to a Five-Year-Old

The Javascript Function Sandwich

What is a Function???

Coming Back to Javascript?

Function Scoping ()

Functions as Values

The Call Stack

Javascript Closure

Exercises on Closure

The Way Cool Kids Define Functions

Recursion

Solutions to Exercises (only 1 )

6 New Syntax Changes in Web Development

A New HTML Tag

CSS Nesting

Individual Transform Properties

Color Mixing

Javascript Changes

New Array Method

New Immutablity Function

Conclusion

"Secret Weapons: 10 VS Code Extensions You Didn't Know You Needed"

Frontend Mentor QR Component

Build a CSS Preview Card Component

Getting Started with the HTML(study it carefully)

The CSS Code

Conclusion

20+ React Libraries to Jumpstart your next project

1.General Utilities

2. Animation

3. State Management

4. server-side rendering

Conclusion

10 React Principles, Concepts Every React developer Must know

1. create-react-app

2. JSX

3. Class-based Components

4. Functional Component

5. Hooks

6. useState hook

7. useEffect hook

8. props

9. Higher-Order-Component

10. key

Conclusion

5 JS Concepts you should know before Learning React

1. Array Methods

2. Async Javascript and promises

3. Proper Understanding of Destructing

4. Functions

5. ESM Modules

Conclusion

Progressive Web Apps: Let’s Make Something Installable

A Website with The Right Vitamins

What is a PWA

Let’s Get Started

Let’s break it Down!

Registering A Service Worker

PS

What is the difference between SSR, ISR, CSR, SSG

Introduction

CSR

How does CSR work?

Advantages of using CSR

Main disadvantages of using CSR

When to use CSR

Examples of Client-Side Frameworks

SSR

How does SSR work

Advantages of using SSR

Main disadvantages of using SSR

When to use SSR

Examples of Server Side Frameworks

SSG

How SSG works

Advantages of using SSG

Main disadvantages of using SSG

When to use SSG

Examples of SSG Frameworks

6. `useState` hook

7. `useEffect` hook