英文 | 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款实用工具，有可以帮助你提升开发效率。
最后，感谢你的阅读。
