Happy New Year 2010!

May the 2010 year bring you happiness and joy. And may all your dreams come true, like IE dissapearing from the face of the Net. This would be nice...

PNG study with CSS Sprites

While writing my first CSS Sprite article, I created a simple, in no way efficient, sprite generator. Last week I needed to show some numbers to the project manager to convince him the sprite technique is worth using, so I modified a bit the program to arrange the icons in different layouts and show the size savings.

Want to know with which layout I improved the file size by 78.6%?

Problemas y números

Inicié este blog hará cosa de 9 meses. No con un deseo comercial ni para obtener visitas a cascoporro, si no como terapia. Mi pretensión era la de practicar mi inglés mientras compartía los problemas que me iba encontrando en mis andaduras con la web. Pero está claro que algo falla en ese enfoque: Si ya es complejo mantener un blog en un idioma que es natural para uno mismo, más complicado es hacerlo en una lengua distinta.

¿Debería seguir, como hasta ahora, publicando en inglés? ¿O quizá ahorrarme molestias y expresarme en mi propia lengua?

Reset your CSS

Ever wanted a website that looks the same in all browsers? Tired of fighting slimy monsters while searching for excellance? Do these differences in UL padding make your head explode? So it's time for you to apply some CSS Reset Magic.

When it relates to CSS reset, there's a bunch of literature, do's and don't's, faqs and howtos, so this one won't take us too long.

Progressive enhancement example: Language Selection

It's easy to get lost in the Internet while looking for information. It's one of its greatest points: There are thousands of millions of websites out there. Information is the key purpose of the net and nobody can deny it.

But, as in many other cases, quantity does not equal quality. Poor designed websites, too bloated, with many inlined styles or little semantics (if none), are begging for trouble: Their information have lost accessibility.

Frames without frames. AJAH selective insertion

And W3C said Let there be frames, and there was frames, and they were used (and abused) and it was good, and W3C said This is right (we're gonna deprecate them soon) and there was much rejoicing.

Is not new that web developers hate all that's made with frames. They're a burden nobody wants to carry, so confusing, so "nineties", so... well, deprecated, that's it. So you may think I'm just delving into the past. Frames, as we know it, are dissapearing into extinction but, the main idea, more or less, is still needed nowadays.

Refactoring code smell

I work every day with PHP, developing management tools for the company where I work, but when I accepted this job I was a pure noob in this language. In fact I was hired for some C++ programming, but soon my tasks evolved so that wherever there's code, I was there too. So, learning PHP was the logical evolution in this case.

As you can imagine, being a PHP developer fresh from the oven, I ended up committing many atrocities in my code. And now is when, with some more maturity and knowledge, I can detect, by sense of smell, where those design flaws are. It's a fact, bad code smells.

Real IP Problem and X-Forwarded-For header

Someone has been in a situation like this? I bet it

• We need a way to know whether a user is logged in or not.
• Easy as pie. Go on sessions with him.
• We can't rely on the user's browser to allow cookies.
• Well, we rely on the user's browser to have JavaScript, so why...?
• I said no cookies. Use the IP address.

HTML Tip: Think semantics

As said in Best Practices for Building Web Applications, one of the things to have in mind when developing Web Applications (or any simple HTML website) is to Think on Semantics. Let's see how this can boost our websites and raise them to the top.

CSS Refresh

While developing a web application, I often need to reload a whole site for every change I do in its CSS file, only to test it. Under Firefox I used to change manually the href in links (well, in fact, with Firebug) to add some query string, in order to by-pass the cache and request the brand-new version of the file. This job was often harder than that, since I'm still maintaining some old school applications using frames (Eek!).

While writing my jQuerify Bookmarklet I thought this CSS refresher is the perfect job for a bookmarklet, so I ended writting the CSS Refresh Bookmarklet.

Best Practices for Building Web Applications

If there's something I've learned during my developer life, is to make a list of basic rules and to be faithful to them. These rules are the skeleton on which all my own applications shall be built. Of course, these rules also evolved as time goes by, growing stronger or falling into obsolescence, often unpredictably.

Web development is not different from C++ coding, so it also has its own ruleset in order to avoid "bad habits". These are my rules, tell me yours.

swfLink: Simple, unobtrusive, Flash embedding

Update:Now returns the resulting <object> on success

I was in need of some simple Javascript to add SWF objects. Hoping for a simple, cross-browser, ie-proof, eolas-respectful and graceful-degradable solution is a difficult praise to attend, so I began, as always, to write my own.

The routine is so simple because it does nothing more than add a <object> tag so it can embed the flash movie. No plugin or software checks. I didn't need them.

CSS, Sprites and arcane winged demons

Maybe it's my fault, maybe not. The truth is that I had some problems optimizing my webserver load with CSS Sprites, a nice, clean technique to max the efficiency of every image. Let's go into details:

I used a set of flag icons (taken from Fam fam fam) in a site admin zone. There are 247 flags, sweet and small (16x11) and that's all I needed. In this admin you can browse through tables with tons of data, to the point that all of the flags may be shown at once. More than once, in fact. So in a clean-cached browser you probably end requesting 247 images from the server. Even if the only answer were a 304 Not modified (in another scenario) they're too many requests. No way, being the "optimizer" I am, I need to change that.

Clearing floats with no clearfix

Oh, floats. Every web designer have worked with them. Floats let you rearrange the flow of elements. They're powerful, they're useful, they're... painly buggy on old browsers, I know. But they're one of the CSS2 most used properties, so they deserve some respect.

Let's make some fun with floats. We will design a simple menu from nothing more than pure HTML tags and some CSS magic.

jQuery Bookmarklet

It's kind of an obsession. You mix a somehow usual browsing session with some GREAT tools like a real browser, Firebug and jQuery and - Voilà! - you can do virtually anything.

You can fight the DOM, add events, modify every web as if it was your own. A la Seamonkey, if you want, but more hand-made. Please welcome... jQuerify.

Subclassing and Extending Array

Lately I'm spending some time coding some libraries in JS to achieve a solid & cross-browser framework. Not every browser out there supports the latest Javascript version, so a fallback solution is often needed. Some examples are the iterative methods in Array, as introduced in JS 1.7: every, filter, forEach, map, some, indexOf, lastIndexOf.

So, as extending a built-in is often a bad idea, the direction taken was to create a subclass of Array and extend this one. No wonder it's a hard path, but we can walk it on our own.

Cross-browser inline style with jQuery

Currently I'm developing some web applications for internal use, porting from some old ones.

I'd love jQuery, the jQuery way to do asynchronous requests is brilliant. Then I developed a plugin for my apps. Basically, it "automagically" catches all clicks on links, sends an AJAH request and loads the response inside a container.

The problem came when the response contains <STYLE> or <LINK> tags. While using Firefox and Opera all was great. But, oh $h*t, no style was applied with IE6, IE7, Chrome or Safari. I was thinking that was my plugin's fault, but when I test the use case without it, the problem remains. No style applied.

Like a box of chocolates

This is my first attempt in blogging about my work, not my life. Ironic as it may appear, this blog will have a life much larger than all my past attempts.

I will blog about one of the things that amazes me and gives me more satisfaction. And no, I'm not talking about sex, you perverts (although it's one of those things), I'm talking about coding.