Use sprites to speed up your website

Posted by Michael Hendrickx on May 18, 2012
web / No Comments

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 <img> tags, and use div’s:

<span class="sprite img_phone" />

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.

Posted by Michael Hendrickx on May 14, 2012
misc / No Comments

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?

Posted by Michael Hendrickx on February 16, 2012
fun, internet / No Comments

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. Continue reading…

The Android Ipad

Posted by Michael Hendrickx on January 24, 2012
fun, misc / No Comments

A fake, android powered iPad in Dragon Mart.

Tags: , ,

Privacy in a widgeted world

Posted by Michael Hendrickx on November 29, 2011
internet, security / No Comments

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?

Posted by Michael Hendrickx on October 05, 2011
Javascript, rails / 1 Comment

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 <script> tag, instead of pushing all in a bloated application.js page?

Then again, although I think Rails was what the web community needed, I always had my ideas about frameworks.

Thanks,
Michael

JQlog: JQuery Keylogger, or why not to trust your proxy admin.

Posted by Michael Hendrickx on June 06, 2011
Javascript, security, web / 3 Comments
Note that this post is for awareness and educational purposes only. I do not encourage, and cannot be held responsible for malicious actions using these tools.

The Internet, as it is today, is a mash-up of JavaScript enabled services, often included from external websites. Internet companies offer so-called widgets, which are JavaScript tools that can be used in your own page. Popular examples of this are site analytics (Omniture, Google Analytics, etc) or share-abilities (AddThis, AddToAny, …). It’s by overwriting Javascript libraries on a page, that we can do other things, such as recording keystrokes.

“Overwriting” javascript libraries, or rather “inserting javascript” can be done in several ways. Cross Site Scripting is one of them, but for the sake of this blog post, I will act as a malicious proxy administrator, and overwrite the Google Analytics DNS entry (www.google-analytics.com) and “fake” the ga.js javascript file.

For this, you’d need only 2 files:

This javascript file, found here, holds 3 parts: JQuery, a base64 encoder and the keylogger code itself: Continue reading…

Tags: , , , , ,

7days meta refresh hack

Posted by Michael Hendrickx on April 27, 2011
misc / 1 Comment

The 7 days newspaper was subject to a “meta refresh” hack earlier today, yet it seems to be fixed already. When going to any link, it would point to the following page:

It seems to be hacked by a particular W0LF Gh4m3d, a person who does several defacements without any political agenda. One of his/her hcks was “www.wijnabonnement.nl “, which actually translates into wine subscription, not a good thing putting a Saudi Arabian flag on there, is it?

Kriesi_image_preloader won’t load in IE / Opera

Posted by Michael Hendrickx on April 13, 2011
web / 1 Comment

A friend of mine is using the Newscast for his blog. It is a great looking theme that has an image preloader written in JQuery. It was all looking good in Firefox, but wasn’t displaying properly in IE and Opera.

The javascript fails around line 60 in themes/TFnewscast/js/custom.js:

jQuery('#main').kriesi_image_preloader({delay:100, callback:removeloader});

This can be fixed by surrounding it with a if statement that verifies that you’re not running IE nor opera:

if(!(jQuery.browser.opera || jQuery.browser.msie)){
  jQuery('#main').kriesi_image_preloader({delay:100, callback:removeloader});
}

And that should do it.

Widgets or IFrame hacks, how would we know?

Posted by Michael Hendrickx on January 13, 2011
security / 2 Comments

A particular aspect in IT security is injecting malware into websites. Often leading to so-called “drive by downloads“. This malware is often inserted due to a browser vulnerability which gets executed by, say, Javascript. The latter is usually “inserted” in a legitimate website using a hidden <IFRAME> tag or similar.

How can this be stopped? Modern websites include, because of widgets, several external Javascripts onto their own sites. When going to the gadget popular website engadget.com, a total of 17 hosts are contacted… Continue reading…