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

###前言
在平时的开发工作中我们需要使用到很多的工具来辅助我们的开发,也经常会查阅很多的网站来收集资料。下面具体总结了开发过程中的常用的18款工具分享给大家。很实用,可以收藏这样需要时很快能找到,点击标题就会直接跳转到工具页面。

也欢迎小伙伴们在评论区分享和安利出你们觉得有用的工具。

1、 Web Developer 浏览器插件

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

一款服务于 Web 开发者的浏览器插件,可以针对该网站做更深入的操作,如

  1. 禁止 Javascript
  2. 禁止 CSS
  3. 显示页面所有图片

2、 Emmet: Web 开发者的利器

0基础前端开发,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

  1. 去除最外层标签
  2. 包裹选中的标签

3、 URL-encoder for SVG

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

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

4、 Svg Viewer

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

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

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

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

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

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

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

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

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

$ brew install asciinema

$ asciinema rec

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

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

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

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

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

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

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

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

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

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

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

10、 SVG Wave Generator

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

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

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

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

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

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

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

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

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

13、 User Agents: 关于 UA 的一切

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

拥有大量 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

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

https://picsum.photos/200/200 将随机从 Unsplash 取一张指定尺寸的图片

16、 bestofjs: 发现 Javascript 最好的框架与库

这里有 JS 生态最流行的库,实时刷新并推荐,并且可每周订阅

17、 TableConvert: 关于表格及任意格式的双向转换

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

支持 Excel、URL、HTML、Markdown、CSV、JSON、LaTeX、SQL、MediaWiki等任意格式的相互转换

18、 transform: 编程语言任意格式转化

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

支持各种代码转化的工具,SVG、JSON、TS、GraphQL、CSS、SQL,只要你能想到的这里都有。光 JSON 就可以转化为十几种代码格式。

分享的18款工具有没有小伙伴使用同款呀,喜欢这篇文章小伙伴们点赞+转发支持小编噢!

最后

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

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

由于文档内容过多,为了避免影响到大家的阅读体验,在此只以截图展示部分内容,详细完整版的JavaScript面试题文档,或更多前端资料可以点此处免费获取

eIK98j5-1627093502162)]

[外链图片转存中…(img-igclCOB9-1627093502162)]

由于文档内容过多,为了避免影响到大家的阅读体验,在此只以截图展示部分内容,详细完整版的JavaScript面试题文档,或更多前端资料可以点此处免费获取

上一篇:Boxy SVG for Mac(矢量图编辑器)


下一篇:HTML 零基础学习笔记 06 - 图形;媒体;APIs