15 个用于顺利 Web 开发的便捷工具
已发表: 2015-11-06我们不是坚持刻板印象的人，但可能已经有一段时间没有（立体）典型的 Web 开发人员刮掉他那该死的胡须了，或者换了衣服，或者洗了个澡，或者刮了那该死的胡须……
你真的不能怪他们。 自从所有开发人员都喘口气以来，已经有一段时间了。 2015 年是 Web 开发技术突飞猛进的好年头，但开发人员再也不能在闲暇时打破他的笔记本电脑/MAC（像老板一样）并为平台编写代码。
现在你必须处理支持多平台的响应式设计，HTML5，PHP7 将在今年进一步发布，像 IE 这样的浏览器不会停止对所有东西的错误处理......逐渐增长到 -物联网本身的矩阵级别。
这是我们开发人员可以做的一切来跟上。 但我们这样做，主要是因为这些漂亮的工具。
看一看。
1.科莫多编辑
一切都源于开发人员的代码，因此从您能找到的最佳编辑工具开始是很自然的。 Komodo Edit 对于所有这些以及更多内容来说都是相当洁净的。 它是一个不错的跨平台、多语言文本编辑器，供您编写和编辑代码。哦，它是免费的。
该工具可在 Windows、Mac、Linux/UNIX 上运行，因此毫不费力。 我们还喜欢它的自动代码完成功能，适用于 HTML、CSS、JavaScript、Java、PHP、Ruby、Perl（世界上大约 5 个人）等语言。这是一款智能文本编辑器。
奖励积分，以增加项目管理器功能的便利性，用于组织和跟踪文件。
2. CSS 3.0 制造商
老实说，尽管您喜欢 CSS3 的一切，但在为诸如圆角该死的边缘之类的东西编写语法时，您还是忍不住有点讨厌它。 让你睡不着觉是一个如此微不足道的细节，但无论如何你都会这样做。 您不能记住超过 100 个新属性及其各自的前缀。 所以，感谢上帝提供了像 CSS 3.0 Maker 这样的工具。
这个简洁的小在线工具可以让您将棘手的代码复制并粘贴到您的样式表中。 它为您选择的框半径、渐变、文本和框阴影、变换、过渡和旋转等样式细节生成代码。 它还将显示哪些桌面和移动浏览器支持这些样式属性。 一个小的预览区域将显示效果，代码可以从视图框中复制或下载到 HTML 文件中。
对于我们这些不能在看似平庸的风格细节上花费太多时间的人来说，这个工具是一个救命稻草。
3.--无前缀
“摆脱 CSS 前缀的地狱！” - 无前缀介绍页面。
这是一个严肃的工具，由 Github 的一位名叫 Lea Verou 的天使将我们从“前缀地狱”中拯救出来。 它将在<link>或<style>元素的样式表中添加供应商前缀（您看不到的地方）。 另外：您不必担心新的<link>或<style>元素、jQuery 的.css()前缀或您所做的任何更改，因为它会涵盖所有内容。
有什么不喜欢的？
4. Blokk字体
“Lorem Ipsum”长期以来一直是占位符文本。 幸运的是，我们现在有了 Blokk：这种字体可以让难以理解的拉丁语的“痛苦”戛然而止。
Blokk 让您在创建模型和线框时将块“文本”用作占位符。 不言而喻，它不会在演示过程中让那些不太懂网络的客户感到困惑。
5. 丰泰罗
在图标字体成为现实之前，开发人员必须寻求设计师的帮助来创建可扩展的图标。 开发它们所花费的时间（顺便说一句，包括创建、提取、实施和定制）几乎是“绝对荒谬的”。 但后来有人把图标变成了字体，每个人都过着幸福的生活……在可预见的未来。
Fontello 是一个很棒的图标字体生成器。 它可以让您从数以千计的图标中进行选择，自定义它们的映射或编辑它们的名称，并将它们编译成一个字体文件。 这太棒了，而且是免费的。
我们非常感谢 Vitaly Puzrin。
6. 打字机
打开浏览器的 JavaScript 并开始测试您选择的字体在实际网站上的外观。
Typetester 并不复杂。 它允许您输入和比较不同的字体并测试它们的外观。 你也可以玩弄大小、跟踪、颜色等，直到你得到你想要的。 您一次最多可以比较 36 种不同的字体。 想象一下您可以节省多少时间。
它太酷了。
7.脏标记
编码有时会有点累，但代码清理存在于 Level: Utter Tedium。 但是，如果您想防止错误并加快加载速度，这是必要的。
Dirty Markup 有助于节省您原本可以花在从事更有趣活动（培根三明治，有人吗？）上的时间。 这个带有其他单语法清理工具的组合功能。 我们谈论的是 HTML Tidy、CSS Tidy、JS Beautify 和 Ace Editor。 那是一种综合清洁剂。
这是一个基于 Web 的应用程序，用于清理和格式化您的 HTML、CSS 和 JavaScript。 我们不可能要求更多。
8.虫群
使用这个强大的工具，您可能会成为一个杀死错误的义务警员。
BugHerd 遵循古老的格言“保持简短和简单，愚蠢”。 它可以捕获客户反馈，自行解决小问题，跟踪错误（供您消灭）。 它还将扮演秘书并管理您的项目。
您网站上的超级简单的点击式 UI 可让您的用户报告问题。 BugHerd 将它们变成包含您可能需要的所有信息的报告（例如用户的浏览器版本）。 它易于设置，使用起来很有趣，并且具有自动屏幕截图（浏览器扩展）、直接链接、文件附件、完整选择器数据和讨论等功能。
每月 29 美元的标准订阅费，这是一个陷阱。
9. 萤火虫
响应式网页设计不仅仅是一种新时尚，因为它会一直存在。 但就目前而言，您会发现流畅的布局充其量是棘手的。 您还会发现自己在尝试在各种屏幕尺寸上测试您的布局时非常愤怒。
幸运的是，Screenfly 是一个不错的小型网络应用程序，可以为您测试您的 @media 查询。 您插入您的 URL，它将显示您的查询如何处理您在顶部面板中单击的设备尺寸。
它不考虑浏览器之间的渲染差异，但您可以为此使用浏览器镜头。 否则，这是一种简单、精美的组合方式，可以查看您的网站在不同分辨率下的外观。
10. 基础
既然我们在谈论 RWD，我们不妨开始谈论框架来开发它。
互联网上关于哪个前端框架更好的争论非常激烈：Bootstrap 还是 Foundation？ 您可以使用其中一种。 但在网格系统、用于设计的比例单位（尽管 Bootstrap 4.0 Alpha 已移至 em 和 rem 单位）、从右到左的支持、定价表、游览和画布外导航方面，Foundation 更加突出.
很明显我们更喜欢Foundation。 它与 SASS 和 CSS 一起工作，充满了一整套功能，而且通常更方便和灵活。
我们同意 Zurb 的观点：这是“疯狂的快”。
11.土坯边缘
经过十年软件将设计置于代码之前，Adobe 终于为编码人员提供了优势。
坦率地说，这些令人惊叹的工具和服务是在牢记新的前端编码趋势的基础上制作的。 他们给了我们很大的款待。 Edge Animate 可帮助编码人员创建动画，同时消除所有 Flash 痕迹。 对不起 Adobe，Flash 很棒。 但 Animate 使用标准的 HTML 和 JavaScript，而且你知道，一刀切……
有用于从 HTML 文档中编辑 CSS 的 Edge Code。 Inspect 整合了响应式设计的浏览器测试和设备兼容性测试，并将它们全部同步以实现超快速更新/定制。 广受欢迎的 Typekit 现在是 Edge 家族的一部分。 Reflow 尚未发布，但它可能会将其他前端 CSS 网格制造商从水中吹走。 还有更多。
我们知道。 我们也不得不从地板上摘下我们的下巴。
12.流浪者
Vagrant 不仅仅是虚拟开发软件。
这种美感让您可以创建便携式、易于复制的工作环境。 它将虚拟化软件、服务器基础盒和配置工具整合到一个功能强大的软件包中。 基本上，您不再需要 VirtualBox + Ubuntu + Chef。 Vagrant 将完成这三者的工作，并且在此过程中占用的空间更少。 高级用户还将告诉您它如何让您轻松设置多 VM 网络。
它是用 Ruby 编写的，但适用于 PHP、Java、JavaScript、Python 和 C#。 你可以在 Windows、Mac OSX、Linux 和 FreeBSD 上使用 Vagrant。
它的速度非常快，因为它没有任何 U 友好型——我想要的它看起来不错，但占用了急需的空间。 它可以很好地作为开发人员的测试环境。
这是我们所能得到的最接近圣杯的地方。
13. PageSpeed Insights
谷歌的 PageSpeed Insights 完全按照它所说的那样做。 它让您深入了解主页的前端性能。 对于那里的许多高大上的开发人员来说，这将是一个大开眼界。 所以来一场狂欢吧，从所有将要被拉扯的头发开始加速秃顶。
它所做的只是测量以下之间的经过时间：请求和首屏内容呈现，以及请求和整页呈现。
它将检查与网络无关的方面以计算您的页面的性能：服务器配置、HTML 结构、JavaScript、CSS 和图像。
它锋利无比，速度极快； 所以它肯定会伤害你的感情，如果你得分低，很可能会让你哭。 它还会尝试通过给你一些有针对性的建议来提高你的表现来弥补它，就像一个居高临下的父母一样。
我们喜欢它。
14. 吉特
大多数现代开发人员已经熟悉它。 毕竟，这就是你解释像 GitHub 这样的社区存在的方式。
Git 是一个开源版本控制和源代码管理系统，可以在存储库中跟踪您的项目历史。 它基本上是一个超快速、超高效的 PA。
它使您可以自由地进行实验，而不必担心永远搞砸一切。 您还可以创建多个存储库并使用分支/合并来处理各个功能。 对于协作工作来说，它是一个特别有用的工具。
它是完全分布式的，因此当您离线时（设计或意外），您不必担心无网噩梦。 您可以简单地将更新添加到您的主存储库中，它会耐心等待您重新上线。
15. W3C 标记验证
这是通过的最后仪式。
W3C 标记验证非常简单且必要。 正如 W3C 所说，验证可以：帮助您调试、让您的网站面向未来（浏览器基于 W3C 标准构建）以及帮助维护。
它还通过向您展示您的方式的“错误”来教您如何符合标准。
标记验证不应该被认为是压制性的，因为实际上，它不是。 它将帮助您学习如何编写更好的代码……
像专业人士一样。
底线
当然，还有更多的工具、插件、附加组件、资源和社区，它们使开发……虽然不完全容易，但不那么痛苦。 现在正在开发更多。 Firefox 的 Firebug 插件可以让您实时监控和编辑 HTML、CSS 和 JavaScript。 PixelDropr 是一个 Photoshop 插件，可让您轻松地为您的网站创建可爱的按钮和图标。
每个专业开发人员最终都会拥有自己的应用程序和软件“工具包”，以更快、更高效地工作。 有些是免费的，有些我们需要付费。
但是，谁能给便利定价呢？