just keep tryin' ta get a little better

I was in the office almost all day this past Sunday. Many people asked me: “why”? Here is my answer: I love what I do, I don’t consider my work as a job but something I do because I enjoy it. The fact that I’m living off of it is just a bonus.

It never ceases to amaze me, how almost nobody I know, outside of my colleagues,  likes what he is doing.

I don’t really get the whole new year thing. Everybody is talking about change and good wishes and what not, but I don’t see how anything will change just because of a simple date increment. I guess humanity needs this artificial mile stones to reflect on what has been done and what has happened. Having said that, today probably is a day, as good as any, to look back and think a little.
Since I like bullet points I’ll use those to list what I’ve done in 2009 (in no particular order):

• I finally took some time to actually learn something about JavaScript and I feel in love with it, jQuery has probably helped here a lot and I can’t imagine how the internet worked without this beautiful language in the past.
• I improved my knowledge of PHP, written a brand new framework with which I’m happy with (for now), it even got some praise from someone I worked with for a short while.
• Like with JavaScript above, I took the time to improve my HTML&CSS skills and that worked out quite well. These three things are so easy that nobody actually learns them but just pick up on them as he goes along. Luckily I realized this is a mistake and I am still working on improving my skills in this area.
• I started reading technical blogs and web pages again. I learned a lot from other (smarter) people this way.
• I used memcache on a couple of our projects, great technology.
• I learned Comet and developed chat with it, hackish stuff Comet, but the future is looking bright on the real-time-web front.
• I’ve started to actively participate on StackOverflow (see my badge on the left) again. It’s a great way to brush up on your skills and give something back to the community.
• I’ve started to write here on this page again which is a great way to, hopefully, give back something to the community.
• I went to my first conference (PHP Konferenca)
• I had my first lecture at WebCampLjubljana, and that was a great experience and I hope I’ll have a chance to do it again sometime.
• I was given a task to find another programmer for our company and although that didn’t quite work out in the end, I gained a lot of experience from that process.
• We launched a brand new web page (spored.tv), redid another one from scratch (mojalbum.com) and cloned a couple of others (igre123.rs, mojnet.rs). It’s always great to work on something completely new and, like I said, I had the pleasure to develop two brand new web pages in one year.
• I’ve lost a customer for reasons I don’t quite understand which has hurt me financially but all is well.
• I’ve developed a system that uses the Aliiike recommendation engine
• I’ve written so many lines of code that I’ve forgotten half the stuff I did this year :)

There is probably some more stuff that I can’t remember right now, I’ll edit if I remember something else.
And here is what I’d like to do/improve in the next year:

• I’d like to play with the technologies that are behind the NoSQL movement.
• I will introduce a versioning software to our company (yes I know, shame on me).
• I will set-up a wiki where I will try to document as much as possible.
• I will try to get some more break from my work as to avoid burning out.
• I will improve my PHP/JavaScript/HTML/CSS/whatever else I’m using skills.
• I would like to learn a new programming language.
• I will work on my people skills and try to bring my arrogance down for just a notch :)

Again there is probably something I’ve forgotten to put on that list.

All in all as far as my professional life/career goes this was a successful year. I won’t talk about my personal life here, but I will say that it kinda sucked. That is all.

As I’ve mentioned in my previous post, I had a lecture about Sass at WebCampLjubljana in November. Guys that put the whole thing together now published the videos (every lecture was recorded) and here is my lecture:

It was my first time doing something like this, so I was a wee nervous but I think it doesn’t show (except that I used “amm” as every second word). Since this was also my first *Camp, I also didn’t quite know what the target audience will be, and I think (as some have pointed out) I was a little bit to technical. I should have probably focused more on describing the benefits of Sass and how it can speed up your development, not how to actually use it.
But I hope somebody will find some use of it now that is floating around the internet.

update: Slides (PDF) from my talk are here

I’ve been playing with extensions in Chrome lately. It’s amazing how simple it is to make an extension, if you know JavaScript, HTML and CSS you are all set to go. Read this tutorial from Google to see for yourself. I’m now coding something that will, hopefully, someday become a “new private message notifier” for Mojvideo.com, nothing fancy but a great start for someone who has never developed an extension for anything (well OK I have written some jQuery plugins). And plus this extension might please a user or two when it’s released (once Google includes extensions in the main build of Chrome off course).

While coding I thought it would be cool if I could scroll some text in the, what Chrome calls, badge. Kinda like those signs on train stations:

Well below is the code that achieves that (you can freely use it if you like). The code hasn’t been fully tested but I haven’t seen any problems with it.

function BadgeTextAnimator ( options ) {
	if ( options === undefined ) {
		return null;
	}

	this.options = {
		text: options.text,
		interval: ( options.interval === undefined ? 500 : options.interval ),
		repeat: ( options.repeat === undefined ? true : options.repeat ),
		size: ( options.size !== undefined && options.size > 0 && options.size <= 6 ? options.size : 6 )
	};

	this.intervalId = null;
	this.index = 0;
}

BadgeTextAnimator.prototype.doAnimate = function () {
	var startAt = this.index;
	var cutAt = this.options.size;
	var addBefore = false;
	if ( this.index < this.options.size ) {
		cutAt = this.index + 1;
		addBefore = true;
		startAt = 0;
	}

	var chunk = this.options.text.substr ( startAt, cutAt );

	if ( chunk.length < this.options.size ) {
		var difference = this.options.size - chunk.length;
		for ( var i = 0; i <= difference; i++ ) {
			if ( addBefore === true ) {
				chunk = ' ' + chunk;
			} else {
				chunk = chunk + ' ';
			}
		}
	}

	chrome.browserAction.setBadgeText ( { text: chunk } );

	this.index = this.index + 1;
	if ( this.index === this.options.text.length ) {
		if ( this.options.repeat === true ) {
			this.index = 0;
		} else {
			this.stop ();
		}
	}
};

BadgeTextAnimator.prototype.animate = function () {
	var spaces = Array ( '', ' ', '  ', '   ', '    ', '     ', '      ' );
	chrome.browserAction.setBadgeText ( { text: spaces[this.options.size] } );

	this.doAnimate ();
	this.intervalId = setInterval ( (function ( self ) {
			return function () {
				self.doAnimate();
			};
		} ) ( this ),
		this.options.interval
	);
};

BadgeTextAnimator.prototype.stop = function () {
	clearInterval ( this.intervalId );
	this.intervalId = null;

	chrome.browserAction.setBadgeText ( { text: '' } );
};

And you use the badge animator like so:

var animator = new BadgeTextAnimator ( {
	text: 'this is some sample text', // text to be scrolled (or animated)
	interval: 200, // the "speed" of the scrolling
	repeat: false, // repeat the animation or not
	size: 6 // size of the badge
} );
animator.animate ();

And this is how it looks in the browser:

JavaScript is getting more and more important in the development of web pages and web applications. Unfortunately JavaScript is rather slow on some of the browsers (I’m looking at you IE), so we must strive to make our code as efficient as possible so that our users get a quick and responsive user interface.
I use jQuery on all of my projects so I’ll share some tips on how to improve the performance here.

This first tip is hopefully painfully obvious to most of you. If you are referencing a jQuery element more than once store it in a variable so you don’t select it over and over again (DOM traversing is slooooooow):

$( '.SomeDivs' ).each ( function () {
	var $this = $( this );
	// do something with the current element
	// repeatedly
} );

The second tip is not so obvious. jQuery comes equipped with a powerful selector engine, which allows you to find some element(s) on various ways. And there can be a great difference between doing $( ‘.SomeClass’ ) and $( ‘p.SomeClass’ ).
I won’t go into details here as somebody else has already done this. I’ll just post this quick summary here:

// find element by ID
$( '#d-2642' ).html (); // is (obviously) much faster than
$( '[id="d-2642"]' ).html(); // or
$( 'small[id="d-2642"]' ).html();

// find element by class
$( 'p.p-4781' ).html(); // is faster than
$( 'p[class="p-4781"]' ).html(); // or
$( 'p' ).filter ( '.p-4781' ).html(); // or (this method is the fastest in Firefox)
$('.p-4781').html()

// find element by attribute
$( 'p[row="c-3221"]' ).html(); // is faster than
$( 'p' ).filter ( '[row="c-3221"]' ).html(); // or
$( 'p[@row]' ).filter ( '[row="c-3221"]' ).html(); // or
$( '[row="c-3221"]' ).html();

I will have a lecture next weekend at WebCampLjubljana. I will be lecturing about Sass (Syntactically Awesome Stylesheets), a better way of writing CSS. I don’t know at what time my lecture will be so come and stay the whole day, there will be tons of other great lectures.

I am a little bit nervous since this will be my first talk before about 100 people and in English to top it off (and my English, as you can read, is not all that good). Well I hope I see you there.

Based on recent experience, Opera is a really crappy browser to develop for. It’s developer tools are almost totally useless and it has this wired bugs that you can’t find any info on how to fix them. At least with IE every bug and quirk is covered in great detail on many pages over the internet. Once you start doing something fancy and try to make it work in Opera you are pretty much on your own.

I’ve had this problem that I now managed to solve. If you have a bunch of floated DIVs that need to be sorted using the (excelent) jQuery UI Sortable, then make sure that the “position” CSS property of the floated DIV is not “relative”. The “effect” that you get with “position: relative” was quite “funny”; once you dragged a DIV to a new position it just disappeared into mid air, or it just hid behind the other DIVs at some random position. I mean, how the fuck do you even debug something as stupid as this? And now I have found a new bug while using jQuery UI Draggable/Droppable in Opera. The “effect” is similar; DIVs are now accelerating from the place you drop them to some place that is not on my monitor …

I have updated my showcase page, notice the first item in the list: Mojalbum.com. This web page is not new (it was “born” more than 5 years ago), but our company has bought it earlier this year. And now we have re-realesed it after we have built it from scratch. All that is left is the data (over 4.3 million images), everything else (including the database) is brand new. This is one of the on-going projects so expect to see some related posts in the future.

Some things I learned during the development:

• Don’t use PHP to import 4 million images (read them from the original DB, store them in the new DB, read the original file and resize it to 4 different sizes and store them in a new location), it is just to slow. The import was running for 1 week.
• There are tons and tons of useless one-line jQuery “plugins” out there.
• Don’t care if your JavaScript file is 5 lines long, combine, minify & cache all your JavaScript files so that the browser only needs to make one request to get all the code it needs. Do the same for CSS (haven’t done this for CSS yet).
• Do research for cool new technologies you could use before you start coding. I missed a wonderful opportunity to use Sass because I found it after most of the CSS was already written.
• Cache cache and cache!

I just had a need to change the title of the page with JavaScript, and since I use jQuery I imediatelly wrote this:

$( 'title' ).html ( 'new title' );

and it didn’t work. Ok, how about this:

$( 'title' ).val ( 'new title' );

nope. So after some googling I found out that jQuery just can’t do that. You have to use plain old JavaScript:

document.title = 'new title';

I posted this because I think it’s interesting how one gets to rely on a tool he uses, without even thinking to use the technology on which the tool is build, even if that is clearly the better way to go. Or maybe you just get scared of working with the DOM directly if you use jQuery (or something alike) for some time. Don’t get me wrong, DOM is horrid to work with without some abstraction, but sometimes it works beautifully. But jQuery is working really hard to hide the DOM away from you thus subtly seeding fear into your mind.

it’s no coincidence I always think of Doom when I deal with DOM

There’s a great deal of forum threads floating around internet where someone is asking “how to set a PHP variable from JavaScript/client”. In most cases the author just doesn’t know how the technology (html, JavaScript, PHP, http, …) he is using works. I’m assuming he somehow thinks that if he will (somehow) set/change a PHP variable from JavaScript that it will change the execution flow of PHP for that request (not that he knows what a request is). The only case where this would make sense is in a Comet application where a PHP scripts pushes data in a infinite loop to the client. But I think it’s safe to assume that someone who is asking this type of questions isn’t developing Comet applications.
There are, off course, valid cases where you might wan’t to change something on the server from the client. What’s important is to realize that that won’t have any effect on the state of the page that the user is currently viewing (until the next request that is). In most cases this would mean setting/changing some session variable or something similar that permanently changes something on the server.
One example of this, that I can think of right now, is if you have some controls on a page that control the font size. You’d want to remember what size the user want’s to use, so that he doesn’t have to set it after every click on your page.
I’m going to list some ways how one might accomplish this. I will not give you any example code, because there is no built-in mechanism for this, it depends on what you wan’t. Also there are two scenarios; you might want to make the change right away or your change can wait until the next request.

AJAX method
This is the most obvious solution. You just make a XHR request to your PHP script, pass it some arguments and the script will do whatever you want it to do. This can be used if you need to make the change right away.

Image/IFrame method
If you, for some odd reason, can’t or don’t want to use AJAX, you can create (using JavaScript) a IMG or IFRAME tag, set it’s “src” attribute to your PHP script and voila. Also used if you need to make the change right away.

Cookie method
If you don’t need to make the change on the server at the moment user does something, you can instead set a cookie (again with JavaScript) and then look for that cookie on every request using PHP and if it is present do something.

URL variable method
This is similar to the “cookie method”. But instead of setting a cookie you append (with JavaScript) some variable to every URL on the current page (excluding external links). Then check for that GET variable on every request with PHP and act accordingly. This one is a little more complex and it has one drawback; if a user doesn’t click on any link after you change them you won’t save his changes on the server.

FORM method/link method
I suppose this one is obvious, if something needs to be changed on the server make a FORM that submits to a script, or make a link that point’s to a script that will change whatever it will change. Off course this method causes a full page refresh. It is, however, the only method that does not require JavaScript.