常用软件

1. Mac 自动化软件: Keyboard Maestro (必备软件)
2. Markdown 编辑器:Typora
3. 云文件同步坚果云
4. 代码编辑:Visual Studio Code
5. 抓包软件:Charles
6. 按键显示:keycastr
7. 图片压缩:imageoptim
8. Git 版本管理:SourceTree
9. FTP:Filezila
10. 数据库:Navicat
11. kkfileview
12. 手机屏幕尺寸大全
13. chrome设备调试: chrome://inspect/#devices (chrome浏览器输入)

学习网站

1. 伯乐在线
2. chrome开发文档
3. Draft ECMA-262
4. codepen.io
5. 回流重排查询 CSS Triggers
6. 浏览器兼容新查询 caniuse
7. HTML5在线规范-中文)
8. HTML living standard
9. MDN web Docs
10. 阮一峰ES6
11. 冴羽的博客
12. 前端面试
13. Vben Admin
14. You-Dont-Know-JS

好玩的 CSS

基础学习

1. CSS 参考书 / cssreference.io
2. CSS 灵感 / CSS-Inspira
3. UI 设计师的灵感源泉 / zero-impact
4. 交互式在线 CSS 速记表 / htmlcheatsheet
5. 学习 CSS 布局 / zh.learnlayout.com/
6. CSS 小花招 / css-tricks.com
7. W3 How To 学习如何实现常见的页面组件
8. 450 多个纯 CSS 实现的 UI 设计 by Ξ ℂ𝕠𝕕𝕖𝕄𝕪𝕌𝕀
9. web.dev 上的 CSS 教学专栏

CSS 动画

1. animate.style
2. tholman.com/obnoxious/ 不过脑子的动效，不过看起来很“猛”
3. elrumordelaluz.github.io/csshake/ CSS 抖动特效
4. animxyz.com/ CSS 三维变换动画
5. animista.net/play/ CSS 动画集，可自由调节动画参数，生成代码片段
6. ianlunn.github.io/Hover/ CSS 鼠标悬浮动画
7. www.minimamente.com/project/mag… 适合做专场动画的 CSS 动效

代码生成

1. Tiny Helpers
2. glassgenerator.netlify.app/ 磨砂透明效果
3. coolbackgrounds.io / 酷酷的背景图
4. www.pixelartcss.com / 自定义像素素材
5. stripesgenerator.com / 布条背景图生成器
6. svgwave.in / 波纹生成器
7. numl.design/theme-generator / numl design 的主题生成器
8. color.adobe.com/zh/create/color-accessibility / adobe 针对色盲用户可访问性，提供的一个色彩拾取工具
9. 9elements.github.io/fancy-borde… / 圆角 border-radius 的新玩法 根据上面的圆角，我们可以画出一滴水珠💦 codepen.io/prathkum/pe…
10. 纯 CSS 实现百叶窗 accordionslider
11. grid.layoutit.com / 网格布局生成器
12. csslayout.io / 纯 CSS 实现的一套页面元素、组件集
13. keyframes.app/animate/ CSS 动画生成器
14. cssanimate.com / 又一个 CSS 动画生成器
15. www.cssfiltergenerator.com / CSS 滤镜
16. imageslidermaker.com / CSS 轮播生成器，依赖 jQuery 😂
17. www.30secondsofcode.org/css/p/1 30 秒代码片段 — CSS 篇

色彩搭配

1. colorhunt.co/ Color Hunt
2. mycolor.space/ 还是配色
3. clrs.cc/ 还是配色
4. cssgradient.io/ CSS 渐变色

参考：https://juejin.cn/post/6982363593241002014

终端配置

1. item2

2. on-my-zsh

   $ sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
   or
   $ sh -c "$(wget https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh -O -)"

3. xcode-select --install

4. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

开启终端代理

开启终端代理

1. 测试终端是否翻墙: curl www.google.com

2. vim ~/.zshrc

3. function proxy_on(){
   	export http_proxy="http://127.0.0.1:41091"
   	export https_proxy="http://127.0.0.1:41091"
     export ALL_PROXY='socks5://127.0.0.1:1087'
       echo '*** 开始终端代理 ***'
   }
   
   function proxy_off(){
   	unset http_proxy
   	unset https_proxy
   	unset ALL_PROXY
       echo '*** 关闭终端代理 ***'
   }

4. source ~/.zshrc

博物馆特效：https://codepen.io/RodenKerthin/pen/NWRKMXO