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!
![7 Essential JavaScript Functions]()
I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent. Times have changed but there are still a few functions each developer should...
![Facebook Open Graph META Tags]()
It's no secret that Facebook has become a major traffic driver for all types of websites. Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly. And of course there are Facebook "Like" and "Recommend" widgets on every website. One...
![Jack Rugile’s Favorite CodePen Demos]()
CodePen is an amazing source of inspiration for code and design. I am blown away every day by the demos users create. As you'll see below, I have an affinity toward things that move. It was difficult to narrow down my favorites, but here they are!
![dat.gui: Exceptional JavaScript Interface Controller]()
We all love trusted JavaScript frameworks like MooTools, jQuery, and Dojo, but there's a big push toward using focused micro-frameworks for smaller purposes. Of course, there are positives and negatives to using them. Positives include smaller JS footprint (especially good for mobile) and less cruft, negatives...
That code is nice and purdy.
I do loves me some concision.