# < 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)
- 帳:[e-mail] / 密: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顯示的標記
requestAnimationFrame API:用在連續動畫
[前端電子報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`
[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)
* 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`
#### prototype的概念可以看 chrome可以看這個type有哪些方法
#### 範型,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裡去比對值是否相翁
#### 工作流程:
## 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
#### 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


[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會在動態轉移方程式(子問題需要父問題的哪些資訊才能解)