JavaScript CSS Helpers
I spend a good amount of time looking at JavaScript framework source code. Regardless of which frameworks you have allegiance to, you can learn an awful lot by looking under the hood of widely used code collections. One of many handy snippets can be found within the MooTools source code: functions to camelize and hyphenate strings so that your own min framework can accept either form of CSS setter or getter. Here are the functions in all of their glory.
The JavaScript
As you could probably guess, this task is best accomplished with regular expressions:
function camelize(str) {
return (str + "").replace(/-\D/g, function(match) {
return match.charAt(1).toUpperCase();
});
}
camelize("border-bottom-color"); // "borderBottomColor"
function hyphenate(str) {
return (str + "").replace(/[A-Z]/g, function(match) {
return "-" + match.toLowerCase();
});
}
hyphenate("borderBottomColor"); // "border-bottom-color"
A couple of really handy JavaScript String to corresponding String format functions. Instead of expecting strings in only one format, your mini library can now accept both!
![5 More HTML5 APIs You Didn’t Know Existed]()
The HTML5 revolution has provided us some awesome JavaScript and HTML APIs. Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers. Regardless of API strength or purpose, anything to help us better do our job is a...
![I’m an Impostor]()
This is the hardest thing I've ever had to write, much less admit to myself. I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life. All of those feelings were very...
![Dijit’s TabContainer Layout: Easy Tabbed Content]()
One of Dojo's major advantages over other JavaScript toolkits is its Dijit library. Dijit is a UI framework comprised of JavaScript widget classes, CSS files, and HTML templates. One very useful layout class is the TabContainer. TabContainer allows you to quickly create a tabbed content...
![Simple Image Lazy Load and Fade]()
One of the quickest and easiest website performance optimizations is decreasing image loading. That means a variety of things, including minifying images with tools like ImageOptim and TinyPNG, using data URIs and sprites, and lazy loading images. It's a bit jarring when you're lazy loading images and they just...
That code is nice and purdy.
I do loves me some concision.