Notes for Class No. 3

Discussion of Project Planning Statuses and Getting Started with MEAN

Tuesday, January 26, 2016

A video of this class is (or will be) posted at: http://echo360.uml.edu/heines2016/comp4620-201.html

Handouts and Materials

Openings / Announcements / Reminders

As of 8:45 AM this morning (Tuesday, January 26th), 36 of the 39 students enrolled in this course had completed the form at:

https://docs.google.com/forms/d/166cx_uRhYJ24qoI-zMrs1dpWVyOw5iloQ-ojjF41lv4/viewform

if you’re one of the 3 who has not, please do so immediately

Also remember to set your Piazza Account/Email Settings under Edit Email Notification:

select Real Time under both “For new Questions or Notes” and “For updates to Questions or Notes you follow”
in addition, check the Automatically follow every question and note checkbox
then click the Save Settings button

Article posted by Curran Kelleher

https://data.triplebyte.com/who-y-combinator-companies-want-c1880a08ac88#.3wrgrd9i3

As asked on Piazza: What is a “Y Combinator company”?

Y Combinator is an American seed accelerator, started in March 2005. Forbes has found YC to be the most commercially successful seed accelerator in the world. [Wikipedia]
Wired magazine has called Y Combinator a “boot camp for startups” and “the most prestigious program for budding digital entrepreneurs.” [Wikipedia]
An accelerator and venture capital company that does seed, early stage venture, and debt financing investments. [CrunchBase]
https://www.ycombinator.com
Thus, a “Y Combinator company” is a company whose founders or leaders have been supported by Y Combinator.

Patterns observed in their study

There’s more demand for product-focused programmers than there is for programmers focused on hard technical problems.
(Almost) everyone dislikes enterprise programmers.

We don’t agree with this. ... But it’s what our data shows.

Experience matters massively.

Conclusions

YC Startups disagree strikingly about who’s a good engineer.
Each company brings a complex mix of domain requirements, biases, and recruiter preferences. Some of these factors make a lot of sense, others less so.
But all of them are frustrating for candidates, who have no way to tell what companies want.

Where do we stand on project ideas and partnerships?

who is not yet in a group?

Class Notes

Related reading for this class: Writing Handouts and GetMEAN: Chap. 3

Getting Started with MEAN — Textbook Ch. 3

“Express is a web application framework for Node. In basic terms, an Express application is simply a Node application that happens to use Express as the framework.” (p. 55)

Step 1: Installing the pieces

see Appendix A, p. 391, for instructions on installing all MEAN stack components
see Appendix B., p. 395, for instrictions on installing Git and setting up Heroku

Windows PowerShell Copyright (C) 2015 Microsoft Corporation. All rights reserved. PS C:\Users\Jesse> node --version v4.2.4 PS C:\Users\Jesse> npm --version 3.5.2 PS C:\Users\Jesse> express --version 4.12.4

Step 2: Create a project folder (p. 58)

PS C:\> mkdir jmhTest Directory: C:\ Mode LastWriteTime Length Name ---- ------------- ------ ---- d----- 1/24/2016 12:10 PM jmhTest PS C:\> cd jmhTest PS C:\jmhTest>

Step 3: Create the Express application (p. 59)

PS C:\jmhTest> express create : . create : ./package.json create : ./app.js create : ./public create : ./public/images create : ./public/javascripts create : ./public/stylesheets create : ./public/stylesheets/style.css create : ./routes create : ./routes/index.js create : ./routes/users.js create : ./views create : ./views/index.jade create : ./views/layout.jade create : ./views/error.jade create : ./bin create : ./bin/www install dependencies: > cd . && npm install run the app: > SET DEBUG=jmhTest:* & npm start

Step 4: Explore the directory structure

PS C:\jmhTest> tree Folder PATH listing for volume Judy2_C Volume serial number is ECAE-82D1 C:. ├───bin ├───public │ ├───images │ ├───javascripts │ └───stylesheets ├───routes └───views PS C:\jmhTest> dir Directory: C:\jmhTest Mode LastWriteTime Length Name ---- ------------- ------ ---- d----- 1/24/2016 12:11 PM bin d----- 1/24/2016 12:11 PM public d----- 1/24/2016 12:11 PM routes d----- 1/24/2016 12:11 PM views -a---- 1/24/2016 12:11 PM 1430 app.js -a---- 1/24/2016 12:11 PM 325 package.json

Step 5: Explore the package.json file (pp. 55-60)

PS C:\jmhTest> type .\package.json { "name": "jmhTest", "version": "0.0.0", "private": true, "scripts": { "start": "node ./bin/www" }, "dependencies": { "body-parser": "~1.12.4", "cookie-parser": "~1.3.5", "debug": "~2.2.0", "express": "~4.12.4", "jade": "~1.9.2", "morgan": "~1.5.3", "serve-favicon": "~2.2.1" } }

what is the format of this file? why?
the first part contains various metadata defining the application
the second part lists the dependencies needed for the application to run
- dependency versions are specified as: Major.Minor.Patch
- “Prefixing the whole version number with a ~ is like replacing the patch version with a wildcard, which means that the application will use the latest patch version available. This is considered best practice, ...” (p. 56)

Step 6: Installing Node dependencies with npm

PS C:\jmhTest> npm install jmhTest@0.0.0 C:\jmhTest ├─┬ body-parser@1.12.4 │ ├── bytes@1.0.0 │ ├── content-type@1.0.1 │ ├── depd@1.0.1 │ ├── iconv-lite@0.4.8 │ ├─┬ on-finished@2.2.1 │ │ └── ee-first@1.1.0 │ ├── qs@2.4.2 │ ├─┬ raw-body@2.0.2 │ │ └── bytes@2.1.0 │ └─┬ type-is@1.6.10 │ ├── media-typer@0.3.0 │ └─┬ mime-types@2.1.9 │ └── mime-db@1.21.0 ├─┬ cookie-parser@1.3.5 │ ├── cookie@0.1.3 │ └── cookie-signature@1.0.6 ├─┬ debug@2.2.0 │ └── ms@0.7.1 ├─┬ express@4.12.4 │ ├─┬ accepts@1.2.13 │ │ └── negotiator@0.5.3 │ ├── content-disposition@0.5.0 │ ├── cookie@0.1.2 │ ├── escape-html@1.0.1 │ ├─┬ etag@1.6.0 │ │ └── crc@3.2.1 │ ├── finalhandler@0.3.6 │ ├── fresh@0.2.4 │ ├── merge-descriptors@1.0.0 │ ├── methods@1.1.2 │ ├── parseurl@1.3.1 │ ├── path-to-regexp@0.1.3 │ ├─┬ proxy-addr@1.0.10 │ │ ├── forwarded@0.1.0 │ │ └── ipaddr.js@1.0.5 │ ├── range-parser@1.0.3 │ ├─┬ send@0.12.3 │ │ ├── destroy@1.0.3 │ │ └── mime@1.3.4 │ ├── serve-static@1.9.3 │ ├── utils-merge@1.0.0 │ └── vary@1.0.1 ├─┬ jade@1.9.2 │ ├── character-parser@1.2.1 │ ├── commander@2.6.0 │ ├─┬ constantinople@3.0.2 │ │ └── acorn@2.7.0 │ ├─┬ mkdirp@0.5.1 │ │ └── minimist@0.0.8 │ ├─┬ transformers@2.1.0 │ │ ├─┬ css@1.0.8 │ │ │ ├── css-parse@1.0.4 │ │ │ └── css-stringify@1.0.5 │ │ ├─┬ promise@2.0.0 │ │ │ └── is-promise@1.0.1 │ │ └─┬ uglify-js@2.2.5 │ │ ├─┬ optimist@0.3.7 │ │ │ └── wordwrap@0.0.3 │ │ └─┬ source-map@0.1.43 │ │ └── amdefine@1.0.0 │ ├── void-elements@2.0.1 │ └─┬ with@4.0.3 │ ├── acorn@1.2.2 │ └── acorn-globals@1.0.9 ├─┬ morgan@1.5.3 │ └── basic-auth@1.0.3 └── serve-favicon@2.2.1

Understanding the workflow (p. 60)

create an HTML template that includes placeholders for data
pass it some data

the template engine compiles these two together to generate HTML that is sent to the browser to render
example: the Teaching page on my website

Understanding Jade (p. 60)

Jade does not contain any HTML tags
instead, it uses “tag names, indentation, and a CSS-inspired reference method”
if a tag name is omitted, Jade assumes you want a DIV tag
“Jade templates must be indented using spaces, not tabs!”

Example Jade code

#banner.page-header
  h1 My page
  p.lead Welcome to my page

Resultant HTML output

<div id="banner" class="page-header">
  <h1>My page</h1>
  <p class="lead">Welcome to my page</p>
</div>

Step 7: Testing the project (p. 61)

make sure you are in the topmost directory of your application

PS C:\jmhTest> npm start > jmhTest@0.0.0 start C:\jmhTest > node ./bin/www

open your browser and enter localhost:3000 in the address bar

Step 8: Using nodemon (p. 64)

install nodemon via npm

PS C:\jmhTest> npm install -g nodemon npm WARN optional dep failed, continuing fsevents@1.0.6 C:\Users\Jesse\AppData\Roaming\npm\nodemon -> C:\Users\Jesse\AppData\Roaming\npm\node_modules\nodemon\bin\nodemon.js nodemon@1.8.1 C:\Users\Jesse\AppData\Roaming\npm\node_modules\nodemon ├── undefsafe@0.0.3 ├── es6-promise@3.0.2 ├── debug@2.2.0 (ms@0.7.1) ├── touch@1.0.0 (nopt@1.0.10) ├── minimatch@3.0.0 (brace-expansion@1.1.2) ├── ps-tree@1.0.1 (event-stream@3.3.2) ├── lodash.defaults@3.1.2 (lodash.restparam@3.6.1, lodash.assign@3.2.0) ├── update-notifier@0.5.0 (is-npm@1.0.0, semver-diff@2.1.0, chalk@1.1.1, string-length@1.0.1, repeating@1.1.3, configstore@1.4.0, latest-version@1.0.1) └── chokidar@1.4.2 (path-is-absolute@1.0.0, inherits@2.0.1, glob-parent@2.0.0, async-each@0.1.6, is-glob@2.0.1, is-binary-path@1.0.1, readdirp@2.0.0, anymatch@1.3.0)

then type nodemon in the topmost directory of your application

PS C:\jmhTest> nodemon [nodemon] 1.8.1 [nodemon] to restart at any time, enter `rs` [nodemon] watching: *.* [nodemon] starting `node ./bin/www`

open your browser and enter localhost:3000 in the address bar as before
the only difference is that when you change a file, Node will restart automagically

JMH Learning Tricks

Add your name to the views/index.jade file
extends layout block content h1= title p Welcome to # {title} p Jesse Heines
Add a timestamp as a page footer

// File: C:\jmhTest\views\layout.jade // Jesse M. Heines, UMass Lowell Computer Science, heines@cs.uml.edu // Copyright (c) 2016 by Jesse M. Heines. All rights reserved. May be freely // copied or excerpted for educational purposes with credit to the author. // updated by JMH on January 24, 2016 at 10:28 PM doctype html html head title= title link(rel='stylesheet', href='/stylesheets/style.css') body block content // added by JMH on December 31, 2015 at 11:07 AM // see http://jade-lang.com/reference/attributes/ for parenthesis syntax for attributes // see http://stackoverflow.com/questions/5219317/how-can-i-set-thickness-of-horizontal-rule-in-html // for specifying the thickness of a horizontal rule (hr) via CSS hr(style='margin-bottom: 5px ; border: 1px solid lightgray') // added by JMH on December 29, 2015 at 1:03 PM // http://stackoverflow.com/questions/5858218/how-can-i-render-inline-javascript-with-jade script. document.writeln( "<p style='text-align: center ; margin-bottom: 0'>" + new Date() + "</p>" ) ; hr(style='margin-top: 5px ; border: 1px solid lightgray')

note that Jade comments can only be written in // style

Assignment No. 1 Expectations

Review of Assignment No. 1 requirements

Balsamiq Mockups — GUI design tool

overview on YouTube
https://umasslowellcs.mybalsamiq.com/projects
- invitations should have been sent to you from the site
- this is the trial version, and access will expire in 30 days
- thus, it is important to do screen captures on whatever you create

For Macs, 2014 student Rob Cadwallader recommends OmniGraph

the download is a .dmg file, so it does not work on Windows
I believe the download is a 14-day trial version, but I’m not sure

Writing Expectations — Using Word Like a CS Major

page settings

title page
headers and footers
- numbering pages
automatic generation of tables of contents

using styles

paragraph settings

lines per inch
indentation
space after
justification
borders and shading
widow line control
- “keep line with next”
- widow heads

using lists

bulleted
numbered
outline numbered

proper use of fonts

point size

proper use of spaces and tabs

types of tabs
dots and lines
adjusting default settings

inserting and manipulating graphics

working with screen captures
labeling tables and figures

inserting and numbering code

citing references

UMass Lowell Dept. of Computer Science

COMP 4620 — GUI Programming II

Spring 2016 Semester, Section 201

Prof. Jesse M. Heines