Web Accessibility 的重要性
前言你是否曾因為網路上被歧視、被霸凌的新聞或影片而憤憤不平？你是否曾因為各種身殘心不殘的勵志故事而感到激勵？如果你有過上述經驗，那當你在製作網站時，是否曾經考量過 Web Accessibility（a11y） 呢？ 老實說，我真的很少在實作時認真的驗證自己的網站的可訪性，花在考量是否能支援 IE 9 的時間還比較多一些。（想當年在政府機關服務時，看到局處長很自豪官網拿到無障礙網站評等第一時，還覺得莫名其妙，想說網站這麼醜，到底哪裡無障
從製作 visfest 2019 badge 認識 ObservableHQ
前言軟體工程師應該很少沒參加過 Conference 吧，不管是社群或是學術性的，只要是與會者都會拿到一面主辦方製作的名牌，上面除了印著你的大名外，大多就剩下 Conference 名稱與 Logo 了，然而，由灣區的資料視覺化社群所舉辦的年度聚會 - visfest unconf 很是特別，他們提供與會者一個製作自己 badge 的機會，讓大家自行發揮創意，特別之餘也很符合整個會議的調性。今年八月是他們舉辦的第五屆 visfest
淺嚐 Web AR
前言近年 VR/AR 一直不斷出現在大家的視線內，雖然一直沒有什麼殺手級的應用出現，但這阻止不了開發者們的雄心壯志，尤其是 JavaScript 社群，畢竟 Jeff Atwood 說過： “Any application that can be written in JavaScript, will eventually be written in JavaScript.” — Jeff Atwood, Author, E
淺談 JavaScript 頭號難題 this：絕對不完整，但保證好懂
前言在 JavaScript 裡面，有一個令新手十分頭痛，老手也不一定能完全理解的主題：「this 是什麼？」。身為一個以 JavaScript 當作吃飯工具的前端工程師，我也被這個問題困擾了許久。 我原本以為我這輩子都不會寫有關於 this 的文章。 原因有兩個，第一個是講解 this 的文章已經超級無敵多了，而且每一篇都寫得很不錯，之前看完 What’s THIS in JavaScript ? 系列之後覺得講解的很完整，若是沒有把
從頭打造一個簡單的 Virtual DOM
前言過年除舊佈新，剛好趁這個機會來複習一下已經是老觀念的 Virtual DOM。很多人在講到 React 的時候都一定會提到 Virtual DOM，而問到 Virtual DOM 的好處時，就會說到實際 DOM 的操作成本很貴，所以透過 Virtual DOM 可以降低成本。 你在除夕餐桌上這樣講可能沒問題，面試只講這樣應該不太好。 畢竟你最後還是會操作實體 DOM 啊，這樣說明太簡化了。 Virtual DOM 的由來可以從 MV
所有的函式都是閉包：談 JS 中的作用域與 Closure
在正文開始前先幫自己小小工商一下，前陣子把自己以前寫過的文章都放到了 GitHub 上面，那邊比較方便整理文章以及回應，如果有想討論的可以在這篇文章的 GitHub 版本下面留言，想收到新文章通知的也可以按個 watch，感謝。 前言請先原諒我用了一個比較聳動的標題，因為實在是想不到還有什麼標題好下，最後選擇了一個可能比較有爭議的標題，但能利用這樣的標題激起討論也是滿有趣的，何況我說這話也是有根據的。 在觀看此篇文章之前請先看過上一篇：
我知道你懂 hoisting，可是你了解到多深？
前言這陣子我在忙一些教學相關的東西，稍微準備一些資料之後教了學生們 JavaScript 裡面的 hoisting，也就是「提升」這個觀念，例如說以下程式碼： 12console.log(a)var a = 10 會輸出undefined而不是ReferenceError: a is not defined，這種現象就叫做 Hoisting，變數的宣告被「提升」到最上面去了。 如果你只想了解最基本的 hoisting，其實差不多就是這
FLIP 技巧總複習
前言在前端的世界中，如何優化 performance 一直都是很重要的議題，也常常被拿來當作評斷前端工程師能力的一個依據。效能調教有許多方面可以探討，但最主要的重點就是希望使用者在操作網站時，不會感受到頁面跳動，尤其是當網站有動畫效果時，些微的跳動就會引起使用者注意。 大概在去年的時候，同事為了解決 CSS Animation 在頁面上的不順暢，研究了不少 hack 技巧，其中一個讓我覺得很特別的就是今天的主角：FLIP。 FLIP 技
透過製作 Babel-plugin 初訪 AST
前言最近公司同事組了 Design pattern 的讀書會，剛好這週研讀到 Visitor Pattern 時，同事介紹說我們每天在用的工具 Babel 就是採用 Vistor Pattern，透過 visitor 拜訪 AST (Abstract Syntax Tree)，進而將程式碼進行對應轉換。 這除了勾起我前陣子想要了解 AST 的想法外，也再度提醒我對於 Babel Plugin 背後的實作方式不太了解，只知道像是 ESLi
使用 AntV 製作資料圖表-台灣老年人口與長照機構供需比
前言隨著年齡增長，多少開始會遇到家人或親戚需要長期照護，入住療養院或醫院的狀況，接者就會發現許多照護中心可是一位難求，院中的照服人員或是醫護人員也得以一擋百，讓我很想知道目前台灣整體來說，老年人口、長照機構與照服人員的比例失衡有多嚴重。而剛好在前陣子 @huli 大大介紹了Ant design，讓我再次注意到同樣為螞蟻金服出品的 AntV，稍微研究之下發現它使用起來非常簡單快速，並且一樣有 React、Angular 與 Vue 的版本