Why Studying for a Microsoft Certification Induces Madness

Let’s see.  The question:

question

Well, I’m really not certain.  Anonymous functions don’t have a name: that’s why they’re called anonymous.  Since an anonymous function doesn’t have a name, I can’t assign it to an element declaratively.  I think that makes sense; unfortunately, it means there are two correct answers and I’m only supposed to choose one.  So, let me give B a shot.  Clearly, anonymous means “of unknown name“.

Wrong.

Wait.  What?

answer

If an anonymous function doesn’t have a name, then wouldn’t having a name not be an attribute of anonymous functions?  Or have I totally misunderstood the question?

Let’s not discuss the code example errors, missing answers to review questions, and IE-specific lessons that drive me crazy.

No NullDisplayText Property for TemplateField? No Sweat!

Microsoft gave us the BoundField.NullDisplayText property to display some text instead of a blank space in case a field is bound with data that is null. That’s handy, but we all know that a GridView left to its own devices and built with default fields will make crappy, invalid, unpredictable HTML. That’s why I always build a GridView with TemplateFields and connect data on my own without using built-in data sources. Since there is no similar property for a TemplateField (I guess I can understand why since a TemplateField can be anything and not just bound with data), we must handle null display text on our own.

And I do it by setting the text of the Literal in my TemplateField like this:

Text='<%# Convert.ToString(Eval("ColumnName")).Length < 1 ? "null" : Convert.ToString(Eval("ColumnName")) %>'

Classes or IDs

It is often asked (I think often) in CSS discussions, “What really is the difference between class and ID?”

The traditional answer I learned in school: A class is for selecting a bunch of elements on a page; an ID is for selecting one item and possibly writing a script for it. You can have many classes, but only on instance of an ID on a page.

Okay, that is clearly not the full answer, so here’s what I came up with in the bathroom this morning.

An ID specifies one single element. An <a> with an ID of Jeremy gives that anchor a name of “Jeremy” and then any time I refer to #Jeremy, I know I’m only referring to <a id="Jeremy">.

A class specifies a bunch of elements that have something in common and represent a subset of similar elements. For example, perhaps all anchors have an underline and are the same weight as the surrounding text simply because they are anchors and that’s what they do by nature. If I define <a class="Jeremy">, I’ve created an entire new subset of anchors that can have any new styles I wish to apply while still retaining any characteristic of being an anchor that I don’t explicitly override. The CSS code a.Jeremy {font-weight: bold;} would cause my subset of anchors to show up as bold while still retaining any other style inherited from simply being an anchor. So, really, a class creates a new type of element. We started with a and we now also have a.Jeremy.

The difference between class and ID is definitely more than “one is for single elements and the other is for many”.

String Comparisons in Java

If I pass the text “Ninja” as strWarriorType to a method, the following evaluate as true:

strWarriorType.equalsIgnoreCase("NINJA")
strWarriorType.toUpperCase().compareTo("NINJA")

But this evaluates as false:

strWarriorType.toUpperCase() == "NINJA"

Why?

Update: Illumination from a Friend

I did similar tests in PHP, C#, and Python and discovered that they all handled my == operator exactly as I expected.  New stuff has been learned!

Browser Plugins Kill Kittens

This is from an email I sent this morning to the NAGW listserv.  It’s a little narrative from real life to illustrate why we should avoid making websites that require weird plugins whenever possible.

My daughter is in a ballet program and her recital tickets went on sale this morning at 10:00.  I sat here refreshing the page like a madman until “NOT YET” turned into “BUY NOW”.  I clicked in to start the process.  I selected 4 tickets (the max per order) and then went to choose my seats.

BANG!  “Your Java plugin is not the correct version.  Go update it.”

A few four-letter words later, I was on the Java site trying to get the plugin to update, but the download was creeping.  I guess every other SCAA parent using Chrome was trying to do the same thing.  So, I opened IE really quickly and went back to the site.  By the time I got to choose seats, all the good ones were gone and the mediocre ones were filling up as quickly as I could click them.  And so continued my silent tirade of colorful metaphors.

Now, thanks to a plugin requirement, I get to watch my daughter’s dance recital from a distance of about 12 AUs.  Parents will understand my frustration.

So, next time you are considering technology for a CORE FEATURE of your site (for a box office, buying tickets is probably a core feature), think about this bummed-out father who had to fight his way around a plugin to buy tickets to his daughter’s dance recital.

On that note, I need a chocolate milk.

And in case you don’t know, an AU is an astronomical unit: the distance from the sun to Earth.

Respond.js and My Bewildered Brain

This morning at work, I’ve been experimenting with Respond.js, a tool to adapt older browsers to support media queries. After a little initial success, I started to notice that IE8- are applying styles I’ve intended for mobile to desktop browsers.

I puzzled a while and then read this on the Respond.js GitHub page:

Craft your CSS with min/max-width media queries to adapt your layout from mobile (first) all the way up to desktop.

In my limited experience with media queries — and I believe as I learned from the Bible…er…Responsive Web Design — I have taken an existing desktop design and media-queried it.  This means that I have defined styles in my style sheet, like:

div#container {
    background-color: #ffffff;
    color: green;
    width: 85%;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    div#container {
        width: 100%;
    }
}

That way I apply the same background color and font color to all displays and then just adjust the width for the browser targeted in the media query.  Now I see that to use Respond.js, I need to approach it from the opposite angle:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    div#container {
        background-color: #ffffff;
        color: green;
        width: 100%;
    }
}
@media only screen and (min-width: 800px) {
    div#container {
        width: 85%;
    }
}

Okay, I see how this is in keeping with the spirit of responsive/progressive design, but it sure makes renovating an existing design 0% fun.  Also, I feel like I’ll be left with stylesheets that are mostly media queries.

Just when you think you understand something, you realize you hadn’t even begun to see the ice at the surface.

Write iCalendar File with C#

Just a little neat thing and how I did it.  It’s probably not the best or most elegant way to get there, but here it is anyway.

iCalendar is a special text file that holds calendar event information. It has the extension .ics and can be read by Microsoft Outlook, Apple iCal, Google Calendar, and probably other calendar-consuming applications.  The following example, however, has only been tested on those three applications.

At work, we have a calendar on our home page which is fed from a SQL Server database. One day I thought, “Wouldn’t it be cool if a user could download the entire calendar for the month to a computer and open it with a calendar application? Then the user can have every Frederick County meeting popping up on his iPhone. How cool would that be?”

Well, the ultimate answer might be: “not very cool.”  I discovered that when I accidentally added ten bazillion meetings to my personal calendar while testing this.  I still get an occasional reminder about a Board of Zoning Appeals meeting.

Anyway, let’s assume the answer is, “very cool!”  The process is actually pretty simple (after one spends a few weeks in his scant free time at work learning how iCalendar works and then tweaking the code).  Basically, since iCalendar is a text file, I figured I could skip third-party and possibly non-free ASP.NET iCalendar tools and painful changes to my database by simply writing my own iCalendar file.

First, I get the events published in the last 30 days by querying the events table and including WHERE [calPubDate] >= CURRENT_TIMESTAMP – 30 in the query.  That gets loaded in a DataTable called xmlTemp.  Then, I simply write the contents of the table to the iCalendar file like this:

// Create new StreamWriter to write iCalendar file.
StreamWriter sw = new StreamWriter(Server.MapPath("/fredcocal.ics"), false);
// Write the opening line of iCalendar.
sw.WriteLine("BEGIN:VCALENDAR");
// Write the version (2 required for OS X iCal).
sw.WriteLine("VERSION:2.0");
// Loop through rows in data source to write each event.
foreach (DataRow row in xmlTemp.Rows)
{
    // Get the start datetime for the event.
    DateTime dtStart = Convert.ToDateTime(row["calDateStart"]);
    // Add hours to get it to UTC.
    dtStart = dtStart.AddHours(5);
    // Get the end datetime for the event.
    DateTime dtEnd = Convert.ToDateTime(row["calDateEnd"]);
    // Add hours to get it to UTC.
    dtEnd = dtEnd.AddHours(5);
    // Create string to format start time properly.
    string strStart = dtStart.ToString("yyyyMMdd'T'HHmmss");
    // Create string to format end time properly.
    string strEnd = dtEnd.ToString("yyyyMMdd'T'HHmmss");
    // Create a string for the event title.
    string strSummary = (string)row["calTitle"];
    // Create a string for the event description.
    string strDesctiption = (string)row["calDesc"];
    // Write the event start.
    sw.WriteLine("BEGIN:VEVENT");
    // Write the event summary.
    sw.WriteLine("SUMMARY:" + strSummary);
    // Write the event description. (URL added for display in description.)
    sw.WriteLine("DESCRIPTION:" + strDesctiption + " URL: " + (string)row["calXmlLink"]);
    // Write the start time of the event. The Z is for UTC.
    sw.WriteLine("DTSTART:" + strStart + "Z");
    // Write the end time of the event. The Z is for UTC.
    sw.WriteLine("DTEND:" + strEnd + "Z");
    // Write the URL of the event.
    sw.WriteLine("URL:" + (string)row["calXmlLink"]);
    // Write the event end.
    sw.WriteLine("END:VEVENT");
}
// Write the end line of iCalendar.
sw.WriteLine("END:VCALENDAR");
// Close the StreamWriter.
sw.Close();

 

You may notice that I just request the URL as (string)row[“calXmlLink”] without a variable like the other parts.  That’s just because I added the URL as an afterthought.  Still works.

The result is an iCalendar file that can be read in Outlook, iCal, and Google Calendar.

Things to note along the way: Apple iCal requires iCalendar files to be version 2 and have no blank lines.  My first attempts at this created an iCalendar file that had blank lines between the events to help me when I had to look at the file, but I killed those so iCal could consume the events.  Also, the datetime format of iCalendar gave me some trouble because I had not been very intelligent about my storage of the times and dates in the database; therefore, I have to add 5 hours to each datetime to get it to UTC and then add a Z at the end of each DTSTART and DTEND element so it looks like UTC.  Not a big deal, but I’ll have to revisit my application in a few months to change AddHours(5) to AddHours(4).

Want to read more about time in a web page? Check out Microformat: hCalendar in an ASP.NET page.

Microformat: hCalendar in a .NET Page

A few months ago, I read Adaptive Web Design by Aaron Gustafson. If you have anything to do with making web pages, read this book.  And while you’re at it, also read the entire A Book Apart series.  Excuse me while I wipe all that brown off my nose.

Anyway, among the 48 tons of awesome knowledge in Adaptive Web Design, Aaron introduced me to microformats. These are cool formats based on existing usage patterns that allow web designers and developers to include extra information in a page’s markup. In keeping with the spirit of responsive design, these extra bits of information enhance the experience for those who can use them and have no impact on those who can’t.

There are many kinds of microformats, but the one I was immediately interested in is called hCalendar.  The hCalendar format basically embeds a calendar event into a web page with special markup.  If a user has something to read hCalendar markup, like a plugin for Firefox or Chrome, that user can download the event, add the event to a calendar, or do anything else the app allows.  Because we have a calendar on our home page, I figured it would be cool to add hCalendar code to our existing calendar items.  With a very brief re-work of the existing calendar items, I was able to include hCalendar functionality:

<asp:Label ID="lblOpenAnchor" runat="server" class="vevent">
    <a id="calendarLink" runat="server" href='<%# DataBinder.Eval(Container.DataItem, "calLink") %>' target='<%# DataBinder.Eval(Container.DataItem, "calTarget") %>'><%# ((Convert.ToDateTime(Eval("calDateStart")) == DateTime.Today) ? "Today" : Convert.ToDateTime(Eval("calDateStart")).ToString("MMMM d"))%>: <span class="summary"><%# DataBinder.Eval(Container.DataItem, "calTitle").ToString().Contains('&') ? DataBinder.Eval(Container.DataItem, "calTitle").ToString().Substring(0, DataBinder.Eval(Container.DataItem, "calTitle").ToString().LastIndexOf('&')) : DataBinder.Eval(Container.DataItem, "calTitle").ToString() %></span></a>
    <span class="dtstart" title='<%# Convert.ToDateTime(Eval("calDateStart")).ToString("yyyy'-'MM'-'dd'T'HH':'mm':'ss'-05:00'") %>'></span>
    <span class="dtend" title='<%# Convert.ToDateTime(Eval("calDateEnd")).ToString("yyyy'-'MM'-'dd'T'HH':'mm':'ss'-05:00'") %>'></span>
</asp:Label>

 

That server-side code is part of an ASP.NET Repeater which is bound to calendar items in a data source. That repeater results in the following example markup in the browser:

<span id="rptCalendar_lblOpenAnchor_6" class="vevent">
    <a href="http://www.co.frederick.va.us/board_of_supervisors/" id="rptCalendar_calendarLink_6" target="_self">January 25: <span class="summary">Board of Supervisors meeting</span></a>
    <span class="dtstart" title='2012-01-25T19:15:00-05:00'></span>
    <span class="dtend" title='2012-01-25T21:00:00-05:00'></span>
</span>

 

The class=”vevent” attribute tells the microformat parser that this is some hCalendar info.  Then we have a summary and some start and end times.  Here’s what it looks like in Chrome with the microformat parser:

Many people who use hCalendar actually use the <abbr> element for the times, but in HTML5, we have the <time> element. Unfortunately, at the time I was creating this, the CSS3 Working Group was unsure of supporting the <time> element moving forward.  I did not want to use the <abbr> element for times because it just didn’t seem semantically appropriate (not that I never abuse semantics), so I opted to just mark a span up as time.  That worked fine, made me feel good, and didn’t carry over any special formatting or functionality that browsers might apply to <abbr> in our CSS non-reset website.

Neat stuff.  Now, if a user is extremely interested in that Lake Holiday Dam Working Group meeting, he can easily add it to his calendar.  If a user doesn’t have something to parse microformats, he doesn’t even know he’s missing anything.  That, I believe, is progressive enhancement.

Want to read more about time in a web page? Check out Write iCalendar file with C#.

The Hobbit and a Responsive Web Design Proof of Concept

Note: Everything I do around here is subject to catastrophic revision. I’ll probably try to improve this Hobbit countdown frequently for a few days. If something is seriously wrong with it, that’s probably what’s going on. Anyway…

It is extremely cruel to release the trailer for The Hobbit one year before the movie is in theaters. I foresee an agonizing year of glacial time motion as I anticipate what will surely be the first move I’ve cared to see multiple times in the theater since The Lion, the Witch, and The Wardrobe and only the second since Star Trek VI: The Undiscovered Country.

Now that you have incontrovertible evidence of my nerdiness, let’s take a look at a responsive web page: http://www.jcoulson.com/hobbit/count.html. It clearly isn’t perfect, but it’s responsive nonetheless and will serve as an interesting proof of concept at work when people ask, “But what can you do with progressive enhancement?” (A far better example would be http://www.westminster-abbey.org, but there are no Middle Earth stories available there.)

The content for the page is pretty simple: a div into which a jQuery plugin called jQuery Countdown loads a countdown timer, a div holding an a that points to the movie trailer, and a p with an img of the movie poster. That’s pretty much where it was until I started playing around last night.

Then I got a little wild. Just a little. Brief overview:

  • The movie poster is loaded a background image for most users.
  • A jQuery plugin called Backstretch stretches the background image to fit the display since the CSS3 background-size property is not supported in browsers yet.
  • The background stretches nicely, but many mobile users and users of much larger displays might find the image distorted. So, two media queries hide the image put in place by Backstretch and replace it with the static image in the paragraph.
  • Media queries also resize and reposition text and elements on the page for different displays from small mobile screens up to much larger displays.
  • CSS @font-face rules load that non-standard font. The font came from Font Squirrel.

It probably isn’t a perfect example of responsive design, but it shows the concept. I’m sure if I’d thought it out more clearly, it would work better and my CSS would be cleaner. Nonetheless, the same content is manipulated into different places and sizes to be useful to users of many different devices. I tested the page on my big desk monitors, on resolutions higher than what I own with ViewLike.us, and on an iPad and iPhone with Safari in both portrait and landscape modes.

Adjust iframe Height to Fit Content

I’ve wondered in the past how to do that.  Thanks to NAGW listserv, I know how to do it as of this morning.

http://www.co.frederick.va.us/dev/iframe.html