一直以來大部分時間都在用 PHP 開發
所以也用 PHP 來處理 HTML Form
所以都下意識地認為 <input type="checkbox" name="game[]" value="FGO">
這樣的 name="game[]" 的處理方式是正規的處理 HTML Form 的多選的方式
也疑惑為何大多的 HTML Form 的教學甚至 MDN 都沒有提到這件事
就在某一天我在檢視到同事寫的 code 時
發現同事用 JavaScript 處理
硬爬出來自己組字串送出去
我才想起這令人感到恐懼的事情
因為公司同事是寫 golang 的專門, 就算前端不熟
應該也不至於連這樣概念都沒有就用硬爬的方式處理
所以再調整的同時也跟同事確認後
我也真正的直視這問題
到底要怎麼處理表單中多選的資料?
PHP 寫久的人大多都知道要用上面列出的方法
name="game[]"
就是 game + []
但是當我認真地尋找關於這個問題時
意外地發現了一篇 stackoverflow 的問答
Several Checkboxes sharing the same name
其實 W3C 根本沒有管你 name="" 重複要如何處理
以下是 PHP, nodejs, golang 的原生方式來測試的結果
# PHP 以下問答有提供了 PHP doc 說明 PHP 如何處理多選
...
# 網站直接網頁截圖 基本上就是把要截圖的內容轉成 canvas 物件
再轉成圖片下載即可
## 現成套件 html2canvas https://html2canvas.hertzen.com/
但是如果要截圖的內容有用外部 url 載入的圖片需要注意一下 CORS 問題(canvas 的限制)
## 解決外部 url 載入圖片時 CORS 問題 原理
把外部載入的圖片轉換成二進制再轉成 dataurl
因為在 browser 上面可以解析與渲染 dataurl
所以就可以呈現在 canvas 裡面
這樣之後要截圖下載這個 canvas 的內容也沒問題
## 補充轉換圖片的機制(解決載入外部圖片 CORS 問題) ### 處理方式 - 圖片轉 blob 圖片轉成 blob
function toDataURL(url, callback) { var xhr = new XMLHttpRequest(); xhr.onload = function() { var reader = new FileReader(); reader.onloadend = function() { callback(reader.result); } reader.
...
這邊會以我自己的經驗/經歷
與我是參考哪些東西來準備的部分來說明
為啥會有這篇文章主要是因為這部影片
https://www.youtube.com/watch?v=HIbZ5hH5XW4
因為這部影片在一些 FB 社群上面有貼文
我特地看了一下
其實上面有些說法是沒錯的
有些說法我覺得不行(該影片下面也是有跟我持相同看法的人留言)
因為我有面試別人, 當然也是有被面試的經驗
所以多少還可以分享一下我的經驗
針對影片中我覺得不行的部分說明一下(我覺得 ok 的我也不想說一遍)
影片中的 HR 有提到他們會看技能的量表來確認符合的資格這件事, 我覺得是不 ok 的
至少在我工作多年和面試與被面試與和身邊朋友分享這類經驗時都一致認為這是在履歷上不該出現的東西
什麼是技能的量表
我截一些網路上的截圖大家應該就會明白了
我想明眼人看得這東西大概都會覺得無言吧
那種用星星用百分比用數字呈現的啊
到底懂不懂一個道理啊?
你在履歷上寫的 100 分不是面試官的 100 分
沒有統一的一個制度標準
這數字百分比根本沒意義
又不是多益/托福/雅思這種測驗有一個標準在…
以前在看的履歷多的時候(以前待的公司, HR 都不是第一個過履歷的) 這種我都直接 pass 掉
這邊會針對幾個項目來說明
這邊會先從公司的角度來說明會是大概如何找人
這樣才能知道要如何準備履歷
這邊先說明一下
在這領域雖然還是有不少公司在用 104
但請用自己的履歷格式
也請直接寄到公司聯絡方式的信箱(不要用 104 的系統)
然後請愛用 Linkedin
好公司大公司和獵頭大多會在 Linkedin 開缺找人
所以請用心維護 Linkedin
# 公司找工程師的挑選方式 - 菜鳥篇 因為是找菜鳥
所以現實的是大多數的公司會從學歷相關科系來挑選
再來會看在大學幹了什麼事情, 有啥比賽經驗, 專題或是實驗抑或是打工經驗等等, 所以在大學時真的是要好好的想一下未來要做啥
但是如果真的沒有適合的學系或是相關科系的話
...
# 前言 因為最近在做一些語系的整理
為了字型的關係
就整理了一下一些在數位資訊上面有關於文字與語言的一些規範
這裡會概括了系統與軟體開發與輸入裝置的處理
因為資訊量太廣
所以不一定會有個脈絡
基本上只有大概分一段一段的說明
# 初心者的誤區 國家和語言有很強的關聯 這是很多人一開始處理多國語系都會有個誤解的
常常在系統中看到 en-US, zh-TW, ja-jp
就會下意識的把語言和國家綁定在一起
然後結果就是在該國家只能顯示該語言
但現實是每個國家都不一定都只有使用一個語言啊~~
新加坡同時普遍用中文和英文(官方語言是英文)
以為在限定的國家或系統才能使用限定的語言 這和上一個很類似, 以為用到某個國家的系統或是使用某個系統設定在某些國家就會限制了語言
這是錯誤的觀念
記住
語言和國家沒絕對關係
語言和國家沒絕對關係
語言和國家沒絕對關係
拉丁文就是英文 這後面會提到
語言和文字在定義上的有強烈的關係 在廣義的定義下確實如此
但真正探究下去其實不應該這樣說
這後面會提到
鍵盤上沒有注音符號還是可以打中文啊 那現在很多鍵盤都沒有倉頡符號
那不就沒辦法用倉頡輸入法了嗎?
# 來講一下文字 有時大家常常聽到拉丁文這個東西
那麼拉丁文究竟是什麼文字?
相信不少人就會說英文啊
沒錯
但不太正確
英文就是拉丁文字的其中一部分
那拉丁文又是從哪裡來呢?
這又有點牽扯到語言了
現在最廣泛的語系算是印歐語系
而其中的拉丁語系在古歐洲經由羅馬帝國向外發展
所以拉丁字母也就很廣泛的使用(文化侵略的結果)
上面提到英文是拉丁文部分之一
是因為實際上拉丁文不只是 A ~ Z 26 個字母
德文, 法文等也是用拉丁字母
但是這些語言額外多有各種音對應的字母
所以會有所謂的延伸拉丁字母
尖音 重音 折音 分音/德語變音 軟音 鼻音 鼻化元音 合字 來自盧恩字母 Á É Í Ó Ú Ý À È Ì Ò Ù Â Ê Î Ô Û Ä Ë Ï Ö Ü Ÿ Ç Ş Ã Õ Ñ Ą Ę Į Ų Æ Œ Ø IJ Þ á é í ó ú ý à è ì ò ù â ê î ô û ä ë ï ö ü ÿ ç ş ã õ ñ ą ę į ų æ œ ø ij ß þ 這邊後面再輸入裝置時會在特別提到
...
# 前言 在後台系統會常遇到的問題就是要呈現大量的資料(表單)
通常在這情況下會有兩種方式呈現資料
分頁
無限滾動
但是這都要在 model 額外做不少工
例如: 處理分頁, 處理排序, 處理搜尋
這些都是要再花時間處理的
這邊將會介紹一下如何在不太改動 model 的情況下提升前端效能
當然在真的是非常的大量的資料時還是真的要在 model 提供參數去 query DB
# 現況 因為新的需求需要添加到不少的資料
但是因為時程短加上再添加的資料量也不會大的誇張(約共 2000 左右的量
所以還是一次全部載入
# 問題點 首先會先遇到的問題就是
一次載入 2000 多筆資料頁面就開始變很慢(因為還有圖片)
打開 chrome developtool 就會發現 DOMContentLoaded 要到 13s 左右
慢到爆炸
這 13s 還不包含之後要執行的 JavaScript 與畫面渲染
因為還有圖片
所以 2000 多個圖片載完後
整個頁面花了 1 分鐘多…
# 解決方案 ## 先把圖片改成 lazyload 從瀏覽器一次載入 2000 多筆資料瞬間變成只載入頁面會呈現的圖片
但是 DOMContentLoaded 還是要 12s 左右啊~~
...
# 需求 讀取一段文字後
可以決定字型
最後要轉成圖片
# 使用的工具 php7.2
freetype
提前說明需要用到 GD(這通常預設就啟動了)
freetype 通常會需要另外安裝
如何先檢查有沒有 GD 和 freetype
先用 phpinfo 檢查即可
-> % php -a Interactive shell php > 之後再打
echo phpinfo(); 就會 output 資訊了
在搜尋 gd
gd GD Support => enabled GD Version => bundled (2.1.0 compatible) GIF Read Support => enabled GIF Create Support => enabled JPEG Support => enabled libJPEG Version => 9 compatible PNG Support => enabled libPNG Version => 1.
...
# 前言 現在可以確認的是 Google 並不會以單純的 Google structured data 來呈現在 search result
以往驗證過的是 search result 裡的 title 和描述並不完全會採用 meta 中的 title 和 description
現在在線上的頁面也再次驗證了 Google 已經在使用 NLP 分析網站的內容了
以往是用 landing page 來測試, 因為內容不豐富所以不好測試
稍微變動 Google search result 也很難得到期望的結果
這已經和 2018 年以前的情況不一樣了
# 測試結果 https://blog.photogrid.app/posts/how_to_add_customized_watermark/
結構化測試工具
從上面的結果可以知道
mobile search result 的 image 是抓到頁面中的 image 而非 structure data(json-ld) 中的 image
而且 image 的 alt 也是 Google 自己判斷添加的
# 結語 有趣的一件事情是該頁面也是沒什麼內容的(因為就是個嵌入 Youtube 影片的頁面
...
# Intro Mobile web touch fire event or a link can show blue background
# How to remove -webkit-tap-highlight-color: transparent; Refer - How to remove the blue background of button on mobile?
...
# Online edit image ## Use canvas & how to do Upload image -> trans to canvas -> download canvas to png
upload use files api
new canvas object
toDataURL download
# Some tips toDataURL default to PNG & resolution is 96 dpi Refer - HTMLCanvasElement.toDataURL() - Web APIs | MDN
Need notice device pixelRatio Use Window.devicePixelRatio as base on canvas width & height
var canvas = document.getElementById("canvas"); // Set display size (css pixels).
...
# How to install package use local package? If you want install package from other local directory
npm link <package path> Refer - Installing a local module using npm?
...