完整的网页设计工具包,第2部分

上个月我们从上到下覆盖了前端工装堆栈 - 但还有很多东西需要学习。有时候前端开发人员最大的痛点就是我们工作流程的边缘。

这是项目生命中可能最困难的小问题。本文将探讨这些难点,并考虑如何使用现代计算和前端工具来缓解它们。

生产率

你有没有想过:“我所需要的只是每天额外一小时,我可以做得更多”?人们很容易认为增加额外的时间会让我们更有成效,让我们自由地去做我们喜欢的事情。好吧,你很幸运 - 在你的工作流程中加入一些生产力黑客作为前端开发人员,毕竟你可能会得到额外的一小时。

从本质上讲,生产力实际上就是懒惰......好懒惰。你知道DRY的缩写吗?它代表着不要重复自己,这是你应该铭记的谚语。在分析流程时,您可能会发现许多领域可以优化您的工作流程,并且花费更少的时间来轮转您的车轮。

控制命令行

我们最近看到很多关于前端开发人员是否应该学习使用命令行的推文。我们的回答是,“绝对是的”。当然,你可以成为一个才华横溢的网络工作者,永远不会破解开放终端,但我们相信你错过了大量的生产力提升。

首先学习基本的导航命令:光盘LSPWD。从那里,您可以开始学习操作文件,安装开发人员包和运行构建系统。如果您刚刚开始,请尝试使用linuxcommand.org。为了更温和的开始,我们喜欢John W. Long的文章,OSX命令提示符的设计者指南。当您准备好深入了解时,您可能会喜欢我们关于Sparkbox Foundry的文章:前端开发人员的命令行工具

停止点击这么多

使用鼠标可能很麻烦。当然,有时它只是导航界面的最佳方式,但对于日常任务,它可以真正减慢你的速度。以下是一些我们最喜欢的从鼠标转向键盘的应用程序:

阿尔弗雷德是一款免费的Mac应用程序,可为键盘提供令人难以置信的强大功能,例如启动应用程序,查找文件,甚至运行自定义脚本或工作流程。我们可以提供的最佳建议是提高您的工作效率,现在就去下载Alfred。或者如果你在Windows机器上,你可能会给Launchy一试。

Dash stores snippets of code and searches offline documentation sets for over 130 APIs. It integrates with keyboard shortcut tool Alfred

Dash存储代码片段并搜索超过130个API的脱机文档集。它集成了键盘快捷工具Alfred

短跑是我们难以想象的那些应用程序中的另一个。它使您可以脱机访问代码文档。虽然这可能听起来不多,但值得每一分钱。 Dash完全基于键盘命令,而且速度非常快。我们从未有过如此多的有趣浏览代码文档。

但这里是最好的部分:Dash为Alfred提供了一个很棒的工作流程,使您能够从系统的任何位置即时搜索代码文档。在Dash的Preferences> Integration窗格中查找Alfred工作流程。

处理文本的工具

如果你渴望更高效的应用程序,这里有一些我们最喜欢的处理文本的工具:

  • 降价使您能够快速编写可以编译为HTML的语义文档。
  • NvAlt是一个用于写作的暂存器和存储库。它包括Markdown支持,出色的键盘快捷键以及快速搜索所有笔记的功能。
  • TextExpander创建一个简短的关键字库,扩展为更长的单词或短语。我们将它用于输入我们的电子邮件和邮寄地址,代码片段以及我们经常使用的任何短语等任务。

本地服务器

每天多次将更改推送到远程服务器会产生很多痛苦。在本地工作大大缩短了更改代码和查看浏览器中反映的更改之间的时间,从而使您能够快速迭代并更自由地进行实验。

Anvil makes setting up a local development environment a breeze, giving you a local server and .dev domains

Anvil使设置本地开发环境变得轻而易举,为您提供本地服务器和.dev域

有几个软件包可以帮助您更轻松地设置本地开发环境。我们个人最喜欢的一个是,一个位于菜单栏中的Mac应用程序。它为您提供了本地服务器和漂亮的.dev域名。

还有更多功能齐全的工具可提供运行CMS和应用程序的服务器和数据库软件。MAMPWampServer是两个这样的包。这些软件包分别适用于Mac和Windows,提供完整的Apache,MySQL和PHP环境。如果您希望更好地控制本地服务器配置,可以通过从源安装Apache,MySQL和PHP来自行编辑环境,这样您就可以在本地计算机上镜像生产环境。

我们在Grunt流程中使用的一个很棒的插件是咕噜-的contrib-CONNECT。这个插件可以启动一个基本的HTTP服务器,并可以实时重新加载你的页面。甜!

一种新方法是使用虚拟机(VM)将生产服务器配置克隆到本地计算机。服务如搬运工人流浪汉提供实现这一目标的方法。这两个软件包都为您提供了基于文本的配置文件,这些文件可靠且可预测地调整您指定的VMS匹配条件,并使您能够将该配置检查到版本控制系统中。这些解决方案需要更多的设置时间,但可以提供最终的本地开发体验。

Vagrant lets you create a standard local development environment for you and everyone on your team

Vagrant允许您为团队中的每个人创建标准的本地开发环境

在本地工作可能需要组织变更或在效率方面向后退一步,而在本地设置所有部分,但最终,它是值得的。

浏览器和设备测试

还记得那些必须通过编写警报来测试JavaScript的日子吗?

Alert(“JavaScript已加载!”);

希望这不是您最近调试JavaScript的第一站,但它提醒我们,用于测试浏览器代码的工具是陈旧且不友好的。

2006年萤火被释放了。在此之前存在浏览器调试工具,但Firebug将这些工具捆绑在一起并对它们进行了重大改进。第二年,微软发布了一个与IE6和IE7兼容的开发人员工具栏。最后,在2009年,微软发布了内置开发人员工具的IE8。

正如您所看到的,我们还没有那么久的优秀浏览器调试工具。我们很容易忘记现在有多好。

浏览器作为设计工具

您的浏览器是一种设计工具。这不是你每天都听到的,不是吗?不过,我们开始这么想。我们的现代浏览器配备了如此先进的开发人员工具,它们不再是我们开发过程中的最后一站。相反,他们开始成为第一个。

我们中的许多人开始通过传统的图形设计进军网络。当然,我们以接触广告的方式接近网络:首先设计一系列静态,高保真的模型,客户可以查看。

但是,随着时间的推移,我们已经开始意识到以这种方式工作并不能补充流动性,快速变化的网络性质。通过先进的工具使我们能够对我们的工作进行细致的控制,就在我们的浏览器中,我们几乎没有任何理由不以新的方式开始工作。

使用开发者工具

首先要做的事情是:查看网页的来源。我们喜欢Chrome的DevTools,因此我们将专注于Chrome。大多数这些原则适用于各种浏览器,但术语可能略有不同。在Mac上,点击CMD + ALT +我打开浏览器的开发人员工具并查看源代码。您也可以右键单击网页中的任何元素,然后选择检查元素打开Inspector并专注于该元素。

Setting your browser developer tools' Inspector as a vertical pane makes it easier to check responsive designs

将浏览器开发人员工具的Inspector设置为垂直窗格可以更轻松地检查响应式设计

打开检查器后,您将看到友好的元素选项卡。这显示了HTML页面的结构,使您可以浏览和编辑DOM。您是否知道可以拖动DOM元素,通过右键单击编辑它们,然后按下它们删除它们删除键?这开始感觉像是一个设计工具!

在Elements选项卡下方,您将找到Styles窗格。适用于当前所选DOM节点的CSS将显示在此窗格中。这是最好的部分:您可以实时编辑这些样式,与设计工具中的方式不同,删除旧样式或添加新样式。在Chrome的开发者工具中,最好知道您可以选择CSS值,然后使用带有Shift和Alt变体的向上和向下箭头键对数值进行增量更改。

我们喜欢使用Inspector位于浏览器右侧的布局。这使您可以扩展和收缩Inspector窗格,该窗格可以灵活地调整您的网站以测试响应式设计。大多数浏览器都提供了一个菜单项来切换此视图。

深层发掘

Chrome的开发者工具还有很多内容需要探索。花时间修改“资源”选项卡,用于调试JavaScript的“控制台”选项卡,以及用于处理站点性能的“审核”面板。我们建议阅读Chrome DevTools文档和看CodeSchool的优秀免费课程

Need help with Chrome DevTools? Code School has an excellent free course

需要帮助Chrome DevTools? Code School有一个很好的免费课程

自动部署

手动拖放,复制和粘贴,或选择和移动文件不是部署项目的好方法。如果您忘记了一个包含应用变量的隐藏文件,该怎么办?或者如果其他人必须进行部署?他们会知道该怎么办吗?到目前为止,我们讨论过的工具使开发人员的任务可重复,可预测,并将它们存储在源代码管理中。我们可以而且应该以相同的理想接近部署。

有几种服务,比如魔豆FTPloy部署使您能够从源控制存储库部署到远程主机。这些功能非常适合简单部署。但是,我们发现在部署中需要更多控制和更多功能。

Beanstalk lets you deploy from a source-control repository to a remote host, and works well for simple deployments

Beanstalk允许您从源控制存储库部署到远程主机,并且适用于简单部署

我们使用了开源项目Capistrano的米娜自动化我们的部署。这些项目的功能类似,但有一些微不足道的差异。在他们的核心,他们的任务是用Ruby编写的,并向服务器发送一个由Ruby任务生成的Bash脚本。您可以将它们视为Bash的预处理程序。

像Capistrano和Mina这样的部署程序将像Capistrano和Mina这样的部署程序将使用SSH(Secure Shell,一种用于远程登录的标准安全方法)来访问您的服务器并git-clone您的项目。程序克隆项目后,它将继续执行已在部署配置文件中编写的任何脚本操作。自动部署消除了我们在手动将文件拖放到FTP服务器时所感受到的痛苦 - 让计算机为您完成这项艰苦的工作。

For complex app deployments, Mina lets you build and run scripts on servers via SSH

对于复杂的应用程序部署,Mina允许您通过SSH在服务器上构建和运行脚本

让我们把它包起来

从我们探索前端工具中获得的最大教训是,您不应该害怕探索。不需要一次采用所有工具。当您遇到痛点时,请花点时间尝试实现更优雅的解决方案。不知道更优雅的解决方案?做一些研究。当您了解到时,请务必与我们社区的其他成员分享您的发现。

:Adam Simpson和Neil Renicker

这篇文章最初出现在网络杂志问题256。



翻译字数超限