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)
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
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.
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
=> 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 by using the same syntax either way: APP.foo() + APP.bar()
{ // 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.init jQuery(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.
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
= $(this).attr('href'); this.blur(); if (url.match(/^#/)) { ev.preventDefault(); ev.stopPropagation(); } else { $(this).attr('target', '_blank'); } }); External links open in a new window
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
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
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”
// 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 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...
Explorer detection. function IE(version) { var b = document.createElement('b'); b.innerHTML = '<!--[if IE ' + version + ']><br><![endif]-->'; 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.
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
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/; // For <input type="text" />, etc. var type_regex = /date|datetime|datetime-local|email|month|number|password|range|search|tel|text|time|url|week/; $('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 styling hooks for IE6
– http://domscripting.com JavaScript: The Good Parts – http://oreilly.com/catalog/9780596517748 JavaScript: The Definitive Guide – http://oreilly.com/catalog/9780596101992 High Performance JavaScript – http://oreilly.com/catalog/9780596802806 Pro JavaScript Design Patterns – http://jsdesignpatterns.com Object-Oriented JavaScript – https://www.packtpub.com/object-oriented-javascript/book The Art and Science of JavaScript – http://www.sitepoint.com/books/jsdesign1 Test-Driven JavaScript Development – http://tddjs.com Recommended Books
nathansmith
oekazuma
m_seki
javiergs
kentaroutakeda
chrisbanes
alexanderschranz
wasabeef
ma_cho29
envek
uetyo
shoheimitani
satoshi256kbyte
jponch
paigeccino
colly
bermonpainter
palkan
62gerente
honnibal
csswizardry
brettharned
ufuk
lara
![header[role="banner"] h1 { background-repeat: no-repeat; background-position: center 20px; background-image: url(../images/logo.png);](https://files.speakerdeck.com/presentations/4f51462873c92200220054a9/slide_37.jpg){kind=link}
![// FORMALIZE.init.autofocus autofocus: function() { ! if (AUTOFOCUS_SUPPORTED || !$(':input[autofocus]').length)](https://files.speakerdeck.com/presentations/4f51462873c92200220054a9/slide_47.jpg){kind=link}
![// FORMALIZE.init.placeholder placeholder: function() { ! if (PLACEHOLDER_SUPPORTED || !$(':input[placeholder]').length)](https://files.speakerdeck.com/presentations/4f51462873c92200220054a9/slide_48.jpg){kind=link}
