This works well except in the instance where a user has activated the Skype Firefox Extension.

What is the Skype Firefox Extension? Skype is a messaging tool that also allows users to make phone calls over the web through your computer. The Firefox extension is a tool that visually highlights the phone numbers on the webpage (from what I can tell Firefox has soft-disabled the add-on for now but all of our users had previously installed it and/or re-enabled it). You can then click on the phone numbers and call them with Skype. Pretty handy, right? Yeah! So what’s the problem?

Well, the issues vary per site. To accomplish the highlight, the plugin injects some HTML around the phone number with inline styles to alter background color to highlight. For our case, the faulty injected syntax breaks the valid XHTML – inputting a tabIndex=-1 (without valid attribute markers) which breaks our XML conversion to PDF.

According to Skype’s Program Manager:

[T]here is a tag that you could use to make sure that the toolbar does not parse your web page for phone numbers.
Please insert this tag and no numbers will be highlighted.
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />

The meta tag works for some but not for others. In our case it did not work (the code was still injected) and we had to manually search for those class names and strip them out prior to export for the PDF builder. Following the manual stripping, it returned the DOM to valid XML and the conversion proceeded without fanfare.

Covering all of your bases develops quite the headache.

Stubbornella develops a brilliant heading class naming convention to handle this new development in front end writing. Typically, I disapprove of classitis in headings. However, with this growth in HTML regarding sections and headings, my opinion must evolve in like manner.

For future reference for myself, in case Stubbornella disappears before I do, the class suggestions are as follows:

Which is implemented as:

Please visit Stubbornella and read the whole article. It developed my thinking to a more complete view.

Just a note, dear reader, that I came into this project after it was already written and was trying to eliminate some bugs as I was finding them.

So, there was no doctype. Interestingly, IE will throw the document into Quirks mode if no doctype is found. Did you know that? I sure didn't.

What is Quirks mode?

Quirks mode refers to a technique used by some web browsers for the sake of maintaining backward compatibility with web pages designed for older browsers, instead of strictly complying with W3C and IETF standards in standards mode.

To sum up, it will make all versions of IE start to behave like IE5.5. Yikes, right? That's what I thought. That's actually the intended behavior, though. Just in case they had problems, developers could omit the doctype and thus have their tried & true version of IE. QuirksMode.org thoroughly explains it and tells us the rationale behind these decisions. It's also called "DOCTYPE switching".

Apparently all of this was already developed by the time I started learning web development, and so this was all new to me. Perhaps this will help you on a headachy night if you have to work on some code that relies on Quirks mode!

All references I found useful in learning about this matter:

• Activating Browser Modes with Doctype
• Quirks mode (From Wikipedia, the free encyclopedia)
• Quirks mode and strict mode
• Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8 - by Aaron Gustafson

In addition, once you've selected your name, you can see whether you can log in via Facebook, Twitter, or default Bagcheck credentials.

Although I recognize the usability of this method, I also pause in trepidation. Users concerned with privacy may grow wary. All I have to do is type in a name, and I have a listing of potential users I can hack. I just have to click on names and try some commonly used passwords and I may have easily logged into another user's account. Who knows what ill acts malicious users may have planned.

I like the added piece of security of needing to type in my username. This way people can't browse my name wondering if I have an account there, and discover that I'm using Twitter as my login key. Please don't simplify it for hackers to "stumble upon" my username, thus making it easy to try a password to break in to my account.

Update:
I'd like to acknowledge that Bagcheck is not a web application storing critical personal information, and those Bagcheck login credentials are not as "important", per se, as Amazon or eBay or others of that ilk. Luke Wroblewski made reference to this fact in his comments on the aforelinked post, and Sam in the comments noted that most online applications share your publicly displayed username with your login name.

I do give reason for pause in seeing my real, full name in print without authorization, for other users to peruse. I feel a sense of security signing in with an email address or a username, along with my secure password.

I will echo a question that I proposed on twitter: Am I too paranoid for worrying about this?

The deals are fabulous for the consumer, but we've often wondered - how can this be good for the business providing their services for Groupon? I get 50% off, and Groupon takes their cut… what profit can be gained for the business?

Nine Rubies, a knitting store in San Francisco, recently blogged about their experience with Groupon. To sum up: It's a bad deal financially, but it's a marketing investment.

There are quite a few repeat customers for the sampling that we looked at. More than that, people who had not visited our store were somewhat jolted into coming to our store again. I think this is all good news. For what I would call minimal amount of work, we got a lot of new customers.

Read the whole story - including sales statistics - at site.ninerubies.com.

No. You mustn't smatter your document with !importants. In fact, I have never, with CSS that I myself have written from the start, required the use of an !important. It is a matter of tracing the CSS specificity of what you're trying to accomplish.

In the office, I was tasked with explaining CSS specificity to our newest team member. I struggle to explain without visual aids, so I pulled out our trusty whiteboard and put it to the test.

Every selector in CSS bears a numerical value, or weight.

Element selectors:

1 point

Class selectors:

10 points

id selectors:

100 points

With that in mind, I wrote out the following:

For accessibility, the CSS specificity example reads as follows:

It then compares three selections and their weight.

1. #left p{} 100 points (#left) + 1 point (p) = 101 points
2. p.intro 1 points (p) + 10 points (.intro) = 11 points
3. #left p.intro 100 points (#left) + 1 point (p) + 10 points (.intro) = 111 points We have a winner!

So although all three selectors may have styles applied to them, in varying orders in the CSS document, whatever style is in the selector of the greatest weight wins our battle.

With that visual aid, our team member had a light bulb spark above his head, and there was much rejoicing.

WordPress 3.1 is named Reinhardt in honor of Django.

In honor of the release, and in pure cheezburger fashion, I present you our very own Django - the magical cat.

Django was a wonderful stray cat who came around begging for food and affection. He purred on contact and was overall a wonderful fellow. He was named after Django Reinhardt for his interesting mustachio.

When winter began to rear its ugly head, the mail lady took him away and sent him to a nearby stray cat farm, replete with a shelter for warmth and lots of short-legged mice.

We miss you, Djangs.

The content from Zeldman's talk rings true. I apologize for the slide references with no visuals - years have passed and those files have long ago bit the dust.

I took many more notes at that conference. Unfortunately, I have no clue where they are. Secrets of the CSS Jedi notes can be found referred to on this table of contents page for the Monday session.

Enjoy!

Writing the User Interface

By Jeffrey Zeldman

• Freshness counts more than looks
  • Bad code + bad design + bad IA = WHO CARES... if the content is fresh, these things do not matter. Case in point, MySpace.
• “Design helps people read less”. A “humane” feature.
• Hypertext: a different kind of narrative experience. It is an experience created by the user – hyperlinks, etc.
• Copy: easy and cheap to fix, and v. important (a brand opportunity).
• Guide Copy: the content explaining the site/content on the site
  • Blogger features fantastic guide copy (see slide): “Create in 3 easy steps: 1,2,3, create blog.”
  • Veer: “Preview type before you buy.” v. brief, and a good tone.
  • TimesSelect: “To continue reading this article, you must be a subscriber to TimesSelect” (“Okay” copy)
    • To continue reading this article, subscribe to TimesSelect (and make subscribe to TimesSelect a hyperlink – guide copy should enable you to continue your hypertext experience).
    • Someone from NY Times heard this talk of Zeldman’s and now, there is a link on Times’ site.
  • Must be brief to be effective
  • Audience appropriate
  • Site for girls (see slide) – copy can be neutral, and the design can be audience appropriate
  • Audience appropriate may mean “not inappropriate”
  • “Understanding your Medicare Benefits: you must have JavaScript and Flash enabled”
    • Obviously, look at your audience and the general capabilities of said audience. Those needing to understand Medicare Benefits will not understand Flash and JavaScript.
    • There may be no "appropriate" content for this audience, but certainly avoid the innappropriate
  • Basecamp login (see slide): log in screen – “Please log in first and then we’ll send you right along”
    • Very clear, very friendly, and the “first” should not be overlooked. It gives that subconscious reminder of a to-do list before able to accomplish your goal. Plus, it’s so friendly that it reminds us that fun can be had in your project management day.
    • Gain on the user side with simple, friendly copy (versus plain-old-jane “Sign In)
  • Brand Appropriate

You should follow me on twitter here.