stuff

server_hw_resources/0_internet.md

@@ -0,0 +1,15 @@
+####1 What are the key differences between a server and a client?
+
+
+####2 What is an HTTP request?
+
+
+####3 What is the request-response cycle?
+
+
+####4 Research what a 'node package' is and explain it.
+
+
+####5 Research the node package 'Express' and explain why we might want to use it.
+
+

server_hw_resources/b1_xfiles_sightings_two-day/readme.md

@@ -0,0 +1,93 @@
+# First Contact
+
+![XFiles](./xfiles.jpeg)
+
+The FBI has resurrected the X-Files. Agent Mulder has resurfaced and his search for the truth remains unabated. *It is out there*.
+
+In the years since Mulder's disappearance the digital age has brought with it treasure troves of information, both government and citizen. The FBI is still reluctant to invest too many resources into their investigations forcing Mulder and Skully to recruit a junior developer out of a bootcamp to help them make sense of all the newly available data.
+
+You have been contracted by the scientifically rigorous Agent Skully to help in the quest for truth. You not only fit their aggressively mediocre budget, but also your profile is low enough that you can be eliminated without any repercussions—a dangerous combination.
+
+## Part 1
+
+![XFilesOffice](./xfiles-office.jpg)
+
+Walking into the office you make yourself comfortable and start exploring their systems. Agent Scully has asked you to provide them with a way in which they would be able to list all UFO sightings in a given location. In your search you stumble upon a file called `sightings.json`. It looks promising and, after some investigation, it appears to have data about UFO sightings over the past year or so.
+
+Write a command line application called `helper.js` which Scully can use to find all sightings within a given state. Have the application take one command line argument which contains the name of the state and log to the console a summary of each sighting in that state. For example:
+
+
+```sh
+node helper.js state=SC
+
+=====================
+Date: 1/31/15/ 21:30
+City: Conway
+State: SC
+Shape: Fireball
+Duration: 5 Minutes
+====================
+Date: 1/27/15 20:00
+City: Myrtle Beach
+State: SC
+Shape: Changing
+Duration: 10 Seconds
+====================
+.
+.
+.
+```
+
+Excited after immersing yourself in a beautiful combination of javascript and the possibilities of extraterrestrial visitation you decide to call it a job well done. But just as the sun begins to creep through the basement window your phone buzzes. Mulder and Skully are in Arkansas investigating the disappearance of man in a town where the residents really are what they eat. Mulder insists on an extraterrestrial connection based on reports of Foxfire near where the missing mans car was located. Also sometimes called "fairy fire", it is the bioluminescence created by some species of fungi present in decaying wood, *but* is often reported in conjunction with UFO sightings.
+
+Find all the UFO sightings in that state for the past year to help out your new colleagues.
+
+Mulder and Skully, after some hesitation, have decided to accept you as a valuable resource and are as sure as they can be that your not bought by the Syndicate. They've requested that you extend your script to make the data even more accessible.
+
+**BONUS**
+Extend your application to accept different queries. Allow Scully to look for sightings by city, shape, duration.
+
+For example
+
+```sh
+node helper.js shape=sphere
+node helper.js city=Sherwood
+```
+
+**BONUS BONUS**
+Implement composite query functionality, to incorporate `&` and date range functionality
+
+For Example
+```sh
+node helper.js shape=sphere&date>05/01/2015
+```
+should give you all sphere sightings after May 2015.
+
+
+
+## Part 2
+Scully has finally taken pregnancy leave, working till the very last possible minute. Things have been going great until now and Scully has used your app to solve a multitude of cases. Unfortunately for you, Mulder has never touched a terminal in his life, "Is there any way I can get it off my fingers without betraying my cool exterior?"
+
+He does, however, know how to use a browser and understands url query parameters. He wants you to implement the same functionality from before on a server, so he can access the information through the browser. He's given you the following spec:
+
+The users request should go to `youripaddress/sightings[query]`. The user should be able to:
+
+1. Request a list of UFOs by state
+2. Request a list of UFOs by city
+2. Request a list of UFOs by date
+3. Request a list of UFOs by shape
+
+
+
+### Bonus
+1. Allow the user to send multiple parameters in their query string and return a list of sightings which matches only those parameters. If the user sends a request to
+`youripaddress/sightings?shape=sphere&city=henderson&state nv` your server should respond with a list of all of the sphere shaped UFOs in Henderson, NV.
+2. Format you response with html and css, so Mulder can go to Agent Skinner and justify the meager salary they've been paying you. 
+
+## Ultra Bonus
+Scully and Mulder have encountered a bizarre case of a serial killer which could date back tens of years. They would like you to give them access to sighting information from the 80s. The file you luckily stumbled on only contains sightings from the last year. Agent Skinner has given you his personal guarantee that if you complete this assignment he will pull some strings and get you into the FBI field training program, so you can become a fully functioning member of the team. Soon you will be able to carry a gun and experience the paranormal first hand.
+
+1. Your job is to find the information of all UFO sightings online (google might help).
+2. Research how to use node to send http requests to that webpage (the `request` module might be useful)
+3. Figure how to parse the html and get the relevant information for the sightings from there. (`cheerio` module might be useful here)
+4. Allow for users to query your server and dynamically generate the responses by using the online resources directly.

server_hw_resources/b2_xfiles_sightings_2/readme.md

@@ -0,0 +1,48 @@
+# Xpress-Files
+
+Use your new found EXPRESS skills to add some much needed clarity to your code from last night. Your task is to implement a real html interface from Agent Mulder, as he's getting tired of typing in the browser URL bar. You will do that in Express. Use the `sightings.json` file from the previous homework.
+
+## HTML Forms
+
+The HTML form tag can be used to automatically send http requests. Forms can have many input fields. When a special submit button is clicked the browser grabs all the values for the input fields and generates query parameters, which it appends to the url and then sends as an http request. Here is a sample form which you should start with:
+
+```javascript
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>The Xpress Files</title>
+  </head>
+
+  <body>
+    <h1>X-Finder</h1>
+    <form action="/search" method="get">
+      <label for="city">City</label>
+      <input type="text" name="city"/>
+      <button type="submit">Search</button>
+    </form>
+  </body>
+</html>
+```
+
+When you click on the submit button this will send a `GET` request to the path `/search?city=<whatever-you-put-in-the-text-field>`. 
+
+## The X-Finder
+
+1. Initialize a new Express app
+2. Create an `index.html.ejs` view which will be our index page. Use the starter html provided.
+3. Use Express to serve that view when the user goes to the root path `/`. (Note: The root route is often referred to as the index page)
+4. Create a view which can show the information for a collection (array) of sightings.
+5. Create an express route `/search` which can handle the query for a city coming from the form.
+6. Your route should render all the matched sightings.
+7. Add more fields to your search form so you can query by state, date, duration.
+
+
+**BONUS**
+
+1. Explore the javascript `Date` object and the HTML input field `type="date"`. Implement a range date search.
+2. Explore the html input field `type="select"` and allow for the user to select a state from a list.
+3. Use client side javascript to generate a list of cities to select from, based on the state.
+4. Make it pretty! How do you include css!
+
+
+

server_hw_resources/b3_rat-to-restaurant_weekend/readme.md

@@ -0,0 +1,143 @@
+# Rat-to-Restaurant
+
+
+
+## Prerequisites
+
+Data:
+
+- [Restaurant violations data](https://data.cityofnewyork.us/Health/DOHMH-New-York-City-Restaurant-Inspection-Results/xx67-kt59)
+
+- [Rat sightings data](https://nycopendata.socrata.com/Social-Services/Rat-Sightings/3q43-55fe)
+
+You can view the end points for each dataset and the query parameters (field names) that you can pass to these two endpoints by clicking the export tab at the top right.
+
+![data](data.png)
+
+
+
+## Dependencies
+    - Express
+    - Morgan
+    - EJS
+    - Request
+
+
+---
+
+*At this point you should have a Node app initialized and all the necesary dependencies installed, directories created, and server set up... set up.*
+
+---
+
+## Step 1
+
+Build two routes, `/rats` and `/violations`. Each will render a separate view that has a form. That form will allow the user to search each dataset by zipcode.
+
+(If you aren't sure about how to build your form refer back to the X-Files homework assigned on Thursday)
+
+The pure JSON response from the NYC Open Data API will be returned in another route called `/rats/results` and/or `/violations/results`
+
+There are a lot of extra data, the user simply doesn't need to see all of it and we're mostly interested in the description and location information.
+
+#### 1a:
+
+Filter out the unnecessary key-value pairs and only return the following:
+
+    Rats: boro, location, incident zip, lat, long, descriptor
+
+    Violations: boro, dba, zip code, grade, street, action, violation_description
+
+(If you want to include other data go right ahead)
+
+At this point we are just rendering json!
+
+
+#### 1b:
+Make these views:
+
+`rat_sighting_results.html.ejs`
+`violation_results.html.ejs`
+
+Now that we have the right data for each request let's style it and make it more user friendly.
+
+We're going to use the concept of cards. Each rat sighting or restaurant violation will have it's own card.
+
+A card is simply a div that styles and displays the information in a sane and readable way. You can style the card however you like, but for example a bare bones rat sightings card might look like this:
+
+![card](card.png)
+
+You can read about cards here:
+https://econsultancy.com/blog/64646-15-delicious-examples-of-card-based-web-design/
+
+
+### [CHECK IN] What should we have now!?
+
+We should now have a web application that has two initial views at `/rats` and `/violations` that each display a form that allows us to search for all rat sightings or all restaurant violations by zip code.
+
+When the user clicks the button attached to the form it should direct the user to a new view (our results views) and new route that displays that parsed data using the `card` design pattern.
+
+But our cards are all stacked on top of each other!?
+
+![card](card_results.png)
+
+#### 1c
+
+If you surround all of your card results in a div with a class of container.
+
+Add this css
+
+	.container {
+	    display: flex;
+    	flex-wrap: wrap;
+	}
+
+What is [flexbox!?](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) It's super cool!
+
+>[Flexbox provides] a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex"). The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow."
+
+Those two css properites will now display our cards dynamically so they stretch across the screen inline and will wrap depending on the width of the screen!
+
+![success](success.gif)
+
+
+## Step 2 Restaurants
+
+Build a separate route `/restaurants` which will be used to display all relevant information for restaurants. It should be a form, which allows you to search for a zip code. It should take you to `/restaurants/results` which will display information about all restaurant in that respective zip code.
+
+#### 2a
+
+First start with the violations data you already have / know how to retrieve. There are many `violations` for each restaurant. Combine them in a `restaurants` data structure which is an array of `restaurant` objects. Each `restaurant` object should have at minimum the following properties:
+
+- `name`
+- `street`
+- `violations`
+
+The violations property should be an array of the violation object you built previously, which pertain to the particular restaurant. Render your `restaurants` array as pure JSON in the browser.
+
+![success](combined_data.png =350x100)
+
+
+#### 2b
+
+Now that you have your array of `restaurants`, fetch all the rat sightings for the same zipcode. Add a new property to each `restaurant` object named `rats` and set it to `0` by default. For each rat sighting on the **same street** as a restaurant increment that restaurants `rats` property by one.
+
+---
+
+*At this point you should be able to make a get request `/restaurants`, search for a zip code and see JSON data in the browser which is an array of `restaurants` each of which have `name`, `street`, `violations` and `rats` as properties*
+
+---
+
+#### 2c
+
+Create a view `restaurants.html.ejs` which displays cards for each restaurant, which matches your query. Keep in mind that each restaurant has violations, each of which is its own card. CARDCEPTION!
+
+![cardception](cardception.jpg)
+
+
+### Step 3
+
+A great metric for the cleanliness of a restaurant is the RAT-O-METER™, which is the ratio of nearby rats to the number of violations. A high RAT-O-METER indicates that a restaurant manages to keep an acceptable level of cleanliness relative to the number of rats around. Sort your results based on their RAT-O-METER rating!
+
+## Bonus
+
+Finished Everything?! Congratulations! You just built something society can benefit from! Make it pretty and go talk to some investors. This can be the next Yelp!