So it thrills me to no end that there is now a Node.JS executable for Windows.

Of course, things kind of suck when you don't have the super simple power of NPM, but that's life for ya.

I understand the basics of Node.JS (If you've ever touched JavaScript, its hard NOT to); but some fine details such as templating elude me.  Maybe you're not supposed to template?  Maybe you're just supposed to serve up some static HTML that then queries the Node.JS server for the information it needs?  Oh.. now there's a thought.. program a single frontend that just talks back and forth with the backend.  Kind of like Google+, actually.

Is that what I'm supposed to do?  God I love this language.

The fix was simple, replace the current four line inclusion code with:

Code block
   
<script type="text/javascript">
	var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
	var script = document.createElement("script");
	script.src = gaJsHost + "google-analytics.com/ga.js";
	script.type = "text/javascript";
	document.getElementsByTagName("head")[0].appendChild(script);
</script>

This will work fine, unless of course you have no head tag.  In which case you should replace getElementsByTagName(“head”) with getElementsByTagName(“html”).

The code should now be valid XHTML strict, and I know longer use innerHTML for each list element.  Instead, I’ve moved from adding the list elements via innerHTML to DOM Manipulation (appendChild).  I’m not sure exactly what the benefits of this are, but I’m sure they exist.

As the previous HTML code seems to have been broken, this may cause some rendering errors for a few websites, but all in all it should work better than it has previously.

I’m not writing out a whole changelog, I’m just going ahead and saying that some changes were made – and hopefully Simple Twitter should work a lot easier for everyone using it.

Visit my Sandbox to see the code in action, or continue reading for some code excerpts.

One interesting thing about this new API is that it not only requires a user to authorize it, but in order for an authorization click to appear, the user has to do something.  You can’t make it appear as soon as the user visits the page, they have to click something or trigger an event.

For the sake of this example, lets say the user clicks a link that triggers the JavaScript function “notification();” and we want to show a notification onscreen.

Code block
   
function notification()
{
	if(window.webkitNotifications) // If we have the Notification API
	{
		var nc = window.webkitNotifications; // Set the API to nc for easy access
		if(nc.checkPermission()) // 1 = Not Allowed, 2 = Denied, 0 = Allowed
		{
			nc.requestPermission(myNotification); // Request Permission with a callback to myNotification();
		} else { myNotification(); }
	}
}
function myNotification()
{
	try
	{
		var nc = window.webkitNotifications;
		var notif = nc.createNotification(null,"Notification Title","Notification Body"); // Parameters: string URL_TO_IMAGE, string Title, string Body
		notif.show(); // Show Notification
	} catch(Err) {
		alert(Err.message); // Will output a security error if we don't have permission.
	}
}

As you can see from the code, its a fairly straightforward API for showing desktop notifications, and once the user has given the website permission, they can be triggered any time. Up to five notifications can appear, and the rest will be kept in a queue until the others are dismissed, either by the user or by calling .cancel(); on the notification variable (notif in this case).

Code block
   
$(document).ready(function() {
	// Google Analytics
	var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
	var script = document.createElement("script");
	script.src = gaJsHost + "google-analytics.com/ga.js";
	script.type = "text/javascript";
	document.getElementsByTagName("head")[0].appendChild(script);
	try
	{
		var pageTracker = _gat._getTracker("CENSORED");
		pageTracker._trackPageview();
	} catch(err) { /* Do Nothing. */ }
 
	// Facebook Share
	var script = document.createElement("script");
	script.src = "http://static.ak.fbcdn.net/connect.php/js/FB.Share";
	script.type = "text/javascript";
	document.getElementsByTagName("head")[0].appendChild(script);
});

As you can see, I wait until the document is loaded using jQuery’s ready method, and then create elements for both Google Analytics and Facebook Share, before appending them directly to the <head> of the website.  Keeping the code clean, reducing bandwidth usage for non-JavaScript users, and even making Google’s code cleaner.  (By changing Google Analytic’s default code from document.write to DOM Manipulation.

So, Never again will I feel the need to insert external script tags at the bottom of the <body> just so that the rest of the page loads before them.

Note: If you’re not using jQuery, document.onload = function() { /* Code */ } works just as well, I promise.

Thanks to twitter user @paperfairy, a bug was discovered on my Command Line Twitter Client, TwCLI.

For some reason, when submitting a command in Chrome for Linux, the page would simply refresh, and the command would never be sent.  At first, I had no possible way to track down this bug.  I didn’t have a linux box (with a GUI, anyway) so I simply told him that it was unfortunate, but it’d have to stay a bug.  Until a recent post on lifehacker brought my attention to Portable Ubuntu. I immediately installed it, opened up the Chrome website in Firiefox, installed Chrome Beta, and headed over to TwCLI to see what was amiss.

Of course, it was a single line in a detection script to send Geo-Data to Twitter (as long as the user approved it, of course):

else if(google.gears) {

This single line was throwing an exception I hadn’t encountered in other browsers – Google wasn’t defined.  Oddly, I thought it would handle that properly, since google wasn’t defined, it would just skip over it, but instead it threw an error and halted all further javascript code.

The fix was simpler than tracking down the bug, I simply had to add this to the start of the javascript code:

try{ if(!google) { google = 0; } } catch(err) { google = 0; }

And voila, I had both a check for google, and a catch if it decided to throw errors while checking for it.

Whether this is a Chrome bug or not, I don’t know – I simply don’t know enough about JavaScript in order to say so either way.  But, are undefined variables supposed to throw errors, or are they simply supposed to return false?

Usage:

• Call createLightbox(); to create the actual lightbox element (does not display anything).
• Call fillLightbox(string content) to fill the lightbox with RAW HTMLor

  Call appendLightbox(element childElement) to append a DOM Node directly into the lightbox.

• Call setLightboxSize(int width, int height, null, string unit) to set the width and height of the lightbox.  Unit will default to pixels “px” if not specified.
• Call showLightbox() to actually display the lightbox to the user.
• Call boolean lightboxVisible() to determine if the lightbox is still visible or not.
• Call hideLightbox() to remove the lightbox from view.
• Call cleanLightbox() to delete all content inside the lightbox container.

• Support for Twitter Lists
  • Uses the same format as twitter, for example @navarr/shogi
• Support for Turled Profiles
  • Using the variable &turl=true will link @replies to turled beta-profiles instead of twitter profiles.
  • Surprisingly, this doesn’t break in co-ordination with lists.  It just doesn’t display the list.
• Uses Search API
  • We moved to the search API for retrieving tweets, as well as pulling a JSON file instead of XML.  This MAY BREAK your current implementation (though it should not).  If it does, you can use the older script by pulling old.php from the server instead of index.php

Yeah, that’s it.  Was thinking about making the default for &turl being true instead of false, but figured that’d probably annoy more people than it was worth (at least until I get turled to be of more use as a twitter replacement).

However, it is kind of a burden to do this every time you want to embed a mini player (you have to edit at four fields in the HTML!)  So to simplify this process, I, like any programmer before me, created a generator.  Just type in the URL to the YouTube video and press make, and you’ll get a preview as well as the cross-browser HTML-esque mess of a code to embed.

Of course, if you’re truly lazy, just drag the bookmarklet below to your bookmark bar in your web browser, and click it on any YouTube video and you’ll be taken to the page with the code already generated.

Generate Mini-Player

Source code is available via link at the bottom of the page.