0基础前端开发，web前端开发工程师找工作

高效的前端开发利器，可在 Vue/React 中快速书写修改 HTML/CSS，并支持多种编辑器，如流行的 VSCode。

它最大的功能就是把 CSS 样式的缩写 转化为 HTML，如输入 #page>(#header>ul#nav>li*4>a)+(#content>h1{Hello world}+p)+#footer，并按下 Tab 键，自动生成以下 HTML

• Hello world

  以上扩展缩写的功能被称为 Expand Abbreviation。除此之外，它还有更多细致的功能，这些功能在 Emmet 中被称为 Action

  1. 去除最外层标签

  2. 包裹选中的标签

  3. …

  3、 URL-encoder for SVG

  

  把 SVG 转化为 DataURI，并嵌入到 CSS 样式中

  4、 Svg Viewer

  

  可视化 SVG，并支持压缩图片、转化为 React/RN 组件、转化为 png 格式的图片等

  5、 svg-term-cli: 把终端操作录制为 SVG 动画

  

  基于 asciinema 的一款软件，使用 javascript 编写。可把终端动作录制为 svg 动画

  $ cat demo.cast | svg-term > demo.svg

  6、 asciinema: 终端动作录制软件

  使用 python 编写的一款可记录终端操作命令动画的工具软件，可在线播放。借助第三方工具可以转化为 gif 动画或者 svg 动画。

  使用以下两行命令可快速开始录制终端。

  $ brew install asciinema

  $ asciinema rec

  7、 Prettier Playground: 任意语言代码格式化

  

  Prettier 是一款优秀的代码格式化工具

  

  

  8、 Chrome Platform Status: Chrome 发布版本新特性大览

  

  列举每一个 Chrome 的新特性大全，目前的稳定版本及下一个版本的发布日期等。

  9、 cssffects: 多种超实用 CSS 动画

  

  收集多种 CSS 动画，大部分是各种 hover 效果、loading 动画等，纯 CSS 实现。收藏以备独立设计网站时的不时之需。

  10、 SVG Wave Generator

  

  随机生成一个波浪SVG，可调整锯齿、波折程度等，并可保存为 SVG/PNG/JPG

  11、 Explain Shell: 图示任一命令行每个参数的释义

  

  可称之为学习及书写 shell 的最佳辅助神器，输入任一 linux 命令，都会一一指出每个参数的释义，PIPE 嵌套且复杂的命令也可解析。

  12、 Browser Logos: 浏览器高清分辨率 Logo

  

  这是 Github 的一个仓库，你可以直接引用地址，找到任意浏览器高清分辨率的Logo。

  如果引用 Github 地址比较慢的话，你可以试试 jsdelivr 的 CDN

  13、 User Agents: 关于 UA 的一切

  总结

  根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。

  这里分享一些前端学习笔记：

  • html5 / css3 学习笔记

    

  • JavaScript 学习笔记

    

  • Vue 学习笔记