JavaScript

Jump Into Coding

Tagged:  
Jump Into Coding
Over at The Next Web blog they have put together a good resource for people wanting to learn to program. If you want to be a coder, but have no idea where to start this post will be a great help for you. The post discusses how to choose a first programming language and resources to learn about it. The post will be very helpful to anybody new to coding, but even those that code for a living may find a few things that are helpful to learn to program.

Check out the post and let us know what you found useful in the post in the comments below.

You can go to the referenced source of this post here.

Post written by Ajaxonomy using scovry

JavaScript Web Drawing Frameworks

JavaScript Web Drawing Frameworks
Over at Smashing Magazine they have put together a very good post about JavaScript web drawing frameworks. The post pits Paper.js against Processing.js against Raphaël. All three frameworks allow you to do some great things in the browser through JavaScript and give you a good alternative to Flash for web animation. The frameworks are pretty close in a lot of ways, each with their own strengths and weaknesses.

Below is the overview of each framework from the post.


Paper.js Processing.js Raphaël
Technology canvas tag canvas tag SVG
Language PaperScript Processing script JavaScript
Browsers IE 9 IE 9 IE 7
Mobile Yes Yes iOS only
Model Vector and raster Raster Vector
Size 56 KB 64 KB 20 KB

You can go to the referenced source of this post here.

Post written by Ajaxonomy using scovry

Code Hero Learn to Make Games, Through a Game!

Tagged:  
A Kickstarter project called Code Hero is being created with the goal being to learn to create games through a game. A donation of $42 gets you a pre-order of the game and lesser donations give you sneak peeks and discounts on buying the game.

It seams like a cool idea for a game, but do you think it will sell?

You can go to the referenced source of this post here.

Post written by David Hurth using scovry

HTML5 in IE8 and IE7

Tagged:  

We are seeing more and more use of HTML5, however, it is being held back largely due to the use of Internet Explorer 8. IE8 will be with us for some time because it works on Windows XP and IE9+ require at least Windows Vista.

Well, I've stumbled over some code that creates most HTML5 tags correctly in IE7 and IE8 through JavaScript.

The script is very easy to use. Just put something like the below in the head portion of your code.

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js">
<style type="text/css">
abbr, article, aside, audio, bdi, canvas, data, datalist, details, figcaption, figure, footer, header, hgroup, mark, meter, nav, output, progress, section, summary, time, video {
 display: block;
}
</style>
<![endif]—>

After you put this in the code you can use these tags and for the most part they should work correctly (a few still may have problems, so you will need to test your page in IE7 or IE8).

You can get the code here. here.

Interactive 3D Dodecahedron in HTML5

Tagged:  

HTML5 is the future of the web, although it is taking some time before all browsers have full support for it. The things that can be done with it are nothing short of amazing, especially considering how easy the code really is. Well John Esposito over at the HTMLZone (part of DZone) has written a very good HTML5 example. The example is of an interactive 3D dodecahedron. The post gives a brief overview of the code as will as all of the code that was used to create the effect.

Below is an excerpt from the post.

Thursday's CSS3 bitmaps were clever and fun, but a little counter-HTML5-cultural: the whole point of SVG, Canvas, and so forth, is that vectors are better, because simpler, than bitmaps.

Today's interactive geometric CSS3 shape is just the opposite: far more pixels than pre-rendering could possibly justify, emphatically composed of 2D surfaces, and fully animated in 3D.

It's a folding/unfolding dodecahedron (not in FF/IE):

You can read the full post here.

You can checkout the demo here.

What I Did on My Winter Holiday

This winter break (or as we used to call it when I was still in school, Christmas vacation), I worked on a little web application. The application was going to be for an automotive related blog that I write on, but once I started working on it I realized that the application was better if it wasn't restricted to just automotive information.

The application is called scovry and it is a web discovery application. You may notice that we at Ajaxonomy love spy applications (notice that in Ajaxonomy labs we wrote delicious Spy and TubeSpy). scovry is kind of a blend of these spy applications along with gathering information from many other social media sites and social networks. Beyond this the site adds a social element by allowing comments and easy sharing of items found on the site.

scovry

From a programming side, in order to load all of the data and keep the server happy I used a lot of caching. The caching code I used was based on the Easy Server Side Caching in PHP article that I wrote a while back. With some small changes, the biggest of which was using readfile() instead of include(). I even modified the caching script to cache images that are loaded from the thumbnail service to make loading much faster (not to mention to reduce requests for images).

You can check out scovry here.

Firefox 6 Released

The much anticipated Firefox 6 release is out. In keeping with its new Chrome-like strategy, Mozilla has done away with large, major releases and is instead releasing on a faster, more "agile" schedule, releases batches of features and improvements as they get fully baked.

So What's New?

  • Mozilla claims that Firefox 6 is 20% than Firefox 5. This is a nice speed boost.
  • The new JavaScript scratchpad (in Web Console). Yes, LISP fans, JavaScript now has a REPL. Awesome. This should prove to be a really nice tool for web developers.
  • Added support for EventSource (server-sent events). This API permits push notifications from the server in the form of DOM events.
  • A touch event for touch-sensitive screens.
  • Support for the latest draft of WebSockets.
  • The result of a media query string can be evaluated programmatically using the window.matchMedia() method.
  • Support for HMTL 5's progress element has been added.
  • Support for HTML 5's track element has been added.
  • A host of -moz-* CSS properties for styling progress bars, text decorations, and hyphens.

The release notes are here.

JSON 3D - The Time is Near!

3D on the web is getting very close to being a reality. With the release of Google Chrome 9 and Firefox 4, that uses WebGL (a subset of the OpenGL library) coupled with HTML 5 and JavaScript, 3D on the web could soon become used in many websites.

With 3D likely becoming mainstream on the web within the next few years, I thought that now is the time to build tools to model 3D models using a small easy to handle format that could be easily used in JavaScript.

You may remember my post from a while back about JSON 3D. I feel that using JSON for 3D modelling would be the best format to handle 3D models on the web. This would allow for quick Ajax calls to allow loading 3D models as needed on a page and the format is about as small as you can get on the web for holding this type of data. Additionally JSON already has a huge footprint in Ajax development and has virtually replaced XML in being used for most Ajax calls.

You can read my original post on JSON 3D here. My hope is that some of you will find this useful and will begin to write the tools that will be used to have 3D available all over the web.

Also, if you are looking to have some fun, you can view a bunch of Chrome WebGL 3D demos here.

JSON Beats XML, or Ajaj vs Ajax

Tagged:  

Should the Ajax term be changed to Ajaj? Since Ajax stands for Asynchronous JavaScript and XML, but with more and more the web favoring JSON (especially in rich Ajax applications), should it now be called Ajaj and stand for Asynchronous JavaScript and JSON?

The reason that I bring this up is that James Clark one of the major contributors of XML is now saying that JSON is now the way of, at least, the "Cool" web. The post where James talks about this is called XML vs the Web.

Below is an excerpt from his post.

If other formats start to supplant XML, and they support these goals better than XML, I will be happy rather than worried.

From this perspective, my reaction to JSON is a combination of "Yay" and "Sigh".

It's "Yay", because for important use cases JSON is dramatically better than XML. In particular, JSON shines as a programming language-independent representation of typical programming language data structures. This is an incredibly important use case and it would be hard to overstate how appallingly bad XML is for this. The fundamental problem is the mismatch between programming language data structures and the XML element/attribute data model of elements. This leaves the developer with three choices, all unappetising:

* live with an inconvenient element/attribute representation of the data;
* descend into XML Schema hell in the company of your favourite data binding tool;
* write reams of code to convert the XML into a convenient data structure.

By contrast with JSON, especially with a dynamic programming language, you can get a reasonable in-memory representation just by calling a library function.

Norman argues that XML wasn't designed for this sort of thing. I don't think the history is quite as simple as that. There were many different individuals and organisations involved with XML 1.0, and they didn't all have the same vision for XML. The organisation that was perhaps most influential in terms of getting initial mainstream acceptance of XML was Microsoft, and Microsoft was certainly pushing XML as a representation for exactly this kind of data. Consider SOAP and XML Schema; a lot of the hype about XML and a lot of the specs built on top of XML for many years were focused on using XML for exactly this sort of thing.

You can read the full post here.

While I don't think that XML will ever totally go away (nor should it), I do think that in most Ajax applications that JSON makes more sense to use (with the biggest exception being if you just want to display the data). So go out there and start using Ajaj!

A More Intelligent Open in New Window Script

Tagged:  

Recently, I needed to create a small JavaScript that would make links for documents and outside web sites open the links in a new window. However, any link from the web site that held the links needed to open in the same window. This was made a bit more complicated by the fact that the system that was holding the links (a third party web content management system) did not allow for the user to decide if they wanted the link to open in a new window when they created a new link.

Because I could edit the JavaScript that loaded when the page was loaded, the solution that I came up with was to call the below function in a function that was called onload. What this JavaScript does is go through all of the links on the page and any link that matches the criteria is changed to have a target of blank.

function AddTarget(){
	var TargetTag2 = document.getElementsByTagName("a");
	
	for(var a=0; a

Sometimes a simple JavaScript can save the day.

Syndicate content