FLIP 技巧總複習

前言在前端的世界中,如何優化 performance 一直都是很重要的議題,也常常被拿來當作評斷前端工程師能力的一個依據。效能調教有許多方面可以探討,但最主要的重點就是希望使用者在操作網站時,不會感受到頁面跳動,尤其是當網站有動畫效果時,些微的跳動就會引起使用者注意。 大概在去年的時候,同事為了解決 CSS Animation 在頁面上的不順暢,研究了不少 hack 技巧,其中一個讓我覺得很特別的就是今天的主角:FLIP。 FLIP 技

Read More...

透過製作 Babel-plugin 初訪 AST

前言最近公司同事組了 Design pattern 的讀書會,剛好這週研讀到 Visitor Pattern 時,同事介紹說我們每天在用的工具 Babel 就是採用 Vistor Pattern,透過 visitor 拜訪 AST (Abstract Syntax Tree),進而將程式碼進行對應轉換。 這除了勾起我前陣子想要了解 AST 的想法外,也再度提醒我對於 Babel Plugin 背後的實作方式不太了解,只知道像是 ESLi

Read More...

使用 AntV 製作資料圖表-台灣老年人口與長照機構供需比

前言隨著年齡增長,多少開始會遇到家人或親戚需要長期照護,入住療養院或醫院的狀況,接者就會發現許多照護中心可是一位難求,院中的照服人員或是醫護人員也得以一擋百,讓我很想知道目前台灣整體來說,老年人口、長照機構與照服人員的比例失衡有多嚴重。而剛好在前陣子 @huli 大大介紹了Ant design,讓我再次注意到同樣為螞蟻金服出品的 AntV,稍微研究之下發現它使用起來非常簡單快速,並且一樣有 React、Angular 與 Vue 的版本

Read More...

進階 React Component Patterns 筆記(下)

前言上次我們介紹了三種 Rect Component Patterns,包含 Compound component、Render props component 與 Prop collections & getters,而今天要繼續往下介紹剩下的五個 Patterns: State Initializers State Reducer Control Props Provider Higher-order component

Read More...

進階 React Component Patterns 筆記(上)

前言前不久在 Frontend masters 看到一部影片 Advanced React Patterns,是 Paypal 的工程師 Kent C. Dodds 在某場 workshop 介紹他實作 React component 時所使用的進階 React Patterns(目前似乎要付費觀看,而他在 egghead.io 上也有一系列教學,同樣要收費就是了…),內容非常豐富扎實,若是想提供一些可高度客製化的共用元件,使用這些 P

Read More...

深入探討 JavaScript 中的參數傳遞:call by value 還是 reference?

前言其實這週原本是要來寫淺拷貝跟深拷貝的差異以及實作,但在找資料的時候無意間又看到 call by value 與 call by reference 相關的文章,越研究發現越有趣。原本以為自己已經搞懂了這個問題,但沒想到看的資料越多,卻把自己弄的越糊塗。 要寫這篇文章其實有兩個不同的方式,一個是詳實記錄我研究這個問題的過程以及心中的疑惑,以及最後如何得到解答,簡單來說就是按照時間軸來寫;另外一個是當我研究完以後,再重新以自己的方式整理

Read More...

一起來了解 Javascript 中的 Proxy 與 Reflect

前言在眾多 ES6 提供的新功能上,Proxy 與 Reflect 算是最少被提及的,主要原因我想還是因為瀏覽器的支援度較低,不過在我前陣子看到 Frameworkless JavaScript Part 3: One-Way Data Binding 這篇文章時(好文推薦!很有趣),特意去查了一下才發現目前支援度已經越來越好: 常用的瀏覽器幾乎都支援,我想也是可以來好好了解一下這兩個神奇的物件了! 最後有個參考該篇文章實作的 To

Read More...

[筆記] JavaScript: Understanding the Weird Parts --- Build your own lib/framework

之前趁著 Udemy 特價,買了上面很有名的課程 - JavaScript: Understanding the Weird Parts,當初會想買是因為他最後面有個章節是介紹如何建構自己的 JS Framework,而我一直都很想有系統性地去瞭解建構一個可供大家使用的 JS library 或是 framework 需要注意哪些事項,該怎麼寫才是安全有彈性的結構。 後來大約花了三天的時間斷斷續續把課程上完,這邊紀錄一下該章節的一些筆記

Read More...