iThemer

"

I decided to write this remark after I overcame one challenge during one of my work tasks. This may seem trivial to some. It wasn't for me. Could be useful to someone else out there.

With my previous projects I had full access to css, html, js, etc. At my new job I have access only to css. At my new job I don't have access and cannot modify html structure. I can request html structure modification, but it will not be so quick.

So my process of redesigning or theming something comes down to this:

  • Copy and paste static .html and save it as index.html
  • Create newfile.css and add your rules there
  • Whatever images needed save them in the same directory
  • When done, submit it to engineering team

This week we're pushing one of the services live and markup is complex enough that we need two additional stylesheets. One for IE6 and another one for IE7. What I needed to do was quickly upload some css updates to live site so I could test them live. But in order for that to work I needed some .pngs to be pushed to live server. As well as .gifs for IE6 because it doesn't support .png transparency.

Why couldn't I just save static html and test locally? Because this page I was working on used quite a bit of ajax and locally it did not work.

All this waiting for taking forever. Eager get this done quicker, I took a break and went to the gym. Gym usually generates some ideas and solves problems for me. And this time proved to be true as well.

I had an awakening!  I realised that .css and images are stored on another server than website itself. So it looks like this:

Next logical step is to recreate "images.site.com" in my local environment without having to wait for engineers:

  • Download and setup light webserver (port :80) on your work computer
  • Go to your host file and setup so that images.site.com will be looking at 127.0.0.1 (http://localhost = http://images.site.com)
  • Now go back to www.site.com — you are looking at a live website, however it is looking for images and css on images.site.com which, remember, points to your computer (default folder of your computer's web server)

No words to describe how easy css hacking goes from this point on. It's a pleasure. Once you're done, give final changes to your engineers.

Finally, I do realise I lucked out that our engineers decided to host images and css at separate (virtual) server. Otherwise this technique wouldn't have worked. 

|