Blogs

JavaScript Jobs Site

Tagged:  

John Resig has just created JavaScript Ninja Jobs, a site dedicated to JavaScript Jobs. Currently, it's free to post and to apply for jobs on the site.

Some example jobs include:

  • Ajax Developer
  • User Experience Developer
  • Senior-level Web Developer
  • jQuery Plugin Developer
  • Rails Developer
  • Front-End Software Engineer

Check out these and other jobs at jobs.jsninja.com

There's also a Jobs RSS feed to keep you updated on the newest job postings.

The New Alexa Rankings

Tagged:  

If you haven't noticed, Alexa has changed their rankings. The site that attempts to put a ranking on all sites on the internet now takes data from more sources in an attempt to give more accurate ratings.

Below is an excerpt from the Alexa blog.

When Alexa began displaying rankings in 1998 it was with the goal of showing Alexa Toolbar users how popular any given site was within the Alexa community. We generated the rankings through an analysis of Internet usage by people who use the Alexa Toolbar. Since that time we've been delighted to see that the Alexa Rankings have become a yardstick by which website popularity is measured. We are grateful to the thousands of people who come to Alexa.com each day to check the Alexa Rankings.

In recent months we've heard from our Alexa users that understanding Internet usage beyond Alexa Toolbar users was increasingly of interest. Ask and you shall receive!

We listened to your suggestions, and we believe that our new rankings system is much closer to what you asked for. We now aggregate data from multiple sources to give you a better indication of website popularity among the entire population of Internet users.

You can read the full post here.

The change is very interesting especially if you look at tech websites. Many technology blogs have gone down by as much as 300,000 from what they where before the change. This change is an interesting one and a good one if the numbers are more accurate as to how much of the actual internet population are viewing a site. If you have any thoughts on the new Alexa rankings then I would love to hear them.

Reading binary files using Ajax

Tagged:  

Over at Nagoon97’s Weblog they have an interesting post on reading a binary file in JavaScript. The post explains how the code was taken from another post and a comment that made the code work cross browser. With the trend of Ajax development going toward moving as much to the client as is prudent it is good to have a method for reading binary files should the use ever arise.

Below is an excerpt from the post.

So I put them all together in this BinFileReader function, which provides cross-browser support and helper methods to easily access the binary contents.

 

* BinFileReader: http://www.heypage.com/nagoon97/BinFileReader/BinFileReader.js

getFileSize() Return the file size
getFilePointer() Return the reading position
movePointerTo(iTo) Move the reading position to iTo.
movePointer(iDirection) Move the reading position in iDirection.
For all the following read functions,

- The reading position will move to the end of where the content is last read

- When iFrom is ommited, current reading position is used
readNumber(iNumBytes, iFrom) Read and return iNumBytes-byte number starting at iFrom.
readString(iNumChars, iFrom) Read and return iNumChars characters starting at iFrom.
readUnicodeString(iNumChars, iFrom) Read and return iNumChars unicoded characters starting at iFrom.

 

* Example:

var bmpFile = new BinFileReader(”image.bmp”);

bmpFile.movePointerTo(18);

var width = bmpFile.readNumber(4);

var height = bmpFile.readNumber(4);

 

* Demo:

http://www.heypage.com/nagoon97/BinFileReader/BinFileReader_demo.html

http://www.heypage.com/nagoon97/BinFileReader/MosaicBuilder_demo.html

You can read the full post here.

This script could be used to make some interesting applications, now if we could only write binary files to the system (I know that there would be a huge security hurdle to get pass). If you use this script then I would love to hear about your experience with it (as usual you can leave it in the comments or write a blog post about it using your free Ajaxonomy account).

Streaming Server Side Proxy in .NET

If you want to get XML data from a different domain you will need to use a server side proxy. While you could use JSON to get around this there are times when a JSON feed may not be available and a proxy must be used.

In the past I have written posts about creating such a proxy, however all of the example code was is PHP. Well, if you are a .NET developer then you are in luck, because the CodeProject has posted a tutorial on creating a Server Side Proxy in .NET.

Below is an excerpt from the post.

A Basic Proxy Such a content proxy is also available in my open source Ajax Web Portal Dropthings.com. You can see from its code from CodePlex how such a proxy is implemented. The following is a very simple synchronous, non-streaming, blocking Proxy:

[WebMethod]
[ScriptMethod(UseHttpGet=true)]

public string GetString(string url)
{
        using (WebClient client = new WebClient())
        {
            string response = client.DownloadString(url);
            return response;
        }
    }
}   
 

Although it shows the general principle, but it's no where close to a real proxy because:

  • It's a synchronous proxy and thus not scalable. Every call to this
    web method causes the ASP.NET thread to wait until the call to the
    external URL completes.
  • It's non streaming. It first downloads the entire
    content on the server, storing it in a string and then uploading that
    entire content to the browser. If you pass MSDN feed URL,
    it will download that gigantic 220 KB RSS XML on the server and store
    it on a 220 KB long string (actually double the size as .NET strings
    are all Unicode string) and then write 220 KB to ASP.NET Response
    buffer, consuming another 220 KB UTF8 byte array in memory. Then that
    220 KB will be passed to IIS in chunks so that it can transmit it to
    the browser.
  • It does not produce proper response header to cache the response on the server. Nor does it deliver important headers like Content-Type from the source.
  • If external URL is providing gzipped content, it decompresses
    the content into a string representation and thus wastes server memory.
  • It does not cache the content on the server. So, repeated
    call to the same external URL within the same second or minute will
    download content from the external URL and thus waste bandwidth on your
    server.

So, we need an asynchronous streaming proxy that transmits
the content to the browser while it downloads from the external domain
server. So, it will download bytes from external URL in small chunks
and immediately transmit that to the browser. As a result, browser will
see a continuous transmission of bytes right after calling the web
service. There will be no delay while the content is fully downloaded
on the server.

You can read the full tutorial here.

This post not only shows you haw to make a basic server side proxy, but also shows you how to make it streaming. If you are a .NET developer looking to make a server side proxy, I recommend this post.

FirePHP - The Firebug Extension for PHP

Tagged:  

If you have been doing any Ajax development using PHP on the server side you are probably already using Firebug to find JavaScript errors. Wouldn't it be nice if you could also capture the server side PHP in the Firebug? Well, FirePHP makes it possible to do just that.

FirePHP acts as a logger and below is a code sample of how you would write to the log.

<?php

require('fb.php')

/* NOTE: You must have Output Buffering enabled via
         ob_start() or output_buffering ini directive. */

fb('Hello World'); /* Defaults to FB_LOG */

fb('Log message'  ,FB_LOG);
fb('Info message' ,FB_INFO);
fb('Warn message' ,FB_WARN);
fb('Error message',FB_ERROR);

fb('Message with label','Label',FB_LOG);

fb(array('key1'=>'val1',
         'key2'=>array(array('v1','v2'),'v3')),
   'TestArray',FB_LOG);

function test($Arg1) {
  throw new Exception('Test Exception');
}
try {
  test(array('Hello'=>'World'));
} catch(Exception $e) {
  /* Log exception including stack trace & variables */
  fb($e);
}

/* Will show only in "Server" tab for the request */
fb(apache_request_headers(),'RequestHeaders',FB_DUMP);

?> 

The key to using FirePHP is the use of the fb function which is available once you reference the fb.php file. In the function you pass in whatever you want to display and you can pass in variables that allow Firebug to capture the message as warnings, errors or logs. If you just want to log some information you would pass in FB_LOG or you can pass in FB_INFO for Firebug to display a message as info. If you pass in FB_WARN Firebug will treat it as a warning or if you pass in FB_ERROR it will treat it as an error.

You can read more about FirePHP and download the extension here.

I know I'm going to start really using this as it will help with development of many of the applications that we are working on for our Ajaxonomy Labs section. If you use FirePHP, I would love to hear your thoughts about it.

15+ Free, powerful and easy to integrate Flash image gallery

Tagged:  

If you have designed any cool web sites or applications that displays many images you may have been looking for some good image galleries. Well, over at NTT.CC the have put together a good list of 15 free flash image galleries.

Below is an excerpt from the post.

Following are some free but powerful flash image gallery which I collected. Hope you will enjoy it and share with your  friends.Note: listed in no particular order.

No.1 dfGallery

As stated on many other articles on this site, dfGallery is one of the coolest Galleries currently on the Web.It is a Flash Gallery to support both Flickr , Picasa , Fotki, Photobucket and Custom Images, enable / Disable “Print Screen” ( requested by Photographers ), liquid Layout - Fits to any size you specify, and free, etc.

dfgallery

No.2 Photo Viewer

The Photo Viewer uses both Flash and XML. All data is stored within an XML file making it easy to make modifications and update.

photoviewer

No.3 Flash Photo Gallery

Flash Gallery is a FREE, simple photo gallery built in Macromedia Flash 2004, that uses XML files to store the information about which images to display. The gallery is easy to configure and update since you need to change only the XML file.

flashgallery

No.4 SimpleViewer

SimpleViewer is a free, customizable Flash image viewing application.

simpleviewer 

No.5 Flash Photo Stack Gallery

Flash Photo Stack is a simple Flash template that enables you to click through a stack of your favourite photographs.

stack

No.6 AutoViewer

AutoViewer is a free, customizable Flash image viewer. AutoViewer is designed to display a linear sequence of images and captions.

autoviewer

No.7 Flash Page Flip Photo Gallery template for Picasa

This template is based on the free version of the FlashPageFlip flash engine on www.flashpageflip.com. It lacks the advanced functions of the commercial versions but still makes a very nice photo album on your website. You can see and hear the pages flip.

pageflip

No.8 TiltViewer

TiltViewer is a free, customizable 3D Flash image viewing application.

3dstage

You can read the full post here.

I hadn't seen many of these galleries before and it is always good to have more interesting ways to present image galleries. Because these are Flash based galleries they are able to have some more interesting effects than a JavaScript based gallery. If you have used any of these galleries or know of any other good galleries, I would love to hear about them (as usual you can leave them in the comments or write a blog post about them using your free Ajaxonomy account).

25 Web 2.0 Generators

So, you're just finishing the next great Web 2.0 app, but you still need a badge or logo for the application. Well, WebTracker.com has put together a list of 25 great tools to make your Web 2.0 fully Web 2.0. The list has everything from button makers to Web 2.0 domain name suggesters.

Below is an excerpt from the list.

Domain

  • MakeWords - MakeWords is a domain name generator that creates random words that you either supply or you don’t. It lets you know what domain name is available.
  • NameBoy - NameBoy creates domain names based on a word that you want in your domain. It then tells you what domain is available.
  • Dot-o-mator - Dot-o-mator is a web 2.0 domain name generator that allows you to select words and then have it combine them to form a domain name.

Favicon

  • Favicon Generator - Favicon Generator takes an image that you upload and makes it into a favicon.
  • Favicon.cc - Favicon.cc allows you to create a favicon icon online without having to upload any file.
  • Favicon Editor - FaviconEditor allows you to upload a photo or you can create a favicon.

Gradients

  • Gradient Maker - Gradient Maker allows you to generate a gradient of 3 types, with instant previewing so you get exactly what you had in mind.
  • Gradient Texture Generator - Gradient Texture Generator allows you to create up to 4 different types of gradients with any colors that you want.
  • Online Gradient Image Maker and Button Generator - This generator is the most in depth I’ve seen it has so many different options. It is a must see for any one.

You can see the full list here.

This list has some cool tools that are very useful if you are looking to make your application look fully Web 2.0, especially if you are not very artistic. If you have used any of the tools on the list I would love to hear your comments on them (as always you can leave them in the comments).

Wishlist for a great Ajax API

Tagged:  

Over at Wait till I come! they have written a good post about a wishlist for a great Ajax API. The list is very interesting and if you are writing an Ajax API, then this is a good post to read.

Below is an excerpt from the post.

Designing a great Ajax API

As an example I will use the recently released Google translation API, point out its good parts and list things I consider missing. I will not go into the part of actually writing the API but instead explain why I consider the missing parts important. This is not an attack towards Google, I just really liked working with this API and wanted to have it a bit easier to use, so no hard feelings, I really take off my hat that you offer an API like that!

Here are the points I consider important when we’re talking about Ajax APIs in JavaScript (Ajax implies that but you’d be surprised how often a REST API is advertised as Ajax):

  • Good documentation
  • Usage examples to copy + paste
  • Modularity
  • Link results to entries
  • Offer flexible input
  • Allow for custom object transportation
  • Cover usability basics

Documentation and presentation

Let’s start with a positive: the documentation of the Google Ajax Language API is great. You have all the information you need on one page including copy and paste examples. This allows you to work through the API online, read it offline and even print it out to read it on a crowded bus without having to take out your laptop.

Tip: If you are offering copy and paste examples – which by all means you should as this is what people do as a first step – make sure they work! I learnt the hard way in my book Beginning JavaScript with DOM Scripting and Ajax that there is nothing more dangerous than showcasing code snippets instead of full examples – people will copy and paste parts of a script, try to run it and either email you that your code is broken or – even worse – complain in book reviews on Amazon. If you offer copy and paste examples make sure all of them work independently.

Google offer explanations what the API is, what you can do with it, a list of all the parameters and what they mean. This is great for a first-glance user. For the hard-core audience they also offer a class reference.

You can read the full post here.

I'm thinking of writing some Ajax APIs for some of the applications in our labs section and this post has some good information that I will be using for these APIs.

Reduce our Dependence on Foreign Oil with Technology

Tagged:  

Normally I write about some new technology, web service or a programming tutorial. However, today I want to write about something that involves technology in a larger sense (don't worry, I'll get back to writing the usual tomorrow).

I live in California (USA) and we Californians drive quite a bit. The other day as I'm filling up my car and see the $40 mark passed by a Ford Focus, I started to think how can we be less dependent on Foreign Oil (I know all of the great minds are trying to solve the same problem). After quite a bit of thinking I came up with a solution that I think would make everybody happy. The answer is one that was common during the first dot com boom, telecommuting.

Think about it, if employees where allowed to telecommute at least 3 times a week, not only would we reduce the amount of gasoline that is used, but we would use less energy in offices. Just think of how companies could possibly reduce the amount of cubes that are needed since employees would not have to be in the office everyday, so shared cubes would be possible. Less cubes means less office space would be needed and less energy used to run the office.

This would save quite a bit of money for both the employee and the employer and would reduce our energy use. Beyond this employees would be much happier as it would help them have a better work / life balance.

Perhaps one day this idea will take off and we will hear politicians asking companies to go to a telecommuting model of business. I would love to hear your thoughts on this solution to reduce our energy consumption and dependence on foreign oil.

Processing Overview

Tagged:  

John Resig has written a good overview of Processing. Processing is a data visualization language written in Java that has been compared favorably to Flash. I first saw the language a couple of years ago and was very interested in it, but haven't seen much on it until this.

Below is an excerpt from the post.

Processing is a data visualization programming language.

It has three components:

  • The Processing language
  • The Processing drawing API
  • The implementation (in Java - can optionally pass the drawing API through to OpenGL).

The Processing Language and API

  • Strictly typed
  • Has classes, inheritance
  • Includes a bunch of globally-accessible functions (the drawing API - very flat and PHP-like).

Basic Program Structure

Two core methods: setup() and draw()

  • Very OpenGL-like
  • draw() is called continually at a specific framerate (if none is specified then it goes as fast as possible)

Simple example: Drawing a continuous line with the mouse.

void setup() {
  size(200, 200);
  background(102);

}

void draw() {
  stroke(255);
  if(mousePressed) {

    line(mouseX, mouseY, pmouseX, pmouseY);
  }
}

You can read the full post here.

Processing is a very interesting language and I could see it being very useful for applications that need a better way to represent information than is available in browser rendering. If you have never seen Processing, then you should look at some of the examples in John's post.

Syndicate content