Archive for September, 2011

What’s wrong with Microsoft ?

I left Microsoft a few weeks ago after ten years in the Web Developer Tools and Platforms group. Leaving a company after that long is kind of like a divorce. You’re a little sad, a little anxious, a little angry.

However, I think it’s wrong to start with the premise that there  is anything “wrong” with Microsoft. One could argue that this is just a time of growing pains for the company.

I must note before I continue that what follows is nothing more than my personal opinion, it’s just observation and conjecture based on my experience.

Microsoft grew to dominance in a very different technological era than the one we live in today.

AT&T was once absolutely dominant in the telecommunications industry, it slid almost into obscurity and it has since rebuilt itself to become a significant participant in a re-invented industry.

The question as it pertains to Microsoft is, does Microsoft need to do that today, and is it capable of doing so?mismanaged

Microsoft’s success was more than just a matter of being in the right place at the right time. Bill Gates made clever decisions during a perfect storm or circumstances that made the personal computer both possible and viable. But Bill Gates is not making the decisions at Microsoft any more. Microsoft Windows and Microsoft Office grew to dominance in a time when the personal computer was the entire industry. Now, I’m not suggesting that Microsoft didn’t make smart choices and investments along the way and I’m not saying that they didn’t develop some outstanding products because they did.

So, what’s different now? What are the new challenges?

When I last heard a statistic on the subject, something like 65% of Microsoft’s residual revenue stream was produced by Windows and Office, which I’ll collectively refer to as “the desktop”. We could make the argument that these two sets of products are really a single product line as they are inextricably bound and marketed to a single customer base via a unified strategy. Microsoft still has market dominance in the desktop, though it has started to lose some of that majority percentage to Apple, Linux, and non-PC based computing.

But the state of the desktop is becoming a problem for Microsoft. I predict Windows Vista will be looked back on as the biggest disaster in Microsoft’s history, and not because it was technically bad. In fact I don’t think it was technically bad, but I think as a product it was terribly . Microsoft started talking about Windows Vista and advertising it’s features far before it was sure it could even deliver those features. Ultimately it didn’t deliver some of the features that were most anxiously anticipated. Microsoft also failed to properly engage OEMs and ISVs to insure compatibility of existing hardware and application software.

Window 7 was an improvement, but Windows Vista had done it’s damage. Millions of users discovered that they didn’t actually need to upgrade their operating system just because Microsoft published a new version. The poor publicity of Windows Vista fueled an acceleration of new Apple Mac purchases and a bump in adoption of Linux on the desktop. People purchased new Windows based Personal Computers and “upgraded” Windows Vista to Windows XP.

Windows XP is still the most popular version of Windows and this is symptomatic of a bigger problem. When it comes to both Windows and Microsoft Office, the existing, and even older versions of the software are “good enough”. The more the products evolve, the more the development teams need to stretch to add new features and the less the average user needs those new features. Those features don’t always justify the cost of an upgrade.

Should I upgrade Windows and Office with features I probably don’t need or should I use that money and go buy a new iPad ?

Read the rest of this entry »

A Useful Firefox Plugin for Web Developers – Firesizer

I tend to develop for a 960 grid system but have recently started working on an HTML5 application that I want the user to be able to resize to utilize whatever screen resolution that their display has.

To do this, I need to preview the application’s display at various resolutions.

The Firefox Resizer Plug-In is very helpful for this purpose.

It’s lets you choose what size to make the Firefox browser window.

To install it, select Tools -> Add-ons and search for Firesizer.

After you install it you still won’t see it by default.

You need to make the Add-on bar visible. View -> Tool Bars -> Add-On Bar

You should see it as in this image.

You can then right-click on the display size that is displayed.

And choose the one you want to view your page at.


What’s New in HTML5 – Markup and More !

HTML5 is poised to change not only Web development, but application development in general and when I say HTMl5, I mean “the wave” and not only the additions to the HTML5 syntax spec.

I’ve been building an HTML5 presentation (have a great conference coming up ?) and planning a collection of How-To content so i thought it might be a good idea to enumerate the new wave of web development technology so that I can cover as much as possible. As I do feature specific content I’ll update this page to link from the entries here.

There are API features and extensions beyond the HTML5 syntax itself.

  • Selectors
  • Web Workers
  • Web Storage
  • Web SQL Storage
  • Offline Application Cache
  • WebSockets
  • Geolocation
  • Notifications

And then there are the additions to the spec itself.

Lets look …

TAGS

<article> Defines an article
<aside> Defines content aside from the page content
<audio> Defines sound content
<canvas> Defines graphics
<command> Defines a command button
<datalist> Defines a dropdown list
<details> Defines details of an element
<embed> Defines external interactive content or plugin
<figcaption> Defines the caption of a figure element
<figure> Defines a group of media content, and their caption
<footer> Defines a footer for a section or page
<header> Defines a header for a section or page
<hgroup> Defines information about a section in a document
<keygen> Defines a generated key in a form
<mark> Defines marked text
<meter> Defines measurement within a predefined range
<nav> Defines navigation links
<output> Defines some types of output
<progress> Defines progress of a task of any kind
<rp> Used in ruby annotations to define what to show if a browser does not support the ruby element
<rt> Defines explanation to ruby annotations
<ruby> Defines ruby annotations
<section> Defines a section
<source> Defines media resources
<summary> Defines the header of a “detail” element
<time> Defines a date/time
<video> Defines a video
<wbr> Defines a possible line-break

ATTRIBUTES

contenteditable Specifies whether a user can edit the content of an element or not
contextmenu Specifies a context menu for an element
draggable Specifies whether a user is allowed to drag an element or not
dropzone Specifies what happens when dragged items/data is dropped in the element
hidden Specifies that an element should be hidden
spellcheck Specifies if the element must have its spelling and grammar checked

EVENTS

DOCUMENT
onafterprint Script to be run after the document is printed
onbeforeprint Script to be run before the document is printed
onbeforeonload Script to be run before the document loads
onerror Script to be run when an error occur
onhaschange Script to be run when the document has changed
onmessage Script to be run when the message is triggered
onoffline Script to be run when the document goes offline
ononlineNew Script to be run when the document comes online
onpagehide Script to be run when the window is hidden
onpageshow Script to be run when the window becomes visible
onpopstate Script to be run when the window’s history changes
onredo Script to be run when the document performs a redo
onresize Script to be run when the window is resized
onstorage Script to be run when the document loads
onundo Script to be run when the document performs an undo
onunload Script to be run when the user leaves the document
FORM
oncontextmenu Script to be run when a context menu is triggered
onformchange Script to be run when a form changes
onforminput Script to be run when a form gets user input
oninput Script to be run when an element gets user input
oninvalid Script to be run when an element is invalid
DRAG & DROP
ondrag Script to be run when an element is dragged
ondragend Script to be run at the end of a drag operation
ondragenter Script to be run when an element has been dragged to a valid drop target
ondragleave Script to be run when an element leaves a valid drop target
ondragover Script to be run when an element is being dragged over a valid drop target
ondragstart Script to be run at the start of a drag operation
ondrop Script to be run when dragged element is being dropped
SCROLL
onmousewheel Script to be run when the mouse wheel is being rotated
onscroll Script to be run when an element’s scrollbar is being scrolled
MEDIA
oncanplay Script to be run when a file is ready to start playing (when it has buffered enough to begin)
oncanplaythrough Script to be run when a file can be played all the way to the end without pausing for buffering
ondurationchange Script to be run when the length of the media changes
onemptied Script to be run when something bad happens and the file is suddenly unavailable (like unexpectedly disconnects)
onended Script to be run when the media has reach the end (a useful event for messages like “thanks for listening”)
onerror Script to be run when an error occurs when the file is being loaded
onloadeddata Script to be run when media data is loaded
onloadedmetadata Script to be run when meta data (like dimensions and duration) are loaded
onloadstart Script to be run just as the file begins to load before anything is actually loaded
onpause Script to be run when the media is paused either by the user or programmatically
onplay Script to be run when the media is ready to start playing
onplaying Script to be run when the media actually has started playing
onprogress Script to be run when the browser is in the process of getting the media data
onratechange Script to be run each time the playback rate changes (like when a user switches to a slow motion or fast forward mode)
onreadystatechange Script to be run each time the ready state changes (the ready state tracks the state of the media data)
onseeked Script to be run when the seeking attribute is set to false indicating that seeking has ended
onseeking Script to be run when the seeking attribute is set to true indicating that seeking is active
onstalled Script to be run when the browser is unable to fetch the media data for whatever reason
onsuspend Script to be run when fetching the media data is stopped before it is completely loaded for whatever reason
ontimeupdate Script to be run when the playing position has changed (like when the user fast forwards to a different point in the media)
onvolumechange Script to be run each time the volume is changed which (includes setting the volume to “mute”)
onwaiting Script to be run when the media has paused but is expected to resume (like when the media pauses to buffer more data)

In addition to the HTML additions for version 5, there are some syntx items that are no longer supported in version 5.
TAGS REMOVED

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>
  • <u>
  • <xmp>

EVENTS REMOVED

  • onreset

Did I miss anything ?

I hope you’ll join me in this new web standards development journey !

Please comment. Post additions, requests, thoughts, questions !


The HTML5 Article Tag – Fixing the World Wide Web

I’ve started working on a few presentations to take on the road to developer conferences and one of the topics is a presentation on HTML5.

Many folks look at new technologies from a somewhat academic perspective, like folks that are frequent public speakers at technical events. This is an important part of the technical evolutionary process. Folks that push the edges of new technologies for their own sake lay the groundwork for how will will apply those technologies in the future.

But I tend to like to focus more on the practical business applications of new technology.

We all know that the World Wide Web is broken.

Once upon a time there was the idea of the World Wide Web as one huge semantic network of information.

se·man·tic

adjective 1. of, pertaining to, or arising from the different meanings of words or other symbols

What we have instead is a glut of content.

From my perspective, one of the most significant enhancements coming in HTML is the collection of additions to semantic markup.

A huge problem with HTML prior to version 5 is that markup lacked any real informational context.

Tags like DIV, SPAN, and TABLE are used to organize the presentation of the content on our page and, of course their associated Id tags can be used to execute code against those elements. Also we have a collection of tags that we can use to describe the aesthetics of other tags, like style, class, width, etc.

But, none of that markup helps us identify actually what is contained inside those tags.

The HTML5 <article> tag, as well as other “semantic” tags in HTML5 go a long way to enable us to solve this problem.

Here is what the HTML5 spec says about the <article> tag.

The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

W3C Specification

Take special note of the phrase “self contained composition”.

Lets look at how an article might have been presented in HTML 4.


<div>
   
   <h1>The 2011 Super Open Source Event</h1>
   <div>

      <h2>Keynotes</h2>

      <p>Important people talking about important stuff.</p>

   </div>
   <div>

      <h2>Sessions</h2>

      <p>Breakout sessions for learning technical details.</p>

   </div>
   <div>

      <h2>Roundtables</h2>

      <p>Open discussions about the new technology.</p>

   </div>
   <strong>Link to get all the videos after the event.</strong>

</div>

Though this content is well organized, there is no semantic context to the content.

So ? You may ask why that matters.

It might not matter if you only want to read content on sites that you already know about and visit, but that’s really far less than the way the web was meant to work.

In fact, even in today’s web, this use-case accounts for a VERY small percentage of the way people actually use the web. The popularity of search engines is clear evidence that people begin most of there interaction with the web by starting with a discovery process. The content above provides very little guidance to discovery mechanisms like search engine indexers which primarily have to rely on word indexing and complex inference algorithms to determine the nature of the content on a page and, even at that, the search engine can’t really help you consume the content it finds, it can only send you to that “page” for further determination as to the appropriateness of the page for your needs.

We have created complete additional technologies like RSS and ATOM to help solve this problem. The problem with those technologies is that they are additions to the actual content. We need to create the content AND we need to create the “feed” that defines that content.

While this works, it is a compete secondary effort and it only works for content when the feed data is explicitly created for that given content. The rest of the web is still just a bunch of words.

Let’s say, for example, that I was building a web site for Tennis fans. If I wanted to index and aggregate articles from various Tennis web sites and those web sites used markup like that above, it would be nearly impossible for an application to figure out what constituted a story on that site.

But, using HTML5′s semantic markup, the content itself contains logical context.

Let’s look at the content above in HTML5 markup.


<article>
   
   <h1>The 2011 Super Open Source Event</h1>
   <section>

      <h2>Keynotes</h2>

      <p>Important people talking about important stuff.</p>

   </section>
   <section>

      <h2>Sessions</h2>

      <p>Breakout sessions for learning technical details.</p>

   </section>
   <section>

      <h2>Roundtables</h2>

      <p>Open discussions about the new technology.</p>

   </section>
   <strong>Link to get all the videos after the event.</strong>

</article>

You can also see an additional addition to HTML5′s new semantic markup – the <section> tag which can be used to segment an article into logical sub units.

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.

I’m working on some code code samples. In the mean time, share your thoughts.


The Difference between HTML DIV and HTML SPAN

Using builder tools like FrontPage or ASP.NET WebForms has permitted web developers the “luxury” of avoiding learning the details of some parts of the standard web application stack (like HTML).

Like many types of syntax, HTML has it’s nuances and one that is often missed by folks learning HTML is the difference between the <DIV> tag and the <SPAN> tag.

Probably the reason that folks find this confusing is the haphazard use of these tags in the markup that they review.

In fact the differences are pretty simple and are clearly defined in the HTML specification.

The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.

http://www.w3.org/TR/html401/struct/global.html#h-7.5.4

Pretty simple when you think about it.

<DIV> renders it’s contents as a block and <SPAN> renders it’s content “in-line”.

I’ve found remembering this useful as I concentrate on avoiding tables for any layout tasks.


Choosing an editor or IDE for development is a personal thing, like choosing a car. What is a perfect ride for one person offers no interest at all to another. Personally, I was never happy with only one car and usually want different ones in the garage so that I can choose the one that most closely matches my mood or the kind of driving that I need to do.

Some folks like the help and tooling of a fully integrated environment like Visual Studio. Others like the hardcore elitism of EMACS or Vi. I’m a pragmatist, I like tools that just help me get the job done.

For right now I’ll focus on tools for the client side of web development. Here’s what I’ve chosen. All of these tools are free. There is one commercial application that I’ll add at the end because I think it’s worth the money.

jEdit is a good general programmer’s editor with syntax highlighting support and, though it’s feature rich, it doesn’t get in your way while you’re writing code.

jEdit is written in Java and so it runs on Linux. Mac and Windows. I especially like the rich plug-in repository where i can get and add all kinds of specific features that I’m interested in.

You can install jEdit via the Ubuntu Software Center.

And you can get plug-ins here – http://plugins.jedit.org/

Though jEdit is a great general purpose programmer’s editor, I tend to like something with HTML specific features when doing HTML work.

Though there are many HTML editors available for Linux and most of them are free, most of them lack any specific support for HTML5.

Read the rest of this entry »

Running Windows Programs on Linux – a tutorial.

Though I’m a long time Linux user, it’s only been a few weeks since I went “cold turkey” and made Linux my primary operating system. LibreOffice has been serving me just fine for all my document work, I’m running much of my daily task work with Google and Thunderbird with Lightening as serving my email and calendar needs just fine.

I’ve found many great development tools too. But, there has been just one Windows application that I have really missed. TopStyle – the CSS editor.

There is a pretty good CSS tool installable from the Ubuntu software center, CSSEd Editor, and for folks with good visual design skills it’s probably plenty powerful enough but TopStyle has a first rate visual preview and didn’t find a way to do that in CSSEd.

So, I broke down and installed TopStyle on Linux.

Yep, TopStyle is a Windows program and I’m running Linux.

To solve this problem we will use WINE to run TopStyle on Linux. “Wine” is a translation layer for Linux running on Intel x86 machines that is capable of running Windows applications. Note that this is not an emulator, so performance is good, but Wine won’t let you run 100% of the applications out there. You can read more about Wine [ HERE ]

Lets walk through getting my Windows program (TopStyle 4) installed and running on Ubuntu Linux.

First, I’ve copied the TopStyle installer to my Linux desktop.

When I double-click on the .exe file to run it I get the following dialog.

You can see that Linux, by default, doesn’t understand the Windows executable file format.

To install Wine, start up the Ubuntu Software Center and enter the word “wine” into the search box.

You will select and install the package “Microsoft Windows Compatibility Layer (meta package).
Read the rest of this entry »

Trying Linux for Windows Users – A visual tutorial.

I was an “Open Source” guy at Microsoft so it only made sense that I did some of my development on Linux.

Many folks have emailed me since leaving Microsoft and joining Mozilla with questions about my decision. While I do intend to blog about my “logic” sometime in the weeks to come, I wanted to invite my readers to join me in zooming up my Open Source skills.

Mozilla provided me with a Mac Book Air and a Samsung Android Tablet, both of which I love, but for web development, I’m going with Linux.

Why ?

Contrary to some popular belief, OS/X is not Linux under the covers. People also say it’s FreeBSD under the covers but I don’t think that is accurate either.

OS/X is based on the Mach Kernel which grew out of NeXTSTEP from which it inherited UNIX-ish bits from FreeBSD and OpenBSD. [ read more ]

The significant majority of apps on the web run on Linux. I’ve hosed sites on Centos for many years and found it to be fast, stable, and very cost effective.

It make’s sense to do your development on the technology that is as close as possible to your deployment stack.

I don’t like the “boxed” web stacks like WAMP or MAMP and I don’t like the way OX/S obscures the OS (again, just for web development purposes.)

Of course there are MANY Linux distros (distributions) to choose from. For production servers my choices are :

  • Red Hat REL when the solution domain required an on-demand support option.
  • CentOS what it does not.

But, for my development desktop I like a little more feature “wiz”. My hard core Open Source buddies will all remind me that “real men use Debian”, but, I’m a pragmatist. What’s more, two of my “other” favorite distros are built on top of Debian.

If you’re new to Linux you may wonder why such a thing matters to you. Well, there are two very popular “packaging strategies” for Linux applications.

  • Red Hat .rpm files
  • Debian .deb files

Both are popular but it seems to me that the .deb format is more current, probably due to the popularity of Ubuntu.

DistroWatch.com   is a great site where you can track the relative popularity of the various Linux distributions. Note that the two most popular (right now ) are Ubuntu (which is built on Debian) and Mint (which is in turn built om Ubuntu). The latest version of Ubuntu came out with a new desktop style called Unity which had been received with mixed reviews and that seems to have resulted in a surge in the popularity pf Mint. It’s really a matter of preference and it’s easy to run Ubuntu without running the new Unity style desktop.

For Windows users moving to Linux, one thing that is a bit of a convenience on Mint is that Mint Linux pre-configures “Wine” and an application installer for Wine. Wine makes it possible to run many (but not all) Windows application on Linux.

Of course, you can also run Wine (and therefore many Windows applications) run on Ubuntu, but for getting started Mint makes it just a little bit more straight forward.

I run both Ubuntu and Mint. In fact I never sell old PCs so I have almost every popular distro running somewhere in my office.

If you’re a developer using Windows (or any Windows user) you probably don’t want to just wipe out your Windows box and re-pave it with Linux, so I thought I’d help folks get started in a way that doesn’t require you to give anything up or take any risks. (Or pay any money.)

In the tutorial below I’ll walk you through setting up Ubuntu on Windows inside a virtual machine.

This will not cost you a penny. Just a few gigabytes of disk space.

NOTE : I do NOT suggest you try this with Microsoft’s free  VirtualPC. Recent versions of the Linux Kernel have problems in MS-VPC. This has been true for years and is a known issue that Microsoft has not fixed. (Which sort of makes sense as their Virtualization products are intended to virtualize their operating systems, though Microsoft’s server virtualization options do provide some level of Linux support.)

The good news is that VMware now offers a free desktop option for personal use. (There are Free Open Source options as well.)

Click on the link below to view the rest of this post and read the tutorial that will walk you though setting up an Ubuntu Linux Virtual PC…..

Read the rest of this entry »