acidtone

JS Activity: Refactor into functions

The following files contain code that runs immediately on hard-coded variables. Refactor each of these files so that the code is reusable and portable.

Instructions

For each of the .js files in this Gist:

• enclose the relevant code inside a function (everything below the comment in each file);
• define each function so that it accepts the needed variables as arguments;
• using the Window.prompt() method, define your arguments based on user input;
• use Number.toFixed() to round numbers as needed.

acidtone

JS Debugging Activity: Fix Syntax errors in Adding Machine

This Javascript code is broken because of syntax errors. Fix them using your browser's Console.

Instructions

1. Copy/download/clone these files to your workspace;
2. Load index.html in your browser;
3. Check the Console for syntax errors;
4. Fix all errors until the Adding Machine works properly.

acidtone

JS Library: Reveal JS

"The HTML Presentation Framework."

This is a barebones bootstrap file to start a new Reveal JS project. It's based on the code found on the Markup Docs page but has been refactored to use CDNJS.

Reveal JS Resources

• Main Site
• GitHub repo

acidtone

Example: Dated Code Journal Entry

Jan 17, 2022

• TODO: Figure out how to translate entries written in non-english to english so I can mark them and the student doesn't have language as a barrier to learning.
  • Translate Web Pages
    • ref: Bryan from WBDV
• TODO: Add Laws of UX to UX Library

Goal: Define separate user stories and flows that I can base new lab activities for future lessons.

• I currently have multiple Gist lists for using Git that are kinda messy. Time to clean that up.
• Publish a webpage with Git and GitHub Pages

acidtone

Agile User Flows

What is a User Flow?

A User Flow is a series of actions a user takes to achieve a goal.

3 Key Components

1. Who is the user?
2. What is their goal?
3. What are the steps the user needs to take to achieve that goal?

Why do we use User Flows?

acidtone

First-time Setup: Connecting to GitHub using SSH (optional?)

Git deprecated access to some password-based authentication when accessing some features on GitHub. The recommended authentication method is to use SSH keys.

Prerequisites

• Git installed
• Identity configured
• GitHub account created

Instructions

Unfortunately, we need to jump through some hoops so we can connect with SSH. Luckily, GitHub has great step-by-step instructions in their documentation:

acidtone

Group Activity Examples

1. Group introductions

Homework

None, it's the first day of class. Let's get to know each other!

Activity instructions

In groups of 3 or 4 do a round-robin introduction of yourself:

• Background: career, family, hobbies
• What I'd like to get out of this program.
• Favourite [game|netflix show|child|etc].

acidtone

Express Activity: Create a JSON endpoint using route parameters

In this activity, you'll be refactoring a sample Express server using the spoilers from this activity: Find an object in an array.

Instructions

1. Download or fork/clone this Gist into your workspace.
2. Using this sample code for Array.find(), define an array of objects called guild.
3. Refactor the GET /api/guild/:class endpoint so that it returns a single guild member that matches the requested :class route parameter.
4. Return a JSON 404 Not Found response if the :class isn't found.

acidtone

Spoilers: Finding an array item that matches an object property

This is a potential answer to the exercise: Find an object in an array.

Stretch Activities

• Try validating the user input before testing:
  • inputValue value missing: "Please enter a Character Class";
• The return statement in the if/else blocks is redundant. Refactor this code to use the least code possible.

acidtone

JS Activity: Finding an object in an array

When an array contains objects, you can use a higher order array method, such as Array.find(), to find an object that matches a particular property value.

Key Takeaways

• Array.find() loops through an array of objects and expects a Boolean return value:
  • If true is returned, the loops stops and Array.find() returns the current item;
  • If false is returned, the loop continues to the next item;
  • If no items are found by the end of the loop, Array.find() returns undefined.
• This method is considered a higher order function, meaning it hides (abstracts) information so we can tackle a problem at a higher (more abstract level). In this case, Array.find() hides the fact that it's looping through the array (and that it operations differently based on a boolean result).