Day 2 was easily the most information packed and exciting of the 3 days.

IE8 was a Sponsor this year, yet their involvement was still quite small in the conference. They did have several speakers, but you can tell the conference is still being driven by the Sitepen (Dojo), Google (GWT, Chrome) and Mozilla (jQuery, etc) groups.

Faster then Light JavaScript

The opening talk was from Brendan Eich. Brendan is in a strange situation where is his the master and overlord of JavaScript, yet you can tell he’s a bit more intellectual then the typical JavaScript guru. He focuses a lot about lower language constructs and less about closures and the like, which is just kind of weird.

• Tracemonkey
  • Incrementally Rewritten to be much faster
  • Now fast as almost anything.
• V8, SpiderMonkey
  • Both are very fast and really good codebases.
  • Getting Close to C Speed
• IE
  • Seaworthy (Showed picture of a beaten down houseboat)
  • Kind of missing in the JavaScript performance arena. 
• Whats it all mean?
  • Browsers get near native JS Performance
  • Mobile browsers too, without sucking massive amounts of power
  • IE being guilted/pressured into getting better
  • Developers make your voices heard!
• Canvas
  • Actual image processing capable
  • Ray Tracking Possible now, will be 3-4 times faster in 1 year
  • HTML5 Web Worker threads
• On the Horizon
  • CSS Transformations
  • CSS3 Selectors
  • Border image
• Trying to put SVG Back into the web (Though John Resig already voiced his doubts that without a hail mary miracle that SVG is pretty much a goner)

I’m trying to get this out the door, so here’s some notes from the rest of the conference, very much abbreviated.

• YUI Test was showcased. Check out more here.
  • Still looks a little more complicated then it should be.
  • I think John Resig mentioned a testing framework as a Firebug plugin. That sees like the way it should be.
• Someone was using the tool Programmers Notepad, which seemed cool so I made a note of it.
• UX Design for Ajax Apps
  • Design is how things work.
  • The Design of Everyday Things (Recommended Book)
  • Instructions don’t make things usable. 
  • Must do Research to determine usability.
    • Don’t ask customers what they want, find out what they do.
  • Universal Principles of Design (Another Highly Recommended Book)
  • Tool: Kuler - Generates color palletes
  • Don’t Pretend
    • Pretending to be the user means your pretending to be stupid, which just isn’t possible. Clients aren’t stupid in general, just when dealing with whatever you happen to develop/design.
    • Pretend instead to be the application.
• Performance from Yahoo
  • Amazon did a test and added a 100ms delay to the loading of their site. They experienced a 1% drop in sales as a result.
  • Yahoo did another test, adding 400ms to their load time, they recieved 5-9% drop in full page traffic.
  • Google, same thing, +500ms to their load time, 20% fewer searches.
  • Get YSLOW! It was an overarching theme of the session.
  • Flush the buffer early if you can, gets the browser working while the server does the rest of its work.
  • Use GET for Ajax requests.
    • Only 1 TCP packet is sent with GET
    • Post sends a headers, and posts body seperately and has a lot more content.
  • Post-load components
    • Whats absolutely necessary to render the page?
    • User percieves site is loaded after site looks visiually loaded. 
    • JS can load in after site looks visually complete.
  • Pre-load components (3 Different types)
    • Unconditional: Google preloads its results images on the google search page.
    • Conditional: On search typing, start preload of images.
    • Anticipated: Anticipating new release? Start pushing out those images for the next release early so the users cache isn’t completely empty.
  • Avoid Filters (AlphaImageLoader)
    • Blocks Rendering of the page.
    • Increases memory consumption
    • New filter per usage, not per page.
    • Avoid completely if you can.
    • Use PNG8, works just fine, no grey background, but boolean transparency only.
  • PNG8 Does support alphatransparency, and in IE8 the alpha-transparent bits will show as completely transparent. Didn’t understand how to get this to work though, they were vague on it.
  • IPhone
    • Total Cache 1024k
    • 25kb limit on a single file no longer exists.
  • Look out for your users (Don’t hurt your users speed)
  • Harvest low hanging fruit
  • Balance features with speed
    • They explained this as, balance the perf budget.
  • Verify Assumptions!
  • Make Perf part of your process.
  • Measure and track results
    • Firebug
    • IBM Page Detailer
    • YSLOW
    • Gomez
    • Smushit.com
  • Ask Questions and Challenge answers

Keynote

This was a pretty similar keynote to the one last year. 

• There was a brief mention of UX being crucial to the evolution of great, but no more follow up.
• Ben and Dion did this thing where they setup a random buzzer and when it sounded they would trade off on who was speaking. Sure kept things interesting. 
• More of a hello, this stuff is exciting talk.

We (as in Method SF) were pulled in about 2 weeks ago to help out on a project that was frankly going into the toilet, quickly. The team had estimated about 8 days of work, for 3 developers to get it all done, and it turns out they were just freakishly optimistic.

The first thing that happens is that our two best flash guys get immediately put on the super hard feature of the site which is this fancy flash video selector.  Then, me and another guy get pulled in to do QA on HTML templates, which have yet to be integrated with the system. Finally, we pull in the last remaining guy on our tech team who wasn’t involved with the project (now 5 of us) to do additional QA and help out any way he can.

Now besides the fact that we know this is a recipe for failure (people go around quoting Mythical Man Month, and something about 9, 1 month baby’s) we still think it is the only way to get the project done by Monday. No not this next Monday (its Tuesday as I write this) but yesterday, which was supposed to be the end of development and the start of QA. They actually worked over the weekend to try to his this date, which doesn’t seem that silly but it gets more ridiculous.

They worked over the weekend, did a whole bunch of work, but it still turns out we won’t be ready to integrate what we are doing in our office with the other groups work till Thursday. We don’t actually expect to be done with development till Friday, and of course they are presenting to the client on Monday.

Now if its a little hard to understand the big WTF here, the gist is that they plan to code 12-14 hour days just to get every feature implemented by Friday, so they can show the client their nearly finished product. The expectations here are not beta quality, but QA complete, getting ready to ship work. That’s never going to happen. The project will be smoke, mirrors, and most likely a Blue Screen of Death.

Monday also happens to be the day that the other group is planning to start phase 2 of the project, with a whole new set of requirements. Not only do they plan to be finished with the current site, they want to add on a whole new batch of work, basically making a QA pass impossible.

All through this process we’ve made attempts to get the left over work estimated and real expectations set, tried to get the customers expectations modified, and basically try to do everything in a smart intelligent way considering we know that the site won’t actually be ready when everyone is really really hoping it will be.

Hoping won’t change reality, if there are 10 people working on 30 features, and its going to take a month, then stop hoping and start doing something productive. Like managing the client, telling them you F’d up and that its going to take longer then expected.

I can’t believe I’m on a project like this, absolutely horrendous.

 

Stackoverflow is sort of like the anti-experts-exchange (minus the nausea-inducing sleaze and quasi-legal search engine gaming) meets wikipedia meets programming reddit. It is by programmers, for programmers, with the ultimate intent of collectively increasing the sum total of good programming knowledge in the world. No matter what programming language you use, or what operating system you call home. Better programming is our goal.

 

The core directive Jeff and Joel set out to address was the issue of a good place to go for development knowledge. If you had a question, there should be once place that you know it should either be answered already, or shortly after you ask it.  

Jeff even goes as far as putting up a witty inspirational image with the caption STACKOVERFLOW: None of us is as Dumb as All of Us. Which again references that knowledge-base aspect of the site.

But I’m finding the real value in this site is actually for entertainment purposes. I probably take a break 2-3 times a day, and with my iPhone, when I’m waiting for a meeting or Appt., I can be just browsing the internet 10-12 times a day just killing time. For me to be able to browse StackOverflow and check out what the latest greatest questions that have been asked, questions that I might be able to help out with, or just questions with funny answers that means I get to do more then kill time reading Digg I actually get to learn as my entertainment. 

With that in mind, I think you could take the following Venn diagram Jeff uses to describe the site, and move the Digg/Reddit circle right on top of that asterisk.

From their website…

The AJAX Libraries API is a content distribution network and loading architecture for the most popular open source JavaScript libraries. By using the Google AJAX API Loader’s google.load() method, your application has high speed, globaly available access to a growing list of the most popular JavaScript open source libraries

Ignore that part about the google.load part, its really not necessary and just makes you include a JS file thats not really needed. The usage page provides URL’s for you to include on your page that load either the full version of the library or a YUI compressed version.

The important bits of the above quote really though are

• Content Distribution Network for one of your JS files, usually one of the larger files.
• As browsers have limits to the amount of files they can download from one domain, this allows the browser to download this file while it otherwise would have been waiting in the download queue.
• Files are cached based on their URL, and if you would have happened to already have visited a site that uses this same library and version of that library then you’ll skip downloading it on this site. Thats right, partial page caching, even if you’ve never visited the site.

After news of this feature broke, we had a large email chain at our office about putting one of the most core files for your site out of your control. Back and forth we went, even some snide remarks, but essentially theres no way around the trust issue. You can have your own backup plans for if the file isn’t included, but now your adding complexity for a relatively small gain, and at that point you might as well just include a local copy of the library and skip the Googl eAPI completely.

The Google API supports 5 (4 really) libraries that you can remote load this way.

• jQuery
• prototype
• script.aculo.us
• MooTools
• dojo

Though unfortunately MooTools is a little behind the times.  1.2 was announced on June 12th, thats a month and a half ago from the creation of this post and its still not in the Google API. I checked the other libraries and they are all up to date, but haven’t been updated since this service went live. So we don’t yet know if this is a service that will be going stale as time progresses.

So it turns out, it doesn’t work. Not only does the font-family not get inherited but any other rules you specified get ignored as well.

Super annoying.  So I did what any good citizen would do. I complained.

Bug: #448142

The great thing about FireFox is that if they decide to fix this issue, they can have it pushed to the general public of FireFox users and this issue could be eradicated in weeks time. So here’s hoping.

There’s this video up at Method.com that is kind of an office montage, definitely worth checking out.

Also, I listed the San Francisco openings for Method in my sidebar on the right.

So last year I went and was overwhelmed by how much a conference can help. Last year I was able to talk Daptiv my former company into sending me there as I hadn’t had a lot of interaction with the AJAX community outside of blogs and such. What took me by surprise was that after the conference it wasn’t the knowledge that I gained so much as the excitement and energy that I felt after words. It was like a mini generator for my programming spirit.

So I get to go again this year, really exited, yup. I was hoping it would be here in San Francisco as that’s where I am now, but well, they basically eliminated it in favor of Boston, so that is where I will be Sept 29th - Oct 2nd.

Flash Training

Before coming to Method I had no great interest in learning Flash, but now seeing what they do with it here, well, I’m stoked. Next week, I’ll be spending 3 days at AcademyX training learning all about Flash and ActionScript.

Projects

I’ve been posting up retrospectives of the projects I finish, but usually I can’t tell you about them when I’m working on them or about to start as they want to control the press for them. This time I figure I can tell you I’m going to be cleaning up some of the issues on Method.com. Its actually a very nice site to work on as its very simple, only 3-4 actual pages and mostly JavaScript goodness for the rest its pretty self-encompasing.

Process

I just finished a book called Managing Humans it is on my personal list of important books right next to Joel On Software’s books for understanding business and people. I’ve been trying to bring some of the wisdom from the book to day to day work here, but adoption is slow.

I’m finding though that I enjoy process just as much as programming, its refactoring chaos into order and that appeals to my anti-chaos brain very much.

Try… ohh, this article from 24 ways. I’m not really to interested in describing the awesomeness of PNG’s when so many others have done it so well.

It is very important to know though that when using the AlphaImageLoader it will invalidate most if not all mouse events (I haven’t noticed any it doesn’t kill) on elements covered by the PNG loaded in the AlphaImageLoader.

The only work-around for this is that transparent regions are immune to this effect. As on the following image below, I made half the box below transparent by cutting out half of the blue gradient.

In this image, my name is encased in an H1 with an onclick event, but that event will only be fired if you clicked on the last 4 characters (RAY!) as they reside in the transparent portion.

I was doing some investigation on transparent PNGs and had the following code

Live Example

This works in every browser but IE6 since it doesn't support PNG alpha channels without using the DirectX Filter property. So I'll need to turn off the background, and specify a filter property, preferably only applying to IE6. The code I ended up with was...

Live Example

The obvious extra syntax above is *- which is the hack to bypass the all the other browsers but IE 6. I'm jus ta lowely web developer not an IE/FF CSS parser expert so I'm not exactly sure why IE6 recognizes this and IE7.

Also, the asterisk isn't even necessary for this to work.

This works just as well, but I thought it prudent to add the asterisk to adhere to the hack used by the Yahoo guys, and prevent any conflicts with the browser specific properties popping up such as -moz-border-radius: 10px;.