Today I came across a del.icio.us link from Jonathon Snook about how Mambo will be integrating Cake PHP for version 5.0. I wasn’t able to find a development time line but did come across some other interesting news.

The team has spent a considerable amount of time working on XHTML validation, WCAG 1.0 (Priority 1, 2, and some 3), removal of unnecessary and/or inaccessible JavaScript code, improved usability, plus much more.
from "Baking Mambo" written by Chad Auld

I hope that 4.7 comes out soon and that the work indicated by the preceding quote actually makes a difference. It would be great to see a success for Mambo that causes a cascade of other CMSs to follow suit.

The ASP.Net CheckBox and CheckBoxList control don’t allow for the use of the full W3C HTML standard. For some reason Microsoft decided to implement a reduced functionality version that creates more work for the programmer. Come on Microsoft why can’t you follow even the simplest of standards? In this case it would make coding the .Net framework easier for you not to mention us!

The W3C HTML 4.01 specification specifically states for the value attribute to:

– Specify for radio buttons and checkboxes –
W3C HTML 4.01 Specification – INPUT Element

To me this quote reads as a strong recommendation to specify the value attribute rather than leave it up to the browsers default (generally "On"). Microsoft decided to not even allow the value attribute to be set. They went so far as to have a validation message built into Visual Studio that says:

Attribute ‘Value’ is not a valid attribute of element ‘CheckBox’

If you ignore the warning and run the page, the value attribute is missing. I have even tried circumventing the ASP.Net HTML-izer by adding value to the attributes collection with no success. Microsoft intentionally strips it, so I can only assume they have some reasoning behind this behavior and I imagine they will say something about security in defense.

There is one way to circumvent the behavior but it requires not using ASP.Net controls. Simply insert traditional input type=”checkbox” elements into your page and collect their values using Request.Form.

Sub Page_Load ()
  Dim value As String
  value = Request.Form("chkItem")
End Sub
…
<input type="checkbox" id="chkItem" name="chkItem" />
<label for="chkItem">CheckBox Item Text</label>

I made a big deal out of this issue simply because to me it doesn’t make any sense. You can get around the issue and still use ASP.Net controls but it requires extra coding.

Sub Page_Load ()
  Dim value As String
  If chkItem.Checked Then
    value = "Some Value"
  Else
    value = "Some Other Value"
  End If
End Sub
…
<asp:CheckBox ID="chkItem" Text="CheckBox Item Text" runat="server" />

When using the CheckBoxList control you will notice ASP.Net uses tables to layout the list. To keep it from doing this you simply need to add a few attributes. It should then use much more standards compliant code. I also show how to access which boxes are checked after postback in a CheckBoxList.

Sub Page_Load ()
  ' Find out which boxes were checked
  Dim value As String = ""
  For Each item As ListItem In cblTest.Items
    If item.Selected Then
      value &= item.Value
    End If
  Next
End Sub
…
<asp:CheckBoxList ID="cblList" RepeatLayout="Flow" RepeatDirection="Horizontal" runat="server">
  <asp:ListItem Text="Item 1" Value="1" />
  <asp:ListItem Text="Item 2" Value="2" />
  <asp:ListItem Text="Item 3" Value="3" />
</asp:CheckBoxList>

As always let me know if you have any questions.

I have received a few requests via email and in comments for more detail on how to get your data back after postback with dynamic controls. This evening I started to put together some code examples and mulled over the details of the article in my head. The first step was to re-read my previous two articles so I could get my bearings on where to start. Part 1 of this series is an initial outline of how to create dynamic controls and use Request.Form to collect the data after postback. Part 2 went into detail on how to figure out which button was clicked to cause postback using a JavaScript technique. In the middle of re-reading the second article I had an epiphany. There is a better way to do that! The proper method is standards compliant, accessible and is outlined in the W3C HTML specifications. So I will put the original article on hold and explain this technique.

What I didn’t realize when I wrote Part 2 of this series was that HTML forms have a built in way to recognize what button was clicked. Here is a relevant quote from the spec explaining it (poorly).

A successful control is “valid” for submission. Every successful control has its control name paired with its current value as part of the submitted form data set. A successful control must be defined within a FORM element and must have a control name.

So that is just a wordy way to say that form elements have their values returned in a name/value pair after the form is submitted. We have all seen the URL GET version (http://…../index.php?name=value&name2=value2) of this and the POST version is the same inside the closed POST package. So the only question is “What is a successful control really?” which requires more digging. Take a look for yourself there are many reasons. The one that is most interesting is “If a form contains more than one submit button, only the activated submit button is successful.” Perfect! So which ever button is clicked will have its name/value pair available to us on the other side of the submit. Lets take a look at an example:

<form method="get" action="self.php">
  <input type="submit" name="button1" value="Text on Button1" />
  <input type="submit" name="button2" value="Text on Button2" />
</form>

You can see that the name/value pair after the question mark shows which you clicked. Since this does not require JavaScript it is a much more accessible solution to the problem. A wider number of users are now able to participate which takes us closer to our goal of creating a great website. The next step is to figure out how to utilize this information to overcome the chicken and egg problem.

Before going further I thought I would recap the chicken and egg problem so you know why we are doing this in the first place. The simplest example is a dynamic list of, for example, your friends on Facebook. When the page is generated we go to the database and collect all the people you have tagged as friends generating a list on the page. Each entry has some tools so you can interact with your friends, this included a delete button to remove them (perhaps if they Poke you rudely or defamate your wall). In order for the buttons to function we needed to generate the list in the Page_Load event. Now when the user pushes the delete button the page is redrawn. Event handlers fire after Page_Load so we have already added the deleted person back before they are to be deleted. In some cases it wouldn’t be a problem to simply remove them but it is wasted effort. We need a way of knowing about the click before we regenerate the list

Sub Page_Load()
  Dim i As Integer
  Dim btn As Button
  For i = 1 To 10
    btn = New Button
    btn.ID = "btn" & i
    btn.Text = "Button " & i
    phFun.Controls.Add(btn)
  Next

  For i = 1 To 10
    If Not String.IsNullOrEmpty(Request.Form("btn" & i)) Then
      … ' Perform action on the ith item
    End If
  Next
End Sub
…
<asp:PlaceHolder ID="phFun" runat="server" />

You will notice that in the last example I don’t set the name or the value property of the button control. ASP.Net does the work behind the scenes, whatever you put for the ID will be the id and name attributes in the HTML and whatever you put in for Text will be the value attribute. I would like to hear from you, let me know if this works for you or if you need help getting it to fit the bill for your project. I’ll be back with the article I was initially going to write sometime next week and somewhere down the road I will make the jump to AJAX dynamic controls, stay tuned.

ASP.Net Dynamic Controls (Part 1) «
ASP.Net Dynamic Controls (Part 2) «
ASP.Net Dynamic Controls (Part 4) »

I saw this on reddit today and thought it would amuse a few of you as it did me. I have used Comic Sans on occasion to mimic comic book style in Photoshop and it looks great. The guys at Little Gamers also use it for their comic (9pt regular all-caps, if you were curious). The opening titles for the movie Sky High also take advantage of it, they use it drop shadowed in all-caps, such a fun movie to watch.

Comic Sans is certainly easy to read and is instantly recognizable but is not generally appropriate for use. Unfortunately, you can find tons of sites out there that use it since it is considered a “Web Safe” font of which there are very few. I don’t support a full out ban (other than for comedic purposes) but I agree that it should be a lot less used in the wild.

Update: The comment on Reddit turned up the page of one Vincent Connare the designer of Comic Sans. He gives the history of the font.

Lately I’ve become very interested in typography and what works and doesn’t work. I ventured to the library the other day and grabbed a few tomes that I am reading slowly. It certainly is a very dense topic but is extremely interesting. Once you start to recognize a certain font coming up again and again on posters, in manuals and on TV your interest starts to snowball. Lately I have been noticing Century Gothic everywhere I go, I even use it on my new commercial site. Take a very good look at the small A character it is the defining character of this font. You can see that the circle is reused throughout the small letters with the exact same dimensions. Trust me it is everywhere and now you will notice it too. :o)

Quite a few bloggers that used to use gravatars like Veerle Pieters and Roger Johansson have now turned them off due to the issues. I’m not sure if the issue is with bandwidth or misconfiguration but hopefully they will fix it before people completely abandon them because the idea is great.

I have decided to continue supporting cancer on this site by including links to the Canadian Breast Cancer Foundation and the Canadian Cancer Society in the footer.

Just for fun here is a complete list of all the 81 HTML tags in the standard (not including those that are deprecated). A, ABBR, ACRONYM, ADDRESS, AREA, B, BASE, BDO, BIG, BLOCKQUOTE, BODY, BR, BUTTON, CAPTION, CITE, CODE, COL, COLGROUP, DD, DEL, DFN, DIV, DL, DT, EM, FIELDSET, FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, HEAD, HR, HTML, I, IFRAME, IMG, INPUT, INS, KBD, LABEL, LEGEND, LI, LINK, MAP, META, NOFRAMES, NOSCRIPT, OBJECT, OL, OPTGROUP, OPTION, P, PARAM, PRE, Q, SAMP, SCRIPT, SELECT, SMALL, SPAN, STRONG, STYLE, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TITLE, TR, TT, UL, VAR. By show of hands how many people can say what each and every tag in that list is for? Probably a very select few of you and certainly not I. In this article I will cover the function of some of these tags with a code example for each. I plan on leaving the set of table tags, form tags and coding tags for other articles since there are so many.

ABBR

W3C: Indicates an abbreviated form (e.g., WWW, HTTP, URI, Mass., etc.)
The abbreviation tag is used to provide the expanded meaning of the abbreviation used in your web content. It is a very useful tag since it allows you to always use the abbreviation without wasting space on defining it. It also adds accessibility to your site since screen readers know exactly how to process it. One very unfortunate issue with this tag is that it is not supported by IE6 which simply ignores it.

<abbr title="World Wide Web">WWW</abbr>

ACRONYM

W3C: Indicates an acronym (e.g., WAC, radar, etc.)
The acronym tag is very similar to the abbreviation tag which causes quite a bit of confusion. The general consensus is that if the short form is spelled out letter by letter than it is an abbreviation otherwise use an acronym tag. Definition-wise an acronym IS an abbreviation and there is some speculation that the W3C will deprecate the acronym tag in a future HTML version. IE6 does support this tag.

<acronym title="What You See Is What You Get">WYSIWYG</acronym>

ADDRESS

W3C: …used by authors to supply contact information for a document…
The address tag is for semantic purposes. By default browsers will render the contained text in italics unless you style it with CSS but its primary purpose is to provide search engines and other tools with a better picture of how your content is laid out. Many people use the address tag to wrap their entire hCard and others use it only for physical addresses. There is also debate as to whether it is proper to put any contact info or address in the tag only that of the page maintainer/author.

<address class="vcard">
  <a class="url fn" href="http://adamhewgill.com/">Adam Hewgill</a>
  <div class="org">dev|sushi</div>
</address>

BDO

W3C: allows authors to turn off the bidirectional algorithm for selected fragments of text
I didn’t look much into bi-directional text since I don’t do any internationalization. The tag is an abbreviation of Bi-Directional Override and does just that. It overrides the dir property of parent tags for certain problem areas.

<p>
  <bdo dir="ltr">Some Text</bdo>
  <bdo dir="rtl">Some Other Text</bdo>
</p>

CITE

W3C: Contains a citation or a reference to other sources
The citation tag causes browsers to render the content in italics. This may or may not be the desired result that was intended. There is a very good discussion on the proper use of the cite tag at thescripts. The issues stem from the difference between print typography and semantic markup. Semantically it makes sense to use a cite tag when referencing external works but typographers only italicize citation names when the reference is to a book or magazine not a person.

<blockquote>
I've thought of an ending for my book -
“And he lived happily ever after… to the end of his days.”
</blockquote>
- <cite>Bilbo Baggins</cite>

DL, DT, DD

W3C: Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term and a description
I’ve never really seen this in the wild and a quick Google search doesn’t do much to fix that. There may be some rendering weirdness with this tag but more than likely people just do definitions differently. The definition list would work well for a synopsis of definitions at the end of a document but that isn’t very convenient. Definitions work better spread out so that if your reading a document and you reach a word you don’t know you don’t have to scroll far to find it. (In my opinion anyway)

<dl>
  <dt>Water</dt><dd>fluid substance comprised of H2O molecules</dd>
  <dt>Ice</dt><dd>frozen water</dd>
</dl>

DEL, INS

W3C: used to markup sections of the document that have been inserted or deleted with respect to a different version of a document
These tags are very odd so to get the low down it is best to read the standard. You can include a citation for the reason for the change and the date of the change via properties. I suspect that these tags are really bad for the accessibility of your document although it may improve search hits (however I have no proof either way).

<p>I have <del>one</del><ins>two</ins> grey cat<ins>s</ins>.</p>

DFN

W3C: Indicates that this is the defining instance of the enclosed term
A good discussion of this tag is held on the juicy studio blog. The gist is that the content text is rendered in italics and the title attribute is provided as a tooltip on mouse-over.

<dfn title="unsolicited email">spam</dfn>

Q

W3C: short quotations (inline content) that don’t require paragraph breaks
For the most part the quote tag is just an inline version of the blockquote tag with a few differences worth noting when it comes to rendering. A blockquote is usually rendered as an indented block where the quote tag is rendered as a quoted inline length of text. The standard says that the quotes are not to be entered by the author and instead are rendered by the browser. Unfortunately IE6 doesn’t do this so you must work around the issue. There is a great article written by Stacey Cordoni at A List Apart that discusses a CSS based solution. Update: Roger Johansson adds his two cents about the Q tag issues and brings up some great points about accessibility and effecting the least number of people. I am now leaning toward the JavaScript solution, thanks Roger.

<p>I have always enjoyed the saying <q>Carpe Diem!</q>,
it says so much in so few words.</p>

SUB, SUP

W3C: Many scripts (e.g., French) require superscripts or subscripts for proper rendering. The SUB and SUP elements should be used to markup text in these cases
The subscript and superscript tags are very simple and do exactly as you would expect. Both tags render the contained text much smaller and the difference lies in the final placement. The superscript tag raises it off the base of the line and the subscript tag lowers it below. These are primarily used for footnote numbers or the “st, nd, rd, th” markers when referring to position.

<p>Itō Hirobumi was the 1<sup>st</sup> Prime Minister of Japan.<p>

There are several other tags that I don’t know but chances are I will cover them at some time in the future but for now here are the three groups. Form tags: FIELDSET, LEGEND and LABEL. Table tags: CAPTION, COL, COLGROUP, TH, TBODY, THEAD and TFOOT. Code display tags: CODE, SAMP, KBD, VAR. They all have their uses and for the most part are very infrequently used to markup their respective categories. If we start to expand our knowledge of the basic elements of the language we use we become better developers. If you want to start somewhere try adding a hCard to your site using Mike Jolley’s microformats article.