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

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

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

Github Guides

Github Pages

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

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).

  1. Open the Command Line in Visual Studio Code with the shortcut CTRL + `
  2. 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,109