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 19 2018

前端修煉時光屋2

接續上一篇的一~四關,接下來是五~九關


[week5] Comic Viewer

f2e5

收穫

這一關在程式上沒什麼突破,反而在設定跟部署上學到許多

  • githube page 部署: 之前已經知道部署需要新增 gh-pages, 但 master 程式碼跟 gh-pages 是一模一樣,之後修改等於兩個地方都要改. 原來可以做得更好,只需要把 vue-cli compile 好的 dist folder 放上去就好.感謝這篇教學

  • vue-cli 設定撇步: 這是我第一次看大神直播,Alex 在設定檔花了一些時間講解,對我受益非常大.在下一關也有用到他所說的 blueprint 概念 (等下解釋)

 

[week6] Validation

f2e6

收穫

  • UX: 怎麼會提到 UX,因為那時看設計稿發現表單同時有* 跟 optional 但通常只會出現一個,雖然只是設計師忘記補充,但最後不管是直播還是設計師都有講到某人提到XX,那個某人就是我,有點開心啊~~(開心什麼,就是個無名氏)
  • UI: 這次自己有改了一些 UI, 不管是 input 上還是最後信用卡畫面,希望能讓流程更順暢
  • vee-validate: 之前只用過 vuelidate,同樣是 vue 的 validate, 體驗一下不同外掛
  • blueprint: 這次試了 Alex 講的 blueprint, 這次 blueprint 目標是把 js, css, template 分成三個檔案,這樣才不會同樣在一個檔案程式落落長
  • json server: 第一次嘗試使用 json server,超實用的!之後也直接運用在公司案子,讓我不用等後端 API 完成就可以先寫前端邏輯
  • File API: 很久之前曾經寫過 file API 教學,但在工作上很少遇到,這次算再練習一次

 

[week7] Canvas Game

f2e7
大魔王關來了,這關我實在不好意思放線上範例出來,從來沒有寫過 canvas 小遊戲,連坐標定位都搞不清楚了.最後只勉強生出第一頁.吳哲宇老師在六角的直播講解超清楚,最後也決定買他的動畫互動網頁特效入門,CP 值真的很高,讓我很想好好學 canvas, 因為有很多數學運算,比一直刻 css 有趣多了啊!(雖然我現在 canvas 程度還是幼稚園而已吧).希望今年可以把這關好好寫完.加油~~

 

[week8] Parallax Scrolling

f2e8

收穫

  • TweenMax: 本來想用 css animation 做,但覺得 css 會變得又臭又長。 參考 吳哲宇老師的 twennmax 範例,實作了動畫(上一次自己用 tween 是 flash 時代了阿)
  • sass function: 這次借題發揮,寫了一個 sass 的 random function, random 許多三角形,蠻神奇的

 

[week9] Skill Tree

stage9

收穫

  • 效率: 本來以為最後一週是大魔王關,結果意外的還 ok,所以逼自己要在兩個晚上內寫完 !

結論

真的很感謝六角辦這麼費心費力的活動,大家互相學習激勵也更有動力。能在社團裡互助感覺真的很棒。期待下一屆~~~
最後竟然還有完成獎狀,實在是太用心了
fe210

補充

厲害學員寫得 tag 查詢頁面, 可以 multiple select 你有興趣的 tag 搜尋