├── README.md ├── assignments ├── README.md ├── first_project_presentation_template.pdf ├── individual-project-proposal.md └── team-project-proposal.md ├── guides ├── README.md ├── development-environment-setup.md ├── git.md ├── images │ ├── VBOXADDITIONS.png │ └── vbox-terminal.png ├── installing-postgresql.md ├── installing-virtual-box-guest-additions.md ├── javascript.md ├── tech-interview-best-practices.pdf └── technical-interview-prep.md └── lecture-notes ├── README.md ├── lecture-01.pdf ├── lecture-02.pdf ├── lecture-03-part-2.pdf ├── lecture-03.pdf ├── lecture-04.pdf └── lecture-05.pdf /README.md: -------------------------------------------------------------------------------- 1 | # CUNY Tech Prep 2018-2019 2 | 3 | _This repository contains program materials for the technical curriculum of the CUNY Tech Prep program._ 4 | 5 | [CUNY Tech Prep](http://cunytechprep.nyc/) is a [NYC Tech Talent Pipeline](http://www.techtalentpipeline.nyc/) program designed to provide exceptional Computer Science students in the CUNY senior college system with in-demand software development and professional skills. 6 | 7 | --- 8 | 9 | The following is a brief overview of the contents of this repository. 10 | 11 | [`README.md`](README.md) 12 | 13 | > This file. 14 | 15 | [`/guides/`](guides) 16 | 17 | > This directory contains various guides and resources for self-learning topics and technologies. 18 | 19 | [`/lecture-notes/`](lecture-notes) 20 | 21 | > This directory contains all of the lecture materials for each module of the technical curriculum 22 | 23 | [`/assignments/`](assignments) 24 | 25 | > This directory will contain all assignments assigned during the Summer, Fall, and Spring. 26 | 27 | 28 | -------------------------------------------------------------------------------- /assignments/README.md: -------------------------------------------------------------------------------- 1 | _CUNY Tech Prep 2018-2019_ 2 | 3 | # Assignments 4 | 5 | 6 | ## Summer Assignments 7 | 8 | ### 01: Review HTML, CSS, and JavaScript 9 | 10 | **Due Saturday, August 04, 2018 by 11:59pm** 11 | 12 | - Sign up for a [codecademy.com](http://codecademy.com) account if you do not have one already 13 | - Complete the following courses (_make sure you're logged in to your account_) 14 | + [Learn HTML](https://www.codecademy.com/learn/learn-html) 15 | + [Learn CSS](https://www.codecademy.com/learn/learn-css) 16 | + [Learn Responsive Design](https://www.codecademy.com/learn/learn-responsive-design) 17 | - When done, take a screenshot of your account showing you've completed the courses and submit to the Google Form shared on Slack. 18 | 19 | ### 02: Git Basics, and JavaScript 20 | 21 | **Due Monday August 20, 2018 by 11:59pm** 22 | 23 | - Complete the following courses (_make sure you're logged in to your account_) 24 | + [Learn Git](https://www.codecademy.com/learn/learn-git) 25 | + [Introduction to JavaScript](https://www.codecademy.com/learn/introduction-to-javascript) 26 | * _Only complete sections 1-9_ 27 | - When done, take a screenshot of your account showing you've completed the courses and submit to the Google Form shared on Slack. 28 | - ~In the next few weeks you will also receive a JavaScript programming challenge. You should complete it by August 20th.~ 29 | 30 | _If Git and JavaScript are challenging for you to learn, you can take a look at these additional resources:_ 31 | 32 | - [Git and Github Guide](../guides/git.md) 33 | - [JavaScript Guide](../guides/javascript.md) 34 | + [Eloquent JavaScript, 3rd Edition](http://eloquentjavascript.net/index.html) 35 | * This is a really good book and it is _FREE_. 36 | * Focus only on chapters 1-6, 10, & 11 37 | 38 | 39 | 40 | ## Fall Assignments 41 | 42 | 43 | ### Individual Project Proposal 44 | **Due September 17, 2018** 45 | 46 | See the proposal requirements here: [Individual Project Proposal guidelines](individual-project-proposal.md) 47 | 48 | [Submit Here](https://docs.google.com/forms/d/e/1FAIpQLSfC2DPTEonXBW_9SGur2nqvZoUonRG9MeY4HyDq9if4Dc2F9Q/viewform) 49 | 50 | 51 | ### Team Project Proposal 52 | **Due September 29, 2018** 53 | 54 | Form a team of 3 students and submit a Team Project Propsal. 55 | 56 | See the team proposal requirements here: [Team Project Proposal guidelines](team-project-proposal.md) 57 | 58 | [Submit Here](https://docs.google.com/forms/d/e/1FAIpQLScoDsXNDWSs6eM2GytInSqoq_Ns2lLYUUKFPBT3Nc4N0_KvHw/viewform) 59 | 60 | ### First Project Presentation 61 | **Presentations are during Week 9 classes: (10/30 - 11/02)** 62 | 63 | #### Presentation Guidelines 64 | 65 | - 8 minutes per team (5 min _presentation_, 3 min _Q&A_) 66 | - **All team members** must present at least one slide 67 | - See a presentation template here: [first_project_presentation_template.pdf](first_project_presentation_template.pdf) 68 | - (_Optional_) Show a demo of _work in progress_ if you can 69 | 70 | #### What to submit 71 | 72 | - One presentation per team 73 | - Submit to your project mentor prior to week 9 class for feedback 74 | + Send your mentor and instructor a link to your Google Slides 75 | - You must be ready to present during Week 9 class 76 | -------------------------------------------------------------------------------- /assignments/first_project_presentation_template.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CUNYTechPrep/ctp2018/57314d0e19361e8422c9fe46e2092df98828fe14/assignments/first_project_presentation_template.pdf -------------------------------------------------------------------------------- /assignments/individual-project-proposal.md: -------------------------------------------------------------------------------- 1 | # Individual Project Proposal 2 | 3 | Over the course of this semester, you will be working in groups of 3 to develop a Full Stack Web Application that you will demo at the end of the semester on DEMO DAY (Mid-December). 4 | 5 | Before we form groups, I would like each of you to come up with an individual proposal for a project that fits at least one of the following criteria. (Once you have formed teams, you will discuss, choose, and refine your proposals. Each team will develop a single application.) 6 | 7 | ## Project Criteria 8 | 9 | Modern full stack applications (think Facebook/Gmail) are quite complex and deliver many features and services, but they typically start out as much smaller efforts. For your project proposals, come up with ideas that can roughly fit into one of the following 4 platform categories of full stack applications (_These are not the only categories for applications by the way, just the most common. In fact many businesses and applications have features that cross multiple categories_). 10 | 11 | 1) **Communication platforms:** These are among the hardest to build. They allow users to sign up and share usernames to communicate via direct messages or group messages in real time. Much like text messaging or calling (voice and/or video). _Examples:_ 12 | - Slack 13 | - WhatsApp 14 | - WeChat 15 | - Hangouts 16 | - Skype 17 | 18 | 2) **Marketplace or exchange platforms:** This category makes physical or digital goods (including services) available for sale or trade. Either from a central seller that maintains an inventory or by allowing users to post the inventory. _Examples:_ 19 | - Amazon 20 | - eBay 21 | - Etsy 22 | - Shoppify 23 | - Fiver 24 | 25 | 3) **Social media platforms:** These allow users to create "friend" networks and share content (text, image, and video postings) in a public or semi-private way. _Examples:_ 26 | - Facebook 27 | - Snapchat 28 | - Instagram 29 | - Twitter 30 | - LinkedIn 31 | 32 | 4) **Content creation and distribution platforms:** These are the core platforms for news and blog sites. They allow a limited group of content creator users to create and edit content that is distributed to consumers of the content. _Examples:_ 33 | - WordPress 34 | - Drupal 35 | - Medium 36 | - Tumblr 37 | - Photoshop (online) 38 | - https://pixlr.com/editor/ 39 | - Google Docs/Office 360 40 | - Netflix 41 | - Youtube 42 | 43 | 44 | If you feel your project idea does not fit one of these platform categories, then clearly define the category and provide examples for approval. 45 | 46 | ### Example project: 47 | 48 | **You can't use this project!** 49 | 50 | Three years ago, CTP students built an application called the **"Community Tool Sharing site"**. The application allowed members of a community (such as a building or town) to post tools they had available for sharing, such as Drill's, Ladders, Wrenches, etc. Other members of the community could request to borrow the tool, which would then be marked as unavailable, and would be marked available upon return. This site allowed the community to make the best use of tools each member owned but rarely used, while not having to buy expensive tools they needed for one-off jobs. 51 | 52 | 65 | 66 | 67 | ## Proposal Requirements (Due: 9/17/2018) 68 | 69 | Propose your own project idea with the following information: 70 | 71 | 1) Project Name 72 | 2) Student Name 73 | 3) Executive summary of the application (1-2 paragraphs). This should contain answers to the following questions: 74 | - What is the motivation for your application? 75 | - Is there a need or want in the market that it fulfills (does not have to be a for-profit, or paid need)? 76 | - Are there similar applications available now? 77 | - How does your idea differ? 78 | 4) Define your applications _User-types_ (1 or more depending on your idea) 79 | - This is a high-level description of the users role when using your application. Think of: Sellers, Buyers, Administrator, Moderator, Content-creator, Consumer, etc 80 | 5) Use Cases/User Stories: 81 | - Give 2 examples of the most important usage (or interaction) scenarios for your application 82 | 83 | [Submit Proposals Here](https://docs.google.com/forms/d/e/1FAIpQLSfC2DPTEonXBW_9SGur2nqvZoUonRG9MeY4HyDq9if4Dc2F9Q/viewform) 84 | -------------------------------------------------------------------------------- /assignments/team-project-proposal.md: -------------------------------------------------------------------------------- 1 | # Team Project Proposal 2 | 3 | Now that groups are formed, submit one team project proposal for approval. This proposal is a summary of the idea and similar to your individual proposals. The proposal requirements are listed below. 4 | 5 | ## Project Proposal Requirements 6 | 7 | _Make sure your proposal contains the following 5 sections._ 8 | 9 | _It should be **2 pages max**. You do not have to include mockups or data models at this time. We will work on those in your next assignment._ 10 | 11 | 1) _Team Name_ and _Project Name_ 12 | 2) Team Member Names, emails, github and Schools 13 | - Include: name, email, github username, school 14 | 3) Executive summary (2 paragraphs) 15 | - This should include answers to the following questions: 16 | + Explain your idea 17 | + What is the motivation for your application? 18 | + Are similar applications/competitors already available? 19 | + How is your idea different? or why is there a need for a competitor? 20 | * It is OK for your idea to be a clone 21 | 4) Clearly define and describe the User-types for your application 22 | - 1 or more user-types depending on your idea 23 | - Think of: Sellers, Buyers, Administrator, Moderator, Content-creator, Consumer, etc 24 | 5) User Stories: 25 | - What are the most important actions for each user-type 26 | - What are the most important workflows your users of your application 27 | - To learn more about User stories read: 28 | + https://dzone.com/articles/writing-user-stories-web 29 | + https://www.mountaingoatsoftware.com/presentations/introduction-to-user-stories 30 | 31 | 32 | * **Due date:** Sept 29, 2018 33 | * **Submission Link:** 34 | - [Submit Here](https://docs.google.com/forms/d/e/1FAIpQLScoDsXNDWSs6eM2GytInSqoq_Ns2lLYUUKFPBT3Nc4N0_KvHw/viewform) 35 | - **IMPORTANT:** Name your files with your section number and a short team name: `section_#_TEAM_NAME.pdf` 36 | - Section Numbers 37 | + 1 - Tuesday Evening 38 | + 2 - Wednesday Evening 39 | + 3 - Thursday Evening 40 | + 4 - Friday Afternoon 41 | + 5 - Friday Evening 42 | 43 | -------------------------------------------------------------------------------- /guides/README.md: -------------------------------------------------------------------------------- 1 | # Guides 2 | 3 | ## Technical Interview Preparation 4 | 5 | - [Technical Interview Preparation Guide](technical-interview-prep.md) 6 | - [Whiteboard Coding: Tech Interview Best Practices](tech-interview-best-practices.pdf) 7 | 8 | 9 | ## Software Guides 10 | 11 | - [Git and Github Guide](git.md) 12 | - [JavaScript Resources Guide](javascript.md) 13 | - [Installing VirtualBox Guest Additions](installing-virtual-box-guest-additions.md) 14 | - [Installing PostgreSQL](installing-postgresql.md) 15 | - [Development Environment Setup](development-environment-setup.md) 16 | 17 | -------------------------------------------------------------------------------- /guides/development-environment-setup.md: -------------------------------------------------------------------------------- 1 | # Development Environment Setup 2 | 3 | We will be installing the following tools in our development environments and we will get familiar with bash: 4 | 5 | - A package manager (`apt-get` on Linux, home`brew` on Mac) 6 | - Install `curl` 7 | - Install `git` and configure it 8 | - Install Sublime Text 3 9 | - Install NVM (Node Version Manager) and use it to install Node 10 | - Get familiar with Bash Commands 11 | 12 | 13 | ## Using Your Package Manager 14 | 15 | Package managers are client applications that allow us to install, upgrade, configure, and remove programs and libraries on our computers. They ensure that all necessary dependencies are automatically installed and configured correctly. We will use these to install various packages during our program and you will probably use these extensively in your careers. 16 | 17 | 18 | **Mac Users:** 19 | 20 | Mac users should ensure they have installed both XCode and [Homebrew](https://brew.sh/). Once this has been completed, you can use the `brew` command to install packages. Try the following to ensure brew is working correctly. 21 | 22 | ```bash 23 | brew update 24 | brew install curl 25 | ``` 26 | 27 | **Note:** anytime you want to install a package, you should first run the `brew update` command. This downloads the latest package manager index files, which lets brew know of the latest available packages and versions. 28 | 29 | 30 | **Lubuntu Users:** 31 | 32 | The Debian/Ubuntu package manager is `apt-get`. Run the following commands to install the `curl` and `build-essential` packages. 33 | 34 | ```bash 35 | sudo apt-get update 36 | sudo apt-get install curl build-essential 37 | ``` 38 | 39 | **Note:** anytime you want to install a package, you should first run the `sudo apt-get update` command. This downloads the latest package manager index files, which lets apt-get know of the latest available packages and versions. 40 | 41 | 42 | ## Git 43 | 44 | **Mac Users:** 45 | 46 | ```bash 47 | brew update 48 | brew install git 49 | ``` 50 | 51 | **Lubuntu Users:** 52 | 53 | ```bash 54 | sudo apt-get update 55 | sudo apt-get install git 56 | ``` 57 | 58 | ### One Time Configuration 59 | 60 | You should always configure git and let it know who you are the first time you install it on a new machine. This way the commit log will always have proper author information. 61 | 62 | ```bash 63 | git config --global user.name "First Last" 64 | git config --global user.email "my@email.com" 65 | 66 | git config --global push.default simple 67 | git config --global core.autocrlf input 68 | ``` 69 | 70 | #### Explanation of the final two commands 71 | 72 | ```bash 73 | git config --global push.default simple 74 | ``` 75 | 76 | This tells git to only push updates from your current branch up to remote repositories (like github). If you don't do this, then the original behavior could be to push all branches, even your experimental ones, up to remote repositories. 77 | 78 | ```bash 79 | # mac/linux 80 | git config --global core.autocrlf input 81 | # windows only 82 | git config --global core.autocrlf true 83 | ``` 84 | 85 | This setting deals with the end of lines (EOL) in your code files. For the best compatibility across platforms, it is best if windows users set this to `true` and Mac/Linux users set this to `input`. 86 | 87 | 88 | ## Sublime Text 3 89 | 90 | You are free to use any text editor that supports JavaScript, such as: vim, emacs, Sublime Text, Atom, Textmate, Visual Studio Code. 91 | 92 | Below are instructions for the installation of the Sublime Text editor. 93 | 94 | **Mac Users:** 95 | 96 | Mac users can download Sublime Text directly from the Sublime website [https://www.sublimetext.com/3](https://www.sublimetext.com/3) and follow the installation instructions. 97 | 98 | _Setting up the `subl` command line tool_ If you would like to launch sublime from the command line on OS X you will have to set it up with the following command: 99 | 100 | ```bash 101 | ln -s /Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl /usr/local/bin/subl 102 | ``` 103 | 104 | **Lubuntu Users:** 105 | 106 | Lubuntu/Ubuntu users can use `apt-get` to install Sublime Text. The following commands are detailed here: [https://www.sublimetext.com/docs/3/linux_repositories.html#apt](https://www.sublimetext.com/docs/3/linux_repositories.html#apt) 107 | 108 | ```bash 109 | # Install the GPG Key 110 | wget -qO - https://download.sublimetext.com/sublimehq-pub.gpg | sudo apt-key add - 111 | 112 | # Use the stable channel 113 | echo "deb https://download.sublimetext.com/ apt/stable/" | sudo tee /etc/apt/sources.list.d/sublime-text.list 114 | 115 | # Install Sublime Text 116 | sudo apt-get update 117 | sudo apt-get install sublime-text 118 | ``` 119 | 120 | `apt-get` will now be able to update sublime-text like any other package. 121 | 122 | The Sublime Text editor can now be launched with the `subl` command or via the application menu in Lubuntu. 123 | 124 | 125 | ## NVM and Node 126 | 127 | The best way to manage your Node.js installations is to use the NVM (Node Version Manager) tool. It allows you to have multiple versions of Node.js installed simultaneously and provides commands to easily switch between different versions. 128 | 129 | ```bash 130 | # Mac users should run this command first 131 | touch ~/.bash_profile 132 | 133 | # Install nvm (both linux and mac users) 134 | curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash 135 | 136 | # After nvm installs you should close your terminal and open a new one to access nvm 137 | 138 | # Verify that nvm is working 139 | nvm ls 140 | 141 | # Install the LTS node.js version 142 | nvm install 8.11.4 143 | 144 | # Install another node.js version 145 | nvm install 10.9.0 146 | 147 | # You are now using version 10.9.0, to switch back to 8.11.4 run 148 | nvm use 8.11.4 149 | 150 | # Run the node repl (read-eval-print loop) 151 | node 152 | ``` 153 | 154 | The `node` command runs the interpreter allowing you to run and evaluate JavaScript code. This is similar to running the `python`, `ruby`, or `php` interpreters on the command line, if you are familiar with those languages. 155 | 156 | **Exiting Node:** Press `ctrl+d` 157 | 158 | If the nvm command is not working for you on the Mac, then check this section for additional troubleshooting: [https://github.com/creationix/nvm#install-script](https://github.com/creationix/nvm#install-script). 159 | 160 | 161 | ## Basic Command Line Commands 162 | 163 | ### Open your terminal 164 | 165 | **Mac Users:** can press `CMD+SPACE` and type "terminal" to launch it. 166 | 167 | **Lubuntu Users:** can click on the bottom left corner icon on the Desktop. This will bring up the Program menu. You will find "LXTerminal" under the System Tools folder in the Program menu. 168 | 169 | ### Command Descriptions 170 | 171 | `pwd`: print working directory 172 | 173 | `ls`: list directory 174 | 175 | `mkdir`: make directories 176 | 177 | `cd`: change working directory 178 | 179 | `touch`: change file timestamps, or create empty file if it doesn't exist. 180 | 181 | `ls -l`: use long format for directory listings 182 | 183 | `cd ..`: change to parent directory 184 | 185 | `mv`: move file command is used to both move and/or rename files 186 | 187 | `cp`: copy file command 188 | 189 | `rm`: remove file command 190 | 191 | I recommend using the [https://explainshell.com/](https://explainshell.com/) website to learn about commands and their various options, especially when you find you are being asked to run commands you are not familiar with. 192 | 193 | If you are new to the command line and want to learn more, you can start by taking the following codecademy course: [https://www.codecademy.com/learn/learn-the-command-line](https://www.codecademy.com/learn/learn-the-command-line). 194 | 195 | -------------------------------------------------------------------------------- /guides/git.md: -------------------------------------------------------------------------------- 1 | # Learning Git and Github 2 | 3 | Git is currently the most popular distributed version control system in use in industry today. The concepts are not new, but git in particular has superseded previous tools because it is efficient, works locally and remotely, and best of all, it is open source and maintained by a large community. 4 | 5 | If you've never used Git or are still fuzzy on why we need version control, then you should view the following video lessons. From there proceed to the interactive lessons. 6 | 7 | Anytime you setup git for the first time on a computer or virtual machine, you should set some basic configurations as described in the section [One time setup](#one-time-setup) 8 | 9 | 10 | ## Video Lessons 11 | 12 | * What is Git and Github? (4min video) 13 | - [https://www.youtube.com/watch?v=uUuTYDg9XoI](https://www.youtube.com/watch?v=uUuTYDg9XoI) 14 | * Git setup and first time use (8min video) 15 | - [https://www.youtube.com/watch?v=QqP7YZlZEOo](https://www.youtube.com/watch?v=QqP7YZlZEOo) 16 | 17 | 18 | ## Interactive Git Lessons 19 | 20 | * **tryGit:** [https://try.github.io](https://try.github.io) 21 | - Do this one! 22 | * **Codecademy Learn Git:** [https://www.codecademy.com/learn/learn-git](https://www.codecademy.com/learn/learn-git) 23 | 24 | 25 | ## References 26 | * Git Book 27 | - [https://git-scm.com/doc](https://git-scm.com/doc) 28 | * Git Command Reference 29 | - [https://git-scm.com/docs](https://git-scm.com/doc) 30 | * Git and Github resources 31 | - [https://help.github.com/articles/good-resources-for-learning-git-and-github/](https://help.github.com/articles/good-resources-for-learning-git-and-github/) 32 | 33 | ## Advanced References 34 | 35 | The following are resources for advanced usage of Git and Github. You don't have to spend time now (early semester) on this material, but rather, refer back here when you need to. 36 | 37 | * The full Codemy School Git Playlist (7 videos) 38 | - A lot of the advanced topics here, may only make sense once we begin working in groups. 39 | - [https://www.youtube.com/playlist?list=PLjQo0sojbbxVHcVN4h9DMu6U6spKk21uP](https://www.youtube.com/playlist?list=PLjQo0sojbbxVHcVN4h9DMu6U6spKk21uP) 40 | * Git Workflows (Atlassian Docs) 41 | - [https://www.atlassian.com/git/tutorials/comparing-workflows/](https://www.atlassian.com/git/tutorials/comparing-workflows/) 42 | 43 | 44 | ## One Time Setup 45 | 46 | You should always setup git and let it know who you are. This way the commit log will always have proper author information. 47 | 48 | ```bash 49 | git config --global user.name "First Last" 50 | git config --global user.email "my@email.com" 51 | 52 | git config --global push.default simple 53 | # `input` on mac/linux, `true` on windows 54 | git config --global core.autocrlf input 55 | ``` 56 | 57 | ### Explanation of the final two commands 58 | ```bash 59 | git config --global push.default simple 60 | ``` 61 | 62 | This tells git to only push updates from your current branch up to remote repositories (like Github). If you don't do this, then the original behavior could be to push all branches, even your experimental ones, up to remote repositories. 63 | 64 | ```bash 65 | # mac/linux 66 | git config --global core.autocrlf input 67 | # windows only 68 | git config --global core.autocrlf true 69 | ``` 70 | 71 | This setting deals with the end of lines (EOL) in your code files. For the best compatibility across platforms, it is best if windows users set this to `true` and Mac/Linux users set this to `input`. 72 | 73 | -------------------------------------------------------------------------------- /guides/images/VBOXADDITIONS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CUNYTechPrep/ctp2018/57314d0e19361e8422c9fe46e2092df98828fe14/guides/images/VBOXADDITIONS.png -------------------------------------------------------------------------------- /guides/images/vbox-terminal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CUNYTechPrep/ctp2018/57314d0e19361e8422c9fe46e2092df98828fe14/guides/images/vbox-terminal.png -------------------------------------------------------------------------------- /guides/installing-postgresql.md: -------------------------------------------------------------------------------- 1 | # Installing PostgreSQL Server 2 | 3 | [Postgres](https://www.postgresql.org/) is a widely used and open source relational database. The applications we are developing in this program make use of postgres, so it is important that we make sure it is installed. 4 | 5 | 6 | ## Installing on a Mac (with Homebrew) 7 | 8 | The easiest way to install postgres on the Mac is using Homebrew with the following commands: 9 | 10 | ``` 11 | brew update 12 | brew install postgresql 13 | ``` 14 | 15 | ### Starting up the server 16 | 17 | After installing postgres, you need to turn it on before you can begin using it. There are a few ways to do that, but the easiest is using the homebrew services manager. You can set that up as follows: 18 | 19 | First, install brew services if you don't already have it installed: 20 | 21 | ``` 22 | brew tap homebrew/services 23 | ``` 24 | 25 | Next, you can start, stop, or restart the postgres server with the following commands: 26 | 27 | For starting it up: 28 | 29 | ``` 30 | brew services start postgresql 31 | ``` 32 | 33 | For stopping the server: 34 | 35 | ``` 36 | brew services stop postgresql 37 | ``` 38 | 39 | To restart the server run: 40 | 41 | ``` 42 | brew services restart postgresql 43 | ``` 44 | 45 | 46 | ## Installing on Ubuntu 16.04 47 | 48 | On Ubuntu 16.04 you can install postgres with the following commands: 49 | 50 | ``` 51 | $ sudo apt-get update 52 | $ sudo apt-get install -y postgresql-9.5 postgresql-server-dev-9.5 53 | ``` 54 | 55 | ### Create your DB user 56 | 57 | On Ubuntu, you will have to make a postgresql user that matches your Ubuntu username. 58 | 59 | 60 | Run these commands **once** (replace `UBUNTU_USERNAME` with your own username): 61 | 62 | ``` 63 | sudo su - postgres 64 | createuser -P -s -e UBUNTU_USERNAME 65 | exit 66 | ``` 67 | 68 | > After this one time step, you wont need the sudo commands to create more databases and database users. 69 | 70 | 71 | ## Creating Databases for my projects 72 | 73 | The postgres server runs in the background and can serve multiple databases for your different projects. Anytime you start a new project, the first thing you'll want to do is setup a database. You can use the following commands to create users and databases using postgres' command line utilities `createuser` and `createdb`. 74 | 75 | 76 | ### `createuser` 77 | 78 | While you don't need a separate user for each project, it is a good idea to create separate users. You can do that as follows: 79 | 80 | ``` 81 | $ createuser -P -s -e db_username 82 | ``` 83 | 84 | > This command creates a new postgres user called `db_username` with super privileges and prompts for a password. You can find out about more options using the `man createuser` command. 85 | 86 | ### `createdb` 87 | 88 | Each project will need a separate database. You can create the database as follows: 89 | 90 | ``` 91 | $ createdb -h localhost -U db_username MYAPPNAME_development 92 | ``` 93 | 94 | > This command creates a database named `MYAPPNAME_development` that is owned by `db_username` and can only be accessed via `localhost` 95 | 96 | - You should change `MYAPPNAME` to your project name 97 | - It is good practice to add `_development` or `_production` so that we know if the database contains dev data or customer data. 98 | - You will need the database _name_, _username_, and _password_ to connect your apps to the database. 99 | 100 | 101 | ## Additional Resources 102 | 103 | * [Postgres Guide](http://postgresguide.com/) 104 | * [How to install and use Postgresql on Ubuntu](https://www.digitalocean.com/community/tutorials/how-to-install-and-use-postgresql-on-ubuntu-16-04) 105 | * [How to install Postgresql on the Mac](https://launchschool.com/blog/how-to-install-postgresql-on-a-mac) 106 | -------------------------------------------------------------------------------- /guides/installing-virtual-box-guest-additions.md: -------------------------------------------------------------------------------- 1 | # Installing VirtualBox Guest Additions 2 | 3 | After installing your virtual machine you may have noticed that it has a very low resolution and it is not stretching to use your entire displays resolution and space. VirtualBox provides the **Guest Additions** tools to allow guest virtual machines to _auto-resize their display_ dynamically, and they also enable other features like _dragging and dropping_ files and _copying and pasting_ across virtual machines. The steps below will guide you through installing the Guest Addition tools. 4 | 5 | - Launch your Virtual Machine 6 | - In the Virtual Box menu select 7 | + `Devices` > `Insert Guest Additions CD Image` 8 | - This will mount the VBoxAddition Tools CD in your virtual machine. When you open it you should see something like the following: 9 | + ![VBoxAdditions folder](images/VBOXADDITIONS.png) 10 | - Take note of the folder name (_it will be different from mine_) and the file `VBoxLinuxAdditions.run`. You will need these two to install the tools. 11 | - Open a terminal and change directory into the folder you noted and install the tools as follows: 12 | + `cd /media/USERNAME/VBOXADDITIONS_5.x.x_yyyyy` 13 | + `sudo ./VBoxLinuxAdditions.run` 14 | + ![VBoxAdditions installation](images/vbox-terminal.png) 15 | - Once installation is complete, restart the virtual machine (_do a full Shutdown_). 16 | - When the virtual machine restarts, it should automatically resize the virtual machine resolution when you stretch the window or go full screen. (Make sure you login) 17 | + _NOTE:_ If at this point the virtual machine is not resizing, check the `View` menu and verify that the `Auto-resize Guest Display` option is selected. 18 | 19 | -------------------------------------------------------------------------------- /guides/javascript.md: -------------------------------------------------------------------------------- 1 | # JavaScript Guide 2 | 3 | ## About JavaScript (ECMAScript, abbreviated ES) 4 | 5 | JavaScript (JS) is a rapidly evolving language and today's web applications depend on it. JavaScript is the only programming language supported across all modern web browsers, making it a critical technology for any web application. But since the release of Node.js, it has also gained wide adoption as a general and server-side language. JavaScript has also become the scripting language of choice for various non-web platforms, like the MongoDB database and [many more platforms](https://en.wikipedia.org/wiki/JavaScript#Uses_outside_Web_pages). 6 | 7 | The "JavaScript" name is trademarked by the Oracle Corporation. When you work with JavaScript you will also often read and hear the term "ECMAScript" or ES. ECMAScript refers to the languages standardized specification set by the [ECMA-International](http://www.ecma-international.org/) group. The ES abbreviation is commonly used to denote which version of the JavaScript language we are using. 8 | 9 | ## Some terms and acronyms to know 10 | 11 | - **ES5** 12 | + is the version of JavaScript that was published in 2009. It is currently *FULLY* supported by all major web browsers, and most books and resources written before 2015 use this version of JavaScript code. 13 | + For programmers, it is still important to understand how ES5 works since so much code in ES5 already exists, and it can be used simultaneously with the new ES6 syntax, which can often be confusing. 14 | - **ES6 (ES2015)** 15 | + is the modern version of JavaScript published in 2015. ES6 was a _major_ update to the JavaScript language, it not only substantially changed the syntax of the language, but it also changed the behavior of various features, and has led to a new set of best practices and conventions for programming in JavaScript. 16 | + ES6 (as of mid 2017) is almost fully supported in modern browsers and Node.js. There are some features (module loading) which are not yet fully supported. 17 | + For programmers it is best practice to use ES6 as it will ensure applications will be maintainable going forward. But for businesses, it is crucial to support as many browsers as possible, to reach as many customers/users as possible. For this reason, the community has developed compilers (really transpilers that convert code) that convert ES6 to valid ES5 that can run in all currently supported browsers. The most popular ES6 compiler is [*Babel.js*](https://babeljs.io/). 18 | - **ES7/8/Next (ES2016/2017)** 19 | + Since the publication of ES6, and its massive adoption, new features are being proposed and finalized at a faster pace. The changes in these new versions are much smaller than the ES5 to ES6 update, and often are already available in new browser and Node.js versions. 20 | - **_"Vanilla JavaScript"_ or Core JavaScript** 21 | + refers to the syntax, expressions, statements, control flow, loops, the data types, and typing system for computing. This includes how to define objects and functions and their use. It does not refer to any API's or host environments for accessing inputs and producing outputs. The host environments determines which inputs a JS program is allowed to receive, and what outputs it is allowed. The two primary JS host environments we will work with are the Web Browser (on the client-side) and in Node.js (on the server-side). 22 | - **Client-Side JavaScript** 23 | + refers to JS programs that run within a Web Browser window. In this mode, the browser only provides API's for the language to access the document within the window (through the **DOM**: Document Object Model) and resources related to the document such as cookies. It does not allow programs to access other browser windows or any hardware resources on the computer. 24 | - **Server-Side JavaScript** 25 | + refers to JS programs that run within a runtime that provides programs API's to access hardware and file resources on the computer such as the filesystem, networking sockets, keyboard, sound, cameras, etc. For this reason, runtime's like Node.js have become very popular for Web Application development as well as development on IoT devices and microprocessors such as Arduino's. 26 | - **[Node.js](https://nodejs.org/en/)** 27 | + is the most popular runtime for running JavaScript on the server. 28 | - **V8 (JavaScript) Engine** 29 | + an open source JavaScript engine developed by Google to speed up JS performance, by compiling JS code into native machine code. It is used by various JS runtimes (such as the Chrome Browser, Node.js, MongoDB, etc.). The runtimes are responsible for adding the environment API's that JS programs are given access to. 30 | - **NPM: Node Package Manager** 31 | + `npm` is the node command line tool used to create projects and to download 3rd party packages available on https://www.npmjs.com/. 32 | 33 | 34 | ## Resources and Documentation 35 | 36 | 37 | ### Language Documentation 38 | 39 | - MDN (Mozilla Developer Network) Web Docs 40 | + https://developer.mozilla.org/en-US/docs/Web/JavaScript 41 | + Documentation for the Core Language and Client-side (Web Browser) API's. 42 | + DOM API: 43 | * https://developer.mozilla.org/en-US/docs/Web/API/Document 44 | + _Hint:_ When searching google prefix your search with "mdn javascript", such as "mdn javascript array" 45 | - Node Documentation (Server-Side Node.js API's) 46 | + https://nodejs.org/en/docs/ 47 | 48 | 49 | ### Books 50 | 51 | - [Eloquent JavaScript, 3rd Edition](https://eloquentjavascript.net/index.html) 52 | + An easy to read book for new JavaScript programmers, but also contains great descriptions of more advanced topics 53 | + Core JavaScript: Chapters: 1-6, and 6-11 54 | + Optional/Advanced sections: 55 | * Chapter 6 is important, but you can skim: Symbols, The Iterator Interface, Inheritance 56 | * Chapter 8 57 | * Chapter 9 58 | - [You Don't Know JS - Book Series](https://github.com/getify/You-Dont-Know-JS) 59 | + Various free books on specific JS topics 60 | - For advanced books on JavaScript I recommend [Dr. Axel Rauschmayer's Books](http://exploringjs.com/) 61 | + For ES6: http://exploringjs.com/es6.html 62 | 63 | ## Resources for Learning ES6 when you already know ES5 64 | 65 | ### Video Courses 66 | 67 | - [ES2015 Crash Course](https://laracasts.com/series/es6-cliffsnotes) 68 | + Only watch Episodes 3-10, 13-15, 17 69 | + This video course does a great job at comparing ES5 vs ES6 features and syntax. 70 | + **Note:** The videos sometimes reference _PHP, Laravel, Vue, and other technologies_ which you may not be familiar with. For those parts, focus on how the ES6 syntax works and ignore the details of those specific technologies since we won't be using them. 71 | 72 | 73 | ### Quick Listings of ES6 changes 74 | 75 | - [ES6: New Features and Comparisons](http://es6-features.org/#Constants) 76 | + Provides Code Samples for quick reference of ES5 to ES6 changes 77 | - [Learn ES2015 (from Babel.js website)](https://babeljs.io/learn-es2015/) 78 | + A brief overview of major changes and code samples 79 | + Try the Online REPL: https://babeljs.io/repl/ 80 | 81 | 82 | ### Checking ES6 Compatibility 83 | 84 | - ES6 Browser Support Table 85 | + https://kangax.github.io/compat-table/es6/ 86 | - ES6 Node Support 87 | + http://node.green/ 88 | 89 | -------------------------------------------------------------------------------- /guides/tech-interview-best-practices.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CUNYTechPrep/ctp2018/57314d0e19361e8422c9fe46e2092df98828fe14/guides/tech-interview-best-practices.pdf -------------------------------------------------------------------------------- /guides/technical-interview-prep.md: -------------------------------------------------------------------------------- 1 | # Technical Interview Preparation 2 | 3 | 4 | ## Start Here 5 | 6 | - What is an interview like? 7 | + [https://www.youtube.com/watch?v=2cf9xo1S134](https://www.youtube.com/watch?v=2cf9xo1S134) (Short 6min) 8 | + **WATCH THIS!** 9 | 10 | 11 | ## The technical interview process 12 | 13 | After you apply to a job, with an updated technical resume, companies that review and select your resume will begin contacting you to schedule interviews. While every company is different the process will roughly match the following: 14 | 15 | - **Screening** 16 | + The first interview is used as a baseline to determine if you make it to the next round of multiple interviews. 17 | + The screener may take the following forms 18 | * Online coding challenge (HackerRank like platforms) 19 | * Phone call plus Google Doc 20 | - you will code and talk with interviewer 21 | * Phone call only 22 | - to discuss your resume, experience, and/or basic technical knowledge 23 | - **Onsite / Multiple Interviews** 24 | + After the screener you will have ~3-5 interviews 25 | * 1 interview with Tech Lead/Management on team fit 26 | * 1 interview with engineer on System Design 27 | * 1-3 interviews with engineers on one or more of the following topics 28 | - Data Structure / Algorithms 29 | - System Design 30 | - Specific Technologies 31 | + Each interview will last ~45 minutes 32 | + The question styles are described in the next section (Exam/Q&A, Whiteboarding, or Code Review). 33 | - **Decision** 34 | + You will then receive an offer (talk with your career coaches about negotiating!) 35 | + or you may have follow up conversations with HR and Team Leads to find right team/fit. 36 | 37 | 38 | ### Interview question styles 39 | 40 | The style of interview questions roughly fit into the following 3 categories: 41 | 42 | - **Exam / Q & A** 43 | + In this type of interview your knowledge of a specific language and libraries may be tested. (Verbally or Written) 44 | + Your previous projects and experience may be discussed 45 | * _It is important that you have a clear narrative of the development of any project_. 46 | + Behavioral questions may be asked 47 | - **Whiteboarding** 48 | + In this type of interview you are asked to code on a whiteboard, paper, or Google Doc. 49 | * There is no compiler or syntax highlighting 50 | * The purpose is to see your thinking and planning process 51 | * Understand the depth of your knowledge 52 | * Determine your communication skills 53 | + The types of questions can be: 54 | * Data Structures / Algorithms / System Design 55 | - **Take home project and code review** 56 | + In this type of interview, you are given an assignment to complete ahead of time 57 | * You _should_ be provided clear instructions and minimum specs. 58 | * You _may_ be provided starter code. 59 | * You are given between 2-7 days to complete (manage expectation) 60 | + If your submission is approved you will be called in for a code review with an engineer. Be prepared to walk the engineer through your project and to discuss the following: 61 | * Your design decisions 62 | * Tradeoffs you made and why 63 | * Bugs that you or interviewer found 64 | * Plan for continuing 65 | * Considerations for improving security, performance, usability, etc... 66 | + After this review you may be asked to code an entirely new feature or project. 67 | + **Note:** This is becoming a more popular form of interview, especially for front-end and mobile development roles. 68 | 69 | 70 | ### What do employers want? 71 | 72 | When preparing for the technical interview it is important that you research the companies particular style of tech interviews. Whether you are talking to a person or not, it is important that you _'talk out'_ your thinking, in an automated computer test this could be done with brief comments in your code and your naming convention. 73 | 74 | Put yourself in the interviewers shoes: what would _you_ like in an employee? 75 | 76 | - Thought Process 77 | + Define the problem first 78 | + Find edge cases 79 | + Evaluate solution strategies 80 | * How do you eliminate/pick a strategy 81 | + Code organization and whiteboard/time use 82 | - Passion 83 | - Clear Communication 84 | + Verbal 85 | + Code 86 | - Confidence 87 | + to know when you're right and why 88 | + to know when you're wrong and why 89 | - Cultural Fit 90 | + Body Language 91 | + Confidence 92 | - Domain knowledge 93 | + For tech specific roles, proficiency in specific tech is required 94 | 95 | 96 | See this video for one companies perspective on the interview: https://devpost.com/thecommit/video-how-to-ace-your-technical-interviews 97 | 98 | 99 | ### Coding Challenges: What should I know? 100 | 101 | See these slides on [Technical Interview Best Practices](tech-interview-best-practices.pdf) for tips on acing the coding challenge. 102 | 103 | ## Resources 104 | 105 | A popular resource for preparing for tech interviews is the book _'Cracking the Code Interview'_ by Gayle Laakmann McDowell. Below are some (of the many) videos available based on the book and from the author. You can adapt and apply the strategies in any style of interview. 106 | 107 | - _Book:_ Cracking the Code Interview 108 | * By Gayle Laakmann McDowell 109 | - Presentations by Gayle: 110 | * [https://www.youtube.com/watch?v=aClxtDcdpsQ](https://www.youtube.com/watch?v=aClxtDcdpsQ) (Short 9min) 111 | * [https://www.youtube.com/watch?v=Eg5-tdAwclo](https://www.youtube.com/watch?v=Eg5-tdAwclo) (Long 1hr 39min) 112 | - AMA (Ask Me Anything) with Gayle: 113 | * [https://www.youtube.com/watch?v=1fqxMuPmGak](https://www.youtube.com/watch?v=1fqxMuPmGak) (58min) 114 | - Technical Resume tips: 115 | * [https://www.careercup.com/resume](https://www.careercup.com/resume) 116 | 117 | 118 | ### Coding Challenge Practice 119 | 120 | For coding challenge practice I recommend the following resources (_but do them on a whiteboard or paper before you type it into the computer_): 121 | 122 | - https://leetcode.com/ 123 | + An excellent resource of free problems. Clearly written descriptions. 124 | - https://www.hackerrank.com/ 125 | + A popular platform that companies use, _get to know it!_ The descriptions are _verbose_ and take some getting used to. 126 | - https://projecteuler.net/ 127 | + Mostly mathematical questions. Useful if you're looking for more computationally leaning work. 128 | -------------------------------------------------------------------------------- /lecture-notes/README.md: -------------------------------------------------------------------------------- 1 | _CUNY Tech Prep 2018-2019_ 2 | 3 | # Lecture Notes 4 | 5 | ## (August 28 - August 31) Week 1 6 | 7 | [Lecture Slides](lecture-01.pdf) 8 | 9 | [Development Environment Setup](../guides/development-environment-setup.md) 10 | 11 | [Week 01 Projects](https://github.com/CUNYTechPrep/week-01-projects) 12 | 13 | Topics: 14 | 15 | - Fall Semester Overview 16 | - Designing Web Apps 17 | - Review: HTML & CSS 18 | - Intro to Bootstrap 19 | 20 | ## (September 4 - September 7) Week 2 21 | 22 | _Wednesday Sept 5 is a Monday Schedule, if you need to switch sections please contact the Program Assistant, Silu_ 23 | 24 | [Lecture Slides](lecture-02.pdf) 25 | 26 | Topics: 27 | 28 | - React Intro 29 | 30 | ## (September 11 - September 14) Week 3 31 | 32 | _On Tuesday 9/11, CTP will have regular class. If you cannot make the Tuesday evening class, please contact Silu to reschedule your class._ 33 | 34 | [Lecture Slides](lecture-03.pdf) 35 | 36 | [Lecture Slides 2](lecture-03-part-2.pdf) 37 | 38 | [Week 03 Projects](https://github.com/CUNYTechPrep/week-03-projects) 39 | 40 | Topics: 41 | 42 | - Client-Server Communication 43 | + Parts of a URL 44 | + Understanding HTTP Request-Response 45 | - More React 46 | - `fetch(...)` 47 | 48 | ## (September 18 - September 21) NO CLASS 49 | 50 | _No CTP classes are scheduled, but various workshops, events, and mock interviews will be taking place throughout the week._ 51 | 52 | 53 | - Review React 54 | - Do Week 03 projects 55 | 56 | ## (September 25 - September 28) Week 4 57 | 58 | Topics: 59 | 60 | - React 61 | - `fetch(...)` 62 | 63 | 64 | ## (October 2 - October 5) Week 5 65 | 66 | [Lecture Slides](lecture-04.pdf) 67 | 68 | [Week 04 Projects](https://github.com/CUNYTechPrep/week-04-projects) 69 | 70 | Topics: 71 | 72 | - Fullstack Review: Frontend vs Backend 73 | - About `npm` 74 | - Building a backend with Express.js 75 | + Routing 76 | + Route Parameters 77 | + Query Parameters 78 | + Body Parameters 79 | - RESTful Routing 80 | 81 | ## (October 9 - October 12) Week 6 82 | 83 | [Lecture Slides](lecture-05.pdf) 84 | 85 | [Week 05 Projects](https://github.com/CUNYTechPrep/week-05-projects) 86 | 87 | Topics: 88 | 89 | - SDLC 90 | - MVC (Project Structure) 91 | - Databases and Data Modeling 92 | - ORM's (Sequelize.js) 93 | - Views and Templates (Handlebars) 94 | -------------------------------------------------------------------------------- /lecture-notes/lecture-01.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CUNYTechPrep/ctp2018/57314d0e19361e8422c9fe46e2092df98828fe14/lecture-notes/lecture-01.pdf -------------------------------------------------------------------------------- /lecture-notes/lecture-02.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CUNYTechPrep/ctp2018/57314d0e19361e8422c9fe46e2092df98828fe14/lecture-notes/lecture-02.pdf -------------------------------------------------------------------------------- /lecture-notes/lecture-03-part-2.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CUNYTechPrep/ctp2018/57314d0e19361e8422c9fe46e2092df98828fe14/lecture-notes/lecture-03-part-2.pdf -------------------------------------------------------------------------------- /lecture-notes/lecture-03.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CUNYTechPrep/ctp2018/57314d0e19361e8422c9fe46e2092df98828fe14/lecture-notes/lecture-03.pdf -------------------------------------------------------------------------------- /lecture-notes/lecture-04.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CUNYTechPrep/ctp2018/57314d0e19361e8422c9fe46e2092df98828fe14/lecture-notes/lecture-04.pdf -------------------------------------------------------------------------------- /lecture-notes/lecture-05.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CUNYTechPrep/ctp2018/57314d0e19361e8422c9fe46e2092df98828fe14/lecture-notes/lecture-05.pdf --------------------------------------------------------------------------------