十分鐘、五步驟，SVG 動起來！
前言在 Codepen 上常常看到很多會設計又懂寫前端的高手，用 SVG 畫出很漂亮的圖案後，還能讓他們產生可愛的動畫，我一直很好奇他們是怎麼實作的，總覺得很困難，好像得對 SVG 透徹了解，並且自己畫出那些 SVG 圖案，才有辦法實作動畫。但其實不然，今天就來分享一個簡單的小技巧，讓你在短短十分鐘內就能讓一個靜態的 SVG 圖案活躍起來！ 簡單看個成品，你可以點選下面範例中的 build 按鈕，可以看到原本靜止的 SVG 房子動了起來
Web Accessibility 的重要性
前言你是否曾因為網路上被歧視、被霸凌的新聞或影片而憤憤不平？你是否曾因為各種身殘心不殘的勵志故事而感到激勵？如果你有過上述經驗，那當你在製作網站時，是否曾經考量過 Web Accessibility（a11y） 呢？ 老實說，我真的很少在實作時認真的驗證自己的網站的可訪性，花在考量是否能支援 IE 9 的時間還比較多一些。（想當年在政府機關服務時，看到局處長很自豪官網拿到無障礙網站評等第一時，還覺得莫名其妙，想說網站這麼醜，到底哪裡無障
深入 Session 與 Cookie：Express、PHP 與 Rails 的實作
前言這是一系列共三篇的文章，我稱之為 Session 與 Cookie 三部曲。系列文的目標是想要由淺入深來談談這個經典議題，從理解概念一直到理解實作方式。這是系列文的最後一篇，三篇的完整連結如下： 白話 Session 與 Cookie：從經營雜貨店開始 淺談 Session 與 Cookie：一起來讀 RFC 深入 Session 與 Cookie：Express、PHP 與 Rails 的實作 第一篇以白話的方式來談 Ses
一起來了解 Web Authentication
前言在今年年初的時候，W3C 正式將 Web Authentication (WebAuthn) 列入正式標準，開發者可以透過 API 啟動 FIDO 2 驗證，讓使用者透過行動裝置、指紋辨識或硬體安全金鑰來登入帳號，不需輸入密碼！ 雖然目前支援度還不高，但既然已成為標準，沒理由不來認識一下何謂 Web Authentication，以及我們可以如何使用。今天就一起來了解我們能如何使用 Web Authentication，增加網站安全
淺談 Session 與 Cookie：一起來讀 RFC
前言這是一系列共三篇的文章，我稱之為 Session 與 Cookie 三部曲。系列文的目標是想要由淺入深來談談這個經典議題，從理解概念一直到理解實作方式。這是系列文的第二篇，三篇的完整連結如下： 白話 Session 與 Cookie：從經營雜貨店開始 淺談 Session 與 Cookie：一起來讀 RFC 深入 Session 與 Cookie：Express、PHP 與 Rails 的實作 在上一篇裡面，我們提到了 Sess
淺嚐 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
46 年老技術與 Web 的新火花 - Actor Model in Web
前言在今年的 Google I/O 2019 中，@Surma, @Jake 與 @Mariko 推出了一款能在低階的 feature phone 上運作順暢的 web app - PROXX，其中利用到了 Web worker 來分擔許多 Browser main thread 中的工作，讓畫面渲染可以更順暢，也因此讓我注意到去年在 Chrome dev summit 2018 中的一支影片 - Architecting W
從頭打造一個簡單的 Virtual DOM
前言過年除舊佈新，剛好趁這個機會來複習一下已經是老觀念的 Virtual DOM。很多人在講到 React 的時候都一定會提到 Virtual DOM，而問到 Virtual DOM 的好處時，就會說到實際 DOM 的操作成本很貴，所以透過 Virtual DOM 可以降低成本。 你在除夕餐桌上這樣講可能沒問題，面試只講這樣應該不太好。 畢竟你最後還是會操作實體 DOM 啊，這樣說明太簡化了。 Virtual DOM 的由來可以從 MV
Go Web 程式設計入門教學：語法基礎之流程控制（flow control）篇
前言之前我們曾介紹了如何建置 Go 變數和資料型別的使用，接下來的單元我們將透過 Golang Web 程式設計來學習 Go 這個程式語言。而在這個單元中我們將介紹 Go 的流程控制的使用。程式語言唯有動手作才能學的好，你可以參考之前的文章建置開發環境或是使用線上開發環境進行學習。 流程控制簡介一般而言，程式語言是由上往下執行，若我們需要程式依照我們設計的邏輯方向執行就需要流程控制的協助。在這邊主要談的流程控制有三部分：條件判斷、迴圈
Go Web 程式設計入門教學：基礎介紹與環境建置
前言Go 程式語言 是 Google 推出的靜態程式語言，其特色在於核心語法和關鍵字非常精簡（全部只有 25 個關鍵字！）並擷取了靜態語言的效能和動態語言的開發效率的優點，具備垃圾回收、快速編譯等特性，且針對平行化程式設計在使用上非常方便。接下來的文章我們將透過 Golang Web 程式設計來學習 Go 這個程式語言。程式語言唯有動手作才能學的好，你可以參考本篇文章建置開發環境或是使用線上開發環境進行學習。 Go 環境建置安裝方式：