bigmckissack / learnjs Goto Github PK

Getting Started:

Helpful commands in terminal
Windows:
>cd filepath 	//changes your current working directory to the file path
>cd ..			//sets your current working directory the parent of thee folder you were in
>dir 			//lists the contents of the directory you are in
>pwd 			//prints the current working directory
>printenv		//prints your environment variables
/*
	Your environment variables are important to understand. They are basically keywords that you define for your computer to do certain things.
	One example and very important environment variable is the PATH variable. You define the PATH as a list of directories (typically /bin directories because this is where executable files normally exist). When you run commands in terminal, your computer will look in your current working directory and in all directories defined in the PATH. First place to troubleshoot if commands aren't working in the command line.
/*



***************************



1) 
Make sure you have Git installed.
>git --version
If you it prints your version, it means you have it properly installed. 

1a) 
If you don't have git, download here: https://git-scm.com/downloads


/*
 Git is a Version Control System (VCS). It helps many people work together on the same codebase.
 It is fairly simple to start but can get very complex. You will want to learn more bout Git.
 Some various capabilities are: cloning peoples code (we will do this on the repo I have created),
 branching code, merging changes with other peoples changes, keeping track of the whole history 
 and letting you go back to any previous version. There is a .gitignore file that is very important when using git. 
*/



2)
First create and navigate to the directory where you want the repo to exist. 
>mkdir webdevFolder
>cd webdevFolder



3)
Then clone the repo into that folder.
>git clone https://github.com/BigMckissack/learnJS.git

3a)
If you cannot install git, download the zip file here: https://github.com/BigMckissack/learnJS/archive/master.zip
Then unzip the .zip file.



****************



More on Git:


>git status
Really helpful "non-dangerous" command to help you understand your status

>git clone URLtoCLONE
First command to copy an existing project. You can clone any publicly accessible git project with this command.

>git pull
Bring latest code from remote and merge it into your local working copy
Replaces "git fetch" + "git merge" and combines them into a single function.
Best practice to only "git pull" if you have committed all changes and have a clean current working copy. 
"git status" will show you if you have committed all changes. "git stash" can help also, see more later.


Good Workflow:
Commit often and provide meaningful commit messages. This will help if you ever need to revert your code. Commits are basically just checkpoints that you can go back to if ever needed.

Logon first time for the day:
1) finish commiting any loose ends from previous day. Ensure you have a clean working copy. (There are some cases you will be working on a complex feature that takes more than a day. It is ok to finish those types of changes without following this exact flow. Having a seperate branch may be useful)

2) git pull
If you are working on a project with others, this will get all the new changes your teammates have submitted. It is important to keep your local copy relevant with the remote. If you work too much without pulling, you may run into bigger conflicts when you do pull. Therefore pulling often can help keep conflicts from being sever.
2a) fix  any potential conflicts
If there are any merge conflicts you need to resolve them carefully. Be sure to run and test your code to ensure the merges are good.
2c) push fixed conflicts
After editing the conflicted files, "git add --all", "git commit -m "message for commit", git push

3) Make your new changes to the code
This is where you are actually doing your new work and implementing functionality. Once you are satisfied with the current changes (ie: a feature is implemented) then move on

4) git add --all    OR    git add fileName
"git add --all" will add all the changes of all files to your staging area. "git add fileName" just adds specific files one at a time to the staging area.

5) git commit -m "message"
make sure you write a meaningful message to help your teammates understand what is in the commit.

6) git pull
depending on how long it has been since your last pull, another teammate could have added more changes.  You need to be up-to-date with the remote before your push your changes on top. Therefore, a pull here ensures you have the latest code when you move on to push your changes.

7) git push
This publishes your changes to the remove and allows your team to view and use the new code. 


::ACTIVITY::
Groups:
Create a git repo
Initialize the repo and groups will create basic web app. Then all members pull master branch, create their own feature branch with a route and merge it back.


Write file
git add --all
git commit -m "new file"
git push
git checkout -b feature
change file
git add --all
git commit -m "change file on feature"
git push
git checkout master
change file differently
git add --all
git commit -m "change file on master"
git push
git checkout feature
git merge master
fix conflict
git checkout master
git merge --no-ff feature

******************

What is a website?

There are 3 core components that make up the majority of websites.
1) HTML
2) CSS
3) Javascript

HTML: The structure of your website. Foundation for all content to be displayed through. It is also big factor for user accessibilty (ie blind or impaired user ease of use)
CSS: This defines all the styles to be used in your html. You dont define the text but how the text is displayed and visible aspects.
Javascript: This is the glue that puts the two together and then supercharges the website. Without it, your website would be a static entity that users could go look at but not interact with in a rich way. The Javascript is what allows dynamic things to happen on a site. It is what lets a site interact with a Database. It is the reason websites have the great functionality that they do.

******************


Project File Layout

Folder structure is very important for a clean project that others can understand. Here is a bit of a breakdown into this project's.

learnJS: Top level projcet folder. Name of our project
	assets: This is sometimes named the "public" folder. It should contain all assets that the client (user of your webapp) will need. Used with "express.static"
		js: Hold the javascript you write for your app. 
			controllers: Angular entity needed
				mainControl.js: main controller file for the app
		views: Holds the html that you will send to client
			contentToSend.html: example html file
		index.html: main html file for your project. "Root" of the content you will display
	server: This folder unlike assets will be for your webapp server. It will not get sent to client side.
		serverAPI: This file is where you define the routes that your server will respond to from the client browser.
	node_modules: This is a folder created by Node (the server we are using) to hold the dependencies we install for our webapp. (ie express)
	app.js: This is the main bootstrap file that you will run to start your server.
	package.json: This is a Node file that defines what dependencies your webapp uses. It defines what should be installed in the node_modules
	package-lock.json: Node generated file, don't worry about it. If "npm" starts acting up, sometimes deleting it will help.
	Readme: A file to explain your project and how to run it.



::ACTIVITY::
Create 2 drop-down lists. Make the second drop-down choices correspond to the first drop-down selection. Do not display the second drop-down until the first is selected.
IE: Select1: 
		Male
		Female
	Select2_male:		Select2_female:
		Bob				Sally
		Jim				Denise
		Kyle			Mary


******************

What is Javascript?
Single-threaded Event Loop: Uses only one CPU at a time and does only one thing at a time(the next thing in the Event Queue).
Asynchronous: processes can happen "out of order" of how its written in the code. A process can be started and not finish before the next process is started.