# 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.
...
# JavaScript - get text from dom object not include wrap html tag in child ## Intro ### Case 1 <div id="case_1"> Hi, This is a <em>Apple</em> </div> I want to get Hi, This is a ### Case 2 <div id="case_2"> <p>I have a pen.</p>PPAP </div> I want to get PPAP
### Case 3 <div id="case_3"> Apple<span> and pen</span> and pineapple pen </div> I want to get Apple and and pineapple pen
...
# Content Security Policy - 論一般網站放置的可行性 ## 前言 Content Security Policy 出來也有一段時間了
他的目的是為了從 header 下手去抵禦一些攻擊, 基本上遵循它的rule 就可以避掉一些 XSS 攻擊
但有時加入這功能會需要變動程式的架構或者某些性質的服務是根本就是設定到可以動的話安全係數會降低許多
這裏會稍微舉一些例子來說明
關於 Content Security Policy 以下有一些連結可以幫助瞭解這個 header
Refer - An Introduction to Content Security Policy
Refer - Content Security Policy 入门教程
Refer - Content-Security-Policy - HTTP Headers 的資安議題 (2)
Refer - Content Security Policy Reference
目前有只用的知名服務有 github 和 dropbox
## 簡介 簡單說就是會限制頁面上出現的東西
domain inline style inline script iframe, frame object https 可以用 html <meta> 或用 http header 的方式使用, 所以純靜態網頁也是可以用的
...
# JavaScript - touch and click behavior in mobile browser On mobile web
If you click it
And mobile browser can fire touchstart and click
Fire touchstart event and then fire click event has the difference in time.
the step is touchstart -> click
So if you has a popup and you use touchstart event bind close behavior.
You can find it fire click event.
Then some bug happened.
...
# Sublime Text - How to modify font size in sidebar In sublime text 3
If you want modify font size in sidebar
Follow step
Preferences -> Browse Packages Open User directory Create a file File named your theme name How to get it Preferences -> Settings - User -> theme Or default theme Default.sublime-theme Add content [ { "class": "sidebar_label", "font.size": 18 }, ] ## other in Mac the path is
...
# gulp - One problem i found when i use CSS minify with some CSS library When i use pure.
And i use gulp as my front-end build tool.
I used cssmin as my CSS minify tool.
By default it can extreme compress CSS file.
The one problem happen!
display not match
Because use CSS minify can remove inherited CSS property.
So in webkit browser doesn’t has display: -webkit-flex; and layout will be an error.
...
# Linux - install gogole chrome in debian Linux wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add - sudo sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' sudo apt-get update sudo apt-get install google-chrome-stable refer - How to install Chrome browser properly via command line?
...
# webdriver.io - 前端測試入門筆記… 前端測試工具很多種
我這裡的需求是要做自動化測試
不知為何就選了這套 webdriver.io
可能就只是單純名字很炫(誤
當然一開始要先要有 Selenium
但為何 Selenium 跟我以前的印象有差別了…
我發現它的 firefox add-on 不能把錄製的動作輸出成 code 了, 是我的錯覺嗎?還是改方式了
但我想說就算了, 直接用寫的也罷
webdriver.io 只是因為是在我看過的關於測試文章中最後有印象的東西所以就去找它了(這是事實…
也還好我的記憶沒錯, 看了介紹和文件覺得 webdriver.io 有符合我的需求且又是用 Node.js 來寫, 所以對我較友善
先記錄一下使用流程
## Base tool Java sudo apt-get update java -version sudo apt-get install default-jre sudo apt-get install default-jdk Node.js Install
## On Local Get Started
突然發現文件寫得很詳細了…
雖然在做設定那有些選項不同但也影響不大
但想玩進階的方式可參考以下文章
設定 Selenium 參數可參考
基本上以下是我建的順序
### 1 先建 package.json { "name": "webdriver", "description": "automation test", "devDependencies": { } } ### 2 下載 Selenium server 之後有新版請再去確認版本
...
# Let’s Encrypt - Has a certificate problem in Android Chrome If you use Let’s Encrypt as SSL certificate
Then setting this in Nginx
ssl_certificate /etc/letsencrypt/live/<domain>/cert.pem; You can find it maybe has problem in Android Chrome
Now you can modify this
ssl_certificate /etc/letsencrypt/live/<domain>/fullchain.pem; ## Test your SSL SSL Server Test
Refer - Let’s encrypt certificate not working for Andriod’s Google Chrome
...