开发人员收藏的16款,开发资源

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

2015/06/22 · HTML5 ·
性能

初稿出处: Robin
Rendle   译文出处:南北   

嗨,各位,又到了周末总括时间!得益于大批量的 Grunt 和 Gulp
插件,大家可以轻松完成网站数据的可视化,尽管深刻精晓那几个工具还比较不方便,但分门别类的将它们列出来,也是很有支持的。

  HTML5 正在飞快转移创设和管理网站的办法。HTML5
在差别的世界让网页设计更强硬的。快捷,安全,响应式,互动和漂亮,那个亮点吸引愈多的 Web 开发人员使用
HTML5 开发各类网站和应用程序。

正文先发于虎扑专栏「极光早报」

对于 Web 工程师来说做好和最不佳的事都是 Web
技术的百废俱兴。那也意味着作为一个 Web
开发者来说肯定要不断的读书,适应变化。

开发人员收藏的16款,开发资源。内容分发互连网(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 内置对象。
  • 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
是一个情节分发互连网服务。它可以无缝融合入别的的亚马逊(亚马逊(Amazon))网络服务产品,为开发者和店铺分发内容到最终用户手中提供了一种简单的艺术,整个经过都存有低顺延、高转换速度的性状,也并未最小使用量的恐吓必要。

 

数据库

  • 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 模板或 推特(TWTR.US) 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:使用 GoogleDocs 测试五个 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,马克down,Jade 和 Sass。
  • JSfiddle:能自定义环境来测试你的
    HTML,CSS,JavaScript 代码。
  • Dabblet:Web
    playground,交互作用不错。

文本比对

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

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website