值得珍藏!Web开发的各类品质工具

2015/06/22 · HTML5 ·
性能

原文出处: Robin
Rendle   译文出处:南北   

嘿,各位,又到了周末计算时间!得益于大量的 Grunt 和 Gulp
插件,我们得以轻松完毕网站数量的可视化,尽管浓厚精通那个工具还比较忙碌,但分门别类的将它们列出来,也是很有援助的。

  HTML5 正在急忙转移创造和管理网站的不二法门。HTML5
在差距的圈子让网页设计更强劲的。急迅,安全,响应式,互动和精彩,这个亮点吸引越来越多的 Web 开发人士使用
HTML5 开发各样网站和应用程序。

正文头阵于搜狐专栏「极光晚报」

对此 Web 工程师来说做好和最不佳的事都是 Web
技术的朝气蓬勃。那也意味着作为一个 Web
开发者来说肯定要持续的学习,适应变化。

内容分发网络(CDN)

CDN
可以帮你把网站的资源分发到世界各省,有助于升高网站的响应速度,当然,那对于这些特殊地区的用户是收效甚微的。

  本文收集的20款优异的 HTML5 Web 应用程序,值得添加到您的 HTML5
的工具箱中,他们可以协助你付出前端项目更快,更便于。

对于 Web 工程师来说做好和最倒霉的事都是 Web
技术的百尺竿头。那也意味作为一个 Web
开发者来说肯定要时时刻刻的读书,适应变化。
据此,小编列举出了团结开支和学习进程中遇到的好工具和资源,在此地享用给大家:

所以,作者列举出了和睦支付和上学进程中境遇的好工具和资源,在此地享受给大家:

CloudFlare

CloudFlare 的兵不血刃之处在于它可以变成你的 DNS 服务器(CDN
只是它兼具服务的一个组成部分),那样对你的网站发起的保有请求都会经过它。

CloudFlare 的 CDN
在过去十五年的宏图和进步中,并从未一向的陈腐和封建。大家的专利技术中丰富利用了流行的技能升高,包罗并不压制硬件、web
服务器和网络路由。换言之,大家立异的建设了后辈的 CDN。新的 CDN
配置简单、价格低廉,其特性也终将比你利用过的其余传统 CDN 都要过得硬。

您或许感兴趣的相干文章

JavaScript Libraries

  • jQuery:最盛名的
    JavaScript 库。
  • BackBoneJS:为复杂性
    WEB 应用程序提供 MVP 结构。
  • D3.js:最流行的
    Javascript 可视化图形库之一。
  • React:Facebook
    开源的 JavaScript 库。
  • jQuery
    UI:以
    jQuery 为根基的开源 JavaScript 网页用户界面代码库。
  • jQuery
    Mobile:jQuery
    框架的一个零部件,提供整机统一的位移 UI 框架。
  • Underscore.js:提供了一整套函数式编程的实用作用,不过从未增加任何
    JavaScript 内置对象。
  • 亚洲城娱乐城:值得收藏的,开发人员收藏的16款。Moment.js:一个JavaScript
    日期处理类库,用于解析、检验、操作、以及呈现日期。
  • Lodash:一个持有相同接口、模块化、高质量等特色的
    JavaScript 工具库。

JavaScript Libraries

  • jQuery:最资深的
    JavaScript 库。
  • BackBoneJS:为复杂性
    WEB 应用程序提供 MVP 结构。
  • D3.js:最盛行的
    Javascript 可视化图形库之一。
  • React:Facebook
    开源的 JavaScript 库。
  • jQuery UI:以
    jQuery 为底蕴的开源 JavaScript 网页用户界面代码库。
  • jQuery
    Mobile:jQuery
    框架的一个组件,提供全部统一的运动 UI 框架。
  • Underscore.js:提供了一整套函数式编程的实用成效,可是没有扩展任何
    JavaScript 内置对象。
  • Moment.js:一个JavaScript
    日期处理类库,用于解析、检验、操作、以及展示日期。
  • Lodash:一个兼有同样接口、模块化、高品质等特色的
    JavaScript 工具库。

MaxCDN

CSS-Tricks 当前就在行使 马克斯CDN 托管所有的静态资源。它可以无缝地融合
WordPres 和 W3
的兼具缓存资源,所以大家无需做怎么样更加处理,即可将资源移入
CDN,并能有限支撑链接的准头。

亚洲城娱乐城 1

对此一个博客来说,考虑到其中的大文件重大是 JavaScript、CSS
和图纸,而不是摄像等档次,那贷款占用的可真多。

大家的 CDN
服务均等是一个网站加快器和实时控制中央。创造它,就是为了让网站的用户和运维都能从下一代
CDN 中赢得最大收入。

  • 推介10款非凡理想的 HTML5 开发工具
  • 二零一二年最经典的10款 HTML5 游戏集锦
  • 35款更加优异的按照 HTML5 网页游戏
  • 20个惊艳的 HTML5 Canvas 应用试验
  • 8个惊艳的 HTML5 和 JavaScript 特效

前者框架

  • Bootstrap:闻名的飞快支付响应式
    Web 应用程序的前端工具包。
  • Foundation:一个易用、强大而且灵活的前端框架,用于营造基于其余设施上的
    Web 应用。
  • Semantic
    UI:全语义化的前端界面开发框架。
  • uikit:一款轻量级开源的前端框架。

前者框架

  • Bootstrap:有名的迅猛支付响应式
    Web 应用程序的前端工具包。
  • Foundation:一个易用、强大而且灵活的前端框架,用于打造基于其他设施上的
    Web 应用。
  • Semantic
    UI:全语义化的前端界面开发框架。
  • uikit:一款轻量级开源的前端框架。

CloudFront

亚马逊(亚马逊)互连网服务(AWS)版本的 CDN。

亚马逊(Amazon) CloudFront
是一个情节分发互连网服务。它可以无缝融合入其余的亚马逊网络服务产品,为开发者和公司分发内容到最后用户手中提供了一种简易的办法,整个进度都享有低顺延、高转换速度的特点,也远非最小使用量的要挟需求。

 

数据库

  • MySQL:最盛行的关系型数据库管理体系。
  • MariaDB:由
    MySQL 早期员工付出,属于 – MySQL 的一个分支。
  • MongoDB:基于分布式文件存储的数据库。
  • Redis:一个开源、接济互联网、基于内存、键值对存储数据库。
  • PostgreSQL:开源的靶子 –
    关系型数据库管理系列,Uber 早期就是用得这几个。

Task Runners / Package Managers

  • Grunt:JavaScript
    世界的创设工具。
  • Gulp:基于流的自动化打造工具。
  • Bower:Web
    包管理器,包括 HTML,CSS,JavaScript,字体、甚至图片资源。
  • NPM:Node
    包管理器。

数据库

  • MySQL:最盛行的关系型数据库管理种类。
  • MariaDB:由 MySQL
    早期员工支付,属于 MySQL 的一个拨出。
  • MongoDB:基于分布式文件存储的数据库。
  • Redis:一个开源、帮衬互连网、基于内存、键值对存储数据库。
  • PostgreSQL:开源的目的 –
    关系型数据库管理连串,Uber 早期就是用得那么些。

CDNperf

上述的 CDNs
并不能托管你随便的资源,它们往往只是托管最频仍用到的公文。纵然对于线上产品的话将资源和服务器托管到村办的
CDN 上并不是最好的点子,但那种措施对于分发资源来说仍然是急速和概括的。

CDNperf 可以帮你找出最快和最可相信的 JavaScript
CDNS,让您的网站更快更有朝气。

亚洲城娱乐城 2

Initializr

亚洲城娱乐城 3

Initializr 是一个足以让你创制 HTML5 模板的网站。

能够创立样板 HTML5 模板,响应式的 HTML5 模板或 推特 Bootstrap HTML5
模板。

 

CSS 预处理器

  • Sass:一个有力、成熟、稳定的
    CSS 伸张。
  • Less:作为一个
    CSS 的壮大,其包容性相当好,学习话费很低。
  • Stylus:提供更实惠、优雅的主意来生成
    CSS。

Task Runners / Package Managers

  • Grunt:JavaScript
    世界的营造工具。
  • Gulp:基于流的自动化打造工具。
  • Bower:Web
    包管理器,包涵 HTML,CSS,JavaScript,字体、甚至图片资源。
  • NPM:Node
    包管理器。

特性测试

上边的那几个品质测试工具,使用了量化的措施测试了网站中诸如首字节加载时间(time
to first
byte)或者渲染时间等表现。有些工具还会检讨尤其检查资源是或不是被缓存,多个CSS 或 JS 文件是还是不是值得合并。

HTML5 Demos

亚洲城娱乐城 4

此处汇集了部分基于 HTML5
的脍炙人口的尝试演示,最初唯有5个示范,后来逐级扩充。

 

Markdown 编辑器

  • StackEdit:一个开放源码免费应用的
    马克Down 编辑器, 基于 PageDown。
  • Dillinger:也是在线编辑器,提供云存储,并帮衬HTML5,PDF 等三种导出格式。
  • Mou:Mac
    OS X 上一款不错的 马克down 编辑器。
  • Texts:同时接济Windows 和 Mac OS X。

CSS 预处理器

  • Sass:一个强有力、成熟、稳定的
    CSS 增添。
  • Less:作为一个 CSS
    的伸张,其包容性非凡好,学习花费很低。
  • Stylus:提供更实用、优雅的点子来生成
    CSS。

WebPagetest

WebPagetest
是性质测试的金子标准,它提供了多地点的量化目标用于品质测试,比如有一个中坚的评分,用于评论当前页面优化的品位;有一个截图,展现页面加载后的视觉效果;还有一个浏览器加载资源的瀑布流…

据悉用户浏览器真实的连天速度,在世上限量内展开网页速度测试,并提供详实的优化提议。

亚洲城娱乐城 5

透过选取 API
wrapper,也得以将
WebPagetest 的相关服务丰盛到 NPM 模块和命令行工具中。

  • webpagetest-mapper:将
    WebPageTest 的测试数据转换为可读的文档格式。
  • WPT Bulk
    Tester:使用 谷歌Docs 测试多少个 URLs(如若你持有 API key,也足以运用 webpagetest.org
    来做那件事,或者此外祖父开可访问的实例)。

HTML5 visual cheat sheet

亚洲城娱乐城 6

那是一个便宜的 HTML5 速查,可以防费下载。它列出了 HTML5 所有的要紧质量。

 

Icon 资源

  • Font
    Awesome
  • IconMonster
  • IconFinder
  • Fontello

Markdown 编辑器

  • StackEdit:一个开放源码免费应用的
    马克Down 编辑器, 基于 PageDown。
  • Dillinger:也是在线编辑器,提供云存储,并帮助HTML5,PDF 等两种导出格式。
  • Mou:Mac OS X
    上一款不错的 马克down 编辑器。
  • Texts:同时襄助Windows 和 Mac OS X。

Yslow

Yslow 基于 Yahoo
的高质量网页教条,分析网页的属性并交由响应缓慢的因由。

HTML5 Test

亚洲城娱乐城 7

想知道桌面或运动 Web 浏览器符合最新的 HTML5
标准呢?那一个网站可以辅助测试出分数和评级。

 

Git Clients / Services

  • SourceTree:一款免费并且很酷的
    Git 客户端,协助 Windows 和 Mac。
  • GitKraken
    (Beta):一款免费、直观、美丽的跨平台 Git 客户端。
  • Tower
    2:APP
    很漂亮,需付费。
  • GitHub
    Client:官方客户端。
  • Gogs:一个极易搭建的自助
    Git 服务。
  • GitLab:对私家项目也免费。

Icon 资源

  • Font Awesome
  • IconMonster
  • IconFinder
  • Fontello

Google PageSpeed

PageSpeed 根据网页最佳实践分析和优化测试的网页。

亚洲城娱乐城 8

PageSpeed 也有一个 CLI(Command Line Interface)工具:PSI(PageSpeed
Insights with reporting)

在营造进度中,可以应用 PSI
测试移动端和桌面端的属性,最后赢得可读性出色的测试结果。

亚洲城娱乐城 9

HTML5 Canvas Cheat Sheet

亚洲城娱乐城 10

比方你无法记住所有 Canvas
的授命和抉择,那么那个小抄是相对适合你。可作为一个图片或 PDF
免费下载。

当地开发条件

  • XAMPP:完全免费,简单安装的
    Apache 分布式环境。包罗:玛丽亚DB,PHP,Perl。
  • MAMP:Apache +
    MySQL + PHP + Python + Perl。
  • WampServer:Windows
    下的 Web 开发条件,可以创设基于 Apache 2,PHP 和 MySQL 的 Web 应用。
  • Vagrant:安装和安顿简单、轻量级。
  • Laragon:快捷、不难搭建的
    Windows 本地开发环境。包蕴:MySQL,PHP,Redis,Apache。

Git Clients / Services

  • SourceTree:一款免费并且很酷的
    Git 客户端,援救 Windows 和 Mac。
  • GitKraken
    (Beta):一款免费、直观、美丽的跨平台
    Git 客户端。
  • Tower
    2:APP
    很漂亮,需付费。
  • GitHub
    Client:官方客户端。
  • Gogs:一个极易搭建的自助
    Git 服务。
  • GitLab:对个人项目也免费。

我的网站都付出到哪儿去了?

评估网站在世界各省为各种移动端用户支出的保安资产。

亚洲城娱乐城 11

Lime JS

亚洲城娱乐城 12

LimeJS 是一个 HTML5
游戏支付框架,用于火速创设运行于触屏设备和桌面浏览器的玩耍。

 

文件比对

  • Diffchecker:文件比对的在线网站。
  • Beyond
    Compare:老牌软件,能很快比较文件和文件夹,作用强大。

本地开发环境

  • XAMPP:完全免费,不难安装的
    Apache 分布式环境。包涵:玛丽亚DB,PHP,Perl。
  • MAMP:Apache +
    MySQL + PHP + Python + Perl。
  • WampServer:Windows
    下的 Web 开发环境,可以创立基于 Apache 2,PHP 和 MySQL 的 Web 应用。
  • Vagrant:安装和安顿简单、轻量级。
  • Laragon:快速、简单搭建的
    Windows 本地开发条件。包涵:MySQL,PHP,Redis,Apache。

Pingdom 网站速度测试

输入 URL 地址,即可测试页面加载速度,分析并找出品质瓶颈。

亚洲城娱乐城 13

HTML5 Reset

亚洲城娱乐城 14

HTML5 Reset 是一组文件,包涵 HTML、CSS
等,用于在开班新品类的时候帮助你节省时间,提供 HTML5
的空白WordPress模板。

 

Code Sharing / Experimenting

  • codeshare:能和其余开发者实时共享代码。
  • JS
    Bin:可以将编制后的代码保存到当地,或将
    URL 地址发给其旁人,让其辅助调试代码。协理HTML,CSS,JavaScript,Markdown,Jade 和 Sass。
  • JSfiddle:能自定义环境来测试你的
    HTML,CSS,JavaScript 代码。
  • Dabblet:Web
    playground,交互成效不错。

文本比对

  • Diffchecker:文件比对的在线网站。
  • Beyond
    Compare:老牌软件,能高效相比文件和文书夹,功用强大。
网站地图xml地图