Programming in the State of 70% Drunkeness

Okay, i have to admit this is the first time i’ve seen a date library. I did do a bit of digging and found out how behind I am on js date libraries. But out of all the ones i found, none of them matched DateJs. The site has a kickass design with a little red Ninja logo holding a sword. I’m not too sure why the Ninja was chosen to represent this library, but what the heck, it looks ass kicking.

The whole idea of DateJS is to translate common date strings into a usable and accurate timestamp. The result is similar to php’s strtotime function following GNU >> Date Input Format syntax but in real time as you type.

A couple tries from Rey Bango at Ajaxian.com

And of course, a couple tries from me trying to break it

After a few tests, it seems like it caps at the number 99. You can do +99 days/years/ect., but as soon as you hit 100, it refuses to calculate. I guess that’s just a small limitation purposely added, shouldn’t be too hard to remove.

One interest thing that I have been wondering about is the string “The Day After Tomorrow”, equally as “+2 days”. Somehow this string has never been taken in consideration (doesn’t work on strtotime in php either :\ )

Share This

Just came across this awesome article by Amy Hoy on web User Experiences. The much talked about User Expirence a lot of times either get overly abused or completely missed out.

What really bother me is that a lot of new sites today lean towards providing cutting edge functionality but misses the usability. What really attracts ppl to the site is not just because how bad ass your Ajax app is and absolutely not how good you can make a page look pretty. What really counts is how user friendly is your site, in another word “User Experience”. Your site doesn’t have to look top notch, as long as it has a good user experience flow, and looks elegant, ppl won’t bounce.

I love the opera example she made. The previous design was just a complete disaster. All the characters they came up with in the flash didn’t help them in any posstive way. When you landed there, all you see is that ugly flash which dis-encourages the user to continue on and click on the download link. That’s a broken user experience right there.

First Experiences Last a Lifetime

Your mother always told you first impressions count, and the same is true of web sites. You don’t get a lot of time to sell yourself to a potential customer who loads your page; most people are lazy, and more importantly, impatient. You have to go the extra mile, because they won’t (and that is the natural and proper order of things). All the research seems to indicate that you have mere seconds to convince a shopper that he or she just has to have what you’re selling (or offering for download), to hook ’em and leave ’em wanting more, but not too much more.

User Experience Basics

We’ll get to the practicum in just a moment but first, let’s talk — very briefly — about some super basic UX tenets:

* Be nice to your users and customers (and potential customers).
* Design as if your main goal is to inform and educate.
* Be honest and forthcoming, while you’re at it.
* Help your users and customers to do what they want, not what you want them to do.
* Be consistent with your message and quality of service (and I’m including software design here, folks).
* Scientific, measurable “usability” doesn’t necessarily make for a good experience.
* Good design makes people feel good.

Share This

I just stumbled upon this great topic on Ajaxian.com.

The cause should be evident to everyone. We’ve taken what was first called LiveScript — a crufty embedding just good enough to validate a form or two — and we’ve abused it into being the foundation for a whole new kind of application platform. The browsers have just not kept up and the situation will only get worse with the accelerated proliferation of Web 2.0 apps.

Okay, he’s using the big buzz word, “Web 2.0″, but the point is pretty clear. We “discovered” (at least that’s what I like to call) Ajax and evloved into the new web era where web applications are no longer just web applications. Web applications, or the web experiences, have been heavily improved with Ajax coming into play. The result? Hybrid. It’s still the good’ol web content that we know about, but with the secret sauce of Ajax, we achieve great user interface interactions where we no longer break a simple request+response with a page refresh. Sounds cool right? But aren’t we moving too fast? The article puts out a great example:

Now I fear history may be repeating itself. Yesterday, I had Firefox 2 for linux crash 5 times, and IE7 for XP crash 7 times. The cause? Too many fat Ajax applications. Zimbra, the whole Google bestiary of applications, Yahoo Mail, etc.. These are all long running applications that I keep open for most of the day. Then all of a sudden the Browser is gone and I have to relaunch and login all over again.

“That ain’t a great example, it’s pretty common now days” you might say. And yes, that’s exactly why this example is great. Remember back in the days when Ajax hadn’t been heavily implemented? The web and your browsers worked almost perfectly and happily. Many of us have been blinded with all the cool new UIs Ajax has brought onto the table (or web page to be exact).

Ultimately, one of the most important piece for the web today is the in fact the browser itself. Without the browser, Ajax won’t even be here, with crappy browsers, Ajax application will never truely shine. Clearly, the applications have made far ahead of the browsers where it requires far more powerful support from the browsers. It’s like running World of Warcraft on a Pentiumn III computer with 128MB of ram (i highly recommend you don’t run that). Now there is one distinct difference between a desktop application running on an old machine and running a heavy Ajax application on the latest version of the browser. The truth is our machine doesn’t suck and if the Ajax application was written as a desktop application, I gurantee you it would run just fine. If you just happen to run into a browser crash, before you restart your machine, do a process list check and see what’s crashing it. Most of the time you will see your favorite browser hogging up almost 100% of your CPU (even you have a core 2 duo) and a crap load of memory. Think about it, how much memory can a freaking web application really use? Or let me rephrase that, how much resource *should* a freaking web application really use by the definition of the browser?

TIME TO CATCH UP, BROWSERS! YOU ARE NOW THE TURTLE, AND THE APPLICATION IS THE RABBIT!

Share This

Webkit just annonced that they are working on media tag support based on the HTML5 draft. It is currently implemented on Mac build and is based on the support of Quicktime.

Another nice feature from the HTML5 draft specification is now available in the WebKit nightly builds for Mac OS X. The new HTML5

Adding a video can be as simple as:

<video src=sample.mov autoplay></video>

What’s really exciting is the video playback control can be accessed directly by javascript.

<script>
function playPause() {
var myVideo = document.getElementsByTagName(’video’)[0];
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
</script>
<input type=button onclick=”playPause()” value=”Play/Pause”>

And also the controls can be tied into regular events:

myVideo.addEventListener(’ended’, function () {
alert(’video playback finished’)
} );

To play audio from JavaScript you can simply do this:

var audio = new Audio(”song.mp3″);
audio.play();

This is a huge improvement and definitely going the right direction. Now the question is when will it be released and is it going to be available on other browsers?

Now it’s getting me really excited about the up coming HTML 5.

Another question is, since this built is based on the support of QuickTimes, I’m assuming IE if it will support the same tags it will be based on WindowsMedia Player, but what about Firefox?

Share This

Remember the AIR beta post i wrote earlier? I mentioned about an AIR application that interacts as a Wordpress client. I guess my idea was old already.

AirPress, a AIR Beta 2 based Wordpress client was introduced 09/2007. Thanks to Dragos who left me the comment. Apparently I couldn’t find out the name of the author quickly (since i’m writting this as i’m at work).
On Oct. 16th, 0.31 was released.

I finally found some time to update AIRPress. The new version fixes some bugs and adds new features :

* Compatible with Adobe AIR beta 2
* Edit posts (!)
* Edit HTML of posts
* Ability to use special characters (especially for french and spanish)
* Automatic update when a new version will be released
* Fix for many minor bugs…

Let me know about any bug you notice. I am now working on a more sophisticated version. Stay tuned!

The application is still in its early development stage, but with a lot of nice features already built. Here’s a brief review of mine:

1. Really nice interface. I love the fact that the application resizes itself as you jump from one section to other
2. a simple WYSIWYG is in place. It works really well. The “HTML” section is pretty cool, but all the codes are stuck on one line which makes it difficult to edit
3. nice “fish eye” effect on inserting rich media
4. you can insert “images”, “sound”, “video”, and “Web Cam”. woooooo, “Web Cam”. I’m not 100% sure how that one works since i don’t have one at work, but i’ll give it try when i get home. I think it records a video using flash and then post it.
5. I love how inserting an image is sooooooo easy and smooth. It let’s you select an image out of your computer first, and then takes you through a simple dialog that let’s you select width, height. Once you are done, it automatically places the image into your post at the cursor point.
6. listing of the existing post is ok. It uses the standard flex grid for displaying and the support of international charcters is still not too great (at least the japanese characters i have for Haruhi is not showing correctly)

So far, no words yet on what technology was used to create this application. yes, i know it is AIR, but i’m talking about the scripting. By looking at the Grid and WYSIWYG, I’m guessing it is done in Flex.

Share This

OMG… I can’t believe it. I still can’t believe it.

First of all, congratulation to John the first author of jQuery and still the leader of the project. Although I haven’t found any articles regarding why the Google Code team chose jQuery, but here’s a pretty eduacated guess of mine based on this quote by DeWitt Clinton:

One of the most exciting things about the redesign is that everything you see here was built using technology and APIs that are available to everyone. The pages we’re serving don’t rely on any secret back-end tricks; the site is built on plain HTML, JavaScript and CSS, each using our public APIs. In fact, all of the techniques used on Google Code can be duplicated on your own site.

They are here to prove that you don’t need to have the full blown GWT to put together all these great APIs. It can work with the technology we are used to.

For those of you don’t belive that jQuery is used, got to http://code.google.com and do a view source. You will see the magical “jquery.js”

Full Story

http://google-code-updates.blogspot.com/2007/11/my-how-weve-grown.html

Official jQuery Team’s comment

Ajaxian Post

http://ajaxian.com/archives/google-code-revamps-with-jquery

Screen Cast

Google Code Revamp from Dion Almaer on Vimeo.

Share This

Gmail’s dev team has just recently rewritten most part of the core javascripts for Gmail and was released to the public right away.

http://gmailblog.blogspot.com/2007/10/code-changes-to-prepare-gmail-for.html

So recently the Gmail team has been working on a structural code change that we’ll be rolling out to Firefox 2 and IE 7 users over the coming weeks (with other browsers to follow). You won’t notice too many differences to start with, but we’re using a new model that enables us to iterate faster and share components (we now use the same rich text editor as Groups and Page Creator, and the Contact Manager can be seen in several Google apps). A few other things you will notice are some new keyboard shortcuts and the ability to bookmark specific messages and email searches.

The outcome is great and some of the stuff that they did really inspires me (should be to all developers out there)

This should go on to every developer’s best practices list:

We have also been fanatical about speed. Even on a fast Internet connection, it can take a second to request and render a new web page, and when you read a lot of mail, these seconds can accumulate to hours waiting for email to load. We’ve spent a lot of time profiling all parts of the application, shaving milliseconds off wherever we can, and figuring out workarounds for some pretty deep-rooted issues with the current browser implementations. Some of the most common actions should be faster now.

Aaron Boodman of Greasemonkey and Gears fame also wrote:

At Google, we dogfood all our products. That means, among other things, that we use Gmail all day for all our internal mail. I don’t know of any other company producing web mail that can claim that. It also means that we have really high standards for these products. 500ms latency is usually considered great for a web application, but for something you use all day, it just won’t cut it. Because of this, the Gmail team has been to hell and back several times over the course of this project, trying to shave milliseconds off frequent operations.

Personally, i’ve heard from more than one person complaining about how Gmail’s loading speed is getting worse and worse. To me, it was a nightmare if Gmail was left on for a long time and you come back to it, it was just SLOW. I noticed the facelift before i found this article on Ajaxian.com. How I realized was actually through Firebug. Here’s a screenshot.

Checkout the “FIX”

Firebug can make Gmail slow

If you’re using Windows or Linux

For the best Gmail performance, we suggest disabling Firebug for www.google.com by following these steps:

1. Click the green or red icon in the bottom right corner of the browser window to open Firebug.
2. Click the bug icon in the top left corner of Firebug and select ‘Disable Firebug for mail.google.com.’

If you’d like to keep Firebug running, you may improve Gmail performance by following these steps:

1. Click the green or red icon in the bottom right corner of the browser window to open Firebug.
2. Click the Console tab.
3. Select Options.
4. Uncheck Show XMLHttpRequests.
5. Click the Net tab.
6. Select Options.
7. Check Disable Network Monitoring.

If you’re using a Mac

Please note that if you’re using a Mac, you’ll continue to experience performance problems unless you disable Firebug for Gmail. To disable Firebug for www.google.com, please follow the steps below:

1. Click the green or red icon in the bottom right corner of the browser window to open Firebug.
2. Click the bug icon in the top left corner of Firebug and select ‘Disable Firebug for mail.google.com.’

If disabling Firebug for Gmail doesn’t improve performance results, you may have to entirely disable Firebug.

Share This