DEV Community: Elise Erickson

How to Automatically Add Authenticated Users to your Supabase Database

Elise Erickson — Tue, 11 Jun 2024 00:49:27 +0000

Introduction

SQL databases are a powerful tool that can do a lot more than just store and serve your data. If you're new to programming, you might not be aware that you can create functions and triggers for those functions that allow the database to handle some pretty important stuff on its own. In this case, SQL is going to detect a newly authenticated user and create a profile for them in the database.

I'm using Supabase, but Firebase, Render, and other cloud database options will offer similar capabilities. For example, Firebase utilizes Google Cloud Functions.

The Goal

We have a website that needs to authenticate users and give them a profile to display information about themselves, including a screen name. We decide to use Supabase because it offers flexible options for different types of authentication, such as email, magic link, Google, and more.

Background

The type of authentication used doesn't matter because our solution is going to occur directly in the database, not the application.

We're going to assume we've already created our table for the user's profile, including a string ID, string username, and string email. It's important for the ID to be a string because this ID is going to be the same as the ID in your user's Supabase auth, which uses string IDs.

You can actually access your auth data in Supabase in your Table Editor because the data there is also saved in a SQL table. Just go to schema > auth > users to have a look.

The Solution

1. Open the SQL Editor in the side panel of your project in Supabase

2. In the terminal, write the following function and click run.

CREATE OR REPLACE FUNCTION public.create_user_profile()
RETURNS trigger
LANGUAGE plpgsql
SECURITY DEFINER
AS $$
BEGIN
  INSERT INTO public.profiles (id, email)
  VALUES (NEW.id, NEW.email);

  RETURN NEW;
END;
$$;

This uses PL/pgSQL, the programming language used to manage SQL databases to create a function in your database. This code doesn't run that function, rather it creates and defines the function or redefines it if it already exists. You could delete the session after running it, but your function would still exist until you write more code in the terminal to delete it.

PL/pgSQL looks a lot different than Python or Javascript, so here's a quick rundown. The function inserts a new row into the profiles table in the public schema and writes the id and email columns based upon the value returned to the function by the trigger, defined as NEW.

3. Now its time to tell the database when to trigger this function.

Write and run the following code in the terminal. You can write it under the function definition or in a new session.

create trigger create_profile_from_auth after
insert
    on
    auth.users for each row execute function create_user_profile();

This tells the database to trigger a function whenever a new row is inserted into the users table of the auth schema. The function to trigger is the one we defined before, called create_user_profile and the trigger is called create_profile_from_auth.

4. Access profiles using the Supabase auth user ID as your primary key.

Now you can access your profiles like any normal SQL table. Since our ID / primary key is the same as the user ID in the auth table, we use that to access the profiles.

You can retrieve the user ID in your JS front end like this

const user = await supabase.auth.getUser();
const uid = user.id

and your Python backend like this

data = supabase.auth.get_user()
uid = user.id

Conclusion

I wrote this blog as a quick solution for someone new to Supabase who was having trouble moving between the Auth and Database sides of Supabase. Special thanks to Tom Holder and this blog post for introducing me to this concept.

Jerseys as Join Tables: Using Real-World Examples to Understand Relationships Between Data

Elise Erickson — Mon, 20 May 2024 21:10:11 +0000

🚀 Introduction

Understanding data relationships, like any new material is easier when you understand the WHY behind the concept instead of just memorizing it. In this post, I want to go over the 3 main types of data relationships with real-life examples.

We'll be using SQL-Alchemy for the coding portion of these examples. We won't be going over the setup portion of using a database with SQL-Alchemy. Instead, we'll just focus on what the models for each object look like and how to create and utilize relationships between them.

📱 One-to-One Relationships

A one-to-one relationship is pretty simple to understand, so we won't spend too long on it.

Real-World Example

Most people have one smartphone that they share with no one. The owner owns one phone and the phone belongs to one owner.

We don't tattoo the model number of our smartphones on our wrist so everyone knows which phone is ours. Instead, we register the phone to an account in our name. This way, if someone stumbles upon a lost phone, they can find the owner.

In Code

In databases, developers follow the same pattern. The owned object keeps track of its owner using the owner's ID as a foreign key. This is consistent with conventions we'll see later on.

We'll use a reference to the owner's ID, also known as a foreign key, to store the relationship.

class Owner(db.Model):
    __tablename__ = 'owners'

    id = Column(Integer, primary_key=True)
    name = Column(String)

    # Define one-to-one relationship with Smartphone
    phone = relationship("Smartphone", back_populates="owner")


class Smartphone(db.Model):
    __tablename__ = 'smartphones'

    id = Column(Integer, primary_key=True)
    model = Column(String)
    owner_id = Column(Integer, ForeignKey('owners.id')) #foreign key

    # Define one-to-one relationship with Owner
    owner = relationship("Owner", back_populates="phone")

SQL-Alchemy also gives us some additional tools to access the relationship, shown as phone and owner. While these values aren't stored in the database, you can access them and make changes. SQL-Alchemy understands the relationship and will set the corresponding values.

For example, if a guy named Jack lost his phone and bought a new one, you could write

new_iphone = new Smartphone(model="iPhone X")
jack.phone = new_iphone
db.session.add(new_iphone) #add new phone to db session
db.session.push()

and a new smartphone object would be created with owner_id set to Jack's ID. We have to add the new_iphone to our db session to make sure it records our changes to the database. We don't have to add jack because the relationship is held in the smartphone!

⚽ One-to-Many Relationships

One-to-many relationships usually related to an object that owns another object. While there are other cases, we'll simplify by assuming all one-to-many relationships can be explained this way.

A Note on Lists

The trouble with holding a list in a database is that it's so inefficient that it should be considered impossible.

When a computer creates an object, it allocates a specific amount of memory for that object. If a list has variable length, the computer won't know how much space to allocate to the list. If it allocates too little and we keep adding onto the end of the list, the computer will have to copy the object, find a new larger space for it, paste the object there, and delete the old version. After all that, then the computer can actually add the new items to the list.

This is a quite simplified version of what would occur in the database, but you can start to see why this would be such an absurd way to plot the information. Let's use an example to understand a better solution.

Real-World Example

To keep with our sports theme, let's imagine a scrimmage between soccer teams from different neighborhoods. Each soccer team brings its own gear to use for the match, most important of which are the soccer balls.

How do the teams keep track of which balls are theirs at the end of the day? Each team could keep a list of which balls belong to them and how many of each ball they own. That way, if there's a dispute between teams they could refer to this list.

But that's silly! Instead, teams label all their gear with a marker. That way, anyone can pick up the ball and know who it belongs to.

Andy uses the same concept in Toy Story. He writes his name on the foot of all his toys instead of tattooing a list of every toy in his toybox on his own foot.

In Code

Developers use the same logic when arranging one-to-many relationships in a database. Each owned object holds a reference to its owner.

The relationship will look identical to a one-to-one relationship.

class Team(db.Model):
    __tablename__ = 'teams'

    id = Column(Integer, primary_key=True)
    name = Column(String)
    # One-to-many relationship with SoccerBall
    balls = relationship("SoccerBall", back_populates="team")

class SoccerBall(db.Model):
    __tablename__ = 'soccer_balls'

    id = Column(Integer, primary_key=True)
    color = Column(String)
    team_id = Column(Integer, ForeignKey('teams.id'))

    # Many-to-one relationship with Team
    team = relationship("Team", back_populates="balls")

The only change we make as changing is making the Team's property to a plural balls so we know to expect a list of balls. SQL-Alchemy does the rest of the work to show us the list of balls when we ask for them.

We can buy a new ball for the soccer team, the Springfield Blazers, the same way we replaced Jack's smartphone earlier.

new_ball = new Ball(color = "green")
springfield_blazers.balls.append(new_ball)session
db.session.add(new_ball) #add new ball to db session
db.session.push()

Again, we dont have to add the changes to springfield_blazers to our db session, because the relationship is stored in the new_ball object.

🎽 Many-to-Many Relationships

Many-to-many object relationships are a little trickier to figure out. These relationships typically are not owner-owned relationships. They are usually participating-in or part-of relationships.

The tricky part of these is that no matter which side you hold the relationship on, one side will have to hold a list of the other object ...right? (And we saw how tough that would be for the computer to manage) Nope. Let's check back in with our soccer teams for another example.

Real-World Example

Let's imagine the goalkeeper of our soccer team. Her name is Mia. Mia is a goalkeeper on her neighborhood team, the Springfield Blazers in the summer. However, in the spring she plays for her school team, the Memorial High Wildcats. Her performance on these 2 teams has been so excellent that she joined the Youth National Team for her country.

When Mia's on the field, how do spectators, coaches, and other players know which team she plays for? It would be silly if the coach held a huge poster with the roster up on the sideline.

Instead, Mia wears a jersey. Her jersey has the team's name and mascot on the front, and her name and number on the back. Spectators can look at any jersey and immediately know the identity of the player and the team they represent. This jersey represents an intermediary object that holds a relationship to Mia and to her team.

In Code

Relationships between objects in a database work the same way. We need an intermediary object that can hold a reference to both sides of the relationship. This way, neither side has to hold a list of references to objects from the other side. This intermediary object is called an association table or join table.

# The intermediary object
player_jersey = db.Table('association',
    db.Column('player_id', db.Integer, db.ForeignKey('players.id')),
    db.Column('team_id', db.Integer, db.ForeignKey('teams.id'))
)

class Player(db.Model):
    __tablename__ = 'players'

    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String)
    teams = db.relationship("Team", secondary=player_jersey, back_populates="players")


class Team(db.Model):
    __tablename__ = 'teams'

    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String)
    players = db.relationship("Player", secondary=player_jersey, back_populates="teams")

In this case, editing the player_jersey table looks a little different, but accessing a team's players looks the same.

# adding Mia to the Youth National Team
new_association = association_table.insert().values(player_id = mia.id, team_id = youth_national_team.id)

db.session.execute(new_association)
db.session.commit()


# getting the roster of Youth National Team Players
print (youth_national_team.players)

For simplicity's sake we're not including Mia's number on her jersey. If we wanted to do that, we would have to create a new model with properties, like this. The other models would remain the same.

class PlayerJersey(db.Model):
    __tablename__ = 'player_jersey'

    player_id = db.Column(db.Integer, db.ForeignKey('players.id'), primary_key=True)
    team_id = db.Column(db.Integer, db.ForeignKey('teams.id'), primary_key=True)
    jersey_number = db.Column(db.Integer)

    player = db.relationship("Player", back_populates="teams")
    team = db.relationship("Team", back_populates="players")

In this case, we can modify the PlayerJersey like any other object and the relationship will update automatically. We can also access a team's players or a player's teams the same was as with the association table.

😉 Conclusion

Hopefully that was helpful! SQL-Alchemy is a powerful tool once you understand it and it can do far more than I showcased here. Happy coding!

Regex - Understanding those [^Str|ng\$] for Beginners

Elise Erickson — Thu, 07 Mar 2024 02:05:49 +0000

👋 Introduction

Throughout my Self-Taught-Programmer-Relying-on-Stack-Overflow Career, I encountered regular expressions many times, without having any idea what they were or how they worked. To me, they looked like a bunch of garbled characters that would be impossible to decipher. How could r'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$' possibly be read to match a string?

This example seems like a pretty long regular expression (or regex), but it's also probably the most common: an email address validator. I'm going to explain exactly how this and other regular expressions work and what all the little characters mean so you can build your own.

Turns out - they're pretty simple to learn and fun to play with once you've got the hang of it! Not to mention, regex can boil down multiple lines of code logic to decipher a string into one simple expression.

🤓 What Are Regular Expressions?

At its core, a regular expression is a sequence of characters that forms a pattern that can be matched against any string of text. These patterns are used to search, match, and manipulate text based on certain rules. Regular expressions provide a concise and flexible means of expressing complex text patterns. They assist tasks such as text validation, search, extraction, and more.

📋 Basic Syntax and Characters

Regular expressions are read left to right, like the strings they represent. Regex breaks the string being searched into pieces and evaluates each piece against a piece of the regular expression itself.

This is how r'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$' can represent each piece in an email address. An email address's pieces would look like [text]@[text].[text]. We'll look closer at this example later.

Regular expressions consist of various elements, including letters, numbers, brackets, and other characters. Here's a brief (NOT comprehensive) overview of some essential inputs and their meanings:

/ Literal Characters /

Literal characters give an exact match of the piece being evaluated. They are surrounded by forward slashes for readability, but don't always have to be. For example, if we only wanted to accept emails that ended in .com domains, the last piece of our regular expression would be /.com/.

[ Character Classes ]

Character classes give a group of optional characters for the current piece to match. Below are some examples of character classes.

Input	Meaning
`[ab12]`	one instance of any character a, b, 1, or 2
`[^yz89]`	one instance of any character besides y, z, 8, and 9
`[a-p]`	any character between lowercase a and p inclusive
`[A-Z]`	any uppercase letter
`[1-5]`	any number between 1 and 5 inclusive
`[0-9]`	any numeric character
`[a-z0-4]`	any lowercase letter or a number between 0 and 4 inclusive
`[A-z]`	any upper or lowercase letter

In our example, [a-zA-Z0-9._%+-] refers to the user name of the address and it will accept any character that is alphanumeric as well as the characters . _ % + and -.

? Quantifiers *

Quantifiers specify the length of the current piece of text.

Input	Meaning
`?`	zero or one occurence of the preceding character or class
`*`	zero or more occurences of the preceding character or class
`+`	one or more occurences of the preceding character or class
`{5}`	exactly 5 occurences of the preceding character or class
`{2, 5}`	between 2 and 5 occurences of the preceding character or class
`{7, }`	7 or more occurences of the preceding character or class

^ Metacharacters $

Metacharacters are special characters with a predefined meaning, but many of them can be escaped with a backslash, as seen in the following section. Below are a few of the most common metacharacters.

Input	Meaning
`.`	any character
`^`	signifies the beginning of a line
`[^]`	negates other characters when used inside brackets
`$`	signifies the end of a line
`\	`

\ Escaped Metacharacters

Escaped metacharacters transform the meaning of other characters to capture other types of expressions found in a string of text. They can be used independently or within a character class. Below are the most common examples. Notice that a capital letter negates the value of its lowercase counterpart.

Input	Meaning
`\.`	accepts a period (.)
`\s`	accepts whitespace ( )
`\S`	accepts any character than isn't whitespace ( )
`\d`	accepts any digit 0-9
`\D`	accepts any character other than digits 0-9
`\w`	accepts letters, numbers, and underscores
`\W`	accepts anything other than letters, numbers, and underscores

📧 Breaking Down an Email Validator

Let's break down the email address validator from before.

An email address is comprised of three main pieces: the user name and two pieces of the domain name separated by a period.

[user name]@[domain].[com]

Without regex, we might solve this problem like so:

import string

def is_valid_email(email):
    if '@' not in email:
        return False

    parts = email.split('@')
    if len(parts) != 2:
        return False

    local_part, domain_part = parts[0], parts[1]

    if len(local_part) == 0 or len(domain_part) == 0:
        return False

    if ' ' in email:
        return False

    if local_part[0] == '.' or local_part[-1] == '.':
        return False

    if domain_part[0] == '.' or domain_part[-1] == '.':
        return False

    domain_parts = domain_part.split('.')
    if len(domain_parts) < 2:
        return False

    for part in domain_parts:
        if len(part) == 0:
            return False

    disallowed_chars = ['?', '!', '#', '$', '%', '^', '&', '*', '(', ')', '[', ']', '{', '}', '<', '>', ',', ';', ':', '/', '\\']
    for char in disallowed_chars:
        if char in email:
            return False

    return True

With regex, however, we can boild this function down to 2 lines:

import re

def is_valid_email(email):
    pattern = r'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$'
    return re.match(pattern, email) is not None

print(is_valid_email("example@email.com"))  # Output: True

Let's go through the regex piece by piece.

^ beginning of the string
[a-zA-Z0-9._%+-] allow any alphanumeric character or one of those special characters
+ make sure at least one of the characters in the class from Step 2 is present (in the user name)
@ require an @ symbol before the next piece
[a-zA-Z0-9.-] allow any alphanumeric character, a period, or a dash
+ make sure at least one of the characters in the class from Step 5 is present (in the first half of the domain)
\. require a period before moving onto the next piece
[a-zA-Z] accept any alphanumeric character
{2,} require at least 2 of the characters in the class from Step 8 (in the last half of the domain)
$ end of the string

re.match simply checks the entirety of the string given to email to see if it is accepted by our given regex pattern. More on regex functions below.

Boom! You've validated an email using regex! Much nicer than writing a whole validation function, right?

Now think about this: How would you build the validator to only accept addresses with a .com domain name?

Hint: test out your answer with regex101.com

🖥️ Regex Functions

Regex can be used to match, search, substitute, and extract pieces of a text string. I won't be going over those here, but there is great documentation for utilizing these functions. See Resources below.

📈 Conclusion

Regex supports advanced techniques such as capturing groups, lookahead and lookbehind assertions, and backreferences. This was by no means a comprehensive guide to regex.

In fact, most languages have packages that utilize slightly different versions of regex. Make sure to read the official documentation for the package version you're using and experiment with some examples yourself.

Regular expressions are a versatile tool for text processing tasks. While the syntax may seem daunting to new programmers at first glance, once you understand them they become fun tools with which to solve complex problems.

📚 Resources

React Hooks Cheat Sheet

Elise Erickson — Fri, 05 Jan 2024 14:41:19 +0000

Hooks Rundown

React Hooks allow users to pass and access data within functional components in React. They allow users to access built-in React features such as state, context, and more. If you haven't yet encountered Hooks, read more about them here.

The Cheat Sheet

The point of this post isn't to teach you hooks; It's to give you an easy guide to refer to without digging through the docs because you forgot some simple syntax. I'll provide a more in-depth explanation of each hook below if you ever need a refresher.

`import { useState, useEffect, useContext, useRef } from 'react'`

useState : Access and modify internal state objects

const [name, setName] = useState("default_user")

Takes one optional parameter that sets the default value of the state object
Returns a reference to internal state object and a setter function for that state object
Triggers a rerender of the whole component which is default behavior when state is changed

useEffect : Call a function whenever a component is rendered or a state dependency is changed

useEffect(callbackFunction, [dependencies])

Takes 1 required parameter: a function and 1 optional parameter: an array of dependencies
- [ ] - no dependencies, only runs on initial component render
- [name] - runs when variable name is changed, including initial render
- null - all states are dependencies, runs on initial render and every state change / rerender
Calls given function whenever dependencies are changed

useContext : Access internal context props provided by parent

const user = React.useContext(MyContext)

Takes one argument: the context object created with React.createContext()
Returns whatever data was passed to the context provider value

Create context object

const UserContext = React.createContext()

Create context provider

function UserProvider({children}){

    const user = {
        name: "puppy_lover_2024",
        avatar: "pexels.com/photo/puppy/"
    }

    return(
        <UserContext.Provider value={user}>
            {children}
        </UserContext.Provider>
    )
}

Wrap children components in context provider

function App() {
    return (
        <UserProvider>
            [screenComponents]
        </UserProvider>
    )
}

Access the context using the useContext in a child component

const user = React.useContext(UserContext)

useRef - references in internal variable that persists across rerenders but does not trigger them

const numRenders = useRef(1)

Takes one argument: a default value for the variable
Returns a reference to that variable which has a property .current that can be treated like any prop/variable

Useful for keeping track of previous state values and referencing DOM elements

function ReferencedDiv({children}){
    const currentDiv = useRef()
    return(
        <div ref={currentDiv}>
            {children}
        </div>
    )
}

`import { useParams, useRouteError, useOutletContext, useNavigate } from 'react-router-DOM`

useParams - access data stored in current URL

const params = useParams()

Takes no arguments

Returns object with a key of whate the router was told to expect and a value of the parameter that exists in the link itself

In Router:

{
    path: "/profile/:name", element <ProfilePage/>
}

In Link:

<Link to={ `/profile/puppy_lover_2024` }>
    View Profile
</Link>

Returned:

return( useParams() )
-> { name: "/profile/puppy_lover_2024" }

useNavigate - Returns function to programmatically navigate to given route

const navigate = useNavigate()

Takes no arguments
Returns a function that will navigate to given route param
```
const navigate = useNavigate()

...

navigate("/login")
```

useRouteError - catch any error in the UI and reroute to this component

const error = useRouteError()

Takes no arguments
Returns the error that caused the reroute to this page / component

useOutletContext - accesses data stored in the direct parent Outlet's context

const myData = useOutletContext()

Takes no arguments

Returns the object passed to context parameter in parent

In Outlet (parent component):

<Outlet context={ name: "puppy_lover_2024" }>

Returned :

return( useOutletContext() )

-> { name: "/profile/puppy_lover_2024" }

Only works if the Outlet is this components direct parent

Writing Scalable Code for Self-Taught Developers

Elise Erickson — Thu, 14 Dec 2023 02:00:36 +0000

Introduction

I began my coding career by teaching myself JavaScript and ReactNative to build appointment arrival management systems for medical clinics. I felt I had built the skills to pursue a job in tech, but upon meeting with a recruiter I discovered I had a lot to learn, particularly in the realm of building readable, scalable, future-proof code.

We decided to pursue a coding bootcamp where I could learn these principles, amongst other things. I keep a separate tab in my study binder for tips, principles, and conventions of building scalable code. I figured I would share them here for other self-taught programmers looking to elevate their craft and I’ll try to update it as I learn more.

Code examples are given in JavaScript, but the principles are applicable to most development languages.

Easier Debugging

Test-Driven Development: Decide how you want a function to act and what you want it to return given certain parameters. Then write the test use-case using Mocha BEFORE writing the function solution.
Always use const when creating new variables, then change to let later on if you decide that variable should be mutable. In a concise program, variables will be const more often than you expect.
Only reflect changes in your frontend once they have been accepted by the backend. For example, don’t increment a “thumbs-up counter” until the server confirms that it received your user’s “thumbs-up”.
Functions should only perform one task. These means breaking up long functions into smaller helper functions and then calling them within a parent function. This will help you trace bugs to their responsible function, makes code more reusable and more readable!
Take the time to get to know the developer tools in your web browser for debugging. They do more than your console.log() ever could!

Nondestructive Modification

It actually takes less computer-brain-power to create and play with a new object than modify preexisting objects in most cases. This is because the computer has to check to see if the memory space allocated for the original object is large enough to handle modification before it can actually modify it, whereas it can allocate as much memory as necessary for a new object. Because of this, it’s important to understand methods of nondestructive modification.

Use the spread operator or Object.assign() to create a copy of the original object, not just a copy of the reference to the memory location of the old object. Side note: these only create shallow copies. For more information on that, see here.

let newObject = {…oldObject}; 
// makes a copy of the data in oldObject
// modifying newObject leaves oldObject alone

let newObject = Object.assign(oldObject);
// makes a copy of the data in oldObject
// modifying newObject leaves oldObject alone

let newObject = oldObject; // Avoid This!!
// copies the memory location of oldObject
// modifying newObject will still modify oldObject

Use functions such as .map and .filter to iterate over an array and return a new one without changing the original

Documentation

When using Github, commit frequent updates with compartmentalized update messages and content

1: Initialize Repo

2: Add basic HTML and CSS

3: Write initial HTML Content

4: Add CSS classes and rules

5: Add new color scheme to CSS

6: Finish writing About Me section

7: Add Download Resume button and link

8: Add JS Event Listeners

…

53: Finish and publish website

Only use comments to describe what is happening in your code if the variable names and functions are unconventional, which shouldn’t be very often!

Readability

Readability ≥ Efficiency

Variable and function names should be self explanatory. If you have to write out a long comment to explain what your function is doing it can probably be broken down into smaller, more understandable functions.
Your code should read like English. The more stable item being compared is named AFTER the less stable one, just like in English.

if (newUser.age > 15)

You would never say "15 is younger than the age of my brother." You would just say "My brother is older than 15."

if (newUser.age > oldUser.age)

This example is a little more ambiguous than the age example, because age is constant whereas the two ages being compared here are not. However, if we're changing something about the newUser and using the oldUser as a benchmark for comparison, the oldUser should be considered the more stable open.

if…else statements are much easier to read than nested if statements.
Use functions that are self-explanatory to communicate to other developers and your future self what to expect from the function. This also makes debugging simpler.

let squaredArray = array.map( item => item ** 2 );
// iterates through array and squares each number
// nondestructively returns new array as squaredArray
// .map tells other developers to expect a new array to be returned

let squaredArray = [];
array.forEach( item => squaredArray.push(item ** 2) );
// iterates through array and squares each item then adds it to squaredArray
// not wrong, but forEach doesn't tell a developer what to expect as a result

When using HTML, CSS, and JS together, keep content and presentation separate by using HTML and CSS properly.

Other Tips for Self-Taught Programmers

The 5 iterator functions are forEach, filter, find, map, and reduce. Understand them thoroughly and never use a for loop again!
array.reduce() is very commonly used by JS developers. Get extra comfortable with it.