當網頁中無法載入圖片(通常是圖片連結失效或錯誤)時，瀏覽器預設會幫我們顯示一個小小的圖示告知我們連結失效了。

這些預設圖片每一個瀏覽器都不太一樣，通常也不太好看。這篇文章主要介紹的內容就是我們可以透過 css 來美化這個預設行為。

基於 token 的驗證機制

在今天，我們應該常常能看到大量使用 token 來處理驗證的服務，由於大部分的網站服務開始大量使用 API，於是 token 就成了處理驗證使用者最好的方式。
我們的應用程式選擇使用 token 驗證機制有些非常重要的原因，最主要是因為:

• 對於伺服器來說它具備 stateless(無狀態), scalable(擴展性)
• 移動裝置也能一併使用
• 可將驗證結果導向其他應用程式
• 更安全

眾所皆知 HTML 錨點(anchor link)透過給定標籤 id 屬性跳到頁面上特定位置的功能。不過這個效果感覺上就像是閃一下就切換到該位置。
為了使用體驗上的感覺有時候網站會設計一種平滑捲動到該位置的效果。

在過去這樣的效果通常會透過 jQuery 來達成，但有時候一些簡單的頁面為了達成這個功能就需要載入一堆函式庫或框架這未免有點矯枉過正。
最新的 Javascript 提供了一個更有效率，加強原生 window.scrollTo 的方式。

本文將對 webpack 周邊的 middleware 與 plugin 套件等作些介紹，若您對於 webpack 還不了解可以參考這篇彙整的翻譯

在 Javascript 我們曾經只有一種方式來處理跟特定時間有關的循環事件: setInterval()。簡單說就是當你需要重複某些任務時(依據時間)。
您就會用到這個方法。對於動畫來說需要每秒 60 個 frames 人類才會覺得是順暢平滑的，因此我們可能會寫出像下面這樣的程式碼

當我們要建置複雜的網站時 Grids 是非常重要的。其重要性我們可以從大量的 CSS 框架中窺知ㄧ二，因為幾乎所有的框架都有提供網格(Grids)系統來加速開發。
隨著 CSS Grid 規範的出現，將來我們將不需要額外的樣式就可以使用網格。另外的好處就是我們將不需要再依賴 inline 和 float 來完成那些佈局需求
在這篇文章我們將要介紹一些網格基本的用法，然後透過實作一個基本的部落格佈局來理解其用法。

常用指令

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

# 安裝 rhc
$ gem install rhc
$ rhc setup

<!--more-->

# 建立 app
$ rhc app create [app name] ruby-2.0 postgresql-9.2

# 設定好 database.yml

# 顯示 app 相關資訊
$ rhc show app [app name]

# DB migration
$ rhc ssh [app name] # SSH 至 app 環境
$ cd app-root/repo
$ bundle exec rake db:create RAIS_ENV=production
$ bundle exec rake db:migrate RAILS_ENV=production

# 修改 Server
$ rhc env set OPENSHIFT_RUBY_SERVER=puma -a [app name]

# 重啟
$ rhc app restart [app name]

# 查看錯誤 Logs
$ rhc tail [app name]

# 查詢 PostgreSQL
$ rhc port-forward -a [app name]
# 接著再用介面上的帳密登入

1
2
3
4
5
6
7
8
9

production:
  adapter: postgresql
  encoding: unicode
  pool: 5
  database: < %=ENV['OPENSHIFT_APPNAME']%>
  host: < %=ENV['$OPENSHIFT_POSTGRESQL_DB_HOST']%>
  port: < %=ENV['$OPENSHIFT_POSTGRESQL_DB_PORT']%>
  username: < %=ENV['OPENSHIFT_POSTGRESQL_DB_USERNAME']%>
  password: < %=ENV['OPENSHIFT_POSTGRESQL_DB_PASSWORD']%>

資源

• 完整教學
• 解決 rails 4.2 無法啟動 bug
• database.yml 範例

首先需要先安裝 Docker Toolbox，工具包包含下面幾種工具

如何自己簽一張 SSL 憑證用於測試

概覽

下面簡易介紹了 SSL 是如何實作以及在整個流程中各個憑證所扮演的角色。

一般網頁傳輸是透過非加密的方式，意思是每一個人只要透過工具都可以存取，並且窺視所有的傳輸內容。
可以見得的，這可能造成一些問題。尤其是在安全和隱私方面，例如信用卡與銀行交易的資訊。
安全套接層協議(Secure Socket Layer)也就是 SSL 是用來加密這些伺服器與客戶端傳輸的資料。
簡單說就是保證兩個應用程式之間通訊的機密和完整性，也可驗證對方的身份。