DEV Community: David Chedrick

The Purrfect Loop: Understanding JavaScript's Event Loop and Call Stack with Cats 🐾

David Chedrick — Fri, 05 May 2023 03:05:17 +0000

Hello ❤️, fellow cat lovers and coders! 🐈💻

Lets get into another JavaScript topic that is often overlooked.

Today we will explore the heart of JavaScript's runtime environment: the Event Loop and Call Stack. We will use some playful kittens to guide us through.

The Call Stack: A Line of Playful Kitties 🐱

Imagine a line of kittens, each waiting for their turn to play with a toy. The first kitten in line gets to play first. This is just like the Call Stack in JavaScript, where our function calls are the kittens.

In JavaScript, when a function is called, it's added to the top of the stack (just like a new kitten joining the front of the line). This function will run before the ones that were added before it (our first kitten gets to play while the others watch).

When the function finishes running, it leaves the stack (our kitten finishes playing and leaves the line). If a function calls another function, it's like a kitten bringing a friend to the front of the line to play next.

Here's a code example:


function chaseLaserPointer() {
  console.log("Kitty is chasing the laser pointer!");
}

function play() {
  chaseLaserPointer();
  console.log("Kitty is playing!");
}

play();

In this code, calling play() adds the play function to the Call Stack. Inside play, we call chaseLaserPointer, which gets added to the top of the Call Stack and runs first. Once chaseLaserPointer finishes, it's removed from the stack, and the rest of play can continue.

The Event Loop: The Human Deciding Which Kitty Plays Next 🙋‍♀️

Now, imagine a human watching over our kittens, deciding which one gets to play next. This is just like JavaScript's Event Loop.

The Event Loop has one simple job: to monitor the Call Stack and the callback queue. If the Call Stack is empty (all the kittens have finished playing), it takes the first event from the queue and moves it to the Call Stack (the human lets the next kitten play).

This mechanism allows JavaScript to handle asynchronous events like clicks, timers, or fetch calls (the kittens that are too excited to wait in line and want to play right away).

Here's a code example:


console.log("First kitten starts playing");

setTimeout(function() {
  console.log("Second kitten starts playing");
}, 1000);

console.log("Third kitten starts playing");

In this code, console.log("First kitten starts playing") gets added to the Call Stack and executes immediately. The setTimeout function is also added to the Call Stack, but it's an asynchronous function. It sets up a timer and then finishes, so it's quickly removed from the Call Stack.

The callback function inside setTimeout is like an excited kitten—it's added to the callback queue, not the Call Stack. After 1000 milliseconds (1 second), it's ready to play, but it has to wait its turn!

While it's waiting, console.log("Third kitten starts playing") gets added to the Call Stack and executes. Once the Call Stack is empty, the Event Loop moves our waiting callback onto the Call Stack, and it finally gets to execute: "Second kitten starts playing" is logged to the console.

When we write JavaScript, we're choreographing a ballet of kittens, deciding when and how they get to play. Understanding the Call Stack and Event Loop helps us create a more synchronized dance, ensuring that each kitten gets their fair share of the fun, and our users enjoy a smooth experience.

❤️❤️❤️

Follow me on LinkedIn for future blog posts
May your code always be as graceful as a cat! 🐾

Cats, Code, and Jest: Testing Your JavaScript Purrfectly

David Chedrick — Wed, 03 May 2023 05:01:50 +0000

Hello ❤️, fellow cat-loving coders! 😺 Today, we'll be exploring the world of testing JavaScript with Jest. When it comes to software development, testing is often overlooked, especially in the hustle of coding boot camps and self learning. So lets do a quick intro into unit testing with Jest. Grab your cat (or a lovie) and let's get started!

Why Test Your JavaScript Code?

In an ideal world, our code would always work purrfectly, but we know that's not the case. 🙀 This is why we test our code, to catch bugs and ensure that our applications function as expected. Unit testing is a crucial part of this process, as it helps us verify individual components of our code in isolation. Jest is a popular testing library for JavaScript that allows us to write tests easily and efficiently.

Getting Started with Jest!

Installation

To get started, let's add Jest to our project. Open your terminal, navigate to your project folder, and run:

npm install --save-dev jest

Configuration

Next, add a "test" script to your package.json file:

"scripts": {
  "test": "jest"
}

Now, you're all set to start writing tests with Jest! 🎉

Creating Our First Test

Let's say we have a simple function that calculates the total number of kitty treats we need to buy. It's in a file called

treats.js:


function calculateTreats(kitties, treatsPerKitty) {
  return kitties * treatsPerKitty;
}

module.exports = calculateTreats;

To test this function, create a new file in the same directory called treats.test.js. Inside this file, we'll write our first test:

treats.test.js:

const calculateTreats = require('./treats');

test('Calculate the total number of kitty treats', () => {
  const kitties = 5;
  const treatsPerKitty = 10;
  const expectedTotalTreats = 50;

  expect(calculateTreats(kitties, treatsPerKitty)).toBe(expectedTotalTreats);
});

In this test, we're using the test function provided by Jest. The first argument is a string describing the test, and the second argument is a function containing the actual test.

Running Our Tests

To run our tests, simply execute the following command in your terminal:

npm test

If all goes well, you should see a message like this:

PASS  ./treats.test.js
  ✓ Calculate the total number of kitty treats (5 ms)

Congratulations! You've just written and run your first Jest test! 🐾🐾🐾🐾

Lets look at some of those Jest functions:

The test() function is used to define a single unit test within your test suite. It takes two arguments:

A string that describes the test's purpose. This description helps you and other developers understand what the test is meant to verify or accomplish. It's important to be clear and concise when writing test descriptions.
In our example above we used the test description: 'Calculate the total number of kitty treats'.
The second argument is a callback function that contains the test logic. We define the input values (kitties and treatsPerKitty), the expected result (expectedTotalTreats), and use Jest's expect() function with the toBe() matcher to verify that the output of our calculateTreats() function matches the expected result.

When you run your tests using npm test, Jest will execute each test() function defined in your test files, and report the results (whether they pass or fail) along with their descriptions. This makes it easier to identify and fix any issues that arise during testing.

The expect() function is used to assert that a certain value or condition is met within your test.
Recall that we have a simple function in treats.js that calculates the total number of kitty treats we need to buy.
In the test, we first import the calculateTreats function from treats.js. Then, we use the test() function to define our test. Inside the test function, we set up some input values (kitties and treatsPerKitty) and the expected result (expectedTotalTreats).

Now, let's focus on the expect() function:

We call expect() with the actual value, which is the result of invoking our calculateTreats() function with the input values kitties and treatsPerKitty. In this case, the actual value is calculateTreats(5, 10) which should equal 50.

The expect() function then returns an "expectation" object with various matchers. In our example, we use the .toBe() matcher to compare the actual value with the expected result (expectedTotalTreats). The .toBe() matcher checks if the actual value is strictly equal (===) to the expected value.

In this case, if calculateTreats(5, 10) is equal to 50, the test passes. If not, the test fails, and Jest will report the discrepancy, indicating that our calculateTreats() function may not be working as expected.

Other Common Matchers:

.toBe(): Checks if the actual value is strictly equal (===) to the expected value.

.toEqual(): Checks if the actual value is deeply equal to the expected value. Useful for comparing objects and arrays.

.toBeTruthy(): Checks if the actual value is truthy (i.e., not false, 0, null, undefined, NaN, or an empty string).

.toBeFalsy(): Checks if the actual value is falsy (i.e., one of the aforementioned false, 0, null, undefined, NaN, or an empty string).

Testing your JavaScript code with Jest can help you ensure that your applications are stable and reliable. By writing unit tests, you're investing in the long-term quality of your code, making it easier to maintain and improve. Plus, you'll have more time to cuddle with your favorite feline friends, knowing that your code is in tip-top shape! 🐱

Remember, a purrfectly tested codebase is a happy codebase.

Beware of Fake Job Offers: My Encounter with a Scammer

David Chedrick — Fri, 24 Feb 2023 03:10:05 +0000

TL;DR

A scammer will email a job seeker trying to set up an interview. Check the email address, it will be from gmail or something similar not an official company domain, e.g. firstname.lastname.company @gmail.com. The Interview process will move very fast. The scammer will send a job offer, then send a check to set up your home office. The check is fake and will be declined. The scammer will say you need to purchase items from a preferred vendor. The scammer will say you have to use a pay app to be able to get the equipment in time to start, and as usual, the scammer will be very pushy trying to make you do things quickly.

Below is my personal story of talking with one of these scammers. I started talking with them because I did happen to apply to the company they were impersonating. Luckily I deal with scammers all the time and noticed red flags before giving them money.

I have talked to others that have had the same scam run on them. The scammers will change details, and company names, and sometimes they will take longer with the scam but it is the same basic setup.

This blog is a cautionary tale so others don’t fall victim.

Below is how the scam played out with me. The names in quotes are the actual names the scammers used while talking with me.

This is how it all went down:

Monday ~10 am:

I receive an email from “Donald” at “Intelletec”. The email states that they have reviewed my application and want to set up a time for an interview.

Nice! Sounds good.

I double check my Huntr app and see I applied to Intelletec for a Software Engineer position about two weeks ago. So I set up a call with “Donald” for the following Day.

Tuesday ~11 am:

I have my interview with “Donald”. Despite some initial nerves, everything seemed normal and we went into a standard conversation about my experience and their tech stack. Donald seemed seasoned and well-versed in the technologies. We talked about the company culture, and the role itself. At the end “Donald” said that he thought I could be a good fit and said the next step would be a technical test and to answer some behavior questions. “Donald,” said I would receive an email where I could set up a time.

Tuesday ~4 pm:

I receive the email “Donald” spoke of, and I was able to set up my next interview for the next morning.

In this process, this was the first time I thought. “Uh weird…”, none of these companies move this fast. Usually, I have to wait a week to even hear anything about the next interview, especially to set up something the next day. But whatever, maybe this company just has their hiring practice down.

Wednesday ~11 am:

I get on a call with the “Technical Team”, and [don’t remember his “name”] tells me that he is having problems with zoom and that we will just do it over the phone. He asks me to open up Replit and he would ask me Data Structure and Algorythm-style questions and I would talk my way through the problem over the phone. We did three of those questions. After the questions, he said I will shortly receive an email from HR with the behavior portion.

This was an odd experience but still relatively normal.

Wednesday ~ 12 pm:

The email from “HR” comes in. It is a list of standard behavior-type questions. Ones like “Tell me about a time when you had to solve a particularly challenging problem.” and “Give an example of how you've collaborated with cross-functional teams to deliver a project.” All were reasonable questions. I have to answer the questions and email them back.

Thursday ~ 1 pm:

I received an email from “HR” saying they liked all my answers and that the “Technical team” agreed. The email stated that I was in consideration for the position and they would get back to me when they reviewed all other candidates.

Okay, now things definitely seem off. This moved really fast. But still, this is my first job in tech so I don’t know what to expect.

Friday ~ 4 pm:

I receive an offer letter from “Intelletec”.

That was way too quick, okay, now I am really second-guessing the validity of this offer. Plus, I only talked to two people over the phone and never even on video.

The email states that if I am interested in the position I should review the documents and sign and send them back by Monday afternoon.

At this point, I decided to just go along with it, and see what happens, at least I’ll have a fun story and at best I wasted a scammer's time. And who knows, maybe I am wrong and I have a job.

One thing I have to give to the scammers, the offer letter was very well done. They put time into that fake letter.

Monday ~ 7 am

“Donald” doesn’t waste any time, he is texting me now. Tells me that if I am accepting the job I should send the papers back soon. He really wants me to set it up in time for the next project. I send the papers back right away. Shortly after I receive a text from “Paul” from HR. He tells me that he needs to get me set up with my home office. He says that I have to use their equipment that would be supplied by a “preferred vendor” and that I would receive a check for $6000 to pay the vendor.

Huh? Why wouldn’t they just pay the vendor and have it shipped to me? Very strange, doesn't seem legit. I’ll ask “Paul”.

“Paul” tells me a story about how they used to just send equipment to employees, but too many people tried to scam them and say they never received the equipment, so now it's on the employee to order the equipment with the stipend check.

Okay, “Paul”, sure.

I tell “Paul” that “Donald” is in a hurry for me to get started so I should just go to Best Buy and get the equipment so I can start right away. “Paul” tells me that I can’t. It must be through the “preferred vendor” so that they know I have the correct equipment.

Monday ~ 11 am:

I get an email from “HR” with a personal check attached. The email says that the check is from a “trusted partner” of theirs. The email goes on that the check has been certified by the “trusted partner” so it clears the bank the same day.

Lol, now a “trusted partner” is involved.

The email continues, I must deposit the check by mobile, and I must screenshot the deposit and send it back to them so they know the process is underway.

Okay, whatever. I have fraud protection so I don’t have to pay for bounced checks. Let's do this.

Obviously, the check is automatically declined and flagged as fraudulent. An alert pops up on my banking app. I screenshot it and send it to “Paul” “Paul” is “shocked” to see the check is declined. It was even certified! Paul says it must be my bank flagging it because I never cashed a check so big.

Um… did “Paul” just neg me?

“Paul” will have to get back to me, to see what we can do.

Monday ~ 1 pm:

“Donald” is texting again. Tells me he heard from “Paul” what happened. “Donald,” says not to worry, he has seen this before. He says that the bank is just delaying the funds, but it will clear, probably in three days. But “Donald” is worried that this will delay the project. We really need to get that equipment to me. “Donald” has an idea! The only thing that I need to get started in the first week is the computer. “Donald,” says the computer is only $2000. “Donald” wants to know if I could raise the funds by the end of the day to pay for it myself and then just keep the $2000 from the stipend check once it clears.

Wait… did “Donald” just say “can you raise the funds”? Who raises funds? This is America, I am already in crippling dept what's another $2000 on the card.

I am definitely not going to do that, but let's play along with “Donald”.

I tell “Donald” that I can definitely pay for the computer, I will just use my credit card. “Donald” says he doesn’t know if that would work, he will ask the “preferred vendor manager” if it is okay that I put it on my credit card.

Why wouldn’t a company take a credit card? Seems suspicious. Oh, and shouldn’t this “preferred vendor” have some sort of website I could see? How am I supposed to buy the equipment anyways? Seems like I was never meant to buy the equipment.

Monday ~ 3 pm:

“Donald” is back and he says the “preferred vendor manager” can not take a credit card. Credit cards take too long to clear the funds. But he has a new idea! He can take Cash App!

OMG, did he really? At least he didn’t ask for a Visa gift card.

I knew it was a scam for a bit now, but that one was the proof. Time to go talk to the real Intelletec.

I tell “Donald” that I have to download the app and get back to him.

Monday ~ 6 pm:

I look up the management of the real Intelletec. I reach out to Sally [not her real name] and ask if she knows that scammers are impersonating their company. She replies back pretty quickly. Sally is aware of the scammers and thanks me for reaching out to inform them. I tell her that I have a lot of information on them: multiple emails, phone numbers, an offer letter, a check, and I saved all the conversations. I offer to give Sally whatever she needs to help take the scammers down.

When copying the emails, I looked at the full email address for the first time. “Donalds” email was Donald.Fred.Intelletec @gmail.com and “HR” was HR.Intelletec @mail.com.
Oh… no…. This should have been a huge red flag. Now I check every email address from anyone I don’t know.

Monday ~ 9 pm:

“Donald” reaches back on text and said the “preferred vendor manager” is waiting to place the order, but it needs to be soon to make the deadline.

What a nice “preferred vendor manager”, willing to place my order at 9 pm.

I tell “Donald” that I reached out to Sally to see what she thought and she said it was best to wait for the check to clear.

Note, Sally did not say this, I am just messing with the scammers at this point.

“Donald” asked who Sally was.

How does he not know the head of HR?

I tell “Donald” Sally is the head of HR, and ask how come he doesn’t know her? I tell “Donald” he better talk to “Paul”.

This was the last communication I had with the scammers. I suppose they realized I was just wasting their time.

Stay aware, stay safe.

❤️❤️❤️

Follow me on LinkedIn for all the updates and future blog posts

Closing a Knowledge Gap: CSS Naming Conventions - BEM

David Chedrick — Sat, 18 Feb 2023 19:24:17 +0000

When I was learning CSS I was always just naming at random I might have been .navBar or .nav-bar or .navarea. I was just all over the place, it lead to many frustrating days of hunting down why my CSS wasn't working and the answer was usually in my HTML I had class="navBar" and my CSS is was trying .nav-bar{}.

BEM:

BEM stands for "Block Element Modifier".

BEM is one of the most widely used CSS naming conventions, and it is often used in conjunction with JavaScript frameworks like React. BEM's approach of using descriptive class names that describe the purpose of each element can make it easier to work with CSS in a component-based architecture.

Core components of BEM:

Blocks: Blocks are standalone components that can be reused throughout a website. They represent larger, meaningful sections of a page, such as a header, footer, or navigation menu.
Elements: Elements are parts of a block and cannot exist outside of their parent block. They represent smaller, functional parts of a block, such as a button or a list item.
Modifiers: Modifiers are used to modify the appearance or behavior of a block or element. They can be used to create variations of a block or element, such as a different color, size, or state.

Syntax

BEM class names are typically structured using the following syntax:

.block {}
.block__element {}
.block--modifier {}

For example, if you had a block representing a navigation menu, you might use the following class names:

.nav {}
.nav__item {}
.nav__item--active {}

This structure helps to create clear and consistent class names that are easy to read and understand. BEM is often used in conjunction with JavaScript frameworks like React, as it can help to create more organized and maintainable components.

Code Example

<nav class="nav">
  <ul class="nav__list">
    <li class="nav__item">
      <a href="#" class="nav__link--active">Home</a>
    </li>
    <li class="nav__item">
      <a href="#" class="nav__link">About</a>
    </li>
    <li class="nav__item">
      <a href="#" class="nav__link nav__link">Services</a>
    </li>
    <li class="nav__item">
      <a href="#" class="nav__link">Contact</a>
    </li>
  </ul>
</nav>

.nav {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightblue;
}

.nav__list {
  display: flex;
  justify-content: space-between;
  list-style: none;
  width: 80%;
  margin: 0;
  padding: 0;
}

.nav__item {
  margin: 0;
  padding: 0;
}

.nav__link {
  text-decoration: none;
  color: black;
  font-weight: bold;
}

.nav__link--active {
  color: green;
  font-weight: bold;
}

Other blogs in this series:

Closing a Knowledge Gap: Best Practices for Writing Git Commit Messages

Closing a Knowledge Gap: Best Practices for Writing Git Commit Messages

David Chedrick — Wed, 15 Feb 2023 19:41:42 +0000

When I was learning git there was never much emphasis on commit messaging.

When it was time to push to GitHub it was always something like this:

git add .
git commit -m “fixed nav bar”
git push

That was fine, for a beginner that was working alone and never going back to old commits.

But just like writing clean code you want to write clean commit messages, you want to be able to clearly and easily read your old messages, and some other person working on the same project should be able to read your commits and know what changed and why.

Go back and look at your Git commit history and see if you struggle to understand what changes were made, and why they were made? Poorly written or inconsistent commit messages can make it difficult to understand the history of a codebase, track down bugs, or collaborate effectively with other developers.

One way to address this issue is by using consistent and descriptive commit message conventions. By following a set of agreed-upon conventions, developers can make it easier to navigate the commit history, understand the purpose of each change, and track issues or bugs related to specific commits.

Let’s explore the importance of good commit message conventions, discuss some common conventions and best practices, and provide examples of effective commit messages

Most common best practices:

Use keywords in the subject line of the commit message, "fix", "add", "update", etc., to clearly convey the intent of the commit.
Keep the subject line short 50 characters or less, to provide a clear and concise summary of the change.
Add a more detailed description in the body of the commit message, explaining what the change does and why it was necessary.
Use the body to describe any side effects, gotchas, or dependencies of the change, to help other developers understand how the change fits into the larger codebase.
If the commit is related to an issue or bug, reference the issue or bug number in the commit message, "Closes #1234".
Use consistent conventions for formatting and style, such as capitalization, punctuation, and line breaks, to make the commit history easier to read and understand.
Break up large changes into smaller, atomic commits that can be more easily reviewed and understood by other developers.
Use the -amend option to update a commit message that hasn't been pushed to the remote repository yet, rather than creating a new commit with an updated message.

Keywords in the Subject Line:

With git commit messages you can use keywords that can be used to help categorize and organize commits.

By using these keywords in Git commit messages, it becomes easier to identify the purpose of each commit, and it helps keep the commit history organized and easy to navigate. Also, GitHub can use these keywords to automatically generate useful information, such as release notes or change logs.

Commonly used Git message keywords:

feat: A new feature or functionality has been added to the codebase.
fix: A bug or issue has been fixed.
refactor: The code has been refactored to improve performance, readability, or maintainability.
docs: Documentation changes have been made, such as updating README files or inline comments.
test: Changes have been made to the test suite, such as adding or updating tests.
style: Changes have been made to the code style or formatting, such as adding or removing whitespace or changing variable names.
chore: Miscellaneous changes that do not fit into the above categories, such as updating build scripts or dependencies.

By using these keywords in Git commit messages, it becomes easier to identify the purpose of each commit, and it helps keep the commit history organized and easy to navigate. Additionally, some Git hosting platforms, such as GitHub, can use these keywords to automatically generate useful information, such as release notes or change logs.

Aside: Release notes and change logs?

Release notes and change logs are documents that provide a summary of changes made to a software product.

A release note is typically a brief summary of the changes in a particular release or version of the software. It may include a list of new features, bug fixes, improvements, or known issues. Release notes can be written in a more informal style and are often used to announce a new release or update to the software.

A change log is a more detailed and structured document that provides a comprehensive list of changes made to the software over time. It may include information on the release date, version number, author of the change, a brief summary of the change, and any other relevant details. Change logs are often organized chronologically, with the most recent changes listed first.

Release notes and change logs are a whole other topic, but here are some links if you want to look into the subject now:

Automatically generated release notes - GitHub Docs

changelog-generator

Making a Commit

Okay, back to our commit message!

This time make some changes to your code and save.

Do git add, but this time when committing do not add the -m

git commit

depending on what editor you are using, this will appear in a file or in the terminal:

# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
#
# On branch main
# Your branch is up to date with 'origin/main'.
#
# Changes to be committed:
#       modified:   README.md

above those # you want to add your message, in this styling:

<type>[optional scope]: <description>

[optional body]

[optional footer(s)]

Fix: CSS in nav bar fix Adjust nav bar styling for small screens

The nav bar was not displaying correctly on small screens due to a styling issue.
This commit addresses the issue by adjusting the CSS to ensure that the nav bar 
displays correctly on screens of all sizes

# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
#
# On branch main
# Your branch is ahead of 'origin/main' by 1 commit.
#   (use "git push" to publish your local commits)
#
# Changes to be committed:
#       modified:   README.md
#

If you are working in a text file just save the file and then git push.

If you are working in the terminal, save by typing :wq then git push

Also if you are committing without a lot of detail in the body you can commit inline in the terminal with a double -m flag:

git commit -m <title> -m <detailed description>

git commit -m 'Fix css in nav bar fix Adjust nav bar styling for small screens' -m 'The nav bar was not displaying correctly on small screens due to a styling issue. This commit addresses the issue by adjusting the CSS to ensure that the nav bar displays correctly on screens of all sizes'

Let’s Build A Web App: Pt 1 - Setting up Next.js

David Chedrick — Sun, 12 Feb 2023 15:02:03 +0000

Let's build a JavaScript project, with the React library, using the Next.js Framework!

Most of the projects I work on are set up with create-react-app, but this time I want to go bigger and use a framework

Starting this project it is assumed that you are familiar with JavaScript, React, VS code, git, and GitHub.

You can always check out the official Next.js page to learn more:

Next.js by Vercel - The React Framework

• If you don’t have Node.js installed, install it from here. You’ll need Node.js version 10.13 or later.

Fantastic! Let’s Start!

Create a Next.js app

To create a Next.js app, open your terminal, cd into the directory you’d like to create the app in, and run the following command:
npx create-next-app bodhi-test

!!! To create your own project replace "bodhi-test" with the desired name of your project or just follow along with what I do.

I am going with bodhi test because I am going to build out a quiz web app.

My settings from the terminal startup:

✔ Would you like to use TypeScript with this project? … **No** / Yes
✔ Would you like to use ESLint with this project? … No / **Yes**
✔ Would you like to use `src/` directory with this project? … **No** / Yes
✔ Would you like to use experimental `app/` directory with this project? … **No** / Yes
✔ What import alias would you like configured? … @/*

Once the project is created, navigate to the project directory:
cd bodhi-test

I am using VS code for this project.
Open the project:
code .

Open the terminal and run the development server:
npm run dev
Now you can access your Next.js application at http://localhost:3000.

At http://localhost:3000 should see the auto-generated Next.js page

Pages in Next.js

In Next.js, a page is a React Component exported from a file in the pages directory.

Pages are associated with a route based on their file name. For example, in development:

pages/index.js is associated with the / route.
pages/posts/cat-post.js is associated with the /posts/cat-post route.

We already have the pages/index.js file, so let’s create pages/posts/cat-post.js to see how it works.

Create a New Page

Create the posts folder under pages.

Create a file called cat-post.js inside the posts directory

Add the following code to the file:

export default function CatPost() {
    return <h1>Cat Post</h1>;
}

Back to index.js
Change the p tag to an h1
Add and import the Link

<Link href="/posts/cat-post">Cat Post!</Link>

index.js should look like this:

import Head from "next/head";
import { Inter } from "@next/font/google";
import styles from "@/styles/Home.module.css";
import Link from "next/link";

const inter = Inter({ subsets: ["latin"] });

export default function Home() {
    return (
        <>
            <Head>
                <title>Create Next App</title>
                <meta
                    name="description"
                    content="Generated by create next app"
                />
                <meta
                    name="viewport"
                    content="width=device-width, initial-scale=1"
                />
                <link
                    rel="icon"
                    href="/favicon.ico"
                />
            </Head>
            <main className={styles.main}>
                <div className={styles.description}>
                    <h1 className={inter.className}>Cat Home Page!</h1>
                    <Link href="/posts/cat-post">Cat Post!</Link>
                </div>
            </main>
        </>
    );
}

Back to cat-post.js
Let's add a link to go back home

import Link from "next/link";

export default function CatPost() {
    return (
        <>
            <h1>Cat Post</h1>
            <h2>
                <Link href="/">Back Home</Link>
            </h2>
        </>
    );
}

Click back and forth to make sure the Links are working.

Time to push it up to GitHub.

git add .

git commit -m "added first post”

git push

❤️❤️❤️

Try and and more Pages and Links. Play with it and explore.

This is part 1 of a series where we will be building out a full stack web application. We will go step by step in the process. Sometimes we will explore different technologies, and sometimes we will dive deeper into a subject. It is all about learning by doing.

Follow me on LinkedIn for all the updates and future blog posts

Talking About Linked List Traversal in JavaScript

David Chedrick — Thu, 09 Feb 2023 17:12:22 +0000

We practice coding data structures regularly. However, how often do we talk out loud about what the code is doing? I realized this was an area I was lacking in when I was asked to explain a Linked List traversal without coding it. I have wrote some form of the code block below many times, this time I am going to talk about what I am doing in the code block.

class Node {
  constructor(data, next = null) {
    this.data = data;
    this.next = next;
  }
}

class LinkedList {
  constructor() {
    this.head = null;
  }

  traverse() {
    let currentNode = this.head;
    while (currentNode) {
      console.log(currentNode.data);
      currentNode = currentNode.next;
    }
  }
}

const linkedList = new LinkedList();
linkedList.head = new Node(1, new Node(2, new Node(3, new Node(4))));

linkedList.traverse(); 
// output ->  1 2 3 4

Traversing a Linked List in JavaScript Without Using Code

A linked list is a data structure where each element is linked to the next element in the list. In this post, we will explore how to traverse a linked list without using code. This will help us understand the concepts and logic behind linked list traversal and help us write and explain our own code later.

Understanding the Structure of a Linked List

A linked list is made up of nodes. Each node in a linked list has two parts: the data and the pointer. The data part stores the actual value of the node and the pointer points to the next node in the list. The last node in the linked list has a pointer that points to null, indicating the end of the list.

What is a Linked List Traversal?

Linked list traversal is the process of visiting each node in the linked list and processing its data. The traversal starts from the first node and ends at the last node.

How to Traverse a Linked List?

To traverse a linked list, you need to start from the first node and follow the pointers until you reach the end of the list. The steps are:

Create a variable, let's call it "currentNode," to keep track of the current node that you are processing. Set its value to the first node in the list.
Write a loop that continues until the "currentNode" is equal to null.
In the loop, process the data of the current node.
Move to the next node by updating the "currentNode" to be equal to the next node, which is stored in the pointer of the current node.

By following these steps, you will visit each node in the linked list and process its data.

Summary

Linked list traversal is the process of visiting each node in a linked list and processing its data. To traverse a linked list, you start from the first node and follow the pointers until you reach the end of the list.

Creating a Rails as API project pt 1: Set Up

David Chedrick — Sun, 12 Jun 2022 21:42:05 +0000

Over the next few blogs we will be building a Rails project. We will use Rails as an API. Eventually we will use it as the end point for a React project.

For this you will need Ruby, RubyGems, and Bundler installed on your system. I will be using Visual Studio as my IDE.

Ruby Docs

RubyGems Docs

$gem update --system

Bundler Docs

$gem install bundler

Installing Rails

To install the latest version of Rails, run in the terminal:

$ gem install rails

In the terminal create a new folder for the project and cd into that folder, once inside we can create our Rails project. I will name mine rails-api-project.

$ rails new rails-api-project --api --skip-javascript

Once you run that command a lot will load:

A lot just happened right there, the main points are:

Rails generated a new directory with all the code required to build our application
bundle install ran to download all the required gems
git was initialized in the newly created directory

I used the --skip-javascript flag to tell Rails that we won't be using JavaScript for this project. We will use React for all of our JavaScript needs. Using this flag makes the installation faster.

Running the Rails Server

To start the Rails server, make sure that you are in the root of the application in the terminal and run this in the terminal:

$ rails s

Lets verify that it's working in the browser by navigating to localhost 3000

If you click on the image it will take you to the Ruby On Rails website

Fantastic! We have a Rails application running. It isn't doing much right now so lets get something of our own happening.

Creating Routes

Here is what we should see in our IDE. These are all the files that Rails set up for us:

Now lets click into the folder config then the file routes.rb. We should see:

Now we need to define a route in our Rails app. A route will tell Rails that when a user makes a request with this HTTP verb and this path, run the code in this controller.

Lets set up a route to cats

# config/routes.rb

Rails.application.routes.draw do
  get "/cats", to: "cats#index"
end

Here we are telling Rails that when a GET request to the /cats path comes in, run the index method in the CatsController.

Setting up a controller

Let's create a controller now. Click on the app folder, then the controllers folder, then create a new file called cats_controller.rb and put the following code inside:

class CatsController < ApplicationController

  def index
  end

end

Since we are creating an API lets render some JSON.
Lets just write something for now so we know our code is working.

class CatsController < ApplicationController

    def index
        render json: { love: "Cutie Cats~!!! <3" }
    end

end

Lets give it a test and check out http://localhost:3000/cats

If your JSON doesn't look pretty in the browser I recommend the Chrome extension json-formatter.

Next Time

This was the initial set up of our Rails API.
Next blog we will get into adding Active Record to our Rails application so we can start adding tables and data.

Ruby: Using active record to update database in terminal

David Chedrick — Wed, 01 Jun 2022 02:29:58 +0000

To start off I am assuming you are working in a Ruby project, using Active Record, and have a database up and running.
I am using SQLite for this.

If you are not using Active Record let me tell you that Active Record is a fantastic tool to handle your database. It can be done right in your terminal without any SQL statements. Plus, Active Record is a Ruby gem so all you need is include it in your Gemfile or use

gem install activerecord

Check out the Active Record Documents
To learn how to connect to your database and how to create your tables.

Todays focus is updating your database with Active Record.

To start off I already have 3 users in my database:

We see the user jacque has a password column that is NULL, so lets give them a password.

I like to use a Rakefile to Pry.start my console.

Once the pry is running in the terminal I use User.last to view the user jacque.

Now lets give the user a new password. I will give them the password "cutiecat1"

In the terminal:

user = User.last
user.password = "cutiecat1"
user.save

Lets double check our work.
Refresh the database and see our update!

Now, lets go ahead and add a new user named Bob.

In the terminal:

User.create(username: "Bob", password: "pass1234")

Looks like it worked! Lets check with typing in the terminal:

 User.last

Looks good in the terminal, now lets refresh and check our database.

Now what if Bob wants to be called "Bobby".
Back in the terminal we write:

bob = User.last
bob.update(:username => "Bobby")

Again, lets double check the terminal this time we will just use our variable name:

bob

And refresh the database:

Looks good, the database is updated.

Did you notice that I updated Bob's username slightly different that how I updated jacque's password?

Lets update Bob's name one more time to "Rob", but with the first syntax.
In the terminal:

bob.username = "Rob"

Looks like the terminal is showing the name Rob now. But lets check the database

Still showing "Bobby" not "Rob".
But we can fix that with using .save
Back in the terminal:

bob.save

Now lets check the database:

Perfect! Our database is updated.

Lets review those two ways to update.

bob.update(:username => "Bobby")

bob.username = "Rob"
bob.save

Now lets delete Bob with .destroy
In the terminal:

bob.destroy

And Bob is now gone:

Using Styled Components in React

David Chedrick — Sun, 13 Feb 2022 02:20:25 +0000

Overview
Today we are going to work with some CSS and make custom styled components for our React project. So we are going to assume you already have your React app set up and running and you are ready to start making it super pretty.

What is Styled-Components:
Styled Components is a CSS-in-JavaScript tool you can use in React to write and manage your CSS.
You get to keep everything organized by writing your CSS into your component so you do not have to create another .css file.

Styled-Components makes it very easy to find and edit your CSS code. No more having to scroll through a long style sheet to find the code you need to edit.

You can style your entire project with Styled Components or you can use it along side libraries like Bootstrap or Material UI. I personally enjoy combining Styled Components with Bootstrap and React Bootstrap.

Installing styled-components:
To use styled-components you first need to install it into your project:

# with npm
npm install --save styled-components

# with yarn
yarn add styled-components

At the top every file where you use styled-components, you will need to add this import:

import styled from 'styled-components';

This Example will have a very basic set up.
Two divs, one unstyled and one styled.

import styled from 'styled-components';

function App(){
    return(
      <>
        <div>
          Unstyled Div
        </div>
        <div>
          Styled Div
        </div>
      </>
    )
  }

  export default App;

This is the basic syntax to set up your Styled Component.

const RedDiv = styled.div ``

Lets take a deeper look into that line:

First declare the name with a const.
I chose the name RedDiv, but you can choose whatever
name you like. Keep it simple and to the point so it is
understandable and reusable.
The _styled _ gives us access to the styled-components functionality.
The .div after styled anchors the HTML element div.
When declaring a Styled Component, any HTML element can be
used: div, h1, a, section, span, etc...

The actual styling goes between the two back ticks and is written just like CSS syntax. Let's make the font red.

const RedDiv = styled.div `
    color: red;
  `

The next step is to change the name of whichever div you want styled. Here we are going to change the name of our second div to RedDiv.

import styled from 'styled-components';

function App(){
    return(
      <>
        <div>
          Unstyled Div
        </div>
        <RedDiv>
          Styled Div
        </RedDiv>
      </>
    )
  }

const RedDiv = styled.div `
    color: red;
  `

 export default App;

The styled component is reusable so let's add a second RedDiv.

import styled from 'styled-components';

function App(){
    return(
      <>
        <div>
          Unstyled Div
        </div>
        <RedDiv>
          Styled Div
        </RedDiv>
        <RedDiv>
          Second Styled Div
        </RedDiv>
      </>
    )
  }

const RedDiv = styled.div `
    color: red;
  `
export default App;

We can set up even more styled components.
Let's create a third styled component but make it blue, bold, and italic instead of red.

import styled from 'styled-components';

function App(){
    return(
      <>
        <div>
          Unstyled Div
        </div>
        <RedDiv>
          Styled Div
        </RedDiv>
        <RedDiv>
          Second Styled Div
        </RedDiv>
        <BlueDiv>
          Third Styled Div
        </BlueDiv>
      </>
    )
  }

const RedDiv = styled.div `
    color: red;
  `

const BlueDiv = styled.div `
    color: blue;
    font-weight: bold;
    font-style: italic;
  `

export default App;

References:
Read the official documentation for more advanced topics:
https://styled-components.com/docs

Creating a simple timer and score keeper in JavaScript.

David Chedrick — Sun, 10 Oct 2021 18:40:31 +0000

We are going to focus on creating a simple timer and score keeper using just HTML and JavaScript.

First we will start with creating our index.html with just basic HTML and our script tag that will connect our index.html and index.js:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Game</title>
</head>
<body>
<script src="index.js" type="text/javascript"></script>
</body>
</html>

Next, within the body we will add a div with an ID of "gameDiv". This div will hold the content of our game. Within "gameDiv" we will add two more divs that will hold our Time and Score. Both will contain a span that will hold our counts. These count numbers are what we will be manipulating with our JavaScript. As you see bellow, I named the spans with an ID of "timer" and "score". Remember,all of these ID names are what I chose to call them. You can name them whatever you want, but the name should be something that makes since to you and other people reading your code.

<body>
    <div id="gameDiv">
        <div>Time: <span id="timer">10</span></div>
        <div>Score: <span id="score">0</span></div>
    </div>
    <script src="index.js" type="text/javascript"></script>
</body>

That is all we will put in our HTML file. Everything else will be done with JavaScript.
Start with creating a index.js that we already connected to our index.html.

First we will start with our global variables.
The .querySelector() makes it easier to write our code buy adding our selections into variables.

const gameDiv= document.querySelector('#gameDiv');
let timer = document.querySelector('#timer');
let score = document.querySelector('#score');

startCountDown holds our setInterval() method which calls our function countDown, and we will add a 1000 millisecond delay:

let startCountDown = setInterval(countDown, 1000);

Variables timeLeft and totalScore will hold the current values of our timer and score:

let timeLeft = 10;
let totalScore = 0;

The next method we will utilize will be .addEventListener()
Once the DOM content is fully loaded it will call our first function renderGame:

document.addEventListener('DOMContentLoaded', renderGame())

Now we are into our first function. Inside this function we still have access to our variables set in our global scope, but now we will add some variables that will now only have a function scope and will not be available outside of this function.
First we will create a new DIV using the .createElement() method:

function renderGame() {
    const gameCard = document.createElement('div');

Next, we will create a button.
Now that we stored that created button into the variable click we can now type click to access our button.
Now we add in some text for our button and then we add on an event listener to our button. Our event listener will be triggered by a click from the mouse and will call on our function pointsClick:

    const click = document.createElement('button');
    click.textContent = 'CLICK FOR POINTS ';
    click.addEventListener('click', pointsClick);

Lastly in this function we append our click variable to our gamecard. Then we append our gamecard to our gameDiv:

    gameCard.append(click);
    gameDiv.append(gameCard);
}

The next function is pointsClick. It is called by the previous event listener we added in. Every time the button we created is clicked it triggers the event listener.
First in this function totalScore++ adds one to our score and score.innerText changes our score from a 0 to 1 on our webpage.

function pointsClick() {
    totalScore++
    score.innerText = totalScore
}

Our countDown function was called at the top when we set our variable in global scope for our .setInterval() method.
First timeLeft-- will countdown our timer and timer.innerText will reflect that on our webpage.

function countDown(){
    timeLeft--;
    timer.innerText = timeLeft;

Once timeLeft hits 0 we need an if statement to let the program know to go to our gameOver function.

    if(timeLeft === 0){
        gameOver();
    }
}

Our last function is gameOver().
First we clearInterval so that our timer stops at 0.
Next, we have to grab that button we created earlier and tell the event listener to stop. Without taking off the event listener we would be able to continue to click for points even after the timer stopped.
Now we want to tell the player that the game is over and display the finial score.
So we create one more element, an h1 that will display our end game text on the screen.
Lastly we append the gameOver variable to our gameDiv.

function gameOver() {
    clearInterval(startCountDown);

    const button = document.querySelector('button')
    button.removeEventListener('click', pointsClick)

    const gameOver = document.createElement('h1');
    gameOver.innerHTML = 'GAME OVER!' + '<br>' + `Total Score: ${totalScore}`;

    gameDiv.append(gameOver);
}

That is all we need to create a timer and score keeper. Try it out for yourself and then add this into a more complicated JavaScript game.

Click to see my example code.

DEV Community: David Chedrick

The Purrfect Loop: Understanding JavaScript's Event Loop and Call Stack with Cats 🐾

The Call Stack: A Line of Playful Kitties 🐱

The Event Loop: The Human Deciding Which Kitty Plays Next 🙋‍♀️

Cats, Code, and Jest: Testing Your JavaScript Purrfectly

Why Test Your JavaScript Code?

Getting Started with Jest!

Installation

Configuration

Creating Our First Test

Running Our Tests

Lets look at some of those Jest functions:

Other Common Matchers:

Beware of Fake Job Offers: My Encounter with a Scammer

TL;DR

Monday ~10 am:

Tuesday ~11 am:

Tuesday ~4 pm:

Wednesday ~11 am:

Wednesday ~ 12 pm:

Thursday ~ 1 pm:

Friday ~ 4 pm:

Monday ~ 7 am

Monday ~ 11 am:

Monday ~ 1 pm:

Monday ~ 3 pm:

Monday ~ 6 pm:

Monday ~ 9 pm:

Closing a Knowledge Gap: CSS Naming Conventions - BEM

BEM:

Core components of BEM:

Syntax

Code Example

Further Reading:

Other blogs in this series:

Closing a Knowledge Gap: Best Practices for Writing Git Commit Messages

Most common best practices:

Keywords in the Subject Line:

Commonly used Git message keywords:

Aside: Release notes and change logs?

Making a Commit

Further Reading: Pro Git and Conventional Commits

Let’s Build A Web App: Pt 1 - Setting up Next.js

Create a Next.js app

Pages in Next.js

Create a New Page

Talking About Linked List Traversal in JavaScript

Creating a Rails as API project pt 1: Set Up

Installing Rails

Running the Rails Server

Creating Routes

Setting up a controller

Next Time

Ruby: Using active record to update database in terminal

Using Styled Components in React

Creating a simple timer and score keeper in JavaScript.