bigmckissack / learnjs Goto Github PK
View Code? Open in Web Editor NEWProject to walk through comments and run incrementally
Project to walk through comments and run incrementally
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.