第一次看到 Svelte 時，心中想著「恩...又是一個新的前端框架了嗎？」，抱持著這樣的心情沒有在意太多。直到後來看到越來越多部落格文章介紹以及很多網站都在用之後，開始引起了我的好奇心。
其中從 Chrome 80+ 開始，會將 Cookie 當中的 samesite 預設設定為 lax。我們會從 samesite 的定義以及它有什麼用處，還有對 Cookie 的反思為出發點，談談我對整件事的想法。
之前就希望能夠把一些關於前端開發的東西紀錄下來，不過一直沒有著手去做，趁著鐵人賽期間一口氣全部整理完。 這個系列分成了幾大部分，未來有機會會再繼續寫下去。 JavaScript 基礎 淺談 JavaScript 與 ECMAScript…
react-transition-group 從 v1 升級到 v4 比較重要的有幾點： 升級後 CSSTransitionGroup 元件被移除了 leave 變成 exit transitionName 變成 classNames transitionEnterTimeout…
這篇文章並不會一一介紹各個 react-hooks 的 API，而是試著從設計的角度出發，來探討設計背後的原因。主要會分成幾個段落： Function Component 與 Class Component 的差異 如何在元件中複用類似的邏輯 淺談 high-order component…
這篇文章是看完 Implementing a pin-to-bottom scrolling element with only CSS 後，並且介紹使用 JavaScript 的做法整理而成。 現在網頁越上越常出現每次加入新的內容時，就將 scroll 的位置調整到最底下。像是 Twitch…
有一天在開發頁面的時候，為了要檢查請求 Header 的欄位是否正確，打開開發工具一看，發現了請求多出了幾個可疑的 header： network 有注意到可疑的地方嗎？仔細一看發現，怎麼有三個以 Sec-Fetch…
許多網頁當中都有各式各樣的 script 需要執行，當然也會有優先程度，像是比較重要的：渲染 UI，註冊相關的互動事件，呼叫 API 拿取資料等等是高優先的任務，而像是比較不重要的任務有：Analytic 的腳本、lazy loading、初始化比較不重要的事件。 怎樣才算 Idle…
在前端當中，我們主要可以透過兩種方式來發送請求：XHR 跟 Fetch。XHR 是從，嗯...，很久以前就有的 API。不過因為設定上很麻煩，所以時常被包裝成更高階的 API 使用，像是 jQuery 的 getJSON、axios、RxJS 的 AjaxObservable…
CORS 與 cookie 在前端是個蠻重要的問題，不過大多數在開發的時候，因為前後端的 domain 時常是相同的，所以很少去 care 這些問題。或者只要要求後端將 Access-Control-Allow-Origin…
在最近的專案中用到 vue 來開發，而如果要管理比較複雜的資料流貨狀態，通常都是用 vuex 來當作 Single Truth of Source 的 store。在 vue 裡頭建立 store 時，都是把所有的 module 寫完後，再統一放到 vue 的 root…
Array.sort 淺析 這篇文章不是談論在 Javascript 原生的 sort 要注意的事項。例如： 因為預設的 sort 方法會把值轉為 String，並按照 char code 做排序，所以才會出現上面的結果。 今天要來探討 Javascript 的 sort 背後的實作方式
認清一件事實，table 是拿來看，不是被當作絢麗的視覺使用的 最近在後台頻繁有使用表格的需求，如何設計對使用者良好的 table 是一項挑戰，尤其在資料筆數多、欄位多的情況下，使用者很容易就會被額外的元素吸引。其實對於呈現資料上，table…
react 終於正式發佈 v16 了，其實官方部落格的介紹已經相當完整（而且賞心悅目）。本篇文章作為筆記與統整，精簡了部分的細節。 1. componentDidPatch(error, info) react16 最亮眼的部分，加入 ErrorBoundary 的功能，確保在 lifecycle…
終於有時間整理最近的面試歷程了。先總結一些看到的事情： 通常公司面試只考 Javascript 的熟悉度，多數關於演算法或是解釋原型鍊等等，很少考 DOM 或是 Event 的操作。 幾乎不考 CSS，就算有也只是簡單判斷 class、ID 優先度這種基本題目而已。 沒有面試考 HTML…
ramda 是個相當好用的函式庫，如果聽過 lodash 或是 underscore 的話，可以將 ramda 想成 functional programming 的 lodash，他們的 API 有許多相似性，差別在於 ramda 本身有 FP 的功能，任何的 API…
在前端的頁面中，我們經常會碰到需要相同高度的排版。最直覺的方法就是將容器裡的所有元素設為 float 或是 inline-block。 float 及 inline-block 如果是使用 float 排版，不但要先撐開父元素容器(clearfix)，還要針對子元素設定 margin…
之前寫過了一篇關於自己對 css variable 的想法，原本對這個屬性沒有抱持著太大的期待，自己用習慣了 SASS 變數也覺得這個 css variable 反而像個彆腳的 system，不過如果你也是這樣想的人，可以參考這篇文章
從 SASS 到 PostCSS 大約在一年前，PostCSS 開始竄紅在前端生態圈裡，不外乎就是所謂的 preprocessor 的特性、高度客製化自己的 plugin、搶先使用 cssnext 的功能，還能夠搭配各種建構工具（gulp, webpack…