發表於 分類於

以AWS EC2為範例, 正常來說我們要在本地端連機台需要用pem檔執行:
$ ssh -i ec2.pem ubuntu@ec2-ip

目標是想只簡單的輸入
$ ssh my-website

實作

  1. 把pem檔移到 ~/.ssh 目錄底下(或自己想要另外路徑管理也行)
  2. $ vi ~/.ssh/config
    1
    2
    3
    4
    5
    Host my-website
      HostName ec2-ip
      User ubuntu
      IdentitiesOnly yes
      IdentityFile ~/.ssh/ec2.pem

大功告成~嘗試著用簡單的指令$ ssh my-website連連看吧

小補充

  1. 當登入機台後如果有在機台上adduser,例如我創造了一個kurt, 並且把shh key放上去, 可以在~/.ssh/config簡單設定

    1
    2
    3
    Host my-website-by-kurt
      HostName 18.222.195.47
      User kurt

  2. 雖然我們有設定User, 但依然可以用別的使用者去使用alias
    $ ssh other_user_name@my-website-by-kurt

  3. 這樣做不只是省指令這個好處, 假設有用load balence到多台機器並且與團隊說好都已apps這個user做管理, 就可以方便取名管理如下:
    `
    Host my-website-01
    HostName my-website-01.com
    User apps

Host my-website-02
HostName my-website-02.com
User apps

發表於 分類於 ，

新增欄位且預設值是其他欄位的值

考慮的點如下:

  1. 希望一個migration即可完成
  2. 希望可以一次更新所有資料不要造成資料庫負擔

我一開始想有沒有什麼神奇的 helper 可以直接使用, 後來發現我想太多了其實很簡單

關於第一點, 就直接把ruby code寫在migration檔就可以
關於第二點, 使用update_all就可以一次性的更新所有資料, 但要注意 update_all 不跑驗證, 且也不更新updated_at的timestamp, 不過既然是新增一個欄位然後加default值, 要驗證的需求比較少, update_all就真的足夠了

檔案實作如下:

1
2
3
4
5
6
7
class AddSellingTimeToProducts < ActiveRecord::Migration[5.2]
  def change
    add_column :products, :selling_time, :datetime

    Product.all.update_all("selling_time = created_at")
  end
end

參考 update_all SQL messages:

1
2
(188.5ms)  ALTER TABLE `products` ADD `selling_time` datetime
Product Update All (19.6ms)  UPDATE `products` SET selling_time = created_at

參考文章:
stackoverflow
Rails API

發表於 更新於 分類於

這篇是 week1, 開頭先分享資源和系列文章連結:

系列文章:

一開始介紹week0教的 scratch 和 C 的比較, 例如 scratch 的 repeat 怎麼寫成 C 的 for, ask 變成 get_string之類的, 但有個部分講得還不錯

不要多餘的判斷

例如程式碼如下(課程是教 C, 但我比較習慣寫 ruby 了所以用 ruby 寫):

1
2
3
4
5
6
7
if a > 0
  pust 'It is a condition'
elsif a < 10
  pust 'It is b condition'
elsif a >= 1 && a <= 10
  pust 'It is c condition'
end

這個程式碼沒有錯誤, 包含所有條件, 沒有額外的狀況, 但卻不建議這樣寫, 為什麼呢?
因為最後的判斷應該為 default 值, 也就是說建議簡寫如下:

1
2
3
4
5
6
7
if a > 0
  pust 'It is a condition'
elsif a < 10
  pust 'It is b condition'
else
  pust 'It is c condition'
end

除非很肯定不會有其他的狀況, 不然如果有10種以上的 condition, 很有可能發生我們沒注意到的 condition, 造成 throw error 或者 debug 的成本

執行 C 語言檔案

這邊主要理解一下當我們寫好一個 C 語言的檔案怎麼在終端機執行它
例如我們有一個 hello.c 的檔案
$ clang hello hello.c
或者更簡單的
$ make hello
然後這邊教一些簡單的 linux 指令, 對開發者來說基本的指令是一定要會的
這段最後教怎麼看 bug 的訊息, 通常程式碼出錯的時候都會一次噴好幾百行, 最基本的查看就是直接往最上面拉看一開始的錯誤就行, 其餘的是不斷像泡泡一層一層噴出的錯誤

不精準的電腦

這段很有趣, 早在我一開始學JS的時候就知道 0.1 + 0.2 不會真的等於 0.3, 而是等於 0.30000000000000004, 這邊沒有講很底層的東西解釋為什麼浮點數有差距

試想一下在我們人類的定義中有無窮大的實數, 譬如說即使有一千億個 9, 在這個宇宙中還是有比這一千億個 9還大的數字, 那我們的電腦儲存體是有限的, 不可能去紀錄無限的數字, 於是只能退而求其次計算出非常接近的數字, 所以才造成了 0.1 + 0.2 不會真的等於 0.3

這裡帶給我們一個有趣的觀念:
永遠選擇最適當的方法

譬如說 0.1 + 0.2 不會真的等於 0.3 平常對我們來說很重要嗎?
我們有需要到與 0.3 只誤差了 0.0000000000000004 這麼精準的數字嗎?
答案是視情況而定

假如情況是計算金融, 或者是火箭飛行路徑這種一丁點的小誤差可能就會造成巨大的財務損失時當然就是花更多的錢找出誤差小於 0.0000000000000004 直到可以接受的電腦

但我們通常用到小數點三位數就差不多了, 我們不要這麼貪心列出小數點後面這麼多位數就好

所以有時候不用追求到這麼的極致, 永遠視情況選擇最佳方案即可！

發表於 更新於 分類於

前陣子跟同事聊天提到了國外知名CS50課程, 由於自己不是本科系一直有想法要補 computer science 的知識, 這個課程是免費的, 上完課做完全部作業之後可以選擇花錢買證書, 課程每年也都會更新, 提供的資源如下:

系列文章:

此系列文章比較偏向自己做簡單的筆記理解, 因為整個課程一個主題都會講得非常詳細, 建議大家還是去上課並且做功課

認識不同的進位制和 binary

10進位制

生活最平常的是10進位制

一位數由數字最低 0 一直 +1 到最高 9, 此時再 + 1 上去二位數就會 +1 並且剛剛的一位數從 0 算起

所以可以看作為
0008 + 1 = 0009
0009 + 1 = 0010
0010 + 1 = 0011
0011 + 1 = 0012

再來解剖一個擁有四位數並且10進位制的單位9527
=> 9x1000 + 5x100 + 2x10 + 7x1
=> 9527

2進位制

先來理解2進位制的計算方式

一位數由數字最低 0 一直 +1 到最高 1, 此時再 + 1 上去二位數就會 +1 並且剛剛的一位數從 0 算起

所以可以看作為
0000 + 1 = 0001
0001 + 1 = 0010
0010 + 1 = 0011
0011 + 1 = 0100

再來解剖一個擁有四位數並且2進位制的單位1101
=> 1x8 + 1x4 + 0x2 + 1x1
=> 13

為什麼會有2進位制這種東西–binary

我們可以想像最一開始要如何教電腦記住這些數字, 電腦沒有邏輯概念, 只有一格格的儲存體, 而每個儲存體裡面有四個燈泡, 他只能亮或不亮, 所以我們把燈泡沒亮代表 0, 燈泡亮了代表 1

這時候我們在把資訊存到電腦裡面, 跟他說
0000 燈泡一開始全部沒亮的時候代表 0
0001 燈泡先從最右邊開始亮一顆代表 1
0010 再亮過來一顆並且不亮一顆代表 2

以此類推每一個排列組合都儲存著一個資訊
而電腦最後只懂得這種儲存體, 他叫做 binary!!!!

當然後面為了要存更多更龐大的數字所以一個儲存體現在不只放一個燈泡, 可以放到 4個, 8個, 16個甚至到 64個, 所以有了 64bit 這個作業系統單位
可以參考這個文章:
16-bit Vs. 32-bit Vs. 64-bit: What Does it All Mean?

16進位制

有時候我們也需要直接寫 binary, 最常用的就是色卡, 例如白色是#FFFFFF, 這是什麼意思呢?
我們來認識 16進位制

假如我們需要的數字越來越大, 我們不可能寫 64位數代表一個東西, 這時 16進位制就產生了

先來理解16進位制的計算方式

一位數由數字最低 0 一直 +1 到最高 9, 此時再 + 1 上去為英文字母A, 再 + 1 上去為英文字母B, 一直到最高F代表15, 此時再 + 1 上去二位數就會 +1 並且剛剛的一位數從 0 算起

所以可以看作為
0009 + 1 = 000A
000A + 1 = 000B
000B + 1 = 000C
000C + 1 = 000D
000D + 1 = 000E
000E + 1 = 000F
000F + 1 = 0010

最後要記住: 這只是方便我們用短短的字母表示一長串的 binary, 但是電腦永遠都只讀得懂的 binary是一長串 01的東西, 所以 16進位的數字最終還是會被解析成 binary, 只是電腦有許多程式已經自動幫我們做好了

我們電腦看到的圖片, 影片是怎麼產生的呢?

剛剛在上面認識完進位制和 binary之後來理解圖片是如何產生的
首先一個顏色我們分三個要素 Red紅, Green綠, blue藍
而每個顏色我們從最深到最淺分256個等級, 再來利用 16進位制做區分
等級 0 => 00
等級 1 => 01
.
.
等級 105 => 69
等級 106 => 6A
等級 107 => 6B
.
.
等級 254 => FE
等級 255 => FF
所以 0 ~ 255 共有256個等級, 而色卡
#FF(r)FF(g)FF(b)
從左邊兩個位數數過來分別就是Red紅, Green綠, blue藍了

各種顏色就是利用這256個等級的RGB調配出來, 而這一格顏色我們稱之為 pixel(像素)

pixel(像素)越小越多則圖片畫質越好, 所以才會常常在買電視時說規格有幾千萬幾千萬的像素

說完了所有數字的處理, 但文字呢?

像我們打的每一個字元, 其實翻譯到電腦讀得懂的東西終究會是充滿一堆 01 的 binary, 而最一開始只有最簡單的英文字母需求, 所以就有了 ASCII code的產生, 可以參考維基百科:

ASCII 維基百科，自由的百科全書

當然現在 ASCII 已經遠遠無法滿足我們對字符的需求, 現在網站大多都通用到 UTF-8等等的編碼系統

這邊值得一提的是, 很多特殊字串符號–例如目前我們聊天 app 最常用的表情符號 emoji, 其實也是存在一個 binary裡面, 而他在 UTF-8 編碼系統最終被解析到電腦看得懂的 binary裡面大概長這樣:
11110000:10011111:10011000:10000010

binary 出處參考連結:
Unicode Character ‘FACE WITH TEARS OF JOY’ (U+1F602)

用 scratch去嘗試著寫程式

最後沒有寫過程式的可以用 scratch去玩玩看感覺, 這邊就不在多介紹了

小結

電腦永遠只讀得懂 binary, 而是我們利用不斷的抽象化為我們人類看得懂的東西才演變有 pixel, image, vedio, website, 最後產生像 scratch這種產品, 但永遠與電腦真真溝通的東西都會被解析為 binary, 然後電腦才給予回應

補充這些 computer science 真的是蠻有趣的, 不得不說不愧是國外很紅的程式課程, 其實他後面用C語言做了更多的示範和解說, 只不過程式方面的東西我比較懂就沒有想多做什麼筆記了

覺得這種教育真的不會有像台灣產學落差這麼大的斷層, 我真的相信這堂課的學生認真吸收完要入這行真的是輕鬆很多, 不過老實說這門課肯定不好過XD

發表於 分類於 ，

通常好的使用者體驗有許多前端套件製作pop的效果, 例如boostrap的modal, 如果不是很在意這些體驗, 例如在後台只有內部人員使用的情況下其實window.open就很夠用, 而且十分地搭配Rails

製作js

window.open的參數為window.open(url, window name, config), 以這個為基礎做以下js

1
2
3
4
5
6
7
8
9
$(document).ready(() => {
  $("[data-popup-window]").click(() => {
    let windowName = this.getAttribute("data-popup-window") || null;
    let url = this.getAttribute("href") || this.getAttribute("data-url");
    let config = this.getAttribute("data-popup-config") || "";
    window.open(url, windowName, config);
    return false;
  })
})

  1. 利用data-attributes來註冊事件更棒, 可以更避免註冊污染且更有辨識度
  2. url可接受a tag本身的herf, 或者想自己刻一個button也行, 只要給data-attributes即可

製作按鈕

以下範例用a tag介紹, 總之在html要看到該tag有data-popup-window這個data-attributes即會觸發剛剛註冊的事件, 如果是想自己刻一個button的話記得還要給data-popup-url

1
2
3
4
<%= link_to("開啟新視窗", some_path, data: {
  popup_window: "windowOpen",
  popup_config: "height=600,width=1000"
}) %>

寫完看一下render出來的html是否都正確, 雖然這邊是寫popup_window, 但在html上應該會顯示data-popup-window, 就可以用剛剛寫的$(“[data-popup-window]”)註冊到了

controller

再來製作好some_path的router, controller裡的action最後加上render layout: false, 就可以自行寫全新的html, 當然想要載入到自己的layout也行, 只是這樣的需求似乎就不太需要window.open

1
2
3
4
def some_action
  ＠data = 'Hello world!'
  render layout: false
end

view

最後寫這個action對應的view, 因為剛剛render layout: false所以得寫個全新完整的html, 這邊顯示一個簡單的Hello world

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
  <meta charset="UTF-8">
  <%= stylesheet_link_tag "your_css" %>
</head>
<body>
  <%= @data %>
  <%= javascript_include_tag "your_javascript" %>
</body>
</html>

大功告成, 一樣可以拿到controller裡的所有資料, 十分的方便！

window.open還有一些config可以參考JavaScript window.open() 開新視窗以及屬性設定

發表於 更新於 分類於 ， ， ，

環境

  • rails 4.2.9
  • asset_sync 2.0.0

遇到問題

利用asset_sync這個Gem上傳svg圖片, 不知為何這次的svg圖片顯示不出來, 且複製到新頁面自動變成下載(正常是開啟圖片)

快速解決方案

上S3找尋此檔案的content-type, 點選該檔案後在properties > metadata底下找尋, 應該要為image/svg+xml才是正確顯示圖片

修正Asset Sync設定

修正該檔案config/initializers/mime_types.rb, 加上一行程式碼即可:

1
Mime::Type.register "image/svg+xml", :svg

參考文章:
Asset Sync的issue#323

發表於 更新於 分類於 ， ，

上一篇教學文章完成後, 只要改變文章再次 deploy 上去因為 Cloudfront 的 cache 特性並不會立即更新, 甚至連首頁的 index.html 頁面也沒有新的文章(但輸入正確網址其實是有的), 本篇記錄一下以下事情：

  1. 快速清 cache
  2. 找到正確的中文檔案路徑

快速清 cache

其實 AWS Cloudfront 已經把它做得非常簡單, 參考官方文件說明是讓 cache 在 Cloudfront 的檔案立即失效, 首先直接到該 Cloudfront 的 Invalidations tag 介面, 然後點選 Create invalidation

先嘗試著清除首頁, 也就是在 Object paths 內輸入/index.html

成功後就會看到他在跑, 單隻檔案的話大概一分鐘內就會跑完狀態轉為 Completed

這邊可以支援一次刪除多個檔案或選取多個檔案, 其實就跟 .gitignore 一樣的規則啦, 也可以參考官方文件說明的失效路徑

找到正確的檔案路徑

我們無法直接複製有中文的 Object paths, 例如此篇文章的 URL 為:
/2019/08/13/Clean%20AWS%20Cloudfront%20cache(使檔案失效)/
這是一個資料夾目錄所以他真正會去找的檔案為:
/2019/08/13/Clean%20AWS%20Cloudfront%20cache(使檔案失效)/index.html
但這也是錯的, 因為只要有中文字就是非法字元, 所以我們到 S3 Bucket 循著這個路徑一直找到該 index.html 檔案點選進去, 在 Overview 的畫面拉到最底下有個 Object URL, 除了 domain 之外都複製起來, 這個才是該檔案可以給 Invalidations 的合法路徑

注意

路徑一個月只免費一千條(雖然我是覺得一個簡單的 blog 來說超夠用了), 詳情請參考官方文件支付檔案失效的費用

發表於 更新於 分類於 ， ，

終於把部落格架好了, 為了有DNS和Https花了不少時間看AWS文件, 結果朋友一篇文章就搞定了, 還跟AWS的教學完全不一樣XD

我認為Hexo部署到S3好處有幾點：

  1. Hexo輕巧簡單(一鍵產生靜態檔案)
  2. Hexo支持Markdown, 許多完善主題等玩家開發的功能
  3. Hexo以後部署都很簡單
  4. 圖片就都存到S3沒問題
  5. Cloudfront支持https
  6. Cloudfront又穩又快

事前準備

有一個Hexo專案
有一個AWS帳號
有一個DNS

先把Hexo部署到S3

先去S3建立Bucket, Bucket name可以隨便, Region 選 Tokyo比較快, 其他設定都不用動直接創立

點入剛剛創立的bucket, 點選 Properties > Static website hosting

把它設定為Use this bucket to host a website, 再設定預設檔案之後存檔即可

再來點選 Properties > Permissions > Bucket Policy
可以看到 Policy 欄位是需要輸入程式碼的, 先記下Bucket policy editor ARN (我的是 arn:aws:s3:::kurt-blog), 然後點選最下面的 Policy generator 去產生程式碼

輸入以下資訊, 比較注意的是 Amazon Resource Name (ARN) 請輸入剛剛的 ARN/*, 輸入完後點選 Add statement

出現了以下東西直接點選 Generate Policy, 就會跳出程式碼, 全部複製到 剛剛 S3 Policy 欄位儲存即可

最後把 Block all public access 關閉, 仔細看的話他是可以選擇擋住哪些 ACLs 和 Policy, 這邊先不多追加研討, 如果全打開繼連剛剛設定的 Bucket policy 都會擋掉而失效了

Hexo安裝hexo-deployer-aws-s3這個套件，在config.yml底下輸入：

1
2
3
4
5
6
7
8
9
# Deployment
deploy:
  type: s3
  bucket: 剛剛創立的Bucket name
  aws_key: your_aws_key
  aws_secret: your_aws_secret
  region: ap-northeast-1
  headers: { CacheControl: 'max-age=604800, public' }
  delete_removed: true

aws_key, aws_secret請去AWS security_credentials上，點選Access key並且create一個
注意: root key 產生後會給你下載, 請妥善保管不外流, 這是最大權限的 root key, 別人取得後可以在自己的 AWS 做所有事情, 且AWS也不會再給此組 key

最後試著產生靜態檔案並且部署看看

1
$ hexo g -d

如果成功的話 Bucket 裡面會有檔案

Coundfront + SSL 憑證

到AWS Cloudfront點選 Create Distribution > Web 的 Get Started

先拉到下面在ACM建立SSL

輸入*.yourdomain, *以後就可以吃到所有子網域, 然後點選Next

建議點選 E-mail 驗證比較快

注意: 他是會發到自己申請的網域平台的信箱, 而不是此 AWS 帳號的信箱喔!!
像我在 Goddaddy當初是直接利用FB登入所以WHOIS是hotmail, 結果我在 gmail 傻傻的等了一兩天甚至寫信給客服才發現…
成功之後在 AWS ACM應該可以看到剛剛申請的憑證狀態是綠色的 issued 字樣

在回到剛剛建立 Cloudfront 的表單那裡, 點選 Custom SSL Certificate, 點一下輸入欄應該就會彈出剛剛申請好的憑證可以選, 沒有的話請嘗試著刷新頁面和查看 ACM 狀態

然後表單拉到最上方開始輸入幾個地方就好:

  1. Origin Domain Name 彈出視窗點選自己剛剛部署好的 Bucket
  2. Viewer Protocol Policy 選第二個可以把 http 導向 https
  3. Compress Objects Automatically 選 yes 可以做資源壓縮, 就不需要自己對檔案做優化 gzip
  4. Price Class: 可以選亞洲(Asia)比較便宜
  5. Alternate Domain Names(CNAMES): 自己等等要設定的 DNS 例如我是 blog.kurthsu.tw

    接著建立完成就可以看到剛剛創立的 Cloudfront, 他的 Domain name 是 xxxxxxxx.cloundfront.net, 拿著這個地址去自己的 DNS 創造一個 CNAME 然後指向這裡

最後, 點選剛剛創立的 Cloudfront(ID 可以點選), 點選 Origins and Origin Groups 標籤, 忘記一開始有沒有一筆 Origin Domain Name And Path, 有的話就編輯沒有的話就新增

最後到剛剛部署的 S3 bucket 的 endpoint 地址輸入到 Origin Domain Name 就大功告成!

S3 bucket 的 endpoint 在剛剛設定 Static website hosting 的地方

參考文章: AWS S3 + CloudFront SSL 靜態網站架設教學

發表於 更新於 分類於 ，

環境

node.js v8.11.2
git 2.9.2

安裝 hexo-cli

1
$ npm install -g hexo-cli

本地端建立專案

1
2
3
4
5
6
$ mkdir my_blog
$ cd my_blog
$ hexo init
$ yarn install
$ hexo g  # 產生 blog
$ hexo s  # 讓 blog 可以在 local 端檢視

現在應該可以到 localhost:4000 看到部落格

部署到Github上

先到Github上建立專案
再來回本地專案修改檔案最下面deploy的部分

_config.yml
1
2
3
4
deploy:
  type: git
  repository: git@github.com:[ github_username ]/repo_name
  branch: master

再來先安裝 hexo-deployer-git

1
$ yarn add hexo-deployer-git

最後下指令部署上去

1
2
3
4
$ git init
$ git add .
$ git commit -m 'init repo'
$ hexo d -g #產生靜態文件後，自動部署上 Github

檢查一下 Github 上是否有成功推上去

設置 Github 專案為靜態網站

Github很佛心的提供靜態網站的部署, 很適合快速架設 Hexo 可以自動產生產生靜態檔案的網站

1.到 Github 上剛剛的專案
2.點擊 Settings
3.拉到下方 GitHub Pages 標題
4.點擊 Choose a theme
5.隨便選一個主題按右上方 Select theme
6.成功後就會有到剛剛的 GitHub Pages 就會有Your site is published at: xxxx(URL) 的綠色訊息

客製化網址

請去購買一個網域, 這邊不教學怎麼買, 然後我是用godaddy買的網域

例如我購買的網域為 kurthsu.tw
我想要客製化網址為 blog.kurthsu.tw

1.一樣到Github 上剛剛的專案 > Settings > 拉到 GitHub Pages 標題
2.有一個 Custom domain 內填入 blog.kurthsu.tw
3.到剛剛購買網域的 DNS 新增一個 CName > key(名稱)為 blog, value(值)為 [ github_username ].github.io

到剛剛客製化的網址應該就成功架設好嘍！

參考文章：
Hexo網站架設＆筆記
GitHub Pages 也可拿來架設HTML靜態網站，與綁定網域名稱
和Github網站的一些訊息教學

發表於 更新於 分類於

有些內文只想在特定的IE遊覽器開啟時作用, 就可以使用這招

確定safari的開發模擬IE不成功, 建議是真的想辦法借台window系統用IE測試吧XD

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<p class="accent">
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is IE 7<br />
<![endif]-->
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br />
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is not IE 5-9<br />
<!-- <![endif]-->
</p>

注意一下特殊語法

gt: 大於
lte: 小於或等於
最後非IE遊覽器的寫法比較特別

1
2
3
<!--[if !IE]> -->
According to the conditional comment this is not IE 5-9<br />
<!-- <![endif]-->

參考文章:
Conditional comments