Tagged

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 上線了一個新功能:影片播放器開始提供不同解析度來源的切換選項。 其中「自動」的選項,可以根據使用者當前的網速,自動切換適配的解析度。 恰巧,Hahow for Business 自去年六月正式啟動以來,也剛好滿一年。 最初,為了能夠儘快投入市場試水溫,產品開發時程相對吃緊,

工程師的世界越複雜,你的世界就越簡單
Tech

工程師的世界越複雜,你的世界就越簡單

藝術家、科學家、發明家還有工匠,相比工程師有什麼不同之處? 前陣子,Redis 的作者 antirez 宣佈退出維護團隊。理由大致如下: 我寫程式是為了表達自己,我認為自己寫的東西是一件藝術品,而不僅僅是為了完成任務而寫的有用的東西。如果我寫的東西有用,那只是機緣巧合,因為我的首要目標是做出一些美的東西。我寧願被人記住是一個糟糕的藝術家,也不要是一個好的工程師。Redis 現在需要的,較多的是專案維護,而不是表達自己。這並不是我想做的。Today I'm stepping down as Redis leader and maintainer. I published a blog post about this:https://t.co/QQi34BuX4G Thanks Redis community, you have

無限環境(ㄧ)Netlify Deploy Previews
Tech

無限環境(ㄧ)Netlify Deploy Previews

大綱什麼是「無限環境」?什麼是 Netlify Deploy Previews?快速入門指南總結附錄參考資料什麼是「無限環境」?大家常用的 GitHub flow 其實有一個常常被忽略的重點 —— 合併前部署。 GitHub flow我自己在前端開發的 Code Review 上,常常碰到下列兩個問題: PR 合併、部署到 staging 或 production 環境之後,才發現程式碼有問題為了避免第一個問題發生,就必須先 checkout PR 到 local 環境,然後經過一系列繁瑣的步驟跑起來,最後才能開始驗收和測試為了解決上述問題,就需要引入無限環境的概念。 所謂的無限環境,就是自動將目前 PR 中的最新 commit,部署到一個臨時環境中,並返回該環境的 URL 網址。(如果口袋夠深的話,甚至可以部署每一個 commit 以方便比對。)[1]

Tech

如何在 React Native 使用 SVG 向量圖檔

問題React Native 提供的 Image 無法使用 .svg 向量圖檔Expo 提供的 Svg 需要透過 Circle、Rect、Path、ClipPath 和 Polygon 自己繪製解決方法透過 SVGR 這個工具將 SVG 轉換成 React Native Component,例如: $ npx svgr@v1.10.0 --native ./logo.svg > LogoSVG.js會自動產生下列 react-native-svg 可以支援的程式碼: import React from 'react'; import Svg, { Defs, LinearGradient, Stop, Path } from 'react-native-svg';

如何自動化 GitHub Releases 流程
Tech

如何自動化 GitHub Releases 流程

2017 年初的時候,曾經寫了《如何自動化 release 的流程?》這篇文章,介紹了如何利用 semantic-release 和 TravisCI 自動化 GitHub Releases 和 NPM publish 這件事。這次要介紹的是如何直接透過 Probot 機器人做到 GitHub Releases。 大綱什麼是 GitHub Releases?GitHub Releases 有什麼問題?什麼是 Conventional Commits?什麼是 Conventional Release Bot?為什麼要用 Conventional Release Bot?什麼是 GitHub Releases?GitHub Releases 是 GitHub 提供給每個專案在釋出(Release)新版軟體時,

Tech

如何使用 RxJS 處理分頁 API

這篇文章會以 node-github 的 getCommits API 為例,介紹如何使用 RxJS 取得所有分頁的 commits 結果。 前言以往在處理分頁的 API,通常都會使用遞回運算,這會讓程式碼的可讀性不佳。有鑒於最近 RxJS 正夯,想說來試著寫寫看,於是就有了這篇分享文章。 需求首先,因為 node-github 的 getCommits API 回傳的是一個 Promise 物件,所以需要先使用 RxJS 的 fromPromise 將它轉成 Observable: Rx.Observable .fromPromise(getCommits(...))接下來,利用 node-github 提供的 hasNextPage 和 getNextPage,搭配 RxJS 的 expand

AWS Serverless RESTful APIs
Tech

AWS Serverless RESTful APIs

近幾年在雲架構上討論熱度較高的 2 大主題分別是 容器化(Containerize)與 無伺服器(Serverless)架構。本篇文章會帶你瞭解什麼是 AWS 無伺服器架構,以及如何使用 Serverless Framework 這個框架,快速開發 RESTful APIs。 大綱什麼是 XaaS?AWS 無伺服器架構Serverless FrameworkCRUDable Service基礎設施即程式碼什麼是 XaaS?馬雲說過一句話:「過去的一百年,我們把人變成了機器,未來的一百年,我們將會把機器變成人。」 人算不如天算,天算就是雲計算。如果要用一句話來定義 XaaS(X as a Service)的話,那就是「萬物皆服務」。 舉凡 IaaS(基礎設施及服務)、PaaS(平台即服務)或 SaaS(軟體即服務)

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 就可以使用真實資料,如下圖: 為什麼需要

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 自訂:

Tech

使用 Google Docs 將圖片轉成文字

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

Tech

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

我們團隊目前使用 Sentry 這個服務作 error tracking,JavaScript 或 React 的基本安裝方法在 官方文件 都可以找到,這裡就不贅述。 同時我們也有在使用 redux-observable 這個 RxJS middleware 來處理帶有副作用的 Redux action。 根據 redux-observable 這篇 Error Handling 文件的介紹,一般處理 async 錯誤的寫法大概會是: import { createAction } from 'redux-actions'; import { Observable } from 'rxjs/Observable'; const fetchUserEpic = action$ => action$.ofType(FETCH_USER) .mergeMap(action => Observable.

Tech

如何解決 GPG 失效的問題?

我是用 cider 在管理自己的 dotfiles,然後前陣子因為 gnupg 的 formula 剛好一起被更新,導致我的 GPG signature verification 無法順利運作。 解決方式: $ brew unlink gnupg && brew link gnupg如果有跳出某些 conflicting error 的話,可以照著提示解決,例如: Linking /usr/local/Cellar/gnupg/2.1.21... Error: Could not symlink bin/gpg-agent Target /usr/local/bin/gpg-agent is a symlink

Tech

如何自動化 release 的流程?

這篇文章會介紹如何使用 semantic-release 這個工具,自動化 Node.js (or JavaScript) 專案的版本號,以及 changelog 的 release 流程。 什麼是 semantic-release?為什麼要用 semantic-release?如何使用 semantic-release?什麼是 semantic-release?semantic-release 可以自動完成下列這些事: 當 code 被 push 或 merge PR 回 production branch (ex: master) 的時候CI build 被觸發,semantic-release 會收集此次更新的所有 commit messages(需遵循 AngularJS Git Commit Message Conventions 的格式)

Tech

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

如果你是使用 Angular、React 或是 Vue 來開發 SPA(單頁面應用),並且放在 Amazon S3 Static Website Hosting 上的話,那麼你會碰到 URL routing 的問題。 一般 react-router 或 vue-router 都預設使用 hash 的方式來處理 SPA 的路由: http://domain.com/#!/paths如果你不喜歡 #!/ 的顯示方式,可以使用 HTML5 的 History API,這樣就能像一般網站那樣顯示 URL: http://domain.com/paths但是使用 HTML5 History API 時,通常必須搭配 server

Tech

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

翻譯自原文 Error handling in AWS API Gateway with Lambda 這篇文章會介紹如何設置 AWS API Gateway 正確處理 Lambda 返回的 HTTP 錯誤狀態碼。 更新:2016.03.12 claudia 可以自動化解決這個問題,詳細可以參考 這篇 文章。本文假設讀者已經知道如何利用 AWS API Gateway 和 Lambda 建立 REST API,詳細可參考 Create API Gateway API for Lambda Functions。假設你的 Lambda function 錯誤處理如下: console.log(

Serverless!使用 AWS 開發 Slack Slash Commands
Tech

Serverless!使用 AWS 開發 Slack Slash Commands

本文介紹如何使用 AWS Lambda & AWS API Gateway 搭建一個不需要伺服器的環境,提供 Slack Slash Commands 查詢豆瓣電影。 在 Slack 輸入 /movie 絕地救援,會顯示相關的電影資料。這篇文章使用到的技術: Slack Slash CommandsAWS LambdaAWS API Gateway豆瓣電影 API閱讀這篇文章需要具備什麼能力: Node.js 的基本能力Amazon Web Services 的基本操作接下來我會逐步講解這些東西: Slack Slash Commands 的運作機制建立一個簡單的 AWS Lambda function建立一個簡單的 AWS API Gateway 執行 Lambda function使用 Lambda 呼叫豆瓣電影 API測試 AWS

Tech

解決 Universal 架構的 CSS Modules 問題

最近在使用 React 和 Redux 建構一個 Isomorphic JavaScript(Universal)應用。 但是在實作 CSS Modules 的時候,會碰上兩個問題: Server-side 的 Node.js 無法 import *.css。如果改成使用 process.env.IS_BROWSER 來判斷只在 Client-dide import,那又會碰到 Server-side 與 Client-side render 出來的 DOM 結果不一致的問題。解決方式: 安裝 css-modules-require-hook 這個套件: npm install css-modules-require-hook --save-dev修改 webpack config 的 css-loader 設定:

Tech

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

最近 Bower 宣布停止維護,所以許多前端的 packages 都移到了 NPM 上,甚至連 Grunt 和 Gulp 這類 build tools 都有要被 NPM scripts 取代的趨勢。 這篇文章主要是紀錄怎麼在發布自己的 package 之前,打包好需要的檔案。 假設你會使用 Grunt 或 Gulp 將所有原始碼打包存成一支檔案,例如 dist/build.js,但是因為通常我們不會把 dist 這類輸出文件放進版本控制,所以要在每次發布新版本的時候動態打包。 方法是在 package.json 的 script 底下新增一個 prepublish 的腳本,然後把你的打包命令寫在這裡: // package.json { "script": { "prepublish": "..." // grunt

Code Coverage with CircleCI + Codecov
Tech

Code Coverage with CircleCI + Codecov

最近的案子用到 Redux + React,因為它 Pure Function 的特性,所以 單元測試 很容易寫,順便也趁機會玩一下 程式碼覆蓋率(Code Coverage)。 單元測試 Unit Test這裡就不講單元測試怎麼寫了,網路上有很多大神的好文可以爬,我是用 Mocha + Chai: mocha 是 test framework,提供 describe、itchai 是 assertion library,提供 assert、should、expect安裝 Gulp: npm install --save-dev gulp gulp-mocha安裝 Babel 讓程式支援 ES6 語法: npm install --save-dev babel加入 mocha

GTD&Creative Routines
Tech

GTD&Creative Routines

這是一篇勉勵我自己如何實行 GTD & Creative Routines 的一套方法。 前言 不知道該做什麼 什麼是 Creative Routines? 人生終極目標 GTD 收集(Collect) 處理(Process) 二分鐘法則 四象限法則 整理(Organize) 目標金字塔 三隻青蛙理論 執行(Do) 番茄工作法 回顧(Plan) PDCA 循環 願望清單 結語 前言你是否常常在夜晚帶着一絲傷感入睡呢?明明胸懷大志,卻總是因爲忙碌無爲而感到愧疚?時間總是在不知道該做什麼之中悄悄流失…… 節錄自「我的时间管理与方法论」不知道該做什麼為了解決這類焦慮,我們需要有一套 GTD 方法,讓自己在正確的時間(Time),有正確的事(Things)可以去做(Done)。 什麼是 Creative

Tech

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

從以前就在找一個可以簡繁互換的 Alfred workflow,可惜一直沒找到滿意的,所以一直以來都是用 Yahoo 的輸入法來切換模式。結果前幾天突然看到 OpenCC 這個開源項目,而且還有 Python 的庫可以用!二話不說就自己來寫一個了,以下是節自我的 GitHub alfred-chinese-converter v1.0.0 的 README。 Introduction 介紹使用開源項目 OpenCC(開放中文轉換)開發的 Alfred 2 workflow,支持簡繁體中文的詞彙級別轉換、異體字轉換以及地區習慣用詞轉換(中國大陸、臺灣、香港)。 Features 特點節選自 OpenCC 的部份特點: 嚴格區分「一簡對多繁」和「一簡對多異」。完全兼容異體字,可以實現動態替換。嚴格審校一簡對多繁詞條,原則爲「能分則不合」。支持中國大陸、臺灣、

DevOps:持續整合&持續交付(Docker、CircleCI、AWS)
Tech

DevOps:持續整合&持續交付(Docker、CircleCI、AWS)

這篇文章將一步一步介紹如何使用 Docker、GitHub Flow、CircleCI、AWS Elastic Beanstalk 與 Slack 來完成持續整合與持續交付的開發流程。 前言什麼是持續整合&持續交付?持續整合&持續交付(Continuous Integration & Continous Delivery),簡稱 CI & CD,具體介紹可以參考「山姆鍋對持續整合、持續部署、持續交付的定義」這篇文章。 簡單來說就是盡量減少手動人力,將一些日常工作交給自動化工具。例如:環境建置、單元測試、日誌紀錄、產品部署。 我使用了哪些工具?Git - 版本管理GitHub - 程式碼託管、審查CircleCI - 自動化建置、測試、部署Docker - 可攜式、輕量級的執行環境AWS

如何優雅地在 Mac 上使用 dotfiles?
Tech

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

註:這篇文章的原始碼放在 GitHub,會以上面的更新為主。 如果不清楚什麼是 dotfiles 的話,可以參閱善用 dotfiles 個人化自己的工作環境: dotfiles,顧名思義,就是檔案名稱以 . (dot) 為 prefix 的檔案通稱,若是您的作業系統是 Mac OS X 或是 Linux 這類 *nix-based 的作業系統,一般來說在視窗環境中是看不到這些檔案的,因為對系統來說,他們是所謂的隱藏檔,這些檔案有一些共通點,那就是他們通常用來儲存一些個人化的設定或是自定的拓展功能,以符合使用者本身的使用需求與習慣,有了這些設定好的檔案之後,使用者可以讓整個系統用起來更為順手,並且大幅提昇他們自身的工作效率!因此對某些使用者來說,這些 dotfiles 設定檔對他們來說,反而可能是他們機器上最重要的檔案呢!這份 dotfiles 是 fork 自 Holman's dotfiles,並根據個人的需求修改過,如果有興趣,閱讀完這份文件之後,

AngularJS + Google Spreadsheet
Tech

AngularJS + Google Spreadsheet

概要這篇文章主要是說明如何寫 AngularJS 的 service,以類似 $resource REST 的方式來取得 Google 試算表的資料。 本文假設讀者已讀過 AngularJS Tutorial,了解 AngularJS 基本概念。目錄建立試算表TemplateApp ModuleServiceController注意事項參考建立試算表前往 https://drive.google.com 或是參考已經建立好的試算表。 先建立一份新的試算表:建立 > 試算表。 填寫資料表,以 AngularJS Tutorial 的 phones.json 為例。 將試算表權限公開:檔案 > 共用 > 擁有存取權的使用者 > 變更。 共用設定 > 公開在網路上 > 存取權 > 可檢視