tools相关的贡献

ExplainShell:Shell命令知识引擎

在网上发现1个奇怪的Shell命令,但又不想去翻冗长的man page?有了ExplainShell,尽管把乱起八糟的命令丢给他吧,他能给出命令每1部分的相关文档,只是相关的部分哦,另外,他还能支持控制结构~

StyleStats:向你汇报样式表的健康指标

StyleStats 是1款能够汇报样式表各项指标的小工具,内容涵盖样式大小、DataURI大小、字体多少、选择符多少、颜色等。如果你想对项目中的样式有个总体上的认识,肯定能用得上 StyleStats。

Ultimate guide to learning AngularJS in one day

Angular is a client-side MVC/MVVM framework built in JavaScript, essential for modern single page web applications (and even websites). It's a huge leap into the future of HTML and what HTML5 brings, and is a breath of fresh air when dealing with the modern web. This post is a full end to end crash course from my experiences, advice and best practices I've picked up from using it.

理解Git的本质

常说Good developers know how, great developers know why,Git对大家来说应该都不陌生,我们只是学习了Git的命令,那么知道内部究竟是如何工作的么?如果不知道,你真应该看看。

真正能帮到你的Favicon生成器

越来越多的前端工程师为网站添加响应式设计,但可能有个细节你还是忽略了,那就是网站的favicon,在不同的平台,不同的设备上表现都那么如一么?如果你还没有注意到这个问题,这个工具肯定会给你惊喜,利用高分辨率的图,帮你生成在各种平台和设备看起来都不错的favicon~

编译工具之战:Grunt 和 Gulp

对于那些觉得文件拷贝、代码复制粘贴、查找替换重复无趣的同学肯定对 Grunt 不陌生,作为编译工具能节省很多重复劳动,Gulp 是啥?和 Grunt 比有哪些区别?这是个不错的演讲稿,非常生动风趣~

Atom:GitHub 出品的代码编辑器

GitHub 出品了代号为 Atom 的代码编辑器,据说非常的强大,很可能取代 Sublime Text,凭什么这么说?都有哪些高大上的功能,看看这篇文章,然后到官网上申请个试用先~

Dropbox Uploader:通过命令行备份文件

如果你是Dropbox的重度使用者,这个不容错过,只需简单的配置,就能通过命令行管理Dropbox中的文件,代码是开源的,应该不用担心安全问题。对于定期远程备份的需求还是非常有用的~

CSS Reference, Properties and Values, CSS3

A tool I built a while back. Just a simple interface to search for CSS properties and get all the possible values for that property. In the future I plan to add browser support for each property, to make it a little more practical.

如何在 VIM 中显示 CSS 颜色值?

CSS 中的颜色值,纯粹的 RGB 颜色可能你能认得过来,但是看起来随机的 16 进制 到底是啥颜色,需要刷新浏览器才能知道?有了这个插件,在 VIM 中你边写代码就能实时预览颜色~

Chrome Dev Tools 入门指南

Code School上关于Chrome Dev Tools的入门课程,教你如何修改样式、调试Javascript、诊断网络和页面渲染性能、查找内存泄露等等,关于Dev Tools还没有系统的知识?看看这个吧~

CakePHP Tools Plugin

提供了 CakePHP 框架开发的很多工具,比如比特位掩码,记录操作日志,数据库版本等等,可以节省不少时间~

uCSS:冗余CSS猎手

很多代码经年不用,但是你不确定该不该删掉,因为网站上的页面太多,你无法全部测到?uCSS可能帮到你,他能爬下整个网站,并计算CSS的使用情况~

必知必会 JS 工具思维地图

不管你是前端新手还是大牛,如果关注社区的最新动态,有没有被每天冒出来的那些新名词搞晕掉?新的工具、框架层出不穷,但是他们还是有规律可循的,这里对目前的 JS 工具做了思维导图,把你接触到的那些东西归归类,相信了解和学习起来更加有的放矢~

CDNJS: 开源免费的JS文件CDN服务

之前豌豆荚的同学来分享说,他们的海外应用不用担心CDN的问题,因为是免费的并且质量非常好,当时还非常好奇这是咋回事儿,直到在GitHub上发现这个,解开了我心中的谜团,只要是你想放到CDN上的JS文件,往这个仓库发Pull Request就可以了,可惜国内还没有类似的服务~

那些伤人的JSLint错误

JSLint以及后来非常流行的fork版本JSHint文档中的第1句话都说,他们会伤害你,确实是这样,对你的代码吹毛求疵,有没有遇到过通不过检查还不知所措的情况,看看这个列表,很多错误可能瞬间在你眼中变得可爱~

Inquirer.js:nodejs命令行程序的bootstrap

Inquirer.js是1个包含了多个命令行应用程序会用到的UI集合,比如需要用户回答问题、做出选择、用户输入的验证、出错提示,有了Inquirer你能更加专注应用的逻辑,而节省很多重复的工作。

Grunt-Styleguide: 让样式规范更新自动化

团队作业的时候,可能都会慢慢产生StyleGuide,这些规范应该来自于活的代码,比如用Styledocco从CSS源文件中生成,Grunt-Styleguide是这样1款插件,能够帮你把这部分工作自动化了,支持主流的CSS文档生成工具~

Phantomas: 全方位收集网页性能指标

Phantomas是1个基于PhantomJS的能够帮你收集网页各方面的性能指标的开源工具,想做竟对分析?想做自己网站的主动监控?指标非常全面,大到JS多少小到节点数、DOM操作数都能获取到,并且很容易和现有的CI系统集成。

细数 Chrome 33 开发者工具的更新

Chrome 33 中对开发者工具做了大量的更新:你可以快速的跳到代码的某1行,可以使用 getEventListeners 获取某个节点上所有的事件监听函数,此外还包括网络面板的不少更新,非常值得学习~

Rework:随心所以的CSS预处理引擎

使用过SASS、LESS或者Stylus?这些CSS预处理器能够帮助你做很多事情,可还是有很多事情貌似是他们鞭长莫及的,想自己定制对CSS的预处理?看看这个开源库,会让你相见恨晚~

Javascript版本的有限状态机

你的应用状态太多,各种回调和状态传来传去把自己都搞晕了,还记得有限状态机么?有了这个微型Javascript版本的有限状态机,你的代码会更清晰~

Grunt Concurrent: 为你的Grunt任务加速

项目越来越大,Grunt任务越来越多,部署过程动辄几分钟肯定让人难以接受,Grunt Concurrent能帮你把不相互依赖的任务并行起来,比如预编译Coffee的同时预编译Sass,缩短Grunt任务的运行时间~

NPMD: 让你更快的安装NPM包

由于用户太多,NPM不堪重负在网上发起众筹了,你捐钱了么?没有的话可以试试这个,分布式的NPM客户端,把所有的元数据和索引同步到本地,安装更快,也能能帮助减轻NPM服务器的压力。

Devtools Terminal

On OS X, simply install a Chrome extension and bam.. you have a system terminal accessible from Chrome’s DevTools. On other systems, there are a few more steps to get the same effect.

David: 告诉你哪些NPM包已经过期

David 通过对比你项目中使用的NPM包版本与其最新版本,从而让你快速的知道哪些该作升级了,哪些可能已经被废弃了。此外,他还提供在你的网站或者项目上嵌入1个展示状态的Badge~

20 枚扩展 Chrome 开发者工具的扩展

正在用 jQuery、Angular、Ember 开发网页应用,但是调试时还在用非常原始的 console?那么你应该看看这个页面,列举了20款开源社区贡献的 Chrome 开发者工具扩展,很方便的调试各种开源框架或类库所编写的应用~

boomerang:开源的RUM库

想测量网站的性能,仅仅在实验室里搞搞是不够的,你需要知道实际用户那头的性能数据,如何用Javascript收集load,domready,首屏,关键部件可用时间等等性能参数?又如何测量用户的带宽和网络延迟?boomerang肯定对你有用~

BowerCopy:帮你给Bower依赖瘦身

第24期周刊中提到,过多的Bower依赖会导致项目的代码急剧膨胀,产生很多没用的代码,有人提出了方案,这周就有同学搞出来1个工具,不一定非常适合你,但是那会是1个很不错的起点~

Conzole

Conzole is a debug panel built in javascript that wraps javascript native console object methods and functionality in a panel displayed inside the page. Include it once and see it the same every time you open up the page, in every browser, on mobile etc.

如何抽取网页所需的关键 CSS?

页面下载的 CSS 非常多,可是首屏渲染会用到的 CSS 可能连 20% 都不到,为了让首屏渲染的更快,可以考虑将首屏需要的 CSS 剥离出来内联到页面中,那么如何抽取首屏渲染所需要的 CSS?这个基于 CasperJS 的脚本能帮你完成~

Audit: jQuery代码调试利器

jQuery Audit 是1款让你能够在Chrome开发者工具中审查jQuery对象的插件,方便你查看委托的事件,绑定的数据内容,想知道你的程序运行时究竟如何?这个肯定很有用~

几个Grunt的高级技巧

Grunt的出现和流行让前端开发越来越舒心,通过将重复的工作自动化,开发者只需集中精力在应用逻辑上,而不用操心各种拷贝、配置、压缩和编译。作者在这篇文章里分享了几个高级技巧,非常实用~

ESLint

类似与JSHint的代码检查工具,只不过架构设计之初就支持插件,还在早期,作者对JSHint也有很高的评价。

DevTools 网络面板使用详解

Chrome的DevTools相信所有同学都不陌生,但是你能给别人解释清楚里面的所有文字是什么含义,按钮的作用么?来自Google官方的文档,仔细浏览1遍,应该又能学到不少小技巧~

AngularJS + Express 项目种子代码生成器

想基于Angular、Express、Bootstrap、Mongodb快速的开始1个项目?有这个Yeoman Generator你就有个非常不错的开始,除了生成初始代码之外,还提供了非常贴心的Grunt配置,比如LiveReload、Concurrent等。

如何移除JS源码中的调试代码?

开发过程中为了调试,可能不时的加上几条console.log,可是这种调试代码是不应该出现在生产代码中的,如何移除这些东西呢?手工删除?SED?Grunt?封装?方法有不少,每种方法都有优缺点,很不错的梳理~

Duplicator:流量转发复制利器

Duplicator 是利用 Node 开发的类似于 TCPCopy 的流量转发和复制利器,如果你想把线上环境的流量导入到测试环境进行冒烟测试、压力测试等,就可以使用它,相对 TCPCopy 而言,这个更偏向应用层,不需要你懂太多的 Linux 底层知识,更好的是 Duplicator 还支持编程,因为它本身就是个 NPM 包~

Grunt Cdnify:帮你把静态资源指向CDN

这款 Grunt 插件,能够在代码上线时帮你把页面上的静态资源地址指向你所配置的 CDN,省去手动维护的麻烦,网站太小不需要CDN?看看高性能网站建设那两本书你就找到理由这么做了,前端周刊周末就做了这样的更新,不信?看看页面的源代码~

Grasp:JS代码重构助手

有没有过重构代码,但是改了三番五次还是改错改漏不少地方的经历?用SED,批量查找替换貌似都不靠谱,如果代码更多,就纯粹的变成体力劳动了。Grasp的作者正是基于这个痛点搞出了这个工具:基于JS源代码的语法树帮你重构JS代码,避免你漏改、错改代码,官网上给出了好几个常见的重构需求的Demo,快去试试吧~

janodvarko/harviewer

HAR Viewer is a web application that allows visualizing HTTP Archive logs (HARs) http://www.softwareishard.com/blog/har-viewer/

Grasp:JS代码重构助手

有没有过重构代码,但是改了三番五次还是改错改漏不少地方的经历?用SED,批量查找替换貌似都不靠谱,如果代码更多,就纯粹的变成体力劳动了。Grasp的作者正是基于这个痛点搞出了这个工具:基于JS源代码的语法树帮你重构JS代码,避免你漏改、错改代码,官网上给出了好几个常见的重构需求的Demo,快去试试吧~

grunt-wrap: 帮你把代码包装起来

grunt-wrap是1个能帮你在打包发布代码时能在代码开始和结尾加上内容的grunt插件,比如你想把多个js文件合并,然后为了不污染全局作用域,需要将合并后的内容包装在1个匿名函数中,grunt-wrap就能帮你把1切自动化。

Chrome Dev Tools 自定义主题

在老外的视频里面看到别人的Chrome Dev Tools是彩色的,我的却是黑白的?他们是怎么做到的?原来Chrome Dev Tools也可以自定义主题,这里有很多供你选择~

是时候扔掉Grunt拥抱Gulp了?

Grunt无疑是目前社区中最受欢迎的Task Runner,有同学提出了Grunt的设计缺陷,然后推出了Gulp作为替代,Gulp中多个任务的运行借鉴了Linux中的管道思想,在他的术语中不再是配置,而是编写任务。即使不使用,多了解点别人的设计思想还挺好的~

Etsy: DIY WebPagetest 的那些事

WebPageTest是1个公开免费的测试网页性能的服务,但是用的人越多就越慢,甚至要和12306一样排队,还好WPO将这个项目开源,你可以自己搭建WebPageTest实例,Etsy的那帮家伙就这样搞了,进展还不错。如果你脑子里闪过类似的念头,这个就很值得借鉴~

Grunt Source: 多个项目重用Grunt配置

不久前曾发布过1篇文章说如何在多个项目之间重复利用Grunt配置,那个文章只是指出问题所在,没有把解决办法工具话,很快就有人做出来了,Grunt Source就像Linux下面的source命令1样,让你在多个项目之间公用配置文件~

Gulp入门教程

专门针对那些之前没有用过命令行中的Task Runner的同学写的入门文章,从安装到编写第1个task,手把手的帮你把Grulp运行起来~

使用Emmet为你的HTML和CSS开发提速

Emmet (以前叫做Zen Coding)可以看做是1组能够加快WEB代码编写的快捷键和宏,免费并且为很多的开发工具提供了插件支持,比如Sublime、Vim、Textmate等。本文作者手把手的教你如何安装、配置Emmet,并使用Emmet提高效率。

React Native Hackathon Starter Project

React Native 的种子文件,里面包含文件组织方式,各种命令,集成了 React-Native-Element,支持 Android 和 iOS 平台,非常适合快速的开始 1 个 React Native 应用,他的起名就是为黑客马拉松准备的。对于公司级的项目,可以参考另外 1 个脚手架工具 ignite,自己去搜。

前端工程师必备的 Atom 插件

最近开始试用 Github 出品的代码编辑器 Atom,挖掘扩展的时候遇到这篇文章,推荐了几个非常不错的 Atom 插件,比如 Markdown 预览,Vim 模式,JS Lint,Emmet等,如果你还不知道 Atom 是什么,可以看看上期前端周刊。

如何在多个项目间共享Grunt配置?

熟悉了Grunt的同学会觉得用起来真顺手,可是当你维护的项目多了,麻烦又来了,多个项目的Grunt配置大同小异,需要频繁的复制来粘贴去,如何在多个项目之间共享Grunt配置?有洁癖的懒人必看~

想看更多类似内容?