I needed to be able to route any domain that was not my own to a single controller. And furthermore I had to route any subdomain that was not ” and not ‘www’ to that same controller.
If you can’t guess why, it is because it is a hosted application. In any case, I used the request_routing plugin and it seemed OK for my needs. The problem was, it didn’t accept things like :not => ‘www’ or :not => ”. So, I ended up using a regular expression for my result. Here goes.
I have been racking my brain for some time on how to accomplish cross domain sessions. It was especially puzzling at first since the application I was working on ran multiple sites. So, the code base was the same, even though the domain might change.
I will not go too deep into security on this, I am just going to give you the tools to explore the concept.
The first step you will have to take is to create a services file on the original site providing the session, in this case I will be using rails.
What ultimately gets outputted from this is the following:
#output
var referrer=‘http://www.thereferrer.com’;
var user={"user"{"username":"joshmattvander"}}
Now the session is ultimately exposed on the original site. But we need to get it from another site. The only way to accomplish that I can find is to use javascript. What you are going to do is add a script to the head of the document with your exposed service URL in my case (http://mysite.com/service/sessioninfo). The reason we are doing this in javascript, is because if we did this on the server side, the session would be blank. By doing this in javascript it is as if the user was returning to the URL themselves so the session is still alive and kicking.
$(document).ready(function(){
var scriptEl = $(‘<script type="text/javascript" src="http://mysite.com/service/sessioninfo"></script>’);
$(scriptEl).appendTo($(‘head’));
setTimeout(function(){
try{
if(referrer && user){
alert(‘The referring site is: ‘ + referrer + ‘.’)
alert(‘The logged in user is: ‘ + user[‘user’].username + ‘.’);
}
}catch(e){
alert("The session did not transfer")
}
}, 500);
});
This is the basic mechanism that allows this to happen, but the next step would be securing with some sort of key and adapting this to your needs.
As stated earlier - on my app there are multiple domains being run by a single application. So I can save the a generated key to a table, and then use that key to re-connect with ajax.
In a chat the concept of private variables in a javascript object came up. I had seen it before but never really had done them before so I thought I would play around with it a bit.
Javascript by default does not have private variables. If you have variables that need to be ‘read-only’ or ‘private’ you can limit it’s visibility with a closure inside your constructor function.
var foo = function(a){
var privateVar = a;
this.getPrivate = function(){
return a;
}
this.setPrivate = function(newvar){
a = newvar;
}
}
var bar = new foo(1000);
alert(bar.getPrivate()); // Alerts 1000
bar.setPrivate(‘Hello’); // Sets privateVar to ‘Hello’
This tutorial is intended to be a first look at the concept of “Ajaxifying” your website. That is, creating a progressive-enhancement to how users navigate from page to page. Traditionally when a user clicks a link, the new page in it’s entirety will be loaded. If your header / navigation / footer stays the same throughout, there is little need to re-download that content, furthermore to re-render that content after it downloaded.
This is a generic pattern that you can expand on and implement with your web application.
First the Javascript
var QuickLink = Class.create({
currentPage : null,
initialize : function(){
this.attachLinkEvents();
//Set an interval to check for changes in the URI
setInterval(function(){
this.refresh();
}.bind(this), 1000);
},
refresh : function(){
//If a change has taken place, call the dispatch function
var url = window.location.hash.split(‘#’);
if(url.length > 1){
this.dispatch(url[1]);
}
},
attachLinkEvents : function(){
//Gather a list of links, and replace the default action
What we are doing is using AJAX just to refresh the content area. Your template checks to see if it was an AJAX request and if so, does not send the header and footer of your content back. This saves you in the following areas:
Does not have to re-download everything
If you have scripts that need to be initialized, the scripts will not need to be reparsed
Moving further
If using a more advanced setup like an MVC framework or if your app has different scripts or elements depending on the page I suggest on the server side you instead send back a payload including dependent scripts and maybe flags to highlight elements as well. Then you can use output buffering to store the HTML chunk in part of the payload. Return the response as a JSON object have your Javascript put things where they need to go and THEN write the innerHTML of the content part of the payload.
When everyone talks about performance, they talk about tuning a database, they talk about adding machines and they talk about optimizing code on the server. I have been on this trip about learning how to optimize pages. This is not necessarily a tutorial, but more a collection of videos so you can begin your quest.
Speed
The golden rules: http://developer.yahoo.com/performance/rules.html
This is a video I found on YUI Theater. If you have spent any amount of time with javascript especially event handling and especially event handling within input fields you’ve driven yourself to the point of insanity on at least one occasion. I am not so sure if this video helps as much as it just shows you how different the implementations are.
Yep, it was about time for a change. I set out this morning to design a new site. I was using a theme before for my personal blog and I had a seperate site for my freelance business. Well, I am dropping the freelance and I am switching everything over to my personal site.
From here on out, I will be publishing selected freelance work and some various programming explorations.
The way object linkage works in javascript is through “prototype”. Prototype is a dynamic linkage between objects. If we look for a property of an object and it doesn’t exist, the next thing it will try and do is step backwards in the prototype linkage and find a match before returning undefined.
Here’s where it gets tricky. If your initial object has a property set, and the object it inherits from overwrites that property that is all well and good. But, what if you decide later to delete that property from your new object? You would think an attempt to access it would return undefined right? Wrong. You are back at square one looking back up the prototype chain. Take a look.
var foo = function(){}
foo.prototype.setBikeColor = function(color){
this.bike = color;
}
foo.prototype.bike = "red";
var bar = new foo();
alert(bar.bike); //Alerts ‘red’
bar.setBikeColor("blue");
alert(bar.bike); //Alerts ‘blue’
delete(bar.bike);
alert(bar.bike); //Alerts ‘red’
The linkage is always there. It is always dynamic. And you can’t delete ‘bike’ from the objects prototype either because you then run the risk of deleting it from everyone.
I wanted to take a minute and talk a little about Javascripts scope and more importantly go through a couple examples.
In the first example, we will add a closure to our constructor function and then call it.
var scopeTest = function(a){
function foo(){
alert(a);
}
foo();
}
var test = new scopeTest(1); //Will alert "1"
In this example we will create a method foo() and a method bar() to our scopeTest object. The foo method will simply alert the value “a” the bar method will add 1 to var a and alert.
var scopeTest = function(a){
this.foo = function(){
alert(a);
}
this.bar = function(){
var a = a + 1;
alert(a)
}
}
var test = new scopeTest(1);
test.foo(); // will alert "1"
test.bar(); // will alert "NaN"
What happened there is, once we say “var a” inside the scope of the method bar. It ignores the variable “a” in the scope of our “scopeTest” constructor function.
In the final test for this example, we add a method via “prototype”
var scopeTest = function(a){
this.foo = function(){
alert(a);
}
}
scopeTest.prototype.bar = function(){
alert(a);
}
var test = new scopeTest(1);
test.foo(); // Will alert 1
test.bar(); // Will have an error because a is undefined
