去年在公司做了一個滿好玩的專案，要建立一個 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 優化過，應該會特別有感觸，該如何才能讓網頁載入更快。接下來討論如何讓畫面渲染載入更快，以及一些最佳化使用方式。

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。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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