Claude Code + VOICEVOX：二次元女僕語音提示設定教學
一步步設定 Claude Code Hooks，從 macOS 內建語音指令到 VOICEVOX 純後台引擎，打造不用盯著螢幕、聽聲音就知道「等待許可」或「任務完成」的語音通知工作流。
Tech
分類文章
Tech
69 篇文章
為什麼 Netflix 截圖會變黑？聊聊 DRM 技術與未來趨勢
為什麼 Netflix 截圖會變黑？聊聊 DRM 技術與未來趨勢 拆解影音防盜的技術拉鋸戰：一位前端工程師在建置 VOD 系統時的實務心得
Tech
Pact Contract Testing
初探 Pact & PactFlow
Tech
Automate browser testing with tools
隨著科技的迅速發展，網站和應用程式的複雜性日益增加，對品質和穩定性的要求也變得更加迫切。在這篇文章中，我們將探討自動化測試的重要性、如何在組織中實施自動化測試，以及 Chrome 提供的測試工具和策略。
Tech
人工智慧的極限
本文將探討哪些問題是 AI 可以解決的，哪些是它無法觸及的。希望通過這篇文章，讀者能夠對計算的本質與 AI 的限制有更清晰的認識，理性看待這項技術的發展。
Tech
Real-time Server Components
打破無狀態伺服器的限制：利用 Durable Objects 和 React Server Components 構建即時多人應用
Tech
使用 Heptabase 學習複雜的程式架構
這是我在公司的前端聚會上分享的主題，介紹 Heptabase 這個筆記工具，以及我如何使用它來完成「Hahow for Business 企業上傳串 JW Player」的研究過程。大綱如下：
Tech
如何跑 TBD flow？
TBD 是一種版本控制的分支模型（source-control branching model），為了避免傳統 Git workflow 帶來的合併地獄，TBD 規定開發人員只能在被稱作「Trunk」的單一 branch 中提交程式碼，並且限制建立其它會長期存在的…
Tech
為什麼會有拖延症？
人類的自然規律：不是做多少事、就需要多少資源。而是有多少資源、人類就一定會把這個資源用到耗盡為止。
Tech
Hahow for Business 如何跑 E2E 測試？
隨著 Chrome headless 模式的推出，E2E 測試上 CI 已經變得容易。這篇文章分享什麼是 Cypress，為什麼我覺得寫 E2E 測試很重要，以及我們團隊是怎麼跑這個流程的。
Tech
Hahow for Business 如何保護串流內容？
近來因疫情關係，不少 OTT 與線上教育等影音串流平台的流量急劇上升，本篇文章以 Hahow 為例，帶你了解隨選視訊背後的原理以及如何保護數位內容。
Tech
工程師的世界越複雜，你的世界就越簡單
藝術家、科學家、發明家還有工匠，相比工程師有什麼不同之處？
Tech
Hahow 為什麼沒有 iOS App？
大綱
Tech
無限環境（ㄧ）Netlify Deploy Previews
大綱
Tech
全遠端工作
遠端工作並非一個需要克服的挑戰。而是一個明顯的商業優勢。
Tech
如何在 React Native 使用 SVG 向量圖檔
問題
Tech
如何自動化 GitHub Releases 流程？
2017 年初的時候，曾經寫了《如何自動化 release 的流程？》這篇文章，介紹了如何利用 semantic-release 和 TravisCI 自動化 GitHub Releases 和 NPM publish 這件事。這次要介紹的是如何直接透過 Probot…
Tech
如何使用 RxJS 處理分頁 API
這篇文章會以 node-github 的 getCommits API 為例，介紹如何使用 RxJS 取得所有分頁的 commits 結果。
Tech
AWS Serverless RESTful APIs
近幾年在雲架構上討論熱度較高的 2 大主題分別是 容器化（Containerize）與 無伺服器（Serverless）架構。本篇文章會帶你瞭解什麼是 AWS 無伺服器架構，以及如何使用 Serverless Framework 這個框架，快速開發 RESTful APIs。
Tech
Mock Server＆契約測試
這篇文章會介紹如何運用 Mock Server 和 Integration Contract Test（契約測試）解決一些在前後端分離的開發環境底下會碰到的問題。
Tech
如何使用 Docker 切換不同的 MongoDB
在開發前端的時候，常常會碰到想要回到 migration 之前的 MongoDB 資料結構來除錯，如果只使用本地安裝的 MongoDB，操作上會很麻煩，所以這篇文章會說明如何在本機不安裝 MongoDB 的環境下，使用 Docker 準備多份 MongoDB 資料庫。
Tech
使用 Google Docs 將圖片轉成文字
像我這種日文不好、需要靠翻譯工具作參考的人，有時候想翻譯雜誌這種長文會很麻煩。
Tech
如何解決 GPG 失效的問題？
我是用 cider 在管理自己的 dotfiles，然後前陣子因為 gnupg 的 formula 剛好一起被更新，導致我的 GPG signature verification 無法順利運作。
Tech
如何發送 redux-observable 的 catch error 至 Sentry
我們團隊目前使用 Sentry 這個服務作 error tracking，JavaScript 或 React 的基本安裝方法在 官方文件 都可以找到，這裡就不贅述。
Tech
如何自動化 release 的流程？
這篇文章會介紹如何使用 semantic-release 這個工具，自動化 Node.js (or JavaScript) 專案的版本號，以及 changelog 的 release 流程。
Tech
Amazon S3 正確處理 HTML5 History 路由問題
如果你是使用 Angular、React 或是 Vue 來開發 SPA（單頁面應用），並且放在 Amazon S3 Static Website Hosting 上的話，那麼你會碰到 URL routing 的問題。
Tech
如何正確處理 AWS API Gateway 的 Lambda Error Status
翻譯自原文 Error handling in AWS API Gateway with Lambda
Tech
解決 Universal 架構的 CSS Modules 問題
在 Isomorphic JavaScript 應用中實作 CSS Modules 時，解決 Node.js 無法 import CSS 以及 Server/Client 渲染結果不一致的問題。
Tech
Serverless！使用 AWS 開發 Slack Slash Commands
本文介紹如何使用 AWS Lambda & AWS API Gateway 搭建一個不需要伺服器的環境，提供 Slack Slash Commands 查詢豆瓣電影。
Tech
如何在發布自己的 NPM package 之前打包檔案
最近 Bower 宣布停止維護，所以許多前端的 packages 都移到了 NPM 上，甚至連 Grunt 和 Gulp 這類 build tools 都有要被 NPM scripts 取代的趨勢。
Tech
Code Coverage with CircleCI + Codecov
最近的案子用到 Redux + React，因為它 Pure Function 的特性，所以 單元測試 很容易寫，順便也趁機會玩一下 程式碼覆蓋率 （Code Coverage）。
Tech
GTD＆Creative Routines
這是一篇勉勵我自己如何實行 GTD & Creative Routines 的一套方法。
Tech
OpenCC 簡繁中文轉換 Alfred 2 workflow v1.0.0 released!
從以前就在找一個可以簡繁互換的 Alfred workflow，可惜一直沒找到滿意的，所以一直以來都是用 Yahoo 的輸入法來切換模式。結果前幾天突然看到 OpenCC 這個開源項目，而且還有 Python 的庫可以用！二話不說就自己來寫一個了，以下是節自我的 GitHub…
Tech
DevOps：持續整合＆持續交付（Docker、CircleCI、AWS）
這篇文章將一步一步介紹如何使用 Docker、GitHub Flow、CircleCI、AWS Elastic Beanstalk 與 Slack 來完成持續整合與持續交付的開發流程。
Tech
如何優雅地在 Mac 上使用 dotfiles？
註：這篇文章的原始碼放在 GitHub ，會以上面的更新為主。
Tech
AngularJS + Google Spreadsheet
概要
Tech
書摘《遊戲化的時代》
在 2011 年，Gamification (遊戲化) 繼 Web 2.0，Mashup，Cloud，Freemium 之後，成為網路上科技的熱門關鍵詞。 Gamification 將會是Social media、Big data、Internet of Things…
Tech
重點筆記《Hackers and Painters》
我們的時代是程式設計師主導的時代，而偉大的程式設計師就是 hacker。
Tech
Trello workflow
團隊開發的網頁遊戲《末日少女》已經上市快兩個月了，成績比當初想像中還好，相較於 Gu Morning，這次《末日少女》的開發學到很多寶貴的經驗，稍微鬆口氣之餘，也有許多需要檢討改善的地方，而《末日少女》Mobile…
Tech
COSCUP 2013
今年是第二次參加開源人年度聚會 COSCUP，很幸運的在 47 秒內搶到限量 500 張的門票，和去年比較不一樣的地方：
Tech
我想做的遊戲
進入遊戲業兩年多了，但網誌上跟遊戲相關的文章卻很少，所以在截稿前夕，就來寫一篇跟遊戲有關的文章吧！
Tech
Web Components
今天想要跟大家聊聊 Web Components 這個新玩具，說是新玩具，其實這個概念已經發展有段時間了，尤其筆者本身是玩 Flash 技術出身的，發現 Web Components 跟 Flex Component 差不多，所以就來分享一些心得。
Tech
從無到有：安裝＆自動部署 Ruby on Rails 網站
這個月把網站從 Amazon EC2 搬回自己的 server，目前整個環境是 Linux（Ubuntu）+ Apache + Ruby on Rails 在跑，筆記一下從無到有的配置方法：
Tech
如何寫一個 Arduino Library？
假設要寫一個摩斯密碼（telegraph）的 library：
Tech
Hello Arduino!
說來慚愧，去年才知道有 Arduino 這麼好玩的東西，連國外小朋友都知道它有多火紅！（不過最近好像是某樹莓派比較牛）。
Tech
getDefinitionByName with swc
一般 Flash 程式開發時，取資源的方式有兩種：
Tech
Sublime Text 2 Shortcuts (Mac OSX)
Default
Tech
我的數位生活 2012
這次不談程式的東西，來聊一些 2012 年的數位生活心得，這幾年許多應用快速雲端化加上智慧型裝置普及率提高，幾乎大部份的工作都可以離開 PC 來完成了，剛好在去年我達成了 Apple 家族四天王（iPhone、iPad、AppleTV、Macbook（制霸！所以在這邊整理分享…
Tech
Flash Builder 4.7 iOS Debug
這個月剛好玩到 flash on iOS，在部署到 iPad 時碰到些問題，筆記一下最後解決的步驟。
Tech
AS3 Class Enumeration
筆記筆記..
Tech
讀書心得 半路叛逃
要在台灣看到遊戲開發的相關書籍其實不容易，其中獨立遊戲開發者的心路歷程更是少之又少。
Tech
COSCUP 2012
今年很幸運的有搶到入場資格，這也是小弟第一次參加 COSCUP，趁現在剛結束滿腔熱血的狀態下來寫篇心得文。
Tech
Development Tools
不知不覺，這個月的文章還沒想好要寫什麼，七月就過了…
Tech
讀書心得 約耳趣談軟體
以下是節錄一些這本書覺得還不錯的點
Tech
App Center Tutorial
本篇翻譯自 Facebook 開發者頁面 的 App Center Tutorial
Tech
How to list the properties of a javascript object
本篇參考 stackoverflow 的 How to list the properties of a javascript object
Tech
Javascript and this
筆記一個 javascript 的特性。
Tech
Javascript message on Facebook post feed
之前在使用Facebook API的時候碰到的問題,，筆記一下。
Tech
Use getPixelRatio for HTML5 on retina
如果用 HTML5 配 WebView 來作 App 的話，在 iPhone4 跟一些 Android 手機會碰到的解析度問題。
Tech
Hello PureMVC！
第一次聽到 PureMVC 的時候大概是兩年前，那時候就對這套 MVC Framework 很感興趣，不過當時對於它的架構是有看沒有懂，就一直拖到了現在。
Tech
Develop Facebook Canvas Page with CodeIgniter
這篇文章是介紹如何使用 CodeIgniter 這個 PHP Framework 來初步架構出 MVC 的環境, 並且開發一個簡單的 Facebook Canvas Page。
Tech
IE6 Upgrade Notice
有過網頁設計經驗的人，無論是部落格樣版或是其他頁面，都一定有個共同的痛，就是 IE6 這傢伙對 CSS 的呈現總是跟別人不同，偏偏它的市占率一直是最高的。
Tech
Factory pattern 工廠模式
距離上一篇 Strategy pattern 策略模式 已經兩個多月了，一直拖到現在才生出這篇文章…orz。
Tech
swfobject — 網頁輕鬆嵌入 Flash
Flash 在網頁上的應用已經越來越普遍了，未來一樣占有一席之位，但是從以前到現在，對於發佈 Flash 到網頁上常常碰到一些不必要的問題，例如 XP SP2 更新後，IE 瀏覽器上方會出現檔掉的訊息，或是 Flash…
Tech
Visual Studio Code Snippets
最近在看 聖殿祭司寫的 ASP.NET 3.5 專家技術手冊 ，上面提到 Visual Studio 2005 之後，提供一個很不錯的功能叫做 Code Snippets（程式碼片段），這是一個可以快速產生常用程式碼的好東西。
Tech
AS3 如何複製 DisplayObject
最近正在寫一個 FLASH 的相片大頭貼截取程式，碰到了一個複製 MovieClip 的問題，AS3 已經沒有 AS2 的 duplicateMovie() 方法可以用，所以我找了一些解決方法分享上來。
Tech
XNA Simple Animation
因為我的大學專題是寫一款四人網路連線的格鬥遊戲，所以對 XNA 這套微軟提供的遊戲開發平台有點研究，之前在痞客邦寫網誌的時候有寫過幾篇這個作品的開發情況，後來因為實在太忙了所以沒有繼續介紹下去，現在這個遊戲已經在去年完成了，也得到不錯的成績，有機會我會 PO…
Tech
SortedDictionary 如何自訂排序
之前再寫 資料檢索這堂課的作業時，碰到一個 SortedDictionary 排序上的問題，因為我在寫 反轉索引法的過程中有使用到這個集合，其中 Key 的部分我是用來存放 TF-IDF 演算法求出來的 weight score，這個值我是以 double…
Tech
Strategy pattern 策略模式
這篇文章是我打算要寫的 Design pattern 系列中的第一篇，在我大學三年級的時候，修了系上開的視窗程式設計課程，開課教授也是我的專題指導教授，這堂課老師教了我們很多關於 programming design pattern 的觀念。
Tech