DEV Community: Dennis Ng'ang'a Mbugua

React Learning Basic to Advance

Dennis Ng'ang'a Mbugua — Thu, 12 Oct 2023 10:56:50 +0000

Introduction

React is a popular Javascript library useful in creating reusable, component-driven user interfaces for web pages and apps.

How does React work?

React uses its markup language called JSX. JSX makes it easier for React to combine HTML and Javascript Functionality. One of the most powerful features of React is its ability to manage the flow of data throughout the application.

Benefits of JSX

As we have already said, with JSX, you can write Html with Javascript. This has several benefits which include:

It makes your code readable.
It lets you use the full programmatic power of Javascript within HTML.

Note: JSX is similar to the HMTL code that you have already learned. However, key differences between HTML and JSX syntax exist which you will continue to learn as we progress with our learning.

How to write Javascript in JSX?

JSX is a syntactic extension of Javascript, thus you can write Javascript within JSX. To include Javascript in JSX, you need to write your Javascript code within curly braces({}).

Example
{ 'code here is treated as Javascript'}

How is JSX compiled?

JSX is not a valid Javascript, it must be compiled into javascript. The transpiler Babel is a popular tool that is used for this process. Check How transpiler Babel works. Writing a syntactically invalid JSX will make your code fail.

How React renders your code?

Imagine that you need to draw on a piece of paper. You would have to plan and arrange where each of your drawings will go on your paper. But now, you have a magic box that will place your content on the piece of paper. You just need to tell the magic box to take your drawings and stick them on the paper.

Just like you told the magic box to stick your drawings on the paper, React calls a function ReactDOM.render(JSX, document.getElementById('root')). This function is what places the JSX code in its lightweight representation of the DOM. React then uses snapshots of its own DOM to optimize updating only specific parts of the actual DOM.

Conclusion

Thanks for diving into this article! By reading it, you've gained insights into how React creates stunning user interfaces. As we journey through our ongoing series about learning React, I'll be explaining more exciting things. Stay tuned for more valuable information and happy learning!

Written by Dennis Mbugua

Follow me on Twitter X

Object Destructuring in JavaScript

Dennis Ng'ang'a Mbugua — Mon, 21 Aug 2023 11:48:31 +0000

Introduction

As a Javascript developer, you will work with different data types on a daily basis including objects.
Objects help in storing data in a structured manner. Objects can also represent real-world objects like dogs.
When it comes to objects, data is stored in properties, each property having a value.
Therefore, when working with objects in Javascript, you will often need to extract specific properties from an object.
Object destructuring is a syntax introduced in ES6 that provides a net way of assigning values taken directly from an object.
Object destructuring is useful for writing clean and readable code.
In this guide, you will explore object destructuring step by step.'
When you are done reading, you will be able to streamline your Javascript code using object destructuring.

Pre-requisites

Before we continue with this guide, you should have the following requirements:

Basic understanding of HTML AND CSS. Get Started with HTML and CSS
Knowledge of basic Javascript. You can get started with Javascript basics here
Knowledge of how to use the console to write your javascript code learn how to use Google console to run Javascript
Understand basic ES6 syntax including arrow functions

Basic destructuring using assignment operator

Destructuring assignment is a special syntax in ES6 that enables us to extract properties from an object and assign them to variables in one line.

For example, consider the object below:

const  user ={
    firstName: "John",
    lastName: "Doe",
    age:25,
}

In ES5, you could extract properties like this;

const firstName = user.firstName;
const lastName = user.lastName;
const age = user.age;

In this example, firstname would have the value of the string John, lastName would be Doe, and age would have the value of the number 25.

Using ES6 object destructuring syntax, the following is the equivalent code:

const {firstName,lastName,age } = user;

Again, here, firstname would have the value of the string John, lastName would be Doe, and age would have the value of the number 25.

Note: You can extract as many or as few values from an object as you want

Assign variables to properties while destructuring

Object destructuring allows you to assign variables to properties when extracting values.
To do this, put a new name after a colon when assigning the value.

<!-- Javascript code -->
const  user ={
    firstName: "John",
    lastName: "Doe",
    age:25,
}

Here is how you can give a new variable to a property:

const {firstName: userFirstName, lastName:userLastName, age : userAge} =user;

You may read this code as:

Get the value of user.firstName and assign it to a variable named userFirstName.
Get the value of user.lastName and assign it to a variable named userLastName.
Get the value of user.age and assign it to a variable named userAge.

Again the variable userFirstName would have the value of the string John, userLastName would have Doe, and userAge would have the value of the number 25.

Assign variables to nested objects

Sometimes you will work with an object that contains other objects inside it which we refer to as object nesting.
We can use ES6 syntax to destructure values from a nested object.

To achieve this, we will nest johnDoe as an object inside a user object.

const user = {
    johnDoe :{
        age:25,
        email:"johndoe@gmail.com"

    }

};

In the above code, we have a user object that has johnDoe object nested within it.

Firstly, here is how you can extract the values of the object's properties and assign them to variables with the same name:

<!-- Javascript code -->
const { johnDoe: {age, email}} = user;

Secondly, here is how you can assign an object's properties values to variables with different names:

<!-- javascript code -->
const {johnDoe:{age:userAge, email:userEmail}} = user;

Use Destructuring assignment to assign variables from Arrays

Destructuring assignment is not limited to objects. We can also destructure values from arrays just as we have done with objects.
The following example shows how you can use destructuring assignment to assign variables from arrays.

<!-- JavaScript code -->
const myName=  ["Dennis", "John", "Doe"]; // an array of names

Here is how to use destructuring assignment and assign variables from the arrays:

<!-- JavaScript Code -->

const[firstName, secondName,lastName] = MyName;

The variable firstName would have the value of the string Dennis.

The variable secondName would have the value of the string John.

The variable lastName would have the value of the string Doe.

Destructuring via rest elements

Sometimes in array destructuring, you may want to collect the rest of the elements in a separate sub-array.
The rest parameter allows functions to accept an indefinite number of arguments as an array.
read more on rest paremeter in JavasScript.

In the following example, we have an array that contains 3 colors.

const [firstColor,secondColor, ...remainingColors] = ["red", "green", "blue", "yellow", "black"];

when you console.log the variables, the following values are displayed:

console.log(firstColor); // red
console.log(secondColor); // green
console.log(remainingColors); // ["blue", "yellow", "black"]

Variables firstColor and secondColor takes the first and second values from the array. After that, because of the presence of the rest syntax, remainingColors gets the remaining colors in the form of an array.

Use destructuring assignment to pass an object's properties as function parameters

With object destructuring, you can pass object's properties as function's parameters. Doing this ensures your code is readable.

Let me explain how to do this :

Firstly, we have an object personDetails with properties and values.

const personDetails = {
    name:"John Doe",
    age: 25,
    email:"johndoe@gmail.com"

}

Secondly, we define an arrow function showPersonInfo that takes an object with properties name, age, and email as its parameter.
when the function is called, it logs a string that contains the person's name, age, and email.

const  showPersonInfo= ({name, age, email})=>{
    console.log(` My name is ${name}.I am  ${age} years old. contact met via ${email}`);


}

Thirdly, we invoke showPersonInfo function and pass the personDetails object as an argument.
By doing this, you have extracted the name, age, and email properties from personDetails. You now can access and use the properties inside the function's body.

<!-- javascript code -->
 console.log(showPersonInfo(personDetails));   // My name is John Doe.I am  25 years old. contact me via johndoe@gmail.com

Conclusion

I hope you enjoyed this article. You have learned object destructuring which is an important javascript technique. We have learned how to extract specific values from an object's properties.
Along the way, we have understood how object destructuring enhances code clarity by reducing redundancy hence boosting developer efficiency.
I hope you will use this newly gained knowledge as you continue your Javascript journey.

Written by: Dennis Mbugua
Follow me on Twitter

How To Create color Flipper using vanilla Javasscript

Dennis Ng'ang'a Mbugua — Tue, 25 Jul 2023 16:33:18 +0000

Introduction

Javascript is used in creating web pages. Javascript allows adding dynamic behaviour and interactivity user experience.
A colour flipper is a simple interactive tool that changes the background color of the HTML element by clicking a button. With the click of a button, a function is run that generates a random colour on the set Background.
Practice makes perfect and to understand Javascript concepts, one needs substantial time and consistency in practice.
The colour flipper is a basic project and understanding how it works will give you a hands-on- approach to a practical understanding of javascript concepts.
In this article, you are going to dive into a colour flipper project using HTML, CSS, and JAVASCRIPT.
When you are finished, you will have covered the following;

DOM manipulation
Javascript arrays
Math. random()
Math. floor()
Javascript functions

Pre-requisites

Before you dive into this blog, you need to have the following:

Visual Studio Code installed to write your HTML, CSS, AND JavaScript code. Follow this link to Download Visual Studio Code
Working with files. You can successfully create folders, files and navigate through them in VSCode. Get started with this on Mozilla Developer Docs
A web browser to test and view the colour flipper. Google Chrome, Mozilla Firefox, Microsoft Edge, or Safari are suitable choices.

Step 1-Creating Our Files

To get started with creating our colour flipper, we first need to open our code editor and create 3 files index.html, index.css, and index.js.

Step 2- Adding the HTML Code

Inside our HTML file, we will add the following code:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>color flipper</title>
    <!-- css -->
    <link rel="stylesheet" href="index.css">
</head>
<body>

    <!-- HEADER  -->
    <header>
        <h1>Color Flipper</h1>
    </header>
    <!-- MAIN  -->
    <main>

        <div class="container">
            <h2>Background Color <span id="value">#0a0a23</span></h2>

            <div class="button-container">  <!--div containing button-->
            <button id="btn">click me</button>
        </div>

        </div>
    </main>

    <!-- Javascript -->
    <script src="index.js"></script>
</body>
</html>

Let me explain the above code in our HTML file.
The file contains:

Firstly, we have linked our HTML to our CSS for styling.

<link rel="stylesheet" href="index.css">
Secondly, we added script tag to link to the javascript file

<script src="index.js"></script>
A header with the Color Flipper text. This explains what our project is about.
We also created a div container in our main tag that contains an h2 text Background Color and span text of the current body background colour. Also, we have a div that contains a button that changes the body background color style when clicked.

Note: The span and the button tags have unique IDs, enabling us to target them with javascript.

Open your browser and you will see the HTML Output: See the Pen Untitled by Dennis Mbugua (@mbuguadev) on CodePen.

## Step 3-Adding CSS code
So, let us add our CSS code to the index.css file :

/* css reset */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* general styling */

body{
   min-height: 100vh;/* set body min-height to at least 100% viewports height*/
    background-color: #0a0a23;
    color: #fff;
    text-align: centre;

} 

/* --------------  CONTAINER STYLES*
-------------------*/
.container{
    text-align: center;
}
main{
    min-height: 100vh;
    display: grid;
    place-items: center;
}

.container h2{
    margin-bottom: 2rem;
    background-color: coral;
    padding: 1rem;
    border-radius: 10px;
}

/* button styling */
#btn{
    font-family: sans-serif;
    text-transform: uppercase;
    background: transparent;
    color: #fff;
    letter-spacing: 1.2;
    display: inline-block;
    font-weight: 700;
    transition:0.3s;
    border: 2px solid coral;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    font-size: 1rem;
    padding: 0.75rem 1.25rem;
}
#btn:hover,:focus{
    opacity: 0.7;
    background-color: #999;
    cursor: pointer;
}

Using the Css code above, we have done the following:

Reset the default styles using the * universal selector.
Set the body styles to a min- height to 100% of the viewport height.
Center the main content using CSS Grid.
Added styles to the button with ID of "btn" and hover effects.
- After adding the css code, save and refresh the browser for result. Now the page looks like this with CSS styles See the Pen Untitled by Dennis Mbugua (@mbuguadev) on CodePen.

## Step 4-Adding Functionality with Javascript

Now that our HTML and CSS codes are set, it is time write our javascript code.We are going to add functionality to the color flipper.

In our javascript code, we will first need to do the following:

Create an array that contains the HEX color characters.

let hexCharacters = [0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"];

HEX colors values contains combination of 6 characters from the set of 0-9 and A-F. We have stored the characters in hexCharacters variable.

Select our span and button elements using their respective ID.

   const spanValue = document.getElementById('value');
const clickButton = document.getElementById('btn');

We have used the Javascript in built method document.getElementById that helps to retrieve a reference to a HTML element using the element's ID.
The spanValue and clickButton variables stores references to HTML elements with the IDs 'value' and 'btn', respectively.

Now that we are done creating variables, let us add the functions to our javascript code:

   // create an event listener to button
clickButton.addEventListener('click', function(){
    getRandomCharacter(); // call the getRandomCharacter function on click

});

// function to generate HEX value characters
function getRandomCharacter(){

    let hexColorCharacters = "#";  //intial value of of our color value

    for(let i=0; i<6;i++){
        hexColorCharacters +=hexCharacters[generateRandomNumber()];  
    }

    spanValue.textContent = hexColorCharacters; // set the span text content to current background color value

    /*set body background color to  hexColorCharacters;
    it contains 6 random characters generated from hexCharacters array */
    document.body.style.backgroundColor = hexColorCharacters;
}

/*function that generates random numbers
//generates numbers between 0 and 16 */

function generateRandomNumber(){
    return Math.floor(Math.random() * hexCharacters.length);
}

This is what we have done in the above javascript code:

*Step I:
we have created an event listener to our button with the ID "btn".
We want an event( in this case a click event) to happen when the button is clicked.
When the button is clicked, it triggers the function specified.

Step II:
The event listener triggers anonymous function(function without a name), when button is clicked.
Now, inside this anonymous function, we call the **getRandomCharacter()*
function

Step III: What is happening inside the **getRandomCharacter()* function:

In this function, we have a variable hexColorCharacters which starts with "#" (a valid starting character for HEX colors).
when the loop runs, it appends a random HEX characters from the hexCharacters array, forming a complete 6-character HEX color code.

In the for loop, we generate a random HEX color value by selecting random characters from a list of valid HEX characters, which includes numbers 0-9 and letters A-F(as we said above). The loop runs six times, with each iteration appending a new random character to the hexColorCharacters variable, initially set to "#" as the valid HEX color prefix. After completing the loop, the hexColorCharacters holds a complete 6-character random HEX color value. For example("#4B32BD");

The function also:

Sets this hexColorCharacters as the content of the span using textContent.
Sets the background color of the webpage body (document.body.style.backgroundColor) to the generated HEX color. Step IV The function **generateRandomNumber()* utilizes the Math.random() and Math.floor() mathods to generate random numbers between 0 and 15 (hexCharacters.length - 1). We noe use the function to index into the hexCharacters array, and pick a random HEX character.

Here is the complete javascript code in our index.js file:

//  create a variable to store HEX character combination
let  hexCharacters = [0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"];


// Select span and button element using their ID values

const spanValue = document.getElementById('value');
const clickButton = document.getElementById('btn');


// create an event listener to button
clickButton.addEventListener('click', function(){
    getRandomCharacter(); // call the getRandomCharacter function on click

});

// function to generate HEX value characters
function getRandomCharacter(){

    let hexColorCharacters = "#";  //intial value of of our color value

    for(let i=0; i<6;i++){
        hexColorCharacters +=hexCharacters[generateRandomNumber()];  
    }

    spanValue.textContent = hexColorCharacters; // set the span text content to current background color value

    /*set body background color to  hexColorCharacters;
    it contains 6 random characters generated from hexCharacters array */
    document.body.style.backgroundColor = hexColorCharacters;
}

/*function that generates random numbers
//generates numbers between 0 and 16 */

function generateRandomNumber(){
    return Math.floor(Math.random() * hexCharacters.length);
}

Give yourself a part on the back for the great work. Now that we have completed our code, click the button to start playing with the color flipper.

See the result in codepen

See the Pen
Untitled by Dennis Mbugua (@mbuguadev)
on CodePen.

Conclusion

You have successfully created a color flipper that changes the background of our page on the click of a button.
With this Javascript project, you have learnt how to generate random numbers using Math.random() and Math.floor() methods. Along the way, you have learnt Javascript DOM manipulation and how to write reusable code with Javascript functions. It is my hope that you will use these concepts in your next project.

Let me know how you felt about this on Twitter

Written by Dennis Mbugua

Understand let, var and const keywords

Dennis Ng'ang'a Mbugua — Sun, 09 Jul 2023 08:54:32 +0000

Introduction

The best measure for growth in any area of life is the ability to embrace change. Everyone feels productive when trying new things, and becoming adventurous gives that sense of confidence.

Now in the life of any software developer, change is inevitable. Often, it is hard. Why? Because technology is fast-evolving, new languages and updates are constantly released. Being a developer is signing in to becoming a life-long student.

This article is neither meant for motivational speaking nor change discussion. We will explore ECMAScript2015, known as ES6. ES6 is the ECMAScript language specification standard's 6th and most significant edition.
With ES6, you can write Javascript with simple code, increasing readability.

Pre-requisites

Before getting with this article, you need to:

Know Javascript Basics. To get started with Javascript, Mozzila Developers
Understand how to use the DevTools console to run Javascript code. This video will help you get started. Console Logging Javascript
Be willing to learn and practice.

`var` and `let` Keywords

Both var and letkeywords are used in declaring variables. letand vardiffer in the scope of the variables they create.
When you declare a variable with the varkeyword, it is declared globally. The varkeyword, however, is declared locally if inside a function.

var myName = "Dennis"; // declared globally 
console.log(myName) //Output- Dennis

The above myNamevariable is declared globally, hence, can be accessed anywhere in your code.

CASE 1

function firstName(){
    var myName = "Dennis"; //declared locally
    return myName;
} 
console.log(firstName()); //Output  -Dennis
CASE 2
function secondName(){
    return myName;
}
console.log(secondName()); // _Output a Uncaught ReferenceError: myName is not defined_

Let me explain what the above code does:
CASE 1
We have declared the myNamevariable inside a function firstName, right? then we return the myNamevariable.
when you call the function, the myNamevariable can be seen by the function hence the console logs Dennis.
CASE 2
We have a function secondNamethat returns the myNamevariable which is only locally available in the firstNamefunction. When you call the secondNamefunction, the console logs an error.
However, changing the myNamevariable to global, the secondNamefunction should return Dennis.

let Keyword
When you declare a variable with the let keyword inside a block, statement, or expression, its scope is constrained to that block, statement, or expression.

In JavaScript, a block is a set of zero or more statements grouped inside a pair of curly braces { }.
A block can contain any valid JavaScript statement, including variable declarations, loops, conditionals, function declarations, and expressions.

Variable declaration inside a block

{
  let x = 10;
  console.log(x); // Output: 10
}

Variable declaration as a statement

let y = 5;
console.log(y); // Output: 5

Variable declaration as an expression

let z = (a = 2, b = 3, a + b);
console.log(z); // Output: 5

Here's an example that demonstrates how the let keyword creates variables with limited scope:

function exampleFunction() {
  let x = 10;

  if (true) {
    let y = 20;
    console.log(x); // Output: 10
    console.log(y); // Output: 20
  }

  console.log(x); // Output: 10
  console.log(y); // Uncaught ReferenceError: y is not defined
}

exampleFunction();

In the example above, the exampleFunction function contains two let declarations:
let x = 10, and let y = 20;

Inside the if statement block, both xand yare accessible because the letkeyword creates variables with block scope. This means that the variables declared with letare only accessible within the block where they are defined or any nested blocks.

However, outside the ifstatement block, yis no longer accessible. When we attempt to access yafter the ifstatement, an Uncaught ReferenceError is thrown becausey is not defined in that scope.

On the other hand, x is accessible both inside and outside the if statement block because it is declared in the outer scope of the function.

Mutate array declared with `const`keyword

The const keyword is applicable in many use cases in Modern Javascript.

Some developers prefer to use the constkeyword throughout. The developers, who use the const keyword however, may use the letkeyword when they need to reassign a value later.

Variables declared with the constkeyword areread-only. However, it is important to note objects(including arrays and functions) assigned to a variable using const are still mutable.

const arr = [2,3,4,5,6];
 arr = [4,5,6,7];
arr[2] = 50;
console.log(arr);

arr = [4,5,6,7]will result in an error. when you comment on the line, the console.log will display [2,3,50,5,6].

From the above example, you can mutate objects, and thearr variable still points to the altered array. Like all arrays, the array elements in arrare mutable, but because constwas used, you cannot use the variable identifier arrto point to a different array using the assignment operator.

How to prevent Object mutation

From the previous example, const keywords do not protect your data from mutation.
Javascript provides an Object.freeze() function to prevent mutation. Any attempt to mutate data will throw an error if the script is running in strict mode.
for example,

let myObject = {
name: "Dennis,
age:30
}
Object.freeze(myObject);
myObject.name = "John"
myObject.newproperty = "learning"
console.log(myObject);

Conclusion

Thanks for reading this article.
You have learned to declare variables in Javascript using letconstand varkeywords.
Also, the article has helped you understand how the keywords create scopes in your code.

This article was written by Dennis Mbugua.
Follow me on Twitter Twitter

How to get started with Javascript- Part One

Dennis Ng'ang'a Mbugua — Tue, 27 Jun 2023 13:38:36 +0000

Introduction

Javascript is a scripting language you can use to create dynamic web pages. It is one of the core languages used along with HTML and CSS, and is supported by modern browsers.
In this beginners series part one, we are going to learn the basics of javascript. Later on, we are going to be advance to even complex topics.
By learning and completing this series, you will write your first line of Javascript with absolute confidence.

Pre-requisites

These tutorials do not require a prior javascript knowledge.However, you must have a basic understanding the following;

HTML and CSS. You can start by learning from mdn docs
Basic understanding of linking html file and javascript. Learning that takes few minutes at w3school

In this article, we are going to learn about:

1.Add comments in Javascript
2.Declare Javascript Variables
3.Assign one value of a variable to another
4.Declaring string variables
5.Understanding Uninitialized Variables
6. Case sensitivity in Javascript variables
7.Understand differences between var and let keyword
8.Best practice
9.Conclusion

Add comments in Javascript

Comments in Javascript lines are lines which explain what the code does, and why a particular code was written in a certain way. Comments make the code more readable.
Another great use of comments is to remove code from execution when debugging scripts.
The following are the two commonly used Javascript comments;

Inline comment.
- Multiline comment.

1. Inline comment

To create a single line comment in JavaScript, you place two slashes "//" in front of the code or text you wish to have the JavaScript interpreter ignore. When you place these two slashes, all text to the right of them will be ignored, until the next line.

alert (“I have comments in my code”);
` //This is an inline comment`

</script>

The above code displays the following alert message on the browser. >
I have comments in my code
The second line is never executed.

2. multiline comment

Inline comments are quite useful.However, it can be burdensome to disable long lines of code or insert long-winded comments. For larger comments, you can used multiline comments that begins with /* and ends with */

<script> alert(“I have multiline comments in my code”); /* This is multiline code This is multiline code This is multiline code This is multiline code This is multiline code This is multiline code */ </script>

The above code displays the following alert message on the browser.

I have multiline comments in my code

Declare Javascript Variables

In computer science, data is anything meaningful to a computer. Javascript provides eight data types. You can learn about javascript data types on (https://www.w3schools.com/js/js_datatypes.asp)

To store data in computers, you create a variable that points to the data rather than data itself.
You declare a variable by putting either one of the following keywords in front of the variable;
var let const

For example, you can declare a variable named myNumber as follows;

var  myNumber;

The above code creates a variable called myNumber.

Store values with assignment with assignment operator

You can store a value in a variable using the assignment operator =.

 var myNumber = 5 ;

The above code assigns the value 5 to *myNumber*;

Assign one value of a variable to another

You can assign the value of a variable to another variable after assigning the value with the assignment operator.

For example, in the above example, myNumber variable can be assigned to another variable.

 var myNumber = 5 ;

You can declare another variable and assign it the value of myNumber.

var mySecondNumber = myNumber;

Now the variable mySecondNumber contains the value of myNumber .

Declaring string variables

So far, we have been declaring number variables in our examples.
You can also declare variables as follows;

var myName = “Dennis”;

“Dennis” is referred to as string literal. A string literal is a variable in javascript containing 0 or more characters.
String variables in javascript are enclosed with double quotes “ ” or single quotes ‘ ‘.

Understanding Uninitialized Variables

When Javascript variables are first declared, they have a value of undefined. If you do mathematical operations on undefined variables, you get a value of NaN. If you concatenate two undefined strings, you get a value of undefined.

For example, the following variable has a value of undefined. The variable has been declared with no value assigned to it.
var mysum;

Case sensitivity in Javascript variables

In JavaScript all variables and function names are case sensitive. This means that capitalization matters.
MYVAR is not the same as MyVarnor myvar`. It is possible to have multiple distinct variables with the same name but different casing. It is strongly recommended that for the sake of clarity, you do not use this language feature.

Best Practice

Write variable names in JavaScript in camelCase. In camelCase, multi-word variable names have the first word in lowercase and the first letter of each subsequent word is capitalized.

Example,

var someVariable; var anotherVariableName; var thisVariableNameIsSoLong;

Understand differences between `var` and `let` keyword

One of the biggest challenges of using var keywords is that variables can be easily overwritten.
For example

var name = “Dennis”; var name = “David”; console.log(name);

The above code displays David since Dennis has been overwritten.

In small applications, this does not pose a major challenge.However, as the codebase becomes bigger, then this is a big challenge.

The let keyword was introduced in Es6 ( a topic for another day) to solve this exponential challenge. Variables declared with the let keyword cannot be re-assigned.

Replacing the following code with let keywords,

let name = “Dennis”; let name = “David”; console.log(name);
The following error is thrown in console;
_Uncaught SyntaxError: Identifier 'myName' has already been declared _

Conclusion

Javascript is used in creating dynamic websites.The best way to get started with Javascript is to grasp the foundations and basics right front zero level to the most advanced level.
In this article, you learned what variables are, how to declare and initialize them in Javascript.You also learnt how to use camelCase naming convention while working with Javascript variables.
You can enhance your understanding of the covered concepts by learning from
Mozilla Developers Guide

Written by Dennis Mbugua.
Follow me on Twitter

Beginners series learning Javascript

Dennis Ng'ang'a Mbugua — Sun, 25 Jun 2023 10:11:27 +0000

Hi, my name is Dennis. I am a front-end web developer and a Technical writer.
Are you getting started with learning javascript to power up your skills? if this is you, then you have found the right place to hold on to for a while. A journey of a thousand steps starts with a single step. It is even worthier when the journey is heading to the right direction. I will be creating a series of javascript tutorials from beginner level to advanced level. After completing this series, you will write javascript lines with confidence.
Lets embark on this exciting journey of growth together.

Prerequisites

This series do not require you to have previous knowledge with javascript. However, you should already have prior knowledge of working with HTML AND CSS.

Where to learn?

I will be writing and publishing the articles here.

Written by Dennis Mbugua(eikev)
Follow me on Twitter

Use of the Javascript keywords var, let, and const in a variable declaration

Dennis Ng'ang'a Mbugua — Mon, 20 Mar 2023 05:31:36 +0000

Pre-requisites

This article is targeted at beginners who want to learn about keywords, var, let and const in variable declaration.
Before diving into this article, make sure that you understand the
camelCase naming convention used in JavaScript.

Data in computer science refers to everything that the computer can use to make sense of. Undefined, null, Boolean, text, symbol, int, number, and object are the eight distinct data types that JavaScript supports.
For example, computers distinguish between numbers, such as 12 and strings, "123”, which are collections of characters.
Also, computers can perform mathematical operations on numbers but not on strings.

In this article, we are going to learn about:

1.What is a variable?
2.variable declaration using var
3.Cons of using var keyword
4.using keyword let
5.Cons of using let keyword
6.using keyword const
7.Best practices of declaring variables
8.conclusion

What is a variable?

A variable is a storage location that allows computers to store and dynamically manipulate data. Variables, do this by using a label that points out to them rather than using data itself. Any of the eight data types highlighted above may be stored in a variable.
Variables are similar to the x and y variables we use in mathematics. Therefore, variables are the simple name we use to refer to data. However, computer variables differ from mathematical variables in that they can store different values at different times.

Variable declaration using keyword `var`

We tell JavaScript to create or declare a variable by putting
keyword var in Infront of our desired variable name.
for example, let us say we want a variable called myName:

``Put thevarkeyword in Infront of your variable name like this, var myName; var myName creates a variable calledmyName`. Variable names can be made up of numbers, letters, and $ or _, but may not contain spaces or begin with a number.


 for example 
var my Name -> !!!NOT ALLOWED
var 27myName -> !!!NOT ALLOWED

Cons of using the `var` keyword

One of the biggest problems of using the keyword var is that you can easily overwrite variable declarations.
var name = "Dennis"; var name = "Mbugua"; console.log(name);
In this above example, name is originally declared as Dennis’. The variable nameMbuguaoverwritesDennisand the console logs outMbugua`.
In a small application, you might not run into this type of problem. But as your codebase becomes larger, you might accidentally overwrite a variable that you did not intend to. Because this behaviour does not throw an error, searching for and fixing bugs becomes more difficult.

Using the `let` keyword

In Es6, a major update in JavaScript, the let keyword was introduced, which helps to exponentially solve this var problem.
let name = "Dennis"; let name = "Mbugua”;
The error will be thrown onto the browser console. ‘let` keyword allows variables with the same name to be declared only once.

Advantages of using the `let` keyword in a variable declaration

The let keyword does not have major problems when compared with the var keyword. As mentioned previously, let does not allow different variables to have the same name.

Using the `const` keyword in the variable declaration

The keyword let is not the only new way to declare variables. In Es6, you can declare variables using the const keyword.
The const keyword has all the properties that the let keyword has, with a bonus that, variables declared using const are read only’. They are a constantvalue. This means that variables declared with theconst` keyword cannot be reassigned once declared.


 const met = "Cat";
    myPet = "Dog";

The above code will throw an error in the browser console because a read only variable is reassigned to a new value. You should always name variables that you don’t want to reassign using the const keyword. This helps when you accidentally attempt to reassign a variable that you want to remain unchanged.

Best practices for declaring variables

*NOTE: * It is common for most developers to name immutable variables (which means can never be resigned once declared).
for example, const MYNAME.MYNAME variable is immutable and is in uppercase letters. This allows another person reading your code to identify the variable as read-only.

Conclusion

In JavaScript, data is anything that can be manipulated dynamically. Computers allow data storage using variables.
Variables are declared by putting either keywords Var’, ‘let or const in Infront of your variable name. When declaring a variable, make sure you use the right keyword appropriately.

Happy coding Written by Dennis Mbugua. Developer and Writer
Follow me on Twitter link
Follow me on GitHub link

How to comment in Javascript?

Dennis Ng'ang'a Mbugua — Sun, 19 Mar 2023 12:54:01 +0000

Comments are lines of code that JavaScript will intentionally ignore. Comments are a great way to leave notes to yourself and to other people who will later need to figure out what that code does.
There are two ways to write comments in javascript:

Using // will tell JavaScript to ignore the remainder of the text on the current line. This is an in-line comment:

// This is an inline comment in javascript

You can make a multi-line comment beginning with /* and ending with */. This is a multi-line comment:

/* This is an multi-line comment */

NOTE:As you write code, you should regularly add comments to clarify the function of parts of your code. Good commenting can help communicate the intent of your code—both for others and for your future self.

Tip:try commenting by writing each one of them today.

By Dennis Mbugua Programmer and writer

Accessibility Best Practices – What to Remember When Building Accessible Web Apps

Dennis Ng'ang'a Mbugua — Tue, 14 Mar 2023 07:11:55 +0000

Introduction

Anyone should be able to use your websites and apps - both people with disabilities and those without. This will make your website accessible.
Think about the last site you built, or your favorite site. Are you confident that anyone can use your site and perform the critical actions it requires? Have you considered folks with motor disabilities, visual disabilities, cognitive disabilities, and auditory disabilities?
Accessibility is often left as an after-thought. When it is time to ship a feature, we do an accessibility test and find out that our site wasn't accessible and do a hacky fix.

Making a site accessible is a huge undertaking. But if we keep accessibility in mind from the get-go, it makes it much easier to build an accessible web app.

In this post, I will go over 5 things you can keep in mind WHILE building your app so you don't have to do a hacky slap together at the end.

5 things to remember for good accessibility

Semantinc HTML
Tabindex
Aria attributes
Role
Keyboard navigation and screen readers

Simply I term them as S.H.A.R.K
let's go through each one of them and see how to make web accessible.

What is Semantic HTML?

sing semantic HTML is important for accessibility. This is because assistive technologies such as screen readers are able to interpret what's on the page by parsing the HTML of the page. They enable users to take actions based on the elements.

For example, if a screen reader encounters a button, it signals to the user that they should click on it.

Let's consider some use-cases of what can happen when you don't use semantic HTML:

Creating buttons by using `div` instead of `button`:

divs are container elements, so when a screen reader encounters a div, it automatically thinks it is a presentational element.

When a screen reader user encounters a div that has content or children within it, the screen reader announces role="group" and the user will completely miss that the div is interactive. So make sure you use the proper semantic element for its purpose. You get accessibility for free.

Using CSS to fake headings instead of using`h1-6` tags:

Heading tags such as <h1> and <h2> let an assitive technology know that this is important text, and the screen reader will announce "Heading".
When you use CSS to make a heading instead of using correct semantics, the significance of the text is lost to a screen reader.

So just make sure to use semantic HTML whenever possible.

What is Tabindex?

Adding a tabindex makes interactive elements keyboard-navigable. When you add tabindex to an element, a user is able to navigate to it using only their keyboard and/or assitive technologies.

You use a tabindex of 0 to set focus to an element in the default tabbing order,
You use a tabindex of -1 to programmatically focus an element using JavaScript.
Do not assign a value of > 1 to tabindex.

A word of caution though - you should only add tabindex to interactive elements. It is not a good practie to add tabindex to elements such as div.

Instead of adding tabindex in that case, use a semantic element, such as a button since semantic elements already are tabbable and do not need an additional tabindex value.

What are ARIA attributes?

Aria attributes such as aria-checked, aria-label give additional information to assistive technologies.
Aria attributes are a set of HTML attributes that you use to provide additional information about the purpose and state of elements on a web page. These attributes are especially beneficial to assistive technologies to provide more context and better navigation for users.
Some common aria-attributes include:

aria-label: used to provide a label or name for an element.
aria-hidden: used to indicate that an element should be hidden from assistive technologies. This can be useful for elements that are used for layout purposes but are not relevant to the content of the page.
aria-describedby: used to associate an element with a description, which helps to provide context of an element.
aria-live: used to indicate that an element's content may change dynamically, and that assistive technologies should pay attention to changes in the element's content.

You can use these attributes in combination with each other and with standard HTML attributes to create more accessible and user-friendly web content.

What is the `aria-role` attribute?

For example, if you are building a grid component with the help of CSS and divs, you can use role="grid" to let assistive technologies know about the semantics of the component.

Some common aria-roles include:

button: used to indicate that an element should be treated as a button.
alert: used to indicate that an element is an alertbox.
presentation: used to indicate that an element is only presentational.

It is important to exercise caution with aria-role. Remember to not overdo it.

How to handle keyboard navigation and screen readers

Many users with motor disabilities rely on their keyboard and assitive technologies to navigate the web. So it's critical that every component be navigable using a keyboard and screen reader.
You can test keyboard accessibility by navigating a site using only your keyboard. Here are some common keys:

tab key to navigate to different sections of the site.
spacebar to select elements, such as a checkbox.
enter to press buttons.

While testing keyboard navigation, make sure you think about the following:

Focus remains visible: Ensure that you can clearly see which element is being focused on the page. Focus should always remain visible.
Tab order: When tabbing through sections, the order of tabbing should follow the natural flow and logical structure of the website. It should not jump back and forth between sections.
Keyboard traps: Ensure that when navigating with the keyboard, the focus doesn't get trapped on an element. For example, this could happen when a modal is opened, or the focus is navigated to a widget, such as calendar or emoji picker. Ensure that when you select an element in the widget, you are able to navigate back to the site.

Wrapping up

Overall, testing for accessibility during development is an important part of the process that can help to create more usable and accessible software for all users. Testing for accessibility early helps to provide a great user experience for everyone. Happy coding!

Regards, Dennis Mbugua

DEV Community: Dennis Ng'ang'a Mbugua

React Learning Basic to Advance

Introduction

How does React work?

Benefits of JSX

How to write Javascript in JSX?

How is JSX compiled?

How React renders your code?

Conclusion

Written by Dennis Mbugua

Follow me on Twitter X

Object Destructuring in JavaScript

Introduction

Pre-requisites

Basic destructuring using assignment operator

Assign variables to properties while destructuring

Assign variables to nested objects

Use Destructuring assignment to assign variables from Arrays

Destructuring via rest elements

Use destructuring assignment to pass an object's properties as function parameters

Conclusion

How To Create color Flipper using vanilla Javasscript

Introduction

Pre-requisites

Step 1-Creating Our Files

Step 2- Adding the HTML Code

Conclusion

Understand let, var and const keywords

Introduction

Pre-requisites

var and let Keywords

Mutate array declared with constkeyword

How to prevent Object mutation

Conclusion

How to get started with Javascript- Part One

Introduction

Pre-requisites

Table of Contents

Add comments in Javascript

Declare Javascript Variables

Store values with assignment with assignment operator

Assign one value of a variable to another

Declaring string variables

Understanding Uninitialized Variables

Case sensitivity in Javascript variables

Best Practice

Understand differences between var and let keyword

Conclusion

Beginners series learning Javascript

Prerequisites

Where to learn?

Use of the Javascript keywords var, let, and const in a variable declaration

Pre-requisites

Table of contents

What is a variable?

Variable declaration using keyword var

Cons of using the var keyword

Using the let keyword

Advantages of using the let keyword in a variable declaration

Using the const keyword in the variable declaration

Best practices for declaring variables

Conclusion

How to comment in Javascript?

Accessibility Best Practices – What to Remember When Building Accessible Web Apps

Introduction

5 things to remember for good accessibility

What is Semantic HTML?

Creating buttons by using div instead of button:

Using CSS to fake headings instead of usingh1-6 tags:

What is Tabindex?

What are ARIA attributes?

What is the aria-role attribute?

How to handle keyboard navigation and screen readers

Wrapping up

`var` and `let` Keywords

Mutate array declared with `const`keyword

Understand differences between `var` and `let` keyword

Variable declaration using keyword `var`

Cons of using the `var` keyword

Using the `let` keyword

Advantages of using the `let` keyword in a variable declaration

Using the `const` keyword in the variable declaration

Creating buttons by using `div` instead of `button`:

Using CSS to fake headings instead of using`h1-6` tags:

What is the `aria-role` attribute?