方格精選

我的前端之路(網頁前端工程師職涯)

閱讀時間約 7 分鐘
在跟社群朋友私訊時,他說我可以考慮分享「我的前端之路」之類的啊。覺得這真是一個很不錯的主題,每個人都有自己的故事!不愧是個老師,會因材施教XD
在工作職涯上做各種嘗試體驗、跌跌撞撞的過程

本科系畢業、碰前端之前

2012年我從交大資工畢業,當兵後進入台北標準的內湖科技公司,做後端,而且是韌體佔70%、後端30%。當時我感覺到我的擅長的,不是韌體,而是後端,畢竟是資工系出身的。
2015年,進入高雄的傳產工作,維護網站,主要用PHP, MySQL, 以及jQuery 做事。我發現我也很有能力處理PHP的事,包括網站伺服器在LINUX上,那些LINUX指令、操作,甚至是解bug,有需求,我也都能靠著在學校碰過的 UNIX 系統培養出來的「sense」而去找出資料並解決。
2016年,在 Xdite 公司寫 Rails 做了2週,在被 Fire 前先離職。休息2週後,進入醫院資訊部。一開始寫 Delphi!維護健康檢查系統。

憧憬前端工作,但沒自信、不敢

當時的時代,是處於網頁前端正在開始蓬勃發展中,React 、Anguar 興起,ES6 開始被推廣,每隔半年前端的技術就翻新一倍。
做了很久的後端的我,發現自己跟別人比起來算是「擅長」後端,但是卻沒有成就感。反而自己對於貼近使用者的前端畫面,比較感興趣。但是……就只是有興趣而已,也沒有到很有熱情研究。
國外也開始流行「UI/UX」這門學問,但這麼新又設計的東西,我也不知道能當飯吃嗎?或是「我」有本錢把它當飯吃嗎?我不知道。我不敢。
後來公司當時資訊部主任決定做「前後端分離」,我也不敢自己說「我要轉前端」這種 影響職涯的事。在某一次公司會議上,有 guts 的主任,把工程師依照個性分兩邊,一邊前端一邊後端,我被分到前端。從此開始了我的「前端」職涯。
一開始學就是 React,因為公司有人稍微會帶。一開始用後端的思維在碰前端時,就是各種不解。因為沒有前端框架、MVVM的思維,以及連 NPM 的概念都覺得很抽象。每一個套件的 Github 說明文件,我連首頁文件都看不懂,好挫折。
找公司大佬問「為什麼我連這種基本的文件都看不懂?」,他安慰我:「因為你不是前端領域的人,這要花時間培養的」
努力的我,週末的時間也邀同事一起去天瓏書局看 javascript 的 「this」概念。
經過了半年,在工作上邊學邊做,應該是最有效率的進步方式了。整個醫院的掛號系統的前端,幾乎都是我做的。對於 React + MobX 也掌握了精髓,有一次還產生足夠的自信到當時的RGBA & F2E 社群聚會上分享。

設計與美感 - 一生從沒碰過的東西

前端做久了,會發現一定碰到「設計」「美感」類的東西。這方面我一丁點概念都沒有,每天除了巴著公司的設計師問美感外,也自己去看了一堆「給外行人讀的平面設計、UI設計」書,也買了國外的設計線上課程!後來休假期間還直接花2萬去南陽街補習「平面設計」。
理工科畢業家裡又務農的我,逐漸了解什麼是「設計」,它沒有標準答案,但好像又有一個答案。每天開始學著講設計師的行話,秀作品平台behance、pinterest、dribbble、素材網站 Pexel、Pixabay 、透明度/不透明度、視覺、層級,常常掛在嘴邊講。
Sketch 出來後,我開始學用 Sketch 作圖,臨摹 Daily UI!然後把我的作圖丟到 台灣 UI/UX Designer 臉書社團,請各位設計師幫我「評圖」,常常被評得一踏糊塗,摧毀自我。

Vue 比 React 簡單?

開始發現很多藝術、設計背景的人在選前端框架,使用的是 Vue。但我當時只會 React,我並沒有能耐再自己學會 Vue 跟 Angular。
趁著換工作的時候,找了一間用 Vue.js 開發的公司,進去後,狂補 Vue,一邊工作一邊學,是最有效率的學習方式了。 Vue 的雙向綁定,很快的我就嚐到甜頭,難怪那些藝術設計師會選用vue開發網站,因為比 React 簡單又直覺!

想寫酷炫但不實用的網頁 - 程式藝術

工作之餘,開始對於寫出酷炫的網頁有極大的興趣。不是實用,而是「酷炫」!在找了很久後,發現這存在一個專有名詞: Creative Coding! 由 MIT 在推擴的 processing.js (後來演化成 p5.js) 。有一位台灣人吳哲宇特別在推廣!

與設計師的合作

我發現自己很喜歡跟設計師討論設計的。當公司專案的界面,我把設計稿切版出來後會去找設計師,當他是老闆,讓自己的前端頁面能過「通過設計師的美感審核」,我稱之為"設計師之眼"。 有些我做不到的,就會跟他討論,詢問為什麼他這樣要這樣排版、或是互相協商找出兩邊都能做到的事。
經歷過幾個設計師:「風格是紫色、半透明等,用Adobe AI」、「風格是淺色,用Adobe Xd」;「風格是對比、邏輯性強、用 Sketch」。

把前端套件上架 NPM

在對技術熱血的時期,當時 iThome 流行鐵人賽,我身邊的同事拿 fabric.js 來當作題材寫文章。讓我也稍加對這個在畫布上作圖的函式庫有一些了解。
而在工作的過程中,我跟熱血同事發現居然沒有一個 vue 的年曆,整個 NPM 生態系都沒有。於是和同事協作,一起開發一個 open source 套件上架 NPM,而一開始沒有人看到。 我主動上 Hacker News 宣傳我們自己做的前端套件,吸引了一些人點進來按星星。
後來又換了一間公司,也是用 Vue 的,游刃有餘,沒有進步什麼,只嘗試使用了 Nuxt.js。

跨足APP

也曾經對於寫APP著迷,研究了許多怎麼用網頁技術去包出app,在 NativeScript 社群泡了一陣子後,發現還是有不少限制。後來花了半年時間進入 Android APP 開發,買書、看線上課程、參與 LINE 社群,也上架了4~5個自己的APP。 但是在這個生態圈裡,發現 Android 的作業系統版本只要一更新,那些底層的 API 都不向下相容,全部都要依照版本重寫。而 Android 的作業系統版本又更新太快,感覺10個月就更新一次,社群的安卓工程師就哀豪一遍。 這讓我感覺,『難怪寫APP的工程師 薪資會比 寫Web 的還要高,因為他們太累了xd』同時我也果斷放棄,不讓這一塊領域佔用我的時間,因為比起不斷變動的 Android 環境,我還是比較喜歡「穩定的網頁環境」。
技術變動比較: 後端 < 前端 < APP

對前端產業的心得與看法

基本上我的前端工作資歷,就是:2年 React、3年 Vue。現在是第4年。而這之中經歷4間公司。
而當三大框架我摸了2種後,我漸漸感覺,在這個時代下,前端已經『穩定』很久了,早已不再像5年前那個「每半年前端技術都翻新倍」的狀態。 框架已經解決了所有看得到的問題。
任何新的前端需求都能解,需求是從「人」從「老闆」從「PM」來的,人能想得到的東西,現在的框架都能游刃有餘的解掉。(只要人的邏輯不要太矛盾即可)
為什麼會看到廣告
2會員
63內容數
留言0
查看全部
發表第一個留言支持創作者!
丁丁的沙龍 的其他內容
會讓我覺得是「好電影」的,就是能在電影時間讓我「進入另一個世界」,甚至進入另一種人生! 在這個2022年大家「大談性事」、性交易早已合法化的時代,可以看到歐美對於性交易、應召女的歧視。 這部電影2小時半,原以為是單純性愛人生的劇本而已,沒想到還有後續,從良,跟之後發生的事。 這一部,我可以二刷!
女友在電話中說我最近沒情感沒靈魂,不知道我到底要什麼。 或許有吧,我一直在跟身邊的人說我慢慢變得理性,而那是我以前討厭的樣子,但是卻不可逆。 重新認識一件事情:主管交待的事情,基本上是指令。不是拿來反駁的。除非太誇張。 這些極度功利的事情,讓我在公司8小時變得比較不快樂。只有苦中作樂。
閒聊裡,坐我對面的人提到他常常是同學會那個發起者。但是出社會後想跟陌生人聚會交流,真的純的是少之又少,通常會附有主辦利益。 五月天《乾杯》有一段歌詞: 期待你、期待他 開個同學會。他在等你、你在等我、我在等誰?又是誰孩子沒睡、電話沒電、心情沒準備? 有人也有「發起」這個特質的嗎?
前陣子讀書會的主持人提到希區考克的《親愛的人生》裡提到對老人的照顧方式是投入非常少資源在上面的。 我並沒有特別要崇洋媚外,而是我的心中一直都覺得「老人就是沒有價值的東西」包括我老了,也是對社會群體沒有價值的東西,我現在歧視老人,老了以後換我被歧視,剛好又合理。 根本價值觀是:
上一次的無蔽讀書會結束後我有一種難以言諭的感受,自責、羞愧、憤怒、不屑。 在最後正凌講到後來哭後,我開始跟我旁邊的人講話,確定他的疑惑以及意圖後,我開始分享我的例子。 結果講到一半小齊就插進來宣布這場讀書會先這樣,結束。 被權威結束發言。 因為一旦放鬆講話、講長一點的,就會被打斷。
2022-06-19 有人說他曾經試著在換學校的時候當作換環境,一切能重來,但後來發現最後的結果會差不多。很真實的體悟分享。 💦 人是感性加理性的生物,這大家基本上都同意。但是「我們現在在理性討論,所以就應該把人當作理性的生物」這個推論是從根本上錯誤的。 💦 其實超過半數的人會直覺的說對。
會讓我覺得是「好電影」的,就是能在電影時間讓我「進入另一個世界」,甚至進入另一種人生! 在這個2022年大家「大談性事」、性交易早已合法化的時代,可以看到歐美對於性交易、應召女的歧視。 這部電影2小時半,原以為是單純性愛人生的劇本而已,沒想到還有後續,從良,跟之後發生的事。 這一部,我可以二刷!
女友在電話中說我最近沒情感沒靈魂,不知道我到底要什麼。 或許有吧,我一直在跟身邊的人說我慢慢變得理性,而那是我以前討厭的樣子,但是卻不可逆。 重新認識一件事情:主管交待的事情,基本上是指令。不是拿來反駁的。除非太誇張。 這些極度功利的事情,讓我在公司8小時變得比較不快樂。只有苦中作樂。
閒聊裡,坐我對面的人提到他常常是同學會那個發起者。但是出社會後想跟陌生人聚會交流,真的純的是少之又少,通常會附有主辦利益。 五月天《乾杯》有一段歌詞: 期待你、期待他 開個同學會。他在等你、你在等我、我在等誰?又是誰孩子沒睡、電話沒電、心情沒準備? 有人也有「發起」這個特質的嗎?
前陣子讀書會的主持人提到希區考克的《親愛的人生》裡提到對老人的照顧方式是投入非常少資源在上面的。 我並沒有特別要崇洋媚外,而是我的心中一直都覺得「老人就是沒有價值的東西」包括我老了,也是對社會群體沒有價值的東西,我現在歧視老人,老了以後換我被歧視,剛好又合理。 根本價值觀是:
上一次的無蔽讀書會結束後我有一種難以言諭的感受,自責、羞愧、憤怒、不屑。 在最後正凌講到後來哭後,我開始跟我旁邊的人講話,確定他的疑惑以及意圖後,我開始分享我的例子。 結果講到一半小齊就插進來宣布這場讀書會先這樣,結束。 被權威結束發言。 因為一旦放鬆講話、講長一點的,就會被打斷。
2022-06-19 有人說他曾經試著在換學校的時候當作換環境,一切能重來,但後來發現最後的結果會差不多。很真實的體悟分享。 💦 人是感性加理性的生物,這大家基本上都同意。但是「我們現在在理性討論,所以就應該把人當作理性的生物」這個推論是從根本上錯誤的。 💦 其實超過半數的人會直覺的說對。
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
很幸運地, 我和老伴都安然無恙。地震發生是在我們開車出門到市場買菜。剛停下車,關上車門,整個天搖地動就發生了,而且持續了有一分多鐘之久。整個人像是被丟入 “驚濤駭浪” 之中, 不知道如何是好。
Thumbnail
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域 八、軟體公司的前端工程師之路 新公司不是做網頁專案的,而是自己研發資安軟體的公司,主要只有一個大專案,跟很多客製化的需求。 我在這次轉職時有考慮到,我其實不太喜歡一個案子做完就結束的感覺,因為那會讓我覺得這些作品做完好像也不是我的東西..
Thumbnail
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域 五、網頁設計師要做什麼? 說實話,每間公司不一樣。 我不是只面試一間而已,光是網頁設計我應該至少投了十間以上,我問到的職務內容跟範圍不全然相同。依照公司規模和用的框架,會有滿大的差別。 網頁設計主要分成以下工作:
Thumbnail
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域 一、為什麼想轉職? 初次踏入網頁設計這一行,是在我26歲時。 為什麼想轉行呢? 在這之前,我是個畢業於化學工程學系,每天在實驗室中跟檢體搏鬥的化驗員。你以為實驗室化驗員薪水很高嗎?並沒有,起薪23k而已,你做好幾年把考核...
Thumbnail
【多桑書評時間】 感謝哲青哥,我是多摸摳桑,兩位寶貝兒子的爸 這是一本記錄哲青哥在國外求學、旅行、工作,到後來進入演藝圈的點點滴滴,『世界的另一端,有我所愛、與我愛的人,在等候我回來』… https://www.youtube.com/watch?v=qvcpycAE_GA
Thumbnail
早上看了《親愛的房客》,覺得那種懸疑式的溫情片很好看,用一種致命的吸引力去淡化太濃烈的情感。我不喜歡看太感人的劇情,但我卻很喜歡眼淚能剛好收在眼眶裡打轉的那種,像是《俗女養成記》,或是這部。唯一一個不太合意的地方是每個角色都好低氣壓,當然他們都有自己痛苦跟壓抑的地方,但從頭到尾都這麼淡漠,包括面對應
前言 我的支氣管一直都不好,原來來自那場大火。 也不知道為何能寫出文字,靈感來自何處,才明白前世今生。 這輩子一直有一場古代夢,原來是帶了遺憾。 前因 這次的付費服務,看了三世。 我有說過,我一直以來都搞不懂自己。透過人類圖知道了自己的設計,開始有了察覺之旅,懵懂之間讓我學會與自己相處。 「人生最難
Thumbnail
部落格流行時代,我在明日報開始《土耳其隨筆》的書寫,當時只是為了存檔我陸續發表在報刊的文稿,可是,後來變成既是已發表文章的倉庫,又是抒發感情的秘密花園,把個部落格搞得公不公私不私,混亂得無法收拾,於是就轉到臉書去。」
Thumbnail
相信很多人和我一樣,從小在台灣總是聽到大家說美國教育比較好有機會一定要到美國念書之類的說法,當時覺得美國那麼強大、人才濟濟,大人說的話應該是對的吧?!就沒再懷疑過著件事了。抱持著這樣不疑的心態,終於有一天來到美國求學。小魯蛇的我研究所生涯並非突出,再加上在美國外國留學生是無法打工,日子就和一般留學
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
很幸運地, 我和老伴都安然無恙。地震發生是在我們開車出門到市場買菜。剛停下車,關上車門,整個天搖地動就發生了,而且持續了有一分多鐘之久。整個人像是被丟入 “驚濤駭浪” 之中, 不知道如何是好。
Thumbnail
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域 八、軟體公司的前端工程師之路 新公司不是做網頁專案的,而是自己研發資安軟體的公司,主要只有一個大專案,跟很多客製化的需求。 我在這次轉職時有考慮到,我其實不太喜歡一個案子做完就結束的感覺,因為那會讓我覺得這些作品做完好像也不是我的東西..
Thumbnail
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域 五、網頁設計師要做什麼? 說實話,每間公司不一樣。 我不是只面試一間而已,光是網頁設計我應該至少投了十間以上,我問到的職務內容跟範圍不全然相同。依照公司規模和用的框架,會有滿大的差別。 網頁設計主要分成以下工作:
Thumbnail
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域 一、為什麼想轉職? 初次踏入網頁設計這一行,是在我26歲時。 為什麼想轉行呢? 在這之前,我是個畢業於化學工程學系,每天在實驗室中跟檢體搏鬥的化驗員。你以為實驗室化驗員薪水很高嗎?並沒有,起薪23k而已,你做好幾年把考核...
Thumbnail
【多桑書評時間】 感謝哲青哥,我是多摸摳桑,兩位寶貝兒子的爸 這是一本記錄哲青哥在國外求學、旅行、工作,到後來進入演藝圈的點點滴滴,『世界的另一端,有我所愛、與我愛的人,在等候我回來』… https://www.youtube.com/watch?v=qvcpycAE_GA
Thumbnail
早上看了《親愛的房客》,覺得那種懸疑式的溫情片很好看,用一種致命的吸引力去淡化太濃烈的情感。我不喜歡看太感人的劇情,但我卻很喜歡眼淚能剛好收在眼眶裡打轉的那種,像是《俗女養成記》,或是這部。唯一一個不太合意的地方是每個角色都好低氣壓,當然他們都有自己痛苦跟壓抑的地方,但從頭到尾都這麼淡漠,包括面對應
前言 我的支氣管一直都不好,原來來自那場大火。 也不知道為何能寫出文字,靈感來自何處,才明白前世今生。 這輩子一直有一場古代夢,原來是帶了遺憾。 前因 這次的付費服務,看了三世。 我有說過,我一直以來都搞不懂自己。透過人類圖知道了自己的設計,開始有了察覺之旅,懵懂之間讓我學會與自己相處。 「人生最難
Thumbnail
部落格流行時代,我在明日報開始《土耳其隨筆》的書寫,當時只是為了存檔我陸續發表在報刊的文稿,可是,後來變成既是已發表文章的倉庫,又是抒發感情的秘密花園,把個部落格搞得公不公私不私,混亂得無法收拾,於是就轉到臉書去。」
Thumbnail
相信很多人和我一樣,從小在台灣總是聽到大家說美國教育比較好有機會一定要到美國念書之類的說法,當時覺得美國那麼強大、人才濟濟,大人說的話應該是對的吧?!就沒再懷疑過著件事了。抱持著這樣不疑的心態,終於有一天來到美國求學。小魯蛇的我研究所生涯並非突出,再加上在美國外國留學生是無法打工,日子就和一般留學