Font.js
Font JS adds a new Font object to the global scope which provides useful methods for working with web fonts.
Font.js adds new Font() functionality to the JavaScript toolbox, akin to how you use new Image() for images. It adds an onload event hook so that you don’t deploy a font resource on your webpage before it’s actually ready for use, as browsers can tell you when a font has downloaded, but not when it has been parsed and made ready for on-page rendering.
Official Node Manual
Supported by Cloud9 as part of their “commitment to the community” this looks like a great resource for referencing and learning about the node framework.
This manual consists of three different sections:
- The Node.js API Reference documents the core Node.js modules
- The Node.js Guide contains articles and code samples on coding in Node.js
- The Javascript Reference contains doucmentation about the Javascript language
//@ sourceURL=
Just found this tip in Tom Dale’s recent blog post AMD is not the Answer. Adding a //@ sourceURL= comment to the end of an eval’d string will display the contents under the filename in the inspector. For example:
eval('console.log("Hello World");\n//@ sourceURL=hello.js');
Works fine in Firefox and Chrome although I can’t get it to work in Safari (though it does work in the WebKit nightlies…). Could be extremely useful for loading in modules for development.
AMD is not the Answer
Interesting points made against the AMD (asynchronous module definition) tools that are gaining traction in the JavaScript community. The post addresses many of my issues with AMD and suggests lazy evaluation of strings as an alternative.
AMD has many features, but I think that the extra markup and complex loaders needed to support it outweighs its benefits. Out-of-the-box it is not ready for production, and needs build tools to make it truly useful. If build tools are required anyway, a much simpler solution should fit most developers’ needs.
It’s also worth reading James Burke’s (of require.js) excellent response.
I’m in agreement that it’s all down to project size and workflow. For smaller projects something like Boucoup’s module helper is ideal.
JavaScript Needs Blocks
Interesting proposal from Yehuda Katz comparing Ruby blocks with JavaScript first class functions and suggests that JavaScript needs block labadas. These have the ability to return from their parant scope and retain the parents context.
While reading Hacker News posts about JavaScript, I often come across the misconception that Ruby’s blocks are essentially equivalent to JavaScript’s “first class functions”. Because the ability to pass functions around, especially when you can create them anonymously, is extremely powerful, the fact that both JavaScript and Ruby have a mechanism to do so makes it natural to assume equivalence.
Swig
I’ve gone off templating libraries of late but I came across Swig today which is based on Django’s templating engine and it looks great. It works in both the browser and node, supports template inheritance and allows you to extend it.
Optimising With Document Fragment
Nice tip for appending elements to the page using document fragments, similar to using .innerHTML to append large HTML strings in one go.
The cool thing about document fragments is that until it is added to the page it does not trigger a browser reflow, which is the really expensive thing here.
Ember.js
SproutCore two has been renamed (twice!) this week finally settling on Ember.js.
Ember is a JavaScript framework for creating ambitious web applications by eliminating boilerplate and providing a standard application architecture.
It’s a much lighter framework than SproutCore 1.0 and aims to fill similar needs as Backbone et al.
dochub
Nice interface to the MDN documentation built with Backbone. Lets you quickly search the HTML, CSS and JavaScript documentation.
KSS
Great looking documentation tool for CSS by Kyle Neath of GitHub. Looks like it would make a great standard for CSS when working on a project with a team. The output style guide is beautiful too.
Inspired by TomDoc, KSS attempts to provide a methodology for writing maintainable, documented CSS within a team. Specifically, KSS is a documentation specification and styleguide format.