Miklb's Mindless Ramblings

In preparation of the impending release of Habari 0.6, as well as getting some to-do items off my list before adding more (I’ve got two theme projects I’m either resurrecting or starting), I’ve decided to update the ported themes that I’ve released.

First up, Swanky. Not that I’ve seen anyone use this theme, but I did use it as a base for my cooking blog, so it behooves me to have some updated code to make sure I’m using the latest and greatest Habari. I’m not quite sure no one has (to my knowledge) used or modified the theme, perhaps the pink and black and sexy silhouette isn’t a big draw. But as I’ve pointed out, it can be a great starting point for modification. Maybe I’m just not aware, and there are scores of sites using it…then again, since I haven’t released a new version in quite some time, that could be a factor as well. Today, that is fixed.

As I mentioned, this update is in anticipation of the impending 0.6 release, so unless you are running from svn, or a nightly snapshot, this version probably won’t work. For an overview of the theme, see the original post.

New in this release:

• Removed calls to jquery and and a deprecated Stack::out call
• Properly calling $theme->tag rather than using the potentially exploitable Controller::get_var function
• updated the calls to check for logged in and added a tab to the top navigation for logged in users to admin
• fixing a CSS bug on long post titles so they don’t cover the timestamp

This is considered a beta release, any bugs or changes will be addressed before the final release of Habari 0.6.

Download Swanky 0.5 beta now.

UPDATEThe plugin is now in the Habari Extras repository. There is a branch and tag for 0.6, and a 0.7 branch for the new plugin XML format. Any bugs/issues should be directed to the Extras Trac.

Unlike a blockquote, which is a HTML element meant to offset a quotation from the main text, a pull quote is a technique traditionally used in print to draw attention to a salient point in an article. Pull quotes generally take a small section of text and offset it from the article in a larger typeface. In addition to helping highlight a noteworthy point, a pull quote can add a graphic element by breaking up particularly long pieces of text.

Pull quotes were traditionally achieved in web publishing by appending the selected text to the end of the paragraph and then styling with CSS. The downside to that is that in mediums that don’t adhere to the style sheet (like syndication feeds), you wind up with the duplicate content at the end of a paragraph, which can confuse the reader to say the least.

Fortunately, through the wonders of jquery, Chris Coyier whipped up a way of simply wrapping the desired text in a span that clones the text and floats it. The beauty of this technique is that you’re not duplicating markup. Any medium that doesn’t recognize the class on the span simply ignores it, and the article reads normal.

With the help of Michael Harris who reworked the javascript, I’m proud to announce my first full fledged Habari plugin, simple as it may be. You can see it at work in this post and on another recent post.

Usage

Upload pullquotes to your user/plugins directory and activate the plugin. There is no configuration required. To create a pullquote from existing content, wrap the desired text in a span with a class of either pquote-r or pquote-l.

Example

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span class="pquote-r">Ut enim ad minim veniam</span>, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Customizing

Pull Quotes has a default style included. To customize the CSS, make sure in your theme’s header file that $theme->header(); is called before the theme’s style sheet. You can then add span.pull-left and span.pull-right to your theme’s style sheet and customize the pull quote to fit your design and tastes.

Download

Pull Quote version 0.2

Note: This plugin will eventually be handed over to the Habari extras repository, however in my exuberance of writing my first plugin, and desire to experience writing up a detailed post for one, I am releasing it on my personal site first. Once I test it against 0.5.2 to determine if a separate version is required, I will add it to the repo, so any bugs or feature requests should be logged in the extras trac. Comments certainly welcomed as well.

Lately I’ve been contemplating switching to Safari, as Firefox still seems to be a memory hog, especially since I tend to leave my desktop on for days at a time. With the improvements to the developer tools in Safari 4, there’s less and less reason for me to hang on to Firefox. Couple that with this bookmarklet suite of design/development tools I just discovered, and the excuse of having to use Firefox for it’s superior developer tools flies right out the window.

The suite includes a configurable grid overlay, a ruler overlay, a measurement tool to determine distance between two points, and a cursor crosshair tool (I’ve not found how to use this one effectively, but it could be useful for figuring placement when using position: absolute).

I can’t speak to how Firebug and the Safari tools compare regarding javascript, as I don’t do much with javascript, save using various jquery plugins.

I’ve not explored Hulu much, but I came across a Front Row plugin, UnderStudy, that allows you to subscribe to various Hulu and NetFlix feeds and watch them in full screen mode via FrontRow. The Netflix doesn’t interest me, as I’ve got that either through my Roku player or my XBox 360, but until I get my mini fixed up and hooked up to the TV, Hulu on the iMac in full screen mode seems like a nice way to take a little break. Granted, you can’t navigate the whole site, rather you have to add feeds, but once you get some feeds for your kind of content, it’s not too bad. It has a few default feeds to choose from, or you can navigate hulu.com and copy a feed link to the clipboard, then enter Front Row and add the feed from the clipboard. Since I’ve not watch Hulu.com on the site, I can’t compare the quality, but the few clips I looked at via Front Row were quite adequate.

A post came through Twitter from SitePoint regarding a recent decision by Microsoft and the IE team to add a new compatibility mode to IE8. The post they link to is from December, and the IE Blog has updated the blog with a recap of the compatibility view. At first read, this sounded like a stupid idea. Just another layer of crap that would keep sites from getting up to speed on standards compliance.

Upon a bit more thought, I think it’s not a bad idea. One of the biggest reasons I found people didn’t adopt IE 7 was that sites that they regularly visited didn’t render properly in IE 7, so they reverted back to IE 6. I think it’s still one of the biggest reasons people haven’t upgraded. They upgraded once, a site didn’t work, so they stuck with 6. A vicious cycle ensued. Sites saw the stats, saw a big IE 6 crowd, and kept support. The reality of business is going to say that some numbers cruncher is going to say it’s not economically feasible to update the site for IE 8, regardless of the chorus from the web team. These are the sites that compatibility mode is geared towards.

Adding this compatibility view will allow people to upgrade to 8, still visit sites that haven’t been updated, but get the standards compliance of 8 for sites that have. Sure, getting blacklisted as incompatible is possible, but a single line of code in the header will remove the compatibility view from visitors, and for those of us that want to build sites that are strictly IE 8 compatible, ignoring 7 (6 is whole different can of worms) is possible. It’s very easy to tell a client, “Just upgrade to 8, and click the compatibility view option, your old sites will still work the same”, versus having to make a site backward compatible to 7 because people won’t upgrade or are reluctant. Worse, having to have 2 or more conditional style sheets to accommodate multiple versions of IE.

I would say this compatibility mode list shouldn’t be built off of how a site renders in a beta version of a browser, and reading through the comments and glossing over the latest post I’m not sure if that’s the case, but again, I’d rather it be an opt in setting that allows people to view the rest of the web in a more standards compliant mode than having to wrestle as as a developer with yet another version of IE.