Twitter 驗收＆結業式

###### tags: `學期 3` `工作坊頁面` # Twitter 驗收＆結業式 #### 09/08 Twitter 結業式活動資訊 <div style="background: #ececec; padding: 15px; margin-bottom: 10px; border-radius: 10px ; min-width:450px; width:fit-content; font-weight: bold;"> 日期與時間：09/08 (五) 19:30 - 21:00 <br> 參加連結：<a href="https://zoom.us/j/86784111140" target="_blank">https://zoom.us/j/86784111140</a><br> 會議密碼：495659<br> <a class="btn btn-normal" target="_blank" href="https://calendar.google.com/calendar/event?action=TEMPLATE&tmeid=Mjk2amRldjVsdW9maGdvaHR2dmVoajVvaDAgczdpYmk3OHUxZ2NuYTRxOWhtbzc4cGxoMjhAZw&tmsrc=s7ibi78u1gcna4q9hmo78plh28%40group.calendar.google.com">將行程添加到 Google 日曆</a> </div> #### 活動流程 Agenda - Opening - 評審講評 - 未來學習建議分享 - 神秘環節，敬請期待 --- ### 09/08 Twitter 結業式 - 行前提醒提醒同學 09/08 (五) 19:30-21:00 為 Twitter 結業式，評審將點評有通過 Twitter 指定功能交付的小組。除此之外，我們也鼓勵同學們多多觀摩不同組別的 Twitter 成品及程式碼，並與組員一起討論，相互成就及成長唷！現在就去看看這次結業式的活動流程吧 ➡️ [Twitter 結業式活動資訊](https://lighthouse.alphacamp.co/courses/80/units/28720) <div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4416/banner_2.001.jpeg"></div> --- ## Webinar Update ### 【今晚 7:30 工作坊提醒】Twitter 結業式！今晚就是期待已久的 Twitter 結業式了！評審導師們將會針對各組進行點評，教練團隊也會和同學一起完成最後一場活動，大家記得一定要上線參與哦，我們等等見！ #### 活動資訊 <div style="background: #ececec; padding: 15px; margin-bottom: 10px; border-radius: 10px ; min-width:450px; width:fit-content;"> • 活動時間：09/08 (五) 19:30 - 21:00<br> • 活動頁面：<a href="https://lighthouse.alphacamp.co/courses/80/units/28953" target="_blank">Twitter 結業式 - 活動頁面</a> </div> 同學可以事先在這邊提問，助教會視情況在活動中回答 ➡️ [提問連結](https://app.sli.do/event/tD1bmmtsznFuaiH812XrgG) 提問時請留下你的專修及問題，例如：前端 - XXXXXXX <div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4416/banner_2.001.jpeg"></div> --- ## Twitter 結業式 -- 2023 / 07 月班會後精華昨天的 Twitter 結業式落幕，同學們也即將走完在學期三的最後一哩路！除了邀請到陣容強大的評審團隊，來幫 Twitter 專案做全方位的檢視和評論，教練團隊也和同學們一起回顧了這幾個月的成長，以及叮嚀同學接下來須完成的事項，來看看 Twitter 結業式的會後精華吧！ <br> <div style="position: relative;width:100%;height:0;padding-bottom: 56.25%;"> <iframe style="position:absolute;top:0;left:0;width:100%;height:100%" src="https://player.vimeo.com/video/840712187?h=3b5e1a3af0&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allowfullscreen></iframe></div> <div style="height: 16px;"></div> --- #### Agenda - Opening - Twitter 指定功能成果 - 評審講評 - 未來學習建議分享 - 神秘嘉賓分享 --- #### 工作坊投影片 <div style="position: relative;width:100%;height:0;padding-bottom: 56.25%;"> <iframe style="position:absolute;top:0;left:0;width:100%;height:100%" src="https://docs.google.com/presentation/d/e/2PACX-1vQuMeEtPky-HHd2TUnseJO-FSnbTMF3kHMXFWsVDAcd9-gIWyAIEJFlDLRQqUVuhARxxLbUOv-LrHJE/embed?start=false&loop=false&delayms=3000" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"> </iframe> </div> ## Twitter 專案點評 ### 評審切入點在結業式中，評審們以**業界角度對 Junior 的期待**訂出審核標準，並詳細描述了切入點和角度，透過此標準對各小組進行點評 & 建議： ## 前端 - 環境設定 - `eslint` - 程式碼縮排規則不一問題、coding styles 問題 - 請移除不需要的 console.log，以及沒有用到的變數，建議可以使用一些 lint 工具來讓 coding style 保持一致性。 - https://eslint.org/docs/latest/rules/no-console - https://eslint.org/docs/latest/rules/no-unused-vars - `jsconfig.json` 其實可以設定 `paths` 來將 import 中的相對路徑做 alias mapping，減少引入的繁瑣或錯誤（關鍵字：`path alias`）。 - 程式面 - `API 檔案結構` ：可以直接參考後端開出的 API 路徑來做規劃，不要全部寫在少部分的 api.js 中。 - `多思考介面狀態同步`：前端在看設計稿時，除了考量切版策略、UI/UX 流程以外，**也要嘗試盤點跨組件狀態溝通上的需求（ex: 跟隨按鈕），再進入程式架構的規劃與撰寫**。 - `效能與 API 考量`：後台在維護上會有**大量數據**，建議前後端可以共同討論建立 pagination 來**分段拉資料**，前端也可以多往 **virtual/infinite scrolling** 嘗試實作。 - https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1 - https://blog.logrocket.com/virtual-scrolling-core-principles-and-basic-implementation-in-react/ - `axiosInstance` 可以獨立一個檔案定義，然後再提供給其他 `/api/*.js` 使用，架構會更乾淨。 - UI 長度限制（Validation 對**資料**的限制 / CSS 對**顯示**上的限制） - 當 jsx 有出現很多重複性的邏輯時，很多時候都是要嘗試規劃子組件的時候。 - React hooks - **custom hook 內部其實可以引用 useContext** 做狀態的拆分控制的。 - useContext 不用拆得太細，**顆粒度掌握可以是情形而定，避免過度設計**。 - 當 useContext 要控制的狀態越來越長的時候，這時會出現維護性的議題，這時可以需要思考到： - 是否有各種不同抽象概念的狀態都在同一個 context 中控制？有的話應該要拆成不同 context - 是否有一些共用 functions 可以包成 custom hook 中做拆分管理？ - useEffect 的dependency 需要注意，可能會造成多次rerender以及畫面閃爍。 - UX - 連結點擊範圍的考量，ex: 一個頭像＋人名，如果只有頭像可以導頁，似乎有點詭異？ - 個人資料頁在頁面資料載入前，許多組會有空白頁的情形，因為圖片尚未載入，建議在此階段可以擺上圖片的 placeholder，並且讓圖片區塊在圖片還沒載入前一樣可以保持高度不變，不然頁面在載入的過程會有很大的版面位移的問題，在使用體驗上是不好的！ - 使用者操作的成功與否(e.g. 上傳圖片 & 點擊提交推文)，建議在 UI 上**都要有**適當的反應變化來給使用者提示（loading / notification），**讓使用者知道當前處理狀態**。 - 這次有許多組沒有考量到尚未要到資料以前的 Loading UI，造成在等待後端回傳資料以前畫面定格，會以為壞了… ## 後端 - 在一次取得多筆資料的相關 API 路由中，可以思考加入分頁邏輯，避免一次大量從資料庫取得所有資料。 - 在使用 raw sql 查詢資料時，要注意 sql injection 的發生，使用 attributes 來取得所需欄位，使用 include 取代 exclude，避免後續增加欄位時，在未預期的情況下造成敏感資料暴露。 - 使用 error-handler 來統一處理 exception 錯誤做得很好，但要注意暴露伺服器邏輯的情況，建議在可預期的錯誤，例如：輸入資料驗證未通過、資料不存在…等，可以直接依據錯誤情況回傳錯誤訊息及狀態碼，而非直接 throw Error，或是在 error-handler 如果有加入依據 status 屬性回傳，也要注意 throw Error 時，error object 要加入對應 status value - 錯誤回傳直接使用 error 的 message 及 name properties 時，可能會導致伺服器邏輯暴露 - 建議可以切出 controller/service 層，並將資料驗證放在 controller，service 專注資料處理邏輯，在日後維護時，在對應的程式/檔案中實作邏輯，debug 也可以更快找到錯誤位置（如資料驗證相關錯誤可以直接到 controller 排除） ## 全端 - 當同學在處理從資料庫拉回來的資料時，像是 **計數 (count)**、**排序 (sort) 與過濾 (filter)** 這些操作，都可以透過 Sequelize 的 Aggregate 或 Raw SQL (但要注意 [SQL injection](https://sequelize.org/docs/v6/core-concepts/raw-queries/#bind-parameter)) 來完成，效能較好，也不容易出錯。 - 開發 api 時，要注意 api 回傳的 [http status code](https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Status)，不建議將所有錯誤都放到最後的 error handler 來處理，容易讓 api 的使用者混亂，或至少要將 render page 與 api 的錯誤處理分開。 - 記得用 sequelize 的 transaction，當你今天要同時刪除「推特」、「推特的回覆」以及「推特的 like」的時候，要把這三個操作都包到同一個 transaction，如此一來，若其中一個操作失敗了，資料會退回到 transaction 執行之前的狀態，以防止資料出錯。 - 太過冗長的資料驗證會讓 Controller 變得難以閱讀，可以額外用 validation middleware 來處理，POST Body 和使用者權限都可以用此方式來驗證。 - 實作時，若能維持一樣的 coding style，程式碼品質會有顯著的提升，這部分除了事前與組員溝通外，也可以利用 lint, prettier 等工具來檢查，並確實做到 peer review，不只是互相檢查 style 與程式碼，也是同步彼此進度的好方式。 - 因為每個動作都會重新載入網頁，前端可以用一些小技巧來提升使用者體驗，像是記錄使用者的捲軸位置，或是在按下按鈕後，加入一些小動畫讓使用者知道他的請求正在執行中。 - 前端在開發時，需要注意設計稿沒有出現的邊緣狀況，像是使用者的名稱太長或 tweet 內容太長是否會造成畫面破版、換行等 ⋯⋯ ## 回顧與成長，最後一哩路恭喜同學們即將畢業，給這段日子辛苦的自己一點掌聲和擁抱吧🎉 雖然各自加入 AC 的時間不同，但相信有許多同學一路互相觀摩，到現在一起完成 twitter 專案，離轉職工程師越來越近了！期待之後還能在社群看到同學分享生活上、或是當工程師的酸甜苦辣，也希望我們這幾個月帶給同學的，不只是技術力的提升，還有 AC 一直以來想要傳達的學習能力及心態，希望這些習慣、行為的建立，可以幫助大家在未來生活中或職場上，能夠更順利！ <img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/18420/_____2021-12-17___15.06.15___.png"> #### 接下來你可以... * **Twitter 參賽小組** * 完成 [A6: 解決問題 & 工具應用](https://lighthouse.alphacamp.co/courses/80/assignments/2868) * 完成 [A7: Twitter 開發過程反思部落格](https://lighthouse.alphacamp.co/courses/80/assignments/2873) * 360 review 會於 9/14（四）陸續寄送到同學信箱 * 還沒與導師約 Office hour 的小組也別忘記囉！ * **所有同學**：完成畢業技術考/ 畢業部落格 <img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/18419/_____2021-12-17___14.46.24___.png">  --- # 09/08 Twitter 結業式 - Highlights 昨日的 Twitter 結業式落幕，同學們也即將走完在學期三的最後一哩路！除了邀請到陣容強大的評審團隊，來幫 Twitter 專案做全方位的檢視和評論，教練團隊也和同學們一起回顧了這幾個月的成長，以及叮嚀同學接下來須完成的事項！現在就去看看精彩的會後錄影吧 ➡️ [Twitter 結業式 -- 2023 / 07 月班會後精華](https://lighthouse.alphacamp.co/courses/80/units/29052) <br>  <div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4416/banner_2.001.jpeg"></div>