For whatever reason I always have trouble finding a resource this good for converting special symbols
http://unicodelookup.com
Snippets of code and tricks that would otherwise be forgotten. Useful for me, hopefully for you too.
Tuesday, October 8, 2013
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.
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...
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'
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'
Wednesday, August 21, 2013
CSS ellipsis
I always have trouble remembering what CSS properties need to be set to get text-overflow: ellipsis to work. These three seem to do the job:
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
Wednesday, August 14, 2013
TouchPunch - drag and drop on mobile devices
I'm starting a project that is going to require drag and drop functionality on mobile devices. I quickly learned that jQuery UI's wonderful .draggable() method only works with mouse events, making it useless on a tablet or phone.
As always I am not the first to have this problem, so some developers came up with TouchPunch, a small library that forwards mouse events to their touch counterparts. Simply including this library solved the problem without the need to write a single line of code. Booya.
http://touchpunch.furf.com/
As always I am not the first to have this problem, so some developers came up with TouchPunch, a small library that forwards mouse events to their touch counterparts. Simply including this library solved the problem without the need to write a single line of code. Booya.
http://touchpunch.furf.com/
Thursday, August 1, 2013
JSON Builder
A great online tool that I use to design JSON formats:
http://www.jsoneditoronline.org/
http://www.jsoneditoronline.org/
Subscribe to:
Posts (Atom)