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 ↓](https://cheyuwu.com/lab/2017/#lab-records) ****Case file**2016-09-09 / 2017-09-0933 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 ** - - - *Course tooling* ** - *PHP* ** - *Campaign site* ### 2016 · 11 ** ![](https://cheyuwu.com/static/lab-captures/hahow-webdesign1.webp) - *Course operations* ** - - *ZaShare* ### 2017 · all year ** - - *Student work* ### 2017 · 01 ** ![](https://firebasestorage.googleapis.com/v0/b/wucheyu-portfolio.appspot.com/o/images%2FTaipei%20Metro%20Soundscape%20Project%2Fcover.jpg?alt=media&token=aadd606a-2460-4f98-9db1-decd68fea3e5) - - ** ![](https://cheyuwu.com/static/lab-captures/hahow-webdesign1.webp) - *Online course* ** ![](https://cheyuwu.com/static/lab-captures/hahow-webdesign1.webp) - ### 2017 · 03 ** ![](https://firebasestorage.googleapis.com/v0/b/wucheyu-portfolio.appspot.com/o/images%2FHousehold%20Electricity%20Journal%20in%20Collaboration%20with%20ITRI%20Green%20Energy%20and%20Environment%20Research%20Laboratories%2Fcover.jpg?alt=media&token=14dbd113-bef6-49a7-ba97-c033bd5e5a95) - ### 2017 · 04 ** ![](https://i.ytimg.com/vi/uLhXpzsv5kk/hqdefault.jpg) - ** ![](https://i.ytimg.com/vi/oB3lv1wW_I4/hqdefault.jpg) - *SVG animation* ** ![](https://i.ytimg.com/vi/CUk3end28rM/hqdefault.jpg) - - *Trigonometry* ** ![](https://i.ytimg.com/vi/AOcSUTNTXCk/hqdefault.jpg) - - *Trigonometry* ** ![](https://i.ytimg.com/vi/V-BLAZbSV1s/hqdefault.jpg) - *Vue.js* ** ![](https://i.ytimg.com/vi/eHrGB5EHtF4/hqdefault.jpg) - *Data visualisation* ** - *Exhibition site* ### 2017 · 05 ** ![](https://i.ytimg.com/vi/GFMnJKy_910/hqdefault.jpg) - - *Vue.js* ** - *Cross-disciplinary* ** ![](https://i.ytimg.com/vi/fVAE28YTCMs/hqdefault.jpg) - - ** ![](https://i.ytimg.com/vi/SgoZve6UhRU/hqdefault.jpg) - - *Crowdfunding* ** ![](https://i.ytimg.com/vi/kMGUJMThb-U/hqdefault.jpg) - ** - - ### 2017 · 06 ** ![](https://firebasestorage.googleapis.com/v0/b/wucheyu-portfolio.appspot.com/o/images%2FUnleash%20the%20Future%20-%20n3xtcon%20brand%20design%2Fcover.jpg?alt=media&token=fc69f24d-f81f-4959-a481-b5ef671433c4) - *Brand identity* ** - - - ** ![](https://cheyuwu.com/static/lab-captures/hahow-webdesign2.webp) - *Crowdfunding* ** ![](https://i.ytimg.com/vi/jhOMF8DRVaY/hqdefault.jpg) - - - *Vue.js* ** - ### 2017 · 07 ** ![](https://i.ytimg.com/vi/xOAHnDsd2BQ/hqdefault.jpg) - *Vue.js* ** ![](https://i.ytimg.com/vi/-Sv4Lhdf5PQ/hqdefault.jpg) - - ### 2017 · 08 ** - *University site* ** ![](https://cheyuwu.com/static/lab-captures/hahow-webdesign2.webp) - ** - - *ZaShare* ![](https://cheyuwu.com/static/img/mirror/08250f9b3604.jpg) ![](https://cheyuwu.com/static/img/sketches/923989-sm.webp) ![](https://cheyuwu.com/static/img/mirror/1239323070da.jpg) ![](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.jpg) ![](https://cheyuwu.com/static/img/mirror/0c23aeb30692.jpg) ![](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 Each record retains its date basis, public sources and connection labels. 2016-11-07The 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](https://cheyuwu.com/static/lab-captures/hahow-webdesign1.webp) Che-Yu Wu / Hahow course cover Sources & related records - [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) - [The 2017 awiclass student gallery](https://cheyuwu.com/lab/2017/#lab-awiclass-gallery) · The same homework collection site (Documented connection) 2017-01-17The 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](https://cheyuwu.com/static/lab-captures/hahow-webdesign1.webp) Che-Yu Wu / Hahow course cover Sources & related records - [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) - [Hahow course one — an editable shared notebook](https://cheyuwu.com/lab/2017/#lab-course1-cowrite) · The next entry in the same log (Documented connection) 2017-01-26The 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](https://cheyuwu.com/static/lab-captures/hahow-webdesign1.webp) Che-Yu Wu / Hahow course cover Sources & related records - [Open the original page ↗](https://hahow.in/cr/monoame-webdesign1) - [Hahow 課程頁更新日誌](https://hahow.in/cr/monoame-webdesign1) - [Hahow course one — all units online](https://cheyuwu.com/lab/2017/#lab-course1-all-units-online) · The next entry in the same log (Documented connection) 2017The address and the page give only 2017; the exact launch date could not be confirmed from public pages.Published ### 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 & related records - [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) - [Hahow course one — a live student work collector goes up](https://cheyuwu.com/lab/2017/#lab-course1-works-collector) · The same homework collection site (Documented connection) - [Animated-Web-Course — tooling for the interactive web course](https://cheyuwu.com/lab/2017/#lab-repo-animated-web-course) · The back end of the same gallery (Documented connection) 2017-05-18Taken 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](https://i.ytimg.com/vi/SgoZve6UhRU/hqdefault.jpg) Che-Yu Wu / YouTube Sources & related records - [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) - [Hahow course two goes live](https://cheyuwu.com/lab/2017/#lab-course2-published) · The same course going live (Curatorial theme) - [CrowdWatch — fifty hours and 4,300 students building interactive pages](https://cheyuwu.com/lab/2017/#lab-crowdwatch-4300) · The article covering this campaign (Documented connection) 2017-06-17Taken 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](https://cheyuwu.com/static/lab-captures/hahow-webdesign2.webp) Che-Yu Wu / Hahow course cover Sources & related records - [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/) - [CrowdWatch — fifty hours and 4,300 students building interactive pages](https://cheyuwu.com/lab/2017/#lab-crowdwatch-4300) · Coverage from the same campaign (Documented connection) 2017-08-16Taken 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](https://cheyuwu.com/static/lab-captures/hahow-webdesign2.webp) Che-Yu Wu / Hahow course cover Sources & related records - [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) - [Hahow course two — the campaign opens, explained live](https://cheyuwu.com/lab/2017/#lab-course2-fundraising-open) · The same course going live (Curatorial theme) 2017-04-02Taken 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](https://i.ytimg.com/vi/oB3lv1wW_I4/hqdefault.jpg) Che-Yu Wu / YouTube Sources & related records - [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) - [Taipei Metro Soundscape — the station music open call site](https://cheyuwu.com/lab/2017/#lab-taipei-metro-soundscape) · The same Metro Soundscape project (Documented connection) 2017-04-02Taken 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](https://i.ytimg.com/vi/uLhXpzsv5kk/hqdefault.jpg) Che-Yu Wu / YouTube Sources & related records - [Open the original page ↗](https://www.youtube.com/watch?v=uLhXpzsv5kk) - [哲宇寇汀吧 CheYu's Coding Bar on YouTube](https://www.youtube.com/watch?v=uLhXpzsv5kk) - [Boss, Coding Please — making web pages with terrifying trigonometry, part 1](https://cheyuwu.com/lab/2017/#lab-boss-coding-trigonometry-1) · The same Thursday coding season (Curatorial theme) 2017-04-06Taken 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](https://i.ytimg.com/vi/CUk3end28rM/hqdefault.jpg) Che-Yu Wu / YouTube Sources & related records - [Open the original page ↗](https://www.youtube.com/watch?v=CUk3end28rM) - [哲宇寇汀吧 CheYu's Coding Bar on YouTube](https://www.youtube.com/watch?v=CUk3end28rM) - [Boss, Coding Please — a hotel room picker built from Vue.js components](https://cheyuwu.com/lab/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/lab/2017/#lab-boss-coding-trigonometry-2) · The second part of the same pair (Documented connection) 2017-04-20Taken 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](https://i.ytimg.com/vi/AOcSUTNTXCk/hqdefault.jpg) Che-Yu Wu / YouTube Sources & related records - [Open the original page ↗](https://www.youtube.com/watch?v=AOcSUTNTXCk) - [哲宇寇汀吧 CheYu's Coding Bar on YouTube](https://www.youtube.com/watch?v=AOcSUTNTXCk) - [Boss, Coding Please — making web pages with terrifying trigonometry, part 1](https://cheyuwu.com/lab/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/lab/2017/#lab-boss-coding-radar) · Continuing the same canvas interface line (Documented connection) 2017-04-21Taken from the upload date on the YouTube page; the live session itself may fall a day or two earlier.Published ### 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 ![Boss, Coding Please — Vue.js components and live keyword highlighting — YouTube video thumbnail](https://i.ytimg.com/vi/V-BLAZbSV1s/hqdefault.jpg) Che-Yu Wu / YouTube Sources & related records - [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) - [zashare_website — the ZaShare site](https://cheyuwu.com/lab/2017/#lab-repo-zashare-website) · The same ZaShare website line (Curatorial theme) 2017-04-27Taken 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](https://i.ytimg.com/vi/eHrGB5EHtF4/hqdefault.jpg) Che-Yu Wu / YouTube Sources & related records - [Open the original page ↗](https://www.youtube.com/watch?v=eHrGB5EHtF4) - [哲宇寇汀吧 CheYu's Coding Bar on YouTube](https://www.youtube.com/watch?v=eHrGB5EHtF4) - [Boss, Coding Please — a floating carousel, written fast](https://cheyuwu.com/lab/2017/#lab-boss-coding-carousel) · The same Thursday coding season (Curatorial theme) 2017-05-04Taken from the upload date on the YouTube page; the live session itself may fall a day or two earlier.Published ### 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 ![Boss, Coding Please — a floating carousel, written fast — YouTube video thumbnail](https://i.ytimg.com/vi/GFMnJKy_910/hqdefault.jpg) Che-Yu Wu / YouTube Sources & related records - [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) - [Boss, Coding Please — driving a map to show the matching weather](https://cheyuwu.com/lab/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/lab/2017/#lab-boss-coding-radar) · The same Thursday coding season (Curatorial theme) 2017-05-11Taken 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](https://i.ytimg.com/vi/fVAE28YTCMs/hqdefault.jpg) Che-Yu Wu / YouTube Sources & related records - [Open the original page ↗](https://www.youtube.com/watch?v=fVAE28YTCMs) - [哲宇寇汀吧 CheYu's Coding Bar on YouTube](https://www.youtube.com/watch?v=fVAE28YTCMs) - [Boss, Coding Please — a floating carousel, written fast](https://cheyuwu.com/lab/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/lab/2017/#lab-boss-coding-trigonometry-2) · Continuing the same canvas interface line (Documented connection) 2017-05-25Taken 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](https://i.ytimg.com/vi/kMGUJMThb-U/hqdefault.jpg) Che-Yu Wu / YouTube Sources & related records - [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) - [Boss, Coding Please — learning Vue.js through tic tac toe](https://cheyuwu.com/lab/2017/#lab-boss-coding-tictactoe) · The same Thursday coding season (Curatorial theme) 2017-06-22Taken 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](https://i.ytimg.com/vi/jhOMF8DRVaY/hqdefault.jpg) Che-Yu Wu / YouTube Sources & related records - [Open the original page ↗](https://www.youtube.com/watch?v=jhOMF8DRVaY) - [哲宇寇汀吧 CheYu's Coding Bar on YouTube](https://www.youtube.com/watch?v=jhOMF8DRVaY) - [Boss, Coding Please — an iOS style calendar with a to-do list](https://cheyuwu.com/lab/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/lab/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/lab/2017/#lab-repo-vue-lazy-table) · The same intense run of Vue.js work (Curatorial theme) 2017-07-14Taken 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](https://i.ytimg.com/vi/xOAHnDsd2BQ/hqdefault.jpg) Che-Yu Wu / YouTube Sources & related records - [Open the original page ↗](https://www.youtube.com/watch?v=xOAHnDsd2BQ) - [哲宇寇汀吧 CheYu's Coding Bar on YouTube](https://www.youtube.com/watch?v=xOAHnDsd2BQ) - [Boss, Coding Please — sticky note wall part 2, shared editing through Firebase](https://cheyuwu.com/lab/2017/#lab-boss-coding-sticky-wall-2) · The second part of the same pair (Documented connection) 2017-07-21Taken 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](https://i.ytimg.com/vi/-Sv4Lhdf5PQ/hqdefault.jpg) Che-Yu Wu / YouTube Sources & related records - [Open the original page ↗](https://www.youtube.com/watch?v=-Sv4Lhdf5PQ) - [哲宇寇汀吧 CheYu's Coding Bar on YouTube](https://www.youtube.com/watch?v=-Sv4Lhdf5PQ) - [Boss, Coding Please — learning Vue.js through tic tac toe](https://cheyuwu.com/lab/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/lab/2017/#lab-boss-coding-sticky-wall-1) · The second part of the same pair (Documented connection) 2017-01Taken 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](https://firebasestorage.googleapis.com/v0/b/wucheyu-portfolio.appspot.com/o/images%2FTaipei%20Metro%20Soundscape%20Project%2Fcover.jpg?alt=media&token=aadd606a-2460-4f98-9db1-decd68fea3e5) Che-Yu Wu Sources & related records - [Open the original page ↗](https://cheyuwu.com/project/-L3BAn3HOg8fE1jx5B79/) - [cheyuwu.com](https://cheyuwu.com/project/-L3BAn3HOg8fE1jx5B79/) - [taipeisoundscape.com](https://taipeisoundscape.com/en) - [Boss, Coding Please — from Illustrator artwork to interactive animation on the Metro Soundscape site](https://cheyuwu.com/lab/2017/#lab-boss-coding-metro-svg) · The same Metro Soundscape project (Documented connection) - [Unleash the Future — n3xtcon brand identity and site](https://cheyuwu.com/lab/2017/#lab-n3xtcon-brand) · A commission from the same year (Curatorial theme) 2017-03Taken 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](https://firebasestorage.googleapis.com/v0/b/wucheyu-portfolio.appspot.com/o/images%2FHousehold%20Electricity%20Journal%20in%20Collaboration%20with%20ITRI%20Green%20Energy%20and%20Environment%20Research%20Laboratories%2Fcover.jpg?alt=media&token=14dbd113-bef6-49a7-ba97-c033bd5e5a95) Che-Yu Wu Sources & related records - [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/) - [itri2017 — the front end repository for the ITRI electricity journal](https://cheyuwu.com/lab/2017/#lab-repo-itri-2017) · The public repo for the same project (Documented connection) 2017-06Taken 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](https://firebasestorage.googleapis.com/v0/b/wucheyu-portfolio.appspot.com/o/images%2FUnleash%20the%20Future%20-%20n3xtcon%20brand%20design%2Fcover.jpg?alt=media&token=fc69f24d-f81f-4959-a481-b5ef671433c4) Che-Yu Wu Sources & related records - [Open the original page ↗](https://cheyuwu.com/project/1/) - [cheyuwu.com](https://cheyuwu.com/project/1/) - [Taipei Metro Soundscape — the station music open call site](https://cheyuwu.com/lab/2017/#lab-taipei-metro-soundscape) · A commission from the same year (Curatorial theme) 2016-10-14Taken 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 - [Open the original page ↗](https://github.com/frank890417/Animated-Web-Course) - [GitHub](https://github.com/frank890417/Animated-Web-Course) - [The 2017 awiclass student gallery](https://cheyuwu.com/lab/2017/#lab-awiclass-gallery) · The back end of the same gallery (Documented connection) - [Organic-Alpha — a PHP dataflow scripting library across front and back](https://cheyuwu.com/lab/2017/#lab-repo-organic-alpha) · A repository opened the same day (Curatorial theme) - [The 22nd Citibank United Way campaign site](https://cheyuwu.com/lab/2017/#lab-repo-citibank-unitedway) · A public repository from the same month (Curatorial theme) 2016-10-14Taken 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 - [Open the original page ↗](https://github.com/frank890417/Organic-Alpha) - [GitHub](https://github.com/frank890417/Organic-Alpha) - [Animated-Web-Course — tooling for the interactive web course](https://cheyuwu.com/lab/2017/#lab-repo-animated-web-course) · A repository opened the same day (Curatorial theme) 2016-10-24Taken 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 - [Open the original page ↗](https://github.com/frank890417/citibank_activity_website) - [GitHub](https://github.com/frank890417/citibank_activity_website) - [Animated-Web-Course — tooling for the interactive web course](https://cheyuwu.com/lab/2017/#lab-repo-animated-web-course) · A public repository from the same month (Curatorial theme) 2016-11-19Taken 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 - [Open the original page ↗](https://github.com/frank890417/zashare_website) - [GitHub](https://github.com/frank890417/zashare_website) - [Boss, Coding Please — Vue.js components and live keyword highlighting](https://cheyuwu.com/lab/2017/#lab-boss-coding-vue-search) · The same ZaShare website line (Curatorial theme) - [pacman_zashare — a Pac-Man page for ZaShare](https://cheyuwu.com/lab/2017/#lab-repo-pacman-zashare) · The same ZaShare client line (Curatorial theme) 2017-04-30Taken 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 - [Open the original page ↗](https://github.com/frank890417/TaichungDigital2017) - [GitHub](https://github.com/frank890417/TaichungDigital2017) - [itri2017 — the front end repository for the ITRI electricity journal](https://cheyuwu.com/lab/2017/#lab-repo-itri-2017) · A repository from the same run of commissions (Curatorial theme) 2017-05-30Taken 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 - [Open the original page ↗](https://github.com/frank890417/itri2017) - [GitHub](https://github.com/frank890417/itri2017) - [ITRI household electricity journal — 3D rooms and data visualisation](https://cheyuwu.com/lab/2017/#lab-itri-electricity-journal) · The public repo for the same project (Documented connection) - [TaichungDigital2017 — a Taichung exhibition site](https://cheyuwu.com/lab/2017/#lab-repo-taichung-digital) · A repository from the same run of commissions (Curatorial theme) 2017-06-26Taken 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 - [Open the original page ↗](https://github.com/frank890417/vue-lazy-table) - [GitHub](https://github.com/frank890417/vue-lazy-table) - [Boss, Coding Please — learning Vue.js through tic tac toe](https://cheyuwu.com/lab/2017/#lab-boss-coding-tictactoe) · The same intense run of Vue.js work (Curatorial theme) 2017-08-02Taken 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 - [Open the original page ↗](https://github.com/frank890417/DschoolNTU2017) - [GitHub](https://github.com/frank890417/DschoolNTU2017) - [pacman_zashare — a Pac-Man page for ZaShare](https://cheyuwu.com/lab/2017/#lab-repo-pacman-zashare) · A public repository from the same month (Curatorial theme) 2017-08-24Taken 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 - [Open the original page ↗](https://github.com/frank890417/pacman_zashare) - [GitHub](https://github.com/frank890417/pacman_zashare) - [DschoolNTU2017 — the NTU D-School site](https://cheyuwu.com/lab/2017/#lab-repo-dschool-ntu) · A public repository from the same month (Curatorial theme) - [zashare_website — the ZaShare site](https://cheyuwu.com/lab/2017/#lab-repo-zashare-website) · The same ZaShare client line (Curatorial theme) 2017-05-07Taken 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 - [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) - [CrowdWatch — fifty hours and 4,300 students building interactive pages](https://cheyuwu.com/lab/2017/#lab-crowdwatch-4300) · The public identity of the same months (Curatorial theme) 2017-06-13Taken 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 - [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) - [Hahow course two — the campaign opens, explained live](https://cheyuwu.com/lab/2017/#lab-course2-fundraising-open) · The article covering this campaign (Documented connection) - [Hahow course two — the campaign closes](https://cheyuwu.com/lab/2017/#lab-course2-campaign-close) · Coverage from the same campaign (Documented connection) - [TEDxNCUE Forward — creating possibilities across disciplines](https://cheyuwu.com/lab/2017/#lab-tedx-ncue) · The public identity of the same months (Curatorial theme)