CHE-YU WU / LAB

A year in the making

Art, sound, tools and teaching meet on one wall. Follow a documented connection, or begin with a single piece of paper.

2016-09-09 — 2017-09-09
33 public records

Red string: documented links · Twine: shared themes · Hover a paper to read a connection.

Complete records ↓

Read the year downwards, one month at a time. The small tags under a card are its connections: open one to jump to the record it names.

2016 · 10

2016 · 11

2017 · all year

2017 · 01

2017 · 03

2017 · 04

2017 · 05

2017 · 06

2017 · 07

2017 · 08

Family treeHow 818 daily sketches grew out of one another46 families drawn as branching trees with thumbnails, 2018 to 2026

Complete records

Read each record

Each record retains its date basis, public sources and connection labels.

The update log on the course page gives only month and day. The year is inferred from the same log's note that crowdfunding closed on 7/4 and from the Hahow public API, which records the funding deadline as 3 July 2016 and publication as 1 September 2016.Published

Hahow course one — a live student work collector goes up

The update log on the Hahow course page for the first course records that a live student work collector was added on 7 November, with more than a hundred pieces of student work and practice already submitted, and that 85 units totalling 1,230 minutes were online before 15 November. This homework site is the custom collection mechanism later described in press coverage.

  • Course operations
  • Student work
Hahow course cover: Animated Interactive Web Programming
Che-Yu Wu / Hahow course cover
Sources & related records
The update log on the course page gives only month and day. The year is inferred from the same log's note that crowdfunding closed on 7/4 and from the Hahow public API, which records the funding deadline as 3 July 2016 and publication as 1 September 2016.Published

Hahow course one — all units online

The course page's update log records that all units were online on 17 January. The Hahow public API lists the course as 13 chapters with 104,726 seconds of video, about 29 hours, and the page itself states the campaign passed 8,000 per cent with more than 4,000 people learning together.

  • Online course
  • Delivery
Hahow course cover: Animated Interactive Web Programming
Che-Yu Wu / Hahow course cover
Sources & related records
The update log on the course page gives only month and day. The year is inferred from the same log's note that crowdfunding closed on 7/4 and from the Hahow public API, which records the funding deadline as 3 July 2016 and publication as 1 September 2016.Published

Hahow course one — an editable shared notebook

The update log records a shared course notebook added on 26 January, holding a study index with suggested pacing, errata and supplements, and recommended books, marked as continuously extended and open for anyone to edit. Maintenance of the course thus moved from one-way video into a document students could revise together.

  • Shared notes
  • Course operations
Hahow course cover: Animated Interactive Web Programming
Che-Yu Wu / Hahow course cover
Sources & related records
Taken from the campaign start time in the Hahow public API; the announcement gives 18 May as the stream date.Published

Hahow course two — the campaign opens, explained live

The Hahow public API records 18 May 2017 as the start of the campaign for the second course, on JavaScript and canvas. The livestream announcement that day says that after a year away the Thursday stream would serve a new course instead of the usual coding, that this one centres on JavaScript, canvas and Vue.js, and that the 10pm stream would explain the course and answer questions. It also notes more than 2,800 people took the previous course.

  • Crowdfunding
  • Canvas
A new course instead of the usual coding — YouTube video thumbnail
Che-Yu Wu / YouTube
Sources & related records
Taken from the campaign deadline in the Hahow public API.Published

Hahow course two — the campaign closes

The Hahow public API records 17 June 2017 as the deadline for the second course's campaign. Press coverage written during the campaign says the project drew 500 backers on its first day and passed 1,300 sign-ups in under a month, and its closing line marks two days left.

  • Crowdfunding
  • Enrolment
Hahow course cover: Animated Web FX Introduction
Che-Yu Wu / Hahow course cover
Sources & related records
Taken from the publication time in the Hahow public API.Published

Hahow course two goes live

The Hahow public API records the second course going live on 16 August 2017, in 8 chapters with 185,106 seconds of video, about 51 hours. The course page splits it into four series, promising 2,300 minutes across the world of web effects: HTML and CSS, JavaScript and animation, canvas computational art through mathematics and object orientation, and integration with Vue.js, plus four unlocked bonus units on VueX with Vue-router, GSAP, D3.js and Three.js.

  • Online course
  • Canvas
Hahow course cover: Animated Web FX Introduction
Che-Yu Wu / Hahow course cover
Sources & related records
Taken from the upload date on the YouTube page; the live session itself may fall a day or two earlier.Published

Boss, Coding Please — from Illustrator artwork to interactive animation on the Metro Soundscape site

A stream on building scenes inside Illustrator, setting animation triggers, and demonstrating the interaction work on the Taipei Metro Soundscape site, with the stated aim of letting the scallion pancake vendor show off his signature move. It is one of the more watched episodes of the season, with 10,882 views listed on the YouTube page.

  • SVG animation
  • Illustrator
Boss, Coding Please — from Illustrator artwork to interactive animation on the Metro Soundscape site — YouTube video thumbnail
Che-Yu Wu / YouTube
Sources & related records
Taken from the upload date on the YouTube page; the live session itself may fall a day or two earlier.Published

Boss, Coding Please — a hotel room picker built from Vue.js components

A stream building a room picker that adds and removes rooms, adjusts discounts, books each room separately and shows the running total. The description covers Vue.js component concepts and the inheritance of properties and methods, building a booking front end from scratch. The YouTube page lists 10,961 views.

  • Vue.js
  • Components
Boss, Coding Please — a hotel room picker built from Vue.js components — YouTube video thumbnail
Che-Yu Wu / YouTube
Sources & related records
Taken from the upload date on the YouTube page; the live session itself may fall a day or two earlier.Published

Boss, Coding Please — making web pages with terrifying trigonometry, part 1

A move from abstract mathematics to actual animation. The stream covers the basics of trigonometric functions, how to think about mathematics inside code, and a set of elementary applications. The description links the second part and the first Hahow course.

  • Trigonometry
  • Animation principles
Boss, Coding Please — making web pages with terrifying trigonometry, part 1 — YouTube video thumbnail
Che-Yu Wu / YouTube
Sources & related records
Taken from the upload date on the YouTube page; the live session itself may fall a day or two earlier.Published

Boss, Coding Please — hand rolling a clock out of mathematics

Continuing from the previous episode, the stream explains trigonometry as applied to drawing and web animation, then builds an animated clock. The description links the CodePen example.

  • Trigonometry
  • Canvas
Boss, Coding Please — hand rolling a clock out of mathematics — YouTube video thumbnail
Che-Yu Wu / YouTube
Sources & related records
Taken from the upload date on the YouTube page; the live session itself may fall a day or two earlier.Published

Boss, Coding Please — driving a map to show the matching weather

A stream on attaching map data to SVG inside Illustrator, loading it dynamically in the browser, and switching the displayed weather data with Vue.js. The description links a CodePen example and a set of stream notes written later. With 13,270 views listed, it is the most watched episode of the season.

  • Data visualisation
  • SVG
Boss, Coding Please — driving a map to show the matching weather — YouTube video thumbnail
Che-Yu Wu / YouTube
Sources & related records
Taken from the upload date on the YouTube page; the live session itself may fall a day or two earlier.Published

Boss, Coding Please — drawing a radar sweep that finds the enemy

Following the earlier canvas interface clock, this one adds the update and drawing of many objects on top of polar coordinates to make a fictional radar sweep interface. The description links the CodePen example.

  • Canvas
  • Polar coordinates
Boss, Coding Please — drawing a radar sweep that finds the enemy — YouTube video thumbnail
Che-Yu Wu / YouTube
Sources & related records
Taken from the upload date on the YouTube page; the live session itself may fall a day or two earlier.Published

Boss, Coding Please — an iOS style calendar with a to-do list

A stream on handling a calendar's dynamic styling with Vue.js, computing and laying out the month from data, then using computed properties for the dot marking a day's schedule and for holiday styling, with click to edit a to-do item if time allowed.

  • Vue.js
  • Computed properties
Boss, Coding Please — an iOS style calendar with a to-do list — YouTube video thumbnail
Che-Yu Wu / YouTube
Sources & related records
Taken from the upload date on the YouTube page; the live session itself may fall a day or two earlier.Published

Boss, Coding Please — learning Vue.js through tic tac toe

The description says the author searched a long time for a topic that would stay easy yet still teach something, landed on a childhood memory, and implemented the game logic in Vue.js behind a plain, firm interface. It links a CodePen example and a multiplayer version wired to Firebase.

  • Vue.js
  • Game logic
Boss, Coding Please — learning Vue.js through tic tac toe — YouTube video thumbnail
Che-Yu Wu / YouTube
Sources & related records
Taken from the upload date on the YouTube page; the live session itself may fall a day or two earlier.Published

Boss, Coding Please — a recolourable sticky note wall, part 1

The description notes that inspiration arrives in a hurry and costs another round of wringing if not written down, so the episode builds sticky notes in Vue and shares some enjoyable uses of drag and drop on the web.

  • Vue.js
  • Drag and drop
Boss, Coding Please — a recolourable sticky note wall, part 1 — YouTube video thumbnail
Che-Yu Wu / YouTube
Sources & related records
Taken from the upload date on the YouTube page; the live session itself may fall a day or two earlier.Published

Boss, Coding Please — sticky note wall part 2, shared editing through Firebase

Picking up the simple sticky notes from the previous episode, this one refines details and animation and connects a Firebase database so several people can edit and share the wall at once. The description lists data handling in Vue.js, transition animations for entry and exit, and saving to Firebase with live updates.

  • Firebase
  • Shared editing
Boss, Coding Please — sticky note wall part 2, shared editing through Firebase — YouTube video thumbnail
Che-Yu Wu / YouTube
Sources & related records
Taken from the start of the span printed on the work page. taipeisoundscape.com now shows the 2018 edition, and the online state of the 2017 version could not be confirmed from public pages.Published

Taipei Metro Soundscape — the station music open call site

The work page on the site gives the span as January to March 2017, with Harvest Music Production and the Department of Rapid Transit Systems of the Taipei City Government as clients. It describes coordinating the 2017 Metro Soundscape contest to collect works from local musicians, and recording ambient sound, sutra chanting and vendors' greetings at stations including Dongmen, Songshan Airport and Longshan Temple. The city government had asked only for a simple page carrying application information; he proposed a site that plays the recordings back to passengers so the sounds they usually ignore can be heard again.

  • Sound
  • Public commission
Taipei Metro Soundscape interactive website — work page image
Che-Yu Wu
Sources & related records
Taken from the start of the span printed on the work page.Published

ITRI household electricity journal — 3D rooms and data visualisation

The work page gives the span as March to May 2017, with the Green Energy and Environment Research Laboratories of ITRI as the client. It notes the original page still carried Flash and dated interactive visuals, so the work rebuilt it around 3D scenes: the team made five 3D rooms while he handled the experience work on the page, visualised national electricity data as a bubble chart, then guided users into the form. The front end uses Vue.js, and finishing the form shows a visualisation of the household's own consumption.

  • Data visualisation
  • 3D
Household electricity journal website — work page image
Che-Yu Wu
Sources & related records
Taken from the start of the span printed on the work page; the later part of that span falls outside this window.Published

Unleash the Future — n3xtcon brand identity and site

The work page gives the span as June to December 2017, with the Los Angeles technology forum n3xtcon as the client. It describes a brief for one identity extending to both website and offline print, rebuilding the brand from the four triangles in the original logo. After several proposals the client chose an overlapping concept, and the new mark is a folded ribbon crossing itself. The site takes up tectonic plates and floating, placing fluorescent objects in dark blue space, with planet motion made in Pixi.js.

  • Brand identity
  • WebGL
n3xtcon brand identity and website — work page image
Che-Yu Wu
Sources & related records
Taken from the repository creation date on GitHub; the work itself may have started earlier.Published

Animated-Web-Course — tooling for the interactive web course

The repository description reads as the interactive web programming course. Its README documents a parse_codepen API that pulls the og image and title text from CodePen, taking an array of addresses and returning the page metadata while caching what it has already parsed. The API sits under the awi_class path on monoame.com, the back end of the student gallery.

  • Course tooling
  • CodePen
Sources & related records
Taken from the repository creation date on GitHub; the work itself may have started earlier.Published

Organic-Alpha — a PHP dataflow scripting library across front and back

A public repository described as a functional scripting library with a PHP dataflow that combines front end and back end. The repository carries only that single line in its README, with no further documentation.

  • PHP
  • Dataflow
Sources & related records
Taken from the repository creation date on GitHub; the work itself may have started earlier.Published

The 22nd Citibank United Way campaign site

A public repository whose README names it the 22nd Citibank United Way campaign site and quotes the campaign copy about United Way and Citibank gathering sparks of giving over many years. The README links a CodePen version and the campaign address citi2016.unitedway.org.tw.

  • Campaign site
  • Commission
Sources & related records
Taken from the repository creation date on GitHub; the work itself may have started earlier.Published

zashare_website — the ZaShare site

A public repository whose description and README both read simply as the ZaShare site. Its main language is listed as JavaScript and the last push falls on the day it was created. ZaShare recurs as a client through this period, and its data appears as the sample set in one of the streams.

  • ZaShare
  • Commission
Sources & related records
Taken from the repository creation date on GitHub; the work itself may have started earlier.Published

TaichungDigital2017 — a Taichung exhibition site

A public repository described only as a Taichung exhibition, with Vue as its main language and a last push on 24 June 2017. The README holds only the title, and neither the exhibition name nor the partners could be confirmed from public pages.

  • Exhibition site
  • Vue.js
Sources & related records
Taken from the repository creation date on GitHub; the work itself may have started earlier.Published

itri2017 — the front end repository for the ITRI electricity journal

A public repository with Vue as its main language, created inside the span the work page records for the ITRI commission. The README carries only two heading lines and no further explanation.

  • Vue.js
  • Commission
Sources & related records
Taken from the repository creation date on GitHub; the work itself may have started earlier.Published

vue-lazy-table — a Vue table component with minimum configuration

A public repository described as a Vue table component that uses easy syntax to show complex data with minimal configuration. The README is blunt about why: when the back end returns too many kinds of data and labelling every column feels like too much, this component only needs the data passed in, and it shows automatic key labelling under the smallest setting. It is the most starred of his public repositories from this period, at six.

  • Vue.js
  • Open source component
Sources & related records
Taken from the repository creation date on GitHub; the work itself may have started earlier.Published

DschoolNTU2017 — the NTU D-School site

A public repository described as the D-School NTU website, with Vue as its main language and a last push on 22 August 2017. The repository has no README.

  • University site
  • Vue.js
Sources & related records
Taken from the repository creation date on GitHub; the work itself may have started earlier.Published

pacman_zashare — a Pac-Man page for ZaShare

A public repository whose README marks it as a Vue.js project scaffolded from the webpack template. JavaScript is its main language and the last push falls the next day. The unit list for the second Hahow course also carries a CodePen example building Pac-Man from arrays and a map.

  • ZaShare
  • Web games
Sources & related records
Taken from the date on the TED event page. The CV files this talk under 2016, which the event page contradicts, so the event page is used here. The video was uploaded on 10 January 2018, after the event.Past event record

TEDxNCUE Forward — creating possibilities across disciplines

The official TED event page dates TEDxNCUE to 7 May 2017, from 1:30pm to 6:30pm in Changhua County, with a theme rendered as Forward. His session was on creating possibilities by combining disciplines, on living through analysis, decomposition and recombination. The recording later went up on the TEDx Talks channel at eighteen minutes and nine seconds.

  • Cross-disciplinary
  • Talks
Sources & related records
Taken from the published time in the page metadata, 13 June 2017; the page itself displays 14 June 2017.Published

CrowdWatch — fifty hours and 4,300 students building interactive pages

A CrowdWatch feature by Kuo Cheng-che, then a product designer at Backer-Founder. It notes that the first course a year earlier took nearly 3,000 students into front-end web work, and that the second course drew 500 backers on its first day and passed 1,300 sign-ups within a month. It introduces him as a university student, designer, full-stack web engineer and founder of Monoame, just turned 22, and lists the Taipei Metro Soundscape, ZaShare and the Complex Life Festival among his works. It records that he had started the Boss, Coding Please page earlier that year with a Thursday 10pm stream, places the courses' entry point in a sense of achievement and in making a learner's output visible, and describes two devices against low completion rates: a backers-only Facebook group and a custom homework collection site.

  • Online course
  • Press
Sources & related records