drupalcon jquery

CRAFTING APPINTERFACES WITH

Presented by Nathan Smith

Note: Don’t feel like you need to write all of this down. The slides are available here...

http://www.slideshare.net/nathansmith/drupalcon-jquery

Carpal Tunnel Relief

“Allow myself to... introduce myself”

I work (from home) for HPas a front-end developer.

I’m best known for making a helpful 5.6 KB CSS file.

Shh... My secret in-house code reviewer

Note: This was shot hastily with a camera phone. I make no claims of being a decent photographer.

FYI – I don’t especially love CSS

The reason I create and use CSS frameworks is because I hate doing mundane tasks repeatedly (yawn).

I’d rather be working in JavaScript.

Co-author

JavaScript books I’ve worked on...

Tech editor Tech editor

jQueryEnlightenment.com

oreilly.com/catalog/9780596159788

JavaScriptEnlightenment.com

Our team at HP uses Sassto expedite writing CSS

http://www.sass-lang.com

Sass compiles down to CSS...

$blue: #3bbfce$margin: 20px

#foo border-color: $blue color: darken($blue, 9%) .bar border-color: $blue padding: $margin / 2 margin: $margin / 2

#foo { border-color: #3bbfce; color: #2b9eab;}

#foo .bar { border-color: #3bbfce; padding: 10px; margin: 10px;}

Assuming you already know CSS,Sass can help you write CSS faster.

But using Sass doesn’t magically create “better” CSS. If you write bad code, Sass won’t remedy it.

But Sass isn’t a magic bullet(Because no framework is)

The same principlesapply to JavaScript

An important discipline when using any framework is striving to understand the underlying language. In other words, useit as a tool – Not a black box

Veteran “ninjas” master a variety of tools – Not just one.

Use a framework as an extensionof yourself – Not just as a crutch.

BY HAND

FRAMEWORK

http://imdb.com/title/tt1046173

“JavaScript is the only language that I’m aware of that people feel they don’t need to learn before they start using it.”

— Douglas Crockford

http://www.youtube.com/watch?v=hQVTIJBZook

A day to learn, A lifetime to master

Today, I’ll discuss two examples...

jQuery Desktop Formalize.Me

http://desktop.sonspring.com http://formalize.me

jQuery DesktopFun with z-index

Demystifying z-index

http://sonspring.com/journal/jquery-desktop

Demystifying z-index

The default z-index value is 0, and it only takes effect if an element is position: fixed, relative, or absolute. The default is position: static.

You don’t have to go overboard with z-index: 99999. Just +1 higher than another element will suffice.

<body>...<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script><script> if (!window.jQuery) { document.write(unescape('%3Cscript src="assets/javascripts/jquery.js"%3E%3C/script%3E')); document.write(unescape('%3Cscript src="assets/javascripts/jquery.ui.js"%3E%3C/script%3E')); }</script><script src="assets/javascripts/jquery.desktop.js"></script>...</body>

CDN & Local Fallback=> Best of both worlds

http://desktop.sonspring.com

Singleton Pattern = Object-oriented JS

Nested JS objects versus dot-notation=> Same result, but different approaches

var APP = { foo: function() { // Do stuff. }, bar: function() { // Do more stuff. }}

var APP = {};

APP.foo = function() { // Do stuff.};

APP.bar = function() { // Do more stuff.};

I prefer the one on the left, but you would call methods byusing the same syntax either way: APP.foo() + APP.bar()

// Module pattern.var APP = (function($, window, document, undefined) { // For use only inside APP. var PRIVATE_CONSTANT_1 = 'foo'; var PRIVATE_CONSTANT_2 = 'bar';

// Expose contents of APP. return { go: function() { for (var i in APP.init) { APP.init[i](); } }, // APP.init init: { call_automatically: function() { // Called when DOM is ready. // Can still be called individually, via: // APP.init.call_automatically(); }, // etc. }, // APP.misc misc: { call_specifically: function() { // Must be called individually, via: // APP.misc.call_specifically(); }, // etc. } };// Alias window, document.})(jQuery, this, this.document);

// Automatically run all functions in APP.initjQuery(document).ready(function() { APP.go();});

Module Pattern << init example

Using a module pattern exposes

only one global variable, in this case “APP” – with the rest of

your methods within an object.

It gives you the ability to use private “constant” variables

inside your appʼs function scope.

Nesting functions within an “init” object allows them to be called

automatically on DOM ready.

.live() is Awesome. Use it. Love it.$('div.window').live('mousedown', function() { // Bring window to front. JQD.util.window_flat(); $(this).addClass('window_stack');}).live('mouseenter', function() { $(this).die('mouseenter').draggable({ // Confine to desktop. // Movable via top bar only. cancel: 'a', containment: 'parent', handle: 'div.window_top' }).resizable({ containment: 'parent', minWidth: 400, minHeight: 200 });

// etc.});

All the event wire-ups are ready, before the page even has any content. Once the content is loaded remotely via Ajax, the elements respond to their respective predefined .live() event listeners.

Live (pun intended) example of .live()

http://desktop.sonspring.com/ajax_load.html

var JQD = (function($, window, document, undefined) { return { go: function() { for (var i in JQD.init) { JQD.init[i](); } }, init: { frame_breaker: function() {/* ... */}, clock: function() {/* ... */}, desktop: function() {/* ... */}, wallpaper: function() {/* ... */} }, util: { clear_active: function() {/* ... */}, window_flat: function() {/* ... */}, window_resize: function() {/* ... */} }})(jQuery, this, this.document);

Basic structure of jQuery Desktop

// Cancel mousedown, right-click.$(document).mousedown(function(ev) { var tags = ['a', 'button', 'input', 'select', 'textarea'];

if (!$(ev.target).closest(tags).length) { JQD.util.clear_active(); ev.preventDefault(); ev.stopPropagation(); }}).bind('contextmenu', function() { return false;});

Event listeners at the document level

// Relative or remote links?$('a').live('click', function(ev) { var url = $(this).attr('href'); this.blur();

if (url.match(/^#/)) { ev.preventDefault(); ev.stopPropagation(); } else { $(this).attr('target', '_blank'); }});

External links open in a new window

// Make top menus active.$('a.menu_trigger').live('mousedown', function() { if ($(this).next('ul.menu').is(':hidden')) { JQD.util.clear_active(); $(this).addClass('active').next('ul.menu').show(); } else { JQD.util.clear_active(); }}).live('mouseenter', function() { // Transfer focus, if already open. if ($('ul.menu').is(':visible')) { JQD.util.clear_active(); $(this).addClass('active').next('ul.menu').show(); }});

Top level drop-down menus

// Desktop icons.$('a.icon').live('mousedown', function() { // Highlight the icon. JQD.util.clear_active(); $(this).addClass('active');}).live('dblclick', function() { // Get the link's target. var x = $(this).attr('href'); var y = $(x).find('a').attr('href');

// Show the taskbar button. if ($(x).is(':hidden')) { $(x).remove().appendTo('#dock'); $(x).show('fast'); }

// Bring window to front. JQD.util.window_flat(); $(y).addClass('window_stack').show();}).live('mouseenter', function() { $(this).die('mouseenter').draggable({ revert: true, containment: 'parent' });});

Making desktop icons interactive

// Taskbar buttons.$('#dock a').live('click', function() { // Get the link's target. var x = $($(this).attr('href'));

// Hide, if visible. if (x.is(':visible')) { x.hide(); } else { // Bring window to front. JQD.util.window_flat(); x.show().addClass('window_stack'); }});

Taskbar / Dock buttons

// Minimize the window.$('a.window_min').live('click', function() { $(this).closest('div.window').hide();});

// Maximize or restore the window.$('a.window_resize').live('click', function() { JQD.util.window_resize(this);});

// Close the window.$('a.window_close').live('click', function() { $(this).closest('div.window').hide(); $($(this).attr('href')).hide('fast');});

Manipulating the “windows”

// Show desktop button, ala Windows OS.$('#show_desktop').live('click', function() { // If any windows are visible, hide all. if ($('div.window:visible').length) { $('div.window').hide(); } else { // Otherwise, reveal hidden windows that are open. $('#dock li:visible a').each(function() { $($(this).attr('href')).show(); }); }});

Clicking the Show Desktop button

To prevent developers fromwasting countless hours onstyling dumb form elements

“Future plans include a tutorial on how to use jQuery to add styling hooks to form elements, since I know from experience that is no cup of tea.”

— Source = Me when announcing 960.gs in 2008!

— Excuse = New HTML5 elements set me back :)

It’s been awhile in the making...

select { -webkit-appearance: none;}

WebKit’s form styling secret sauce

This gives you back a bit of control for things like <select> drop-downs.

document.write(ad) with position:absolute

header[role="banner"] h1 { background-repeat: no-repeat; background-position: center 20px; background-image: url(../images/logo.png); background-image: url(data:imagepng;base64, iVBORw0KGgoAAA...); color: transparent; font-size: 0; overflow: hidden; text-indent: -99999px; height: 130px;}

Base64 encode background images

http://formalize.me http://www.motobit.com/util/base64-decoder-encoder.asp

<body>...

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dojo/dojo.xd.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script> <script src="http://yui.yahooapis.com/3.3.0/build/simpleyui/simpleyui-min.js"></script>  <script src="assets/javascripts/dojo.formalize.js"></script> <script src="assets/javascripts/extjs.formalize.js"></script> <script src="assets/javascripts/jquery.formalize.js"></script> <script src="assets/javascripts/mootools.formalize.js"></script> <script src="assets/javascripts/prototype.formalize.js"></script> <script src="assets/javascripts/yui.formalize.js"></script> </body>

Pre-load JavaScript files

http://formalize.me/demo.html

<body>...

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dojo/dojo.xd.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script> <script src="http://yui.yahooapis.com/3.3.0/build/simpleyui/simpleyui-min.js"></script>  <script src="assets/javascripts/dojo.formalize.js"></script> <script src="assets/javascripts/extjs.formalize.js"></script> <script src="assets/javascripts/jquery.formalize.js"></script> <script src="assets/javascripts/mootools.formalize.js"></script> <script src="assets/javascripts/prototype.formalize.js"></script> <script src="assets/javascripts/yui.formalize.js"></script> </body>

Pre-load JavaScript files

http://formalize.me/demo.html

var IE6 = IE(6);var IE7 = IE(7);

// Internet Explorer detection.function IE(version) { var b = document.createElement('b'); b.innerHTML = ''; return !!b.getElementsByTagName('br').length;}

IE detection for Prototype.js

http://formalize.me/assets/javascripts/prototype.formalize.js

Prevents false positives since Opera can be made to impersonate IE.Note: I did this because Prototype doesn’t detect IE version number.

var ie = (function() { var undef, v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i');

while ( div.innerHTML = '', all[0] );

return v > 4 ? v : undef;}());

James Padolsey's IE detection (whoa!)

https://gist.github.com/527683

Line number counts in Formalize JS

Dojo = 174 lines ExtJS = 168 lines

jQuery = 158 lines MooTools = 163 lines

Prototype = 171 lines YUI = 168 lines

“Write Less, Do More” FTW! :)

var FORMALIZE = (function($, window, document, undefined) { // Private constants.! var PLACEHOLDER_SUPPORTED = 'placeholder' in document.createElement('input');! var AUTOFOCUS_SUPPORTED = 'autofocus' in document.createElement('input');! var WEBKIT = 'webkitAppearance' in document.createElement('select').style;! var IE6 = !!($.browser.msie && parseInt($.browser.version, 10) === 6);! var IE7 = !!($.browser.msie && parseInt($.browser.version, 10) === 7);

// Expose innards of FORMALIZE. return { go: function() {/* ... */}, init: { detect_webkit: function() {/* ... */}, full_input_size: function() {/* ... */}, ie6_skin_inputs: function() {/* ... */}, autofocus: function() {/* ... */}, placeholder: function() {/* ... */} }, misc: { add_placeholder: function() {/* ... */} } };})(jQuery, this, this.document);

Basic structure of Formalize JS

// FORMALIZE.init.detect_webkitdetect_webkit: function() {! if (!WEBKIT) {! ! return;! }

! // Tweaks for Safari + Chrome.! $('html').addClass('is_webkit');},

Detecting WebKit

// FORMALIZE.init.full_input_sizefull_input_size: function() {! if (!IE7 || !$('textarea, input.input_full').length) {! ! return;! }

! // This fixes width: 100% on <textarea> and class="input_full".! // It ensures that form elements don't go wider than container.! $('textarea, input.input_full') .wrap('<span class="input_full_wrap"></span>');},

Basic structure of Formalize JS

// FORMALIZE.init.ie6_skin_inputsie6_skin_inputs: function() { // Test for Internet Explorer 6. if (!IE6 || !$('input, select, textarea').length) { // Exit if the browser is not IE6, // or if no form elements exist. return; }

// For <input type="submit" />, etc. var button_regex = /button|submit|reset/;

$('input').each(function() { var el = $(this);

// Is it a button? if (this.getAttribute('type').match(button_regex)) { el.addClass('ie6_button');

/* Is it disabled? */ if (this.disabled) { el.addClass('ie6_button_disabled'); } } // Or is it a textual input? else if (this.getAttribute('type').match(type_regex)) { el.addClass('ie6_input');

/* Is it disabled? */ if (this.disabled) { el.addClass('ie6_input_disabled'); } } });

$('textarea, select').each(function() { /* Is it disabled? */ if (this.disabled) { $(this).addClass('ie6_input_disabled'); } });},

Adding stylinghooks for IE6

// FORMALIZE.init.autofocusautofocus: function() {! if (AUTOFOCUS_SUPPORTED || !$(':input[autofocus]').length) {! ! return;! }

! $(':input[autofocus]:visible:first').focus();},

Adding HTML5 autofocus support

// FORMALIZE.init.placeholderplaceholder: function() {! if (PLACEHOLDER_SUPPORTED || !$(':input[placeholder]').length) {! ! // Exit if placeholder is supported natively,! ! // or if page does not have any placeholder.! ! return;! }

! FORMALIZE.misc.add_placeholder();

! $(':input[placeholder]').each(function() {! ! var el = $(this);! ! var text = el.attr('placeholder');

! ! el.focus(function() {! ! ! if (el.val() === text) {! ! ! ! el.val('').removeClass('placeholder_text');! ! ! }! ! }).blur(function() {! ! ! FORMALIZE.misc.add_placeholder();! ! });

! ! // Prevent <form> from accidentally! ! // submitting the placeholder text.! ! el.closest('form').submit(function() {! ! ! if (el.val() === text) {! ! ! ! el.val('').removeClass('placeholder_text');! ! ! }! ! }).bind('reset', function() {! ! ! setTimeout(FORMALIZE.misc.add_placeholder, 50);! ! });! });}

Adding HTML5 placeholder support

// FORMALIZE.miscmisc: {! // FORMALIZE.misc.add_placeholder! add_placeholder: function() {! ! if (PLACEHOLDER_SUPPORTED || !$(':input[placeholder]').length) {! ! ! // Exit if placeholder is supported natively,! ! ! // or if page does not have any placeholder.! ! ! return;! ! }

! ! $(':input[placeholder]').each(function() {! ! ! var el = $(this);! ! ! var text = el.attr('placeholder');

! ! ! if (!el.val() || el.val() === text) {! ! ! ! el.val(text).addClass('placeholder_text');! ! ! }! ! });! }}

Moved outside of init, for easier reuse

http://jeromeetienne.github.com/jquery-mobile-960

jQuery Companion Libraries

jQuery UI – http://jqueryui.comjQuery Mobile – http://jquerymobile.com

Amplify – http://amplifyjs.comUnderscore – http://documentcloud.github.com/underscore

Backbone – http://documentcloud.github.com/backbone

JS TestingJasmine – http://pivotal.github.com/jasmine

QUnit – http://docs.jquery.com/Qunit

If you want write Ruby-esque code that compiles to JS...CoffeeScript – http://jashkenas.github.com/coffee-script

Additional Resources

Learning jQuery – https://www.packtpub.com/learning-jquery-1.3

jQuery Enlightenment – http://jqueryenlightenment.comDOM Scripting – http://domscripting.com

JavaScript: The Good Parts – http://oreilly.com/catalog/9780596517748JavaScript: The Definitive Guide – http://oreilly.com/catalog/9780596101992

High Performance JavaScript – http://oreilly.com/catalog/9780596802806Pro JavaScript Design Patterns – http://jsdesignpatterns.com

Object-Oriented JavaScript – https://www.packtpub.com/object-oriented-javascript/bookThe Art and Science of JavaScript – http://www.sitepoint.com/books/jsdesign1

Test-Driven JavaScript Development – http://tddjs.com

Recommended Books

For questions – Or just to say hi :)

Contact – http://sonspring.com/contact

Twitter – http://twitter.com/nathansmith

http://www.slideshare.net/nathansmith/drupalcon-jquery

What did you think?

Locate this session on the DCC website:http://chicago2011.drupal.org/sessions

Click the “Take the Survey” link.

Thanks!

drupalcon jquery

Design

drupalcon dc pregnancy

drupalcon prague 2013 report

drupalcon presentation cibox.pdf

jquery, jquery ui et jquery...

drupalcon dc presentation

jquery, jquery ui et jquery...

drupalcon prague v4

drupalcon amsterdam closing session

jquery 1.3 and jquery ui

api jquery com jquery ajax

drupalcon 2014: drupal's destiny

drupalcon munich aug 2012

jquery jquery jquery jquery jquery

forensic theming - drupalcon london

jquery, jquery ui, and jquery mobile: recipes and...

jquery & jquery mobile

aprende jquery - introduccion a jquery

drupalcon wrap up

openid drupalcon 2008

jquery . jquery versione di sviluppo (jquery-x.y.js)...