# 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 研究筆記 ## Intro 這幾個 meta 屬性早在幾年前就有不少外國文章和少部分的國內大神介紹過了
但當時我一直抱持這它還在 W3C 草案, 所以不急著用的心態, 且瀏覽器支持不高, 所以一直無視它…
直到最近不知怎麼地想說來繼續增加我們服務的 head 中的 HTML tag 的數量吧 XD
就來研究一下這些屬性
## dns-prefetch 預先解析 DNS, 簡單說一句就是把你的網站會用到的 domain 都塞上去
但我有點質疑實用性就是了, 因為通常會用到的 domain 都幾乎在該頁面用到了, 幾乎功效不大
因為在 head 預讀時有可能還沒解析完, 實際頁面已經需要對該 domain 發 request 了…
結論: 會改善但感覺改善幅度不大, 且你的服務內有用到多個 domain 或 subdomain 才有影響
## preconnect 會對設定的 domain 做 DNS 解析與 handshake
不過我覺得最大的好處是預先對該 domain 做 handshake
但就像上述所說大部分的情況是會用到的 domain 幾乎都在頁面上了
...
# Node.js - 簡單起一個 local server 進行測試 # 緣由 如果要臨時起一個 local 的 server 測試前端可以考慮用 Node 的一個套件 http-server 來做
為啥有這需求呢?
可能的情境如下
原本的 localhost(127.0.0.1) 被其他服務佔用時, 且無法依附在該 localhost 底下時
當要測試的前端程式需要是有第三方 API 驗證 domain 時且在上述情境時可以用(大部分的第三方 API 或 oauth 通常允許可以設置 localhost)
PS. 假設無法設定 localhost(得設定一個真實的 domain) 也可設定 host 解決這問題(但 host 是不吃 port 的所以在第一點的情況下這方案是無法成立的
# 其他建議 其實還有其他我覺得不太好的方式
例如
在本地的的 Apache or Nginx 設定 RewriteRule or Path or Proxy
用最方便的 file 方式打開(但如果有用到第三方服務需要 domain 驗證的就 GG 了)
# 使用方式 這裡只提供簡單的用法
...
# 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.
...
# 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
...
# CSS - content property use special char If you want use special char like © in CSS content property
You must use ASCII and show on HEX
And it is ©
So CSS need
div;before { content: "\00A9"; } Entity Conversion Calculator
This page can help us trans to hex
Refer - CSS Content | CSS-Tricks
...
# JavaScript - browser zoom detect 強者我朋友身為一個設計師問我一個很奇耙的需求
就是可不可以知道瀏覽器的縮放狀態
因為她的 BOSS 要求縮放不破版, 所以她希望設計在縮放狀態時的 layout 讓工程師套版
於是來問我說是否有辦法知道瀏覽器的縮放狀態
先說一下其實要縮放不破版只要設計彈性的 layout 例如使用 grid 的設計基本上都不會破版, 以我的經驗縮放破版通常是一些特殊的 layout 或用一些奇特的 CSS 的寫法
但正妹設計師求助
魯蛇工程師只好默默的來看看有啥方法
在新的 JavaScript api 有個 devicePixelRatio 可以取得目前 device 的像素比
一般是用來判斷是否是 high resolution 的螢幕
但是當 browser 縮放時其實這個值也會改變(尚未在 mobile device 試驗
所以可以用這特性來做處理
但這有問題就是當本身螢幕就是 high resolution 得螢幕像是 2K or 4K or MBPR 的螢幕
它們的 window.devicePixelRatio 就不會是 1
所以縮放後也不好知道縮放的比例
所以非完美解…
且目前 browser 支援度不佳
下面是範例
var browserZoomLevel = Math.
...
# Google search develop for SEO - research log 對於一個網站上線要讓 Google 容易搜尋到需要做很多事
多到爆炸,而且每年都有新東西出來, 實在看得很煩…
感覺網路都被 Google 控制了…
Google 甚至出了一個develop guide
如要最新的消息與規範可以到 Introduction | Search | Google Developers
因為以下寫的東西可能過幾年後又有新的東西要加了
最後會再補充一些 social media 的 meta tag…
注意
這只是列出提要, 具體細節可以看所附的想關參考連結或拿關鍵字餵 Google
不然這文章寫一個禮拜都還不一定寫得完
但主要的經驗會在文章中提到
## 網站上線要給 Google crawler 爬需要注意的東西 ### metadata 以下兩種方式
建立 mockuop data
建立 Google search console(webmaster) or Google My Business(這通常是為了公司品牌或店家使用)
身為一個攻城獅
建立 mockup data 是基本(後續會介紹)
Google search console 可以讓你了解關於你的網站在 Google 上的一些情況, 像是被 search 多少次、曝光多少次或被 Google 建立了多少 index 等等, 還有很多東西, 也都會在加入許多新的功能, 所以最好定期去看一下
...
# AMP - develop log ## Intro 這是針對對 AMP 有基本概念的筆記, 基本概念請去 amp project 看就好
知道 AMP 是啥的再來看這文章會較有用
– 我是分隔線 —
會被 cache 在 Google domain 下
更新分主動 / 被動
主動(跟 Google 說該頁面有更新)
被動(當有任何人開啟該 AMP 頁面, Google 會在背後重新跟該頁面 AMP url 重新拉來 cache,但 15s 內不重新拉)
## 限制 廣告問題(需第三方有支援的廣告商, amp-ad 中有支援的)
AJAX cross domain 問題(需 server side allow)
Cookie 讀不到
user login 問題(需使用 AMP 的元件)
App Indexing on Google Search & AMP 衝突(Google 正在解這問題)
...
# Firebase - Firebase Cloud Message(FCM) Research Log This article is focus on web version
## Intro You can easy to use web notification push notification to your web site.
Set Up a JavaScript Firebase Cloud Messaging Client App
## Different with use pure web notification Using the Notifications API
Browser support FCM - Chrome(desktop & Android) & Firefox(desktop & Android) pure notification api - Chrome(desktop & Android) & Firefox(desktop & Android) & Opera(desktop) & Safari(desktop) Android need service worker Service Worker FCM - require pure notification api - option pure web notification only a notification object, you need handle connection push message from server.
...