Dynamic CSS and DataURI to the rescue

Paisa

Paisa Consumer Finance Redefined.

Source Files available at Github – DataURI and Dynamic CSS (Download)

How it all started?

We at Paisa are developing a financial Web Application, trying to make it easier for users to invest their money. We, in fact, have a rather nifty way of allowing users to browse through Stocks without the overhead complexity of trying to calculate the figures and stats.

The Situation

We wanted to have an identifying logo for each and every company. Well, that is about 3000+ companies. The logos themselves are small – 24 × 24 pixels each.

The Problem

The size of each logo is rather negligible. So, that’s not the problem. The problem is the number of HTTP calls we’ll have to do fetch these logos. Atop that, we’ve no clue what the user will pull and push the filter criteria to view her results. So, we have a problem of displaying 3000+ images and we’ve no clue when and where they’ll appear.

The Solution (Not)

Initially, I was thinking of doing a rather complex matrix of Image Sprites by combining them in pre-defined groups based on — BSE-100, BSE-200, Alphabetical, etc. However, this introduces useless image downloads (bigger size now due to the combined sprite) and not really that re-usable at multiple places. So, CSS-Image-Sprite was NOT the solution.

The Better Solution

One fine evening, an article popped up on HackerNewsData URIs make CSS sprites obsolete. Then, I knew this is something I can pursue to accomplish what we wanted.

In our situation, as each and every company is accompanied by their BSE Code, we inserted that in a class “bse_xxxxxx” (via Python in our case). We do have a default class, “stock_logo” that keeps a default logo ready just in case we don’t have the logo of the company or is being changed or it simply does not exist. This default class also defines how the logo will be displayed, what will be the padding style etc. The class “bse_xxxxxx” is used only to insert the actual logo as a background-image.

Next, Javascript picks up the IDs of the actual logos to be displayed (in our example, from the special attribute `imgID`) and then constructs a link to a handler which generates a CSS file with Data-URIs embedded in it so that we can download all the required images with a single HTTP call and insert them seamlessly into an HTML file.

Example:

Say the markup is like this –

<li class="img img_500" imgID="500">Foo</li>
<li class="img img_600" imgID="600">Bar</li>

The JS code extracts the “imgID” from the li and constructs a query like the one below and inserts it into the DOM inside a link tag –

stylesheets/logos.css?i=500|600

Then, the special handler generates a CSS file by reading the actual images and base64 encoding them. The CSS file is loaded into the DOM and the new images show up instantly.

Use Cases

The use cases look rather rare and might not be something you can use out of the box. However, we hope this will help someone who needs something similar and hope that this will inspire them in solving their own problem. We’ve use Python for our codes but this can be done in any Server Side Programming Language. We used Closure JS Framework with our Javascript but jQuery, a more common framework, was used in this example.

Thanks

Special thanks to @BGhose who stitched all the solutions together in a deployable and usable form. I had to write only a few Stylesheet sample codes for just few companies to show them how it can be done and @Prajwalit easily threw in some Javascript magic and Sidhant completed the Server Side code. Now, we’re just throwing in the logos in our bucket without caring for anything else except to name them against the BSE Codes for the companies. It will just continue to work like a charm.

Browser Support and the obvious Internet Explorer

The article by Nicholas refers to his CSSEmbed solution which uses MHTML mode to make IE6 and IE7 compatible stylesheets that use internal images similar to data URIs. So, you can use a conditional HTML comment to import IE specific styles.

This is our first cut to the solution, we’ll always be on the look-out to improve the solution (think Caching). If you’ve questions, or just want to say something, feel free to comment.

Source Files available at Github – DataURI and Dynamic CSS (Download)

Ready for LAMP?

I promised about LAMP in my earlier article — The Open Source Revolution and so here am I with the details on LAMP.

We saw what is the Open Source revolution all about and why do we need to know it, if not follow it. Before I move on, I need to address one of the readers who has put a comment saying,
How many people using open source really need source code? A large number of bloggers are using WordPress but how many of them actually modified the WordPress code? Why always think open source?

Continue reading

The Open Source Revolution – all you need to know!

Enjoy Free Beer

Photo by SurfStyle

Free BeerWe love free beer as much as we love free softwares.

Most of us admire free beer and free softwares? The former might not be true for all, but I’m sure you all would agree to the software thing! Has it not been true, more than 60% of the internet users would have not been hitting the websites offering cracks and serials (and they would have not mushroomed to an such an extent. Thanks to Google’s Adsense!)

But what if you are a proud owner of a software — be it an application software, a system software or a game that’s free, and may even be registered to you? This was the idea which created the first impression about Free and Open Source Softwares (FOSS) into the minds of the developers around the world who were busy working great, but under the slavery of softwares which were of closed source and high acquisition cost.

FOSS has risen to great prominence. Briefly, Open Source Softwares and Free Softwares are programs whose licenses give users the freedom to run the program for an indefinite time period, to study and modify the program, and to redistribute copies of either the original or modified program (without having to pay royalties to previous developers).

Open source is inevitable as it gives control to the customer. Bugs are more quickly discovered and fixed. And when a customer doesn’t like how a vendor is serving him, he can choose another without overhauling his infrastructure. No more monopolies. No more
technology lock-in.

What exactly happens with the closed source softwares?

In the proprietary closed source model, the entire development cycle evolves within a single company. Programmers write code, hide it behind binaries and charge the customers to use the software. Thereafter, they add fee for the after-sales support — to fix the software if and when it breaks. No one ever gets to know how bad the software really is!

Taking about Open source, we talk about a large, Internet-connected, worldwide community which backs up the entire project. It involves geeks, students, working-from-home engineers and entrepreneurs, tech savvy moms, and anyone you can think of!

To have an idea of how has the fan following for FOSS increased, look at the graph below. Apache’s Tomcat leads the way. Yes, it’s yet another FOSS!

WebServer Usage Graph

Why Open Source?

This is what RedHat has to say on this;
All software is written with source code. With open source software, the code is protected by a special license that ensures everyone has access to that code. That means no one company can fully own it. Freedom means choice. Choice means power.
The entrepreneurs may still rely on paid products and services but the geeks, students and dare-to-do computer professionals are definitely eying on FOSS. It is like a revolution in the field of computing that people have started to believe in sharing information rather than conserving it or hiding it from the world. This concept has led to a movement — to attain new heights and achieve new goals, which were previously overshadowed due to the reign of closed source softwares.

Talking about the developers and would-be-developers, the platform and support for tools and framework is a key concern guiding them to decide an Operating System. Now-a-days, A new web server infrastructure — LAMP is the cynosure of all eyes.

The acronym LAMP (Linux, Apache, MySQl, PHP/Perl/Python) refers to a solution stack of software, usually FOSS, which is used to run dynamic websites or servers. The well-defined tools of LAMP web development exist in nearly every Linux distribution. They include:

  • Linux operating system
  • Apache web server
  • MySQL database application
  • PHP scripting language
  • Perl programming language
  • Python programming language