React 17 更新重點 - useEffect 的 clean up 函數時機改變
React 17 的發布沒有重大更新或是任何新功能,不過 useEffect 的 clean up 執行時機悄悄改變了。本篇文章不會一一解說每個更新,而是紀錄文章中比較值得關注的地方。
四零二曜日電子報上線啦!訂閱訂起來
本部落主要是關於前端、軟體開發以及我在日本的生活,也會寫一些對時事的觀察和雜感
本部落格支援 RSS feed(全文章內容),可點擊下方 RSS 連結或透過第三方服務設定。若技術文章裡有程式碼語法等特殊樣式,仍建議至原網站瀏覽以獲得最佳體驗。
React 17 的發布沒有重大更新或是任何新功能,不過 useEffect 的 clean up 執行時機悄悄改變了。本篇文章不會一一解說每個更新,而是紀錄文章中比較值得關注的地方。
隨著瀏覽器可以做到的事情越來越多,前端能夠涵蓋的範圍也越來越廣了,光是前端這個名詞,可能就可以有多個分支
我在研究新的函式庫時,同時也會研究這個人(當然不是全部,不然一個 npm install 大概就要花一輩子去看了)。因為技術的創造者是人、函式庫的創造者是人、框架的創造者是人,大家都是有血有肉、有感情的人。
在 part1 當中我們提到了如何撰寫一個 JSON 解析器,並實作解析字串的功能,接下來我們把其他函數補上。(事實上只要知道基本原理,剩下的函數實作都是照本宣科而已)
今天會從解析 JSON 開始,講解如何從頭建立一個 JSON 解析器。由於 JSON 的架構簡單,很適合當作練習。
正當我開開心心用 svelte 實作了 smooth-scroll 之後,我發現其實可以用一行 CSS 達到
今天跑去看 Svelte 原始碼,摸熟架構的同時順便看看有沒有什麼簡單的 issue 可以拿來練手。
感覺 rollup 本身的機制還沒有 webpack 那麼齊全
但是 Svelte 走的路也註定會遇到一些問題,最主要的就是 Svelte 沒辦法在 runtime 當中幫你做太多事情。
第一次看到 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…
語意化、類別命名、事件傳播