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
#, | Aug 18 2018

前端修煉時光屋1

f2e
這個活動是六角學院主辦的,它重新燃起我對 coding 熱情,太值得紀念所以一定要記錄一下

一週挑戰一個修練主題,總計九週.你可以依照我們提供的修練主題,主動練習自己想投入的新技術。為了確保每週都能挑戰功能,會建議70%用自己會的技術,30%使用剛學會的新技術,以避免挑戰曲線不會過高。

以上是前端修煉時光屋的練習方向.讓我一看到就非常心動而報名,原因是自己工作也八年了,公司案子類型都大同小異,到最後頗無聊.自己找練習又常沒動力去完成.前端修煉屋每一關只有一週,對我來說有點競賽的感覺,不知道為何就是覺得要逼自己在大神直播前做完 (其實是媽媽我週末要帶小孩根本沒空做,覺得參加這活動當媽媽應該只有我一個人了吧 笑XD )
最後竟然真的九週都完成了.而且每一關完成度都有 90% 以上 (呃,其實第七關 canvas 沒有算在內啦,實在太有挑戰了)
這一篇只算是自己的心得文,不會有什麼教學喔.我是 vue.js 愛好者,所以幾乎每一週都用 vue.js 寫.


[week1] Todolist

f2e1

收穫

  • codepen: 不適合放太複雜的 code
  • flexbox: order 真的超好用的,以前可能要寫一堆 array 幫忙存,現在 css 就可以搞定了.
  • 認真覺得用 vue.js 比用 jquery 快好多

 

[week2] Filter

f2e2

收穫

這一週學到好多~

  • vue-cli: 之前只用過 nuxt.js, 第一次用 vue-cli 做出一個完整的 side project.路徑設定其實都差不多只是位置不同而已.雖然 nuxt 可以做的事情更多,但這九週題目 vue-cli 就非常夠用了
  • vuex: 之前已經用過,但這次搭配 …mapState 系列,真的快 超 多! 不然一開始覺得 vuex 真的很煩要寫好多東西.
  • ESLint: 慚愧地說工作這麼久還真的沒用過 eslint, 大家都是自己挖的坑自己跳 XD.坦白說一開始用很煩,一直跳 error, 不過這也代表自己的 code 也頗髒… 需要改進這一部分
  • element-ui: 自己近幾年很少用 bootstrap ,因為公司設計師的 component 全部都是客製化.會用也只用到他的 grid system, 但後來 flex 盛行又很方便,所以都自己寫為主. element-ui 提供超多程式面的 component (不只有畫面),讓我能真正快速開發
  • underscore.js: 自己先懂得原生 js array method 之後搭配使用也簡潔更多

 

[week3] Admon order

f2e3

收穫

  • faker.js: 這次挑戰需要做假資料的地方相當多,身為一個工程師,就是懶! 最討厭這麼多重覆的事, 所以找了 faker.js 他可以自動幫你生出許多類別的假資料.用法也相當簡單.但其實我弄完並不是覺得太好,因為假資料的目的是為了暫時性的取代從後台來的 API, 我把假資料放在 js 而不是 json, 到時候有真資料可能又要花時間取代.後來看到一篇好文 使用json-server和faker.js模拟REST API 能這樣模擬實在太棒了阿! 下次再試試看
  • element.js: 這次運用它的 table, 再次覺得 element.js 真好用,一般使用 library 最怕就是沒有彈性很難改,但 element 提供許多擴充性讓你可以無痛加上自己的東西

 

[week4] Product Gallery

f2e4

收穫

  • css Grid: 之前曾經學習但沒真正用在案子上,這次算是開了眼界,但對於 grid 要如何 RWD 還不是太熟悉.這裏分享一下別人寫的 grid 筆記
  • . 這裏也有 Amos 老師教學,有空再拜讀一下