javascript相关的贡献

Mousetrap:给网页武装上键盘快捷键

如果你非常 Geek,Mousetrap 就肯定非常合你的胃口,他提供了非常简单的 API 在网页上绑定各种快捷键,甚至能兼容到IE6,不依赖任何外部脚本,压缩之后也就3KB,现在用不上也可以收藏备用~

ECMAScript 6 新特性抢先看

ECMAScript 6 是啥就不用说啦,据说会在今年底最终定稿,这也是继 2009 年以来对 JS的第1次重大更新,目前已经有很多厂商开始在自己的产品中提供部分或全部 ES6 特性的支持,这里对这些能让你写更少、更清晰、更健壮代码的新特征进行了梳理和 DEMO,比如 Class、Generator、Template String等,有些现在就可以用了哦~

高质量JS代码必知必会

代码的质量可以说是工程师的生命线,如何编写高质量代码?或者说哪些习惯会导致Bug友好的代码呢?最小作用域原则,变量提升风险,污染原型风险,隐式类型转换风险以及代码风格,这些都考虑过么?可能你已经开始使用JSHint,但这篇文章会跟你解释JSHint中为啥会有那些规则~

用户感知速度:如何让你的移动Web应用像Native那样快

快到底是个什么概念?对工程师来说仅仅是几个冰冷的数字,对用户来说呢?他们并不关心你的页面进行了多少次HTTP请求,不关心你渲染的帧率,他们关心的只是你的页面用起来爽不爽,我们需要做的就是让页面看起来和数字上表现出来的快是相当的,对移动应用作者给出了几条不错的建议,在PC端同样适用~

High Performance Animations

Paul Lewis 和 Paul Irish为你解析哪些动画效果可以达到60FPS的速率,而哪些动画又可能让你的网页看起来很卡顿,遇到这些问题该咋办?各种动画的Library用起来很顺手,你知道背后工作原理么?

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.

Zakas 新书:Understanding ECMAScript 6

Zakas 在他的博客上坦言,他关注学习 ES6 已经两年多了,期间他做了很多的笔记,如今他把这些内容整理出来编写成书籍,免费开放给全世界的 Web 开发者阅读,不知道 Zakas 是谁?你真的是前端工程师么?

An Introduction To Full-Stack JavaScript

想为1个WEB项目做技术选型?模板引擎,测试框架,你面临的选择太多,但是所有人都想做出最正确的选择,希望能够快速开发、快速迭代、易于维护,并且高性能、可扩展。在作者的眼中,Full-Stack Javascript能满足你的所有需要,看看他的Stask中都包含哪些东西?末尾的总结又非常的中肯:Javascript不能解决所有的问题,但是它的社区应该能给你很多启发~

为什么Javascript需要编程规范?

在1个团队里编程,可能都会强调编程规范,但是为什么需要有编程规范?你能列出无数的理由。AirBnB在github上公开了自己的Javascript的编程规范之后,引来了无数围观,更有人重提上面那个问题,回答者语言风趣诙谐,肯定能说服你~

AngularJS学习资源集中营

这里整理了很多AngularJS相关的学习资料,包括各种书籍、博文、视频以及代码示例,还不知道AngularJS是啥?你已经out了~

grunt-uncss: 冗余CSS的清道夫

使用了Bootstrap但是你的应用中只是使用了Bootstrap的很少1部分样式?想优化,但是人工识别和删除冗余的CSS貌似不是那么简单,Addy Osmani为你带来grunt-uncss,帮助你在项目的发布版本中去掉未使用的CSS,还未正式发布,但是实现思路非常值得借鉴,兴许你还能贡献代码哦~

为什么Angular如此流行?

Google的那帮家伙搞出来的Angular开源之后,迅速积累了庞大的社区,成了很多开发者的选择,为什么它如此流行?对于程序员来说,千言万语也抵不上几行代码,看看用Angular都能干些什么,可能你就会有用它来开发下1个项目的冲动~

Misko Hevery:AngularJS的设计初衷

Angular作者Misko Hevery在这个视频中详细介绍了,为什么他开发Angular,为什么会设计成现在这个样子?对Angular的很多方面都有Demo演示,如果有人问你为啥学习Angular,我想这个视频应该是最好的解释~

写在Javascript的18周岁

不知不觉,Javascript诞生已经18年了,刚出生时那么的弱小,后来那么受争议,而现在它却占据了WEB的半壁江山,看起来前景无限光明,写在Javascript的18岁~

7个你可能不知道的JS基础函数的用法

JavaScript, at its base, is a simple language that we continue to evolve with intelligent, flexible patterns. We've used those patterns in JavaScript frameworks which fuel our web applications today. Lost in JavaScript framework usage, which many new developers are thrust right into, are some of the very useful JavaScript techniques that make basic tasks possible.

常见的 Promise 反模式

如果你开始使用 Promise,它会变的非常简单,可是用着用着你可能会发现你的代码并没有使用了 Promise 本该具有的扁平和简洁,是因为用的不够好?这篇文章的作者总结了几个 Promise 使用不当或者不彻底的例子,可能你也有类似的问题~

It’s time to start using JavaScript strict mode

ECMAScript 5 introduced strict mode to JavaScript. The intent is to allow developers to opt-in to a “better” version of JavaScript, where some of the most common and egregious errors are handled differently. For a while, I was skeptical, especially with only one browser (Firefox) initially supporting strict mode. Fast forward to today, every major browser supports strict mode in their latest version, including Internet Explorer 10 and Opera 12. It’s time to start using strict mode.

使用AngularJS快速开发Chrome应用

Chrome为开发者提供了用Javascript、CSS、HTML就能开发能够运行在浏览器中但是和本地应用相差无几的各种接口,但是从头开始写App可能还是需要花点时间的,有没有更快的办法?当然有,用AngularJS,1个简单的天气预报应用也是分分钟就搞定的事情~

You Don't Know JS 开篇: 作用域和闭包

You Don't Know JS 是Kickstarter上面的1个众筹项目,目的在于详尽的剖析Javascript中那些你似懂非懂的内容,不管对于菜鸟还是老手都值得阅读,想阅读后续的章节?watch那个仓库即可~

Humanize:让你的数据更有可读性

如何将页面中呈现的数据格式化成更利于用户阅读对那些希望打造非常人性的产品的工程师来说,是必不可少的,Humanize 就是这样 1 个帮你格式化常见数据类型的 JS 库,对日期时间、相对时间、文件大小、浮点数甚至长文本的格式化都提供支持,在用 Angular?基于这个搞点 Directive 对你来说也不是难事~

HTML5浏览器存储的前世今生和未来

你可能需要各种理由将数据存储在浏览器端,比如性能、离线可用等等,目前有哪些技术可能助你实现浏览器存储?各浏览器的兼容性如何?各种技术的适用场合?在可以预见的未来又会朝哪个方向发展?很不错的总结~

比较: AngularJS, EmberJS 和 KnockoutJS 中的双向绑定

双向绑定能进1步的简化你的开发工作,你只需要关心业务逻辑,而不用担心数据变了展示如何跟着改变。AngularJS, EmberJS 和 KnockoutJS 中都用不同的方式实现了双向绑定(Two-way Binding),实现机制有何异同?性能是否有差异?非常不错的对比和Demo

AngularJS 美文30篇

说到技术文章,有人写出来的文章晦涩难懂,有人写出来的则脍炙人口,读起来舒服还能轻松理解复杂的事物,ng-book的作者们为了推广他们的新书,每天写了1篇文章,风格属后者,想学习Angular或正在学习Angular的赶快收了吧~

为什么我开始拥抱Promise?

使用Promise能让你的代码变得扁平易读,更接近自然语言,并且已经有浏览器开始支持这个东西了。很多同学也开始把代码写成Promise的风格,你还在摇摆不定?看看他的理由~

8大JS MVC框架对比

现在的WEB开发,就像是战争进入了白热化的阶段,新的工具和框架那么多,让你如何选择?这篇文章对近两年冒出来并被大量使用的JS MVC框架进行了简单的对比,可能对你有些借鉴意义~

必知必会 JS 工具思维地图

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

那些伤人的JSLint错误

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

Backbone 和 Angular 的简单比较

通过将不同的工具或框架进行对比,我们才能理解各个工具的适用场景,也才能搞明白原作者的设计思想,Backbone作为客户端MVC的创始者和Angular这个新秀有何区别?非常值得看看~

Intro to the React Framework

类似于Angular、Ember和Knockout,React是Facebook的那帮家伙搞出来的1个框架,对DOM进行了非常好的抽象,开发者几乎不再直接操作节点,了解下框架的诞生背景和设计思想兴许能开阔你的思路~

那些你可能没掌握的JS知识

HTML5很酷,jQuery也很锋利,用他们你能很快搞出来1个不错的项目,如果你对原生的JS知识理解的够深入,任何基于它的工具更会被你用的出神入化,这是1系列讲解原生JS的文章,如果想进阶或温习,不容错过~

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

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

Meteor.js 学习资源大搜罗

收集了非常多 Meteor.js 相关的学习资源,Meteor.js 非常适合开发者快速进行 Node 程序的开发、测试和部署,所采用的技术都非常的先进。

Angular Loading Bar : 全自动的进度条

Angular Loading Bar 能够为Angular应用提供全自动的进度条,在有网络活动时都会出现进度条,视觉效果则类似于Youtube上切换视频时的动画,不过我使用的过程中发现JSONP请求过程中没有进度条效果,你能发个Pull Request么?

Javascript版本的有限状态机

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

Prebrowsing: 给你的网页装上雷达

雷达能够在某些事件发生之前提前捕捉到,如果浏览器也能提前捕捉到用户接下来要去哪里,该有多好?利用各种Prebrowsing的技巧,你的网站在用户眼中可能就是瞬间就加在完成了。Steve Souders总结了各种Prebrowsing技术,并讨论了其与浏览器缓存的区别,以及缓存的局限,非常不错的文章~

Moment: 强大的日期处理库

在任何语言中日期和事件处理都是个很头疼的事情,Moment是能简化日期解析、验证、处理以及展示的Javascript开源代码,模块话的设计可能让你引用尽可能少得代码满足需要~

Currying in Javascript

Currying refers to the process of transforming a function with multiple arity into the same function with less arity. The curried effect is achieved by binding some of the arguments to the first function invoke, so that those values are fixed for the next invocation.

5 个提升逼格的 Chrome 调试技巧

如何在代码中设置断点?如何设定特定的 Ajax 请求发起时的断点?如何设置 DOM 发生变化时的断点?如何在最新版 Chrome 中模拟各种移动设备?如果这些你都会,就不用看这篇文章啦~

Better JavaScript animations with requestAnimationFrame

For a long time, timers and intervals have been the state of the art for JavaScript-based animations. While CSS transitions and animations make some animations easy for web developers, little has changed in the world of JavaScript-based animation over the years. That is, until Firefox 4 was released with the first way to improve JavaScript animations. But to fully appreciate the improvement, it helps to take a look at how animations have evolved on the web.

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.

RequestAnimationFrame:带给你如丝绸般细腻的动画

传统的JS动画要么使用setTimeout,要么使用setInterval,但大家都知道这些东西还是不太靠谱的,有没有遇到过JS动画卡顿的窘境,究其原因就是动画的执行密度和效率问题,多数现代浏览器提供的RequestAnimationFrame会让你的动画如丝绸般细腻润滑?如何使用呢?

trifleJS: 针对IE浏览器的PhantomJS

用过PhantomJS么?那个可以用Javascript来编写前端集成测试的项目,但是它只支持Webkit内核的浏览器,trifleJS则大大的弥补了PhantomJS的不足,他针对IE内核的浏览器,并且API和PhantomJS完全相同。

ESLint

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

如何避免网页中的布局垃圾(Layout Thrashing)

如果你用Javascript粗暴频繁的读写DOM,就会发生Layout Thrashing这种现象,实际上就是会造成浏览器的频繁Reflow,影响页面的性能,那么是这种现象背后的原因究竟是什么?该用什么办法解决呢?看看这篇文章,再看看FastDOM的实现~

详解Javascript中的Event Loop

Javascript虽然已经逐步走向Server端,但是其核心的异步机制还是没有发生改变,这种事件驱动的模型和传统语言如Java等的请求响应模型区别挺大,那么他内部是如何工作的?代码中的回调到底保存在什么地方?执行的顺序又如何?该什么时候执行?非常不错的解析~

How standardized is the console API across browsers?

In most JavaScript engines, there is a global object console with methods for logging and debugging. That object is not part of the language proper, but has become a de facto standard, since being pioneered by the Firebug debugger. Since their main purpose is debugging, the console methods will most frequently be used during development and rarely in deployed code.

探讨:浏览器 JS 错误堆栈的那些痛

服务端语言的错误我们可以记日志,实时修复,那么浏览器端呢?貌似也可以记日志,但是问题的关键不在这里,诡异抽象、以及各种不着边际没有调用栈的出错消息即使记下来了也让你无从下手,这里详细的探讨了 JS 错误在不同浏览器中的诡异表现,以及如何获取更有价值的错误信息~

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

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

Performance Calendar

Real User Monitoring (RUM) allows us to build a picture of how long our pages take to load in an actual visitor’s browser, chart the times and look for patterns, but what if we want to dig further? What if we want to get a better understanding of why some of our outliers are slow, or want to monitor the load time of a third-party component?

30秒搞定node和npm的安装和配置

工作中免不了会有多个环境,前端工程师更少不了配置node和npm,每次都要重新下载、编译、配置?不感觉很麻烦么?不少同学在Github上列举了安装node和npm的方法,总有1个特别适合你的需求,无法sodu?用的是mac?都有对应的解决办法~

npmrc

Switch between different .npmrc files with ease and grace.

Grasp:JS代码重构助手

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

Grasp:JS代码重构助手

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

想看更多类似内容?