分享個關於 CSS animation performance，後面會提到自己在專案上遇到相關的問題。提醒如果你需要使用 animation 的話，盡量能用只需要 Composite 的 style，避免對畫面造成可能的負擔。

假設你有針對 google page speed、lighthouse 優化過，應該會特別有感觸，該如何才能讓網頁載入更快。接下來討論如何讓畫面渲染載入更快，以及一些最佳化使用方式。

30 歲也算是人生重要時刻，總覺得該留下點什麼，所以就強迫自己寫這一篇文章了。還有提醒我一下我自己，保持好奇心。

JavsScript 的 closure (閉包) 是什麼？ 假設你有在寫 javascript 的話，你可能每天都在用，但你只是沒特別查覺而已。

React 有提到 state 的更新，都必須要是 immutable，當你有使用到 useState 或是 pureComponent、shouldComponentUpdate，你就會發現問題。

會以 Puppeteer 在 react 專案上跑 End to End Test。puppeteer 是由 Chrome DevTools team 團隊開發的，它是一個 node library 工具，提供 API 讓我們控制 chrome 或 Chromium，模擬執行各種功能。

IOS 11 開始預設開啟 prevent cross-site tracking 的設定，這會導致第三方 cookie 無法設置，若要完美處理 Block third-party Cookie 唯一解法就是改用 local Storage 或是 Session Storage。

redux 核心流程 dispatch action => reducer => store，當你用 redux 運行多個 dispatch 時，每一個 dispatch 都會獨立更新下去的，如果你的更新資料又彼此關聯，就可能會發生錯誤。

單元測試在我剛寫程式時，認為測試 case 是自己預期的，還主觀的認為沒什麼用。但我在實際寫幾個測試後，能更專注在預期判斷 input output，也有助於你思考 function 架構更清楚。接下來就來針對 react hooks 做 component testing。

如果你有多個網站服務，每個服務又是各自在不同網域上，就會遇到一個棘手的問題，無法確切的追蹤使用者數據。google analytics有提供跨網域追蹤，讓我們解決這個問題，後面就來嘗試跨網域追蹤設定。

React為了解決props 需要傳很多層問題，就在v16.3 更新 context API 的功能，context API 主要功能就是跨元件傳遞資料。利用createContext 建立context，並搭配Provider、Consumer、contexttype、usecontext 跨元件取值。

分享一個google analytics滿好用的功能，設定User Id，可以讓你直接在報表上找出這個使用者的flow，包括停留時間等等詳細數據，假設你搭配會員系統給予id的話，你也能夠跨裝置的追蹤數據。

回頭看第一份工作，我從充滿熱情、到充滿自信、最後充滿失望，總共兩年時光，離職前原本心中滿腹抱怨，但現在看只覺得感慨、感激，這就是人生啊。

React發布了幾個月的Hooks，最近也開始嘗試接觸，後面會稍微提一下PureComponent，不會介紹hooks各種特殊用法，就只針對hooks performance優化做介紹。

分享如何建立app script api管理讀取、更新excel表單資料，簡單講就是API的CRUD，並且製作一個可以用的簡單畫面，串接api更新訂單狀態。

分享一點最近處理lazyload心得，lazy loading image 對網站是很合理的處理優化，使用者沒看到的區塊本來就不需要浪費網路載入。

很久之前就一直想紀錄的內容，到現在還是很懷念。雖然說時間是4年前，但應該也算是日記吧。就從我剛開始退伍到第一個工作。

JavaScript處理DOM事件上的獲取和冒泡，實務上滿常用到的觀念，可以透過這方式解決一些麻煩問題，例如popup視窗的關閉、內外層DOM互動關係，另外事件獲取、冒泡也幾乎是面試必考題。

從去年剛開始，就一直很想分享的內容，以前曾擔任過行銷，主要是負責seo優化，有一些些小技巧跟心得想分享。接下來分享如何使用google adword關鍵字分析工具等等，規劃架構出內容，幫助提升排名。

接下來會用 promise 處理 callback hell，還有建立一個簡易的 promise，幫助我們理解promise。

不使用next.js，來試著依靠原生方法，架構出React server-side render，會使用到react官方的cli create-react-app，以及node.js作為server。

轉址的概念，大概是宣告這個頁面要搬家到另一個頁面的意思，依照不同後端語言，各有不同的轉址寫法，但邏輯上都是一樣的，大概分為 301、302、307。若是有重複性內容處理的問題，那你就需要使用canonical處理。

前陣子公司專案從next3更新到7、react也從15更新到16，希望能加快開發或佈署的速度，順便分享一下踩到了哪些的地雷。

當你網站有依照規範使用結構化資料，最重要、也最有回饋感的是，會直接讓網站在搜尋結果顯示更不一樣，間接地幫助提高網站點擊率，也有助於搜尋引擎理解網站的內容。

React Portals 是非常酷炫的功能，能夠將元件向任意dom節點依附渲染，這邊會介紹兩個範例，頁面上渲染元件，還有渲染元件到window open上。

首先申請imgur api，再處理input獲取檔案，獲取後串接api，另外針對拖拉要處理事件，要利用dataTransfer獲取檔案，再串接到api，另外針對ajax監聽，製作出進度條。

完整介紹tag manager功能設定細節、功能，建立流程步驟教學，以留言板追蹤為範例。假設我們要追蹤送出留言，建立一個事件，拿進ga當作轉換目標。

RESTful是某種設計架構的稱呼，方便、有彈性的傳輸資料。這邊會用node.js搭配express架構RESTful Api，資料會使用mongoDB，部署到server上，建立一個簡單的留言板。

比起履歷上面列滿滿的技能，不如直接用這些技能實作;如果是列公司的產品，要註明分工實作項目。面試時候，介紹自己可以更有自信，常常聽到面試者說這很簡單，先挫自己銳氣了，不懂技術裝懂，會有壞印象，還有氣場適不適合這點也重要。

gooogle search console是非常實用、強大的工具，有辦法直接影響網站在google上的搜尋。search console最實用的功能，查看過去幾天google搜尋到網站的關鍵字，進而讓你優化排名。

當今天使用到跨視窗iframe或是openWindow，原本parent頁面需要傳遞訊息給內頁iframe或是tab頁，就可以利用postMessage來傳遞資料。接下來會建立demo頁面，介紹一下iframe跟window open的使用方法。

Google Tag manager 是一個強大的程式碼管理容器，一個代碼管理中心的概念，涵蓋著處理各種代碼的設定。接下來就開始介紹功能，靠tag manager建立事件。我要追蹤的是click的連結。

JavaScript沒有類的特性(class-based)，跟Java不一樣，雖然說ES6 有class但它只是語法糖，每個JavaScript都具備有prototype，只是分為公開、私有差異，而JavaScript就用prototype來處理繼承(prototype-based)，特性是延展性高。

ga工作階段簡單講就是當使用者進入網站，那一刻起就算一個工作階段，沒有所謂使用者進來一跳出，沒有計算到工作階段，他跟網頁停留時間邏輯不一樣，不是依靠節點相減計算的。

開發上用到React，而其中最重要的莫過於是生命週期lifeCycle，可以在每個元件渲染的過程，加入需要的處理，例如載入完元件後非同步抓取資料，更新props觸發處理事件等等。接下來介紹一下新版本的life Cycle。

ga的utm非常好用，用途在於歸類流量管道，可以幫你你精準的分析數據，facebook廣告、電子報，簡訊、或社群曝光分享，提供精準數據幫助你優化廣告操作。

在這個前後端分離的時代，多半會再開一台Node.js的server給前端處理router，這邊就要來使用Node.js搭配express以及MySQL來建立簡單的網站router。

「認證網域」之後就可以開放編輯facebook粉絲團貼文了。寫這篇認證網域流程文章，主要是推薦大家看google dns txt教學，各大網域代管商都有，外加流程圖圖文並茂，果然是google啊。

介紹關於使用stateless component時，常會搭配使用的Higher Order Components，之前有看到「高階組件」這區塊，被他名字誤會了，實際上一點也不高階，他就只是一個function 函式，接受參數元件然後回傳全新元件，簡易的範例如下。

Google analytics很重要的事件追蹤，可以使用ga提供的方法ga('send', 'event', xx.xx.xx)來產生事件，成功產生事件後，就可以再把這個事件設定為轉換目標，就可以做到註冊會員、填表等等追蹤了。

整理最近的面試心得，要找的是第二份前端職缺，我大概在三月開始找工作，主要是用104、yourator、ptt，找的都是希望有用到前端框架或是未來要用，然後公司產品主力是軟體相關。

要用到活動或是問卷，相信大家最常會用到google form，非常快速的創出填表功能，但google form存在許多限制，google analytics轉換目標也不能設定，都可以用google excel的api來解決。

決定排名的是複雜的演算法，所以要讓程式容易辨認內容，你網頁要能被google robot爬到內容，盡量避免用javascript產生內容(要的話請用SSR 或是PSR)，不要整個網頁都用圖片，google不會理你圖片裡面寫啥米(能爬得懂也不理)，記得要利用圖片搭上文字做定位排版。

介紹Array sort，現代網頁技術快速發展，前端經常要用到非同步來取得資料，拿到的陣列資料，經常會需要排序功能，ie.價格排序、新舊排序、同類型排序等，sort會對陣列跑兩個數跑比對條件，左至右重複跑到完全符合條件的順序。

google map下多個marker，再搭配marker的event來互動，以下是打開infowindow的運用。markerwithlabel讓我們更簡單設計不同的marker，例如讓他帶自訂的image，再來是重點 markercluster，它讓我們可以解決marker過多，同時重疊的問題。