David Hurth's blog

40 Useful JavaScript Libraries

Over at Smashing Magazine they have put together a very good list of 40 useful JavaScript libraries.

Below is an excerpt from the list.

3. Visualization And Image Effects

JS charts
JS charts supports bar charts, pie charts and simple line graphs. It offers nice usability by simply inserting the library onto Web pages and calling the data from an XML file or a JavaScript array. Charts are created as PNG files and the library is compatible with all the major browsers.

JS Charts

Canvas 3D JS Library (C3DL)
C3DL makes writing 3D applications easy. It provides a set of math, scene and 3D object classes to make the canvas more accessible to developers who want to develop 3D content in a browser but not have to deal in depth with the 3D math needed to make it work.

C3DL

Processing.js
This is a JavaScript port to the Processing language (a language for programming images, animation and interactions). The library is feature-rich for creating 2D outputs. It provides methods for shape/image drawing, color manipulation, fonts, objects, math functions and more.

Processing.js

Raphaël
An amazing library that simplifies working with vector graphics on the Web. Raphaël uses SVG and VML for creating graphics that can be modified and event handlers that can be attached to them. The library is feature-rich in functions, including rotation, animation, scaling and drawing curves, rectangles and circles.

Raphael: Vectors With JavaScript

ImageFX
This is a JavaScript library for adding effects to images, like blur, sharpen, emboss, lighten and more. ImageFX uses canvas element for creating the effects. It is compatible with all major browsers (there is a compatibility chart on the script’s page). The library is so easy to use. Simply inserting the .js file in the Web page and calling a one-line function is enough.

Imagefx

Pixastic
Pixastic uses the HTML5 canvas element, which enables accessing raw pixel data. The effects supported include desaturation and grayscale, inverting, flipping, brightness and contrast adjustment, hue and saturation, embossing, blurring and much more. Because the canvas element is relatively new, the library does not have equal support in all browsers yet.

Reflection.js
An unobtrusive JavaScript to auto-create reflection effects. The height and opacity of the reflection can be defined. Using it is as easy as adding a “class” to the images. It works in all major browsers and is smaller than 5 KB.

Reflection.js

You can read the full post here.

VSLive Wrap-up

Tagged:  

VSLive was an overall great conference and I thought I would just write a quick wrap-up of the conference highlights. Below are the top items that happened at the conference.

  • Internet Explorer 8 is coming out very soon with quite a few changes, so you had better check your site on it now.
  • Visual Studio 10 will have a very clean user interface and should be available around September.
  • Silverlight is getting better and may give Flash some competition after a few versions if the plug-in gets more support (it will probably come packaged with IE8 which will help its acceptance).
  • MVC.NET is a pretty good and easy to use Model View Controller platform that will be out of beta very soon.
  • Microsoft Surface is very cool, but needs to come way down in price (currently it costs $10,000). Microsoft hopes to get it down to $2,000 soon, but I think they need to get it around $1,000 to get wide usage of it.

That’s just a quick rundown of the highlights that I took from the conference. There where many sessions that I wasn’t able to go to as there where usually four other sessions going on when I was at a session, so others may have some different highlights, but these are my highlights. VSLive is a very good conference and if you are a developer that works with Microsoft technologies, I would recommend this conference (although, if you are looking for another fun Microsoft conference go to DevConnections [last year I went to the on in Las Vegas and it was a lot of fun]).

Live fromVSLive - Day 3

Tagged:  

Today was another good day at VSLive. With all the Silverlight and WPF action going on I am on sensory overload. After all the cool-aid that I've been drinking while here I am almost starting to think that Silverlight is going to kill Flash, but then I look at Expressions Blend 2 (I know you can do a lot in Silverlight with out using Blend, but it needs to get better to allow for better design) and realize that it still has quite a ways to go before it can compete.

The other big session was about the upcoming release of Internet Explorer 8. IE 8 has quite a few improvements over IE 7 these include a better set of development tools and web slices (they are like mini RSS feeds from a portion of a site). One interesting feature is the accelerators feature which makes it possible to highlight some text and have it sent directly to a web site (like a maps site or Google). You can read more about accelerators here.

IE 8 also promises to be more standards compliant and this will affect about 20% of web sites (so, finally people will have to start writing better code), so you will want to check you site on IE 8 to make sure it looks good. The new version also has support for cross domain XML, although I prefer the implementation that will be coming out in Firefox. IE 8 will be released very soon (as soon as in the next few weeks). You can get Release Candidate 1 of IE 8 here and check out all of the new features.

All in all this has been a great conference and one that I wouldn't mind coming back to.

Live fromVSLive - Day 2

Tagged:  

Today was a very good day at VSLive. The day started with a great key note by Tim Huckaby (and quite a few other people during the demos) that was about going beyond HTML and featured demos using Silverlight and WPF. The WPF demos showed some great 3D demos and even featured some cool demos on Microsoft Surface (the table that is also a touch computer). You can see more about Surface here.

The day went on to have some great sessions including a session on Restful communication in .NET applications by Jon Flanders (it was full of reasons to stop using SOAP whenever possible). It even touched on using JSON (one of my favorite topics). You can read more about Jon at his blog.

The day went on finish strong with a great presentation by Tim Huckaby (you can read more about Tim here) on WPF. This was another presentation featuring a lot of great WPF and Silverlight demos. The day even finished with Tim trying to get his Windows 7 build to blue screen (apparently Windows 7 is quite a bit better than Vista, but it doesn't have all of it's video driver issues resolved yet). He wasn't able to get it to happen during the sessions, but I saw him do it before the session (it brought back memories of Windows 95).

Even though most of my application development is done in other languages (except for some C# and C++ that I am doing for a couple of projects) this has been a great conference. Hopefully, tomorrow will continue to be just as good.

Live from VSLive!

Tagged:  

I just got done listening to the key note at VSLive and it focused on the upcoming Visual Studio 2010. We where the first group at a conference to get a sneak peek of the new IDE.

My first thoughts of Visual Studio 2010 is that the interface is very clean. The new version of Visual Studio includes many things to help you write code faster, such as HTML snippets and the ability to generate classes after you reference them.

The Visual Studio 2010 Beta will be released in the next few months and the full release is currently scheduled for September of this year. It looks like it will be worth checking out.

You can see a video featuring Visual Studio 2010 here.

JavaScript Paradise

The past month I have been working on a project using Flash. The project is almost done and in between finishing the project I've had to work on a heavy JavaScript project. After working in Flash for a while and then going back to JavaScript you start to realize how much better ActionScript is over JavaScript.

There are quite a few things that ActionScript has over JavaScript the below list has just a few.

  • Strong Variable Typing
  • Ability to Control the Graphical Display Easily in Script (with no cross browser issues)
  • No Cross Browser Issues (other than no plug-in)
  • A Good IDE With a Nice Debugger
  • Better Cross-Domain XML Support

My recent playing in ActionScript made me hope that we will see some of it's features incorporated in JavaScript. While much of this is in the works who knows when the 10K LB beast known as IE will allow for these features to be available cross browser.

Playing in ActionScript has made think of what life would be like in JavaScript Paradise.

50+ stunning jQuery applications

You can never get enough useful example of applications written in your favorite JavaScript library. One of my personal favorite JavaScript libraries is jQuery. Well, over at Developer Snippets they have put together a good list of 50+ jQuery applications.

Below is an excerpt from the post.

Color Picker - jQuery plugin – eyecon.ro
A simple component to select color in the same way you select color in Adobe Photoshop, features includes:
* Flat mode - as element in page
* Powerful controls for color selection
* Easy to customize the look by changing some images
* Fits into the viewport
Color Picker - jQuery plugin


Building a better web forms: Context highlighting using jQuery
– jankoatwarpspeed.com
In very complex web forms this enables users to focus only on a current action. By using attractive color schema and jQuery animations, this can be even more interesting.
 Context highlighting using jQuery

Creating accessible charts using canvas and jQuery
– filamentgroup.com
Data visualization in HTML has long been tricky to achieve. Past solutions have involved non-standard plugins, proprietary behavior, and static images. But this has changed with the recent growth in support for the new HTML Canvas element, which provides a native drawing API that can be addressed with simple JavaScript. This article is a proof of concept for visualizing HTML table data with the canvas element.
Accessible Charts

You can read the full post here.

Aptana PHP Development Environment Released

Tagged:  

You may have used Aptana's IDE for Ajax development. The IDE is a very good one and it just got better for us PHP developers. Aptana has announced the release of a PHP plugin for their IDE.

Below is an excerpt from the announcement.

PHP development and deployment just got way easier. Today, we're pleased to announce the 1.0 availability of the Aptana PHP development environment. It's got all the things you'd expect from a PHP IDE, plus all the Ajax tooling and other power tools from Aptana Studio. Combine that with the integrated PHP app hosting, staging and management features in Aptana Cloud and you've got an end-to-end PHP development and deployment environment with unprecedented ease of use.

You can read the full post here.

It's always good to see one of my favorite languages get more support in tools that many of us already use. Thanks Aptana, you gave me something to play with this weekend.

Salesforce.com announces Force.com for App Engine

Tagged:  

Today Salesforce.com has announced Force.com. This makes it possible to create Web and business applications that go accross both Salesforce.com and Google's cloud computing platforms.

Below is an except from the post.

This morning Salesforce.com announced Force.com for Google App Engine, a Python library for apps running on App Engine that enables simple and robust access to the Force.com Web services API. Using this library, App Engine developers can now build and deploy scalable web apps that manipulate and display data stored on Force.com. App Engine developers interested in building enterprise-class applications can now build anything from browser-based tools for members of your organization to personalized, customer-focused apps that scale to meet demand.

You can read the full post here.

You can learn more about Force.com here.

JSON - 3D Proof of Concept

A few weeks ago I wrote a post on the concept of using JSON for creating 3-D models (You can read the first JSON 3D post here). I have created a proof of concept based on MooCanvas to allow for IE support. This proof of concept is also based on the 3D cube demo for MooCanvas with some modifications.

For this proof of concept the important function is Load3D which loads and translates the JSON 3D object.

 		function Load3D(obj, translateX, translateY, translateZ){
			scene.shapes[(obj.type + ObjectCounter + "")] = new Shape();
			var p = scene.shapes[(obj.type + ObjectCounter + "")].points; // for convenience
			for(var a=0; a<obj.vrt.length; a++){
				p[a] = new Point(((obj.vrt[a][0])+translateX), ((obj.vrt[a][1])+translateY), ((obj.vrt[a][2])+translateZ));
			}
 
			// Create Shape From Points
			for(var a=0; a<obj.fac.length; a++){
					scene.shapes[(obj.type + ObjectCounter + "")].polygons.push(new Polygon(
					[ p[obj.fac[a][0]], p[obj.fac[a][1]], p[obj.fac[a][2]], p[obj.fac[a][3]] ],
					new Point(obj.nrm[a][0], obj.nrm[a][1], obj.nrm[a][2]),
					true /* double-sided */,
					Polygon.SOLID,
					[obj.mat[a][0], obj.mat[a][1], obj.mat[a][2]]
				));

			}
			ObjectCounter+=1;
 		}

For the JSON 3D object you would pass it into the Load3D function. While in this example I have put the JSON 3D object in the HTML, you would load the JSON 3D using Ajax (or a script tag) in the real world.

			var ThreeDobj = {
			"vrt":[[-10,-10,-10],[10,-10,-10],[10,10,-10],[-10,10,-10],[-10,-10,10],[10,-10,10],[10,10,10],[-10,10,10]],
			"fac":[[0,1,2,3],[4,5,6,7],[2,3,7,6],[2,3,7,6],[0,4,7,3],[1,5,6,2]],
			"nrm":[[0,0,-1],[0,0,1],[0,1,0],[0,1,0],[-1,0,0],[1,0,0]],
			"mat":[[70,70,70],[80,80,80],[80,80,80],[75,75,75],[70,70,70],[70,70,70]],
			"type":"cube"}
			Load3D(ThreeDobj, 0, 0, 0);

You can see the proof of concept here.

The proof of concept has been tested on Google Chrome, FireFox 3 and IE 7. It may work on other browsers (it should work on Safari and Opera), but has not been tested.

Syndicate content