The iSpeech demo page gives you an idea of the power of the API by providing a regular text input and being able to turn any text into spoken words. Let’s have a closer look now as to what is required to make this work in a web application.

Step 1: Sign up for a Developer Account and set up an API key

Signing up for a developer account is a requirement in order to use the API. After creating your account and logging in, you can create a new API key. Fill in the form and select “Desktop, Web, Other” as the application type in order to be able to use iSpeech’s REST API.

Step 2: Trying out the API

After creating an API key, you should find it in your list of available API keys. Clicking on “Settings” leads you to a form where you can set certain parameters for the text-to-speech functionality, like file formats, bit rates and frequency as well as add some more information about the app that uses the key. For this step, we just want to try out the API and get some text converted into speech, so the first thing we need to do is familiarize ourselves with how the API request is constructed. iSpeech provides good documentation on that and gives us the general layout of the request:

http://api.ispeech.org/api/rest?apikey=YOURAPIKEYHERE&action=convert&text=This+is+the+text+I+want+to+convert

Now we only need to replace YOURAPIKEYHERE with the API key we created in Step 1 and copy that request URL to the address bar of our browser or create an HTML5 audio element like the one below to embed in our HTML document.

Step 3: Tweaking the Request Parameters

The attentive reader might have noticed, from looking at the source code of the audio element in step 2, that we need to provide several fallback versions in addition to the MP3 format that the iSpeech API generates by default. This is necessary to satisfy the different codec requirements by modern browsers. To achieve this, the iSpeech API has a format parameter, that lets us specify the format in which we would like the audio piece to be returned to us. A complete list of supported formats can be found in the iSpeech API documentation.

If we want to use the Ogg Vorbis format, we can specify this like this:

http://api.ispeech.org/api/rest?apikey=YOURAPIKEYHERE&action=convert&text=This+is+the+text+I+want+to+convert&format=ogg

We can also specify a different voice using the “voice” parameter:

http://api.ispeech.org/api/rest?apikey=YOURAPIKEYHERE&action=convert&text=This+is+the+text+I+want+to+convert&format=ogg&voice=auenglishfemale

It is also possible to slow down the voice by providing a “speed” parameter with values between -10 (very slow) and 10 (very fast). However I noticed that not all voices provided by iSpeech support this parameter.

http://api.ispeech.org/api/rest?apikey=YOURAPIKEYHERE&action=convert&text=This+is+the+text+I+want+to+convert&format=ogg&speed=-5

Sounds great (literally), but…

By this point it is probably obvious that being able to use this text-to-speech API from within HTML documents using regular web technologies is pretty powerful. However, there is a catch to it in the name of costs. The web API key that we created is free for the first 500 words being transformed to audio by the API (you can check your key’s total word balance on the settings page of the key). If you exceed that limit, you have to pay, $50 for 1000 word credits to be exact, which essentially means that you can only feasibly use this API in some sort of premium app setting where your revenue generated can cover for these costs. While I would love this technology to be free, I can understand that it is not, considering the amount of work that goes into developing such piece of software.

The upside is, however, that iSpeech in addition to the REST API also offers SDKs for pretty much all popular mobile platforms, such as the iPhone, and API keys generated for these do not have any word quota imposed on them. Maybe another good reason to start learning Objective-C.

Step 1: Sign up for a Developer Account and get an API key

CloudMade lets you sign up for a developer account for free. After completing that initial step, access your account and click on the “Get API Key” button. Fill the details into the form presented to you, selecting “Web” as the platform and the “Free” pricing plan. Since we will not use any of the other features the API provides, the free version has more than we need.

Step 2: Create a token from your API key

In order to be able to communicate with CloudMade’s servers, you need to create an access token from your API key. This is done by sending an HTTP POST request to a particular authentication server as noted in their documentation. If you are using PHP, the following code can help you out (using Wez Furlong’s do_post_request function).

$apiKey = 'my-api-key';
$userId = 'your-generated-user-id';

// http://wezfurlong.org/blog/2006/nov/http-post-from-php-without-curl/
function do_post_request($url, $data, $optional_headers = null)
{
  $params = array('http' => array(
              'method' => 'POST',
              'content' => $data
            ));
  if ($optional_headers !== null) {
    $params['http']['header'] = $optional_headers;
  }
  $ctx = stream_context_create($params);
  $fp = @fopen($url, 'rb', false, $ctx);
  if (!$fp) {
    throw new Exception("Problem with $url, $php_errormsg");
  }
  $response = @stream_get_contents($fp);
  if ($response === false) {
    throw new Exception("Problem reading data from $url, $php_errormsg");
  }
  return $response;
}
$token =  do_post_request('http://auth.cloudmade.com/token/' . $apiKey . '?userid=' . $userId, '');

echo "generated token: " . $token;

Step 3: Requesting POI data along a given route

Equipped with the token from Step 2, we can now try to retrieve POIs along the route. The following example would do a search along the route for a maximum of 20 points of interest of type “cafe” from my place to Cupertino, within a radius of 1 kilometer and returning the data in JSONP format.

http://geocoding.cloudmade.com/[APIKEY]/geocoding/v2/find.js?token=[TOKEN]&object_type=cafe&along=37.36721,-122.03533,37.36756,-122.0354,37.36752,-122.03662,37.36672,-122.03607,37.36642,-122.03648,37.36429,-122.03288,37.33911,-122.03241,37.33763,-122.03239,37.32283,-122.03241&distance=1000&results=20&callback=mySuperCallback

The find method of the Local Search API lets you pass in various parameters, which are well documented. For the purpose of this article, the following are the most important ones:

• object_type: the API lets you choose from an extensive list of point-of-interest types
• along: vector of the route your are traveling along, i.e. a comma separated list of lat/long pairs
• distance: radius of the search are in meters
• results: number of results to return
• callback: signaling the server to return the response in JSONP format and specifying a publicly accessible JavaScript function to execute, passing in the response data

The result from the above request will come back as JSONP and look similar to the following:

mySuperCallback({
    "found": "3",
    "bounds": [{
        "json": ["37.33155", "-122.03642"]
    }, {
        "json": ["37.36805", "-122.03266"]
    }],
    "features": [{
        "id": "7367785",
        "centroid": {
            "type": "POINT",
            "coordinates": ["37.36768", "-122.03642"]
        },
        "bounds": [{
            "json": ["37.36768", "-122.03642"]
        }, {
            "json": ["37.36768", "-122.03642"]
        }],
        "properties": {
            "operator": "Starbucks",
            "osm_element": "node",
            "amenity": "cafe",
            "synthesized_name": "Cafe",
            "osm_id": "266625630"
        },
        "type": "Feature"
    }, {
        "id": "26073213",
        "centroid": {
            "type": "POINT",
            "coordinates": ["37.33155", "-122.03266"]
        },
        "bounds": [{
            "json": ["37.33155", "-122.03266"]
        }, {
            "json": ["37.33155", "-122.03266"]
        }],
        "properties": {
            "osm_element": "node",
            "amenity": "cafe",
            "name": "Bagel Street Cafe",
            "osm_id": "957085286"
        },
        "type": "Feature"
    }, {
        "id": "14342531",
        "centroid": {
            "type": "POINT",
            "coordinates": ["37.36805", "-122.03338"]
        },
        "bounds": [{
            "json": ["37.36805", "-122.03338"]
        }, {
            "json": ["37.36805", "-122.03338"]
        }],
        "properties": {
            "osm_element": "node",
            "amenity": "cafe",
            "name": "Peet's Coffee",
            "osm_id": "441987522"
        },
        "type": "Feature"
    }],
    "type": "FeatureCollection",
    "crs": {
        "type": "EPSG",
        "properties": {
            "code": "4326",
            "coordinate_order": ["0", "1"]
        }
    }
});

In our mySuperCallback function we can then use this data to e.g. plot each of the returned points of interest on a map, in addition to the given route.

Be aware of long routes

Attentive readers will notice that there is a slight flaw in the way the request is constructed. If you have a long route with a lot of waypoints that you are passing along in the request to the search API, at some point you will reach the limit of the maximum amount of characters you can pass along in a URL. One way to mitigate this is to drop every other entry from the array of waypoints if the number exceeds a certain limit. That way, the search will still be somewhat accurate (since you are only taking out points in between instead of cutting them off at the beginning or the end). A JavaScript example code could look like this:

maxWaypoints = 160; // a good threshold that I noticed works well for BikeNav
waypoints = [ ... ]; // array where each entry represents a waypoint along the route
no_of_waypoints = waypoints.length;

if (no_of_waypoints > maxWaypoints) {
    while (waypoints.length > maxWaypoints) {
        for (var i = 0, len = waypoints.length; i < len; i++) {
            waypoints.splice(i + 2, 1);
        }
    }
}

A few major differences

I am not going to go into all the things that are different between YUI2 and YUI3, this is beyond the scope of this post. There is already lots of documentation on YDN and a very good video covering lots of questions like “So whats different?”. Just a few key things to note:

• YUI3 is majorly different to YUI2. It is basically a new library and thus also, in a lot of ways, works completely different than its predecessor.
• To avoid conflicts between the two libraries, the global YAHOO object (used in YUI2) is now YUI. This also allows to have both YUI2 and YUI3 on the same page.
• Every piece of code you write needs to be wrapped in the following statement: YUI().use([YUI3 modules I want to use], function (Y) { ...my code here... } );This, in theory, makes creating namespaces, like we did in YUI2, unnecessary.

A Simple Example: JavaScript Countdown

Just to play around with it and start with a pretty basic example, I wanted to do a countdown in JavaScript. How would I do that using YUI3?

Step by Step

The following steps would need to get executed in order to make this example work:

1. Put basic markup on the page, which marks the start time of the countdown, e.g. 30 minutes and 0 seconds.
2. Have one function, decreaseSeconds that decreases the seconds and call this function every second (or 1000 milliseconds).
3. If the seconds counter reaches 0, decrease the minutes using decreaseMinutes.
4. Stop the timer if minutes and seconds reach 0.

Basic Markup

As said, the markup on the page already serves as the start time for the countdown and is pretty simple:

<div id="countdown">
        <span id="min">30</span>:<span id="sec">00</span>
</div>

Putting YUI3 on the page

In order to put YUI3 on the page, we need to include the YUI Global Object:

<script src="http://yui.yahooapis.com/3.0.0b1/build/yui/yui-min.js" type="text/javascript"></script> 

And just to verify this is working, we will add some debugging code on the page:

YUI().use("node", function (Y) {
    alert("YUI3 is here!");
});

Just a few words on this. The first argument of the use function, in this case “node”, tells the YUI instance which modules to load. As it will turn out later, the node module, together with the functionality that the YUI global object provides, are enough to make this example work. The last argument here is a callback function, which has the YUI instance as an argument. In this function is where your code lives and has access to the YUI3 instance and modules, if loaded in. More on this in the documentation.

So we got the basics covered, YUI3 is on the page and we can move on to the program logic.

Setting up variables and functions

First I am going to set up some variables that I am going to need throughout the code:

var minutes = Y.get("#min"),
    seconds = Y.get("#sec"),
    timer,
    liftOff = false;

As you can see here, YUI3 gives you the ability to access a DOM element using CSS selectors out of the box. Y.get(“#min”) returns a node (in YUI3 terms) which wraps the underlying DOM object. But be aware that this object here is not the DOM object itself, which is different to what YAHOO.util.Dom.get(“min”) would do.

We will also set up the decreaseSeconds function and the timer:

function decreaseSeconds() {
    // get current seconds value
    var secs = seconds.get("innerHTML");

    if (secs === "00") {
        // move to 59
        secs = 59;
        decreaseMinutes();
    } else {
        secs--;
        if (secs < 10) {
            secs = "0" + secs;
        }
    }

    if (!liftOff) {
        seconds.set("innerHTML", secs);
    }
}

timer = Y.later(1000, null, decreaseSeconds, [], true);

Instead of talking about the program logic, which should be pretty straight forward, I would like to highlight YUI3 specific things here:

• Setting up the timer using Y.later is pretty easy and comparable to YAHOO.later in YUI2.
• As the node returned by Y.get is not the DOM node, doing something like seconds.innerHTML does not work. In fact, it will return ‘undefined’. If you do a console.dir(seconds) you will discover that this does not look like a DOM object at all, but is, as stated above, a YUI node instance wrapping the DOM element with id=”sec”. So instead of doing .innerHTML, we need to use seconds.get(“innerHTML”) to access the content between the opening and closing tag.
• Likewise, to set content using innerHTML, we need to do seconds.set(“innerHTML”, secs).

This is something to get used to at first. Because in YUI2, people (including me) were used to have the actual DOM object at hand and perform native DOM operations on it. This is not possible anymore with YUI3. It is still possible to access the underlying DOM objects, see Luke’s comment.

After setting this up, we can move on to adding the functionality for decreasing the minutes and making the countdown work.

Making it work

Here is the code and logic for decreasing the minutes and canceling the timer if 0 is reached:

function decreaseMinutes() {
    var mins = minutes.get("innerHTML");

    if (mins > 0) {
        mins--;
        if (mins < 10) {
            mins = "0" + mins;
        }
        minutes.set("innerHTML", mins);
    } else {
        timer.cancel();
        liftOff = true;
    }
}

Pretty straight forward and also uses the wrapper methods to access DOM functionality. It works now, but we are not quite finished yet.

Modularizing

As you can see, all the code is currently inline on the page and gets executed as soon as the page loads. This is suboptimal. What I used to do using YUI2 is creating a module specific namespace and then call a public method (made available through the use of the Module Pattern) on the page that needed that functionality. So for this the module would be, e.g.:

YAHOO.Klaus.Countdown = function () {
    ... my code ...
    return {
         init: init
    };
}();

And then, on whatever page I want to use it, do:

YAHOO.Klaus.Countdown.init();

I was curious how to achieve something like this in YUI3.

I came up with a solution but I am not sure if this is the suggested way of doing this. I hope it is, as I couldn’t find a different way of doing it. The secret is to add the “module” you created as a module to YUI3, like:

Y.add("Klaus.Countdown", init);

The second argument is a function name to be executed when the module is being invoked used the use() function.

So what is left to do is saving the countdown code to a separate file and then call the module from within a script block on the page:

<script type="text/javascript">
    YUI().use("Klaus.Countdown");
</script>

So we are done and hopefully happy with our first steps in YUI3.

Conclusion

I have deliberately chosen a simple example to start with to avoid frustrations coming out of having to learn and getting used to too many things at once. Like with every new piece of software, getting started “somehow” in the first place is critical and finding out how to achieve things without running into too many roadblocks at once. How easy or hard it is to use YUI3, I have yet to determine when probably facing more complex examples, but I believe this simple examples gives a sneak peak into what awaits at the end of the line.

Resources

• YUI3 on YDN
• YU3 API Doc
• YUI Blog
• Belorussian translation of this article kindly provided by Patricia Clausnitzer and http://www.fatcow.com/

Stoyan Stefanov, a colleague of mine at Yahoo!, recently published Object-Oriented JavaScript. Personally, the book about JavaScript I was waiting for. A while back, I read and reviewed Jeremy Keith’s DOM Scripting, which is the perfect introduction as to how developers should use JavaScript these days in a browser environment. Progressive Enhancement was one of the key concepts in there. So after getting the basics covered, my expectation was that Stoyan’s book provides me with supporting material for intermediate to advanced JavaScript programming tasks. Does it deliver? We will come to that very shortly.

Contents

Chapters 1 to 4 in his book cover a brief history about JavaScript and the basic elements of the language, like variables, primitive data types, conditions and loops as well as functions and objects. The latter already have their specialties in JavaScript and Stoyan explains those special characteristics.

Chapters 5 and 6 are devoted to prototype and how inheritance works in JavaScript, a very essential thing to cover when we are talking about advanced techniques.

Chapter 7 talks about what readers of DOM Scripting might still remember, namely how JavaScript can be used to access and manipulate specific elements in the DOM. The author also takes a look at Events and the ever popular XMLHttpRequest.

And finally, the highlight comes last, Chapter 8 deals with what hardcore programmers were waiting for: Coding and Design Patterns. Having done a little research about this myself, I found it great that Stoyan documents concepts that have become good practice in the JavaScript world, like namespacing and creating public and private properties and methods. In the design patterns part, he talks about Singletons amongst various other patterns at the programmers disposal.

The book closes with a quite comprehensive appendix, which includes listing reserved words, referencing built-in functions and objects and regular expressions in JavaScript.

Rating and Reasoning

My Rating: 9 out of 10

Even though it states that “no prior JavaScript knowledge is required”, I would say that is a bit of an understatement. If DOM Scripting was your first JavaScript book then I would put the following equation on the board: DOM Scripting + experience with these techniques in The Real World (meaning on actual live projects) = ready for Object-Oriented JavaScript. Don’t get me wrong, Stoyan covers the basics (variables, conditions etc.) in the first few chapters, but after that, the learning curve gets pretty steep and I believe it is safe to say, without any prior knowledge, you will put this book back on the shelf, left frustrated.

I have worked on a couple of minor web projects before Yahoo! Europe hired me in May 2007, so to this date, I believe I was able to acquire some experience when it comes to using JavaScript on high-scale websites. From my perspective, the first couple of chapters was a nice refresh on the topic, but only then, in Chapters 5 to 8, things got interesting with bits and pieces in there that helped me closing some knowledge gaps about certain concepts, which is really great. This, again, supports my feeling that this book is not meant for every JavaScript developer out there, independent of whether it is a newbie or an advanced developer. I feel that people with probably a couple of years experience might get more out of it than someone who just delved into JavaScript a month ago.

It is difficult to come up with concrete examples to explain this, and this observation is highly subjective of course, but I feel that the way the book is done and written, it feels a lot “drier” and less “exciting” to read compared to DOM Scripting. Which, again, if this targets JavaScript beginners, should not be the case. But I believe the more complex the material gets, the harder the job becomes of having to thrill and excite the reader.

What I really like about the book is that basically all the examples Stoyan gives, you can type into the Firebug console right away to try out for yourself. As I am a believer that you learn new skills most effectively by actually doing something and play with it, I am pretty sure this is a good way of imparting knowledge.

Conclusion

If you are a Web Developer with several years of experience on the job and with JavaScript and you want to move your knowledge level up a notch or two, this book is for you. If you want to play with the cool kids, then get this book. If you are more or less new to the JavaScript world, you might want to consider starting with DOM Scripting first and getting experience using those techniques on real world projects, before diving into the advanced concepts discussed in Object-Oriented JavaScript.

It is quite similar to a couple of tools that are already out there. JSLint looks for issues in JavaScript code and checks for adherence to a certain set of code standards. PHP_CodeSniffer, a PEAR package, provides similar functionality for PHP files (but is also able to check JavaScript and CSS). Then there is CSSTidy, a parser and optimiser for CSS, which e.g. compresses hex values for color declarations and provides different levels of minification (removing comments, whitespace etc.).

Essentially, what I wanted to achieve with CSS Reviewr is to not only point out issues in the code based on the experiences and the reviews we conducted at work, but also to provide explanatory text for each finding (much like how the W3C Validator does it for HTML). In one or two sentences, I wanted to explain why this is an issue and how it can be resolved. From my perspective, this is ideal for a developer who might not be familiar with a certain best practice or convention. By reading the explanation and maybe following a link to a page that provides more details, it has a certain learning effect to it.

CSS Reviewr, as it is stated on the page, is not a validator. It is encouraged to run your code through the W3C CSS Validator first, before checking it using CSS Reviewr.

Last, but not least, I would like to thank the real brain behind this: Sam Riley. I had the pleasure of working with him on Yahoo! Answers and I was and am still really impressed by his sheer endless knowledge of the ins and outs of CSS. Knowing that I would not be able to just turn to the side and ask him whenever I have a question related to CSS (because I relocated from London to California), I wrote this tool also to store his CSS knowledge somewhere for myself, so I could still use it here in the US So a big thanks to Sam!. Also thanks to Eva-Lotta, who kindly offered to do some visual design work for this in her spare time.

The tool is in beta right now and I have already identified some bugs myself that I need to fix at some point, providing I find time for this. Getting some early feedback from colleagues, I have also received the following feature requests:

• Indentation check (selectable option)
• Check (background) images used in the code are akamized/on a content delivery network (CDN)
• Fonts should not use uppercase characters (e.g “Arial” should be “arial”)
• Limit the amount of errors shown to 50 to prevent browser (FF2) from crashing. Add something like: “More than 50 issues found. Fix the issues above first before checking your code again.”
• Having a ‘Do it!’ button by each issue to make the suggested modification to the code, and then have a textarea at the bottom where you could copy out the fixed version

Suggestions, bug reports and all kinds of feedback welcome. Just leave a comment below. Thanks and happy holidays!

Description

Shrinkr does two things:

1. It reduces the file-size of your CSS and JavaScript files through minification, i.e. stripping out unnecessary content like white-space and comments
2. It then takes those files and concatenates them into one single CSS and one single JavaScript file
3. Those files are then getting stored as css-min-[timestamp].css and js-min-[timestamp].js on your server. The reason for the timestamp is that whenever Shrinkr creates a new file, it is ensured that a user agent doesn’t still use a cached version of the previous files but, because the name of the file has changed, retrieves the latest version from the server

The first measure reduces the file-size by stripping out things from files that are not needed by the browser in order to interpret them. Whitespace and comments are for developers, not for the browser. They can safely be removed, which reduces the file-size and thus the consumption of bandwidth.

In the Yahoo! Exceptional Performance Rules, it says that one should aim to reduce the number of HTTP requests in order to make a page load as fast as possible. Shrinkr does that by concatenating all the files into one single file (one for CSS and one for JS). So instead of having 10 CSS files, you will end up having only one.

Shrinkr also adds an action to wp_head and wp_footer in order to tell WordPress to include those files upon page load in the appropriate section of the page. CSS files should be included in the head of the page, JS at the very bottom as per the Yahoo! Exceptional Performance Rules.

Because of the fact that you will end up having all your CSS and JavaScript in one file and on one line (because all the carriage returns etc. have been stripped out), it makes debugging kind of difficult. For that reason, you should only activate that plugin on the live version of your site and keep the files separated on your development box.

Further details about the plugin can be found on the Shrinkr plugin page. It would be great if you could try it out and give me feedback, either by leaving a comment here or using the contact form. Thanks!

Resources

• Best Practices for Speeding Up Your Web Site
• Yahoo! UI Library: YUI Compressor
• JSMIN, The JavaScript Minifier
• Minify!

There are three ways to generate a favicon:

• Photoshop (or any other graphics editing program)
• Online tools
• On the fly

Photoshop

I say Photoshop here, because that is what I am used to, but essentially you could use any graphics editing program out there. Essentially, when you have your graphic ready, you could just simply save it as a PNG or GIF. Well, you can do that, but that won’t work in Internet Explorer.

To make your favicon display in every browser, you need to create an ICO file. To do that with Photoshop, you can install a plugin that helps you do so.

Installing the plugin

First you need to download the plugin from Telegraphics for whichever version of Photoshop you are using. Extract the ZIP file and move the plugin file into the “File Formats” folder inside your Photoshop Plugins folder:

• On Windows, ICOFormat.8bi (the path should be similar to: C:\Program Files\Adobe\Adobe Photoshop CS2\Plug-Ins\File Formats\)
• On OS X/Classic, icoformat (CS2/Mac version is ICOFormat_cs2.plugin)

After you have done that quit and relaunch Photoshop, if it’s already running. To check if the plugin is installed correctly, go to Help > About Plug-ins. In this list, the ICO plugin should appear.

Saving your graphic in ICO format

There are some constraints as to which images are eligible to be saved in ICO format:

• The ICO format does not allow images more than 255 pixels high or wide.
• Only Bitmap, Grey Scale, Indexed and RGB mode images, no more than 8 bits per channel, can be saved as ICO.

If the graphic you created meets those requirements, you can go to “Save” or “Save As…” and select “ICO (Windows Icon) *.ICO” from the list of available file formats. The size of the final image should either be 16×16 or 32×32 pixels, larger images would just need to be scaled down by the browser.

Online tools

Following is a list of tools on the web that make it even easier to create favicons. In principle, you can upload an image file that you already have to the service, which will create a favicon file from that image.

• Favicon Generator
• Favikon
• favicon.ico Generator
• FavIcon from Pics

On the fly

Using the data URI scheme, it is possible to include data items, such as an image, inline on a webpage, without actually referencing it as an external resource. The format for that URI scheme is:

data:[<MIME-type>][;base64],<data> 

The W3C Validator for example makes use of this. If your markup validation fails, the red square displayed in the address bar is referenced as:

<link rel="icon" href="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%10%00%00%00%10%08%02%00%00%00%90%91h6%00%00%00%19IDAT(%91c%BCd%AB%C2%40%0A%60%22I%F5%A8%86Q%0DCJ%03%00%DE%B5%01S%07%88%8FG%00%00%00%00IEND%AEB%60%82" type="image/png" />

In the example from the W3C Validator, the data for the favicon is represented using ASCII encoding, but could also be encoded as base64, which would then look like this in the HTML source:

<link rel="icon" href="data:image/png;base64,/9j/4AAQ..." type="image/png" />

Referencing it in HTML

When you have your favicon file, place it somewhere on your webspace of your site (it does not have to be the root directory) and then reference the file in HTML (in the head of the document) like so:

<link rel="Shortcut Icon"
      href=""http://example.com/favicon.ico"
      type="image/x-icon">

If you now go to your site and refresh the browser, you should see your icon showing up in the address bar.

On a sidenote: if you ever wanted to play Defender displayed in a 16×16 pixels favicon, you can do so now. Not necessarily useful for everyday websites, but a great demo of what can be done with favicons.

Resources

• How to Add a Favicon to your Site – QA @ W3C
• Mysteries Of The Favicon.ico — How To Create A Favicon In Photoshop
• Creating favicons with Adobe Photoshop and GoLive

Apache

OSX already comes with Apache installed, it is just a matter of starting the server. You can do this if you go to System Preferences > Sharing and check “Web Sharing”. The Apache default page should now be displayed at

http://localhost

Later on, you can use the following commands to start, stop or restart Apache:

$ sudo apachectl start
$ sudo apachectl stop
$ sudo apachectl restart

If you would like to change the DocumentRoot of the server, you need to edit the httpd.conf file:

$ sudo vi /etc/apache2/httpd.conf

In here, you need to change the DocumentRoot setting:

DocumentRoot "/Users/myUser/myNewWebroot/"
<Directory "/Users/myUser/myNewWebroot/">
...
</Directory>

PHP

PHP comes bundled up with Leopard as well. The important things to know here are where it got installed and where to find the configuration file.

Most likely, it got installed to:

The configuration file should be located at:

You only need to make sure that Apache knows that PHP is available, so edit httpd.conf:
$ sudo vi /etc/apache2/httpd.conf

And add the following lines (in the appropriate sections, to keep things tidy):

Finished with that, restart Apache, empty the browser cache and then load a php file for testing if it is correctly interpreted.

MySQL

Download the most recent dmg image from the MySQL site.

Before actually installing MySQL, I found it helps to restart the computer before proceeding with the installation. When running through the installation wizard, MySQL will get installed to:

So, for example:

Also, a symlink should have been created:

You should also install the Preference Pane, which comes with the installation package as MySQL.prefPane

To start MySQL manually, run the following command:
$ sudo /Library/StartupItems/MySQLCOM/MySQLCOM start

You should also add MySQL to $PATH:
$ vi ~/.profile
$ export PATH=$PATH:/usr/local/mysql/bin
$ source ~/.profile

To check whether that was successful, run:
$ echo $PATH

The default settings for the root user are:

• Username: root
• Password: [leave blank]

Add-on: PHPmyAdmin

To get PHPmyAdmin installed, which comes in handy for managing your database(s), download the latest package from their download page. Extract that package to a directory somewhere in your DocumentRoot.

Open config.sample.inc.php with an editor of your choice and add the following details for your MySQL installation:

/*
 * This is needed for cookie based authentication to encrypt password in
 * cookie
 */
$cfg['blowfish_secret'] = 'whatever'; /* YOU MUST FILL IN THIS FOR COOKIE AUTH! */

$cfg['Servers'][$i]['user']          = 'root';
$cfg['Servers'][$i]['password']      = ''; // use here your password

After you made those changes, save the file as config.inc.php.

PEAR

PEAR should also already be available on your Mac. The location is probably:

It is a good idea to add the path to PEAR to $PATH, similar to setting the path for MySQL (see above). In addition, upgrade PEAR to the latest version like so:

$ sudo pear channel-update pear.php.net
$ sudo pear upgrade PEAR

Resources

• Installing MySQL on Mac OS X (MySQL Reference Manual)
• Installing MySQL 5.0 on Max OS X 10.5 client
• Installing MySQL on Mac OS X
]]> http://www.klauskomenda.com/archives/2008/10/07/installing-apache-mysql-and-php-on-leopard/feed/ 21 http://www.klauskomenda.com/archives/2008/10/01/module-pattern-vs-custom-objects/ http://www.klauskomenda.com/archives/2008/10/01/module-pattern-vs-custom-objects/#comments Wed, 01 Oct 2008 09:58:54 +0000 Klaus http://www.klauskomenda.com/?p=505 A little while ago I tried to gather together information about what kind of programming patterns are out there in the wild when it comes to JavaScript and describing the characteristics of each of those. At Yahoo!, the two patterns we use almost exclusively are Module Pattern (for functionality to be implemented on various properties) and Custom Objects (as in the YUI library, for example). The question I was asking myself is how they behave differently and whether you could do the same thing with both of them.

For this article I am sticking to the same simple example that I already used in my previous article. But to make it a little bit more interesting, we have two lists of links, not just one:

<ul id="list-1">
    <li><a href="http://news.bbc.co.uk/">News on BBC website</a></li>
    <li><a href="http://nytimes.com/">Frontpage of The New York Times</a></li>
    <li><a href="http://www.guardian.co.uk/">Guardian Unlimited</a></li>
</ul>

<ul id="list-2">
    <li><a href="http://valleywag.com/">Valleywag</a></li>
    <li><a href="http://techcrunch.com/">TechCrunch</a></li>
    <li><a href="http://www.yahoo.com/">Yahoo!</a></li>
</ul>

Clicking on one of the links should simply switch the background color to a value we would like to provide as a parameter. Essentially, we want to have two separate objects in the end that act independently from each other.

Custom Objects

The structure of the source code roughly remains the same as the one used in my previous article. The only difference is that I set up the constructor function in a way that it is possible to pass values to it (colors, Id of the list and some random value which we will use later to prove that we have two distinct objects).

function anchorChangerProto (colors, list, random) {
    this.config = {
        colors: colors,
        list: list
    }

    this.test = random;
}

No rocket science, pretty straight forward. I am also creating a logRandom() function which will log the value of test to the console.

anchorChangerProto.prototype.logRandom = function () {
    console.log(this.test);
}

Nothing unexpected in here either. So the full source code for anchorChangerProto looks like this:

function anchorChangerProto (colors, list, random) {
    this.config = {
        colors: colors,
        list: list
    }

    this.test = random;
}

anchorChangerProto.prototype.changeColor = function (linkObj, newColor) {
    linkObj.style.backgroundColor = newColor;
};

anchorChangerProto.prototype.init = function () {
    var self = this;

    // get all links from particular list
    var anchors = this.config.list.getElementsByTagName("a");
    var size = anchors.length;

    for (var i = 0; i < size; i++) {
        anchors[i].color = self.config.colors[i];

        anchors[i].onclick = function () {
            self.changeColor(this, this.color);
            return false;
        };
    }
};

anchorChangerProto.prototype.logRandom = function () {
    console.log(this.test);
}

At the end of the page, in a <script> block I can now instantiate my objects and call their init methods.

var changer1 = new anchorChangerProto([ "#F63", "#CC0", "#CFF" ], document.getElementById("list-1"), "first changer");
changer1.init();

var changer2 = new anchorChangerProto([ "#009", "#990", "#909" ], document.getElementById("list-2"), "second changer");
changer2.init();

The new operator creates a generic object, sets its __proto__ value to anchorChangerProto.prototype, and passes that object to the constructor function as the this keyword. I tried to explain that in my other article about inheritance in JavaScript.

After these statements, we can call the logRandom function for each object to prove that we have indeed created two distinct objects which act independently from each other. Have a look at the demo page for this example.

changer1.logRandom(); // logs: "first changer"
changer2.logRandom(); // logs: "second changer"

Everything as expected. Now the question is whether the same thing can be achieved with the Module Pattern.

Module Pattern

It can be achieved, with some slight modifications. The main characteristics of the Module Pattern are that an anonymous function gets executed immediately and returns an object holding the publicly available properties for that object. In addition to that, you can also have private properties and methods, which can not be accessed from outside. So the basic structure is:

var myModule = function () {
    ... some private properties and methods ...
    return {
        ... some public properties and methods ...
    }
}();

The parens at the end ensure that the function gets called immediately, the object gets returned and assigned to the variable myModule. Now the first step to achieve the same thing as above is to remove those parens.

var myModule = function () {
    ... some private properties and methods ...
    return {
        ... some public properties and methods ...
    }
};

The reason for removing them is the following: If we keep them in there, myModule is always going to be the only one module of that kind on the page. The function will be executed, the object returned and assigned to the variable. You would not be able to create a distinctively different second object of that kind on the page.

However, by leaving out the parens at the end, we can simply call that function multiple times and always get a new object back which is unique. But not so fast. Before that I would like to show you the source code using the (slightly modified) Module Pattern:

var anchorChangerModule = function () {

    // private property
    var config = {};

    // this is a private method
    // can be accessed within anchorChange3
    // cannot be accessed from outside
    function alterColor(linkObj, color) {
        linkObj.style.backgroundColor = color;
    }

    return {
        // public method
        // can be accessed from outside
        changeColor: function (linkObj, newColor) {
            // calls private function to change color
            alterColor(linkObj, newColor);
        },

        // public method
        // can be accessed from outside
        init: function (colors, list, random) {
            var self = this; // assign reference to current object to "self"

            config.colors = colors;
            this.test = random;

            // get all links on the page
            var anchors = list.getElementsByTagName("a");
            var size = anchors.length;

            for (var i = 0; i < size; i++) {
                anchors[i].color = config.colors[i];

                anchors[i].onclick = function () {
                    self.changeColor(this, this.color); // this is bound to the anchor object
                    return false;
                };
            }
        },

        logRandom: function () {
            console.log(this.test);
        }
    };
};

Again, nothing crazy going on here. As with the Custom Objects example above, I made sure that it is possible to pass in values to the init function and assign them to properties of the object and added the logRandom function. Now I can create the objects and the end of the page in a <script> block:

var changer1 = anchorChangerModule();
changer1.init([ "#F63", "#CC0", "#CFF" ], document.getElementById("list-1"), 'first changer');

var changer2 = anchorChangerModule();
changer2.init([ "#009", "#990", "#909" ], document.getElementById("list-2"), 'second changer');

What I am doing here, as opposed to above when using the new operator, is simply calling the anchorChangerModule function, which returns an object, which then gets assigned to changer1 and changer2, respectively. To prove again that we have indeed two distinct objects, let us call the logRandom function:

changer1.logRandom(); // logs "first changer"
changer2.logRandom(); // logs "second changer"

Again, we can clearly see that we have two different objects who operate independently from each other. And now, in fact, we have achieved the same thing as we did before with Custom Objects using the Module Pattern. The same thing? Well, not quite…

A Word about Inheritance

Taking a look at this simple example, yes, we have achieved the same functionality with both programming patterns. But the drawback is that if you strictly stick to the Module Pattern, no inheritance chain is being set up. You would not be able to create a sub-module of anchorChangerModule and make it inherit functionality from the parent. For this to work, you would need to use .prototype so that when calling a method, JavaScript will work its way up the inheritance chain using the __proto__ property of the object. As far as I know, this can only be done using .prototype and when instantiating a new instance of an object using the new operator.

But then again, I believe that the Module Pattern was not designed for setting up inheritance or replacing Custom Objects.

Feedback appreciated

I would not consider myself a JavaScript expert, by no means, therefor the conclusions I came up with which are stated above are just based on my own experiments and research. I would highly appreciate it if you guys could point out mistakes or flaws that I made in my conclusions and explanations, if you spot any. Thanks.

]]> http://www.klauskomenda.com/archives/2008/10/01/module-pattern-vs-custom-objects/feed/ 4 http://www.klauskomenda.com/archives/2008/09/18/insert-command-denied-to-user-clean-up-your-db/ http://www.klauskomenda.com/archives/2008/09/18/insert-command-denied-to-user-clean-up-your-db/#comments Thu, 18 Sep 2008 21:50:09 +0000 Klaus http://www.klauskomenda.com/?p=376 After posting my most recent blogpost, I noticed that I was neither able to create a new one or to post comments on the site. WordPress also supplied me recently with some strange comment notification Emails saying ‘[klauskomenda.com] Please moderate: “”‘. But the notification Email, that normally contains the message someone left on the site was pretty empty. That looked suspicious and I suspected some sort of hacker attack.

When checking the response coming back from the MySQL database when WordPress tried to insert rows, I got something like this:

1142 - INSERT command denied to user 'abc'@'host.com' for table 'comments'

That made me think: “Hm, did my hosting provider remove my DB rights because I paid the bill a few days later than usual?”. Nah, that can’t be. Checking on the hosters website confirmed that, in fact, everything was settled regarding invoices.

And then it hit me. On the DB tab in the hosting providers admin interface it said: “Size: 10 MB of 10 MB used.” D’oh. So that was the reason for that error and, consequently, why no ‘inserts’ couldn’t be performed anymore.

So it was not some bad hacker that caused me headaches.. Turns out, I did not show enough TLC recently to the MySQL database that powers this blog and let it grow and grow over the last months, even years, without deleting tables that were not needed anymore. After doing that, doing some cleanup, I got it down to 5 MB again. And we’re back in business

Attention: If you delete a reasonable amount of data from the database and clear up some space, it might still take up to 30 minutes (at least with my hosting provider), until you are able to run INSERT commands again. So don’t panic if that happens, just be a little patient, grab a coffee, come back and should be fine.

Again, apologies to everyone who wanted to leave a comment. It got lost in the wide open spaces of the internets.

]]> http://www.klauskomenda.com/archives/2008/09/18/insert-command-denied-to-user-clean-up-your-db/feed/ 4