Forem: Miles Ager

What is a CDN?

Miles Ager — Mon, 13 Mar 2023 10:41:16 +0000

Intro

As the world has become increasingly digital, the need for speedy and reliable web content delivery is a must have in order for businesses big and small to get their content out to users. The faster the user receives their requested content, the more engaged they will be, and they will also be more likely to revisit in the future.

It was in the late 1990s that a man by the named of Daniel Lewin noticed that internet congestion was severely limiting the speed and performance of sites depending on how far they were from the server providing the content. It's simple physics; the greater the distance the electrical signals that transmit content must travel to reach the user, the greater the load time. Another limiting factor was bandwidth. Too many users on a site at a time would commonly cause sites to crash. Daniel Lewin set out to create a way to make content delivery faster and more reliable. His solution was the first CDN, a network of servers spread out around the world, all working together to deliver content more efficiently.

CDNs (Content Delivery Network)

The primary benefit of CDNs is their ability to increase website speed and performance. By caching website content on multiple servers around the world, CDNs reduce the distance that content must travel to reach end-users, which can significantly reduce load times. This, in turn, leads to a better user experience and can even increase website engagement and conversions. By having servers distributed across the globe, we are able to have Points of Presence (PoPs) within practically every major country, city, and town. PoPs represent a location close to the user where servers hosting copies of a site content are housed, and the edge server is the server within a particular PoP that is closest to the user. A CDN will always transmit content from the edge server to the user in order to decrease load time as much as possible for the user. CDNs also provide increased reliability and uptime by distributing traffic across multiple servers. If one server goes down or experiences a spike in traffic, requests can be automatically rerouted to another server, ensuring that the website remains online and available to users.

Security

CDNs also play a critical role in keeping the content housed on the origin servers secure from attacks. By caching website content on multiple servers, CDNs can absorb and mitigate DDoS (Distributed Denial of Service) attacks. When an attack is launched, CDNs can detect and block malicious traffic before it reaches the origin server, thus keeping the website online and protected. Even if an attack successfully takes hardware offline, a CDN will always have another server close by that can distribute content to the user. To detect and block malicious traffic before it reaches the origin server CDNs use algorithms to analyze incoming traffic and distinguish legitimate requests from those generated by bots or other automated tools. They can also use firewalls and other security measures to block traffic from known malicious IP addresses or to limit access to specific resources on the origin server.

By providing an additional layer of security and protection, CDNs can help keep websites online and accessible to legitimate users, even in the face of sophisticated attacks. This can be particularly important for businesses and organizations that rely heavily on their websites for their day-to-day operations, as downtime or interruptions in service can have significant financial and reputational consequences.

Conclusion

CDNs have revolutionized the way we deliver web content, making it faster, more reliable, and more secure. With the continued growth of digital media and the increasing demand for speedy website delivery, CDNs will continue to play a critical role in ensuring that the internet remains a fast and reliable source of information and entertainment.

Styled-Components: The React CSS Hybrid

Miles Ager — Mon, 27 Feb 2023 13:31:17 +0000

styled-components and CSS

The styled-components library is the best way to apply style and effects to any application that is using React on the front-end. styled-components give one the ability to create React-like components that extend CSS (Cascading Style Sheets) styles and effects without having to rely on the rigidity of using class, ids, or requiring a styles.css file. I don't want to downplay the importance of CSS, since styled-components extends the CSS language and has almost identical syntax. The more one is accustomed with CSS, the lower their learning curve for styled-components. From my personal experience I almost exclusively use styled-components to apply styles in React front-end apps. The main reason, is because I am a lazy person, and I like finding ways of making things easier to use. I love CSS, and since I first began using CSS, I was drawn to its layers of complexity as well as the opportunity for creativity it provides. However, using selectors like class or id can lead to collisions and specificity issues that are difficult to isolate and debug, particularly as an app increases in size. styled-components provides developers with flexible, reusable, syntactic sugar. For the remainder of my blog post, I will explain, three main aspects of styled-components that help developers like me be less scared when integrating CSS into React components: No longer needing an entire file designated to style, can use props, gives access to createGlobalStyle and ThemeProvider.

Flexibility and Reusability

CSS is such a powerful tool, but in a large app, altering your style with CSS can feel like a game of Jenga. With tradition CSS styling methods, styles are global by default. What feels like a small change to your styles, can end up causing unintentional effects to some other element. That's where the flexibility and modularity of styled-components outperforms CSS. See example below.

import React from 'react';
import styled from 'styled-components';

const Color = styled.h1`
   color: purple;
`; 

const SuperSimpleReactComponent = () => ( 
<>
<Color>Hello World!</ Color>
</>
);


export default SuperSimpleReactComponent;

In the above React component, the work of applying the color style on the element in the implicit return statement was completed in the same file. That is something that the CSS dinosaur just can't do, while styled-components can. But wait, there's more! What if I wanted to make another component also have a purple element being rendered to the DOM, and that component is in another file? You can export styled-components, and import them into the files you want to reuse them in. As seen in the example bellow.

SuperSimpleReactComponent.jsx

import React from 'react';
import styled from 'styled-components';

export const Color = styled.h1`
   color: purple;
`; 

const SuperSimpleReactComponent = () => ( 
<>
<Color>Hello World!</ Color>
</>
);


export default SuperSimpleReactComponent;

SuperSimpleReactComponent2.jsx

import React from 'react';
import Color from './_SuperSimpleReactComponent.jsx_';

const SuperSimpleReactComponent2 = () => ( 
<>
<Color>Hello There!</ Color>
</>
);


export default SuperSimpleReactComponent2;

As seen in the above example we can export the Color component in the SuperSimpleReactComponent.jsx file, and import the Color component to use in the SuperSimpleReactComponent2.jsx file.

Props

styled-components feel as though they are just a natural part of React when one get's used to using the library. I feel this is especially evident in how one can pass props to styled components. Props can be used to add another dimension to how one can control the styles of their project. Example bellow.

import React from 'react';
import styled from 'styled-components';

const Color = styled.h1`
   color: ${props => props.purp ? 'purple' : 'black'};
`; 


const SuperSimpleReactComponent = () => ( 
<>
<Color purp>purple</ Color>
<Color>black</ Color>
<Color purp>purple</ Color>
</>
);


export default SuperSimpleReactComponent;

As seen in the example above, we are able to pass props to our styled-components providing more ways to customize styles in the application. When the purp prop is pass into the Color component, we will the element will be colored purple, while the element without the prop purp.

createGlobalStyle and ThemeProvider

As a dev that still wants to have styles that are applied globally, I like to use the importable helper functions from styled-components, createGlobalStyle and ThemeProvider.
createGlobalStyle is a pretty useful tool when you want a style to be shared across just the elements in one component, shared among a component and its children, or shared across the whole application. No wrapping is needed for createGlobalStyle, just import it wherever you need it, and add it straight into the component's return statement as a self-closing tag.
ThemeProvider works similarly to createGlobalStyle, in that it can be used to provide styles globally. All elements below the ThemeProvider self-closing tag, or wrapped within ThemeProvider can be passed an object containing the styles you want to use. This is particularly useful for helping keep styles consistent and organized across an application. example down below.

import React from 'react';
import { createGlobalStyle, ThemeProvider } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    font-family: sans-serif;
  }
`;
const theme1 = {
  colors: {
    primary: 'purple',
    secondary: 'black',
  },
};


const CreateThemeGlobalComponent = () => ( 
    <>
        <GlobalStyle />
        <ThemeProvider theme={theme1}>
            <h1>createGlobalStyle and ThemeProvider</h1>
            <h1> are Rad!</h1>
        </ThemeProvider>
            <h1> Use them in your next project!</h1>
    </>
);


export default CreateThemeGlobalComponent;

In the above component I am using createGlobalStyle to apply the font style to the entire component. I have created a theme and I am wrapping elements in ThemeProvider and applying the theme to all elements within.

Final Thoughts

styled-components is a must use for any developer trying to apply style to a React based app. It provides a flexible, user-friendly, modular, approach to using CSS. Although, styled-components help developers more easily apply styles to their app, using styled-components does not make the job of sorting through the complex CSS language for the desired styles any easier.

style-components docs
CSS docs
createGlobalStyle and ThemeProvider

A Quick Introduction to Lit.js and Lit-Element

Miles Ager — Mon, 06 Feb 2023 11:08:06 +0000

Lit.js is a modern lightweight library for building customizable reusable components that work across most browsers and platforms. One key feature of Lit.js is Lit-Element. Lit-Element can be used to create professional looking web features, such as a story viewer or a step-by-step building block construction guide using components.

Web Components

Lit.js uses web component, which are reusable custom element one can use in HTML like any other HTML element. Web Components provide a way to create custom UI elements that can be used across multiple web pages and applications. One can manipulate the styles, behaviors, and structures, of the page a user might see when visiting a website.

Lit-Element intro

Lit-Element is a powerful library for building web components and is well adapted at using Custom Elements, Shadow DOM, and ES Modules. Lit-Element is built on top of the Lit HTML templating system, which provides a fast and efficient way to render HTML templates using JavaScript. Lit-Element allows one to easily define properties, handle events, and render templates, all without needing complex frameworks. Lit-Element allows one to create dynamic, reactive user interfaces that update in real-time. Below is an example of how one can create a custom element with Lit-Element.

import { LitElement, html } from 'lit';

class ExampleElement extends LitElement {
  static get properties() {
    return {
      message: { type: String }
    };
  }

  render() {
    return html`
      <p>${this.message}</p>
    `;
  }
}

customElements.define('example-element', ExampleElement);

In the above example I imported the LitElement and html functions from the library. I then define a class called ExampleElement that extends LitElement. The static get properties() method is used to define the property (message) of the custom element. The render() method is used to render the content of the custom element using the Lit HTML templating system. I used a template literal to render a paragraph element with the message property. Finally, I use the customElements.define() method to define the custom element with the tag name example-element. I then use the custom element in HTML as seen below.

<example-element message="Hello World"></example-element>

In the above code I am using the example-example tag to rendered Hello World to the page using the render method

Lit-Element Features

Lit-Element has versatile tools, that can be used for a wide variety of projects, from simple UI elements to complex web applications. Lit-Element is very useful in Building reusable UI components, such as buttons, forms, and modals that can be used across multiple pages and applications. Lit.js and Lit-Element are excellent tools for practically any project by providing an easily customizable and efficient reactive user interface that updates in real-time.

Sources:

Build a Story Component with lit-element
Build a Brick Viewer with lit-element
Lit.js Documents

MongoDB - From a Noob's Perspective

Miles Ager — Mon, 19 Dec 2022 07:26:04 +0000

Intro to MongoDB

Developed in 2007, the name MongoDB is derived from combining the words humongous and Database. It was developed by the internet advertising company DoubleClick as a tool to help handle the problems they were experiencing with scalability and speed due to increased internet traffic.

As someone with a lot of background using the JavaScript coding language, but a noob with database management systems, I was excited to learn that MongoDB stores data in a JSON-like format. This means that in order to manipulate or view the data, the commands and syntax used are almost identical to the function expressions, as well as datatypes we see in JavaScript. Additionally, Information is organized within a database using a prototype based structure that is practically identical to the patterns of inheritance we see within JavaScript.

Simplicity

Up until this point, my only experience with database management systems was mySQL. With mySQL, I was able to develop an understanding of the multitude of SQL commands as well as the different ways these commands can interact in order to produce the logic within a query. Unlike MySQL, which compartmentalizes it's data within columns inside of tables, MongoDB stores values within documents, that are organized into collections within the database. This particular method for data storage seen in MongoDB is unstructured. This means one can simply add a document that contains values for both the username collection and age collection without having to specify any specific relationships the new document has with other documents that also contain those collections. MySQL on the other hand, is a relational database management system that requires one to follow the specific table column value schema already present within the database in order to view or manipulate the desired data effectively.

Google DBMS Trends for MySQL vs. MongoDB

User-Friendly Features

MongoDB also has several user-friendly features that aren't present in MySQL. This is likely one of the reasons why we are seeing a loss in popularity among MySQL users as seen in the chart above. MongoDB has a built in feature that automatically attaches a unique id to any new object. In contrast, MySQL needs the user to add a feature within each new table that generates a unique id for that row. Otherwise, if there are multiple rows that contain the same values in each column, one could experience the undesired outcome where multiple rows are returned instead of just one. It would be difficult to find an example where you wouldn't want a unique id for a row that likely represents a unique instance within your schema. MongoDB is able to lookup as well as manipulate its document based structure by binding the desired function expression to the desired collection within the database. In order to view or manipulating data in MySQL, the user must first understand the specific relations within their schema. This can get complicated with massive databases, and often leads to one having to write queries that chain several commands identifying the specific columns from within specific tables where they want to return/manipulate specific values. To add to the complexity of writing a query in MySQL, if the user should make a mistake in their query construction, the error provided is often generic. This leaves the user with no other option but to sort through the entire logic within their query without a point of reference. However, with MongoDB, incorrect syntax or use of function expressions, provides an error that usually details the exact point of reference where the logic failed.

Stack Overflow percent of questions related to MYSQL vs. MongoDB

Although I am biased because most of my experience is with the JavaScript coding language, I find that the difference in complexity seen in using MongoDB vs. MySQL is glaring. MySQL was released in the 1995, which gave Developers at DoubleClick ample time to learn from and improve upon MySQL. In my opinion, which is supported by the chart above indicating percent of stack overflow questions related to MySQL vs. MongoDB, MongoDB provides a less frustrating alternative to MySQL as a database management system.

Sources:

MongoDB Basics
What is MongoDB – Working and Features
MongoDB vs MySQL – Difference Between Them

Biotechnology -Reprogramming Our Genetic Code

Miles Ager — Mon, 12 Dec 2022 14:54:45 +0000

The current pace at which technological advancements alter and improve our lives across all spectrums is such a constant factor, that it's hard to truly recognize the impact a newer, still developing field, will have on our society. The advancements in Biotechnology has made it increasingly difficult to ignore our growing ability to manipulate genetic code for our benefit. The development of the COVID-19 vaccine, a process that would take several years just a decade ago, can now be done in a matter of months using mRNA. The massive investment made in the research and development of these vaccines was a boon to furthering our understanding of how we could better manipulate organic matter. An area that is also producing promising results is Gene-tharapy. Dr. Jennifer Doudna, who is world-renowned for her research involving the gene-editing tool CRISPR-Cas9, believes we will be able to manipulate any part of our DNA within a the next 30 years. There is a growing consensus of scientists that agree with Dr. Doudna. They are suggesting that the fountain of youth--having complete control over disease, genetic disorders, and our own mortality--could be within our lifetime.

The First Complete Sequence of a Human Genome

The 13 year long Humane Genome Project ended in 2003 in a partial success with 92% of the sequence completed. We did not yet have access to the technology needed to decipher 8% of the genome sequence. Computational power and the techniques available at the time only permitted short-read sequencing. Short-read sequencing, meant that scientists could only print out the DNA molecule in fragments. Put simply, viewing small pieces of a highly repetitive pattern, led to gaps in our knowledge as well as the models that were being generated. Within the past decade, two new DNA sequencing technologies emerged that had long-read capabilities.
Dr. Harrison Wein details these two new technologies in his article "First complete sequence of a human genome",

"The PacBio HiFi DNA sequencing method can read about 20,000 letters with nearly perfect accuracy. The Oxford Nanopore DNA sequencing method can read even more—up to 1 million DNA letters at a time—with modest accuracy. Harrison Wein, Ph.D. First complete sequence of human genome."

It wasn't until 2019 during a COVID-19 lockdown that a couple of cooped up scientists decided to implement both long-read methods to attempt to fill in the 8% gap in our understanding of the human genome. They were able to take advantage of the fact that hundreds of other biomolecular scientists all around the world were just as cooped up and bored as they were. By creating and expanding a community based effort to decipher the remaining gaps in our knowledge, hundreds of scientists ran the same DNA sequencing techniques which created countless models. These models were then compiled and compared with all other models produced by this network. After just three years, enough evidence was compiled to have a complete picture of the human genome in early 2022. The implications of this discovery are enormous. We now have the data to help locate the exact areas of DNA responsible for genetic disorders.

Advancements in Gene Therapy

In less than a decade, we have seen the onset of gene-therapies that are beginning to show just how drastically our world will change within our lifetime. A recent experimental gene-therapy, called base-editing was administered in early 2022 to the first human patient in history. The patient was diagnosed with an incurable form of leukemia, but less than a month later they left the hospital with no cancer in their system. Although it seems almost science fiction, base-editing therapy is incredibly complex, and for the moment, takes several months for a team to develop a treatment that is only effective for one person. Base-editing involves implanting T-cells from a healthy donor that are programmed to hunt down and attack all cancer cells in the patient.

Advancement in use of the CRISPR-Cas9 editing technology are vast, especially in the realm of organ transplantation. Rejection is a life-threatening complication in which the patient’s immune system attacks the transplanted organ, eventually resulting in a failed organ.
Everyday 17 people die while waiting for an organ transplant. The biggest factor being compatibility. Currently, the candidate must be compatible with the donor organ to prevent the host immune system from attacking the transplanted organ. However, with the advancements in CRISPR-Cas9, scientists have been able to target the harmful vectors within a pigs heart, making it possible to transplant into a human.

Our Future Control

The mounting evidence from our advancements in gene-therapies and our growing understanding of the human genome indicates we are on the verge of a new age of control. The progression of time will only make these technologies cheaper, more effective, and easier to mass produce. We could soon live in a world without disease or genetic disorder. very soon, Aspects of our bodies we could only dream of changing might be a gene-therapy procedure away.

https://bernardmarr.com/what-is-biological-computing-and-how-it-will-change-our-world/ - "What is Biological Computing And How It Will Change Our World"

https://startupsavant.com/news/nanobiotechnologies - "The Rise of Nanobiotechnologies in Medicine and Companies Leading the Way"

https://news.ucsc.edu/2022/03/t2t-genome.html - "First complete, gapless sequence of a human genome reveals hidden regions"

History of Transistors

Miles Ager — Mon, 05 Dec 2022 06:00:09 +0000

The Age of Information

Although there have been many technological advancements that have contributed to the development of the modern computing world, few have been as noticeably influential as the transistors. They are the brain/processing power behind everyday items from smartphones, to smoke alarms. As Michael Riordan eloquently put in his article,
"The Incredible Shrinking Transistor" the modern transistors is

"Little more than an abstract physical principle imprinted innumerable times on narrow slivers of silicon-millions of microscopic ripples on a shimmering crystal sea."

It seems physically impossible that the iPhone 14 has 15.8 billion transistors, each with a diameter of five nanometers, contained within its six inch by three inch frame. The smallest modern commercial transistors are two nanometers and over 18000 times smaller than the first transistor invented over 7 decades ago. That would be like comparing the length of three cruise ships lined up to a cricket. The transistor dimensions have halved in size every two years since their creation; a phenomenon we refer to as Moore’s law, after Gordon Moore pointed out the trend in 1965. The resulting outcome of this trend is a world where one can experience the advancements in processing power in the palm of one's hand.
But how did this technological renaissance come to pass?

The Problem

In the 1930's, American Telephone and Telegraph AT&T was having trouble expanding their business due to limitations with triodes. At the time, the triode, which consisted of three electrodes embedded within a vacuum tube, was the best technology available for amplifying electrical signals long distance. However, they were prone to overheat, and used too much power. A better device was needed for AT&T's continued expansion of telephone lines across the country. The solution was found within a group of materials that all shared a unique property of being neither a conductor like copper, or an insulator like Styrofoam, but somewhere in-between. This unique property, allows these semiconductors to modify their conductivity by applying a charge.

First transistor developed by John Bardeen, William Shockley, and Walter Brattain December 16th 1947

The transistor was developed in 1947 at Bell Laboratories, which was the Research and Development arm of AT&T. The device used to test the first transistor was about the size of a light bulb. It was created with a germanium crystal sitting on a power source, and a small plastic triangle wrapped in gold lightly touching the germanium surface. Using a thin razor, a slit was cut in the middle of the triangle to create a gap of at most .002 inches. Then the triangle was balanced over the germanium, so that the two gold points are in contact with the germanium surface.

How it Works

When the current being fed in through the first contact passes a certain voltage threshold. This causes a stronger output current to exit through the second gold contact. At the subatomic level, one can start to understand how the properties of the semiconductor are what gives this effect. Semiconductors have the ability to collect and release electrons from their outer-most ring. When an electrical charge exceeds the threshold, the electrons are actually knocking into those free floating electrons in the germanium's outer-most ring. This causes them to break away from the germanium and exit through the second gold contact producing a stronger current. However, if the current passed through the first contact doesn't exceed the voltage threshold, then there will be no output current exiting the second gold contact. This is because germanium also has the ability to loosely hold onto electrons in it's outermost ring, preventing them from exiting through the second contact. This less than a hair-length gap on the germanium between the two gold points is effectively a switch.

On/Off effect determined by strength of signal

Shrinking the Transistor

The science team at Bell Labs had finally found a way to amplify electrical signals more reliably and with less power use than with triodes. This allowed for the expansion of AT&T's phone lines across the country, which was the original goal for developing the transistor. However, the true potential for the transistor in its use for transferring and storing information was yet to be realized.

Several early computers were already around by the 1930's. Giant hulking monstrosities packed full of vacuum tubes and triodes. Around the time the transistor was invented, computers like the UNIVAC, were already being commercially sold. However, only businesses and government entities purchased the UNIVAC. It was probably difficult for any other interested buyers to find a place to put an eight-ton, 14-foot long, glorified calculator.

The Universal Automatic Computer (UNIVAC) was released in 1951

Nonetheless, humanity was content with their vacuum tube computers. After all, they had helped us decipher the NAZI's code and win WWII. Why fiddle with that little gold wrapped triangle thingy on a crystal, when one can simply go buy some vacuum tubes if they want to make a computer. But some saw the true potential of the little gold wrapped triangle thingy. Geoffrey Dummer believed we could improve upon the transistor by effectively having multiple transistors in one unit. He suggested that instead of attempting to make the connections with wires, it could be possible to embed electronic components in a semiconducting material. Dummer theorized that by creating tiny spaces in the layers of the semiconducting material, several transistors could be on one integrated circuit.

It soon became clear that shrinking computer components was feasible as well as a lucrative venture. The US Department of Defense saw it as crucial that we find ways to miniaturize electronic components to help in the ongoing Cold War with USSR. Millions of dollars in grants were invested by the Department of Defense to spur the research and development process. It wasn't until the late 1950's when an integrated circuit housing a few transistors in one unit was developed, that humanity began to see the true potential for the transistor.

The number of transistors that could fit in an integrated circuit continued to increase, from hundreds of transistors in the mid 1960's, to thousands of transistors by the early 1970's.

Picture of Intel 4004, released in 1971, it was the very first CPU

Computers finally became more mainstream in our society in the mid 1970's. The components required to make mid to large scale integrated circuits were finally cheap enough to mass produce, and soon everyone was seeing the benefits of increased processing power. We were able to send humans to the moon, we converted to an automated modern banking system, and the first personal computers were starting to hit the market.

We continued to develop newer and more effective techniques for shrinking the dimensions of the transistor. By the mid to late 1980's companies were mass producing computer chips with millions of transistors.

The Limit of Transistors

As humanity entered the next millennia, it seemed as though we were fast approaching the limits of physics itself in our pursuit to have more processing power. As transistors shrink to single digit nanometers, electrical charges from transistors bleed over to transistors within close proximity.

Even given these limitations, the development of new techniques as well as new materials has lead a team in China to create an even smaller transistor. At just one third a nanometer it is literally a single layer of carbon atoms. It seems hard to fathom going smaller than a carbon atom's width, but chances are, there is already a team of scientists figuring out the next path forward.

Sources:

Transistorized!
What is a Transistor
History of computers: A brief timeline
How to squeeze billions of transistors onto a computer chip

A Quick Guide to Loops

Miles Ager — Tue, 11 Oct 2022 03:52:52 +0000

In Javascript, loops are designed to execute a block of code a designated number of times based on the three set expressions.

expression 1 - sets a variable before the loop starts. (let i = 0)
expression 2 - define the condition for the loop to run (i must be less than 10).
expression 3 - determines the incremental increases or decreases of the value each time the code block is run (i++) or (i--). expression 3 is optional and can be omitted if you increment or decrement the value inside the loop.

There are 3 main types of loops: while loops, for loops, and for-in loops.

The While loop will execute a block of code as long as the specified condition stated directly after the While keyword is true. the while loop is traditionally set up as seen below

var a = 1; while (a <= 3){ console.log('Countup ' + a); a++; //results in 'Countup 1' 'Countup 2' 'Countup 3' printing to the console. }

while (a > 0){ console.log('Countdown ' + a); a--; //This will result in 'Countdown 4' 'Countdown 3' 'Countdown 2' 'Countdown 1' printing to console. }

The while loop is like a for loop with expression 1 and expression 3 omitted, because of this, the while loop is a little more limited than a for loop.

the for loop statement creates a loop with 3 expressions as seen in the introduction under section 0. A for loop statement will often look like 'for (let i = 0; i < 5; i++)' followed by a block of code to be executed a number of times based on the loop expressions. Example of for loop seen below. var arr = [1, 3, 'b', '$']; for (let i = 0; i < arr.length; i++){ console.log(arr[i]); } // this will log 1, 3, 'b', '$' to the console.

for loops are also able to decrement as seen below.
for (let i = arr.length - 1; i >= 0; i--){ console.log(arr[i]); } // this will log '$', 'b', 3, 1 to the console.

as seen above I am using the for loop to increment and decrement through an array. for loops like the one seen above, are most commonly used in relation to arrays since each array element has a corresponding index number.

To loop through objects we need a different kind of for loop, a for-in loop for-in loop statement loops through the properties of an object and executes the block of code for each property. The for-in statement consists of one expression that will return a key for each iteration until all properties have been looped through, or the loop is exited like with return. example below.

var object1 = {a: 1, b: 'y', c: 100}; for (let key in object1){ console.log([key], object1[key]); } // This will log ['a'] 1, ['b'] 'y', ['c] 100 to the console.

Using the for in loop, we are able to return each property allowing us to access the property values in order to alter, copy, or delete items from the underlying object.