Paper.js

Just found an awesome vector graphics library for javascript.

“Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.”

Check it out here.

Javascript Utility Classes

I have recently started porting some of my most used Actionscript utility classes to javascript.

You can probably find most of this (and a whole lot more) in libraries such as Underscore.js, but what can I say – I like things my own way. Anyway, this is what I’ve got so far.

Javadoc-style documentation is available in the source files.

ArrayUtil methods:
left, right, copy, toggle, remove, contains, shuffle, validIndex, getRandom, swap, unique, insert, insertBefore, insertAfter

KeyUtil methods:
isEnter, isBackspace, isTab, isAlt, isCtrl, isShift, isSpace, isEsc, isHome, isEnd, isPageDown, isPageUp, isDelete, isLeft, isRight, isUp, isDown, isNumPlus, isNumMinus, isCopy, isCut, isPaste, isSave, isSelectAll, isPrint

NumberUtil methods:
ceilTo, degreesToRadians, delta, diff, floorTo, isBetween, isEven, isFloat, isInteger, isOdd, isPrime, limit, radiansToDegrees, randomFloat, randomInt, randomSign, roundTo, roundToDecimals

StringUtil methods:
contains, upperCaseFirst, upperCaseWords, upperCaseSentence, stripWhiteSpace, trim, trimLeft, trimRight, startsWith, endsWith, replace, remove, truncate, numberFormat

TypeUtil methods:
isNumeric, isInteger, isFloat, isString, isArray, isBoolean, isObject, isFunction, isDate, isDOMElement

ValidationUtil methods: (norwegian formats)
isEmail, isPhone, isMobile, isDate, isZip, isIpAddress, isUrl, isDomain, notEmpty, isNumericOnly, isAlphabeticOnly, noWhiteSpace, noSpecialCharacters

You can download the classes here.

Node.js + MongoDB

I can’t even begin to describe how cool this stuff is! Imagine being able to write both client- and server-side applications using the same language and syntax. Thanks to Node.js you now can.

Node.js is an event-driven I/O framework for the V8 JavaScript engine by Google. It is intended for writing scalable network applications such as web servers in pure javascript.

If you combine this with MongoDB (a scalable, high-performance, open source, document-oriented database) – the possibilities are endless!

I have just scratched the surface on this and don’t yet have any examples ready for the public, but it seriously took me about 20 minutes to build a working chat room.

Got you interested? Read up on Node.js at GitHub, Wikipedia or Mashable.
Also check out MongoDB at Wikipedia and Mongoose a node-module for MongoDB.

9-slice scaling for javascript with canvas

Coming from a flash background, there are several features and consepts I’ve come to depend on over the years. One of them is the consept known as 9-slice scaling or grid-based scaling. Basically you define regions within an image that can be scaled, and others that should remain un-scaled. A grid, if you like defining top-left, top-center, top-right etc.

This technique is great for building graphically complex elements, while still being able to dynamically change width and height.

You can of course achieve much of the same effect using the CSS3 border-image property, but support, implementations and performance vary across browsers and platforms.

I was not able to find a proper implementation of this technique for javascript, so I ended up trying to write one myself. For now it’s really just a proof-of-concept, and not ready for production use. However I’m planning on re-writing it as a proper jQuery plugin (when I get the time).

If you’re still reading this and wan’t to find out more – check out this quick example I threw together.

Tools of the trade

After being spoiled rotten over the years using tools like FlashDevelop & FDT for flash & actionscript development, I initially had some problems finding the tools and a workflow that suited my needs for html, css & javascript.

I have checked out Aptana, NetBeans, Eclipse (with various plugins) and loads of others. For some reason I always ended up using my trusty UltraEdit, that is – until I gave IntelliJ a try.

Now IntelliJ may be a bit bulky, and sure – it’s really intended towards java development, but for some reason I found it perfect! It might not be as sexy as Coda, but it has some really nice features that makes up for it.

• First of all, it has a really good code-completion feature.
• Secondly, you get code-hinting on your own javascript classes, methods & parameters.
• There’s also very good external tools & Apache Ant integration.
• You can customize and theme the editor in every way imaginable.
• You can easily set up custom file templates.

Like all other tools and editors, there are things I’m not 100% happy with – but if you’re looking for a new swiss-army-knife for web development, give it a go!

Link Bonanza

So I figured I would start this whole thing off with some links I’ve found useful over the last couple of months. Seeing as I’m a flash developer moving towards the world of html(5), css and javascript – most of the links in this post will touch on those subjects in one way or another.

Great resource with articles on javascript, jQuery and javascript applications.
http://addyosmani.com/blog/

Massive list of javascript libraries.
http://microjs.com

HTML5 Boilerplate: a rock-solid default for html5 awesome.
http://html5boilerplate.com

Nice vector library for javascript.
http://raphaeljs.com

A great javascript library for working with the canvas element by Grant Skinner.
http://easeljs.com

A javascript library for tweening/animation, also by Grant Skinner.
https://github.com/gskinner/TweenJS

yepnope is an asynchronous conditional resource loader.
http://yepnopejs.com

Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.
http://www.modernizr.com

John Resig, nuff said!
http://ejohn.org

Blog-post about inheritance patterns in large jquery applications.
http://alexsexton.com/?p=51

Slides on Tools for jQuery Application Architecture.
http://addyosmani.com/toolsforjqueryapparchitecture/

Slides on Scalable JavaScript Application Architecture.
http://www.slideshare.net/nzakas/scalable-javascript-application-architecture