Negative text progress bar tutorial

Design, UI

A very good friend of mine (the founder of CheckErr, an unprecedented site analyzer tool) suggested I improve my progress bar design by making its text change color pixel by pixel as the progress bar passes through. The idea is to have two identical divs on top of each other with different text and background color and slowly extending the top one over the other. I have not yet seen such a progress bar anywhere on the internet, it might even start a revolution! :O

Uploading file: awesome_replay_from_golden_age.w3g


<div class="progress-container">
	<!-- span element is needed to fill the padding (without it, that padding would be background colored) -->
	<div class="progress-bar positive"><span></span>Uploading file: awesome_replay_from_golden_age.w3g</div>
	<!-- javascript is going to fill the second element with the same text but with whitespace converted to non-breaking spaces -->
	<div class="progress-bar negative"></div>

LESS css:

.progress-container {
	margin:40px auto;
	border:1px solid rgba(0,0,0,0.25);
	.progress-bar {
		&.negative {
		&.positive {
			span {
				padding-left:50px; /* need this span to fill in the left padding, otherwise it would be background colored */

[animating the width just for the sake of presentation]

$(function() {
		width = 0,
		$barPositive = $('.positive'),
		$progressTexts = $('.progress-bar'),
		baseText = $progressTexts.eq(0).html();

	// replace spaces of the inner nodes with non-breaking spaces
	$progressTexts.each(function() {
		$(this).html(baseText.replace(/\s/g, '&nbsp;'));
	// just for presentation
	function increaseWidth() {
		if (width > '100') {
			width = 0;
		$barPositive.eq(0).css('width', width + '%');
		width += 0.25;
	setInterval(increaseWidth, 50);

I did this for a file sharing app I'm working on. I'm only scratching the surface of the HTML5 File API, but it has some great tools to implement a fully functional upload progress bar like this one. Here is a great tutorial from SitePoint, in case you wish to read more.

HTML, LESS, javascript

Slow Magento and growing wamp/tmp directory

Magento, WAMP

I'm developing a custom Magento theme. Well, trying to... I'm only getting familiar with how the system works and I've set up a webshop on localhost using WAMP. The problem was that the store was insanely slow. Page loads took 5-10 seconds, and saving changes at the backend were easily 10sec+. I found out that Magento was indeed quite resource hungry but nothing I found on stackoverflow or other forums seemed to help. Also my temp wamp/tmp directory grew by Gigabytes since I started using Magento.
Then I came across this thread. It says we should try disabling the profiling in Xdebug.
And like magic, it solved both of my problems. Magento runs 4-5 times (!) faster now, page loads take max 2-3 seconds and the tmp director isn't growing like a mushroom anymore.
I'm only putting this up because it took me quite some time to figure out and it may help other magento newbs.
It also shows that I should learn a lot more about the PHP extensions, caching, profiling and benchmarking.

Magento, webshop

Writing crawlers

web, php, cURL

I'm currently reading the book called 'Webbots, spiders and screen scrapers - a guide to developing internet agents with PHP' by Michael Schrenk and I really enjoy it partly because it is something new to me and partly because the author seems to pay attention to many small details. I have certainly seen cleaner code than in the book but it makes good points and shows simple yet useful examples.
Here is something interesting I learned today, that I'm not sure I would have learned otherwise:

"The last aspect of verifying that you're using correct URLs is ensuring that your referer values correctly simulate followed links. You should set the referer to the last target page you requested. This is important for several reasons. For example, some image servers use the referer value to verify that a request for an image is preceded by a request for the entire web page. This defeats bandwidth hijacking, the practice of sourcing images from other people's domains. In addition, websites may defeat deep linking, or linking to a website's inner pages, by examining the referer to verify that people followed a prescribed succession of links to get to a specific point within a website."

There is one thing I don't quite understand yet. The book is based on PHP/cURL.
Now cURL seems to be very useful and much more capable for data transfer than the built in PHP functions (according to quite a few stackoverflow threads and the PHP manual too) but the structure of the PHP cURL implementation (is that phrase even correct?) in my oppinion begs for an Object Oriented design. Yet I only found one OO PHP cURL library on github.
What do others use? Own libraries? Or they just accept cURL in PHP as it is? Do they even use cURL? I guess cURL was around way earlier than PHP became OO but even if it is so, someone could have been bothered to make the PHP cURL extension officially object oriented.

web development, crawlers

Infinite Grinder Tunes


In online poker - or poker in general - the term 'grinder' or 'grinding' refers to the very monotonous and long lasting activity of playing many hands over the course of long hours. I hate poker jargon with a passion but find this one rather fitting. It's quite appropriate for writing code as well.
When I do something that requires a lot of concentration I either need complete scilence or a very monotonous 'noise' or some similar music to. I recently found echo nest, a group of fantastic software devs who are concerned with analyzing music. One of their creations was this. The Infinite Jukebox. This is how it works: analyze music -> find similar or identical sections -> randomly but seamlessly jump through these sections while playing -> never stop playing it without us noticing the jumps.
Nothing would be better to produce good 'grinder music': it filters out background noises, it's fairly monotonous, thus not distracting (imo), it helps me stay focused.

Here I'll post some of the tracks I find very good to listen to while coding, studying or doing stuff that requires concentration.

My infinite tracks:

as of may 2013, you have to use Google Chrome or Safari!

I'm also a great fan of white noise


music, poker, programming