web

So That’s What We Do

by Joey deVilla on September 24, 2010

From a textbook on learning Spanish:

Excerpt from a Spanish textbookFound via Reddit. Click the picture to see it at full size.

The text:

To ask what people do for a living

¿A qué se dedica el señor Machado?

What does Mr. Machado do?

To respond

Es programador. Sabe diseñar páginas Web mejor que nadie.

He is a programmer. He knows how to design web pages better than anyone.

This article also appears in Canadian Developer Connection.

{ 0 comments }

Introducing WebMatrix

by Joey deVilla on July 7, 2010

What is WebMatrix?

webmatrixBy now, you’ve probably seen the tech news reports as well as Scott Guthrie’s announcement about WebMatrix, Microsoft’s lightweight web development web development system that packages a web development tool with a number of new web technologies:

  • IIS Developer Express: a lightweight, free-as-in-beer web server with simple setup, runs on all versions of Windows and is compatible with the full-on version of IIS 7.5
  • SQL Server Compact Edition: a lightweight, free-as-in-beer file-based database with simple setup that can be embedded within ASP.NET applications, supports low-cost hosting and whose databases can be migrated to the full-on version of SQL Server.
  • ASP.NET “Razor”: A new view engine option for ASP.NET for easy and clean templating with a simple syntax. You can use Razor to embed C# or VB into HTML.

WebMatrix ties these goodies together in a nice simple package that the beginning web developer will find easy to use and that the pro web developer will find handy for building quick sites. These parts are also available individually to ASP.NET developers and will soon be available to ASP.NET MVC developers.

If you’re looking for a quick video tour of WebMatrix, chack out the Channel 9 video below:

Get Microsoft Silverlight

Can’t see the video? You can download and install Silverlight or download the video in iPod, MP3, PSP, WMA, WMV, WMV (High) or Zune formats.

A Quick Look at WebMatrix’s Parts

WebMatrix provides a simple, task-based interface for quickly creating web sites, both static and dynamic:

WebMatrix "Quick Start" screen, with four links: My Sites, Site from Web Gallery, Site from Template, Site from Folder

It makes it easy to include open source ASP.NET- and PHP-based web applications in your site:

WebMatrix App Gallery page, featuring apps like DotNetNuke and WordPress

It’s also easy to manage applications in a WebMatrix site:

BlogEngine.NET management page in WebMatrix
If you’d rather write your own web app in WebMatrix, you can do that too. There’s a rich file editor:

WebMatrix file editor, showing the site.master page in BlogEngine.NET being edited

And database definition and management tools:

Screenshot of table definiton and contents in WebMatrix's database tools

There’s also sample code and web helpers to make your life easier and show you what’s possible, such as this handy sample that makes it easy to make a Twitter client. Here’s the code that takes advantage of the sample:

WebMatrix code editor showing a Twitter class' "Search" method being called

…and here’s the result:

Screenshot of sample Twitter app in WebMatrix

If you need to get hardcore, you can open your WebMatrix project in Visual Studio or even the free-as-in-beer Visual Web Developer 2010 Express:

WebMatrix toolbar, with the "Launch in Visual Studio" button highlighted

Previewing your WebMatrix site in multiple browsers is a snap:

The "Run" button in WebMatrix, showing the different browsers you can use to preview your site

Deployment is nice and easy once you’re doing editing your site:

The "publish" button and screen in WebMatrix

Find Out More

I haven’t had a chance to take WebMatrix out for a proper spin yet, but I’m hoping to over the next few days. It’s a collection of cool technologies (which I ‘ll also use in my regular ASP.NET MVC development) wrapped together by a nice, simple tool that’s great for the web developer who’s not working on enterprise sites. I can also see myself using it as a handy prototyping tool.

If you’d like to find out more about WebMatrix, take a look at these:

Download the WebMatrix Beta now!

WebMatrix has just been released as a beta and available for download right now! We want you to try it out and let us know what you think, because we’ll be refining it based on what you tell us.

This article also appears in Canadian Developer Connection.

{ 3 comments }

Dive Into HTML 5

by Joey deVilla on June 30, 2010

dive into html 5

If you’ve decided to learn HTML 5 and are looking for a good introduction, I can’t think of a better starting point than Mark Pilgrim’s Dive Into HTML 5. If Mark’s name rings a bell, it’s probably because you’ve heard of his books Dive Into Python and Dive Into Accessibility. As you can see, he’s taken a theme and he’s running with it.

Dive Into HTML 5 covers a number of topics, including:

Mark has a knack for explaining things, so I’m always happy to point people to his books. I consider Dive Into HTML 5 to be pretty comprehensive; you could create a course based solely on the material in this book, and thanks to the licensing, you can!

Dive Into HTML 5 is available for free online and is a work in progress. It seems to be largely complete with only a couple of missing chapters, and when it’s done, it’ll be available in a couple of forms:

  • For free, online
  • For money, in the form of an O’Reilly book

As with Dive Into Python and Dive Into Accessibility, Dive Into HTML 5 is published under a Creative Commons “By” 3.0 license. You can freely share the contents of the book and even take it and adapt it any way you please: into your presentations, into a lecture or blog article series, or even your own book on HTML 5 – as long as you give Mark credit for creating the original work.

This article also appears in Canadian Developer Connection.

{ 1 comment }

IE’s Big Leap Forward

by Joey deVilla on June 28, 2010

"nine" spelled using the IE logo for the "e"Peter-Paul “ppk” Koch writes in his blog, QuirksBlog (which lives on his site, QuirksMode):

In the past few days I’ve been revising the CSS compatibility table with information about the latest crop of browsers. There’s no doubt about it: this is IE9’s show. It just supports nearly everything. No hassle, no buts.

Microsoft has finally taken the big leap forward we’ve been waiting for ever since they announced their decision to restart IE development back in 2005.

IE9 promises to be an excellent browser. Its CSS support is now at par with that of the other browsers — although each browser still has its specific areas where it performs less. But we cannot in good faith say that IE is behind the others any more.

In the article, he does a run-down of CSS selectors and finds that the upcoming IE9 does an excellent job of supporting them.

Go take IE9 for a spin – download Platform Preview 3 and try it out – and make sure to try your hand at CSS 3 as well!

Download IE9 Platform Preview 3 now!

This article also appears in Canadian Developer Connection.

{ 0 comments }

IE9’s Hardware-Accelerated Canvas in Action

by Joey deVilla on June 24, 2010

As announced in yesterday’s posting, Platform Preview 3 of Internet Explorer 9 is out, and it’s faster than snakes on ice. Some of the credit goes to “Chakra”, the new JavaScript engine, and some of it goes to IE9’s hardware acceleration, which bypasses the layers of abstraction between your web app and the “metal” (namely, your browser, and then the underlying OS).

Download Squad have posted a video showing IE9 Platform Preview 3 blazing past Chrome 6 in side-by-side sessions of the “FishIE Tank” canvas demo. Even on my “medium performance” machine – a Dell Latitude XT2 tablet whose graphics card gets a 3.2 on the Windows Experience Index – I have to push the fish count to 250 before the frame rate drops below 30 fps. Here’s a screenshot taken from that laptop running FishIE Tank, rendering 250 constantly moving and scaling fish sprites between 22 and 29 fps:

fishIE tanks screen shot

The Mr. Potato Gun canvas test is amusing. You load a reasonable facsimile of a popular toy into a potato gun, pull the trigger and watch the hapless tuber’s components fly all over the screen:

mr potato gun

Here’s a demo featuring a more practical use of canvas: Amazon Shelf, which presents a bookshelf of some of Amazon.com’s current bestsellers:

amazon shelf 1

Click on a book in Amazon Shelf to get a better look at its cover:

amazon shelf 2

Click on that cover and get the publisher’s blurb and customer ratings:

amazon shelf 3

Take IE9 out for a spin! Visit the IE9 Test Drive site, download IE9 Platform Preview 3 and hit some canvas-enabled sites.

download

This article also appears in Canadian Developer Connection.

{ 0 comments }

"nine" spelled using the IE logo for the "e"

Back in March, when the first platform preview of Internet Explorer 9 was released at the MIX10 conference, the IE9 team promised to release new previews of the browser about every eight weeks. Eight weeks after MIX10, they kept their promise and released Platform Preview 2. It featured improved JavaScript performance and better adherence to HTML5/CSS/JavaScript standards.

A red, green and blue "Pokeball", each with the IE logo on it

Eight weeks has passed since Platform Preview 2, and it’s time for another release. I’m pleased to announce the launch of Internet Explorer 9 Platform Preview 3! Go ahead, download it, and read on to find out what’s in this new Platform Preview.

V8 engine: "Hardware acceleration"

Not so long ago, if you were using an application, chances are that it was a desktop native app running on top of your operating system. These days, the odds are that the apps you’re running are web apps, which run inside your browser, which in turn run on top of your OS. Even if you’re not factoring in network latency, that extra layer of abstraction slows things down. Hardware acceleration is one fix to this problem, and that’s a major focus of Platform Preview 3. IE9 takes advantage of your computer’s GPU to render HTML graphics and text with greater speed.

Rocket-powered 18-wheeler truck: "JavaScript Performance"

When we say “HTML5”, we’re talking about more than just HTML and the associated styling, but JavaScript as well. Luckily, we’re not only speeding up HTML rendering; we’re also cranking up the JavaScript engine, codenamed “Chakra”, which is even faster in this release.

All this work means that IE9’s performance has been improving steadily since it was first shown (but not released) to the audience at the PDC conference in November. Here are the results of the SunSpider JavaScript benchmark for a number of IE9 iterations (and a Firefox thrown in for good measure):

Graph showing the performance of various version of IE9 previews

And here’s a “wider” version of that chart, showing more of the Esteemed Competition’s browsers:

WebKit SunSpider JavaScript Benchmark results, showing IE9 Platform preview 3 placing nicely

This puts IE9’s JavaScript performance within 50 milliseconds of the fastest browsers – that’s the time it takes sound to travel less than a couple dozen paces.

As the IE9 team will tell you, while JavaScript speed is important, many sites spend cycles in a browser’s subsystems that aren’t JavaScript. They’re always benchmarking against more than just the SunSpider test, but against some of the most popular sites on the net, a real-world test of a browser’s performance, and they’re not done optimizing yet.

By the bye, IE9’s JavaScript isn’t just fast, it adheres better to the ECMAScript standard and even implements new features in the 5th edition of the spec, known colloquially as ES5. They include new array and object methods, as well as other language enhancements for working with strings and dates, and the IE Test Drive site has some demos showing them in action.

"Three Keyboard Cats" pardoy of the "Three Wolf Shirt": "Audio and Video"

Speed is just one dimension of browsing – standards is an important one, too! The support for the <audio> and <video> tags we talked about at MIX10 has been baked into Platform Preview 3.

There is one tag that was conspicuous in its absence, leaving a number of cynics, wags and conspiracy theorists to jump to the conclusion that it would never be included in IE9. Well, it’s here…

Vincent Van Gogh: "Canvas!"

That’s right, Platform Preview 3 introduces the <canvas> tag to Internet Explorer. And it’s hardware-accelerated, too!

We’ve got a number of demos on the Test Drive IE site showing off hardware-accelerated <canvas>, including “Asteroid Belt”, shown below:

Screenshot of the IE9 "Asteroid Belt" demo

So how does Platform Preview 3 fare on the Acid3 test suite, the supposed bane of Internet Explorer’s existence? Not too shabby, jumping up to 83 out of a possible 100 (if you recall, Platform Preview 2’s score was 68):

Acid3 test result screen for IE9 Platform Preview 3: 83/100

There’s a lot more in Internet Explorer 9’s Platform Preview 3, but in the spirit of “Show, don’t tell”, I’m sending you to the IE Test Drive site to download it and take it for a spin, and please let us know what you think!

Download IE9 Platform Preview 3 now!

This article also appears in Canadian Developer Connection.

{ 3 comments }

checklist manifesto

Checklists

To put it into programmer-speak, checklists are unit tests for everyday life. Like unit tests, checklists appear to be additional make-work that take valuable time away from performing the task at hand. However, when done right, checklists save time by helping ensure you’re doing everything you need to do and can even function as a sort of specification for the task (in fact, like unit tests, checklists often end up being the “real” specification for all intents and purposes).

Checklists may seem to the be province of by-the-book, obey-all-rules-and-regulations slaves to procedure, but I think it’s one thing those Poindexters got right. I would argue that the structure and order that they provide free us to spend our energy on those less controllable, more chaotic parts of our lives, work and play. As I like to say, “preparedness enables spontaneity”.

I could go on about the power of checklists and how even a pretty random goofball such as Yours Truly has benefited from them (at least when I use them), but I’d serve you better by pointing you to Atul Gawande’s book, The Checklist Manifesto: How to Get Things Right. In it, Gawande writes about how checklists have improved the outcomes in his own surgical practice, as well as in other fields such as piloting, where bad outcomes are really bad.

Launchlist

01 launchlist logoIn spite of repeated threats from your client, the odds are that no one will get injured or die if something’s wrong with the web site or application that you’re working on. I hope that you still have enough pride in your work and your profession that you want to get things right. If you do – and I hope that’s why you’re reading this blog; you’re the sort of reader I’m going after – you’ll want to use tools like unit tests and checklists to ensure you’re getting things done properly.

One such tool is Launchlist, a simple-but-useful web application that acts as a checklist for web developers and designers. Built by Jay Hollywood (coincidentally my stage name should this computer fad blow over and I need to become an “exotic dancer” to pay the rent) and Lee Karolczak, it is:

…intended to help and encourage web designers and developers to check their work before exposing it to the world at large.

The product was born out of frustration. For too long we had been using archaic methods to conduct pre-launch testing and the web was an obvious choice to do it better.

Launchlist features a set of questions about the site you’re working on, based on Hollywood’s and Karolczak’s own experiences building sites. You should be able to answer “yes” to all of them before you unleash your site upon the world:

03 list

Launchlist could’ve been a simple site using checkboxes and bog-standard form elements, but in the age of modern web apps and increased appreciation of design that’s both functional and beautiful, I’m glad to see that they went the extra mile and worked some CSS magic. The “yes/no” toggle switches are beautiful, yet function quite well as checkboxes, and even the “Product Details” section, which would’ve functioned quite adequately as a bunch of ho-hum text fields, is pleasing to the eye:

02 project details

Here’s a set of items on Launchlist’s checklist that shows what “checked” and “unchecked” items look like:

04 checked and unchecked items

Launchlist’s creators came up with a set of questions that should apply to most web sites. However, if some of them don’t apply to your site, you can simply mark them as “not applicable”:

05 not applicable

You can even add a comment to an item in Launchlists’s checklist, in case a simple “yes/no” answer isn’t sufficient:

06 comment

And knowing that you might have checklist items that are unique to your projects, they gave Launchlist the ability to house up to 10 custom ones, like the one I created, shown below:

07 custom item

The status report is at the bottom of the list, which is also where you can add your own custom items to the checklist. If any of the applicable items in the checklist remain unchecked, the status report will read “Launch not advisable” and report the number of unchecked items:

08 launch not advisable

If you checked all the applicable items in the checklist, Launchlist declares that your site is ready for launch:

09 go for launch

Once you’re done checking and unchecking items, you click the “Submit report” button at the bottom, after which you’ll see this:

10 report sent

…and as the text in the “Your report has been sent” message says, you and the intended recipient of the status report are emailed. Here’s the text of the report that Launchlist sent to me:

Launchlist Submission Report for Test (http://joeydevilla.com):

Status: Launch not advisable – 5 items are still outstanding.
We recommend you resolve these items before launching your website.

ITEMS OUTSTANDING (NOT CHECKED)
—————————————————————————-

- Required fields have been tested?
- Forms send to correct recipient?
- Web Statistics package installed and operational?
- 404 page exists and informative?
-

APPROVED ITEMS (CHECKED)
—————————————————————————-

- All text free from spelling errors?
- Page & Content formatting has been tested?
- Print stylesheet exists and tested?
- Meta data has been included and is appropriate?
- Page titles are descriptive and SEO friendly?
- Images have appropriate alt tags?
- Title tags are appropriate and SEO friendly?
- Favicon has been created and displays correctly?
- Footer includes copyright and link to site creator?
- HTML has passed validation?
- CSS has passed validation?
  Comment – Todd says he’ll have it fixed by Friday.

- There are no broken links?
- JavaScript is error free?
- Displays & functions correctly in ie7?
- Displays & functions correctly in ie8?
- Displays & functions correctly in Firefox (Mac & PC)?
- Displays & functions correctly in Chrome (Mac & PC)?
- Displays & functions correctly in Safari (Mac & PC)?
- Displays & functions correctly in Opera (Mac & PC)?
- Tested at 1024 x 768 resolution?
- Tested at larger resolutions?
- Forms have been tested and processed correctly?
- Picture of Sean Connery in "Zardoz" outfit on every page?

—————————————————————————-

This report has been crafted and delivered via Launchlist http://www.launchlist.net

Follow Launchlist on twitter – http://twitter.com/launchlistapp

Lessons from Launchlist

Here’s a quick run-down of what I think can be learned from Launchlist. I’m sure that I’ll think of more after I’ve published this article…

  • Design matters. Launchlist could’ve been built without all the stack we like to call "HTML5” (it’s really HTML5, CSS and JavaScript working together) and the gorgeous design, but without it, you wouldn’t be compelled to use it. And the design goes beyond its good looks; there’s also a great deal of usability and user experience design in Launchlist, from its clean layout to the controls that pop up only when they’re needed.
  • You can do HTML5 in Internet Explorer. Launchlist works just fine with Internet Explorer 8 (the screenshots I took for this article were taken from a Launchlist session in IE8) – a quick “View Source” reveals that they used the HTML5 Shim for IE. And of course, there’s IE9, which the Internet Explorer team is working furiously on.
  • Do one thing, and do it very, very well. I think that this is a good app philosophy, and I believe it applies doubly to those of you planning to build apps for mobile devices, whether they’re phones or tablets.
  • “Freemium” (or: Apps can be ads). Launchlist’s creators say that the version of Launchlist at Launchlist.net will always be free, but that they’re working on a paid subscription version with more features. I think this is a good approach – there’s no marketing like a “starter” version, especially when what you’re making is so nice.

This article also appears in Canadian Developer Connection.

{ 1 comment }