常見軟體工程師/網頁開發工具和學習資源整理

以下彙整常見 Web 網頁開發工具和資源整理：

VS Code 套件

1. emmet
2. Live Server
3. Material Icon Theme
4. Babel JavaScript
5. Prettier
6. CodeSnap
7. JavaScript code snippets
8. Peacock
9. TODO Highlight
10. Code Runner
11. Live Share
12. Color Highlight

Chrome 瀏覽器擴充套件

1. Responsive Viewer
2. HTML5 Outliner
3. ColorZilla
4. Fonts Ninja
5. Check My Links

終端機工具

1. ohmyzsh Themes
2. ohmyzsh

✅ Terminal App：iTerm2
網站：https://iterm2.com

✅ Shell：zsh（macOS 預設就是 zsh）
macOS Catalina 之後預設就是 zsh，不用特別安裝
比 bash 現代，有 plugin & theme 支援

✅ Framework：Oh My Zsh
網站：https://ohmyz.sh

優點：
超多好用 plugin（git、docker、npm、自動補齊等）
主題選擇豐富（powerlevel10k、agnoster…）
安裝簡單，社群活躍

安裝指令：

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
brew install romkatv/powerlevel10k/powerlevel10k
# vim ~/.zshrc 修改主題樣式
ZSH_THEME="powerlevel10k/powerlevel10k"
source ~/.zshrc

假文字

1. 中文亂數假文產生器 Chinese Lorem Ipsum
2. 英文 Lorem Ipsum

假圖

1. Fake images please?
2. Picsum photos

影片

1. Free Creative Commons Zero Videos

CSS 文件

1. css-tricks

CSS Reset

1. A Modern CSS Reset
2. CSS Tools: Reset CSS

Git

1. Learn Git Branching

CSS 選擇器練習

1. CSS Dinner

CSS 排版練習

1. Flexbox Froggy
2. CSS Grid Garden

API

1. {JSON} Placeholder Free fake and reliable API for testing and prototyping.

設計

1. s5-style
2. cssdesignawards

CSS 動畫

1. CSS 貝茲曲線

文件工具

1. docusaurus

線上編輯器

1. codesandbox
2. codepen
3. jsbin

Related Posts