# 資源整理
###### tags: `#1.KEYPOINT`

## my github
- [profile](https://github.com/henry5720)
- [stars: 工具&資源](https://github.com/henry5720?tab=stars)

## ★
- [心得: 想進入程式領域前，先思考為什麼寫程式](https://forum.gamer.com.tw/C.php?bsn=60561&snA=11466)
- [hellogithub](https://hellogithub.com/)
- [B站大佬-技术蛋老师 (算淺顯易懂)](https://www.bilibili.com/video/BV1be411w7iF/?spm_id_from=333.337.search-card.all.click&vd_source=dd5f45fce12f0ecfd50e32c643c2f49b)
- [慕課教程 (算清晰)](https://m.imooc.com/wiki)
- [自建網站教程, 透過雲端服務商 (華為雲: 可替換成 aws, gcp, ...等)](https://www.bilibili.com/video/BV1hU4y1R7KW/?spm_id_from=333.1387.upload.video_card.click&vd_source=dd5f45fce12f0ecfd50e32c643c2f49b)

## 教程 & 工具
- [編程導航網站](https://www.code-nav.cn/)
- [教學: oxxostudio](https://www.oxxostudio.tw/list.html)
- [迷途小书童的Note](https://xugaoxiang.com/)
- [被删的前端游乐场](http://www.godbasin.com/front-end-addon/)
- [面向信仰編程](https://draveness.me/)
- [學習地圖](https://roadmap.sh/)
- [後端工程師第三階段建議技能列表](https://hackmd.io/ctV9CV5qS56TkeOV5eWkOA)
- [導航: 創造獅](https://chuangzaoshi.com/)
- [開發常用工具](https://smalldev.tools/)
- [檔案辭典(副檔名)](http://www.filedict.com/)
- [導航: 25个前端开发網站](https://juejin.cn/post/7077196404422246430)
- [DevDocs: API documentations](https://devdocs.io/)
- [OverApi](https://overapi.com/)
- [RWD: media query](https://mediaqueri.es/)
- [webflow](https://webflow.com/?r=0)
- [書棧網](https://www.bookstack.cn/)
- [免費domain](https://opennic.org/)
- [墨滴](https://www.mdnice.com/?category=frontend)
- [概念: 5种网站形态及其工作原理](https://www.zhihu.com/zvideo/1451922543662211072)
- [概念: 前端Web开发的26项基本概念和技术总结](https://zhuanlan.zhihu.com/p/89484920)
- [浏览器中实现可视化的四种方式](https://zhuanlan.zhihu.com/p/201424448)
- [overapi(查看js常用語法)](https://overapi.com/javascript)
- [使用 VSCode 來取代 ngrok](https://milkmidi.medium.com/%E4%BD%BF%E7%94%A8-vscode-%E4%BE%86%E5%8F%96%E4%BB%A3-ngrok-6dd91b814280)
- [使用VSCode Remote透過 SSH 進行遠端開發](https://hackmd.io/@brick9450/vscode-remote)

## Ai
- [AI技術核心本質 (白話易懂)](https://www.zhihu.com/question/571427849/answer/1991863531415549465)
- [一文看懂mcp](https://zhuanlan.zhihu.com/p/27327515233)
- [smithery (找mpc用)](https://smithery.ai/)
- [awesome-mcp-servers (找mpc用)](https://github.com/punkpeye/awesome-mcp-servers)
- [我目前常用的3個mcp](https://zhuanlan.zhihu.com/p/1917964196974421518)
- [serena mcp](https://zhuanlan.zhihu.com/p/1919889301719737482)
- [browser mcp (可以讀console log, 操控瀏覽器等等)](https://browsermcp.io/)
- [figma mcp](https://github.com/GLips/Figma-Context-MCP)
- [ai rules (可參考)](https://juejin.cn/post/7513117108114128937)
- [複雜問題如何問 (可參考)](https://juejin.cn/post/7538371148087296039)
- [Spec-Kit 規格驅動開發 (ai coding 的一種方式)](https://ithelp.ithome.com.tw/articles/10394078)

## 網路
1. [問題的起源] 使用者(人) --> 網站(瀏覽器開啟的url)
- [1.瀏覽器輸入網址後...](https://www.bilibili.com/video/BV1s44y117vK/?spm_id_from=333.1387.upload.video_card.click&vd_source=dd5f45fce12f0ecfd50e32c643c2f49b)
- [2.瀏覽器輸入網址後...](https://www.bilibili.com/video/BV1Dj411w7ie/?vd_source=dd5f45fce12f0ecfd50e32c643c2f49b)
2. [往下拆解: 軟體面 (程式&程式之間的溝通)] 瀏覽器開啟的網站(客戶端) --> 裡面的服務(api伺服器)
- [API是什麼](https://zhuanlan.zhihu.com/p/1981772291319816282)
3. [硬體面 (裝置&裝置之間的溝通)] 客戶端 (一台裝置: ex.電腦) --> 伺服器 (一台裝置: ex.電腦)
- [图文讲解网络原理](https://zhuanlan.zhihu.com/p/426085830)
- [ip 基礎知識](https://juejin.cn/post/6844904147955941384)
4. [管控面] 可以互相溝通後, 不能讓所有人都可以使用吧, 該如何控制
- [防火牆是什麼](https://juejin.cn/post/7150476979848871944?searchId=20251225113731A9DA41FF2362C33C875F)

## 資料結構 ＆ 演算法
- [Data Structure Visualizations](https://www.cs.usfca.edu/~galles/visualization/Algorithms.html)
- [圖解教程](https://web.ntnu.edu.tw/~algo/)
- [visualgo](https://visualgo.net/en)

## Git
- [git【设计师的100个前端问题-05】 (看了這個豁然開朗:)](https://www.youtube.com/watch?v=N6YQlPuAamw&t=6s)
- [git 教程](https://juejin.cn/post/6844904166867861511)
- [git branch 教程](https://learngitbranching.js.org/)

## CSS
- [CSS: box-shadow 盒子陰影](https://shadows.brumm.af/)
- [CSS: 動畫](https://animista.net/play/entrances/slide-in-elliptic/slide-in-elliptic-top-bck)
- [CSS: Generate Soft-UI CSS code](https://neumorphism.io/#9c9fab)
- [CSS Design Awards](https://www.cssdesignawards.com/)
- [csswinner](https://www.csswinner.com/)

## JS
- [three.js 入門](https://www.jianshu.com/p/563a03703abb)
- [用JavaScript玩转计算机图形学](https://www.cnblogs.com/miloyip/archive/2010/03/29/1698953.html)
- [事件監聽常用種類](https://hackmd.io/@ivaSrwTTSkC1jb66rpGfnQ/H13zw2mwF)

## React
- [【前端速成】React 快速入門｜Tiktok工程師帶你入門前端｜布魯斯前端](https://www.youtube.com/watch?v=zqV7NIFGDrQ&t=1104s)
- [【udemy付费课程】2023 年终极 React 课程 (b站)](https://b23.tv/spwFEip)
- [一次搞定七大 React Hooks & Hooks 的一些最佳实践分享](https://zhuanlan.zhihu.com/p/179136243)
- [React白話文運動02-ES6](https://ithelp.ithome.com.tw/articles/10292648)
- [useEffect 的完整指南](https://overreacted.io/zh-hant/a-complete-guide-to-useeffect/)
- [React Query 設計理念(清晰)](https://b23.tv/Qie7vXE)
- [主要看這個 React Query 還可以](https://juejin.cn/post/7503449107542016040)
- [Zustand](https://juejin.cn/post/7452175687089946659)

## Python
- [python: 面向對象](https://helpful-act-d01.notion.site/Python-1700f437ea3241f69f18f907e2c99ab0)

## Docker
- [docker 介紹](https://juejin.cn/post/7139724794672447518)

## 資料庫
- [mysql: 樂天](https://www.letianbiji.com/mysql/)
- [mysql: 易百](https://www.yiibai.com/mysql/data-types.html)
- [mysql: sh](https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU5NDk0MTc2OA==&action=getalbum&album_id=1690683025673535494&scene=173&from_msgid=2247484885&from_itemidx=1&count=3&nolastread=1#wechat_redirect)
- [mysql: 小朱](https://dotblogs.com.tw/regionbbs)
- [mssql: 前端共筆](https://hackmd.io/@FrontEndSharedDocumentTeam/r1Npdv5Ju)
- [自学SQL网](http://xuesql.cn/)

## Linux
- [linux特殊符号大全](https://www.cnblogs.com/balaamwe/archive/2012/03/15/2397998.html)
- [swap 虛擬記憶體](https://kejyuntw.gitbooks.io/ubuntu-learning-notes/content/system/system-virtual-memory.html)

## Api
- [public api](https://github.com/public-apis/public-apis)
- [隨機生圖 (api)](https://picsum.photos/)
- [隨機頭像 (api)](https://api.dicebear.com/7.x/avataaars/svg?seed=0.0)

## Design
- [ArtStation](https://www.artstation.com/)
- [pinterest](https://www.pinterest.com/henry4294967296/)
- [reeoo web design](https://reeoo.com/)
- [免費資源筆記 @李介介](https://docs.google.com/spreadsheets/d/1c83LfsUn6uylNwKHqHpD32xZ68ZDFaCG5alkXRmU94g/edit?gid=667984334#gid=667984334)
- [unsplash 免費照片／圖片素材分享平台](https://unsplash.com/)
- [10個繪畫網站](https://zhuanlan.zhihu.com/p/265341942)
- [動態網站sop](https://blockstudio.tw/blog/web-animation-sop/)
- [blender插件](https://blenderco.cn/)

## 🐮
- [Asher Zhu (史萊姆~)](https://www.artstation.com/vuth)
- [DOM哥 (前端)](https://dombro.site/)
- [小朱 (後端)](https://dotblogs.com.tw/regionbbs)
- [龍崎科技 (後端)](https://www.cnblogs.com/1175429393wljblog/category/1915064.html)

## 相關配置

### ai rules (cursor)

Reply in 繁體中文, but keep all technical terms (React, TypeScript, hook, component, API) in English.
You are a senior full-stack engineer with deep critical thinking skills.

Before responding, follow this workflow:

1. 💡 Step-by-step thinking:
   - Analyze the problem in detail
   - Question assumptions explicitly

2. ⚠️ Identify risks & potential issues:
   - Performance, scalability, security, edge cases
   - Maintainability and hidden dependencies

3. 🔀 Propose 2-3 alternatives:
   - Include pros and cons for each option
   - Consider complexity vs. benefit

4. ✅ Recommend best approach:
   - Explain why it’s preferred
   - Include mitigation for risks

Rules:
- Challenge everything, even if it works
- Never say "looks good", "no issues", or "should work"
- Prefer phrasing like "works, but...", "considering...", "risk here..."
- Stack context: React+TS+Vite, C#+Python+Node, SQL Server+PostgreSQL
- Use MCP strategies:
  - sequential_thinking (complex)
  - context7 (docs)
  - interactive_feedback (before completion)
- All output must be Markdown + emoji; no HTML tags

### mcp.json (cursor)

{
  "mcpServers": {
    "Figma MCP": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "figma-developer-mcp",
        "--figma-api-key={your api key}",
        "--stdio"
      ]
    },
    "browsermcp": {
      "command": "npx",
      "args": [
        "@browsermcp/mcp@latest"
      ]
    },
    "context7": {
      "command": "npx",
      "args": [
        "-y",
        "@upstash/context7-mcp"
      ]
    },
    "interactive-feedback-mcp": {
      "command": "uv",
      "args": [
        "--directory",
        "(ex. D:/2-Work/interactive-feedback-mcp)",
        "run",
        "server.py"
      ],
      "timeout": 600,
      "autoApprove": [
        "interactive_feedback"
      ]
    },
    "serena": {
      "command": "uv",
      "args": [
        "run",
        "--directory",
        "(ex. D:/2-Work/serena)",
        "serena-mcp-server"
      ]
    }
  }
}

### vscode/cursor 延伸模組

aaron-bond.better-comments
adpyke.codesnap
anseki.vscode-color
arjun.swagger-viewer
augment.vscode-augment
bierner.emojisense
bierner.markdown-preview-github-styles
bradlc.vscode-tailwindcss
christian-kohler.path-intellisense
cipchk.cssrem
davidanson.vscode-markdownlint
eamodio.gitlens
ecmel.vscode-html-css
esbenp.prettier-vscode
formulahendry.auto-close-tag
formulahendry.auto-complete-tag
formulahendry.auto-rename-tag
geeksharp.openssl-configuration-file
github.copilot
github.copilot-chat
hollowtree.vue-snippets
hoovercj.vscode-power-mode
leetcode.vscode-leetcode
leonardssh.vscord
ms-azuretools.vscode-containers
ms-ceintl.vscode-language-pack-zh-hant
ms-dotnettools.csharp
ms-dotnettools.vscode-dotnet-runtime
ms-python.debugpy
ms-python.python
ms-python.vscode-pylance
ms-python.vscode-python-envs
ms-vscode-remote.remote-containers
ms-vscode-remote.remote-ssh
ms-vscode-remote.remote-ssh-edit
ms-vscode-remote.remote-wsl
ms-vscode.remote-explorer
naumovs.color-highlight
oderwat.indent-rainbow
pkief.material-icon-theme
redhat.vscode-yaml
ritwickdey.liveserver
rvest.vs-code-prettier-eslint
shardulm94.trailing-spaces
stagewise.stagewise-vscode-extension
styled-components.vscode-styled-components
tobermory.es6-string-html
wakatime.vscode-wakatime
wallabyjs.console-ninja
wix.vscode-import-cost
wmaurer.change-case
wn244.directory-tree
zhuangtongfa.material-theme

### blender addon

LoopTools
Bool Tool
Copy Attributes Menu
Import Images as Planes
Node Wrangler
Modifier Tools
Sapling Tree Gen
Extra Objects