Tuesday, September 17, 2013

Online formatters & pretty printers

A few online resources that I use on a daily basis for formatting / pretty printing:

JSON Viewer:
Simple, straighforward, and FULL SCREEN!  ( I hate JSONLint because its window is so small )
There is also a 'View' mode that displays your JSON as an interactive (collapse/expand) list.
jsonviewer.stack.hu

PrettyPrinter:
Excellent for PHP arrays. The list of options for fomatting can be a little overwhelming but very powerful. I generally click the first two boxes for "Add new lines after "{" and before "}" " and "Add new lines before "{" "
prettyprinter.de

Phillihp's PHP Pretty Printer:
Admittedly, this tool is down every once in awhile. It's a bummer because I haven't found a better one. This handles PHP Objects beautifully, and color codes them too.
http://phillihp.com/toolz/php-array-beautifier/

It is also worth noting that the Javascript method JSON.stringify() is capable of pretty-printing JSON objects.   JSON.stringify(JSON_object, null, 2);    ( I don't remember what the null is for but the 2 is the amount of indentation I believe )

Firebug and the Chrome Developers Console also have good methods for formatting debugging output:
https://getfirebug.com/wiki/index.php/Console_API
https://developers.google.com/chrome-developer-tools/docs/console

If you have a favorite, please leave a comment.

Monday, September 16, 2013

Formatting dynamically generated content in JQuery Mobile

I'm learning the basics of JQuery Mobile and so far have found it to have distinct advantages and disadvantages.

The most major roadblock I encountered ( and also had trouble finding a solution to ) was that when I added HTML markup to the page dynamically it wasn't being automatically themed in the JQM 'style'.  ( JQM adds a series of CSS classes that control the display of page elements )

Finally I found this blog entry which nicely describes the issues I needed solved:
http://www.gajotres.net/jquery-mobile-and-how-to-enhance-the-markup-of-dynamically-added-content/

Unfortunately there doesn't seem to be a single solution to this problem, almost every HTML element type has a different means of being 'reformatted'.   For example I added a SELECT menu dynamically. To have it appear styled with JQM styles I had to first append the menu to the DOM:

$("#select_container").html(select_markup);  // append the select_markup
$("select").select();  // call select() on all select menus to force / reset styling

Text inputs, checkboxes, tables, buttons and navigation all have their own methods...

More on JQM to follow...

Thursday, September 5, 2013

onmousemove event handling in Internet Explorer

IE was giving me trouble when assigning event handlers in my usual syntax:
document.getElementById("myDiv").onmousemove = function (e) {
    // code to execute
}

The general consensus around the internet is that IE doesn't bind onmousemove events to elements other than the 'document' element. Or something like that. We all know that IE sucks, so lets cut straight the workaround.

It seems it works much better when using addEventListener():
document.getElementById("myDiv").addEventListener("mousemove", function (e) {
    // code to execute
}

Note that in that syntax the event goes by the name 'mousemove' and not 'ONmousemove'