Coding_Bootcamp_Helpful_Notes.txt

Congrats, class.

You all have killed it. It might not all be mega clear yet, but by now you have all made some seriously pro level websites:
1) The front-end is responsive.
2) The back-end is RESTFUL.
3) The front-end and back-end are actually two independent websites that work together!!!

Front-end:
    There are many different ways to structure front-end code for websites
    In this class, we used Foundation to help us set up our layout.
    Remember:
        - HTML for structure.
        - CSS for styling.
        - JavaScript for actions and sending data.
            > JQuery is your friend.
        - Clean indentation is important!
        - Look in the console for errors!

Back-end:
    There are many different ways to write back-end logic for websites.
    In this class, we have built a Node.js server.
    - We set up back-end routes in routes/index.js
    - We set up the database in db/index.js
    - The database itself is the file db/Database.db -> delete this file to clear your database
    - In app.js file, you need to tell the server to accept messages from the front-end (since for our sites they live in two different places!)
        > The line:  res.header("Access-Control-Allow-Origin", "http://pablq.github.io");
          Should be: res.header("Access-Control-Allow-Origin", "http://<yourwebsite>.com");
          or:        res.header("Access-Control-Allow-Origin", "*");
        > If you get the error "XMLHttp... Origin is not allowed" that's what the problem is!

Hosting:
    There are many different ways to host a website.
    In this class, we have hosted our sites in two different places:
    1) <username>.github.io
        - This site is only for front-end code.
        - The code for this site lives in the repository by the name <username>.github.io
        - In order to deploy, you just have to push your code to github.
    2) <sitename>.azurewebsites.net
        - This site is only for back-end code.
        - The code for this site should be in your Blue_Summer_Coding_Bootcamp_2 repository.
        - In order to deploy, you must push to azure (git push azure master)
              
    To manage your stuff on Azure:
        1) go to "https://azure.microsoft.com/" and select "portal" at top right.
        2) you should be prompted to log in.
        3) once in, you'll see your web app on the right as a square tile. click it.
        4) you'll only really need to use the Settings Section:
            - You'll mostly just need to set a few environment variables
            - To set an environment variable, go to Settings > Application Settings > App Settings
            - You'll have to set environment variables for two things:
                - set your app password 
                    > you need this for when you retrieve your emails list.
                    > (key = PASSWORD, value = whatever you want your password to be)
                - tell your database to reset
                    > you have to do this (for now) when you change or add columns to a table
                    > (key = RESET, value = 'yes' for reset, anything else won't reset it
                    > be sure to remove the 'yes' value after restart! You don't want to clear your database each time!
                    > also, be sure to gather your database data before restarting!

Domain names:
    There are many different ways to associate a name with your website.
    In this class, we haven't really gotten into domain names.
    This is roughly how to set it up:
    1) Buy a domain name from a company that sells them:
        - Namecheap.com <- best
        - Google.com
        - GoDaddy.com 
    2) Look up how to set it up! (Google!)
        - I suggest setting up the name as a 'cname'
        - You'll have to log in to the domain broker's website to do most of the set-up 
        - You'll also have to log in to wherever you're hosting the site and tell them that such-and-such name will be it's new name.

Git:
    Git allows you to manage multiple versions of your program.
    In this class, we have mostly used it to save our projects and share them (push them to internet).
    Helpful commands:
        - To save your project state in Git:
            > git add -A
            > git commit -m <helpful message here>
        - To push your project to a remote location:
            > git push <remote name> <branch name>
        - To pull down the latest code from the internet
            > git pull <remote name> <branch name>
        - To copy a repository from a remote location
            > git clone <remote url>
        - To start a new repository on your computer
            > git init

Command Line Interface:
    We use the command line interface (CLI) to interact with the computer.
    For mac users that's the Terminal.app.
    For windows users we have used GitBash
    Sometimes, it's way more convenient than using the GUI (Graphic User Interface). 
    Remember the relationship between a filename, full filepath, and relative filepath:
        Example file 'index.html' in the directory 'my_website' which is on the Desktop.
        Assuming you are in the /Desktop directory in the CLI...
        filename really means either the relative path, or the full path to the file.
        - relative filepath -> /my_website/index.html
        - full filepath -> /Users/YOURNAME/Desktop/my_website/index.html
    Helpful commands:
        - To see where in the computer you are (full path): 
            > pwd
        - To see what files/folders are in your current directory:
            > ls
        - To see what files/folders are in your current dirctory with more detail:
            > ls -la
        - To move into another directory:
            > cd <directory name>
        - To move back one directory:
            > cd ..
        - To move to the home directory:
            > cd ~
        - To copy a file from one location to another:
            > cp <filename> <copy filename>
        - To move a file from one location to another:
            > mv <filename> <new filename>
        - To delete a file
            > rm <filename> 
        - To delete a folder and all it's contents (CAREFUL!!!!)
            > rm -rf <directory>

Node.js:
    Node.js is a program that we have used to run JavaScript files.
    From the CLI, we ask Node.js to run a JavaScript file:
        > node <filename.js>  
    The servers for our websites run on Node.js

Sublime Text:
    We use Sublime Text to edit code!
    ALWAYS OPEN A FOLDER IN SUBLIME TEXT, DON'T BOTHER OPENING INDIVIDUAL FILES!

Ngrok:
    We used Ngrok to open a tunnel from our local computer to the internet. 
    It is helpful for sharing stuff that is in development.
    To run it, you must navigate to the folder that Ngrok lives in via the CLI
    Then run the command:
        > ./ngrok <port server is listening on>

GIMP:
    We barely used GIMP.
    It's a free image-editing program.
    Sometimes, you have to modify images for websites.
    To export your image in a certain format, you must choose File > "Export As"
    Then, choose one of the three following formats:
        1) jpg -> the best for keeping file size small
        2) png -> higher quality than jpg. use when you need to have transparency in your image.
        3) git -> really cool file format that allows for animations. these can get very big quickly though.

Chrome:
    Chrome is one of the several different browsers you can use to view websites.
    Chrome is nice because it's developer tools are extremely helpful:
    To open developer tools, hit
        > windows: ctrl + shift + i 
        > mac: command + alt + i
    In developer tools, the main things we used are:
        1) console -> see any JavaScript errors we get.
        2) elements -> select any HTML element and see all the styling that is being applied to it
        3) network -> see how long everything is taking to load
        4) sources -> check to make sure all the files you expected to arrive arrived.
    Also, don't forget to do a "hard refresh" if you made changes that aren't showing up:
        > windows: ctrl + shift + r
        > mac: command + shift + r

Have a good school year and keep coding!