文章列表 頁1
讓 photoshop 可以處理 webp 格式的檔案
最近網路上越來越常遇到檔案格式是 webp 的圖片，但 photoshop 還沒辦法直接處理，但還好有人開發了免費的 plug-in 讓我們使用只要簡單的安裝之後，我們就可以跟以往一樣用 photoshop 來處理這類型的檔案了喔!
AMP 網頁開發介紹與基本設定
AMP 是 google 提出的行動裝置網頁開發的方法，全名為 Accelerated Mobile Pages，照字面意思可以知道是用來加速行動裝置的網頁開啟速度，由於目前網頁設計越來越複雜，若使用 RWD 的方法製作行動裝置版並無法加速網頁的開發速度，反而大多數狀況是會讓開啟的速度變慢，如果想要讓使用者有更好的體驗，就可以使用 AMP 的方式。
PWA 與 Service Worker
Service Worker 是一種 JS 的 Web Worker ，他是一隻獨立運行於瀏覽器頁面執行緒之外的一隻 JS 檔案，可以攔截網路請求，存取快取資源，並且能傳送訊息。也因為 Service Worker 可以攔截網路請求並改變 reponse，所以只能在 localhost 或是 https 上使用。
CSS3 的 transition- 轉場效果
在 CSS3 出來之後，以往我們需要靠 js 完成的動畫效果，也大多透過 CSS3 來幫我們完成了，其中一種是 transition，可以做 CSS 的屬性在兩個值之間變化中間的轉場效果。
讓網頁區塊的捲軸在 iOS 裡也有跟整個頁面一樣的回饋效果
在 iOS 裡卷動網頁，相信大家都有經驗是在往上或往下捲超過頁面時，會有一個可以拉超過頁面後「彈」回來的效果，這個是一個很好的 UX 回饋，但僅止於網頁整體，若想要在頁面裡某個區塊裡就不會有這個效果，還好 iOS 內建的瀏覽器可以設定 CSS 後就可以直接支援這個效果。
whimsical 可製作 Flow Chart、Wireframe、Mind Map 等的線上方便協作工具
網站的開發者在規劃的階段，應該都會有一個需要溝通想法的過程，這個階段我們可能會透過 Flow Chart 或 Wireframe 來溝通內容，這邊來介紹一個好用的線上協作的網站：whimsical。
Web App Manifest
Web App manifest 是一個 JSON 格式的文件，它提供了應用程式相關的資訊，像是名稱、作者、圖示和描述等，還可以設定類似 app 的開啟畫面，可以讓使用者將 Web 應用程式安裝到設備的主畫面，提供更快速的訪問和更豐富的體驗。
HTML5 的 Geolocation(地理位置) API
Geolocation 的定位是透過電腦的IP、WIFI定位法、手機三角定位及GPS來取得經緯度，所以大部分的情況用手機的定位會比較精準一些，但也可能因為環境的關係會飄到奇怪的地方，要使用的話要注意誤差的問題。
判斷是否可以使用某個 css 屬性與使用- @supports
CSS3 雖然陸續被主流的瀏覽器支援，但也還是有持續在發展新的語法，或是如果有需要支援舊版瀏覽器，比如一些沒辦法使用 flex 排版的瀏覽器，可以使用這個來判斷是否支援某種屬性才去讀取這段內容，不支援的話就讀取舊的寫法。
使用 Indexed Database API 存取資料
使用 Indexed Database API 開發的步驟為：1. 建立資料庫 2.建立 object store 3. 在 transaction 中處理資料。
IndexedDB基礎概念
IndexedDB 讓我們透過資料鍵 (key) 儲存、取回物件。所有對資料庫的變更都發生在交易操作；如同大部分網頁儲存方案，IndexedDB 遵守同源政策，也就是說我們只能存取同網域下的資料。
HTML5 的 Web Storage- local storage 與 session storage
以往我們要在使用者端存取資料會使用 cookie，但 cookie 可以存的資料非常有限，所以後來 HTML5 發展出了 Web Storage，而 Web Storage 又分成了 local storage 和 session storage。