去年在公司做了一個滿好玩的專案，要建立一個 JavaScript tracking sdk，透過客戶的 google tag manager 安裝，收集客戶的 user 使用資料，能做到部署 code…

AbortController 是讓我們可以透過 new AbortController() 並且透過回傳的 signal object 以及 abort function 控制 promise，達到終止 promise 的效果。

debounce 可以解決掉短時間內快速 callback 的問題，能夠讓我們指定時間，並且在這時間經由每次重複調用去延長 callback 執行時間。最後我們會手刻一個 debounce 跟 throttle。

開發時不要預想用 useEffect 處理，但如果 code 難以閱讀、管理，或是要避免每次 update 都執行的 function，那才來考慮使用 useEffect。

分享個關於 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過多，同時重疊的問題。