web前端开发工程师，CSS颜色基本样式
作者：互联网
###前言
在平时的开发工作中我们需要使用到很多的工具来辅助我们的开发，也经常会查阅很多的网站来收集资料。下面具体总结了开发过程中的常用的18款工具分享给大家。很实用，可以收藏这样需要时很快能找到，点击标题就会直接跳转到工具页面。
也欢迎小伙伴们在评论区分享和安利出你们觉得有用的工具。
1、 Web Developer 浏览器插件
一款服务于 Web 开发者的浏览器插件，可以针对该网站做更深入的操作，如
- 禁止 Javascript
- 禁止 CSS
- 显示页面所有图片
- …
2、 Emmet: Web 开发者的利器
高效的前端开发利器，可在 Vue/React 中快速书写修改 HTML/CSS，并支持多种编辑器，如流行的 VSCode。
它最大的功能就是把 CSS 样式的缩写 转化为 HTML，如输入 #page>(#header>ul#nav>li*4>a)+(#content>h1{Hello world}+p)+#footer，并按下 Tab 键，自动生成以下 HTML
<div id="page">
<div id="header">
<ul id="nav">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
<div id="content">
<h1>Hello world</h1>
<p></p>
</div>
<div id="footer"></div>
</div>
以上扩展缩写的功能被称为 Expand Abbreviation。除此之外，它还有更多细致的功能，这些功能在 Emmet 中被称为 Action
- 去除最外层标签
- 包裹选中的标签
- …
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 的一切
拥有大量 UA 的数据库及相关功能
- 可获取任意平台的 UA (Mac/Windows/Android)
- 可获取任意 Spider/Crawer 的 UA (Baidu/Google/Bing)
- 可随机生成 UA
- 可解析 UA
14、 risingstars: 2020年 Javascript 明星项目
2021 年，JS 各个生态圈中最流行的框架及周边产物，如 React 生态圈、Vue 生态圈、GraphQL 生态圈、构建工具生态圈等
15、 Lorem Picsum: 随机一张指定尺寸图片 API
https://picsum.photos/200/200 将随机从 Unsplash 取一张指定尺寸的图片
16、 bestofjs: 发现 Javascript 最好的框架与库
这里有 JS 生态最流行的库，实时刷新并推荐，并且可每周订阅
17、 TableConvert: 关于表格及任意格式的双向转换
支持 Excel、URL、HTML、Markdown、CSV、JSON、LaTeX、SQL、MediaWiki等任意格式的相互转换
18、 transform: 编程语言任意格式转化
支持各种代码转化的工具，SVG、JSON、TS、GraphQL、CSS、SQL，只要你能想到的这里都有。光 JSON 就可以转化为十几种代码格式。
分享的18款工具有没有小伙伴使用同款呀，喜欢这篇文章小伙伴们点赞+转发支持小编噢！
后话
对于面试，说几句个人观点。
面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。
所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。
。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。
所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。
标签：动画,web,SVG,面试,UA,前端开发,CSS,生态圈 来源： https://blog.csdn.net/m0_60125265/article/details/119028848