API讓位於世界彼端的我們牽起雙手,在技術的浩瀚中大步前行

專案介紹

設計稿wireframe

GitHub repo

網站連結

API規格書

simple Twitter是一個由兩個前端加上兩個後端所組成的開發團隊。目標是在有限時間的交付日內開發出兼具功能、流暢使用性、良好使用體驗與美感、RWD適性的web app。

功能包括前後台、創辦帳號、登入、修改使用者資料、推文、回覆、按讚、追蹤等等….。根據設計師給出的wireframe來設計app架構,從web components的設計、API設計與串接、資料流的控制到request資料過濾與使用者體驗優化。是一個化繁為簡,再收斂優化的過程。

緊接著交付日,是為期兩天的黑客松,目標是在短時間內利用從前沒有接觸過的socket技術打造網站中的聊天室。

最終的產出是一個相似於twitter的社群網站。

我的角色定位


不只是做出來,能說出來、彼此溝同才能往規模更大的專案前進。

project goal: 為他人所製作的專案做後續優化與延伸。

project result: 專案成果

我完成了什麼?花了多少時間?為什麼要做這些事?

>> 這是一個廣告後台介面被同事做到一半,需要我來接手的狀況模擬。相信在職場中接同事的legacy code是常有的事,因此特別做了這些練習。總共花費了約三小時。

我碰到什麼困難?如何解決?

>> 因為有一段時間都在用Node.js與Express做後端的project,對於DOM的操作已經有點生疏…Orz,不過花了一些時間找資源都慢慢回想起來了。在處理html中的table時也是危機重重,想要在table head做出sticky的效果,但卻沒辦法讓父層元素產生auto-scroll,查了一些資料後才發現table元素沒辦法做max-height的限制,所以為他加個display: block來讓auto-scroll 出現,就做出來拉~

在coding的部分其實有點不太習慣,因為一直以來都適用standard style在coding,但是這次練習的事承接共同開發的專案,因此需要特別用專案本來的coding style去做到一致,不管是分號的使用、註解的使用,還是 JS function的安排都需要特別注意呢!

回頭檢視專案流程與成果時,我覺得可能有改善的空間的部分

>> 在HTML與CSS的各種工具特性還能持續做更深入的暸解。在此總結一個對於前端能力的總目標:快、穩、準。

:當然就是越快越好了。相信在熟悉工具與開發流程後能夠不斷提升速度~

:效能與維護性。在製作專案的同時也要不斷思考現在的寫法是否會造成效能的降低?降低效能所帶來的性價比值不值得?還有注意哪些部分需要特別寫出flex-code,方便在未來自己修改、設計師修改、產品異動時能夠方便快速的改動。

:製作畫面的sense,一種直覺與反射:精準的知道要用哪個工具、哪種結構或是演算法來開發。我的判斷是這需要相當的經驗來累積,只能靠不斷訓練來加強。


用純手刻網站的方式訓練切版神經

模仿目標網站

成果呈現

限時4小時版本

後續優化版本

1.為什麼選擇這個專案?

>> 在前端工程師的眾多職缺中,電商平台佔有相當大的比例。而對於想成為前端工程師的我而言,在有限時間內刻出畫面無非是必要的技能!

2. 使用的技術?

>> 在切版上沒有使用特別的框架與library,從頭到尾都手刻出來。在排版的部分上因為暸解到自己對於grid的掌握度還不是這麼完全,因此刻意練習將grid做更大範圍的應用,在元素之間的安排調度上更加靈活,也能在不使用media query的狀況下做出不錯的RWD效果!也做了更多關於偽類與偽元素的使用,讓html的結構保持更整潔、易維護、有更好的效能表現。

3. 專案中相對能掌握的部分?哪個部分花了最多時間?

>> 在這個專案中,對我來說最花時間的部分是擬定出切版工具。從接到設計師wireframe時,頭腦要很快的解析出最恰當的切法與使用工具,目前對於版面的敏感度還需要靠經驗去累積,切版意識還有相當的進步空間。

而比較能掌握的部分是版面的細節與正確工具的使用,比如說在header上seraching icon在手機版與桌機版的位置從左2跳到右3,因此不使用flex而用grid(雖然說flex一樣可以用order做出來,但在維護彈性上grid還是略勝一籌。)

4. 過程中遇到什麼困難?如何克服的?

>> 專案的過程中遇到困難其實是家常便飯,所以能不能很快的自己找到解法就變得很重要了。大部分的情況都是:我知道我要用什麼css屬性來做,但我忘記語法了所以就馬上去google、馬上找到答案。少部分的情況是我不知道為什麼我用了這個屬性但沒有效果,比如說在position: absolute的元件上使用z-index或是margin: auto (心裏OS就你問題最多),但是其實都是找得到原因的:google搜尋 position absolute margin auto issue就會跳出許多探討相關問題的”長輩文”。學習到絕對定位時區塊空間會崩解,因此margin: auto抓不到區塊空間,自然也就計算不出中間值了;z-index則是會繼承父親元素的屬性,因此需要重新思考如何安排。

5. 過程中對哪個前端技術有特別深刻的學習?

>> 那一定是grid了!因為刻意練習去使用grid的關係,發現grid不只是大家所知道的『二維排版工具』,同時在比較複雜或是變化較大的內容部署時相當好用的排版工具,還可以用template-areas,類似矩陣的方式部署子元素!相當厲害。

6. 整體檢討與反思

>> 在切版與畫面部署上比起死盯著wireframe刻,我覺得先反覆觀察RWD的部署才能用更正確的工具去執行。省得自己在做不同裝置時搞死自己!

有時對於畫面細節會不小心太鑽牛角尖(可能因為有點強迫症),但適時的停手往後進行在有限時間的情況下也是很重要的。

在切版的敏銳度上還有待加強,需要再透過大量的練習來培養反射神經。


緣起 — 專案介紹:server request logger

這個專案的目的是要在我用Express所設置的伺服器收到request時,log出接收到request的日期、時間、請求所用的method與請求的路由。而路由middleware是長這樣的:

於是我用Express所提供的use方法建立了一組middleware,在這個middleware裡面抓出request日期、時間、請求方法、路由URL,並把它組合成一組字串,console.log到terminal上。

定義問題 :double requesting

在我都設定好之後並測試時出現了奇怪的現象:


在這複雜的世界裡,嘗試用簡單的方式去解構它。

ORID self review

OBJECTIVE

用「現在的你」來比較「 1 個月前的你」,你是否感覺到自己某方面的技能進步?

最大的差異應該是對於前端世界觀的擴充,與實務上管理程式碼的方法:MVC system、利用SOLID principle 來優化程式碼。

REFLECTIVE

針對你說的進步點,這個進步點是怎麼累積出來的?在過去幾週你經歷了什麼樣的過程?過程中的哪些環節刻意練習到了這件事?

在專案規模不斷擴大之後會發現到程式碼數量不斷增加,在龐大的程式碼面前管理程式碼就變得特別重要了!如何降低程式碼之間的耦合性並讓函示所做的事情儘可能單一化變成在專案中主要練習的事情。在實作交友網站的過程中開始不斷接觸到狀態這件事情,也在後續的記牌遊戲中真正的用狀態機去操作狀態。

INTERPRETIVE

根據你這次的「成長經驗」,若要「持續學習,持續進步」,是否能提煉出任何「對你來說行得通的行為/心態」?或者你有沒有發現什麼行為/心態是行不通的?

對我來說這之中最大的障礙是在開發過程因為接觸許多新的管理方式或是功能,常常覺得很複雜,但通常把它定義為『複雜』之後會讓自己掉入一個心態陷阱中。所以我發現如果不要先入為主評斷它是一個複雜的事情會讓事情處理起來更加順暢。

DECISIONAL

總結。為你在下一階段學習的學習,給自己一些意見。

一句話來總結並且勉勵未來自己:

Stay Hungry, Stay Foolish.

Find your center, no panic.


淺談 Javascript在瀏覽器執行環境中實現Asynchronize非同步技術

所有的程序一次都只能做一件事,但誰說只能有一個程序呢?

Photo by on Unsplash

首先,同步是什麼?

同步:synchronize

從中文字面上去很容易誤解同步是多線程的意思,這是一開始很多中文開發者會對於同步與非同步有所誤解的原因。

同步指的其實是按部就班以達到 彼此配合 的運作模式,不同程式碼之間 互相配合、等待

然而這對於網路產品並不是一個使用者友善的程序模式,因為在網路產品中使用者會不斷地與程序有所互動,而使用者觸發互動時就可能會因為前方的程序還在進行而被阻擋(blocking)。

因此產生了Asynchronize 非同步技術來滿足這類的程序複數工作需求。

How it works?

在談 Asynchronize 非同步技術 之前,我們需要了解到Javascript本身是沒辦法做這麼多事情的……what?

>> 把工作交給其他人。

如果我沒有這個資源,那何妨不請其他人幫忙呢?

>> 執行環境小秘書是你的最佳人選。

>> 所以老闆也不是神嘛……只是請了一個好用的秘書而已XD

執行環境小秘書與老闆(Javascript)的特殊性關係 — event loop:

以網頁來說,Javascript必須在瀏覽器上執行,而瀏覽器就是Javascript程式的執行環境了。會說執行環境是小秘書是因為瀏覽器提供了許多網頁會需要用到的功能Web APIs(XHR),包括我們很熟悉的 setTimeout計時功能、AJAX Request、click event等等……。就像秘書一樣去幫助老闆處理那些需要等待、或是被觸發的事件,好讓老闆可以好好地做好他自己的事情,不要讓老闆被事情卡住而拖垮整間公司!

角色關係對照圖:


Photo by Tom Ritson on Unsplash

身為家裡蹲的少年 Ether,在待業期間突然發生意外被傳送到異世界。少年原以為自己完全沒有任何特長。但本來應該因為遭遇coding挫折而死去,回過神來後一切卻都被重置。發現自己「debug回歸」的特殊能力後,為了拯救自己的人生,少年跨越無數次絕望,一次次地debug並重新來過……。

第一章:掉入異世界

- 無窮遠的那道光是黑暗中的安全繩 -

那是一個淡黃色陽光以60度斜角射入房間的下午,少年搔著自己兩天沒洗的頭,用他那不知道還能撐到什麼時候的蘋果電腦瀏覽著104求職網。原以為自己會朝UX designer或是product designer發展的他發現自己對於這些知識根本就不專精 — — 因為他那由你玩四年的大學生活,再想想以低空飛過的畢業證書……。

少年終於意識到自己不斷在逃避『對自己的專業並沒有熱情』這件事,這個想法像一根狼牙棒敲在他頭上逼他用他失去已久的良心譴責自己的不負責任,於是少年開始有了想改變的念頭。

他開始回想自己除了打電動,上一次專注到能夠廢寢忘食、心無旁騖的時候是什麼時候? 他想起了他在大學二年級暑假期間破解遊戲的日子:不用睡覺不用吃飯,因為想要做到所以一定要做到 — 就算碰著自己根本就不懂的程式語言也不會氣餒,在網路上瘋狂的吸收知識的那種感覺。然而他並沒有這方面的實際學習經驗,所以他挑了一個自己比較有興趣且易上手的領域『前端工程』進行研究與學習。

第二章:進入魔界學堂

-那看似不起眼的前進距離會帶你到你無法想像的地方 -

少年開始從自學HTML、CSS開始他的野外冒險之路了。剛開始因為初來乍到對於任何新知都以超級大的幅度在進步著,瘋狂從網路上各種資源吸收著相關的知識並動手練習,他知道他是滿足的。但很快就遇到了瓶頸:在遇到JavaScript時他遇到了成為冒險者以來最強的對手,歷經了幾番纏鬥都沒能成功過過關斬將,他開始覺得進步緩慢、力不從心,但他想起他那一文不值的大學文憑所以咬著牙再辛苦也要走下去,拯救他那可笑的人生。

他渴望進步,他希望透過任何手段讓自己看見下一個黎明。確認了自己戶頭還有幾萬塊,便毫不猶豫地報名了課程好讓自己能夠越過信心曲線的低谷(俗稱嗑金),即便繳完一半學程的學費就要吃土了。

*學習的信心曲線:

Ether Huang

Just a web developer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store