tedshd's DevNote

Develop & Design Note by Ted

web - mobile web on iPhone X first preview

web - mobile web on iPhone X first preview

Intro

On 2017 9/12.

Apple published iPhone X.

And this device has so special screen.

So many web & iOS developer worry about some case like.

(form Apple)

OMG!

It can effect app show on full screen.

So Apple has provide guideline about iPhone X.

iPhone X - Overview - iOS Human Interface Guidelines

It is great change for web & iOS developer.

For web developer, we need this design guideline

Designing Websites for iPhone X | WebKit

Apple provide new CSS function handle this problem.

And it is in W3C working group

Preview iPhone X

But we can preview iPhone X in Xcode.

  1. Update your Xcode to Xcode 9.

  2. Open a new Project and set build iOS simulator as iPhone X.

  1. Xcode > Open Developer Tool > iOS Simulator

  1. we can use Safari test web now.

Result

Some case

Safari App has handle safe area & follow iPhone X design.

So we maybe don't worry about this problem on Safari.

But maybe we need worry about chrome on iOS and other webview in App.

ubuntu - apt-get install php repository 403

ubuntu - apt-get install php repository 403

Error: W: Failed to fetch http://ppa.launchpad.net/ondrej/php5-5.6/ubuntu/dists/trusty/main/binary-amd64/Packages 404 Not Found

// or

Error: W: Failed to fetch http://ppa.launchpad.net/ondrej/php5-5.6/ubuntu/dists/trusty/main/binary-amd64/Packages 403 forbidden

Try this

sudo rm /etc/apt/sources.list.d/ondrej-php5-5_6-trusty.list
sudo add-apt-repository -y ppa:ondrej/php
sudo apt-get -y update

HTML - dns-prefetch, preconnect, prefetch, prerender 研究筆記

HTML - dns-prefetch, preconnect, prefetch, prerender 研究筆記

Intro

這幾個 meta 屬性早在幾年前就有不少外國文章和少部分的國內大神介紹過了

但當時我一直抱持這它還在 W3C 草案, 所以不急著用的心態, 且瀏覽器支持不高, 所以一直無視它...

直到最近不知怎麼地想說來繼續增加我們服務的 head 中的 HTML tag 的數量吧 XD

就來研究一下這些屬性

dns-prefetch

預先解析 DNS, 簡單說一句就是把你的網站會用到的 domain 都塞上去

但我有點質疑實用性就是了, 因為通常會用到的 domain 都幾乎在該頁面用到了, 幾乎功效不大

因為在 head 預讀時有可能還沒解析完, 實際頁面已經需要對該 domain 發 request 了...

結論: 會改善但感覺改善幅度不大, 且你的服務內有用到多個 domain 或 subdomain 才有影響

preconnect

會對設定的 domain 做 DNS 解析與 handshake

不過我覺得最大的好處是預先對該 domain 做 handshake

但就像上述所說大部分的情況是會用到的 domain 幾乎都在頁面上了

結論: 會改善但感覺改善幅度不大, 且你的服務內有用到多個 domain 或 subdomain 才有影響

prefetch

可以設定權重讓你去決定使用者可能會點擊的下一個頁面或其他需要的 resource 的權重比例

在當前頁面載入時瀏覽器會依照權重決定何時去載入該 resource

提前在當前頁面去要該 resource, 所以 server log 會發現在載入該頁面時 prefetch 設定的 resource 也會被拉

等到要用到該 resource 時然後會加快 response 的時間

但跟我期望的有點落差

我期望是先 cache 起來

然後再從 cache 拿就好了, 不用在重拿(測試時 header 的 cache-control 是設定 max-age)

但目前測試還是會重新跟 server 拿...(但我是設定 html 就是了, 不知 CSS JS 是否有差, 因為我們的服務 CSS JS 都會自己 cache 所以根本用不到這機制)

且時間也沒縮短(可能前提也是我們的服務 response 太快?

結論: 實測後無感, 時間都差不多, 且又多了一個 prefetch 的 request access

後端跟我說為啥 access 量增加了...

然後我去看 access log...

變兩倍...

prerender

這很有趣

看定義是說會預先幫你 render 你所指定的頁面

它也表示會額外耗費 CPU 或 GPU 資源

但其實在你換頁時現今的 browser 都有處理一件事

就是當 browser 發現該頁面上的 layout 或 UI 與上一個幾乎一樣時

這部分的 layout 或 UI 是不會進行重繪的動作以增進效能

尤其這在 mobile browser 上更明顯

所以其實我對這 feature 感覺還好

結論: 目前測不出來, 但實用性似乎不高誒, 又要額外耗費資源, 就看取捨

以上是目前測試的結果

但不保證之後也是這樣的結果

畢竟還在草案

所以可能會有變動或翻掉都說不定

Node.js - 簡單起一個 local server 進行測試

Node.js - 簡單起一個 local server 進行測試

緣由

如果要臨時起一個 local 的 server 測試前端可以考慮用 Node 的一個套件 http-server 來做

為啥有這需求呢?

可能的情境如下

  1. 原本的 localhost(127.0.0.1) 被其他服務佔用時, 且無法依附在該 localhost 底下時

  2. 當要測試的前端程式需要是有第三方 API 驗證 domain 時且在上述情境時可以用(大部分的第三方 API 或 oauth 通常允許可以設置 localhost)

PS. 假設無法設定 localhost(得設定一個真實的 domain) 也可設定 host 解決這問題(但 host 是不吃 port 的所以在第一點的情況下這方案是無法成立的

其他建議

其實還有其他我覺得不太好的方式

例如

  1. 在本地的的 Apache or Nginx 設定 RewriteRule or Path or Proxy

  2. 用最方便的 file 方式打開(但如果有用到第三方服務需要 domain 驗證的就 GG 了)

使用方式

這裡只提供簡單的用法

詳細參數用法請參考 NPM 上的文件 http-server - npm

npm install http-server -g

裝在 global 後就可用在任意專案上

之後再切到專案目錄下以下指令

http-server

會看到以下訊息這就表示已經在 local 開了一個 8080 port 的 server

路徑理所當然的就是當前專案目錄的路徑

Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://192.168.2.187:8080
Hit CTRL-C to stop the server

當然也可指定 port 以避免跟其他服務 port 相撞

Refer - NodeJS - Setup a Simple HTTP Server / Local Web Server

AMP - Accelerated Mobile Pages key point

Intro

Provide some key point & something we need notice

1. meta

In normal page

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

In AMP page

<link rel="canonical" href="https://www.example.com/url/to/full/document.html">

2. Default style(Handle render)

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

Format

<style amp-boilerplate>
body {
    -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
    -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
    -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
    animation: -amp-start 8s steps(1, end) 0s 1 normal both
}

@-webkit-keyframes -amp-start {
    from {
        visibility: hidden
    }
    to {
        visibility: visible
    }
}

@-moz-keyframes -amp-start {
    from {
        visibility: hidden
    }
    to {
        visibility: visible
    }
}

@-ms-keyframes -amp-start {
    from {
        visibility: hidden
    }
    to {
        visibility: visible
    }
}

@-o-keyframes -amp-start {
    from {
        visibility: hidden
    }
    to {
        visibility: visible
    }
}

@keyframes -amp-start {
    from {
        visibility: hidden
    }
    to {
        visibility: visible
    }
}
</style>
<noscript>
    <style amp-boilerplate>
    body {
        -webkit-animation: none;
        -moz-animation: none;
        -ms-animation: none;
        animation: none
    }
    </style>
</noscript>

3. Use <style amp-custom> handle style

  • only one tag in one page

  • Size limit 50k

4. GA use <amp-analytics> bind by selector

5. AJAX CORS

6. form submit use amp-form

7. absolute link(Must include host name)

8. Validate AMP page