Make a Landing Page

RWD的需求

1. 雙欄在營幕不夠大的情況要作單欄顯示，或調整成適合在螢幕不夠大的顯示方式

2. 判斷使用者裝置讀取不同大小的image來提高顯示效率與節省頻寬

RWD

• Bootstrap col 的應用以及 col-push, col-pull

• meta width=device-width 的意義 像我紅米手機的螢幕寬度(device-width)是340px

• 調整字的間距不讓句子在小螢幕上看得過擠

• 寬度使用百分比讓句子隨著螢幕寬度做調整，而不會被裁掉

• 因應不同螢幕有些畫面要隱藏或顯示

• 在寬螢幕顯示是 -> 但當螢幕不夠寬要使用下箭頭

SASS

• Mixin reuse 很多重複的樣式 像circle 的css

• Media query md > 970px, sm > 750px 。

e.g 當我設定 col-sm-8 時 當寬度> 970px 時 此設定會存在

media-query 設定 max-width : 970px 時 代表在971px以上的都不會套用media query 中所記載的樣式

Enhance page Load time

http://usersnap.com/blog/how-to-improve-website-loading-times/

SSL Certificate apply

• 根據官方與伺服器配置做產生的動作

• 送出CSR 給 Namaecheap,

• 按照官方的要求做啟用(SSL Activation)，啟用的方式有三種 (DCV Method) (HTTP, Email, DMS method)

• Nginx

• 阻止使用IP存取網站，在其他server區塊 上面增加如下設定。然後其他server 的設定檔的listen 請勿加入default_server，不然後面的區塊會覆寫如下的設定

• ``` server { listen 443; servername return 404; } //or use ‘deny all’ after ‘allow xx.xx.xx.xx’ affress

```

• • server {

listen 443;

server_name _

return 404;

• • }

  • or use ‘deny all’ after ‘allow xx.xx.xx.xx’ affress

• Root Directive

• https://www.ruby-forum.com/topic/209562

• Allow CloudFlare requst to Nginx

• • https://erichelgeson.github.io/blog/2014/01/18/whitelisting-cloudflare-in-nginx/

CloudFlare

• Cache Busting

https://support.cloudflare.com/hc/en-us/articles/200169246-How-do-I-purge-my-cachCache Busting

• CDN 的cache 加速client 存取，並避免server performance loading

• Client Cache 回傳304導致新的檔案無法更新，使用不同檔名避免此問題。

• http://www.cnblogs.com/lyzg/p/5125934.html

• http://div.io/topic/1782

• MixPanel

• MAC Port Blocking problem

#modify rules

sudo nano /etc/pf.conf

#add line

# Open port 8080 for TCP on all interfaces pass in proto tcp from any to any port 8080

#reboot mac