tedshd's DevNote

Develop & Design Note by Ted

web - favicon 使用筆記

favicon 使用筆記

隨著 web 發展越來越久

所需要準備的 favicon 等 icon 需要用到越來越多地方了

且這也是一個服務重要的依據

有設定 favicon 就是能夠給人對這個服務有個既定的印象

能夠讓人快速的記憶這個服務

所以不可忽視它在 web 上的使用

這裡會持續記錄需要設定的地方與格式

Wiki Favicon

Suggest

Format PNG

<link rel="shortcut icon" href="https://example.com/myicon.ico">

Safari pin

SVG, 16x16 viewbox

Creating Pinned Tab Icons

iOS add to home screen

Configuring Web Applications

show in Google search result

Update in 2019

會在 mobile browser 加強顯示

Define a favicon to show in search results

PWA

這是 PWA 會在行動裝置顯示的 icon

The Web App Manifest

更新

有網友補充提供服務

https://www.facebook.com/groups/f2e.tw/permalink/2253070994730253/

Favicon checker

Favic-o-Matic

Vue - 使用 Vue cli 3 開發 SSR 紀錄

Vue - 使用 Vue cli 3 開發 SSR 紀錄

Intro

因為工作需求需要一個能夠 SSR 的工具

由於是接手別的團隊回來的程式也剛好要做大動作的重構(打掉重練

之前的團隊是使用 koot.js

個人花了點時間看了一下還不錯, 但是

  1. 對 react 不太熟

  2. 居然還是用 less, 我在 2017 就已經捨棄使用預處理器來處理樣式了, 擁抱 CSS L4

  3. 還是比較喜歡 Vue 的架構

所以就心痛的來研究一下 Vue cli 處理 SSR 的方式

官方有文件

Vue.js 服务器端渲染指南

看完以後

恩...

好麻煩啊

使用工具和 framework 的目的就是要無腦使用啊

還要寫一大堆 code 幹嘛

這邊先列出自己的需求

  1. SSR 而且需要是 Universal 的處理方式

  2. 在樣式能夠使用 postcss 處理 CSS L4

  3. 能夠處理 Metadata

  4. 能夠把環境需求用設定處理掉或根本不用設定就處理掉

  5. 因為工作需求需要多語系..

  6. 最好是要有 PWA

所以就開始了痛苦的尋找之旅

Result

使用 vue cli

之前從第一版就開始在使用了, 所以算是比較熟的, 且學習成本低

跟 react 比我比較喜歡 vue 的寫法

且到了第三版的現在已經越來越成熟且方便設定

還有自己的生態圈

插件可以方便找查與安裝

第 6 點滿足

使用 vue-cli-plugin-ssr

這個用 vue ui 在找 plugin 時有不少人用

預設不用設定

在開發時就可以直接把 vue 轉成 SSR 輸出來看很方便(寫一套就自動幫你處理好 SSR & CSR)

第 1 點滿足

處理非同步資料 client & server side

Data Pre-Fetching and State

主要就是先處理 API 然後 response 回來的資料放到 store 裡

這邊可以結合 axios 去使用

處理 Meta data

這比較麻煩

除了要 SSR 以外必須也需要能在 CSR 一起處理掉

有一個套件蠻多人推的是 vue meta

但是在搭配上述的 vue-cli-plugin-ssr 時, vue meta 的 SSR 設定是不 work 的

有人開了 issue 但是被擺很久了...

其實很多套件都可以處理 SSR 和 CSR 的 meta tag

但是在跟 vue-cli-plugin-ssr 搭配時都遇到個問題就是當 meta 資訊是從後端動態來的話就不行了

因為從 api 來的話要在 SSR 處理必須要在 vue component 中的 serverPrefetch 先處理 async 回來的動作

然後把 API 拉回來的資料放到 store 中處理才能讓 SSR 處理時有資料

但是 meta tag 的資訊很不好處理

必須要遵循以下文件中的方式

Head Management

但是試過用 mixin 沒法處理 meta 上的 case...

如果把 meta 的資料獨立 API 處理也許有機會

最後只好自己寫個 function 做 hack 的處理

computed 做了一個 init 的 function 來處理建立 metadata

但是目前這 function 處理 CSR 的部分還不算太 ok, 因為自己目前都是動態砍掉 HTML DOM 在重建 DOM 會有些微效能上的問題

樣式處理

Vue 採用 CSS module 的設計

Vue cli 使用了 CSS Loader

但是個人其實不是很喜歡使用 CSS module 的方法

因為它是採用動態處理 style 的方式

在某些 case 底下會造成 UI 大量重繪

這在畫面上體驗很差

除非自己做一個 loading 處理掉這問題

再加上如果要使用 CSS L4 feature 得有些調整

最後使用 postcss-import

就可以維持用 CSS loader 且在使用 import 可以適當的使用 CSS L4 而且是可以做簡單的模組化

使用 vue-cli-plugin-i18n

切換語系

语言环境变更

這部分還沒試驗

device detect

這套健在 vue-cli-plugin-ssr 底下無痛使用可以在 SSR 的情況就處理依照 UA 判斷 device

mobile-device-detect

目前情況

這些解決方案目前還沒用在線上環境

主要因為發現接回來的東西根本沒必要那麼的費工

加上合適的新專案喊停了

所以目前還是在研究階段

有興趣這邊有研究一下我目前正在研究用的 prototype

ssr

Mac - php redis install

Mac - php redis install

Mac Env

Mac OSX 10.14.5

Step

git clone https://www.github.com/phpredis/phpredis.git

cd phpredis

phpize && ./configure && make && sudo make install

test

php -r "if (new Redis() == true){ echo \"\r\n OK \r\n\"; }"

Troubleshooting

phpize

1.

$ phpize
grep: /usr/include/php/main/php.h: No such file or directory
grep: /usr/include/php/Zend/zend_modules.h: No such file or directory
grep: /usr/include/php/Zend/zend_extensions.h: No such file or directory
Configuring for:
PHP Api Version:        
Zend Module Api No:     
Zend Extension Api No:

Solution

cd /Library/Developer/CommandLineTools/Packages/

open macOS_SDK_headers_for_macOS_10.14.pkg

2.

$ phpize
Cannot find autoconf. Please check your autoconf installation and the $PHP_AUTOCONF environment variable. Then, rerun this script.

Solution

brew install autoconf

Refer - install-phpredis-mac-osx

Refer - macOS 10.14软件编译时找不到头文件的解决方法

Refer - macOS 中使用 phpize 动态添加 PHP 扩展的错误解决方法

Golang - gvm Golang version manger

gvm

Intro

gvm

Golang version manger

Usage

  1. Install

    bash < <(curl -s -S -L https://raw.githubusercontent.com/moovweb/gvm/master/binscripts/gvm-installer)
    
  2. Add to .bashrc or .zshrc

    # added gvm command to shell
    
    source "$HOME/.gvm/scripts/gvm"
    # directory path for GO
    
    export GOPATH=$HOME/gopath
    export GOROOT=$HOME/go
    export PATH=$PATH:$GOROOT/bin
    
  3. Install go

    gvm install go1.4 -B
    gvm use go1.4
    export GOROOT_BOOTSTRAP=$GOROOT
    gvm install go1.9
    
  4. Finall add command to .bashrc or .zshrc

    gvm use go1.9
    

Refer - Go - 在 OSX 安裝 GVM

JavaScript - 半形 全形 轉換

JavaScript - 半形 全形 轉換

因為一個奇怪的需求?

需要把使用者輸入的東西轉成可以方便驗證的格式(這應該後端做吧?)

反正因為以前也做過半形轉成全形(痛苦的回憶, 為啥政府的 opendata 各縣市格式不一致就算了, 竟然還有全形半形的問題...)

這邊就簡單的只針對最前面的基本拉丁字母字元符號集作轉換

因為大部分的需求應該這樣就可以應付了?

但是空白字元要特殊處理

那接下來只要知道需要轉換的字元範圍即可

全形從 U+FF01U+FF5E

半形從 U+0021U+007E

把 16 進制轉換回來就是

65281 到 65374

33 到 126

上述怎麼轉的?

就是這樣

parseInt('0xFF01', 16)

只要判斷輸入的字元這這些編碼區間就進行轉換

trans char

所以簡單做了一個 demo 頁面

程式檢視原始碼即可

Refer - Wiki

Refer - Unicode / UTF-8 字元編碼區間表 - 2013