Welcome!

Slides: slides.com/dtauer/wc2017

Create a Github.com account

Download the Github Desktop Application

http://desktop.github.com

**Check if Visual Studio Code is installed and run updates

The Plan

Mon-Tue

Introduction to Github
Lots of HTML/CSS
Build an Instagram Interface
Flexbox / CSS Grid
Publishing to Github Pages

Wed-Fri

Lots of JavaScript
ES6 / ES7 Features
Making the Instagram Web App Dynamic
Introduction to Node.js
HTML Templates with Pug
Mongo Database

Tools

Visual Studio Code for coding
Chrome for Previewing/Testing
Github Pages for web hosting

Github

Github Hello World

https://guides.github.com/activities/hello-world/

A repository is usually used to organize a single project.

Branching is the way to work on different versions of a repository at one time.

Saved changes are called commits.

A pull request, is proposing your changes and requesting that someone review and pull in your contribution and merge them into their branch.

Markdown

https://guides.github.com/features/mastering-markdown/

Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like # or *.

Markdown is converted into HTML and often used in the README file

Github Desktop

https://desktop.github.com/

Github Guides

Github Pages

https://pages.github.com/

Hosted directly from your GitHub repository. Just edit, push, and your changes are live.

Github Command Line

Sometimes apps and interfaces are annoying or confusing. Github Projects can be created and updated from the command line. Here are a few handy commands

Create a Repository: git init
Add Changes: git add -A
Commit Changes: git commit -m "Your Message"
Push To Github.com: git push origin master

<html> | .css{}

We're going to build Instagram...sort of

http://www.uipixels.com/instagram-website-template-psd/

With Photos from Unsplash.com. Unsplash has a nice API that let's you request different sized photos. It's good for placeholders or demo assets: unsplash.it

Naming Convensions

BEM: Block Element Modifier

http://getbem.com/introduction/

Flex Box

Great way for doing 1 Dimensional layouts (a row or a column of content)

Navigation, Headers, Footers, Features

Resources

CSS Grid

NEW! Awesome for 2 Dimensional layouts (rows AND columns)

Full site layouts

Resources

JavaScript

Latest and Greatest Features

ES6 - ECMAScript 6
ES7 - ECMAScript 7
Babel - Transpiler (https://babeljs.io/repl/)

Practice, Practice, Practice

https://es6.io/

https://javascript30.com/

So many features, so little time

Constants
Block-Scoped Variables
Arrow Functions
Default Parameter Values
Rest Parameter
Spread Operator
Template Literals
String Interpolation

Property Shorthand
Destructuring Assignment
Modules
Classes
Symbol Type
Iterators
Generators
Promises

Node

The setup is the worst part...but we'll get through it together

1) Install Node

https://nodejs.org/en/

Node is a JavaScript-based server environment. We'll be running a server locally on our computers just like you would with PHP (XAMPP, MAMP) or Java (Tomcat)

Node comes with a Package Manager called NPM. We will use NPM to install packages (libraries) that the server will use

2) Initialize the Project

We will use NPM to initialize the project. NPM will create a package.json file which contains all the information about the project (name, versions, dependencies, scripts, etc).

Open the Command Line in Visual Studio Code with the shortcut CTRL + `
Type the command npm init and follow the instructions

The package.json file will be created and populated with the answers to the questions from the init command

3) Install Dependencies

Dependencies are 3rd-party libraries you want to use in your application. By default dependencies are added to the package.json file so anyone else accessing the project can see what's required to run it. Dependencies are installed with the command: npm install dependency-name

Development Dependencies are tools used for development. These dependencies are installed the same with but with an extra flag: npm install dependency-name -D

3) Install Dependencies

Let's install:

express: Express is the web server which will handle requests and responses
pug: Pug is the template engine we'll be using for assembling our pages
nodemon: This is a Development Dependency that will restart the server when changes occur

npm install express -S

npm install pug -S

npm install nodemon -D

4) Start Developing

We need a starting file. We can name it whatever we want, but normally it's index.js or server.js

In this file, we'll

Start our server
Handle incoming routes (e.g. /, /contact, /about-us

5) Start the Server

Now that we have some code, it's time to start the server and test it. The package.json file has a scripts block where we can add different scripts to run from the command line

We can create a start script or a publish script and run these scripts from the command line.

We'll create a start script: node ./index.js

6) Restarting the Server

Anytime you change some code the server needs to be restarted. You can manually stop the server with CTRL + C in the command line. Then use your arrow keys to look through the last commands your ran to start the server

Doing this every time you change a file is super annoying, so we'll create a new dev script that uses nodemon to restart the server automatically

We'll create a dev script: nodemon ./index.js

Then run the script with: npm run dev

Pug (formerly Jade)

What is Pug

Pug is a HTML template language for creating reusable layouts. Node will compile these templates into valid HTML when they are requested.

Mixins are individual components that can be included in templates

<header>
    <div class="inner">
        <div class="header__logo">Instagram</div>
        <div class="header__search">
            <input type="text" placeholder="e.g. People">
        </div>
        <div>
            <a href="#" class="button button--blue">Get the App</a>
            <a href="#" class="button">Login</a>
        </div>
    </div>
</header>

header
    .inner
        .header__logo Instagram
        .header__search
            input(type="text" placeholder="e.g. People")
        div
            a.button.button--blue(href="#") Get the App
            a.button(href="#") Login

HTML

Pug

<div class="images">
    <div class="inner">
        <a href="" class="image"><img src="http://unsplash.it/320/?image=99" alt="">
            <span class="image__cover">View Image</span>
        </a>
        <a href="" class="image">
            <img src="http://unsplash.it/320/?image=199" alt="">
            <span class="image__cover">View Image</span>
        </a>
</div>

.images
    .inner
        +MyImage(123)
        +MyImage(199)
        +MyImage(456)
        +MyImage(999)

HTML

Pug with Mixins

mixin MyImage(id)
    a.image(href="")
        img(src=`http://unsplash.it/320/?image=${id}` alt="")
            span.image__cover View Image

Heroku

Heroku Platform

Heroku is a web application hosting platform that can host PHP, Ruby, Java, etc.

The hosting is free and can be connected to your Github account

When you push to Github, the project will be pushed to Heroku as well

1) Create a Heroku account

Create an account at http://heroku.com
Verify your email address and create a password

2) Create an Application

Application name are verified across the entire platform so you might have to pick a unique name
- e.g. dtauer-wc-node-server.herokuapp.com

3) Configure the Application

In the Deploy Settings, change the deploy method to be Github
When you do, you'll be asked to connect your Github account and indicate the target repository
You'll also enabled automatic deployments

4) Push to Github

When you are ready to deploy, commit your changes and push to Github. After Github receives the project it will automatically update the Heroku server.

5) View the Application

In the Heroku Dashboard, click "Open App" to view the application or type in the URL:
- <your-app>.herokuapp.com

Working Connections 2017

By Dustin Tauer

Working Connections 2017

1,114

Dustin Tauer

dtauer

Welcome!

The Plan

Mon-Tue

Wed-Fri

Tools

Github

Github Hello World

Markdown

Github Desktop

Github Guides

Github Pages

Github Command Line

<html> | .css{}

We're going to build Instagram...sort of

Naming Convensions

Flex Box

CSS Grid

JavaScript

Latest and Greatest Features

Practice, Practice, Practice

So many features, so little time

Node

The setup is the worst part...but we'll get through it together

1) Install Node

2) Initialize the Project

3) Install Dependencies

3) Install Dependencies

4) Start Developing

5) Start the Server

6) Restarting the Server

Pug (formerly Jade)

What is Pug

Heroku

Heroku Platform

1) Create a Heroku account

2) Create an Application

3) Configure the Application

4) Push to Github

5) View the Application

Working Connections 2017

More from Dustin Tauer