Archive for the ‘Development’ Category

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.

PhoneGap given Apple Seal of Approval

Wednesday, November 25th, 2009

Over the past year or so there has been a lot of consternation on the part of developers writing applications for iPhone using the PhoneGap framework. The problem seemed to be that Apple was unpredictably rejecting applications on the sole basis that they used a 3rd party framework, or that they suspected PhoneGap used techniques they prohibited (like downloading program logic at runtime). Recently, Apple sat down and did a proper technical analysis of the framework to evaluate whether or not they should continue to discriminate based on the use of this framework, or simply evaluate these applications on their own merits instead. According to Jesse MacFadyen of Nitobi:

  • Apple has given PhoneGap a technical analysis , and PhoneGap does not violate the Terms & Conditions of the App Store.
  • Apple will review PhoneGap applications based on their own merits and not on their use of PhoneGap.

This is great news for the development community because it means we can continue to write simple cross-platform applications using HTML, CSS, and JavaScript, and deploy them natively to a number or devices without having to do tonnes of rewrite for each one.

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″:

iPhone Anim Maker Updated

Tuesday, September 29th, 2009

After getting some good feedback on my iPhone Animation Tool, I decided to do another release. This time, I added the ability to hard-code the number of columns. Some people weren’t getting the right sized images for their purposes, so this gives you a bit more control over that. This also makes it useful for non-iphone animation work.

I also decided to include the full source code incase somebody wanted to get in there and fix or add something. As always, feedback is welcome.


Download it here.

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.


EasyGlyph 1.2 Released – iPhone Font System

Friday, June 26th, 2009

I’ve added some features and fixed some bugs in EasyGlyph – which is a font system for iPhone. You can ready about this tool in this earlier post. Specifically:

  • Improved the font ripping tool to specify the text hinting style. This is really important for controlling the clarity of the text.
  • Added the source code to the windows app. You can now compile this yourself.
  • Fixed a memory leak in the display code.
  • Begun working on alignment code for the objective-c classes. These still need a bit more work.

Grab the new file here.

Here are some updated screenshots:

screen-capture-2

screen-capture-3

screen-capture-5

What the Heck Happened to My Template?

Wednesday, June 17th, 2009

So I foolishly decided to update Wordpress to 2.8 using the one-click update this morning and it happily obliterated my custom template! Thanks a LOT wordpress developers! Although I suppose its my fault for not backing it up.

Anyway I need to redo the template anyway so I guess its a blessing in disguise – its just not something I wanted to do this week. :( . This temporary one will have to suffice for now.



© All rights reserved.