乐趣区

关于前端:我开发常用的十八款提效工具

jiezi

以下是山月在开发中罕用的工具，全副珍藏在我的周刊中。另外我也在开发更多实用于本人的开发者百宝箱，诸位读者可多多提意见

山月周刊 (Github: shfshanyue/weekly)，每周记录对于前端的开源工具、优良文章、重大库版本公布记录等等。每周一公布，订阅平台如下，欢送订阅。

  • 订阅网站: https://weekly.shanyue.tech
  • 订阅 Github: shfshanyue/weekly

1、Web Developer 浏览器插件

一款服务于 Web 开发者的浏览器插件，能够针对该网站做更深刻的操作，如

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

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

  1. 去除最外层标签
  2. 包裹选中的标签
  3. …
  • repo: emmetio/emmet

  • npm: emmet

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
  • repo: marionebl/svg-term-cli

  • npm: svg-term-cli

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

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

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

$ brew install asciinema

$ asciinema rec
  • repo: asciinema/asciinema

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

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

8、Chrome Platform Status: Chrome 公布版本新个性大览

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

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

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

  • repo: emilkowalski/css-effects-snippets

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 取一张指定尺寸的图片

  • repo: DMarby/picsum-photos

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

这里有 JS 生态最风行的库，实时刷新并举荐，并且可每周订阅

  • repo: ritz078/transform

17、TableConvert: 对于表格及任意格局的双向转换

反对 Excel、URL、HTML、Markdown、CSV、JSON、LaTeX、SQL、MediaWiki 等任意格局的互相转换

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

反对各种代码转化的工具，SVG、JSON、TS、GraphQL、CSS、SQL，只有你能想到的这里都有。 光 JSON 就能够转化为十几种代码格局。

  • repo: ritz078/transform
退出移动版