Posts Tagged ‘javascript’

Nutty Expando Bug (JavaScript)

Tuesday, July 13th, 2010

I do a lot of JavaScript development. I’ve seen my share of browser bugs. This one takes the cake from the perspective of annoying and unexpected. From what I can tell right now, this only affects Mozilla. Allow me to set the stage:

We use the window.name property to persist data across pages. We rarely have a problem with this except when other components that we’re using also use window.name for storage. Fortunately we have tricks to help with this. What we haven’t seen before was a bug inside the TeaLeaf JavaScript code, which accidentally created a local variable in the global scope. A common mistake.  A bit surprising, coming from the likes of TeaLeaf but common nonetheless.

This (approximated) one line of code inside Tealeaf has been causing us problems in Mozilla:

Tealeaf.somerandomfunction = function() {
name = “bla”;
}

So they’ve created a variable here, but accidentally in the global scope.

Now open Firefox and try this:

  1. Load a random web page (google.com or something)
  2. Open firebug
  3. Type “window.name = ‘apple’;”
  4. Refresh the page
  5. Type “window.name” (see “apple”)

Works as expected, right? Now, try this:

  1. Load random web page and open firebug
  2. Type “window.name = ‘apple’;”
  3. Type “name = ‘orange’;”
  4. Type “window.name” (see “orange”)
  5. Type “window.name = ‘Pear’;”
  6. Refresh the page
  7. Type “window.name” (see ‘apple’)

Note that the issue is not merely that they have leaked their local variable into the global scope, but that it seems to obliterate the reference to the DOM extension window.name (which still exists, but with no references to it). Even if we access window.name directly now, we are reading and writing to the new expando property. Thus, when we go to the next page, we are left with the original value we first wrote to window.name

To solve this, every time you want to use window.name you should do this first:

delete(name);

Persistence and Offline Storage in JavaScript – Slides

Saturday, December 12th, 2009

Here are my slides from my VanJS talk earlier this week “Persistence and Offline Storage in JavaScript”. You’re free to re-use, borrow, whatever. No restrictions.

Click here to get the full Powerpoint file.

Thanks go to Allen for organizing a good event. It was also neat to learn a bit about Joyent and where they’re @ (thanks Jim). Sorry I couldnt make drinks afterward. Looking forward to the next one. I for one would be interested in hearing more about HTML5. Also, an hour long “open mike” rail-on-Microsoft would be fun too ;) . Probably should be accompanied by drinks tho.

VanJS: Offline Storage and Server-Side JavaScript

Saturday, December 5th, 2009

UPDATE: I’ve posted the slides for this here.

Live in Vancouver? Want to learn more about JavaScript? Check out the VanJS users group. Incidentally, I’ll be giving a talk on Jan 9 on Offline Storage. Jim Pick will also be talking about Server-Side JS and no doubt some Joyent goodness! I’ll post the slides here afterward.

Sub-topics will include:

  • HTML5 Offline Storage Options
  • UserData
  • Flash Local Shared Object
  • Window.name
  • probably more.

Also I’ll be giving away a copy of my book to anyone who cares.

Slides from Max 2009 Talk

Tuesday, October 6th, 2009

Here are the slides from my Adobe Max 2009 talk on “JavaScript 2.0 in Dreamweaver CS4″:

Catch my JavaScript Talk at Adobe Max ‘09

Monday, September 28th, 2009

If you’re going to Adobe MAX this year and are interested in JavaScript development, you may be interested in my talk “JavaScript 2.0 in Dreamweaver” which will be held @ October 6 at 03:00PM in room 506 (Capacity: 90). While you’re at it, here are a few other JavaScript or Dreamweaver related talks that might interest y’all:

  • Using the Spry Framework in Dreamweaver CS4 (Arnout Kazemier) Oct 5th 3:30pm 403B
  • Spry Widgets and Dreamweaver CS4 (BYOL) (Chris Converse) Oct 6th 1:00pm 408A
  • Ajax for Designers (Greg Rewis) Oct 5th 11:30am 405 + Others
  • Skinning JavaScript Framework Widgets in Dreamweaver (Joe Lowery) Oct 7th 3:30pm 402A
  • Best Practices in Cross-Browser Testing with Adobe BrowserLab (Kristin Long) Oct 7th 2:00pm 406A + Others
  • Roadmap: Web Professional Tools and Services in Creative Suite (Lea Hickman) Oct 7th 5:00pm 504

Basically I’ll be discussing ways that serious JS dev can approached in Dreamweaver, giving demos of some cool new stuff including:

  • BrowserLab
  • DOM and CSS debugging features
  • Framework support
  • Web Widgets
  • Spry

I’ll also talk about some things to watch out for and talk about where I would like to DW go in the future. MAX is Adobe’s annual conference and will be held between Oct 3-7 in Los Angeles this year.

JavaScript Programmer’s Reference

Monday, August 24th, 2009

My book finally came out this month and I got my hands on the finished product. I have to say I’m pleased with the finished product. I devoted about a year of my life to this. I really wanted to capture some of the most important and current topics in JavaScript development, including:

  • All the basics (of course). Types, syntax, and all the little quirks that differentiate JavaScript from languages like Java and C#.
  • Explain clearly how developers can take advantage of first-class functions, context, and various dynamic features of the language.
  • How to design your programs using object-oriented patterns like inheritance, multiple inheritance, and how to use expando’s, and do things like object inspection.
  • What tools you should be using to do development.
  • How to avoid common performance pitfalls and how to generally speed up your applications.
  • How to do wicked-awesome DHTML and CSS magic.
  • How to store data offline for later retrieval.
  • How to take advantage of some of the cool features in HTML 5.

About 2/3 of the book is instructional, and the rest is in-depth reference material of all standard and non-standard JavaScript objects and features (including DOM). This is complete with code examples and explanations.

If you’re learning JavaScript as a beginner and not sure if you should get this book or something more basic – get this. The first few chapters tell you everything you need to know from the perspective of somebody totally fresh to the language. If you’re an experienced developer wanting to get a desktop reference, this is for you too – but you’ll probably focus on the last 1/2 of the book.

I’m really looking forward to hearing some feedback from anyone who’s taken a look at it – good or bad. So feel free to post your thoughts if you’ve bought it and had a chance to form an opinion.

Get your copy from Amazon.


NimbleKit – HTML & JavaScript iPhone Apps

Sunday, May 31st, 2009

The question has been coming up a lot lately: how can we build iPhone apps using the familiar medium of HTML and JavaScript? Already there are several options available to us, including the popular open source PhoneGap framework from Nitobi. Alexander Voloshyn wanted to take a stab at solving the problem too – the result of which was NimbleKit. His approach was more of a purpose-built framework specifically for iPhone than a general-purpose solution that could be applied to multiple devices. He’s also packaged his solution up with short-turnaround support all for just $99. I asked him some questions about NimbleKit by email. Here is our conversation:

Q. Tell me about the NimbleKit project. What problem are you solving?

There many people who have great ideas of iPhone applications but simply don’t know Objective-C, with NimbleKit it is easy to create own applications using just javascript and HTML. For those who know Objective-C NimbleKit is a huge time saver.

Q. What types of apps are best suited? Could you write a game? What are the limitations?

With NimbleKit it is possible to write wide range of applications, we can display text or image information, play audio, navigate between pages, read files and request any data from internet, interface elements have javascript callbacks to provide interactivity of interface, so to answer your question practically any application can be written using NimbleKit.
Unfortunately applications which use complicated drawing and OpenGL ES are not supported which means no complicated games, but of course you can do simple games on javascript using AJAX.

Q. What level of Objective-C knowledge is required to build a NimbleKit app?

None. However in version 2.0 we plan to give possibility to mix javascript and Objective-C, this way actually practically anything will be possible including OpenGL ES and WebKit mix.

Q. Are there any released apps or projects in the works now that use the framework?

NimbleKit is still very new so nothing yet in app store released, however we understand it is important for our customers to know they can release their apps without any problem, so we develop couple apps to release soon.

Q. Do you anticipate any problems having apps accepted into the App store?

Should not be, everything NimbleKit uses is allowed by Apple. However NimbleKit based on HTML and user may expect to load all app’s content from internet, but doing this will cause problems, most likely Apple won’t approve it because once it’s approved app’s content may change to adult or similar.

Q. Do you have any plans to port the library to non-iPhone platforms?

The library takes all advantages of it’s platform and should not exclude or complicate some features because it is required to be compatible. If we decide to make SDK for another platform we will make it from scratch using all it’s capabilities.

Q. How do you compare your framework to ones such as PhoneGap, Nemo, or Rhomobile?

Compare to similar frameworks NimbleKit has huge advantage in features, documentation, support and ease of use, only NimbleKit can provide you with working application in 3 clicks.

Also there is a big difference in architecture, NimbleKit made the way it can be extended to implement practically any feature, which is not possible with other frameworks.

Q. Right now you’re selling licenses for $99. What level of support do users get for that? Any other perks?

All general questions answered usually within 1 hour. For registered users we provide code level support. Also mailing list available and forum (launches 29 of May). All users can request any features, however registered users get their requests fulfilled first including personal pre-released patches available next day after problem appeared.

Free 30-day trials are available from the NimbleKit website.

Will Apple Permit JavaScript-based Apps?

Monday, May 25th, 2009

There seems to be a real movement afoot to provide means for developers to write native or near-native phone applications in ECMAScript. PhoneGap is doing it, Rhomobile is doing it, Palm Pre is doing it, and now Haxe is doing it.

HaXe has always been an interesting project. It’s basically a JavaScript compiler with targets for Flash 6-10, PHP, C++, Java, etc. Now you can write HaXe projects for the iPhone. Pretty cool stuff. This is certainly along the lines of PhoneGap in that it helps democratize the platform – however – I suspect it probably violates the iPhone terms of use in that it basically becomes an interpreter:

Usage of such non-public API, as outlined in the iPhone SDK Agreement section 3.3.2 is prohibited:

"An Application may not itself install or launch other executable code by any means, including without limitation through use of a plug-in architecture, calling other frameworks, other APIs or otherwise. No interpreted code may be downloaded and used in an Application except for code that is interpreted and run by Apple’s Published APIs and built-in interpreter(s)."

This seems to be sortof the same problem suffered by apps written using the popular phone framework PhoneGap (http://ajaxian.com/archives/someone-at-apple-please-review-stance-on-phonegap). While I see the need to control how code is executed when running outside the normal security sandbox of a browser, HaXe seems fairly tame because as far as I can tell, the application code is not being altered after the program is compiled (could it??). In any case, you’re still compelled to operate within the same runtime sandbox as a normal Objective-C based application.

In any case, if Apple is going to continue to crack down on frameworks like this, I hope they pick on the way the wind is blowing and provide something to the community that lets people marry the familiar world of ECMAScript, HTML, and/or CSS with the powerful features of the iPhone.

Attend my JavaScript talk at MAX!

Thursday, November 6th, 2008

I’ll be giving a talk on JavaScript development in Dreamweaver CS4 a this year’s Adobe MAX conference in San Francisco. If you’re in for the conference come by and check it out! We’ll be going over a bunch of new features in DW, Spry, and some debugging stuff.

Rich User Interfaces in Dreamweaver CS4” – Moscone West 2022 (2008-11-17) 3:30pm.

Did you know? Unique Features of JScript

Thursday, September 25th, 2008

Recently, I have been doing some research into where all the modern JavaScript engines stand in terms of implementation of ECMA 3 and in cross-polination of proprietary features. I came across some rather interesting features of Microsoft JScript that I sure as hell didn’t know, and maybe you didn’t either.

First of all, it’s worth noting that some of these features may originally have been written for the server platform and not the browser. Because the JScript engine is modular, Microsoft uses it in a lot of places. Thats also why you can do browser scripting in VBScript, much like you can write ASP pages in VBScript or JScript, and similarly for .NET.

Feature 1: Enumerator

Standard: JScript 3.0+
Support:
Internet Explorer 4.0+

Syntax:
var myEnumObj = new Enumerator([collection])

Description: Enables enumeration of items in a collection. JScript Only.

Feature 2: VBArray

Standard: JScript 3.0+
Support: Internet Explorer 4.0+

Syntax:
var myVBArray = new VBArray(vbarr)

Description: Provides access to Visual Basic safe arrays.

Feature 3: Debug

Standard: JScript 3.0+
Support: Internet Explorer 4.0+

Syntax:
Debug.write(string);
Debug.writeln(string);

Description: Used for sending debug messages to Visual Studio or Microsoft Script debugger. Early version of Console.log!

Feature 4: JSON

Standard: JScript 5.8+, ECMAScript 3.1+
Support: Internet Explorer 8.0b2+

Syntax:
JSON.parse(text [, reviver])
JSON.stringify(obj)

Description: Provides methods to convert JavaScript values to and from the JavaScript Object Notation (JSON) format.



© All rights reserved.