Prevent ASP.NET controls from changing ID names

ASP.NET,JavaScript,Slivers 19 September 2013 | 0 Comments

As a front end developer, it can be really annoying when a .NET server control changes your textbox id from something like txtFirstName to, say, MainContent_AccountInformation_pnlAnotherLevel_txtFirstName. How can I remember that?! What if I move the control out of the container? Then my ID will change!

Here comes the attribute ClientIDMode to the rescue. Simply stating ClientIDMode="Static" tells .NET to keep the id to what we assigned it. Front end developers, rejoice!

Protocol Neutral CSS and JS references

Web Dev 9 April 2013 | 2 Comments

My coworker blew my mind this morning. Anyone working with secure sites knows that there’s often security flags thrown if you’re referencing a file via http:// when the site is under https://. To avoid these, in the past I have always done an if/else in whatever language the site was written. For example:

/* pseudocode */
if(IsSecureConnection){ }else{ }

In debugging some code on our site, I noticed that the aforementioned stylesheet was only linked in the Secure check, and forgotten in the else.

Lo and behold, you can avoid these confusions by including your external references without the protocol included. That’s right, drop off the http: and just leave two slashes and the link, as follows:
[code] [/code]

It works perfectly and you can simplify your server code. C’est magnifique! I’m not sure about older browsers, so if you run into an issue, leave a comment and I’ll note my post accordingly.

Skype Firefox Extension Embeds Content Into DOM

Web Dev 18 October 2011 | 0 Comments

In the new company I work for, a customer can generate a sales report and convert to PDF for download. To accomplish this, we take the valid HTML page (valid XHTML) which we read as XML to process to create our PDF.

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.

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.

Tagged in , , ,

Simply style headings within HTML5 sections

CSS 4 October 2011 | 0 Comments

Many of us know that HTML5 sections allow the programmer to restart headings at H1 and still keep proper HTML outline format. What I did not realize is how problematic this can become to style in an active and growing site.

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:

.tera {}
.giga {}
.mega {}
.kilo {}
.hecto {}
.deca {}
.deci {}
.centi {}
.milli {}
.micro {}
.nano {}
.pico {}

Which is implemented as:

Me on the web…

My Twitter Feed

  • Mmmm, cornflakes.
  • Something inane…

More stuff on the web


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

Tagged in , ,

Doctypes, IE, and Quirks Mode

Web Dev 14 July 2011 | 2 Comments

In testing a site, I found some interesting quirky behaviors with IE. The CSS was syntatically correct and it confounded me why the visual flubs were smattering my site. Upon closer examination, I found that the site had no doctype.

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. 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:

Tagged in ,

A Quick CSS Specificity Tutorial

CSS 28 February 2011 | 0 Comments

How many times have you thought that you had overridden a style, only to observe in the browser that the old style prevails? The villainous beast! Must I begin with a smattering of !importants to get my point across? Er… my style …across… yeah.

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:

a lesson in CSS specificity

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.

Tagged in ,

Jeffrey Zeldman – Writing the User Interface

Random 10 February 2011 | 0 Comments

I discovered this post of notes in my overflowing drafts folder. It is from when I attended An Event Apart Chicago in August, 2007.

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.


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