Here's where I post my useless thoughts about the world
11 | 12 | 13 | -------------------------------------------------------------------------------- /part2-my-shitty-blog/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "myshittyblog", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "body-parser": "^1.15.2", 13 | "cookie-parser": "^1.4.3", 14 | "express": "^4.14.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /part2-my-shitty-blog/static/secret.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |Home Page
11 | 12 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /the-unclickable-link/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
"
7 | },
8 | "2": {
9 | "title": "What a wonderful world we live in",
10 | "subheader": "Full of life, joy, and beauty",
11 | "content": "alsdkfjalwkrgjoawijgeoawjg lkawj gelkjaw elgkja wlekgj alwkejg lkwje glkawje glkjaw elgkj awlekgj alwkejg "
12 | }
13 | },
14 | "amy": {
15 | "1": {
16 | "title": "My shitty blog will be all about food",
17 | "subheader": "I love food",
18 | "content": "Here's a link to my favorite food blog"
19 | },
20 | "2": {
21 | "title": "Current mood",
22 | "subheader": "",
23 | "content": "Full. SO FULL. Like, I can't eat ever again"
24 | }
25 | },
26 | "blamey": {
27 | "1": {
28 | "title": "My blog is gonna be amazing, not shitty",
29 | "subheader": "Here I'll wax poetic and amaze with my linguistic prowess",
30 | "content": "The rain in spain stays mainly in the plain."
31 | },
32 | "2": {
33 | "title": "Best piece of banter",
34 | "subheader": "Heard on the street",
35 | "content": "I ate a salad, and, wait for it, didn't put any dressing on it."
36 | }
37 | },
38 | "john": {
39 | "1": {
40 | "title": "I'm boring",
41 | "subheaders": "super boring",
42 | "content": "here's a cat picture: 
"
43 | }
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/part2-my-shitty-blog/static/secret.js:
--------------------------------------------------------------------------------
1 | // Sometimes javascript files will begin execution before the browser has fully
2 | // loaded the page. In order to avoid this, we want to listen for a special
3 | // browser event - called 'load', that fires once the page has fully loaded
4 | // We accomlish this by adding an event listener to the window object (which is
5 | // the global javascript object created for every page). The function passed to
6 | // the event listener will get fired once the page is fully loaded
7 | window.addEventListener('load', function() {
8 | console.log('welcome to the secret blog');
9 |
10 | // Perform AJAX request to get post data from server
11 | // AJAX stands for Asynchronous Javascript and XML (ignore the XML part)
12 | // Essentially it means that we're going to ask the server for some data
13 | // without doing a full page reload. This allows us to load data
14 | // dynamically as needed
15 | // We pass an object that tells the jQuery ajax() function what to do
16 | $.ajax({
17 | url: '/secret-data', // the URL that we're hitting - we have to handle this route on our server
18 | type: 'get', // The type of HTTP request we want to perform
19 | success: function(res) { // And the success function. this is fired when the ajax request completes and it contains the data
20 | // Here I'm just calling a separate function for clarity
21 | populatePage(res);
22 | }
23 | });
24 |
25 | // Popuplate page with obtained from server
26 | // Take the data we got from our AJAX request
27 | var populatePage = function(pageData) {
28 | console.log(pageData);
29 |
30 | // pageData is an object, so we get an array of it's keys using
31 | // Object.keys
32 | var pageDataKeys = Object.keys(pageData);
33 |
34 | // For each key, get the data from the pageData object using
35 | // a javascript array method forEach()
36 | pageDataKeys.forEach(function(item, index) {
37 |
38 | // Get the specific post data
39 | var post = pageData[item];
40 |
41 | // Log it all out so we can see it working
42 | console.log(post.title);
43 | console.log(post.subheader);
44 | console.log(post.content);
45 |
46 | // Create a bunch of HTML elements to add the page
47 | var container = document.createElement('div');
48 | container.className = 'container'; // Give the containers a class name so we can style them with CSS
49 | document.body.appendChild(container); // Append the containers to the html BODY object
50 | var title = document.createElement('h1'); // Create an h1 tag for the post TITLE
51 | var sub = document.createElement('h2'); // create an h2 tag for the post Subheader
52 | var content = document.createElement('p'); // create a p tag for the post content
53 |
54 | // Add all the content into the HTML tags we created above
55 | title.innerHTML = post.title;
56 | sub.innerHTML = post.subheader;
57 | content.innerHTML = post.content;
58 |
59 | // Append all those elements to the container element we created
60 | // above
61 | container.appendChild(title);
62 | container.appendChild(sub);
63 | container.appendChild(content);
64 | });
65 | }
66 | });
67 |
--------------------------------------------------------------------------------
/part2-my-shitty-blog/server.js:
--------------------------------------------------------------------------------
1 | // Node uses a special function called 'require' to access installed packages
2 | // We first initialize the express library with the next two lines
3 | var express = require('express');
4 | var app = express();
5 |
6 | test.log('hi');
7 |
8 | // These are extra libraries that are needed to handle POST data from
9 | // a browser, as well as cookie data (which we didn't quite get to talk about)
10 | var bodyParser = require('body-parser');
11 | var cookieParser = require('cookie-parser');
12 |
13 | // Load the user 'blog' data from a local json file. This data would
14 | // generally come from a database, but to keep things we simple we're just
15 | // loading fake user data locally
16 | var secretPageData = require('./data.json');
17 |
18 | // Set a port for express to listen on
19 | var PORT = 3000;
20 |
21 | // Tell express that we will serve the files in the 'static' folder
22 | // as direct routes, so that our HTML files can have direct access
23 | // to javascript files, images, etc.
24 | app.use(express.static('static'));
25 |
26 | // Body Parser gives access to POST data through Express
27 | // We're then telling express to 'use' the body parser, which we've
28 | // set up to expect JSON data coming over with a POST request
29 | var jsonParser = bodyParser.json()
30 | var urlencodedParser = bodyParser.urlencoded({ extended: false });
31 | app.use(urlencodedParser);
32 |
33 | // Tell express to use the cookie parser as well. This gives us access
34 | // to cookies which are located on HTTP headers. We can use cookies to store
35 | // tiny bits of data that we want to keep around, i.e. the user that is
36 | // currently logged in
37 | app.use(cookieParser());
38 |
39 | // Define the home route that will get fired when the browser navigates to the
40 | // page
41 | // express gives us a callback function with two arguments, the request object,
42 | // and the response obj (called req and res)
43 | app.get('/', function(req, res) {
44 | // We use the response obj to send something back to the browser
45 | // in this case we're just sending our index.html file
46 | // We have use __dirname (a special node variable) that gives us the
47 | // path to current directory, so we can construct a full path to the
48 | // index.html file
49 | res.sendFile(__dirname + '/static/index.html');
50 | });
51 |
52 | // Handle route for our 'about' page
53 | app.get('/about', function(req, res) {
54 | res.sendFile(__dirname + '/static/about.html');
55 | });
56 |
57 | // Store a list of approved users
58 | var listOfApprovedViewers = ['jamie', 'amy', 'blamey', 'john'];
59 |
60 | // Handle POST request for when our user tries to login
61 | app.post('/secret', function(req, res) {
62 | // POST data is stored on the req.body object (which is created by the
63 | // 'body-parser' module we defined above
64 | console.log(req.body);
65 |
66 | // Check if the username is in our list of approved users
67 | // array.indexOf will let us figure out if an item exists in an array
68 | // so we check if the username supplied in the POST request exists in
69 | // our list of approved users, and if so, send them the secret html page
70 | // if not, just send them a message
71 | if (listOfApprovedViewers.indexOf(req.body.username) !== -1) {
72 | // Before we send the secret page, let's set a cookie with the
73 | // username, so when the user asks for more data later, we know who is
74 | // making the request
75 | res.cookie('username', req.body.username);
76 | res.sendFile(__dirname + '/static/secret.html');
77 | } else {
78 | res.send('Haha, youre not allowed in!');
79 | }
80 | });
81 |
82 | // Handle AJAX request for secret user data
83 | app.get('/secret-data', function(req, res) {
84 | console.log('requesting secret data');
85 | console.log(req.cookies);
86 |
87 | // Get the user from the cookie (note this is a GET request, so we can't
88 | // get a username from the req.body object like we would do with a POST
89 | // request. That's why we need the cookie - to store the user that is
90 | // logged in
91 | var user = req.cookies.username;
92 |
93 | // Get the data specfic to the user
94 | var userData = secretPageData[user];
95 |
96 | // Send the data back to the browser
97 | res.send(userData);
98 | });
99 |
100 | // Lastly, we have to start our express server using this function
101 | // and give it the port we're listening on. The PORT is the number that you'll
102 | // have to navigate to in your browser - i.e. if PORT = 3000, i'll go to:
103 | // localhost:3000 in my browser
104 | app.listen(PORT, function() {
105 | console.log('listening on port ' + PORT);
106 | });
107 |
108 |
--------------------------------------------------------------------------------
/part3-objects-and-functions/functional.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */ // <------- IGNORE THIS LINE!
2 |
3 | // Functional programming
4 | var box = document.createElement('div');
5 | box.style.backgroundColor = 'black';
6 | box.style.position = 'absolute';
7 | box.style.width = '100px';
8 | box.style.height = '100px';
9 | document.body.appendChild(box);
10 |
11 | // If you find yourself repeating code, the best thing to do
12 | // is to wrap that code in a function to make it much more reusable
13 | function moveBox(b, x, y) {
14 | b.style.top = x + 'px';
15 | b.style.left = y + 'px';
16 | }
17 |
18 | // Functions also allow us to abstract things that we dont' want to remember
19 | // how to do. Let's say we were doing some complex calculations to figure out
20 | // the future location of the box based on it's current position and it's
21 | // speed,
22 | // we'd wrap that calculation in it's own function so that we only have to
23 | // figure out how to do the calculations once, then we can just reuse it over
24 | // and over
25 | function changeColor(b, color) {
26 | b.style.backgroundColor = color;
27 | }
28 |
29 | moveBox(box, 10, 10);
30 |
31 | // Set timeout is a good simple example of functional programming
32 | // it takes 2 things as arguments, a function to execute, and a number that
33 | // represents the time it should wait (in milliseconds) before funning the
34 | // passed function. That's what functional programming is all about, passing
35 | // functions to other functions.
36 | setTimeout(function() {
37 | moveBox(box, 100, 100);
38 | }, 2000);
39 |
40 | var colors = ['blue', 3, 'orange', 'red', 'purple'];
41 | var continents = ['North America', 'South America', 'Europe', 'Asia', 'Africa', 'Australia', 'Antarctica'];
42 |
43 | // I hate for loops, and I want a functional way to do it
44 | // So I wrap a for loop in a function, that takes an array and another function
45 | // then for each item in the passed in array, I want to execute the function
46 | // I passed in on the array item
47 | function forEach(array, fn) {
48 | var retArray = [];
49 | for (var i = 0; i < array.length; i++) {
50 | // Use the passed in function 'fn' on each array item
51 | retArray.push(fn(array[i]));
52 | }
53 |
54 | return retArray;
55 | }
56 |
57 | // this for each pattern is so nice that Javascript provides it for us
58 | // automatically
59 | // It also gives us a few more array functions - map, filter, reduce (look them
60 | // up if you're curious, they can be very useful)
61 | colors.forEach(function(elt, i, array) {
62 | console.log(elt);
63 | });
64 |
65 | // Map is another array iterator that returns a new array
66 | var notColors = colors.map(function(color, i, array) {
67 | // The new items in the array will consist of whatever items are returned
68 | // inside this function
69 | return 'NOT ' + color;
70 | });
71 |
72 | // Filter returns a new array by removing some items from passed in array if
73 | // they don't meet some test
74 | var colorsWithoutIntegers = colors.filter(function(color) {
75 | // If this function returns true, the array item is kept, otherwise it's
76 | // not kept. NOTE: This doesn't affect the original array!
77 | if (typeof color === 'number') {
78 | return false;
79 | } else {
80 | return true;
81 | }
82 | });
83 | console.log(colors);
84 | console.log(notColors);
85 | console.log(colorsWithoutIntegers);
86 |
87 | function upperCaseAndLog(string) {
88 | var s = string.toUpperCase()
89 | }
90 |
91 | function isString(str) {
92 | var ret = (typeof str === 'string');
93 | return ret;
94 | }
95 |
96 | function isNumber(num) {
97 | var ret = (typeof num === 'number');
98 | return ret;
99 | }
100 |
101 | function isObject(obj) {
102 | var ret = (typeof obj === 'object');
103 | return ret;
104 | }
105 |
106 | // This is tricky. It's a function that modifies other functions. It takes
107 | // a function as an argument, creates a new function that calls the passed in
108 | // function, modifies the result in some way, then returns the new version of
109 | // the function
110 | // This specific example negates a function that returns a boolean value
111 | function negate(fn) {
112 |
113 | function negatedFn(arg) {
114 | var retVal = fn(arg);
115 | return !retVal;
116 | }
117 |
118 | return negatedFn;
119 | }
120 |
121 | var isNotString = negate(isString);
122 | var isNotObject = negate(isObject);
123 | var isNotNumber = negate(isNumber);
124 |
125 | var s = 'string';
126 | console.log(isString(s));
127 | console.log(isNotString(3));
128 |
129 | // I can also pass functions in directly to our array iterators.
130 | var result = forEach(colors, isNotString);
131 | console.log(result);
132 | // Do other stuff
133 | //forEach(continents);
134 |
135 |
--------------------------------------------------------------------------------
/part3-objects-and-functions/oop.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */ // <------- IGNORE THIS LINE!
2 |
3 | // What is an object?
4 | // Everything is an object (or a primative - i.e. number, string, bool);
5 | var x = 3;
6 |
7 | // x is a number
8 | // But it's also an object, check it out in the browser
9 | // It's basically the same as doing this:
10 | var X = new Number(3);
11 |
12 | var s = 'a string primative';
13 | var S = new String('a string object');
14 | // In particular with strings, notice how the Object variant stores each
15 | // character of the string as a property on an object.
16 |
17 | // NOTE: I'm just showing you that strings and numbers are actually Objects
18 | // under the hood, but when you're actually coding, don't create primatives
19 | // using the 'new Number' or 'new String' syntax.
20 |
21 | // We can do the same with objects
22 | // i.e. use new Object() or new Array() - but don't actually do that in
23 | // practice, use the literal notation instead ( {} and [] )
24 |
25 | // Object literal
26 | var o = {
27 | myStr: 'im a string',
28 | myNum: 3,
29 | myFunc: function(anArgument) {
30 | console.log(anArgument);
31 | },
32 | myObj: {
33 | anotherProp: 'Im another string'
34 | }
35 | };
36 |
37 | // What is Object Oriented Programming?
38 | // In the simplest sense, it's a way of imitating real world things, like
39 | // people, or cars, and keeping track of small differences between individual
40 | // things while also keeping track of the similarities
41 | // One of the fundamental principles of OOP is inheritance, the idea that
42 | // things inherit properties from other things
43 |
44 | var animal = {
45 | numberOfLegs: 0,
46 | soundIMake: '',
47 | speak: function() {
48 | console.log(this.soundIMake);
49 | },
50 | jump: function() {
51 | console.log('jump');
52 | },
53 | addLeg: function(n) {
54 | this.numberOfLegs = this.numberOfLegs + 1;
55 | }
56 | };
57 |
58 | // Inheritance -> cat and spider INHERIT properties and methods from animal
59 | // meaning they have access to all the stuff that animals can do
60 | var cat = Object.create(animal);
61 | cat.numberOfLegs = 4;
62 | cat.soundIMake = 'meow';
63 | var spider = Object.create(animal);
64 | spider.numberOfLegs = 8;
65 | spider.soundIMake = 'scritch';
66 |
67 | // Another way to create objects
68 | // Constructor function
69 | function Animal(numLegs, sound) {
70 | console.log(this);
71 | this.numberOfLegs = numLegs;
72 | this.soundIMake = sound;
73 | }
74 |
75 | Animal.prototype = {
76 | speak: function() {
77 | console.log(this.soundIMake);
78 | },
79 | jump: function() {
80 | console.log('jump');
81 | }
82 | };
83 |
84 | console.log('CALLING CONSTRUCTOR --------');
85 | var cat = new Animal(4, 'meow');
86 | var spider = new Animal(8, 'scritch');
87 |
88 |
89 | var c = {
90 | numberOfLegs: 4,
91 | soundIMake: 'meow',
92 | speak: function() {
93 | console.log(this.soundIMake);
94 | }
95 | };
96 |
97 | var s = {
98 | numberOfLegs: 8,
99 | soundIMake: 'scritch',
100 | speak: function() {
101 | console.log(this.soundIMake);
102 | }
103 | };
104 |
105 | console.log(animal, cat, spider);
106 |
107 |
108 |
109 | // Classical Object Orientated Programming uses classes (JavaScript DOES NOT
110 | // use classes)
111 | // Classical example
112 | // THIS IS PSUEDOCODE, IT"S NOT REAL CODE IN ANY LANGUAGE,
113 | // it just shows the basic outline of a class
114 | //class Building(address, numRooms, owner) {
115 | //self.address = address;
116 | //self.numRooms = numRooms;
117 | //self.owner = owner;
118 |
119 | //self.logOwner = function() {
120 | //print self.owner;
121 | //}
122 |
123 | //self.addRooms = function(numRoomsToAdd) {
124 | //self.rooms += numRoomsToAdd;
125 | //}
126 | //}
127 | // Again, I want to stress that the above code is NOT VALID JAVASCRIPT, or any
128 | // other language, it's just psuedocode
129 |
130 | // Python Example
131 | //class Dog:
132 | //def __init__(self, name):
133 | //self.name = name
134 | //self.tricks = [] # creates a new empty list for each dog
135 |
136 | //def add_trick(self, trick):
137 | //self.tricks.append(trick)
138 |
139 | //fido = Dog('fido')
140 | //spot = Dog('spot')
141 |
142 | // A class acts like a template, we create individual (called instances) by
143 | // using the template and giving it specifics about our object
144 | // Create a few new Buildings
145 | //var building1 = new Building('1 Blue Jay Way', 100, 'Enron');
146 | //var building2 = new Building('42 Hitchikers Ave', 42, 'Haliburton');
147 |
148 | // building1 and building2 are two distinct buildings, they share a similar
149 | // structure (they have an address, a number of rooms, and an owner), but the
150 | // details vary between the two buildings.
151 |
152 | // In the classical scheme, the class itself is not an Object, it's just
153 | // a Template. You only use the class to create new instances, or objects
154 |
155 | // Javascript is weirdly different. It doesn't have classes, it ONLY has
156 | // Objects. So instead of classes being used to create Objects, Objects are
157 | // created by using a different object as a template. The difference is subtle,
158 | // but important, in that template objects are still objects, and can be acted
159 | // up just like any other object. I can change the template object, and it will
160 | // affect all the objects created from the template.
161 | //
162 | // Confusingly, it also has a few different ways to create Objects, which can
163 | // lead to a bunch of confusion. You'll likely see the following:
164 | // 1. new SomeObj();
165 | // 2. Object.create(someObj);
166 |
167 | // this IS valid JavaScript
168 | var building = {
169 | numRooms: 100,
170 | owner: 'Enron',
171 | address: '1 Blue Jay Way',
172 | logOwner: function() {
173 | console.log(this.owner);
174 | },
175 | addRooms: function(numRoomsToAdd) {
176 | this.numRooms = this.numRooms + numRoomsToAdd;
177 | }
178 | };
179 |
180 | // I can't call building with the 'new' keyword, and we'll see why in a bit,
181 | // but for now, I'm going to do things the second way
182 | var building1 = Object.create(building);
183 | var building2 = Object.create(building);
184 |
185 | building1.address = '1 Inifinity Drive';
186 | building1.numRooms = 850;
187 | building1.owner = 'Apple';
188 |
--------------------------------------------------------------------------------