The Digital Life of Keith Baker.» code Archives – iKeif – tech and social media geek, mootools fan, and a ton of links

Dojo Basics

keif — Thu, 04 Jun 2009 23:14:00 +0000

When you start developing in any JavaScript framework, you’re stuck wondering where to begin. Everyone’s got a tutorial, and an opinion, but when you’ve got “an idea” and just need to delve into the code to make it happen (say… porting functions? Figuring out the basics?) then sometimes wandering through the API isn’t the best thing you could do.

Understanding Dojo Toolkit

The more I use Dojo, the more I see correlations with Java – and that’s not a good thing. In Java, you have JavaDocs telling you about the thousands of Java functions, parameters, returns you can have. VERY powerful. VERY difficult to learn. Most of the JavaScript frameworks took a different approach – they made what they did powerful, but kept it simple. Easy to read, easy to peruse – like the PHP docs (in my opinion). the function names and organization make total sense.

In Dojo, it doesn’t feel as quite intuitive – for me – and that’s it’s biggest downfall. It has a high barrier of entry, and a large, robust, sophisticated toolkit that you aren’t really expected to know every inch of (like Java), but understand the basics and have an API to refer to when you want to do the more powerful functionality.

Unfortunately, Dojo still feels like it’s in the infancy of this aspect, as navigating to the more complex aspects is a pain. Should my Dojo work increase in the near future, I may invest in a book to try and become more acquainted with the more difficult aspects.

Accessibility in the Framework

I’m seeing inklings in their code with reference to WAI, but I haven’t even *attempted* to fool with that in any accessibility sense. As my current projects haven’t adequately been in need of WAI guidelines, I’d love to see a more thorough analysis.

Copyright © 2010 The Digital Life of Keith Baker.. This Feed is for personal non-commercial use only. If you are not reading this material in your news aggregator, the site you are looking at is guilty of copyright infringement. Please contact legal@ikeif.net so we can take legal action immediately.
Plugin by Taragana

MooTools Development in Dojo Land

keif — Wed, 03 Jun 2009 23:09:20 +0000

I am a MooTools JavaScript developer. I love the framework, and in writing MooTools code, I’ve become a better Object-Oriented-Programmer, and a better JavaScript developer. If you follow technology, you know there’s multiple JavaScript frameworks – jQuery being the most popular (IMO), with Dojo Toolkit being the most used in enterprise applications.

After having used JavaScript libraries (originally prototype/scriptaculous, some Moo.FX, then jQuery, then MooTools, and currently a project using Dojo) you come to expect a certain amount of consistency in general concepts, and in that expectation, the libraries have delivered.

$, $$, dojo.query, dojo.byId, document.getElementById – give me my element nodes!

So, basic JavaScript, people have developed a few different ways to get the elements they want, including custom functions – like Robert Nyman’s getElementsByClassname – which take advantage of local browser support, but you’re still forced to account for those without it. *cough*IE*cough*

MooTools uses the $ or $$:
[code lang="javascript"]
var idEx = $('someId'); //get element by ID
var arrayEx1 = $(document.body).getElement('someElement'); // return first matching 'someElement
inside of 'someContainer', or document.body in this example
var arrayEx1 = $(document.body).getElements('someElement'); // return array of 'someElement' (or class name, if you have the right components downloaded) that are contained inside of 'some container', or in our example, document.body.
var arrayEx2 = $$('someElement'); // return array of all found 'someElement'
[/code]

Pretty powerful stuff, for so basic an idea.

jQuery is kind of similar:
[code lang="javascript"]
var someArray = $('someElement'); // return an array of those elements/that ID/etc.
[/code]
Very powerful for a single selector – but it has the added bonus that they’ve allowed it to be overwritten, so you can use jQuery with another library (say, MooTools) that also uses the $ selector. It took me a little bit to get used to the return of an array outside of a single element.

Dojo does things a little differently
[code lang="javascript"]
var someArray = dojo.query('someElement'); // return an array of elements
[/code]

The get(’selector’).get(’selector’) (like mootools $(some).getElements(’someElse’)) can be pulled off in dojo/jQuery, but perhaps not as intuitive, in my opinion (again, I’m biased as a long-time MooTools fan/developer).

Which is better?

I can’t say which JavaScript library is better. Perhaps more-so, I don’t want to. It’s moot. You pick the library you’re most comfortable with, and most importantly, for your Clients – you pick the one that they’re development team can run with for the long-term.

How to choose a JavaScript Library – the condensed version

I’m a life-long student, and a professional developer – I’ve coded many languages, and I’m learning others, so it’s easy to see certain correlations that have started popping up.

MooTools… is definitely for the JavaScript Developer, and if you’re Object-Oriented as well, it’s even better.

jQuery… is for the designers out there who know some xhtml and want to get some JavaScript without dealing with the headaches it can bring. It’s go ta low barrier of entry, but I’ve thought of this Thomas Jefferson quote:

That which is Popular is not always Right, what is Right is not always popular

Don’t read too much into that. I just infer that people that say it’s “the way” have some additional education to do in general.

Dojo… is for the Java Developer crowd. As I’m delving more into Java, I see the strong similarities, and see why it’s involved in a lot of Java-based enterprise solutions – you could jump back and forth between Dojo and Java and feel pretty comfortable.

Coding Syntax, Preference, What’s Left? DOCUMENTATION!

This is the area most things suffer in – either too much or too little documentation. I’ve grown fond of MooTools docs structure. It’s easy to find what I need with it’s break down of how the functions are applied – string, array, elements… Easy!

jQuery docs are along the same lines, but I have difficultly in navigating them. I blame myself because of my long-term familiarity with MooTools, it’s become second nature, so jQuery is still slightly foreign.

Dojo docs, in my opinion, are the WORST of the docs. They’re broken down into their three main components (dojo, dijit, dojox), but beyond that it’s a guessing game to get to the API reference you want/need. I was finding myself hitting the wrong sections because the search led me there, but it was not representing what I was searching for.

I really feel their Dojo Campus is a much better doc representation than their dojo book, or their API docs. Their book is incomplete, and if you search and find references to the book, you’ll find items incomplete, moved, referencing different version of the book, to the point you’re better off not even reading it. Along with the occasional example randomly not loading, then working, then not. It was a nightmare!

The problem – perhaps the only problem – with Dojo Campus, is the search functionality. It defaults to “title search” which failed for me 99% of the time (because I needed something in the content, and was searching for the wrong titles). Even worse, the search isn’t even featured on the home page! I had to go four clicks in until I stumbled upon it for this post. (It’s accessible in two: Click on Tutorials and one of the options)

To my understanding, the Dojo Campus is going to become the “new” face of Dojo. And with their continued improvements in coding it’s becoming a stronger contender, and more importantly, more user friendly.

Examples from the frameworks

Every framework suffers from this. Outdated examples, drastic version differences that break code, or multiple version examples. MooTools and jQuery, for the most part, are pretty solid. Dojo, I hate to pick on you, but this is where you hurt the most. I googled – a lot – and the demos – official, sitepoint, others – are all over the place. Version 0.4, 0.9, 1.2.3, 1.3… and what’s worse, no one indicates what version the demo is in, so when I started looking at Sortable Tables, I find out it was made obsolete in another version. Links to non-existent pages in the dojo book… a mess!

In my own projects, it lead me to re-write a lot of items that existed in Dojo, but for a beginner with their library I ran into way too many issues to make it feasible to spend any more time playing with the code.

Overall, my impressions have not changed

MooTools is my favorite, jQuery is a recommended secondary, and Dojo is reserved as a “use it if you have to.” They pretty much throw the W3C to the wind with their coding structures – those dijits generate a mess of divs and classes as a default, to the point that I see the benefit in their examples, but in most of my scenarios, it was overkill (and my fellow devs would kill me if I ever coded something in that spaghetti menner).

It really showcases a difference between people that code for the front-end, and those that work with the front-end but primary experience is the back-end. the code makes sense to the extent in relation to Java code – but in comparing it to the majority of front-end applications, it’s a nightmare.

Making Twitter @Username Clickable in Sweetcron

keif — Sun, 31 May 2009 12:47:18 +0000

I’m a fan of Yongfook’s work, particularly Sweetcron.

What is Sweetcron?

To quote Wikipedia:

Sweetcron is an open source lifestreaming blog software created by Jon “Yongfook” Cockle based on the CodeIgniter framework. It was originally released on 3 September 2008 and the latest version following on 22 September. Sweetcron is similar to other web applications such as Tumblr and Friendfeed, but users are able to host their own lifestream on their own server and customize it in any way they want with the Sweetcron API.

Users can add RSS feeds from multiple social networks and sites, such as Twitter, LastFM, Flickr and many more.

Basically, if it has an RSS feed, you can utilize it to create your own personal lifestream.

How can I make those @Usernames clickable?

Sometimes, the code can get lost in translation. Maybe it’s your RSS feed, maybe it’s the provider, hell, mabe it’s Sweetcron. But Sweetcron gives you two handy methods to manipulate your data in two handy “plug-in functions“:

function pre_db: before you store the information in the database.
function pre_display: after it’s been saved to the database, but before it’s rendered.

Thanks to regular expressions, we can loop through information before we save it to our database, or afterwards, depending on your preference. All you need is:
[code lang="php"]
// change @names into clickable links
$item->item_title = preg_replace('/(^|[^\w])(@[\d\w\-]+)/', '$2' ,$item->item_title);
[/code]

$item represents your sweetcron’d “post” which consists of the object – code, text, images, links, etc. We’re basically saying “in this object, there is an item_title, if it has @something, make it a link that points to user @something” – simple enough, eh?

My take on Skittles.com

keif — Mon, 09 Mar 2009 08:48:30 +0000

Shawn Morton may have beat me to the punch – both in writing about it – and a quick iframe demo of the Skittles idea.

The general point (in terms of Web Development) is that this is an insanely simple thing to accomplish – 15 minutes and Shawn had a working iframe demo.

I wanted to grab some of the effects and colors of the original, just to see if I could do it and “make it fancy” – I mean, there’s still a half-dozen effects that can be applied to it – fades, transitions, all those whizz-bang-pow stuff people love, but I had to pull myself back a test was important.

Skittles.com Initial Test

I decided to focus on Firefox 3 so I could use rounded corners in CSS (there’s a JS library for everyone else, sans Webkit, but hell, remember, this is a test. No one’s paying, so I’m not worried about IE.

It took me a couple hours, but here’s skittles.com, reproduced without flash.

I’m too tired to write more, so – here ya go.

Mootools Enhanced Elements – How Web Developers Should CodeContent

keif — Tue, 16 Dec 2008 17:00:04 +0000

Toby Miller has released his Mootools Enhanced Element Script to the masses on MooForum - and it’s a sweet idea that falls inline with how web developers often describe as “how they always code.”

How should Web Developers code?

Everyone has the basic understanding of how they should be coding – semantic, clean code. They should be coding with the idea that screen readers should be able to easily navigate the site (you know Target tried to fight accessibility in court?)

You should be starting with your content in mind – and often it’s always gone – Header, Body, Footer. But why?

Generally, we always assume people want the navigation (in the header) at the top. We then include accessibility links to allow them to be skipped. Download lynx and test for yourself - and then hit up some e-commerce sites and see how many use it (I know that Nationwide.com does, outside of e-commerce). Of course, this leads to the question – why include a link that is necessary when we can manipulate the appearance for visual browsers?

Content is King – so treat it as such!

Why do we lead with our navigation when it’s the content that matters? Content – Navigation – Footer – why isn’t this how a page is coded? It’s something I’m struggling to wrap my head around and start pushing forward with in my own code – to be accessible, and also to show it *can* be done. Code should be clean and simple! And I hope to see a return to simple websites in the future…

After you’ve got your clean, validated code – now you manipulate it with CSS – you take your skeleton and give it its skin and a coat of paint. Javascript enhances the experiment, and flash is the last piece (further enhancement, a plug-in experience). It’d be nice if the accessibility flash detection was reliable…

But on to Mootools Enhanced Elements!

This goes beyond the simplistic “is javascript available? Then add this ID/class to the body tag.” It goes beyond saying “if less than IE7, load this style sheet and javascript.” If you understand these ideas, you’ve got the basics of what Enchanced Element is about.

Yes – this is taking it up a notch. Adding classes, properties, custom elements and styles! I suggest reading the article and checking out the posts about it and looking at the site built with it!

A Resource Interactive Christmas Wish Widget

keif — Tue, 16 Dec 2008 05:06:51 +0000

My employer, Resource Interactive, recently released the company’s Christmas wish (go to http://www.resource.com/ and click on “Wish” to see the large version – or CHECK IT OUT ON MY SIDE BAR! …I recognize if you’re viewing the article, it’s not as big – so if you hit my homepage you’ll see it in a higher resolution, or you can hit up Resource.com!

It’s utilizing the Clearspring widget platform – easy deployment and sharing of widgets across Facebook, myspace, etc. It’s easy enough to just drop in the code in a post – but I decided I wanted to play with mootools Swiff plug-in – it’s basically SWFObject customized for mootools (so if you used SWFObject and mootools – you need to QUIT and start using Swiff!).

I created a Resource Wish Wordpress Plugin – you DO need the mootools framework on your site (I’ve got a plug-in for that as well, but I’m working on rewriting it to utilize the Google AJAX Library so you can offload the bandwidth to Google, and you can just select the framework and go). So of course I need to also account for pre-existing loaded frameworks…

To use it, you just add a div with and ID of “resourceXmas2k8″ and Mootools and Swiff will do the rest!

Google Analytics Moo-ized

keif — Wed, 15 Oct 2008 04:49:49 +0000

As both David Walsh and I wrote about Google Analytics Tracking utilizing Mootools to make your outbound link tracking easier, and David did setup a variable for the Google Tracking code *before* we run the code to tag our outbound links.

Upon second review, it’s a little different than the modified code I presented yesterday, but I dig using the href replacement on your outgoing string.

Here’s the updated code:
[sourcecode language='javascript']
window.addEvent(‘load’,function(){
// Double-checking in case your drop this site wide
// Do anchors exist on the page?
if ($$(‘a’)){
$$(‘a’).each(function(anchor){
var href = anchor.get(‘href’);
// if it matches my site or is an absolute path it’s outgoing
if(href.indexOf(‘http://ikeif.net’) == -1 && href.indexOf(‘/’) !== 0) {
anchor.addEvent(‘click’, function(e){
var track = “pageTracker._trackPageview(‘/outgoing/’” + href.replace(‘http://’,”);
}
}
});
}
});
[/sourcecode]

Using MooTools and Google Analytics to track outbound links

keif — Tue, 14 Oct 2008 15:46:26 +0000

This seems to be something that people always want to do at some point – are people clicking on my outbound links?

How Google recommends external tracking

They currently recommend you tag your links like:

Just as a point of reference – the /G1/example.com is purely symbolic – you can use the artificial pagename as the Goal URL in your analytics, as google shows:

/G1/example_com

http://mysite.com/G1/example_com

Kind of tedious, wouldn’t you say? Do you really want to run through your site and specifically tag each link that goes somewhere else? I’ve seen functions attached that basically duplicate this functionality – but if you’re moving the “onclick” into a function, it seems pretty much a moot effort.

So, boom goes the dynamite, and in comes javascript.

Add outbound tracking javascript

This code from Jamie Huskisson accomplishes it simply:
[sourcecode language='javascript']
if (document.getElementsByTagName){
var ahrefs = document.getElementsByTagName(‘a’);
for(var i=0;i if(ahrefs[i].href.indexOf('http://ikeif.net') == -1 && !ahrefs[i].onclick){
ahrefs[i].onclick = function(){
var track = this.href + "pageTracker._trackPageview('/outgoing/'"+track.substring(7));
}
}
}
}
[/sourcecode]
Nice and succint, as code should be. In this example, it checks to see if we can grab tags - grabs all anchors, and then we check to see if they reference my site and there is no onclick event, and if so - assign the onclick! Technically, you don't necessarilly need the track.substring(7) - you can call it something else if you like.

Do the same – but with MooTools!
As I’m sure you’ve figured it out, I’m a fan of mootools – one of the many well done javascript frameworks. The above code is just as easilly executed:
[sourcecode language='javascript']
window.addEvent(‘domready’,function(){
if ($$(‘a’)){
$$(‘a’).each(function(anchor){
var href = anchor.get(‘href’);
if(href.indexOf(‘http://ikeif.net’) == -1 && href.indexOf(‘/’) !== 0) {
anchor.addEvent(‘click’, function(e){
var track = this.href +”pageTracker._trackPageview(‘/outgoing/’” + track.substring(7);
}
}
});
}
});
[/sourcecode]
[Edit: It just so happens that David Walsh hit the same topic!]

Copyright © 2010 The Digital Life of Keith Baker.. This Feed is for personal non-commercial use only. If you are not reading this material in your news aggregator, the site you are looking at is guilty of copyright infringement. Please contact legal@ikeif.net so we can take legal action immediately.
Plugin by Taragana

Code Criticism

keif — Mon, 08 Sep 2008 17:16:33 +0000

As a web developer, I get the wonderful job of constantly improving myself and my coding. I research, I test, I experiment, and I try to come up with consistent methods that, in my opinion, are a best practice in my work, and can be shown to other people to help them improve their skills. That being said, sometimes you are so damn busy you seldom have the time you’d like to properly coach (and be coached).

Personally, I love constructive criticism.

I really, really, really, do. It’s an excellent way to accurately better yourself – someone else critiques you. It’s even better when the person is someone you admire and respect – because then you’re more likely to take it to heart.

I know I’ve written bad code in the past (haven’t we all at some point?) and I know sometimes I’ll work on a bit of code and see a way to better myself, or improve upon others work (as I often do with mootools scripts, and jquery/javascript conversions). But I don’t just lock it away. I post on forums and groups. I send out emails to friends and colleagues. I ask for feedback, and I take feedback even when I don’t ask for it.

Because I have a desire to better myself. Because I recognize I am not perfect, and I can improve.

I could get all zen on you and go into a personal rant, but that’ll have to hold off for another day.

The point is – especially as a web developer in this new media age - you need to get criticism, give criticism, and improve your coding abilities. You can specialize – front-end, back-end, ATG, CSS, XHTML, WTF-Kung-Fu-BBQ, RoR, etc. etc. and so on and so on… but…

…unless you work on improving yourself you’ll always end up at the bottom rung.

Mootools Mouse Events

keif — Wed, 30 Jul 2008 03:23:42 +0000

Something I see brought up on occasion are people that do not understand the concept of addEvent:

Custom Native to allow all of its methods to be used with any DOM element via the dollar function .

These methods are also available on window and document.

And as shown on the new unofficial mootools mooforum - people can get lost when we talk about mouseenter/mouseleave events – they are not Mootools Events, but generic javascript events with a slight tweak!

The difference between a Javascript Event and a Mootools Event

Instead of ‘onclick’ or ‘onsubmit’ or ‘onchange’ we do ‘click’, ’submit’, ‘change’ – it’s a little syntax difference that people forget sometimes.

Just to clarify:

// set the fade time and initially hide sub navs
theSubNav.get(‘tween’).options.duration=1000;
theSubNav.fade(‘hide’);
// hover on causes sub nav to fade in
theHover.addEvent(‘mouseover’, function(event) {
 event = new Event(event).stop();
 theSubNav.fade(‘in’);
});
// hover off causes sub nav to fade out
theHover.addEvent(‘mouseout’, function(event) {
 event = new Event(event).stop();
 theSubNav.fade(‘out’);
});
That is just like calling ‘onmouseover’ or ‘onmouseout’ – just the mootools way!

Excuse the mess…

keif — Sun, 27 Jul 2008 02:54:51 +0000

I’m working on some new mootools functionality, and trying to be SEO friendly, so over the next several days the site may look a little wonky.

Mootools Kwick Menu with Content.

Keif — Tue, 08 Apr 2008 18:16:28 +0000

I created a quick and dirty mootools kwick menu page based off of David Walsh’s example. Still tweaking it….