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 Red string: documented links · Twine: shared themes · Hover a paper to read a connection. [Complete records ↓](https://cheyuwu.com/strata/2017/#lab-records) ****Case file**2017-01-01 / 2017-12-3133 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 ** ![](https://cheyuwu.com/static/lab/2017/awiclass-gallery.webp) *Student work* ### 2017 · 01 ** ![](https://cheyuwu.com/static/img/mirror/25e82a257f00.webp) - - ** ![](https://cheyuwu.com/static/lab-captures/hahow-webdesign1.webp) - *Online course* ** ![](https://cheyuwu.com/static/lab-captures/hahow-webdesign1.webp) - ### 2017 · 03 ** ![](https://cheyuwu.com/static/img/mirror/49805527b04b.webp) - ### 2017 · 04 ** ![](https://cheyuwu.com/static/img/mirror/54bedff7fc9a.jpg) - ** ![](https://cheyuwu.com/static/img/mirror/483b40b3c7f5.jpg) - *SVG animation* ** ![](https://cheyuwu.com/static/img/mirror/863b1c0e7e91.jpg) - - *Trigonometry* ** ![](https://cheyuwu.com/static/img/mirror/4a01371bd42d.jpg) - - *Trigonometry* ** ![](https://cheyuwu.com/static/img/mirror/e399ec066ff9.jpg) *Vue.js* ** ![](https://cheyuwu.com/static/img/mirror/d0cdb314e3de.jpg) - *Data visualisation* ** ![](https://cheyuwu.com/static/lab/2017/repo-taichung-digital.webp) - *Exhibition site* ### 2017 · 05 ** ![](https://cheyuwu.com/static/img/mirror/089e7c8ddf06.jpg) - - *Vue.js* ** ![](https://cheyuwu.com/static/lab/2017/tedx-ncue.webp) - *Cross-disciplinary* ** ![](https://cheyuwu.com/static/img/mirror/191b70cbdc4f.jpg) - - ** ![](https://cheyuwu.com/static/img/mirror/759064a0f432.jpg) - - *Crowdfunding* ** ![](https://cheyuwu.com/static/img/mirror/f641ec656419.jpg) - ** ![](https://cheyuwu.com/static/lab/2017/repo-itri-2017.webp) - - ### 2017 · 06 ** ![](https://cheyuwu.com/static/img/mirror/af7e4d0a4c08.webp) - *Brand identity* ** ![](https://cheyuwu.com/static/lab/2017/crowdwatch-4300.webp) - - - ** ![](https://cheyuwu.com/static/lab-captures/hahow-webdesign2.webp) - *Crowdfunding* ** ![](https://cheyuwu.com/static/img/mirror/42dd7d255fb5.jpg) - - - *Vue.js* ** ![](https://cheyuwu.com/static/lab/2017/repo-vue-lazy-table.webp) - ### 2017 · 07 ** ![](https://cheyuwu.com/static/img/mirror/6912e52fa15e.jpg) - *Vue.js* ** ![](https://cheyuwu.com/static/img/mirror/32e6946744d7.jpg) - - ### 2017 · 08 ** ![](https://cheyuwu.com/static/lab/2017/repo-dschool-ntu.webp) - *University site* ** ![](https://cheyuwu.com/static/lab-captures/hahow-webdesign2.webp) - ** ![](https://cheyuwu.com/static/lab-captures/hahow-webdesign2.webp) *Teaching* ** - *ZaShare* ### 2017 · 10 ** ![](https://cheyuwu.com/static/lab/2017/repo-n3xt2017.webp) - *Repository* ** ![](https://cheyuwu.com/static/lab/2017/mopcon-2017.webp) - *Talk* ** - ** ![](https://cheyuwu.com/static/lab/2017/repo-ideasql-instagram-crawler.webp) - ![](https://kyoko.openprocessing.org/thumbnails/visualThumbnail2290248@2x.jpg) ![](https://cheyuwu.com/static/img/sketches/923989-sm.webp) ![](https://cheyuwu.com/static/img/mirror/1239323070da-sm.webp) ![](https://cheyuwu.com/static/img/sketches/1635740-sm.webp) ![](https://cheyuwu.com/static/img/sketches/1615617-sm.webp) ![](https://cheyuwu.com/static/img/mirror/39bad087e6fd-sm.webp) ![](https://cheyuwu.com/static/img/mirror/0c23aeb30692-sm.webp) ![](https://cheyuwu.com/static/img/sketches/925596-sm.webp) Family tree**How 818 daily sketches grew out of one another**46 families drawn as branching trees with thumbnails, 2018 to 2026→ [https://cheyuwu.com/lineage/](https://cheyuwu.com/lineage/) Complete records ## Read each record Newest first, older as you go down. Each record retains its date basis, public sources and connection labels. 2017 ![ideaSQL Instagram crawler — project image](https://cheyuwu.com/static/lab/2017/repo-ideasql-instagram-crawler.webp) 2017-10-31 Open sourceChe-Yu Wu / GitHub README image 2017-10-31 · 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 Sources [Open the original page ↗︎](https://github.com/frank890417/ideaSQL-instagram-crawler) [GitHub ↗︎](https://github.com/frank890417/ideaSQL-instagram-crawler) [Monoame Design work page ↗︎](https://monoame.com/works/22) Related records [→ n3xt2017 — public repository for a Za Share expo site](https://cheyuwu.com/strata/2017/#lab-repo-n3xt2017) · A public repository from the same commissioned-work period (Curatorial theme) 2017-10-29 Writing 2017-10-29 · 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 Sources [Open the original page ↗︎](https://www.slideshare.net/cheyuwu3/vue-gsap-d3) [SlideShare ↗︎](https://www.slideshare.net/cheyuwu3/vue-gsap-d3) Related records [→ Web motion integration and architecture with Vue, GSAP and D3 — MOPCON 2017](https://cheyuwu.com/strata/2017/#lab-mopcon-2017) · The slide deck from the same talk (Documented connection) ![Web motion integration and architecture with Vue, GSAP and D3 — MOPCON 2017 — video still](https://cheyuwu.com/static/lab/2017/mopcon-2017.webp) 2017-10-29 TalkMOPCON / YouTube thumbnail 2017-10-29 · 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 Sources [Open the original page ↗︎](https://www.youtube.com/watch?v=XLZ3lahTOWU) [MOPCON on YouTube ↗︎](https://www.youtube.com/watch?v=XLZ3lahTOWU) [SlideShare ↗︎](https://www.slideshare.net/cheyuwu3/vue-gsap-d3) Related records [→ Vue, GSAP and D3 for web motion architecture — slide deck](https://cheyuwu.com/strata/2017/#lab-slides-vue-gsap-d3) · The slide deck from the same talk (Documented connection) ![n3xt2017 — public repository for a Za Share expo site — project image](https://cheyuwu.com/static/lab/2017/repo-n3xt2017.webp) 2017-10-01 Open sourceMonoame Design / portfolio image 2017-10-01 · 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 Sources [Open the original page ↗︎](https://github.com/frank890417/n3xt2017) [GitHub ↗︎](https://github.com/frank890417/n3xt2017) [Monoame Design work page ↗︎](https://monoame.com/works/25) [Za Share ↗︎](https://zashare.org/) Related records [→ ideaSQL Instagram crawler](https://cheyuwu.com/strata/2017/#lab-repo-ideasql-instagram-crawler) · A public repository from the same commissioned-work period (Curatorial theme) 2017-08-24 Open source 2017-08-24 · 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 Sources [Open the original page ↗︎](https://github.com/frank890417/pacman_zashare) [GitHub ↗︎](https://github.com/frank890417/pacman_zashare) Related records [→ DschoolNTU2017 — the NTU D-School site](https://cheyuwu.com/strata/2017/#lab-repo-dschool-ntu) · A public repository from the same month (Curatorial theme) [→ zashare_website — the ZaShare site（University）](https://cheyuwu.com/strata/2016/#lab-repo-zashare-website) · The same ZaShare client line (Curatorial theme) ![Hahow course cover: Animated Web FX Introduction](https://cheyuwu.com/static/lab-captures/hahow-webdesign2.webp) 2017-08-16 CourseChe-Yu Wu / Hahow course cover 2017-08-16 · 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 Sources [Open the original page ↗︎](https://hahow.in/cr/monoame-webdesign2) [Hahow ↗︎](https://hahow.in/cr/monoame-webdesign2) [Hahow public API ↗︎](https://api.hahow.in/api/courses/monoame-webdesign2) [cheyuwu.com ↗︎](https://cheyuwu.com/writing/2018-effects-course-brewing/) Related records [→ Brewing an Online Coding Course That Fuses Web, Design, Math and Effects（2018）](https://cheyuwu.com/strata/2018/#lab-writing-effects-brewing) · The production account of the same course (Documented connection) [→ Building agar.io with object orientation and mathematics（2018）](https://cheyuwu.com/strata/2018/#lab-live-agario) · The live version of a course example (Curatorial theme) [→ Project 12 Space Invader（2018）](https://cheyuwu.com/strata/2018/#lab-codepen-space-invader) · The project numbering of the course being made at the time (Curatorial theme) [→ Never Just an Online Course — A Wager on Driving Evolution Forward（2018）](https://cheyuwu.com/strata/2018/#lab-writing-hahow-bet) · The second course the essay looks toward (Curatorial theme) ![Hahow course cover: Animated Web FX Introduction](https://cheyuwu.com/static/lab-captures/hahow-webdesign2.webp) 2017-08-16 CourseChe-Yu Wu / Hahow course cover 2017-08-16 · 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 Sources [Open the original page ↗︎](https://hahow.in/cr/monoame-webdesign2) [Hahow 課程頁 ↗︎](https://hahow.in/cr/monoame-webdesign2) [Hahow public course API ↗︎](https://api.hahow.in/api/courses/586fae97a8aae907000ce721) Related records [→ Hahow course two — the campaign opens, explained live](https://cheyuwu.com/strata/2017/#lab-course2-fundraising-open) · The same course going live (Curatorial theme) ![DschoolNTU2017 — the NTU D-School site — project image](https://cheyuwu.com/static/lab/2017/repo-dschool-ntu.webp) 2017-08-02 Open sourceMonoame Design / portfolio image 2017-08-02 · 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 Sources [Open the original page ↗︎](https://github.com/frank890417/DschoolNTU2017) [GitHub ↗︎](https://github.com/frank890417/DschoolNTU2017) Related records [→ pacman_zashare — a Pac-Man page for ZaShare](https://cheyuwu.com/strata/2017/#lab-repo-pacman-zashare) · A public repository from the same month (Curatorial theme) ![Boss, Coding Please — sticky note wall part 2, shared editing through Firebase — YouTube video thumbnail](https://cheyuwu.com/static/img/mirror/32e6946744d7.jpg) 2017-07-21 WritingChe-Yu Wu / YouTube 2017-07-21 · 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 Sources [Open the original page ↗︎](https://www.youtube.com/watch?v=-Sv4Lhdf5PQ) [哲宇寇汀吧 CheYu's Coding Bar on YouTube ↗︎](https://www.youtube.com/watch?v=-Sv4Lhdf5PQ) Related records [→ Boss, Coding Please — learning Vue.js through tic tac toe](https://cheyuwu.com/strata/2017/#lab-boss-coding-tictactoe) · The same run of Firebase experiments (Curatorial theme) [→ Boss, Coding Please — a recolourable sticky note wall, part 1](https://cheyuwu.com/strata/2017/#lab-boss-coding-sticky-wall-1) · The second part of the same pair (Documented connection) ![Boss, Coding Please — a recolourable sticky note wall, part 1 — YouTube video thumbnail](https://cheyuwu.com/static/img/mirror/6912e52fa15e.jpg) 2017-07-14 WritingChe-Yu Wu / YouTube 2017-07-14 · 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 Sources [Open the original page ↗︎](https://www.youtube.com/watch?v=xOAHnDsd2BQ) [哲宇寇汀吧 CheYu's Coding Bar on YouTube ↗︎](https://www.youtube.com/watch?v=xOAHnDsd2BQ) Related records [→ Boss, Coding Please — sticky note wall part 2, shared editing through Firebase](https://cheyuwu.com/strata/2017/#lab-boss-coding-sticky-wall-2) · The second part of the same pair (Documented connection) ![vue-lazy-table — a Vue table component with minimum configuration — project image](https://cheyuwu.com/static/lab/2017/repo-vue-lazy-table.webp) 2017-06-26 Open sourceChe-Yu Wu / GitHub README image 2017-06-26 · 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 Sources [Open the original page ↗︎](https://github.com/frank890417/vue-lazy-table) [GitHub ↗︎](https://github.com/frank890417/vue-lazy-table) Related records [→ Boss, Coding Please — learning Vue.js through tic tac toe](https://cheyuwu.com/strata/2017/#lab-boss-coding-tictactoe) · The same intense run of Vue.js work (Curatorial theme) ![Boss, Coding Please — learning Vue.js through tic tac toe — YouTube video thumbnail](https://cheyuwu.com/static/img/mirror/42dd7d255fb5.jpg) 2017-06-22 WritingChe-Yu Wu / YouTube 2017-06-22 · 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 Sources [Open the original page ↗︎](https://www.youtube.com/watch?v=jhOMF8DRVaY) [哲宇寇汀吧 CheYu's Coding Bar on YouTube ↗︎](https://www.youtube.com/watch?v=jhOMF8DRVaY) Related records [→ Boss, Coding Please — an iOS style calendar with a to-do list](https://cheyuwu.com/strata/2017/#lab-boss-coding-calendar) · The same Thursday coding season (Curatorial theme) [→ Boss, Coding Please — sticky note wall part 2, shared editing through Firebase](https://cheyuwu.com/strata/2017/#lab-boss-coding-sticky-wall-2) · The same run of Firebase experiments (Curatorial theme) [→ vue-lazy-table — a Vue table component with minimum configuration](https://cheyuwu.com/strata/2017/#lab-repo-vue-lazy-table) · The same intense run of Vue.js work (Curatorial theme) ![Hahow course cover: Animated Web FX Introduction](https://cheyuwu.com/static/lab-captures/hahow-webdesign2.webp) 2017-06-17 CourseChe-Yu Wu / Hahow course cover 2017-06-17 · 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 Sources [Open the original page ↗︎](https://hahow.in/cr/monoame-webdesign2) [Hahow public course API ↗︎](https://api.hahow.in/api/courses/586fae97a8aae907000ce721) [群眾觀點 CrowdWatch ↗︎](https://crowdwatch.tw/post/2735/) Related records [→ CrowdWatch — fifty hours and 4,300 students building interactive pages](https://cheyuwu.com/strata/2017/#lab-crowdwatch-4300) · The campaign the article covers (Documented connection) **群眾觀點 CrowdWatch** ![CrowdWatch — fifty hours and 4,300 students building interactive pages — image from the article](https://cheyuwu.com/static/lab/2017/crowdwatch-4300.webp) 2017-06-13 PressCrowdWatch / article image 2017-06-13 · 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 Sources [Open the original page ↗︎](https://crowdwatch.tw/post/2735/) [群眾觀點 CrowdWatch ↗︎](https://crowdwatch.tw/post/2735/) [INSIDE 授權轉載版 ↗︎](https://www.inside.com.tw/article/9629-how-to-create-successful-online-curriculum-fund-raising-plan) Related records [→ TEDxNCUE Forward — creating possibilities across disciplines](https://cheyuwu.com/strata/2017/#lab-tedx-ncue) · The public identity of the same months (Curatorial theme) [→ Hahow course two — the campaign opens, explained live](https://cheyuwu.com/strata/2017/#lab-course2-fundraising-open) · The article covering this campaign (Documented connection) [→ Hahow course two — the campaign closes](https://cheyuwu.com/strata/2017/#lab-course2-campaign-close) · The campaign the article covers (Documented connection) ![n3xtcon brand identity and website — work page image](https://cheyuwu.com/static/img/mirror/af7e4d0a4c08.webp) 2017-06 PrototypeChe-Yu Wu 2017-06 · 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 Sources [Open the original page ↗︎](https://cheyuwu.com/project/1/) [cheyuwu.com ↗︎](https://cheyuwu.com/project/1/) Related records [→ Taipei Metro Soundscape — the station music open call site](https://cheyuwu.com/strata/2017/#lab-taipei-metro-soundscape) · A commission from the same year (Curatorial theme) ![itri2017 — the front end repository for the ITRI electricity journal — project image](https://cheyuwu.com/static/lab/2017/repo-itri-2017.webp) 2017-05-30 Open sourceMonoame Design / portfolio image 2017-05-30 · 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 Sources [Open the original page ↗︎](https://github.com/frank890417/itri2017) [GitHub ↗︎](https://github.com/frank890417/itri2017) Related records [→ ITRI household electricity journal — 3D rooms and data visualisation](https://cheyuwu.com/strata/2017/#lab-itri-electricity-journal) · The public repo for the same project (Documented connection) [→ TaichungDigital2017 — a Taichung exhibition site](https://cheyuwu.com/strata/2017/#lab-repo-taichung-digital) · A repository from the same run of commissions (Curatorial theme) ![Boss, Coding Please — an iOS style calendar with a to-do list — YouTube video thumbnail](https://cheyuwu.com/static/img/mirror/f641ec656419.jpg) 2017-05-25 WritingChe-Yu Wu / YouTube 2017-05-25 · 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 Sources [Open the original page ↗︎](https://www.youtube.com/watch?v=kMGUJMThb-U) [哲宇寇汀吧 CheYu's Coding Bar on YouTube ↗︎](https://www.youtube.com/watch?v=kMGUJMThb-U) Related records [→ Boss, Coding Please — learning Vue.js through tic tac toe](https://cheyuwu.com/strata/2017/#lab-boss-coding-tictactoe) · The same Thursday coding season (Curatorial theme) ![A new course instead of the usual coding — YouTube video thumbnail](https://cheyuwu.com/static/img/mirror/759064a0f432.jpg) 2017-05-18 CourseChe-Yu Wu / YouTube 2017-05-18 · 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 Sources [Open the original page ↗︎](https://hahow.in/cr/monoame-webdesign2) [Hahow public course API ↗︎](https://api.hahow.in/api/courses/586fae97a8aae907000ce721) [哲宇寇汀吧 YouTube 直播預告 ↗︎](https://www.youtube.com/watch?v=SgoZve6UhRU) Related records [→ Hahow course two goes live](https://cheyuwu.com/strata/2017/#lab-course2-published) · The same course going live (Curatorial theme) [→ CrowdWatch — fifty hours and 4,300 students building interactive pages](https://cheyuwu.com/strata/2017/#lab-crowdwatch-4300) · The article covering this campaign (Documented connection) ![Boss, Coding Please — drawing a radar sweep that finds the enemy — YouTube video thumbnail](https://cheyuwu.com/static/img/mirror/191b70cbdc4f.jpg) 2017-05-11 WritingChe-Yu Wu / YouTube 2017-05-11 · 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 Sources [Open the original page ↗︎](https://www.youtube.com/watch?v=fVAE28YTCMs) [哲宇寇汀吧 CheYu's Coding Bar on YouTube ↗︎](https://www.youtube.com/watch?v=fVAE28YTCMs) Related records [→ Boss, Coding Please — a floating carousel, written fast](https://cheyuwu.com/strata/2017/#lab-boss-coding-carousel) · The same Thursday coding season (Curatorial theme) [→ Boss, Coding Please — hand rolling a clock out of mathematics](https://cheyuwu.com/strata/2017/#lab-boss-coding-trigonometry-2) · Continuing the same canvas interface line (Documented connection) ![TEDxNCUE Forward — creating possibilities across disciplines — video still](https://cheyuwu.com/static/lab/2017/tedx-ncue.webp) 2017-05-07 TalkTEDx Talks / YouTube thumbnail 2017-05-07 · 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 Sources [Open the original page ↗︎](https://www.youtube.com/watch?v=bl5MrZ6GA98) [TED 活動頁 ↗︎](https://www.ted.com/tedx/events/22851) [TEDx Talks on YouTube ↗︎](https://www.youtube.com/watch?v=bl5MrZ6GA98) Related records [→ CrowdWatch — fifty hours and 4,300 students building interactive pages](https://cheyuwu.com/strata/2017/#lab-crowdwatch-4300) · The public identity of the same months (Curatorial theme) ![Boss, Coding Please — a floating carousel, written fast — YouTube video thumbnail](https://cheyuwu.com/static/img/mirror/089e7c8ddf06.jpg) 2017-05-04 WritingChe-Yu Wu / YouTube 2017-05-04 · 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 floating carousel, written fast A stream noting that carousels are everywhere but their coordinate maths and updates are tedious, then showing how to bind data with Vue.js to build one quickly, along with a handful of everyday techniques. The description links the CodePen example. - Vue.js - UI components Sources [Open the original page ↗︎](https://www.youtube.com/watch?v=GFMnJKy_910) [哲宇寇汀吧 CheYu's Coding Bar on YouTube ↗︎](https://www.youtube.com/watch?v=GFMnJKy_910) Related records [→ Boss, Coding Please — driving a map to show the matching weather](https://cheyuwu.com/strata/2017/#lab-boss-coding-weather-map) · The same Thursday coding season (Curatorial theme) [→ Boss, Coding Please — drawing a radar sweep that finds the enemy](https://cheyuwu.com/strata/2017/#lab-boss-coding-radar) · The same Thursday coding season (Curatorial theme) ![TaichungDigital2017 — a Taichung exhibition site — project image](https://cheyuwu.com/static/lab/2017/repo-taichung-digital.webp) 2017-04-30 Open sourceMonoame Design / portfolio image 2017-04-30 · 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 Sources [Open the original page ↗︎](https://github.com/frank890417/TaichungDigital2017) [GitHub ↗︎](https://github.com/frank890417/TaichungDigital2017) Related records [→ itri2017 — the front end repository for the ITRI electricity journal](https://cheyuwu.com/strata/2017/#lab-repo-itri-2017) · A repository from the same run of commissions (Curatorial theme) ![Boss, Coding Please — driving a map to show the matching weather — YouTube video thumbnail](https://cheyuwu.com/static/img/mirror/d0cdb314e3de.jpg) 2017-04-27 WritingChe-Yu Wu / YouTube 2017-04-27 · 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 Sources [Open the original page ↗︎](https://www.youtube.com/watch?v=eHrGB5EHtF4) [哲宇寇汀吧 CheYu's Coding Bar on YouTube ↗︎](https://www.youtube.com/watch?v=eHrGB5EHtF4) Related records [→ Boss, Coding Please — a floating carousel, written fast](https://cheyuwu.com/strata/2017/#lab-boss-coding-carousel) · The same Thursday coding season (Curatorial theme) ![Boss, Coding Please — Vue.js components and live keyword highlighting — YouTube video thumbnail](https://cheyuwu.com/static/img/mirror/e399ec066ff9.jpg) 2017-04-21 WritingChe-Yu Wu / YouTube 2017-04-21 · Published Taken from the upload date on the YouTube page; the live session itself may fall a day or two earlier. ### Boss, Coding Please — Vue.js components and live keyword highlighting A stream on data loading, Vue components, map and filter, and some regular expression concepts, using ZaShare data as the sample set and covering the traps the author hit while building the feature. The description links the CodePen example. - Vue.js - Data handling Sources [Open the original page ↗︎](https://www.youtube.com/watch?v=V-BLAZbSV1s) [哲宇寇汀吧 CheYu's Coding Bar on YouTube ↗︎](https://www.youtube.com/watch?v=V-BLAZbSV1s) Related records [→ zashare_website — the ZaShare site（University）](https://cheyuwu.com/strata/2016/#lab-repo-zashare-website) · The same ZaShare website line (Curatorial theme) ![Boss, Coding Please — hand rolling a clock out of mathematics — YouTube video thumbnail](https://cheyuwu.com/static/img/mirror/4a01371bd42d.jpg) 2017-04-20 WritingChe-Yu Wu / YouTube 2017-04-20 · 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 Sources [Open the original page ↗︎](https://www.youtube.com/watch?v=AOcSUTNTXCk) [哲宇寇汀吧 CheYu's Coding Bar on YouTube ↗︎](https://www.youtube.com/watch?v=AOcSUTNTXCk) Related records [→ Boss, Coding Please — making web pages with terrifying trigonometry, part 1](https://cheyuwu.com/strata/2017/#lab-boss-coding-trigonometry-1) · The second part of the same pair (Documented connection) [→ Boss, Coding Please — drawing a radar sweep that finds the enemy](https://cheyuwu.com/strata/2017/#lab-boss-coding-radar) · Continuing the same canvas interface line (Documented connection) ![Boss, Coding Please — making web pages with terrifying trigonometry, part 1 — YouTube video thumbnail](https://cheyuwu.com/static/img/mirror/863b1c0e7e91.jpg) 2017-04-06 WritingChe-Yu Wu / YouTube 2017-04-06 · 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 Sources [Open the original page ↗︎](https://www.youtube.com/watch?v=CUk3end28rM) [哲宇寇汀吧 CheYu's Coding Bar on YouTube ↗︎](https://www.youtube.com/watch?v=CUk3end28rM) Related records [→ Boss, Coding Please — a hotel room picker built from Vue.js components](https://cheyuwu.com/strata/2017/#lab-boss-coding-hotel-rooms) · The same Thursday coding season (Curatorial theme) [→ Boss, Coding Please — hand rolling a clock out of mathematics](https://cheyuwu.com/strata/2017/#lab-boss-coding-trigonometry-2) · The second part of the same pair (Documented connection) ![Boss, Coding Please — from Illustrator artwork to interactive animation on the Metro Soundscape site — YouTube video thumbnail](https://cheyuwu.com/static/img/mirror/483b40b3c7f5.jpg) 2017-04-02 WritingChe-Yu Wu / YouTube 2017-04-02 · 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 Sources [Open the original page ↗︎](https://www.youtube.com/watch?v=oB3lv1wW_I4) [哲宇寇汀吧 CheYu's Coding Bar on YouTube ↗︎](https://www.youtube.com/watch?v=oB3lv1wW_I4) Related records [→ Taipei Metro Soundscape — the station music open call site](https://cheyuwu.com/strata/2017/#lab-taipei-metro-soundscape) · The stream that took this project's animation apart (Documented connection) ![Boss, Coding Please — a hotel room picker built from Vue.js components — YouTube video thumbnail](https://cheyuwu.com/static/img/mirror/54bedff7fc9a.jpg) 2017-04-02 WritingChe-Yu Wu / YouTube 2017-04-02 · 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 Sources [Open the original page ↗︎](https://www.youtube.com/watch?v=uLhXpzsv5kk) [哲宇寇汀吧 CheYu's Coding Bar on YouTube ↗︎](https://www.youtube.com/watch?v=uLhXpzsv5kk) Related records [→ Boss, Coding Please — making web pages with terrifying trigonometry, part 1](https://cheyuwu.com/strata/2017/#lab-boss-coding-trigonometry-1) · The same Thursday coding season (Curatorial theme) ![Household electricity journal website — work page image](https://cheyuwu.com/static/img/mirror/49805527b04b.webp) 2017-03 PrototypeChe-Yu Wu 2017-03 · 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 Sources [Open the original page ↗︎](https://cheyuwu.com/project/-L3BF-Vyu4MIt4bQ_jDa/) [cheyuwu.com ↗︎](https://cheyuwu.com/project/-L3BF-Vyu4MIt4bQ_jDa/) [saving.energypark.org.tw ↗︎](https://saving.energypark.org.tw/) Related records [→ itri2017 — the front end repository for the ITRI electricity journal](https://cheyuwu.com/strata/2017/#lab-repo-itri-2017) · The public repo for the same project (Documented connection) ![Hahow course cover: Animated Interactive Web Programming](https://cheyuwu.com/static/lab-captures/hahow-webdesign1.webp) 2017-01-26 CourseChe-Yu Wu / Hahow course cover 2017-01-26 · 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 Sources [Open the original page ↗︎](https://hahow.in/cr/monoame-webdesign1) [Hahow 課程頁更新日誌 ↗︎](https://hahow.in/cr/monoame-webdesign1) Related records [→ Hahow course one — all units online](https://cheyuwu.com/strata/2017/#lab-course1-all-units-online) · The next entry in the same log (Documented connection) ![Hahow course cover: Animated Interactive Web Programming](https://cheyuwu.com/static/lab-captures/hahow-webdesign1.webp) 2017-01-17 CourseChe-Yu Wu / Hahow course cover 2017-01-17 · 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 Sources [Open the original page ↗︎](https://hahow.in/cr/monoame-webdesign1) [Hahow 課程頁更新日誌 ↗︎](https://hahow.in/cr/monoame-webdesign1) [Hahow public course API ↗︎](https://api.hahow.in/api/courses/56189df9df7b3d0b005c6639) Related records [→ Hahow course one — an editable shared notebook](https://cheyuwu.com/strata/2017/#lab-course1-cowrite) · The next entry in the same log (Documented connection) ![Taipei Metro Soundscape interactive website — work page image](https://cheyuwu.com/static/img/mirror/25e82a257f00.webp) 2017-01 PrototypeChe-Yu Wu 2017-01 · 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 Sources [Open the original page ↗︎](https://cheyuwu.com/project/-L3BAn3HOg8fE1jx5B79/) [cheyuwu.com ↗︎](https://cheyuwu.com/project/-L3BAn3HOg8fE1jx5B79/) [taipeisoundscape.com ↗︎](https://taipeisoundscape.com/en) Related records [→ Boss, Coding Please — from Illustrator artwork to interactive animation on the Metro Soundscape site](https://cheyuwu.com/strata/2017/#lab-boss-coding-metro-svg) · The stream that took this project's animation apart (Documented connection) [→ Unleash the Future — n3xtcon brand identity and site](https://cheyuwu.com/strata/2017/#lab-n3xtcon-brand) · A commission from the same year (Curatorial theme) ![The 2017 awiclass student gallery — project image](https://cheyuwu.com/static/lab/2017/awiclass-gallery.webp) 2017 PrototypeMonoame Design / portfolio image 2017 · Published The address and the page give only 2017; the exact launch date could not be confirmed from public pages. ### The 2017 awiclass student gallery Both Hahow course pages link their student galleries to 2017.awiclass.monoame.com, with proj/1 for the first course and proj/2 for the second. The site sits on the Monoame domain, its page title reads as the Hahow interactive web programming course, and it holds the work and exercises students submitted. - Student work - Teaching tools Sources [Open the original page ↗︎](https://2017.awiclass.monoame.com/proj/2) [awiclass 同學作品集 ↗︎](https://2017.awiclass.monoame.com/proj/2) [Hahow 課程頁的作品集連結 ↗︎](https://hahow.in/cr/monoame-webdesign2) Related records [→ Hahow course one — a live student work collector goes up（University）](https://cheyuwu.com/strata/2016/#lab-course1-works-collector) · The collector noted on the course page (Documented connection) [→ Animated-Web-Course — tooling for the interactive web course（University）](https://cheyuwu.com/strata/2016/#lab-repo-animated-web-course) · The back end of the same gallery (Documented connection)