Saturday, 20 February 2010

Painful PNGs

So my latest website I'm building is a portfolio site for a makeup artist. Cue lots of lovely photos of beautiful models in lovely frocks etc. I promised the designer we could do a slideshow of images behind a custom "scrolly" frame, thinking I'd use CSS absolute positioning to layer the transparent PNG frame over the top of the portfolio jpegs (incidentally being animated using jQuery)
However there have been a few problems with this approach:
The initial solution was to use a png image for the frame - but this appeared a slightly different colour on both IE7 and Safari (but only on the Mac) but fine on all other browsers. This different colour was only a few shades darker but made it stand out against the background colour of the page.

So I ditched the idea of pngs and changed to transparent gifs for the frame.
But this caused even more problems. Gifs don't take well to being sliced in directions other than horizontal or vertical - they leave horrid jagged pixelly edges. So I had to make an artistic decision (me - a developer too!) to ditch the funky asymetrical hole the designer had wanted to use a more square shape for the frame hole. Which worked for me.

No - designer not happy, so I went back to drawing board to see if I could find the source of the problem with the original Pngs.

The Problem with Pngs is that every browser and platform tries to interpret them differently.
I learnt this from the excellent article here:
http://morris-photographics.com/photoshop/articles/png-gamma.html

Basically when I was doing a "Save For Web..." from Photoshop it was adding in lots of extra info that was making the browsers think too much about how to display that PNG

The solution was to use a command utility called "PNGCrush" which allows you to remove the extra information - which should hopefully allow the processed png to appear more consistently across most browsers (note: I don't guarantee it will work for you!)
The source code for PNGCrush can be found here:
http://sourceforge.net/projects/pmt/files/pngcrush/00-1.7.7/pngcrush-1.7.7.zip/download

For people (like me) who don't know one end of a compiler from another you can download the Windows executable here (albeit a later version):
http://wareseeker.com/download/pngcrush-1.6.4.rar/356317

The moneyshot command you need to execute is:
pngcrush -rem cHRM -rem gAMA -rem iCCP -rem sRGB infile.png outfile.png

You can see the results in the (still work-in-progress) website here: www.bGorgeousMakeup.com

Friday, 12 February 2010

Storing FTP details for client sites - a breakthrough!

I don't know about you but I need passwords daily - hell even hourly. To login to clients FTP sites, to login to CMS's, PayPal accounts, MySQL databases.At any one time I have about 10 current passwords running round my head.
Then - boom - like a bolt out of blue I'll get a request for either some work on an old web site - or a client who's forgotten how to login to SagePay.
So what I would normally do is trawl through all of my old emails where they might have sent me a copy of their login credentials (and I might have had enough forethought to mark with a reg flag in my inbox so I knew it was actully something important) - but all in all it would take minutes of my precious time, and distract me from the matter in hand.

Imagin my horror when one of the agencies I work for asked for a spreadsheet of all the FTP logins, Zen Cart logine & hosting logins for their set of clients! Aaargh!! To collate that would take days.... I complained!

But do you know what? It didn't actually take that long at all. I sent them back an Excel spreadsheet, with each clients details on a separate tab, and each sheet contains every password, username & url link one could possibly need to manage their online sites.
So now I have done the same for ALL my current clients - everytime a new client signs up - he/she immediately gets a new tab and I can just copy and paste the relevant detail into their tab.
OK it doesn'lt always look pretty - but its always to hand - evidenced by the fact that its almost always open on my machine.
I have taken the basic security precaution of password protecting the spreasheet in case it fell into unwanted hands - but I think I can manage to remeber one password.

It would be interesting to know any other developers tips for managing this issue