Coding with Jesse

Google is Hosting Ajax Libraries

You may have heard that Google is hosting a number of Ajax APIs, including jQuery, prototype, script.aculo.us, MooTools and dojo.

Ajaxian actually has a good write-up of the benefits of this hosting. Long story short: Google's servers do caching and gzip compression as good or better than most of us know how to do, plus their web hosting is collocated and fast. On top of that, if we all were to get our sites to use the copy of jQuery on Google, our users will be more likely to have it cached before they ever visit our site.

To get started with jQuery 1.2.6, for example, you could just use this script tag:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

For other libraries and library loading techniques, check out the documentation.

All of this is really great, and I plan on using it on production sites in the future.. but can you spot the security hole this creates? How hard would it be for some disgruntled employee of Google to slip a few lines of evil JavaScript onto thousands (millions?) of web pages? Thankfully, Google's reputation is on the line as well, and I surely trust them to protect that!

Published on June 2nd, 2008. © Jesse Skinner

IBM: Where and when to use Ajax

My second IBM developerWorks article is now online: Where and when to use Ajax in your applications.

It's not a very technical article, so you can read it even if you've never programmed before. I talk about the benefits of using Ajax, and point out some problem areas that need special attention so that Ajax doesn't end up ruining your web site. It's essentially a summary of my Unobtrusive Ajax book.

The article was fun to write and I hope you enjoy reading it!

Published on February 6th, 2008. © Jesse Skinner

Drag and Drop on QuirksMode

Peter-Paul Koch has put together yet another masterful overview, this time covering Drag and drop, something that has been on my to-do list for over a year. His script even works with just the keyboard! Not only does he offer a great Drag-and-drop script, he explains how it was written so you can better understand how Drag-and-drop works in JavaScript (and take it apart or put it together yourself).

Published on July 1st, 2007. © Jesse Skinner

Adding Style Blocks Using JavaScript

Who’s Got Style? - Nicholas C. Zakas writes a good analysis of dynamically creating and attaching <style> elements to a page using JavaScript. He ends up with a function that works in Internet Explorer, Firefox, Opera and Safari.

Published on June 7th, 2007. © Jesse Skinner

YUDOmagic - Share and Learn Magic Tricks

Announcing YUDOmagic, a new site where you can watch, upload and share magic videos. You can watch all the magic performances for free, and you can get access to watch tutorial videos and learn how to do the magic tricks yourself just by sharing a magic video of your own. There is also a free magic forum so you can discuss magic and magic performances with fellow magicians and magic aficionados.

This was one of the first sites I built using Ruby on Rails, the one I alluded to when talking about Switching from PHP to Ruby on Rails and Vanilla on Rails: The Coexistence of PHP and Ruby.

If you're interested in magic, or if you just want to see what I've been up to, go check out YUDOmagic and have some fun.

Published on March 25th, 2007. © Jesse Skinner

FlickrCash

I've been really busy lately working on one of the coolest projects I've worked on: FlickrCash. It's built entirely using Ajax and JavaScript, specifically jQuery.

FlickrCash searches for photos on Flickr in the most efficient way, so that you can see as many thumbnails as will fit in your browser. It loads up to 10 pages in the background, so it's very fast to browse through to find the photo you need.

It's got some cool features, like a preview that pops up when you click a thumbnail, listing all the sizes that are available for that photo. If you sign up and create an account (for free), you can save your search results, and put together a "shareable lightbox" of photos with a secret URL. This way you can search for some photos and share them with your clients in order to get their feedback. For example, check out my Sunset Lightbox. This makes it really easy to use Flickr to find stock photography, whether for your print projects, blog posts, presentations, or just for fun.

Before I even had a chance to blog about FlickrCash, Lifehacker beat me to it. There's also a Youtube video you can check out that demos all the features I mentioned and more:

Published on March 9th, 2007. © Jesse Skinner

WikiMapia: Easiest Google Maps Ever

If you want to put a map on your web site using Google Maps, the easiest way to do that is by going to WikiMapia, finding the place you want, then going to the menu and selected "Map on your page". You'll be presented with a box that lets you pick the size and exact starting location of your map, and you'll be given a very simple HTML snippet (an iframe) you can put anywhere.

For example, I found my home in Berlin and was given the following snippet:

<iframe src=http://wikimapia.org/s/#y=52506879&x=13318394&z=19&l=0&m=a width=400 height=208 frameborder=0></iframe>

I had to change the HTML to XHTML myself by adding quotes around the attribute values and escaping the ampersands in the URL:

<iframe src="http://wikimapia.org/s/#y=52506879&amp;x=13318394&amp;z=19&amp;l=0&amp;m=a" width="400" height="208" frameborder="0"></iframe>

Unfortunately, iframe is deprecated in XHTML Strict, so this would make my page invalid. The way to embed a frame on a page in XHTML Strict is to use an object tag instead like so:

<object type="text/html" data="http://wikimapia.org/s/#y=52506879&amp;x=13318394&amp;z=19&amp;l=0&amp;m=a" width="400" height="208" style="border:0"></object>

It seems WikiMapia doesn't support the object tag when used with Internet Explorer. Well, as long as you're not using IE, you can see where I live in Berlin! The rest of you can click here instead.

Published on August 18th, 2006. © Jesse Skinner

JavaScript Games

I've come across two JavaScript games in the past couple of days that have really impressed me:

  1. Lemmings! Seriously, it's nearly identical to the original lemmings game. It can run a bit slow but otherwise it's really impressive (via jim)
  2. A 3D Dungeon game from brothercake. This is a really cool usage of CSS border polygons and JavaScript to make a 3D world.

Just a few fun examples to demonstrate the potential of JavaScript and CSS beyond Ajax, drag-and-drop and yellow-fade techniques - though of course nothing beats Buzzword Hellfire ;). Anyone have any more?

Published on August 10th, 2006. © Jesse Skinner

Cleaner Callbacks with Closures

Dan Webb at The Web's Bollocks has posted a great article, Cleaner Callbacks With Partial Application. It describes ways to use JavaScript closures to keep your code cleaner and more reusable, especially when creating XMLHTTPRequest callbacks. If you understand the basics of closures but want to see some practical applications, go check it out.

If you're new to closures or have been struggling to understand how they work, I recommend reading Mark Wubben's introduction, Getting Funky With Scopes and Closures. For a more detailed and thorough analysis, be sure to read Richard Cornford's JavaScript Closures.

Published on June 13rd, 2006. © Jesse Skinner

ppk on JavaScript

I just wanted to give a quick congratulations to Peter-Paul Koch of QuirksBlog. He just finished a JavaScript book, ppk on JavaScript. Way to go! If you're interested in learning more about JavaScript, or, as ppk said,

if you want to congratulate me, buy the book.

Update: You can pre-order the book at Amazon.

Published on June 2nd, 2006. © Jesse Skinner

Faster than you thought

Seth Godin gives another example of the Internet leveling the playing field. This time it's a girl named Emily finding success selling her artwork online. Seth says:

[This] should be proof to you that the whole thing is raveling (which means the same as unraveling, in case you were curious). That all the systems that kept all the processes in place and leveraged mature industries and experienced players are slowly (or quickly) filtering to the masses. Faster than you thought it would happen.

Just the other day, I saw on the CBC National a piece about a Canadian comedian, Russell Peters, who struggled to find an audience. Thanks to Google Video, his popularity has had an enormous boost. When asked about the effect of the Internet, he just said something like "that Internet thing.. I don't understand it but.. it's crazy."

Indeed, the Internet is already a place where individuals can reach wide markets and find success on their own, without the need for traditional media, Hollywood, television producers or other people in suits. The old system was great at producing one-hit-wonders that everyone liked and nobody loved. Now, there is room for everyone to find their own market, their own audience, their own place in the world.

Published on June 2nd, 2006. © Jesse Skinner

JavaScript 2 and The Future Of The Web

I just tripped across a slideshow from a talk by Mozilla's Brendan Eich at XTech 2006 titled JavaScript 2 and the Future Of The Web. Yes, I found it when I was ego searching. Regardless, it's a great talk outlining the future of JavaScript and all the new, great changes we can expect to see come out over the next two years.

I'm curious to see how quickly JavaScript 2 will be adopted by the other browsers, and how quickly web developers will start using it. I'm a bit worried that the web will be 'broken' while we wait for people to upgrade their browsers. Apparently there will be offline tools to convert JavaScript 2 code to work in older browsers. Still, I'm not looking forward to an era of having to test things across an even wider range of browsers.

The new syntax will allow for Object-Oriented coding, closures, iterators and generators to be a lot cleaner and easier, but there's nothing that isn't possible in the current JavaScript using different syntax. Even though I'm looking forward to using this new syntax, I think I'll stick with using the current state of JavaScript for the next few years even if it makes my code a bit longer and messier.

Published on May 27th, 2006. © Jesse Skinner

Lend money to make money

There is a new online peer-to-peer loan concept that is growing, and I think it's a great idea. (Via slashdot). Two new companies, Prosper and Zopa, are allowing people to ask the public to lend them money. Anyone can bid on lending the money, stating their own interest rate. Whoever offers the lowest interest rate gets to lend the money (and make the interest).

The result? A pure capitalist financial system that doesn't involve banks. Anyone can get a loan, and anyone can make money by lending money. Everyone benefits.

This also reminds me of Kiva, a web site that lets people lend money to those in developing countries. I think this is a great alternative to just donating money since it helps build up the economy in these countries. It's very cool to see the idea being extended to the rest of the world.

Update: Only people in the US can use Prosper, and only people in the UK can use Zopa. I hope they (or others) make this available to the rest of us (specifically, Canadians living in Germany)!

Published on May 17th, 2006. © Jesse Skinner

Flip Cancer The Bird

There is a new charity drive web site Flip Cancer The Bird that will donate $0.50 for each picture sent in. The catch: the picture must have you giving the finger to Cancer.

I think this is a fun idea. I'll have to send in my photo next. :)

Published on April 30th, 2006. © Jesse Skinner