Learning resources

This page has information about and links to learning resources that you will use in this course.

Previous courses

For Seneca students, this is a pro option course in the web programming field of study.

Therefore, continue to use the content from the courses that you have successfully completed:

BTI225 (or WEB222) - Web Programming Principles
BTI325 (or WEB322) - Web Programming Tools and Frameworks
BTI425 (or WEB422) - Web Programming for Apps and Services

Developer tools

Visual Studio Code (info, download)
- Getting started docs
Browsers (current versions of Chrome, Firefox, Safari, Opera, Edge)
Browser dev tools
HTTP inspector (e.g. Postman)
Plunker
jsFiddle
jsBin
Other dev tools will be introduced as we make progress through the weekly topics

You will need one or more devices. A College or personal desktop or laptop, and (likely) a personal mobile device (e.g. a smartphone).

This document introduces you to Postman, and has how-to getting started info.

Use macOS or Linux

We expect the student to do their work on a computer that runs macOS (Mac OS X), Linux, or another Unix-like operating system.

If a student has a Windows 10 computer, then plan to install one of the following:

a multiboot or virtualization environment that enables the installation of Linux
Windows Subsystem for Linux, and one of the distros from the Microsoft Store

Required textbook

None. This is a web programming course therefore, the best source for content is on the web!

Required online resources

There are several required online resources:

The Mozilla Developer Network MDN Web Docs web site is vast, with thousands of documents. It is a trusted and authoritative source for web developer information. Of interest:
HTML5 Guide, including HTML Forms Guide, and the HTML5 Element List
CSS Reference
JavaScript Reference
- JavaScript Reference
- (Also suggested) You Don’t Know JavaScript
DOM Reference

In October 2017, Microsoft, Google, and the W3C committed to making MDN Web Docs the single authoritative source for web developer documentation.
Read more about this in an article by Ali Spivak.

Others:

Bootstrap (version 3) CSS documentation
Links to other topics (e.g. Getting started, etc.) are on that page
Third-party (formden) Guide: Bootstrap Forms by Example
Official Angular Documentation
Angular CLI videos on YouTube, by Codevolution
Node Reference
- Node.js Documentation
- (Suggested) nodejitsu
Express.js Documentation
TypesScript Reference

Oh, and you should must know (and love!) the series of RFCs that describe HTTP, 7230 through 7235. If you want a friendlier introduction to HTTP, read its Wikipedia article.

Other resources

W3C Standards
Google web developers content
Angular 4: From Theory to Practice - Asim Hussain (free!)
Beginning Angular 2 - Greg Lim

Front end frameworks

Angular (which is NOT AngularJS, a legacy technology)

Alternatives:

React
Vue
and many others…

State management

HTML and CSS

CSS Selectors - MDN
CSS Attribute Selectors - MDN

Visual Studio Code tips and info

Start VS Code from the command line

Make sure that you’re in your project folder.
Then type this command: code .

Note: This assumes that your computer is configured to run this command. See the Running VS Code on Mac to configure that feature.

Useful keyboard shortcuts (macOS)

Task	Keyboard shortcut
Trigger IntelliSense	`Control + Space`
Toggle comments on/off	`Command + /`
Reformat document	`Shift + Option + Command + F`
Show/hide left-side bar	`Command + B`
Show/hide terminal	`Control + (back-tick)`
Markdown preview pane toggle on/off	`Command + K, V`

A full list of keyboard shortcuts in a nice printable format is here:

For macOS
For Linux
For Windows

Useful Emmet snippets for HTML

For most elements, just begin typing the element name, without the angle bracket.

Emmet snippet	Task
`.`	Declare class(es), e.g. `div.row`
`#`	Declare unique identifier, e.g. `table#customers`
`>`	Child, e.g. `div>p`
`*`	Multiplier, e.g. `ul>li*5`
`( )`	Grouping, often used with multiplier
`+`	Sibling, e.g. `div>h3+p*3`
`{blahblah}`	Text content for an element, e.g. `h3{Hello, world!}`
`[`	Custom attribute, e.g. `span[data-bind`

See the Emmet cheat sheet for full coverage.

Other tooling tips

npm

What version of an npm package is installed?

# All globally-installed packages
npm list -g

# One specific globally-installed package
npm list -g express

# While in the root of a project, one specfic package
npm list express

Heroku and its CLI

Heroku Dev Center, documentation:
Heroku CLI Usage

If you attempt to do this:
git push heroku master
…and it generates an error, then verify that your project knows its remote destination (i.e. its hosting Heroku app):
git remote -v
If it does know its remote destination, then you can set/fix it. As described and shown here, this command will set the remote to an existing Heroku app named “foo-bar-app”:
heroku git:remote -a foo-bar-app

MongoDB

Various commands:

# Is the database engine installed?
mongod --version

# Is the command shell installed?
mongo --version

# Start the database engine
mongod --dbpath [path-to-database-folder]