hothero's TechNote

Will be sharing troubleshooting experiences, findings, tutorials, ...

how to install protobuf with specific version

不管是因為什麼原因需要，整合第三方套件總是要面對一些 breaking change，甚至在大的工程團隊中，每個專案的版本不一致導致連環狀況發生。要裝 protobuf 特定版本其實不難，將以 3.5.1 版本為例： 安裝該版本原始碼首先可以在 protobuf 的 github 專案中找到不同版本的原始碼載點，找到自己的需求後下載： https://github.com/protocolbuffers/protobuf/releases 解壓縮後，在編譯 protobuf 時可能需要以下幾個套件，可以用 homebrew 做安裝： $ brew install autoconf $ brew install automake $ brew install libtool接下來就是對這份原始碼作 compile 與安裝（
  • hothero
    hothero
hothero • 1 min read
ghost

Setup ghost support for HTTPS with cloudflare

此部分將講解如何設定 ghost 擁有自己的 domain 並且透過 cloudflare 讓全站 HTTPS，cloudflare 則不多說明如何設定，可參考官方說明依步驟即可完成。 設定 Custom Domain 若一開始走 ghost-cli 安裝時就有設定自己的 domain，則可跳過此步驟。 先至 /var/www/ghost/config.production.json 內，將 url 改為自己要的網址，並記得附上 https 前綴 protocol，例如: https://blog.hothero.org。 在 /etc/nginx/sites-available/ 中建立一個
  • hothero
    hothero
hothero • 2 min read
ghost

Install ghost on Ubuntu 16.04 LTS

原先 ghost 安裝在 heroku，但隨著版本跳動的非常快，也希望可以更順利升級，姑且就整個搬移至 linode 上，也透過 ghost 原生的 backup 還原順利，紀錄這安裝的過程。 環境 Ubuntu 16.04 LTS MySQL Nginx 官方文件有特別標明，機器最少需要 1GB 的 memory 才不會導致系統有問題。 1. 前置準備 # you can change ghost to whatever you want adduser ghost usermod -aG sudo ghost
  • hothero
    hothero
hothero • 1 min read
TroubleShooting

broken vim on High Sierra with rbenv

前陣子把電腦更新到 High Sierra 陸續發現不少災情，例如 docker 的 networking 怪怪的、或是 VSCode 開不起來等等，但這些都莫名重開機就能解決（彷彿變成 Windows 電腦）；唯獨遇到的 vim 問題花了許久總算解決。 沒辦法用 vim 真的很困擾，像是 git commit 或是 rebase editor 都是預設 vim，會一直出現這樣的錯誤 dyld: Library not loaded: /usr/local/opt/ruby/lib/libruby.2.3.0.
  • hothero
    hothero
hothero • 1 min read
bitcoin

how to simply start mining bitcoin and ethereum in background on ubuntu 14+

在比特幣與以太幣每年持續成長的狀態，讓人想試試看所謂的「挖礦」，雖然進入時間點晚，但不無是個可以認識新技術的好方法，就來試試看在自己機器上挖吧～ 以下指令環境需求為 ubuntu 14.4+，若非此版本還請另找解法（最大差異是以太幣的挖礦程式安裝） 安裝 minergate（目前找到在 linux 上相對支援度最高的，除了 cli 也有 GUI 介面可以用喔） sudo apt-get update && wget https://minergate.com/download/deb-cli -O minergate-cli.deb && sudo dpkg -i minergate-cli.deb 額外安裝以太幣的挖礦程式
  • hothero
    hothero
hothero • 2 min read
s3

Use Amazon S3 & Cloudflare to save bandwidth

因敝公司會有大量的 landing page 需求，且往往客戶群也涵蓋了美國以及港澳等地區，更別說大量的圖片使用，都是會造成使用 cloudfront 等 CDN 服務的費用支出問題（我們曾有圖片超過 10 MB 甚至影片超過 100MB 的狀況）。在尋找一些解決方案後，S3 + Cloudflare 是功夫花費最少且最符合當代開發流程的方式。 在此方案前，我們使用的是 S3 + Cloudfront 的解決方案，基本上最明顯的支出會有以下幾項： S3 儲存空間費用：每 GB 大約 0.025 美金，基本上如果 1TB 大概每個月台幣 800，加上大量的開發套件或函示庫都有整合，算是非常棒的雲端儲存解決方案 Cloudfront （CDN）
  • hothero
    hothero
hothero • 3 min read
rails

[Tutorial] how to dump and restore postgresql from production env on AWS EC2 for Rails

自從機器從 heroku 搬到 AWS 上後，資料庫的備份再也不是容易的事情惹，中間牽扯到 firewall, VPC, postgresql version 等等的問題，有點被 heroku 寵壞。過了一年多，終於有時間好好正視這個問題處理一下，不然常常很多特殊交易狀況都無法在開發環境被還原。 雖然找到許多的 gem 可以協助做這件事情，但用起來都不符合需求，後面再來提。最後還是用最土砲的方式：rake task 加上 postgresql cli 搞定。 資料庫版本 第一個會遇到的問題是資料庫版本不符合，RDS 用的 postgresql 是 9.5，但透過 opsworks 建的 ubuntu 環境 postgresql
  • hothero
    hothero
hothero • 2 min read
activated multi facebook pixels on the same page
facebook pixel

activated multi facebook pixels on the same page

目的：在同一頁對多個 facebook pixel 發送事件 網路上 StackOverflow 或是臉書官方論壇，不免許多人都在問如何在一個網站綁定多個 facebook pixel，尤其在網站有第三方企業客戶時最容易發生：我自己要記錄 pixel 但我客戶也希望能記錄他的狀況。 網路上多數是舊版 conversion pixel 的方式，而以目前新版的 facebook pixel 方法為： // Initialize Facebook Pixel object fbq('init', 'FIRST_
  • hothero
    hothero
hothero • 1 min read
Safari

Mobile Safari Page Auto Refresh Limitation

最近有個客戶告知網站在手機看會一直自己重新整理，後續追蹤才發現是 safari，而非所有瀏覽器都會。 當時從幾個方向找： 會不會是 vuejs 的關係？ 會不會是 vuejs 的套件，像是 vue-route 的關係？ 後端伺服器 node.js 的關係？ 還是安裝的第三方套件的關係，像是 optimizely？ 在確認都非開發端的問題後，合理懷疑是 safari 的關係，進而找到，原來 safari 有其可瀏覽網頁的限制！ MobileSafari keeps website cache only in RAM, and therefore, once it runs out of RAM,
  • hothero
    hothero
hothero • 2 min read
aws

AWS 開放更多 EC2 RI 的彈性了

過往使用 RI 限制非常多，不僅要同一個 Region 還要相同 AZ，instance type 與 size 也需要一樣，使用上若是買長期一到三年的方案，很難符合使用上彈性（比如事業變大了，過往買的小型機器就完全沒用）。 事實上，AWS 從去年就開始著手提高 RI 的彈性（不知道是不是 GCP 來勢洶洶，開始也要壓低價格），讓更多團隊的機器得以節省。 這次調整算是完全釋放了，照下圖的說明，每個形態的 RI 不分 AZ 可以當作籌碼的方式看到，做到費用的抵免。比如說一台 c4.large 可以抵 2 台 c4.medium 或是 4
  • hothero
    hothero
hothero • 1 min read
news

AWS release aws-health-tool for Personal Health Dashboard (PHD)

原來 AWS 一直有完整的 dashboard 提供給伺服器管理者，叫做 Personal Health Dashboard (PHD)，讓你用了變博士 XDD。但不愧是給工程師用的服務，你都必須要自己動手，這一切都基於 AWS Health。 近期應是 AWS 工程師不小心打錯字導致大當機 事件，突然一堆關於 AWS 監控的第三方套件如雨後春筍冒出來一堆。AWS 官方部落格也在今天 release 了 aws-health-tool，現成的 API 設定可以直接加進 PHD 中。裡面算蠻完整的，EC2, SNS, SMS 都有得監控，更重要是提供 slack notifier，讓 DevOps
  • hothero
    hothero
hothero • 1 min read
tracking

facebook pixel track event and customization

這是 Facebook Pixel 在開發者文件上的用法定義：「The Facebook Pixel is the main tool you can use to track events on a website and build audiences based on this data.」 可以知道原來 Pixel 不僅僅只是紀錄在你網站的這個人是誰，作為之後下廣告的客群參考，還能針對網站上的行爲將你的網站使用者做分類/標記，在未來下廣告時能夠使用。你也可以把 Pixel 的用法看作是 Google Analytics，只是兩者目的性不同。 臉書預設即有支援不少事件，但都是電商為主的事件相關，像是：ViewContent,
  • hothero
    hothero
hothero • 4 min read
rails

has_many through association records duplication problem with Subquery solution

Rails 有非常完整的 ORM 機制，也是許多網站框架還難以超越的部分，其中的 has_many, has_one, belongs_to 等等的 association 拯救了不知多少工程師的白頭髮，讓大家少花了多少打 SQL 語法的歲月.....但近期著實被 has_many through 狠狠地上了一課，主要是 join 導致加總了重複的紀錄，使得金額與數量計算上出現大幅的落差。 先簡述一下我們的系統，就是一個電商架構的網站，其中 Transaction 與 TransactionItem 用來記錄每一筆交易買了哪些商品，那每個專案則理所當然的透過 transaction_items 來去找到 transaction_record 加總金額，即可知道共收到了多少錢。 （這邊姑且先不探討關聯設計上的問題，先針對
  • hothero
    hothero
hothero • 5 min read
facebook

reinitialize the facebook social plugin on infinite scolling

一般 facebook social plugin 初始化方式會是以下的程式碼，藉由引入外部 javascript 檔案作第三方服務需要的事情，以臉書來說就是判別 fb-root，根據裡面的屬性產生像是「讚」的按鈕。觸發時機多是在第一次網頁讀取完成的同時執行。 而 infinite scrolling 產生更多網站內容的作法流程是，隨著網頁滾動，不斷透過 ajax 方式讀取後台資料呈現出來，導致產生出來的 facebook social plugin 程式碼沒有辦法被初始化。 <div id="fb-root"></div> <script> var js, fjs = d.
  • hothero
    hothero
hothero • 2 min read
english

[分享] 線上英文學習服務

今天想來分享個好東西，一個線上英文課程網站 Engoo：https://engoo.com.tw/。 可能有許多朋友跟我一樣，常找不到時間、覺得上課太貴、甚至沒有方向等等。自從我親愛的好友 @mymy 推薦給我 engoo 後，好像覺得學英文沒那麼困難了呢（是電視廣告嗎...） 讓我特別心動的一個最主要原因，是每次上課只要「25 分鐘」，然後一堂不到100元。對於一個時間零碎的工作者來說，是一個非常舒服的時間安排。另外在安排課程上也與一般的英文課程不一樣，是每次上完課才安排下一次的課程時間。這部份我覺得有幾個好處： 每週固定時間容易臨時有事要調課很麻煩 每次安排下次上課時間，通常是隔天或過一兩天，時間較好掌握 更重要的是，能不能上到好老師的課真的是各憑本事，因為 Engoo 只能預約「下一堂」，而非一口氣預約。 上課方式主要兩種：聊天、教材，端看自己的需求。因為是用
  • hothero
    hothero
hothero • 4 min read
git

heroku about file extension case sensitive

許多人對於檔案附檔名甚至是檔名命名方式常有不同習慣，甚至是因為不小心，導致附檔名有大小寫區分。最常見的就是 file1.jpg, file2.JPG, file3.png, file5.PNG。 最近在使用 heroku 上就遇到有關大小寫的問題，會有幾個狀況發生： 在網址的附檔名上有大小寫區分 瀏覽器的 cache 也會有 git 也有此問題 最基本的作法就是將所有檔名與附檔名都改為小寫，這邊可以使用指令完成 rename 'y/A-Z/a-z/' * 但若是 MAC 或是 Windows 這種 case-insensitive（大小寫沒差）的系統，需要加上參數 -f rename -f 'y/A-Z/a-z/
  • hothero
    hothero
hothero • 1 min read
You've successfully subscribed to hothero's TechNote!