As the weeks go by, I find tons of new developer resources, tools, and things worth looking into.
I wrote a similar roundup of JavaScript resources, so this time I’m covering stuff related to what we commonly call “HTML5” (even though a lot of this stuff could easily fall under a “JavaScript” umbrella too).
I’m not entirely sure what to think of this situation, but it seems to be yet another strong piece of evidence that the people behind W3schools don’t have our best interests in mind.
I’m currently in the process of revamping my CSS3 Click Chart app and I was doing my usual cursory searches for simple JavaScript methods that I often forget the syntax for. Notice what I stumbled across, as shown in the re-enactment below.
The other day Paul Irish posted an article that collected together responses to a question that he and Yehuda Katz asked their Twitter followers.
One of the wishlist items a few people mentioned was “CSS blend modes” with a use case of tinting an image on hover (or tinting it statically, then removing the tint on hover or by some other interaction). My immediate thought was: That should be simple enough, shouldn’t it?
Earlier this year, the folks at O’Reilly were kind enough to send me a review copy of Canvas Pocket Reference: Scripted Graphics for HTML5 by David Flanagan.
Admittedly, this is not a truly legitimate review because, well, I haven’t actually read the entire book. But as you can tell from the title, this is not exactly something you’d read cover to cover and get much out of. I’ve gone through some of it, and since I have no immediate plans to use HTML5’s canvas element or its related API, I probably won’t be referring to it much any time soon.
Nonetheless, there’s good reason for a positive review here.
Maybe there’s a technical term that I’m not aware of for this type of centered, line-splitting heading. Whatever it’s called, I’ve used it in a project’s footer in the past, where I’ve divided the footer into sections with headers that overlay a horizontal line.
I wanted to try to do this as efficiently as possible, and without images. I came up with three solutions with pure CSS and one that uses JavaScript.
If you haven’t yet used CSS3 transitions extensively, here’s something you may not have picked up on.
As I’ve outlined before, transitions can be triggered in a number of ways, and even via JavaScript. The reason for this is because the actual transition is not dependent on any particular event. Although it is the event that triggers the transition, the transition itself is completely separate from the event (as it should be).
Because of this, you’ll notice a slightly quirky behaviour if you place the transition on the part of your CSS that triggers the event.
Earlier this month, Chris Coyier posted an article discussing a way to deal with the empty elements that are often needed when doing CSS3 animation.
Chris’s solution is interesting. He basically suggests (and I’m paraphrasing here) that we can give the empty elements semantic value by adding some text in each one to describe what each animated element does, or what mood it conveys. Then, the text in those empty elements can be moved off the page with CSS.
Some people got in a tizzy over the potential SEO penalties that could arise (which I kindly pointed out is probably not an issue) while others seemed to have a problem with Chris’s use of the word “semantic”.
Okay, admittedly, this is a pretty crazy and virtually useless tip. But it’s just one of those things that illustrates the flexibility of our craft and how sometimes solutions to problems can be found from some really outside-the-box thinking.
Back when I worked for a Toronto web design agency, we often had to update sites that were written in straight HTML, with no server-side programming at all. So every year, clients that owned such sites would ask us to update all the pages to display the current copyright year. That was pretty lame. Not exactly the kind of work we wanted to be doing.
So we wanted to create a way that the current year would be printed on each page automatically. But we didn’t want to include a JavaScript library, we didn’t want to use Ajax, and we wanted the year to come from the server, not the client.
I often come across instances of animations and other effects that look like perfect candidates to be switched to equivalent CSS3-based solution. I recently came across a website called 84Colors, which belongs to a freelance designer named Cristiana Bardeanu.
On that site, you’ll notice there are a number of subtle animations that integrate nicely with her overall brand and design.
Her animations are done using Flash. I thought it would be fun to grab some of those elements and create a CSS3-based page that mimicked what those Flash-based objects do.
In CSS, there are some properties that are naturally inherited from parent to child. This is useful because it prevents needing to define that same property for all children.
For example, the font-size property can be set (as it often is) on the <body> element, and virtually every element that is a child of <body> will inherit that font-size setting.
(photo by Mariska van Brederide)
