Unicode JavaScript Variables and Functions
We all get a kick out of unicode symbols, as we all saw in my Unicode CSS Classes post, and just as we can use them for CSS classes, we can use them for JavaScript variables and functions as well! Let's say you want to shave a few bytes of post-minified JavaScript byes by setting false equal to a variable. Why not do so by using a unicode variable?
var ಠ_ಠ = false;
if(someVar === ಠ_ಠ) { // If someVar is false...
// ...
}
Hilarious. The evil eyes signal a negative result. What about saving a few byes on true? The Beatles once said that "All You Need is Love", so let's use a heart:
var ❤ = true;
if(someVar === ❤) {
// ...
}
You can do the same with function names. Functions can be named after unicode symbols:
function ಠ(arg) {
// ...
}
Of course all of this is a bit ... insane, and you should never use unicode symbols, but nonetheless it's possible. Imagine starting a new job and seeing those symbols as meaningful variables -- you'd quit immediately! Hilarious!
![LightFace: Facebook Lightbox for MooTools]()
One of the web components I've always loved has been Facebook's modal dialog. This "lightbox" isn't like others: no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much." With Facebook's dialog in mind, I've created LightFace: a Facebook lightbox...
![JavaScript Promise API]()
While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready? Promises are becoming a big part of the JavaScript world...
![Dynamic Waveform Visualizations with wavesurfer.js]()
Waveform images are an awesome addition to boring audio widgets. They can be functional as well as aesthetically pleasing, allowing users to navigate audio visually. I recently found wavesurfer.js, an amazing waveform image utility that uses to Web Audio API to create super customizable...
![CSS Circles]()
A while back I shared a clever technique for creating triangles with only CSS. Over the past year, I've found CSS triangles incredibly effective, especially when looking to create tooltips or design elements with a likewise pointer pattern. There's another common shape...
I could see this improving minification when processing files with many variables/methods in the same scope (if they don’t use it already, I’m not sure).
Unicode characters are useless for minification, each unicode character uses 2 bytes instead of 1 in utf8. Also, there is no reason not to use unicode in variable names if you properly declare encoding in your html.
Actually, some characters take up to 4 bytes, not just 2. The Kannada letter TTHA in the example rakes 3 bytes for example, so “false” was minified from 5 bytes to 7 :P
lol, it’s a funny joke. but I think it may be realize if some protocol is developed in the future. so cool!