Appworks 讀書會

# < T >泛型讀書會 ## 前端system design研究 #### 6/24 謙 Autocomplete [資源](https://www.greatfrontend.com/questions/system-design/autocomplete#do-we-need-to-support-fuzzy-search) #### 7/8 [Ethan](https://www.canva.com/design/DAGshYZR7BY/aSpl_ZYayWvUVdm4QXdwjw/edit?utm_content=DAGshYZR7BY&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton) IDL 和Makefile 是兩個不同的工具，前者用來描述軟體組件的介面，後者用來自動化建置過程，但兩者可以相互配合使用，以提升開發效率。 - makefile - IDL: Interface Description Language [heptabase](https://heptabase.com/) : 這間面試考這個 #### 7/22 [Flora E-commerce](https://www.canva.com/design/DAGtwQxqiTs/tMfRoe1hWXLhk-SjKOYfbQ/edit?utm_content=DAGtwQxqiTs&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton) - [Console Ninja](https://console-ninja.com/):VScode裡看console.log - [stripe checkout](https://stripe.com/payments/checkout):金流服務 - 數字字串輸入設定:`<input type='text' inputmode='numeric' />` - [Google AI課](https://growonairtw.withgoogle.com/events/digitaleducation) - [沈浸式翻譯](https://immersivetranslate.com/zh-TW/) - [Css Peeper](https://csspeeper.com/):Google插件可以顯示CSS間距 - #### 8/5 [奶茶 Video Streaming](https://www.canva.com/design/DAGuveCYV3U/aXgXy1do5ozwQktt_ff8hQ/edit?utm_content=DAGuveCYV3U&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton) [dash.js](https://dashjs.org/):串流影片後端用的套件 #### 8/19 [Sharon Travel Booking](https://www.canva.com/design/DAGwJWWrQXc/fJhc9fpET1zldXL8fRSUJQ/edit) [Signal鐵人賽文章](https://ithelp.ithome.com.tw/m/users/20129020/ironman/8219) #### 9/2 [Jill News Feed]() #### 9/16 [Sam Google Docs]() #### 9/30 [Yumy Chat App]() 通常聊天室會用IndexDB [BroadcastChannel](https://developer.mozilla.org/zh-CN/docs/Web/API/BroadcastChannel)可以跨tab溝通(包括postMessage) [Chat UI kit](https://www.social.plus/) [列印的後端套件](https://github.com/Kozea/WeasyPrint) [前端DB](https://newsletter.betterstack.com/p/how-sqlite-made-notion-30-faster?utm_campaign=post&utm_medium=web) #### 10/14 [Macy Pinterest](https://separate-tempo-553.notion.site/Pinterest-27b3da1fa57780c1b7b8ddf62f89f2a0) ## 下次可能題目 [前端架構學習＊選這個](https://www.greatfrontend.com/questions/system-design/news-feed-facebook) - 帳:sam21323.fl04@nctu.edu.tw / 密:19fe12345 - 75 折折扣碼：YMSDP8EC [大型前端架構方法](https://largeapps.dev/) [CSR前端框架(Sam公司)](https://umijs.org/) [前端整合build tool](https://voidzero.dev/) | [podcast訪談](https://open.spotify.com/episode/4QEesDjjzzcuJt0aWF5cUY?si=037ccb7bf97e42a5) ## React深度討論/React 19 React 思維進化: [書](https://www.books.com.tw/products/0010977360) | [鐵人文](https://ithelp.ithome.com.tw/users/20129300/ironman/5892) #### 題目討論 [Google Ai課程](https://rsvp.withgoogle.com/events/csj-tw-2024) [awesome-react-renderer](https://github.com/chentsulin/awesome-react-renderer?tab=readme-ov-file#web) sue 新公司 [Appier](https://appier.com/zh-tw/) sam 新公司 Tutor ABC #### 2/11 第一章 & 第二章：謙 & Sam [React 畫面處理機制 (上)](https://www.canva.com/design/DAGeUGGgHWk/SUdxB9Y0QoPzvlKlwpv2iQ/edit) [React 畫面處理機制 (下)](https://www.notion.so/samselflearning/React-191271af845180f4b986c542c4de6914) #### 2/25 第三章：奶茶 & Sharon [3-1 - 3-2](https://calico-roadway-36f.notion.site/React-3-1-to-3-2-1a12914af9b88069ae8ed196eadc7c4c?pvs=73) [3-3](https://www.canva.com/design/DAGf59cLqVY/XCSbEt_aKRZRHw62aPFWLg/edit?utm_content=DAGf59cLqVY&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton) [flushSync](https://react.dev/reference/react-dom/flushSync):強制關閉batch update [updater function](https://react.dev/learn/queueing-a-series-of-state-updates):確保能拿到最新的值 `setState(prev => !prev)` [React concurrent mode](https://chentsulin.medium.com/%E7%90%86%E8%A7%A3-react-%E7%9A%84%E4%B8%8B%E4%B8%80%E6%AD%A5-concurrent-mode-%E8%88%87-suspense-327b8a3df0fe) #### 3/11 第四章：Flora & Macy [component生命週期](https://www.canva.com/design/DAGkqy77GbQ/2syn33_JM2A_IDHRVaNjYA/edit) 開發者工具 [override content](https://developer.chrome.com/docs/devtools/overrides?hl=zh-tw) : 可以在開發者工具裡直接修改API/Header等等 #### 3/25 第五章：Jill & Yumy [useEffect](https://www.canva.com/design/DAGl_aCVlls/Vfnp5Rf2SyiXi0T_XNUMwQ/edit?utm_content=DAGl_aCVlls&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton) useEffect執行兩次:React 18以後的版本在dev環境啟用Strict mode會出現,目的是協助發現不穩定的sideEffect [5-4 ~ 5-7](https://yiting-yang.notion.site/5-4-5-7-1e0e13d6dded80168251d75f4ac3b476) [react fiber](https://www.frontendnote.site/frontend/React/react-fiber/) #### [4/8 React 19: Ethan](https://shorturl.at/XodfO) [Form Action Pattern](https://x.com/leerob/status/1869881269468663994) ## [Grind 75](https://www.techinterviewhandbook.org/grind75?order=topics&difficulty=Easy&difficulty=Medium&hours=1&mode=preferences&grouping=topics&weeks=13) #### Dynamic Programming: YU * DP是演算法設計思維(ex:Greedy, Divide and Conquer, Backtracking) 建議看lecture,吸收大量的題型,吃"可以用DP解這題"的經驗 * 概念: 在遞迴過程中，將「可能重覆計算但答案不變」的部份，把算過的答案記錄下來避免重覆計算。目前大致了解成「遞迴+記錄過程中計算過的子問題答案」就可以了。就是聰明版的遞迴,不要一直call到call過的東西 * [從零開始進入動態規劃的世界](https://arthur-lin.medium.com/%E5%BE%9E%E9%9B%B6%E9%96%8B%E5%A7%8B%E9%80%B2%E5%85%A5%E5%8B%95%E6%85%8B%E8%A6%8F%E5%8A%83%E7%9A%84%E4%B8%96%E7%95%8C-%E4%B8%80-%E5%9F%BA%E7%A4%8E%E4%B8%AD%E7%9A%84%E5%9F%BA%E7%A4%8E-eee0695b3795) [遞迴 (Recursion) 的思維模式](https://medium.com/appworks-school/%E9%80%B2%E5%85%A5%E9%81%9E%E8%BF%B4-recursion-%E7%9A%84%E4%B8%96%E7%95%8C-%E4%BA%94-b678adad95ca) #### [Heap: 奶茶](https://www.canva.com/design/DAGXS8eXqmM/2XfSEB043naoCFm2F8pXEA/edit) #### [Linked List: 表姐](https://www.canva.com/design/DAGV-MPaJf0/yh8xbjYCo8U_ScNwj3P5nQ/edit) #### [Stack: Suuuuuu](https://www.canva.com/design/DAGUGX0fRqo/oDd8ELyz1syhdiwgfooIlg/view?utm_content=DAGUGX0fRqo&utm_campaign=designshare&utm_medium=link&utm_source=editor) * [Astro - Framework Components](https://docs.astro.build/en/guides/framework-components/) : 跨框架component * [webpack - Module Federation](https://webpack.js.org/concepts/module-federation/) : 模組聯盟 * [sentry](https://docs.sentry.io/platforms/javascript/guides/react/) : Error時會有alert,效能監控 * [jam](https://jam.dev/?gad_source=1&gclid=Cj0KCQjwmt24BhDPARIsAJFYKk2xtYP2yShz-YyaROcu2Dq3hCcIrCmp70pZHyMUJy60b33fGeBbCuAaAjxDEALw_wcB) : 螢幕錄影工具 * [metahuman](https://www.unrealengine.com/en-US/metahuman) | [inZoi](https://playinzoi.com/en) :　虛擬人物平台 * #### [Hash Table: 雪倫](https://www.canva.com/design/DAGSJbX_cxo/TDFyS8dqCwfMV45HcSjIaA/edit?utm_content=DAGSJbX_cxo&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton) #### [Binary tree: Sam](https://www.canva.com/design/DAGPecaj6vY/rQcUCV5uK2DcUdNPwU7GCQ/edit?utm_content=DAGPecaj6vY&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton) * [structy](https://www.structy.net/): 演算法練習網站 #### [Binary search tree: Yiting](https://www.canva.com/design/DAGNbGmPGo8/cxgf1dtcux37Nl3Lv0lQVw/view#1) * 延伸閱讀: [bubble up 和 bubble down](https://www.youtube.com/watch?v=PkCBI4BKeb8) | [medium](https://medium.com/@verdi/binary-heap-basics-40a0f3f41c8f) * Binary tree 跟 Binary search tree 不同 #### [Graph: 抹西](https://www.canva.com/design/DAGLE11Z8iY/DMNNOa8f4v3r77DkJvGrjg/view?utm_content=DAGLE11Z8iY&utm_campaign=designshare&utm_medium=link&utm_source=editor) * [習題](https://separate-tempo-553.notion.site/graph-06cd2f1f8cac45828f8a4a8e88346fc1) * [教學](https://www.youtube.com/watch?v=tWVWeAqZ0WU&t=1029s) #### [Binary Search: Yumy](https://leetcode.com/problems/binary-search/description/) * [sue找到的讚講義](https://leetcode.com/problems/search-insert-position/solutions/423166/binary-search-101) * [易廷新公司](https://www.heartbot.com/#product) #### [String: Jill](https://www.canva.com/design/DAGFlzUA-e8/pHpt774_FUr8mskOYRNbAg/view?utm_content=DAGFlzUA-e8&utm_campaign=designshare&utm_medium=link&utm_source=editor) * 奇怪的比賽 [HackSussex](https://www.youtube.com/watch?v=VixYfv0UEyE&t=1547s) | [Excel](https://www.bnext.com.tw/article/77795/microsof-excel-championships-las-vegas?) #### [Array: Ethan](https://www.canva.com/design/DAGFLCR_0jw/0JslzQMm83HkPdrR08vg1g/edit) * 有些題目可以用Dynamic Programming解 * 可以用Array method,但要知道method的限制,要準備 ## Web前端效能優化大補帖 #### 4/16 [Performance Tab](https://www.canva.com/design/DAGBEWpkUuU/BUW_GVRIA3EQtaEhoHDIgQ/view?utm_content=DAGBEWpkUuU&utm_campaign=designshare&utm_medium=link&utm_source=editor) performance API:可以在檔案裡mark在Timing顯示的標記![截圖 2024-04-16 下午9.20.26](https://hackmd.io/_uploads/ByomolhlA.png) requestAnimationFrame API:用在連續動畫![截圖 2024-04-16 下午9.14.35](https://hackmd.io/_uploads/Hymbolhl0.png) [前端電子報Jing Su](https://jingtech.substack.com/) #### 3/19 [記憶體/GC](https://www.canva.com/design/DAF_qcYXmjY/35K3kGkOSjTdSOap8jIp9A/view) * 補充需求:Next需要跑Server,所以沒辦法直接部署在S3(放靜態檔案的地方).作法:連線到EC2 VM上,透過把[Next Docker File](https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile)把Next server在container上跑起來 (機器上已經裝好Node.js,docker) 部署的概念:`Next start`會跑在`localhost:3000`上,下指令把`port:3000`映射到`port:9090` ![截圖 2024-03-19 下午9.23.58](https://hackmd.io/_uploads/HyrTSGwR6.png) ![截圖 2024-03-19 下午9.25.07](https://hackmd.io/_uploads/HJfArfDAT.png) ![截圖 2024-03-19 下午9.25.30](https://hackmd.io/_uploads/rktRrMPCT.png) [ngrok](https://ngrok.com/):把localhost轉為https網址,可以分享給別人 | [nginx](https://www.nginx.com/) | [Google App Script](https://www.google.com/script/start/) #### 3/5 [Web Workers 與 WebAssembly](https://www.canva.com/design/DAF5xgVldbU/jrbEykOt9peaxARuaOFJVw/view?utm_content=DAF5xgVldbU&utm_campaign=designshare&utm_medium=link&utm_source=editor) * 補充 [Google VBA](https://youtu.be/fKTnjZfPVh4?si=NfEG9fC4tLp-llh8) [INP](https://ranking.works/knowledge/core-web-vitals-inp/):core web vitals新指標,今年三月取代FID #### 2/20 [App Shell / HTTP 2](https://www.canva.com/design/DAF9IGOsWTw/s4S-6b-2a9Gz9j6cs1mMoQ/edit?utm_content=DAF9IGOsWTw&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton) #### 1/9 [快取與網路機制](https://www.canva.com/design/DAF5XD6hg18/khJNhEa3KTu9TZMWhE8N4g/edit?utm_content=DAF5XD6hg18&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton)：更多參考資料可以看[web.dev](https://web.dev/?hl=zh-tw) * 補充 [Xstate](https://stately.ai/docs/xstate) | [userpilot](https://userpilot.com/) | [productfruits](https://productfruits.com/userpilot-alternative?utm_term=userpilot&utm_campaign=Competition_ROW&utm_source=adwords&utm_medium=ppc&hsa_acc=3344993221&hsa_cam=16099285325&hsa_grp=135788962512&hsa_ad=648512076908&hsa_src=g&hsa_tgt=kwd-866041389583&hsa_kw=userpilot&hsa_mt=p&hsa_net=adwords&hsa_ver=3&kw=userpilot&cpn=16099285325&gad_source=1&gclid=CjwKCAiA-vOsBhAAEiwAIWR0TQxsAEXuSiAMXXBVN7A4HDSQJoQED0KPPXUuw4zT9RPrLFZ3NAz1MBoCZ5MQAvD_BwE):把程式碼state畫成圖表 [sam分享push之前自動build方法](https://samselflearning.notion.site/32c1cf88668d4f54b135400417e245c2?pvs=4) ``` tsc --noemit && next lint ``` #### 12/26 [Dynamic import](https://www.canva.com/design/DAF33hh-JJw/rboc30UZ-SqTBZUqqLVSeg/view?utm_content=DAF33hh-JJw&utm_campaign=designshare&utm_medium=link&utm_source=editor) * 補充 [薪水談判](https://www.canva.com/design/DAF2UEAfiVU/X88ZTpeZDcAJ36UvwZ5GJg/view?utm_content=DAF2UEAfiVU&utm_campaign=designshare&utm_medium=link&utm_source=editor) [JSdoc](https://www.gss.com.tw/blog/javascript%E4%BD%BF%E7%94%A8jsdoc%E8%A8%BB%E8%A7%A3%E4%B8%A6%E5%BF%AB%E9%80%9F%E7%94%A2%E7%94%9Fapi%E6%96%87%E4%BB%B6):VScode插件 [Bulk Problem Diagnostics](https://github.com/marinaglancy/vscode-bulk-problem-diagnostics):VScode插件 [Husky](https://medium.com/@Hsu.Yang-Min/husky-%E8%AE%93%E4%BD%A0%E7%9A%84-git-%E5%8F%AF%E4%BB%A5%E5%81%9A%E5%85%B6%E4%BB%96%E4%BA%8B%E6%83%85-b437497826a3) | [Husky commit hook](https://www.freecodecamp.org/chinese/news/how-to-add-commit-hooks-to-git-with-husky-to-automate-code-tasks/):commit hook [Lottie](https://tenten.co/learning/what-is-lottie/):動畫插件 [codewhisperer](https://aws.amazon.com/tw/codewhisperer/):強化版終端機 [typescript考試](https://www.explainthis.io/zh-hant/swe/advent-typescript-2023-1) [React Testing Library 的 15 个常见错误](https://mp.weixin.qq.com/s/pgdcDNjDGPgNq76Zh_dZxg) [css-overview](https://szeching.com/enable-css-overview-in-chrome/):Chrome插件,可以看css #### 12/12 [lazyloading](https://www.canva.com/design/DAFz8PAIuyU/nJenY00H9BYo9uJBVmQkhw/view?utm_content=DAFz8PAIuyU&utm_campaign=designshare&utm_medium=link&utm_source=editor) * 補充 [langchain](https://www.langchain.com/):LLM框架 [v0](https://v0.dev/):自動產UI #### 11/28 [瀏覽器的架構演進史+渲染引擎的機制](https://separate-tempo-553.notion.site/cb4a2057bdf44333a912d4522f47f40e?pvs=4) [3-2分享](https://calico-roadway-36f.notion.site/3-2-ea32539c4dcc4e92b80e6e8bbdc788b1?pvs=25) * 補充 [vite科普](https://bold-passbook-f2f.notion.site/Vite-fb399bec0032441097c92476386e8e3d) | [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) | [MWC 2023共筆](https://hackmd.io/@ModernWeb/2023/%2FDtxDy-8KR4mItQ2gGi4xRA) ``` - Mockoon: mock api 工具 - Docker image、Docker container - VM: AWS EC2、GCP Compute Engine ``` #### 10/31 [網頁資源優化](https://samselflearning.notion.site/samselflearning/3bd07e77bb074c9aa4df238a1eec984c) * 補充 CMD指令模糊搜尋: [Warp](https://www.warp.dev/b) | [Fig](https://fig.io/) | [fzf](https://github.com/junegunn/fzf) [Reack Hook Form](https://react-hook-form.com/): 表單套件 #### 10/17 * 補充 [SEO metadata](https://yiting-yang.notion.site/SEO-metadata-2c6e990ba5714daeaf2708f93810a8d9) ``` Sam用cyperss寫自動打卡程式,跑Shell Script 1. cron ( crontab )- Linux 系統排成工具 2. Apify- 可線上排程跑 Cypress 腳本 3. Zod- runtime 型別資料驗證工具 ``` # Appworks 讀書會 ## Week 0 ### 什麼是 [css specificity](https://muki.tw/tech/html-css/css-specificity-document/)？ #### 原則上由小到大, `.class`最小 CSS Specificity 是 CSS 中用來決定一個元素呈現樣式的重要概念。它代表了一個樣式選擇器的特殊性，告訴瀏覽器在一堆有爭議的樣式選擇器中哪個會被應用到元素上。 #### Specificity 分為四個部分計算： 1. Inline styles 每個內聯樣式都給了 1000 分。 2. `#id`每個 ID 選擇器都給了 100 分。 3. `.class`, `[attribute]`, `:pseudo-class`，每個選擇器給了 10 分。 4. 標籤選擇器 `<tag>`（element）和伪元素選擇器（`::before`, `::after`），每個選擇器給了 1 分。 #### 其他方式可以影響 Specificity 的值: 1. `!important`：如果一個樣式有 !important，它將強制優先選擇，即使它的 Specificity 較低也是如此。 2. 樣式繼承（style inheritance）：父元素的樣式會被繼承到子元素上，因此在沒有其他干擾的情況下，子元素的樣式將繼承父元素的樣式。 #### 查看元素的 Specificity 值 * 開發者工具：大多數現代瀏覽器都內置了開發者工具，您可以在其中查看每個元素的樣式並查看它的 Specificity 值。 * CSS Specificity Calculator：您可以在線使用 CSS Specificity 計算器，輸入樣式選擇器並查看它們的 Specificity 值。 #### CSS 管理方法 * BEM Block Element Modifier, BEM 的名称代表了块（Block）、元素（Element）和修饰符（Modifier）。它通过使用特定的约定和语法，使 CSS 的代码结构更加清晰和易于理解。 * SMACSS Scalable and Modular Architecture for CSS 把 CSS 分为五个不同的类别：基础，布局，模块，状态和主题。这些类别用于组织 CSS 代码，使 CSS 的代码结构更加清晰和易于理解。 * OOCSS （Object-Oriented CSS）OOCSS 的主要理念是将 CSS 样式视为对象，并通过创建通用的 CSS 类来使用这些对象。这种方法帮助开发人员减少代码的冗余，并提高代码的可读性和可维护性。 OOCSS 还提倡使用结构和皮肤技巧来分离外观和结构，以便使代码更具可重用性。使用 OOCSS 的一个优点是，可以在不改变代码结构的情况下修改样式，从而使 CSS 代码更具弹性和可维护性。 ### Reset vs Normalize CSS #### Reset.css 是一個極端的 CSS 文件，它將所有的瀏覽器預設樣式設為 0，以確保所有元素在各個瀏覽器中具有相同的樣式。這樣做有助於消除瀏覽器之間的差異，但是將所有東西設置為 0 可能會造成問題，因為你需要手動重新定義風格。 #### Normalize.css 是一個更加保守的 CSS 文件，Normalize.css 比 Reset.css 更加普遍，它保留了瀏覽器的一些預設樣式，但是通過對瀏覽器之間的差異進行調整，以確保所有元素在所有瀏覽器中具有相似的樣式。這樣做保留了一些可讀性和預設風格，同時也確保了所有元素的可移植性。 ### Git flow 工作流程有哪些分支？各是做什麼的？ [git flow](https://gitbook.tw/chapters/gitflow/why-need-git-flow) ![](https://i.imgur.com/s3ylfrZ.png) * Master 分支：存储了当前的稳定版本,包含当前生产环境代码。 * Develop 分支：存储了当前的开发版本,功能分支的合并点。 * Feature 分支：用于开发新的特性，在完成后合并到 Develop 分支。 * Release 分支：用于完成一个版本的最后测试和修订，用于将代码准备发布到生产环境,在完成后合并到 Master 和 Develop 分支。 * Hotfix 分支：用于快速修复当前生产版本的紧急问题，在完成后合并到 Master 和 Develop 分支。 #### 情 * develop 分支 remote端: 是公司github帳號,feature開發完後發PR,主管審核完成會mearge local端: 主管審核完成後再從remote端pull到local端的develop分支,完成task * feature 分支開發新feature用的分支,必須從remote端的develop分支先pull到local端,再從local端的develop分支長新的feature #### Beta版本是什麼？通常是Release分支上 Alpha版內部測試完後的外部測試版內部測試或封測會在不同的環境(同樣的github,不同的伺服器和資料庫,前後端一起般過去) ### 好的 commit message 怎麼寫？多久 commit 一次？ [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) 1. 简洁明了的说明提交的目的：commit message 应该清晰地说明提交的代码的作用和意图。 2. 使用现实语言：commit message 应该使用简洁明了的现实语言，避免使用技术术语。 3. 避免使用缩写：为了保证易读性，避免使用缩写。 4. 第一行不超过 50 个字符：第一行应该简洁明了，不超过 50 个字符，方便在提交历史中快速浏览。 5. 想寫多行commit可以用shift＋空格, 或是不加`-m`會進入vim模式关于 commit 频率，没有固定的时间间隔，你可以根据代码提交的数量和质量来决定提交的频率。一般来说，提交越频繁，代码更容易被团队成员管理和协作。但是，如果提交过于频繁，也可能导致提交历史难以管理和查询。因此，建议每次提交的代码数量和质量尽量保证。 ex: 完成一个明确任务后立即commit代码每天commit一次代码每次commit前进行 code review，以确保代码的质量。 * [**binary search**](https://medium.com/appworks-school/binary-search-%E9%82%A3%E4%BA%9B%E8%97%8F%E5%9C%A8%E7%B4%B0%E7%AF%80%E8%A3%A1%E7%9A%84%E9%AD%94%E9%AC%BC-%E4%B8%80-%E5%9F%BA%E7%A4%8E%E4%BB%8B%E7%B4%B9-dd2cd804aee1) #### 整理 commit * [`git rebase -i`](https://gitbook.tw/chapters/rewrite-history/merge-multiple-commits-to-one-commit) 預設會進入vim模式,整理commit好用 [什麼是 ORIG_HEAD 和 HEAD](https://blog.csdn.net/dss886/article/details/39271645) * `git push -f` 強制push 因為 Rebase 等於是修改已經發生的事實，所以若已經push後才整理commit, 那在rebase後是推不上去的。可用此指令解決, 但只能用在自己身上。 ### 比較 git rebase 和 git merge 都是用于合并分支的 Git 命令。但是，它们的工作方式和结果是不同的。 #### git rebase 合并分支时将当前分支的历史重写为另一分支的历史。它会将当前分支的提交记录移到另一分支的末尾(checkout feature分支, 在feature分支上rebase Develop)。这样，提交历史就会变成一条直线，看起来比较整洁 ``` A - B - C (branch 1) \ D - E - F (branch 2) A - B - C - D - E - F (branch 1 after rebase) ``` * 等於做多次的[cherry-pick](https://zlargon.gitbooks.io/git-tutorial/content/branch/rebase.html) * git rebase衝突使用 git rebase 时需要注意，如果在原始分支上进行了更改，则可能会导致冲突。解決方法： 1. 查看衝突：在執行 git rebase 時，如果遇到衝突，Git 會停止並提示衝突的檔案。 2. 解決衝突：打開衝突的檔案，手動解決衝突並保存。 3. 確認解決衝突：使用 "git add" 指令將解決衝突的檔案加入暫存區，再使用 "git rebase --continue" 指令繼續 rebase 流程。 4. 重複上述步驟直到所有衝突都被解決。 #### git merge 将两个分支的历史合并在一起，并创建一个新的commit。(誰merge誰沒差)这会在提交历史中生成一个合并点，并保留**原始分支的历史**记录。 ``` A - B - C (branch 1) \ D - E - F (branch 2) \ G (merge commit) ``` * fast-forward: 當分支 A 向分支 B 合併時，如果分支 B 是分支 A 的直接祖先，則 Git 會自動將分支 A 向前移動到分支 B 的位置，不會產生新的合併提交。這種合併方式比較簡單，不會產生分歧。 * non-fast-forward: 當分支 A 向分支 B 合併時，如果分支 B 不是分支 A 的直接祖先，則 Git 會產生新的合併提交，以紀錄分支 A 和分支 B 的合併過程。這種合併方式比較複雜，會產生分歧，但更能保證分支的完整性。 #### pros & cons git rebase 更适合在开发过程中合并分支，以便在团队协作时保持提交历史的整洁。記錄會比較乾淨。遇衝突會改動commit紀錄,不適合處理別人的分支 git merge 更适合在合并分支之后合并历史，以便保留原始分支的历史记录。比較能追溯歷史。 ## Week 1 #### Trunk based git flow #### 技術選型 #### 測試 * 自動化測試 * unit test * BigO:表示演算法的效率(複雜度) ### Array Method `push`, `pop`, `reverse`, and `sort` will mutate the original array, but `slice`, `filter`, and `map` will create a new one. #### `.reverse` 有ppt #### `.pop` #### `.join` ![](https://i.imgur.com/I5qb3iW.png) #### prototype的概念可以看 chrome可以看這個type有哪些方法 ![](https://i.imgur.com/RrulqUV.png) #### 範型,array-like #### shallow copy / deepcopy * 會改變本來array的method很危險,盡量不要mutate #### [reference](https://codeburst.io/javascript-passing-by-value-vs-reference-explained-in-plain-english-8d00fd06a47c)的概念 ## Week 2 #### [spread Operator 展開運算子](https://hackmd.io/@yiting444/By6PFTc9o) [運算子順序](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence):通常不會去記順序,所以寫程式時會用`()`把優先順序包起來(為了幫助人理解) 淺拷貝,不更改原陣列深拷貝,第二層變成傳參考,會更改到原陣列 #### `.concat()` spread Operator的前身 #### `.find()` #### `.flatMap()`：flat+map,順序:先處理map,再flat攤平參數:map的callback,flat只能攤一層 * `.flat()`攤平一層array,會忽略空值,保留空字串 `.flat(層數)`可以指定要攤幾層,`infinity`會全攤平 #### [`.call()`](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/call) array-like object無法直接套用array method,要透過`.call()`來使用 #### `new Set(arr)`:抓取唯一值 #### `.filter()`: return值是array #### `.some() / .every()` some: arr裡面有沒有？ every: arr裡是否全部都有？ #### 共用的function 可以拆成一個獨立的js檔案,HTML裡先載入或用module import 常用命名: utils.js / common.js / helpers.js / lib.js ``` //lib.js function fetchData (url) { return fetch(url).then(res => res.json()); } //index.js import { fetchData } from './lib.js'; fetchData().then(json => {}); ``` * function沒有return的報錯:`//reading properties of undefined (reading 'then')` #### flex vs grid * grid屬性可以幾乎設在父層 * flex也可以用gap #### `.fill(value)` 沒有value時會填入undefined 會改變原本的array 傳入的value為object或array時 -> copy reference (是淺拷貝,填入的值都指向同一個object或array) 製造長度為n,內容都一樣的Array ``` Array(n).fill("歐耶！") ``` #### `.includes(value)` Case sensetive #### `Array.from()` 第二個參數可以放function #### `indexOf vs findIndex`&資料型別(Data Type) [簡報](https://www.notion.so/samselflearning/IndexOf-a2b52985493c440eb5174a1595f291ba?pvs=4) indexOf: 只能帶值,不能比對object type findIndex: 可以帶一個function,可以進到object裡去比對值是否相翁 #### 工作流程: ![](https://i.imgur.com/uV0IRvG.png) ![](https://i.imgur.com/9FgfNLX.png) ![](https://i.imgur.com/zGnDGKY.png) ## Week 3 #### 後端相關關鍵字狀況：後端伺服器壞了,目前AWS只租一台(目前租的RAM跟HD都比我們的電腦還差) * [redis](https://redis.io/) 後端常用cache服務,資料是存在RAM記憶體(DB是存在硬碟裡,撈資料比較慢) * cookies也是存在RAM * CDN是cache的進階版 * load balance也是一台電腦,如果有租多台伺服器,這台電腦會負責把流量分散到不同的伺服器 * AWS 有自動擴載服務Auto Scaling * EC2:AWS的租電腦服務 Compute Engine:Google的 * S3:給工程師的雲端的硬碟 * SQL類似excel的vb最基本的語法:`select * from` * MySQL / MongoDB: 可以用SQL語法查詢的DB #### error log:實務上會把error message存到一個地方,如果網站壞掉可以用來查紀錄 ### 會員系統網站會幫每個帳號建立獨特的id id的產生會用亂數 #### 註冊 * 使用者輸入帳號密碼 -> 存到DB一個叫USER的資料表,並發一個id給他 * 密碼不會明碼存進去,會加密(有很多加密方法,例如sha但不知道這個網站用什麼) * 加鹽: 加密前加一點鹽,讓加密後產生的結果不同 #### 記住使用者 local storage是公開的,通常不會直接儲存帳號密碼 * AppWorks使用jwt token,可以有過期機制 #### FB login * [OAuth](https://medium.com/%E9%BA%A5%E5%85%8B%E7%9A%84%E5%8D%8A%E8%B7%AF%E5%87%BA%E5%AE%B6%E7%AD%86%E8%A8%98/%E7%AD%86%E8%A8%98-%E8%AA%8D%E8%AD%98-oauth-2-0-%E4%B8%80%E6%AC%A1%E4%BA%86%E8%A7%A3%E5%90%84%E8%A7%92%E8%89%B2-%E5%90%84%E9%A1%9E%E5%9E%8B%E6%B5%81%E7%A8%8B%E7%9A%84%E5%B7%AE%E7%95%B0-c42da83a6015)(第三方登入): 免註冊就可以登入的流程 * 跟fb拿完資料後會在自己STYLiSH的DB建資料,並發給使用者STYLiSH的jwt token * 前端會把STYLiSH的jwt token存到local storage,下次進入網頁就可以使用token直接登入 * local storage有分domain(A網站從程式面無法拿到B網站的local storage資料,但有人還是能鑽漏洞) #### 前端常遇到的安全性問題 * [XSS](https://medium.com/hannah-lin/%E5%BE%9E%E6%94%BB%E6%93%8A%E8%87%AA%E5%B7%B1%E7%B6%B2%E7%AB%99%E5%AD%B8-xss-cross-site-scripting-%E5%8E%9F%E7%90%86%E7%AF%87-fec3d1864e42) * [CSRF](https://tech-blog.cymetrics.io/posts/jo/zerobased-cross-site-request-forgery/) * innerHTML很危險 * 社交工程(防範內部人員) * 因無法保證使用者一定是透過前端介面輸入資料(可能透過post man)所以驗證做在userInput到DB最有效 * [dangerouslySetInnerHTML](https://zh-hant.reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml):react會去擋類似innerHTML的行為,但可以透過這個api做insert ### Lighthouse ![](https://i.imgur.com/gJ6iFs3.png) #### PWA * 技術門檻高 * (手機端)網頁“加入主畫面”可安裝成類似手機app, * 透過暫存機制可離線使用 * 網頁縮小後可在背景執行(可以使用通知) ## Programming Paradigm OOP / FP 共通點：避免Shared mutable state ### 命令vs宣告 Imperative programming:命令式,一行一行執行下去(高效) Declarative programming:宣告式,我告訴你怎麼做,實做的過程我不在意,給我結果(抽象) ### OOP * 封裝：很好用,把資訊(內部運作)隱藏起來,提供一個介面如:MVC架構,登入功能,Components or Custom Hooks * 繼承和多型用classc語法會比較方便(用extend),用object要解構再return * 封裝和繼承(不要超過兩層)太多層都會不好維護 * 重點是object之間要怎麼傳遞訊息 * S.O.L.I.D 原則 open-closed:不要去改原本object的介面,多寫一個比較好 linkov subtitution:繼承要保持一致 ### FP * pure function:根據imput回應output,避免side Effect(無法預測)會較好測試 * Immutability:避免非預期的改動 * Declaritive:[Ramda](https://ramdajs.com/) | [Lodash](https://lodash.com/)套件 * React也是根據FP設計的 ### 各自Shared mutable state解法 * OOP: Mutable state,透過interface溝通,各自有各自的state * FP: Shared state,不改變外部的state ## 資料結構＆演算法資料結構：管理／儲存/安全性/處理速度 #### 大區塊結構 * array:在記憶體上是連續的空間排序/二分搜尋法 #### 小區塊結構 * tree:二元樹/多元樹 * linked list:一個連一個 * hash table:混合 ### Linked List #### single linked list 特色:只記開頭(head),開頭會指向下一個點,一個一個串起來(tail) * insert的概念:W>A>N>E要插入Y 1. 從W先開始找 memory leak:指向的順序錯誤 #### double linked list 特色:連結是雙向,指向上一個＆下一個,可以記頭(head)跟尾(tail) * insert的概念:W>A>Y>E要插入N ### Hash Table(雜湊表) sha,處理碰撞用linked list hash function ``` class Node { constructor(value,next = null) { this.value = value; this.next = next; } } class LinkedList { constructor(head=null) { this.head = head } append(node) { if(this.head){ let current = this.head; while(current.next){ current = current.next; } current.next = node; } else { this.head = node; } } get(value) { let current = this.head; while (current.value !== value){ current = current.next; if(!current.next){ return null; } } return current; } remove(value) { //TODO:let prevNode let current = this.head; while (current.value !== value){ current = current.next; } current = null; } insert(value, node) { let current = this.head; while (current.value !== value){ current = current.next; } node.next = current.next; current.next = node; } } const linkedList = new LinkedList() linkedList.append(new Node(1)) ``` ## 技術選型 [選無聊的技術](https://boringtechnology.club/index_zh_TW.html?fbclid=IwAR2focRPokrCWXYoJMs5dPItkwPFMxzKEbDH2BGxZ9HCw8Zsf8FFFN0vv-o) ## Algorithm 101 [演算法視覺化](https://visualgo.net/en) 1. 有邏輯性的依照 **步驟** 解決特定問題 2. 每個步驟都要 **明確**, **能執行** 3. 如果 **無法停止** ,就不算演算法 ### Log複習一般log的base會用2,10 ![](https://i.imgur.com/eLwuvj4.png) [BigO cheat sheet](https://www.bigocheatsheet.com/) ## Network 101 超讚 ## Recursion 俄羅斯娃娃 * Bing - Bing is not google的縮寫遞迴資料結構: ``` const obj={}; obj.self = obj; console.log(obj); // JSON.stringify(obj); //會報錯 ``` #### Alogrithms + Data Structure = Programs 遞迴實際上沒辦法無限次的跑下去(記憶體限制) #### 常見題目印出1-10 ``` function print(min,max){ console.log(min); if(min>=max){ return } print(min+1,max); } print(1,10); ``` 階乘 ``` 數學關係式: n! = n * (n-1)!; 終止條件: 1! || 0! function factorial(n){ if( n === 0 ) return 1 return n* factorial(n-1) } ``` 河內塔:最少步數 ``` //動4=動3*2+1 //動3=動2*2+1 //動2=動1*2+1 //動1=1 //先取得關係式和終止條件,就能轉成程式碼 function f(n){ if (n === 1) return 1; return f(n-1)*2+1; } const result = f(5) console.log(result); ``` 費氏數列:第n個是什麼數？關係式:f(n)=f(n-1)+f(n-1) ``` //終止條件 function fibo(n){ if(n < 2) return n; return fib(n-1) + fib(n-2); } const resault = fibo(8); ``` #### Memoization 遞迴計算過程中有很多重複的計算,把值存下來,可以提升時間複雜度 #### Tailcode ### 寫遞迴最需要注意終止條件 ## Refactor & UnitTest [FridayTalk Refactor](https://github.com/AppWorks-School-Materials/FridayTalk_Refactor) 1.改善可讀性/重用性/程式碼結構 2.確保行為不會被改變->測試 [Refactor 共筆](https://samselflearning.notion.site/Refactor-cc170f27f15647d0a10f541309f48540) ## Big O定義 * 時間複雜度描述的是**算法執行所需的時間量**，與算法執行所需的總次數無關。 * 空間複雜度描述的是**算法執行時所使用的額外空間量**，與算法執行所需的總空間量無關。 ## Binary Search 題目：704.Binary Search 遞迴/while版本各寫一次,用白板寫 ## i18n [工作坊](https://separate-tempo-553.notion.site/react-i18next-5c4104ccc6494f379dd370c18684fc65) ## Sort ( O(n^2) ) 題目：75.Sort Color * JS的`Array.sort()`:現在都是stable sorting,但實作方法不一定相同沒有要學演算法,用這個就可以 * Bubble sort:前後比較,可優化：如果沒有動到順序,可以直接結束 * Selection sort:比一輪,把最小值換到最前面 * Insertion Sort:分成沒排序/已排序,拿未排序好的第一筆跟已排序好的最後開始比較,拿出來再插入 ### Merge sort 題目：912.Sort an Array Divide and Conquer algorithm / ( O(n logn) )/ stable 1.切切切切到底,回頭合合合合出來 2.比較兩個陣列第一個誰大,和到新陣列 ### Quick sort 題目：912.Sort an Array Divide and Conquer algorithm / 最差:已排序Array( O(n^2) ) 最好:( O(n logn) )/not stable 1.隨機選中心點 2.比中心大的往左邊,比中心大的往右邊 ## Cypress cy run/cy open WebDriver:動態生成的元素不友善/透過不同瀏覽器操控,比較慢 [工作營](https://samselflearning.notion.site/Cypress-Workshop-9ac1284eecb948bb9cd762ccc11c7b9c) 怎麼抓到對應元素?多寫一個attibute: data-cy="..." 測試版/正式版？用某些方式去拿掉特定的attibute 非同步：[語法](https://docs.cypress.io/guides/core-concepts/retry-ability)如cy.getClick ## Vue 有很多前置knowledge需要知道 [Vue工作坊](https://bold-passbook-f2f.notion.site/Vue-workshop-174145e59221453aa1574c133f2ec673) [Vue VSCode Snippets](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets): 創基本檔案架構 ## Hash Table( O(1) ) 題目：1.Two Sum / 705.Design HashSet / 706.Design HashMap [Hash概念](https://rickbsr.medium.com/%E6%B7%BA%E8%AB%87-hash-hashtable-%E8%88%87-hashmap-4e5f5e5d36da) | [Two Sum解題](https://ithelp.ithome.com.tw/articles/10269246) 用ASCII嗎去計算對應array裡的值 ### HashMap [Map](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Map) | [.has()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/has) ## Two Pointer 題目: 217.Contains Duplicate / 26.Remove Duplicates from Sorted Array / 167.Two Sum II - Input Array Is Sorted / 11.Container With Most Water / 977.Squares of a Sorted Array ## Stack & Queue 題目: 20.valid-parentheses / 150.Evaluate Reverse Polish Notation / 232.Implement Queue using Stacks ## #[promptInjectionAttack](https://www.inside.com.tw/article/31695-ChatGPT-API-Plugin-Prompt-injection-attack) [chatGPT攻擊](https://systemweakness.com/new-prompt-injection-attack-on-chatgpt-web-version-ef717492c5c2) ## Tree 題目: 94.Binary Tree Inorder Traversal DFS適合用Stack資料結構 BFS適合用Queue資料結構 ## Graph Tree是一種Graph特化的形式 ## String(很難) 題目: 208.Implement Trie (Prefix Tree) String是字組成的array Prefix Tree / Trie:用字組成的一棵樹 [KMP](https://yeefun.github.io/kmp-algorithm-for-beginners/) LPS:直接去檢查自己種的一棵樹(耗能但後面的搜尋更快速) # Dynamic Programming “不想做重複的事情,但不知道要怎麼省時的時候” 動態規劃,面對複雜沒有答案的問題,用在時間複雜度很高的程式,用空間換時間,找最優解最精華的code會在動態轉移方程式(子問題需要父問題的哪些資訊才能解)