V School | Better Humans, Better Outcomes (Page 11)

Sign in Subscribe

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

Array Methods Exercise

Create a new JavaScript file and put these two arrays at the beginning. You will write a single function that performs many operations on them. var fruit = ["banana", "apple", "orange", "watermelon"]; var vegetables = ["carrot", "tomato", "pepper", "lettuce"]; After every command, use console.log() to inspect your arrays. A good way

Model-view-controller

Design patterns are solutions to common programming situations. An extremely popular pattern for web development is Model-view-controller, or MVC, and it's derivatives. This pattern separates our concerns into 3 areas: * Model - which handles the storage of data. * View - displays to the user data and updates according to changes

Debugging Exercise - JSON

You will use http://jsonlint.com/ to help you make the following object valid JSON { { name, george; age, 24 friend, true }, {name: fredrick, age: 84 friend, true } } Often it will indicate that the problem in on a certain line, but the real problem is actually on the following line. Notice

Postman

Postman is an important tool we will use for the rest of class. We will use to for creating requests to help us explore APIs and for testing our own API endpoints. Installation There is a Chrome extension for Postman, but for this class we will use the MacOS version.

CSS Layout and Positioning

CSS Positioning CSS positioning is involved, but take the time to memorize and understand these challenging principles early and it will make your front end developing life a whole lot more pleasant. The four positions we will talk about now are: * static * relative * fixed * absolute Static Static is the default.

Responsive Web Design and Media Queries

Responsive Web Design and Media Queries

In this age of mobile devices the developer has to account for their product being viewed on a hand held or tablet sized device as well as laptops and desktops. This means your site should look great on any size screen! Here is an example of a website that does

React: Create a Counter

React: Create a Counter

In this exercise you will use React to create a simple counter application. Your counter app should have: * A display for the current count * An increment button * A decrement button

Angular Modules

Angular Modules

The module is Angular's overall container. It contains all controllers as well as all other AngularJS code. The Angular module is created with the following code in a javascript file: var app = angular.module("myApp", []); There are other ways to write this, but we'll stick to this one for now.

React: ES5 Features You Need to Know

Using events All JavaScript functions can use events as parameters. An event is an object that is created when a function is called. It is literally a JavaScript object that has a list of properties that can be used. You can see a list of event properties here: https://developer.

Webpack for React!

Configuring Webpack to transpile React code is simple. Once you know how to set up your basic webpack.config.js all you have to do is install a new babel preset! Install the react preset for babel by running: npm install --save babel-preset-react. Now, when you run webpack or webpack-dev-server

Intro to Webpack

Intro to Webpack

It's fairly standard practice these days when building a website to have some sort of build process in place to help carry out development tasks and prepare your files for a live environment. You may use task runners like Grunt or Gulp for this. These create a chain of steps

Find the difference

Create a function that takes two arrays and returns an array of the items that are unique. Given two arrays (for example array A = [1, 2, 3] and array B = [2, 3, 4]), find the set of elements which are in one of the two arrays, but not in both.

First React Component with JSX

First React Component with JSX

In this exercise you are going to create your FIRST React component! Getting Started with JSX JSX is an extension of JavaScript. In traditional web development you deal with separate HTML and JS files. HTML is converted into the DOM (Document Object Model) and DOM-JavaScript manipulates and responds to the

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.

Odds Then Evens Whiteboard Problem

Write ONE for loop that console.log's all the even numbers 1 - 10 followed by all the odd numbers 1 - 10. The result will be: 1 3 5 7 9 2 4 6 8 10 This would be incorrect because a 2nd for loop is used: for (var

Makes 10 Warm Up

Write a function where given 2 ints, a and b, it will return True if: one of them is 10 or their sum is 10. function makes10(a, b){ } makes10(9, 10) // True makes10(9, 9) // False makes10(1, 9) // True

Sum Double Warm Up

Write a function where given two int values, it will return their sum. Unless the two values are the same, then return double their sum. function sumDouble(a, b){ } sumDouble(1, 2) // 3 sumDouble(3, 2) // 5 sumDouble(2, 2) // 8

Odd odds? Warm up

Write a function where it will take an array of numbers and return true if there are an odd number of odd numbers and return false if there are an even number of odd numbers. Remember the % (modulo) returns the remainder, so if you want to check if n is

React: Build-a-Homepage

* Create a main class that will be rendered to the DOM. * Create 3 additional classes and nest them in your main class. * These 3 classes should be a header, body, and footer for a single web page. * Use CSS on each component. **You can get the basic React setup HERE:

JSON

JSON stands for JavaScript Object Notation. JSON is a syntax for storing and exchanging data. It will be what we use for storing data in a data base, and using the data from other websites in our own applications. Because we are dealing with objects, you will see many key: