From c89fad10e3d6662f8d4dd4710756659f8678a7e6 Mon Sep 17 00:00:00 2001 From: Jared Grippe Date: Fri, 24 Feb 2017 12:23:09 -0800 Subject: [PATCH 1/4] WIP --- .../000-beginner-web-app-architecture.md | 188 ++++++++++++++++++ 1 file changed, 188 insertions(+) create mode 100644 contracts/000-beginner-web-app-architecture.md diff --git a/contracts/000-beginner-web-app-architecture.md b/contracts/000-beginner-web-app-architecture.md new file mode 100644 index 00000000..de64fc9e --- /dev/null +++ b/contracts/000-beginner-web-app-architecture.md @@ -0,0 +1,188 @@ +--- +authors: + - deadlyicon +issueNumber: 000 +teamSize: 2 +--- + +# Beginner Web App Architecture + +## Learning Objectives + +In this goal you'll be working on the following skills + +- understanding the anatomy of a URL +- understanding the difference between a `get` and a `post` request +- understanding the request & response life cycle of HTTP +- using common HTTP status codes +- using common HTTP headers + +## Challenge Rating + +This goal will likely be within your ZPD if you... + +- can i dentify the parts of a URL +- can articulate the difference +- Item two + +## Description + +_Provide a brief, high-level overview of what the final product (artifact) of this goal is. Include any relevant resources or dependencies here._ + + +This Goal is broken up in to N stages. + + +### Setup + +0. Create a new repo +0. Copy this file into `README.md` +0. Make your first commit and push it up to Github + +### Stage 1 + +Setup a simple file server + +0. make a directory called `public` +0. Download this picture by running this command + - `curl https://raw.githubusercontent.com/reactjs/redux/master/logo/logo.png > ./public/logo.png` +0. create `./public/about.html` with the following content + + ```html + + + + + + + + +
+

About

+ +
+ + + ``` + +0. create `./public/style.css` with the following content + + ```css + html, body { + margin: 0; + padding: 0; + height: 100%; + width: 100%; + } + + .about-page { + padding: 1em; + text-align: center + } + + .about-page .panda-img{ + max-width: 90vw; + max-height: 90vh; + border: 10px solid black; + } + ``` + +0. run `npm install --global serve` +0. run `serve ./public` +0. goto http://localhost:3000/about.html in a browser + +At this point you should + +- [ ] see a picture of a panda +- [ ] the panda picture has a think black border +- [ ] the panda picture is centered horizontally +- [ ] the panda picture is never larger than the window + + +__Congratz!__ You've just made some static assets and served them using a simple HTTP server. + + +### Stage 2 + +In stage two were going to exploring relative vs absolute paths when linking to assets. + +0. make the directory `./public/blog` +0. create `./public/blog/my-first-blog-post.html` with the following content + + ```html + + + + + + + +
+

My First Blog Post

+

…is short and sweet

+
+ + + ``` +0. add the following css to your `style.css` file + + ```css + .blog-page { + max-width: 500px; + margin: 0 auto; + border-left: 3px solid blue; + border-right: 3px solid blue; + background-color: lightgrey; + padding: 1em 2em; + } + + .blog-page h1 { + color: blue; + } + ``` +0. goto http://localhost:3000/blog/my-first-blog-post.html in a browser + + +### Stage 2 + +Setup express as a simple file server + +### Stage 3 + +Move static HTML pages to express routes using a template + +### Stage 4 + +Track your visitors with cookies + +### Stage 5 + + + +## Context + +_Why is this goal important? How is it useful? What questions will it raise?_ + +## Specifications + +_List of specifications (specs) for the completed goal. These are declarative sentences (statements) describing a feature of the final product._ + +- [ ] Spec one. +- [ ] Spec two. +- [ ] Spec three. +- [ ] The artifact produced is properly licensed, preferably with the [MIT license][mit-license]. + +## Quality Rubric + +_What are some appropriate quality objectives for this goal? These are statements about the internal characteristics of the product that demonstrate fine design and craftspersonship, not its external features._ + +- Quality rubric one: point value +- Quality rubric two: point value +- Quality rubric three: point value + +## Resources + +_Include any resources (articles, books, tutorials, tools, videos, etc.) that are helpful for learners working on this goal._ + +[mit-license]: https://opensource.org/licenses/MIT From d9874e2125b0c0a7c1ad4a82ab45ceeb1249a101 Mon Sep 17 00:00:00 2001 From: Jared Grippe Date: Fri, 24 Feb 2017 16:18:35 -0800 Subject: [PATCH 2/4] WIP --- .../000-beginner-web-app-architecture.md | 200 +++++++++++++++--- 1 file changed, 168 insertions(+), 32 deletions(-) diff --git a/contracts/000-beginner-web-app-architecture.md b/contracts/000-beginner-web-app-architecture.md index de64fc9e..901dc108 100644 --- a/contracts/000-beginner-web-app-architecture.md +++ b/contracts/000-beginner-web-app-architecture.md @@ -39,6 +39,100 @@ This Goal is broken up in to N stages. 0. Copy this file into `README.md` 0. Make your first commit and push it up to Github +----- + +### Stage 1 + +In stage 1 were going to create a set of static files and then serve them with an super simple HTTP server called `serve`. + +First install `serve`. Like this: + +```sh +npm install -g serve +``` + +Next create the following files: + +``` +./public/assets/style.css +./public/assets/team.jpg +./public/assets/logo.png +./public/team.html +./public/about/index.html +./public/about/positions.html +``` + +You're welcome to use any images of any type but to make things easier here are two good ones: + +- [team.jpg](https://www.natcom.org/uploadedImages/CommunicationCurrents_Articles/Volume_7/Oetzel_McDermott_pic_2.jpg) +- [logo.png](http://www.hut90.com/retool/assets/img/Logo_Humble_Bundle.png) + +_Pro Tip: try using `curl IMAGE_URL > ./public/assets/team.jpg`_ + +Start the server by running this command + +```sh +serve . +``` + +Now when you visit http://localhost:3000/ in your browser you should see a list of all of the files you just created within `./public` + +These are the three pages you need to build: + +- http://localhost:3000/team.html +- http://localhost:3000/about +- http://localhost:3000/about/positions.html + +See the specs below for what you need to do. + +#### Specs + + - when you visit http://localhost:3000/team.html you see… + - [ ] the words "Our Team" in red with a dark drop shadow + - [ ] the logo image + - [ ] the team image + - when you visit http://localhost:3000/about you see… + - [ ] the words "About Page" in red with a dark drop shadow + - [ ] the logo image + - when you visit http://localhost:3000/about/positions.html you see… + - [ ] the words "About Position" in red with a dark drop shadow + - [ ] the logo image + + +### Stage 2 + +In stage two we're going to move away from `serve` and build a simple express server that does the same thing. It will serve any static files within `./public' + +create your `package.json` file by running `npm init -y` + +install `express` with the command `npm install --save express` + +create the file `./app.js` + +In this file you need to create and express server that serves static assets from the `./public` directory. + +Google around if you need help setting this up. Try googling "Serving static files in Express". You should be able to do this in 6-10 lines tops. + + +#### Specs + +You can move on to Stage 3 when… + +- [ ] running `npm start` starts your express server +- [ ] your express server starts on port 3000 +- [ ] when your express server starts, it prints "http://localhost:3000" +- [ ] all of the specs from Stage 1 are still met + + +### Stage 3 + + + + + +----- + + ### Stage 1 Setup a simple file server @@ -53,15 +147,24 @@ Setup a simple file server - + + +

About

- +

+ This would normally say stuffs about my site. +

+ ``` @@ -76,28 +179,43 @@ Setup a simple file server width: 100%; } + h1 { + color: red; + text-shadow: 1px 1px 1px black; + } + + .page-nav { + background: black; + color: white; + } + + .page-nav .page-logo img { + height: 50px; + vertical-align: middle; + } + + .page-nav .page-logo, + .page-nav .page-logo:active, + .page-nav .page-logo:visited { + color: white; + text-decoration: none; + } + .about-page { padding: 1em; text-align: center } - - .about-page .panda-img{ - max-width: 90vw; - max-height: 90vh; - border: 10px solid black; - } ``` 0. run `npm install --global serve` 0. run `serve ./public` 0. goto http://localhost:3000/about.html in a browser -At this point you should +At this point you should see: -- [ ] see a picture of a panda -- [ ] the panda picture has a think black border -- [ ] the panda picture is centered horizontally -- [ ] the panda picture is never larger than the window +- [ ] a black navbar at the top of the page +- [ ] a red logo in the nav bar +- [ ] the word "About" in red with a black drop shadow __Congratz!__ You've just made some static assets and served them using a simple HTTP server. @@ -105,25 +223,16 @@ __Congratz!__ You've just made some static assets and served them using a simple ### Stage 2 -In stage two were going to exploring relative vs absolute paths when linking to assets. +In stage two were going to explore relative vs absolute paths when linking to assets. To do this we'll need another page. 0. make the directory `./public/blog` -0. create `./public/blog/my-first-blog-post.html` with the following content +0. create `./public/blog/my-first-blog-post.html` with same exact content as the `./public/about.html` page except replace the entire `
` div with the following html ```html - - - - - - - -
-

My First Blog Post

-

…is short and sweet

-
- - +
+

My First Blog Post

+

…is short and sweet

+
``` 0. add the following css to your `style.css` file @@ -136,14 +245,41 @@ In stage two were going to exploring relative vs absolute paths when linking to background-color: lightgrey; padding: 1em 2em; } - - .blog-page h1 { - color: blue; - } ``` 0. goto http://localhost:3000/blog/my-first-blog-post.html in a browser +At this point you should see + +- a broken image and an ugly link where the navbar should be +- "My First Blog Post" in black instead of red with a dropshadow + +This is because of how we're linking to our assets. In both of our `html` files we're using relative urls instead of absolute urls. + +Speficically here: + +```html + +``` + +and here: + +```html + +``` + +The problem is `"style.css"` and `"logo.png"` are relative urls. You can tell because they do not start with a `/`. + +This works on the `/about.html` page because the relative url `"style.css"` resolves to the absolute path `"/style.css"` which is the correct path to the that file. + +This breaks on the `/blog/my-first-blog-post.html` page because the relative url `"style.css"` resolves to the absolute path `"/blog/style.css"` which is NOT the correct path to the that file. + +So how do we fix this? We change our urls from relative paths to absolute paths. + +0. Go into both `./public/about.html` and `./public/blog/my-first-blog-post.html` and convert any relative paths to absolute paths. +0. Reload http://localhost:3000/blog/my-first-blog-post.html in a browser + + ### Stage 2 Setup express as a simple file server From 25a8e007216f1e3e4290e3591bb29bfa142a1d88 Mon Sep 17 00:00:00 2001 From: Jared Grippe Date: Fri, 24 Feb 2017 17:25:21 -0800 Subject: [PATCH 3/4] WIP --- .../000-beginner-web-app-architecture.md | 263 +++++++----------- 1 file changed, 96 insertions(+), 167 deletions(-) diff --git a/contracts/000-beginner-web-app-architecture.md b/contracts/000-beginner-web-app-architecture.md index 901dc108..86cfe327 100644 --- a/contracts/000-beginner-web-app-architecture.md +++ b/contracts/000-beginner-web-app-architecture.md @@ -7,30 +7,37 @@ teamSize: 2 # Beginner Web App Architecture -## Learning Objectives - -In this goal you'll be working on the following skills - -- understanding the anatomy of a URL -- understanding the difference between a `get` and a `post` request -- understanding the request & response life cycle of HTTP -- using common HTTP status codes -- using common HTTP headers - ## Challenge Rating This goal will likely be within your ZPD if you... -- can i dentify the parts of a URL -- can articulate the difference -- Item two +- know beginner vanilla JavaScript +- feel comfortable with callbacks +- do not know how a web server works +- do not know what "rendering a template" means +- do not feel comfortable in express + ## Description -_Provide a brief, high-level overview of what the final product (artifact) of this goal is. Include any relevant resources or dependencies here._ +This Goal is designed to introduce Web Application Concepts to you gradually over a series of stages. + +This is goal is not designed to be fully completed the first time through. It is written expecting that you'll come back to this goal and do it faster and get father as you level up. + +This goal was also designed so you can spice things up if you need some extra kick to your ZPD. +- Stage 1: just serving static assets +- Stage 2: configuring express to serve static assets +- Stage 3: serving dynamically rendered templates +- Stage 4: using layouts and partials +- Stage 5: renering data in a template +- Stage 6: using forms to submit data to the server +- Stage 7: tracking your visitors using cookies -This Goal is broken up in to N stages. +__YOU MUST__: + + - __complete all the specs of each stage before moving on__ + - __get a code review after you complete each stage__ ### Setup @@ -39,12 +46,24 @@ This Goal is broken up in to N stages. 0. Copy this file into `README.md` 0. Make your first commit and push it up to Github ------ - ### Stage 1 In stage 1 were going to create a set of static files and then serve them with an super simple HTTP server called `serve`. + +#### Learning Objectives + +As you're completing Stage 1 make sure you're learning… + +- how pages link to assets like stylsheets and images +- how relative paths work vs. absolute paths +- how to convert a relative path to an absolute path +- how the path in a url can map to a path on the unix filesystem +- how to use `The Chrome Developer Tools' Network tab` to view and debug the HTTP requests an html page makes to load associates assets +- that `index.html` is a special file name + +#### Walkthrough + First install `serve`. Like this: ```sh @@ -87,21 +106,35 @@ See the specs below for what you need to do. #### Specs - - when you visit http://localhost:3000/team.html you see… +You can move on to Stage 2 when… + + - you visit http://localhost:3000/team.html and see… - [ ] the words "Our Team" in red with a dark drop shadow - [ ] the logo image - [ ] the team image - - when you visit http://localhost:3000/about you see… + - you visit http://localhost:3000/about and see… - [ ] the words "About Page" in red with a dark drop shadow - [ ] the logo image - - when you visit http://localhost:3000/about/positions.html you see… + - you visit http://localhost:3000/about/positions.html and see… - [ ] the words "About Position" in red with a dark drop shadow - [ ] the logo image ### Stage 2 -In stage two we're going to move away from `serve` and build a simple express server that does the same thing. It will serve any static files within `./public' +In stage two we're going to move away from `serve` and build a simple `express` server that does the same thing. It will serve any static files within `./public` + + +### Learning Objectives + +As you're completing Stage 2 make sure you're learning… + +- how to setup a simple express server +- how to start an express server on any port you want +- how to to configure express to serve any files from a specifc directory +- how to run code after your express server has started + +### Walkthrough create your `package.json` file by running `npm init -y` @@ -109,192 +142,88 @@ install `express` with the command `npm install --save express` create the file `./app.js` -In this file you need to create and express server that serves static assets from the `./public` directory. +In this file you need to create an `express` server that serves static assets from the `./public` directory. -Google around if you need help setting this up. Try googling "Serving static files in Express". You should be able to do this in 6-10 lines tops. +Google around to learn how to do this. Try reading some express tutorials. Try googling "Serving static files in Express". You should be able to do this in about 6-10 lines. #### Specs You can move on to Stage 3 when… -- [ ] running `npm start` starts your express server -- [ ] your express server starts on port 3000 -- [ ] when your express server starts, it prints "http://localhost:3000" -- [ ] all of the specs from Stage 1 are still met + - [ ] running `npm start` starts your express server + - [ ] your express server starts on port 3000 + - [ ] when your express server starts, it prints "http://localhost:3000" + - [ ] all of the specs from Stage 1 are still met ### Stage 3 +In Stage 3 we're going to move our pages from static files into `express` routes and `ejs` templates +#### Learning Objectives +As you're completing Stage 3 make sure you're learning… ------ - - -### Stage 1 - -Setup a simple file server - -0. make a directory called `public` -0. Download this picture by running this command - - `curl https://raw.githubusercontent.com/reactjs/redux/master/logo/logo.png > ./public/logo.png` -0. create `./public/about.html` with the following content - - ```html - - - - - - - - - - -
-

About

-

- This would normally say stuffs about my site. -

-
- - - - ``` - -0. create `./public/style.css` with the following content - - ```css - html, body { - margin: 0; - padding: 0; - height: 100%; - width: 100%; - } - - h1 { - color: red; - text-shadow: 1px 1px 1px black; - } - - .page-nav { - background: black; - color: white; - } - - .page-nav .page-logo img { - height: 50px; - vertical-align: middle; - } - - .page-nav .page-logo, - .page-nav .page-logo:active, - .page-nav .page-logo:visited { - color: white; - text-decoration: none; - } - - .about-page { - padding: 1em; - text-align: center - } - ``` - -0. run `npm install --global serve` -0. run `serve ./public` -0. goto http://localhost:3000/about.html in a browser - -At this point you should see: - -- [ ] a black navbar at the top of the page -- [ ] a red logo in the nav bar -- [ ] the word "About" in red with a black drop shadow - - -__Congratz!__ You've just made some static assets and served them using a simple HTTP server. - - -### Stage 2 - -In stage two were going to explore relative vs absolute paths when linking to assets. To do this we'll need another page. +- how to define or register an `express` route +- how to respond to an HTTP request within `express` +- how to render a template in `express` -0. make the directory `./public/blog` -0. create `./public/blog/my-first-blog-post.html` with same exact content as the `./public/about.html` page except replace the entire `
` div with the following html +#### Walkthrough - ```html -
-

My First Blog Post

-

…is short and sweet

-
- ``` -0. add the following css to your `style.css` file +Install ejs `npm install --save ejs` - ```css - .blog-page { - max-width: 500px; - margin: 0 auto; - border-left: 3px solid blue; - border-right: 3px solid blue; - background-color: lightgrey; - padding: 1em 2em; - } - ``` -0. goto http://localhost:3000/blog/my-first-blog-post.html in a browser +Create a `./views` directory +Move the following files like so -At this point you should see - -- a broken image and an ugly link where the navbar should be -- "My First Blog Post" in black instead of red with a dropshadow - -This is because of how we're linking to our assets. In both of our `html` files we're using relative urls instead of absolute urls. +``` +./public/team.html -> ./views/team.ejs +./public/about/index.html -> ./views/about/index.ejs +./public/about/positions.html -> ./views/about/positions.ejs +``` -Speficically here: +Make sure you've removed the following files: -```html - +``` +./public/team.html +./public/about/index.html +./public/about/positions.html ``` -and here: +Create three `express` routes. One for each of our three pages. -```html - -``` +#### Specs -The problem is `"style.css"` and `"logo.png"` are relative urls. You can tell because they do not start with a `/`. +You can move on to Stage 4 when… -This works on the `/about.html` page because the relative url `"style.css"` resolves to the absolute path `"/style.css"` which is the correct path to the that file. +- [ ] re-confirm all specs from Stage 1 & 2 are still met -This breaks on the `/blog/my-first-blog-post.html` page because the relative url `"style.css"` resolves to the absolute path `"/blog/style.css"` which is NOT the correct path to the that file. +#### Resources -So how do we fix this? We change our urls from relative paths to absolute paths. -0. Go into both `./public/about.html` and `./public/blog/my-first-blog-post.html` and convert any relative paths to absolute paths. -0. Reload http://localhost:3000/blog/my-first-blog-post.html in a browser +### Stage 4 +#### Learning Objectives -### Stage 2 +As you're completing Stage 4 make sure you're learning… -Setup express as a simple file server +- the `ejs` syntax -### Stage 3 -Move static HTML pages to express routes using a template -### Stage 4 +------ + +more TBD -Track your visitors with cookies +---- -### Stage 5 +## Higher Level Learning Objectives +- http servers run on ports +- ## Context From 69224cc64aa54ddee4ae86fa032312a294b512e9 Mon Sep 17 00:00:00 2001 From: Jared Grippe Date: Tue, 28 Feb 2017 08:26:48 -0800 Subject: [PATCH 4/4] WIP --- .../000-beginner-web-app-architecture.md | 39 +++++++++++++++---- 1 file changed, 31 insertions(+), 8 deletions(-) diff --git a/contracts/000-beginner-web-app-architecture.md b/contracts/000-beginner-web-app-architecture.md index 86cfe327..aa6d56e1 100644 --- a/contracts/000-beginner-web-app-architecture.md +++ b/contracts/000-beginner-web-app-architecture.md @@ -14,7 +14,7 @@ This goal will likely be within your ZPD if you... - know beginner vanilla JavaScript - feel comfortable with callbacks - do not know how a web server works -- do not know what "rendering a template" means +- do not know what "rendering a view" means - do not feel comfortable in express @@ -28,9 +28,9 @@ This goal was also designed so you can spice things up if you need some extra ki - Stage 1: just serving static assets - Stage 2: configuring express to serve static assets -- Stage 3: serving dynamically rendered templates +- Stage 3: serving dynamically rendered views - Stage 4: using layouts and partials -- Stage 5: renering data in a template +- Stage 5: renering data in a view - Stage 6: using forms to submit data to the server - Stage 7: tracking your visitors using cookies @@ -157,10 +157,13 @@ You can move on to Stage 3 when… - [ ] all of the specs from Stage 1 are still met -### Stage 3 -In Stage 3 we're going to move our pages from static files into `express` routes and `ejs` templates + + +### Stage 3 + +In Stage 3 we're going to move our pages from static files into `express` routes and `ejs` views #### Learning Objectives @@ -168,14 +171,13 @@ As you're completing Stage 3 make sure you're learning… - how to define or register an `express` route - how to respond to an HTTP request within `express` -- how to render a template in `express` +- how to render a view in `express` +- what to google when using two node libraries together #### Walkthrough Install ejs `npm install --save ejs` -Create a `./views` directory - Move the following files like so ``` @@ -194,6 +196,10 @@ Make sure you've removed the following files: Create three `express` routes. One for each of our three pages. +Your three routes are goint to be `get` requests + +Each route need to render the corresponding view + #### Specs You can move on to Stage 4 when… @@ -202,14 +208,31 @@ You can move on to Stage 4 when… #### Resources +- google "node express ejs" + + + + + ### Stage 4 +In Stage 4 were going to learn how to use layouts and partials to share html across multiple pages + #### Learning Objectives As you're completing Stage 4 make sure you're learning… - the `ejs` syntax +- that views are just functions that generate a string + +Create the following files: + +``` +./views/_layout.ejs +./views/_nav.ejs +``` +