├── README.md
├── courses
    ├── core
    │   ├── 1-html-and-css-foundations.md
    │   ├── 10-es6.md
    │   ├── 11-http.md
    │   ├── 12-http-apis.md
    │   ├── 13-http-apis-in-javascript.md
    │   ├── 14-react.md
    │   ├── 2-bootstrap.md
    │   ├── 3-javascript-foundations.md
    │   ├── 4-git-and-github.md
    │   ├── 5-jquery.md
    │   ├── 6-node-quickly.md
    │   ├── 7-sass.md
    │   ├── 8-webpack.md
    │   └── 9-bootstrap-with-sass.md
    └── side-quests
    │   ├── a-advanced-html-and-css.md
    │   ├── b-css-layouts-and-flexbox.md
    │   ├── c-underscore-and-lodash.md
    │   ├── d-react-native.md
    │   ├── e-bash.md
    │   └── f-backend-dev.md
├── resources
    ├── bash-cheat-sheet.md
    ├── command-line-cheat-sheet.md
    ├── git-cheat-sheet.md
    ├── jargon-buster.md
    └── npm-cheat-sheet.md
└── tasks
    └── 1-javascript-tasks.md


/README.md:
--------------------------------------------------------------------------------
 1 | # Become a web developer
 2 | 
 3 | This training resource is designed with the goal of training someone with no programming experience to become a frontend web / app developer as quickly as possible.
 4 | 
 5 | The course is designed around 'Abilities' and grouped into courses. The scheme is opinionated, and covers just enough to get a foothold as a frontend developer.
 6 | 
 7 | Courses typically consist of hand picked material from the internet. Suplimented with any other relevant information and some tasks.
 8 | 
 9 | ## Abilities
10 | 
11 | * Build static website with basic styling
12 |   * [HTML and CSS foundations](courses/core/1-html-and-css-foundations.md)
13 | 
14 | * Building a static website with some nice styling (no control of styling)
15 |   * [Bootstrap](courses/core/2-bootstrap.md)
16 | 
17 | * Collaborating with others
18 |   * [Git / Github](courses/core/4-git-and-github.md)
19 | 
20 | * Building a static website with some nice styling which is controlled
21 |   * [Sass](courses/core/7-sass.md)
22 |   * [Npm (and require)](courses/core/6-node-quickly.md)
23 |   * [Webpack for 'building' a codebase](courses/core/8-webpack.md)
24 |   * [Bootstrap with Sass](courses/core/9-bootstrap-with-sass.md)
25 | 
26 | * Building an interactive website (2010 style!)
27 |   * [Javascript Foundations](courses/core/3-javascript-foundations.md)
28 |   * [JQuery](courses/core/5-jquery.md)
29 | 
30 | * Accessing external data via HTTP JSON APIs
31 |   * [HTTP](courses/core/11-http.md)
32 |   * [HTTP APIs](courses/core/12-http-apis.md)
33 |   * [HTTP API library (Superagent)](courses/core/13-http-apis-in-javascript.md)
34 | 
35 | * Building an interactive website (2015 style!)
36 |   * [ES6/7](courses/core/10-es6.md)
37 |   * [React](courses/core/14-react.md)
38 |   * Routing (React router? pages.js)
39 | 
40 | ## Side Quests
41 | 
42 | * [Advanced HTML and CSS](courses/side-quests/a-advanced-html-and-css.md)
43 | * [CSS Layouts and Flexbox](courses/side-quests/b-css-layouts-and-flexbox.md)
44 | * [Underscore / Lodash](courses/side-quests/c-underscore-and-lodash.md)
45 | * [React-Native](courses/side-quests/d-react-native.md)
46 | * [Bash and Linux](courses/side-quests/e-bash.md)
47 | * [Backend Development](courses/side-quests/f-backend-dev.md)
48 | 


--------------------------------------------------------------------------------
/courses/core/1-html-and-css-foundations.md:
--------------------------------------------------------------------------------
 1 | #HTML and CSS foundations
 2 | 
 3 | # Outcome
 4 | 
 5 | You'll be able to build a static website, control where things go on the page and change the look and feel of things on the page.
 6 | 
 7 | You'll understand:
 8 | 
 9 | * The syntax and layout of HTML, most of the HTML `<tags>` and what they're used for.
10 | * What CSS is, and the different things you can do with it.
11 | 
12 | # Prerequisites
13 | 
14 | * Text editor (Sublime)
15 | * Web browser (Chrome)
16 | * Code School subscription
17 | * Codecademy account.
18 | 
19 | # Advice
20 | 
21 | You can watch codeschool videos faster than x1 if you want to.
22 | 
23 | HTML 5 and CSS 3 are the latest versions. But HTML and CSS are continually improved in modern browsers so the numbers aren't important. Just use the latest / best features.
24 | 
25 | ### HTML
26 | 
27 | HTML is old and all the browsers have to support it. As a result the tag names e.g. `<div>` make no sense :smile:. You just have to learn them...
28 | 
29 | ### CSS
30 | 
31 | Opinion: The 'box model' is old and very difficult to reason about. There's a newer model called the flex-box model which I find much easier :smile:.
32 | 
33 | Opinion: `float`, `block` and `inline` are hard and getting something to layout how you want it is surprisingly hard.
34 | 
35 | He talks alot about 'resetting' the css to override the browser defaults. There are tools / libraries to help with this, you wouldn't do it manually.
36 | 
37 | # Learning materials
38 | 
39 | # Core
40 | 
41 | * [Code School Front End Foundations Course](https://www.codeschool.com/courses/front-end-foundations/) (Level 1-5)
42 | 
43 | ## Alternative
44 | 
45 | * [Codeacademy](https://www.codecademy.com/courses/web-beginner-en-HZA3b/) No videos, learn by doing.
46 | 
47 | * [Shayhowe](http://learn.shayhowe.com/html-css/). All reading and visual.
48 | 
49 | * [Another reading example](http://websitesetup.org/html5-beginners-guide/)
50 | *
51 | ## Additional / useful
52 | 
53 | * [HTML Cheatsheet](http://www.simplehtmlguide.com/cheatsheet.php) (Might be a better one out there)
54 | 
55 | * [CSS Cheatsheet](http://adam-marsden.co.uk/css-cheat-sheet/)
56 | * [Another cheatsheet](http://websitesetup.org/html5-cheat-sheet/) (Wish it was just a website).
57 | # Tasks
58 | 
59 | * Run through the core learning materials + tasks.
60 | * [Codecademy problems](https://www.codecademy.com/en/courses/html-css-prj)
61 |   * Broadway
62 |   * Innovation Cloud
63 |   * Move
64 | * Get one of the above Codecademy courses to work on your laptop locally.
65 | 
66 | ## Optional tasks
67 | 
68 | * [Make recent Airbnb site from scratch](https://www.codecademy.com/en/skills/make-a-website/)
69 | 


--------------------------------------------------------------------------------
/courses/core/10-es6.md:
--------------------------------------------------------------------------------
 1 | # ES6 / ES2015 & ES7
 2 | # Outcome
 3 | 
 4 | You'll:
 5 | 
 6 | * Understand what ES6 (ES 2015 or ES.next) is.
 7 | * Be using ES6 by default in your code.
 8 | * Have an appreciation for ES7
 9 | 
10 | # Prerequisites
11 | 
12 | * Javascript ES5.
13 | 
14 | # Advice
15 | 
16 | Javascript has a poor reputation for a programming language. ES6 is a masssive step forward to making things 'proper'. It will make your coding more concise more readible. It will also help you when you come to learn other languages (most of the features are borrowed from elsewhere.)
17 | 
18 | Browsers don't support ES6 natively ([they do support some features](https://kangax.github.io/compat-table/es6/)), so we have to transpile ES6 -> ES5 for compatability in older browsers. To do this there is a tool called [Babel](https://babeljs.io/) (it's already in all our webpack projects :smile:).
19 | 
20 | # Learning materials
21 | 
22 | # Core
23 | 
24 | * [ES6 Features](https://github.com/lukehoban/es6features#readme)
25 | * [ES7 Features](https://github.com/hemanth/es7-features#readme)
26 | 
27 | # Tasks
28 | 
29 | * Take a look at theese ES6 Features we'll be using.
30 |   * let
31 |   * arrows
32 |   * template strings
33 |   * modules
34 |   * destructuring
35 |   * default + rest + spread (For React mainly)
36 |   * classes
37 |   * Object rest properties (ES7) (For React mainly)
38 |   * Object spread properties (ES7) (For React mainly)
39 | * For each feature, build an example of it working and look at the ES5 code that gets generated.
40 | 


--------------------------------------------------------------------------------
/courses/core/11-http.md:
--------------------------------------------------------------------------------
 1 | # HTTP
 2 | # Outcome
 3 | 
 4 | You'll:
 5 | 
 6 | * Understand some of the finer points of HTTP
 7 | 
 8 | # Advice
 9 | 
10 | HTTP is the 'protocol' used to load webpages. It's a standard agreed by a bunch of people with neck beards come up with, developers who do httpy stuff (Firefox / Chrome developers etc.) then follow those standards.
11 | 
12 | It's worth noting that HTTP is [Synchronous](http://stackoverflow.com/questions/748175/asynchronous-vs-synchronous-execution-what-does-it-really-mean), so when you fire off a HTTP request, you wait for the response, there is a persistent connection. If your internet is disrupted in the mean time, you'll most likely get an error.
13 | 
14 | HTTP calls can return data in many any file format.
15 | e.g:
16 | 
17 | * http://google.com will return HTML which your browser understands and does stuff with.
18 | * http://textfiles.com/100/914bbs.txt is a text file.
19 | * https://upload.wikimedia.org/wikipedia/commons/e/e9/Felis_silvestris_silvestris_small_gradual_decrease_of_quality.png is a png file.
20 | 
21 | You can invoke HTTP over the command line. The two most popular are `curl` and `wget`. Curl is a pain to use: [this helps me](https://curlbuilder.com/). Try `curl -XGET 'http://www.google.co.uk'`.
22 | 
23 | Redirection is quite important, it's very common to do these redirects
24 | * http -> https (secure is good :smile:).
25 | * http://google.com -> http://www.google.com.
26 | 
27 | # Learning materials
28 | 
29 | # Core
30 | 
31 | * [HTTP primer](http://code.tutsplus.com/tutorials/http-the-protocol-every-web-developer-must-know-part-1--net-31177)
32 | 
33 | 
34 | # Tasks
35 | 
36 | * Read the primer but stop at the section: Request and Response Message Formats
37 | * Questions (answers on a postcard!)
38 |   * Draw a sample url from memory and label each bit.
39 |   * What happens if you specify no port on your url? e.g. http://google.com
40 |   * Do me two query parameters: name which should be "john" and age which should be 20.
41 |   * What verbs are there?
42 |   * Which verb does a web browser when you load a page?
43 |   * What goes into a request?
44 |   * What is in a response?
45 | 
46 | 


--------------------------------------------------------------------------------
/courses/core/12-http-apis.md:
--------------------------------------------------------------------------------
  1 | # HTTP API
  2 | # Outcome
  3 | 
  4 | You'll:
  5 | 
  6 | * Understand how people use HTTP to write remote APIS
  7 | 
  8 | # Advice
  9 | 
 10 | Initially HTTP was used only for websites. But then some bright spark decided to also use it for 'APIs'.
 11 | 
 12 | ### WTF is API?
 13 | 
 14 | API is a horribly overriden term. It's quite general. Loosely it means: 'When i'm programming and do this. This will happen.'. It refers to a collection of local or remote function calls.
 15 | 
 16 | I found it really hard to define properly, so here are some examples.
 17 | 
 18 | * jQuery has an api. It's the desciption of all the functions jQuery has.
 19 |   * One part of that api would be: `$('my-class') #Will select all elements in the DOM which have .my-class and return all the HTML elements that match.`
 20 | * javascript doesn't have an api because it's not a library / framework, it's a programming language. I don't know why, but you wouldn't say 'javascript's api' to refer to the `+` operator. It's just part of the language. It's only things built on top of programming languages which have APIS. (1)
 21 | * http://ws.spotify.com/search/1/artist.json?q=kate%20bush is an api. Because it takes parameters and returns structured data.
 22 | * http://google.com is not an api, because it doesn't return computer readable structured data. (It does take parameters though! e.g. https://google.com/?q=hello+john)
 23 | 
 24 | So having thought about it more maybe: An API is a way of describing something which is conceptually like a 'function'. It takes parameters or data in and returns data out in a format a computer can easily understand.
 25 | 
 26 | Some of these APIs run locally e.g. jQuery. They execute all within your programming language and return data in your programming language e.g. an int or a string.
 27 | 
 28 | Some of these APIs run remotely e.g. http apis. You send a http message across the network to another process, which interprets the message. Runs a function and then sends a structured message back with the response.
 29 | 
 30 | ###Why are remote API calls a good idea?
 31 | 
 32 | Cons:
 33 | 
 34 | * Unreliable? If network breaks, API breaks.
 35 |   * HTTP uses something called TCP. Which helps with little mini failures. (2)
 36 | * Slower, networks are 'IO' (Input Output). IO is always slowest bit.
 37 | 
 38 | Pros:
 39 | 
 40 | * Keeping things secret
 41 |   * If you've written some code which does something that other people find hard to program a solution to and is useful. Then you're probably a millionaire. Keeping it secret is useful :smile:.
 42 |   * When you host a HTTP api, you just open up one port e.g. port 80 for HTTP traffic. This does not allow people to see you code. They just know what they can do with the API and what it will return. They have no idea / access to how it works. It's a 'black box'.
 43 | * Powerful hardware
 44 |   * If someone loads an app on their smartphone and it tries to locally compute some really complex thing it's going to be slow. Instead you can query a http api and let a MASSIVE server do this for you :) .
 45 | * Scalability
 46 |   * You could host your HTTP API on a single Core 2 duo server with 4GB of ram. But when you have a lot of users you might face 1000 HTTP requests per minute. At some point, your server will not cope and the requests will take longer. At some point some people won't even get responses any more (a HTTP timeout).
 47 |   * With HTTP APIs you can host 2x Core 2 Duo server with 4GB of ram. You then put a very lightweight, industrial strength HTTP server at the front which simply diverts requests on to one of the two. This is called a load balancer. NGINX and HA-Proxy are the big ones.
 48 | * Keeping things REALLY seperate (and reusable)
 49 |   * If you put all your code all in one project it tends to grow and grow and eventually becomes a steaming mess. Some people think that splitting things out might help. (This is a hard topic.)
 50 | * Using various programming languages
 51 |   * Different programming languages have different strengths / weaknesses (3). You might wish to use a different language for a particular part of your app. You could split your http api over 3 languages.
 52 | 
 53 | When talking about HTTP APIs another word that's bounded around alot is REST. It's basically a convention on how to structure which HTTP verbs (GET, POST, PUT etc.) you use depending on what you're doing. It's probably a good idea to roughly follow rest. But realistically HTTP APIs are just a way of remote calling a function. It's a good idea that those APIS 'don't have state' and are predictable. It would be bad if you called a GET HTTP API once, and this affected the response of the second call.
 54 | 
 55 | ###Why HTTP APIs though?
 56 | 
 57 | This has really kicked off in the last 5 years. The primary reason is that the web sandbox only allows you to call out to things using the HTTP protocol. Alot of technologies in the last 10 years became popular and then became standard because websites are very popular (obviously). And the restrictions of the web haven't really changed, so in the end people found ways to make these things good. E.g. Javascript (which was truly awful 10 years ago). And HTTP for APIs, which would have made you sound mad 10 years ago. Once the tools / online resources became available people then started using them where they didn't even need to (desktop apps / mobile apps).
 58 | 
 59 | ###So what is standard?
 60 | 
 61 | Restful(ish) HTTP APIS which return JSON as the response format. You can also return XML, both are machine readible. JSON is more human readable, which has made JSON popular.
 62 | 
 63 | #### When you might not use HTTP
 64 | 
 65 | You care about performance e.g. games, torrents, skype. These are probably going to use something which operates using UDP. There is a new thing I know nothing about called webrtc that I think does this for websites (appear.in uses it I think).
 66 | 
 67 | If you want asynchronous communications e.g. a push notification. Then HTTP has not got your back. Websockets is a relatively recent addition to browsers that can do it. For example when a hangout comes in and Gmail pops it open, that's probably websockets.
 68 | 
 69 | Async is more complicated to code and reason about than sync. So use sync unless you need async.
 70 | 
 71 | #### When might you not use JSON
 72 | 
 73 | You need to be super-careful about checking the format of data in or out. Banks are reknowned for using XML (which can have a 'schema' with it, which lays out rules for what is / isn't allowed). XML is just not great IMO. I'd rather use JSON and write some code to validate it's correct...
 74 | 
 75 | You care about the size of the data you're sending around. JSON is human readible, but it's not compressed at all. There are formats which compress it down to binary and back again in a repeatable way.
 76 | 
 77 | * [BSON (binary JSON)](https://en.wikipedia.org/wiki/BSON)
 78 | * [Profobuf (by google)](https://developers.google.com/protocol-buffers/?hl=en)
 79 | * [Thrift (by twitter)](https://thrift.apache.org/)
 80 | 
 81 | But to use these, you need a library with can 'parse' and 'serialize' these formats. Debugging messages is also impossible without serializing the messages back to a human readible form.
 82 | 
 83 | # Learning materials
 84 | 
 85 | # Core
 86 | 
 87 | * [HTTP API Primer](http://code.tutsplus.com/tutorials/a-beginners-guide-to-http-and-rest--net-16340)
 88 | 
 89 | 
 90 | # Tasks
 91 | 
 92 | * Read the primer
 93 | * Read the advice.
 94 | * Compare [JSON api call](http://ws.spotify.com/search/1/artist.json?q=kate%20bush) to [XML api call](http://ws.spotify.com/search/1/artist?q=kate%20bush)
 95 | * Download [Postman](https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop?hl=en) and use it to call this api: http://ws.spotify.com/search/1/artist.json?q=kate%20bush
 96 | 
 97 | # Footnotes
 98 | 
 99 | (1) The `+` operator is really just a special function if you think about it. var + = function(a,b) { .... }. It's just that you don't say: `+(1, 2)` you say `1 + 2`.
100 | 
101 | Some languages (e.g. scala) let you write functions which can be used 'infix' like this. e.g. `infix var add = function(a,b) { a + b }; 1 add 2;` This allows you to write more mathematical operators and stuff. Mental.
102 | 
103 | (2)
104 | 
105 | [http://www.diffen.com/difference/TCP_vs_UDP](TCP vs UDP). TCP is slower and has more guarentees than UDP. UDP is faster as a result. You would always use something with TCP unless you had performance requirements. When you play DOTA, it will probably use TCP to find a match / manage you friends list, but when it's sending you information about hero movements, that's UDP. Skype will work with UDP.
106 | 
107 | (3)
108 | 
109 | Interestingly, no one language seems to have nailed everything. There is nearly always a trade off of some sort.
110 | 
111 | C and C++ are really fast, but super hard to understand as a human being.
112 | Ruby on Rails is quick to program, but has pretty bad performance.
113 | etc.
114 | 
115 | Whatsapp wrote their code in Erlang (which is super good at messagey stuff), they sold to Facebook for $18B with just ~20 devs on staff. Their success was probably largely based around picking the right programming language for the job :smile:.  Mental.
116 | 


--------------------------------------------------------------------------------
/courses/core/13-http-apis-in-javascript.md:
--------------------------------------------------------------------------------
 1 | # HTTP APIs in Javascript
 2 | # Outcome
 3 | 
 4 | You'll:
 5 | 
 6 | * Understand how to grab data from HTP apis in javascript code
 7 | 
 8 | # Advice
 9 | 
10 | ### How this works
11 | 
12 | User opens your website. HTML, CSS and Javascript is downloaded. Javascript starts executing. You javascript code then makes what some people call an 'AJAX' request to get data from a HTTP API.
13 | 
14 | There are low level functions to do this in the browser: `XMLHttpRequest`. They're quite horrible.
15 | 
16 | ### How we do it
17 | Instead we'll use a library. The nicest library for doing this IMO is [SuperAgent](http://visionmedia.github.io/superagent/). Super agent uses a [fluid interface](https://en.wikipedia.org/wiki/Fluent_interface). Where you chain loads and loads of methods together to make everything very readible.
18 | 
19 | ### JSON deserializing / serializing
20 | 
21 | With any data format (json, xml, etc.) there are two common operations we can do them.
22 | 
23 | ####Serialize (marshal, stringify, to_string)
24 | 
25 | Converts an object into a string.
26 | 
27 | ```
28 | JSON.stringify({a: 1})
29 | 
30 | => '{"a": 1}'
31 | ```
32 | 
33 | ####Parse (unmarshal, deserialize)
34 | 
35 | Converts a string into an object.
36 | 
37 | ```
38 | JSON.parse('{"a": 1}')
39 | 
40 | => {a: 1}
41 | ```
42 | 
43 | Data goes across the network in serialized (string) form. So each time we get some data across the wire it would come in raw (string) and need deserializing. (Some libraries do this automatically (SuperAgent does))
44 | 
45 | # Learning materials
46 | 
47 | # Core
48 | 
49 | * [SuperAgent](http://visionmedia.github.io/superagent/)
50 | 
51 | # Tasks
52 | 
53 | * Skim through the Super Agent docs
54 | * Query the spotify api in code and display the results on the page using jQuery: http://ws.spotify.com/search/1/artist.json?q=kate%20bush
55 | 


--------------------------------------------------------------------------------
/courses/core/14-react.md:
--------------------------------------------------------------------------------
  1 | # React
  2 | # Outcome
  3 | 
  4 | You'll:
  5 | 
  6 | * Understand what react is and be able to make interactive web apps with it.
  7 | * Understand what JSX is.
  8 | * Why you learned everything else :) (Webpack, ES6, Lodash, SuperAgent) (Cos they work amazingly with React)
  9 | 
 10 | # Advice
 11 | 
 12 | ##JSX
 13 | 
 14 | JSX is important with React. We'll always use it. JSX is another transpiled language (like we do for ES6 -> ES5 code). JSX lets you write HTML directly in javascript. That's it.
 15 | 
 16 | ```
 17 | var someHtml = <div>Hi Buddy</div>
 18 | ```
 19 | 
 20 | We'll use webpack to do the transpilation.
 21 | 
 22 | JSX doesn't quite generate a string. I think it generates DOM javascript 'objects'. You can check for yourself in the debugger.
 23 | 
 24 | ### Differences from normal HTML
 25 | 
 26 | #### Attribute names are different
 27 | 
 28 | They're camel cased by convention (instead of dashed). Sometimes they're a tiny bit different, but React normally just tells you the problem and the fix in the console :). [Read more](https://facebook.github.io/react/docs/tags-and-attributes.html)
 29 | 
 30 | `<button class="btn btn-primary">Click Me</button>` -> `<button className="btn btn-primary">Click Me</button>`
 31 | 
 32 | #### You can write Javascript inside your HTML.
 33 | 
 34 | JSX works just like normal HTML unless you do one thing. If you put `{}` then inside the brackets you go back to javascript.
 35 | 
 36 | ```
 37 | var x = 1
 38 | var someHtml = <div>{x + 1}</div>
 39 | ```
 40 | 
 41 | ```
 42 | var buttonClass = 'btn btn-primary'
 43 | var button  = <button className={buttonClass}>Click Me</button>
 44 | ```
 45 | 
 46 | *Exception*
 47 | It's quite rare to use it though.
 48 | ```
 49 | var elementType = 'div'
 50 | var someHtml = <elementType></elementType>
 51 | ```
 52 | 
 53 | ##React
 54 | 
 55 | React is a javascript library which helps build more complex interactive UIs. It helps you build 'views' (User Interfaces) which change as inputs come in (e.g. data from a http api, or a user clicking things).
 56 | 
 57 | It provides about 5 important APIs, that you need to understand well. And a bunch of less important things you can learn as you go.
 58 | 
 59 | Important APIs:
 60 | 
 61 | ###React.render
 62 | 
 63 | ```
 64 | React.render(<p>Hello</p>, document.getElementById('content'));
 65 | ```
 66 | In the order javascript evalulates it:
 67 | 
 68 | * `<p>Hello</p>` is JSX for the html `"<p>Hello</p>"`
 69 | * `document.getElementById('content')`  is equivalent to `$('#content')` in jquery. But without jQuery cos you probably wouldn't mix up your react and jQuery.
 70 | * So this whole thing is pretty much like: `$('#content').replace(<p>Hello</p>)`
 71 | 
 72 | 
 73 | ###React.createClass (React Components)
 74 | 
 75 | `React.createClass` is how you define a 'component'. Components is the only idea in React. They can have [different functions defined inside them](https://facebook.github.io/react/docs/component-specs.html): e.g. `render`, `componentWillMount`.
 76 | 
 77 | Components are 'defined' (once), 'created' (0 or more times). Once a component is 'created' it 'lives' for a period of time (whilst the user has the website open?).
 78 | 
 79 | The functions inside the component definition are called at certain points in a components life.
 80 | 
 81 | ####Defining a component
 82 | ```
 83 | var myComponent = React.createClass({
 84 |   render: function() {
 85 |     return (
 86 |       <a className="btn btn-default">I am a button! Click me!</a>
 87 |     );
 88 |   }
 89 | })
 90 | ```
 91 | We will be putting each component in it's own file (and `module.export`ing it for use else where.)
 92 | ####Creating (instantiating) a component
 93 | You can then write: `<myComponent />`. So you can basically define your own html tags. E.g. `<hero />` which would render a dota hero. You can reuse it anywhere.
 94 | 
 95 | ###render
 96 | 
 97 | `render` is a function which returns JSX. The component will call the render function whenever it wants to know: 'What does this component currently look like at this point in its life.'. It will take the output of the `render` function and put it into the browser (it updates the DOM automatically every time it calls the render function).
 98 | 
 99 | Every component *Must* have a `render` function.
100 | 
101 | ###Props (properties -> could be called 'arguments' really)
102 | 
103 | Props are properties that get 'passed in' to the component when it's created.
104 | 
105 | Props are *immutable* - they can never change.
106 | 
107 | ####Passing props in
108 | 
109 | `<hero name='Puck' />`
110 | 
111 | Here we pass a prop called `name` into the hero with the value `'Puck'`.
112 | 
113 | ####Talking about props inside the component
114 | 
115 | Inside any of the functions we pass into `createClass` e.g. `render`.  We can access the prop using `this.props.name`.
116 | 
117 | `this.props` is an object with all the props in. e.g. `{name: 'Puck'}`
118 | ```
119 | var hero = React.createClass({
120 |   render: function() {
121 |     return (
122 |       <div>{this.props.name}</div>
123 |     );
124 |   }
125 | })
126 | ```
127 | I'm aware that `this` has just randomly just popped up on you :p . This is because components are conceptially a 'Class' and we're straying into Object Oriented Programming (OOP), which is quite famous / popular. This is a tricky concept which we will cover fully later, I think you can program React without really understanding it fully. (I know not understanding stuff fully kind of sucks though :( )
128 | 
129 | ###State
130 | 
131 | State very similar to props, except for it's not immutable - so they can change over time.
132 | 
133 | You should favour props where possible. Cos things not changing is easier to reason about in a programmers mind.
134 | 
135 | 
136 | ####Setting state
137 | 
138 | #####getInitialState function
139 | 
140 | ```
141 | var hero = React.createClass({
142 |   getInitialState: function() {
143 |     return {name: 'unknown'}
144 |   },
145 | 
146 |   render: function() {
147 |     return (
148 |       <div>{this.state.name}</div>
149 |     );
150 |   }
151 | })
152 | ```
153 | #####setState function
154 | In any of the functions inside the component. You can say `this.setState({name: 'Danger Mouse'})`.
155 | 
156 | Any time you change the state of a component React will call the `render` function again and update the component automatically on the screen.
157 | 
158 | Do not set state like this: `this.state = {name: 'Danger Mouse'}`. It won't call the `render` function, and might just completely break everything.
159 | 
160 | ####Talking about state inside the component
161 | 
162 | Inside any of the functions we pass into `createClass` e.g. `render`.  We can access the state (which is also an object like props) using `this.state`.
163 | 
164 | ###componentWillMount
165 | 
166 | `componentWillMount` is a function you define inside your component. It gets called when you create your component. Use it to do stuff before your component is shown on the screen.
167 | 
168 | ###componentDidMount
169 | `componentDidMount` is a function you define inside your component. It gets called a little after `componentWillMount`. Use it to do stuff before your component is shown on the screen.
170 | 
171 | 
172 | ##How to think about React
173 | 
174 | * React is a library which lets you create new HTML tags (components) e.g: `<hero name='Puck'/>`.
175 | * React components are essentially: `props` (immutable) + `state` (can change) and a `render` function which probably talks about `props` and `state`.
176 |   * Think of react as: `function render(props, state) { return(<div>{this.props.name} {this.state.somethingElse}) }`
177 |   * This function gets called every time state changes and will automatically update the DOM.
178 | 
179 | # Learning materials
180 | 
181 | # Core
182 | 
183 | * [React Primer](https://github.com/mikechau/react-primer-draft)
184 | * [React Frontend Masters](https://frontendmasters.com/courses/react/)
185 | * [Official Docs](https://facebook.github.io/react/docs/getting-started.html) bit crap in my opinion. They're good once you understand React enough to get stuff done, but not amazing for learning IMO.
186 | 
187 | # Tasks
188 | 
189 | Do it like throwing Spaghetti at wall. Feel free to jump backwards, re-read, re-watch, play around until you get it.
190 | 
191 | * Read my Advice.
192 | * Skim the Primer.
193 | * Watch frontend masters react course.
194 | * Do the [tasks](https://docs.google.com/document/d/1GfyOXSaBuvjIsNMh31gKfED_q7H-_3muY9xuRgStjQY/edit?usp=sharing)
195 | 


--------------------------------------------------------------------------------
/courses/core/2-bootstrap.md:
--------------------------------------------------------------------------------
 1 | #Bootstrap
 2 | 
 3 | # Outcome
 4 | 
 5 | You'll:
 6 | 
 7 | * Be able to get decent default styling on your web pages
 8 | * Understand what 'responsive' means and how make your page responsive it.
 9 | * Less precise but useful layout techiques
10 | * Be able to build lots of components you can see all over the web
11 | * How to include icons onto your page
12 | 
13 | # Prerequisites
14 | 
15 | * [html and css foundations](1-html-and-css-foundations.md)
16 | 
17 | Bootstrap is a great tool when you're starting out. When you get more advanced you might move away from it (i'm not that advanced yet!).
18 | 
19 | Embrace the grid for nearly everything you do.
20 | 
21 | Use it to 'reset' the browser defaults (which are truly awful).
22 | 
23 | We're going to learn how to customise Bootstrap in a later course, you can modify the default fonts, and colours it uses :smile:
24 | 
25 | [Bootstrap v4](http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/) is coming quite soon. But we'll use 3 for now.
26 | 
27 | # Learning materials
28 | 
29 | # Core
30 | 
31 | * [Code School Blasting off with bootstrap](https://www.codeschool.com/courses/blasting-off-with-bootstrap) (All levels)
32 | 
33 | * [Bootstrap](http://getbootstrap.com/) documentation [css](http://getbootstrap.com/css/) and [components](http://getbootstrap.com/components/) are particularly useful
34 | 
35 | ## Alternative
36 | 
37 | ## Additional / useful
38 | 
39 | # Tasks
40 | 
41 | * Run through the code school course + tasks.
42 | * [Codecademy problems](https://www.codecademy.com/en/courses/html-css-prj)
43 |   * Do shutterbug through to headlines (and everything in-between :smile:) (If this is taking ages, maybe stop!)
44 | * Get headlines to work locally on your laptop.
45 | * Build a demo site locally with:
46 |   * 3 bootstrap [css](http://getbootstrap.com/css/) features you've yet to use in the above.
47 |   * 3 bootstrap [component](http://getbootstrap.com/components/) features you've yet to use in the above.
48 | 


--------------------------------------------------------------------------------
/courses/core/3-javascript-foundations.md:
--------------------------------------------------------------------------------
 1 | #Javascript Foundations
 2 | 
 3 | Warning: This course is long. It's 4 code school courses. But once you're done, you'll understand everything you need to know about Javascript :smile:.
 4 | 
 5 | # Outcome
 6 | 
 7 | You'll:
 8 | 
 9 | * Understand the majority of the features of the Javascript language.
10 | * Be ready to learn how to make interactive web pages.
11 | 
12 | # Prerequisites
13 | 
14 | * [html and css foundations](1-html-and-css-foundations.md)
15 | 
16 | # Advice
17 | 
18 | * Javascript has versions (although Chrome, for example, tends to release them feature by feature all the time). Version ES5 is the current version, but ES6 is a lot better :smile:
19 | * The code school courses are based on ES5.
20 | * He says semi colons are necessary and semi colons are good. They're not necessary anymore in modern javascript.
21 | * These days we don't tend not to use `while` loops or `for` loops. We'll use arrays and a collections library instead (Like `.map`). You'll learn this soon.
22 | * `undefined` and `null` are a pain. There are some libraries which help us do `undefined` and `null` checking later :smile:
23 | 
24 | * Javascript (Especially ES5) has a lot of things programmers don't like / find hard. ES6 helps alot of these things.
25 |   * Variable scope
26 |   * When you load a .js file `<script src="myScript.js" />` it just runs...
27 |   * All global variables in any of your .js files are accessible globally, so you can access them from anywhere. (Try not to use global vars...)
28 |   * There are ~3 ways to declare a function :(
29 |   * Hoisting is dangerous!
30 |   * Objects in ES5 are quite basic (and have more than one way of doing things... overlap between objects and prototypes)
31 | 
32 | * We will use arrays. But we won't use the manipulation methods much e.g. `pop`, `push` or `shift`. We'll use collection libraries :smile:
33 | * Some of the stuff they do in the closure section you would never do.
34 | * ES6 offers much better syntax for doing prototypes....
35 | * Take loop performance section with a pinch of salt. Performance is hard. If you code is slow - measure how slow it is and try and speed it up.
36 | * We'll be learning [something](http://browserify.org/) later to help with namespaces.
37 | 
38 | # Learning materials
39 | 
40 | # Core
41 | 
42 | * [Javascript Road Trip Part 1](https://www.codeschool.com/courses/javascript-road-trip-part-1)
43 | * [Javascript Road Trip Part 2](https://www.codeschool.com/courses/javascript-road-trip-part-2)
44 | * [Javascript Road Trip Part 3](https://www.codeschool.com/courses/javascript-road-trip-part-3)
45 | * [Javascript best practices](https://www.codeschool.com/courses/javascript-best-practices) (Just watch section 2, Skip section 4 (Namespacing))
46 | 
47 | ## Additional / useful
48 | 
49 | * [Cheatsheet](http://marijnhaverbeke.nl/js-cheatsheet.html)
50 | 
51 | # Tasks
52 | 
53 | * Do all the code school courses and tasks above.
54 | 
55 | * Write a local program which prints 'Hello World' to the console
56 | 
57 | 
58 | 


--------------------------------------------------------------------------------
/courses/core/4-git-and-github.md:
--------------------------------------------------------------------------------
 1 | #Git and Github
 2 | 
 3 | # Outcome
 4 | 
 5 | You'll:
 6 | 
 7 | * Be able to use the common git commands
 8 | * Collaborate with other developers
 9 | * Version your code so you can back to any previous point in time.
10 | * Use github and undestanding the PR model for reviewing code.
11 | 
12 | # Prerequisites
13 | 
14 | None
15 | 
16 | #Advice
17 | 
18 | 95% of developers use git for version control. It has ALOT of features, you'll use <50% of them (as do I!).
19 | 
20 | Git is very command line based, i've not found a UI that works very well. The tool that visually helps me to understand what's going on is Github.
21 | 
22 | We'll be using the Pull Request model so I can take a look at the code you're writing and review it for you to help you get better :smile:.
23 | 
24 | # Learning materials
25 | 
26 | # Core
27 | 
28 | * [Code School Git Real 1](https://www.codeschool.com/courses/git-real) (*not* Git Real 2)
29 | * [Code School Git Mastering Github] (https://www.codeschool.com/courses/mastering-github) Level 1 and 2 only.
30 | ## Alternative
31 | 
32 | ## Additional / useful
33 | 
34 | [Git cheatsheet](https://training.github.com/kit/downloads/github-git-cheat-sheet.pdf)
35 | 
36 | # Tasks
37 | 
38 | * Run through the code school course + tasks.
39 | * Setup git on local machine (you should be using SSH rather than https when you use git (no password prompts))
40 |   * Install git via [Brew](http://brew.sh/)
41 |   * Name
42 |   * Email
43 |   * [Git Radar](https://github.com/michaeldfallen/git-radar), which makes your command line look awesome.
44 | * Create a public git repo, create a readme.md, do a commit to master, put that commit on github, create a branch, do a change to readme.md, submit a pull request on that branch on github which RG will approve :smile:
45 | * Start using it for all other task submissions once you're done :smile:
46 | 


--------------------------------------------------------------------------------
/courses/core/5-jquery.md:
--------------------------------------------------------------------------------
 1 | #jQuery
 2 | 
 3 | # Outcome
 4 | 
 5 | You'll:
 6 | 
 7 | * Be able to manipulate the webpage based on user input using javascript code
 8 | * Be able to build an interactive website :D
 9 | 
10 | # Prerequisites
11 | 
12 | * Javascript Fundamentals
13 | * HTML and CSS Foundations
14 | 
15 | #Advice
16 | 
17 | jQuery was a revelation about 7-8 years ago, it's fallen out of favour by serious web devs more recently. But it's still super simple and it's by far the easiest to understand :simple:. You can build pretty much any kind of interactive website you can imagine using it.
18 | 
19 | jQuery mainly focuses on updating the html on the site dynamically. But it also does a TONNE of other stuff, you should only use it for manipulating HTML and listening to user events (e.g. a click).
20 | 
21 | IMO where jQuery falls down is the maintainabiilty of the code as you build a large site. It's easy to write buggy code, which is hard to debug. But this is quite subtle, so you might not see any of those cracks whilst you're working with it.
22 | 
23 | # Learning materials
24 | 
25 | # Core
26 | 
27 | * [Code School Try jQuery](https://www.codeschool.com/courses/try-jquery)
28 | 
29 | ## Alternative
30 | 
31 | * [jQuery docs](https://api.jquery.com/) (Could be better really.)
32 | ## Additional / useful
33 | * [better? jQuery docs](http://jqapi.com/)
34 | 
35 | # Tasks
36 | 
37 | * Run through the code school course + tasks.
38 | * Build a website with a button 'Find me a hero button' that picks a random Dota 2 Hero and displays their name and picture every time you click the button.
39 | 
40 | 


--------------------------------------------------------------------------------
/courses/core/6-node-quickly.md:
--------------------------------------------------------------------------------
 1 | #Node (Quickly)
 2 | 
 3 | # Outcome
 4 | 
 5 | You'll:
 6 | 
 7 | * Have a rough idea what node is
 8 | * Have a good understanding of the module system, how to require code and export code.
 9 | * Have a good understanding of NPM.
10 | 
11 | # Prerequisites
12 | 
13 | * Javascript Fundamentals
14 | 
15 | #Advice
16 | 
17 | Ignore what he says Node is for. It's for any 'backend' you like really. It's not very low level IMO, it's not just for performance or event driven / real time web (dunno what real time web is...) stuff.
18 | 
19 | Hipster developers (you) tend to write backends in Ruby (on Rails) / Node (probs 30% each).
20 | 
21 | Backend: Code which does the heavy lifting of an application. It's typically hosted on a server somewhere. It will talk to DBs and have some kind of endpoint (e.g. http api) the UI (e.g. website) can talk to it through. The code can easily be kept secret (e.g. Google) and can therefore be used to make money.
22 | 
23 | # Learning materials
24 | 
25 | # Core
26 | 
27 | Skim first 3, no exercises. Level 4 in detail. (No other levels)
28 | 
29 | * [Code School Real Time Web with Node.js](https://www.codeschool.com/courses/real-time-web-with-node-js)
30 | 
31 | ## Alternative
32 | 
33 | # Tasks
34 | 
35 | * Run through the code school course (1-3) probs don't bother with tasks.
36 | * Pay close attention to Level 4. Module system + npm will be important very soon. Do the tasks for this level.
37 | * [Install node on your mac](https://gist.github.com/richardgill/4b13958b6ad0267f8e07)
38 | 
39 | 


--------------------------------------------------------------------------------
/courses/core/7-sass.md:
--------------------------------------------------------------------------------
 1 | #Sass
 2 | 
 3 | # Outcome
 4 | 
 5 | You'll:
 6 | 
 7 | * Have a general understanding of Sass.
 8 | * Have a good understanding of:
 9 |   * Variables
10 |   * Importing
11 | 
12 | Other than importing / variables, the other features are a nice to have right now.
13 | 
14 | # Prerequisites
15 | 
16 | * HTML and CSS foundations
17 | 
18 | #Advice
19 | 
20 | We'll use the extension .scss
21 | 
22 | Another alternative is LESS, which is very, very similar, but slighty worse IMO.
23 | 
24 | The whole point is to make CSS less rubbish :). The most common features we'll use are: variables and imports. I personally don't use the advanced features that much.
25 | 
26 | Bootstrap can be imported purely as Sass, you can then override a massive list of variables to control almost every aspect of how it works (colors, paddings, fonts etc.).
27 | 
28 | There are bunch of useful Sass things in library [Bourbon](http://bourbon.io/). It's too advanced for me :).  But I know some good frontend devs use it :).
29 | 
30 | ###Building Sass
31 | 
32 | Sass is 'compiled': `.scss` -> `.css` (since `.css` is source code it's technically a 'transpile' (fancy!))
33 | 
34 | So you write your website in .scss, .html and .js and you 'build' it to .css, .html and .js
35 | 
36 | We will use a tool called webpack to help do this compilation (and later, other compilations for javascript)
37 | 
38 | # Learning materials
39 | 
40 | # Core
41 | 
42 | * [Code School Assembling Sass](https://www.codeschool.com/courses/assembling-sass) (Level 1 & 2. Skip or Skim the rest.)
43 | 
44 | ## Alternative
45 | 
46 | # Tasks
47 | 
48 | * Run through code school + tasks (you can do this quite quickly, variables are important, the rest is nice to know)
49 | 


--------------------------------------------------------------------------------
/courses/core/8-webpack.md:
--------------------------------------------------------------------------------
 1 | #Webpack
 2 | 
 3 | # Outcome
 4 | 
 5 | You'll:
 6 | 
 7 | * Have a basic understanding of what webpack is and what it's used for.
 8 | * Be able to use webpack using our seed project.
 9 | 
10 | # Prerequisites
11 | 
12 | * SASS and ES6 help.
13 | 
14 | # Advice
15 | 
16 | Webpack is a tool which helps you 'build' code. (Take things which won't quite run in the browser e.g. .scss or ES6 Javascript and convert them to vanilla HTML, CSS and JS (transpile them))
17 | 
18 | It's the new hotness and it's quite easy to setup.
19 | 
20 | What will webpack do for us:
21 | 
22 | * Run a server so you can access your site like this: http://localhost:8000
23 |   * This is good because it's closer to the real deal (as opposed to file://myfile.html, i've seen webpages which worked on a server but not as a file.)
24 | * Transpile SCSS into CSS
25 | * Let you use the `require` syntax to require one of your `.js` files from another. (This solves the global var problem in javascript)
26 |   * This works by 'bundling' many files into one giant file. (So it's also a sort of transpile)
27 |   * You can also require libraries you got using NPM. e.g. `var $ = require('jQuery')`. `$` will then only be defined in your current file.
28 | * Transpile ES6 (latest) Javascript into ES5 (current version which all browsers support) Javascript
29 | * Watch for your files to change, and automatically redo the above transpiles and refresh your browser automatically.
30 | 
31 | # Learning materials
32 | 
33 | # Core
34 | 
35 | * [Webpack Cookbook](https://christianalfoni.github.io/react-webpack-cookbook/index.html) Sections: Intro, 1, 3, skim 4 (skim everything a bit I think)
36 | 
37 | # Tasks
38 | 
39 | * *Skim* through the cookbook.
40 | * Checkout the [sample webpack project](https://github.com/richardgill/webpack-seed).
41 |   * Read the readme for the commands you can run
42 |   * Modify some SCSS and check it compiles to CSS and you can see it in chrome
43 |   * Modify some javascript and look at the output in chrome
44 |   * Do some javascript `require`s and look at the output in chrome
45 |   * Look at how javascript's ES6's features are being 'compiled' in Chrome
46 | 


--------------------------------------------------------------------------------
/courses/core/9-bootstrap-with-sass.md:
--------------------------------------------------------------------------------
 1 | #Bootstrap with Sass
 2 | 
 3 | # Outcome
 4 | 
 5 | You'll:
 6 | 
 7 | * Be able to import bootstrap via Sass.
 8 | * Be able to modify the default style of Bootstrap by overriding the bootstrap Sass variables.
 9 | 
10 | # Prerequisites
11 | 
12 | * Sass, webpack
13 | 
14 | # Advice
15 | 
16 | The bootstrap css files you've been importing into your projects are actually generated using Less. There is a sister project to generate the css using Sass.
17 | 
18 | The Sass for the bootstrap project is split into various files. You can see the files [here](https://github.com/twbs/bootstrap-sass/tree/master/assets/stylesheets). Particularly the [main](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/_bootstrap.scss) file and [variables](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss) file.
19 | 
20 | Previously we've been overriding little bits of CSS here and there to change the style of bootstrap's default colors, font-sizes, fonts etc..
21 | 
22 | Now we can override some of those variables and control the exact theme of our site :smiley:
23 | 
24 | # Learning materials
25 | 
26 | # Core
27 | 
28 | * [Sass variables](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss) Have a skim.
29 | * [Less variables](http://getbootstrap.com/customize/#less-variables) In a nicer format than above, the names are the same / similar.
30 | 
31 | # Tasks
32 | 
33 | * *Skim* through the Sass/Less variables to get an idea of the kind of things you can modify (EVERYTHING!).
34 | * Checkout the [sample webpack-bootstrap project](https://github.com/richardgill/webpack-bootstrap-seed).
35 |   * Look at `main.scss`, `_bootstrap.scss` and `_variable_overrides.scss`.
36 |   * In `_variable_overrides.scss` modify:
37 |     * Default font
38 |     * Primary brand color
39 | * Convert Bear Medic to be Sass + Bootstrap :smiley:
40 | 


--------------------------------------------------------------------------------
/courses/side-quests/a-advanced-html-and-css.md:
--------------------------------------------------------------------------------
 1 | #Advanced HTML and CSS
 2 | 
 3 | # Outcome
 4 | 
 5 | You'll understand:
 6 | 
 7 | * More about CSS and HTML
 8 | 
 9 | # Learning materials
10 | 
11 | # Core
12 | 
13 | * [Codeschool HTML Formations](https://www.codeschool.com/courses/front-end-formations)
14 | * [Codeschool CSS Cross Country](https://www.codeschool.com/courses/css-cross-country)
15 | 


--------------------------------------------------------------------------------
/courses/side-quests/b-css-layouts-and-flexbox.md:
--------------------------------------------------------------------------------
 1 | #CSS layouts and Flexbox(Not ready)
 2 | 
 3 | # Outcome
 4 | 
 5 | You might understand: How box layouts work. (I still don't)
 6 | 
 7 | You will understand: How flexbox layouts work.
 8 | 
 9 | ## Why
10 | 
11 | The standard layout in HTML is weird. I still don't 100% understand it. I found even after many hours using standard layout I still sometimes struggled.
12 | 
13 | Flexbox is a newer way of laying things out that is far more sensible. I found after a couple of hours I could make any layout I wanted 99% of the time :smile:
14 | 
15 | #Advice
16 | 
17 | Couldn't find a perfect guide, these guides are pretty good but not perfect.
18 | 
19 | When something is prefixed with `webkit-` you shouldn't need to do that (that's how they prefix experimental webkit features)
20 | 
21 | Bare in mind [which browsers flexbox supports](http://caniuse.com/#feat=flexbox)
22 | 
23 | # Learning materials
24 | 
25 | * https://css-tricks.com/snippets/css/a-guide-to-flexbox/
26 | * http://www.sketchingwithcss.com/samplechapter/cheatsheet.html
27 | * https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
28 | * http://learnlayout.com/flexbox.html
29 | 
30 | # Tasks
31 | 
32 | https://docs.google.com/document/d/1XtgmPh_edSk_H-EUlhiyfurmlEkytNjZXdwBDgnNTIg/edit?usp=sharing
33 | 
34 | 


--------------------------------------------------------------------------------
/courses/side-quests/c-underscore-and-lodash.md:
--------------------------------------------------------------------------------
 1 | #Underscore and Lodash(Not ready)
 2 | 
 3 | # Outcome
 4 | 
 5 | You will understand what underscore and lodash are and why you should use them when you're programming Javascript.
 6 | 
 7 | # Advice
 8 | 
 9 | Javascript doesn't come alot of core libraries. So you end up writing quite alot of code yourself. Thankfully underscore was invented which provides a tonne of useful functions to help you out.
10 | 
11 | Underscore is particularly useful for it's operations on collections.
12 | 
13 | Lodash and Underscore serve the same purpose and are 98% the same as far as I can tell. Lodash is the new hotness, so we'll use that :smile:
14 | 
15 | Functions which I use often:
16 | 
17 | * Map
18 | * Find
19 | * Filter
20 | * Where
21 | * FindWhere
22 | * Reject
23 | * Every
24 | * Some
25 | * Contains
26 | * SortBy
27 | * GroupBy
28 | * Compact
29 | * Flatten
30 | * Debounce (useful for UI stuff sometimes)
31 | * Clone
32 | * IsEqual
33 | 
34 | 
35 | # Learning materials
36 | 
37 | * http://www.pluralsight.com/courses/underscore-fundamentals
38 | * http://underscorejs.org/
39 | * https://lodash.com/docs
40 | 
41 | # Tasks
42 | 
43 | * Run through the learning materials
44 | * Build an example of 5 of the above function I said I used locally.
45 | * Convert your examples to use lodash and see if they work.
46 | 


--------------------------------------------------------------------------------
/courses/side-quests/d-react-native.md:
--------------------------------------------------------------------------------
 1 | # React
 2 | # Outcome
 3 | 
 4 | You'll:
 5 | 
 6 | * Be able to build an App. (What?!)
 7 | 
 8 | # Advice
 9 | 
10 | React Native is like React for the web, but for iOS and Android.
11 | 
12 | ##Differences
13 | 
14 | * HTML is replaced with an iOS / Android specific markup. It looks like HTML e.g `<div> -> <view>`, `<p> -> <text>`.
15 | * No CSS. CSS is replaced by very similar 'styles' (javascript hashes). They're a subset of CSS, and only support the flexbox layout.
16 | * The thing runs as an App on an iPhone (or the iPhone simulator) or an Android (or the simulator)
17 | * You can't escape the development environment for iPhone. You still need XCODE which is used write Apps.
18 | 
19 | ##Similarities
20 | 
21 | * React-Native is really similar to React. You write components with state + props and a render function (nothing changes there).
22 | * 99% of your code will be Javascript. You shouldn't have to write any Objective C (but you can if there's something which is impossible)
23 | * npm, requiring javascript files, any npm module (lodash, superagent etc. etc.), JSX
24 | 
25 | ##How it works
26 | 
27 | React-Native comes with a command line cli (which is `npm install`ed). You can run `react-native init MyProjectName` and it generates all the files you need. A project which you can open and run in XCode. When you run the project xcode a couple of things happen:
28 | 
29 | * A `webpack` watch kind of thing starts
30 | * It launches the emulator with your project in.
31 | 
32 | What is happening is that an iOS app (which is normally written in objective-c or swift (their new language)) launches. Internally the app then loads a javascript engine (which comes with iOS) just like the one in Safari. It then executes all your javascript / react-native code in that javascript engine. React-Native calls the render method to decide how the app should look. Whereas React (for web) would have run some jQuery-like code to modify the DOM, react-native runs some objective-c code to make the screen look as it should. When 'state' changes in a component, the render method is fired, it calculates what the screen should look like vs what is currently looks like, it runs a bit of objective C to make the change etc. etc. This means the app is actually running in Objective C, so it looks and feels like a native app [1].
33 | 
34 | There are two engines react-native can use. The built in iOS javascript engine (JavaScriptCore, which powers safari), or it can attach to an external browser using *magic* e.g. Chrome.
35 | 
36 | You can't fully escape xcode. Lots of settings about your app stay in xcode. If you want to add an image to the app (that is stored locally with the app), you add it in Xcode etc. But mainly you just fiddle with settings, you don't write code in xcode, and you shouldn't have to write objective-c.
37 | 
38 | ## Alternative markup (Built in components)
39 | 
40 | Look in the components section (on the left) in the Docs. I suggest checking out the example [UIExplorer app](https://github.com/facebook/react-native/tree/master/Examples/UIExplorer) and running it to see visually what each thing does.
41 | 
42 | ## Styles
43 | 
44 | [Read this page](https://facebook.github.io/react-native/docs/style.html#content). Click on the links at the bottom. Each built-in component has a list of styles which you can use.
45 | 
46 | Styles are hashes, and so are just code. You can use lodash to manipulate them (for example `_.merge` is kind of like a Sass `@extend`)
47 | 
48 | ## Practical advice for developing
49 | 
50 | ### Your default dev flow
51 | 
52 | * Open xcode project
53 | * Hit run (It will launch your app in iOS simulator)
54 | * Attach to Chrome rather than JavaScriptCore (this gives you chrome dev tools like normal :) ) (Apple+Z (or D?) opens a menu to let you do this)
55 | * Open the code base in sublime (XCode sucks IMO) and edit code.
56 | * Press Apple+R to reload app after making a change.
57 | 
58 | ### It's not working what do I do.
59 | 
60 | I've seen it break for no reason at all. If that happens and you're unsure follow these steps.
61 | 
62 | * Close the packager window that pops up initally.
63 | * Close all Chrome Dev Tools attached to the app.
64 | * Press stop in XCode
65 | * Now start over from scratch.
66 | 
67 | 
68 | # Learning materials
69 | 
70 | # Core
71 | 
72 | * [React Native Docs](https://facebook.github.io/react-native/docs/getting-started.html)
73 | 
74 | # Tasks
75 | 
76 | * Read the native docs
77 | * Follow the [requirements](https://facebook.github.io/react-native/docs/getting-started.html#content) section
78 | * Initialise a new app and run it (iOS). Change some code, check you can see the change.
79 | * Get the [UIExplorer](https://github.com/facebook/react-native/tree/master/Examples/UIExplorer) example working and have a look through.
80 | * Complete Actfit. Thanks.
81 | 
82 | [1] Other frameworks instead pretend to be an app. But they're actually loading a web-browser, this has the advantage you could use bootstrap, but is often a bit clunky (poor performance).
83 | 


--------------------------------------------------------------------------------
/courses/side-quests/e-bash.md:
--------------------------------------------------------------------------------
 1 | #Bash (and Linux command lines)
 2 | 
 3 | #Outcome
 4 | 
 5 | You'll understand what bash is, and how to use it.
 6 | 
 7 | #Advice
 8 | 
 9 | Bash is a pretty clunky old technology. But it has the benefit of coming in OSX / Linux natively.
10 | 
11 | ##What is it
12 | 
13 | Your command line (iterm) is bash. Bash is a 'shell' (interactive command line). There are different shells, bash (bourne shell), ksh (korn shell) etc. Bash is also a programming language, which you are using interactively on the command line. It supports almost everything Javascript supports, it's just horrible.
14 | 
15 | ##Why use it
16 | 
17 | It's native on most machines, so rather than installing node + npm, you can just get things done in it right off the bat. So if you need a script to install stuff to run your program - bash is a good option.
18 | 
19 | ##Using it interactively on the command line
20 | 
21 | OSX comes with bash by default, so you've already been using it every time you run an iterm.
22 | 
23 | ##Bash scripts
24 | 
25 | By convention bash scripts end in `.sh`. e.g. `run.sh` (`.sh` stands for shell). You can then just fill the file with commands you could type on the command line. If you're running bash (you are by default by running iterm2), if you execute the script then it will guess that it's bash. If somebody changes their default 'shell' then it will try to run it in that shell. e.g korn shell. You're script might then not work.
26 | 
27 | If you execute a script natively on the command line. The first line of the script can be used to tell linux which language it's in. e.g. `#!/bin/bash` -> Tells it it's a bash script. Could also be a ksh, python script or something else.
28 | 
29 | ##File permissions and chmod
30 | 
31 | To execute a script you must make sure it's executable. You can do this by using the `chmod` command. e.g. `chmod u+x`. You can check permissions using `ls -ltr`. Once the script is executable you can execute by doing `path/to/script.sh` on the command line. If you're in the same folder you must do `./script.sh`. `script.sh` will not work (I don't know why).
32 | 
33 | 
34 | ##Bash syntax
35 | 
36 | Is awful. I find it really hard. Try to avoid writing complex scripts, I find if statements a struggle. Bash is sensitive to spaces. Equality is a joke. Try and use it simply when you can :).
37 | 
38 | ###Comments
39 | 
40 | `# Commenting goes here`
41 | 
42 | ###Variables
43 | 
44 | ####Declare
45 | 
46 | `MY_VAR="value" #Spaces aren't allowed...`
47 | 
48 | ####Usage
49 | 
50 | `echo $MY_VAR #Notice the $`
51 | 
52 | ### &&
53 | 
54 | `command1 && command2 #command2 only happens if command1 succeeds.`
55 | 
56 | 'Succeeds' is determined by exit code / return code. 0 means success. anything else means failure (different numbers mean different things). This is brought over from C programming.
57 | 
58 | ###If statements
59 | 
60 | Google it. Spaces matter.
61 | 
62 | ##Environment Variables
63 | 
64 | Think of interactive bash like the console in javascript. You're commands into an interactive bash programming console.
65 | 
66 | Environment variables are variables which are set by default in bash. You can modify them both temporarily and permanently.
67 | 
68 | For example `$JAVA_HOME` is a variable used to tell the OS where Java is installed. You can change it temporarily (just for this bash instance) or forever (future bash sessions).
69 | 
70 | You set them the same as you set variables (because they are variables). You can see them all with `printenv`.
71 | 
72 | ###The PATH
73 | 
74 | `PATH` is a special environment variable. It's a string of colon seperated folders. e.g. `/Users/richard/.nvm/versions/node/v4.2.2/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin`. Any executable (`chmod u+x`) programs in these folders, you can execute from anywhere in bash by typing the name of the script / program. E.g. `ls`, `node`, `npm`.
75 | 
76 | Most things modify the PATH for you, or put a 'link' to the program in the correct folder. So when you brew install things, it's handling this for you :).
77 | 
78 | ##Useful things you can do:
79 | 
80 | [See cheatsheet](../../resources/bash-cheat-sheet.md)
81 | 
82 | #Tasks
83 | 
84 | * Make a bash script which prints hello to screen. And run it.
85 | 


--------------------------------------------------------------------------------
/courses/side-quests/f-backend-dev.md:
--------------------------------------------------------------------------------
 1 | #Backend Node
 2 | 
 3 | # Outcome
 4 | 
 5 | You'll be able to backend dev.
 6 | 
 7 | # Advice
 8 | 
 9 | ## You already know it.
10 | 
11 | You already know javascript. Now it's time to backend it up.
12 | 
13 | Node is a javascript environment which runs outside the browser, instead it runs on the command line. The technologies you already know are linked heavily to node:
14 | 
15 | Came from Node in the first place:
16 | 
17 | * npm
18 | * requiring modules
19 | 
20 | 
21 | Work fine with Node:
22 | 
23 | * Babel (and hence es6 / es7)
24 | * eslint
25 | * Any npm package
26 | 
27 | Don't work / can't be used with Node:
28 | 
29 | * Webpack (webpack, kind of simulates node (deals with requiring things))
30 | 
31 | ## Extra capabilities
32 | 
33 | There are some things you can do in node that you can't do inside a browser:
34 | 
35 | * Access things your operating system knows about
36 |   * local filesystem
37 |   * running processes
38 |   * launch a program
39 |   * anything you can do on a command line
40 | * Communicate over protocols other than http / websockets / webRTC (which are the only things you can do in a browser)
41 |   * Run a http backend
42 | 
43 | 
44 | There are lots of npm packages to help you with all of this stuff. We'll run through a few now.
45 | 
46 | 
47 | # Learning materials
48 | 
49 | * [File System API](https://nodejs.org/api/fs.html)
50 | * [Express](http://expressjs.com/) http server.
51 | 
52 | # Tasks
53 | 
54 | * Get our [node-seed](https://github.com/z-dev/node-seed) up and running.
55 | * Create a new directory on the filesystem
56 | * Create a file called hello.txt which contains the text: 'hello'
57 | * Make a HTTP get service which returns "hello" using [Express](http://expressjs.com/)
58 | * Make a HTTP get service which returns the JSON `{"hello": "<name>"}` and takes a param `name="john"`.
59 | * Make a HTTP post service which takes JSON {"hello": "john"} and returns that same json.
60 | * Redo the lodash task in node
61 | 
62 | 


--------------------------------------------------------------------------------
/resources/bash-cheat-sheet.md:
--------------------------------------------------------------------------------
 1 | * <up> cycle through previous commands
 2 | * <ctrl + r> search through previous commands
 3 | * `;` run two commands on one line. e.g. `npm install; npm run dev`. Both happen
 4 | * `a && b` run `b` only if `a` succeeds
 5 | * Multi line statements
 6 | ```
 7 | bigCommand \\
 8 | --settings 1 \\
 9 | --all-one-line 2 \\
10 | shiz
11 | ```
12 | * `echo "Print this!"` -> prints things (like `console.log("Print this!")`)
13 | * `grep` searches for text in files and returns lines which match
14 | * `ps -ef` find running processes (processes have process id's pids)
15 | * `kill <pid>` kills a process
16 | * `>` take the output of the left and adds it to the right. Wipes the file if already exists.
17 | e.g. `echo "Hello John" > myFile.txt`
18 | * `>>` take the output of the left and adds it to the right. Adds to the file if it already exists.
19 | * `|` pipe. Takes the output from the command on the left and passes it to the right.
20 | e.g. `ps | grep node` looks for lines with 'node' in the output of running the `ps` command.
21 | 


--------------------------------------------------------------------------------
/resources/command-line-cheat-sheet.md:
--------------------------------------------------------------------------------
 1 | # Git Cheat Sheet
 2 | 
 3 | ## Actions
 4 | 
 5 | ###See which directory you're in
 6 | 
 7 | `pwd` (present working directory (stupid huh))
 8 | 
 9 | ###Move to another directory
10 | 
11 | `cd directory_name` or cd `directory_name/blah/de/da` (`/` after each directory, this is a unix / linux thing (Mac is based on linux))
12 | 
13 | ###Move up a directory
14 | 
15 | `..` means 'one directory up'
16 | `.` means 'the directory i'm currently in'
17 | 
18 | To move up a directory: `cd ..`
19 | 
20 | ###Display the contents of a file
21 | 
22 | `cat filename`
23 | 
24 | ###Kill a running process
25 | 
26 | <ctrl + c>
27 | ## Tips
28 | 
29 | ### Tab
30 | 
31 | Tab tries to auto complete stuff for you. I mash it all the time :smile:.
32 | 
33 | If something tab complete's it's 100% correct, if you type it it's 'probably right' -> Tab wins.
34 | 


--------------------------------------------------------------------------------
/resources/git-cheat-sheet.md:
--------------------------------------------------------------------------------
 1 | # Git Cheat Sheet
 2 | 
 3 | For a comprehensive cheat sheet see [github's one]()
 4 | 
 5 | ## Actions
 6 | 
 7 | ###Start a new repo if it's not in git / github already
 8 | 
 9 | `cd <directory code is in>`
10 | `git init`
11 | 
12 | ###Add a file because you want to commit it
13 | 
14 | `git add filename`
15 | 
16 | ###Add all files because you want to commit them
17 | 
18 | `git add .`
19 | 
20 | ###See the status git thinks your files are currently in
21 | 
22 | `git status`
23 | 
24 | ###Commit your changes
25 | 
26 | `git commit -m "Commit message goes here"`
27 | 
28 | ###Push your changes to the remote
29 | 
30 | `git push origin branch-name`
31 | 
32 | ###Create a new branch
33 | 
34 | `git checkout -b new-branch-name`
35 | 
36 | ###Switch to another branch
37 | 
38 | `git checkout existing-branch-name`
39 | 
40 | ###Get the lastest version of a particular branch from github (if other people committed stuff and pushed it)
41 | 
42 | `git pull origin branch-name` Warning `pull` also merges it the branch you're currently on. If you don't want to merge it, use `fetch`.
43 | 
44 | 
45 | ###See what changes you made a file
46 | 
47 | `git diff`
48 | 
49 | ###See what changes you made a file (but you already 'added' it)
50 | 
51 | `git diff --cached`
52 | 
53 | ###Move a file / folder
54 | 
55 | Moving is a special operation in git. As well as add and remove.
56 | 
57 | You can either do a `mv file1 file2`. But git will think you deleted file1 and created file2. So `git status` will show two changes. Instead we can do:
58 | 
59 | `git mv file1 file2`
60 | 
61 | This tells git that we're actually moving a file. It shows up as 1 change in `git status` and makes the history neater later. 
62 | 
63 | ###The bail out
64 | 
65 | git clone the whole thing again into a new folder :p (I do this sometimes :p) and start from there :smile:
66 | 


--------------------------------------------------------------------------------
/resources/jargon-buster.md:
--------------------------------------------------------------------------------
 1 | # Jargon Buster
 2 | 
 3 | ###Library
 4 | 
 5 | ###Framework
 6 | 
 7 | ###API
 8 | 
 9 | ###Backend
10 | 
11 | ###Frontend
12 | 
13 | ###Fullstack developer
14 | 
15 | ###IO
16 | 
17 | ###Algorithm
18 | 
19 | ###Black Box
20 | 
21 | A box which is black.
22 | 


--------------------------------------------------------------------------------
/resources/npm-cheat-sheet.md:
--------------------------------------------------------------------------------
 1 | # NPM Cheat Sheet
 2 | 
 3 | ## Concepts
 4 | 
 5 | ### dependency (or package)
 6 | 
 7 | Somebody elses code your project depends on to work. e.g. JQuery
 8 | 
 9 | dependencies are installed inside the `./node_modules` folder.
10 | 
11 | ### dev dependency
12 | 
13 | dependency only needed to build your project or 'dev' it locally. E.g. Webpack.
14 | 
15 | ### Finding dependencies
16 | 
17 | Google "thing you want to do npm". It will tend to lead you to the [npm site which has a search function](https://www.npmjs.com/search?q=netlify) should you need it.
18 | 
19 | ###version
20 | 
21 | [Semantic versions](http://semver.org/) go [major].[minor].[patch] e.g. version 3.1.2.
22 | 
23 | ###the package.json file
24 | 
25 | `package.json` is the config file for npm for your project, it's in "json" format (same as javascript object format but left hand side has quotes too).
26 | 
27 | ###global installs.
28 | 
29 | If you install a dependency 'globally' you can access it from anywhere on your command line. e.g. `netlify`.
30 | 
31 | To install something globally:
32 | 
33 | `npm install -g netlify` note the `-g` is for global.
34 | 
35 | You can then do
36 | 
37 | `netlify` (note: the command doesn't have to match the dependency name)
38 | 
39 | 
40 | ###not installing things globally.
41 | 
42 | It's generally a bad idea to install things globally. Instead do this:
43 | 
44 | `npm install netlify --save-dev`.
45 | 
46 | You can then find the thing you can run from the command line in `node_modules/.bin/netlify` (this will also work for the next person :smile:)
47 | 
48 | ## Actions
49 | 
50 | ### Initialize current project as npm project
51 | 
52 | `cd [directory code is in]`
53 | `npm init`
54 | 
55 | It will ask you a load of questions and then create a `package.json` for you (you could just create the package.json by hand / copy it in from somewhere.)
56 | 
57 | ### Install all the dependencies in `package.json`
58 | 
59 | `npm install`
60 | 
61 | ### Add a new dependency to the `package.json` file
62 | 
63 | `npm install [package_name] --save`
64 | 
65 | ### Add a new dev dependency to the `package.json` file
66 | 
67 | `npm install [package_name] --save-dev`
68 | 
69 | ### Add a 'script' you can rerun
70 | 
71 | In the 'scripts' section of package.json
72 | 
73 | e.g
74 | 
75 | in `package.json`
76 | ```
77 | "scripts": {
78 |   "build": "webpack"
79 | }
80 | ```
81 | 
82 | on command line: `npm run build` will run the `webpack` command.
83 | 
84 | 


--------------------------------------------------------------------------------
/tasks/1-javascript-tasks.md:
--------------------------------------------------------------------------------
 1 | #Javascript tasks
 2 | 
 3 | 
 4 | ##People
 5 | 
 6 | ```
 7 | var gillFamily = [{name: 'john', age: 20}, {name: 'richard', age: 27}, {name: 'debbie', age: 55}, {name: 'dan', age 25}, {name: 'robin', age 60}]
 8 | ```
 9 | 
10 | 
11 | Starting point is always `gillFamily`.
12 | 
13 | ###1
14 | 
15 | Write the code to produce an array of the names of the gill family. e.g `['john', 'daniel' ... etc.]`
16 | 
17 | ###2
18 | Write the code to produce an array of the names of the gill family including surnames. E.g. `['john gill', 'daniel gill'...etc.]`
19 | 
20 | ###3
21 | Write the code to sum the ages of the Gill family
22 | 
23 | ###4
24 | Write the code to calculate mean age of Gill family
25 | 
26 | ###5
27 | Write the code to get the members of the gill family under the age of 50.
28 | 
29 | ###6
30 | Write the code to calculate the number of members in the gill family.
31 | 
32 | ###7
33 | Write the code to calculate how many members of the gill family are under 50?
34 | 
35 | ###8
36 | Write the code to produce a comma seperated string of the Gill family members who are under 50's names with surnames. e.g. `'richard gill, john gill, daniel gill'`
37 | 
38 | ###9
39 | Create a html table of Gill family members with name and age headings. Display it on the page.
40 | 
41 | e.g.
42 | ```
43 | NAme | Age
44 | Richard 27
45 | ```
46 | ###10
47 | Some gill family members are sensitive about their age. If the family member is over 26. Drop their age.
48 | 
49 | e.g.
50 | 
51 | `[{name: 'john', age: 20}, {name: 'richard'}]`
52 | 
53 | ###11
54 | Sort the gill family members by age.
55 | 
56 | ###12
57 | Find the Gill family members who's name starts with a 'D'
58 | 
59 | 
60 | ###13
61 | Group the Gill family members who's names start with different letters.
62 | 
63 | result should look like (ordering doesn't matter):
64 | ```
65 | {
66 |   d: [{name: 'daniel', age: 25}, {name: 'debbie', age: 55}],
67 |   j: [{name: 'john', age: 20}],
68 |   r: [{name: 'robin', age: 60}, {name: 'richard', age: 27}],
69 | }
70 | ```
71 | 
72 | ###14
73 | Return the youngest member of the Gill family.
74 | 
75 | ###15
76 | Return the members of the Gill family who have an 'a' in their name.
77 | 
78 | ###16
79 | Return the members of the Gill family but with the first letter of their name capitalized.
80 | 
81 | ###17
82 | Find the youngest member of the Gill family with an 'a' in their name.
83 | 


--------------------------------------------------------------------------------