Archive for June, 2006

is Spry the way to go?

Framework this, framework that. RoR or CakePHP? bah, what about somthing else? Well Adobe Labs has introduced the Spry Framework for Ajax prerelease 1.1. And their demos look pretty good.

Photo Gallery
Photo Gallery
Product Table
Product Table
RSS Reader
RSS Reader
The release addresses issues reported by testers since Spry first came out. You can find the change log here, the overview here, and find the download here.

Even though Spry’s UI effects make it quite attractive for my playful and easily distracted side. I wonder how it would hold up with my use of XHTML return data instead the clientside XML parsing that i talked about in this previous post.

true asynchronous requests and ‘anti-patterns’

I caught a post on ajaxian today talking about ajax 'anti-patterns', and the term caught my eye. Apparently Ed Burnette has coined the term referring to anti-patterns as things to watch out for while developing your ajax app. Chris Cornutt from ajaxian summed it up with this short list.

  • Chatty communication - lots of “chatterâ€? back and forth between the server
  • Too much XML parsing - libraries to parse XML in the browser are still relatively slow
  • Loading everything before displaying something - don’t make the user wait if things are slow. give them something.
  • Rendering on the server - make good decisions as to where to render various page content
  • Over thinking the design - don’t use the old mentality of just a few releases, update often and in bits

This got me thinking, as am currently in the redevelopment of my site, and most importantly my portfolio, I have deliberately avoided having my serverside pass XML back to the client, and have instead opted to use formatted XHTML. I had been thinking that this was a copout and that I should in my next build deploy a much more extensible Javascript based XML parser for my list of thumbnails and subsequent portfolio item data. I mean, using XML means that I can free my server up and pass less complex data back to the client right? Well yes and no.

Currently I'm hosted with mediatemple. The renound hosting company for design geeks everywhere. And if I remember correctly, they have pretty decent servers, with decent processing power that I actually give them money every month to be able to use. Additionally, my 'lowest common denominator' testing machine here is a 6-7 year old 700mhz P3. Not so much of a powerhouse, and since it's been beaten to hell over the years, it's not the processing powerhouse that it once was back at the end of the last decade. So if somthing is going to perform badly, my trusty P3 will catch it and let me know. This is where we get to the issue of clientside XML parsing, forthought, and extensibility.

If you're anywhere on my site other than in the portfolio itself, the sidebar nav's casestudies links are generated with a simple mySQL query, and a loop in PHP that builds a link that looks like this.

HTML:
  1. http://www.naterkane.com/portfolio.php?casestudy=1&id=231

It basically tells the page to say, hey, we want to show a particular project off the bat, so instead of just calling the function to load up the project thumbnails, lets also specify a particular project, and load it up too, with the related case study data instead of just the basic project description text.

In order to do that I had to make sure that my xmlHttpRequests didn't step on each other's toes. So I instead of specifying a global request/response object, I kept it inside of each method, and used a constructor that created a local object instead.

JavaScript:
  1. function xhrCreate(type){
  2.     var xhr;
  3.     if (!type) {
  4.         type = 'text';
  5.     }
  6.     if (window.ActiveXObject) {
  7.         try {
  8.             xhr = new ActiveXObject("Msxml2.XMLHTTP");
  9.         } catch (e) {
  10.             try {
  11.                 xhr = new ActiveXObject("Microsoft.XMLHTTP");
  12.             } catch (e) {}
  13.         }
  14.     } else if (window.XMLHttpRequest) {
  15.         xhr = new XMLHttpRequest();
  16.         if (xhr.overrideMimeType) {
  17.             xhr.overrideMimeType('text/' + type);
  18.         }
  19.     }
  20. return (xhr);
  21. }
  22.  
  23. function getPortfolio(role) {
  24.     var xhrPortfolio = xhrCreate('html');
  25.     var portfolio = document.getElementById("portfolio");
  26.     var url = "includes/getPortfolio.php?role=" + role;
  27.     url +='&t=' + new Date().getTime();
  28.     portfolio.innerHTML = '<img src="http://www.naterkane.com/blog/images/loading.gif" />';
  29.     xhrPortfolio.open("GET", url , true);
  30.     xhrPortfolio.onreadystatechange = function() {
  31.         if (xhrPortfolio.readyState == 4 && xhrPortfolio.status == 200) {
  32.             portfolio.innerHTML = xhrPortfolio.responseText;
  33.             xhrPortfolio = null;
  34.         } else if (xhrPortfolio.readyState == 4 && xhrPortfolio.status == 404) {
  35.             portfolio.innerHTML = xhrPortfolio.statusText;
  36.             xhrPortfolio = null;
  37.         }
  38.     }
  39.     xhrPortfolio.send(null);
  40. }
  41.  
  42. function getPortfolioDetail(id,casestudy) {
  43.     var xhrPortfolioDetail = xhrCreate('html');
  44.     var portfolioDetail = document.getElementById("portfolioDetail");
  45.     var url = "includes/getPortfolioDetail.php?id=" + id;
  46.     url +='&t=' + new Date().getTime();
  47.     if (casestudy){
  48.         url += "&casestudy=1";
  49.     }
  50.     portfolioDetail.innerHTML = '<img src="http://www.naterkane.com/blog/images/loading.gif" />';
  51.     xhrPortfolioDetail.open("GET", url , true);
  52.     xhrPortfolioDetail.onreadystatechange = function() {
  53.         if (xhrPortfolioDetail.readyState == 4 && xhrPortfolioDetail.status == 200) {
  54.             portfolioDetail.innerHTML = xhrPortfolioDetail.responseText;
  55.             xhrPortfolioDetail = null;
  56.         } else if (xhrPortfolioDetail.readyState == 4 && xhrPortfolioDetail.status == 404) {
  57.             portfolioDetail.innerHTML = xhrPortfolioDetail.statusText;
  58.             xhrPortfolioDetail = null;
  59.         }
  60.     }
  61.     xhrPortfolioDetail.send(null);
  62. }

Ok so now I'm sending two requests at the same time, they're not colliding and everything is peachy.

The

Obj.responseText

in both methods employ AHAH (preformatted XHTML), with calls to other javascript function, and other complex data that I don't care to distribute to anyone else. So why am I not parsing it on the client side? I'd rather have the PHP do the work for me once, instead of having my PHP first have to parse the data into XML, and then use Javascript to reparse it again into somthing that the browser can display as I intend. Which would further slow down the response time of the call.

So am I right or wrong in my approach to returning data this way? I'm still not sure, but at least I know that I'm not burdening my client with additional duties.

reworking the way you read this

Since writing my own blog software is somthing that I can file under "been there/done that" I've decided that I want to do things a new way, just for fun. Today I started to write a little app that pulls my full blog off of myspace, parses it and delivers it through my personal site instead of relying on the bullshit truncated rss feed that myspace wants me to use. Why am I am doing this you ask? Because it's stupid, and I like making work for myself. Besides, what's a little regex amongst friends? (more...)

justcurio.us

justcurio.us is an anonymous question and answer system, open to anyone, with one simple rule: to ask a question, you must first answer someone else's question. Question yields answer yields question. Strangers helping strangers.

this is my question

Portfolio Update

that's right, i finally got around to updating my portfolio. everything is semi organized, at least alot more so than it was before and a bit ajaxy as well. organized by year, and sortable by what role i played in the project. a few projects have case studies, and a few others have really crappy screenshots that are either 6 years old, or were pulled from the nice folks over at archive.org. as i'm looking for work right now, you should be able to see some new features popping up over the next few days/weeks.


Nater Kane naterkane personal http://www.naterkane.com LinkedIn Profile Web Technologist personal nater@naterkane.com 1978-09-12 voice 845.234.6698 | fax 707.922.0593
964 Flushing Ave. Brooklyn, NY 11206