tedshd's DevNote

Develop & Design Note by Ted

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

JavaScript - web call native app

web call native app

緣由

因為一些原因要 mobile web 可以 call native 的一些東西來分享當前頁面或幹啥事(其實最常用的是聯絡資訊點了直接 call native app)

眾所皆知 HTML5 預設有

  • mailto:
  • tel:
  • sms:

但每個都要個別寫入好麻煩
且 sms 還有 iOS 和 Android 格式不一樣的問題
於是失心瘋的寫了一個 object 整合一下

有空再寫 PHP 版
(但是需求好像偏向會從 PHP 出誒)

我前端工程師當然先寫 js 版
突然覺得 isomorphic 好好喔...

GitHub

webClientProtocol

題外話

關於 web share content 這件事
Google 有正在搞一個 web share api
可以針對你想分享的東西去做到複製到剪貼簿或把內容分享給可以使用的 mobile native app
但是還在測試狀態...
相關文章在底下

Introducing the Web Share API

題外話中的題外話

在早期會是用 Web Intents 去開 native app

但很麻煩, 且預設是不支持 iOS 的(因為這是 Android 上定義的

然後 iOS 早期要處理也是 native app 自己定義 protocol, 然後 web 自己用 native app 定義好的 protocol 去開

且要個別處理 failback 的行為

然後, 很麻煩的是不同的 native app 的 intent 寫法是不一樣的(因為要 call 的 app 的 package 都不一樣

iOS 亦是如此, 因為定義的 protocol 不一樣(廢話

一般早期是用來當 app link 用(當然現在很少這樣用了, 因為 app link 已經發展成熟了, 這又是另一件事了

順帶一提 iOS 目前最新的是 universal link

不過上述算是 app link 發展簡史, 沒有寫得很詳細

當然 Google 也發現 intent 不夠理想所以想要發展 share api 來達到真正的需求

share api 期望能達到像是 Android intent 所觸發的 share 的機制

當然就目前的情況 iOS 的支援應該還是遙遙無期

不過如果 iOS 的 Chrome 內部有個 interface 轉接去 call App Extension 也許就可以了(我的猜測

結語

目前做的這個功能是指支持 HTML5 原生的

如果是要像是要 call Line 或 twitter 或 fb 等等的請自己處理

有看到一個專案在記錄常用的 native app, 但我是沒試過就是了

Native app social interactions on mobile and tablet web