Makl Ndrix

Use sprites to speed up your website

Michael Hendrickx — Thu, 17 May 2012 20:55:26 +0000

To make your website perform faster, few things can be done serverwise, some can be done client wise. Aside from Javascript and CSS minifying, an often overlooked item are the creation of sprites. Sprites, are “combined images” of your images.

On places.ae, we use many small icons which add up to multiple downloads of images on our website. Every download takes time even though HTTP persistent connections are enabled. These timings can be minimzed using springs.

First off, we streamlined to use 16×16 pixel icons, so this allows us to make a nice square with several area’s of 16 by 16 pixels. Using GIMP you can help by enable the grid view, and setting the grid (in Image -> Configure grid) to 16 by 16 pixels, or 8 by 8, to determine the middle easier.

By adding all our icons into this image, we can reference to them using CSS:

/* sprite images */ .sprite { background: url(/images/sprite.png) no-repeat; width: 16px; height: 16px; float: left; margin-right: 10px }


.img_warning { background-position: 0px 0px }

.img_location { background-position: -16px 0px }

.img_phone { background-position: -32px 0px }

.img_web { background-position: -48px 0px }

.img_fax { background-position: -64px 0px }

.img_menu { background-position: -80px 0px }

.img_dollar { background-position: -96px 0px }

.img_calendar { background-position: -112px 0px }

.img_search { background-position: -128px 0px }

.img_close { background-position: -128px 0px }

.img_check { background-position: 0px -16px } .img_error { background-position: -16px -16px } .img_clock { background-position: -32px -16px } .img_heart { background-position: -48px -16px } .img_thumbsup { background-position: -64px -16px } .img_thumbsdown { background-position: -80px -16px }

Finally, in our code, we can eliminate the many tags, and use div’s:

Many may know this already, but I wanted to share this quick and easy introduction to sprites.

Why this kolaveri 3? Living up to the hype.

Michael Hendrickx — Mon, 14 May 2012 06:23:32 +0000

A few days ago, I read a post where the founder of the video and photo sharing application Color gives feedback on the much talked about 1 Billion dollar Instagram buyout.

Color came little over a year ago, creating great promises towards sharing pictures with your fellow nearby smartphone users; rather than facebook’s lame and weird single perspective on life.

Fast forward a year, and unlike color, Instagram became a hot entrepreneurial topic; how can a iOS-only photo sharing application be acquired for 10 digits. It seems the latter remained humble and focused on the product, refrained from passing to many negative comments and so on, and it created a nice product, rather than creating a hype.

Another hype phenomenon can be seen in the indian tamilian movie 3, the movie of the internet meme “Kolaveri D”. Although the tamil song created a large hype, the movie seemed to be less successful. Much different to color, there was no arrogance or anything; the movie simply didn’t live up to the hype.

The iPhone 4S was a bit of a let down, not because it is a bad device, yet the world was expecting an iPhone 5. It (the world) created a hype.

Although I’m not really in any position to say how to run your business, but ease down on the hype. Create a kick-ass product, the hype will just be substituted by word of mouth. And that’s what you want.

How to fake it with Alexa?

Michael Hendrickx — Thu, 16 Feb 2012 00:54:19 +0000

Many people ask me why their website has a low Alexa rank. Alexa, an Amazon-owned analytics service shows and ranks different websites and can even tell one the audience their website is getting; including gender, education and age groups. The question often remains; How does Alexa work? Do they monitor the entire Internet?

The answer is a lot less mythical; it uses statistics from users who download the Alexa Toolbar (and fill in their gender, education, etc) and visit your website. It is commonly statistical sampling and has been done for the past 60 years for tv shows.

Being an engineer at heart, How does Alexa work? A little analysis at hand. Furthermore, with some scripting, you can boost your Alexa ratings quite a bit.

When the Alexa toolbar is downloaded, it creates a random 14 character identifier which identifies you as a unique user. The toolbar installation requires you to fill out some demographics, being gender, age group, race and so on. The unique identifier is replaced hereafter by:

POST /php/demographics/index.php HTTP/1.1
Host: www.alexa.com
Referer: http://www.alexa.com/toolbar/success?session=&plugin=alxf-2.14
Cookie: aid=
Content-Type: application/x-www-form-urlencoded

amzn_id=&aid=&browser=ff&plugin=alxf-2.14&gender=2&age=35-44&
income=60-90k&ethnicity=African+American&education=College&has_children=n&
install_location=work&zip=90210&version=6.5

This creates the demographics for a chosen . You have a now a user “created” in the system which you can use for further data mining.

Subsequent requests, when somebody visits your website are done in form of GET requests to data.alexa.com, where clicks are recorded. The full URL is as follows:

http://data.alexa.com/data/?cli=10&ver=alxf-2.14&dat=ns&
cdt=rq%3D11%26wid%3D13021%26s%3D200%26ttl%3D1000&ref=http%3A%2F%2Fwww.referer.com%2F&
url=http%3A%2F%2Fwww.yoursite.com%2Fdir%2Ffile.html

This request “logs” a request to www.yoursite.com/dir/file.html, coming from www.referer.com. It collects a few timestamp data as well to track how long users stay on your webpages, etc.

In essence, a web master could forge requests to this URL (in a tag for example) to boost his/her site’s reputation on Alexa. To create a better varied audience, one could create several new “id’s” – dynamically using a script that performs the HTTP POST on the demographics gathering page – and include small html snippets to make ones site more popular. On top of this, knowing you can create your demographics, you can -virtually- make your site a lot more popular with a particulr gender, age group, race, etc.

In the end, you’re still serving your pages to users, it won’t attract any further visitors. You’re just faking that more users who visit your website also report this to Alexa – without them installing any toolbar.

Thank you,
Michael

The Android Ipad

Michael Hendrickx — Tue, 24 Jan 2012 06:46:28 +0000

A fake, android powered iPad in Dragon Mart.

Privacy in a widgeted world

Michael Hendrickx — Mon, 28 Nov 2011 23:46:34 +0000

The Internet as we use it today, has very little privacy left. We all say that Facebook and Google know “too much”, only to realise that they don’t know anything aside from what we feed them, or do they?

Welcome the “widget”. A piece of html (with css, javascript..) to be included in another page, often to socially spread content (Facebook Like, Google +1, LinkedIN share, etc), or other added value (Analytics, sharing, etc) will tell many “providers” what content you are accessing.

It is difficult now to find a popular page without any widgets. Pages pack “like” buttons, “share this” widgets or tweet options to give you a instant way of sharing their content in your social network – banking on good ‘ole word of mouth marketing. If your friends like something, you might be interested also, even if it was only for peer pressure.

The problem that when something (such as the widget) is requested, browser data (such as your session’s information and the referer) also flow to the widget provider’s webserver. This provider will know what page you’re on and usually who you are (assuming you stay logged in into google, twitter, facebook, etc)

Thinking “but if I like a page, facebook will know it anyways“. This is true; the problem lies in the fact that providers know you’re accessing a page, regardless of performing any action (liking, sharing, etc). If you read X number of pages on a new model smartphone, chances are big you want to buy another one – and targeted ads become more… targeted.

From that advertising point of view, it creates mixed feelings. It’s like somebody overlooking your shoulder while you’re reading a magazine and changes the ads accordingly to which article you were staring at longer.

From a website owner point of view, this does create added value. If you can convince to have websites publish your widget code, you can track people’s interests, even before they ever came to your website. This (unidentifiable) user eventually ends up on your web app, identifies him/her self and you have great information. I’m just not sure how ethical this is, and even though Facebook’s outdated law enforcement guidelines don’t hold “webpages visited” in particular, they would have access to it.

Is this such a bad thing? Perhaps. “Widget providers” offer added value to website owners, who in turn decide what goes into their webpages. Vague idea, but maybe a browser extension could prevent the loading of these widgets, replacing them with a pseudo equivalent (fake buttons, etc) and only dynamically load the target script upon a click?

Food for thought. Now, look at the buttons below, they know you’ve been here already.

Rails, what’s wrong with serving static JS and CSS files?

Michael Hendrickx — Tue, 04 Oct 2011 21:40:32 +0000

For a new web project, I’ve been looking at Rails 3.1, the latest update of the popular Ruby on Rails web application framework.

Although I just started on it, and haven’t seen all the goodness, one thing that raised my eyebrows is how static content a la CSS and JavaScript is handled, through an asset pipeline.

In a nutshell, since I’m doing the JQuery bit of the site now, wouldn’t it make much more sense to fetch the libraries from CDN’s, cache the remaining recurring libraries in Nginx (or Apache), and leaving the page specific bits in one big