初試啼聲,只用原生 JS 跟 CSS 寫「口罩地圖 」Ep.00


Posted by ABow_Chen on 2020-05-11

寫在前頭


在這 Ep.00 裡,比較多的是前言,還看不到相關的技術探討,主要是交待一下時空背景、緣由及心路歷程。

我花了足足三個月,才慢慢磨出自己的「口罩地圖」:台灣口罩地圖-2020 防疫要贏,對兼職學習的我而言,卡關、徬徨與成就感交雜,是這三個月心情的總和,即便觀念、理解仍然有限,也總算是做出一個能 work 而且還算符合自己心中作品定義的第一號作品,我很清楚目前自己可能無法有多深入的技術探討,但我只要想到自己在面對問題時的毫無頭緒,就覺得肯定有人跟我面臨相同的處境,如果一篇技術門檻不高的「口罩地圖」指引文,能幫助到一些人,那也就足夠了。

而這也是為什麼,我用這個主題,當成我參與「w3HexSchool 鼠年全馬鐵人挑戰」的第一篇文章,因為「口罩地圖」的完成對我而言,確實是一個里程碑。

緣由


從決定轉職,開始認真投入六角學院的課程並努力自學,大概是 2019 年 06 月的事,這期間,盡可能督促自己跟上進度,所以順利地在十一月應徵上了六角學院第三波的遠端助教,這意味著我已完成了「JavaScript 入門-學徒的試煉」課程,並懵懵懂懂地完成了最終作業。

完成了一個既定目標後,心態整個放鬆下來,就這麼混混地過到了春節後,沒想到碰上了武漢肺炎疫情爆發,在「好想工作室」超商口罩地圖上線後(註 1),意外引發了全台灣最大的黑客松!一時間有志之士紛紛實作出自己版本的「口罩地圖」,看著大家陸續做出這個簡單卻意義非凡的貢獻,以轉職前端為目標的我,竟完全不知該做什麼,而朋友想拉我參與的 Side Project 也令我深感無力,因為意識到自己實在太弱小了,就在彷徨的時候,我在 Slack 發了私訊向六角學院的洧杰老師哭訴求助,而意想不到地,在情況許可下,老師與我進行了短暫的通話,了解我目前的情況,並給出一些建議。

洧杰老師的建議,讓我冷靜了下來,開始思考該如何實作出自己的「口罩地圖」,而六角學院也不忘為學員提供最強火力支援,應該是在通話完的當天(註 2),洧杰老師就在「The F2E-前端修練精神時光屋」貼文並加開了第十關-口罩地圖,而且在三天後,又加開了「Leaflet + OpenStreetMap 地圖應用開發」的直播課程,帶領學員朝攻克「口罩地圖」邁出一大步,也讓我吃了定心丸,對完成自己的「口罩地圖」這個目標又多了一點信心。

接下來,我會在這個系列文分享自己的 Code,並且描述自己在實作時如何卡關及如何找到解決方法,還請各位多多指教~

註 1:「好想工作室」在 2020.02.02 發表了「超商口罩地圖」,我就馬上關注到了,沒想到兩天後,有志之士紛紛投入並發表自己版本的「口罩地圖」,我趁著這波熱潮加入了 g0v 的 Slack,沒想到因此切入了「口罩供需資訊平台」的切版工作,做出了一些貢獻,2020.02.05 設計師 YingHsuan 提出協助的意願,並在隔天 02.06 完成了 UI 的初稿,在沒有太多細節及時間緊迫下,我在當天自己用 Bootstrap 4 建構了改版後的頁面,唐鳳則將此次的成果於 02.07 正式上版。

這個歷程,洧杰老師在也徵求我的同意後,發文分享了此事。

雖然這次經歷,我有一些微小的貢獻,一方面讓我欣喜,一方面卻更加覺得無法完成「口罩地圖」的自己實在太弱小了,所幸六角學院的火力支援很即時,才讓我今天可以完成作品。

註 2:由於 Slack 的私訊,免費版用戶無法看到歷史記錄,因此確切的時間點無法得知,僅能憑藉著記憶去推敲。


#口罩地圖 #javascript #css #六角學院 #台灣口罩地圖- 2020 防疫要贏







Related Posts

 JS30 Day 7 筆記

JS30 Day 7 筆記

rupa/z, autojump 設定

rupa/z, autojump 設定

無障礙網頁 HTML屬性

無障礙網頁 HTML屬性


Comments