Tag Archives: Web Development

Video Test

by

This post is just a test post playing with embedding video with the HTML 5 video element. First, I’m going to try just dragging in a video, and see what WordPress gives me, then I’ll probably end up hand coding it.

This video was shot during my 2012 hot air balloon ride, with my iPhone. One problem I’ve had using iPhone video is that it often comes out upside down. It looks OK in Aperture, and in the QuickTime player, but when I go to transcode it into other formats, it comes out upside down. I discovered tonight the trick is to open it in QuickTime player, and export it.

Continue reading →

Subtle CSS Error

by

An exercise in debugging Cascading Style Sheets

We launched a new version of the work website this week. We’re still tweaking things, but overall, I like the look of it, especially the subpages. The report pages haven’t looked this good in ages. I think I’ve kind of fallen in love with Open Sans, the font used in the new design, and I like that it comes in both bold and semi bold versions.

Just before we launched, though, we ran into one of those wonderful head scratchers that seem to be the hallmark of web development. We were clicking through the various views, and Garry clicked into the screen to edit an address. In IE, (of course) there was nothing there except the Save button at the top of the page. Since the section is loaded via Ajax, my first thought was that it was some sort of problem with loader script, especially since I was seeing Javascript errors in the error console. I found that error, fixed it, but it still didn’t fix the page.

Brute Force Debugging

Obviously, since we were dealing with a new theme and a new style sheet, those could be the culprit. So was it the new HTML or the new CSS? Turning off CSS showed the form, but was that issue?  Nothing obvious leapt out at me, and I had no idea where to even start looking. Finally, I bit the bullet, saved a backup copy of the stylesheet, then deleted the last third of it. No luck. I reinstated the section I deleted, then deleted another section. Still no luck. Finally, removing lines 400 to 700 revealed the form. From there, it was a simple matter of removing smaller and smaller parts of the stylesheet, until we zeroed in on the offending line.

Here it is:

main .controlbar .minibutton, main .controlbar .minibuttonactive {width:auto; display:inline;  text-align:center;  margin: .07em 0 .34e7em}

Do you see it?

The problem arose out of the fact that, for accessibility’s sake, we’re using ems instead of pixels (px) as units of measurement, because they make it much easier for a user to resize their screen. Pixels tend to be simple integers; ems are often decimals, and in a longish decimal, a typo can hide. In this case, the margin should be

margin: .07em 0 .347em

Once I narrowed into the right line, it was immediately obvious. Nearly an hour to find, 10 seconds to fix.

Comments on WordPress Image Pages, Revisited

by

Back in January, I posted a solution to a the problem of comment forms on image attachment pages remaining available even after comments on the parent post had closed, based on a solution by Anthony Hortin, of Maddison Designs. I was getting spam from the images on my first gallery page.

The solution I posted back then was to make the include of comments_template() conditional on the parent post’s comments being open. This worked, I stopped getting comments on old images. The code looked like this:

The original fix:

Change this:
<?php comments_template(); ?>
To this:
<?php if (comments_open($post->post_parent)) {
// Only show the Comments Form if the parent post has comments open
comments_template();
} ?>

Unfortunately, the fix has a side effect: comments posted to an image during the “comments open” period also go away when the comments close. At the beginning of the month I posted a picture of some stuff I saw on the Charles that I couldn’t identify; a nice lady answered me, but her answer vanished when the comments closed.

It turns out the comments_template() function also outputs existing comments, so what you really want to do is still include comments_template(), but somehow, tell it comments are closed.

Fortunately, the function that returns the flag that indicates whether comments are open respects a filter, ‘comments_open’, so it became simply a matter of figuring out how to add that filter.

My first attempts to do so crashed. My function that tried to set the flag was trying to call comment_open() with the parent post, and crashed. Then I tried only applying the filter if the parent post’s comments were closed, using a function that simply returns false. It feels kludgy, but it does work.

The Revised Fix:

Change this:
<?php comments_template(); ?>
To this:
<?php
function close_image_post_comments() {return false;}

if (!comments_open($post->post_parent)) {
/* Only show the Comments Form if the parent post has comments open
by adding a filter to pass false to comments_open() */
add_filter( 'comments_open', 'close_image_post_comments', 10, 2 );
}
comments_template(); //bring in the comment output
?>

This feels a little kludgy to me– I’d rather have the decision making in the function rather than the calling code, but it does work, and at this point, I’m not handy enough with PHP to figure out what I was doing wrong in the earlier version of my function.

 

Controlling Comments on Image Pages in Twenty Eleven

by

I’ve been having problems with comment spam on the site. Strangely enough, they always seemed to come from one of the images on my very first gallery post, even though the post itself  doesn’t have a comment form (I have comments set to automatically close after three days).

Unwanted Comments on Image Attachment Pages

It turns out that image attachment pages don’t respect the site’s comment settings, at least not in the Twenty Eleven theme that I’m using as a parent. After another spam comment the other day, I found that Anthony Hortin, of Maddison Designs had solved the problem for the previous default WordPress theme, Twenty Ten. The solution involves adding a check to see if the attachment’s parent post still allows comments.

The Fix:

Change this:
<?php comments_template(); ?>
To this:
<?php if (comments_open($post->post_parent)) {
// Only show the Comments Form if the parent post has comments open
comments_template();
} ?>

The code is the same as Anthony’s; the only difference is that in Twenty Eleven, the file to modify is image.php, not attachment.php as it is in Twenty Ten. Since I’m already running a child theme, I made a copy of image.php and put it in my child theme folder, rather than modifying the parent theme file. This is the recommended way of making changes; but it does mean that if WordPress makes a change to the parent file, I won’t see the update. Hopefully, they’ll address the issue at some point.

Update, June 2012:

I’ve discovered there’s a significant drawback to this fix: Any comments posted during the open period are also hidden when comments closed. See this post for a further discussion and revised fix.

New Year, New Look

by

Just in time for the new year, I’ve revamped the appearance of the site. This is something I’ve been wanting to do since I first set up the site, but I had the notion that I needed to create a whole new theme, and was very slowly working my way through a WordPress book.

As it turns out, that wasn’t necessary. WordPress supports child themes–it isn’t necessary to create a whole new theme, you can simply override the parts of an existing theme that you want to. In this case, I’m basing my theme on the default TwentyEleven theme I was already using.

I’d fallen in love with the theme’s header image feature, and had already created some really nice banners from some of my pictures. But I wanted more color, I wanted to play with web fonts, and I wanted an appearance that was mine.

Typography

The fonts I’m now using are Museo Slab for the titles and Museo Sans for the main body text. Right now, I’m using TypeKit to provide them. One thing I’m less than crazy about is that you need to add a script to bring them in, and they’re hosted by TypeKit. I need to look into self-hosting them.

Backgrounds

The main blue background is a PNG gradient applied to the HTML (root) element, with the “words” as a repeating PNG image applied to the BODY element. I’m of two minds about this background, from an accessibility standpoint. On the one hand, they’re meant to denote some of my interests, which would indicate that that some programmatically determinable method should be available. On the other hand, they’re meant to be decorative and kind of subliminal, and not to be really read. They’re not in a meaningful order, and in fact, you can’t see them all. They’re almost just texture. In the end, this is the line of thought I’ve followed.

The other gradients are created via CSS, using code based on ColorZilla’s Ultimate CSS Gradient Generator.

HTML Changes

Most of the generated HTML is still straight TwentyEleven. During development, I had to replace the stylesheet link with a hard coded link to my development site– WordPress is absolutely bloody-minded about using absolute links, which makes things needlessly complicated when you’re developing on a development domain. The one HTML change I’ve made so far is to add a little markup to facilitate the “posted on” calendar, which I implemented via a filter in my child theme.

One other change I want to implement in the future (hopefully, near future) is to provide alternative text for the header image. Surprisingly, the stock theme only provides an empty alt attribute with no easy way to add alternative text, and from what little I saw on the support forums last night, this was a design decision–I gather the feeling is that they regard the header image as being strictly decorative, and want to head off keyword stuffing. I can see that, but I can also see a site creating header images that include text, which would need alternative text. In my case, I’d like to add alternative text indicating what the header is a picture of, and it would even be nice to add a little visible caption with that information.

Browser Support

The site looks great in Safari, Opera, Chrome, and current Mozilla browsers like Firefox or Camino. I’ve looked at it in IE 7 and 8, and it looks good in those browsers too, though it’s missing some of the niceties like text embossing and rounded corners.  I haven’t seen it yet in IE 9. I am aware of an issue in older Mozilla browsers — the typography is missing, as is the gray background at the top, due to a bug in the way those browsers dealt with unknown elements. (The site uses some of the new HTML 5 features). The site is still readable, though, and the work-around– serving the site to Mozilla as text/xml– is risky, since one misplaced entity or malformed comment or post would blow the page out of the water. In the end, I’ve decided to accept that older Gecko based browsers won’t see as nice a presentation of the site. Fortunately, usage of these browsers is well under 1%.

Update 1/4/12:

I’ve now seen it in IE 9, and of course, IE Is Being IE. Earlier versions of Internet Explorer don’t support rounded corners, but IE 9 does. Unfortunately, since I was using an IE filter style to provide the top gray gradient, there were square corners poking out of the header. Apparently, it can’t clip the rounded corners when using older filter styles. I’ve replaced that gradient with an image; which took care of the problem.

Future Plans

As I stated above, I’d like to add alternative text/captioning to the header images, and I may add a little control to the home page enabling the user so rotate through the images without reloading the page. I also need to look into a widget to display tweets (I’m @ShutterAperture on Twitter). I will be adding an About page, and uploading and providing links to some of my older static pages that I was hosting either on Comcast when I was using them, or MobileMe. And in two weeks, I’ll be heading to Bonaire for a week of diving, and am looking forward to blogging about that.

Happy New Year, everyone.

 

CFQuery and Temporary Tables

by

I wrote a gateway function at work a couple of weeks ago that aggregates a bunch of data, then returns a paged query. The user interface for this functionality shows a set of contexts, each of which can have an indefinite number of sub-records. Each of the contexts that match the search criteria needs to be numbered, because if there are many of them, we need to paginate the results, and give back contexts 1 -25, then 26 – 50, and so on.

My first pass at a solution involved a CTE (Common Table Expression), where you define a subtable and query that, and this was a great improvement over the initial straight query. Unfortunately, it wasn’t enough of an improvement… the next day I noticed that the query was taking about 14 seconds to run.

I ended up using a temporary table for the method. This was only the second time I’d used a temporary table, and the first time I used one to return results; the first time was used simply to mass insert data.

In the method, I create a unique name for the temporary table, then in the SQL, define the table. It’s important to note that when defining a locally scoped table you need to prefix the name with a pound sign, and since this is ColdFusion, you need to double up the pound sign.

So I created the table, and inserted the data into it from my base query. One of the nice side benefits of using a temporary table was that I was able to simply create a primary key with identity for the context number, which simplified things a bit. I then selected from the temporary table, joining to one of our standing tables to fill out the rest of the data. After getting the data, the query drops the temporary table.

[Queryname] is undefined

This worked out great in SQL Studio; it was much faster than the CTE approach– 300ms as opposed to 14 seconds, so I got the go ahead to replace the existing query with the new version. I replaced the old SQL with the new, and — crash. I got that lovely grey and blue screen of death, stating that “GetData [the query name] was undefined. Whaaaat?!?!? It’s right there in front of me!

Solution

I did some Googling, and found the key. I added SET NOCOUNT ON before the rest of the SQL, and SET NOCOUNT OFF at the end, and ColdFusion was happy. In hindsight, it may be because either I was performing multiple operations in the one query, or possibly because the SELECT was not the last operation, because I had to drop the temporary table after I was finished with it.