JSON native object

Why did it take me so long to find the docs on the native JSON object? Too many blog posts on other implementations of JSON and JSONP with third-party libraries (I still love you, jQuery).

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/JSON

IE 7 doesn’t support it… I’ll have to check my analytics and see if that even matters anymore…

Convert number to binary in Javascript

Why did it take me so long to find this? Probably because I didn’t use radix in my Google search. Of course. Thanks to “Philip M” for the clue and thanks to W3Schools.com for the reference (see here for more on the unary “+” operator to convert a string to number).

var str = '37';
var num = (+str);
document.write(num.toString(2));

Should output “100101″.

Adding CSS support to HTML5 in IE6, IE7 & IE8

This is another diamond in the rough I found today. We’re all moving to HTML5, but IE 6-8 has to make it difficult (what’s different, right?). Well, you can get IE to cooperate on a basic level with this little trick. See John Resig’s examples for simple instructions on how to use it. Basically, IE doesn’t recognize HTML5 elements unless you use Javascript to create the element:

document.createElement("section")


You don't even need to add the element to the page - the code above effectively "registers" the element with IE so that CSS styling will apply. Cool! A simple work around until IE 6-8 is phased out.

I put together a sample script to create every HTML5 in the document (along with some default styles based on the current version of Chrome). These should be used for development only:

CSS

/*----- HTML5 default display styles -----*/
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
	display: block;
}

keygen, meter, progress {
	display: inline-block;
}

output {
	display: inline;
}

audio, canvas, embed, video {
	width: 300px;
}		

audio {
	height: 32px;
}

canvas, embed, video {
	height: 150px;
}

keygen {
	margin: 0em;
}

mark {
	background-color: yellow;
	color: black;
}

meter {
	width: 5em;
	height: 1em;
	vertical-align: -0.2em;
}

progress {
	width: 10em;
	height: 1em;
	vertical-align: -0.2em;
	background-color: gray;
}

Script

function IEHtmlStyle() {

	var tags = [
		{ 'tag': 'article', 'display': 'block' },
		{ 'tag': 'aside', 'display': 'block' },
		{ 'tag': 'audio', 'display': 'auto' },
		{ 'tag': 'canvas', 'display': 'auto' },
		{ 'tag': 'command', 'display': 'auto' },
		{ 'tag': 'datalist', 'display': 'auto' },
		{ 'tag': 'details', 'display': 'block' },
		{ 'tag': 'embed', 'display': 'auto' },
		{ 'tag': 'figcaption', 'display': 'block' },
		{ 'tag': 'figure', 'display': 'block' },
		{ 'tag': 'footer', 'display': 'block' },
		{ 'tag': 'header', 'display': 'block' },
		{ 'tag': 'hgroup', 'display': 'block' },
		{ 'tag': 'keygen', 'display': 'inline-block' },
		{ 'tag': 'mark', 'display': 'auto' },
		{ 'tag': 'meter', 'display': 'inline-block' },
		{ 'tag': 'nav', 'display': 'block' },
		{ 'tag': 'output', 'display': 'inline' },
		{ 'tag': 'progress', 'display': 'inline-block' },
		{ 'tag': 'rp', 'display': 'auto' },
		{ 'tag': 'rt', 'display': 'auto' },
		{ 'tag': 'ruby', 'display': 'auto' },
		{ 'tag': 'section', 'display': 'block' },
		{ 'tag': 'source', 'display': 'auto' },
		{ 'tag': 'summary', 'display': 'block' },
		{ 'tag': 'time', 'display': 'auto' },
		{ 'tag': 'video', 'display': 'auto' },
		{ 'tag': 'wbr', 'display': 'auto' }
	];

	this.reg = function() {

		for (var i = 0; i < tags.length; i++) {
			document.createElement(tags[i].tag);
		}

	};

}

var iehs = new IEHtmlStyle();
iehs.reg();	

Pass (isolate) a value, not variable, in Javascript

I found an article detailing some “oddities” in Javascript today. The callback argument in the replace method was new for me, though I feel that there must be some eccentric behavior that pushed this “secret” into the shadows.

Number 7 proved the most beneficial for me. My attempts to pass the current value of a variable instead of the variable itself have long been thwarted time and time again, and I eventually resorted to using a separate variable to hold the value I needed. This is okay for a single instance, but when I’m plotting hundreds of places on a map the overhead could get cumbersome (caveat: storing each map marker in a separate object has other benefits, so maybe this is a poor example). Anyway, now I see how to “isolate” the value that is passed to a function:

var someVar = 'hello';
setTimeout((function(someVar) {
	return function()  { alert(someVar); }
})(someVar), 1000);
var someVar = 'goodbye';

This function will alert “hello” – the value is passed to the function instead of the variable. Thanks, Smashing, for another great post!

Comments, please?

I’m shutting off locking down comments for awhile. I’ve had an inordinate amount of spam lately and combing through it is making me gag. However, here’s a comment (definitely spam) that I thought I should share:

I enjoy your post. It makes me love this boring life and provides me the ability to remain fighting.

You’re welcome, anonymous spammer. Hang in there, buddy. Life does gets better, after you stop filling bloggers’ inboxes with meaningless junk.

JSON content type in classic ASP

I spent a considerable portion of my morning yesterday trying to get my classic ASP to serve up JSON to an application I’m working on. Finally, I found a subtle difference in the “Response.ContentType” property and “Response.AddHeader()” method (I code in JavaScript, btw). I set “Response.ContentType = ‘application/json’” and it always returned a nicely-formatted JSON object, but the response header wasn’t sending it as json. Finally, I used “Response.AddHeader(‘Content-Type’, ‘application/json’)” and it sent the response as json (though the textual representation in my Chrome window wasn’t formatted nicely like before). The only difference I could find was that “Response.ContentType” returned a header with “Content-type” (notice the lowercase “t” in “type”), whereas “Response.AddHeader()” returned a header with the appropriate “Content-Type” property. Odd. Maybe it was just me, but it’s working now.

So, in sum, use the following when returning a JSON object in classic ASP:

"Response.AddHeader('Content-Type', 'application/json')"

instead of “Response.ContentType”.  This applies to any other MIME type you’re sending, I guess.

Detecting whether a query string parameter is set in classic ASP

In PHP, there’s a fancy little function called “isset()” that allows you to test whether a variable has been set (as opposed to being instantiated or declared).  Classic ASP doesn’t, and I have to relearn how to do it every time.  I code ASP JavaScript, so here’s what I found:

var q = Request.QueryString('query') + '';

if (q == 'undefined') then { doSomething(q); }

The idea is to convert the contents of the “query” parameter to a String (hence concatenating the '' to the end of the variable, which I prefer over the String() constructor or .toString() function), then test it against the string ‘undefined’.  If the query string did not contain a “query” parameter, then my “q” variable will be undefined. However testing for the “undefined” value in JavaScript is bad, so I convert it to a string.  Sketchy, I know, but it works for me.

Tiled Background designer

Very cool background designer:

http://bgpatterns.com/

ADODB query from linked table with conditions

I spent (too many) hours today trying to figure out why I couldn’t get a query to run through ADODB from an HTA I’m working on.  The query pulls from a linked table which links to a tab-delimited text file, and the query had a WHERE condition as such:

WHERE field1 LIKE "00*"

Apparently, I wasn’t doing anything wrong, but the query keep returning empty.  Only when I changed the WHERE clause to

WHERE field6 Is Not Null

did I get the expected results. I don’t know what to think of that, but it’s a good thing to remember.

I was using ADODB to run a query from MS Access, btw.

Web Design Helpers

I just ran into two nifty web design helpers:

ProCSSor – ever edited your CSS in Dreamweaver, Notepad, Notepad 2, in-browser editor and some other program at work you don’t remember?  Then you know what it’s like to see your CSS go to pot.  ProCSSor re-prettifies your CSS automatically.

Maki – an app that you access via bookmarklet (I love those!) that helps you slice up your Photoshop design into CSS and HTML.