Some debug code to isolate an element

This is great if you have layout issues and want to simplify things. Just add a selector for the only element you want on your page. In the following its page header.

var theElement = $(".page-header");
$("body > *").remove();
$("body").append(theElement);
Advertisements

Shortcut to function arguments

var ResetDefaultPasswordForm = function (options) {
    var options = options || {},
    editButton = options.EditButton || $(".edit-email-settings-button")[0],
    collapsibleArea = options.CollapsibleArea || $(".email-settings .collapsible")[0];

    $(collapsibleArea).hide();
}

Thanks to this post for the tip and all the other which I’m sure I’ll be posting examples of very soon.

Safest way to check an object exists in JavaScript

Had to note this down somewhere. How to tell if an object is null or undefined.

if (!! foo) alert('foo is defined and not-null');
if (! foo) alert('foo is undefined or null');

or if you want to test an method or value that might return NaN, 0, zero-length string, or of course false is not null you can use

if (typeof(SomeObject)!="undefined")
if(typeof(SomeObject)!="unknown")

And there is nothing wrong with the following if you don’t want to distinguish between null and undefined.

if(SomeObject != null)

Thanks to this post and it’s comments for all the tips.

Adapt to HTML5

I’ve written some quick example code that takes a page containing HTML5 equivalent class names (ie. .nav) and replaces the node with a HTML5 node that matches (ie. ).

//Adapt page to HTML5
    function changeNodeName(element, newNodeName) {
        var oldNode = element,
			    newNode = document.createElement(newNodeName),
			    node,
			    nextNode;

        node = oldNode.firstChild;
        while (node) {
            nextNode = node.nextSibling;
            newNode.appendChild(node);
            node = nextNode;
        }
        for (var i = 0; i < oldNode.attributes.length; i++) {
            newNode.setAttribute(oldNode.attributes[i].name, oldNode.attributes[i].value);
        }

        oldNode.parentNode.replaceChild(newNode, oldNode);
    }
    try {
        var theBody = document.getElementsByTagName("body")[0];
        var classNames = ["article", "aside", "command", "details", "summary", "figure", "figcaption", "footer", "header", "mark", "meter", "nav", "progress", "ruby", "rt", "rp", "section", "time", "wbr"];
        for (var i = 0; i < classNames.length; i++) {
            htmlFourElements = document.getElementsByClassName(classNames[i], theBody);
            for (var ii = 0; ii < htmlFourElements.length; ii++) {
                changeNodeName(htmlFourElements[ii], classNames[i]);
            }
        }
    } catch(e) {
        console.error(e.message);
    }

SASS and Visual Studio

Quick guide to perfect tools for using SASS in Visual Studio

Syntax highlighting, creating new files and compiling all without Ruby can be done with Mindscape Web Workbench.

Converting CSS to SASS can be done with the sass-convert foo.css foo.scss command or this online tool. Of course the sass-convert command will always be more up to date as it’s part of SASS. But of course you will need SASS and Ruby install to run it.

Code formatting isn’t a problem if you’re used to Ruby. If you’re not the default formatting from any converter is horrible. To convert it to a more ECMAScript style first remove all whitespace (you can leave the line breaks if you like). I use Notepad++ and just remove the indents with shift + tab. Then you can use any CSS cleaning/formatting tool such as Tabifier.

Dotless and Combres

Either Dotless or Combres for compiling the .less
http://www.dotlesscss.org/
http://combres.codeplex.com/

For syntax highlighting.
http://www.mindscapehq.com/products/web-workbench

If you use ReSharper then it’s best to disable it for .less files.

The best of all the Ellipsis JQuery Plugins

http://tpgblog.com/threedots/