Thanks for your blog post, Brian!

Happy Learning,

Michael

That’s right. I posted a link to this blog post on my Facebook, Twitter and Google+ accounts, and they found it. Do you know what this means? Someone besides me is actually reading this blog! According to the business card enclosed, my one confirmed reader is Michael Ninness, Vice President of Content at Lynda.com. 

It says "Trust me. I'm a trained professional." And of course, Lynda's logo is on the back.

It also means that the internet is more of a small town than I had realized. Not only did they notice me, but they looked around a bit to see where I work. There are several levels of awesome here. Merely being found was kind of neat, so I would have been more than pleased with an email. But Michael decided to kick it up a notch and send me a physical gift. That’s the power of social media, folks. Kind words going back and forth, a free t-shirt, and oh yeah… thanks to the videos I’ve been watching, I’ll be able to make that WordPress plugin I was thinking about. Nice and shiny, with bells, whistles and everything.

So thanks, Michael. I’ll wear this shirt proudly.

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.

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’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.

.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!

<?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.

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.

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.

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.