CHE-YU WU / LAB # 一年的創作現場 沿著聲音、記憶與教學，走進這一年持續發生的實驗。 2016-09-09 — 2017-09-09 33 筆公開紀錄 紅線：來源關聯 麻線：共同主題 移到紙上看關係名稱 [完整紀錄 ↓](https://cheyuwu.com/zh/lab/2017/#lab-records) ****案件紀錄**2016-09-09 / 2017-09-0933 筆 這裡依月份往下讀，每張卡下面的小標是它的關係，點一下會跳到另一筆紀錄 ### 2016 · 10 ** - - - *課程工具* ** - *PHP* ** - *活動網頁* ### 2016 · 11 ** ![](https://cheyuwu.com/static/lab-captures/hahow-webdesign1.webp) - *課程營運* ** - - *雜學校* ### 2017 · 全年 ** - - *學生作品* ### 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) - *線上課程* ** ![](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 動畫* ** ![](https://i.ytimg.com/vi/CUk3end28rM/hqdefault.jpg) - - *三角函數* ** ![](https://i.ytimg.com/vi/AOcSUTNTXCk/hqdefault.jpg) - - *三角函數* ** ![](https://i.ytimg.com/vi/V-BLAZbSV1s/hqdefault.jpg) - *Vue.js* ** ![](https://i.ytimg.com/vi/eHrGB5EHtF4/hqdefault.jpg) - *資料視覺化* ** - *展覽網站* ### 2017 · 05 ** ![](https://i.ytimg.com/vi/GFMnJKy_910/hqdefault.jpg) - - *Vue.js* ** - *跨領域* ** ![](https://i.ytimg.com/vi/fVAE28YTCMs/hqdefault.jpg) - - ** ![](https://i.ytimg.com/vi/SgoZve6UhRU/hqdefault.jpg) - - *募資* ** ![](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) - *品牌識別* ** - - - ** ![](https://cheyuwu.com/static/lab-captures/hahow-webdesign2.webp) - *募資* ** ![](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 ** - *大學網站* ** ![](https://cheyuwu.com/static/lab-captures/hahow-webdesign2.webp) - ** - - *雜學校* ![](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) 創作族譜**818 件每日創作，怎麼一件長出一件**46 個家族畫成有縮圖的分支樹，從 2018 到 2026→ [https://cheyuwu.com/zh/lineage](https://cheyuwu.com/zh/lineage) 完整紀錄 ## 逐一閱讀 每筆紀錄保留日期依據、公開來源與關係說明。 2016-11-07課程頁的更新日誌只寫月日，年份依同一份日誌的「7/4 課程募資期間圓滿結束」與 Hahow 公開 API 的募資截止 2016-07-03、上線 2016-09-01 推定。已公開 ### 動畫互動網頁程式入門：即時作品集合系統上線 Hahow 第一門課《動畫互動網頁程式入門》的課程頁更新日誌寫著 11/7 新增即時作品集合系統，並記下已經超過一百件同學繳交作品與練習，同一則更新也寫到 11/15 之前已上線 85 單元共 1230 分鐘。這個收作業的網站是後來媒體報導裡提到的客製化作業收集機制。 - 課程營運 - 學生作品 ![Hahow 課程封面：動畫互動網頁程式入門](https://cheyuwu.com/static/lab-captures/hahow-webdesign1.webp) Che-Yu Wu / Hahow course cover 來源與相關紀錄 - [前往原始頁面 ↗](https://hahow.in/cr/monoame-webdesign1) - [Hahow 課程頁更新日誌](https://hahow.in/cr/monoame-webdesign1) - [Hahow public course API](https://api.hahow.in/api/courses/56189df9df7b3d0b005c6639) - [2017 awiclass 同學作品集網站](https://cheyuwu.com/zh/lab/2017/#lab-awiclass-gallery) · 同一套收作業的網站 (來源關聯) 2017-01-17課程頁的更新日誌只寫月日，年份依同一份日誌的「7/4 課程募資期間圓滿結束」與 Hahow 公開 API 的募資截止 2016-07-03、上線 2016-09-01 推定。已公開 ### 動畫互動網頁程式入門：全部單元上線完畢 課程頁更新日誌記下 1/17 全部單元上線完畢。依 Hahow 公開 API，這門課共 13 章，影片總長 104726 秒，也就是 29 小時左右，課程頁另標示突破 8000% 集資成果與超過 4000 人一同學習。 - 線上課程 - 交付 ![Hahow 課程封面：動畫互動網頁程式入門](https://cheyuwu.com/static/lab-captures/hahow-webdesign1.webp) Che-Yu Wu / Hahow course cover 來源與相關紀錄 - [前往原始頁面 ↗](https://hahow.in/cr/monoame-webdesign1) - [Hahow 課程頁更新日誌](https://hahow.in/cr/monoame-webdesign1) - [Hahow public course API](https://api.hahow.in/api/courses/56189df9df7b3d0b005c6639) - [動畫互動網頁程式入門：課程共筆開放共同編輯](https://cheyuwu.com/zh/lab/2017/#lab-course1-cowrite) · 同一份更新日誌的下一則 (來源關聯) 2017-01-26課程頁的更新日誌只寫月日，年份依同一份日誌的「7/4 課程募資期間圓滿結束」與 Hahow 公開 API 的募資截止 2016-07-03、上線 2016-09-01 推定。已公開 ### 動畫互動網頁程式入門：課程共筆開放共同編輯 課程頁更新日誌寫著 1/26 新增課程共筆，內容包含學習目錄與推薦時間、課程勘誤補充、推薦書籍，並註明持續新增、可以一起編輯。課程的維護因此從單向影片轉成學生能一起改的文件。 - 共筆 - 課程營運 ![Hahow 課程封面：動畫互動網頁程式入門](https://cheyuwu.com/static/lab-captures/hahow-webdesign1.webp) Che-Yu Wu / Hahow course cover 來源與相關紀錄 - [前往原始頁面 ↗](https://hahow.in/cr/monoame-webdesign1) - [Hahow 課程頁更新日誌](https://hahow.in/cr/monoame-webdesign1) - [動畫互動網頁程式入門：全部單元上線完畢](https://cheyuwu.com/zh/lab/2017/#lab-course1-all-units-online) · 同一份更新日誌的下一則 (來源關聯) 2017網址與頁面都只標 2017，確切上線日期未能從公開頁面確認。已公開 ### 2017 awiclass 同學作品集網站 兩門 Hahow 課程的課程頁都把同學作品集連到 2017.awiclass.monoame.com，第一門課對應 proj/1，第二門課對應 proj/2。站名掛在墨雨設計的網域下，頁面標題寫著 Hahow 動態互動網頁程式入門，收的是學生交上來的作品與練習。 - 學生作品 - 教學工具 來源與相關紀錄 - [前往原始頁面 ↗](https://2017.awiclass.monoame.com/proj/2) - [awiclass 同學作品集](https://2017.awiclass.monoame.com/proj/2) - [Hahow 課程頁的作品集連結](https://hahow.in/cr/monoame-webdesign2) - [動畫互動網頁程式入門：即時作品集合系統上線](https://cheyuwu.com/zh/lab/2017/#lab-course1-works-collector) · 同一套收作業的網站 (來源關聯) - [Animated-Web-Course：動態網頁程式設計課程的配套工具](https://cheyuwu.com/zh/lab/2017/#lab-repo-animated-web-course) · 同一套作品集系統的後端 (來源關聯) 2017-05-18採 Hahow 公開 API 的募資起算時間，直播預告寫的直播日為 5/18。已公開 ### 動畫互動網頁特效入門：募資上線與直播說明 Hahow 公開 API 記下第二門課《動畫互動網頁特效入門（JS/CANVAS）》的募資起算時間為 2017-05-18。同一天的直播預告寫著睽違了一年，今天不來點寇汀，來點新課程吧，並說明這次重點放在 JS、Canvas 與 Vue.js，當晚十點整直播即時說明課程與解答問題，預告裡也提到上一堂課有超過兩千八百人參與。 - 募資 - Canvas ![今天不來點寇汀，來點新課程吧｜YouTube 影片縮圖](https://i.ytimg.com/vi/SgoZve6UhRU/hqdefault.jpg) Che-Yu Wu / YouTube 來源與相關紀錄 - [前往原始頁面 ↗](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) - [動畫互動網頁特效入門正式上線](https://cheyuwu.com/zh/lab/2017/#lab-course2-published) · 同一門課的正式上線 (策展主題) - [群眾觀點：用 50 個小時，與 4300 位同學一起自己動畫互動網頁自己做](https://cheyuwu.com/zh/lab/2017/#lab-crowdwatch-4300) · 報導這次募資的文章 (來源關聯) 2017-06-17採 Hahow 公開 API 的募資截止時間。已公開 ### 動畫互動網頁特效入門：募資期間結束 Hahow 公開 API 把第二門課的募資截止時間記為 2017-06-17。募資期間的媒體報導寫著專案上線一天湧入 500 人支持，不到一個月累積超過 1300 人報名，文章結尾標示課程倒數最後 2 天。 - 募資 - 學生人數 ![Hahow 課程封面：動畫互動網頁特效入門](https://cheyuwu.com/static/lab-captures/hahow-webdesign2.webp) Che-Yu Wu / Hahow course cover 來源與相關紀錄 - [前往原始頁面 ↗](https://hahow.in/cr/monoame-webdesign2) - [Hahow public course API](https://api.hahow.in/api/courses/586fae97a8aae907000ce721) - [群眾觀點 CrowdWatch](https://crowdwatch.tw/post/2735/) - [群眾觀點：用 50 個小時，與 4300 位同學一起自己動畫互動網頁自己做](https://cheyuwu.com/zh/lab/2017/#lab-crowdwatch-4300) · 同一段募資期的報導 (來源關聯) 2017-08-16採 Hahow 公開 API 的上線時間。已公開 ### 動畫互動網頁特效入門正式上線 Hahow 公開 API 記下第二門課的上線時間為 2017-08-16，共 8 章，影片總長 185106 秒，約 51 小時。課程頁把內容分成四大系列單元，寫著以 2300 分鐘帶你走遍網頁特效的世界，四個階段分別是 HTML 與 CSS、JavaScript 程式與動畫、數學與物件導向下的 Canvas 互動運算藝術、Vue.js 整合應用，另有 VueX 與 Vue-router、GSAP、D3.js、Three.js 四個解鎖加碼單元。 - 線上課程 - Canvas ![Hahow 課程封面：動畫互動網頁特效入門](https://cheyuwu.com/static/lab-captures/hahow-webdesign2.webp) Che-Yu Wu / Hahow course cover 來源與相關紀錄 - [前往原始頁面 ↗](https://hahow.in/cr/monoame-webdesign2) - [Hahow 課程頁](https://hahow.in/cr/monoame-webdesign2) - [Hahow public course API](https://api.hahow.in/api/courses/586fae97a8aae907000ce721) - [動畫互動網頁特效入門：募資上線與直播說明](https://cheyuwu.com/zh/lab/2017/#lab-course2-fundraising-open) · 同一門課的正式上線 (策展主題) 2017-04-02採 YouTube 頁面標示的上傳日期，實際直播日可能早一到兩天。已公開 ### 老闆來點寇汀：從 Illustrator 插圖到互動動畫，捷運地景音樂網站 直播講解如何在 Illustrator 裡製作場景、設定動畫觸發，並實際示範捷運地景音樂網站的互動製作。影片說明寫著要讓蔥油餅阿伯展現獨門絕技。這支是這一季裡觀看數較高的一支，YouTube 頁面標示 10882 次觀看。 - SVG 動畫 - Illustrator ![老闆來點寇汀：從 Illustrator 插圖到互動動畫，捷運地景音樂網站｜YouTube 影片縮圖](https://i.ytimg.com/vi/oB3lv1wW_I4/hqdefault.jpg) Che-Yu Wu / YouTube 來源與相關紀錄 - [前往原始頁面 ↗](https://www.youtube.com/watch?v=oB3lv1wW_I4) - [哲宇寇汀吧 CheYu's Coding Bar on YouTube](https://www.youtube.com/watch?v=oB3lv1wW_I4) - [台北聲音地景計畫：捷運站體音樂徵選互動網站](https://cheyuwu.com/zh/lab/2017/#lab-taipei-metro-soundscape) · 同一個捷運地景音樂案子 (來源關聯) 2017-04-02採 YouTube 頁面標示的上傳日期，實際直播日可能早一到兩天。已公開 ### 老闆來點寇汀：用 Vue.js 組件做動態飯店房間清單 直播做一個房間選擇器，可以增減房間、調整打折數、分別訂房，並動態顯示結帳結果。影片說明寫著會講解 Vue.js 組件概念、屬性與方法的繼承，從零開始刻出一個訂房前端頁面。YouTube 頁面標示 10961 次觀看。 - Vue.js - 元件 ![老闆來點寇汀：用 Vue.js 組件做動態飯店房間清單｜YouTube 影片縮圖](https://i.ytimg.com/vi/uLhXpzsv5kk/hqdefault.jpg) Che-Yu Wu / YouTube 來源與相關紀錄 - [前往原始頁面 ↗](https://www.youtube.com/watch?v=uLhXpzsv5kk) - [哲宇寇汀吧 CheYu's Coding Bar on YouTube](https://www.youtube.com/watch?v=uLhXpzsv5kk) - [老闆來點寇汀：來用可怕的三角函數做網頁吧 Part 1](https://cheyuwu.com/zh/lab/2017/#lab-boss-coding-trigonometry-1) · 同一季週四寫程式系列 (策展主題) 2017-04-06採 YouTube 頁面標示的上傳日期，實際直播日可能早一到兩天。已公開 ### 老闆來點寇汀：來用可怕的三角函數做網頁吧 Part 1 從抽象的數學走到實際的動畫。直播講解三角函數基礎概念、如何理解數學在程式中的應用，並體驗一些基礎三角函數應用手法。影片說明附上第二集連結，也附上 Hahow 第一門課的連結。 - 三角函數 - 動畫原理 ![老闆來點寇汀：來用可怕的三角函數做網頁吧 Part 1｜YouTube 影片縮圖](https://i.ytimg.com/vi/CUk3end28rM/hqdefault.jpg) Che-Yu Wu / YouTube 來源與相關紀錄 - [前往原始頁面 ↗](https://www.youtube.com/watch?v=CUk3end28rM) - [哲宇寇汀吧 CheYu's Coding Bar on YouTube](https://www.youtube.com/watch?v=CUk3end28rM) - [老闆來點寇汀：用 Vue.js 組件做動態飯店房間清單](https://cheyuwu.com/zh/lab/2017/#lab-boss-coding-hotel-rooms) · 同一季週四寫程式系列 (策展主題) - [老闆來點寇汀：用數學土炮畫一個時鐘](https://cheyuwu.com/zh/lab/2017/#lab-boss-coding-trigonometry-2) · 同一組的第二集 (來源關聯) 2017-04-20採 YouTube 頁面標示的上傳日期，實際直播日可能早一到兩天。已公開 ### 老闆來點寇汀：用數學土炮畫一個時鐘 接續上一集，直播講解如何理解三角函數用於繪圖或網頁動畫，以及如何製作一個動態的時鐘。影片說明附上 CodePen 範例連結。 - 三角函數 - Canvas ![老闆來點寇汀：用數學土炮畫一個時鐘｜YouTube 影片縮圖](https://i.ytimg.com/vi/AOcSUTNTXCk/hqdefault.jpg) Che-Yu Wu / YouTube 來源與相關紀錄 - [前往原始頁面 ↗](https://www.youtube.com/watch?v=AOcSUTNTXCk) - [哲宇寇汀吧 CheYu's Coding Bar on YouTube](https://www.youtube.com/watch?v=AOcSUTNTXCk) - [老闆來點寇汀：來用可怕的三角函數做網頁吧 Part 1](https://cheyuwu.com/zh/lab/2017/#lab-boss-coding-trigonometry-1) · 同一組的第二集 (來源關聯) - [老闆來點寇汀：讓我們畫個偵測敵人用的雷達圖吧](https://cheyuwu.com/zh/lab/2017/#lab-boss-coding-radar) · 接續同一條 Canvas 介面線 (來源關聯) 2017-04-21採 YouTube 頁面標示的上傳日期，實際直播日可能早一到兩天。已公開 ### 老闆來點寇汀：Vue.js 組件與即時關鍵字反白 直播講解資料載入、Vue 組件、map 與 filter，以及正規表達式的一些概念，並用雜學校的資料當範例，順帶講自己做這個功能遇到的雷點。影片說明附上 CodePen 範例連結。 - Vue.js - 資料處理 ![老闆來點寇汀：Vue.js 組件與即時關鍵字反白｜YouTube 影片縮圖](https://i.ytimg.com/vi/V-BLAZbSV1s/hqdefault.jpg) Che-Yu Wu / YouTube 來源與相關紀錄 - [前往原始頁面 ↗](https://www.youtube.com/watch?v=V-BLAZbSV1s) - [哲宇寇汀吧 CheYu's Coding Bar on YouTube](https://www.youtube.com/watch?v=V-BLAZbSV1s) - [zashare_website：雜學校網站](https://cheyuwu.com/zh/lab/2017/#lab-repo-zashare-website) · 同一個雜學校網站線 (策展主題) 2017-04-27採 YouTube 頁面標示的上傳日期，實際直播日可能早一到兩天。已公開 ### 老闆來點寇汀：讓我們來操控地圖顯示對應天氣吧 直播講解如何在 Illustrator 中把地圖的資料附在 SVG 上，在網頁中動態載入，並用 Vue.js 切換顯示的天氣資料。影片說明附上 CodePen 範例，以及後來補寫的直播筆記連結。YouTube 頁面標示 13270 次觀看，是這一季裡觀看數最高的一支。 - 資料視覺化 - SVG ![老闆來點寇汀：讓我們來操控地圖顯示對應天氣吧｜YouTube 影片縮圖](https://i.ytimg.com/vi/eHrGB5EHtF4/hqdefault.jpg) Che-Yu Wu / YouTube 來源與相關紀錄 - [前往原始頁面 ↗](https://www.youtube.com/watch?v=eHrGB5EHtF4) - [哲宇寇汀吧 CheYu's Coding Bar on YouTube](https://www.youtube.com/watch?v=eHrGB5EHtF4) - [老闆來點寇汀：讓我們來快速寫個漂浮感的輪播吧](https://cheyuwu.com/zh/lab/2017/#lab-boss-coding-carousel) · 同一季週四寫程式系列 (策展主題) 2017-05-04採 YouTube 頁面標示的上傳日期，實際直播日可能早一到兩天。已公開 ### 老闆來點寇汀：讓我們來快速寫個漂浮感的輪播吧 直播講解輪播在網站裡很常用，但座標計算與更新很繁瑣，於是示範如何用 Vue.js 串連資料快速打造輪播，並分享一些常用小技巧。影片說明附上 CodePen 範例連結。 - Vue.js - 介面元件 ![老闆來點寇汀：讓我們來快速寫個漂浮感的輪播吧｜YouTube 影片縮圖](https://i.ytimg.com/vi/GFMnJKy_910/hqdefault.jpg) Che-Yu Wu / YouTube 來源與相關紀錄 - [前往原始頁面 ↗](https://www.youtube.com/watch?v=GFMnJKy_910) - [哲宇寇汀吧 CheYu's Coding Bar on YouTube](https://www.youtube.com/watch?v=GFMnJKy_910) - [老闆來點寇汀：讓我們來操控地圖顯示對應天氣吧](https://cheyuwu.com/zh/lab/2017/#lab-boss-coding-weather-map) · 同一季週四寫程式系列 (策展主題) - [老闆來點寇汀：讓我們畫個偵測敵人用的雷達圖吧](https://cheyuwu.com/zh/lab/2017/#lab-boss-coding-radar) · 同一季週四寫程式系列 (策展主題) 2017-05-11採 YouTube 頁面標示的上傳日期，實際直播日可能早一到兩天。已公開 ### 老闆來點寇汀：讓我們畫個偵測敵人用的雷達圖吧 接續前一集用 Canvas 畫虛擬介面時鐘的概念，除了極座標之外，還牽涉多物件的更新與繪製，做出一個虛擬的雷達掃描介面。影片說明附上 CodePen 範例連結。 - Canvas - 極座標 ![老闆來點寇汀：讓我們畫個偵測敵人用的雷達圖吧｜YouTube 影片縮圖](https://i.ytimg.com/vi/fVAE28YTCMs/hqdefault.jpg) Che-Yu Wu / YouTube 來源與相關紀錄 - [前往原始頁面 ↗](https://www.youtube.com/watch?v=fVAE28YTCMs) - [哲宇寇汀吧 CheYu's Coding Bar on YouTube](https://www.youtube.com/watch?v=fVAE28YTCMs) - [老闆來點寇汀：讓我們來快速寫個漂浮感的輪播吧](https://cheyuwu.com/zh/lab/2017/#lab-boss-coding-carousel) · 同一季週四寫程式系列 (策展主題) - [老闆來點寇汀：用數學土炮畫一個時鐘](https://cheyuwu.com/zh/lab/2017/#lab-boss-coding-trigonometry-2) · 接續同一條 Canvas 介面線 (來源關聯) 2017-05-25採 YouTube 頁面標示的上傳日期，實際直播日可能早一到兩天。已公開 ### 老闆來點寇汀：來做 iOS 動態月曆結合待辦行程吧 直播講解用 Vue.js 處理月曆顯示的動態樣式，除了用資料計算與排版月曆之外，還善用計算屬性設定當天行程小點與假日顯示等樣式，時間夠的話再做點擊後編輯待辦事項。 - Vue.js - 計算屬性 ![老闆來點寇汀：來做 iOS 動態月曆結合待辦行程吧｜YouTube 影片縮圖](https://i.ytimg.com/vi/kMGUJMThb-U/hqdefault.jpg) Che-Yu Wu / YouTube 來源與相關紀錄 - [前往原始頁面 ↗](https://www.youtube.com/watch?v=kMGUJMThb-U) - [哲宇寇汀吧 CheYu's Coding Bar on YouTube](https://www.youtube.com/watch?v=kMGUJMThb-U) - [老闆來點寇汀：來做動態井字遊戲入門 Vue.js 吧](https://cheyuwu.com/zh/lab/2017/#lab-boss-coding-tictactoe) · 同一季週四寫程式系列 (策展主題) 2017-06-22採 YouTube 頁面標示的上傳日期，實際直播日可能早一到兩天。已公開 ### 老闆來點寇汀：來做動態井字遊戲入門 Vue.js 吧 影片說明寫著苦思很久，想找一個不會太難又能講到東西的題目，於是想起小時候的回憶，用 Vue.js 實作遊戲邏輯，刻一個簡潔有力的介面。說明附上 CodePen 範例，以及一個串 Firebase 的多人遊玩版本。 - Vue.js - 遊戲邏輯 ![老闆來點寇汀：來做動態井字遊戲入門 Vue.js 吧｜YouTube 影片縮圖](https://i.ytimg.com/vi/jhOMF8DRVaY/hqdefault.jpg) Che-Yu Wu / YouTube 來源與相關紀錄 - [前往原始頁面 ↗](https://www.youtube.com/watch?v=jhOMF8DRVaY) - [哲宇寇汀吧 CheYu's Coding Bar on YouTube](https://www.youtube.com/watch?v=jhOMF8DRVaY) - [老闆來點寇汀：來做 iOS 動態月曆結合待辦行程吧](https://cheyuwu.com/zh/lab/2017/#lab-boss-coding-calendar) · 同一季週四寫程式系列 (策展主題) - [老闆來點寇汀：便利貼牆 PART2，串 Firebase 多人同時編輯](https://cheyuwu.com/zh/lab/2017/#lab-boss-coding-sticky-wall-2) · 同一段串 Firebase 的實驗 (策展主題) - [vue-lazy-table：最少設定就能顯示複雜資料的 Vue 表格元件](https://cheyuwu.com/zh/lab/2017/#lab-repo-vue-lazy-table) · 同一段 Vue.js 密集期 (策展主題) 2017-07-14採 YouTube 頁面標示的上傳日期，實際直播日可能早一到兩天。已公開 ### 老闆來點寇汀：來做換色與快速整理的便利貼牆吧 PART1 影片說明寫著靈感總是來之匆匆，沒有好好記下來又是一陣絞盡腦汁，因此用 Vue 實作便利貼，並分享網頁上 drag and drop 的一些有趣應用。 - Vue.js - 拖放 ![老闆來點寇汀：來做換色與快速整理的便利貼牆吧 PART1｜YouTube 影片縮圖](https://i.ytimg.com/vi/xOAHnDsd2BQ/hqdefault.jpg) Che-Yu Wu / YouTube 來源與相關紀錄 - [前往原始頁面 ↗](https://www.youtube.com/watch?v=xOAHnDsd2BQ) - [哲宇寇汀吧 CheYu's Coding Bar on YouTube](https://www.youtube.com/watch?v=xOAHnDsd2BQ) - [老闆來點寇汀：便利貼牆 PART2，串 Firebase 多人同時編輯](https://cheyuwu.com/zh/lab/2017/#lab-boss-coding-sticky-wall-2) · 同一組的第二集 (來源關聯) 2017-07-21採 YouTube 頁面標示的上傳日期，實際直播日可能早一到兩天。已公開 ### 老闆來點寇汀：便利貼牆 PART2，串 Firebase 多人同時編輯 承接上一集的簡易版便利貼，這次除了調整細節與動畫之外，也串接 Firebase 資料庫，讓便利貼牆可以多人同時編輯分享。影片說明列出這次會分享 Vue.js 的資料操作與整理、transition 進出場動畫，以及串接 Firebase 保存資料與即時更新。 - Firebase - 多人協作 ![老闆來點寇汀：便利貼牆 PART2，串 Firebase 多人同時編輯｜YouTube 影片縮圖](https://i.ytimg.com/vi/-Sv4Lhdf5PQ/hqdefault.jpg) Che-Yu Wu / YouTube 來源與相關紀錄 - [前往原始頁面 ↗](https://www.youtube.com/watch?v=-Sv4Lhdf5PQ) - [哲宇寇汀吧 CheYu's Coding Bar on YouTube](https://www.youtube.com/watch?v=-Sv4Lhdf5PQ) - [老闆來點寇汀：來做動態井字遊戲入門 Vue.js 吧](https://cheyuwu.com/zh/lab/2017/#lab-boss-coding-tictactoe) · 同一段串 Firebase 的實驗 (策展主題) - [老闆來點寇汀：來做換色與快速整理的便利貼牆吧 PART1](https://cheyuwu.com/zh/lab/2017/#lab-boss-coding-sticky-wall-1) · 同一組的第二集 (來源關聯) 2017-01採官網作品頁標示的期間起點。taipeisoundscape.com 現在顯示的是 2018 年那一屆，2017 年版本的線上狀態未能從公開頁面確認。已公開 ### 台北聲音地景計畫：捷運站體音樂徵選互動網站 官網作品頁把期間寫成 01/2017 到 03/2017，客戶列為豐collect音樂製作與臺北市政府捷運工程局。頁面說明這個案子與音樂製作方合作辦理 2017 年捷運地景音樂徵選，收集在地音樂家的作品，並在東門、松山機場、龍山寺等站點採集自然音、誦經聲與攤販的招呼聲。市府原本只要一個放報名資訊的簡單網站，他提案改成能把錄音播回給乘客聽的網站，讓那些平常被忽略的聲音重新被聽見。 - 聲音 - 公共委託 ![台北聲音地景計畫互動網站｜作品頁主視覺](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 來源與相關紀錄 - [前往原始頁面 ↗](https://cheyuwu.com/project/-L3BAn3HOg8fE1jx5B79/) - [cheyuwu.com](https://cheyuwu.com/project/-L3BAn3HOg8fE1jx5B79/) - [taipeisoundscape.com](https://taipeisoundscape.com/en) - [老闆來點寇汀：從 Illustrator 插圖到互動動畫，捷運地景音樂網站](https://cheyuwu.com/zh/lab/2017/#lab-boss-coding-metro-svg) · 同一個捷運地景音樂案子 (來源關聯) - [Unleash the Future：n3xtcon 品牌識別與網站](https://cheyuwu.com/zh/lab/2017/#lab-n3xtcon-brand) · 同一年的委託案 (策展主題) 2017-03採官網作品頁標示的期間起點。已公開 ### 工研院綠能所家庭用電家計簿：3D 場景與資料視覺化 官網作品頁把期間寫成 03/2017 到 05/2017，客戶是工研院綠能與環境研究所。頁面說明原本的網頁還帶著 Flash 與過時的互動視覺，於是改成 3D 場景，團隊做了五個 3D 房間，他負責網頁的體驗優化，用泡泡圖把全國用電資料視覺化，再引導使用者填表。前端用 Vue.js，填完表就能看到自己的用電視覺化結果。 - 資料視覺化 - 3D ![家庭用電家計簿網頁｜作品頁主視覺](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 來源與相關紀錄 - [前往原始頁面 ↗](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：工研院家庭用電家計簿的前端 repo](https://cheyuwu.com/zh/lab/2017/#lab-repo-itri-2017) · 同一個案子的公開 repo (來源關聯) 2017-06採官網作品頁標示的期間起點，期間後半已落在本年窗口之外。已公開 ### Unleash the Future：n3xtcon 品牌識別與網站 官網作品頁把期間寫成 06/2017 到 12/2017，客戶是洛杉磯的科技論壇 n3xtcon。頁面說明對方要一套能同時延伸到網站與線下印刷的完整形象，任務是從原本 logo 的四個三角形出發重做品牌。幾次提案後客戶選了重疊的概念，新 logo 是一條折疊並自我交疊的緞帶。網站採板塊與漂浮的概念，在深藍空間裡放螢光物件，並用 Pixi.js 做行星的動態效果。 - 品牌識別 - WebGL ![n3xtcon 品牌識別與網站｜作品頁主視覺](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 來源與相關紀錄 - [前往原始頁面 ↗](https://cheyuwu.com/project/1/) - [cheyuwu.com](https://cheyuwu.com/project/1/) - [台北聲音地景計畫：捷運站體音樂徵選互動網站](https://cheyuwu.com/zh/lab/2017/#lab-taipei-metro-soundscape) · 同一年的委託案 (策展主題) 2016-10-14採 GitHub 的 repo 建立日期，實際開發起點可能更早。已公開 ### Animated-Web-Course：動態網頁程式設計課程的配套工具 repo 描述寫著動態網頁程式設計課程。README 記下一支 parse_codepen API，用來抓 CodePen 的 og 圖與標題文字，傳入網址陣列就回傳網站的 og 資訊，並自動暫存解析過的網址加速載入。API 掛在 monoame.com 的 awi_class 路徑下，也就是同學作品集網站的後端。 - 課程工具 - CodePen 來源與相關紀錄 - [前往原始頁面 ↗](https://github.com/frank890417/Animated-Web-Course) - [GitHub](https://github.com/frank890417/Animated-Web-Course) - [2017 awiclass 同學作品集網站](https://cheyuwu.com/zh/lab/2017/#lab-awiclass-gallery) · 同一套作品集系統的後端 (來源關聯) - [Organic-Alpha：串前後端的 PHP 資料流腳本庫](https://cheyuwu.com/zh/lab/2017/#lab-repo-organic-alpha) · 同一天開的 repo (策展主題) - [第 22 屆花旗聯合勸募活動動態網頁](https://cheyuwu.com/zh/lab/2017/#lab-repo-citibank-unitedway) · 同一個月的公開 repo (策展主題) 2016-10-14採 GitHub 的 repo 建立日期，實際開發起點可能更早。已公開 ### Organic-Alpha：串前後端的 PHP 資料流腳本庫 公開 repo，描述寫著一個以 PHP 資料流把前端與後端結合起來的函數式腳本庫。repo 只有 README 一行說明，沒有進一步文件。 - PHP - 資料流 來源與相關紀錄 - [前往原始頁面 ↗](https://github.com/frank890417/Organic-Alpha) - [GitHub](https://github.com/frank890417/Organic-Alpha) - [Animated-Web-Course：動態網頁程式設計課程的配套工具](https://cheyuwu.com/zh/lab/2017/#lab-repo-animated-web-course) · 同一天開的 repo (策展主題) 2016-10-24採 GitHub 的 repo 建立日期，實際開發起點可能更早。已公開 ### 第 22 屆花旗聯合勸募活動動態網頁 公開 repo，README 寫著第 22 屆花旗聯合勸募活動動態網頁，並引了活動文案，講聯合勸募與花旗銀行長期匯集愛的星火。README 附上 CodePen 版本與當年的活動頁網址 citi2016.unitedway.org.tw。 - 活動網頁 - 委託案 來源與相關紀錄 - [前往原始頁面 ↗](https://github.com/frank890417/citibank_activity_website) - [GitHub](https://github.com/frank890417/citibank_activity_website) - [Animated-Web-Course：動態網頁程式設計課程的配套工具](https://cheyuwu.com/zh/lab/2017/#lab-repo-animated-web-course) · 同一個月的公開 repo (策展主題) 2016-11-19採 GitHub 的 repo 建立日期，實際開發起點可能更早。已公開 ### zashare_website：雜學校網站 公開 repo，描述與 README 都只寫 zashare 雜學校網站。主要語言標為 JavaScript，最後一次推送就在開檔當天。雜學校是他這段時間反覆出現的客戶，直播裡也拿它的資料當範例。 - 雜學校 - 委託案 來源與相關紀錄 - [前往原始頁面 ↗](https://github.com/frank890417/zashare_website) - [GitHub](https://github.com/frank890417/zashare_website) - [老闆來點寇汀：Vue.js 組件與即時關鍵字反白](https://cheyuwu.com/zh/lab/2017/#lab-boss-coding-vue-search) · 同一個雜學校網站線 (策展主題) - [pacman_zashare：雜學校的小精靈網頁](https://cheyuwu.com/zh/lab/2017/#lab-repo-pacman-zashare) · 同一個雜學校客戶線 (策展主題) 2017-04-30採 GitHub 的 repo 建立日期，實際開發起點可能更早。已公開 ### TaichungDigital2017：台中展覽網站 公開 repo，描述只寫 taichung exhibition，主要語言標為 Vue，最後一次推送在 2017-06-24。README 只有標題一行，展覽名稱與合作單位未能從公開頁面確認。 - 展覽網站 - Vue.js 來源與相關紀錄 - [前往原始頁面 ↗](https://github.com/frank890417/TaichungDigital2017) - [GitHub](https://github.com/frank890417/TaichungDigital2017) - [itri2017：工研院家庭用電家計簿的前端 repo](https://cheyuwu.com/zh/lab/2017/#lab-repo-itri-2017) · 同一段接案期的 repo (策展主題) 2017-05-30採 GitHub 的 repo 建立日期，實際開發起點可能更早。已公開 ### itri2017：工研院家庭用電家計簿的前端 repo 公開 repo，主要語言標為 Vue，建立時間落在官網作品頁記的工研院案期間之內。README 只有兩行標題，沒有進一步說明。 - Vue.js - 委託案 來源與相關紀錄 - [前往原始頁面 ↗](https://github.com/frank890417/itri2017) - [GitHub](https://github.com/frank890417/itri2017) - [工研院綠能所家庭用電家計簿：3D 場景與資料視覺化](https://cheyuwu.com/zh/lab/2017/#lab-itri-electricity-journal) · 同一個案子的公開 repo (來源關聯) - [TaichungDigital2017：台中展覽網站](https://cheyuwu.com/zh/lab/2017/#lab-repo-taichung-digital) · 同一段接案期的 repo (策展主題) 2017-06-26採 GitHub 的 repo 建立日期，實際開發起點可能更早。已公開 ### vue-lazy-table：最少設定就能顯示複雜資料的 Vue 表格元件 公開 repo，描述寫著一個用簡單語法、以最少設定顯示複雜資料的 Vue 表格元件。README 的理由寫得很直白，後端有時給了太多型態的資料，懶得一一標欄位時，這個元件只要把資料傳進去就好，並示範最小設定下自動命名欄位。這是他這段時間的公開 repo 裡收到最多星星的一個，目前 6 顆。 - Vue.js - 開源元件 來源與相關紀錄 - [前往原始頁面 ↗](https://github.com/frank890417/vue-lazy-table) - [GitHub](https://github.com/frank890417/vue-lazy-table) - [老闆來點寇汀：來做動態井字遊戲入門 Vue.js 吧](https://cheyuwu.com/zh/lab/2017/#lab-boss-coding-tictactoe) · 同一段 Vue.js 密集期 (策展主題) 2017-08-02採 GitHub 的 repo 建立日期，實際開發起點可能更早。已公開 ### DschoolNTU2017：台大創新設計學院網站 公開 repo，描述寫著 Dschool NTU Website，主要語言標為 Vue，最後一次推送在 2017-08-22。repo 沒有 README。 - 大學網站 - Vue.js 來源與相關紀錄 - [前往原始頁面 ↗](https://github.com/frank890417/DschoolNTU2017) - [GitHub](https://github.com/frank890417/DschoolNTU2017) - [pacman_zashare：雜學校的小精靈網頁](https://cheyuwu.com/zh/lab/2017/#lab-repo-pacman-zashare) · 同一個月的公開 repo (策展主題) 2017-08-24採 GitHub 的 repo 建立日期，實際開發起點可能更早。已公開 ### pacman_zashare：雜學校的小精靈網頁 公開 repo，README 標示是一個 Vue.js 專案，用 webpack 模板起的。主要語言為 JavaScript，最後一次推送在隔天。Hahow 第二門課的單元列表裡也有一個結合陣列與地圖製作小精靈的 CodePen 範例。 - 雜學校 - 網頁遊戲 來源與相關紀錄 - [前往原始頁面 ↗](https://github.com/frank890417/pacman_zashare) - [GitHub](https://github.com/frank890417/pacman_zashare) - [DschoolNTU2017：台大創新設計學院網站](https://cheyuwu.com/zh/lab/2017/#lab-repo-dschool-ntu) · 同一個月的公開 repo (策展主題) - [zashare_website：雜學校網站](https://cheyuwu.com/zh/lab/2017/#lab-repo-zashare-website) · 同一個雜學校客戶線 (策展主題) 2017-05-07採 TED 活動頁的日期。履歷把這場記在 2016 年，與活動頁不符，這裡採活動頁；影片上傳日為 2018-01-10，晚於活動。已公開活動紀錄 ### TEDxNCUE「嚮」：跨領域結合創造可能性 TED 的官方活動頁把 TEDxNCUE 記在 2017 年 5 月 7 日下午 1:30 到 6:30，地點在彰化縣，主題譯為 Forward。他的場次題目是跨領域結合創造可能性，講的是用腦袋生活、分析解構再結合，錄影後來上到 TEDx Talks 頻道，長度 18 分 09 秒。 - 跨領域 - 演講 來源與相關紀錄 - [前往原始頁面 ↗](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) - [群眾觀點：用 50 個小時，與 4300 位同學一起自己動畫互動網頁自己做](https://cheyuwu.com/zh/lab/2017/#lab-crowdwatch-4300) · 同一段時間的對外身份 (策展主題) 2017-06-13採頁面 metadata 的發布時間 2017-06-13，版面上顯示的日期是 2017 年 6 月 14 日。已公開 ### 群眾觀點：用 50 個小時，與 4300 位同學一起自己動畫互動網頁自己做 群眾觀點的報導，作者郭丞哲時任貝殼放大產品設計師。文章寫一年前的《動態互動網頁程式入門》帶領近 3000 位同學走入前端網頁，一年後的《動畫互動網頁特效入門》專案上線一天湧入 500 人支持，不到一個月累積超過 1300 人報名。文中稱他為交大學生、設計師、網頁全端雙棲工程師、墨雨設計創辦人，剛滿 22 歲，代表作列了台北聲音地景計畫、雜學校 ZaShare、複雜生活節，並寫到他今年初創立粉絲頁老闆來點寇汀吧，每週四 22:00 直播。文章把課程設計的切入點歸在成就感與讓你的產出能被看見，並記下兩個對抗低完課率的機制，贊助者專屬臉書社團與客製化的作業收集網站。 - 線上課程 - 報導 來源與相關紀錄 - [前往原始頁面 ↗](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) - [動畫互動網頁特效入門：募資上線與直播說明](https://cheyuwu.com/zh/lab/2017/#lab-course2-fundraising-open) · 報導這次募資的文章 (來源關聯) - [動畫互動網頁特效入門：募資期間結束](https://cheyuwu.com/zh/lab/2017/#lab-course2-campaign-close) · 同一段募資期的報導 (來源關聯) - [TEDxNCUE「嚮」：跨領域結合創造可能性](https://cheyuwu.com/zh/lab/2017/#lab-tedx-ncue) · 同一段時間的對外身份 (策展主題)