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
Flex Box
Great way for doing 1 Dimensional layouts (a row or a column of content)
- Navigation, Headers, Footers, Features
Resources
- Cheat Sheet 1
- Cheat Sheet 2
- Flexbox Froggy (great for practice)
CSS Grid
NEW! Awesome for 2 Dimensional layouts (rows AND columns)
- Full site layouts
Resources
- Grid By Example
- Learn CSS Grid
- CSS Grid Garden (Good for Practice)
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
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