Tech

A collection of 58 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
無限環境(ㄧ)Netlify Deploy Previews
Tech

無限環境(ㄧ)Netlify Deploy Previews

大綱 * 什麼是「無限環境」? * 什麼是 Netlify Deploy Previews? * 快速入門指南 * 總結 * 附錄 * 參考資料 什麼是「無限環境」? 大家常用的 GitHub flow [https://guides.github.com/introduction/flow/] 其實有一個常常被忽略的重點 —— 合併前部署。 GitHub flow我自己在前端開發的 Code Review [https://github.com/features/code-review/] 上,常常碰到下列兩個問題: 1. PR 合併、部署到 staging 或 production 環境之後,才發現程式碼有問題 2. 為了避免第一個問題發生,就必須先 checkout PR 到
8 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
AngularJS + Google Spreadsheet
Tech

AngularJS + Google Spreadsheet

概要 這篇文章主要是說明如何寫 AngularJS 的 service,以類似 $resource [http://code.angularjs.org/1.2.6/docs/api/ngResource.$resource] REST 的方式來取得 Google 試算表的資料。 > 本文假設讀者已讀過 AngularJS Tutorial [http://docs.angularjs.org/tutorial],了解 AngularJS 基本概念。 目錄 1. 建立試算表 2. Template 3. App Module 4. Service 5. Controller 6. 注意事項 7. 參考 建立試算表
4 min read