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!
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:
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:
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.
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 issuesvaryper 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.
[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.
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.
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.
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.
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:
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.
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.
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
Site for girls (see slide) – copy can be neutral, and the design can be audience appropriate
Audience appropriate may mean “not inappropriate”
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)