henrikjoreteg/masters

Repo to follow along with Frontend Masters class

Frontend Masters Workshop App

This repo is for the workshop on "Building Modern Single-Page Web Applications" workshop at Frontend Masters, June 2015.

note: the "master" branch contains the completed application. If you're just staring the video course you want to start with what's in the "start" branch. To do so, do this:

git clone https://github.com/HenrikJoreteg/masters.git
cd masters
git fetch origin
git checkout -b start origin/start
npm install
npm start

Related docs

• Stuff to do before the workshop
• Copy/paste snippets

Goals of the workshop

1. Giving you tools, knowledge and confidence to build and deploy an application from scratch.
2. Familiarizing you with basics of:
   • ES6+
   • Node.js/npm
   • Ampersand.js
   • React
   • Webpack
   • Isomorphic Rendering
   • Providing user logins using an OAuth API
   • Consuming an external JSON API
3. Putting your app on the Internet

Rough Outline

9:00 Start

• Short intro talk
• Project setup
• Discuss node, npm, hjs-webpack
• Render basic "hello" content with React
• Intro to React.js
• show build step

** frameworks talk/discussion **

• Adding styles
  • show yeticss.com
  • create styles folder in src
  • import yeticss.com
  • show what happens when you build now
  • show live reloading in action
• Convert ES5 React module to ES6
  • compare them side-by-side

10:30 - 11:00 morning break

• Install and use the router
  • public and 'repos' routes
  • start with console.log routes
  • React.render inside method
  • re-deploy
• Introduce ampersand-app pattern
  • demo event signaling via app
• Add layout.js
• Local links/Internal Nav Component

12:30 - 1:45 Lunch Break

• Authing with GitHub
  • Understanding Standard OAuth Flows
  • Keeping a "secret" in a static clientside app
  • Gatkeeper Microservice
• Persisting token, modeling 'me'
• Fetching "me" from github
• Binding username

3:15 - 3:45 Afternoon Break

• Rendering list of Repos
• Adding Octicons

Day 2

9:00 Start

• Repo Detail Page
• Rendering The Labels
• Creating a Label component
• Editing Mode for Labels
• Deleting Labels
• Updating Labels
• Creating New Labels

10:30 - 11:00 morning break

• Configs and Deploys
• Deploying with Surge
• Adding A 404 Page

12:30 - 1:45 Lunch Break

• Static Isomorphic Rendering
• Using Standard for Code Style

3:15 - 3:45 Afternoon Break

• wrap up discussion
• open questions
• open hacking (see suggestions below)

Taking it further

I'd encourage you to keep hacking on this and finish whatever features we didn't build.

In addition, you may want to try adding the following:

• Add a link to real repo
• Add validation to form
• Add user avatar
• Switch it over to login with firebase
• Write module that fetches "all" repos (using github paging API)
• Add color picker?

Further study

• My Book, Human JavaScript
• Thinking in React
• Reusable React Components
• Standard Linter
• Setting up ESLint, React and ES6
• Complete HubTags.com Source

Feedback

Honest feedback is golden. Please take a minute to say what you liked/what you didn't: http://j.mp/masters-feedback

If you liked it maybe even tweet about it :) I'm @HenrikJoreteg on twitter.

<3

masters's Issues

Stylus dependency issue

There is a dependency issue with Stylus where you get the below error following the Front End Masters course in the Foundations of Web Applications > Creating Styles section.

ERROR in ./~/css-loader!./~/postcss-loader!./~/stylus-loader!./src/styles/main.styl
Module build failed: TypeError: /Users/tegan/Dev/front-end-masters/masters/src/styles/main.styl:2:21
   1| body
   2|   background: purple
--------------------------^

Path must be a string. Received undefined

    at assertPath (path.js:7:11)
    at extname (path.js:1429:5)
    at new SourceMapper (/Users/tegan/Dev/front-end-masters/masters/node_modules/stylus/lib/visitor/sourcemapper.js:41:7)
    at Renderer.render (/Users/tegan/Dev/front-end-masters/masters/node_modules/stylus/lib/renderer.js:94:9)
    at /Users/tegan/Dev/front-end-masters/masters/node_modules/stylus-loader/index.js:149:12
    at tryCatchReject (/Users/tegan/Dev/front-end-masters/masters/node_modules/when/lib/makePromise.js:840:30)
    at runContinuation1 (/Users/tegan/Dev/front-end-masters/masters/node_modules/when/lib/makePromise.js:799:4)
    at Fulfilled.when (/Users/tegan/Dev/front-end-masters/masters/node_modules/when/lib/makePromise.js:590:4)
    at Pending.run (/Users/tegan/Dev/front-end-masters/masters/node_modules/when/lib/makePromise.js:481:13)
    at Scheduler._drain (/Users/tegan/Dev/front-end-masters/masters/node_modules/when/lib/Scheduler.js:62:19)
 @ ./src/styles/main.styl 4:14-168 13:2-17:4 14:20-174

It works if you update the "stylus-loader" dependency in the package.json to "^2.0.0" but since I haven't completed the course I don't know if the new version introduces other issues.

Build is VALID but errors

Hello,

Thank you for the course!
I ran npm install (had to npm install prefixer after) and the build seems to be VALID, but the following errors are in the terminal. I believe it might be a version issue.

Your input is appreciated!

`
ERROR in .//css-loader!.//postcss-loader!.//octicons/octicons/octicons.css
Module build failed: TypeError: css.walkAtRules is not a function
at Processor.remove (/ampersand/masters/node_modules/autoprefixer/lib/processor.js:108:11)
at plugin (/masters/node_modules/autoprefixer/lib/autoprefixer.js:49:28)
at LazyResult.run (/Repos/ampersand/masters/node_modules/postcss/lib/lazy-result.js:197:24)
at /masters/node_modules/postcss/lib/lazy-result.js:110:37
at LazyResult.asyncTick ( /masters/node_modules/postcss/lib/lazy-result.js:124:15)
at processing.Promise.then._this2.processed ( /masters/node_modules/postcss/lib/lazy-result.js:150:20)
at new Promise ( /masters/node_modules/core-js/modules/es6.promise.js:197:7)
at LazyResult.async ( /masters/node_modules/postcss/lib/lazy-result.js:147:27)
at LazyResult.then ( /masters/node_modules/postcss/lib/lazy-result.js:72:21)
at Object.module.exports ( /masters/node_modules/postcss-loader/index.js:42:32)
@ .//octicons/octicons/octicons.css 4:14-101 13:2-17:4 14:20-107

ERROR in .//css-loader!.//postcss-loader!./~/stylus-loader!./src/styles/main.styl
Module build failed: TypeError: css.walkAtRules is not a function
at Processor.remove ( /masters/node_modules/autoprefixer/lib/processor.js:108:11)
at plugin ( /masters/node_modules/autoprefixer/lib/autoprefixer.js:49:28)
at LazyResult.run ( /masters/node_modules/postcss/lib/lazy-result.js:197:24)
at /masters/node_modules/postcss/lib/lazy-result.js:110:37
at LazyResult.asyncTick ( /masters/node_modules/postcss/lib/lazy-result.js:124:15)
at processing.Promise.then._this2.processed ( /masters/node_modules/postcss/lib/lazy-result.js:150:20)
at new Promise ( /masters/node_modules/core-js/modules/es6.promise.js:197:7)
at LazyResult.async ( /masters/node_modules/postcss/lib/lazy-result.js:147:27)
at LazyResult.then ( /masters/node_modules/postcss/lib/lazy-result.js:72:21)
at Object.module.exports ( /masters/node_modules/postcss-loader/index.js:42:32)
@ ./src/styles/main.styl 4:14-168 13:2-17:4 14:20-174
webpack: bundle is now VALID.
`

Link to Copy/paste snippets has a 404 redirect

Copy/paste snippets link has a 404 redirect