Javascript Canvas Load Image with Cross Origin
Canvas Usage
html canvas 簡單來說就是個 image,只是它可以使用 Javascript 來 render 你所想要的樣子,所以能操作的東西十分的多,可以拿來做動畫或是遊戲等等的,有其他的套件輔助會比較方便。
1 | // 建立 canvas |
Load Image From Url
用 Javascript Image 物件來建立圖片。
1 | var img = new Image(); |
Sass 絕對置中 水平置中 垂直置中
絕對置中 absolute center
顧名思義就是水平置中加上垂直置中,讓內層的 div
會在外層的 div
的正中間。
Html
1 | <div class='outer'> |
Scss
1 | .outer { |
任意註解掉 top
left
bottom
right
的參數,可以將內層的 div
對齊在外層的九個位置上,即可解決水平置中與垂直置中的問題。
Sass 圓形階層漸層
Circle Gradient
Sass
參數說明:
- shift: 從中心點移動多少位置,如果是
120px
則會從上一層的div
左上角的原點,往右邊且往下個移120px
。 - step: 多少 pixel 換另一個顏色。
- colors: 每一層的顏色,由內到外排序。
1 | $shift: 120px; |
Ruby OptionParser Usage
OptionParser
這個東西在 python 應該是 setup script,而在 ruby 不知道叫什麼 google 了老半天終於被我找到了。用法上很簡單大概看 ruby doc 的範例就會使用了。
1 | require 'optparse' |
Ruby 使用 Enumerable 和 Comparable
Ruby 使用 attr accessor reader writer
Ruby 建立不存在的目錄 與 TempFile 的路徑
Sass 整理一些常用的方法
Ruby on Rails Assets Pipeline 的使用方式
Assets Pipeline
在 config/initializers/assets.rb
中把 assets 加入 precompile 的路徑,不建議使用 *.css *.js
加入所有的東西,因為會將一些有的沒的或是不需要的東西一起編譯進去。
assets pipeline 的主要好處就是把所有的 css 包成一個檔案,漸少 request 的數量,像是 application.css
會載入所有被 require
的檔案,最後只需要傳送一個 css 就行了,同理 javascript 也是如此。
Layout
看不懂在說什麼,直接看例子比較快。
假設現在我們的 layout 裡面有兩個不同的頁面 admin.html.erb 跟 user.html.erb,要分別讓他們使用不同的 css js。
1 | app |
但為了減少請求的數量,我們讓一個 layout 只需要一個 css 和一個 js,在 layout 中的話會像這樣:
1 | # app/views/layouts/admin.html.erb |
如果使用 admin 的 layout 就會載入 admin.css
admin.js
。
如果使用 user 的 layout 就會載入 user.css
user.js
。
Ruby on Rails 在 production 環境下跑 rails 5 專案
Production Mode
資料庫 Migrate
migrate production 環境下的資料庫,至於設定檔就不在這邊多說了。
1 | RAILS_ENV=production rake db:migrate |
產生 Secret Key
在 config/secret.yml
這個檔案裡面需要 production 環境的 secret key。
1 | # config/secret.yml |
用終端機產生 secret key,然後放置環境變數中。
1 | 產生 secret key |