HTML, or hypertext markup language,  is a standard markup language for creating web pages, which introduced in 1989. 
 
This guide focuses on the basics of HTML to help you understand its structure and features with ease. Before you start, let's tell a bit this article's intent.

<input type="hidden" name="IL_IN_ARTICLE">


This article will focus core of the HTML beacuse it is not necessary to thoroughly grasp a new programming language or tool from the start, as the challenges you encounter while working on projects can be easily overcome through searching, allowing for faster progress. 

So, let's get started with what HTML is 

## What is HTML

To put it simply, HTML instructs web browsers on what to display on a page, such as text, images, or links, using elements written in angle brackets and defined by opening and closing tags.

HTML have mainly two root parts, **head** and **body** tag. Let's discover them.


## HTML Main Structure

A HTML document is composed of a root <html\> tag, and two sections, <head\> and <body\>.

The <html\> tag defines the document as a HTML file, while the <head\> tag contains information related to the current page, such as the document's title, and the <body\> tag contains the elements that will be displayed on the page.

![HTML file main structure including head and body tags](https://api.gobrain.net/uploads/html_main_structure_963e9f9827.png)


## HTML Elements

A browser understand what to display on page through elements which is defined a open and close tag. HTML offers a wide variety of elements that can be used to create a website, but some of the most commonly used elements in a page are links, images, text, and container elements.

An element can have certain attributes that control its behavior. For example, a <a\> link tag can have an 'href' attribute, which tells the browser where to go when the link is clicked.

![element structure in HTML](https://api.gobrain.net/uploads/element_structure_in_html_19d2fb6474.png)

## # Heading

Heading elements is defined as h1, h2... h6 according to the importance of its content.
For example, the <h1\> tag can be used for title while <h2\> and  <h3\> tags can be used for subtitles.

![HTML heading (h) elements](https://api.gobrain.net/uploads/html_heading_cd7e14afd2.png)


## # Paragraph

A paragraph element is defined as <p\> tag. As its name says, it is used for text content to display on page.

![HTML paragraph tag](https://api.gobrain.net/uploads/html_p_tag_0c7637bbc5.png)


## HTML Elements: Image

The <img\> tag defines an image element, which is used to display images on a page. Unlike most elements, which are defined using both an opening and closing tag, an image tag can be defined using only one tag, as shown below. 

As for its attributes, the two most commonly used attributes for an image tag are src and alt. The src attribute specifies the source of the image, while the alt attribute provides alternative text for the image.


![HTML image (img) tag](https://api.gobrain.net/uploads/html_image_tag_797619f287.png)

## # Link

The <a\> tag, which stands for link, is used to create a hyperlink to either an internal or external page. The <a\> tag, used with its "href" attribute, specifies the URL or route of the link.

A hyperlink, defined using the <a\> tag, can include text or an image, which when clicked by a user, redirects them to another page.


![html anchor(a, link) tag](https://api.gobrain.net/uploads/html_a_tag_bd27b48138.png)


## # Div

The <div\> element is a container that is used for grouping elements together. With the help of <div\> element, using CSS and JavaScript, the appearance or behavior of grouped elements can be specifically altered.


![HTML div element](https://api.gobrain.net/uploads/html_div_element_6cd5b73b21.png)



## Styling The HTML Web Page With CSS

Each element in a HTML document has a default appearance, including size, color, placement, etc. This visual appearance of elements can be modified using CSS (Cascading Style Sheets).

To style elements in an HTML document, a style element must be included, which can be done in three ways: as an external stylesheet, an internal stylesheet, or inline styles.


![Include css to html](https://api.gobrain.net/uploads/html_css_tag_ba7c2a1c4e.png)

## Adding Functionality To The HTML Web Page With JavaScript

In addition to modifying the appearance of elements, functionality can also be added to them using JavaScript, a programming language.

To achieve that, you need to also include a javascript code to your HTML file which can also can be done in two ways: as an external script and internal script.

![Add javascript your html file with script tag](https://api.gobrain.net/uploads/html_script_tag_bb3fc1d1b1.png)


## Conclusion

This guide has discussed the basics of HTML for beginners, which is introduced in 1989 and is  a standard markup language for creating web pages.

Thank you for reading.




HTML, or hypertext markup language,  is a standard markup language for creating web pages with elements such as heading, paragraph, link, so on

medium_Screenshot 2023-03-18 at 10.54.24 PM.png

small_Screenshot 2023-03-18 at 10.54.24 PM.png

thumbnail_Screenshot 2023-03-18 at 10.54.24 PM.png

Screenshot 2023-03-18 at 10.54.24 PM.png

A Beginner's Guide to HTML Fundamentals

Handling date operations is crucial in any application. Therefore, every programming language has built-in methods for handling dates. JavaScript is one of these languages and provides a date object with its useful methods.

Let's dive into this object and its functional methods:

## Creating a JavaScript Date Object

The Date object can be created using the new keyword followed by the Date() constructor. This creates a new instance of the Date object with the current date and time.


```js
const today = new Date();
console.log(today);
// Fri Mar 17 2023 22:11:09 GMT+0300 (GMT+03:00)
```

Alternatively, you can create a Date object with a specific date and time by passing in the desired values for year, month, day, hour, minute, second and millisecond to the Date() constructor.


```js
const birthday = new Date(2000, 11, 25);
console.log(birthday);
Mon Dec 25 2000 00:00:00 GMT+0200 (GMT+03:00)
```

## Working with Dates and Times

The Date object provides a wide range of methods and properties that allow us to work with dates and times. Some of the most commonly used methods and properties include:

```js
// Get the current date and time
var today = new Date();

// Get the year
var year = today.getFullYear();

// Get the month (0-11)
var month = today.getMonth();

// Get the day of the month (1-31)
var day = today.getDate();

// Get the day of the week (0-6)
var dayOfWeek = today.getDay();

// Get the hours (0-23)
var hours = today.getHours();

// Get the minutes (0-59)
var minutes = today.getMinutes();

// Get the seconds (0-59)
var seconds = today.getSeconds();

// Get the milliseconds (0-999)
var milliseconds = today.getMilliseconds();
```

## Formatting Dates and Times

The Date object also provides a range of methods for formatting dates and times for display. These methods allow developers to format dates and times in a wide range of formats, including ISO 8601, UTC and localized formats.

```js
const today = new Date();
// Format the date as ISO 8601
const isoDateString = today.toISOString();
// 2023-03-17T19:17:01.978Z 3/17/2023

// Format the date as a string in the local timezone
const localDateString = today.toLocaleString();
// 10:17:01 PM 3/17/2023


```

These methods allow us to format dates and times in a wide range of custom formats, including date and time separators, timezones and custom formatting strings.

## Handling Timezones

One of the most important considerations when working with dates and times in JavaScript is handling timezones. The Date object provides methods for handling timezones, including setting and getting the UTC date and time.


```js
const today = new Date();

// Get the current UTC date and time
const utcDate = today.toUTCString();
// Fri, 17 Mar 2023 19:22:58 GMT 3/17/2023

// Format the date as a string in the specified timezone
const timezoneDateString = today.toLocaleString("en-US", {
  timeZone: "America/New_York",
});
// 3:22:58 PM

```



## Conclusion

Javascript has a wide range of built-in method from date object for handling time and date properly.  These methods can be used get current date, handling timezone and formmatting date and time.

Thank you for reading.





Handle date and time in javascript with date object and its built-in methods that allow you to handle date format, manage timezone and get current time

large_the only time.jpg

medium_the only time.jpg

small_the only time.jpg

thumbnail_the only time.jpg

the only time.jpg

JavaScript Date Object and Its Useful Methods

## Introduction

Each visual element in your design plays a crucial role in expressing not only the intent of the product but also the aspect of the brand, so each element used in the design should be carefully chosen, considering in terms of its contribution to the whole composition.

In this blog post, we will discuss the effect of serif and sans-serif fonts on design, keeping typography in mind, as it is one of the main elements of a design. Let's begin with definitions.


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="6187628078"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

## WHAT ARE SERIFS AND SANS-SERIFS? 

Simply put, **serifs** are small lines added to certain letters or symbols in some typefaces. Serif fonts have a very ancient history. The origin of this font can be traced back to ancient Roman writings carved into stone (1).

On the other hand, typefaces that don't have any small lines attached to letters or symbols are called **sans-serif **fonts.

![serif vs sans-serif fonts | same text with different typography](https://api.gobrain.net/uploads/Your_paragraph_text_82ee1b6eaf.png)


## SERIF VS SANS-SERIF

One of the main purposes of using serif fonts was to allow the reader to easily transition from one letter to the next, thus providing a fluid reading experience.  This is because small lines act as a visual aid to guide the reader's eye from one letter to the next.

Serif fonts are also considered to be traditional and add intellectuality to the text, therefore they are often used in printed content such as books, newspapers, screenplays etc.

In contrast to serif fonts, sans-serif fonts are considered modern and minimalist and thus are frequently utilized in digital content such as websites, e-books etc.


## WHICH TO USE

As for the font choice in your design, as mentioned in the opening sentence, the design elements reflect the character of the product. For instance, if you want to highlight that your product is traditional, serif fonts would be a suitable choice. On the other hand, if you want to create a modern and elegant product, sans-serif fonts are a good option.

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="6344386266"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

## Serif And Sans Serif Fonts Together

While these two classifications have distinct differences, they can also complement each other when used together in design.

The advantages of pairing serif and sans-serif fonts is that it can create a visual contrast that adds interest and hierarchy to a design. The serifs in a serif font can give a sense of tradition, elegance, and sophistication, while the clean, modern lines of a sans-serif font can convey simplicity, clarity and efficiency. By combining these two styles, you can create a harmonious balance that makes a design more appealing and effective.

### PAIR CAREFULLY FONTS

When choosing serif and sans-serif fonts to pair, it's important to consider the contrast between the two. A good pairing should have enough contrast to be visually interesting but not so much that it becomes distracting or difficult to read. It's also important to consider the style and mood of the design. A traditional serif font like Times New Roman might pair well with a modern sans-serif font like Helvetica but it might not work as well with a more playful font like Comic Sans.


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="9959831409"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>


## Conclusion

Design is a key factor in the success of a product, even if its functionality is excellent. The choice of font is an essential aspect of design and should be made with care. In this article, we have provided a brief overview of two popular font types, serif and sans-serif."

We end this article with a quote from Shawn Luke. "When typography is on point, words become images"

Thank you for reading.

## REFERENCES

1) https://en.wikipedia.org/wiki/Serif

Differences between Serif and sans-serif fonts which are most used typefaces type

large_vcscsa.png

medium_vcscsa.png

small_vcscsa.png

thumbnail_vcscsa.png

serif-vs-sans.png

Serif vs Sans-Serif Fonts

## Introduction

HTML forms are an essential component in any web pages, allowing users to input data and interact with websites. They enable you to obtain information from users and send it to a server for processing, managing and storing. 

In this article, we will cover the basics of HTML forms, including how to create them and handle user input.

## Creating a Form

To create a form, HTML provides a wrapper **<form\>** tag, within which other form elements are placed. We will be discussing later these elements. Now, Let's see the form tag itself and its main attributes.

```xml
<form action="/submit-form" method="POST">
  
</form>
```

As you can see, there are two exclusive attributes in a html form:

- action: specifies where the form data should be submitted, 
- method: determines the HTTP method used to submit the data

Simply put, when the form above is submitted, it sends a post request to the /submit-form endpoint on the server, so that the server can process the form data that is obtained from the user via form elements, which we will discover in the next step.

## HTML FORM ELEMENTS

HTML provides several types of form elements, each with its own set of attributes and behaviors. Here are some of the most common form elements:

### Input Fields

As its name suggests, input fields are used to gather user input from users. The type attribute determines the behavior and functionality of the input tag. Let's discover each in a code snippet.

```xml
<input type="text" name="username" />
<input type="password" name="password" />
<input type="email" name="email" />
<input type="number" name="age" />
<input type="checkbox" name="agree" />
<input type="radio" name="gender" value="male" />
<input type="radio" name="gender" value="female" />
```
You can see the appearance of each in the following image:

![Html Form Elements Example](https://api.gobrain.net/uploads/html_form_elements_1e2c1972c9.png)

### Select Fields

Select fields allow users to select an option from a dropdown list. The option tags specify the available options.

```xml
<select name="country">
  <option value="usa">United States</option>
  <option value="canada">Canada</option>
  <option value="uk">United Kingdom</option>
</select>
```
Here is the select element grouping different countries:

![html select element for grouping](https://api.gobrain.net/uploads/html_select_a71d06a3fa.png)


### Textarea Field

Textarea fields allow users to enter multiple lines of text.

```xml
<textarea name="comments"></textarea>
```

![textarea-in-html.png](https://api.gobrain.net/uploads/textarea_in_html_2d0d243504.png)

### Submit Button
Submit buttons are used to submit the form data to the server.
```xml
<button type="submit">Submit</button>
```

## Handling Form Data

Once a user submits a form, the data is sent to the server for processing. The server then typically responds with a new page or a message indicating whether the form submission was successful or not.

To handle form data, you can use a server-side programming language such as PHP, Python, or Ruby. Alternatively, you can use client-side JavaScript to perform form validation and submission without requiring a server-side component.

### Handling Form Data with JavaScript

There are several ways to handle form data with JavaScript, depending on the task at hand. Let's explore some of the most common methods.

#### Form Validation

Form validation is the process of checking whether the user input is valid before sending it to the server. This can help to reduce server load and improve the user experience by catching errors before the user submits the form.

JavaScript provides several methods for form validation, such as the checkValidity() method, which checks whether the form is valid, and the setCustomValidity() method, which sets a custom error message for the form element.

Here is an example of how to use the checkValidity() method:

```js
<form id="myForm">
  <input type="text" required>
  <input type="submit" value="Submit" onclick="validateForm()">
</form>

<script>
function validateForm() {
  const form = document.getElementById("myForm");
  if (form.checkValidity() === false) {
    alert("Please fill out all required fields");
    return false;
  }
}
</script>
```
In this example, the checkValidity() method is called on the form element when the submit button is clicked. If any required fields are empty, an alert is shown to the user, and the form is not submitted.

#### Using AJAX (Asynchronous JavaScript and XML)

Once the form data has been validated, it's time to handle the data submission. In modern web development, the most common way to handle form submission is by using AJAX (Asynchronous JavaScript and XML) to submit the form data to the server without refreshing the page.

To do this, we can use the fetch API or any other library like axios or jQuery. Let's take a look at an example of how to use the fetch API to submit form data:


```js
const form = document.querySelector('#myForm');
const formData = new FormData(form);

fetch('/submit', {
  method: 'POST',
  body: formData
})
.then(response => {
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
})
.then(data => {
  console.log('Form submitted successfully', data);
})
.catch(error => {
  console.error('There was a problem submitting the form', error);
});
```

In this example, we first select the form element using the querySelector method. We then create a new FormData object with the form element as its argument. This allows us to easily retrieve all the form data as key-value pairs.

We then use the fetch API to send a POST request to the server with the form data as the request body. The server can then process the data and return a response.

The fetch method returns a promise which resolves with the server's response. We can then check if the response was successful and parse any JSON data returned by the server.

Handling form data with JavaScript can be a complex task, especially when it comes to validation and security. It's important to ensure that all user input is properly validated on both the client and server side to prevent malicious attacks.


## Conclusion

HTML forms are an essential component of web development, allowing users to input data and interact with websites. By understanding how to create and handle form data, you can create powerful and engaging web applications that provide a great user experience.

Thank you for reading.

HTML form element and its input tags | Send Form To Server And Handle Inputs

large_HTML FORM ELEMENTS.jpg

medium_HTML FORM ELEMENTS.jpg

small_HTML FORM ELEMENTS.jpg

thumbnail_HTML FORM ELEMENTS.jpg

HTML FORM ELEMENTS.jpg

HTML Form Elements

UI design is all about creating a clear and powerful structure. One of the aspect of structuring UI is drawing the user's attention to the relevant information in a clear and intuitive manner.  Establishing a hierarchy through typography, layout and visual elements can significantly contribute to achieving this objective. 

So in this guide, we will discuss one of these hierarchy methods, **typography**. Before you start, look at the images below and notice the difference in emphasis between the two images so that it would give you a insight about this article.

![example of hierarchy with typography](https://api.gobrain.net/uploads/hierarcy_with_typography_3d5d5cfc77.png)


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="9959831409"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

## What Is The Typography Hierarchy?

Typographic hierarchy refers to the arrangement of type in a design to indicate the relative importance of different pieces of text. The primary purpose of typographic hierarchy is to lead the viewer's gaze through the text by emphasizing the key information. This can be accomplished in different ways so, let's explore these to understand how to construct the typography hierarchy.

## How To Build Hierarchy With Typography

There are several techniques that can be used to create hierarchy in typography. Here are some general guidelines for building hierarchy with typography:

### Use Different Typefaces

![different-typefaces-for-hierarcy.png](https://api.gobrain.net/uploads/different_typefaces_for_hierarcy_93a2d4adde.png)

Typefaces, also known as fonts, come in a variety of styles including serif, sans-serif, handwriting, etc. Each style has its own unique characteristics and is more suitable for different contexts. They are categorized based on factors such as readability, aesthetics and other characteristics.


Combining different types of typefaces is a common technique used to create hierarchy within text. For example, serif fonts are often preferred for headings as they can emphasize the title and make it stand out more, while sans-serif fonts are often used for body content for their legibility and readability on screens. 

This is only an example of mixing the serif and sans-serif fonts, it is also common to combine different types of typefaces such as handwriting, monospace and display types to create a unique and visually appealing aesthetic in your design.


### Use Different Font Weights

Another way to establish a clear hierarchy through typography is by utilizing font weight. By assigning different weights to various levels of information, a clear visual hierarchy is created, making it easy for the user to discern the importance of different elements. 

Here are some tips on how to effectively use different weights:

- **Use bold or semi-bold weights for headings**: Bold or semi-bold fonts can make headings stand out and grab the reader's attention. This can help to quickly communicate the most important information on a page.

- **Use regular or light weights for body text**: Regular or light weights are easier to read in longer blocks of text. They also create a visual contrast with bold headings, making it easier for the reader to distinguish between different levels of information.

- **Use italic or other variations of the font for emphasis**: Italics or other variations of the font can be used to draw attention to specific words or phrases within a block of text. For example, you might use italics to emphasize a quote or important point.

- **Avoid using too many different weights**: While it's important to use different weights to create hierarchy, using too many different weights can create visual clutter and make the text harder to read. Stick to a few different weights to create a clear hierarchy without overwhelming the reader.


### Use Spacing

Spacing is another way to create hierarchy in the design. By adding space to different parts of the content, a clean and organized structure can be presented to users, helping to convey the same level of hierarchy but different aspect of the content for body content.

Here are some tips on how to use spacing to create a clear hierarchy:

- **Use more space around headings**: Adding extra space around headings can make them stand out and signal to the reader that this is an important section. You can use margin or padding to achieve this effect.

- **Use line spacing to improve readability**: Line spacing, also known as leading, refers to the space between lines of text. Increasing the line spacing can improve readability and make the text more comfortable to read, especially for longer blocks of text.

- **Use paragraph spacing to separate blocks of text**: Adding extra space between paragraphs can help to visually separate different blocks of text and create a clear hierarchy. This is especially useful for longer articles or documents.

- **Use kerning to adjust letter spacing**: Kerning refers to the space between individual letters in a word. Adjusting the kerning can help to improve readability and create a more balanced and visually pleasing layout.

- **Use whitespace to create a sense of balance**: Whitespace, or negative space, refers to the space between design elements. Using whitespace effectively can create a sense of balance and harmony in your typography, making it easier for the reader to navigate.

### Use Different Colors

Another preferred method for creating hierarchy in design is using different colors. Different colors are not only to separate headings and body text, but also to emphasize important information within the body content.

Here are some tips on how to use color to create a clear hierarchy:

- **Use a bright or bold color for headings** : Using a bright or bold color for headings can help them stand out and grab the reader's attention. This can be especially effective if the color is complementary or contrasting with the rest of the design.

- **Use a muted color for body text**: Muted or neutral colors can help to create a calm and comfortable reading experience, especially for longer blocks of text. Choose a color that is easy on the eyes and complements the overall design.

- **Use color to highlight important information**: You can use color to draw attention to specific words or phrases within a block of text, such as quotes or important points. This can help to make the text more engaging and memorable.

- **Use color to create contrast and balance**: By using color effectively, you can create a sense of contrast and balance in your typography. For example, you might use a dark color for headings and a lighter color for body text to create a clear hierarchy.

- **Use color sparingly**: While color can be an effective way to create hierarchy, it's important not to overdo it. Too many colors can create visual clutter and make the design less effective. Stick to a few complementary colors to create a clear and cohesive design.

### Use Containers And Icons

Users will easily identify text that is accompanied by an icon or contained within a container, as this helps to draw attention. This not only applies to action text, but also to informational text to increase the level of hierarchy.

Here are some tips on how to use containers and icons to create a clear hierarchy:

- **Use containers to group related content**: Using containers, such as boxes or frames, can help to visually group related content and create a clear hierarchy. For example, you might use a container to group a set of options or to highlight a specific section of text.

- **Use icons to represent concepts or ideas**: Icons can be used to represent concepts or ideas, making the text more engaging and memorable. For example, you might use a light bulb icon to represent an idea or a calendar icon to represent a date.

- **Use size and placement to create emphasis**: By varying the size and placement of containers and icons, you can create a sense of emphasis and hierarchy. For example, you might use a larger container to highlight an important section of text or a larger icon to draw attention to a specific idea.

- **Use a consistent style for containers and icons**: To create a cohesive design, it's important to use a consistent style for your containers and icons. This might include using a specific color scheme or design style, such as flat design or skeuomorphic design.

![typography hierarcy with containers and icons](https://api.gobrain.net/uploads/hierarcy_with_containers_0d35ff9ec5.png)


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="6187628078"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

## Conclusion

It's crucial to maintain consistency in typography hierarchy throughout the design. To sum up, establishing a hierarchy through typography is a significant aspect of design. It aids in directing the user's attention and makes the content more legible and comprehensible. 

By utilizing various font sizes, weights, spacing, and colors for different levels of information, designers can establish a distinct visual hierarchy and make it effortless for the user to identify the most crucial information.

Thank you for reading.

Learn how to create a clear and effective visual hierarchy using typography. Discover the importance of consistency and the different techniques, such as font size, weight, spacing, and color, to guide the user's attention and make your content easy to read and understand

large_hierarchy-with-typography.png

medium_hierarchy-with-typography.png

small_hierarchy-with-typography.png

thumbnail_hierarchy-with-typography.png

hierarchy-with-typography.png

Creating A Hierarchy with Typography

JavaScript is a programming language that provides a variety of loops to execute a set of code multiple times.  The most popular loops mechanisms are **for** and **forEach** , **for in** and **for of**. Although they may appear similar, there are differences between the two that make them suitable for different use cases. In this article, we will compare **for** loops and **forEach** loops and discuss when to use each.

## For Loops

The for loop is a traditional loop that is widely used in JavaScript. It consists of three parts: 

- The initialization statement initializes a variable that will be used in the loop. 
- The condition checks if the loop should continue executing. 
- The update statement is executed after each iteration and is used to update the loop variable.

Here is a simple example of a for loop that prints the numbers 0 to 9:


```js
for (let i = 0; i < 10; i++) {
  console.log(i); // 0, 1, 2 ... 9
}
```

### WHEN TO USE

The for loop is suitable for iterating over arrays and objects with a known length. It allows for more fine-grained control over the iteration, such as **skipping iterations** or **breaking out of the loop early**.


## ForEach

The forEach loop is a higher-order function that is available on arrays in JavaScript. It executes a provided function once for each element in the array. The provided function accepts three parameters: 

- the current element, 
- the index of the element, 
- the array itself.

Here is an example of a forEach loop that prints the numbers 0 to 9:


```js
const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

numbers.forEach(function(number) {
  console.log(number);
});
```

### WHEN TO USE

The forEach loop is suitable for iterating over arrays and performing a set of operations on each element. It is more expressive than for loops, making it easier to read and write.




## For ... In

The for...in loop is a type of loop used in JavaScript to iterate over the properties of an object. It is also known as an enumeration loop. The loop iterates over each enumerable property of an object, executing the code block for each property.


```js
var person = {
  name: "John",
  age: 30,
  gender: "Male"
};

for (var key in person) {
  console.log(key + ": " + person[key]);
}
/*
name: John
age: 30
gender: Male
*/
```

## For ... Of 

In JavaScript, the for...of loop is used to iterate over iterable objects such as arrays, strings, maps, sets and other collections.

Here's an example of using for...of to loop over an array of numbers:

```js
const numbers = [1, 2, 3, 4, 5];

for (const number of numbers) {
  console.log(number);
```

## For vs Foreach vs For In vs For of

### Control Over Iteration

In general, for loops are suitable for iterating over arrays and objects with a known length and requiring more control over the iteration. They are also suitable for cases where the loop variable needs to be manipulated within the loop.

### Array Length

On the other hand, forEach and for in loops are suitable for iterating over arrays and performing a set of operations on each element. They are also suitable for cases where the length of the array is not known in advance and where the loop variable does not need to be manipulated.

### Performance

for loops are generally faster than other loops, especially when working with large arrays. This is because for loops are compiled and optimized by the JavaScript engine, and they provide direct access to the index and length of the array. forEach, on the other hand, has more overhead because it involves creating a new function for each iteration.

However, for small arrays or when performance is not a critical factor, the difference between for and forEach may not be noticeable. 

### readability

One of the advantages of using forEach, for of and for in is that it can be more concise and easier to read than a for loop, especially if you're just performing a single action on each element.

## Conclusion

In conclusion, for loops, forEach, for in and for of are two popular loop constructs in JavaScript. They have different features and capabilities, making them suitable for different use cases. Understanding the differences between the two can help you choose the right loop for your specific use case, resulting in more efficient and maintainable code.

Thank you for reading.

Learn about the differences between for loop and forEach loop in JavaScript. Discover differences in their syntax, performance and readiblty.

large_FOR LOOP VS FOREACH IN JS.jpg

medium_FOR LOOP VS FOREACH IN JS.jpg

small_FOR LOOP VS FOREACH IN JS.jpg

thumbnail_FOR LOOP VS FOREACH IN JS.jpg

FOR LOOP VS FOREACH IN JS.jpg

For Loop vs ForEach in JavaScript

JavaScript is one of the most popular programming languages used for web development. It is a powerful language that is used for creating interactive web pages, web applications and also server-side scripts. 

However, If you are a beginner, take look at mistakes beginners often make while working with JavaScript so that improve your javascript coding skills.

Let's get started with the first mistake.


## Not Understanding the Fundamentals

The first mistake that beginners make is not understanding the fundamentals of JavaScript. They often jump into writing code without understanding the basics of the language. 

JavaScript is a programming language that has its own syntax and rules. It is important to understand the fundamentals of the language before writing any code. This includes understanding 

- variables
- data types
- functions
- loops
- conditional statements, etc



```js
// Incorrect use of variables
var x = 5;
y = 6; // This creates a global variable, which is bad practice

// Incorrect use of loops
for (i = 0; i < 10; i++) {
  console.log(i);
}
```
To solve problems like these, before writing a web application, you can create simple console applications using these fundamental syntax of  javascript so that you can see your mistakes easily.

## Not Following Best Practices

It is important to write code that works, but even more important is writing maintainable code by following best practices. JavaScript has various best practices that should be followed while writing code. These practices help in writing clean and efficient code. However, beginners often do not follow these best practices. 

Some of the best practices include: 

- using meaningful variable names
- avoiding global variables
- using comments to explain the code 
- indentation to make the code more readable.


```js
// Incorrect use of variable names
var a = 5;
var b = 6;
var c = a + b;

// Correct use of variable names
var firstNumber = 5;
var secondNumber = 6;
var sum = firstNumber + secondNumber;
```
The code above works finely in two case, but after some time,  you may find yourself asking questinon like "what does this variable store etc". therefore, it's important to follow best practices for writing maintainable code.

## Not Handling Errors Properly

Errors are a common part of programming and it is important to handle them properly. However, beginners often do not handle errors properly. They either ignore the errors or do not know how to handle them. 

Handling errors properly helps in improving the overall user experience and makes the code more robust. JavaScript provides various error handling mechanisms such as try-catch blocks and error objects. These mechanisms should be used to handle errors properly.

```js
// Function with error handling
function divide(a, b) {
  if (b === 0) {
    throw new Error('Cannot divide by zero');
  }
  return a / b;
}

// Handling the error thrown by the divide function
try {
  console.log(divide(10, 0)); // This will throw an error
} catch (error) {
  console.log(error.message); // Expected output: "Cannot divide by zero"
}
```

Error handling is an important step in writing error-free applications, as it generates solutions for different problems that may occur.

## Not Understanding Asynchronous Programming

Generally, everything goes fine until you encounter asynchronous programming in JavaScript. JavaScript is a single-threaded language, which means it can only execute one task at a time. Therefore, we need to prevent blocking in web applications.

This confusion is temporary because JavaScript APIs offer many methods such as setTimeout, fetch, and also asynchronous programming mechanisms like callbacks, promises, and async/await.

With the learning these tools, everything will be clear but you need some practises.


For Example:

```js
// Incorrect use of asynchronous programming
console.log("Before");

setTimeout(function() {
  console.log("Inside");
}, 2000);

console.log("After");

// Expected output:
// Before
// After
// Inside
```

With the stetTimeout method, we don't prevent working other code in process, which is a logging simple text to the console.

## Conclusion

In conclusion, JavaScript is a powerful language that is used extensively in web development. However, you can often make mistakes while working with JavaScript. 

It is important to understand the fundamentals of the language follow best practices and handle errors properly. By avoiding these common mistakes, you can write efficient and error-free code in JavaScript.

Thank you for reading.

Beginners often make mistakes while working with JavaScript. Let's explain them with examples and show how to fix them.

javascript mistakes that beginners often make

large_javascript-mistakes.jpg

medium_javascript-mistakes.jpg

small_javascript-mistakes.jpg

thumbnail_javascript-mistakes.jpg

javascript-mistakes.jpg

JavaScript Mistakes That Beginners Often Make

Excel is a computer program developed by Microsoft Corporation that allows users to create, edit, and analyze data using spreadsheets. It is commonly used for organizing and manipulating data, performing calculations, and creating charts and graphs for visualizing data.

In this article, we will talk about briefly most used statistics measures in different fields and their calculations in excel. Let's get started.


## VARIANCE

The first measure is variance. Variance is a statistical tool used to evaluate the dispersion of data in a set. It gives information about how much the individual data points differ from the mean of the set.

## Formula For Calculating Variance

**V = (Σ(x - μ)^2 / n)**

Where:

- x is a data in set,
- μ is the mean,
- n is the number of values in set
- Σ is the sum of.

### Population vs Sample in Variance

Due to the difficulty in obtaining data for the entire population, a sample is taken and the variance is calculated. As a result, there will be a slight modification in the formula, as follows:

**V = (Σ(x - μ)^2 / (n-1))**


## Calculate Variance In Excel


In Microsoft Excel, you can use the VAR.S function to find the sample standard deviation of a dataset. The formula is:

**=VAR.S(range)**

Where range represents the group of values for which you want to determine the variance. For example, if your data is located in the range A1:A10, the formula to calculate the variance would be:

**=VAR.S(A1:A10)**

If you want to calculate the population variance, the formula is:

**=VAR.P(range)**

![How to calculate variance in excel](https://api.gobrain.net/uploads/variance_in_excel_0b943e3af7.png)



## STANDARD DEVIATION

The standard deviation is a commonly used statistical measure that quantifies the spread or variability of a data set. It is utilized across a variety of fields, including finance, engineering, and others.

## Formula For Standard Deviation

Formula: **SD = √(Σ(x - μ)^2 / n)**

For:

- x is a data in set,
- μ is the mean,
- n is the number of values in set,
- Σ is the sum of

### A Note: Population vs Sample in Standard Deviation

As it can be difficult to obtain data for the entire population, a sample is selected and the standard deviation is calculated, which requires a small change in the formula, as shown below:

**SD = √(Σ(x - μ)^2 / (n-1))**


## Calculating of The Standard Deviation in Excel

In Microsoft Excel, you can use the **STDEV.S(range)** function to find the sample standard deviation of a data set.

Range represents the group of values for which you want to determine the standard deviation. For example, if your data is located in the range A1:A10, the formula to calculate the standard deviation will be:

**=STDEV.S(A1:A10)**

If you want to calculate standard deviation for a population, the formula will be:

**=STDEV.P(range)**


## CORRELATION

Correlation is a statistical tool that measures the strength and direction of the relationship between two variables. This tool is used to determine if changes in one variable are associated with changes in another variable.

## Formula For Correlation

Before showing calculating correlation in excel let's see matmaticsel formula for calculating it. The formula for the Pearson's correlation coefficient (also known as the Pearson's r) is:

**r = cov(X, Y) / (sX * sY)**

where:

- X and Y are the two sets of data
- cov(X, Y) is the covariance between X and Y
- sX and sY are the standard deviation of X and Y

## How to Calculate Correlation In Excel

Fortunately, we don't need to calculate each steps to reach result because excel has a function called **CORREL(array1, array2)**

Where array1 is the first set of data and array2 is the second set of data.

For example, if you have two columns of data, A and B with values ranging from 1 to 10, you can calculate the correlation coefficient between the two columns by using the following formula:

**=CORREL(A1:A10, B1:B10)**

![how to calculate correlation in excel](https://api.gobrain.net/uploads/correlation_in_excel_aaa781ad7d.png)


## Conclusion

In this guide, we've talked about the calculations of the most used statistical measures in wide range of field from economy to psychology in excel which is mostly used tool for manipulating data.

Thank you for reading.



Learn how to calculate most used statistics measures including variance, standard deviation and correlation in excel, allowing manipulate data and calculate statistics measures easily.

large_IN EXCEL.jpg

medium_IN EXCEL.jpg

small_IN EXCEL.jpg

thumbnail_IN EXCEL.jpg

IN EXCEL.jpg

Calculate Most Used Statistics Measures in Excel

Protected routes are routes with a guard in front of the navigation routes to check whether the necessary conditions for visiting these routes are met. These conditions are mostly related to authentication and authorization, so we will show a page to the user depending on whether its isAuthenticated key in local storage has been assigned as true or false.
 
Let's start with configuration of react router v6

## Add Routing To  App With React Router V6

To add routing to your Reactjs app with react-router v6, the first thing you need to do is install the packages and wrap your App tag with the BrowserRouter tag imported from the react-router-dom package.


```bash
npm i react-router react-router-dom
```

```js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);
```

## Setting Routes

We will have two routes. One of them is the login route for getting credentials. Other is the dashboard route, which will be protected. Realize that we have a parent element, AuthOnly, to protect the dashboard route.


     
```js
import Auth from './views/Auth';
import AuthOnly from './views/AuthOnly';
import Dashboard from './views/Dashboard';
import { Route, Routes } from 'react-router';

function App() {
  return (
    <Routes>
      <Route path='/auth/login' element={<Auth />}></Route>
      <Route
        path='/dashboard'
        element={
          <AuthOnly>
            <Dashboard />
          </AuthOnly>
        }
      ></Route>
    </Routes>
  );
}

export default App;
```

## Create Wrapper Component, AuthOnly, To Protect Dashboard Route

This is the main part of the article, let's explain what the following code snippet do.
The following component is a parent component. When created, the user's authorization status is checked and if the user is authenticated, the dashboard component will be rendered with the help of the children prop, otherwise the user will be redirected to the login route.


```js
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router';

function AuthOnly({ children }) {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const navigate = useNavigate();
  useEffect(() => {
    /* Send credentials to the server to check if user is authenticated */

    if (localStorage.getItem('isAuthenticated')) {
      setIsAuthenticated(true);
    } else {
      navigate('/auth/login');
    }
  }, []);
  // if (isAuthenticated == true -> children) else -> null 
  return isAuthenticated && children;
}

export default AuthOnly
```
## Create Page Component For Login Route

In this step, we will create other element component, Auth, to simulate the authentication process. This component will render a form. When a user submits the form, we will simply set isAuthenticated as true in localStorage and accept the user as authenticated and also redirect the user dashboard page.


```js
import React from "react";
import { useNavigate } from "react-router";

function Auth() {
  const navigate = useNavigate();

  function handleClick(e) {
    e.preventDefault();
    localStorage.setItem("isAuthenticated", true);
    // Redirect the user dashboard
    navigate("/dashboard");
  }

  return (
    <form>
      <input placeholder="email" />
      <input type="password" placeholder="password" />
      <input onClick={handleClick} type="submit" value="Login" />
    </form>
  );
}

export default Auth;
```

## Create Page Component For Dashboard Route

The dashboard component is only navigated by authenticated users since it is displayed private data, which means it is protected, for the sake of simplicity, on our dashboard page, we will show a simple text and a logout button.


```js
import React from 'react';
import { useNavigate } from 'react-router';

function Dashboard() {

  const navigate = useNavigate();

  function handleClick() {
    localStorage.removeItem('isAuthenticated');
    // Send the user login page
    navigate('/auth/login');
  }

  return (
    <div>
      Here is dashboard
      <button onClick={handleClick}>Logout</button>
    </div>
  );
}

export default Dashboard;
```

## Conclusion

That's all, in this guide we have covered a way to protect a route in react js application with react router v6. Now, you can try to visit the dashboard route and go to the /auth/login route to test your implementation.

Thank you for reading.

Add protected routes to your react application with react router v6 to set a guard in front of your routes to check whether the necessary conditions, which are mostly related to authentication and authorization, for visiting these routes are met.

BLOG

typography

Software Project Manangement

Statistics

Web Development