The Contest:

“The competition is open to anyone who wants to make tired, poor, slow Web applications faster and more responsive. Entrants simply record the Web site path or transaction that they want to improve using KITE (Keynote Internet Testing Environment) which can be downloaded for free from http://kite.keynote.com/download-center.php. “

Read more about contest here.

Don’t not submit your site because you don’t want people to know it’s slow. Your users already do. This contest is a chance to get some free help and pointers on making it better. It also may be the leverage you need to get you point across that performance matters.  Performance is one of those funny things that some people need to be smacked across the face with in order to take it seriously.  Not sure of all the reasons for this my psychology training only goes as far as training a rat to push a leverage for a food pellet. Use the contest as a catalyst for firing up the team around making your site scream.

I am excited about the contest:  First – I get to be a judge, I just hope I get a gavel and get to site up high above the contestants to give my decision. Second – many times developers can do some simple things and make a big difference in there sites speed.  Remember it is even simpler when you use Rockstarapps tools.

The Webinar:

Last month, I did a webinar with the folks at Keynote you can check it out here. The webinar is about 1:20 it is well worth the time, we cover quit a few topics including; performance testing and performance optimization. If you don’t have an 1:20 to spend listening to me talk, just fast forward and look at the slides. Unfortunately, the video is only in windows media format.  You will need to download the video here or you can go here on kite.keynote.com to get the video as well (You will need to register).

Last but not least:

Over the last couple months I haven’t blogged as much as I like but that doesn’t mean lots of stuff it’s happening. Here is a list of exciting things that have been going on.

• Released a jsLint plugin for eclipse - This plugin brings all the features of Douglas Crockford’s jsLint library to eclipse. Click here for more information. Be warned not everyone on your team will agree with the issue it finds.
• Rockstar Web Profiler -This is huge, Rockstarapps is emassing a set of tools that one person coolly characterized as “One click global site optimization.” This new tools was originally called “Razorspeed Web Profiler” and is still being build and mantained by Coach Wei. We came together on this to make it easier for people to get all there performance tools in one place.. Check out the Rockstar Web Profiler here. Also checkout Coach Wei announcement here.
• Went to the Googleplex and met with Steve Souders, the conversation was good and got great feedback on both the optimizer and profiler. Next time I am going to bring my bathing suit for some swimming and beach volley ball – both of which I kick as at.
• On the my trip out to SFO, I slept in the garage of the www.bitsandbuzz.com world headquarters. It was a cool place to crash and the fresh brewed tea was awesome.
• Let’s not leave out the day job at Nexaweb, the dojo.E project is getting good traction of late. One application that it it will be rolled into production with is a CMS system.
• There is even more exciting news that I can’t talk about now, but if you follow me on twitter http://twitter.com/rockstarapps  I give out more and more clues everyday.

Last Question:

Today, there are a lot of optimization tools and knowledge (books, seminars, …) about producing a highly optimized website, though it seems like not everyone takes advantage of them. I would like to hear why you do or don’t optimize your sites.

Bob (Buffone)

Cross-Domain (aka Cross-Origin, Cross-site) requests aren’t new to the Web world they have been available in Flash for some time.  As a supporter of the Open Web, I try to do most of my application development in HTML, CSS and JavaScript. Every now and then I get the urge to build a new application to prototype a thought or fill a singular niche (That’s one that I will most likely find interesting or useful).

That’s how the Snipper application came about. When I was done with the basic functionality, I decided to build a web application that did essentially what the eclipse plugin does.

• Submit Content to S3
• Update Status on Twitter
• Submit Content to S3

Services without Servers

Another thing I have been reading about lately are articles on Tim Berners-Lee’s concept of linked-data. The concept is interesting and the way I have envisioned this working is what I call “Services without Servers”. As a developer, I should be able to create new Services without having any servers either shared, hosted, or in the cloud that run code I have written. Using only APIs and the user’s machine, I should be able to create a service. This is how I envisioned the Snipper web application working. Assembling different content into a browser-based application; I would use JavaScript create the running application.

The page that displays the snippet is done in just this manner using JavaScript, web-based data and the following services; Twitter, js-kit, tinyurl, Amazon S3 the page is assembled on the client.

This works great for displaying data but for producing data the current browser environment is insufficient.

You might have done this:

Knowing I needed to integrate twitter, I went to the twitter.com/api page and started looking for the JavaScript API. “Let’s see…”

• ActionScript/Flash, C++, C#/.NET, Java, Objective-C/Cocoa, Perl, PHP, PL/SQL, Python, Ruby, Scala

Damn it, where’s the JavaScript? Oh yeah, that’s right it can’t be done because there isn’t Cross domain functionality. ActionScript & Flash have libraries because the flash engine can access resources outside of the host domain.

Flash & Flex

Flash & Flex applications allow developers to access cross domain sites using a configuration file that is retrieved from the applications host domain. This file configures the flash engine to allow access to certain domains. An example of the cross domain configuration file is embedded below.

<?xml version="1.0"?>
<!-- http://snipper.rockstarapps.com/crossdomain.xml -->
<cross-domain-policy>
    <allow-access-from domain="www.twitter.com"/
    <allow-access-from domain="*.twitter.com"/>
    <allow-access-from domain="105.216.0.40"/>
</cross-domain-policy>

This approach makes sense because it allows the host domain to secure which domains can be called. If the application tries to call a 3rd party domain that is not allowed, the request can be stopped.  This approach also allows integration of 3rd party libraries without worry of them sending data to anyplace other than the ones specified.  Lastly, this approach works with any third party service.  Twitter does not need to do anything special to allow Flash & Flex clients to access their services as they don’t for PHP, Java or any other technology… Not so fast, lets see what the W3C has come up with.

W3C & Open Web

Currently the W3C is working on a Cross-Origin Specification. I am not going to go Zed Shaw, but I have to admit that I don’t get the approach of the W3C. Having a working model already on the Web (Flash) the W3C came up with a whole different model of cross domain requests.

Instead of the having the host domain provide the browser with the list of sites the browser is allow to talk to. It is up to the 3rd Party to determine if they allow requests from a certain origin. What? Let me explain.

In this model the browser has access to all websites. When a cross domain request is made the browser will add the “Origin” header to the request.  Below is the contents of the a XDomainRequest in IE8.

Cross Domain Request:

GET /test.php HTTP/1.1
Host: www.rockstarapps.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1b3) Gecko/20090305 Firefox/3.1b3
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Referer: http://www.rockstarapps.com/samples/crossdomain/index.html
Origin: http://www.rockstarapps.com

It is up to the end point of the request to respond that they except cross domain requests. In order to do this they respond at a minimum with the “Access-Control-Allow-Origin” header. Below is a snippet of PHP code to respond with the header.

3rd Party:

<?php
    header("Access-Control-Allow-Origin: *");
?>

I see several big issues with the what the W3C has provided as a basis for cross domain:

1. Puts the onus on the 3rd party providers.  This means that all 3rd party services need to add the access control header.  I can’t just use the new IE 8 browser to start interacting with 3rd party services like twitter. Every response to a request by twitter, flickr or any other needs to supply this header at a minimum. Why? They don’t need to do this for any other client of their service.
2. Can’t protect 3rd party libraries from sending to unknown destinations. If I load a JavaScript library it can send data to anyone it wants.
3. The Client sends data even before the service is verified. It is speced that Browser is supposed to issue what is called a Pre-flight Request to verify the supported methods and headers but I ran both IE 8 and the firefox beta through a proxy and didn’t see this work.
4. I need to change my server code to support this type of interaction. Also the service provide is responsible for keeping a list of the domains. There are what – a billion plus internet domains registered.  Now everyone needs to keep track.

Overall I think the approach is completely backwards from the way it is supposed to work. Flash & Flex will still be needed if you want to build a client only application on the web.

The one application model that this spec makes sense is where the user chooses the endpoint. Take an application like Bespin, they could offer a portable repository model that makes it possible for any third party to supply settings and project information as long as they support some JSON specification.  How would it work?  Load the application from the Bespin site and then choose a code repository. In this workflow the W3C model would provide a vehicle for creating this application.

Native Support

IE 8:

New in IE 8 is the XDomainRequest which provides the ability to execute requests outside of the application hosts domain.  To see how to use it check out this code snippet. One of the down falls of the object is that is has a very limited API, click to see API. Doesn’t seem to be the same functionality as the normal requests; headers, set body content, multipart posts.  Again this limits the usefulness of the API for building applications.

Everyone Else (Tested in Firefox 3.1.3 beta):

The rest of the browsers will use the XMLHttpRequest which will presumably have the same functionality as it does for non cross-domain requests. Click here to see how to use the native API.

NOTE: Don’t try to run this through the from http://localhost/<app> and call  http://127.0.0.1/request.php. I didn’t get this to work and needed to change my host file as they did in this video.  Kinda sucks but easy enought to work around when you know.

NOTE:  The Cross domain requests would fail if you try to run the browser through a proxy. This happened, I did see it fail in IE and firefox but couldn’t reproduce it, I guess it was my fault.

Library Support

As of testing the latest release libraries using the Google Ajax Libraries API which makes this kind of testing extremely easy. Now, I don’t think that any library should support the Cross Domain requests at this point. None of the libraries tested support the new XDomainRequest.

• Prototype – Errors in both IE8 and Firefox 3.1.beta
• Mootools – Errors in both IE8 and Firefox 3.1.beta
• Dojo – Errors in both IE8 and Firefox 3.1.beta
• jQuery  – Errors in both IE8 and Firefox 3.1.beta

Test Application

I have created a test application that allows you to try out the Cross Domain functionality. I have tested it in IE8 and the Firefox 3.1.3 beta. Only the HTML is required to run the application. The test file that is requested looks as follows:

<?php
    header("Access-Control-Allow-Origin: *");
?>
 { 
   "name": "Bob Buffone",
   "blog": "http://www.rockstarapps.com/wordpress",
   "myData": <?php echo $_GET["mydata"]; ?>
 }

Screen shot of test application. Click to see for yourself.

Conclusion

My feelings after researching the Cross Domain functionality is that it really isn’t ready to build applications.  Unfortunately, theW3C didn’t get what the people would try to do with cross domain requests. Therefore, it will be along time before I go to the twitter api page and see a JavaScript library. What I am looking for in the browser is the same support to execute requests as PHP, Java.  Limiting the API doesn’t protect the data in the page, it just limits the usefulness of the browser to deliver more functional applications.

Bob (Buffone)

The area that is of the biggest interest to me personally is, “how does using a Cloud affect Website optimization?” (That’s the focus of rockstarapps.com tools.) Starting out I was assumed that using Cloud infrastructure or a CDN was only for sites like ESPN.com or CNN.com. How could I, one person and no budget be able to leverage these technologies? Taking this question and breaking it down into several more manageable questions, I try to provide you with the information needed to get started using it in your own projects.

• Isn’t using a CDN going to be expensive?
• How easy will it be to get up to speed and use the technology effectively?
• How can using a CDN like CloudFront improve a sites performance?

Isn’t using a CDN going to be expensive?

The answer is simple. N0, but it depends on how many page views you get, the number of resources that are within each page and the size of each resource. See, most CDNs charge on the following way:

1. Cost of Request * the number of requests.
2. Cost per GB * bandwidth
3. In Amazon the origination of the request changes the price of the resource. See my CloudFront bill from last month below.

Here is my CloudFront bill for last month:

This is just for my site which has been getting about 200+ visitors a day and about 3.5 page views for each visit.  15 cents for a month, not too bad and throw in the fact I got a $25 gift certificate for participating in Amazon’s Startup Challenge, I will able host my static resources using CloudFront for the next three years.

If you want to figure out how much hosting of your resources will cost using CloudFront, check out Amazon’s calculator.  Click here to calculate your price.

How easy will it be to get up to speed and use the technology effectively?

I was pleasantly surprised that getting up to speed with a CDN is fairly a straight forward process.  Upcoming a plug – You will need to find a tool that works well interacting with S3 and CloudFront – RockstarApps’ tools may be what you need. Behind the scheme of a CDN there are many complicated things going on to distribute resources, keep them fresh and making sure each resource is loaded from the closest server to the user.

What do you need to do?

Normally on a Website the static resources are loaded from the same server as the dynamic content.

<html>
<head>
<script src=”my.js”></script>
</head>
….

In the code above, the browser loads the Webpage from http://localhost, then the JavaScript file “my.js” will be loaded from the same server (http://localhost/my.js).  In order to utilize a CDN for the JavaScript, you will need to change the URL for the JavaScript file to be the location of the resource in the CDN.

<html>
<head>
<script src=”http://cdn.rockstarapps.com/js/my.js”></script>
</head>
….

Each resource that is deployed into the CDN will need its URL changed.  The exception to this are URL’s within a CSS file that is loaded from the CDN. This is because the resources are loaded relative to the CSS file.

Walk through of using Amazon’s CloudFront CDN:

Step one – sign up for a Amazon WebServices Account, click here to sign up.  You will be required to provide a credit card but everything is paid based on usage and there is no setup charge.

Step two – Sign up for both CloudFront and S3, you will need both of these services in order to host your resources. Amazon requires users to sign up for each service separately.

Step three – Create an S3 bucket – You will need to provide a globally unique name for the bucket, your best bet is to use your domain name as as prefix and a descriptor as a postfix. The images below shows the S3 buckets I have deployed into S3.  The Eclipse view is part of RockstarApps’ Amazon WS tools, click here to read more.

Step four – Upload your resources into the bucket. The S3 view below shows how the resources are organized.  S3 works very much a file system; the buckets being the drives and the resources are organized in directories and files.

Note: when resources are initially uploaded, their privilege is set so that they can’t be read by the public.  You will need to change their privilege to read only for everyone. If you don’t change the privilege you will get an access to denied error when loading the resource.

To test out the resources were uploaded properly, you can use a URL like the following. Substituting your bucket name and resource location. If you are using the RockstarApps tool select the resource and hit the Earth icon in the toolbar.  This will bring up an editor show the status of the resource from it various possible access URLs.

http://rockstarapps.com.joomla.s3.amazonaws.com/resources/templates/mocha/css/mocha.all.css

Step Five – Create a CloudFront Distribution. This is where you connect your resources in S3 to a CDN.  When the initial distribution is created it is given a unique but ugly name.

Step Six – Assign a CNAME to the CloudFront distribution, this will allow you to use a name similar to cdn.rockstarapps.com verse dtksrkctuzfa.cloudfront.net

• Part A – Tell CloudFront what the domain name will be.  Using the RockstarApps tools you can do this from the “Create Distribution” dialog or by modifying the properties of the distribution after it is created.
  
•  Part two – configure the CNAME entry in your domain settings.  I use GoDaddy for my host… What… they have a good product and great SuperBowl Commercials.
  Update 2.11.2009: My site is running really slow, unless it is fixed quickly, I will reverse my GoDaddy has a good product.

That’s it, the CNAME configuration is the last step. Once this is configured you will be able to load the resources using the configured sub domain, in my case it will be cdn.rockstarapps.com

How can using a CDN like CloudFront affect a sites performance?

A Websites performance gets worse the farther the user is away from the server.  This is why developers never seem to have performance problems when they are running the application from http://localhost. But when the site is rolled out into production people have a bad experience. This is due to the fact that server is in Texas and the user is in Germany and there is a great distance the bytes need to travel and through many devices.

Just looking ping timing of www.rockstarapps.com (90ms) vs. cdn.rockstarapps.com (18ms) that is a 80% reduction in just the ping time.

Combine this a tracerout for each domain www.rockstarapps.com has 19 hops vs. 11 hops for cdn.rockstarapps.com a 43% reduction in hops.

Add in a layer of resource optimization (Concatenation and Compression) and you will be able to deploy a highly optimal site that gets that “A” in YSlow!

Summary:

Amazon’s CloudFront isn’t the only CDN out there, you can checkout LimeLight and Akamai plus others. My effort so far has been around Amazon, but you can investigate the others.  The big boys have been using CDNs for a long time and finally it is simple and cheap enough for site like RockstarApps.com and most likely yours to start using these technologies for your own projects.

I know my site gets about half of its traffic from outside of the US which means that the use of the CDN really makes the site more user friendly.  Companies like Keynote can give you analytical assement of how your site is performing in various parts of the world. Keynote provides a tool called Kite that is good to get started testing out your Websites performance.

Bob (Buffone)
Optimizing the Web

Product releases are more than just the bits and JAR files, you need to update documentation and Web pages to reflect the new stuff. If you can’t find it on Google does it really exist? In the past I had been using three separate methods.

• Static HTML homepage
• Wordpress
• A wiki

Going forward, I felt this was too many solutions and none of them appropriate to manage a 50 page website where I will be updating it in real time.  So… in order to move the site forward I needed to find a CMS system.  The thought of this gave me the shivers; but it needed to be done.

Joomla

I would love to tell you that I went through a long list of all the options evaluated them in great detail, did a POC.  But that time would be better spent on other things.  Instead, I had been seeing a lot of Joomla articles floating around lately and installed it (Developer marketing really does work, especially if it seems grassroot).

During the process of getting started with Joomla, I wrote down my thoughts:

• Installation – Simple.
• Community – Active.
• Plugins – A lot of them. I like that I can install them from the control panel and don’t need to FTP them to the server.  This is a huge advantage and saves time.
• Flexibility – very nice. Templates, Plugins, Modules, Locations
• Templates – A lot of them. I ended up using the Mocha template because it was professional and clean, cost me $49, but worth it for the piece of mind that the site looks good.  Can everyone using Mocha, change their template, and also can the people thinking about using the template, not
• Documentation – Pretty good.
• Ease of Use – OK once you get the hang of it.
• Speed – OK, I have been tweaking it to get it more optimized.
• SEO friendly.  This is huge, I am already on the first page for many searches that people would do for my site.  Just change the settings in the “Global Configuration” page and make the supplied .htaccess file active.

Issues I ran into getting up and running, mostly just monkeying with stuff I didn’t understand:

• Menus – This was thing that took me the longest to figure out. I still have spare menus hanging around in the menu manager. When I first started, I went to the menu manager and added several top-level menus that I though would show up as top level menus in the application.  This didn’t work.  You need to add the Top level menus to the “Main Menu”.  They will show up in the menu bar correctly.
• Sub Menus – I wanted to display a submenu in each section of the site, I again created top level menus and then attached them in the module page.  But now I had two menus for every page and this was difficult to manage.

The way I finally got it to work the best was as follows:

1.) Go to the “Main Menu” in the menu manager and create the complete menu tree.
2.) Go to the Module manager and create a Menu module.
3.) Set the properties for the Menu module as I did in the screen shot below.

4.) Set the Menu selection to be all the menus items you want the sub menu to be displayed on.
5.) Need to set the start level to be “1″. This part is a little magic, there is no setting that says I want to display the Products menus but it just knows.

• Can’t create an article from the menu manager.  When starting from scratch it would be nice to allow the user to create an article once the menu is created.  Otherwise I need to:
  1.) Hit save.
  2.) Go to the article manager.
  3.) Create a blank article.
  4.) Save it.
  5.) go back to the Menu Manager.
  6.) Open the menu item.
  7.) Select the article.
• Names of the Menu types aren’t that intuitive – Use the “Article Layout” to display a single article.  Didn’t use any other ones Menu types.
• Connecting the modules to different “positions” in the template. I love this feature, but figuring out where the module will show up is related to the template. So I need to refer to the template layout sheet.  “Print out the layout sheet if our template has one” it will make it easier.
• Sub directory installation. I installed my Joomla into a joomla-1.5.8 directory but want the urls to be in the root directory.  Not even sure if this is possible but have been playing with the .htaccess try rewriting the URLs.

Optimizing Joomla

Rockstarapps’ tagline is “Optimizing the Web” – so how could I have my site scoring an “F” in YSlow!.  Once I got the site running and populated with my pages, the next step was getting Joomla optimized. Front-end performance is the quickest and easiest way to get the site running the faster.  Front-end Web Optimization is also the focus of Rockstarapps’ tools. So it was a good test, to see if I could optimize the site.

Before starting the optimization process I a snap shot of the sites performance, so I could compare it to the results of the optimization. Below are screen shots from YSlow and Firebug (I ran these on the home page www.rockstarapps.com). The important numbers are:

• YSlow Grade = F(48)
• Request Count = 28
• Load Time = 6.96 seconds
• Download Size =  356KB

Onto the Optimizations:

Optimizing the Requests – Templates, Plugins, Modules all have CSS, and JavaScript so I needed to see what was being loaded then chase them down in the code.  Once the resources were found, I used the jsLex CSS and JavaScript Optimizer to create the minified and GZipped versions.  Many of the extension and templates have resource bundling and GZip features, but this won’t get you down to a single JavaScript and CSS file.

Note: It would be nice to build into the extension mechanism a way to specify the CSS and JavaScript that is needed, then Joomla could create the single JavaScript and CSS file.  This would create a far great optimization than leaving up to the individual extensions. This would also allow for Joomla to remove duplicate scripts as well.

Moving to the Cloud – One of the areas of the new jsLex release is making it easy for developers to interact with Amazon WS.  To developers CloudFront and S3 are a good way to deliver high performance websites.  CDNs have long been used by the Big Guys.  Think ESPN or CNN.com run their sites on a shared server in Milwaukee? I doubt it to.  So once the JavaScript and CSS were optimized and GZipped, I uploaded the templates directory to S3 and setup a CloudFront distribution with a CNAME cdn.rockstarapps.com.

Once the files were put in S3 and everything was configured, I just needed to set the resources directory to be the CDN path.  I manually set the path on the CSS and JavaScript, this was less risky changing the “$this->baseurl”

The Results:

After the optimization the metrics are now: (I need a drum roll plugin for wordpress)

• YSlow Grade = B(89)
• Request Count = 19
• Load Time = 2.69 seconds
• Download Size =  204KB

Improvements below are good, but could be better, I want to get an “A” on everything so more fine tuning could be done, one reason I didn’t get an “A” was not using a CDN. The resources that were marked down with from google and the video hosted by vimeo. I can live with that.

• YSlow Grade = Increased by 85%
• Request Count = Decreased by 32%
• Load Time = Decreased by 61%
• Download Size =  Decreased by 42%

Summary:

I am not sure of the proper way to say Joomla yet; but it has been a good choice and I’m glad I went that direction. But in the end, content is King and as long as the words are written they can be moved to any CMS system.  Also to everyone looking to optimize their site or interact with Amazon WS give the new version of jsLex a try and feedback the positives and negatives so it can be made better.

Bob (Buffone)

Back then both of those magazine were sold at newsstands and bookstores, so every month I would go with my girlfriend now wife to Borders and buy the latest copy of each magazine.  My wife has way different tastes then me so she got… actually not sure she got, I was busy reading my magazines. In the early days of my career, I always looked to the publication to learn new programming technique, and spark new ideas. Dr Dobbs was throughout the time I read the magazine high quality and packed with a variety of programming languages and implementation ideas.  Variety, I felt was one of its greatest attributes.  It never seemed to focus in one area but rather gave an introduction to many different things.  This was completely opposite to MSJ which focused for obvious reasons on Microsoft (This was a great magazine as well).

Then I moved and instead of the bookstore run; I bought a subscription to the magazines.  At one point, I had around a hundred of each magazine piled up in my office at work.  My wife always asked every time the subscription came due.  “Are you sure you want to renew?” and year after year I did.

Becoming Published

Since the first time I read the magazine, I was intrigued by the idea of getting published in a magazine.  It always seemed like something I wanted to do, though I never really understood how it happened or if I could do it, but I always put it in my goals for the upcoming year during my review.

Today getting published means a lot less than it did then, from an effort and focus standpoint.  Anyone with a computer can publish an article on the web, which is awesome, the more information the better.

Writing for an magazine is much different than Blogging.  Blogging is passion driven (Kind of like this article), get an idea, bang it out, proof read, then syndicate.  If I never finished this article, only I and the Wordpress software would know.

The publication process for a magazine involves many more people, there are things to manage, deadlines to meeting, and people to please – editors and readers. So when you pitch and idea to a magazine, the Marketing team talks to the magazines associate editors which will pitch the idea internally and get approval. If the idea is approved, then a place in the magazine needs to be found – which month and the length.  Once these are determined the magazine communicates back to the marketing people and then to you. This process can take one to three months, if in that time you didn’t write the article, the passion for the idea may have left.  This means that instead of being able to bang out the article completely on the adrenaline caused by the passion for the idea. The process turns into a task, ugh, a task for writing an article is no different from any other task that you need to complete. Its Work.  This is where the marketing team places their most critical role.  Nagging.  Every week, then every day and then every hour the marketing people ask “when you will be finished?” Finally you give them the article and they proof read it, then you re-read and finally it goes of to the magazine and they edit and then you are finished with everything except waiting.  At this point you are just sitting and waiting and nagging, the marketing people when the article will be coming out. Finally you get the magazine with your article printed on glossy paper and it all seems worth it.

Goal was met

Over the last few years, I have been published in a many different magazines, but never Dr. Dobbs.  Many times I had talked to my marketing department and said “What about Dr. Dobbs?” I have spoken at their conference, why don’t we pitch them an article idea. Then… this summer my PR person emailed me and said fill out this Dr. Dobbs Developers Diary, so I did. Now I was left to waiting and nagging the marketing team on the publication date. For the first four months after completing the Diary interview, I would check weekly on the Dr. Dobbs site to see if the article had been published and nothing.  Then I lost track of the whole thing.  One day while satiating my Google Analytics apdiction, I noticed multiple hits from the Dr. Dobbs site.  Bingo.  I went to the site and what was the first I saw? My giant head on the cover of the magazine (Click to see the online version). Holly shit, how did that happen? I never really thought that I would be on the cover from my “Developers Diary” interview… which made it even more awesome.

Finally, I got the physical copy of the magazine and brought it home to keep forever and to surprise my family. My family has seen my face in videos and pictures on the web, but there is something different and special about seeing it on an actual magazine cover.  My son could barely stand because he was laughing so hard and my wife just thought it was a fake. It’s been a month since I have gotten the magazine and it sits to my right, in plain site until I can get it framed.

I am glad I finally got published in the magazine and if the person that putting me on the cover reads this, I greatly appreciate it,

Bob (Buffone)

One of my apdictions is Google Analytics and over the last several days I have noticed an up tick in amount of traffic the jsLex tool has been getting. This is a result of two recent posts;

1. Kevin Hackman of Aptana linked to the jsLex tool in a news article on Aptana’s website.
2. Forum post on the ExtJS website, click here to see post.

Thanks to the people that have used jsLex to this point and to those who link to and talk about the tool a double thanks. There is no better way to get the word out then to have people talk about the tool as satisfied user.

The other thing that I noticed in Google Analytics: there are quite a few searches for “jsLex ant”. I am taking this to mean that people want to use the jsLex concatenation and compression tools via ant. To those who are searching for this, is this a correct assumption? If so, I can whip this up for you to use

Expanding Rockstarapps.com

Over the last two years I have been working different facets of Web and Ajax performance and have created the jsLex profiling and Web Optimization tools. Over the last several months I have been experimenting and coding up a storm on a new optimization suite that takes the current jsLex tool and makes systematic optimization to a complete application.

There is a lot more that can be done in the area of web optimization. So far the tools that I and others have created are pretty “simplistic” not in functionality but in the ability to understand a web application and optimize the application rather than the artifacts. This is the area the new tool will attach. take application “A” and an optimized version of the application.

The next Storm

Every few years a new software “revolution” seems to occur – 2009 looks to be the year of the “Cloud”; Aptana, Microsoft, Amazon, Rackspace, Sun… have or will have shortly cloud infrastructure. My feeling is Cloud will have a significant impact on many areas of software. For rockstarapps the area, we will be applying Cloud to is Web performance. Cloud will be a driving factor in Web optimization for one significant reason – $$$$. As people move application to the Cloud. There will be a high visibility of the cost for applications running in a Cloud environment as people look to justify it against the application on their own hardware/systems.

This is where Rockstarapps and Web optimization comes in. Application deployments within a Cloud are typically priced in the following ways.

• CPU time - usually some prices per hour. Amazon prices EC2 $0.10 an hour for a “small” unix machine. Click here for the full price sheet.
• Storage Space – Simple Storage Service by Amazon – $0.150 per GB – first 50 TB / month of storage used. Click here for a full pricing sheet.
• Bandwith - CloudFront Amazon’s CDN – $0.170 per GB. Click here for a full pricing sheet.
• # of Requests – CloudFront Amazon’s CDN – $0.012 per 10,000 GET requests. Click here for a full pricing sheet.

Web Optimization and Price reduction in cloud deployments are completely aligned. Using tools like jsLex will mean you can get an unassisted triple play (rare occurance in baseball) on every application.

• Decrease cost of application deployments
  • CPU Time – limited impact.
  • Storage space – small impact.
  • Bandwith – Significant impact.
  • # of Requests – Significant impact.
• Increase Application Responsiveness
• Simplification of both.

Sneak Peak at the new product!

I have embedded a video of the new product from Rockstarapps, which will consist of two main features.

Cloud Management and Deployment tools from Bob Buffone on Vimeo.

1. Amazon Cloud Management Suite – A set of eclipse plugins that allows developers to interact and manage all aspects of Amazon Web Services Platform (Ec2, S3, CloudFront, Simple Queue Service, SimpleDB)
2. Cloud Deployment – Complete application optimizer and deployer that understands the way in which web applications are put together. The tool allows developers, build engineers or IT to optimize the an application using an extensible set of “optimizer” delivery the greatest possible performance with the no impact on development. Once optimized the application can be deployed into Amazon’s CloudFront and into the applications

Check out the video and let me know your thoughts on the new product and anything else related to… well… anything. Any thoughts on a name for the product would be helpful as well.

The new product should be released in beta form shortly.

Bob (Buffone)

In the trenches:

Having worked at Nexaweb for the last five plus years building a Rich Internet Application Platform and tools and using Ajax libraries and tools, I have seen and committed many mistakes when it comes to building Ajax applications.  One of the biggest I have done myself – was not adapting my skills and methodology to JavaScript, instead I trivialized JavaScript and tried to simply port Java and C++. This caused major issues in the performance, stability, and maintainability of the codebase.

I also have worked with others educating them on Ajax performance and usage of Ajax inside of customer engagements and in the general community.  One of the areas I have seen the biggest challenge with still today is simply getting up and running. It is at this point in the project you will make or break it and if not break it, you will cause yourself lots of pain redoing it. The rest of the article is dedicated to what you should know before starting your project.

Now, I will add a disclaimer – “not all rules apply to all projects”.  This is one of the problems and why I have included a very simple histogram to depict what kind of Web application I am talking about.

The Y Axis measures the complexity and richness of the user experience.  As the complexity increases the more demanding the application becomes on the underlying User Agent. At some point your application will need to make the transition from:

•  An HTML to a page-based Ajax Application
•  Page-based Ajax Application to a Single-page Ajax Application
•  Single-page Ajax Application to a Plugin-based Web Application
•  Plugin-based Web Application to a Desktop Application

Each of these different types of applications means different things for your team, skills and the software required.  As I talk about in #3 start with your requirements and let them drive you into the right bucket.  Choosing wrong will mean lots of pain, not the “Saw V” kind of pain, but pain non-the-less.
Some rules of engagement:

Number 1: It’s still a Web Application - An Ajax application is still a Web application and all the best practices and skills necessary for Web applications still apply. However, you will need a few more skills to be successful; Advanced JavaScript, CSS and DOM modifications are all necessary skills for Ajax applications.

So what is different? Well the image above shows what’s different.  In the Web application days of yesteryear all of the logic was on the server-side and you application didn’t worry about the client.  Development was quite “simple”: applications only had state, data and logic in one and that was the server.  In an Ajax Application as your application increases up the complexity curve; you need more state, data and logic on the client, which creates a more client/server like experience.

Distribution of the state, data, and logic or Model/View/Controller to the client increases complexity of your application  not just 2 times but 3 to 4 times. Developers will need to manage both the client and server MVC as well as the synchronization of the state and data.

Ajax or XHR more specifically allow developers to create their own home grown synchronization infrastructure.  Some frameworks have the distribution built-in Nexaweb and Icefaces, DWR, Seam all provide functionality that will make it easier to synchronize state and data as well as call controller logic on either side of the Network. This great simplifies Ajax development.  Even page-based sites like dzone.com and infoq.com use DRW to page data.  The dojo.E project also allow developers to control state from the server-side through a declarative modification language that can be outputted from the server.

Another thing that will simply this complexity is services.  I talk more about this in number 7.

Number 2: Know your application Requirements – Figuring out what your application requirements are seems like a no-brainer but you will need to think about some simple things.  Do I want the back and forward buttons to work?  If so, where do I want them to work in my application? Do I want a certain state to be bookmarkable?  The answers to these questions are probably yes.  It’s on the web someone is going to interact with it as if it was a Web application.  Eventually people will learn the “Back” and “Forward” buttons don’t work in your application, although if people hit the buttons, then they probably should work. Do I want my application to work offline? Do I want a web application feel or a desktop application feel? How long will someone be using the application?

Answering these questions and ones like it will determine where on the user experience curve your application goes.

Number 3: Pick the Right “Toolkit” - In the opening paragraph, I mentioned 5 libraries but could have mentioned a whole bunch more; Backbase, GWT, Echo2, Wicket, Tibco GI… and then all the plugin libraries and even desktop framework.  In the break down of Ajax toolkit options below, I have included only the “Client-side” Ajax libraries. Each library is located where its “center of gravity” is.  This doesn’t mean the library can’t be used outside of this. But just like gravity the farther you get away from the center the less “pull” you’ll get. Want to build a full screen single page Ajax application with just Dojo core and you will need to do a lot of work. The opposite of this is true as well; use a large library for something small and you will need to do a lot drudging through stuff that isn’t needed and spend time shrinking it down.

I didn’t include any server-side frameworks like; Echo2, Wicket or JSF products, these libraries I would place in the Single-Page Ajax application space.

Number 4: *Don’t over do it* – This is an addendum to #3. I see lots of new sites out there that make a full page web application when it isn’t needed.  Creating a simple Ajax application or adding some Ajax widgets might be all that is needed.  Putting your application into the right bucket will give you a much better user experience. I still think the Google Analytics application is one of the Best Ajax application’s that has been built.  It’s a simple page-based, which uses Ajax and Flash in just the right way.  The creators of the application could have went crazy and used GWT and built a single page web application.  Then again why would Google use GWT? Even though I like Analytics there are still Ajax things that bother me; why can’t I use the “back” button when navigating my “Top Content” data with the paging bar?

At Nexaweb we have both an Ajax Client and a Java Client; so I see first hand how people get confused on what richness is needed for an application.  Having both Ajax and Java is great for customers looking to build multiple new applications or modernizing a portfolio of applications; we can cover the complete complexity.  One vendor – multiple client technologies a good choice for enterprises.

Having both Ajax and Java also causes confusion; When/Why should a use Ajax vs. Java? Below is a table of the advantages

Single-page Ajax applications fall into the Plugin column but the amount of data and complexity of the application will be smaller than their Plugin cousins.

Number 5: Don’t under estimate JavaScript – function validateForm(){} is easy; building an Ajax application is tough. Underestimating or being dismissive about the capabilities of JavaScript will lead to trouble.  Not the kind of trouble that happens when a group of teen agers goes camping in the woods but trouble non-the-less. Attended a Douglas Crockford presentation on JavaScript and you will realized that mastering JavaScript will allow you to truly successful at building a great library or Ajax application.  A good book to read is JavaScript: The Good Parts. Learning JavaScript takes as much time as any other language, the complexity comes in the application of it’s simplicity and dynamic-ness (Not sure that is a word).

Number 6: Performance will be a problem - Don’t believe me – run YSlow! on your application and if you don’t score an F the first time I will give you a free dojo.E T-Shirt.  Send me a screen shot of your application with a B or better and I will send you the T-Shirt.

It is amazing, Web development has been around for 10 years plus and a core software development requirement like performance is still not easy. I have been working at performance and created samples and the jsLex project to make it easier to create highly performant web application. Others have contributed quite a bit to improving performance as well; YSlow, YUICompressor, Dojo Build System, Dean Edwards Packer.  Though even with these tools I still think more can be done.  It would be nice to see a tool like jsLex integrated into Aptana, Visual Studio, Dream Weaver,… No one should ever have an excuse for scoring below a “C” on YSlow! test.  Wouldn’t be nice to bring that “A” home and put it on your refrigerator.

Number 7: Start with services – Don’t get so caught up in the client-side and forget to create your application in a services oriented architecture. I used little s-o-a because it doesn’t need to follow the traditional “SOA” conventions but it does need to be service oriented.  Starting with services and building your application on top of them will mean you have added more flexibility and maintainability into your application right from the beginning.  I haven’t ever built an application that was service driven and been upset with myself in the end.  We are too far along in application development to build monolithic web applications.  Once finished, someone will come up to you and want a piece of the functionality integrated into a different application or into a portal.

Services in today’s application development is less to do about governance (Though it is important) and SOAP than they are about portability of data and widgets across multiple formats and front-ends.  Eventually you will need your data exposed to everyone and your application integrated into Facebook or your corporate portal.

I mentioned in #1 that the Distributed Model View Controller will become easier if you build your application on services.  There are a couple of reasons for this:

1. The service boundary will force you to maintain a clear separation between UI logic and Business logic.  Mixing these on the server as well as the client turns your application into a complete mess.  Not the kind of mess my kids can make with a blender, a cartoon of eggs, milk and flour but a mess non-the-less.
2. You will be able to reuse the work that goes into the services unmodified.

*Note: I will be righting more about services in an upcoming Blog.
Number 8, 9 and 10: Add your own – I could only come up with 7 and a top seven list doesn’t have the same ring as a top ten list – I blame the metric system. So add to the comments other ideas for rules to follow.

Summary:

Hopefully these rules of engagement help you in your Ajax Web Application projects whether you are just getting started or working on kicking off your seven project.  This post was inspired by a recent “customer” conversation I had and hope their project turns out right.

See everyone at AjaxWorld,
Bob (Buffone)

Each day was filled with great information and a lot of cool demos. I was extremely impressed with what I saw. The things people are doing are way more advanced then simple Ajax enhancements. The are truly pushing the Browser, DOM, JavaScript to the edge. I saw fully native and cross browser charting and graphics; get these features right will mean Ajax over the next several years will be able to compete with the plugins (once IE6 is put to pasture).

Below are my take-a-ways from the two days listening to Dojo talks.

Why would an Enterprise or Individual Developer choose Dojo:

1. Covers the complete spectrum of Ajax applications.
2. Provides a well thought out foundation to build on
   1. Packaging
   2. Extensibility
   3. Unit testing framework
3. Has enterprise backing (IBM…) Check out projectzero.org
   1. Large companies provide developers to the dojo foundation?
4. Lots of widgets, not just quantity but quality
5. Internationalization and accessibility are core to the dijit library not an after thought.
6. Support options through Sitepen.
7. Strong core team – I met a bunch of them previously but everyone else was just as strong and passionate about dojo.
8. It’s really the only open “foundation” in the Ajax market.
9. Now back the development of DWR.
10. Commercial Friendly License.
11. Commercial products like Nexaweb are built on top of dojo.

Even though I have been using dojo for two years, over the last two days I learned quite a bit. Any developers out there that may not have gotten into Dojo yet, may find it quite a large and unwieldy project. To make it simpler to get your arms think of Dojo along its four major pieces of functionality.

dojo:

If you are looking for that little Ajax library to add to your web page, which can do all the “Ajax” things easily, the dojo package contains all the stuff you need.

• CSS Selector functionality – dojo.query(”#myDiv”); //returns you an array of nodes that match your css selector.
• Animations - dojo.fadeIn | fadeOut | aminateProperty- Plus more effects in the dojox.fx package.
• DOM Manipulation – dojo.style | place | attr | addClass | removeClass | toggleClass.  This is the one area that is under valued in the Dojo library. Most Ajax application need a complete set of DOM manipulation functions and dojo has the basics as well as the more complex functionality that you will need once you get your hello world application finished.
• Browser functions – dojo.isFF | isIE | isSafari – Once you step out on your own, you may need to know if you are in IE. These properties make it easy figure that out.
• Eventing - dojo.connect | disconnect | stopEvent – Need to capture events on DOM nodes or want to supply events on your own object, these functions will make it easy to do just that.
• Object Oriented Programming – dojo.declare | mixin | extend – This is where I think that Dojo adds huge benefits and why I use dojo for my applications. Using these functions along with the dojo.require and dojo.provides means that your application and knowledge will scale easily to more complex functionality.
• Packaging - dojo.require | provides – Provides functionality “similar” to the Java package and import functionality.  These functions make it possible to partition large applications into separate JavaScript files. If you are dealing with a large codebase this is the only functionality I have seen that will reduce packaging time and increase maintainability.
• Language Enhancements  – dojo.isString | isArray | isFunction | isObject| trim – You may need these when building your application or handling data in a generic way.
• Array Operations – dojo.forEach | lastIndexOf | indexOf | map | filter -Extra Array functions are always nice to make code simpler.
• XHR - dojo.xhrGet | xhrPost | rawXhrPost |formToObject | objectToQuery | formToQuery | formToJson – I almost forgot about these until I went to the dojocampus.org website.
• Console and logging features – console.info | debug | error | warn … – You can use these functions to debug your application. The messages will go either to firebug’s console or if you are using a browser other than Firefox add “debug:true” to djConfig and you will get a console window in your application.
• Drag and Drop – dojo.dnd.* – Built in support for dragging and dropping just about anything.
• Data - dojo.data.* – has a fully extensible framework creating data driven applications.  Developers can extend the dojo.data functionality to add there own custom data types. Widgets can use the dojo.data functionality to make applications more MVC like.  Pull data from the server and let the widget and dojo.data take care of the rest.

dijit:

Have the need for Widgets?  The dijit package is you.  Not only does Dojo come with a large set of widgets that will meet most of your application needs.  The architecture behind the widgets is well-thought out and easy for developers to leverage in their own widgets.

• The widgets – I will try to list them all, but a simple list won’t do them justice.
  • Widgets - Dialog, Menu, ProgressBar, ColorPalette, Tree, TitlePane, Toolbar
  • Layouts - Accordian, Content, Link, SplitPane, TabControl, Stack, Border
  • Forms - Button, CheckBox, ComboBox, CurrencyTextBox, DateTextBox, FilteringSelect, Form, NumberSpinner, Slider, TextBox, TimeTextBox…
• Theming - Dojo includes three themes for the building applications: Tundra, Soria, Nihilo and they can be applied to all widgets in the dijit package by including the css file and setting the class name on the body tag: <body class=”tundra”>  This needs to be set somewhere, I usually do the body tag. Not doing this will mean no styling.
• Build your own – If there isn’t a widget that you need, creating your own can be done in just a few lines of code.


dojo.declare("rockstarapps.Concert", [dijit._Widget, dijit._Templated], {

myDiv: null,
bandName: “”,
//You will want to use a templatePath and externalize the template in
//separate file and make it more maintainable.

templateString:  ‘<div dojoAttachPoint=”myDiv”    dojoAttachEvent=”onclick:_onClick”>${bandName}</div>’,

_onClick: function(e){
this.onTicketPurchased();
dojo.style(this.myDiv, “fontSize”, 24);
} ,

onTicketPurchased: function(){}

});

• Using the Widgets – Widgets are easy to embed directly into your HTML. Do the following three steps:
  • Add parseOnLoad: true to your djConfig.  <script src=”dojo.js” djConfig=”parseOnLoad:true”></script>
  • Require the dojo.parser functionality – dojo.require(”dojo.parser”);
  • Add a dojoType attribute to a div with the “rockstarapps.Concert” as the value.

<div dojoType=”rockstarapps.Concert” bandName=”RollingStones” onTicketPurchased=”alert(’You are going!!!!’)”></div>

Developers can also add widgets programmatically

new rockstarapps.Concert({bandName:”RollingStones”, hostDiv);

• Internationalization and Accessibility -  Some people won’t get a big benefit from this, but for those of us that need to build “Enterprise” applications, this is a must.  All widgets in the dijit package are fully internationalized and accessible.

For a complete writeup the dojo widgets go to dojocampus.org/explorer/, it has a full set of documentation and a widget explorer that makes finding the widgets easy.

dojox: 

The dojox package is where you can find a little of everything.  I watched Tom Trenka go through dojox and was trying to write down all the things in their – but could only get some of them.

• dfx - Cross browser graphics package.
• charting - Building on the dfx package, dojox has is a set of charts that can all be run natively in the browser.
• off - Actually what is says, provides offline capability to applications.
• ddt - Dojo django Templates, Alex Russell got on stage and showed off the power of the django templates in creating a widget.  It was extremely cool. That is where I got an idea to add the ddt package to the dojoe.Macro capability.  In three lines of code I was able to make dojoe.Macros ddt compatabile.


<dojoe.Macro id="sweet" format="dojox.dtl._Templated">
<dojoe.Place query="#host" blendMode="append">
<div><ul>
{% for item in items %}
<li class="{{ item|length }}">{{ item }}</li>
{% endfor %}
</ul></div>
</dojoe.Place>
</dojoe.Macro>

Now developers can execute macros and format the content with django templates and place it into the DOM anywhere anytime.  dojoe.marcos.sweet.execute({items:["Applet", "Pear", "Carrot"]});

• widgets -My favorite thing in all of dojox may be the dojox.widget.SortList. It is super simple but an extremely cool. What is it? A Single Column Table that is sortable.
• grid - More more complex than the SortList is dojox.grid. Looking to build that enterprise application with tables,tables,tables dojox.grid might be a good choice. The grid component will be moving into the dijit library soon.
• wires - I haven’t got into dojo.wires yet, but my Co-worker (Angel) is big on this. Its a complete MVC framework building ajax applications.
• cometd - “Cometd is a scalable HTTP-based event routing bus that uses a Ajax Push technology pattern known as Comet.” leveraged from the cometd.com
• dojox.data – Lots and Lots of dojo.data implementation for different types of data: Flickr, Picasa, Opml, CSV, Atom, ….

I am sure there are things I missed, but as it was stated during the talk “if you can think it… it may already be in there, if not create it and submit a patch to the dojo trac system.”

utils:

All web applications need to be optimized no matter which library you are using. Dojo has created a not-so-easy but robust way to build highly optimized web applications.  Using the Dojo build system developers can segment their application into multiple JavaScript files that can be lazily loaded through out the lifecycle of thier application.   This will decrease latency of the initial loading, reduce bandwidth requirements and make your end users happy.

A little self promotion – Need to optimize a web application check out jsLex’s Plugins for Eclipse.

I wrote down the build system isn’t easy because it will take a bit of time to get it up and running.  Not sure if the following rules are absolute but they have helped my reduce time getting up and running.

• Use the raw source and not the already packaged distribution. I have run into issues with the packaged files not building cleanly.
• Place the build system in the utils directory at the same level as dijit, dojo, dojox.  This was the one that I ran into over and over.  I kept trying to run the build from an external directory and had a problem every time. Put the utils directory in the right place and Bam! it worked.
• Use the layers capability in the profile files, it will create a much more optimized application.

Community:

One of the things that impressed my at the Dojo Developers Day were all the community members demo.

• ESRI a did a demo of their use of the dojox.gfx package to build some really cool mapping applications.
• A demo of nxExplore a search engine application that uses dojo (I think).
• IBM’s projectzero.org web-based application builder. This was extremely slick. Want to take the power of dojo to the masses this application may be the way.
• dojo.E – I will include the stuff we have been working on – it may not be sexy but it does make things easier for those who like XML and markup. Getting together with other smart people and just listening is always a great idea.  I was able to pick up a lot of useful information and got a couple of cool ideas to boot.
• A cool password Strength widget was demoed
• Mathew Russell author of “Dojo: The Definitive Guide” did several cool demos. The one that caught me eye the most was the “Graph” that used dojox.gfx to create a network topology.
• Angel (Co-worker) – Wasn’t demoed publicly but got lots of “ohs” and “ahs” – his tab control that has the tab buttons sliding left and right instead of wrapping.  It is really sweet.

Things to improve apon:

None of these things are new, just need to balance the good with the bad; the ying with the yang.

• Documentation – It is an issue with all things dojo is working hard in this area and the dojocampus.org.
• Single file package of dojo – This would make is drop dead simple to include dojo into any application.
• Simplification of the build system.  Demos that I saw of a new build system will help greatly in creating custom builds.
• Wordpress like plugin explorer – I have created a couple wordpress plugins and like the way they manage the extensions.  They are easy to find and are consistently packaged.  I think dojo could use something like this to make finding functionality easier.  I know I find my self look for things and not finding them with out a bunch of effort.

I need to get home so I can get up tomorrow and get back to the conference. Thankfully I didn’t have to travel to get to the conference other than the 15mile 1:30 commute.  I would have thought $10 billion for the new road would have cut down on the time.

dojo.bob(Buffone)

• Increased Number of Requests
• Increased Download Size
• Increased JavaScript Code

Upcoming Webinar

On Thursday at 2:00pm myself and Ryan Breen from Gomez and Ajax Performance.com will be giving a free 2 hour webinar covering all things performance. Usually, I do this webinar by myself, so I am excited to get another person on board to give their perspective on Website performance. Ryan will be talking about:

• Survey tools available for performance analysis
• Establish and follow a site optimization workflow
• Explore real world examples of how to improve the end user experience

▪kk

Go to Webex.com and sign up, its free, you can ask questions and we will be handing out information on how you can optimize the performance of your Website / Web application.

Sign up for the Webinar now!

New Release of jsLex

I am never one to just talk about something, if I haven’t put in effort to solve the issue in a repeatable way then I probably wouldn’t talk about it at all. jsLex is a tool I created over a year ago that makes Website Optimization easier for developers build simple.

• jsLex Project Home
• Download Now

I have been getting a lot of good feedback on jsLex, which I have incorporating into the plugins since the release a month ago. jsLex 1.1.1 includes code to automatically build the compressed CSS and JavaScript files. The builder listens for changes to resources and when a dependency changes rebuilds the appropriate CSS or JavaScript files. Click here to read more about the feature and how it works.

Just check the box and jsLex will install the first and only Web Optimization builder for Eclipse that I know about.

Anyone having ideas on how to make it better, send me an email, comment on the Blog or create a topic in jsLex’s Yahoo Group.

I hope everyone joins the Webinar on Thursday and downloads the latest jsLex plugins.

Bob (Buffone)

It is a tough road getting kids who have an interest in software, started in a structured way. Game software offers many of the skills that developers will need in the long run. Products GameMaker, Popfly and even flash give kids a nice tools that keep them interested and allow them to explore software until they are capable using structured languages.

What is your background in game creation? Tools used, years of creating games?

I have used flash for creating games, for a while. Then I switched to a 3D Game creator for a while, I also used GameMaker and have attended computer camps to learn about game creation.

How did you find out about Popfly?

Duh, you told me about it.

What do you look for in tools to create games?

I typically look for tools that have good animations and physics built in.

I know when I try to create games and I stress try. I find it difficult to find the basics? Character animation, physics, scene changes, collision detection, scoring… Let’s go into each of these and see what Popfly can do.

How do you get started using Popfly?

Go http://www.popfly.com and click on the “Create a Game” link. Popfly allows you to create a game based on a template or from scratch. The templates make it easy to build a game without creating all the backgrounds and characters.
Do they have pre-built characters and can you upload your own?

Yes, they have a large selection of pre-made characters, machines, objects, and vehicles. What’s good about this is that they have different people for different types of games you might want to build. Some of the characters have built in movements already connected to the keyboard events. Only thing bad is the character set is a little limited and they are pretty cartoonish. But you can get around this by uploading your own characters.

What pre-built physics do they have built in?

You really have to set up the behaviors for the characteristics to get the

How are screen changes done?

You can choose how the scene will change by using different animations or go directly to the new screen. In order to get the scene to change you apply a behavior to a collision between objects. This is what I did in my “Keyboard Maze” game. When the smiley face hits the object at the end of the maze in the first scene it changes to scene two.

Tell me about collision detection

You can choose the collision edges for objects they can either be a square or a circle. Also you can change the behavior depending on the direction of the collision. There is a button that you can specify that an objects is either solid or not.

What are some of the thing you would like to see improved?

It would be cool if there was more objects that you could use to create your games. More behaviors and presets for ways you can use your characters. Preset for timers or scores. Also a built in character creator for creating your own characters, something like the mii creator would also be cool.

What about scoreboards and player ranking for your games do they provide that?

No, that’s something I would like to see. The ability to create leader boards and player rankings for the games would be really helpful to build a community around my games.

Where can people access your games?

They can go to www.popfly.com and search for search for “Keyboard Maze” which is my most popular game. You can also take the games and embed them easily any html page.

———

Alright Zachary, that’s for help me out with my Blog article for today, great job looking into Popfly, and I look forward to playing your games.

Bob (Buffone)