I Have A Canvas And A JavaScript Paintbrush

One of the biggest problems of the Internet today is an over-reliance on proprietary plugins. Mac users will be especially familiar with the feelings of abject rage as a Flash game bogs down their system, takes over a chunk of memory, and causes the fans in their laptop to whir consistently, due to the lack of hardware acceleration in the Mac version of Flash Player (which was only recently remedied). There's Flash, Silverlight, Java, and whatever proprietary single-use plugin TV networks' websites make you install to watch their shows.

"So what?" you say. "I just install the plugins when I need them. No big deal." Yeah...except each one requires a download, an installation, and a browser restart. It's a hassle. (And we won't get into cross-platform issues.)

Better than that, each plugin introduces its own set of security holes. Flash is notorious for this, but it is not alone in that regard.

Plugins used to be the only way to provide interactivity to a website. Something better is looming on the horizon, though: HTML5, and with it, <canvas>, <video>, and <audio>.

The video and audio tags are fairly self-explanatory. As long as the browser properly implements them, they provide plugin-free playback for videos and sound, respectively. Canvas is an HTML tag that essentially gives you a blank area that you draw on using JavaScript. The code required is fairly similar to creating graphics in a Java applet, for those of you who are familiar with that.

Java Applet Code:
g.setColor(new Color(0x5E, 0x2F, 0x00));
g.fillRect(0, 180, 200, 50);

JavaScript Canvas Code:
ctx.fillStyle = "#5E2F00";
ctx.fillRect(0, 180, 200, 50);

Canvas/JavaScript provides no easy way, however, to draw ovals or rounded shapes. Compare the two methods for drawing a rectangle with rounded corners:

Java Applet Code:
g.setColor(Color.white);
g.fillRoundRect(45, 35, 50, 35, 10, 10);
g.setColor(Color.black);
g.drawRoundRect(45, 35, 50, 35, 10, 10);

JavaScript Canvas Code:
ctx.fillStyle = "#FFFFFF";
ctx.strokeStyle = "#000000";
ctx.beginPath();
ctx.moveTo(45, 45);
ctx.quadraticCurveTo(45, 35, 55, 35);
ctx.lineTo(85, 35);
ctx.quadraticCurveTo(95, 35, 95, 45);
ctx.lineTo(95, 60);
ctx.quadraticCurveTo(95, 70, 85, 70);
ctx.lineTo(55, 70);
ctx.quadraticCurveTo(45, 70, 45, 60);
ctx.lineTo(45, 45);
ctx.fill();
ctx.stroke();
ctx.closePath();

Even with that convoluted code, I still saved approximately 60 lines of code generating this image in JavaScript with canvas than it took to do the same thing in a Java applet. Most of this savings probably came from the fact that JavaScript has both a fillStyle and a strokeStyle, while Java uses setColor() for everything, necessitating more color changes. Plus, the user doesn't have to install a plugin to make it work, it renders pretty much instantaneously in the browser window, and you could copy the generated image and save it if you wanted to, which would be useful if you wanted to code a drawing web app of some sort.

Want to learn more about drawing with <canvas>?

• HTML 5 canvas - the basics
• Canvas tutorial - MDC
• W3Schools HTML5 tutorial (for HTML5 in general, not canvas specifically)
  

Norway, Ireland, and Redmond

Microsoft has a hand in everything, it seems. One of their current ongoing projects is SQL Server Modeling, formerly known as Oslo. (If you're interested, it has been released as a Community Technology Preview.) According to Douglas Purdy, this consists of:

• M, a language for defining queries, schemas, etc. (like MySQL);
• Quadrant, a tool for interacting with SQL databases (like Access); and
  
• Repository, the back-end that communicates between applications and systems and stores data (SQL Server).

It was originally conceived as a sort of broad cross-platform modeling solution. M is open-source, but MS's implementation ties it to SQL Server. (Parts of the original Oslo project were split off into Dublin, .NET Services, and WF/WCF 4.0, while the modeling bits listed above stayed with Oslo.)

M has three specifications: T-SQL (Transact-Structured Query Language, Microsoft's proprietary extensions to SQL), grammar (originally called MGrammar), and EDMX (an XML file defining an Entity Data Model) (source). M is a domain-specific language (DSL). Its purpose, according to Microsoft, is to make it easier for users to interact with the database.

It's kind of difficult, as someone who has never heard of SQL Server Modeling before this week, to determine what, precisely, is its purpose. On first glance, it appears to be a set of data manipulation tools. However, Microsoft's aim seems to be more all-encompassing than that. It doesn't help that their aim has changed drastically in the three years they've been working on it. Time will tell if it catches on, and in what capacity.

Quote of the Day:
Beckman: Your country is calling you, Mr. Bartowski.
Chuck: Uh, well, then I think my country might have the wrong number.
--Chuck, "Chuck Versus the Ring"

I Will Have No Hair In Five Years.

MySQL is an open-source relational database system. XML is a markup language designed to provide a good way to organize data and allow computers to get meaning from data (as opposed to HTML, where meaning must be inferred - not something today's computers are equipped to do). So what exactly do they have in common, to both be included in the same post?

They are, colloquially stated, a pain in the butt.

Let's start with XML. The Extensible Markup Language is a descendant of SGML (Standard Generalized Markup Language), which was designed to provide a standard document storage format. XML took that one step further by allowing users to define their own schemata. Once the schema has been defined, the XML document can be validated. After that, it can be transformed through the use of a stylesheet document. Pages thusly transformed will render as HTML, with whatever formatting you specify.

Sounds great, doesn't it? You have a language that you can fully customize to your needs and you can make it look pretty! This, my friends, was what I was still doing at 2:30 this morning, after having started some time in the middle of the afternoon. In my foolish, naive way, I believed that I could create an XML document with sample data, define the schema from that, create the stylesheet, and be good to go. Um...not exactly. The stylesheet is a very finicky animal, and it wants things served to it on a silver platter (oops, I meant "in a particular order, in a particular format). So now I have to figure out how to retool my schema and document in order to display the content I want, in the order I want.

However, MySQL was the topic for the day, when I finally dragged myself out of bed late this morning. After my compatriots and I had input all the data in our database, it occurred to me that one of our tables really needed a 1:1 recursive relationship. This particular table has 7 fields in its primary key. After being reminded of the fact that the ALTER TABLE command does, in fact, exist, I added in the appropriate columns and populated them.

Then I tried to add the foreign key constraint. Nothing worked. It simply would not add that foreign key, choosing instead to give me Error #150. At wit's end, I Googled "mysql 150 add foreign key" and came up with a 2006 MySQL bug report (bug 16290) complaining about the unclear error message that results from attempting to create a foreign key on a non-indexed column. "Aha!" I said to myself. "The columns I'm trying to reference aren't indexed." I created an index on all 7 primary key columns and executed the ALTER TABLE command to add the foreign key - and it worked. I was exceedingly happy.

Quote of the Day:

If you'll come up one by one, unarmed, I'll engage to clap you all in irons and take you home to a fair trial in England. If you won't, my name is Alexander Smollett, I've flown my sovereign's colours, and I'll see you all to Davy Jones.

--Captain Smollett, Treasure Island

Coffee Addiction: Reprise

Last week I talked about the fact that web designers have a horrible caffeine habit. Introducing the newest addition to the Coffee Family: Cappuccino.

Cappuccino was created in 2008 by the company 280 North, whose goal was to port Cocoa, Apple's object-oriented desktop application development environment, to JavaScript. It is an open-source framework, built on JavaScript, that allows you to create fully-functional applications that run entirely in your browser. It uses the Objective-J language, which has its roots in JavaScript and Objective-C. One of the key points of Cappuccino is that developers need not tinker with HTML, CSS, or the DOM; the framework takes care of that.

Cappuccino is a cross-browser implementation, working under IE, Firefox, Opera, Safari, etc., on Linux, Windows, and Mac. Some workarounds to address IE's shortcomings have been included in the framework, so web app developers have that much less to worry about.

If you want to get started with Cappuccino, it's easy enough. Download the Starter kit and go through the tutorials. It doesn't seem to be any harder to learn than similar languages. Happy developing!

Quote of the Day:

All that is gold does not glitter,

Not all those who wander are lost;

The old that is strong does not wither,

Deep roots are not reached by frost.

--The Lord of the Rings: The Fellowship of the Ring

JavaScript Will Not Get You Coffee.

Apparently, web developers are chronic coffee abusers. There's Java, the programming language. There's CoffeeCup, a web design program similar to Dreamweaver. There's JavaScript (which, coincidentally, has nothing to do with Java), which was originally codenamed Mocha. I'm definitely sensing a pattern here.

Anyway, JavaScript was developed in 1995 as a relatively accessible language for amateur web developers. It was originally designed for Netscape Navigator; Microsoft developed a similar language, JScript, to fix compatibility issues with Internet Explorer and provide a language that could handle the catastrophe of changing centuries, but today both languages are considered nearly synonymous. JavaScript is run client-side and is object-oriented. According to Tiobe, JavaScript is the ninth most popular programming language, behind such languages as Java, PHP, and Basic.

JavaScript code must be enclosed in <script> tags with the type attribute set to "text/javascript". You can code anything from a simple line of text -- document.write("Hello, world!") -- to a confirm box that appears after you click a link on a page, to a window that opens with a sound clip. The possibilities are endless.

I actually have only passing knowledge of JavaScript. My abilities with that language consist of Googling what I'm after, with "javascript" tacked on the end, and modifying code I find to fit my needs. I know only enough to be dangerous, as they say. But hey, we all have to start somewhere, right?

Quote of the Week:
"What's in a name? That which we call a rose/By any other word would smell as sweet." --Juliet, Romeo and Juliet