robbohn / whirlwind

AN (opinionated) WHIRLWIND TOUR OF CURRENT WEB DEVELOPMENT

An OPINIONATED Whirlwind Tour of Current Web Development (V0.1.24f)

Where we quickly work through a modern way to develop a basic web page from scratch

STEP 0 - Starting Up

Interlude:

Typing not Copy/pasting https://daveceddia.com/the-lost-art-of-typing-shit-by-hand/

STEP 1 - The Initial Version

STEP 2 - Adding Logic

Interlude:

WTF how-it-feels-to-learn-javascript-in-2016

STEP 3 - Organizing Your Work

STEP 4A - Versioning

STEP 4B - Versioning in the cloud

---

later - STEP 5 - Make it more attractive

later - STEP 6 - README LATER

---

Stored at https://github.com/robbohn/Whirlwind

End result viewable at https://robbohn.github.io/Whirlwind/

whirlwind's Issues

Addiotional Topic: Advanced TS

Advanced TS

1. Fn Overloading?
2. Interfaces?
3. MODULES & nameSpaces? Modules have a dependency on a module loader (such as CommonJs/Require.js). https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/Namespaces%20and%20Modules.md

Additional Topic: Multiple Folders

Multiple folders and OUTPUT folders

let's keep things organized

1. Make dirs for CSS
2. Make dir for TS
3. Make .js output to a JS directory and a single bundled file via change to tsconfig.json

Additional Topic: TS for CSS that uses JS

Topics for CSS that use JS

1. TypeScript .d.ts for js-based bootstrap/jquery/etc.
2. Maybe do these lines below AFTER NPM discussion
   • npm install bootstrap --save
   • add typings by executing tsd install bootstrap --save
   • include it in app via import bootstrap = require("bootstrap")
   • Make sure the file bootstrap.d.ts is included in your tsconfig.json file

Additional Topic: Debugging using Chrome

Debugging using Chrome

1. load chrome
2. Load debugging with chrome extension

Create directory for each lesson

Create a file or directory for each version of each file that changes; i.e.

LESSON1
+- INDEX.HTML
+-MAIN.CSS
LESSON2
+-INDEX.HTML
+-MAIN.CSS
+-MAIN.JS

etc.

Additional Topic: NODE and tools using NODE

NODE and then other tools (ties in with webpack below)

1. Discuss minify and bundling etc.
2. Install NODEJS so NPM will be installed
3. Install/discuss other tools? gulp/grunt/babel/webpack
   • WebPack
     • WebPack Installation info
     • project: npm install webpack --save-dev
     • global: npm install webpack -g
     • Usage info

Move OTHER TOPICS outside

Move OTHER TOPICS outside of main README

but still make them memorable as needing to be added

Maybe instead create an issue for each topic

Lesson 5 needs list of changes after adding BootStrap

After adding bootstrap, what lines need changing?

Additional Topic: TypeScript Typings

Typings and tsd

1. Declaration files (.d.ts files) are a fundamental part of using existing JavaScript libraries in TypeScript but TS2 changes this
2. package.json

Additional Topic: Other GIT & GITHUB Tasks

Other GITHUB Tasks

get code from others, contributing back

1. FORKING
   • means GitHub will make a copy of a project that is entirely yours; it lives in your user’s namespace, and you can push to it.
2. Contributing to a GitHub project, aka The GitHub flow
   • Create a topic branch from master.
   • Make some commits to improve the project.
   • Push this branch to your GitHub project.
   • Open a Pull Request on GitHub.
   • Discuss, and optionally continue committing.
   • The project owner merges or closes the Pull Request.

Making a NEW version of your code

????

1. XYZ....

Move files into their lesson dir

Move the files appropriate to each lesson into corresponding directory