Tech

A collection of 59 posts
Hahow for Business 如何保護串流內容？
Tech

Hahow for Business 如何保護串流內容？

近來因疫情關係，不少 OTT 與線上教育等影音串流平台的流量急劇上升，本篇文章以 Hahow 為例，帶你了解隨選視訊背後的原理以及如何保護數位內容。 這篇文章會介紹 Hahow for Business 是如何透過 AWS CloudFront 的 Signed Cookies 機制來保護 HLS 格式的串流影片。 大綱 * 前言 * 什麼是 VOD？ * 什麼是 HLS？ * 如何保護串流內容？ * 什麼是 Signed URLs／Cookies？ * 結論 前言 六月初，Hahow for Business [https://business.hahow.in/] 上線了一個新功能： 影片播放器開始提供不同解析度來源的切換選項。 其中「自動」的選項，可以根據使用者當前的網速，自動切換適配的解析度。 恰巧，
18 min read
如何自動化 GitHub Releases 流程？
Tech

如何自動化 GitHub Releases 流程？

2017 年初的時候，曾經寫了《如何自動化 release 的流程？ [https://blog.amowu.com/2017/01/how-to-automate-js-release.html]》這篇文章，介紹了如何利用 semantic-release [https://github.com/semantic-release/semantic-release] 和 TravisCI [https://travis-ci.org/] 自動化 GitHub Releases 和 NPM publish 這件事。這次要介紹的是如何直接透過 Probot [https://probot.github.io/] 機器人做到 GitHub Releases。 大綱 * 什麼是 GitHub Releases？ * GitHub Releases 有什麼問題？
5 min read
Tech

如何使用 RxJS 處理分頁 API

這篇文章會以 node-github [https://github.com/octokit/node-github] 的 getCommits API 為例，介紹如何使用 RxJS 取得所有分頁的 commits 結果。 前言 以往在處理分頁的 API，通常都會使用遞回運算，這會讓程式碼的可讀性不佳。有鑒於最近 RxJS 正夯，想說來試著寫寫看，於是就有了這篇分享文章。 需求 首先，因為 node-github 的 getCommits [https://octokit.github.io/node-github/#api-repos-getCommits] API 回傳的是一個 Promise 物件，所以需要先使用 RxJS 的 fromPromise [https://github.com/Reactive-Extensions/
2 min read
AWS Serverless RESTful APIs
Tech

AWS Serverless RESTful APIs

近幾年在雲架構上討論熱度較高的 2 大主題分別是 容器化（Containerize）與 無伺服器（Serverless）架構。本篇文章會帶你瞭解什麼是 AWS 無伺服器架構，以及如何使用 Serverless Framework 這個框架，快速開發 RESTful APIs。 大綱 1. 什麼是 XaaS？ 2. AWS 無伺服器架構 3. Serverless Framework 4. CRUDable Service 5. 基礎設施即程式碼 什麼是 XaaS？ 馬雲說過一句話：「過去的一百年，我們把人變成了機器，未來的一百年，我們將會把機器變成人。」 人算不如天算，天算就是雲計算。如果要用一句話來定義 XaaS（X as a Service）的話，
9 min read
Mock Server＆契約測試
Tech

Mock Server＆契約測試

這篇文章會介紹如何運用 Mock Server 和 Integration Contract Test（契約測試）解決一些在前後端分離的開發環境底下會碰到的問題。 大綱如下： * 什麼是 Mock Server？ * 為什麼需要 Mock Server？ * 如何使用 Mock Server？ * 什麼是契約測試？ * 為什麼需要契約測試？ 什麼是 Mock Server？ 下圖是傳統的前後端分離架構： 當後端 API 還沒開發完成的時候，前端會需要一個可以暫時回應假資料（mock data）的 mock server，如下圖： 等到後端的 API 開發完成之後，前端只需要將 API endpoint 從 mock server 切回 remote server 就可以使用真實資料，如下圖： 為什麼需要
5 min read
Tech

如何使用 Docker 切換不同的 MongoDB

在開發前端的時候，常常會碰到想要回到 migration 之前的 MongoDB 資料結構來除錯，如果只使用本地安裝的 MongoDB，操作上會很麻煩，所以這篇文章會說明如何在本機不安裝 MongoDB 的環境下，使用 Docker 準備多份 MongoDB 資料庫。 請確認電腦有安裝 Docker，先準備好要使用的 MongoDB 資料庫備份檔案，大概會是長這樣： 存放的路徑這裡暫定為 ~/Downloads/20170622/foo/...。 打開 Terminal，下載 MongoDB（這裡以 2.6 版作為示範）的 Docker image： $ docker pull mongo:2.6 然後開啟一個新的 MongoDB Docker container，container 名字可以透過 --name
2 min read
Tech

使用 Google Docs 將圖片轉成文字

像我這種日文不好、需要靠翻譯工具作參考的人，有時候想翻譯雜誌這種長文會很麻煩。 以前會找一些網路上的 OCR 工具，最近才發現原來 Google Docs 就提供這樣的功能！而且還很強大！ヽ(●´∀`●)ﾉ 以下圖為例，假如我想要翻譯底下那塊專欄的話： 黃色框框處為打算翻譯的文章先將文字區塊裁剪成一張圖檔： 裁切出只想翻譯的部分 1. 上傳圖片到 Google 雲端硬碟 2. 點選右鍵 > 選擇開啟工具 > Google 文件 等待它轉換完成之後，就會產生一份帶有文字檔案的 Google 文件： Google Docs 自動幫你將圖片上的內容轉成可以編輯的文字完成！Google Docs 提供的圖片轉文字功能有以下特色： * 語言自動判斷，日文也沒問題 (*´艸`*) * 橫書＆直書自動判斷，這個有點厲害 🌚 * 相較於其它的 OCR 服務，Google Docs 在內容上的判斷準確率很高！ 從此翻譯雜誌的效率大幅提升 ｡:.ﾟヽ(
2 min read
Tech

如何發送 redux-observable 的 catch error 至 Sentry

我們團隊目前使用 Sentry [https://sentry.io/] 這個服務作 error tracking，JavaScript 或 React 的基本安裝方法在 官方文件 [https://docs.sentry.io/clients/javascript/integrations/react/] 都可以找到，這裡就不贅述。 同時我們也有在使用 redux-observable [https://github.com/redux-observable/redux-observable] 這個 RxJS middleware 來處理帶有副作用的 Redux action。 根據 redux-observable 這篇 Error Handling [https://redux-observable.js.org/docs/recipes/ErrorHandling.html] 文件的介紹，
1 min read
Tech

如何解決 GPG 失效的問題？

我是用 cider [https://github.com/msanders/cider] 在管理自己的 dotfiles，然後前陣子因為 gnupg [https://www.gnupg.org/] 的 formula 剛好一起被更新，導致我的 GPG signature verification [https://github.com/blog/2144-gpg-signature-verification] 無法順利運作。 解決方式： $ brew unlink gnupg && brew link gnupg 如果有跳出某些 conflicting error 的話，可以照著提示解決，例如： Linking /usr/local/Cellar/gnupg/2.1.21... Error:
1 min read
Tech

如何自動化 release 的流程？

這篇文章會介紹如何使用 semantic-release [https://github.com/semantic-release/semantic-release] 這個工具，自動化 Node.js (or JavaScript) 專案的版本號，以及 changelog 的 release 流程。 * 什麼是 semantic-release？ * 為什麼要用 semantic-release？ * 如何使用 semantic-release？ 什麼是 semantic-release？ semantic-release [https://github.com/semantic-release/semantic-release] 可以自動完成下列這些事： 1. 當 code 被 push 或 merge PR 回 production branch (ex: master) 的時候 2. CI
5 min read
Tech

Amazon S3 正確處理 HTML5 History 路由問題

如果你是使用 Angular、React 或是 Vue 來開發 SPA（單頁面應用），並且放在 Amazon S3 Static Website Hosting [http://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html] 上的話，那麼你會碰到 URL routing 的問題。 一般 react-router [https://github.com/reactjs/react-router] 或 vue-router [https://github.com/vuejs/vue-router] 都預設使用 hash 的方式來處理 SPA 的路由： http://domain.
2 min read
Tech

如何正確處理 AWS API Gateway 的 Lambda Error Status

翻譯自原文 Error handling in AWS API Gateway with Lambda [https://medium.com/@pahud/error-handling-in-aws-api-gateway-with-lambda-28fb86b3ea1e#.gj9gy6ide] 這篇文章會介紹如何設置 AWS API Gateway 正確處理 Lambda 返回的 HTTP 錯誤狀態碼。 > 更新：2016.03.12 claudia [https://github.com/claudiajs/claudia] 可以自動化解決這個問題，詳細可以參考 這篇 [http://www.infoq.com/cn/news/2016/03/microservices-lambda-claudiajs] 文章。 > 本文假設讀者已經知道如何利用 AWS API
2 min read
Serverless！使用 AWS 開發 Slack Slash Commands
Tech

Serverless！使用 AWS 開發 Slack Slash Commands

本文介紹如何使用 AWS Lambda [https://aws.amazon.com/lambda/] & AWS API Gateway [https://aws.amazon.com/api-gateway/] 搭建一個不需要伺服器的環境，提供 Slack Slash Commands [https://api.slack.com/slash-commands] 查詢豆瓣電影。 在 Slack 輸入 /movie 絕地救援，會顯示相關的電影資料。這篇文章使用到的技術： * Slack Slash Commands [https://api.slack.com/slash-commands] * AWS Lambda [https://aws.amazon.com/lambda/] * AWS
7 min read
Tech

解決 Universal 架構的 CSS Modules 問題

最近在使用 React [https://facebook.github.io/react/] 和 Redux [https://github.com/rackt/redux] 建構一個 Isomorphic JavaScript [http://isomorphic.net/javascript]（Universal）應用。 但是在實作 CSS Modules [https://github.com/css-modules/css-modules] 的時候，會碰上兩個問題： 1. Server-side 的 Node.js 無法 import *.css。 2. 如果改成使用 process.env.IS_BROWSER 來判斷只在 Client-dide import，
1 min read
Tech

如何在發布自己的 NPM package 之前打包檔案

最近 Bower [http://bower.io/] 宣布停止維護，所以許多前端的 packages 都移到了 NPM [https://www.npmjs.com/] 上，甚至連 Grunt [http://gruntjs.com/] 和 Gulp [http://gulpjs.com/] 這類 build tools 都有要被 NPM scripts 取代的趨勢。 這篇文章主要是紀錄怎麼在發布自己的 package 之前，打包好需要的檔案。 假設你會使用 Grunt [http://gruntjs.com/] 或 Gulp [http://gulpjs.com/] 將所有原始碼打包存成一支檔案，例如 dist/build.
2 min read
GTD＆Creative Routines
Tech

GTD＆Creative Routines

這是一篇勉勵我自己如何實行 GTD & Creative Routines 的一套方法。 * 前言 * 不知道該做什麼 * 什麼是 Creative Routines？ * 人生終極目標 * GTD * 收集（Collect） * 處理（Process） * 二分鐘法則 * 四象限法則 * 整理（Organize） * 目標金字塔 * 三隻青蛙理論 * 執行（Do） * 番茄工作法 * 回顧（Plan） * PDCA 循環 * 願望清單 * 結語 前言 > 你是否常常在夜晚帶着一絲傷感入睡呢？明明胸懷大志，卻總是因爲忙碌無爲而感到愧疚？時間總是在不知道該做什麼之中悄悄流失…… 節錄自「我的时间管理与方法论 [http://www.mifengtd.cn/articles/runningcheese-gtd-system.html]」 不知道該做什麼 為了解決這類焦慮，我們需要有一套 GTD [https:
11 min read
Tech

OpenCC 簡繁中文轉換 Alfred 2 workflow v1.0.0 released！

從以前就在找一個可以簡繁互換的 Alfred workflow，可惜一直沒找到滿意的，所以一直以來都是用 Yahoo 的輸入法來切換模式。結果前幾天突然看到 OpenCC [https://github.com/BYVoid/OpenCC] 這個開源項目，而且還有 Python 的庫可以用！二話不說就自己來寫一個了，以下是節自我的 GitHub alfred-chinese-converter [https://github.com/amowu/alfred-chinese-converter] v1.0.0 的 README。 Introduction 介紹 使用開源項目 OpenCC [https://github.com/BYVoid/OpenCC]（開放中文轉換）開發的 Alfred 2 [http://www.alfredapp.com/] workflow，
2 min read
DevOps：持續整合＆持續交付（Docker、CircleCI、AWS）
Tech

DevOps：持續整合＆持續交付（Docker、CircleCI、AWS）

這篇文章將一步一步介紹如何使用 Docker、GitHub Flow、CircleCI、AWS Elastic Beanstalk 與 Slack 來完成 持續整合與持續交付的開發流程。 前言 什麼是持續整合＆持續交付？ 持續整合＆持續交付（Continuous Integration & Continous Delivery），簡稱 CI & CD，具體介紹可以參考「 山姆鍋對持續整合、持續部署、持續交付的定義 [https://samkuo.me/post/2013/10/continuous-integration-deployment-delivery/] 」這篇文章。 簡單來說就是盡量減少手動人力，將一些日常工作交給自動化工具。例如：環境建置、單元測試、日誌紀錄、產品部署。 我使用了哪些工具？ * Git [http://git-scm.com/] - 版本管理
18 min read
如何優雅地在 Mac 上使用 dotfiles？
Tech

如何優雅地在 Mac 上使用 dotfiles？

註：這篇文章的原始碼放在 GitHub [https://github.com/amowu/dotfiles]，會以上面的更新為主。 如果不清楚什麼是 dotfiles 的話，可以參閱善用 dotfiles 個人化自己的工作環境 [http://cloudchen.logdown.com/posts/49264746647/dotfiles]： > dotfiles，顧名思義，就是檔案名稱以 . (dot) 為 prefix 的檔案通稱，若是您的作業系統是 Mac OS X 或是 Linux 這類 *nix-based 的作業系統，一般來說在視窗環境中是看不到這些檔案的，因為對系統來說，他們是所謂的隱藏檔，這些檔案有一些共通點，那就是他們通常用來儲存一些個人化的設定或是自定的拓展功能，以符合使用者本身的使用需求與習慣，有了這些設定好的檔案之後，使用者可以讓整個系統用起來更為順手，並且大幅提昇他們自身的工作效率！因此對某些使用者來說，這些 dotfiles
9 min read