以下是山月在开发中罕用的工具,全副珍藏在我的周刊中。另外我也在开发更多实用于本人的开发者百宝箱,诸位读者可多多提意见
山月周刊 (Github: shfshanyue/weekly),每周记录对于前端的开源工具、优良文章、重大库版本公布记录等等。每周一公布,订阅平台如下,欢送订阅。
- 订阅网站: https://weekly.shanyue.tech
- 订阅 Github: shfshanyue/weekly
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
- 去除最外层标签
- 包裹选中的标签
- …
- 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