Here’s “Intermoos“, part two: we sit and talk to Piotr Zalewa, aka Zalun of jsFiddle fame. If you’ve not heard of jsFiddle or used it, you should stop reading this and visit it first, play with it and come back because you’d be missing out.

Whereas Zalun is not an official MooTools team member, his contribution to the MooTools community (and to the javascript community at large) through jsFiddle has been nothing short of outstanding. Oh, and yes, he prefers and uses MooTools. So here we go…

Github, documentation sites from framework developers, VIM, IRC, Linux, Twitter. I don’t need much

Thank you for your time!

This is nothing to do with javascript but I am on a holiday, after all…

Bit gutted to find that my otherwise excellent Newport Sandals by Keen have started to pack it in after 2 seasons of tear and wear – it seems they were not as water resistant as I was initially led to believe. Nasty side effect – the leather now stinks so bad (due to getting wet a few times) I cannot wear them inside my car. Such a shame, I really really really liked them…

What to buy now or do I just order another pair? Hrm…

Don’t you just love how different browsers style (or rather, don’t style) select and option elements? One of the things I dread most as a developer is when the design team come in and produce forms with controls that are totally bespoke and unobtainable due to the browser limitations.

This prompted me to write a mootools class that replaces the existing select items on the page with custom style-able controls through CSS as a progressive enhancement. Here is an example of what the resulting dropdowns can look like:

The idea of skinnable dropdowns is nothing new but not many solutions are done in a way that mimics the select element’s behaviour and events correctly. Here is what mooSelecta does feature:

• support for any type of skins, all through CSS
• support for native element events (will work with scripting)
• support for keyboard look-ups when dropdown is open
• support for input labels
• support for tabindex

Have a look on the mooSelecta example page or on the mootools forge page for the plug-in itself (download etc).

One thing you need to be aware of is that if you want to dynamically change the selected value of a skinned select, you need to fire it’s onChange event for mooSelecta to update. For example, if you have a dropdown with id=”country” and class=”selecta”:

new mooSelecta({
    selector: "selecta"
});

// change default selected value via js later:
$("country").set("value", "United Kingdom").fireEvent("change");
// the event will make mooSelecta update

Aside from that, it’s fine, tested and working in IE6, IE7, IE8, Firefox 2, Firefox 3.6, Safari 4, Chrominum 5. Known issues with Opera keyboard events not being raised as expected. Enjoy!

Around Christmas we tend to get a LOT of web traffic at work, so much so that we exceed our agreed bandwith a allocation with RackSpace and end up having to pay huge excess fees. Not wanting to be caught out for a second year in a row, I had a look at various ways of conserving bandwith and alleviating from the CPU load on the webserver. This is when I noticed something odd–there was a lot of traffic we were being charged for that was not showing up through the Apache logs. After a lot of head scratching and many coffees later, it hit me: cookies. Consider this: an average user on our site has something between 300bytes and 1k in cookie data (a lot, I know). The cookies are being sent alongside with every resource that the client browser requests, be it a HTML file, an image, a CSS stylesheet or a .js file. I did some rough maths and it transpired we waste between 10 and 20GB of traffic each month in cookies alone!

Additionally, the CPU usage was abnormally high and no amount of MySQL tweaking was cutting the load times enough to make a sizeable difference. The sheer amount of files accessed and served was taking its toll and limited CSS spriting was just not going to fix that. The clincher came from Google who announced that site speed is to be playing a role in the search engine results pages from 2010–it was time to introduce a content delivery network (CDN) and fix things.

I had a look around at what CDN providers were around but since we are a relatively small and lean startup, we could not justify the expense of signing up for a enterprise scale solution just yet and yet we needed real-time updates. We elected to just get a cheap collocation server instead with no bandwith quota and setup a sub-domain cdn.ourdomain.com which was to remain cookieless. I then reconfigured the site templates to always reference images, css and js through the CDN URL instead and setup an rsync partnership with the new box. And boy, did that make a difference!

First thing you notice now is how much more responsive the site is, how quick it loads and how much faster the browser renders the content due to the increased threading capability. The CPU load times dropped from an average of 1.40 to 0.30. Out bandwith use subsided from well in excess of 200GB a month to a little over 100GB, well within our quota. And that’s through a ‘pseudo’ CDN, or should I call it a CDB (content delivery box). I imagine the user experience will improve even further when we can roll out a proper solution in the near future, one that will use CDN zoning to provide the fastest download speed to clients through geolocation.

In the meanwhile, I was approached by the folks at MaxCDN who kindly offered to sponsor my blog and provide it with a CDN. I thought, what better chance to test the experience and find out about what’s on offer than to try it for free…

I was uncertain as to how easy it would be to implement within WordPress but it turned out to be a walk in the park through the plug-in W3 Total Cache that they provide and support. The whole setup involved all of 5 minutes of work and no changes to my template files (so long as they all reference the native WP functions for URLs). The plugin takes care of sync and you really have nothing to do than to worry about caching. I am still getting to grips with the options here and weighing in what further bits can be exported to maxcdn in addition to my static content. Other than that, it’s been a breeze and has probably sped up my blog a fair bit too. It’s also surprisingly affordable, especially when you consider what Akamai, EdgeCast or Limelight tend to charge. Even cheaper than CacheFly for the basic package without rsync functionality. MaxCDN’s site, control panel and support are also nothing but excellent.

All-in-all, I am a happy chappy and would recommend CDN use as it’s become a lot more accessible (to my surprise).

A nice blog post that samples 35 great fonts free to download, some are actually rather good. Head to Instant Shift to check them out.

Just found this enjoyable collection of javascript statements that don’t make any sense, such as:

"string" instanceof String; // false.
[] == false; // true
"" == false; // true
null == false; // false, that's more like it
typeof null // object
null === Object // false

for these and more WTF moments in javascript, head over to wtfjs.com.

Long time without updates but I have been away since mid December. Long story short, went to Bulgaria with the best of intentions to ski a little and ended up “enjoying” the warmest winter this country has had in over 20 years instead. Meanwhile, folks back home in London reported to be freezing their privates in some serious sub-zero temperatures. Figures…

Anyway, things of consequence since my departure start with the advent of the mootools forge – finally a meaningful way to distribute plugins for the framework. I should see if any of my code snippets are worth releasing (can’t all be David Walsh, can it…)

Another notable addition to my bookmarks has been jsfiddle – it’s basically like Zalun’s mooshell but on steroids – adding support for all major frameworks you can fiddle with out there, most excellent and handy when refactoring between mootools and jquery and vice versa.

Finally, there has been a great compatibility layer for upgrading mootools 1.11 to 1.2.x – check out the official blog post here. I am now officially out of _technical_ excuses to do with upgradingand refactoring all the javascript at webtogs, so it’s going to be a manner of time after I get back.

The biggest joke of the year thus far has been the realisation that this little page (fragged.org) has now become the 2-nd listing on the google SERPs for ‘mootools blog’, trailing the official team blog only. Take that, David Walsh! Oh yeah, and a shiny new PR4 out of the blue, not a bad end to the year. With mootools 1.3 in the pipelines as well as mootools 2.0 – 2010 promises to be an quite exciting as well, looking forward to it.

P.S. Here’s another new ‘#mootools heavy blog’ just launched by a person I have come to respect a great deal over on the mootools mailing list check out Ryan Florence’s blog

This was supposed to be my Friday Fun post but it got to where it’s at on the following Monday instead. Having never tackled sprite animation before, this has been a learning experience anyway (on the principles of animation also).

I think the result is fairly adequate – a moving lemming in a world that changes atmospheric effects dependent on the time of day, complete with parallax-like effect relative as counter to the lemming’s movement.

Oh, yes. The lemming can also be quite moody–hates being bothered. Which is fine, you can blow him up too. Enjoy and click below:

P.S. This will feature as the header of fragged.org’s new wordpress theme which is almost completed now. So, a little taster of things to come…
P.P.S. Thanks to crisp for the original DHTML lemmings and to holy.pt for his vigorous testing and advice.

Just pulled out the old textSnow class foer 1.11 and rewrote it for 1.2.4. Anyway, head over to the demo page, it has all the info you need.

Whilst reading on XSS attacks today, I found this recently reported exploit in CubeCart 4 that can gain an attacker full administrative access to the store.

Not only that, it can help them dump your entire store DB – products, cats, users, orders, the works. Anyway, you get the idea. “CubeCart responded and informed their customers about this vulnerability” – as technical advisor for a site that runs on CC4, I can testify to the fact that the site owners were not informed of any such. Nice.