网页设计开发人员有用的编码工具发布者：本站     时间：2020-04-11 11:04:56

是一个普通的粉碎杂志读者的每个人都知道，我们有一个传统习惯，定期研究有最新的资源，工具和服务在网络上，生产力是一个专业的网页设计师和开发人员的重要资产。我们可以而且应该全部融入我们的工作方式，优化工作流程 。
也许我们应该向您发出警告前期长期编译，但我们可以说-有这么多优秀的工具，值得全社会关注的的，但不幸的是往往保持晦涩的方式 。我们热爱所有的设计者和开发者有释放和生产有用的，我们所有的人使用宝贵的资源！我们，一，肯定衷心感谢在网页设计社区的名称 。不管你喜欢还是不喜欢，这里的一些最有用的编码和最近发布的工作流工具。

随意评论这篇文章，让我们知道究竟是如何使用这些工具和您的工作流程也分享你与其他人也可能会发现他们是有用的，仍然没有碰上他们发现的其他工具。请避免链接下降，并分享您的见解和经验，而不是。

[Editor's note: Have you already got your copy of the Smashing Book #2? The book shares valuable practical insight into design, usability and coding. Have a look at the contents.]
有用的编码和工作流程工具
条纹：轻松信用卡网上商店处理
一个网站所有者有很多选择，接受信用卡付款 。这些选项大多有一个验证的过程是相当缓慢的，有些人都或多或少地比别人强大的API和接口;和一些解决方案比其他人更容易使用。随着条纹，你可以忘记繁琐的贝宝API和其他神秘的编程环境的经验。不幸的是，条纹是目前仅在美国。

Stripe: Easy Credit-Card Processing For Online Stores

Web开发的仙境
Web开发带有真正愉快的，有创意的任务和一些平凡，枯燥的。也许最令人沮丧的的任务是在开发过程中的浏览器页面重载或调试每次您更改页面 。Livereload是一个桌面应用程序，监视文件系统中的的变化 。只要你保存文件，该文件是预处理的需要，并刷新浏览器。另外，每次更改一个CSS文件或图像，浏览器是即时更新，而无需重新加载页面 。该工具支持CoffeeScript，上海社会科学院/ SCSS，少，手写笔，HAML及玉器，并与他们列入。目前适用于Mac。

The Web Developer’s Wonderland

安德：单片JavaScript库的
结束安德允许你搜索，安装，管理和编译前端的JavaScript包及其依赖。从本质上讲，它是一个命令行工具，让您有合并和混合所有的流行和小JavaScript库创建自己的个人开发库。如果您使用一个库坏了，或放弃，安德将帮助您快速替换另一个 。如果你需要一个特定版本的软件包，该工具可以帮助你以及 发布网页中包含有详细的文档，用户指南和一些视频教程。没有更多的带宽浪费！

Ender: the end of monolithic JS libraries

开源的汇率和货币
转换，所以，您想您的客户能够在各种货币购买你的产品，但究竟如何你建立这个功能到你的产品？寻找开发一个免费而可靠的的的API来访问率的数据是混账。乔丝Crowcroft创造一个开源汇率的API，它提供了最新，灵活和便携的货币转换可以在任何应用程序，框架或语言（不只是JavaScript）的中使用的数据。它有没有接入费，无速率限制，没有讨厌的XML：只是自由，每小时更新JSON汇率 。更妙的是：乔斯还内置money.js， 一个 JavaScript 货币转换库可以很容易地在任何网站集成。一个演示操场和在网站上提供详细的文档，源代码是在GitHub上。

Open-Source Exchange Rates and Currency Conversion


这简单，微小的JavaScript 库，更简单的数字和货币格式将解决您的货币和数字格式的麻烦，甚至包括可选的Excel风格的列渲染线符号和小数。它将使您所有的数字和货币看起来更统一和专业的比他们如果离开了许多内容创作者。

Easier Number and Currency Formatting

倾斜Firefox扩展：在3 - D DOM检查
多少时间你花费在Firebug的DOM遍历，探索节点之间的关系，分析代码的结构和试图操纵它与讨厌的（或不那么讨厌）的 JavaScript？那么，也许你想尝试不同的方法来改变DOM检查。Mozilla的新工具，倾斜Firefox扩展可以让你在3 - D可视化的任何网页的DOM树。因为DOM本质上是一种文档树的代表性，该工具的开发已经决定在一棵树上筑巢基于层节点，创建堆栈的元素，每一个相应的深度，并根据网页的质感正在呈现。

Tilt Firefox Extension: DOM Inspection in 3D

牟-降价编辑器，Web开发人员，Mac OS
X上，几乎所有目前可用的降价编辑一般作家，谅解备忘录是不同的：对于Web开发人员的。语法高亮显示，实时预览，全屏模式，自动保存，有力的行动，自动配对，渐进式搜索，自定义主题，HTML导出，增强的CJK字符支持。这正是你想要的应用程序。

Mou - Markdown editor for web developers, on Mac OS X

创建投放效果声
，一个页面的主题，让游客签署了使用他们的电子邮件。签约后，页面生成一个特殊的URL他们与朋友分享，使您可以跟踪您最积极推动者，并奖励他们传播这个词 。什么，你需要从发射前的页面 ？这是一个很好的工具书签为你的下一个创造性的突破或启动的想法。

Making a Buzz With the Launch Effect

更好的响应电网
金网格系统使用的“折叠”网格列的概念，到一个基于浏览器的大小 。因此，在桌面浏览器的伟大工程的16列的网格会向下折叠片8列网格，并为移动设备的4列的网格。它可以处理范围任何地方从240个像素宽一路高达2560像素的屏幕尺寸。列本身是没有弹性要么唯一的东西，而列的宽度是屏幕尺寸，排水沟宽度调整的基础上页面的字体大小（EMS指定） 。金网格系统的配备，使得它非常适合现代响应网页设计的其他功能。

A Better Responsive Grid

语义网格系统
CSS网格框架可以使您的生活更轻松，但他们不是没有他们的缺点。幸运的是，现代技术提供了一个新的方法构建页面布局 。但在获得解决方案之前，我们必须先了解目前影响的CSS网格三个看似无法克服的缺陷。

The Semantic Grid System

引导发动的开发工具包
，引导是一个工具包，其中包括基CSS和HTML的排版，表格，网格，导航，错误消息，模态框，按钮和形式 。它的建成与框架。它配备了一个标准的940万像素网格（即没有副作用利润率960.gs），或者你可以创建自己的。引导，允许你创建固定或流动的布局，以及它与许多元素，可用于或重新设计，以适应您的网站。当然，该工具包是免费使用。

Kickstart Your Website and App Development

彩色书签
拖到彩色书签链接到您的工具栏找出您目前网站上的调色板 。然后，只需复制，粘贴，并使用你选择的颜色。

Colour Bookmark

单张：用JavaScript开源互动地图
图书馆提供的各种地图图层，包括砖，标志，弹出窗口，图像叠加层和GeoJSON。它支持移动和桌面浏览器的平移，双击缩放移动浏览器（加在iOS的多点触摸缩放）和更多的。在IOS，硬件加速是启用的，和传单具有模块化结构，可让您减少 库的大小，使其更快的 。该项目是开源和GitHub上的进一步发展和分叉 。

Leaflet

Weinre
weinre是一个网络督察远程，是本质上的网页调试器像萤火虫（用于Firefox）和网络督察，基于WebKit的浏览器，除了它的设计进行远程工作，特别是，以允许您调试网页作为手机等移动设备上。

Weinre

阿德沃夫：远程JavaScript调试器
的移动浏览器变得更强大的一天，由天，你可以做几乎所有你做你的桌面浏览器上。开发商主要关注的问题之一是缺乏开发工具的。原因很明显-房地产需要显示调试器，非开发人员友好的环境。对这个问题的解决方案是远程调试 。您可以用于此目的的JSConsole，但是当涉及到JavaScript调试，阿德沃夫是更好的选择。阿德沃夫是一个JavaScript调试器的iPhone / Android的/的WindowsPhone 7 /黑莓OS 6 + 。（通过Varun库马尔）

Varun's ScratchPad: JavaScript Remote Debugging

VMS
微软IE浏览器提供的虚拟机磁盘映像，以方便在多个版本的IE浏览器网站测试，无论主机操作系统。但没有微软的VirtualPC虚拟机可以是非常困难的。ievms脚本的目的是推动这一进程，用一个命令使用Linux或OS X的VirtualBox的，你可以有IE7，IE8，IE9在单独的虚拟机运行 。

IE Vms

WhatFont
该工具使您可以轻松地得到你徘徊在有关文本的CSS排版细节 。

WhatFont

WordPress的TextMate的包
WordPress的TextMate的包建WordPress核心周围挖看的小事情，我们每天工作所花费的时间量减少的唯一目的是TextMate的捆绑。该插件WordPress的功能，为代码中的常见部分片段，并为WordPress组件的模板功能自动完成 。我们甚至悄悄在卡林顿模板框架功能函数完成。我们一直作出改善，因为我们找到更多的的覆盖，我们希望通过这个插件（从WordPress MU的合并与WordPress的3.0代码基础的巩固 ）。

WordPress TextMate Bundle

立方贝塞尔预览
无论你看到多少人改变参数，如果你没有在2D平面图片，这是很难理解如何弹跳动画立方贝塞尔工程。LEA Verou搜索工具可以使用贝塞尔曲线是如何形成的 。她发现很多，但所有这些限制的坐标，以0-1范围。LEA接着创建自己的cubic_bezier（）曲线发生器。

cubic-bezier.com

Patternizer -条纹图案生成器工具
，随着Patternizer，很容易在短短几分钟内做出一些惊人的 。这需要所有工作，创建复杂的模式，让您专注于创意和发挥。模式可以保存并与其他人共享，允许协作和混音。你可以从全球任何设备进行访问 。

Patternizer - Stripe Pattern Generator Tool

Chainvas
一个微小的，模块化的库，可以添加链接任何API，它是不自然链式的，像在Canvas API，DOM和更多。

Chainvas

表比较发电机
该发电机可让您创造美丽的HTML / CSS的动态比较表 。

Compare Ninja Table Generator

DropKick.js
自定义下拉jQuery插件缓慢下降。如果用户已禁用JavaScript，下拉会正常显示，使用常规的<SELECT>元素。它的工作原理在IE7 +。

DropKick.js

prefixfree
前缀无让你到处仅使用不带前缀的CSS属性。它在幕后工作，当前浏览器的前缀添加任何CSS代码，只有当它的需要。

Prefixfree

{少}
一个自动化的文件夹扫描/解析少的工具。一旦你添加你的项目文件夹的应用程序，它会自动开始监视这些文件夹内的文件的变化。在保存较少的文件，应用程序将自动解析到一个普通的CSS文件少的文件。此外，见：SimpLESS，为Mac的应用程序，Linux和PC编译*.成有效的CSS文件 。

SimpLESS

Recurly.js
此工具可让您轻松您的网站内嵌入一个PCI兼容的邮购表格。库执行行验证，实时总额计算，并优雅地处理错误。您的客户保持在您的网站，而他们的计费信息安全发送到Recurly批准 。由于持卡人数据被直接发送到Recurly，您的PCI合规的范围大大减少 。