Table of Contents
User Testing
Assert
00:00:00 - 00:11:19
Assert
James Halliday starts the workshop on user testing by first introducing how to use assert, a node module used for writing unit tests in applications. - -
https://github.com/substack/fmmn/blob/master/day4/testing.md -
https://github.com/substack/fmmn/blob/master/day4/assert/test.js
Test Anything Protocol
00:11:20 - 00:15:35
Test Anything Protocol
James reviews the Test Anything Protocol (TAP), which is the simple text-based interface between testing modules in a test harness. TAP started from Perl, but now has implementations in C, C++, Python, PHP, Perl, Java, JavaScript, and others. -
http://testanything.org/
Tape Modules
00:15:36 - 00:24:01
Tape Modules
For testing in node and in the browser, James introduces how to use the tape node module that is built on TAP. -
https://github.com/substack/tape
Making a Test Suite
00:24:02 - 00:35:22
Making a Test Suite
After reviewing a tape test function, James demonstrates how to make a test suite out of multiple test functions. James takes questions from students.
Setup and Teardown
00:35:23 - 00:44:06
Setup and Teardown
James reviews how to initialize servers or databases required for testing and then how to perform a clean up by showing up to create setup and teardown phases.
Testing in the Browser
00:44:07 - 00:54:38
Testing in the Browser
James illustrates how to create and runs tests in the browser with browserfiy. - -
http://browserify.org/ -
https://github.com/substack/fmmn/blob/master/day4/cool-test.js
I/O Shell
00:54:39 - 00:56:37
I/O Shell
James introduces the concept of the I/O Shell, which allows for writing code that is easy to test and code that is reusable. By taking inputs and outputs such as reading or writing to a file push it up to the uppermost layer where it might be more configurable.
Code Coverage, Coverify, and NYC
00:56:38 - 01:05:17
Code Coverage, Coverify, and NYC
James reviews code coverage, which is a measure used to describe the degree to which the source code of a program is tested by a particular test suite. After talking about abstract syntax trees (AST), which is a data structure representation of a program, James shows how to use a transform to check for code coverage with coverify. Then James illustrates how to use nyc, which is Istanbul's command line interface for test coverage. - -
https://github.com/substack/coverify -
https://github.com/istanbuljs/nyc
Continuous Integration
01:05:18 - 01:15:45
Continuous Integration
After reviewing npm scripts that are a way to have automation for packages, James introduces continuous integration, which is the concept of running tests every time code is pushed out, by using Travis CI. -
https://travis-ci.org/
Modular Web Development
Introducing Modular Web Development
01:15:46 - 01:18:47
Introducing Modular Web Development
After reviewing his approach to modern web development through the use of single-purpose npm service packages and native web technologies and APIs, James recommends "starting from zero" to force oneself to know and understand the tools that make up a web application rather than relying on third-party boilerplate solutions.
Template Strings
01:18:48 - 01:24:14
Template Strings
After introducing template strings available in ES6 as well as tagged template strings, James reviews hyperx, a tagged template string virtual DOM builder. -
https://github.com/substack/hyperx
yo-yo.js
01:24:15 - 01:30:41
yo-yo.js
James reviews yo-yo, which is a library for building modular UI components using DOM diffing and ES6 tagged template literals. - -
https://github.com/maxogden/yo-yo -
https://github.com/substack/fmmn/blob/master/day4/hyperx.js
Managing State and Refactoring Code
01:30:42 - 01:38:16
Managing State and Refactoring Code
To help handle scaling in web development, James refactors code to show how to deal with state management. -
https://github.com/substack/fmmn/commit/242612d1d25d23b39fd6c9f993b61fe0ada0fd50
Using WebSockets
01:38:17 - 01:58:19
Using WebSockets
James demonstrates how to use WebSockets to create an old school page hit counter. -
https://github.com/substack/fmmn/blob/master/day4/web/reduce.js
Routing and pushState
01:58:20 - 02:02:44
Routing and pushState
After showing how to set routing up, James discusses installing setting up pushState.
Choo
02:02:45 - 02:10:59
Choo
James updates a web app to use Choo, a modular redux architecture that uses modules such as yo-yo, hyperx, and sheetify. -
https://choo.io/
Building for Production
02:11:00 - 02:13:33
Building for Production
James shows how to use browserify transforms to get code reading for production. Then he mentions bankai, a streaming compiler for JavaScript, HTML, and CSS. -
https://github.com/substack/browserify-handbook#transforms
WebGL and Audio
Introducing WebGL
02:13:34 - 02:16:10
Introducing WebGL
James introduces WebGL, a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins.
Coding WebGL
02:16:11 - 02:32:58
Coding WebGL
James starts to create a project with WebGL using the regl library. -
http://regl.party/
Extending WebGL
02:32:59 - 02:38:08
Extending WebGL
Extending the initial WebGL demonstration, James continues to code by adding additional elements and imaging effects. James takes questions from students.
More Extending WebGL
02:38:09 - 02:48:28
More Extending WebGL
James works on demonstrating the effects available with WebGL. James takes questions from students.
Web Audio
02:48:29 - 02:58:16
Web Audio
Showcasing his online studio space, James brings in audio into the browser with the web audio module. -
http://studio.substack.net
Jamming with Web Audio
02:58:17 - 03:05:26
Jamming with Web Audio
While adding some feedback, James holds a jamming session letting students play with online Web audio studio.
