Mashup Answers

I don’t know if anyone else participated (and if you didn’t, shame on you!), but it was a fun game. I got a good kick out of it. Before going to check the answers that Benjamin Adam posted yesterday (saw it in my blogroll, but didn’t read it yet), I’m going to post a list of the ones that I got. Ones that I couldn’t find are simply listed as their index numbers. How many could you get?

  1. 1
  2. SimpleBits
  3. What Do I Know?
  4. 4
  5. Andy Budd
  6. Content With Style
  7. Asterisk
  8. Cameron Moll
  9. Mike Rundell
  10. Signal vs. Noise
  11. Simon Willison
  12. 12
  13. Mezzoblue
  14. Zeldman
  15. Blakems
  16. Garrett Dimon
  17. Eric Meyer
  18. Veerle
  19. All in the <HEAD>
  20. Jason Kottke
  21. Colly Logic
  22. Subtraction
  23. Just Watch the Sky
  24. Jonathan Snook
  25. Shaun Inman
  26. 26
  27. Malarkey
  28. 28
  29. Jeff Croft
  30. Passive Digressive
  31. Stop Design

A quick note about #4 — it was really tricky, because I didn’t know what was being asked for (I thought perhaps the border). It turns out that #4 is Jason Santa Maria’s background color. Slick.

May 31st, 2005 | Remark

Poor Tippy

Tippy, a mixed breed of German Shepard, Chow, Alaskan Husky and a number of other breeds, had a great fear of thunderstorms and lightning. He was a pretty big dog — nothing that another animal could have killed — but he was really kind-hearted and loving.

This morning, my dad went out into the garage to get some clothes he’d dried, and walked out the back into the shed where the dog usually sleeps. Much to his surprise, the dog didn’t come running out of the shed to greet him. So, my dad decided to investigate, and found blood all over the shed. There were paths of drops of blood from one side of the room to the other and back again. Lying behind the door was the dog himself, dead in a puddle of blood. What made him bleed to death in the night, we can’t say. It’s evident that his nose was bleeding badly, but it appeared that his stomach had somehow been punctured (though we couldn’t find the hole or any indication of what might have punctured him). We put him on a board, dragged him out to the backyard, and buried him.

On a lighter note, I’m going to spend the day with some close family (since it is, after all, Memorial day here in the States) and maybe make another entry this evening. Toodles.

Update: Yvonne, my soon-to-be sister-in-law who is a college student to become a veterinarian, says that it sounds like he was poisoned by some strong rat poison. We’re not sure if he was killed by someone or not (though it’s unlikely — anyone would be afraid of that dog), or if he got into some rat poison somehow (our neighbors have rats that migrated over here at one time, so we had rat poison out, but as far as we know it wasn’t put anywhere near the dog). Very misterious.

May 30th, 2005 | Remark

The Data URI

I used a background image, that much is clear, but it’s not a remote link to an image. That would consume bandwidth, and what if I changed the address or something later on? It’s just unreliable to do such a thing. Instead, I embedded the image in the Greasemonkey script.

How in the world would I do that? Well, it’s not something you see everyday (probably because Internet Explorer, our loving, caring friend, doesn’t support it), but there’s a URI scheme called “data.” You know how there’s “javascript:” and “about:”? It’s the same thing (and, it’s part of an official RFC specification). By using this URI scheme, we can have the browser interpret a string as binary data (and even non-binary data, and even data inside of data — check out an example, and yes that’s a data URI link). Very cool. (If you look closely, the second level’s LINK tag is to a data URI which is a stylesheet, and in that stylesheet is a data URI with a rainbow gradient image.)

Oh, you want to know how to use it, do you? It’s nothing difficult. Basically anywhere you would normally place a URL to a file or a file itself (be it in a CSS background property, a web page itself, a link to a CSS stylesheet, etc.) you can put a data URI object there instead. To compress a file or some data into a data URI, head to the data URI kitchen and give it a shot. What think you?

May 28th, 2005 | 4 Remarks

Preprocessing PHP Includes

The problem, you see, is that I want to include a content file (for example, “content.php”). This file has an array of various texts and randomly outputs one of them. Here’s an example:


$ary = array("test asdf asdf and aasdfadsfa ", " asdf as ak and asdfa sldk a", " asidfu aoi j and a;lskjz.");
echo $ary[rand(0,count($ary)-1)];

Now, we can use include ("content.php"); in our PHP to include that random output on another PHP page, right? What if we wanted to change the word “and” to blue in the text that is output? We could do this in content.php, but if we have many various files like content.php, this would become a tedious process very quickly. Instead, we need to process the output of content.php before including it. So, let’s make a custom include function:

function inc($file){
if(@$handle = fopen($file,'r')){
$data = fread($handle, filesize($file));
fclose($handle);
} else {
return 'Error: Could not open file.';
}
return preg_replace("/\b(and)\b/i", '<span style="color: #00f;">$1</span>', $data);
}

What’s the problem with this? Well, when we read the file in this way, it doesn’t process the PHP in the included file. Uh oh! What do we do? If you’re using PHP5, there’s a really, really quick solution:

function inc($file){
$data = (include $file);
return preg_replace("/\b(and)\b/i", '<span style="color: #00f;">$1</span>', $data);
}

This doesn’t work for PHP4, though, so we have to use this:

function inc($file){
$temp = explode('/', $_SERVER["REQUEST_URI"]);
$temp = $temp[count($temp)-1];
$data = implode('',file('http://'.$_SERVER["SERVER_NAME"].str_replace($temp, 'content.php', $_SERVER["REQUEST_URI"])));
return preg_replace("/\b(and)\b/i", '<span style="color: #00f;">$1</span>', $data);
}

What we’re doing with all this mess is basically getting the full HTTP-address of the file that is being included, and then opening that file as if it were remote (even though it’s on the same server). This makes PHP include the file without outputting it so that we can process it in our own way, and then returns that value. By returning the value (instead of echoing it), we can also run it through other functions. That is, we can say echo str_replace("#00f", "#f00", inc("content.php")); if we want to use red instead of blue.

May 27th, 2005 | 2 Remarks

Random Thought

For example, “Love to hate and hate to love.” Love is positive, hate is negative. In multiplication, positive one times negative one results in negative one. When you say, “I love to hate,” you are saying a negative statement. Multiplication is also reversible, meaning negative one times positive one still results in negative one. In the same way, you can say “I hate to love.” The meaning is still negative.

Now, in order for this to work, the two operands — love and hate — must be exact opposites (like -1 and +1 are 100% opposites, you won’t get negative one if you multiply by zero). Some other examples include “I’m happy to be sad / I’m sad to be happy,” “Never say yes / Always say no.” What are some other examples?

Another rule to keep in mind is that two negatives (negative adverbs) make a positive (the outcome of the sentence means the same thing as if there were no negatives). They cancel each other out. For example, “I didn’t never do it” means the same thing as “I did it,” because the two negatives make a positive (as in multiplication).

May 25th, 2005 | Remark

Purple Top

I have. Today. This morning. How? I got sent a newsletter. I never subscribed to get the newsletter, but I got it in this “special” case. Why? Well, it seems a link to my JavaScript and Accessibility article has been placed in their current newsletter, and they want to make sure it’s all right with me. I don’t understand why they think that I would mind at all, since it’s just a little more publicity for yours truly, but I guess it’s wise to notify the person’s content you’re linking to anyway, which is good, because otherwise I wouldn’t have known that their current newsletter linked to my article. Anyway, thanks, my Purple Top friends.

Having said all that, there are some corrections that I want to make to my three-part series of JavaScript and Accessibility. (Updating articles after they’ve already been posted at Web Reference is a very long, difficult and, I feel, unnecessary process. For that reason, I’m making the corrections here.)

My first mistake was in this sentence: “The last DTD, the frameset DTD, is essentially the Strict DTD.” The fact is, the frameset DTD is essentially the transitional DTD. It doesn’t make sense to force strict HTML in a frameset, and there is no reason for two frameset DTD’s.

Martin Kliehm was kind enough to point out another accessible technique for opening new windows. My method, on page two of part one, is a bit different from normal, whereas his is more subtle and something probably more practical for most of the people out there.


<a href="page.html" onclick="openWin(this.href, 'myWindow',
'width=400,height=400'); return false" target="_blank" title="Open page in a new window">open page</a>

Instead of using “document.write,” Martin has used the TITLE attribute to describe the functionality of the link. Also, my method could work better by having used “this.href” like Martin, instead of outputting the same address twice (something I definitely should have seen).

Martin also pointed out that events should be device-independent, so I should also use the onFocus and onBlur events in addition to the onMouseOver and onMouseOut events.

In part three, the DHTML menu that I explained is not 100% accessible, according to Mr. Glen Hennessee, a Web Reference.com reader who sent me an email on the subject. He claims that in order for the menu to be completely accessible, it must be navigable without any kind of pointing device (e.g., a mouse). Keyboard navigation with the menu doesn’t work on submenu items. The solution to this would be to add the :focus pseudo-class and have it operate the same way that the :hover pseudo-class does. I haven’t written code for it to work like this, but I doubt it’s very difficult, since I already did explain everything and how to use it. Plus, if you’re disabled in such a way that you can’t use a mouse, I think you’ll be using some sort of browser like a screen-reader or text-only browser, which would only see the unordered list.

If you’ve found other errors, please let me know about them, so that I can explain them better. Thanks for reading!

May 24th, 2005 | Remark

Live Chatting

Fortunately for me, I was the first, although it seems that other parties have taken my idea and developed things better than what I’ve made. It looks like I’m not doing a good job of advertising Chategory — if I spend more time on it, I’m sure I can succeed in getting a wider audience, though… Right? I really hope so. I’ve put a lot of time and work into it, and I don’t want anyone to take that away from me. For this reason, I’d like to develop a team — nothing large, just a couple of exceptionally skilled PHP and JavaScript programmers. People in-the-know, if you will, who are ready and prepared to execute the most cutting-edge technology. Is anyone interested in beating the competition?

Here are a few things about the project that may spark your interest (or convince you not to be part of the project, depending your background and point-of-view).

  • The project will be managed by multiple users in a Backpack account; we’ll continuously update it and keep a changelog.
  • I’m thinking about buying a domain name for Chategory.
  • I’m also considering implementing a development blog (powered by Textpattern, most likely).
  • A new web site design is appropriate, so I plan on devoting some time to that.

Update: it looks like there’s more than one competitor.

May 23rd, 2005 | 32 Remarks

Smart Firefox

Introducing Smart Firefox, the Greasemonkey script that automatically educates your text when you submit a form. Smart Firefox will convert all quotes, dashes, and apostrophes to their correct entity replacements. It only processes textareas (to avoid compatibility issues with input fields, for example if you’re searching Google), and runs onSubmit (but won’t overwrite any current existing onSubmit functionality). By default, this script runs on every page with a textarea, so if you’re working in an HTML editor or other, you will need to exclude that site on the list of sites to be processed by Smart Firefox (a simple task). Oh, it also ignores anything inside of [CODE], [PHP], or [HTML] UBB tags, and any quotes inside of HTML tags are also ignored.

So, how do you get it? Make sure you’ve got Greasemonkey installed and running, then grab the script (you can right-click and select “Install user script,” or left-click and select “Install user script” from the menubar in the top of your browser). Enjoy, folks!

Update: I’ve updated the Greasemonkey user script. Smart Firefox now converts “<-" and "->” into “←” and “→” respectively (thanks for the suggestion, Rasmus).

May 21st, 2005 | 17 Remarks

Fx Tip

Load up a couple tabs that you want to have as your homepage. Go to options -> general, and for the homepage hit “Use current pages.” The URL’s to the sites in the tabs you currently have open will be separated by a pipe (“|”). This way, Firefox manages multiple tabs for homepages. Sweet. I didn’t know about this until yesterday, but I thought I would share it with the rest of you. It’s especially helpful if you can’t decide what you want your homepage to be… Hmm, Google or Bloglines? Decisions, decisions…

May 20th, 2005 | Remark