IE8 & IE7 JavaScript Date NaN From String Error

When trying to create a JavaScript Date object from a string I was getting an NaN error in IE7 and IE8. My JavaScript worked in all the other browsers I was testing in. I was writing the script to figure out future dates based on the date the user selected. Issue is that IE7 and 8 don’t handle strings as well as real browsers. I was able to fix the error by using date.setFullYear instead of expecting the browser to handle it. Found a great function in StackOverflow.com to handle this.

 

function parseISO8601(dateStringInRange) {
	var isoExp = /^\s*(\d{4})-(\d\d)-(\d\d)\s*$/,
		date = new Date(NaN), month,
		parts = isoExp.exec(dateStringInRange);

	if(parts) {
		month = +parts[2];
		date.setFullYear(parts[1], month - 1, parts[3]);
		if(month != date.getMonth() + 1) {
			date.setTime(NaN);
		}
	}
	return date;
}

You can check out my reduced test case.

IE8 IE7 403 HTTPS/SSL Error MAMP Fix

I was using browserstack.com to test a website on my local machine using MAMP when everything looked fine except on IE8 and IE7. I was getting 403 forbidden errors when trying to load the site in IE7 and 8 on Windows XP. Apparently the default SSL apache configuration in MAMP is set to not accept connections from browsers that don’t support Server Name Indication. “SNI” is supported on Internet Explorer 7.0 or later (on Vista, not XP). The solution is to comment out a line in the apache configuration that rejects requests from non SNI compatible browsers.

MAMP Solution

1. Open Apache httpd-ssl.conf template file for editing

edit apache httpd-ssl.conf file in mamp template

2. Comment out line

SSLStrictSNIVHostCheck on

to be

 #SSLStrictSNIVHostCheck on

httpd-ssl.conf line to comment out

3. Restart MAMP to have Apache reload httpd-ssl.conf

restart mamp server

 

Hope this how-to helped save you some of the frustration I had.

Kynetx’s New Sandboxed Browser Extensions

I recently released my “Old School Retweet” Kynetx app in the Kynetx app store for the newly released browser extensions. I super love the new extensions and all that they do for users and developers alike. Something that I forgot when I released the app in the app store is that the new extension are sandboxed.

Because the extensions are sandboxed, all of the scripts from the extensions run a bit differently than they used to in the previous Kynetx extensions. Without getting into the technical details too much, the previous extensions just injected JavaScript into the page and the new extensions run JavaScript in a sandbox which has access to the DOM but can’t access anything else on the page. Because of this change my retweet app broke since I was using the jQuery loaded by Twitter.com to bring up the new tweet box (I do this because Twitter.com used that library to bind a click event and to trigger that event it has to be from the same library that bound it). Thankfully, with the help of a friend, I was able to get a work around for both Firefox and Chrome’s sandbox environment.

How I did it…

If the app is run not inside a sandbox I can just access the jQuery that Twitter.com loads to open a new tweet box

$("#new-tweet").trigger("click");

From within the Firefox sandbox I can access the page outside of the sandbox

window['$']("#new-tweet").trigger("click");

If I am in the Chrome sandbox I can create a script element that has the JavaScript that I want to execute. Crude, but it works. : )

var trigger_click_script = document.createElement("script");
var fallback = "window['$']('#new-tweet').trigger('click');";
trigger_click_script.innerHTML = fallback;
document.getElementsByTagName("head")[0].appendChild(trigger_click_script);

Here is the JavaScript code that I ended up with that gets executed when a user clicks on the retweet button.

// get stuff to retweet
var tweet = $K(this).parents(".tweet-content").find(".tweet-text").text();
var name = $K(this).parents(".tweet-content").find(".tweet-screen-name").text();

// build tweet
var retweet = "RT @"+name+" "+tweet;

// open new tweet box
$("#new-tweet").trigger("click");

// hack for FF sandbox
if ($("#tweet-dialog:visible").length === 0) {
  window['$']("#new-tweet").trigger("click");
}

// put tweet in new tweet box
$K(".draggable textarea.twitter-anywhere-tweet-box-editor").val(retweet).focus();
$K("#tweet_dialog a.tweet-button.button.disabled").removeClass("disabled");

// hack for chrome sandbox
if ($("#tweet-dialog:visible").length === 0) {
  var fallback = "window['$']('#new-tweet').trigger('click'); ";
  fallback += "window['$']('.draggable textarea.twitter-anywhere-tweet-box-editor').val('"+retweet+"').focus(); ";
  fallback += "window['$']('#tweet_dialog a.tweet-button.button.disabled').removeClass('disabled'); ";
  var trigger_click_script = document.createElement("script");
  trigger_click_script.innerHTML = fallback;
  document.getElementsByTagName("head")[0].appendChild(trigger_click_script);
}

Rage Of The Submit Button

I just noticed this morning that Facebook got rid of the submit button on comments. Not sure where else they might have also done this but I love it!

I like this trend of getting rid of submit buttons. Done right I think it makes interfaces cleaner, simpler, and easier. With mobile devices I still think it is better to give a submit button on forms but for desktop versions I love this lack of submit buttons. I find it interesting that Google has kept their search button even when Google Instant is enabled.

That’s all. Just my thoughts on the matter. ; )