Nice to Meet You

I’m Hannah, a Taiwanese 30 years old front end developer.
Learning and sharing always makes me happy, and I am interested in the new things including coding and design.

Skills

  • HTML, RWD
  • JS, ES6, AngularJs, VueJs, jQuery
  • CSS, SASS, SMACSS/MVCSS
  • PHP, Wordpress
  • Git, Gulp, webpack

Experience

  • 8+ years of working experience as a web developer, now is in afusion
  • Sass / css lecturer for prototype-hacker
  • Host a conference at FEDC
Contact me
# | Jun 1 2017

[html5] SVG – 核心篇

這一篇寫的會是第二種 create svg 的方法: 手刻 code SVG Elements 一個基本的 SVG 可能會是這樣.外面一定有一個 <svg> 的 tag, 裡面包 gra...

# | May 27 2017

[html5] SVG – 概念篇

SVG 是一種向量格式的圖像,也就是可伸縮也不會失真的圖像.應用如簡單的 logo/icon,但也可以做出非常複雜的互動圖表或是有趣動畫 browser support SVG vs. Canvas...

# | May 23 2017

[html5] File API

file API 可以讓網頁直接存取使用者的檔案,不需要先傳回 server 端處理再吐回來.例如限制上傳檔案大小跟格式、上傳一張圖片馬上可以出現預覽圖、允許使用者在離線狀況存取檔案等等. 當然網頁不...

# | May 16 2017

[html5] Media

若想添加影片讓當今瀏覽器看得到,步驟就像加圖片<img>一樣簡單,不需要像以前一定要用外掛或是寫一些很複雜的 markup.但要注意的是,每一個瀏覽器預設的 video 界面都不同,若想...

# | May 9 2017

[html5] Web Socket

Web Socket 是 browser 跟 server 握手後,可以同時並持續交換資料的方式之一,常見例子是拿來做聊天室.這一篇會著重於 client-side 部分(因為我是前端工程師嘛......

# | May 2 2017

[html5] Web Storage

Web Storage 是一種可以把資料存在 client 端的技術, 可以用來存你是否登入,或購物車裡存了哪些東西 (就算重新整理也不會不見) browser support 你可能想到了 coo...

#, | Apr 14 2017

[html5] HTML5 Semantics

HTML5 Semantics 大家都會用,但用的合適嗎? 這邊不會全部列出 HTML5 Semantics ,而是整理一些容易被誤用或濫用的 tag ,以及自己的建議用法 若對其他 Perform...

# | Mar 30 2013

[html5] Offline 離線與快取

(此文於 2017 / 4/ 23 更新) Offline 顧名思義,就是會預先下載檔案讓使用者在離線狀態下,還能正常運作。瀏覽器支援表 怎麼用呢?簡單來說就是你需要列就算斷網,但使用者還是看的到...