# JavaScript - 計算網頁元件的曝光 因為某些需求需要精確計算某些網頁上的 UI 元件的曝光
沒錯
就是要像廣告計算 impression 一樣
之前只要確認有該元件的 request 就好了
但是為了精確追求計算曝光, 所以必須做到像 Google Ad 一樣
要到該網頁元件讓使用者看到後才能計算曝光
聽起來這要求不太容易
但是實作下去其實發現還好誒!!
## 概念 DOM 元件進入可視範圍觸發 impression
所以需要能夠釐清一些問題
如何確認可視範圍?
如何確認要記錄 impression 的 DOM 元件在可視範圍?
如何在進入可視範圍時觸發?
看似困難
但是如果熟悉 JavaScript Window 物件和 DOM 物件的話就會發現很好解
## 實作 ### 如何確認可視範圍? window.document.documentElement.clientHeight window.document.documentElement.clientWidth 完美解決
### 如何確認要記錄 impression 的 DOM 元件在可視範圍? <DOM Object>.getBoundingClientRect(); 完美解決
但是要取到對應可是範圍的位置建議使用(top, left), x y IE 和 Edge 不支援
還有一點要注意就是該 DOM 要先長在 browser 上面且不是 display: none 的狀態才能拿到值
...
# Mac - Get file user name & user id ## Get file owner name stat -f '%Su' <file or folder name> ## Get user id ### show user id // or id <user name> ### get uid id -u
// or
id -u <user name> ## get file owner uid stat -f ‘%Su’ <file or folder name> | xargs id -u
stat -f '%u' <file or folder name> Refer - 将Linux命令的结果作为下一个命令的参数
...
# LINE - 2018 1111 分享得 LINE point 研究筆記與分析報告 MGM(member get member) 的模式一直以來都會是一個有規則可循且有時難度也不高的活動模式(因為難度高就不好擴散
這次以 LINE 2018 年 1111 分享連結的 LINE point 為例子當作我們這次的研究對象
大致規則
分享該訊息給朋友
會是如下圖所示
活動辦法引言
活動辦法： ● 好友點選您分享的連結進入LINE購物首頁，若成功您將會收到『LINE購物官方帳號』通知抽獎囉。分享者需透過活動頁分享網址，邀請朋友點入LINE購物並完成登入，才能獲得點數。 ● 轉發他人的分享網址，點數將會計算給原分享者。 ● 請先加入『LINE購物官方帳號』好友以及解除封鎖可獲得參與活動資格與收到LINE 購物抽獎/得獎通知。 ● 分享給同一名好友，最高可獲得1次抽獎機會，若要再獲得抽獎機會請分享給其他好友。 ● 各平台折扣碼「LINE11」，使用期間：2018/11/10 - 2018/11/11折抵金額與使用方式請見各平台規範。活動詳請請見：https://lin.ee/5JVllUj/rcf ● 此分享活動時間為2018/11/5 11:00至2018/11/9 23:59(台灣時間)。收到抽獎券之用戶，須於2018/11/12 23:59(台灣時間)前點擊抽獎網址，逾期未完成抽獎者視同放棄並自動取消資格。 ● 本次活動限LINE帳號已綁定台灣手機門號用戶參加
那上述規則就令人產生一些聯想
那大家互相分享再去點開連結就可以得到點數了呢!
## 研究 本持著攻城獅的研究精神
就發現有人分享了一份 Google 表單
上面記錄了許多人填出來的分享 URL(當然也有來亂的XD)
那麼接下來就可以開始一件事, 那就是點連結拉
但是在 Line 開這表單再點連結好累喔
那這時候又有個思路就是可以讓這過程自動化阿
但是要在模擬器上登入 LINE 很麻煩(因為 LINE 只能同時登入一台手機)
那換個思路
...
# Mac - shell script check OS Use shell script check Linux or Mac
#!/usr/bin/env bash if [ `uname` == 'Linux' ]; then echo 'Linux' else echo 'Mac' fi
...
# Mac - stat get owner name stat -f ‘%Su’
...
# Mac - Use readlink in Mac OS X install coreutils brew install coreutils test greadlink greadlink -f <file name> alias command line alias readlink=greadlink refer - How can I get the behavior of GNU’s readlink -f on a Mac?;
...
登入 Payapl account
接下來如下圖步驟即可
這樣就有
API 用戶名稱 API 密碼 API 電子簽章
這樣即可使用在一些第三方串接 Paypal 的服務了
Refer - How to get PayPal API username, password and signature information?
...
# JavaScript - 使用與處理正確的時間 這是個很有趣的議題
舉凡使用倒數計時器或限時開賣等
只要在網頁上牽扯到時間的動態呈現都需要處理這問題
會列舉了幾個情況與介紹一些跟時間相關的的概念與 API
Refer - 深入理解定时器系列第一篇——理解setTimeout和setInterval
var options = { timeZone: 'Europe/London', year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', }; formatter = new Intl.DateTimeFormat([], options); formatter.format(new Date()); Refer - Get time of specific timezone [duplicate] Refer - Getting To Know The JavaScript Internationalization API
Refer - Javascript 的 EventLoop
...
# Web Develop on mobile web & WebView 因為某些原因必須把這些東西紀錄一下
其實實在太多東西要寫但實在是太忙且有點沒動力寫文章…
會分成兩個 mobile OS 與 mobile browser 加上 WebView 共 4 部分
Android
mobile web WebView iOS
mobile web WebView ## Android 需準備的東西
電腦版的 chrome browser Android 手機(需要有 Android Chrome browser) 在 2018 年的當下這裡不想再提非 chrome browser 的開發, 因為很難 debug
以下就簡單說明一下
### 1. 首先得把 Android 手機的開發者模式打開 設定 -> 關於手機 -> 軟體版本
找到軟體版本的選項就一直點, 直到點出提示您現在已成為開發人員, 這樣就可以了
進去開發人員選項 把 USB 偵錯模式 打開
### 2. 連接手機到電腦 ### 3.
...
# Web - viewport 是啥?你真的了解移動裝置的畫面大小處理嗎?來講古了 ## 歷史 早期 viewport 是可以設定跟 device 的 dpi 一樣的(target-densitydpi=device-dpi), 但這時就有個問題就是當 viewport 的這個設定沒設定時, browser 上顯示的寬高就會不一樣了, 再者早期 mobile device 剛邁入 high resolution 的顯示就會顯得亂七八糟, Apple 是最早意識到這點, 所以它也是最早處理這個問題的, 就是直接在 OS 與 browser 上處理分辨率的問題, 不直接採用實際上螢幕 high resolution 的大小.
這也是為啥 Macbook pro 明明是 2K 螢幕但是 browser 的 px 只有 1280x720 左右, 那這又延伸另一個問題把分辨率變大就照成圖片等非向量顯示的圖片會失真, 所以就是為啥有 media query(device-pixel-ratio) or (min-resolution) 抑或 img srcset 等屬性的出現, 就是為了處理 high resolution 時圖片變糊的問題.
在 2018 年的現在 mobile device 的 browser 解析度都不會是真實 device 的解析度了, 已經在 OS 抑或 browser 處理掉了
...