The Unfriendly Nature of HP

Posted on February 12, 2012 by Brian

I bought ink for my printer today, and once again I found myself wondering which Black ink to buy. This happens every time, so I’ve done quite a few last-minute Google searches on my iPhone. There’s a bit of a pattern to them, so I thought this blog would be a good place to answer the common questions. And for reference, here’s a link for the extremely typical thread that inspired this post.

Pentagon vs. Bowtie

For some reason, HP refuses to clearly mark their ink cartridges properly. The cartridges in your printer are labeled with symbols which do not appear on the packaging. This isn’t a problem for Cyan, Magenta or Yellow, but it causes confusion between Black and Photo Black. One has a pentagon, and the other a little bow tie. But which is which?

This question is asked on many forum threads, and generally receives two kinds of responses:

Posts from other people who can’t find the information anywhere.
Posts from previously burned people like me who have bought one recently and paid attention when the product was opened.

Short answer: the pentagon is Black, and the bow tie is Photo Black.

Another way to tell is to ignore the symbols entirely. The bow tie is misleading. It draws your attention away from a symbol that is common to the cartridge and packaging. If you look at the photo below, you’ll see a camera symbol. It’s the only symbol that matters. (And in spite of what forum know-it-alls claim, it’s not obvious and this situation tricks lots of people.) The color inks will have dots on the box to match their color, and one of the black inks will have a camera. That’s Photo Black. The plain black dot indicates regular Black.

HP 564 Photo Black Ink Cartridge and the box

There's no bow tie anywhere on the box, but notice the camera symbol just above the bow tie. Most folks miss it just like I did. Also, notice that they're calling it "Photo" and not "Photo Black".

So why does Hewlett Packard use the geometric shapes on the cartridges when they’re not on the box? Who knows? I can only guess that they’re either poorly organized or they just don’t care to clear things up.

Ounces vs. Page Yield

Every forum thread I’ve seen about HP printer cartridges contains some form of this argument. Some people want to know how much ink is in the cartridge so they’ll know how much they’re paying for it, and HP insists that they should use pages as a unit of measurement instead.

I’ll get the math out of the way first, even though it never seems to work when other people do it. An ounce (or preferably a milliliter) is a fixed amount. If you buy a two-liter bottle of soda, you can calculate how much you’re paying per ounce of product. This is a simple calculation that consumers do every day. It’s not a big deal. In many cases you get the soda cheaper when you buy the larger bottle, so people like to compare prices. As they say on virtually every thread on the subject, “an ounce is an ounce.”

A page is not a fixed amount. Seriously, it isn’t. Printing a photo takes a large amount of ink while printing directions to your buddy’s house only takes a little. Both are pages, but they use different amounts of ink. It simply isn’t rational to claim that pages should be used to measure the cartridge instead of ounces. Remember, people aren’t asking how much they can print. They’re asking how much ink they’re getting for their money.

But alas, HP disagrees. Bob Headrick, who works for HP, added a post to the forum thread I linked above, and he says two things that don’t help much. First:

The wide black is the standard black, the narrow one is the photo black.

That only helps if you can open two boxes in the store before you buy anything. Remember, there’s no pentagon or bow tie on the box. You can’t see how wide it is unless you have X-Ray Vision. (He could have just told people to look for the camera symbol. If it’s not there, you have a regular Black cartridge.)

Your eyes are drawn to the geometric shapes, but take notice of the reversed camera symbol on the far left cartridge. It's the only symbol that matters.

Then he goes on to say:

As for the “ounces are ounces” comment, that is very misleading as it applies to printing. A consumer prints pages, not ounces. Comparing cartrdiges based on thier volume would at best be misleading for several reasons. As an example, a printer using the #96 black cartrdige gets about twice as many printed pages per mL (or ounce) as does one that uses the #45 cartrdige.

Wow. He avoided the facts completely. That’s like saying people don’t buy gallons of gasoline, they buy miles. Think about that. When you go to the gas station, do you purchase a “mile” of gasoline? Of course not. Mileage is a variable. A gallon is not.

Mr. Headrick attempts (unsuccessfully) to mislead the other posters by comparing cartridges from two different printers. The #564 and the #564XL are for the same printer. Yes, you can certainly compare two cartridges that go into the same slot of the same printer. One simply has more ink in it.

Unfortunately, HP pushes their story pretty hard, even when people blatantly call them on it. Maybe the XL ink is the same cost per ounce as the regular size. Maybe it’s more expensive per ounce, and HP doesn’t want to admit it. Either way, it’s pretty shady. Not only do they refuse to tell us how much ink is in the cartridge, but they try to sell us on some crazy anti-mathamatical nonsense. Ask them a straight question if you like, but it will gain you nothing. They know you already bought the printer, so they don’t care if you get a good deal on the ink. In fact, supplies are where they make most of their money.

Windows vs. Mac

HP printers are designed to work with Windows. When my desktop PC was my primary machine, I had no trouble with the printer besides the confusion with the cartridges. (Not surprising, since that computer also came from HP.) However, things changed when I switched to Mac. I downloaded the HP Mac driver from their website, but scanning was a bit weird and printing on photo paper never seemed to yield the same result twice.

And yes, I know how to change and save the settings. I did save the settings when I finally got them right, but the next time I used them I was at square one again. It’s a real pain. I basically don’t print photos anymore. I can try, but it takes me several attempts to get it right. This burns through lots of ink, which HP gladly sells to me over and over again. It’s a good scanner, but as a photo printer it’s an empty promise.

But don’t get me wrong. If the machine was designed for Windows, then that’s fine. But if they’re going to provide a Mac driver, shouldn’t they get it right?

Conclusion

Don’t buy their stuff, if you can help it. HP simply doesn’t care about us. They don’t care if we’re confused by misleading packaging, and they don’t care if we get a fair price. Once you buy a printer, your wallet belongs to them. My only other advice is to avoid arguing with an HP staffer over ounces. It just doesn’t work. It’s their job to push the page yield argument, so no amount of logic or reason will sway them.

But at least you and I know the truth. An ounce is an ounce, even if the folks at HP close their eyes and cover their ears.

A Little Help from Lynda Weinman

Posted on January 29, 2012 by Brian

Lately I’ve been kicking around the idea of developing my own WordPress plugins, and posting the useful ones to the internet. I had intended to browse through the codex to figure out the details on how to make them and add the admin pages, but I never seemed to get around to it. Then my new job gave me a leg up. They have a big, fancy account at Lynda.com for us web peeps. After checking out the content, I’ve decided that Lynda Weinman is my new best friend.

That logo has been around for a long time, and I’ve always been impressed by her brand power. I mean, look at that thing. With glasses and a haircut, she made a distinctive logo that I’ll recognize forever. When I see her on the videos, I know instantly who I’m looking at. If I made an icon of myself reading a book, it would just look like some dude. No way it would work as well as Lynda’s.

But I digress. I’m not just writing this to give her some free (and well-deserved) advertisement. I’m writing this to tell you about the member’s area of her site, and how useful it is.

I’m a firm believer in books. You could search the internet to develop your web skills, but the web is vast and you only need a small fraction of it to achieve a particular goal. It’s really worth it to let an expert sift through the ocean of information and gather the best and most useful practices for you. Again and again I’ve been glad to pay the money for a book which leads me directly to the useful information I need, without digressing and without the assumption that I already know most of it. Seriously, some people should not write tutorials.

Lynda Weinman, and others like her, have helped us out with many a physical volume. But she also has lots of helpful and current web content. The only snag is that you have to pay for it, just as you would pay for a book. What you lose in the benefit of beloved paper and highlighters, you gain in plain English explanations of important concepts. It’s a win.

To be fair, this is the first site of this type that I’ve seen. I’m normally an O’Reilly Media man, and I know that they have similar web content which parallels their books. I’ve been told that it’s excellent, but I haven’t jumped in yet because I’m still sort of attached to the feel and solid comfort of paper. I’m not sure how it compares to Lynda’s site, but if I ever check it out I’ll be sure to write a post on the subject.

All I can say for now is that you have two winning options available to you which I have personally taken advantage of: O’Reilly books from the local bookstore, and tutorial videos from Lynda.com. (Did I mention that she has an iOS app? Because she does.) You’ll be happy with either option.

However… the web moves forward so fast that physical books might not be the best idea in all cases. You can get O’Reilly books for your iPad or iPhone for a fraction of the price you’d pay for a physical book, and subscriptions to online content will always be current if you pick a good site like Lynda.com or Safari Online from O’Reilly Media. I suppose the best way forward would be to take a look at your spending. If you’re buying lots of books from O’Reilly, then maybe the subscription to their online versions could save you some money. If you just need some tutorial videos, then maybe a subscription to Lynda.com could prevent the need for a book in the first place.

It all depends upon what you need, and how much you’re already spending. It’s certainly not the kind of thing a casual reader would want to pay for every month. If you just need help on rare occasions, then you’d save more money by sifting through the web’s free content on your own.

Animating Space Stuff with the HTML5 Canvas

Posted on December 12, 2011 by Brian

I finally got a chance to see the real differences between canvas and Flash. I built a neat little solar system animation with the canvas, which you can see here. It’s similar in many ways to something I did in Flash a couple of years ago, so I had some basis for comparing the two. This isn’t a tutorial post, so I won’t go into too much detail about the code.

First of all, the canvas is fun. I built a star field animation at work last week that had several of us gathered around one machine, tweaking variables and trying out the API. It’s the kind of stuff that you could only do in Flash before, except that we’re just using Javascript. It was so nice to know that we could pursue this without paying a ton of money to Adobe. Eventually, I had to put a stop to the tweaking. After all, we were just building a 404 page. If we keep adding new features to the canvas, we’ll never be finished with it.

But I digress. Here are some ways in which the two differ. It’s not a complete list, of course.

Good Stuff

The canvas can draw programmatically, and can perform many of the tasks that we use Flash for. Circles, arcs, lines… you can do all that stuff with no trouble. Plus, it’s not restricted to the box it sits in. You can use JavaScript to pass information back and forth from the canvas to other parts of the page, (such as a form) and you don’t have to have a special program to debug things. This is especially important for a corporate environment. After all, you can’t debug somebody’s Flash code if your company machine doesn’t have Flash. Canvas promises to bring real animation to the web, and we’ll all be able to use it.

Also, much of the code is reusable, just like AS3 code. Once you learn something, you can easily adapt it for new situations. The star field you see in the solar system is the same one I built at work, with only minor adjustments.

The Bad Stuff

Two words. Browser Compatibility. Or more to the point, Internet Explorer. With Flash, you’re free to use fonts, images, and whatever else you like. If it works on your machine at home, it will work for the user’s desktop. But with canvas, you still have to worry about which browser is ahead, which is behind, and which features are common to both of them. You have to find a balance between moving forward and not leaving folks behind.

I tried my solar system animation in several browsers on my Mac, and the same several on my PC. The general results were surprising in a couple of places. As expected, my Macbook ran everything really well in every browser. On the PC, I got nice results from Chrome, Safari and Internet Explorer 9, but Firefox was rather choppy. (WTF, Mozilla? How did Microsoft get past you?)

Adjustments and Conditionals

In an effort to reduce the lag, I thought I would try to limit the number of canvases being used. At the time of this writing, there is a snowfall animation in my header. Could this be using too much processor power? I doubt it, but why not conserve anyway?

My WordPress theme is already set to pull in the extra JavaScript only if there’s a canvas on the page. (I put the id and the script’s filename into Custom Fields, and build the url from that. No custom field, no JavaScript link.) Just to save a little more, I set it up to only use the header animation if there’s no custom field for the page. If you go to the solar system page, you’ll get a lovely sunset photo of Lake Champlain. I’m not sure how much power I’m saving, but at least I got to play with some PHP while I was doing this. I’ll check the page from work, just to see if there was a problem with my PC at home.

My Conclusion

Although the HTML5 Canvas isn’t a complete Flash-killer, it’s getting there and it will only gain support as time goes by. Now is an excellent time to start using it.

I Will Never Be Finished with My Running Site

Posted on November 21, 2011 by Brian

I’m using a slightly altered version of the WordPress default theme for three basic reasons. First of all, it’s a good way to get to know the back-end as a user, and to take advantage of the out-of-the-box features of WordPress. Second, it allows me to spend less time tweaking my resume site and more time working on stuff for clients and my day job. And lastly, I tend to save my tinkering for my running site.

I’ve had that site for… well, forever. It started as a Flash site, back when I was first learning the program. If you’re cringing with the idea of what that was like, then you’re not alone. It had too much art and way too much load time. By the time I learned how to maximize Flash for the web, I was smart enough not to build Flash sites.

Next. It turned into a horrifying pile of legacy HTML code. Each page was created manually, with no CMS involved. I used Dreamweaver templates to keep the common elements straight, and God help me, I used the WYSIWYG editor. (Seriously. I really did use that thing.) Even worse, I used tables for layout and my header was an image map. It sounds terrible these days, but those used to be standard practices for designers. If you took a class, they would teach you layout tables. Looking back, it gives me chills.

The content also changed as I went along. It started out as a blog of sorts, although people weren’t really using that word in those days. I would write articles and rants, and post photos. Eventually, I stopped blogging about whatever and started focusing on running events. It was a good way to avoid writer’s block, and frankly it’s kind of difficult to write a daily rant. Maybe it’s easy for some folks, but I can’t rely upon the world to tick me off every single day.

So eventually, I found my way to WordPress. My first theme was pretty rough. Looked horrible, had little flaws everywhere…it was a mess. Then I redesigned it, and I did a little better. Then I redesigned it again, and tinkered, and then redesigned. From that first painful Flash site to the one you’ll find today, there have been 10 versions of that thing. If you count major changes to the WordPress themes, I’m at 15. Holy crap, that’s more than the Doctor’s regenerations!

Recently I went through the whole thing, post by post, for some major changes. I wanted to get rid of a photo gallery plugin, make use of featured images, and just generally clean things up. I wanted to truly separate the content from the presentation. Since many posts from the older incarnations had been left behind like a well-loved scarf on a British actor, I was left with 97 posts to work on. I pulled out shortcodes, removed embeds, and did whatever I could to minimize the markup. The only embeds I decided to keep were from Flickr and YouTube. (I updated the YouTube embeds, but I noticed that the old ones still worked. Good job, YouTube.)

And then, I went through the theme and started over. Nothing fancy. I got rid of WP-Less, converting the styles to plain old CSS before pulling the important ones over. Most were dumped since I was trying to be cleaner. Then I took the HTML5 Boilerplate Theme and added the 960 Grid System to it, building a basic blog with a sidebar. Then I added some PHP snippets to single.php to pop my Garmin maps and Flickr galleries down at the end of the post, based upon a custom field. It seemed easy enough, and I thought I was done.

Sigh.

Nope. Not done. I keep finding little things. I never styled the H3 tags within the articles, and I had some trouble with floated elements and the stuff below them not respecting top margins. There’s other stuff in the posts, too. And yeah, I’ll go through them… but not tonight. Tonight, I think I’ll watch some Doctor Who. You know, the old stuff. With William Hartnell. And maybe I’ll Netflix some Tom Baker tomorrow.

Speech Bubbles with CSS Alone

Posted on November 15, 2011 by Brian

First of all, the styles:

.comment-pointer {
 border-top: 25px solid #fff;
 border-left:25px solid transparent;
 }

You can add more, but that’s basically the key to things. It’s all in the borders, and unlike the many tutorials and blog posts I’ve read recently, I’m actually going to tell you how it works.

It looks like a triangle, but it's really a box with a weird diagonal border effect.

I just finished a basic redesign of my running blog. For the comments, I became attached to the idea of having dialogue bubbles… because yeah, I love comic books. After consulting Google and a steaming pile of not-very-helpful blog posts and so-called “tutorials”, I finally found a way to get the active code without all the extra stuff. I didn’t want to make it orange just like that other guys, I wanted to know why the triangle was being formed.

Finally, I found this YouTube page. If you decide to watch it, be ready to skip forward. I mean, a lot. Most of the video is eaten up by the guy slowly typing out lines of code, and he speaks as though he could fall asleep at any moment. However, he was very helpful. After skipping forward through the entire vid, he finally said the magic words: “It’s just a box.”

Kind of not-very-similar to this bamboo picture frame. Sort of.

The Trick of the Triangle is in the way borders work. They aren’t just lines on the sides. Their origin points are on diagonal corners. I know that sounds weird, but think of it as a picture frame. the imaginary center line of the border goes from one diagonal corner to another, so it seems to lean over if you give it an insane thickness.

The best way to test this is to just open up a page that’s using the technique and play around with things in Firebug. If you hold down the arrow key with the border thickness selected, you can see the triangles form.

Colors are Important

The end result of this effect is to create a box with two colors in it, separated on a diagonal line. To get the triangle effect, you have to nix the color on one side of it. Don’t just set it to the same color as the background. One of these days you might change that, and you would have all these crazy little triangles floating around. Set it to transparent, as I have above.

So there you are. CSS Speech Bubbles. If you’d like to see an example, you can find it in one of my race reviews. Happy Firebugging!

WordPress Shortcodes Outside the Loop.

Posted on November 9, 2011 by Brian

First of all, here’s the code:

<?php echo do_shortcode('[my shortcode here]'); ?>

There. Hopefully that showed up in the Google excerpt. (I hate when the useful stuff is buried deep down on the page.) What you’re looking at is a handy solution to a particular kind of problem. As I’ve written before, shortcodes can be a mixed blessing. On the one hand, they allow you to access some pretty cool features from a wealth of WordPress plugins. On the other hand, you’ll have those shortcodes in your content pretty much forever, even if you later decide to ditch the plugin. They’re harmless, of course, but if you’re like me then you just don’t want the litter.

I use one shortcode in my running site, for a Flickr gallery plugin. Since I tend to put it at the end of my articles, I started fishing around for a way to put the code in from outside the loop. Just a few minutes on Google resulted in the example above. This way, I have the shortcode call in just one place. If I ever change Flickr plugins, it won’t be an act of congress to clean them up.

However, I feel I should mention that there are times when you’ll want to use them as intended. If your design calls for shortcodes withing posts, then of course you should do just that. It’s nice to have an option, though.

Another Mighty Theme

Posted on November 1, 2011 by Brian

Okay, so I’m working on my running blog again. The last version was my first venture with the HTML5 Boilerplate theme from Aaron T. Grogg. It’s a great idea based upon another great idea: Starkers.

Starkers is a stripped down theme with the bare minimum of markup and styles. It’s a working engine with no fancy stuff, and a pretty good starting point. The Boilerplate theme starts with Starkers and adds some cool bells and whistles on the back end. You can check boxes for things like Modernizr, Selectivizr, and a bunch of other handy tools. Even better, it will set up a site-specific JavaScript file for you. It’s a handy theme.

This evening I decided to start again, this time using the 960 Grid System. I was impressed by how easy it was to get started. Last time I tinkered with every little piece of the theme, but this time I wanted to keep it simple. At first I wanted to make no changes to the theme besides CSS, but I really wanted to put the grid in there. So I just started placing container div tags into the pages and started adding my styles to the theme.

It really didn’t take much to shape the content. If you just let the tools do what they do best, you can move pretty quick. It’s a little easier considering that I already have a color scheme and general design, but it’s still progressing nicely. When I’m done with the basic structure, I’ll be adding support for featured images, and maybe add a few canvases to the mix. I’ll bet the canvas could make some neat graphs.

The Yin and Yang of Embeds and Shortcodes

Posted on October 29, 2011 by Brian

I’ve been blogging since before it was called blogging, but I always ran into the same problem. Before I discovered the wonders of a CMS, I kept reaching a sort of critical mass where maintaining the site became a progressively difficult problem. Each time I would go back and redesign everything, and some of the old articles would get tossed out in the process. (This is why I don’t have posts from the 90′s in my blog.) After I discovered WordPress, I thought that kind of thing was over, but apparently I had one more mess to clean up. Bunches of embeds and shortcodes.

Both of these are excellent tools, but if you’re not careful you could find yourself married to an old WordPress plugin, and you might even wind up with some holes in your content. Let me explain.

The Good News

Embeds are a useful tool. Video can get complicated on your own site, but it’s not a problem if you post something to YouTube. Just go to your YouTube page and copy/paste the embed code they provide into your blog post. Simple. I do this with my Garmin maps too, and it’s a really cool resource.

Shortcodes are also a handy tool in WordPress. It allows people to use some pretty complex code without actually writing it themselves. This is good for bloggers who don’t know how to code, and for developers who don’t want to invent something that already exists. For example, the galleries on my running blog all come from Flickr. I just put [a bit of text inside a couple of brackets] and the gallery auto-magically shows up on my site.

The Bad News

Although YouTube remained stable, Garmin Connect recently changed the size of their embed content just ever-so-slightly. I know this because scroll bars appeared on each and every map I had ever posted. This puts me in a painful spot, because I’ve dropped that old embed code into a number of posts on my running site. I was going to have to go into all of them and correct it. Yikes!

And then there are the shortcodes. Until recently I used a photo gallery plugin to show my race photos. Eventually I moved that stuff to Flickr, but the shortcodes still existed in all those previous posts. I couldn’t delete that plugin without losing a ton of content. Once I got the photos uploaded to Flickr with all the proper descriptions and tags, I had to go back through each and every post to clean out references to the old gallery system. (The shortcodes themselves would just sit there harmlessly, but the posts were designed around those references.)

Even worse, I used to post lots of videos from 12seconds.tv, which has gone out of business. All of the 12seconds embeds basically died on my site. That’s another bunch of posts that I had to clean up. It was a terrible mess, and it effectively killed my desire to post more content.

The Solution

My first impression is to keep shortcodes out of your posts entirely, but this wouldn’t be practical for every situation. If you need to use plugin shortcodes or embeds inside a post, then choose very carefully. Make sure you really want that stuff in there for the long haul. As with any new site design, don’t just think of today. Think of the next few years. My desire to tinker with every single thing eventually swung around and bit me. With a little more care, I could have avoided all the mess.

For my blog, I tended to put these things at the end of my posts, so I just altered my template a bit. My single.php file checks for the presence of certain custom fields. If I’ve put the number of a Flickr set or a Garmin activity into their respective fields, then the template will write the embed or shortcode for me after the post. This means that the code in question exists only in one place, and I can make global changes without fear. If I change themes, I just move that little bit of code into the new template file and I’m all set. (Flickr and YouTube are the exeptions, of course. They’re both pretty stable, so I don’t mind embeding their content in my posts.)

So remember… don’t be like me. Don’t make a big mess for yourself that you’ll eventually have to spend bunches of time cleaning up. Shortcodes and embeds can be a problem, but they can also be your best friends if you plan carefully.

From Flash to Canvas

Posted on October 24, 2011 by Brian

For a very long time, I tinkered with Flash. I started like most people, with simple animations that were tweened on the timeline. Over time, I moved away from the timeline and started writing class files and making full use of the display list.

But these days, Flash has fallen out of fashion. It’s not tough to understand why. Flash is expensive, and it’s the kind of thing that can be abused rather easily. I’m not talking about security, either. I’m talking about hefty files will all sorts of animation on the timeline and an aggravating animation to watch while you wait for it to download. Even worse, some sites have Flash intros just for the sake of having one. (Rule of thumb: if you think you need a “skip intro” button, then you shouldn’t have an intro at all. Seriously.)

But for all that, Flash was a king. There was no way to duplicate what Flash can offer. Vector graphics, animation… Flash had a monopoly on the good stuff. Well, until now.

Now we have HTML 5. With the video element, we can show content without a proprietary plugin. And with the canvas element, we can even do animation.

I figured it was time to get started on the transition, so I picked up a book on the subject. It’s an O’Reilly book, of course.

So far, it looks promising. The bad news is that the canvas element doesn’t have a display list like Flash does. Everything gets wiped out and redrawn every time you update it. The good news is that you can manipulate it with regular old JavaScript, and you can easily interact with other elements on a page. For instance, if you want a button to affect the canvas, it doesn’t have to be inside the canvas.

Over all, it looks very promising. It’s an open web standard, so there are bits that aren’t fully supported everywhere, but there’s quite a bit you can do right now. In fact, right now is the best time to learn it. Don’t worry if you’re currently a Flash person. Many of the concepts are similar, even if the language is a little different.

Over the next few months, I’m going to be tinkering with the HTML 5 canvas, just like I used to do with Flash. I’ll be pulling the Flash examples from this site and replacing them with something a little more modern. We’ll see what I can come up with.

Brian Cribb

Front-end Web Developer

Category Archives: Blog