近期在思考是不是要跨領域到 Front-end developer 前端工程師的角色，其實一直以來在製作不管是活動網頁或是官網維護修改，工作內容已經在前端工程師的工作範疇邊緣了。
先不管設計這塊的流程，最後進入Rwd 網頁切版，以HTML+CSS為主及Boostrap4 Framework 來編寫。遇到一些動態JS的需求時通常也只能利用網路上一些元件來套用，如果設計不複雜的話還可以足以應付，如果遇到一些客制的需求時，這時就只能求助工程師了。。。
最近因為工作需求，我也開始打開已經有一年沒有好好看顧的書店 UI Sketch 檔案。
依據之前在進行UIUX時，常常就是在InVision\Zeplin裡切換，在Phototype 及 handoff 前端工程師，也或許一直以來也就一人單獨完成 UX > whiteframe > UI > 與前端溝通動態效果、system design 前端實現。
就我所知Sketch 在協同作業並不特別強，都是線下檔案為主...對2018 年當時作業來說 Zeplin 已經是對與前端工程師最好的工具就已經非常滿意了。今日爬文在2018年 Figma 可說是小摟摟呢。
如今，越來越多公司、設計師都加入Figma 行列了。
看了許多介紹文章，在協同作業Collaboration這方面看起來真的很棒，尤其現在UI設計已經不完全一個人從頭到尾完成，又或者說也許在維運時更多設計師進來了解完整的UI Flow 也是非常重要的。不但能協同作業，還可以即時線上觀看同事的即時操作...這點很適合在指導同仁使用，之後一定會找機會Try看看。
至於comment 溝通對話這點在Sketch 使用者都是利用Zeplin 在畫面直接新增對話，通常都是企劃、工程師會加進來，看起來這塊功能他也一起併在裡面確實很方便許多。
我對Prototyping 這塊到覺得還好,...畢竟後期的Sketch 在prototyping 也做得蠻完善，而且能利用QuickTime 即時轉播到會議螢幕上展示。
目前Figma 免費版是有些限制3page 及3figma 檔，但是她提供了browse 直接編輯...這點還蠻吸引我的，特別有時候會調整企劃提供的簡易writeframe....
其他，就待我繼續好好玩他吧。
文青風格來詮釋書店年終慶優惠活動。
其他活動banner
來源網址：https://ebook.hyread.com.tw/activity/202112finalsale/index.jsp
線上製作SVG檔案的波浪背景：https://getwaves.io/
SVG Backgrounds-
提供 SVG 的網站背景，並可以客製化樣式
https://www.svgbackgrounds.com/
bubbly-bg- 好看的 js 網頁動態泡泡背景效果
Potlab Icons- 動態 SVG Icon圖示
發現、抓取和索引內容只是難題的第一部分。當用戶執行搜索時，搜索引擎還需要一種對匹配結果進行排名的方法。這是搜索引擎算法的工作。
每個搜索引擎都有獨特的網頁排名算法。但由於 Google 是迄今為止使用最廣泛的搜索引擎（至少在西方世界），因此我們將在本指南的其餘部分重點關注這一點。
眾所周知，谷歌擁有 200 多個排名因素。
沒有人知道所有這些排名因素是什麼，但我們知道關鍵因素。
讓我們討論其中的幾個。
❶ 反向鏈接❷ 關聯
❸ 新鮮
❹ 話題權威
❺ 頁面速度
❻ 移動友好
大多數著名的搜索引擎，如 Google 和 Bing，其搜索索引中都有數以萬億計的頁面。因此，在我們討論排名算法之前，讓我們深入研究用於構建和維護網絡索引的機制。
這是基本過程，由 Google 提供：
CSS有幾種表示長度的不同單位
許多CSS屬性採取“長度”的值，例如width，margin，padding， font-size，等。
長度是一個數字，後跟一個長度單位，例如10px，2em等。
數字和單位之間不能出現空格。但是，如果值為0，則可以省略單位。
對於某些CSS屬性，允許使用負數長度。
長度單位有兩種：絕對單位和相對單位。
絕對長度
絕對長度單位是固定的，用任何一個長度表示的長度將恰好與該大小相同。
不建議在螢幕上使用絕對長度單位，因為螢幕尺寸變化很大。但是，如果已知固定尺寸，則可以使用，例如用於Print Layout。
*像素（px）相對於查看設備。對於低dpi的設備，1px是顯示器的一個設備像素（點）。對於打印機和高分辨率屏幕，1px表示多個設備像素。
絕對長度單位是固定的，用任何一個長度表示的長度將恰好與該大小相同。
不建議在螢幕上使用絕對長度單位，因為螢幕尺寸變化很大。但是，如果已知固定尺寸，則可以使用，例如用於Print Layout。
*像素（px）相對於查看設備。對於低dpi的設備，1px是顯示器的一個設備像素（點）。對於打印機和高分辨率屏幕，1px表示多個設備像素。
相對長度
對長度單位指定相對於另一個長度屬性的長度。相對長度單位在不同渲染介質之間縮放更好。
另外，在ps裡做設計稿時，常常需要單位pt轉px、或是ems轉px等相關數值
可利用以下網頁，直接幫你轉換非常方便
https://simplecss.eu/pxtoems.html
另外，在ps裡做設計稿時，常常需要單位pt轉px、或是ems轉px等相關數值
可利用以下網頁，直接幫你轉換非常方便
https://simplecss.eu/pxtoems.htmlPt to Px Converter
Simple CSS Units is a free tool for Web Designers & Front End Developers to simplify the process of converting CSS units. Simply enter your units in the fields below and watch your unit get converted in realtime, eg Points to Pixels.
（ 在PhotoShop設計網頁版面時，一直以來都依賴「切片」工具來將儲存版面中的元件。但是因為利用切片工具卻無法儲存網頁元件圖片倍數大小，例如200pxX200px的PNG圖檔，＠2就是400X400px。這樣的話我必須將所需的圖像元件分成好幾個工作區域來分別存取，實在很不方便。
研究PhotoShop 2020版之後，他其實可以利用 檔案 > 產生 >影像資產 來解決儲存網頁切片元件。
近幾年，日本的工作環境逐漸多樣化，其中最受矚目的是在家接案的這種工作方式。由於網路的普及，不一定要待在公司才能工作，只要該有的設備準備齊全，在任何場所都能工作，造成在日本接案工作的SOHO族逐漸增加，相信今後也會持續增加。
在家接案工作的SOHO族，不受雇於特定的某間公司，利用自身的專業技能來賺取酬勞，在日本算是新興的工作方式。與固定在一間公司工作的上班族不同，能自行決定工作時間與地點，比上班族多了許多好處。在家接案工作最吸引人的魅力是非常自由，但一般住在日本的外國人，人脈有限，要透過在日本的人脈尋找接案工作，並不容易。
建議住在日本的外國人，透過日本接案工作網站來找接案工作，是最快速有效的方法。使用日本接案工作網站，不僅能迅速找到適合自己的接案Case，還有專業的顧問提供各種免費協助，協助接案工作者與日本企業面談、交涉工作條件、簽約等等。此外，還能免費參加日本稅金、國民健康保險、年金等說明會，讓在日本接案工作的外國人輕鬆辦理各項手續。
本篇要說明日本接案工作中，最多外國人從事的工程師、翻譯・口譯、網頁設計、文案寫手等工作，解說外國人在日本接案工作的優缺點，並介紹外國人在日本找接案工作的方法，推薦好用的日本接案工作網站。計劃在日本接案工作的外國朋友，現在已經在日本接案工作的外國朋友，歡迎參考本篇的說明，尋找適合自己的日本接案工作喔！
在家接案工作的SOHO族，不受雇於特定的某間公司，利用自身的專業技能來賺取酬勞，在日本算是新興的工作方式。與固定在一間公司工作的上班族不同，能自行決定工作時間與地點，比上班族多了許多好處。在家接案工作最吸引人的魅力是非常自由，但一般住在日本的外國人，人脈有限，要透過在日本的人脈尋找接案工作，並不容易。
建議住在日本的外國人，透過日本接案工作網站來找接案工作，是最快速有效的方法。使用日本接案工作網站，不僅能迅速找到適合自己的接案Case，還有專業的顧問提供各種免費協助，協助接案工作者與日本企業面談、交涉工作條件、簽約等等。此外，還能免費參加日本稅金、國民健康保險、年金等說明會，讓在日本接案工作的外國人輕鬆辦理各項手續。
本篇要說明日本接案工作中，最多外國人從事的工程師、翻譯・口譯、網頁設計、文案寫手等工作，解說外國人在日本接案工作的優缺點，並介紹外國人在日本找接案工作的方法，推薦好用的日本接案工作網站。計劃在日本接案工作的外國朋友，現在已經在日本接案工作的外國朋友，歡迎參考本篇的說明，尋找適合自己的日本接案工作喔！
訴求行動優先的開發框架Bootstrap移除jQuery，可使得檔案更輕巧，整體頁面載入速度更快
知名開源前端框架Bootstrap官方釋出了最新的Bootstrap 5 Alpha測試版本，這個版本做了一些大刀闊斧的改進，包括不再相依於jQuery，並且放棄了對Internet Explorer的支援，把重點放在更有未來性的工具上，官方改善了CSS變數以及JavaScript運作速度，並且提供了全新公用工具API。
早在2000年就開始有了 User Interface 一詞。當時在探討設計界面的易用性。現今慢慢有許多公司開始重視UX應用與研究。
設計大舌頭在2017發表了一篇文章，說明了PM與UX Designer 在軟體開發上有那些工作流程。這是我最早終於懂了UX所賦予的任務與關鍵角色。
公司產品/軟體開發需求:
當公司主管部門決定針對某個產品或是軟體開發提出需求，我所處公司為資訊軟體公司，比較常遇到為軟體開發或是平台開發。已平台開發為例在2019年幫電子書平台進行網站改版，當時所面臨的問題包含:
1.將近10年沒有作任何更動
2.網站device支援度低，沒有RWD
3.因應資訊內容層層疊，網站架構已不敷使用
....
在沒有導入UX之前的工作流程:
PM或主管提出改版需求 → 企劃規劃架構與內容 → 設計師 → Front-End → Back-End。
目前這樣的工作流程比較像是瀑布式專案管理，也就是下圖最後段的 Project Managers Developers，
上級主管指示一個任務、或是一個需求、或是問題，交由PM去交辦相關人員執行到完成。
在導入UX團隊的工作流程:
團隊包含: Director of Product、Product Manager、UX Reserch、Dev Team。
設計大舌頭在2017發表了一篇文章，說明了PM與UX Designer 在軟體開發上有那些工作流程。這是我最早終於懂了UX所賦予的任務與關鍵角色。
公司產品/軟體開發需求:
當公司主管部門決定針對某個產品或是軟體開發提出需求，我所處公司為資訊軟體公司，比較常遇到為軟體開發或是平台開發。已平台開發為例在2019年幫電子書平台進行網站改版，當時所面臨的問題包含:
1.將近10年沒有作任何更動
2.網站device支援度低，沒有RWD
3.因應資訊內容層層疊，網站架構已不敷使用
....
在沒有導入UX之前的工作流程:
PM或主管提出改版需求 → 企劃規劃架構與內容 → 設計師 → Front-End → Back-End。
目前這樣的工作流程比較像是瀑布式專案管理，也就是下圖最後段的 Project Managers Developers，
上級主管指示一個任務、或是一個需求、或是問題，交由PM去交辦相關人員執行到完成。
在導入UX團隊的工作流程:
團隊包含: Director of Product、Product Manager、UX Reserch、Dev Team。
因為需求常常在windows及Mac電腦切換使用，但是因為兩個系統同樣大小的頁面卻因為解析不同在MAC中常顯得模糊。
在之前已經有製作過手機APP開發的經驗，當時已經都是用SVG來顯示圖像問題。回過頭來開發網站時就不時想，是不是該改用SVG了。
害怕的是Browser支援度問題。
在之前已經有製作過手機APP開發的經驗，當時已經都是用SVG來顯示圖像問題。回過頭來開發網站時就不時想，是不是該改用SVG了。
害怕的是Browser支援度問題。
在開發APP或是web專案工作時，
完成 UI/UX畫面後～需要在會議中投影在螢幕上，讓與會人員不必在對著螢幕畫面看手機UI/UX。因此，這時如果能將Sketch Mirror 投影出來直接說明會，想必更有感覺。
因此，利用QuickTime player 來錄製手機畫面...
首先，把iphone/ipad wifi開啟。Macbook 上的wifi也需開啟。
確定完成連線開啟狀態時，將QuickTime player 打開，
在功能列表 > 開啟『檔案』 > 新增影片錄製 ...
這時候Macbook會出現前置鏡頭 自拍的畫面，在開始錄製旁邊的箭頭
選擇裝置，連線後即可出現。
這時，iphone/ipad的操作動作會直接投影在螢幕上，
如果有接會議室HDMI 電視時，就可以利用這個方式來簡報囉。
完成 UI/UX畫面後～需要在會議中投影在螢幕上，讓與會人員不必在對著螢幕畫面看手機UI/UX。因此，這時如果能將Sketch Mirror 投影出來直接說明會，想必更有感覺。
因此，利用QuickTime player 來錄製手機畫面...首先，把iphone/ipad wifi開啟。Macbook 上的wifi也需開啟。
確定完成連線開啟狀態時，將QuickTime player 打開，
在功能列表 > 開啟『檔案』 > 新增影片錄製 ...
這時候Macbook會出現前置鏡頭 自拍的畫面，在開始錄製旁邊的箭頭
選擇裝置，連線後即可出現。
這時，iphone/ipad的操作動作會直接投影在螢幕上，
如果有接會議室HDMI 電視時，就可以利用這個方式來簡報囉。
Good UI design facilitates making the completion of tasks as frictionless as possible and increasing usability.
每個產品都有一個終極目標 - 幫助人們解決某些問題。在設計產品時，您需要牢記用戶體驗，您不希望創建比用戶的實際問題更複雜的產品。設計產品時需要遵循一些原則。它可能是一個應用程序，一個網站或一個物理產品。這些原則將幫助您塑造更好的用戶體驗。
