Archive for July, 2008

Things I dig about the new iPhone 3g

Posted on July 18th, 2008 in iPhone | No Comments »

My brother Mark, his girlfriend Jen, and their iPhones
My brother Mark, his girlfriend Jen, and their iPhones.

I got into a conversation about the differences I notice between the old iPhone and the new iPhone 3g. Here’s my quick list (ordered by what I appreciate the most):

  1. The headphone jack: is flush now instead of recessed so you can use any headphones you like (I’d upgrade just for this INCREDIBLE feature, probably the greatest thing about the new iPhone – I mean what will the great minds at Apple think of next?)
  2. The sound: on the speakers is louder and less distorted. I can actually watch a TV show or movie on my iPhone in a quiet room and hear it clearly. I still prefer my headphones (Etymotic Er-4 p’s) but it’s nice to have the option. I think the overall sound quality on calls is better, too.
  3. The GPS: rocks. Not as fast or efficient as a regular GPS device but locating myself with Maps is a lot faster and more accurate, plus it tracks me as I’m moving around with a cool “sonar” animation (compared to the old system where you just had to hit the “find me” button to relocate yourself.) This is extremely useful when using Maps with driving as I don’t always know if I’m started out in the right direction.
  4. 3g: mucho faster. I hear you can’t get it in a lot of areas but in NYC it seems to be working great. It makes using the internet bearable on the iPhone. Connecting to a wireless point still blows it away but again, it brings using the internet on the go a recreational thing, instead of just a I-really-need-this-information-right-now-and-this-is-my-only-option thing.
  5. Lots of small physical enhancements: Apple is really good at this. They’ve probably improved fifty things physically on the iPhone that you’ll never notice. One that I noticed right away is that the headphone jack “grips” your headphone plug, locking it in place. You can actually (lightly) swing your iPhone around by the headphones (I don’t recommend this.) This helps dramatically as dozens of times I’d be walking down the street, listening to my old iPhone in my jean pocket, only to get eventually unplugged. This never happens anymore.
  6. The Apps: fun and fast (compared to their web app counterparts). Even though you can use the new app system on your old version 1 iPhones, location based apps like Yelp really shine with the GPS.

The iPhone continues to be a game-changer and this recent update was more evolutionary than revolutionary but it was certainly needed. There’s a lot more new stuff I really dig, like international keyboard support and a (sorta) native AIM and Twitter clients but this stuff is also available with the new firmware update on the old iPhones as well, and I wanted to keep this entry focused on the differences.

Inject jQuery into any page / A better jQuery bookmarklet

Posted on July 8th, 2008 in JavaScript, jQuery | 1 Comment »

The problem

I had to find out the language codes of all supported languages in TinyMCE (this page), but unfortunately, they were only listed in the actual download link for each file. A quick sprinkle of jQuery code in my Firebug console would have returned me a list easily but this page didn’t have it – which lead me to consider making a bookmarklet to add jQuery on any page.

The solution:

My wonderful coworker Bryan told me immediately about a simple bookmarklet that does the above called jQuerify. Looking through it, I saw a few potential issues with this script and also decided I wanted something a little more personal, so I came up with my own version:

$jQuerify

Notable differences:

  • Moved the jQuery shortcut $ to $j. I always do this on any site I work on because I find $ is used by so many other libraries and scripts that I want to minimize conflicts. Using $j also for sure tells me I’m using jQuery.
  • If $ isn’t being used it becomes a shortcut to document.getElementById. I think it’s what people naturally expect $ to do, and in my daily coding I like using $('id'); better than $j('#id')[0]; when all I want to do is return an element.
  • Added an initial check for jQuery to prevent running the script unnecessary.

The full source looks like this:

(function(){
    if(!window.jQuery){
        var s=document.createElement('script');
        s.src='http://jquery.com/src/jquery-latest.js';
        document.getElementsByTagName('head')[0].appendChild(s);
 
        var z=setInterval(function(){
            if(window.jQuery){
                $j = jQuery.noConflict();
                alert('jQuery loaded!');
                window.clearInterval(z);
            }
        },100);
    }
    if(!window.$){
	window.$=function(x){return document.getElementById(x);};
    }
})();

$jQuerify <-- Try me out, drag me to your tool bar.

Happy endings

Now I can just hop back over to the TinyMCE Language Pack Download page, run my bookmarklet, type the following in Firebug:

$j('#examplecontent form:first table tbody tr').each(function(c,i){
    var country = $j(this).find('td:eq(2) label').html();
    var code= $j(this).find('td:eq(1) a').attr('href').match(/(?:code=)(..)/)[1];
    console.log(c,country,'=',code);
});

And the list is returned:

0 Arabic = ar
1 Bokmål, Norwegian; Norwegian Bokmål = nb
2 Bosnian = bs
3 Bulgarian = bg
4 Catalan; Valencian = ca
5 Chamorro = ch
6 Chinese = zh
7 Croatian = hr
8 Czech = cs
9 Danish = da
10 Dutch; Flemish = nl
11 English = en
12 Estonian = et
13 Finnish = fi
14 French = fr
15 German = de
16 Greek, Modern (1453-) = el
17 Hebrew = he
18 Hungarian = hu
19 Interlingua (International Auxiliary Language Association) = ia
20 Italian = it
21 Japanese = ja
22 Korean = ko
23 Latvian = lv
24 Lithuanian = lt
25 Macedonian = mk
26 Malay = ms
27 Northern Sami = se
28 Norwegian Nynorsk; Nynorsk, Norwegian = nn
29 Persian = fa
30 Polish = pl
31 Portuguese = pt
32 Romanian = ro
33 Russian = ru
34 Sardinian = sc
35 Serbian = sr
36 Sichuan Yi = ii
37 Sinhala; Sinhalese = si
38 Slovak = sk
39 Slovenian = sl
40 Spanish; Castilian = es
41 Swedish = sv
42 Tatar = tt
43 Turkish = tr
44 Twi = tw
45 Ukrainian = uk
46 Vietnamese = vi

Tips and tricks for Firefox 3

Posted on July 5th, 2008 in Firefox | No Comments »

Lifehacker has a great post on tips and tricks for Firefox 3. Favorites include deleting mistyped URL’s in the new URL suggestion window and auto-complete entries (I hate when my mistakes get saved!), making web applications like gmail launch instead of default desktop apps, enabling spell-checking in single line input fields (as apposed to just textareas), and lastly, for Mac FF3 users with the default Safari skin, adding favicons back in your bookmark toolbar.

Firefox 3′s new ability to register web apps to link protocols is most interesting. As a web developer you’ll be able to create your own protocols for your web app via JavaScript using a method added to the navigator object called registerProtocolHandler . For example, registering the mailto protocol to your gmail looks like this:

javascript:window.navigator.registerProtocolHandler(“mailto”,”https://mail.google.com/mail/?extsrc=mailto&url=%s”,”GMail”)

This has some really exciting potential for web apps!

Note to jQuery developer team: Please use curly brackets!

Posted on July 3rd, 2008 in JavaScript, jQuery | No Comments »

If you haven’t gathered so far, I think the jQuery JavaScript library is the dog’s bollocks. Its small, efficient, and has improved my life as a developer almost as much as Firebug. jQuery gets flack occasionally for containing complex or cryptic code full of ternary operators and multiple variable declarations in a single statement (eg. a=b=1), which I mostly see as concise and efficient coding however, there’s one thing about the jQuery library that I can’t stand. It’s something every developer should do and if you’re not doing it then you’re a jerk and that, ladies and gentlemen, is omitting your curly brackets.

Look at this code snippet from the jQuery library to see what I mean:

for ( ; i < length; i++ )
	// Only deal with non-null/undefined values
	if ( (options = arguments[ i ]) != null )
		// Extend the base object
		for ( var name in options ) {
			var src = target[ name ], copy = options[ name ];
 
			// Prevent never-ending loop
			if ( target === copy )
				continue;
 
			// Recurse if we're merging object values
			if ( deep && copy && typeof copy == "object" && !copy.nodeType )
				target[ name ] = jQuery.extend( deep,
					// Never move original objects, clone them
					src || ( copy.length != null ? [ ] : { } )
				, copy );
 
			// Don't bring in undefined values
			else if ( copy !== undefined )
				target[ name ] = copy;
 
		}
 
// Return the modified object
return target;

Coding in this way leads is extremely error-prone especially for open-souce projects where many others are modifying your code. Please stop it.

Love,

A dedicated user

Creating a usable JavaScript Library

Posted on July 2nd, 2008 in JavaScript, Usability | No Comments »

I’m working on small JavaScript library for cross-(sub)domain communication through iframes for users of our platform and my target audience will have little to no JavaScript experience. While I’m going to have extensive documentation, my goal really is to make this library like HTML – easy to understand and pickup, without necessary having to consult a reference. Generally, I want one site creator (we call them affiliates) to look at another person’s site, say “How did he do that?”, view the source code, copy it, and implement it on her own site by altering the code.

My initial setup code (to configure/initialize) the library looked like this:

document.domain='mydomain.com';
Library.init('sub.domain.com',5166);

After looking back at it I thought about converting it to this:

document.domain='mydomain.com';
Library.setCommunity('sub.domain.com');
Library.setAffiliateSiteId(5166);
Library.init();

This is really clean and easy to understand but a little much if I need to add a ton more settings in the future.
My latest iteration looks like this:

document.domain='mydomain.com';
Library.configure({community:'sub.domain.com', affiliateSiteId: 5166, showErrors: true});

Although passing (JSON) objects around isn’t the most easy to understand for people with little or no JavaScript knowledge, it isn’t that unreadable and I really feel the pros outweighed the cons. In some of my methods there will be so many arguments that passing an object would be necessary and the user implementing the library is going to have to learn the syntax regardless. Plus passing data in a regular argument (x,y,z) format isn’t really good for optional parameters of which they’ll be a ton of in this library.
I’ve also decided to remove the initialize method and just auto-initialize once you’ve configured your settings. The more I can take away from the process the better.

Lastly, I added an optional error mode that will trigger an alert if you’re doing something wrong. The idea would be to disable it (remove or set  it to false) when you’re ready for production. This may add substantial bloat to the codebase so it may not stay in – or I could keep this feature in the dev version of the code and recommend affiliates use the production version after the initial creation process.

Note: The library isn’t actually called “Library”. I’m hiding it’s name until it’s ready. ;)