next »

[isthisthingon]

First, Happy New Year Cache! 

Here it is, the big year. My prediction for 2012 is that the world surprisingly doesn't explode. When 2013 arrives without some theological tidal wave wiping us off the map, be prepared! You might still be in debt.

So I've fallen completely in love with Python and now Django. Haven't really done much other than continue to build out a sample poker game project and read like a banshee. I'm not stopping until I'm regularly deploying Python/Django apps to heroku (which now supports them both in addition to RoR and Java, btw). Misplaced thread? Nope! Working through learning the Django template language, it dawned on me that perhaps the most complimentary technology I can learn now is jQuery/JavaScript. After a call with Perks that was immeasurably helpful in this regard, especially in his explaining of JavaScript function chaining, I'm looking for any suggestions of books, sites, etc. to assist in this path.

I've picked up so many JavaScript books but I wind up getting completely bored. Watched the PeepCode jQuery instructional - yawn, need more coffee. That happened with Python as well (at first) until I picked up Dive into Python by Mark Pilgrim and the rest was history. But it's what I know you can get out of jQuery that I'm totally excited about, and that's what I'm hunting for.

Any suggestions would be greatly appreciated!

Cheers,
itto

[perkiset]

Here it is, the big year. My prediction for 2012 is that the world surprisingly doesn't explode. When 2013 arrives without some theological tidal wave wiping us off the map, be prepared! You might still be in debt.

Where's the fun in that? I'd like to see the crazies get even crazier, noting that "possessions are a bummer" while the give everything to us pagans.

So I've fallen completely in love with Python and now Django. Haven't really done much other than continue to build out a sample poker game project and read like a banshee. I'm not stopping until I'm regularly deploying Python/Django apps to heroku (which now supports them both in addition to RoR and Java, btw). Misplaced thread? Nope! Working through learning the Django template language, it dawned on me that perhaps the most complimentary technology I can learn now is jQuery/JavaScript. After a call with Perks that was immeasurably helpful in this regard, especially in his explaining of JavaScript function chaining, I'm looking for any suggestions of books, sites, etc. to assist in this path.

I think you are spot on. I am firmly of the belief that single-language solutions are yesterdecade. My personal choice is MySQL stored functions/procedures/triggers for database work (things where logic does not or should not ever need to be extra-DB), PHP as the server side language (with APC in place to keep things tight and fast) and Javascript at the client. Predominantly, all my app animations, effects and user interface stuff is done at the client with JS and jQuery. It's just a titch more difficult thinking in 3 languages simultaneously for a solution, but once your in it's hot. I consider the 3 platforms much like 3 classes/objects, so when I'm "looking out from the perspective" of one of them, my brain switches to that syntax and structure.

jQuery is superb, and I believe that given the way you think, the gradients from low-level tool to high-level interface stuff would fit nicely. Personally I do not use the interface stuff that much (except when I just want to slap a feature on a site and could GAS about whether it looks right or not) and prefer the low level stuff to author things that are perfectly tailored to the site/application. The essential jQuery library does this perfectly for me.

Chaining is a marvelous feature of Javascript, implemented elegantly with the jQuery library. Since (the line that is operating) is only compiled once, you can have a metric shitload of functionality execute from a single compilation - which drives run time into the floor. It's also really good with memory since you're not heaping vars between execution lines - it's all stack.

Although I think most people see jQuery as tool for interface work, IMO it's strongest feature is DOM navigation. Where I used to do massive amounts of work trying to isolate a set of DIVs (or whatever) that I wanted to so (something) with, jQuery makes this easy and quick. Remembering that the $ is simply a shortcut for any function that you wish to use in Javascript a lot, jQuery hooks that by default and often looks confusing at first, but once you're used to it is delightful. Remember also that jQuery takes full advantage of CSS3 selector specifications and then adds its own as well, so the ways of selection are vast and robust.

So consider that I'd like to grab all DIVs with a class of "datadisplay" from my page, make all of them 24px high, bind all of their mouse clicks to a handler, show the pointer and bold the line when someone mouses over them, hide anything with a class of "privatedata" and finally gray-bar every other row, I can do this with CSS and a single jQuery line thus:

Code:

<head>

<style>
.dataDisplay { cursor: pointer; }
.datadisplay:HOVER { background-color: #a0ffa0; font-weight: bold; }
</style>

<script>
$('.datadisplay').css('height', '24px').click(clickHandler).filter('.privatedata').hide().filter(':odd').css('background-color', '#c0c0c0');

function clickHandler(e)
{
alert('Gotcha!');
}
</script>
</head>
<body>...

Obviously this does not even begin to show off what jQuery can do, but it's pretty significant. The books that I purchased for jQuery and HTML5 were jQuery In Action, Bibeault (highly recommend), jQuery Cookbook (O'Reilly, fair++), jQuery Novice to Ninja (Sitepoint, good read at the beginning but I reference In Action more now) and digitally HTML5 for Masterminds (J.D.Gauchet, very fast read, gave me what I wanted quickly but hardly go there anymore) and HTML5 in 10 minutes (Holzner - another good read and great for brain expansion but some errors and not quite as clear).

Once you're solid with jQuery, the HOTTEST part is writing your own extensions. This allows you to fold your own functionality right into the chaining of the jQuery execution. It's excellent and has become a huge workhorse in my stable. Consider this challenge: PinkHat wanted to put some pretty long testimonials on a page but it looked pretty crappy. She wanted a "Read More" sort of thing. I didn't want to have to have her put any code whatsoever into the HTML, just put the content she wants and then "tell me" what she wants done by putting class names onto elements. So I wrote an extension call "excerpt" which does this for her. First, here's what PinkHat does:

Code:

<div class="readMore">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque turpis lectus, tempus ornare dapibus et, cursus ut lorem. Praesent nibh risus, vehicula vel pharetra in, posuere eget lorem. Nulla facilisi. Morbi nisi erat, facilisis in accumsan id, volutpat non neque. Mauris at purus tellus, et molestie dolor. Praesent porttitor suscipit ante ac facilisis. Integer commodo facilisis dignissim.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem libero, blandit et tristique nec, congue ut arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus a nibh arcu. In lectus lectus, dapibus in tempor et, mattis quis orci. Sed quis sapien metus. Suspendisse feugiat dictum ipsum at malesuada. Cras varius massa id risus cursus venenatis. Vestibulum nisi quam, sagittis id vestibulum ac, imperdiet eu arcu. Praesent tincidunt ornare magna dapibus ornare. Fusce ornare vehicula felis. Donec eget dui nisi.

Morbi justo massa, bibendum in vulputate a, lobortis quis risus. Maecenas imperdiet, libero id lacinia convallis, turpis metus consectetur turpis, at faucibus nisl turpis id urna. Nam feugiat diam sed enim fermentum dapibus. Nunc quam arcu, volutpat ac eleifend id, blandit at sapien. Nam eleifend, massa nec consectetur viverra, justo nulla vehicula magna, ultricies pellentesque elit diam at leo. Duis placerat adipiscing mollis. Nunc laoreet dapibus orci eget convallis. Praesent cursus condimentum orci, vitae tincidunt augue gravida vel. Donec arcu eros, mattis ut ultricies non, condimentum eget eros. Sed iaculis libero dolor. Vivamus libero neque, convallis non cursus at, elementum in odio. Nunc quis leo id nisl auctor tristique at id turpis. Aliquam vel turpis id lacus dapibus ullamcorper.
</div>

Then the code at the top of the page:

Code:

<script src="/js/jquery.excerpt.js"></script>
<script>
$(document).ready( function() {
$('.readMore').excerpt();
});
</script>

... and finally the file at /js/jquery.excerpt.js...

Code:

(function($) {
$.fn.makeExcerpt = function(options)
{
var defaults = {
wordCount: 40,
linkColor: 'blue'
}

var options = $.extend(defaults, options);

return this.each(function()
{
var excerpt = '';
var obj = $(this);
var content = obj.text();
var words = content.split(' ');

if (words.length > options.wordCount)
{
for (i=0; i<options.wordCount; i++)
excerpt += words[i] + ' ';

var out = '<div class="__excerptChunk">' + excerpt + '... <span>read more &#8594;</span></div><div  class="__excerptChunk" style="display: none; font-weight: bold;">' + obj.html() + ' <span>&#8592; show less</span></div>';
obj.html(out);

$(this).find('span').css({
'font-weight': 'bold',
'font-style': 'italic',
'cursor': 'pointer',
'color': options.linkColor
}).click(handleClick);
}
});

function handleClick(e)
{
var target = $(e.srcElement).parent().parent();
$(target).find('.__excerptChunk').toggle();
}
}

})(jQuery);

This is a fully functional example, should you choose to put it in place.

I'll look forward to more discussion on this because it's a hugely powerful tool. Thanks for the topic ITTO, Happy New Year and nice to have you back

[isthisthingon]

Awesome - thanks perk! I just ordered jQuery In Action. I also tried From Novice to Ninja and just felt like the book lost steam 1/4 way through. Or it pushes my big red daydreaming button 

I'm also going to test out your recipe. On quick scan I noticed there was no actual excerpt method, per se, but perhaps this is getting created on the fly:

Code:

(function($) {
$.fn.makeExcerpt = function(options)
{

such that the following can call it:

Code:

$(document).ready( function() {
$('.readMore').excerpt();

But I'll dive into In Action and hopefully take off from there

[perkiset]

Whoops, sorry good eye: the jQuery line should be $('.readMore').makeExcerpt();

[perkiset]

Here's a screen grab of a few testimonials excerpted and one open:

[isthisthingon]

Nice. I plan to hork it

[perkiset]

I know you're interested in using extensive CSS3 as well. Here is a pretty damn cool site that renders an iPhone with no images, flash, nothing - it's all pure CSS3, HTML4, Javascript and jQuery. It doesn't do a whole helluva lot, but as a demonstration of using the HTML5 canvas features and jQuery to create images without graphic files it's DAMN impressive:

http://tjrus.com/iphone

[isthisthingon]

just 3395 lines of CSS code and 335 lines of Javascript code (with jQuery, of course).

 

We're going back to "assembly" to get exactly what we want

[perkiset]

Totally agree, and someone definitely has too much time on their hands. But as a demo of capability, pretty cool.

The Canvas is something you may want to look at - I'm using it in my net telemetry stuff for client-side charting based on AJAX delivered data only. It's strong, quick and makes comms a very reasonable experience. IOW, my iPad over 3G has a *rocking* experience because rendering is local and I simply push out textual data that makes it redraw locally.

[ehlo]

Cool code Perkiset, just so you know this line didn't work for me in Firefox:

Code:

var target = $(e.srcElement).parent().parent();

Instead I had to use target:

Code:

var target = $(e.target).parent().parent();

[perkiset]

Hmmm that's interesting ... What version of jQuery are you pulling down? Perhaps it doesnt include the srcElement object. The target object is the same thing, so well done ehlo. Does it say error saying its an invalid pointer or just not work? Another thought is that the srcElement is obtained differently than the target and FF can't do it.

hmmm. Unlike JQ to be inconsistent in that way, think I'll give that a look. thanks mate.

[perkiset]

ITTO did you look at this thread? http://www.perkiset.org/forum/javascript/simple_channel_selector_for_jquery-t3528.0.html

Although the code is older, verbose and somewhat less efficient than it could be, the bottom example shows completely unobtrusive scripting and hooking the HTML.

[ehlo]

What version of jQuery are you pulling down? Perhaps it doesnt include the srcElement object. Does it say error saying its an invalid pointer or just not work?.

It's 1.7.1 and no I didn't get an error, it just failed silently. It worked in IE and Chrome but not FF.  I may be mis-understanding how jQuery works but I thought the srcElement bit is native to javascript and it passes a reference to jQuery to act on, so if srcElement doesn't work it's probably down to the browser.

I saw a stackoverflow thread that suggests using

Code:

var target = event.target || event.srcElement || event.originalTarget;

to catch all eventualities.  srcElement is a new one on me anyway as I'm sure I usually use target so it certainly got me thinking 

[isthisthingon]

ITTO did you look at this thread? http://www.perkiset.org/forum/javascript/simple_channel_selector_for_jquery-t3528.0.html

Although the code is older, verbose and somewhat less efficient than it could be, the bottom example shows completely unobtrusive scripting and hooking the HTML.

I did now. Nice work perks! I'll have to play around with it some. JavaScript is currently being blocked in Django for some reason so I'm trying to hack it on and then I'll fool with it. Currently this is the only output:

This is the HTML editing area
This is the HTML Display area
This is the CSS editing area
This is the Javascript editing area

Text-only. But it's probably a Django config thing I just need to sort out.

[perkiset]

Did you install the CSS as well? Without the CSS it's nothing, literally.