scriptygoddess

This is one of the coolest color tools I’ve seen. Found on del.icio.us (I bookmarked it there too, I’m trying to find time to import those links here, but in the meantime I had to blog the link)

4096 Color Wheel

One of the things that drove me to WordPress was the fact that it was PHP based. It leaves the doors wide open for you to do practically any kind of hack you could possibly think of.

I recently reworked Pixelog.org for Christine. The original was a table based design, powered by MT. Now it’s all CSS based, valid XHTML 1.0 Strict, and powered by WordPress!

However, to get everything to work just so I had to pull a few tricks….
(more…)

Problem: (somewhat in line with my last post) I needed to run a script in the “background”, but I only had the ability to present the script as a .gif.

Solution: actually, I came up with two ways of doing this and both use .htaccess to pull it off.

1) I’m a gif but really I’m a php script
This one is fairly straightfoward. I put my script in a seperate directory, (that doesn’t actually include any images!) and renamed it from filename.php to filename.gif (or filename.jpg) (Yes, I know it’s not really an image file. Hang in there)

Then, in the htaccess file for JUST THAT FOLDER! (similar to this trick) I added this:
AddType application/x-httpd-php .php .jpg .gif

FYI - in your php file (that now looks like a .gif or .jpg) make sure you don’t have any headers/text echoed, and at the end of the file add this to your php code:
header('Content-Type: image/gif');
@readfile( '/SERVERPATH/TO/A/REAL/IMAGE/spacer.gif' );

You can then include the “script” as if it were an image file, it will run the script, but only display a gif to the user.

You can even pass it variables like filename.gif?somevariable=somevalue&anotervariable=anothervalue, but there’s another way to do that too without the ugly URL.

2) I’m a gif that’s actually a php script super-powered with rewrite
Ok, starting from the beginning. You have your script (filename.php) in a folder, add the following to the .htaccess file in that folder:
RewriteEngine On
RewriteBase /
RewriteRule ^(.*)/(.*)/spacer.gif /YOURFOLDER/FILENAME.php?somevar=$1&anothervar=$2 [QSA]

Before we continue, I must tell you that I dont’ completely understand rewrite rules. There’s a LOT of holes in my knowledge. So if you have a better way, PLEASE post it in the comments. I would LOVE to be able to understand what the hell I’m doing. LOL.

OK, moving along. Now you can call your script by actually calling that “phantom” spacer.gif, with the variables in the URL as if they’re directories like this:

http://www.yourdomain.com/YOURFOLDER/somevalue/anothervalue/spacer.gif

Again, make sure you have this at the end of you php code in your filename.php:
header('Content-Type: image/gif');
@readfile( '/SERVERPATH/TO/A/REAL/IMAGE/spacer.gif' );

In searching for a method to display a url without the .htm or .php extension, I found the following links:

Rewrie URLs with Content Negotiation

SitePoint forum discussion

But specifically the answer was basically to put the following in your htaccess file:

Options +FollowSymlinks
RewriteEngine on
# if the URI doesn’t contain a dot and doesn’t contain a slash
# then make an internal redirection to the file with the .shtml
RewriteRule ^([^./]+)/?$ $1.php [L]

FYI - this still doesn’t bypass the “Web Bug from MailScannerWebBug” that images embeded into an HTML email are being replaced with (when the image src actually points to a script) when viewed through some email readers. So much for being able to track if users are reading emails. Granted I know this is to block spammers from “testing” email addresses - but they’re spoiling it for “everyone else” that DO comply with “can-spam” and opt out lists, and only email REQUESTED offers, etc. This also, in turn, hurts users.

Not to completely go off on a rant here - but if a “good email” company sends out an email and sees that no one cares about it, no one was interested in the offer - the kind of data that is now being blocked by email readers also makes it difficult for the company to then turn it up a notch and make the offer better. Without being able to see who is actually reading emails - there’s no way to know if the offer was well received or not. Companies that use this information to better their customers get “punished” with the evil spammers.

I know some companies have a “blacklist” for bad emailers - it’s too bad there isn’t a “whitelist” where a central, objective company can review your offers regularly, review your content, review your opt-out system, etc. and then certify you as a “valid” email marketer. (Where you then don’t have to worry about getting blocked by things like this…)

(I’ll add this to my “perfect world” requirements documentation)

Breaking the typical format here - as I don’t usually write commentary, but I couldn’t resist.

I’m learning more and more about CSS each day - but I still have some issues/conflicts with it - beyond my frustrations in learning it. I know there is a big push to make flexible layouts, but I have serious issues with the idea that “everything should be flexible”. An example of my issues… I was browsing some of the sites featured on CSS Beauty, their most recent link was to Cornell University.

Just a side note: I might be in the minority here, but still… I have a very large monitor, and very RARELY have my browser maximised. I tend to have several windows, tabs, etc. open all at once, and therefore sometimes scrunch windows down much smaller then they were ever intended to be. Usually it’s because I only want to focus on a particular portion of a page, so I scrunch the window (and if neccessary, scroll it) so I JUST see the portion I need. (leaving more room on the screen for other windows.) In so doing, I have noticed several sites, in their effort to be “flexible,” simply fall to pieces when I do this.

In the case of Cornell University - when I did this - the names of the cities actually moved. LOL!!! While I’m very impressed with their ability to put list items, carefully positioned over a map, when you scrunch the page - the cities move around. Suddenly “Doha” is a place in mexico! Who knew. This site is so flexible - I can even move a city. This is a good thing?

I am having ALOT of fun posting and getting bookmarks from del.icio.us. I was a bit bummed though that every now and then, I get a funky error - something about the service not being available. And I’m reminded why I like things on my own server. So while I plan on continuing to use del.icio.us to bookmark stuff - I wanted to know how to export those links - and maybe, once a week, do a post here with a recap of all the links I posted there.

Apparently del.icio.us has an API you could hook into with various apps, I found some very brief documentation here.

I fount this wordpress/del.icio.us plugin by LinuxBrit. And another one from Among Other Things.

Updated to add:
Just found this script taga.lici.us on planet ozh (from, where else, but on del.icio.us)

I’m working on redesigning a site in CSS that I did many eons ago using tables for Christine. While I’m getting the hang of CSS, I still have a long ways to go.

First of all - Christine wants a border around her photos: first a thick white one, then a one pixel black one. She had previously been doing that with photoshop, but I’ve suggested to her that it would be better to just do it in CSS… On my first try, I had tried wrapping the img tag in a number of divs - which not only didn’t really work quite right, it added extra html that didn’t need to be there. The answer was simple. Here is the CSS I used for the border (a class I add to the img tag) :

padding: 15px;
border: 1px solid #000;
background-color: #fff;

The other thing I was struggling with was another (should have been) simple issue. I simply wanted a block of text, 600px wide - centered on the page, but with the text flush left. The key I was missing was adding margin-right:auto; and margin-left:auto;. So here’s the CSS for the outer div - and the div for the text block:

#content {
text-align: center;
}
#text{
width: 600px;
margin-right:auto;
margin-left:auto;
text-align:left;
}

The only way I was able to figure that out was from looking at the examples on Max Design: CSS Page Layouts

Laura (no link) left only the link to the following reference as a “guest authored” post:

University Of Minnesota Deluth: Web Design References
This particular one is for CSS, but in the sidebar you’ll see many more to PHP, Typography, Usability, Javascript, etc. etc.

My one note is their URL is very unfortunate. They MUST get jabs for it. When I first saw it in the guest authored post - I thought it was a joke:
www.d.umn.edu? Sorta looked like www.d.umb.edu to me. (Then again, I’m kind of dyslexic…)

Ok - so I’m really slow on this bandwagon thingy. I was reading on Web-Graphics how they have their own del.icio.us page, and seeing how I’ve been grabbing my links from there so much, I might as well make my own page. So here it is. I may still post the links here - since I usually come here first when I’m looking for a link, but we’ll see how that goes.

(not many links on there yet, will probably retro add the ones I’ve linked to from here in the past week or so)

[via del.icio.us]

HTML Help: CSS References

Westciv: Learn Web standards

Veerle’s Blog: Designing a CSS based template
(from psd to css) - in 5 parts - looks VERY good at first glance

CSS Vault
Gallery of CSS based design (need to add this to my “design inspiration” post as well