Makl Ndrix

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_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.

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:

• Javascript keylogger
• PHP backend script

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

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.

At Nakheel, we needed to load balance a new sharepoint instance. Our new sharepoint is single sign on, and was running on 2 web servers which needed to be load balanced. We played around with Apache for a while, and it’s awesome proxy balancer, but it gave us the problem that it was always asking for a username and password.

Apache was used, since I have a reasonable amount of experience with it load balancing servers such as Webrick, etc. After a few frustrating hours of messing with NTLM, Christian proposed a few alternatives for this.

Having this in mind, we decided to go for HAProxy, to provide load balancing and a reverse proxy for our sharepoint instance. The good this is that it is a very simple tool, it accept HTTP conenctions, and forward them.

Below is our simplified /etc/haproxy/haproxy.cfg file

global
        maxconn 4096
        user haproxy
        group haproxy
        daemon
        # debug

defaults
        mode    http
        option  forwardfor
        log     127.0.0.1 local0 notice
        maxconn 2000
        contimeout      5000
        clitimeout      50000
        srvtimeout      50000

backend sharepoint
        balance roundrobin
        option redispatch
        cookie SERVERID insert nocache
        server sp1      172.30.16.11:80  cookie spsrv01 weight 30 check
        server sp2      172.30.16.12:80  cookie spsrv02 weight 30 check

frontend httpid
        bind *:80
        acl hosts_sharepoint hdr_end(host) -i intranet.domain.com
        acl hosts_sharepoint hdr_end(host) -i intranet.domain.com:80
        use_backend sharepoint if hosts_sharepoint
        default_backend sharepoint

The configuration is very straightforward, and it got rid of our continuous username/password boxes, especially under firefox.

Hope this helps,
Michael

I love SSH. SSH is the de-facto service for remote server management, especially in a CLI environment.

Being a avid Linux user, and spending quite a bit of time on OSX lately, I often SSH into several servers remotely. Being subject to “username conventions”, you don’t always share the same username across machines. And I always wondered how one could just type ssh hostname instead of providing the username.

Seems that, by creating a .ssh/config file with following contents:


Host server.example.com server
  User username


WIll make life easier, as you can in the future only do a “ssh hostname”. I didn’t know this.

Linked In, the professional social network introduced the possibility of using applications. Just as facebook, myspace and friendster did.

Linked in feels the threat of Facebook, especially combined with applications such as Kuhnektid to increase your professional “visibility” across the work. Most of linked-in users, are on facebook too.

A set of examples are there in their application directory. Tools such as file sharing, project collaboration, or being notified when one of your “contacts” is in the same city as you are there. No sight of a SDK yet, and no superpokes either.
yet.

Let’s see how users adapt to this.

Thanks,
Michael

Microsoft is entering the cloud computing zone pretty soon. It was announced yesterday and will hit the public a month from now with it’s new OS, Windows Clouds (yeh.).

It’s feeling the ppressure from easy to use, browser only, applications such as Gmail, google docs and the like.

I wish Microsoft (or anyone) would come out with an enterprise cloud platform, not on the Internet. I am sure there are more users who wish to make a storage cloud on their network. Or am I the only one?

Thanks,
Michael

CSS Optimizer is a tool that will shrink your CSS files and shave off a few kilobytes. I tested a few CSS files on places.ae and, shamefully, saw an average of 33% improvement that’s possible. (Though not as bad as some other sites: salik (49%) and dubai police (62%)).

Very useful tool, especially on mobile sites or sites where bandwidth is an important factor.