Home
vgs_rss' Journal -- Day [entries|friends|calendar]
vgs_rss

[ userinfo | livejournal userinfo ]
[ calendar | livejournal calendar ]

A Study of Ajax Performance Issues [31 Jan 2008|05:21pm]
10:18 28.01.2008
A Study of Ajax Performance Issues

Coach Wei, of Nexaweb and Apache, has published a study of Ajax performance issues in browsers, and they won't surprise you:

Obviously, we would like to see browser vendors take a serious look into the following issues and put them on their roadmap:

  1. In all major browsers, performance with Array and HTML DOM needs improvement in general.
  2. Browsers need to provide API support for Computed Box Model and Style;
  3. FireFox needs to improve performance of “eval”, object creation and “in” operation
  4. Internet Explorer needs to improve performance in general to be at least on par with other browsers. Beyond that, “String” manipulation on IE needs continued improvements;
  5. Safari: “pop” operation performance needs improvement
  6. Just-in-time (JIT) compiler: This maybe a bigger task than an incremental fix of some existing features, however, it is worthy of every penny. JIT will not only fix the String manipulation issue, it will enable JavaScript to truly shine in matching the performance of native applications. The amount of client side logic (aka, JavaScript code) needs to grow in order to accommodate the growth of application complexity, for which JavaScript runtime performance problem can be a major bottleneck.

Read the study to get the details on each item. It includes the results such as the DOM operation performance information:

Ajax Performance Study


read more at Ajaxian
post comment

Graceful Degradation of Firebug Console Object [31 Jan 2008|05:21pm]
11:37 28.01.2008
Graceful Degradation of Firebug Console Object

Paul Irish saw the following graceful degradation of Firebug code in the Yahoo! media player:

JAVASCRIPT:
  1.  
  2. // code yanked from the Yahoo media player. Thanks, Yahoo.
  3. if (! ("console" in window) || !("firebug" in console)) {
  4.     var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml", "group"
  5.                  , "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];
  6.     window.console = {};
  7.     for (var i = 0; i <names.length; ++i) window.console[names[i]] = function() {};
  8. }
  9.  

I would love to see a window.console API based on Firebug standardized so it can just be there. But then this code will still be around for pre-browsers.


read more at Ajaxian
post comment

Audience Measurement Demo [31 Jan 2008|05:21pm]
13:31 28.01.2008
Audience Measurement Demo

Laurent Nicolas has created an analytics solution, using GWT, that tracks fine grain access from users on a page.

It tracks:

  • The time spent on the site in various areas
  • Visibility: what was visible when
  • Content: Know if an ad was seen

There is also a nifty widget that allows you to shrink and grow the div size of comments.

Audience Demo


read more at Ajaxian
post comment

Less maintenance code tutorials with Ajax Code Display [31 Jan 2008|05:21pm]
16:18 28.01.2008
Less maintenance code tutorials with Ajax Code Display

One of my main annoyances with writing code tutorials is that you need to maintain code in several locations: the code itself and the examples in the tutorial document. This is not really a problem when you can use a scripting language or print out the tutorials from a CMS, but when you just want people to get an HTML document you're in trouble. As I am right now writing a lot of articles I didn't want to waste my time and thought about using Ajax to load the code I am documenting into the HTML on the fly. The result looks something like this:

Screenshot of the Ajax Code Display in action

All you need to do is to add jQuery, the script and a class of "codeexample" to a link in the document you want to display. The script creates a PRE element with the code inside, replaces all the special characters, tabs with spaces and adds line numbers. For example:

HTML:
  1.  
  2. <p><a href="ordered.html" class="codeexample"></a>ordered.html</a></p>
  3.  

If you only want to show certain lines (which you'll have to do if you want to explain some code step-by-step) you can define the lines as a list including ranges. Say you want to display line 5, 10 and 12 to 21, then you'd add:

HTML:
  1.  
  2. <p><a href="ordered.html" class="codeexample lines[5,10,12-21]"></a>ordered.html</a></p>
  3.  

You can highlight lines of code in the same manner, say you want like 18 to 20 in bold:

HTML:
  1.  
  2. <p><a href="ordered.html" class="codeexample lines[5,10,12-21] highlight[18-20]"></a>ordered.html</a></p>
  3.  

Last but not least you can make the link clickable to show an IFRAME with the rendered output. Clicking the link again will remove the iframe. For this, just add a class called "dodisplay":

HTML:
  1.  
  2. <p><a href="ordered.html" class="codeexample dodisplay highlight[10,12,14-15]"></a>ordered.html (click to show output)</a></p>
  3.  

The script is creative commons, and hopefully you'll find some extras to add. Enjoy.


read more at Ajaxian
post comment

Do you have a pretty date? [31 Jan 2008|05:21pm]
07:09 29.01.2008
Do you have a pretty date?

John Resig has created a little script to give you pretty dates that Web 2.0 know and love (thanks Rails):

JAVASCRIPT:
  1.  
  2. prettyDate("2008-01-28T20:24:17Z") // => "2 hours ago"
  3. prettyDate("2008-01-27T22:24:17Z") // => "Yesterday"
  4. prettyDate("2008-01-26T22:24:17Z") // => "2 days ago"
  5. prettyDate("2008-01-14T22:24:17Z") // => "2 weeks ago"
  6.  

The library is short and sweet:

JAVASCRIPT:
  1.  
  2. /*
  3. * JavaScript Pretty Date
  4. * Copyright (c) 2008 John Resig (jquery.com)
  5. * Licensed under the MIT license.
  6. */
  7.  
  8. // Takes an ISO time and returns a string representing how
  9. // long ago the date represents.
  10. function prettyDate(time){
  11.         var date = new Date((time || "").replace(/-/g,"/").replace(/[TZ]/g," ")),
  12.                 diff = (((new Date()).getTime() - date.getTime()) / 1000),
  13.                 day_diff = Math.floor(diff / 86400);
  14.                        
  15.         if ( isNaN(day_diff) || day_diff <0 || day_diff>= 31 )
  16.                 return;
  17.                        
  18.         return day_diff == 0 && (
  19.                         diff <60 && "just now" ||
  20.                         diff <120 && "1 minute ago" ||
  21.                         diff <3600 && Math.floor( diff / 60 ) + " minutes ago" ||
  22.                         diff <7200 && "1 hour ago" ||
  23.                         diff <86400 && Math.floor( diff / 3600 ) + " hours ago") ||
  24.                 day_diff == 1 && "Yesterday" ||
  25.                 day_diff <7 && day_diff + " days ago" ||
  26.                 day_diff <31 && Math.ceil( day_diff / 7 ) + " weeks ago";
  27. }
  28.  

read more at Ajaxian
post comment

Prototype: new cheat sheet and in place editor [31 Jan 2008|05:21pm]
09:12 29.01.2008
Prototype: new cheat sheet and in place editor

The maintainer of scripteka, the Prototype extensions library, has produced a new cheat sheet for the recent 1.6.0.2 release.

He also has his own widgets such as Proto.IPS an unobtrusive in-place-select widget that mimics the Gmail chat ability to drop down and select, or type in your own new content.


read more at Ajaxian
post comment

Dominos: Changing the feedback model [31 Jan 2008|05:21pm]
10:43 29.01.2008
Dominos: Changing the feedback model

I don't know about you, but the idea of ordering food online has had promise, but often falls flat. When I lived in Boulder I would order from The Sink, but they would call you back and confirm the order, which kinda defeated the point.

If you don't get a call back though, then you wonder... "hmm is someone on the other end of this web site thing? Are they REALLY going to bring my food!"

Dominos has done the right thing. They give you feedback, but not in the annoying way. After you put in an order online you can watch the entire process, so you feel like you know exactly what is happening without talking to a person until the doorbell rings:

Online Dominos


read more at Ajaxian
post comment

You Used JavaScript to Write WHAT? [31 Jan 2008|05:21pm]
11:32 29.01.2008
You Used JavaScript to Write WHAT?

Michael Morrison, author of Head First JavaScript, has written a piece for CIO magazine titled You Used JavaScript to Write WHAT? which is part of a series of articles on when to use a particular language or platform.

It is always interesting to see what the CXO folks are reading wrt our beloved Web :)

The other side of the coin is the mentality of viewing a Web application as a program, as opposed to a page. In this scenario, the application is utterly dependent on the active functionality made possible by JavaScript, which means it's okay to forego users who lack JavaScript support. Google has embraced this philosophy in several marquee products, two of which are extremely popular: Gmail and Google Maps. Both applications make extensive use of Ajax (JavaScript), and neither apologizes to users who can't run them due to a lack of JavaScript. If this article had been written just a few short years ago, I might have used an e-mail application as the ridiculous example of when not to use JavaScript, instead of Halo. But Gmail has pushed through that barrier.

Even if JavaScript-powered, web-based e-mail ultimately takes hold, surely there are other stand-alone applications that will just never make sense in Web form. Two such applications that come to mind are video and photo editing. Similar to games, these are such media-intensive applications that they just can't make sense in JavaScript, right? Yet Adobe has already released Premiere Express for online video editing and is putting the finishing touches on Photoshop Express for Web-based photo editing. What's interesting about these applications is that they aren't technically built in JavaScript; they're built in ActionScript, a close cousin of JavaScript used in Adobe's Flex development environment. But the ActionScript in these applications is compiled, so the net effect is more akin to a native application. Adobe may be foreshadowing the future of Web scripting to some degree, at least in terms of building more feature-rich applications. And in doing so, they're forcing us to rethink just what is possible with scripting languages.


read more at Ajaxian
post comment

Lily, JavaScript Visual Programming Tool [31 Jan 2008|05:21pm]
21:38 29.01.2008
Lily, JavaScript Visual Programming Tool

Bill Orcutt just announced the first beta release of Lily, an open source, Mozilla based visual programming environment written in Javascript. Lily is a very neat way of building an application by connecting modules which handle the intricacies of working with data, animation and sound. It's a testament to the power of JavaScript:

I'm happy to announce the first beta release of Lily, an open source, Mozilla based visual programming environment written in Javascript. Lily is a modular framework that allows you to wire together Javascript library components graphically. Currently there are Lily modules that wrap components from the YUI, JQuery & Scriptaculous libraries. There are also modules that provide access to the file system, browser storage, network & graphics. Lily programs can be saved as standalone XULRunner applications or as Firefox addons.

Lily currently has over 180 modules which allow you to take advantage of different libraries and services including jQuery, YUI, Google Maps and Amazon.

Bob has provided some demo links to get a feel for some of what Lily can do:

http://www.vimeo.com/625294
http://www.vimeo.com/625739
http://www.vimeo.com/626481
http://www.vimeo.com/625141

I especially found this demo to be cool since I was in need of some music! ;) (Quicktime Movie)


read more at Ajaxian
post comment

Adobe AIR is on Fire [31 Jan 2008|05:21pm]
23:10 29.01.2008
Adobe AIR is on Fire

Adobe AIR, the platform that lets you create desktop apps using web technologies, continues to garner attention. With Beta 3 just recently released and a host of companies coming out with new apps, AIR is building up a ton of steam just prior to it's official v1.0 release.

First up, Adobe's Kevion Hoyt gives us a rundown about the new AIR Introspector which is VERY similar to FireBug, but for AIR applications.

We’ve heard this request right from the start “Is there something like Firebug, that lets me monitor the assets in my application?” The answer to that question is now a resounding, YES! The AIR Introspector is designed to let you interact deeply with every aspect of your application.

Mind you that this is a BIG plus to AIR development which hasn't benefited from having the ubiquitous FireBug to help during tough debugging sessions.

Some features included are:

  • Point at a user interface element and be able to see and edit the markup and DOM properties.
  • An interactive console that lets you access references, adjust values and execute JavaScript code.
  • Lists links, images, CSS and JavaScript assets loaded into your application.
  • Provides for viewing the original markup and the current markup.
  • Viewer for XHR objects including their properties and headers.
  • Search for matching text in the source code of your application.

Also, Aptana just updated the Studio IDE to support AIR Beta 3. While developing AIR in other editors is perfectly fine, Aptana really has done the best job of integrating support into their IDE making it substantially easier to build AIR apps. This is just pure speculation but I wouldn't doubt that a big player, like Adobe, scoops up Aptana in 2008.

Nasdaq and American Cancer Society

ComputerWorld recently reported that the Nasdaq and American Cancer Society will be leveraging AIR for specific projects.

Nasdaq and the American Cancer Society are among several large organizations eyeing the Adobe runtime as a way to bridge the traditional gap between Web and desktop applications.

Using Adobe's Flex and AIR, the Nasdaq created an application that can "can provide a replay of the quotes at the time of a trade -- and associated prices on different markets -- in seconds".

The software runs on the desktop, relieving servers of a good deal of data-intensive processing, he noted. "We saw the ability to process the data halfway on our servers and have it in as small a package as possible. Then when someone requires a replay of the market, we send a small packet of data to desktop," he said.

The American Cancer Society has been using AIR since early beta and has continued to build new apps regularly. Their recent initiative was a desktop application to assist users in determining when it was appropriate to schedule mammograms:

Another new Cancer Society application allows users to enter demographic information and receive suggestions about scheduling tests such as a mammogram, he said. The group hopes that providing such reminders on desktop systems will be more effective in prompting users about their treatment needs than forcing them to frequently visit a Web site, Pellegrini added.

They're also creating a Flex/AIR-based portal for physicians that will allow the doctors to access Cancer Society's information via the web or in an offline mode.

The offline synchronization capabilities of AIR are especially attractive to many companies as more and more employees are working remotely and may not have immediate access to the web. The inclusion of the SQLLite DB into the AIR runtime seems to have really piqued the interest of IT departments interested in providing the desktop experience without having to retrain their staff in traditional desktop tools such as C# or VB.Net.

Challenges Ahead

AIR is not in the clear though as very strong technologies from both Microsoft (SilverLight/.Net) and Mozilla (XULRunner) are serious challengers to the desktop space and could bite into AIR's pie. The biggest advantage that AIR has, though, is Flash Player 9's near 97% penetration rate. In addition, rumor has it that Adobe will issue an update to the Flash player that would include the AIR runtime making it a highly desirable target for building new applications. We'll have to see if the rumor holds true.

For now, though, AIR is certainly showing a lot of promise and seems to have gotten past the "evaluation" stage. Once v1.0 is officially released (rumored to be sometime soon), the number of AIR applications will undoubtedly rise. I also envision an opportunity for developers to benefit financially from selling desktop applications that seamlessly tie into the web.

This should be interesting.

Update: Adobe's Rob Christensen has sent me an update letting me know that Adobe has no plans at this time to bundle AIR with the Flash Player. One of the primary goals of the Flash Player is to keep the download size as small o that they can continue adding powerful features like h.264. Thanks for the update Rob.


read more at Ajaxian
post comment

YUI Grid CSS and Grid Builder [31 Jan 2008|05:21pm]
09:29 30.01.2008
YUI Grid CSS and Grid Builder

Jeremy Zawodny of Yahoo! just found the YUI Grid Builder that does what you would imagine... gives you a tool to generate your CSS layout.

Will Duff took that and made YahooPages which adds even more WYSIWYG fun.

YUI Grid Builder


read more at Ajaxian
post comment

Lipsiadmin: Rails 2.0 Ext Admin [31 Jan 2008|05:21pm]
10:47 30.01.2008
Lipsiadmin: Rails 2.0 Ext Admin

Lipsiadmin is a framework that generates Ext 2.0 views on top of your Rails 2.0 application, a compelling duo indeed.

You can strap into your migrations to add menus such as:

RUBY:
    # I will create also my menu
    menu = Menu.create(:name => "Articles", :admin => true, :position => 1)
    # And my
    menu.menuitems.create(:name => "New Article", :url => "/admin/articles/new",
      :position => 1, :style => "icon-no-group")
    menu.menuitems.create(:name => "List Articles", :url => "/admin/articles/list",
      :position => 1, :style => "icon-show-all")

If you stay in REST land it all just starts to work. Very Naked Objects-esque.

Check out the live demo (u: info@lipsiasoft.com, p: admin).

Speaking of Ext, the team has been expanded its offerings.


read more at Ajaxian
post comment

Book Review: Ajax Security by Billy Hoffman [31 Jan 2008|05:21pm]
11:00 30.01.2008
Book Review: Ajax Security by Billy Hoffman

Brian Dillard of Agile Ajax has a review of Billy Hoffman's new book "Ajax Security". If you've not picked this book up, you really need to. It's received rave reviews and is quickly becoming the must-have security book for client-side development. As Brian can attest:

The book itself, of course, documents dozens more specific security vulnerabilities - as well as best practices for protecting your application against them. I said it before, and I'll say it again: "Ajax Security" is required reading for any professional software engineer.

Be sure to read Brian's review and be sure to get the book.


read more at Ajaxian
post comment

jQuery Validation Plugin v1.2 Updated [31 Jan 2008|05:21pm]
11:00 30.01.2008
jQuery Validation Plugin v1.2 Updated

Jörn Zaefferer went absolutely feature crazy when he decided to update his jQuery Validation plugin. Update is putting it mildly with "overhaul" coming immediately to mind.

Here are some of the cool new features added in:

  • AJAX-captcha validation example (based on http://psyrens.com/captcha/)
  • Support for "remote" ajax-validation. In other words: Remote validation is now possible and very easy to use.
  • Added highlight and unhighlight options, by default toggles errorClass on element, allows custom highlighting
  • Added valid() plugin method for easy programmatic checking of forms and fields without the need to use the validator API
  • Added rules() plguin method to read and write rules for an element (currently read only)
  • Replaced regex for email method, thanks to the contribution by Scott Gonzalez, see http://projects.scottsplayground.com/email_address_validation/
  • Restructured event architecture to rely solely on delegation, both improving performance, and ease-of-use for the developer (requires jquery.delegate.js)
  • Added feature to merge min + max into and range and minlength + maxlength into rangelength
  • Added support for dynamic rule parameters, allowing to specify a function as a parameter eg. for minlength, called when validating the element
  • Allow to specify null or an empty string as a message to display nothing
  • Rules overhaul: Now supports combination of rules-option, metadata, classes (new) and attributes (new), see rules() for details
  • Added remember-the-milk-demo (thanks RTM team for the permission!)
  • Added marketo-demo (thanks Glen Lipka!)

One of the best features of this release is the remote validation via Ajax. This is extremely easy to implement with the code being as simple as this:

LANGUAGE:
    <input id="email" class="required email" remote="emails.php" maxlength="40" name="email" />

If you enter an email address, the validation plugin sends a request to the server with a parameter “email” and the value you entered. The server-side code can do it's magic and send back the appropriate response based on the user input.

Adding client-side validation to a form can significantly improve the usability of that form, making it much easier for users to fill them out successfully. But pure client-side validation has severe limits where necessary information is available only on the server. Ajax helps to bridge the gap, but synchronizing validation on form submit isn’t exactly an easy task. The validation plugin makes it as simple as pure client-side validation. All you need to do is to specify a rule “remote” for a field and provide a parameter that points to a server-side resource that handles the validation.

To see the plugin in action, Jörn has created some demos using styling from Marketo.com and Remember the Milk. You can see some screenshots below.


read more at Ajaxian
post comment

Dreamweaver Users Rejoice! Support for JS Libs Now Available. [31 Jan 2008|05:21pm]
12:00 30.01.2008
Dreamweaver Users Rejoice! Support for JS Libs Now Available.

Adobe Dreamweaver isn't know for it's JavaScript support let alone coding help for the popular JavaScript libraries and frameworks. Up to now, developers and designers who've used DW for their client-side work have been left out of the fun of other IDEs such as Eclipse and Komodo . That's all changed now that to a couple new extensions for Dreamweaver have been built. Chris Charlton, Community Manager for RMI, has created extensions for Dreamweaver versions 6-9 (MX-CS3) that offer support for jQuery 1.2 and Prototype 1.6 development.

The jQuery API extension seems to be the farthest along offering code completion, code hints, code coloring, and a bunch of snippets that early beta users liked. The Prototype API extension only has basic code completion but is due for an update in the next few weeks to offer extended code hints. The code hints appear when editing a JS document and XTND.us has a short video of an extension in use. The demo video and downloads are freely available at http://xtnd.us. We use these tools every day and help train people... it's time the tools get better.

He's also planning on incorporating support for other libs and I'm sure would love some support in making this happen. So all you MooTools and YUI developers, get on the horse and help Chris out.


read more at Ajaxian
post comment

Rhino on Rails: JavaScript MVC on the server [31 Jan 2008|05:21pm]
13:20 30.01.2008
Rhino on Rails: JavaScript MVC on the server

Cross posted from my personal blog

Last week we posted about Jaxer which offers an approach of turtles all the way down where JavaScript is used on the client and the server.

Then, I got to interview Steve Yegge. Last year, Steve posted about Rhino on Rails, his port of Ruby on Rails to the JavaScript language on the Rhino runtime.

Ever since he presented on the 'Google Rails Clone' at FooCamp and he posted about the internal Google Rhino on Rails project, people have been curious to learn more.

  • What does it mean to port Rails to JavaScript?
  • What can't you do since JavaScript doesn't have the same meta programming facilities?
  • Rails = a group of Active*, so did you re-implement everything?
  • What do you gain out of having JavaScript all the way down?
  • Does it actually make sense to have jjs? Server side JavaScript generating client side JavaScript? Argh!
  • What is the state of Rhino?
  • Will Rhino support JavaScript 2?

And of course, the big questions:

When do I get to see it!

I happen to be in Seattle at the Google offices, so I was able to ask all of these questions and more. Steve was a fantastic host, and I really enjoyed chatting with him.

This is the kind of video I want to explore at Google. We have many great developers working on cool technology. I want to get them on camera, participating with the community when I can. Sometimes we can talk about products and APIs, but sometimes we will talk about fun ideas and projects that we are working on such as Rhino on Rails.

Anyway, give it a watch and let me know what you think:

This also lead me to the fun idea of Java and JavaScript flip-flopping:


read more at Ajaxian
post comment

JSON 2.0: Libraries and browser support [31 Jan 2008|05:21pm]
10:00 31.01.2008
JSON 2.0: Libraries and browser support

John is at it again, writing a piece on recent news surrounding JSON.

He links to an updated library by Douglas Crockford,

[Error: Irreparable invalid markup ('<a [...] prototypes".</p>') in entry. Owner must fix manually. Raw contents below.]

<lj-raw><small>10:00 31.01.2008</small><br>

<b><a href="http://feeds.feedburner.com/~r/ajaxian/~3/226430722/json-20-libraries-and-browser-support">JSON 2.0: Libraries and browser support</a></b><br>

<p>John is at it again, writing a piece on <a href="http://ejohn.org/blog/the-state-of-json/">recent news surrounding JSON</a>.</p>
<p>He links to an updated library by Douglas Crockford, <a href="http://www.json.org/json2.js&gt;JSON2.js&lt;/a&gt;, that differs from the first version by using " a="a" single="single" base="base" object="object" (json)="(JSON)" instead="instead" of="of" extending="extending" all="all" native="native" object="object" prototypes".</p="prototypes&quot;.&lt;/p">
<div class="igBar"><a href="javascript:showCodeTxt(&#39;javascript-5&#39;);">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span><br />
<div id="javascript-5">
<div class="javascript">
<ol>
<li style="font-family: &#39;Courier New&#39;, Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: &#39;Courier New&#39;, Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: &#39;Courier New&#39;, Courier, monospace; font-weight: normal;">JSON.<span style="color: #006600;">stringify</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#123;</span><span style="color: #000066;">name</span>: <span style="color: #3366CC;">"John"</span>, location: <span style="color: #3366CC;">"Boston"</span><span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: &#39;Courier New&#39;, Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: &#39;Courier New&#39;, Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// =&gt; &quot;{'name':'John','location':'Boston'}&quot;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: &#39;Courier New&#39;, Courier, monospace; font-weight: normal;">JSON.<span style="color: #006600;">parse</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"{'name':'John','location':'Boston'}"</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: &#39;Courier New&#39;, Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: &#39;Courier New&#39;, Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// =&gt; {name: &quot;John&quot;, location: &quot;Boston&quot;} </span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: &#39;Courier New&#39;, Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
</ol>
</div>
</div>
</div>
<p>It also turns out that Mozilla <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=387522">implemented this functionality in the browser</a> (time for a wrapper):</p>
<div class="igBar"><a href="javascript:showCodeTxt(&#39;javascript-6&#39;);">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span><br />
<div id="javascript-6">
<div class="javascript">
<ol>
<li style="font-family: &#39;Courier New&#39;, Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: &#39;Courier New&#39;, Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: &#39;Courier New&#39;, Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> nativeJSON = Components.<span style="color: #006600;">classes</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color: #3366CC;">"@mozilla.org/dom/json;1"</span><span style="color:#006600; font-weight:bold;">&#93;</span></div>
</li>
<li style="font-family: &#39;Courier New&#39;, Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: &#39;Courier New&#39;, Courier, monospace; font-weight: normal;">&nbsp; &nbsp; .<span style="color: #006600;">createInstance</span><span style="color:#006600; font-weight:bold;">&#40;</span>Components.<span style="color: #006600;">interfaces</span>.<span style="color: #006600;">nsIJSON</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: &#39;Courier New&#39;, Courier, monospace; font-weight: normal;">nativeJSON.<span style="color: #006600;">encode</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#123;</span><span style="color: #000066;">name</span>: <span style="color: #3366CC;">"John"</span>, location: <span style="color: #3366CC;">"Boston"</span><span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: &#39;Courier New&#39;, Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: &#39;Courier New&#39;, Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// =&gt; &quot;{'name':'John','location':'Boston'}&quot;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: &#39;Courier New&#39;, Courier, monospace; font-weight: normal;">nativeJSON.<span style="color: #006600;">decode</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"{'name':'John','location':'Boston'}"</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: &#39;Courier New&#39;, Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: &#39;Courier New&#39;, Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// =&gt; {name: &quot;John&quot;, location: &quot;Boston&quot;} </span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: &#39;Courier New&#39;, Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
</ol>
</div>
</div>
</div>
<p>And in conclusion:</p>
<blockquote><p>
The final, and most important, step is being worked on right now - a way to access native JSON encoding and decoding from web pages. How it'll be accessible is up to some debate (as having its naming conflict with an existing object would be a really bad thing). Regardless, there should be something within the browser by the time the Firefox 3 betas wrap-up.
</p></blockquote>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~f/ajaxian?a=kUY8xtD"><img src="http://feeds.feedburner.com/~f/ajaxian?i=kUY8xtD" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=RSZSPYD"><img src="http://feeds.feedburner.com/~f/ajaxian?i=RSZSPYD" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=FvfmAgd"><img src="http://feeds.feedburner.com/~f/ajaxian?i=FvfmAgd" border="0"></img></a>
</div>

<br clear="all">

<p></p><small><a href="http://feeds.feedburner.com/~r/ajaxian/~3/226430722/json-20-libraries-and-browser-support">read more</a> at <a href="http://ajaxian.com">Ajaxian</a></small></lj-raw><div align="right"><small><a href="http://hiero.ru/rss2lj/" rel="nofollow">rss2lj</a></small></div>
post comment

Most Relevant Browsers of 2009 [31 Jan 2008|05:21pm]
15:38 31.01.2008
Most Relevant Browsers of 2009

John has taken a shot at listing the most relevant browsers of 2009:

  • IE 7
  • IE 6
  • Firefox 3
  • Safari 3
  • Opera 9.5

I think that Firefox 3 and Safari 3 may end up tieing, and if you frame it as rendering engines, Webkit will probably beat Gecko as it is also being used by iPhone, AIR, Android, and Nokia (they use Gecko too).

And, what about IE 8?


read more at Ajaxian
post comment

DomAPI 4.5: New, improved, and more free [31 Jan 2008|05:21pm]
15:45 31.01.2008
DomAPI 4.5: New, improved, and more free

DomAPI

DomAPI has been around for ever but the package has been updated:

DomAPI version 4.5 has a new lower price and a simplified licensing plan.

In a nutshell, there are now 2 license types, 'Free' and 'Pro'. Both types can be used on commercial sites, in any capacity, with no restrictions. The benefits of the pro version include:

  • Access to unobfuscated source code
  • Access to hourly beta builds
  • Permission to alter the source code
  • Permission to remove branding and 'splash' items
  • Permission to bundle the library with applications

If you purchased a DomAPI 4.0 license, you automatically are upgraded to 4.5. If you have a 3.x license, or purchased a 3.x to 4.x upgrade, you will need to obtain a new 4.5 license. DomAPI 4.5 Professional licences are currently priced at only $49 USD.

The latest public release of DomAPI contains all the fixes an additions that have been made to DomAPI v4.0 since its original build nearly 2 years ago. These features were previously only available within the hourly beta builds, but now everyone can benefit from them.

Upgrading from 4.0 to 4.5 should be completely painless -- it is meant to be backwards compatible with your existing code.

Some of the major improvements include:

  • Complete support for IE7
  • Complete support for Firefox 2
  • Better memory leak protection in IE6/7
  • Plenty of little fixes and performance enhancements

read more at Ajaxian
post comment

Secure String Interpolation in JavaScript [31 Jan 2008|05:21pm]
15:46 31.01.2008
Secure String Interpolation in JavaScript

Mike Samuel of the Google Caja team (and much more) has a fantastically detailed document on the choices for secure String interpolation in JavaScript.

He spends a lot of time discussing:

There are a large number of examples a long the way:

JAVASCRIPT:
  1.  
  2. var ids = [1, 2, 3, 4];
  3. var column = 'value';
  4. var foo = 'foo';
  5.  
  6. open(Template("SELECT $column FROM Table WHERE id IN $ids AND foo LIKE $foo"))
  7. // === "SELECT `value` FROM Table WHERE id IN (1, 2, 3, 4) AND foo LIKE 'foo'"
  8.  

read more at Ajaxian
post comment

navigation
[ viewing | January 31st, 2008 ]
[ go | previous day|next day ]