├── .gitignore ├── README.md ├── assignments ├── README.md ├── first_project_presentation_template.pdf ├── individual-project-proposal.md ├── team-project-design.md └── team-project-proposal.md ├── guides ├── README.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-react-fetch.pdf ├── lecture-03.pdf ├── lecture-04.pdf ├── lecture-05.pdf ├── lecture-08.pdf ├── lecture-09.pdf └── orientation-dev-setup.md └── spring-2018 ├── README.md └── project_proposal.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CUNY Tech Prep 2017-2018 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 2017-2018_ 2 | 3 | # Assignments 4 | 5 | 6 | ## Summer Assignments 7 | 8 | 9 | ### 01: Review HTML, CSS, JavaScript, and Git 10 | 11 | **Due July 21, 2017** 12 | 13 | - Sign in to codecademy.com with your assigned username 14 | + Change your password 15 | + (_Note:_ you can find your assigned username and inital password in your emails and on Slack) 16 | + (If you already have completed the course under a different Codecademy username, please provide that to Edgardo Molina or Elise Harris via Slack) 17 | - Complete the following courses by the due date: 18 | + Learn HTML & CSS 19 | + Learn Responsive Design 20 | + Learn JavaScript 21 | - Once you are done with the above 3 courses, proceed to the following 22 | + Learn Git 23 | + Learn SQL 24 | 25 | On Monday July 10, 2017, you will receive a HackerRank Quiz invite. Open that up only after you have completed the 3 courses on HTML & CSS, Responsive Design, and JavaScript. 26 | 27 | ### 02: Git Basics, More JavaScript, ES5 vs ES6 28 | 29 | **Due August 13, 2017** 30 | 31 | - Complete the **Learn Git** course in codecademy.com 32 | + _if you haven't completed it already_ 33 | + For more resources, look at the [Git and Github Guide](../guides/git.md) 34 | - JavaScript Exercises 35 | + In the free [Eloquent JavaScript](http://eloquentjavascript.net/index.html) book, do the exercises below. You can run the code directly within the browser, but note that your solutions will **NOT** be saved. **Make sure to copy your solutions and save them to a file. You will be submitting your solutions to these exercises at a later date. (Instructions will be sent out shortly)** 36 | + Chapter 4: 37 | * The sum of a range 38 | * Reversing an array 39 | * A List 40 | * Deep comparison 41 | + Chapter 5: 42 | * Flattening 43 | * Mother-child age difference 44 | * Historical life expectancy 45 | + Chapter 13: 46 | * Build a table 47 | - Learn about ES6 (aka ES2015) 48 | + Watch the [ES2015 Crash Course](https://laracasts.com/series/es6-cliffsnotes). 49 | * You only have to watch Episodes: 3-10, 13-15, and 17 50 | * This video course does a great job at comparing ES5 vs ES6 features and syntax. 51 | * **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. 52 | + For more JavaScript resources look at the [JavaScript Guide](../guides/javascript.md) 53 | - Follow the ES6 Tutorial here: https://github.com/CUNYTechPrep/es6-tutorial 54 | + Make sure you have completed the Learn Git course and watched the ES2015 Crash Course videos. 55 | 56 | 57 | ## Fall Assignments 58 | 59 | ### Individual Project Proposal 60 | **Due September 05, 2017** 61 | 62 | See the proposal requirements here: [Individual Project Proposal guidelines](individual-project-proposal.md) 63 | 64 | 65 | ### Team Project Proposal 66 | **Due Week of September 26-29, 2017** 67 | 68 | See the team proposal requirements here: [Team Project Proposal guidelines](team-project-proposal.md) 69 | 70 | ### Team Project Requirements and Design 71 | **Due date: (to be determined by your team mentor)** 72 | 73 | See the team requirements and design document here: [Team Project Requirements and Design](team-project-design.md) 74 | 75 | ### First Project Presentation 76 | **Presentations are during Week 9 classes: (10/24 - 10/27)** 77 | 78 | #### Presentation Guidelines 79 | 80 | - 10 minutes per team (5-7min _presentation_, 3-5min _Q&A_) 81 | - **All team members** must present at least one slide 82 | - See a presentation template here: [first_project_presentation_template.pdf](first_project_presentation_template.pdf) 83 | - Show a demo of _work in progress_ if you can 84 | 85 | #### What to submit 86 | 87 | - One presentation per team 88 | - Submit to your project mentor prior to week 9 class for feedback 89 | - You must be ready to present during Week 9 class 90 | 91 | ### Second Project Presentation 92 | **Presentations are during Week 14 classes: (12/05 - 12/08)** 93 | 94 | This second project presentation is meant to help you with your presentations for demo night. The guidelines for this presentation are the following: 95 | 96 | 1. I will impose a hard **5 minute time-limit** on presentations. (_Shorter is better_) 97 | 2. Start with a **30 second pitch** to explain your project and grab the audiences interest in your project. 98 | - Some starting points for developing this pitch are: _What is the problem? Who is the audience? What is the solution proposed? Why should I care?_ 99 | 3. Follow your pitch with a guided demo 100 | - **You are in control of the demo.** (Demo something that works.) 101 | - It is OK for your project to be a _work in progress_ (or not done yet!). 102 | - You can flesh out your demo's by adding images, forms, HTML elements, and data that are static and not yet implemented. This will fill your application pages, while giving the audience an idea of where the application is going in the future. 103 | 4. You may create one or two slides to go over any design or technical issue you want to discuss, but this is not necessary. (You can build a slide deck or video backup of your application in-case the demo breaks.) 104 | -------------------------------------------------------------------------------- /assignments/first_project_presentation_template.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CUNYTechPrep/ctp2017/f2c7a76d5d8367d73d25f7458327431647a728c9/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-4 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, by Week 3, 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 | Two 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/05/2017) 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 | -------------------------------------------------------------------------------- /assignments/team-project-design.md: -------------------------------------------------------------------------------- 1 | # Team Project Requirements and Design 2 | 3 | ## Project Technical Requirements 4 | 5 | All projects must be full stack applications that include a frontend and a backend developed in JavaScript. 6 | 7 | - Must haves: 8 | + Backend: Node.js, Express.js 9 | * Use MVC app structure 10 | + Frontend: React.js and/or Handlebars 11 | * Must produce HTML/CSS as output 12 | * Responsive design 13 | * JSON API is not enough 14 | + Database: Postgresql or MongoDB 15 | + Tests: Jest 16 | - The team and mentor will decide if the following are needed: 17 | + User authentication (passport.js) 18 | + Use a third party API 19 | * Google Maps 20 | * Twilio API's 21 | * Mail API's 22 | * Social Media API's 23 | 24 | ## Getting Started, Design, and Progress Tracking 25 | 26 | Many of you are new to developing full stack apps and may not know how to get started. For this reason, every team has been assigned a mentor that will help you with design and provide guidance on how to break up your projects into tasks. The mentor will check in with you weekly, and will help you set your goals, and check up on your progress. They will also tell you when certain portions of your project are due. 27 | 28 | In addition to your mentors, during week 6 we provided you: 29 | 30 | - [Backend Starter Code](https://github.com/CUNYTechPrep/week-06-projects/tree/master/backend-starter-code) you can use, 31 | - and as a class project, we [designed and began development of a Polling app](https://github.com/CUNYTechPrep/week-06-projects/), 32 | + For another example, take a look at design docs a team in last years class developed: https://github.com/FCingel/lift-off-fitness/blob/master/code/docs/Mockups%20%26%20Models.pdf 33 | 34 | use these as a guide for your own projects. In particular, take an agile approach to your design and implementation, start out with small core features, and add complexity as you go. 35 | 36 | -------------------------------------------------------------------------------- /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 26-29, before your section meeting. 33 | * **Submission Link:** 34 | - [https://www.dropbox.com/request/a9L4jYVbtkn5nEYllBLW](https://www.dropbox.com/request/a9L4jYVbtkn5nEYllBLW) 35 | - **IMPORTANT:** Name your files with your section number and a short team name: `section_#_TEAM_NAME.pdf` 36 | -------------------------------------------------------------------------------- /guides/README.md: -------------------------------------------------------------------------------- 1 | # Guides 2 | 3 | [Git and Github Guide](git.md) 4 | 5 | [JavaScript Resources Guide](javascript.md) 6 | 7 | [Technical Interview Preparation Guide](technical-interview-prep.md) 8 | 9 | - [Whiteboard Coding: Tech Interview Best Practices](tech-interview-best-practices.pdf) 10 | 11 | [Installing VirtualBox Guest Additions](installing-virtual-box-guest-additions.md) 12 | 13 | [Installing PostgreSQL](installing-postgresql.md) 14 | -------------------------------------------------------------------------------- /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 | - _NOTE_: The codecademy content is really high quality, but I ran into some bugs using the interface where the cursor constantly got lost. Closing and reopening the bash prompt would fix it. If you can't get through it, the other resources above cover the same things 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/ctp2017/f2c7a76d5d8367d73d25f7458327431647a728c9/guides/images/VBOXADDITIONS.png -------------------------------------------------------------------------------- /guides/images/vbox-terminal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CUNYTechPrep/ctp2017/f2c7a76d5d8367d73d25f7458327431647a728c9/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. Contains documentation for both ES5 and ES6. 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](http://eloquentjavascript.net/index.html) 52 | + Core JavaScript: Chapters: 1-6, 8 53 | + Browser and the DOM: Chapters: 12, 13, 14 54 | + This is an entry level book on ES5. It is very readable and allows you to interact with the code in the browser as you read. 55 | - [You Don't Know JS (ES6 & Beyond)](https://github.com/getify/You-Dont-Know-JS/tree/master/es6%20%26%20beyond) 56 | + Chapter 2, 3, 4, 5, and 6 57 | + This book assumes a good understanding of ES5. Goes more in depth into ES6 features and changes then the resources below. 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 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/ctp2017/f2c7a76d5d8367d73d25f7458327431647a728c9/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 2017-2018_ 2 | 3 | # Lecture Notes 4 | 5 | ## (June 27-29) Orientation Session 6 | 7 | Topics: 8 | 9 | - Program Introduction and review of onboarding material 10 | - Review professional development program 11 | - Development Environment Setup ([Notes](orientation-dev-setup.md)) 12 | 13 | ## (August 29 - September 1) Week 1 14 | 15 | [Lecture Slides](lecture-01.pdf) 16 | 17 | [Week 01 Projects repo](https://github.com/CUNYTechPrep/week-01-projects) 18 | 19 | Topics: 20 | 21 | - Fall Semester Overview 22 | - Review: ES6 & Eloquent JavaScript Problems 23 | - Designing Web Apps 24 | - Review: HTML & CSS 25 | - Intro to Bootstrap 26 | 27 | 28 | ## (September 5 - September 8) Week 2 29 | 30 | [Lecture Slides](lecture-02.pdf) 31 | 32 | [Week 02 Projects repo](https://github.com/CUNYTechPrep/week-02-projects) 33 | 34 | Topics: 35 | 36 | - Review ES6-Tutorial 37 | - React Intro 38 | 39 | ## (September 12 - September 15) Week 3 40 | 41 | [Lecture Slides 1](lecture-03.pdf) 42 | 43 | [Lecture Slides 2](lecture-03-react-fetch.pdf) 44 | 45 | [Week 03 Projects repo](https://github.com/CUNYTechPrep/week-03-projects) 46 | 47 | Topics: 48 | 49 | - Client-Server Communication 50 | + Parts of a URL 51 | + Understanding HTTP Request-Response 52 | - More React (with ES6) 53 | - `fetch(...)` and Promises 54 | 55 | ## (September 19 - September 22) Week 4 56 | 57 | [Lecture Slides](lecture-04.pdf) 58 | 59 | [Week 04 Projects repo](https://github.com/CUNYTechPrep/week-04-projects) 60 | 61 | Topics: 62 | 63 | - Fullstack Review: Frontend vs Backend 64 | - About `npm` 65 | - Building a backend with Express.js 66 | + Routing 67 | + Route Parameters 68 | + Query Parameters 69 | + Body Parameters 70 | - RESTful Routing 71 | 72 | 73 | ## (September 26 - September 29) Week 5 74 | 75 | [Lecture Slides](lecture-05.pdf) 76 | 77 | [Week 05 Projects repo](https://github.com/CUNYTechPrep/week-05-projects) 78 | 79 | Topics: 80 | 81 | - SDLC 82 | - Structuring your Project (MVC) 83 | - Databases and Data Modeling 84 | - ORM's and Sequelize.js 85 | - Views and Templates 86 | 87 | ## (October 3 - October 6) Week 6 88 | 89 | [Week 06 Projects repo](https://github.com/CUNYTechPrep/week-06-projects) 90 | 91 | Topics: 92 | 93 | - Using MVC app structure 94 | - Use Sequelize.js 95 | - How to design an app using: mockups, models, and routes 96 | 97 | ## (October 10 - October 13) Week 7 98 | 99 | [Authentication Demo](https://github.com/CUNYTechPrep/auth-demo) 100 | 101 | [Microblog (complete app)](https://github.com/CUNYTechPrep/ctp-microblog) 102 | 103 | Topics: 104 | 105 | - Implementing Authentication 106 | - Sessions 107 | - Passport.js, Bcrypt 108 | 109 | ## (October 17 - October 20) Week 8 110 | 111 | [Lecture Slides](lecture-08.pdf) 112 | 113 | Topics: 114 | 115 | - Testing (Jest) 116 | - Linting (ESLint) 117 | 118 | ## (October 24 - October 27) Week 9 119 | 120 | [First Project Presentations](https://github.com/CUNYTechPrep/ctp2017/tree/master/assignments#first-project-presentation) 121 | 122 | ## (October 31 - November 3) Week 10 123 | 124 | [Lecture Slides](lecture-09.pdf) 125 | 126 | Topics: 127 | 128 | - Code Reviews 129 | - Software Engineering Best Practices 130 | - [Resource link](http://web.mit.edu/6.005/www/fa16/classes/04-code-review/) 131 | 132 | ## (November 7 - November 10) Week 11 133 | 134 | _Lab Time_ 135 | 136 | ## (November 14 - November 17) Week 12 137 | 138 | _Lab Time_ 139 | 140 | ## (November 21 - November 24) THANKSGIVING BREAK 141 | 142 | 143 | ## (November 28 - December 1) Week 13 144 | 145 | _Lab Time_ 146 | 147 | ## (December 5 - December 8) Week 14 148 | 149 | [Second Project Presentation](https://github.com/CUNYTechPrep/ctp2017/tree/master/assignments#second-project-presentation) 150 | 151 | ## (December 13) DEMO NIGHT 152 | -------------------------------------------------------------------------------- /lecture-notes/lecture-01.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CUNYTechPrep/ctp2017/f2c7a76d5d8367d73d25f7458327431647a728c9/lecture-notes/lecture-01.pdf -------------------------------------------------------------------------------- /lecture-notes/lecture-02.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CUNYTechPrep/ctp2017/f2c7a76d5d8367d73d25f7458327431647a728c9/lecture-notes/lecture-02.pdf -------------------------------------------------------------------------------- /lecture-notes/lecture-03-react-fetch.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CUNYTechPrep/ctp2017/f2c7a76d5d8367d73d25f7458327431647a728c9/lecture-notes/lecture-03-react-fetch.pdf -------------------------------------------------------------------------------- /lecture-notes/lecture-03.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CUNYTechPrep/ctp2017/f2c7a76d5d8367d73d25f7458327431647a728c9/lecture-notes/lecture-03.pdf -------------------------------------------------------------------------------- /lecture-notes/lecture-04.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CUNYTechPrep/ctp2017/f2c7a76d5d8367d73d25f7458327431647a728c9/lecture-notes/lecture-04.pdf -------------------------------------------------------------------------------- /lecture-notes/lecture-05.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CUNYTechPrep/ctp2017/f2c7a76d5d8367d73d25f7458327431647a728c9/lecture-notes/lecture-05.pdf -------------------------------------------------------------------------------- /lecture-notes/lecture-08.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CUNYTechPrep/ctp2017/f2c7a76d5d8367d73d25f7458327431647a728c9/lecture-notes/lecture-08.pdf -------------------------------------------------------------------------------- /lecture-notes/lecture-09.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CUNYTechPrep/ctp2017/f2c7a76d5d8367d73d25f7458327431647a728c9/lecture-notes/lecture-09.pdf -------------------------------------------------------------------------------- /lecture-notes/orientation-dev-setup.md: -------------------------------------------------------------------------------- 1 | # Orientation Development Environment Setup 2 | 3 | During the orientation sessions we verified that all students were able to successfully setup one of the development environments described in the [pre-orientation setup notes](https://github.com/CUNYTechPrep/ctp-2017-pre-orientation). 4 | 5 | We then proceeded to do the following additional setup and review: 6 | 7 | - We reviewed basic command line commands 8 | - We learned how to use `apt-get` on Lubuntu and `brew` on Mac to install packages like `curl`. 9 | - We installed Git and performed its initial configuration 10 | - We installed Sublime Text 3 11 | - We installed NVM (Node Version Manager) and used that to install Node 12 | 13 | Below are all of the commands we ran during the orientation to achieve all of the setup and review. 14 | 15 | ## Basic Command Line Commands 16 | 17 | ### Open your terminal 18 | 19 | **Mac Users:** can press `CMD+SPACE` and type "terminal" to launch it. 20 | 21 | **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. 22 | 23 | ### Command History from the orientation session 24 | 25 | ```bash 26 | pwd 27 | ls 28 | mkdir projects 29 | cd projects 30 | ls 31 | touch hello.js 32 | ls 33 | ls -l 34 | cd .. 35 | ls -l 36 | ls -laF 37 | ll 38 | cd projects 39 | mkdir test 40 | ls 41 | mv hello.js test/hello2.js 42 | ls 43 | ls test 44 | cp test/hello2.js test/hello3.js 45 | ls test 46 | cd test 47 | rm hello2.js 48 | ls 49 | cd .. 50 | ls 51 | rm test # doesn't work 52 | rmdir test # doesn't work 53 | rm -r test # does work 54 | ls 55 | # careful running `rm -rf` commands 56 | ``` 57 | 58 | ### Command Descriptions 59 | 60 | `pwd`: print working directory 61 | 62 | `ls`: list directory 63 | 64 | `mkdir`: make directories 65 | 66 | `cd`: change working directory 67 | 68 | `touch`: change file timestamps, or create empty file if it doesn't exist. 69 | 70 | `ls -l`: use long format for directory listings 71 | 72 | `cd ..`: change to parent directory 73 | 74 | `mv`: move file command is used to both move and/or rename files 75 | 76 | `cp`: copy file command 77 | 78 | `rm`: remove file command 79 | 80 | 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. 81 | 82 | 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). 83 | 84 | 85 | ## Using Your Package Manager 86 | 87 | 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. 88 | 89 | 90 | **Mac Users:** 91 | 92 | 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. 93 | 94 | ```bash 95 | brew update 96 | brew install curl 97 | ``` 98 | 99 | **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. 100 | 101 | 102 | **Lubuntu Users:** 103 | 104 | The Debian/Ubuntu package manager is `apt-get`. Run the following commands to install the `curl` and `build-essential` packages. 105 | 106 | ```bash 107 | sudo apt-get update 108 | sudo apt-get install curl build-essential 109 | ``` 110 | 111 | **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. 112 | 113 | 114 | ## Git 115 | 116 | **Mac Users:** 117 | 118 | ```bash 119 | brew update 120 | brew install git 121 | ``` 122 | 123 | **Lubuntu Users:** 124 | 125 | ```bash 126 | sudo apt-get update 127 | sudo apt-get install git 128 | ``` 129 | 130 | ### One Time Configuration 131 | 132 | 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. 133 | 134 | ```bash 135 | git config --global user.name "First Last" 136 | git config --global user.email "my@email.com" 137 | 138 | git config --global push.default simple 139 | git config --global core.autocrlf input 140 | ``` 141 | 142 | #### Explanation of the final two commands 143 | 144 | ```bash 145 | git config --global push.default simple 146 | ``` 147 | 148 | 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. 149 | 150 | ```bash 151 | # mac/linux 152 | git config --global core.autocrlf input 153 | # windows only 154 | git config --global core.autocrlf true 155 | ``` 156 | 157 | 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`. 158 | 159 | 160 | ## Sublime Text 3 161 | 162 | You are free to use any text editor that supports JavaScript, such as: vim, emacs, Sublime Text, Atom, Textmate, Visual Studio Code. 163 | 164 | Below are instructions for the installation of the Sublime Text editor. 165 | 166 | **Mac Users:** 167 | 168 | 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. 169 | 170 | _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: 171 | 172 | ```bash 173 | ln -s /Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl /usr/local/bin/subl 174 | ``` 175 | 176 | **Lubuntu Users:** 177 | 178 | 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) 179 | 180 | ```bash 181 | # Install the GPG Key 182 | wget -qO - https://download.sublimetext.com/sublimehq-pub.gpg | sudo apt-key add - 183 | 184 | # Use the stable channel 185 | echo "deb https://download.sublimetext.com/ apt/stable/" | sudo tee /etc/apt/sources.list.d/sublime-text.list 186 | 187 | # Install Sublime Text 188 | sudo apt-get update 189 | sudo apt-get install sublime-text 190 | ``` 191 | 192 | `apt-get` will now be able to update sublime-text like any other package. 193 | 194 | The Sublime Text editor can now be launched with the `subl` command or via the application menu in Lubuntu. 195 | 196 | 197 | ## NVM and Node 198 | 199 | 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. 200 | 201 | ```bash 202 | # Mac users should run this command first 203 | touch ~/.bash_profile 204 | 205 | # Install nvm 206 | curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash 207 | 208 | # After nvm installs you should close your terminal and open a new one to access nvm 209 | 210 | # Verify that nvm is working 211 | nvm ls 212 | 213 | # Install the LTS node.js version 214 | nvm install 6.11.0 215 | 216 | # Install another node.js version 217 | nvm install 8.1.3 218 | 219 | # You are now using version 8.1.3, to switch back to 6.11.0 run 220 | nvm use 6.11.0 221 | 222 | # Run the node repl (read-eval-print loop) 223 | node 224 | ``` 225 | 226 | 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. 227 | 228 | **Exiting Node:** Press `ctrl+d` 229 | 230 | 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). 231 | 232 | 233 | -------------------------------------------------------------------------------- /spring-2018/README.md: -------------------------------------------------------------------------------- 1 | _CUNY Tech Prep 2017-2018_ 2 | 3 | # Lecture Notes 4 | 5 | ## (Jan 30-Feb 2) Week 1: Git Workflows and Project Discussions 6 | 7 | ## (Feb 6-9) Week 2: Interview Prep 1: Data Structures and Algorithms topics 8 | 9 | ## (Feb 13-16) Week 3: System Design Questions 1 10 | 11 | ## (Feb 20-23) Week 4: Interview Prep 2: Data Structures and Algorithms topics 12 | 13 | ## (Feb 27-Mar 2) Week 5: System Design Questions 2 14 | 15 | ## (Mar 6-9) Week 6: Interview Prep 3: Data Structures and Algorithms topics 16 | 17 | ## (Mar 13-16) Week 7: Advanced Web Development topics 1 18 | 19 | ## (Mar 20-23) Week 8: Advanced Web Development topics 2 20 | 21 | ## (Mar 27-30) Week 9: React.js Topics 22 | 23 | ## (Mar 30-Apr 8) SPRING BREAK 24 | 25 | ## (Apr 10-13) Week 10: Security OWASP Top 10 26 | 27 | ## (Apr 17-20) Week 11: Security OWASP Workshop 28 | 29 | ## (Apr 24-27) Week 12: TBA 30 | 31 | ## (May 1-4) Week 13: TBA 32 | 33 | ## (May 8-11) Week 14: TBA 34 | -------------------------------------------------------------------------------- /spring-2018/project_proposal.md: -------------------------------------------------------------------------------- 1 | # Spring Project Proposal 2 | 3 | For the Spring semester of CTP you can propose to build a project using any programming language and technology you wish, and the project areas are open to web, desktop, or systems applications. Your instructors will provide you feedback and will let you know if your project will be approved. 4 | 5 | You can work on the project individually or in a team of CTP students. Once your project is approved, a mentor will be assigned, and you will provide weekly check-ins to that mentor. At the end of the Spring semester there will be a Demo night where a select number of projects will be demoed. 6 | 7 | 8 | ## Project Proposal Guideline 9 | 10 | * **Due date:** February 13, 2018 11 | * **Submission Link:** coming soon 12 | 16 | 17 | _Your project proposals should include at least the first 4 sections._ 18 | 19 | 1) Project Name 20 | 2) Name (_include team members if any_) 21 | 3) Executive summary (1-2 paragraphs) 22 | - Pitch your project! What is it? Who uses it? Why does it matter? 23 | 4) Tech Stack 24 | - Which technologies will you use: 25 | + Programming language 26 | + Frameworks, Libraries, and Software (databases, servers, etc...) 27 | 5) Use Cases: 28 | - Give one or two examples of the most important usage (or interaction) scenarios for your application/program 29 | --------------------------------------------------------------------------------