望月台·手抄

Appearance

常用软件 ​

  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

    bash
    $ 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 -)"
    $ 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
    xcode-select --install
  4. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

开启终端代理 ​

开启终端代理 ​

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

  2. vim ~/.zshrc

  3. bash
    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 '*** 关闭终端代理 ***'
}
    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