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
#, | Oct 14 2018

[Bootsrtap 4 進階] 客製化你的 styles

誰適合閱讀 有用過一次以上 Bootstrap 的人 從 bootstrap 3 出來之後我非常頻繁的使用過一年,但在 CSS Flex 流行之後就不用了.為什麼? 因為案子 compo...

#, | Aug 19 2018

前端修煉時光屋2

接續上一篇的一~四關,接下來是五~九關 [week5] Comic Viewer 設計稿 線上範例 Source code 大神直播 收穫 這一關在程式上沒什麼突破,反而在設定跟部署上學到許...

#, | Aug 18 2018

前端修煉時光屋1

這個活動是六角學院主辦的,它重新燃起我對 coding 熱情,太值得紀念所以一定要記錄一下 一週挑戰一個修練主題,總計九週.你可以依照我們提供的修練主題,主動練習自己想投入的新技術。為了確保每週都能...

# | Oct 27 2017

F2E 寫 Razor 兩三事 – C# 也太難懂了吧

我是一個 Front-End, 沒有想要碰後端的意思,但公司案子都是 .net ,當然 view 就直接用 razor 了, 這代表還是需要用 visual studio 開發(至少要讓他開在那才能跑...

# | Aug 14 2017

Performance Optimize (效能優化) – WebP & purifycss

今天會介紹 webP 跟 purifycss ,webP 是一種全新的圖片格式,可以比 jpg、png 小一半以上!purifycss 則是可以幫你移除網頁沒有用到的 css ,優化你的網站,適合多...

# | 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 部分(因為我是前端工程師嘛......

Older→