Creating an RSS feed and hooking it up to Facebook

• view as single page »
• back to top^

Today, I used that “Notes” feature on Facebook for the first time (I know, I’m slow). I saw that you can pull content from an existing blog feed and have it display as Notes, so that got me thinking: I should try to integrate my homemade blog. All it seemed to require was an RSS feed; if I could figure out how to create an XML file from my blog database, I should be good to go.

I did a little searching on XML structure and validation, and bingo -- I got my RSS feed running. Probably one of the easiest customizations I’ve ever done on this site! It’s now accessible from the blog sidebar.

I didn’t want Facebook to import everything, so I created a different RSS source for it to import. This entry should be the first one that Facebook adds. It seems that Fb automatically reverses the order of items that is set in your feed; I like my most recent to show at the top, so I set it for the opposite in my feed generator. We shall see what happens.

Further, I’ve read that people had problems with duplicate entries appearing in their Facebook Notes. I added a guid tag to help prevent this problem, but who knows if it will work?

back to top ^

Two IE7 bugs, perhaps related: shrink-wrapping and clearing floats

• view as single page »
• back to top^

I haven’t come across too many bugs that occur only in IE7 and not IE6, but while checking my site today, I came across two. Both arose, I believe, as a result of floating my entire page div to the left, so that I could display the ads banner as a right-floated element.

The first bug involves clearing floated elements. Usually, if I want the content to start below a floated section, I just add <div class="clearfix" /> or apply clearfix to the element. This solved the problem in Firefox, Safari, and IE6. In IE7, it did nothing.

I fiddled around for a while and then found that adding <p>&nbsp;</p> made IE7 behave, and my floated sections were cleared. The html space entity   was absolutely necessary; without, the bug reappeared.

The second bug involves the width of a floated element. It appeared to occur in a few different ways:

• A floated element’s contents are shrink-wrapped, even though the element has a set width and its content should flow normally (rather than being shrink-wrapped). Specifying widths in pixels for the shrink-wrapped contents fixed this problem.
• A floated element with width set to 50% shrunk to the width of its contents. Resetting width to 100% resulted in little or no change. This bug appears to be the same one as above, documented by Bruno Fassino in his series of invaluable experimental demos. He explains that one possible solution is to avoid triggering hasLayout in the floated element’s children. However, this does not work in my case. I have yet to think of a solution that enables the percentage calculation and involves CSS only, without rewriting the html markup.
• A block of text wrapped after every single word, so that each word fell on the next line. This occurred erratically, but when it did, it happened upon on floating its parent div. I corrected this by giving the parent a value for its width. Oddly, in this particular case, I didn’t need to float the parent div at all except to fix an IE7 problem similar to the one listed above: the content wouldn’t clear a floated element within this parent div unless I floated the parent as well. So, I set the width to 100%, effectively canceling the shrink-wrap effect.

So how are the two bugs possibly related? As I wrote that last list item there about the clearing bug leading to the shrink-wrap bug, it strengthened my impression that they might have similar origins. However, their possible relationship was actually suggested to me by the fact that both involve collapsing over a distance of “empty” space. The two bugs seem to approach the same problem, one from an x-axis direction, and one from a y-axis direction. The clearfix div needed something “solid” to by which to anchor its y-axis position, so adding the html space entity   worked. The excessive shrink-wrap likewise does not know where on the x-axis to stop.

Here I am anthropomorphizing browsers when I have no idea how they parse CSS. Food for thought. For more, check out this insane list of IE7 bugs.

back to top ^

Yes, I resorted to placing ads on my site

• view as single page »
• back to top^

Pscott and I were talking about a couple of website ideas we had, and the subject of banner ads came up. I’ve never placed them on a site because they’re kinda tacky, but I decided to add them here for a couple of reasons:

• I wanted to get a rough idea of what it involves, and as with almost everything else I’ve learned to do, I needed to use my site as an experimental chassis.
• I’ve paid for this site over the last few years, which isn’t a big deal, but it would be sweet if I could earn some cash from it.

So, I installed a Google ads banner, which is fun because you can customize the color scheme. It should show up on most of the content pages; I spot-checked for layout issues, but if you see anything funky, please let me know! Now, I’m gonna try the Amazon widget and maybe some donation buttons for the auditions database.

back to top ^

IE link bug when set to display:block without background

• view as single page »
• back to top^

Another IE bug in less than 24 hours. Surprise, surprise.

This one actually affects both IE6 and IE7. It seems that sometimes, if a block-displayed link does not have a background set, it does not display at all, or at least not where it should.

I sometimes use these background-less “button” links in lieu of image links. They have no hover effect, other than the standard cursor change, and should exist as transparent hit areas, showing what is underneath. (The merits and drawbacks of these types of links is another discussion; suffice it to say that I prefer not to use them but you gotta do what you gotta do.) Usually, I include a child snippet of explanatory u-wrapped text for accessibility: The CSS for u is set to hide the text, but if someone has CSS turned off, they should still be able read the text.

I’ve never had a problem with these types of links in Firefox. Today, however, I was checking in IE on some links I just made, and they did not appear to exist. Sweeping my mouse across the target areas revealed no links. Since they are transparent, it was possible that IE was just parsing the position differently, rendering them not where I expected them to be. So, I changed the background to bright green so that I could see where they were positioned. Lo and behold, the bright green patches appeared exactly where they were supposed to be, with hit areas intact. Setting the links to background:transparent reverted to the problematic state with the links not appearing.

So, the solution was simply to set them to background:blank.gif, where the blank.gif is just a tiny transparent GIF image. I don’t know how this quick fix addresses the underlying problem, but it worked.

I’m also still unclear as to what conditions allow this bug to arise, or whether it is formally a bug. IE more or less has its own proprietary rules, so if a behavior doesn’t conform to the way Firefox or other W3C-compliant browsers operate, I call it an IE bug. In this case, after comparing various instances in which I have used these background-less links, I believe the bug is independent of the following:

• floating the link
• presence or absence of children
• link padding and margins

One distinction I observed in the buggy case was that its parent div was set to position:relative. I am not as well-versed in the usage of the position attribute, so I wonder if it is the trigger. Darn IE.

back to top ^

IE6 background bug when defined by both id and class selectors

• view as single page »
• back to top^

So it’s 3AM and I’m still up, working on an IE6 bug. Once again, I silently pray through clenched teeth for everyone to banish this abominable browser.

I had set a div default background image, using class selectors to override and set a specific background image depending on the current page. Everything was dandy in Firefox and IE7, but for some reason, only one page (out of 5) was showing the proper background image; all the others displayed the default image. The IE developer toolbar indicated that it IE6 did not “read” the class’s background-image property, as if no background image had been set at all.

I spent at least 2 hours baffled, going over the css, php and html to make sure I didn’t do something asinine like misspell the class. What I should have done was google “ie6 background image bug” — doing so would most likely mean I would be in bed right now and not blowing off steam by blogging about this godforsaken browser.

It turns out that IE6 has what some people refer to as the “id.class” bug. It is unable to correctly parse certain cases of CSS where the selector is defined as a combination of id and class, e.g., #id.class {attribute:value;}. I don’t understand entirely, but it seems that if multiple equivalently weighted #id.class selectors are defined in the CSS, IE6 parses only the first one listed. In my case, that first selector was indeed the only one to display the intended background, while the rest of the #id.class selectors displayed the default that was defined for the id alone (with no class).

I do not know if this bug affects only background image; that is all I have found, but that is all I have searched for.

The solution: select your target with a combination of selectors that avoids the #id.class structure. In my case, I used the parent of the div in tandem with the div’s class — for example, #parent .background_a. Note that the id and class names are separated by a space, so as to target children of the element with id="parent" that have class="background_a". In contrast, #parent.background_a (with no space) would target a single element with id="parent" that also has class="background_a".

I recall fixing IE bugs by increasing specificity of selectors — for example, by adding the parent id, as in #parent #child — but I suspect that the problem might have been this same bug. Increasing specificity might have solved the problem indirectly.

I cannot take credit for the astutely observed solution: the light dawned on me when I read this post from Nathan Smith. (Many observations are astute at 3 in the morning by sheer virtue of their formulation, but that’s not to undermine the value of this one.)

back to top ^

Magic quotes, the foreach loop, and converting quote marks

• view as single page »
• back to top^

Until lately, I was relatively careless about using the proper html entities “, ’ and ” for quotation marks in my html strings. The straight quotes (like ") weren’t really causing any problems until I started to delve more into MySQL. So, I decided to find a way to convert any straight quotes in my blog data (which should be all html, no php) to their proper html entities.

To start, I had to take care of a standing issue: magic quotes. My web host has magic_quotes_gpc turned on by default, but it’s being deprecated and superseded by mysql_real_escape_string. Since the two should be mutually exclusive (the latter won’t work properly if the former is on ), I had to find a way to turn off magic_quotes_gpc.

First, I tried using conditional statements:

if(get_magic_quotes_gpc()) {
     $x = stripslashes($x);
     }

This was simple enough. I wanted to apply this conditional statement to multiple entities of data, though, so I set up arrays and looped through using foreach. It didn’t work — somehow, slashes were still being added to the data entered into MySQL. So, I searched for a way to disable magic_quotes_gpc at the server level (see php.net for details):

; Magic quotes for incoming GET/POST/Cookie data.
magic_quotes_gpc = Off

You can just paste the above into a text file, upload it to the directory where you want to turn off magic quotes, and rename it php.ini.

Great. Magic quotes were gone; no more slashes on my incoming data. The next step was to use preg_replace to replace the straight quotes appropriately. The apostrophe was straightforward; I replaced them all with ’ using str_replace (since it’s faster than preg_replace, I think). Double straight quotes were trickier; it took me a while, but I finally noted that, for the most part, if they’re within an html tag, they’re preceded by =, and if they’re within my text string where they should be “curly,” they’re preceded by either a > or a whitespace character (denoted by \s). I replaced all of these instances with “, giving me a “hook” in the regex to place the closing ”. The resulting search–and–replace function was this:

So I went on my merry way, applying this to all of my posted data via a foreach loop, and…no dice . None of the straight quotes was converted to curly quotes at all, anywhere in the string. I printed strings after each step to find the bug , and it seemed that all the steps were being carried out appropriately, but somehow the variable would lose its new value (attained by the foreach loop) once the loop was closed.

Finally, after much frustrated growling and Googling (and yes, to you grammarians out there, I meant no hyphen between “much” and “frustrated”), I figured out that foreach operates on a copy of the specified array, not the array itself, and so it does not modify the array data unless the array is referenced. !!! This was the money , the key to my problems , whatever you want to call it. While referencing is easily implemented in PHP 5, I didn’t find any documentation on achieving the same in PHP 4 (which I have). Boo…

However… (more ’s and ’s flipped on) any new variable that is set in a foreach loop does retain its value. So, after all the replacement steps were completed, I appended the results to a new data array defined within the loop. Whoo hoooo!! Problem solved :

$arr_data = array($a, $b, $c);
foreach($arr_data as $x) {
  	$arr_new[] = curlyquotes($x);
	}

Whatever operations I had intended on the data post curlyquotes, I then applied by calling the appropriate array key. For instance, instead of doSomething($a) (which would apply doSomething to the original $a, before it had been processed by the foreach loop), I substituted doSomething($arr_new[0]), since the data at the 0 position in $arr_new were the result of foreach on $a.

Relief. All in a day’s work.

back to top ^

How to screw up your site using .htaccess without really trying

• view as single page »
• back to top^

This past weekend, I put a lot of energy into reducing page load time. (I outlined the general strategies in the Web Resources section.) One of the strategies involves using .htaccess to regulate caching. I began to examine what else I could do with this powerful little file.

So far, the utility of .htaccess for me can be boiled down to the following:

• Permalinks and URL rewriting. I like simplifying what you see in your browser’s navigation toolbar.
• Cache regulation. Via the Apache expires module, I set how frequently files should be updated from the server. I can set a default and also set different expiration times per file type.
• Redirecting domains and subdomains. I have some other domains that share the same web space as this site, and somehow Google knows this. But I don’t want people to access my site content through those other domains because that would be weird, so I have them redirect to my inroductory index page.
• Deterring hotlinks. Not that I’m particularly worried someone will hotlink my photos of Disney, Yale, etc., but weirder things have happened.

In tinkering around with the .htaccess file, here are the ways that I’ve learned it can screw up your site:

• Whatever you put in .htaccess applies to all its subdirectories. I already knew this, but I forgot that some of my client files are housed in a subdirectory, rather than in my business directory. So, for a few hours there, all of the images on my clients’ beta sites morphed into the obnoxious “no hotlinking!” image I had intended for only this site…how mortifying.
• Whatever you put in .htaccess applies to all its subdirectories, unless a subdirectory has its own .htaccess. From Apache.org:

  “…this second .htaccess file…completely overrides any earlier setting that may have been in place.”

  When my permalinks failed after I had just edited the .htaccess file, I fortunately realized right away that this structural hierarchy was the cause.
• Your URL rewriting has to account for every possible scenario, for example, with or without query string, or an error will occur. I use several variables obtained from the URL using regex, and I forgot to account for the possibility that a visitor might request the page without the variables in place. So, while I had specified a RewriteRule for “pageX-variable1-variable2,” I neglected to set directions for just plain old “pageX.” As a result, the browser would look for “pageX” in the wrong place, and a 404 file not found would occur. As a general habit, I write my rules accounting for the most complicated URL to the least complicated, as in the example below. Note that the first regex just pulls the name of the content file, which is delivered to my template “page.php” as the variable “file.” The second and third regex specify values for the variables “sub1” and “sub2,” which are optional for my pages.

• If you use .htaccess for hotlink protection where any external direct links receive the alternate treatment, make sure you exclude not only your own domain but also any other domains that access your web space. You might also want to exclude Google and other search engines. Again, I learned this when I pulled up one of the sites housed in a subfolder. Ugh. I hope no one saw that.
• Online email clients probably don’t send Referer headers. I was wondering about whether hotlinks would receive alternate treatment if they were contained in an email. It appears that online email clients won’t send Referer headers, which I suppose means the images would still be accessible. Hrm. Well, like a bike lock, my .htaccess measure is a deterrent, and my guess is that hotlinkers would generally just go after easier prey rather than find a way to work around an obstacle.

That’s about it for now. It’s also possible to block ip addresses with .htaccess, and I’ve thought about blocking one particular address that seems to hit my guestbook a lot. They get caught in my spam filter and never succeed in posting, so they’re not really a problem. I’ll have to think of some good alternate content to which I can redirect them.

back to top ^

Passworded forms, writing to servers, and JQuery plugins, oh my!

• view as single page »
• back to top^

It's been a powerhouse weekend of learning some PHP and JQuery skillz so far. In the last 44 hours or so, I have wrested obscure symbols in obscure arrangements to achieve the following:

• A php page that reads a directory on my server and outputs the names of the files in said directory. This is a section for the Pineland Players, a theatre group of which my friends Steve and Steph are members. They asked me to create a way for them to upload some practice tracks to the theatre's website, but because of some ftp access confusion, I decided to just host the files on my own server and let the theatre's website link to them. While anyone can view the files that have been uploaded, only authorized users can access…
• Password-secured forms to upload files, as well as delete or rename the files in the directory on the server. It took a few different approaches and multiple debugging attempts to devise a way to secure the forms and securely pass the form input to a processing page. This latter requirement actually became trivial once I figured out how to delete and rename files from the same form. The key (note choice of word) to the solution? My new best friend in the php gang…
• Arrays - how to store info and use them for iterative tasks. I love the fact that I can systematically organize parameters in multidimensional arrays and apply a foreach loop to generate the html needed to display my content. Arrays enabled me to transmit the input for the forms mentioned above, without knowing the names of the inputs since the file list is generated dynamically according to what's on the server and they can change at any time, and arrays did this in a very tidy manner, too. I also used arrays to generate…
• Lightbox displays of photos from my year off, as well as the album thumbnails. What's cool is the use of an array to organize the caption, directory, and subgroup of each album, which then provide info for the if and foreach statements that generate the content. I had experimented with flash slideshows generated by Adobe Fireworks, but I didn't like them: They required an extra subfolder structure for me to keep them organized the way I liked, and all the pictures had to be the same dimensions, as far as I could tell…Like I said elsewhere on this site, I'm not one for blackbox solutions. Besides, why would you want to deal with flash slideshows that each require multiple parts when you can just use…(didn't think I could pull off another segue, did ya?)
• The JQuery cycle plugin. Okay, I must admit that JQuery is still a blackbox to me, but I'm definitely going to pursue more applications of it. With the cycle, you can show slides with a variety of way spiffy transitions, and you can create your own (though I'm nowhere near that yet - the problem is not the coding in this case, it's the creativity; how can i come up with anything cooler than what they already have?). The slides can contain anything, so I use them for
  • the news box in Home and What's Up, as well as
  • to show my web portfolio - this one's really cool -
  • and quotes from some of the people in my life.
  I did have trouble with the callback property (or whatever you call it), but I got around the problem to achieve the same visual effect. Also, I couldn't get the scrollRight transition to work in IE; maybe I'll figure it out another time. Speaking of which, I should check how the quotes look in IE, too. Now's a good time to send another holla to SaveTheDevelopers.org. If you haven't already done so, PLEASE stop using IE6. I rarely type in caps, so you know this is hugely important. IE6 is the bane of my web developing existence.

I think that's all the funky new programming I've done over the past two days. I did try to implement a JavaScript setTimeout function to remove a class after a specified interval, but page ended up stalling when the function was called. Pure JavaScript is a foreign battleground, so I gave up for the moment. Now I need to do something more productive, like take a shower.

back to top ^

Spam: by winning the battles, am I winning the war?

• view as single page »
• back to top^

Here, in my first real blog entry, I might very well be doing myself in. Although my guestbook has been functional for about two weeks now, the spammers apparently just discovered it last Thursday or so. It's been a vigil this past week, fending off spammers and spambots who probably see me and my little site as just another easy mark on their hit list. To that, I say: HA. Think again.

Hopefully they realize by now that they can't post links here to increase their search rank. Nor can they advertise for viagra or whatever the latest PDE-5 inhibitor is (that was a throwback to med school). So I'm not sure what motivation remains for spamming my site. They sure are trying, though - I set up the system so that I get a notification each time they try (and fail).

Zing. Yep, another notice just popped up - there goes another one. Convenient segue to my initial question: I stop the spam, but am I winning the war? Can I ever really totally win it? I had a guestbook before, and eventually the spam stopped. So does that mean that I won that war?

I'm not sure that there's really an answer to my question or that the answer even matters. Meanwhile, I'm just cackling to myself each time I get my note that says, "Script caught spam: [__method of detection__]." (Obviously I can't share my methods as long as they're working.)

Eat it, spammers.

back to top ^

my homemade blog

• view as single page »
• back to top^

Whew! Last week, I learned enough MySQL to get my guestbook going, and I was so inspired that I decided to take on another project: developing my own custom-built blog! I must confess that I have minimal experience with using blogs; it seems like the critical components are (1) entries and (2) a mechanism for the reader to respond. I've got those two parts down...We shall see how they fare with usage. Oh, the things you can do with PHP and MySQL!

back to top ^