Category: Technology

Categories
Burningbird Technology Weblogging

My first attempt at Drupal 7 upgrade fails

I made my first attempt to use the new Drupal 7 beta to upgrade my existing module experiment site. Unfortunately, I quickly ran into a fatal error:

DatabaseSchemaObjectExistsException: Table cache_path already exists. in DatabaseSchema->createTable() (line 621 of /home/myname/public_html/books/includes/database/schema.inc).

I submitted a bug for the error at the time it happened. Checking back later, though, I couldn’t find the bug. I assumed I had mucked it up somehow when submitting, so re-submitted it. However, when I checked a couple of minutes later, I couldn’t find the second bug. I noticed then that when you access My Issues, it only shows open bugs. When I adjusted to show all bugs, I found that my bugs had been quickly closed out by someone saying they were duplicates of another.

I can understand the enthusiasm the developers have with wanting to close out bugs quickly, but unfortunately, my bug was not a duplicate of the bug so noted. What caused the problem, though, is known, but the error message I received was inaccurate.

Drupal 7 is dependent on the PHP Data Objects (PDO) extension that is now in PHP core. Previously, we could add PDO via PECL—the PHP Extension Community Library. However, the PECL PDO is out of date and Drupal 7 now only supports the core PDO.

One problem with this, though, is that cPanel, the site management tool popular with many Shared Hosting companies, disabled PHP core PDO because of compatibility issues. It’s only been recently that the application has stopped disabling PDO, but hosting companies like mine are still in the process of upgrading to the PHP core PDO. Until these companies make this upgrade, we can’t upgrade to Drupal 7.

The problem is further compounded by the fact that the Drupal 7 upgrade doesn’t test for the appropriate version of PDO, and we get bizarre errors such as the one I described earlier. Luckily, there is now a patch, which I ended up testing yesterday and that should give people the appropriate error. The problem with it, though, is that it recommends people check out the requirements page for Drupal, which, among other things, informs people that they can install PDO with PECL.

screenshot of Drupal requirements page with PECL PDO instruction highlighted

Hopefully, the disconnects will soon be corrected, and most folks are in environments where the PDO is from PHP core, rather than PECL. I was impressed at how fast everyone did jump on this after the initial duplicate bug mistake was discovered. Once the patch is in place, and the documentation updated, people will at least now know why they can’t upgrade and can chat with their hosting provider about the necessary upgrade.

Until my own shared environment is upgraded, though, I’ll have to stay in 6.x land. Many thanks to Everett Zufelt for his help in pulling all the Drupal pieces together for me.

Categories
SVG

My SVG progress bar

In honor of Microsoft supporting SVG in IE9, Web Directions is hosting an application contest: create your best and most innovative progress element using SVG. Microsoft is providing the prizes, and they’re nice: a new laptop, XBox, and Lego Mindstorms kit. Tasty.

I was inspired to create my own SVG progress graphic applications, using a well known graphic that I borrowed from Wikipedia. I did the work for fun, and won’t be entering the contest. Why? For one, I don’t have a Windows machine that runs IE9 in order to test the application. For another, I’ve never been much of a contest type of person. Plus there’s that validation requirement: pretty tough when you combine SVG inline in XHTML5 with ARIA.

Note that you can access the page and the examples using any browser you want— including Safari. Either the applications work, or they don’t; I’m not going to stop you from trying them.

Categories
SVG

Making progress with SVG

Web Directions has created a No Bit, Sherlock developer challenge, with nice prizes such as a laptop and XBox for the person or persons who comes up with the most creative variation of SVG progress element. A nice play on the name (“no bit”), but even nicer prizes.

I’m not participating in the contest, but couldn’t resist playing with the idea of creating progress elements with SVG.

One type of progress element is the indeterminate progress, also called a throbber. If you use Twitter, it’s equivalent to the circling animated graphic, and indicates that an event is happening, but the web site can’t determine the exact progress of the event.

When I think of an unending event, I always imagine ouroboros, the serpent swallowing its own tail, and creating an infinite seeming circle. It can represent many things in many different cultures but, to me, represents a continuous cycle with no beginning, middle, or end. It just is, until it is no more.

With that in mind, I thought I would try my hand at creating an ouroboros indeterminate progress element. Luckily for me, I didn’t have to stretch my rather limited graphic skills in order to create the ouroboros: Wikipedia provides an elegant graphic, already formatted as SVG (PNG format), and with a license that allows me to use the graphic for my own work.

My first indeterminate progress element plays on the cyclical nature of ouroboros, by rotating the graphic around its origin, as you can see in the following example if your browser supports SVG. Clicking the start button begins the animation; clicking the end button, stops it. The application makes use of the built-in transformational capability of SVG.

It’s an interesting effect, but a little CPU intensive. In addition, there’s nothing uniquely SVG about the effect. I could have just as easily grabbed the PNG formatted graphic and used the new CSS3 transform attributes to rotate the image. I wanted something that plays on the uniqueness of SVG—that non-bit nature of SVG that forms part of the title of the Web Directions contest.

SVG is a vector graphics language, which means that a graphic consists of various elements, all combined into a whole. The ouroboros I used is actually made up of several path elements, forming the head, the eye, and the different scales along the body.

What if, instead of cycling the entire serpent graphic, I just cycle an effect around the serpent? A popular Ajax-based throbber is the one that Twitter uses, and consists of a animated dashed circle, where the dashes around the circle are hidden and displayed using a circular motion.

I applied the Ajax style throbber effect to my ouroboros graphic to create my next effort, as shown below. In this case, the serpent remains static, and only the scales change color, in a circular motion, to indicate some action is taking place.

I prefer the second approach, and it’s less CPU intensive than using a rotating graphic. You can also play with the colors: just make sure there’s enough contrast between “inactive” scale and active one so that the circular effect is easily seen.

Of course, both of these designs are for an indeterminate progress graphic. What about a deterministic one, where there is a beginning, middle, and end?

Even though I was inspired to use ouroboros because of the cyclical nature of the graphic, I’m also using SVG, which I’ve always felt to be synonymous with limitless possibilities. Ouroboros also means complementary opposites and what is more complementary, and opposite, than an event that’s not started, and an event that’s completely finished?

I made a third progress animation, but this time, there is a beginning, middle, and end. As whatever task progresses, my serpent’s scales turn from gray to black. In order to ensure that my application user knows what’s happening, I also provide a text description of the progress.

One last change for all of the graphics: ensuring they’re accessible.

All three graphics are given a role of progressbar. All three would also normally be associated with the task using other ARIA attributes. In addition, since the third application is a deterministic progress graphic, I also set the aria-valuemin, aria-valuemax, and aria-valuenow attributes on the SVG element. (I could have also set these values on the g element that groups the graphic within the SVG.)

If you load the graphic within Firefox using the NVDA open source screenreader, you’ll not only “see” the progress, you’ll also be able to hear the progress. And though these variations are a fixed size for demonstration purposes, they can be easily scaled as small or as large as you want, because I’m using SVG.

A fun little challenge. I’m looking forward to seeing the Web Directions “No Bit, Sherlock” contest entries.

Categories
HTML5 Technology

Too much crap

I tried to find a web page to link in my last story, about the recent discussion surrounding Apple’s new HTML5 demo that deliberately prevents other browsers from accessing the examples. I finally had to link my own Twitter note about the problem, because every site that wrote about the issue had too much crap in their pages.

Don’t have to take my word, just search on “apple html5 demo blocks”, and you’ll find site after web site that covers the story, true, but the story is pushed down by headers that manage to link in half a dozen ads, and multiple Google links to boot. Or, just as you finally dig out the real stuff, some stupid overlay ad or “survey” hides everything, and you have to search for the little bitty close text, just to get rid of the damned thing.

Then there’s the Twitter tweets, and the Facebook notes, and the links to this application and that application; this widget and that. Are we afraid that people will think no one likes us if our web pages aren’t full of moving, annoying bits?

I watch my browser status bar as dozens of different domains have to be looked up, just to read one or two paragraphs of text. If my ISP’s DNS server is running slow, I never get to the stories.

I’m sure someone is making money from all of this. How much money are these sites really making, though, if after minutes of nothing, I hit the stop button and return to the searches to find a site that may actually provide the story, load relatively quickly, and not exhaust my DNS server in the process.

Folks have talked about wanting native semantics in HTML5 because they don’t want to have to load the big bad JavaScript frameworks, such as jQuery. “Give us date pickers and color pickers”, they say, “Because the JavaScript is too big! It hurts the web!” What’s absolutely absurd about all of this, is that the JavaScript framework libraries are probably the only thing in any of these sites that load quickly.

What Google, Yahoo, and Bing need to start printing in search results is how many domains will have to be looked up, how much external crap will have to be loaded, if we click that link. Frankly, I would find that much more helpful than a warning that the site could potentially be a source of malware. At least malware is a straightforward attack, which is better than this killing of our time waiting on these bloated, useless sites, where every ad company in the entire world has staked a claim, leaving tiny pieces of the page for actual, useful stuff.

Categories
JavaScript Writing

Future. Perfect.

I finished copy edits on my JavaScript Cookbook, which now enters the production process.

The first half of the book focuses on the basic components of JavaScript, while the latter half gets into the more complex material. I touch on the basic JavaScript objects, such as String and Number, but also spend a considerable amount of time covering new ECMAScript 5 and HTML5 scripting features: HTML5 drag and drop, postMessage, the Files API, worker threads, the wonderful new object methods, and so on.

I devoted one chapter to covering ARIA, Accessible Rich Internet Applications, as well as some other accessibility features. The more I work with ARIA, the more I view it as more of a rendering semantics than something purely for screen readers. For a data person like myself, ARIA is a very comfortable technology to use. I’ll have more on ARIA in later writings at MyTech.

Speaking of which, I’ve added ARIA landmarks to my web sites. Use View->Source to look for the role attribute, which is how ARIA landmarks are added. It was easy to update the Drupal templates to incorporate the new material. Unfortunately, the pages don’t validate, but I no longer care about validation. Frankly, the days of trying to code your pages to meet some validation criteria are over. Nowadays, pragmatism is the word in web development.

I am at work on my next book, but it’s not going to be for O’Reilly. Instead, I’m going to try my hand at self-publication, which is why I’m spending so much time working with ePub and other eBook formats. I’m also trying to strengthen my self-editing skills. After 18 books, I’ve become dependent on copy editors—my writing has become sloppy, and full of typos. Speaking of which, I strongly recommend, Paula LaRocque’s “The Book on Writing: The Ultimate Guide to Writing Well.” LaRocque’s book has proven invaluable as I root out my bad writing habits.