# 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.
...
# 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?
...