N个前端开发实用网站

4,096 阅读2分钟

收集前端开发者常用的网站,并不定期持续更新。有些网站可能需要科学上网才能访问。

ES6 Console

es6console.com/
一个能实时将ES6代码转成ES5的工具。对想研究如何用ES5实现ES6某些语法特性的功能的同学来说,是个不错的工具。
image.png

AST Explorer

astexplorer.net/
一个能将各种语言的代码转成AST并方便查看的工具,包括我们熟悉的css、html、js。它支持多种编译器,我们比较熟悉的当属babel和typescript了。如果想深入了解编译原理,或者开发一个babel插件,这个网站会有很大的帮助。
image.png

TS playgroud

www.typescriptlang.org/play
Typescript官方提供的学习ts的网站。我们可以在上面修改ts配置、写ts代码、检查ts语法问题、查看转js结果。想练习ts类型体操的同学会发现这个网站有多好用。
image.png

Carbon

carbon.now.sh/
有写博客习惯的同学,估计都喜欢Mac风格的代码块展示。Carbon这个网站允许我们粘贴代码然后生成Mac风格的代码块图片,还能切换不同语言和配色方案。
image.png

Shields.io

shields.io/
很多做的好的开源项目,他们在github上的REANDME都会有一些展示构建状态、单测覆盖率、下载量等指标的标签。这些标签是怎么做的呢?我们可以用shields.io来生成图片链接并插入README。只要按照shields.io的规范来构造图片url,就能自动获取npm上的下载量等数据。
image.png

字符画

字符画或者ASCII艺术字的概念我们可能很陌生,但我们一定在某些地方见过。比如,在知乎的console面板,我们能看到HIRE用3D艺术字的形式打印出来。这种往往是比较吸睛的,所以我们常常会在代码注解、cli工具的介绍、网站的console等地方看到。
image.png
字符画一般有两种形式,一种是图片转文本,另一种是文本转艺术字。
图片转文本推荐网站:www.degraeve.com/img2txt.php
文本转艺术字推荐网站:textkool.com/en/ascii-ar…
当然,上面两个看起来也不像是非常完美的工具,大家也可以自行搜索,看有没有更好的。

Unsplash

unsplash.com/
这个网站有很多漂亮的免费图片,可以作为博客的头图。
image.png

Excalidraw

excalidraw.com/
一个很有意思的绘制示意图的工具。
image.png

mdnice

mdnice.com/
墨滴,最热门的微信公众号Markdown编辑器,排版适配公众号。有很多定制好的主题模版,也可以自定义。一般来说,web版功能就够用了,更强大的功能需要付费。

总结

文章整理了我作为前端开发认为比较实用的一些工具网站,希望对大家有用。至于caniuse、MDN等前端必须知道的网站,我就不在这里列举了。