CHE-YU WU / STRATA 地層

Strata | 2001–2026: what each year left behind

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.

2017-01-01 — 2017-12-31
33 public 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.

2017 · all year

2017 · 01

2017 · 03

2017 · 04

2017 · 05

2017 · 06

2017 · 07

2017 · 08

2017 · 10

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

Newest first, older as you go down. Each record retains its date basis, public sources and connection labels.

ideaSQL Instagram crawler — project image
Open sourceChe-Yu Wu / GitHub README image

· Published

ideaSQL Instagram crawler

A public GitHub repository created and last pushed on 31 October 2017, written in Python and carrying one star. Its README states the usage plainly: install Firefox and python selenium on a Mac, pass a hashtag with -q and a count with -n, with sample commands fetching 3,000 posts each for two tags.

  • Crawler
  • Data collection
Writing

· Published Publication date as marked on the SlideShare page.

Vue, GSAP and D3 for web motion architecture — slide deck

A public 68-slide deck credited to Che-Yu Wu, dated 29 October 2017 on its SlideShare page and carrying around 1,995 views. Its outline covers Vue fundamentals, the mathematics of animation and easing, Vuex state management for driving motion, abstracting animation into components, and lifecycle work where frameworks meet, separating a data layer, a transformation layer and a presentation layer.

  • Slides
  • State management
Web motion integration and architecture with Vue, GSAP and D3 — MOPCON 2017 — video still
TalkMOPCON / YouTube thumbnail

· Past event record The recording is titled R2-Day2 and the slide deck was posted to SlideShare on 29 October 2017, which together point to the conference's second day. The official recording itself only went online on 19 January 2018, and the MOPCON 2017 speaker page now returns a 404.

Web motion integration and architecture with Vue, GSAP and D3 — MOPCON 2017

A session in room R2 on the second day of MOPCON 2017. The description on the official recording states that building visual web work across varying interaction needs requires integrating and structuring several frameworks so that data drives both content and motion, and that the talk walks through cases met in production, from visual design into web development, joining Vue-cli, GSAP and D3, and using Vuex as the hub for user input state to govern motion across multiple pages. The recording runs 49 minutes 26 seconds.

  • Talk
  • Front-end architecture
n3xt2017 — public repository for a Za Share expo site — project image
Open sourceMonoame Design / portfolio image

· Published

n3xt2017 — public repository for a Za Share expo site

A public GitHub repository created on 1 October 2017, with Vue as its recorded language and a last push on 3 November 2022. Its README carries only the repository name, and the description field is empty.

  • Repository
  • Expo site
Open source

· Published Taken from the repository creation date on GitHub; the work itself may have started earlier.

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
Hahow course cover: Animated Web FX Introduction
CourseChe-Yu Wu / Hahow course cover

· Published Taken from the publishTime in Hahow's API, 24 days before this window opens; the recording and release of the course itself ran on into August 2018, so the whole production period sits inside the window. Figures read from the course page today, 13 September 2026, are 6,229 students, a 4.98 rating from 225 reviews, 185,106 seconds of video and 954,373 page views, all accumulated over the eight years since.

Introduction to Animated Interactive Web Effects — the second Hahow course

Hahow's public API records this course's publishTime as 16 August 2017. The course page is titled Introduction to Animated Interactive Web Effects (JS/CANVAS) and describes a fast route from zero into interactive web pages, JavaScript and hands-on drawing examples, ending with Vue.js as the front-end layer. His own essay dates the production from August 2017 to August 2018, spanning basic web pages, introductory JavaScript, Canvas and effect animation up to advanced Vue, with more than 60 examples and over 400 slides. Crowdfunding passed 600 percent in under ten hours, and the essay records close to 2,300 students at the time of writing.

  • Teaching
  • Mathematics
Hahow course cover: Animated Web FX Introduction
CourseChe-Yu Wu / Hahow course cover

· Published Taken from the publication time in the Hahow public API.

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
DschoolNTU2017 — the NTU D-School site — project image
Open sourceMonoame Design / portfolio image

· Published Taken from the repository creation date on GitHub; the work itself may have started earlier.

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
Boss, Coding Please — sticky note wall part 2, shared editing through Firebase — YouTube video thumbnail
WritingChe-Yu Wu / YouTube

· Published Taken from the upload date on the YouTube page; the live session itself may fall a day or two earlier.

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 — a recolourable sticky note wall, part 1 — YouTube video thumbnail
WritingChe-Yu Wu / YouTube

· Published Taken from the upload date on the YouTube page; the live session itself may fall a day or two earlier.

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
vue-lazy-table — a Vue table component with minimum configuration — project image
Open sourceChe-Yu Wu / GitHub README image

· Published Taken from the repository creation date on GitHub; the work itself may have started earlier.

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
Boss, Coding Please — learning Vue.js through tic tac toe — YouTube video thumbnail
WritingChe-Yu Wu / YouTube

· Published Taken from the upload date on the YouTube page; the live session itself may fall a day or two earlier.

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
Hahow course cover: Animated Web FX Introduction
CourseChe-Yu Wu / Hahow course cover

· Published Taken from the campaign deadline in the Hahow public API.

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
CrowdWatch — fifty hours and 4,300 students building interactive pages — image from the article
PressCrowdWatch / article image

· Published Taken from the published time in the page metadata, 13 June 2017; the page itself displays 14 June 2017.

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
n3xtcon brand identity and website — work page image
PrototypeChe-Yu Wu

· Published Taken from the start of the span printed on the work page; the later part of that span falls outside this window.

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
itri2017 — the front end repository for the ITRI electricity journal — project image
Open sourceMonoame Design / portfolio image

· Published Taken from the repository creation date on GitHub; the work itself may have started earlier.

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
Boss, Coding Please — an iOS style calendar with a to-do list — YouTube video thumbnail
WritingChe-Yu Wu / YouTube

· Published Taken from the upload date on the YouTube page; the live session itself may fall a day or two earlier.

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
A new course instead of the usual coding — YouTube video thumbnail
CourseChe-Yu Wu / YouTube

· Published Taken from the campaign start time in the Hahow public API; the announcement gives 18 May as the stream date.

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
Boss, Coding Please — drawing a radar sweep that finds the enemy — YouTube video thumbnail
WritingChe-Yu Wu / YouTube

· Published Taken from the upload date on the YouTube page; the live session itself may fall a day or two earlier.

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
TEDxNCUE Forward — creating possibilities across disciplines — video still
TalkTEDx Talks / YouTube thumbnail

· Past event record 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.

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
TaichungDigital2017 — a Taichung exhibition site — project image
Open sourceMonoame Design / portfolio image

· Published Taken from the repository creation date on GitHub; the work itself may have started earlier.

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
Boss, Coding Please — driving a map to show the matching weather — YouTube video thumbnail
WritingChe-Yu Wu / YouTube

· Published Taken from the upload date on the YouTube page; the live session itself may fall a day or two earlier.

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 — hand rolling a clock out of mathematics — YouTube video thumbnail
WritingChe-Yu Wu / YouTube

· Published Taken from the upload date on the YouTube page; the live session itself may fall a day or two earlier.

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 — making web pages with terrifying trigonometry, part 1 — YouTube video thumbnail
WritingChe-Yu Wu / YouTube

· Published Taken from the upload date on the YouTube page; the live session itself may fall a day or two earlier.

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 — from Illustrator artwork to interactive animation on the Metro Soundscape site — YouTube video thumbnail
WritingChe-Yu Wu / YouTube

· Published Taken from the upload date on the YouTube page; the live session itself may fall a day or two earlier.

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 — a hotel room picker built from Vue.js components — YouTube video thumbnail
WritingChe-Yu Wu / YouTube

· Published Taken from the upload date on the YouTube page; the live session itself may fall a day or two earlier.

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
Household electricity journal website — work page image
PrototypeChe-Yu Wu

· Published Taken from the start of the span printed on the work page.

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
Hahow course cover: Animated Interactive Web Programming
CourseChe-Yu Wu / Hahow course cover

· Published 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.

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
CourseChe-Yu Wu / Hahow course cover

· Published 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.

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
Taipei Metro Soundscape interactive website — work page image
PrototypeChe-Yu Wu

· Published 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.

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