DEV Community: Anthony Lopez

How To Use Tailwind CSS With React!

Anthony Lopez — Wed, 19 Jul 2023 15:17:37 +0000

Why this topic?

CSS can be quite a challenge for anyone new or experienced working on their front-end applications. It is one thing to code out a functioning, easy-to-use application but it is another story to have a application that is appealing to the eye. Unfortunately, the general public is subject to the practice of judging a book by it's cover and if the cover does not scream pretty, then the public loses interest. Software engineers can express their artistic visions through CSS but the how is always the question and the question can only find its answers through ones' tool. One of the tools that can help ease the pain and process of creating a design is Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework which makes it very easy to apply great styling to your React web application by choosing from the framework’s ready-made CSS classes. Tailwind CSS is quite popular among today's CSS frameworks and is used by known tech companies such as Twitch, Coursera, and Shopify. The approach that Tailwind CSS offers speeds up the styling process significantly and in setting up comprises only very few steps.

THE TUTORIAL

Creating Your React Project

Since React is the example that is being used today, the very first step will be creating a React project. The way to do is to use the create-react-app script on the command line:

$ npx create-react-app a-react-app-with-tailwind
$ cd react-app-with-tailwind

The following output after running the create-react-app script via the npx command should look something like this:

Install Tailwind CSS

After having entered the newly created project folder a-react-app-with-tailwind, we can now add the Tailwind CSS library and it's dependencies postcss and autoprefixer by using NPM (Node Package Manager) in the following way:

$ npm install -D tailwindcss postcss autoprefixer

Generate Configuration Files

The next step is to create default configuration files for Tailwind in the project folder and in order to configure everything we need for Tailwind, we will need the following two configuration files:

tailwind.config.js
postcss.config.js

These files can be generated by executing the following command in the project folder:

$ npx tailwindcss init -p

This command, on top of creating the files, makes it so the default configuration structure is already available in said files.

Configure Path To Template Files

Inside tailwind.config.js, we need to specify the path to our React template. This can be done by adding the following configuration setting:

module.exports = { ** content: [ "./src/**/*.{js,jsx,ts,tsx}", ],** theme: { extend: {}, }, plugins: [], }

Paths are configured as glob patterns, patterns that can expand a wildcard pattern into a list of pathnames that match a given pattern, which means it's easy to match all of the content files in a project without a ton of configuration. We use * to match anything except slashes and hidden files, and ** to match zero or more directories. The values between {} are seperated by a comma to match against a list of options. In the example above, the setting is matching all files with a file extenstion of js, jsx, ts, and tsx covered within the src subfolder.

An important thing to note is that these paths are relative to the root of your project, NOT the tailwind.config.js file.

Add Tailwind Directives

Lastly, add the following Tailwind CSS directives into file index.css:

@tailwind base; @tailwind components; @tailwind utilities;

Having done that, we can now make use of Tailwind's CSS classes within our main React component in App.js.

LET'S USE TAILWIND CSS!

To see Tailwind CSS in action, let's replace any default code in src/App.js with the following implemenatation:

function App() { return ( <div className="container mx-auto bg-gray-200 rounded-xl shadow border p-8 m-10"> <p className="text-3xl text-gray-700 font-bold mb-5"> Welcome! </p> <p className="text-gray-500 text-lg"> React and Tailwind CSS in action </p> </div> ); } export default App;

Start the development web server with the following command:

$ npm run start

and you should be able to see the following result in the browser:

In the event that things did not go as smoothly as expected, Tailwind CSS has a dedicated website that can answer any complex or further questions.

In the event that things did go smoothly, it is recommended to use as a reference guide to use Tailwind CSS in all of it's freedom.

That being said, may Tailwind CSS be the proper paint and brush to help you paint out your front-end to match the vision for your application!

Controlling Data with Flask-SQLAlchemy: Validations vs Constraints

Anthony Lopez — Sat, 01 Jul 2023 01:11:13 +0000

Why this topic?

In the world of coding, one of the many core skills of a programmer consists of abilities in managing databases. In a previous post about data structures with Python, it was discussed the importance of one's understanding of code and how to correctly organize, manage, and store code to properly create the building blocks of software systems. To reiterate, database management refers to the actions one takes to manipulate and control data to meet necessary conditions throughout the entire data lifecycle. Database management requires one to have strong skills with data structures and algorithims. Understanding how to use this knowledge is critical, because it is what can lead to building software that is efficient and optimized.

When creating databases, validating the data that goes in is a critical step in ensuring a smooth workflow. Without validators or constraints for the data that is being taken in, especially at the beginning of the process, it can create inconsistences and may influence the final results making them inaccurate. In order to prevent inaccuracies, one must check quality of the data before it is processed. Validating data is essential in creating data that is consistent, accurate and complete, preventing loss of data and errors. Data validation can be easily overlooked but it is good practice to constantly check oneself with what data exactly is being inputted. Flask-SQLAlchemy offers two ways, constraints and validations, to validate the data that is being taken into the database.

Constraints

SQL are used to specify rules for the data in a table. In other words, limit the type of data that can go into a table. If there is any violation between the constraint and the data action, the action gets aborted and the data does not go into the table. There are multiple constraints in SQL and each have their own special rules.

NULLABLE

By default, a column in a table can hold null values. The constraint NULLABLE enforces a column to NOT accept NULL values if set to false. It ensures that the field will always have a value, which means no change can be made with this field unless a value has been added.

NULLABLE is useful for creating data for objects that cannot exist without having a value in their fields. An example could be an object with a name attached.

class Person(db.Model):
    __tablename__ = 'persons'

    id = db.Column(db.Integer, primary_key=true)
    first_name = db.Column(db.Integer, nullable=false)
    last_name = db.Column(db.Integer, nullable=false)

In the example above, an instance of Person must always have a value in the fields of first_name and last_name. This is because nullable is set to false, which means that when creating a person, it cannot exist unless there is a first name and a last name value. Logically speaking, a person could not (or at least should not) exist unless the person has a first and last name. NULLABLE is a good way to ensure that in creating instances, that data is not lost or incomplete.

UNIQUE

When inputting data into databases, values can be often repeated when creating multiple instances of a class. However, with the UNIQUE constraint, it ensures that all values in a column are different or rather reflective of the constraint's name, unique.

UNIQUE constraints can be useful when creating data that has an attribute that seperates it from the rest of the instances. UNIQUE constraints can come in the form of names, or ID numbers.

class Mountain(db.Model)
    __tablename__ == 'mountains'

    id = db.Column(db.Integer, primary_key=true)
    name = db.Column(db.String, unique=True)
    country_of_origin = db.Column(db.String)

In the example above, an instance of Mountain will have the fields of id, name, and country of origin. However, when creating an instance of Mountain, unique is set to true in the field of name. What that means is that in every instance of Mountain, name must be unique from each other and that no instance of Mountain can have name be repeated (the same for id). This logically makes sense because globally known mountains would have unique names that seperate it's identity, outside of it's id (or identifcation number) from each other. Country of origin does not have a unique constraint because multiple mountains can have the same country of origin. UNIQUE is a good constraint to make sure that certain fields do not contain the same data or have its data repeated.

DEFAULT

There may be circumstances when inputting data, that certain fields may not have a specified value therefore would need a default in case. The DEFAULT constraint would be used to set a default for a value in a column.

The DEFAULT constraint can be used in scenarios where fields of data can be expected to have a certain value unless specified otherwise.

class Worker(db.Model)
    __tablename__ = 'workers'

    id = db.Column(db.Integer, primary_key=true)
    name = db.Column(db.String)
    salary = db.Column(db.Integer, default = 50000)

In the example above, an instance of Worker would have the fields of id, name, and salary. Salary has a DEFAULT constraint in which the value would always be an integer of 50,000 unless there is an input stating otherwise. Logically, this would be okay because this is assuming that every entry level worker would have the same base salary coming into a company. The DEFAULT constraint can help avoid repetition of inputs when knowing a field would in most case scenarios have a repeating value.

Validators

Validators is an alternate way of checking the integrity and security of the data that is being input server-side. SQLAlchemy has a built in helped method for using validations, validates().
Validates() is set up as function, that can check data being input through fields via if statements.

class User(db.Model):
    __tablename__ = 'users'

    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String)
    password = db.Column(db.String)

@validates('username')
def validate_username(self, key, value):
    if not value:
        raise ValueError("Must have a username")
    return value

In the example above, a class of User has an id , username and password attached to it. Here @validates is checking the value of username, hence why the function is labeled as validate_username. The if statement reads that if there no value in the field of username, then a error message will pop up alerting the user on the server-side that the field of username must have a value. In the event that there is a value for username, then the instance of User will return the value that was input for username. Validators are a valuable method of checking if whether or not data is being input at all, and if so, does it meet the conditions to best fit the field.

In Conclusion

Having been introduced to validators and constraints, try to manipulate the data being input to your database to your liking and properly match up the data up to what the fields are expected to have. A developer must always check the integrity and security of the data of not just from the front-end but from the back-end as well. Inconsistencies can be the downfall of a database, and the workflow can be greatly hindered when not being able to managae data properly. Thus, one must always be in control of their data inputs so that the workflow of a project can be clean, concise and accurately produce the results that one would hope to achieve. By strengthing the handle over your databases, the stronger of handle you have over your code and projects. By staying in control, the more power you can demonstrate with your applications and ultimately achieve the purposes you set for your projects!

Resources
https://www.sigmoid.com/blogs/data-validation/#:~:text=Data%20validation%20provides%20accuracy%2C%20cleanness,as%20Excel%20creates%20better%20results.
https://www.w3schools.com/sql/sql_constraints.asp

Data Structures In Python : The Building Blocks Of Software Systems

Anthony Lopez — Thu, 08 Jun 2023 22:35:48 +0000

Why This Topic?

Traversing in the world of coding, a programmer should consistently strive to cultivate their skills and reinforce their knowledge by first understanding the what and why of code. Quite often the struggles that arise and serve as obstacles for a programmer are disguised as simple questions to doubt the reasoning and logic behind the purpose of writing their code. However, these obstacles can easily dissipate when one is armed with the knowledge of what they are dealing with. A common goal of a programmer would relate to their skills dealing with hardware. This could consist of abilities like database management, statistical analysis, and software knowledge.

Database management refers to the actions one takes to manipulate and control data to meet necessary conditions throughout the entire data lifecycle. Database management requires one to have strong skills with data structures and algorithims. These skills compound the strength of a programmer and that is because data structures serves as one of the building blocks of large software systems. Understanding how to use this knowledge is critical, because it is what can lead to building software that is efficient and optimized.

Data Structures In Python

Organizing, managing, and storing data is more than what's likely to be expected from a programmer. However, with the existence of data structures, programmers can store collections of data, relate them and perform operations on them accordingly.

Python has built-in support for data structures, and these structures are known as List, Dictionary, Set, and Tuple. Python also allows the programmer to create their own data structures. Data structures created by the programmer are commonly known as Stack, Queue, Tree, Linked List, Graph, and Hashmap. These data structures enable the programmer to have full control over the functionality of said structures. For today's subject, the focus will be on the built-in data structures of Python.

Lists in Python are used to store data of different types in a sequential manner. Each element of the list is assigned an address, which is called an index. The value for the first element starts with an index of 0, then goes on and on until the very last element. This is known as positive index. On the flip side, there is negative index, where the value for the last element starts with -1, and goes on and on until the very first element. Let's take a look at an example of a list.

my_list = [] 
#this creates a empty list, or in other words, a list with no elements

my_list = ['duck', 'buck', 'goose'] 
#this creates a list of 3 elements

Since my_list has 3 elements, going by positive index, duck would have be at index 0, buck would be at index 1, and goose would be at index 2. Going by negative index, goose would be at index -1, buck would be at index -2 , and duck would be at index -3.

To manipulate the data within the list, the append(), extend(), and insert() functions can be used.

Adding Elements

my_list = ['duck', 'buck', 'goose']
#this creates a list of 3 elements

my_list.append(['chick', 'chicken'])
#adds as a _single_ element

print(my_list)
['duck', 'buck', 'goose', ['chick', 'chicken']]

The append() function adds all the elements passed into it as a single element.

my_list = ['duck', 'buck', 'goose']
#this creates a list of 3 elements

my_list.extend(['hippo', 'lion'])
#adds as different elements

print(my_list)
['duck', 'buck', 'goose', 'hippo', 'lion']

The extend() function adds the elements one-by-one into the list.

my_list = ['duck', 'buck', 'goose']
#this creates a list of 3 elements

my_list.insert(2, 'bat')
#this adds the element starting from index 2

print(my_list)
['duck', 'buck', 'bat', 'goose']

The insert() function adds the element passed to the index value and increase the size of the list as well.

Deleting Elements

In contrast, instead of adding data, the del keyword, pop() function, remove() function and clear() function can delete data.

my_list = ['duck', 'buck', 'goose']
#this creates a list of 3 elements

del my_list[2]
#this deletes the element at index 2.

print(my_list)
['duck', 'buck']

The del keyword deletes the element passed to the index value and shortens the list as well.

my_list = ['duck', 'buck', 'goose']
#this creates a list of 3 elements

v = my_list.pop(1)
#pops the element at index 1 and gives it back

print('Popped Element: ', v , 'List Remaining: ', my_list)
Popped Element: 'buck' List Remaining: ['duck', 'goose']

The pop() function takes the index value and gives the element back.

my_list = ['duck', 'buck', 'goose']
#this creates a list of 3 elements

my_list.remove('goose')
#this deletes the element with the value taken in

print(my_list)
['duck', 'buck']

The remove() function takes a value and deletes the first occurence of the element with the matching value.

my_list = ['duck', 'buck', 'goose']
#this creates a list of 3 elements

my_list.clear()
#empties the list

print(my_list)
[]

The clear() function does not take any parameters, removes all elements from a list, and does not return anything.

Accessing Elements

Accessing elements in a list can be done by passing in the index values.

my_list = ['duck', 'buck', 'goose']
#this creates a list of 3 elements

print(my_list[2])
#access element at index 2
'goose'

Here, print(my_list[2]), is accessing the element that is at index 2 which in this case would be 'goose'.

Dictionary

A dictionary in Python is used to store key-value pairs, where if the key is accessed, the values associated are also obtained. To create a dictionary in Python, the flower braces can be used or the dict() function. The key-value pairs must be added when working with dictionaries.

my_dict = {}
#creates an empty dictionary

my_dict = {'Mario' : 'Red', 'Luigi' : 'Green'}
#creates a dictionary with two key-value pairs

print(my_dict)
{'Mario':'Red','Luigi':'Green'}

Here my_dict has two key-value pairs. The first key-value pair has a key 'Mario' with the associated value of 'Red' whereas the second key 'Luigi' has the associated value of 'Green'.

Changing and Adding Key-Value pairs in Dictionaries

In the case of when dealing with dictionaries, changing the values can be done by acessing the keys. In other words, you must first access the key of a pair before you can change the value.

my_dict = {'Mario' : 'Red', 'Luigi' : 'Green'}
#creates a dictionary with two key-value pairs

my_dict['Luigi'] = 'Purple'
#access the pair with the matching key, then updates the value associated with it

print(my_dict)
{'Mario':'Red','Luigi':'Purple'}

Here, the key'Luigi' is being passed into my_dict, accessing the key-value pair with the matching key and then changing the value from 'Green' to 'Purple'.

my_dict = {'Mario' : 'Red', 'Luigi' : 'Green'}
#creates a dictionary with two key-value pairs

my_dict['Wario'] = 'Yellow'
#creates a new key-value pair 

print(my_dict)
{'Mario':'Red', 'Luigi':'Green','Wario':'Yellow'}

Here, the key Wario is being passed into my_dict and because there is no existing key that matches it, will create one and then associate the value Yellow to it. The new key-value pair gets added to my_dict and now the dictionary has 3 key-value pairs.

Deleting Key-Value Pairs

Similarly to lists, to delete key-value pairs, the pop() and clear() function can be used.

my_dict = {'Mario' : 'Red', 'Luigi' : 'Green'}
#creates a dictionary with two key-value pairs

v = my_dict.pop('Luigi')
#pops the value with the associated key 'Luigi' and gives it back

print('Value: ', v)
print('Dictionary: ', my_dict)

Value: Green
Dictonary: {'Mario': 'Red'}

Here, the value is being returned by accessing the key of Luigi in my_dict.

my_dict = {'Mario' : 'Red', 'Luigi' : 'Green'}
#creates a dictionary with two key-value pairs

my_dict.clear()
#empties the dictionary

print(my_dict)
{}

Here, the clear() function does not take any parameters, deletes all key-pair values from the dictonary, and does not return anything.

Tuple

Tuples are the same as lists but have the special rule that once the data has entered in the tuple, it cannot be changed no matter the circumstance. However, the exception to that rule is that if the data inside the tuple is mutable, then the tuple data can be changed. To create a tuple, parenthesis are used or the tuple() function.

my_tuple = (1, 7, 9, 4)
#creates a tuple with 4 elements

print(my_tuple)
(1, 7, 9, 4)

my_tuple = (1, 7, 9, 4)
#creates a tuple with 4 elements

my_tuple = my_tuple + (0, 2)
#adds elements to the tuple

print(my_tuple)
(1, 7, 9, 4, 0, 2)

To append elements to an existing tuple, the '+' operator can take another tuple to be appended to it.

Sets

Sets are a colleciton of unordered elements that are unique, meaning that the elements can be repeated more than one time but will enter the set only once. Sets are created using flower braces where values are only passed into it.

my_set = {2, 2, 2, 3, 3, 4, 5, 10}
#this creates a set

print(my_set)
{2, 3, 4, 5, 10}

Here, despite that my_set has repeating elements, my_set is printed with 5 elements only.

Adding Elements to Sets

To add elements to sets, a value is passed to the add() function.

my_set = {2, 2, 2, 3, 3, 4, 5, 10}
#this creates a set

my_set.add(9)
#adds an element to the set

print(my_set)
{2, 3, 4, 5, 10, 9}

Here, the add() function added a unique element to the set, and since it is unique, is entered to the set.

Conclusion

Now having been introduced to built-in data structures in Python, create a space for yourself to work with data you are familiar with and get comfortable with manipulating data. Organizing, managing and storing data are a collection of skills that can be cultivated through trial and effort in a programmer's career. It is neccessary to have a solid understanding and handling of data, since data is what ultimately powers AI and advanced data applications. Remember to consistently check yourself with what you are doing with your code, and why you are writing your code. Knowledge is power, and with new-found knowledge, you can dispel your doubts and take one step closer to paving your path into the world of software engineering!

Resources

https://www.edureka.co/blog/data-structures-in-python/#:~:text=Organizing%2C%20managing%20and%20storing%20data,perform%20operations%20on%20them%20accordingly.

https://dev.to/codewithshan/13-reasons-to-learn-data-structures-and-algorithms-2022-bbl#:~:text=Data%20structures%20and%20algorithms%20are%20the%20building%20blocks%20of%20large,you%20smarter%20as%20a%20programmer.

https://www.indeed.com/career-advice/career-development/career-goals-software-engineer#:~:text=Software%20engineers%20design%20and%20develop,are%20skilled%20in%20both%20areas.

The Power Of Components in React and staying DRY

Anthony Lopez — Fri, 12 May 2023 17:11:29 +0000

Why this topic?

A beginner practicing and using Javascript in the world of coding may have heard of React. Before diving into React, it is important to have a basic understanding of what Javascript is. Javascript is a widely used programming language used to build out web applications and works well across all web browsers. As Javascript was being practiced and it's popularity increasing, the Javascript community recognized patterns of code that were being repeated to accomplish the same tasks.

A software engineer wants to uphold the principle of being DRY( Don't Repeat Yourself), and in the process of staying DRY, the development of Javascript libraries and frameworks came about from rewriting these repeated patterns of code. What Javascript libraries offered was that instead of writing these common patterns of code, code snippets were used to automate reoccuring animations and interactive forms that appeared on website applications. These prewritten code snippets were used and reused to perform common Javascript functions, and these Javascript librares were collections of said prewritten code snippets. Javascript librares were beneficial because it led to faster development of web applications that were less vulnerable to errors. React is one of these Javascript libraries and will be the focus of this discussion.

What is React?

As mentioned before, ReactJS is a Javascript library and it's speciality lies in helping developers build user interfaces (UI's for short). React is a popular, if not, THE most popular Javascript library being used by large and famous companies all around over the world such as Uber, Amazon, Instagram and much more. It's worldwide use has promoted lots of growth in the developing community, despite it only have being in 2011 by Facebook. React libraries help developers build rich, efficent front-end abstractions with less code and less time as well. To expand, ReactJS is a web-component based library and an open source Javascript framework that enables developers to manipulate each state of the Javascript application to have it appear simple in a visual manner. When there is a change in state or data of the Javascript application, React effeciently updates and renders the right components hence why these abstractions require less code and save more time. Javascript libraries can use and reuse the same lines of code and React is no different in where React would reuse and recycle different components across the web application. These components can be made up of navigation bars, headers, forms, buttons and the like.

Calling Components

To appreciate the value of using React, it is important to get comfortable with it's most important basic which is the Component. React can be described as a lump of components, and that lump can call on other smaller lumps of components. Since the components can call on each other, component abstraction can be used for any level of detail.

Let's look at an example of React at work

In this example, there is a button that has the name of "My Button". This particular button has an event handler that needs to be used multiple times. With the power of React and manipulating components, the MyButton component can be reused again throughout our main application.

As seen above, the main component has a name of "My Main". This particular main component is returning a main element, and within this main element are three paragraph elements that each contain the MyButton component. What this means is that the code for the MyButton component is being reused not once, not twice, but three times in each of our paragraph elements that are being contained within the Main component. To further provide example of being able to reuse components in React, the code for Main component will finally be then reused in the App component.

The App component from above is returning a div element that contains the reused code for the Main component. Through the power of components, using code and reusing code is more efficent and saves the trouble of having to rewrite code which can be prone to having errors and helps the developer in staying DRY.

Conclusion

A software engineer's common goal should be in always trying to improve their personal code writing skills. In order to do that, it is important to uphold the principle of keeping DRY. React does an effecient job in helping the developer in keeping DRY through the use and reuse of components. However, React is a beast of it's own and has it's own personal rules that it abides to. It is strongly encouraged to take a deep dive into React and understand the specifics as how components can transform web-based applications. Of course, a challenge that can always be recommended is to take on a project using said language or library. A particular strength of a software engineer lies in their code writing and as always, it is important to take your steps towards keeping DRY!

Resources

https://legacy.reactjs.org/docs/components-and-props.html

https://generalassemb.ly/blog/what-is-a-javascript-library/

https://www.knowledgehut.com/blog/web-development/reasons-to-learn-reactjs

Javascript : The Importance of the forEach() Method

Anthony Lopez — Tue, 25 Apr 2023 17:11:12 +0000

Why This Topic?

For beginners and experts alike, learning a new topic in the field of programming can be quite challenging. It may vary from person to person, but it takes a significant amount of time and effort in order to read, understand, and then use the new material in practice. On top of that, programmers all code differently, and have their own approach, practices and intentions when using said material. For the learning individual, there is a lot of information to intake and thus, can be hard to draw up a starting point.

As like all things, there are golden rules to keep and follow when writing code. These rules consist of following a standard, naming things properly, and being expressive while also avoiding writing god objects and long methods. One particular rule that arguably should be highlighted, stresses that the coder must stay DRY. Being DRY is a software engineering principle which stands for 'Don't repeat yourself'. This principle aims at reducing the repetition of patterns and code duplication, so that the final product would look clean and concise by avoiding redundancy.

But how does one stay DRY? In coding, there is no one distinct way to meet the solution to a problem. One solution can be found in thousands of lines of code, and others can be found as short as maybe hundreds. For beginners especially, it is quite the challenge to find the most optimal route to meet their end goal. When working with arrays, especially those with an obscene amount of values, the beginner may feel taunted to repeat the same lines of code for each and every value in the array. However, that does not have to be the case with the forEach() method available!

But what is the forEach() method? What does it do?

When learning programming, it is important to read, understand, and then being able to write code. Like writing or speaking a language, it is important to convey concisely what it is that the user wants the computer to do. First thing, the syntax for the forEach()method is forEach(callbackFn). The forEach() method executes a provided function once for each array element. In other words, it is an iterative method that calls a provided callbackFn once for each element in the array in ascending-index order. Basically, we take each element in the array as an input for the callbackFn and have said callbackFn perform its task or calculate the value for each input. Hence, it can be understood why it is literally called the forEach() method.

Let's look at an example.

In the example above, an array is being identified as colors that contains three elements consisting of 'red', 'blue', and 'yellow'. For each of these elements, a message is being output to the console (console.log()). However, there is a way to avoid these lines of repetition and be able to console.log() each element with less lines of code.

Example Code

Again, here the const colors is being identified as an array. This array has three elements('red', 'blue', and 'yellow'), each one being identified as a 'color'. Using the forEach() method, the function will take each color as an input then console.log() each color in the array of the const colors.

Even in the example of if colors had 1000 elements in the array, the forEach() method would take each of those elements, and execute the provided function. In that scenario, the forEach() would save a significant amount of time by avoiding repeating the same lines of code for each element, and by avoiding repetition, the coder can stay DRY!

However, there are some notes to be aware of on the forEach()
method. A specific note to be discussed is the callbackFn can only invoked in array indexes that have assigned values. The callbackFn will NOT be invoked for empty slots in sparse arrays.

In the above example, there is a missing value for colors at index 2. The invoked function still takes the inputs for all assigned values but will not be invoked for the empty value at index 2.

Another note on the forEach() method is that while the forEach() method does NOT mutate the array that which it is called, the function provided as callbackFN CAN. However, modifications of the array through that method lead to hard-to-understand code and should be avoided in general cases. That being said, there are many other notes to be explored on the forEach() method but for now, this should be enough information to put this method in practice!

The forEach() method is valuable when it comes to staying DRY, and it is strongly encouraged that when possible, keep your code simple and clean. So the next time you find yourself repeating the same lines of code over and over again, ask yourself 'Can the forEach method be used?', and with your answer hopefully you'll be one more step closer to staying DRY!

Resources
https://www.digitalocean.com/community/tutorials/what-is-dry-development

https://blog.yipl.com.np/7-golden-rules-of-simple-and-clean-code-and-some-more-considerations-slides-e66662af2daf

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#syntax