1Marc

Section 1: Prepping for the Workshop

Choosing a Topic

• Looking at the learning paths to find gaps. Our goal is to build out a flow between courses.
• Don’t get too specific, we need a full day… 3-5 hours of material
• Our audience is typically “professionals”
• We’re looking to cover the core technology professionals will use in their day to day work. Niche topics are usually part of a larger topic that we can cover.

1Marc

// For: @musaid
// https://twitter.com/musaid/status/1039688749205020672
// Ligatures built into Operator Mono as "Operator Mono Lig" with https://github.com/kiliman/operator-mono-lig
// VS Code Extensions: vscode-icons, indent-rainbow, Rainbow Brackets, Git Lense and Prettier (require config file with requireConfig)
// VS Code Theme: Night Owl -- custom colors for a bit higher contrast
{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "window.zoomLevel": 1,
  "editor.fontSize": 18,

1Marc

## Day 1

9:30AM - Introduction
10:00AM - Pure React
11:00AM - npm, Prettier, ESLint
11:30AM - Parcel
12:00PM - Lunch
1:00PM - JSX
2:00PM - State and Lifecycle Methods with React
3:00PM - Reach Reactor

1Marc

const express = require("express");
const path = require("path");

const complements = [
  "You like nice today",
  "That dress looks nice on you",
  "Have you been working out?",
  "You can do hard things",
  "You've gotten far in this course. You're really smart",
  "You're programming! How cool is that?",

1Marc

Day 1

12:00pmLunch & Hacking

9:00	Tech Check and Hello
9:30	Instructions and Intro to Node, Http, Express
9:30	Hacking
10:15	Creating our first routes
10:45	Hacking
11:05	Controllers and responding to requests
11:25	Hacking

1Marc

What you need for the JavaScript for WordPress Workshop

Code Repository (frontend-masters-jsforwp)

1. Setup a Local WP Environment using DesktopServer, Local or Chassis
2. Running WordPress Site with Dummy Content
3. Code Editor / IDE
4. Node & NPM Running
5. Get comfortable with JavaScript, webpack, command line

1Marc

Node.js

You’ll need a relatively recent version (v6 or newer, v7 ideally) of node.js installed. On OS X, a great way of doing this without disturbing your existing dev environment is to install NVM. Installation instructions are here

You’ll know everything is set up properly when you can run

nvm --version # might look like "0.31.4"
node --version # might look like "v7.7.3"

1Marc

I’m looking forward to the Sass Fundamentals workshop! A few notes to ensure you’re set up in advance are below.

See you soon!

Mike

Node.js

You’ll need a relatively recent version (v4.5 or newer, v7 ideally) of node.js installed. On OS X, a great way of doing this without disturbing your existing dev environment is to install NVM. Installation instructions are here.

1Marc

• Make sure you have a GitHub account
• Install:
  • Git
  • Text editor (Atom or VSCode suggested)
  • Node installed and available via command line node. Recommended version 4.6 or greater.
  • Chrome web browser (latest stable release)
• Clone the getRANTR repo and follow the install instructions.

1Marc

Tools

Before we kick off the workshop, let's make sure you have everything you need to get going. At a minimum, you'll need Node.js and npm installed. If you don't already have them installed, you can find downloaders here. If you already have Node.js but haven't updated it in a while, please be sure you have at least version 6.9.

You probably already have one, but make sure you have a code editor. If you're looking for a new one, I recommend VS Code.

The Front End App

The focus of the workshop will be on building a data API with Hapi.js which will serve an already-prepared front end application built with Angular. The Angular app displays data about Front End Masters instructors and allows users to add new instructors in. The idea is to progressively build the API such that it gives the Angular app what it needs to operate, all while becoming familiar with how Hapi.js works.