AngularJS’s latest release candidate is the first framework I’ve seen that cleanly supports a content security policy that restricts usage of eval(), new Function(), and the like. I’m thrilled to see this happening, and it’s a testament to the priority that the Angular developers place on security. CSP is quite simply one the best XSS-protection mechanisms available to developers these days in modern browsers. The more frameworks that hop on board, the faster sites can start adopting CSP, and the safer we’ll all be on the net.

All that said, the implementation isn’t as complete as it could be. Angular requires that the developer manually opt into CSP-friendly mode via the ng-csp directive. This is error-prone at best, and introduces complexity that would be better hidden away inside the framework. The Angular developers recognize this shortfall, and are explicitly requesting some sort of feature detection API that would allow frameworks to query the currently active policy to determine its boundaries, and fork their implementation accordingly.

This does seem like a great addition to the spec; I’d suggest the following implementation:

Add document.[prefix]contentSecurityPolicy as an object that exists in browsers that support CSP. This would enable trivial feature detection of CSP as a whole, which would enable frameworks to make intelligent decisions about how to proceed through the following use cases:

I’ve asked a number of talented JavaScript programmers why they prefer a single, combined var statement with multiple declarations and assignments to multiple, individual var statements, and the only responses I’ve been able to get seem entirely subjective:

Multiple var statements are superfluous.
Multiple var statements are noobish.
Combined var statements look better.
While I can’t argue with the last point, in JavaScript, multiple var statements aren’t superfluous and they aren’t noobish. They reduce the effort it takes to maintain code.

a jQuery plugin that makes it easy to share and demo code in-page, using GitHub gists

My recommendation: learn the language, and use it to your liking; and don’t rely or blindly accept what any “wise elders” tell you. Try to do something new and crazy every day. You might not end up using the crazy, but it’s the best way to master JavaScript. Develop your own style that you are comfortable with. Experiment.

In general, n ends a statement unless:

The statement has an unclosed paren, array literal, or object literal or ends in some other way that is not a valid way to end a statement. (For instance, ending with . or , .)
The line is -- or (in which case it will decrement/increment the next token.)
It is a for() , while() , do , if() , or else , and there is no {
The next line starts with [ , ( , , * , / , - , , , . , or some other binary operator that can only be found between two tokens in a single expression.
The first is pretty obvious. Even JSLint is ok with n chars in JSON and parenthesized constructs, and with var statements that span multiple lines ending in , .

The second is super weird. I’ve never seen a case (outside of these sorts of conversations) where you’d want to do write in nj , but, point of fact, that’s parsed as i; j , not i ; j .

The third is well understood, if generally despised. if (x)ny() is equivalent to if (x) { y() } . The construct doesn’t end until it reaches either a block, or a statement.

; is a valid JavaScript statement, so if(x); is equivalent to if(x){} or, “If x, do nothing.” This is more commonly applied to loops where the loop check also is the update function. Unusual, but not unheard of.

The fourth is generally the fud-inducing “oh noes, you need semicolons!” case. But, as it turns out, it’s quite easy to prefix those lines with semicolons if you don’t mean them to be continuations of the previous line.

Similar hazards arise with [ , / , and unary and - . Remember, if there wasn’t an error, ASI does not apply.

This problem may seem minor, but JS file concatenation ups the ante. For this reason some style guides (Dojo, IIRC) advocate starting your reusable JS file with ; , but people don’t know and it’s easy to forget.

I wish I had made newlines more significant in JS back in those ten days in May, 1995. Then instead of ASI, we would be cursing the need to use infix operators at the ends of continued lines, or perhaps or brute-force parentheses, to force continuation onto a successive line. But that ship sailed almost 17 years ago.

The way systematic newline significance could come to JS is via an evolution of paren-free that makes it to Harmony status. I intend to work on this in the strawman , but not for ES6.

Some of the github issue comments are naive or idealistic to the point of being silly. Since when does any programming language not have syntax arguments? All living, practical languages that I know of, even those with indentation-based block structure and similar restrictions, have degrees of freedom of expression that allow abusage as well as good usage. Language designers can try to reduce degrees of freedom , but not eliminate them completely.

My two cents: be careful not to use ASI as if it gave JS significant newlines. And please don’t abuse && and || where the mighty if statement serves better.

I’ll also say that if it were up to me, in view of JS’s subtle and long history, I’d fix JSMin. But I would still log a grumpy comment or two first!

A drop-in replacement for Underscore.js that delivers up to 8x performance improvements, bug fixes, and additional features.

Fast, flexible, and lean implementation of core jQuery designed specifically for the server.

JavaScript caching framework for client side caching in the browser using localStorage - gracefully degrades when the browser doesn't support localStorage.

A simple, structured Web framework for Node.

Rainbow is a code syntax highlighting library written in Javascript.
It was designed to be lightweight (1.2kb), easy to use, and extendable.
It is completely themable via CSS.

Graphene is a realtime dashboard & graphing toolkit based on D3 and Backbone.

Tesseract is a JavaScript library for filtering large multivariate datasets in the browser. Tesseract supports extremely fast (<30ms) interaction with coordinated views, even with datasets containing a million or more records; we built it to power analytics for Square Register, allowing merchants to slice and dice their payment history fluidly.

Since most interactions only involve a single dimension, and then only small adjustments are made to the filter values, incremental filtering and reducing is significantly faster than starting from scratch. Tesseract uses sorted indexes (and a few bit-twiddling hacks) to make this possible, dramatically increasing the perfor­mance of live histograms and top-K lists. For more details on how Tesseract works, see the API reference.

If you’re looking to speed up page load times in your own projects, start by profiling. Then identify the hotspots and defer them until the furthest point of intent—where you know the user is about to perform the action you need to set up.

a javascript and HTML based steganography encoder/decoder.
encoder.html takes a .png file as the cover and any file data file as the hidden data. the hidden data cannot be bigger than the width*the height of the cover image (in bytes)
decoder.html takes an encoded png selected by the user and extracts the data from the image.

A list of questions you can use to help interview potential candidates for a front-end development position.

Functional is a library for functional programming in JavaScript. It defines the standard higher-order functions such as map, reduce (aka foldl), and select (aka filter). It also defines functions such as curry, rcurry, and partial for partial function application; and compose, guard, and until for function-level programming. And all these functions accept strings, such as 'x -> x+1', 'x+1', or '+1' as synonyms for the more verbose function(x) {return x+1}.

Insanely Fast Communication Library For Node.js Services

Cry, rely on browser cache. There are no viable alternative at the moment. IndexedDB is complex, requires user to approve it and isn’t widely implemented. WebSQL is all about bringing SQLite problems we’ve been studying and fixing within Firefox to every single webpage.

My best guess is that we’ll end up with webdevs using convenience libraries built on top of IndexedDB. We will likely add promptless operation to IndexedDB.

We have already made Local Storage hurt less, we have a plan to make it relatively painless, but it will always degrade user experience when compared to something like IndexedDB.

It is a failure of the web, browser vendors and developers that we are in this situation, but w e need to stop advocating for and building examples that use the LocalStorage API’s, it is simply not a scalable API and the more we build for it the harder it will be for us to ween ourselves off it.
LocalStorage has poor querying capabilities, terrible performance, small storage in many browsers, crazily inconsistent eventing and a nasty habit of locking. It’s saving grace is simple semantics and “browser support”.
Client-side and offline web-apps are not a reality with localStorage, and if we keep pushing it, we are never going to be in a situation where we have a compelling offline or client-side story.
We need to bite the bullet, move on and start building compelling apps, examples and demos build around IndexedDB, that is our only future (I am still aggrieved that the web dropped WebSQL, it was simple and familiar) and we need to do this by stopping to support localStorage. Period.

Full Stack Web Framework for Node.js and the Browser.

Tinycon allows the addition of alert bubbles and changing the favicon image. Tinycon gracefully falls back to a number in title approach for browers that don't support canvas or dynamic favicons.
Alerts in the favicon allow users to pin a tab and easily see if their attention is needed.

Touchy.js is a simple light-weight (1.15 kb compressed) JavaScript library for dealing with touch events in the browser. With no dependencies, just add the script to your page and start hacking.

Javascript image filters library.

Source of bookmarkly.com, a visual bookmarking site

zip.js is a library for zipping and unzipping files.

Serenade.js is yet another MVC client side JavaScript framework. Why do we indulge in recreating the wheel? We believe that Serenade.js more closely follows the ideas of classical MVC than competing frameworks and has a number of other advantages as well:

Super pretty, powerful yet logic-less template language
Data bindings keep your views up-to-date without any extra work
Powerful caching features
Absolutely no dependencies, everything works without jQuery
No need to inherit from base classes anywhere (though you can if you want)

What can an engine do when it sees eval?

Not much. It can't even prove that it is actually eval unless eval is not bound lexically, there is no with, there is no intervening non-strict call to any identifier eval (regardless of whether it is eval or not), and the global object's eval property is bound to the blessed eval function, and is configured as DontDelete and ReadOnly (not the default in web browsers).

But the very fact that an engine sees a call to an identifier eval poisons optimization: because eval can introduce variables, the scope of free variables is no longer lexically apparent, in many cases.

I'll say it again: crazy!!!

Modal dialogs in JavaScript. Depends on MooTools.

The jQuery plugin for doing cool scrolly stuff

randexp will generate a random string that matches a given RegExp Javascript object.

Across the web, you’ll see a range of sites that feature calculators for working out things like loan repayments, mortgage rates, tax, insurance, and more. Until now, we’ve had no way of semantically marking up the result of those calculations. Enter: the <output> element! In this article, we’ll show you <output> and some related JavaScript tricks. Let’s get cracking.

Another six weeks have gone by, and another version of Firefox has been released. Still not officially “live,” Firefox 9 improves on Firefox 8 with a JavaScript engine that’s up to 30 percent faster and, well, not a whole lot else. Mac OS X users will have a little more to gain, as Firefox 9 also includes two-finger gestures for backward and forward navigation on that platform.

The new version includes a number of bug fixes to improve stability and security, better support for HTML5, CSS, and MathML, and some improvements to its Do Not Track feature to allow scripts to know if tracking is enabled or not. All told, the new release includes more than one thousand bug fixes and improvements.

But if Firefox users will notice anything new in Firefox 9, it’s the JavaScript engine. The updated engine is potentially a big win for Firefox. Common JavaScript benchmarks have shown performance improvements of around 30 percent, and a paper about the new technology claims that real Web sites can see performance gains of 50 percent.

So here we're collecting all the shims, fallbacks, and polyfills in order to implant html5 functionality in browsers that don't natively support them.

The general idea is that: we, as developers, should be able to develop with the HTML5 apis, and scripts can create the methods and objects that should exist. Developing in this future-proof way means as users upgrade, your code doesn't have to change but users will move to the better, native experience cleanly.

Looking for a way to conditionally load these scripts client-side based on feature detects? See Modernizr. Looking for a guide to writing your own polyfills? See Writing Cross-Browser JavaScript Polyfills.

Rickshaw is a JavaScript toolkit for creating interactive real-time graphs.

I find it helpful to frame the Third Party JS model in terms of a diplomatic mission. As an invited guest in a foreign place, you should be both respectful and cautious of the new environment. As an emissary, you should be excited to augment the page with your own unique functionality. JavaScript gives you the opportunity to radically change an application for the better, but only when executed carefully (there is no “diplomatic immunity” for Third Party JavaScript). This article outlines some of the lessons learned from developing and supporting Reach’s JavaScript library with the Socialcast Engineering team.

That’s right, version 1.0 is out! After more than a year of refinements, we now have a rock solid release.

When we first launched this site back in the summer of 2010, we had a few concept sketches and some very ambitions goals: to create an elegant HTML5-based user interface library for the jQuery community designed to work on all popular mobile platforms. We are built on the strengths of jQuery core and jQuery UI and strive to make mobile development efficient, accessible and maybe even a bit fun.

To reach the broadest possible audience,  we decided from the start to make the framework work on every popular mobile, tablet, e-reader and even desktop platforms by embracing HTML5 and responsive design techniques. A tall order, but we’re happy to announce that we’ve achieved this goal and now support all our target platforms as of 1.0. By using a progressive enhancement approach, even less capable devices can still access the content and functionality of a jQuery Mobile site. This broad compatibility gives you the ability to reach many billions of people.

DBi handles all the work of creating an iOS or Safari WebSQL database and manages local/session storages.

DBi creates, tables, indices, triggers & views and populates the tables all from a single JSON file that's outputted from DBi.

Super-smooth CSS3 transformations and transitions for jQuery
jQuery Transit is a plugin for to help you do CSS transformations and transitions in jQuery.

In this article, we’ll look at some methods of manipulating JavaScript to determine various network characteristics from within the browser — characteristics that were previously available only to applications that directly interface with the operating system. Much of this was discovered while building the Boomerang project to measure real user performance.

A JavaScript library is proposed and implemented, providing a class-system core for building object-oriented JavaScript programs.

Popcorn makes video work like the web. We create tools and programs to help developers and authors create interactive pages that supplement video and audio with rich web content, allowing your creations to live and grow online.

LungoJS
HTML5 Mobile Framework, and stuff.

Full Reference: http://docs.recurly.com/recurlyjs/reference/

Recurly.js is an open-source Javascript library for creating great looking credit card forms to securely create subscriptions, one-time transactions, and update billing information using Recurly. The library is designed to create fully customizable order forms while minimizing your PCI compliance scope.

This library depends on jQuery 1.5.2+. A future version may be framework agnostic.

Multiple File Upload widget with Drag&Drop support for jQuery

Mozilla developer Michael Bebenita has released a JavaScript-based H.264 decoder that is intended to run natively in Web browsers. The decoder, which can display video at 30 frames per second on conventional hardware, is yet another compelling demonstration of JavaScript’s performance potential.

JavaScript creator Brendan Eich included a demonstration of the H.264 decoder—codenamed Broadway—during a presentation at the ACM’s annual OOPSLA conference. The demonstration attracted some attention, prompting the developers to publish the source code.

Broadway is based on the open source H.264 decoder that Google uses in Android. The Mozilla developers simplified the Android H.264 decoder—which is written in the C programming language—and converted it to JavaScript. They used Emscripten, a compiler that translates LLVM bitcode into JavaScript. In addition to the Emscripten-generated H.264 decoder, the Broadway developers are also working on a separate implementation that is coded by hand.

According to the Emscripten documentation, code generated by the compiler typically runs about 10 times slower than the equivalent binary that you would get by compiling the same C code with the -O3 flag in GCC. But some recent JavaScript performance optimizations in Firefox improve performance.

The Broadway developers caution that the H.264 decoder will only perform as expected in recent Firefox nightly builds, which incorporate the latest JavaScript performance improvements—particularly a new type inference mechanism that gives JavaScript execution speed a considerable boost.

The Broadway project offers useful insight into JavaScript performance characteristics, but its not really intended for real-world usage. Mozilla’s objections to H.264 on the basis of patent encumbrances still stand and make it unlikely that users will see the video codec supported out of the box in Firefox.

Broadway is also highly CPU-intensive, which makes it impractical to use. That could change in the future, however. Hardware acceleration could be achieved via WebGL, reducing the decoder’s load on the CPU. The initial Broadway implementation didn’t include any special optimizations, aside from the ones applied by Emscripten. The developers were able to crank its performance up by 40 percent this week with some tweaking. Bebenita says that there is still plenty of room for further speedups.

Firefox’s single largest consumer of RAM, its JavaScript engine SpiderMonkey, is going on the mother of all diets. At any one time, SpiderMonkey’s memory footprint can be over 50% of Firefox’s total usage — the JavaScript on the ExtremeTech homepage, for example, uses no less than 115MB of memory — and slipstreaming SpiderMonkey is by far the best change that Mozilla can make to keep Firefox on the desktop svelte and competitive with Chrome and IE, and Firefox on Android less sluggish.

If you’re not a programmer, you should probably skip this paragraph. Basically, almost every fundamental part of SpiderMonkey is being torn apart, turned over in the hands of Mozilla’s finest engineers, and rejigged to use less memory. JSObject is being cut in half, and thus JSFunction will also be slimmed down. Slots arrays will have the option of being 32-bit, rather than being forcibly being constructed of 64-bit “fatvals.” Shapes, one of SpiderMonkey’s most important data structures, are going to be almost halved in size. Mozilla is currently looking into whether scripts can be “lazily loaded,” too — as much as 70-80% of all downloaded JavaScript is never executed, and so it makes no sense to load it into memory; lazy loading, where scripts are loaded as-needed, would significantly reduce memory usage.

A JavaScript H.264 decoder.

These are fundamental topics which I should have covered in more detail yesterday. There is copious information on this elsewhere online, so don’t feel limited to this post in your study.

Truthy: Something which evaluates to TRUE.
Falsey: Something which evaluates to FALSE.

It’s mostly logical. One (1) is truthy, Zero (0) is falsey. An object of any kind (including functions, arrays, RegExp objects, etc.) is always truthy. The easiest way to determine if something is truthy is to determine that it’s not falsey. There are only five falsey values in JavaScript:

undefined, null, NaN, 0, "" (empty string), and false, of course.

Donatello is a pure-CSS drawing library for the browser. The API is inspired in part by Raphael.js. All graphical elements are rendered using HTML DOM and CSS. The idea came together from various code snippets I had lying around for drawing circles and lines in other projects. I decided to make an attepmpt at a drawing API using these ideas after using Raphael.js in my Node Knockout team project.

Awesome handling of keyboard events

jwerty is a JS lib which allows you to bind, fire and assert key combination strings against elements and events. It normalises the poor std api into something easy to use and clear.

jwerty is a small library, weighing in at around 1.5kb bytes minified and gzipped (~3kb minified). jwerty has no dependencies, but is compatible with jQuery, Zepto or Ender if you include those packages alongside it.

For detailed docs, please read the README-DETAILED.md file.

Accelerated panning and zooming for HTML and Canvas

Octopress is a framework designed by Brandon Mathis for Jekyll, the blog aware static site generator powering Github Pages. To start blogging with Jekyll, you have to write your own HTML templates, CSS, Javascripts and set up your configuration. But with Octopress All of that is already taken care of. Simply clone or fork Octopress, install dependencies and the theme, and you’re set.

Today I’m going to share a tutorial on how to create a simple content spotter using one of jQuery’s selector, :contains(). This selector, as in jQuery’s description, will select all elements that contain the specified text. Using that ability we can find any element that contains the text we specify and modify the selected element, for example, we have a numerous unordered list item on our webpage yet hard to find the one we need, we can use :contains() to select and spot the matched element with the text we specify.

Ideal Forms is a small framework to build powerful and beautiful forms for the web.
It's very easy to use and requires minimal html syntax.
Absolutely everything is stylable with css, no images needed.
Support for IE7+, Firefox 3.5+, Chrome 4+, Safari 3.1+ and Opera 11+.
Degrades gracefully with javascript disabled.

Visit http://www.jqidealforms.com for more info.

Effortlessly create single page web sites with this jQuery plugin.

Sub classing jQuery methods to creating your own classes with DOM interfaces

eyeballs.js is a slim javascript library designed to sit on top of a javascript framework, such as jQuery or Prototype.

The goals are:

Organisation of client-side web app code using the Model-View-Controller pattern.
Simple model implementation for handling non event-related concerns.
Simple routing layer for hash-tag change based navigation, preserving the back-button
Rapid development of javascript apps using strong conventions.
Easing the pain of building fast, responsive interfaces.
Exploring the possibilities of offline web apps.

The implementation is owes a lot to Ruby on Rails, but also attempts to be idiomatic javascript.

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

FitVids automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in your responsive web design.

Google launched its Chrome Web browser on September 1, 2008—three years ago today. In the time since its debut, Google's Web browser has attracted a considerable following and influenced other browser vendors. To celebrate the anniversary, Google has published an interactive HTML5 infographic that presents the history of the major Web browsers and Web standards.

Chrome's contributions to the Web and browser design are significant. Google set the pace of development for modern browsers by being the first browser vendor to adopt a radically shorter development cycle and a release management strategy that emphasizes fast-paced incremental improvement. Chrome's transparent update system and channel-based prerelease distribution model are being adopted by Firefox and could eventually be picked up by other browser vendors.

Chrome's distinctive minimalist design has also changed the way that browser vendors think about usability. Chrome's approach to paring down the interface and offering a more streamlined user experience has been embraced by other browsers. Google took the lead on some controversial moves, like not displaying "http" in the location bar.

The technical influence of Chrome can even be felt outside of the browser ecosystem. The performance of Chrome's sophisticated V8 JavaScript engine and the ease with which it can be embedded in other software have led to its adoption in a range of other environments. For example, V8 was used to produce Node.js, a server-side JavaScript runtime that is popularizing the use of JavaScript for backend Web development.

Although Chrome has come a long way, the browser still lags behind its competitors in some key ways. When we first reviewed Chrome in 2008, one of our biggest gripes with the user interface was the lack of tab overflow handling. After three years, this issue still hasn't been fixed. Chrome's user interface for browsing history is another major weak area relative to other browsers. History autocompletion in the Omnibox is also quite limited compared to Firefox's AwesomeBar.

Despite the limitations, Chrome's audience has grown explosively since its 2008 launch. According to statistics from StatCounter, the browser's marketshare hit 10 percent last year and continued growing to 23 percent, as of this month. It's become an important part of Google's product landscape, serving as the central pillar of the company's ambitious Chrome OS operating system.

After three great years of innovation and raising the bar, Chrome's future looks bright.

Mouse event to touch event mapping for testing touch interfaces with desktop browsers. This means that touchstart, touchmove, and touchend are hooked up to mousedown, mousemove, and mouseend, respectively. This is generally recommended for testing purposes.

After more than 18 months of hard graft, Mozilla has finally succeeded in landing a big addition to Firefox’s JavaScript engine that, upon initial testing, speeds up the web — or at least the vast swaths of it that use JavaScript — by around 20 to 30%. The new feature is the introduction of type inference to Firefox’s JaegerMonkey JIT compiler, and it will debut with Firefox 9. It was originally meant to land a few months ago, in time for Firefox 5, but it took until now to reach a stage where it’s almost ready for primetime.

Zoom in on images or content

What do you mean, "Javascript cryptography"?

We mean attempts to implement security features in browsers using cryptographic algoritms implemented in whole or in part in Javascript.

You may now be asking yourself, "What about Node.js? What about non-browser Javascript?". Non-browser Javascript cryptography is perilous, but not doomed. For the rest of this document, we're referring to browser Javascript when we discuss Javascript cryptography.

keymaster.js is a simple micro-library for defining and dispatching keyboard shortcuts. It has no dependencies.

A JavaScript library for building modern HTML presentations. deck.js is flexible enough to let advanced CSS and JavaScript authors craft highly customized decks, but also provides templates and themes for the HTML novice to build a standard slideshow.

A spinning activity indicator

Just for kicks I wanted to see if I could make a row of images animate across a page and repeat indefinitely. Turns out it's really not that hard. The way I did it was to make one big long graphic where the first part and the last part are visually identical.

location = location
... and a 534 other ways to reload the page with JavaScript

The jFontSize plugin was developed to facilitate the process of creating the famous buttons A+ and A-, which alter the font size on sites with very large texts, such as blogs, journals, tutorials, etc.

This tool is also used to increase the accessibility of sites, helping people who have visual problems to see better content

Chosen is a library for making long, unwieldy select boxes more friendly.

Turn your checkboxes into iPhone-style binary switches

Improve your navigation experience - this jQuery lib improves a webpage navigation and helps to visualize different sections. of a document, an article,.. any web page

A jQuery plugin for creating beautiful, graceful, and painless custom dropdowns.

jQuery.fracs determines the fraction of an HTML element that is currently in the viewport, as well as the fraction it takes of the complete viewport and the fraction of the area that might possibly be visible. It also provides the coordinates of the visible rectangle in document, element and viewport space.

Interactive Javascript (SVG|VML) Charting Library

A simple jQuery plugin to easily map keyboard characters to links or functions

JointJS is a JavaScript library for creating diagrams. The diagrams can be fully interactive. Joint library is suitable for both implementing a diagramming tool as well as simply for publishing your diagrams.

A Growl work-a-like plugin for jQuery