欢迎来到知了堂!
联系电话:知了堂-电话号码 028-62016472

web前端开发九个免费常用工具-知了堂

web前端开发九个免费常用工具

  1. Grid Guide

  特点: 快速生成栅格

  Grid.Guide,一款免费的网页应用,能让你在线生成栅格。这个小巧的应用能让你通过自定义间距和列数建立你自己的栅格方案。首先输入你的网站的首选宽度和列数总数,然后Grid Guide就会生成一些选项供你选择。

  你甚至可以将每种栅格方案的下载为PNG图片,用于导入Photoshop或Illustrator。这使你能更加轻松的创建栅格,而不必手动计算或者依赖栅格库。

  2. LivePage

  特点: 自动刷新浏览器

  一些浏览器插件是你用于开发的最佳工具。LivePage 就是一种免费的谷歌扩展插件,能在你对本地文件做出修改后自动刷新你的页面。这意味着你可以在本地编辑你的HTML/CSS/JS文件,而浏览器会在你每次保件时自动刷新。通常你需要花费一秒钟去刷新,但这样子操作许多次后你将会发现这有多么烦人。

  LivePage在火狐上也有相同的插件叫做LiveReload。

  3. Fullpage Screen Capture

  特点: 捕获全屏

  Fullpage Screen Capture可以让你截取整个网页并存为PNG图片。你只需简单的点击Chrome扩展面板中的按钮,它就会自动创建整个网页的完整快照,并将其拼接成一幅图像。你可以用它来研究整体设计,这对你设计网站很有帮助。

  4. WhatFont

  特点: 在网络上找到最好的字体

  排版对网页设计而言是一个巨大的挑战,而且并不是一件很容易的事。要找到合适的字体是很累人的,但是使用例如WhatFont 的扩展插件,可以减轻你在搜索时的痛苦。

  你只需添加WhatFont到你的谷歌浏览器,每当你看到网页上某一种字体时,点击它并悬停,就会给你所有的包括字体样式、大小等方案,甚至在可服务时给出下载地址(例如TypeKit或Webfonts)。

  5. Node/npm

  Node很显然改变了web开发的面貌。它将JavaScript传递给后台,并返回给我们npm,一种发展最迅速的包管理器。这几乎是必然的,并且是有着充分的理由。在当前,所有的前端开发者都应该学习命令行,因为现在这是一种在前端工作流中必要的工具。而且npm也是这个过程的一部分,它也完全由命令行管理。

  你可以使用新的包,或升级旧的包。通过 npm scripts你也能了解到你还可以做什么。

  6. Foundation

  特点: 类似Bootstrap的框架

  不得不承认大多数前端开发者更喜欢使用Bootstrap框架。但是在But Zurb的 Foundation(http://foundation.zurb.com/)最近全面更新之后,我认为它值得受到大家的关注。

  Foundation框架跟Bootstrap一样,有为栅格、排版、按钮和其它动态元素的预定义CSS类。但是它的设计更加简单,所以它不像一般的框架一样,更加容易去自定义布局。

  而且新的Foundation还有一个姐妹框架叫做Foundation for Email。这是一个专门为电子邮件界面开发而使用的框架。这两种Foundation框架都十分棒而且它们由Zurb的团队进行维护更新。

  7. CodePen

  特点: 实现新创意代码

  大多数开发者都知道使用 cloud IDEs做前端开发十分轻便。通过它你可以在任何电脑上写代码,保存你的项目到云端上且分享。但即使有这么多种选择,我不得不说CodePen是最棒的。它启动迅速,十分可靠,易于启动且当你改动代码时会自动更新。

  更不用说它还能支持几乎所有你能想到的库。你可以通过预置HTML模板语言例如Haml或Slim,使用LESS或SASS编译代码。而且CodePen允许你添加外部资源,因此你可以使用像cdnjs的网站去载入其他相关的库。

  无疑地这是最棒的专为写代码和实现新想法的开发工具。虽说也有一些类似的工具,但在我看来没有比CodePen更好的了。

  8. Unheap

  特点: 最新的jQuery插件库

  去寻找一个在策划列表中的最新JS插件是很困难的。大多数情况下你只能浏览Github上比较热门的插件或在Twitter上查看一些热门项目。

  但是,有了例如 Unheap 等这类网站,你可以轻松快速的找到最新的jQuery插件。它们有导航、表单、网页媒体和其他分类等各种类型的插件。

  它基本上是一个拥有着网络上所有最佳的jQuery插件的存储库,而且它经常更新,所以你总能找到各种新的插件。

  9. Responsive Test

  特点: 测试站点响应速度

  最后但肯定同样重要的是一个叫 Responsive Test的网页应用。这是一个发布在GitHub上的开源项目,可以让你测试任何网站的在你的浏览器上的响应是否正常。

  同学们只需输入一个URL并将窗口拖到您要测试的任何宽度。而且还有小按钮可以切换为iPhone、iPad和通用电脑的预定义大小方案。这里也有另外一种 由Matt Kersley开发的相似工具,但是它不能调节大小。相反的,你只能使用几种预定义大小的窗口用于测试。这两个都是web前端开发特别优秀的工具,使用它们远比来回拖动窗口要简单得多。

九个免费的web前端开发工具