Prototype reference
February 26th, 2006
- Category:
- JavaScript,
- Web Development
Here is a neat reference chart of all the objects, methods and properties of the Prototype JavaScript library. Pretty useful due to the lack of documentation.
Archive for February, 2006
jQuery on the go
February 24th, 2006
- Category:
- JavaScript,
- Web Development
John Resig has announcend a couple of bugfixes, an AJAX module and some more improvements for the recommended JavaScript library jQuery. Now that’s good news.
Apokalypse now
February 22nd, 2006
- Category:
- Notebook
Da hat man endlich mal Urlaub bevor der neue Job losgeht und dann wird man von den Zeugen Jehovas aus dem Bett terrorisiert, nur um zu erfahren, daß demnächst die Apokalypse bevorsteht.
Die Sorgen möchte ich mal haben!
Das nächste Mal sag ich im übrigen, ich sei Satanist und freu mich jetzt schonmal auf die Gesichter…
Was man bis zum Weltuntergang noch alles tun möchte, kann alles hier aufgeschrieben werden. Oder so, macht jawohl sowieso keinen Sinn dann.
Fixing abbreviations
February 20th, 2006
- Category:
- CSS,
- Web Development
It is a demand of the WCAG 1.0 and the german adaption, the BITV, to provide expansions for abbreviations. The HTML Techniques for Web Content Accessibility Guidelines 1.0 propose to use the title attribute to specify that expansion.
I think it’s a good idea to give a user a little graphical hint, if an abbreviation has such an expansion. To me this makes also sense for the dfn element.
That hint of course should only be rendered if there actually is a title attribute. Use the attribute selector E[att] for that:
abbr, acronym, dfn {
border-style: dotted;
}
abbr[title], acronym[title], dfn[title] {
border-bottom-width: 1px;
cursor: help;
}Note that I didn’t specify any color for the border. That’s because border-color is then inherited from color.
A browser now renders a thin, dotted border beneath an abbreviation or definition as well as the cursor will change to a question mark when hovering over with the mouse.
The attribute selector is of course not supported by IE/Windows up to version 6. Therefore I am using Dynamic Properties to check for the existence of the title attribute and to specify the styles accordingly:
abbr, acronym, dfn {
border-bottom-width: expression((this.title && this.title.length > 0) ? '1px' : '0');
cursor: expression((this.title && this.title.length > 0) ? 'help' : 'auto');
}Needless to say that this is invalid CSS and should be included in a separate style sheet via Conditional Comments.
Three more things: IE will render a dashed border, no support for dotted . No JavaScript, no graphical hint. Oh, and IE doesn’t support abbr at all. But hey, please do not start to use acronym all over the place. This is semantically incorrect (every acronym is an abbreviation, but this isn’t true the other way round). There are solutions to fix this as well.
Prototype considered evil?
February 19th, 2006
- Category:
- JavaScript,
- Web Development
I wouldn’t get that far and recommend not to use Prototype, but everyone thinking about using it should be aware of that it may conflict with existing javascript code.
Fix quotations (with the help of jQuery)
February 19th, 2006
- Category:
- CSS,
- JavaScript,
- Web Development,
- jQuery
I wrote a little snippet to fix quotations for Internet Explorer/Windows. Why is that? Because EOMB automatically generates quotations marks for the q element, but not IE (which is not a modern browser).
First I specified quotation marks in a style sheet:
q {
quotes: "\"" "\"" "'" "'";
}
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}With these rules applied, a browser wraps the content of the q element in double quotation marks and single marks if the q is nested in another one.
To achieve the same result in IE, I am adding the quotation marks via JavaScript:
/*@cc_on
$(document).ready(function() {
var innerqClass = "innerq";
$("q q").append("'").prepend("'").addClass(innerqClass);
$("q:not(." + innerqClass + ")").append("\"").prepend("\"");
});
@*/Note that I used Conditional Compilation: /*@cc_on ... @*/. The code shall only be executed in IE and this is much more reliable than doing some other browser sniffing.
Don’t forget to include jQuery:
<script src="http://jquery.com/src/latest/" type="text/javascript"></script>See the whole thing in action.
You don’t know jQuery yet (New Wave Javascript
)? jQuery is a superb, lightweight library, which allows for writing short and easily understandable – in other words elegant – code. I am planning to use it in all of my next projects.
Update: Use this snippet for IE 7 as well, it does not support generated content either (at least the second beta).
Browser Support Strategy
February 16th, 2006
- Category:
- Web Development
Another must read for any professionell web developer: Nate Koechley evolves a browser support strategy (Yahoo! Developer Network).
Nerdwideweb
February 14th, 2006
- Category:
- Notebook
Check Nerdwideweb (allein schon des Namens wegen!). Hier gibts die mittlerweile berühmte Web 2.0 Mindcloud von (noch) Kollega Angermeier in allerlei Übersetzungen…
Angriff der Killer Couch Potatoes
February 11th, 2006
- Category:
- Notebook
Ab sofort professionelles rumlungern in der Sredzkistraße. Ausgehen war gestern.