Archive for August, 2009

Markup Pedantry

Posted by Greg August - 26 - 2009 - Wednesday ADD COMMENTS

TS-Pedant_FriendsI’m pedantic. You know it’s true. Every time I tell you that you’ve used an apostrophe incorrectly (come on, people; it’s not that hard!) or that you probably meant “cornucopia” that time you used “plethora” (El Guapo knows the difference!), you’ve seen my pedantry in action.

But there’s a limit. I will start sentences with “but” or “and” in grammatically incorrect ways. I will let my writing “voice” be more important than absolute precision. And I don’t correct people all the time and for no good reason if they’re just doing the same.

Lately I’ve discovered that I’m only semi-pedantic when it comes to web development. It is starting to drive me absolutely nuts when the “markup police” comment in the blogs and forums I read. These are the people who say, “You have an extra div that serves no purpose except to hold an image. Images aren’t content,” for example.

I found another doozy while researching a way to make blockquotes look spiffy. The tutorial used the blockquote tag AND a div (tsk, tsk, you should have only used the blockquote… the div serves no purpose) because 2 images of quotation marks were needed. The comment that drove me nuts was, “You shouldn’t need an image at all; just use large typography.” … You… idiot…. Using images presents design options not available with pure typography or the limited palette of visual enhancements (eg. borders) that we have available with pure markup. In this case, a browser-rendered quotation mark would have required the typeface to be installed on virtually all end-user machines, would require consistent anti-aliasing between browsers, and STILL would have required a stupid amount of markup to pull off properly.

To these people, I say, “get a life.” On one of the sites I maintain, I still use an old CSS trick for rounded box corners. It’s semantically horrific. Have a look:

1
2
3
4
5
6
7
<div class="graybox" style="width:100%;">
  <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
    <div class="xboxcontent">
      <p>Here's a bunch of content</p>
    </div>
  <b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>

It’s theoretically awful. For starters, I put an inline style (the width:100% on the graybox) which is a no-no for the pedants. But you know? In 99% of the site, I have a specific width I’m using, which is set in the CSS. I could have added an additional class to the CSS instead, but meh… this worked and took 5 seconds, and nobody who might take over maintenance of the site would have a problem seeing what the extra inline style does. Next, it re-purposes the deprecated bold tag to style a bunch of smaller elements that essentially form the rounded corners. The CSS has a class for each of the sub-components of the rounded corners, the end result of which is simply that the “borders” property is being used 1 or 2 pixels at a time to “draw” a rounded corner. This mish-mash of styled “b” tags has absolutely no semantic meaning.

The whole thing is in theory—and for the pedants—awful. But it works. It looks pretty good. It works across all browsers including IE6.

Sometime soon, now that CSS3 is gaining more acceptance, I will substitute the above code with pure CSS rules using proprietary styling (moz and webkit) plus CSS 3 (border-radius property)… until then, I couldn’t care less if my markup isn’t perfectly “semantic”. This may seem like blasphemy to some, but there’s a time when design is more important than purity of markup. I’m much happier to not have boring rectangles everywhere all over the sites I maintain and develop, and I don’t mind “over-using” images or “mis-using” either HTML or CSS to do it.

Begging the Question

Posted by Greg August - 19 - 2009 - Wednesday ADD COMMENTS

please

Saw via @absolutelytrue on Twitter a link to an article I wish I had written. Actually, an article I sort of planned to write more one-at-a-time in this space of the blog. The article was about commonly misused words and phrases:

32 most commonly misused words and phrases

I’m sure there’s been a bunch of articles like this… pedantic people like me litter (I mean, “beautify!”) the net. So I didn’t mind my thunder being stolen. Instead, I was anxious to see if the author was in alignment with me regarding the phrase “begging the question”. As it turns out, the list was a lot more appropriate to words used on a daily basis by all kinds of different people. Longer and less common phrases like “begging the question” were not part of the roundup.

Now I’m left with the opportunity—the duty, even!—to rant.

The phrase as it is most commonly misused:

…which begs the question, “why did he eat that strawberry if he’s allergic?”

What the speaker REALLY means is, “Which really makes me wonder,” or “Which causes me to ask…” or something similar. The problem is that if you hear enough newscasters and respected journalists use “which begs the question” too many times, it starts to sound like a reasonable phrase to use in those cases.

However, this is NOT “Begging the Question.”

Begging the question describes a particular logical fallacy, also sometimes referred to as a circular argument. It’s “shorthand” in discussing logic so that you don’t have to describe the whole fallacy… other logicians will know what you’re saying when you call someone out for “begging the question”. Just like, “that’s a red herring,” or “ad hominem”. If you’ve never pointed out someone’s red herrings or straw men, chances are pretty good that you also don’t know what “begging the question” really means… I don’t mean that to sound condescending, but it’s likely that you don’t. Bottom line: it is not equivalent to, “which really makes one wonder.”

Here’s a good way to know if you’re using it right: There is no question at all when the question is being begged. Only statements!

Examples of Begging the question… notice how they’re statements:

1. “Of course God exists. The Bible says so!”

Since the presumption is that God (through the hands of prophets) wrote the Bible, the question isn’t actually answered. It’s like saying, “God exists because God says so!”

2. “Solitary confinement is a morally justified punishment because it is a legal response to violent behavior.”

While this might ring true due to our personal sense of morality, it’s a logically flawed statement. Laws are created to impose concrete rules that might commonly align with the populace’s morality, but since they cannot reflect every person’s subjective and relative sense of morality, the statement cannot hold true in every case. Or by counter-example, it’s quite plausible and probable that someone could make the statement “Confining someone in a small cell for 30 days without human contact is morally reprehensible.” Or from a different tack: if you simplify the statement, it becomes, “Legal action is moral because it is legal.” Which is a circular argument (a.k.a. “begging the question”). The actual question of whether it is moral or not can never be addressed in such a statement!

The Question of Evolving Language

Smartarses out there always say, “Yeah, but language is dynamic and evolving. New words and phrases are added and changed all the time.” Sure, but they’re misunderstanding the phenomenon of language in evolution. The problem lies in the loss of the original meaning, not in the addition of a new one. For a time, it was fashionable to refer to something really good as being “dope” (i.e. “This album is dope.”). “Dope” can also be defined as “narcotics” or “a stupid person.” But these definitions haven’t disappeared. You can say, “She used to sell dope down on the corner,” or “That guy is a real dope” and enough people would know what you meant.

If “Begging the Question” eventually comes to mean only “Which raises the question”, then its utility in describing a logical fallacy is lost (self-note, I guess I could always fall back on Latin equivalents or “circular argument”). So, the problem for me isn’t wholly in its new usage (though it DOES piss me off), but rather in the fact that the new usage is replacing the old one, not existing in parallel. I don’t want to lose that “shorthand” to describe a particular logical fallacy. It’s useful.

I liked an example I read once, where the author explained that if the word “love” came to only mean “sex,” there would be two negative consequences: first, saying “Son, I really love your mother” would be a pretty inappropriate thing to say; second (and more importantly), there’s no other word out there to describe what “love” is. Our best word for describing a particular emotion would be lost.

I love the term “begging the question.” It’s dope.

Addendum: someone is doing it better than me, in fewer words, and with a more humorous/less pedantic approach!: begthequestion.info

Image Credit: beats me… it was on begthequestion.info… I assume they have credit? If anybody is upset, I’m happy to scribble on one of my own legal pads. ;-)

Latest in… yuk!

Posted by Greg August - 17 - 2009 - Monday ADD COMMENTS

Update: it was so yucky-looking that I dropped it before it even saw the light of day

So, in the event that the front page presents any confusion for readers (and I’m sure it might), I decided to reveal exactly which category each of the 4 featured areas (slider plus the 3 sub-features) belonged to…

This turned out to be a bit of a visual disaster.

I am definitely going to revisit this at some point in time… soon. The sooner the better. Because it’s looking mediocre at best. In the meantime, the code itself was simple enough that even a child could do it.

Looking again at the business.php page, I saw the following:

1
2
3
4
5
6
7
8
9
<?php

    $glidecat = get_option('andro_gldcat');

    $my_query = new WP_Query('category_name= '. $glidecat .'&showposts= 3');

while ($my_query->have_posts()) : $my_query->the_post();$do_not_duplicate = $post->ID;

?>

This is the code that tells the server side which category the content should come from. The important bit was “get_option(‘andro_gldcat’);”, which I took immediately to mean, “grab the category set by the user in the Androida theme options”. All I had to do to use that code was recycle the variable name that’s already being set to that function, namely &glidecat.

Putting $glidecat a bit higher up and as a separate declaration, I can now use it twice. Once in an “introduction” phrase and once again to build the slider contents. The new code looks like this:

1
2
3
4
5
<?php $glidecat = get_option('andro_gldcat'); ?>
...
<div id="glidercontent" class="glidecontentwrapper">
<div id="togglebox" class="glidecontenttoggler">
<div class="feature_intro"><h3>The latest from &ldquo;<?php echo $glidecat ?>&rdquo;</h3></div>

line 1 is the important one; 3 and 4 were already there; 5 is the new div with my “intro” line. Since most font treatments (resizing, positioning via margin/padding) was breaking the existing CSS, I just made the new div absolute. Here’s the CSS:

1
2
3
4
5
6
7
8
9
.feature_intro{
    position:absolute;
    left:35px;
    top:10px;
}

h3 {
    color: #EA7E3E;
}

And I used whatever the defaults are for h3 except for changing the colour. Not sure if the colour change was worth it… still looks wacky.

Moving on, since we’ve already declared the variable $glidecat, we don’t need to do it again. Just remove that line of code from the glider’s PHP function so that it now looks like:

1
2
3
4
<?php
    $my_query = new WP_Query('category_name= '. $glidecat .'&showposts= 3');
    while ($my_query->have_posts()) : $my_query->the_post();$do_not_duplicate = $post->ID;
?>

That’s it.

Since you already get the concept of using Androida’s pre-existing variables, you can use this for the mini-categories as well. Just add a line like this:

1
<h3>Latest in: <?php echo $minicat1;?></h3>

Wherever you see fit. The variable names set by the Androida theme are quite obviously $minicat1, $minicat2, $minicat3.

Reclaiming the Front Page

Posted by Greg August - 13 - 2009 - Thursday 3 COMMENTS

Reclaiming the Front Page of the Androida WordPress Theme

Users of the Androida theme already know about this. Readers of my blog may have thought I was doing something intentional. Basically, the content in the slider and the 3 “featured categories” area was always getting smooshed up. Line breaks/paragraphs just weren’t being respected.

The Short Version

I ramble. I mean, I REALLY ramble. So, to get the short version, jump right to the last heading in the article.

The Long Version: the Problem

One thing that immediately bothered me a bit about the otherwise spiffy Androida theme is that using the Business layout resulted in front-page content that has all its HTML/XHTML tags stripped out. The implication is that you cannot have paragraphs (<p>), links (<a>), additional images (<img>), or ANYTHING. Just pure pure text.

An example of why this sucked: since rendered HTML allows for line breaks, this means that no matter how many times you hit “enter” in your post, you will never be able to put spaces between your paragraphs. I didn’t quite realize why at first, but I knew that all tags were being stripped out. Not even ugly old <br/> line-breaks were doing it. AAAARGH!! I NEED line breaks for the sake of readability and sanity!

I headed over to the Web2Feel forum to see if anyone else had ever encountered this. Someone HAD, but the forum admin himself thought that the post was just not formatted. I’m not sure if he’s the original coder, but even if he was, there’s no way he could be held responsible for every single plug-in and its idiosyncracies for a FREE theme. As I stated in their forum, it was clear that some sort of “sanitization” was happening. It was just a matter of figuring out where.

The Long Version: Finding The Culprit

No matter how you slice it, the santization was being called from the “meat” of the front page. The front page consists of header.php, layouts/business.php, and footer.php.

I figured it COULD be a script of some sort being called in the header, so I looked there first. No scripts with obvious names jumped out, so I didn’t bother looking any further. A growing trend is to include scripts in the footer instead, but I didn’t think that seemed likely, so I didn’t even bother. I jumped right over to business.php.

Now, anyone who has ever looked into WordPress code knows that content is retrieved/displayed via a function called the_content(). I figured I’d look at the code surrounding this function and see if anything shook loose in my brain. As it turns out, I found this (actually, a bunch of these, but it only took one):

1
<?php the_content_limit(750); ?>

“That’s curious,” thinks I. I thinks, “Wonder if that’s a standard function that comes with WordPress….” So after I thinks, I Googles for “the_content_limit” (keeping the underscores of course) and soon discover that it’s part of a plug-in. Closer inspection of my plug-ins reveals what I really should have known all along… when I installed Androida, one of the required plug-ins was “limit-post.php”, which as you can guess, is supposed to limit posts.

I look at the above code, and I think, obviously the number being passed to the function represents its length, presumably in characters. What does that have to do with stripped tags?

Only one thing to do… open an editor (I just used the one built into WordPress) and inspect the Limit Posts plug-in (limit-post.php). The culprit stood out like a sore thumb. See if you can spot the baddie (hehe, I know you will, even if you’ve never touched a line of code in your life):

1
2
3
4
5
6
7
8
9
10
11
...
function the_content_limit($max_char, $more_link_text = '(more...)', $stripteaser = 0, $more_file = '') {
    $content = get_the_content($more_link_text, $stripteaser, $more_file);
    $content = apply_filters('the_content', $content);
    $content = str_replace(']]>', ']]&gt;', $content);
    $content = strip_tags($content);

   if (strlen($_GET['p']) > 0) {
      echo "<p>";
      echo $content;
...

Didja see that? Yup, you did.

The Long Version: The Solution

Here was the offending line inside the Limit Posts plug-in (limit-post.php):

1
    $content = strip_tags($content);

I didn’t bother tracing through everything that went into creating $content up to that point in time… it was obviously going to be the content (duh!) of the post. And it was now about to be updated by a function called “strip_tags()”. Didn’t take a rocket surgeon to know that something called “strip tags” being applied to something called “$content” was going to be the problem!

Couldn’t have been easier to find the solution. First hit in Google (search term: “php strip_tags”) brought me to this page describing the function: PHP.net strip_tags

In short, if you do not pass an array to the function, it will just strip all tags. But if you pass a non-delimited (I assume the braces automatically delimit) array of permissible tags, you can retain the power of the function while permitting tags that you want to be considered safe. For example, if you want to allow paragraph tags (my biggest one!) and anchor tags (ie. links), you would update the line to look like this:

1
$content = strip_tags($content, '<p><a>');

Images are still stripped out, which is usually going to be the best idea anyhow. If you are modifying an Androida theme, you will probably also want to add back in the <em> and <strong> tags as a minimum… I would go on to add back any HTML

Voila!

(yes, I will always put that disclaimer… no matter how much I complain during the next several weeks, I chose this theme because it was cool)

Addendum: Turns out I don’t like there to be links on the front page… at least not without being properly styled. Also, header links aren’t stripped out by the function, so they’ll need to be styled in order to keep the front page looking smooth-ish. Alternatively, I could start using Excerpts and include those instead!

The Monkey Mural!

Posted by Greg August - 11 - 2009 - Tuesday 2 COMMENTS

mural_touched-up_nowallBefore Cole was born, a friend of Alex’s offered to paint a mural for the nursery. We gladly took Vian up on her offer, and very soon had a sketch that incorporated the monkey designed by Jan at Dawghouse Design Studio, while adding bodies, new expressions (the smiley one in the bottom left of the mural!) and an interesting background. There was no real redesign phase… she nailed it the first time!

Leading up to Cole’s birth, V came to prep the wall for the mural. I really should have scanned the sketch; without using projectors or anything like that, she faithfully reproduced the original sketch in large format on our wall. Over the course of two more visits after the little guy’s arrival, she worked her butt off to complete the mural.

Honestly, we couldn’t have been happier. The vibe is perfect for the room and for the little guy, and the colours are awesome. I especially liked how she used nice colour washes for the sky and foreground to give it a real sense of depth… really exceptional work. Cute little touches like the monkey trio (I never did ask if that was intentional, but it sure worked out well!) and the house in the background were really appreciated, as well. The colour splashes from the bananas and the foreground flowers also give it a real “kid’s room” feel. It’s just awesome. :-)

I couldn’t possibly say how highly I recommend Vian and her work. If you or anyone you know is interested in getting such a mural, we’d be happy to put you in touch with her! Just email us or use our Contact Page.

Bonus pics: the sketch up on the wall, and the painting about 3/4 finished:

mural_sketchmural_halfway

About us

Monkey House is populated by three lovely and wonderful simians–Greg, his wife Alex, and their son Cole. He is a jack of all trades, she is a scientist/athlete, and their son is a poopsmith.