23 个让你的开发工作更轻松的工具

英文 | https://javascript.plainenglish.io/want-to-make-your-life-as-a-developer-a-lot-easier-use-these-tools-bf7796c2e12c

翻译 | 杨小二

创新工具几乎每天都会出现在网络上，专为网页设计和网页开发等领域而创建。如果你想让自己的工作更轻松，可以尝试使用这些工具。

1、Typing.io

地址：https://typing.io/

对于想要在 JavaScript、Ruby、C、C++、Java、PHP 或 Perl 等开源编码环境中练习编写代码的程序员来说，Typing.io 是一款令人兴奋的应用程序。

2、CSS3P

地址：http://css3ps.com/

CSS3Ps 是一个免费的 Photoshop 插件，可以将你创建的图层转换为 CSS3 代码。创作者不断扩展插件的可能性，但你可以亲眼看看它在实践中是如何工作的。

3、Dewey Bookmarks

地址：https://chrome.google.com/webstore/detail/dewey-bookmarks/aahpfefkmihhdabllidnlipghcjgpkdm

Dewey 是比较流行的 Google Chrome 浏览器的出色插件。它可以使管理书签变得更加友好。用户可以访问多个选项，例如标记或添加屏幕。

4、BrowserSync

地址：https://browsersync.io/

BrowserSync 是一个强大的工具，它将吸引创建响应式网站的人。该应用程序的任务是同时在多个设备和浏览器上自动测试页面（点击、滚动等）。多亏了这一点，在创建的 RWD 页面中检测错误变得更加容易。

5、EnjoyCSS

地址：https://enjoycss.com/

EnjoyCSS 是一个在线 CSS 代码生成器。得益于友好的界面，使用 EnjoyCSS 变得轻松而直观。完成后，你可以复制代码并将其粘贴到你正在创建的页面中。

6、Compressnow

地址：https://compressnow.com/

Compressnow 是一个方便的在线照片调整工具。“瘦身”照片可能会有所帮助，例如，当我们希望创建的页面加载速度更快时。

该工具的原理简单直观：加载你感兴趣的照片并指定要缩小的尺寸百分比。原始照片的宽度和高度将被保留。该工具支持 .gif、.jpg、.jpeg 和 .png 扩展名。

7、EasyZoom

地址：https://github.com/i-like-robots/EasyZoom

EasyZoom 是一个 jQuery 插件，可让你放大照片。该插件支持触摸设备，可以使用#CSS 语言轻松修改。

8、Layoutit 

地址：https://www.layoutit.com/

Layoutit 是一个基于 Bootstrap 的在线工具，用于创建拖放页面。高级开发人员可以下载 HTML 文件并以任何语言对其进行修改。

9、 Bespoke.js

地址：http://markdalgleish.com/projects/bespoke.js/

Bespoke.js 是一个非常简约的框架，用于创建令人兴奋和引人注目的演示文稿。对于新手程序员来说，框架的入门可能需要一些时间，但最终的结果是值得的。

10、Mueller Grid System

地址：https://muellergridsystem.com/

Mueller 网格系统只是一组用于响应式和固定布局页面的网格。用户可以完全控制媒体查询和列宽。

11、qSnap

地址：https://chrome.google.com/webstore/detail/qsnap-screen-capture-scre/bijakfpegjnjmfdoiloebhaemhomjkon

qSnap 是一个截图工具。该工具适用于所有流行的浏览器。截取屏幕截图后，我们可以使用内置编辑器对其进行编辑。然后我们可以与他人共享图像或将其保存到你的计算机。

12、Iconion

地址：https://iconion.com/

Iconion 是一个直接从字体生成 PNG 图标的程序。此外，可以修改图标，添加颜色、阴影、渐变等等。

13、Font Combiner

地址：https://fontjoy.com/

字体组合器是一种用于创建字体的工具。用户可以选择调整大小、创建提示或字距。当我们希望我们的网站从其他网站中脱颖而出时，这是一个有用的工具。

14、Impress.js

地址：https://impress.js.org/#/bored

Impress.js 是一个用于创建令人兴奋的演示文稿的框架。该框架是使用现代 Web 浏览器中 CSS 转换和转换的可能性创建的。

15、Prototypo

地址：https://www.prototypo.io/

字体是任何网站的基本元素。Prototypo 是一种工具，可让你直观地修改字体。借助此工具，可以轻松获得独特的字体外观并使创建的页面对用户更加有趣。

16、Avocode

地址：https://avocode.com/

Avocode 是一款无需 Photoshop 即可访问 PSD 文件的应用程序。设计人员和 Web 开发人员之间协作的绝佳解决方案。目前，使用该应用程序需要邀请。

17、InVisionapp

地址：https://www.invisionapp.com/

InVisionapp 是一款专为在各种项目上进行协作的人而设计的应用程序。我们可以轻松发布创建的项目、与他人分享我们的想法、交换意见或进行更改。

18、 bootstrap Studio

地址：https://bootstrapstudio.io/

Bootstrap Designer 是一个用于为 Bootstrap 框架创建 HTML 模板的在线工具。一个令人兴奋的选择是生成一个快速模型，可以呈现给客户以供批准。

19、CSSDesk

地址：https://cssdeck.com/

CSSDesk 是一个专注于处理 CSS 和 HTML 代码的工具。该工具的优势无疑是实时预览页面、行编号或有用的代码颜色。

20、Cold Turkey

地址：https://getcoldturkey.com/

Cold Turkey 是一种工具，可以在一段时间内阻止访问你选择的站点。特别是在学校课程期间或当我们有一个项目要做时很有用，并且我们最喜欢的页面不允许我们集中注意力。

21、Junior

地址：https://justspamjustin.github.io/junior/#home

Junior 是一个用于在 HTML5 中创建移动应用程序的框架。该框架使用所谓的 CSS3 过渡，即从一个值到另一个值的动画过渡效果。此外，该框架与流行的backbone.js 库集成。

22、 FitVids.js

地址：http://fitvidsjs.com/

Fitvids.js 是一个轻量级的 jQuery 插件，可以轻松地将视频文件嵌入到响应式网站中。多亏了这个插件，文件才能顺利适应页面的大小。

23、CollagePlus

地址：https://github.com/ed-lea/jquery-collagePlus

CollagePlus 是我们列表中的另一个 jQuery 插件。它将以 Google+ 或 Flickr 的风格为你的画廊带来令人兴奋的外观。用户可以在 CSS 中定义元素边框、行高或照片之间的间距。

总结

正如我在文章开头所说，新工具每天都在被创造。因此，这不是一个完整的列表。

只希望这23款实用工具，有可以帮助你提升开发效率。

最后，感谢你的阅读。

学习更多技能

请点击下方公众号