DEV Community: Daniel J

Ascii Art via the Command Line

Daniel J — Tue, 02 Jan 2024 13:47:47 +0000

There is something truly special about creating something visually using technology. The ability to use a bunch of binary digits to make something visually appealing for us humans. It's something so far removed from the original idea behind computer systems that it reminds me of the vast and endless opportunities we have as intelligent beings. That being said, it must be pointed out, the juxtaposition between working in a command line interface, and displaying some sort of art or image by using ASCII characters in said interface that's designed to be text based. Pushing the limits of technology is how we got to this point in the first place.

The American Standard Code for Information Interchange (ASCII) is an encoding standard for communication between electronic devices. It was originally created out of a need for standardizing the communication's sent and received by our devices. It was used to encode up to 128 characters into different 7 bit integers. This was incredibly important and necessary to make our systems uniform and compatible. These days Unicode has taken the place of our standard encoding system and offers millions of code points compared to ASCII's 128, but the concept of using text characters to create art lives on.

Originally, there was an artistic use to ASCII characters that was created near it's inception. It came due to the unreliability and imprecisions of modern day printers at the time. In the 60's and 70's printer technology wasn't nearly as good as it is today, they certainly weren't able to tweet off of their dot matrix printers like we can today with certain models. The resolution for image printing was difficult to get right and often not possible. In turn the idea was born to use dot's and other ascii characters to draw a larger image, producing higher resolution images than most standard printers.
This is an image printed in 1961 using a teleprinter

These days ASCII art is much more expressive and free, often created as small ascii characters, phrases or pop culture references. The limits don't have to stop there however, as that is a great area of overlap for art and technology. Pushing the limits of what we have to create things we didn't think we could like creating art inside of our terminal! We can create something small and fun like the fortune | cowsay terminal packages that give you a "fortune" being told to you by an ascii cow.

Alternatively, if you are a math wizard and a programming wizard (AKA knowledge of programming in C), you can make something incredibly complex, like a rotating donut. (I can only show multiple screenshots due to formatting limitations.)

Esoteric Programming Languages

Daniel J — Mon, 11 Dec 2023 13:33:35 +0000

At the heart

of programming lies the desire to create things. Whether it be for work, for fun, work or artistic purposes, we love to build functional things using computers. What happens though when we attempt to push the boundaries of what we understand programming to be? Today I'll cover some examples of just how far we can programming with rules, syntax and ideas that will make you question just how exactly someone could come up with something like an esoteric (programming) language.

You may think to yourself, this seems like a weird line break to separate paragraphs, and you'd be right because it's not intended for that purpose. That line is the 'Hello World' test in what is likely the most popular esoteric language "BrainF**k". Your next thought is probably '...how?', which brings me to the purpose. Esoteric programming languages(esolangs), are not built for practical applications. The idea is to be creative and push the boundaries of what we know programming is, while ideally maintaining a system that is Turing-complete. This means that a language would be compatible with any turing system to manipulate, read and set data sets. This throws a pretty wide net for what can be usable, and makes the 'hello world' test a great benchmark for esolangs.

That being said,

creating an esolang gives you the creative freedom to make your own rules. These rules are often convoluted for the sake of being unique or incomparable with any other programming languages. The same can be said for the syntax, design decisions and essentially everything when it comes down to esolang design. I'll be going over some esolang specific designs that I particularly enjoy due to the parody of them. As previously mentioned, "Brainf**k" is the most well known or most popular esolang and has inspired countless other esolang's with it's syntax and rules. It's standard setup accounts for around 30,000 cells, all set to 0 with a pointer pointing to the first cell. You can then move the pointer up and down the cells with commands.

As you can see, you manipulate the location of the pointer and alter the subsequent cell's byte value to represent a value inside of that cell. Here is another image from the esolang wikipedia that goes more in depth about the hello world example.

It is essentially all downhill from here. This as previously mentioned this esolang inspired and fathered many other's that derived their structure from brainf*ck. Here are a list of commands for a language that is near identical to brainf*ck but changes the keywords and commands to "orangutan sounds".

It substitutes the special characters with different syntax for ook's to denote different commands. This makes for an especially verbose version of brainf**k that takes this to write "Hello World!"

The last language I want to cover is called "Malbolge", promptly named after the 8th circle of hell in Dante's inferno approaches this concept from an almost cryptographic standpoint. This is "Hello World!" in Malbolge.

This is the more cryptic proof of concept esolang, implementing extremely unique rules and instructions to make the language even usable. This is a list of all the instructions in malbolge, which are chosen by an equation. Malbolge has three processor registers that are each set to 0 at the start of the program. Each are responsible for different things and are denoted by a, c and d

This language wasn't always Turing-complete and took other developer's interest in revamping things like a memory limit in order to make it work fully functionally. It's also important to note that a non-terminating loop wasn't even able to be performed until 2005, 7 years after it was created. It has gone through different iterations by other developers that made it more usable but still under the same umbrella idea that Malbolge was formed under. Malbolge has many more difficult and convoluted rules to follow that I won't be covering, but serves as a reminder of the proof of concept ideals that fall under the esolang category.

There is a common theme

amongst these esolangs that speaks most to me in the parody and creative freedom. Since entering into the software developing world, I'd always had an interest in creating my own functional programming language. I'd initially wanted to create something convoluted, silly and not necessarily practical which is really what sparked my curiosity in esolangs. I encourage anyone who may feel like programming is too rigid or serious to take a look at the esolang wiki to check out how far we can test the limits of our systems.

Intro to Async / Await Syntax

Daniel J — Thu, 30 Nov 2023 21:21:36 +0000

If

you’ve spent any time coding in javascript on the back end of an application, you’re likely familiar with “promises”. If you aren’t familiar with promises as they relate to javascript, or code, they are essentially used to represent the eventual invocation/success/failure of an asynchronous function. An asynchronous function or operation is one that does not run at the time of interpretation, and can run in parallel with other operations. Synchronous code on the other hand runs one at a time without any ability to send more than one request at a time.
Asynchronous programming is at the heart of our backend technologies as it allows for us to designate “nets” of asynchronous code to catch incoming or outgoing requests as well as send multiple requests at any time. The anatomy of a promise follows that of a function for the body, however we can use .then at the end of the function call to designate what happens next to the returned value of the promise. We simply name the returned value whatever we want and manipulate it in our .then block to make a promise chain. This can be anything from displaying something to a user on the client side to sending another request to another endpoint. When working with promises and asynchronous code, we need to ensure a good development experience by handling errors. With the setup of promises we need to handle errors that may arise as if we don’t, we will simply not get any information back to debug our code. We do this by using a .catch block after our .then block to handle any errors that may arise from our promise resolution. The beauty in promises is that they are always there, waiting to be used by our applications or users to handle the magic behind the scenes. All this to say there are issues that come from traditional promise chains. This is an issue that pertains to a lot of asynchronous code, that being illegibility. Asynchronous code can be large, daunting and difficult to read or follow. Programmers young and old have experienced the triangle of doom, a tale as old as time, stuck in callback hell. That is where Es6 saves the day. Upon the release of ES6 or ECMAScript(2015), the introduction of async/await syntax graced us. A new way to write promises that severely reduced the difficulty and intimidating stature of traditional promises. Async / await are essentially the same as promises but offer shorter, more concise code. It helps make the jungle of asynchronous code much more manageable, it may not seem like much, but when you’re looking at thousands of lines of async code, the benefits this syntax offers is unparalleled. This new syntax can be difficult for new programmers to pick up on top of the already relatively confusing idea of how promises work. The main syntactic difference is that you must declare a function asynchronous with the async keyword in the function declaration, and the blocks for then and catch would now be try and catch. Along with this comes the ability to use the await keyword to tell our program in these blocks to await the resolution of a promise and assign it to a variable, which also does away with the required use of Promise.all for multiple promises. All in all, there are some minor differences between the two, but it’s worth learning to save on the potential time waste and headache that can come with gigantic promise chains.

Intro to Async / Await Syntax

Daniel J — Mon, 27 Nov 2023 13:20:51 +0000

If you’ve spent any time coding in javascript on the back end of an application, you’re likely familiar with “promises”. If you aren’t familiar with promises as they relate to javascript, or code, they are essentially used to represent the eventual invocation/success/failure of an asynchronous function. An asynchronous function or operation is one that does not run at the time of interpretation, and can run in parallel with other operations. Synchronous code on the other hand runs one at a time without any ability to send more than one request at a time.
Asynchronous programming is at the heart of our backend technologies as it allows for us to designate “nets” of asynchronous code to catch incoming or outgoing requests as well as send multiple requests at any time.

The anatomy of a promise

follows that of a function for the body, however we can use .then at the end of the function call to designate what happens next to the returned value of the promise. We simply name the returned value whatever we want and manipulate it in our .then block to make a promise chain. This can be anything from displaying something to a user on the client side to sending another request to another endpoint. When working with promises and asynchronous code, we need to ensure a good development experience by handling errors. With the setup of promises we need to handle errors that may arise as if we don’t, we will simply not get any information back to debug our code. We do this by using a .catch block after our .then block to handle any errors that may arise from our promise resolution.

The beauty in promises is that they are always there, waiting to be used by our applications or users to handle the magic behind the scenes. All this to say there are issues that come from traditional promise chains. This is an issue that pertains to a lot of asynchronous code, that being illegibility. Asynchronous code can be large, daunting and difficult to read or follow. Programmers young and old have experienced the triangle of doom, a tale as old as time, stuck in callback hell.

This is where Es6 saves the day.

Upon the release of ES8, the introduction of async/await syntax graced us. A new way to write promises that severely reduced the difficulty and intimidating stature of traditional promises. Async / await are essentially the same as promises but offer shorter, more concise code. It helps make the jungle of asynchronous code much more manageable, it may not seem like much, but when you’re looking at thousands of lines of async code, the benefits this syntax offers is unparalleled. This new syntax can be difficult for new programmers to pick up on top of the already relatively confusing idea of how promises work. The main syntactic difference is that you must declare a function asynchronous with the async keyword in the function declaration, and the blocks for then and catch would now be try and catch. Along with this comes the ability to use the await keyword to tell our program in these blocks to await the resolution of a promise and assign it to a variable, which also does away with the required use of Promise.all for multiple promises. All in all, there are some minor differences between the two, but it’s worth learning to save on the potential time waste and headache that can come with gigantic promise chains.

Data Encyption

Daniel J — Mon, 16 Oct 2023 13:24:10 +0000

Encryption is a cryptographic act of taking a message and scrambling it to form another message to hide the contents of the original message. This principle plays a crucial role in our day to day lives in the form of data encryption. Because the internet is an open and public place, we need a way to secure our messages and private data that we transmit through the internet. It helps maintain security in our computer systems and applications to avoid having our sensitive private information secure on the web. So how exactly does our data go from plain text to cipher text(encrypted text), and how does that benefit me?

Before talking about data encryption as we know it today, it's important to know what came prior to what we have today as well as some key definitions. A message is encrypted into a certain number of bits, depending on the type of encryption, symmetric encryption works by breaking up the message into 64 bits, the length of the bit string is the block size. Without delving too deep into its history, data encryption up until 2001 was handled by the Data Encryption Standard. This standard was a symmetric key algorithm, meaning that the same key that was used to encrypt the message into cipher text, is the same key that is used to decrypt the message into plain text. This encryption standard has a 56 bit encryption key, meaning that they possible number of permutations being 2 to the 56th power. This should not be confused with the block sizes, as that refers to the number of blocks per stream ciphers, meaning the message that is being transmitted. This may sound like a lot but compared to what we use today, it pales in comparison. Modern computers are able to brute force decryption for 56 bit encryption much faster than computers during the time for Data Encryption Standard.

Symmetric encryption presents an issue as far as decryption goes, along with its small bit size, it's also impractical and inefficient to have two keys that share the same password between two parties. In enters Asymmetric encryption, specifically as it pertains to the Advanced Encryption Standard being combined with RSA encryption. AES uses a symmetric block cipher to store its 128 bits of data, and it's decryption keys have the option of being 128, 192, or 256 bits long, with each bit more being more secure than the last. This encryption method solves this issue in that it uses a mathematical algorithm to generate two separate keys, a public and a private key. There are many different algorithms used to generate keys, the most popular being RSA Say you want to send a message to your friend Bob and you don't want anyone else to read it. If Bob shares his public key with you, you can use it to send him the message, and in transmittal it will be encrypted so that no one can intercept that message or read it. The only way it can be decrypted, is with Bob's private key. This is because his public key is generated mathematically to match his private key so that only he can access any information transmitted to him. This is the key principle behind encryption and prevents antiquated technologies like DES.

This RSA/AES encryption is used in every aspect of our data encryption today, anything you can think of that you use on a day to day basis is probably encrypted in AES, and if it isn't, your data is probably extremely vulnerable. Take for instance, HTTPs, this uses AES and if you dare venture to a site without it, you've probably received a warning message or two telling you that the site is unsecure. This is true for now, but with the advancement of technology, which seems to be logarithmically increasing every year, computers will soon catch up with AES in the same way that it did with DES. Once that happens, it's a scramble to standardize as much of the internet as possible to ensure that we all remain safe when we have access to things like quantum computers that can break AES encryption in minutes or seconds. This reality seems to be a very far way away, as even now, quantum computers are not widely available, and generally reserved for labs or universities. Quantum encryption standards seem to be the next frontier for encryption standards, as quantum computers can perform around a million computations at once while our normal computers can only do one at a time.

A short introduction to Penetration testing

Daniel J — Mon, 09 Oct 2023 13:10:43 +0000

As technology continues to grow and become a more and more integral part of our lives, so grows the need to keep that technology secure and safe for consumers. Whether it's cameras in our homes connected to wifi being tapped into, or the data being transmitted between companies being intercepted, cyber security continues to be paramount in our day to day lives to protect us from these insidious possibilities. We are reminded too frequently of how important this is with horror stories of data breaches, as recent as this past week, 23andMe had a data breach that is affecting millions of their users, having their profiles information listed for sale on shady online marketplaces. The information stolen included the users profile, gender, email address, photos, date of birth and ancestry information. These sorts of data breaches are a nightmare, and they are not exclusive to consumer companies either. Back in June of 2023, the Louisiana Office of MotorVehicles(OMV) suffered a data breach that saw every single Louisiana resident with a state issued driver's license, ID or vehicle registration. The data stolen included, names, addresses, social security numbers, driver's license number, vehicle registration info, and more. This data breach occurred specifically by using a popular third party application called MOVEIt used for transferring large files. Targeting third party applications that other companies pay licensing for around the world to use are a common attack vector for people who are trying to steal data.

So what can we do to deal with such attacks?

Penetration Testing,
also referred to as pen testing is a simulated cyber attack, typically done by a company that specializes in it. The simulated attack doesn't always have to be cyber, there are also physical pen testers who will be tasked with breaking into a companies facilities and making a physical extraction of data. If you've worked for a company where you have an email attached to your employment, it's likely you have experienced a very small scale form of pen testing in automated phishing emails. As silly as those things might be, they are extremely important in keeping companies secure as they can train their employees to identify suspicious emails and attachments. This is especially important as research by Deloitte found that 91% of all cyber attacks begin with a phishing email.

When a penetration testing company sets up an agreement with a consumer company, they usually have a contract. This contract states the guidelines for the penetration test, where they can and can't enter, the information that they would want to see if they could access(if any specifically), as well as any edge cases or constraints that the requesting company would like to place on them like whether it would come from a phishing attempt or an exploitation attempt on their software or application. The guidelines to the contract ensure that both parties remain safe legally as it is extremely likely that they will be handling secure information in their attempted extraction. This step will also be defining in the next steps as this part will also go over the scope of the penetration test.

The next step in this process is open source intelligence or Opsec, as well as figuring out the attack vector, contingent on the contract and it's restraints. If a company wants pen testers to gain entry solely through phishing attempts, it would be more specific in that spear phishing would be the route to take. Spear phishing is the same concept as phishing however it is designed to be specific to an individual to create believability and induce trust for the targeted person to feel safe in clicking it. This works startlingly well, as when we recognize an email that seems suspicious, but they include details about us personally that show that this person knows us (or of us), then we are more likely to fall into the trap. Opsec comes into play here in a big way, what if they might have something pertinent to our linkedin job interests, all of a sudden this suspicious email surely would be real and not an attempt at gaining access to our systems. Penetration testers will often have a tool kit with a variety of different proprietary software to aid in their tasks, along with other pen testing specific products that make their job a lot easier. If a pen tester can get their foot in the door, and get higher level clearance through their chosen attack vectors, the job becomes a whole lot easier.

Once inside, it can be extremely hard for people in the IT department to combat this intruder, especially if this is a blind pen test where the employees are not aware that they are being tested by the company to see if they can protect their data. This is important as a lot of penetration tests will include maintaining control of the systems, to check and see how long they can stay inside and remain unfound, untouched and unnoticed. Dependent on the situation, some pen tests will want extraction and then exit, but most of the time, a company will want to see how long an intruder could remain in their system without raising alarm bells.

By the end of this entire process, whether they're found out or not, the penetration testers will compile a report that has details of their assessment. This assessment will usually contain information on attack vectors or strategies used in their attack, their specific point of entry, what information they were able to take or what damage they were able to cause, and how long they were able to remain in the system without being noticed or removed. There will be various details and recommendations included by the penetration testers and sometimes even a rating.

Penetration tests are extremely important, invaluable services as they provide a real time simulation of a potential catastrophic and preventable situation. This obviously is a great benefit as the data is not actually being stolen, and their systems are not actually in danger. However if the company does poorly, it is a scary indicator that they would need to instill better practices in their employees or better security measures for their applications.

An introduction to Webscraping (with python)

Daniel J — Mon, 02 Oct 2023 13:45:37 +0000

Webscraping

is a concept that has existed since the inception of the internet. It is known by many other names, (web based) data extraction, data harvesting, web crawling and many more. A webscraper is a program that's sole purpose is to do exactly those things, target a website (or websites) and crawl through it's HTML elements to extract data that we want to see. It's not unreasonable to see this explanation and think to yourself:

So...like...browsing the web? Through a program? What's so great about that?

Well there are so many great things about it but the main idea behind it is automation! As human beings not only do we experience life, often without a lot of time to browse the web for everything we want or need, but we experience fatigue in repetitive tasks. For example, imagine for a moment you spend 8-12 hours a day working, with minimal time to take care of things in your personal life. You do everything you can but are left with practically no time to browse the web for products you want or maybe even need in order to help your workflow. Luckily for you, you know a little bit of python and are a pro at googling, so enter in your little automated webscraper to save the day.

Stepping back from the example for a moment, there are pros and cons to be had with webscraping that are important to understand before delving into an example.
Pros:

Saves time and headache by automating any data you want to find on the web.
Can be completely automated, in that we can set our webscraper up to grab data by the second, minute, hour, day etc..
Depending on the reason for data collection, this can give you a huge edge over others if for instance you're searching for a product that is not frequently in stock.

Cons:

Dynamic websites make for a hard time with webscrapers.
A webscraper is essentially a bot, something that is not exactly liked by many sites you may try to scrape data from.

That being said, I'll be using a static test website created by Webscraper.io, the link to the specific test site can be found here. Feel free to visit the test site and inspect the HTML to see for yourself the elements we'll target for this webscraper. This is the first step to building any webscraper as this is how we will tell it where to grab data from.

Using our element selector tool, we test the waters to see what the title of the first product looks like in the html, and we see it's an "a" tag with a class of "title". This is a great start to figuring out what pieces of information we want, but it still isn't good enough. We want to zoom out and find the div storing all of the products on the page, not just the specific one we initially targeted.

This is perfect! We see now that the div storing all of the product information on the test page is stored under a class of "col-md-9". This is the div we will want to isolate to break down all the data inside it and get what we're looking for! Looking over to our code editor, I'm creating this webscraper using python as well as 3 different libraries. To start we'll be using the requests library for our HTTP requests and the BeautifulSoup library for the actual scraping of data. For the sake of read time, pseudocode is included to explain what is happening in the code.

Now that we've completed the setup, we can target the div that stores all the product data using BeautifulSoup's find function. Once it's stored, we can use find_all to grab all the instances of title classes, price classes, description classes and ratings classes.

Since we've scraped all the data we're looking for, its time to print it to see what it looks like!

Voila! We now have a printed table in our terminal containing each of those things in a nice legible list. You can do all sorts of things from here, changing the products you scrape to be only of a certain rating, titles containing a certain brand, the possibilities are endless! Although now we have all this data we wanted, the terminal isn't exactly the prettiest place to view all of it. Here is where our third library comes in, Pandas. Pandas is a data analysis library for python that we can use to extrapolate our data into a more legible format.

Lastly, all we need to do is export our data frame that we created with pandas to a csv file for readability.

We now have access to a nice spreadsheet of 117 rows with the 4 columns of Title, Price, Description and Ratings, with barely any code! The same process can be applied to almost any static website, but the real challenge comes with dynamic websites. There are other methods to scrape such websites but that'll be covered in an upcoming blog where I'll be using Selenium in tandem with some of the same tech used in this blog.

Repetition can make you loopy!: Intro to JavaScript Loops

Daniel J — Mon, 14 Aug 2023 14:27:13 +0000

Looping is a concept utilized in most programming languages we use today. The idea behind it is central to what we strive for as programmers, that being minimizing our workload as much as humanly possible. Focusing in on that idea, we can point to the D.R.Y. principle, otherwise known as "Don't Repeat Yourself," originally coined in "The Pragmatic Programmer". After all, why repeat yourself when the computer can do it for you! In this discussion, I'll go over looping in the context of JavaScript with examples using JavaScript and p5js. However, keep in mind that the concept is largely transferrable across other languages that utilize loop structures.

So what is a loop?

A loop is a block of code that performs an action for us a specified - or sometimes unspecified - amount of times. The possibilities become endless with loops, allowing us to create complex programs and avoid Carpal Tunnel Syndrome. JavaScript has a few different loop methods at its disposal, but we'll be going over the 3 most common that you'll come across:

For loops
For.. in loops
While loops

For loops

A for loop will loop through a collection of data, declaring a starting point, an ending point and an incrementation. The syntax in a for loop looks like this:

array [1, 2, 3, 4, 5]

       start          end      increment      
         |             |           |
for (let i = 0; i < array.length; i++) { //be sure to separate by ;
    //do something here
    console.log(array[i])
};

console will log
1
2
3
4
5

Lets break down this code to better understand what's going on under the hood.

We begin the loop with the for keyword, (who would've thought!) before opening up a parentheses to begin our chain of logic.
Our starting point is declared with variable keyword declaration let or var. (IMPORTANT: You can use const but remember it cannot be reassigned.) I prefer using let, and in JavaScript, using i as the name of the variable in a for loop is a common naming convention, but it can be anything your heart desires!
So, we've initiated our for loop. We've told the computer that we want the variable i to be 0 at the start of the loop. Now, we want to tell it when to stop. Once again, this stopping point can be anything you want it to be. However, for this example, we're using the .length array prototype method to indicate that we want the loop to end at the last index of the array. Fun tip about the .length method: using .length allows us to make this loop flexible with an array whose quantity may increase or decrease throughout the program.
Lastly, we want to indicate our increment amount, which again can be anything! In my above example, I used the ++ operator to indicate i+1.

Now let's see an example with different start and stop points, as well as iteration by iteration.

for (let i = 0; i < 10; i ++) {
 console.log(i);
};
iteration 1: i=0, 0 is < 10 incr by 1 and log the iteration's value(0)
iteration 2: i=1, 1 is < 10 incr by 1 and log the iteration's value(1)
etc.. 
console will log numbers 1 - 9 as when i = 10 it is no longer less than 10.

For...in Loops

For...in loops are used to loop through an object's properties to achieve the same result, but for objects! The syntax for a for...in loop looks like this:

let car = {
manufacturer: 'BMW',
wheels: 4,
doors: 2
year: 1985
};
for (let key in car) {
console.log(key, car[key])
};

The expected output for the above code to the console log would be:

manufacturer BMW
wheels 4
doors 2
year 1985

Let's break it down like an old BMW!

We start off with our for keyword before opening up some parentheses to declare our variable for the keys in object.(foreshadowing!)
Next, using a variable declarer of your choice like let, we declare the name we want that variable to have, one of the most common naming conventions being key/keys.
Here's where that in keyword shines! We use it to tell our computer where to check, that being in the object that is declared after.
The final piece of the puzzle is the object we're looping through. In the above example, it's the car object.

While loops

While loops are probably my least favorite kind of loop. It can excel with small looping quantities and smaller scale programs, but otherwise it's usually not recommended. This loop essentially works by telling the computer to execute some task while x condition is true. The syntax for a while loop looks like this:

let i = 0;

while (i < 10) {
console.log(i);
i++;
}

Lets break it down, one last time!

The syntax for this code is pretty straightforward. Outside of the while loop, we declare a variable i and assign it to 0. This is the setup for our while loop that works based off a certain condition remaining true.
We then use the while keyword to start off, before starting our conditional logic. Here we will say while i is less than 10, we want some block of code to be executed.
Lastly, and arguably the most important part about this loop, is the incrementation of i that occurs on the last line of the code block. We need to increment i as if we do not, we will create an infinite loop, since i will remain 0 infinitely.

I'm sure by now, you're able to see the utility loops can provide us in our programs. We can pass in collections of data to retrieve information, repeat executable code as much as we want, and stay true to our D.R.Y. principle.

Visual examples through p5js

In this last section, I'll be creating some visual examples to show how helpful loops can be. I'll be using p5js, a JavaScript library with functionality for creative coding. That being said, I'll try to give a condensed version of the functions being utilized in the following examples.

function setup() {
  createCanvas(800, 600);
  background('beige');
}

function draw() {
  translate(width / 2, height / 2);
  rectMode(CENTER);
  noFill();
  rect(0, 0, 400, 400);
  noLoop();//this function is to stop the draw func from looping

This block of code renders a canvas that is 800x600 pixels, and draws a rectangle in the cartesian coordinates (0, 0) and a width and height of (400, 400). It looks like this:

Now I want you to imagine you have to draw 100 rectangles on this canvas at random x and y coordinates, with random width and height arguments (between 0 and 10) and you have no idea that loops exist (or recursion!). The code would look something like this:

function draw() {
  noFill();
  rect(random(width), random(height), random(10), random(10));
  rect(random(width), random(height), random(10), random(10));
  rect(random(width), random(height), random(10), random(10));
  rect(random(width), random(height), random(10), random(10));
  rect(random(width), random(height), random(10), random(10));
  rect(random(width), random(height), random(10), random(10));
  rect(random(width), random(height), random(10), random(10));
  rect(random(width), random(height), random(10), random(10));
  rect(random(width), random(height), random(10), random(10));
  rect(random(width), random(height), random(10), random(10));
  rect(random(width), random(height), random(10), random(10));
  rect(random(width), random(height), random(10), random(10));
  rect(random(width), random(height), random(10), random(10));
  rect(random(width), random(height), random(10), random(10));
  noLoop();
}

The sketch would look something like this:

Which is fine and dandy but I stopped after 14 pastes, and you can imagine how painful 100 would be.

Now lets actually draw 100 rectangles of the same arguments using a for loop.

function draw() {
//I removed the translate func to allow it to start from the top left of the screen
  noFill();
  for (let i = 0; i < 100; i++) {
  rect(random(width), random(height), random(10), random(10));
  noLoop();
  }

Which produces an image similar to this:

We can go as far as our computer's strength can take us!
The same loop but with 5,000 rectangles:

This truly puts into perspective how powerful loops can be. That single loop can cut down a theoretically infinite number of lines of typing that same function in less than 5 lines. You can read more about p5js functionality to fill in the bits of information on native p5js functions, as well as the Mozilla Developer Docs to get more information on loops.