由新到舊
Pokédex｜寶可夢圖鑑在 Instagram 看到有人分享在日本操作機器、製作寶可夢客製化衣服的貼文，聯想起先前在網上閱讀到關於 Pokémon API 的文章，一時興起也使用 PokeAPI 仿刻貼文中機器的操作介面。然而在開發過程中，發現連續抓取 905 份寶可夢資料...
2023-01-14
7
Astro Color Picker｜使用框架 Astro 打造的色票複製工具去年看到 Astro 剛發布時所宣稱的「用較少的 JavaScript 打造極速網站」就對這樣的框架產生興趣，那時雖然也試玩了一下，不過因為遇到一些開發初期的 bug 放棄研究。直到近期拿過去使用 petite-vue 開發的專案 — HTML Reserved Colors 來透過 Astr...
2022-04-03
5
Zipcy Collector｜自動儲存 8,888 張 Zipcy's SuperNormal NFT 圖片2021 年可以說是 NFT 大爆發的一年了，除了名人相繼創立自己的 NFT，也有各式各樣的商業模式和額外賦能不停的被開發出來；像是主打邊玩邊賺的 (Play-to-Earn，P2E) GameFi 項目「Axie Infinity」、擁有即可兌換一天一碗且連續七天雞肉飯的「元宇宙第一雞肉飯」...
2022-03-25
6
Infinite Mondrian Art｜無限生成的蒙德里安色塊2022 年 1 月的一個假日，閒逛於誠品書局，看到了皮特·蒙德里安 (Piet Mondrian) 的周邊商品 – 蒙德里安變色馬克杯 (Mondrian Color Changing Mug) 和 蒙德里安收納包，其簡潔優雅的藝術風格立刻攫住我的目光。經調查得知，身為印象派/幾何抽象畫派先...
2022-03-25
2
HTML Reserved Colors｜可用於設計和幫助開發的色票複製工具雖然知道可以透過 HTML 的 red, white, black 等顏色單字而非色票 (color code) 來使用顏色，一直以來開發上都是在找好適合的顏色後，使用 Sass 將色票紀錄到變數再做使用，不過最近接觸到 w3schools 的 HTML Color Names 才知道有將近...
2022-03-25
2
Horizontal Scrolling Theater｜互動效果豐富的橫向捲動電影院以前就想過要做一個展示電影的頁面，這次使用 Vue 3 搭配 GSAP，並結合自己收藏的 46 部藍光電影所做成的 API 做串接，達成能夠橫向捲動的電影購物頁面。實作上，除了藉由 CSS 屬性 `relative` 搭配 GSAP 來調整元素的 `left` 值來實現橫向捲動的功能，另外在點...
2022-03-25
0
Ray Chang Space｜支援 Markdown 內容管理系統的作品集網站我始終認為，設計與開發是一體兩面，設計本是為開發而存在，開發也是為了完成設計，兩者相輔相成、互相影響。因此在網站首頁中，使用建築圖與對設計和開發的解釋，表現自己在前端學習上，執著於兼顧清晰的設計與流暢的開發；網站設計上，我以報紙風格做為基礎，使用噪點填充背景以實現擬似紙張的質感，加入平滑滾動與...
2022-03-25
3
Ghibli Gallery｜重新設計吉卜力工作室作品相簿2020 下半年在全世界仍受到冠狀病毒肆虐期間，吉卜力工作室在官網四次公開合計 24 部動畫作品、共 1,178 張高畫質劇照，表示在未觸法的情形之下可自由下載使用，並且還會持續釋出過去動畫作品的劇照。由於官網的劇照呈現方式不太友好，也未在移動裝置上做排版優化，加上分批公開的作品劇照未整合在一...
2022-03-25
0
Vite Todo｜使用 Vite 和 Tailwind 打造的待辦事項清單這次的專案為六角學院在 2021 年疫情期間舉辦的「程式體驗營」最終作業，其中使用了最近接觸的 Vite 作為專案開發和打包的工具，以及因為對 Utility-First CSS 頗感興趣，將 Tailwind 納入專案並初次使用它做開發...
2022-03-25
0
Vanilla Calculator｜立即顯示結果的優雅計算機我並非這美術設計的原創，不過得益於 Instagram 上 @uixperience 的作品參考，才實現了這優雅計算機的外觀。在互動的部分，我讓按鍵在按下時減少陰影，並加深按鍵背景的顏色，這樣就像是真的被按了下去一樣；另外，在顯示計算結果的部分，透過 JS 增減 CSS class 的方式隨時...
2022-03-25
2
Draggable To-Do List｜可拖曳的待辦事項清單一開始的版本是和 Todo MVC 類似的簡易待辦事項清單，由於本身的使用需求，不斷調整和優化 Todo 清單的外觀與功能，如使用 SortableJS 做出拖拉排序、結合 LocalStorage 做出儲存機制、Markdown link 語法的支持，以及對 XSS 跨網站指令程式碼的防禦處...
2022-03-24
5
解凍二一七零年，地球暖化開始對地球做出更細微且明顯的改變，除了人類的生活環境變得更為炎熱以外，稻穀和各種的水果的種植越加困難，而更別說是採收了，在七十五億人共享同一個生存空間的狀況下，由於稻米與蔬果供不應求，加上適當氣候與日照維持的時間無法像以前那樣，和種植的基本條件達到平衡...
2022-03-10
3
如何申請虛擬貨幣錢包，購買乙太幣，到世界最大 NFT 交易平台 OpenSea 發行作品近期 Web 3.0 的技術正在快速發展中，每天都有新的名詞、新的 NFT、新的商業模式不斷的誕生，還沒有入圈的朋友別擔心，我會清楚的告訴你，如何從申請錢包，購買乙太幣，到發行自己的 NFT 作品。
2022-01-13
12
元宇宙來襲！Web 3.0 相關名詞解說- 區塊鏈：不同的區塊鏈無法互通。
- 冷錢包：平常處於離線狀態，又稱為離線錢包，主要功能為儲存私鑰，交易時才會連上網路，所以安全性較高，載體可以為隨身碟、卡片或是紙條。
- 助記詞：由 12 或 24 個英文單字組成，屬於私鑰的一種形式，最好使用紙筆紀錄，不要拍照或上傳以免洩漏。
2022-01-13
8
美股投資好嗎？怎麼買？美股投資優勢
整體市值：美國是全球最大經濟體，佔全球總體經濟 23%-25%，而台灣經濟佔全球總體經濟不到 1%
每日交易量：美股交易量非常大，股價幾乎不會被操控；台股特別是小型股很容易被假外資、投信操控股價
下單手續費：美國券商如 TD Ameritrade (德美利證券)...
2021-09-27
4
在 Nuxt 專案中使用 Sass 和 Vue3 Composition APINuxt.js 是以 Vue 為基底所建構的框架，透過 Nuxt.js，我們能夠更輕鬆地開發靜態頁面 (Static Site)、操作體驗良好的單頁式網站 (SPA)、甚至是顧及 SEO 的伺服器端渲染 (SSR) 網站。
2021-03-27
3
Node.js 爬蟲 — 自動化下載 1,178 張吉卜力作品劇照最近對爬蟲感到興趣，幾天的研究發現 Puppeteer 這套由 Google 開源、使用無介面操作 Chrome 做自動化測試的 Node.js 函式庫也能用來爬取資料...
2021-02-24
2
《基本設計力：簡單卻效果超群的 77 原則》重點整理簡単だけど、すごく良くなる 77 のルール デザイン力の基本
2021-01-21
2
《專注力，就是你的超能力》重點整理掌控自我、提升成績的 18 個學習武器
2021-01-14
2
《為什麼要睡覺？睡出健康與學習力、夢出創意的新科學》
Why We Sleep《為什麼要睡覺？睡出健康與學習力、夢出創意的新科學》 Why We Sleep：The New Science of Sleep and Dreams
2021-01-03
1
15 個高效實用的 JavaScript 程式碼JavaScript 能做許多事，尤其透過瀏覽器的 API 或套件，我們得以悠游於巨量資料中，將資料轉換為與使用者溝通的介面，以下就來分享 15 個實用的 Vanilla JS 程式碼...
2020-12-06
2
40 個讓 coding 技巧進步的方法 (如何節省時間和減少錯誤)本文翻譯自 40 Tips that will change your coding skills forever。作者 Kesk 列出了一些對職業生涯有幫助的事情，很快就能讀完，但要正確應用到生活中可能需要一生的時間。Kesk 從事將近十五年的 App 開發...
2020-10-26
4
為什麼我們需要 Vue、React、Angular 這樣的前端框架？以及如何選擇？時代在進步，技術也在進步，現代前端框架這麼多，我們該如何選擇？
2020-09-15
5
巴菲特的勝券在握之道 (重點整理)在負利率時代，存錢不如存股的 4 大滾雪球投資法
2020-05-22
0
Git 與 Github 是什麼？如何使用 Git？搞清楚 Git 與 GitHub 的差別並學會必會操作
什麼是 Git？
Git 是一個軟體，可藉由它產生一個數據庫（repository），並且做到分散式版本控制。由於可在多處放置同一份程式碼、歷史紀錄追蹤與回朔，讓協同開發變得容易。（關於不同版本控制系統的介紹，請參閱 Git 官方教學文件）
2019-12-01
3
網站架構原理 — 作為網站開發人員起步時我希望知道的概念上面的圖示清楚表示了網站體系架構。如果你不是經驗豐富的網頁開發人員，可能會覺得它很複雜。在我們深入探究每個部分之前，下面的描述應該會讓我們更容易上手。
2019-11-19
6
2022 讓我們重溫《魔物獵人 2G》的美好時光《魔物獵人 2G》可以說是魔物獵人的經典代數之一，你是否聽到波凱村的背景音樂就如同回到家一般呢？這篇告訴你在 2019 年仍可和朋友順利連線遊玩《魔物獵人 2G》的方法。
2019-11-19
1
《掌握市場週期》 — 霍華．馬克思簽書會演講❑ 無須預測未來、注意週期就能獲利
巴菲特曾經說過：「長久下來，市場會出現離奇、甚至怪異的現象。一個大錯很可能會磨滅長期累積的成就，因此我們需要本能上即可識別重大風險的人，包括從未遭遇的風險。」塔雷伯的《隨機致富》尤其講述對於不確定性應對的重要。
2019-11-15
2
快速精通 JavaScript 的 “this”this 是 JavaScript 的一個關鍵字，也是讓新手困擾許久的主題，今天讓我們用更簡單、直接的方式來了解 this。
2019-08-16
0
搞懂網頁技術名詞：MVC、SPA、SSR、AMP 及 PWA為了增進使用者體驗，前端愈來愈複雜，現在就讓我們一起搞懂技術名詞。
2019-08-09
2
JavaScript 簡介：ES6 以及更早之前的版本你可能已經看過 “ES6” 或 “JavaScript ES6” 一詞，並想知道它實際意味著什麼。別再想了，因為我們將深入研究 ES6 究竟是什麼，以及它與 JavaScript 的關係！
2019-08-09
0
