Ilia Draznin Online » JavaScript

Write single-page Ajax web applications with Sammy.js

Ilia — Tue, 17 Aug 2010 03:10:24 +0000

Tutsplus.com has a great intro tutorial to Sammy.js, a small JavaScript framework that allows you to write single page web apps, similar to Gmail for example. Because Sammy.js is built on top of jQuery it’s very small, only about 20kb. With this framework you can keep track of your app’s state via hash (#) in the URL, without the need to refresh the site as you go from page to page, and of course it allows you to use the browser’s back button as well.

Check out the full tutorial at net.tutsplus.com.

HTML5 Boilerplate is a kickass base template for website development

Ilia — Mon, 16 Aug 2010 02:18:16 +0000

HTML5 is the future of the web, but building the future is hard work and so it’s always great to get a bit of help with that. Some of that help comes in the form of HTML5 Boilerplate from the minds of Paul Irish and Divya Mani, who have teamed up to bring us “the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site”. Boilerplate is basically a bunch of files, the exact kinds of files you would create as you start working on a new website, except that these already contain the basic starting code and include all the best practices baked in. Things like reset styles,pngfix, HTML5 markup and more. I went over most of it line by line and after a few adjustments based on my own personal preferences I’m going to start using it as the base for all websites I work on.

Some of the reasons Boilerplate is awesome:

The index file has everything you’ll ever need in the , even the stuff you might have not known you needed — like an empty conditional comment so IE doesn’t choke up on its own code.
There are adjustments for mobile browsers as well as a reference to an iphone compatible icon, because even if you don’t design for mobile specifically, it’s nice to provide at least minimal compatibility.
jQuery is included via Google API but it has a fallback to a local version
YUI profiler and asynchronous Google Analytics are included
The scripts have a wrapper for console.log so you won’t break anything if you forget about it (I do it all the time)
In addition to reset styles, a few basic and simple styles are included that take care of common tweaks, such as letter spacing, input fields alignment, link outlines, monospace tags (like and ), and even the helper classes like clearfix.


On top of all that, which already classifies this as awesome, there’s also crossdomain.xml (just in case you want to use it), robots.txt and .htaccess


And they’re not even done yet, as minification script and gzipping are coming.
And just the other day they released an updated “bare bones” version of the the files, without comments. So, you can either get it zipped straight from the site, or go the the github project page.



Custom AddThis share button
Ilia — Fri, 30 Jul 2010 01:46:21 +0000
I wanted to have an AddThis share button that would fit better with the site’s design, and if you’re reading this post on its own page you can scroll down and see what I mean. While AddThis provides plenty of ways to customize their buttons, there is no way to assign your own image to the icon, which means doing it the hard way… well, relatively speaking of course.
There are three main steps to creating a customized share button. There’s some javascript to include in the footer.php, few lines of html to add at the end of your posts, and of course some styles and the icon itself.


JavaScript
You’ll want to add this js code in the footer file as probably the last piece of code. This means it won’t be loading until everything else is done. You can read detailed explanation of what you can do on AddThis’ API page but the short of it is — include this script file “http://s7.addthis.com/js/250/addthis_widget.js”. If you want to keep track of various stats AddThis provides, you’ll need to provide your username. This is done with the “addthis_config” variable. So for example, what I have is



HTML
The HTML is pretty much just a regular link, but with certain href target, class and a couple of special addthis attributes. You can style it anyway you want, as you would any other link. Here’s how said link might look
Share

“http://www.addthis.com/bookmark.php?v=250&username=[your username here]” is the url the link should be pointing to. It must have the “addthis_button” class, otherwise AddThis js won’t recognize it, and then the addthis:url and addthis:title attributes. These attributes are self explanatory, just remember to use PHP so that they are assigned dynamic values. If you have any code, or plugins, that insert tags with attributes or class names into the title (like in my case, wp-typography, which puts  around any caps-only words, like acronyms and such) then use the “the_title_attribute()” function, instead of the typical “the_title()”. It strips the tags and escapes any problematic characters.
CSS
This is really all up to you, depending on how you want to style the button and the tooltips with the various sites. By default the AddThis scripts provides its own style, so if you don’t mind the white tooltip box, all you’ll need to style is the link itself. If you want to style the tooltips as well, then you’ll need to dig into the generated code for them and the styles used by default, and figure out which ones you want to change. (You can check out my styles to see how I gave it a dark theme by switching a few colors.)
If you like optimizing your code you might decide to not include the AddThis styles file at all. You can do this by adding “ui_use_css:false” to “addthis_config”, i.e.
var addthis_config = { ui_use_css:false };

That CSS file weighs in at about 52k, which is actually quite hefty. There are, however, two reasons to keep, instead of removing it.

First of all, by removing it, you will have to provide all the styles to AddThis widget from scratch, as it were, including all those icons for the various services, which are backgrounds of the links, not image tags in the HTML. It’s certainly doable but it’s a hastle that might be not worth it at the end (depending on how anal you are about optimizing your code). The other reason is that, because AddThis is a fairly popular widget, many of your users are likely to have already downloaded that css file when they encountered the AddThis button on other sites. This means it’s cached in the browser and takes little to no time to download.
Now, as for that FB “like” button, looks like it might be tricky…



Simple jQuery placeholder script for input fields
Ilia — Mon, 08 Mar 2010 05:19:35 +0000
Placeholder is a very useful attribute of the  tag that is specified in the HTML5 spec. It provides a text that goes into the field, by default, and is used as a kind of a quick tip for the user about what they should type into the field, such as “type to search”, or “type in username”. The nice thing about “placeholder”, as oppose to, for example, simply setting some value for the field, is that it automatically disappears when the user starts typing something in, but it reappears if the user ends up leaving the field empty. Unfortunately this attribute, and its functionality, is actually not supported by most browsers, including Firefox 3.6 and IE8, it is however supported by Chrome 4, and possibly Safari 4 though I can’t vouch for the latter.
I recently had a few projects that needed this functionality, and while some of them had email, password and other fields that required validation, one needed just very simple text fields with placeholder text. So I wrote this very simple javascript function, using jQuery, to do just that (I’m using jQuery 1.4.2 here).
function setupPlaceholder(inputid) {
	if ($.browser.webkit) return false;

	var target = $('#'+inputid);
	if (target.length==0) {
		target = $('input[type="text"], input[type="email"], input[type="search"]');
	}

	target.each( function(i, el) {
		el = $(el);
		var ph = el.attr('placeholder');
		if (!ph) return true;

		el.addClass('placeholder');
		el.attr('value', ph);

		el.focus( function(e) {
			if( el.val()==ph ) {
				el.removeClass('placeholder');
				el.attr('value', '');
			}
		});

		el.blur( function(e) {
			if( $.trim(el.val())=='' ) {
				el.addClass('placeholder');
				el.attr('value', ph);
			}
		});
	});
}

The code is very straightforward. For one it checks that this is not a webkit browser, if it is I assume it supports placeholder attribute and so doesn’t need the code. Then it checks if an ID for the input was provided, just in case I wanted to do this on one field only. If there is no ID, or if it wasn’t found, it’ll simply apply to all inputs of type text, email or search (HTML5 input types).
When combined with some styles you end up with a nice input field with some “help” text, like this.





The one “catch” with this script is that I don’t check the case where a user would put the same text in as the placeholder text. If the user does this, then when they focus on the field again, the text will be erased (’cause the script thought it’s the placeholder text). To fix that you can add a flag that keeps track of whether the user has edited the field or not.



HTML5 Video and Audio Experiment
Ilia — Fri, 07 Aug 2009 02:09:04 +0000
Gizmodo had a post on an HTML5 experimental page from 9Elements design studio. If you have Firefox 3.5, Safari 4 or latest Chrome build you can check it out yourself here.
It’s really an amazing piece of work — beautiful animations coupled with sound and neat interactivity (clicking the lights displays tweets about the page). All this is done with no Flash, or Silverlight or anything like that, though of course the code that runs all that isn’t exactly trivial, it’s all HTML5, JavaScript and Canvas.
I hope that we see more and more people taking advantage of HTML5. Internet Explorer currently supports only a small subset of HTML5 spec and none of it is for something like this. But if there’s enough push for HTML5, hopefully either the other browsers will leave IE completely in the dust and people will just stop using it (one can always dream), or Microsoft will wiseup and implement proper standards and HTML5 support into IE.
[Gizmodo Post]



Weekend Highlights — Google Wave, HTC Hero, King’s Quest and Screengrab!
Ilia — Sat, 25 Jul 2009 04:39:04 +0000
So this has been a pretty busy week. Of course the biggest news is me launching this site… … or maybe not. I guess it all depends on your perspective. As for the other interesting stuff — Google is sending out 100,000 beta invites to Google Wave in September; HTC Hero has been reviewed by everyone except me; Steam is having a sale on King’s Quest and Space Quests collections, and you know I got it as soon as I saw it; and finally a small Firefox add-on that is going to change my life (not really, but it’s an attention grabber, ain’t it).
Google Wave Beta Invites
Google Wave
Google Wave is Google’s vision for the future of communications — it’s a web application that combines email, instant messaging, social networking, real time collaboration, and more, into one unified, fluid interface. If you haven’t seen the presentation you should check it out at http://www.youtube.com/watch?v=v_UyVmITiYQ, it’s 80 minutes long but it’s riveting (if you’re into that sort of thing that is). This week Google announced that it will be sending out beta invites to those that signed up for Google Wave updates at the end of September. You can go ahead and sign up at http://wave.google.com/. While I’m hoping to get an invitation, realistically I probably won’t have anyone to “wave” to (only a few people I know use gmail and it’s unlikely we’re all gonna get invites) so my experience will be limited. Really, I’m just looking forward to this thing going public and reading what people have to say about it.
HTC Hero
Images courtesy of Engadget.com and HTC.com
I’ve been looking forward to the HTC Hero because I thought it might finally put Android in the spotlight for the general population, and it looks like it just might do that. The reviews are for the most part positive and everybody is really liking the new interface. Which I think for the average person is the most noticeable, and thus, important part of a smart-phone. Especially since the iPhone showed everyone that it’s possible to make a great interface on a 3 inch screen. The home screen is very striking — large beautiful clock with weather, colourful icons, and a blurry, unfocused background that makes everything else really “pop out” on the screen. I am a bit surprised at the lack of any flash for the camera, seeing how it’s a 5MP camera — seems like a shame to waste a good camera without any flash support.
It’s just a shame it won’t be coming to Canada any time soon. I really need to get myself a smart-phone but unless Bell switches to GSM by the end of the year Palm Pre is not happening for me, I’m not getting an iPhone, and that only leaves me with HTC Dream, which is now a last year’s model.
King’s Quest and Space Quest collections on Steam
King’s Quest VI and Space Quest Collections
I’m a huge King’s Quest fan, King’s Quest VI: Heir Today, Gone Tomorrow in particular — that was the game that introduced me to PC gaming proper, till then it was just your various Pac-Mans, Super Mario Bros., Asteroids, and the like. I absolutely fell in love with that game and have been a big adventure games fan since then. I also played the 5th, 7th and 8th game in the series (Mask of Eternity was a disappointment — not a proper King’s Quest game) but 6 always remained my favorite. As for Space Quest, I only played the 6th one but really enjoyed it — it kinda reminded me of the Monkey Island series, with it’s humor and bizarre situations. I am really looking forward to playing through both series and the only question is — how many cups of coffee will it take?
I also just discovered that the first three King’s Quest games have been upgraded by fans to feature better graphics, and even some voice work, and are available for free. That was an extremely pleasant surprise. I haven’t yet downloaded and tried them but I’m definitely looking forward to that. The first two are available from AGDInteractive Studio, and the 3rd one from Infamous Adventures.
Screengrab! add-on for Firefox
This is a little add-on that I should’ve discovered long ago but such is life. It puts a small icon in FF status bar, which allows you to take screenshots of a site you’re viewing. You can either make a selection or tell it to grab the whole page, and then you either copy it to clipboard, or save straight to a file. This kind of tool really speeds up web design work. If you missed it like I did you can grab it on the Firefox add-ons page.