Bob Ziroll - V School | Better Humans, Better Outcomes (Page 2)

Sign in Subscribe

Bob Ziroll

Superhero Events

Superhero Events

Build a React app that displays a list of superheroes with their name and image. When any part of the superhero component (name or image) is clicked, that superhero's catchphrase should show up in an alert box on the screen. Your app should use: * a component * A JSON file

V School's Todo API Documentation

The Todo API is something we built to help students create web applications with a completely open API to use. Have fun! And don't get too crazy on it... The baseUrl is: https://api.vschool.io//todo[/] (Where is your actual name, i.e.: https://api.vschool.io/jonsmith/todo)

Array Reduce Exercises

Use the built-in .reduce() method on arrays to solve all of these problems Feel free to copy and paste the code for easy testing. 1) Turn an array of numbers into a total of all the numbers function total(arr) { // your code here } console.log(total([1,2,3])); // 6

DJ CSS

We'll be beefing up our original DJ JS. (You'll still need to make this from scratch). This time around, we won't be focusing on javascript event listeners though. Instead, every event will happen on hover, which you can just use the CSS :hover pseudo-selector for. In other words, no JavaScript

Computer Setup for V School

Computer Setup for V School

Before continuing on, ensure that you have completed all of the tasks listed in the V School Preparation page, including the ones at the bottom TL;DR: That page has you get the following accounts: * Apple ID (Only required for Mac users) * Github * Edabit * CodeSignal * LastPass You also need to:

Mapping Components in React

Mapping Components in React

We've already covered the hardcoding of components in React, when you already know exactly what you want to show up on the screen. However, React isn't intended to be used simply for hardcoded data. Its whole purpose is to react to new information and user input and pass data to

React State

Why state? Up until now, we've been able to create simple, static (unchanging) UI (User Interface - what the user actually sees) components (those that just display stuff to the user), as well as components that pass properties (props) down to their children components to allow us to make even

React Meme Creator

React Meme Creator

Make a meme creator using React. Your user should be presented with 3 input boxes: 1. Image URL (for the meme image) 2. Upper Text (Text to show up on the top of the image) 3. Lower Text (Text to show up on the bottom of the image) In the

Double Sum

Warm-Up Write a function that returns the sum of two integers or if they are the same, returns double their sum. doubleSum(1,4); //returns 5 doubleSum(3,3); //returns 12

Escape Room

Write a game that lets a user escape a room. The character finds him/herself locked in a room. In order to escape the room, your character needs to find the key in the room and then open the door. There's also a hole in the wall in the room.

CSS Flags

Build the following flags in pure HTML and CSS, no images allowed. No need to make them responsive. The "aspect ratios" listed below refer to the height:width aspects. E.g. France 🇫🇷 is 2:3, so if you make it 200px in height, it should be 300px in width. With

Understanding RESTful API Architecture

Understanding RESTful API Architecture

As you begin to develop your own backend API for accessing data, you'll find that things can get complex very quickly. There's a principle called REST (short for Representational State Transfer) which is a widely used design principle when creating APIs. There are a lot of specific, nuanced rules in

Mongoose Schema Practice

Create a new server from scratch and make a new mongoose schema of any kind that includes at least 5 properties. Make a model from the schema (you'll use mongoose.model(...)), and use that model to create a new instance of your schema in the database. No need to worry

Prototypes and Prototypal Inheritance

Prototypes and Prototypal Inheritance

You may have heard that JavaScript isn't a traditional Object-Oriented language like C#, Java, Python, Ruby, etc., and that's true. JavaScript uses a more powerful and flexible system called Prototypes. At first glance, prototypes may seem complicated, but after spending some time digging into the concept you'll see that it's

Setting up your terminal to be awesome

Some of the terminal defaults aren't all that great or helpful. There's a few things we can do to make working in the terminal a lot more bearable. There are a lot of options when it comes to customizing your bash prompt if you want. This is an excellent site

List of Skills Learned at V School

This list may change from time to time, but the majority of it should remain the same. Programming Principles * Variables, * Operators * Understanding Different Data * Types * Code style/convention * Navigating/working in terminal * Functions/Methods * Loops * Conditionals/Ternary * Objects/Associative Arrays Problem Solving * Able to apply learned method/algorithm to new

Installing Node.js

Install Homebrew Homebrew is an excellent package manager for MacOS-specific programs. It essentially gives you a way to install certain programs (usually developer-y ones) directly from the command line. It's similar to how NPM or Bower works. To install Homebrew: * Head to the homebrew home page * Follow the instructions by

Git Commands and Workflows Cheat Sheet

Git Commands and Workflows Cheat Sheet

If you just need to know the order in which you need to run the common commands, jump down to the Common Workflows section This is meant to be both a reference for the most common git commands, and a reference for how those commands are oftentimes combined into a

Combining Objects

You just got hired on as a developer at a company that has customer-facing software. Your project lead comes to you and says they've been dealing with an issue where their users have been able to sign up for multiple accounts using the same name and email address. (They forgot

Choose your own adventure game

Choose your own adventure game

Write a choose your own adventure game. Keep it limited in scope (since this is just a warmup), and have a few different possible storylines for the user to follow. Use the npm readline-sync package to get input from the user. In terminal, from the directory of your project: npm

Pre-course prep resources

First thing to realize when you're preparing to take the V School class is that you will definitely want to play around in code as much as you can. You could watch/follow tutorials all day and never actually do anything of your own, and a majority of what you

There is no Spoon

There is no Spoon

In order to practice translating real-world objects into code, look around the room and pick 10 things you can see. Then write them as 10 JavaScript objects. * Create 10 objects from things you see. * Each object should have at least 3 keys (properties). * Choose varying data types for your properties

Intro to React

What is React? React is a lightweight, fast, front-end library created by Facebook that enables developers to create component-based front end applications. It emphasizes one-way data binding and uses a new tool called the "virtual DOM" to minimize rendering. Why React? React enables developers to easily create reusable, fully-self-contained components.

JavaScript Constructor Functions

JavaScript Constructor Functions

Constructor functions are one of the most useful pieces of JavaScript you'll use, and they're prominent in just about every library and framework you'll interact with in one way or another. Constructor functions (and classes, in Object-Oriented languages) act like blueprints for creating objects. It gives you the ability to

More on Data Types - Mutability and Value Types

More on Data Types - Mutability and Value Types

Although this post doesn't cover concepts you'll necessarily need to understand on a day-to-day basis, the information it presents could potentially help you understand a bug that would otherwise be very difficult to debug. Value Types Every thing in JavaScript is one of two value types: primitive or reference type.