JoshMattVander

Domain and subdomain routing in rails

JoshMattVander — Fri, 19 Feb 2010 18:10:12 +0000

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.

not_domain_regex = Regexp.new(‘\A(?!(’ + AConfig::domain.gsub(‘.’, ‘\.‘) + ‘))’, true)
is_domain_regex = Regexp.new(‘\A((’ + AConfig::domain.gsub(‘.’, ‘\.‘) + ‘))’, true)
map.connect(
‘*path’,
:controller => ‘external’,
:action => ‘handler’,
:conditions => {
:domain => not_domain_regex
}
)
map.connect(
‘*path’,
:controller => ‘external’,
:action => ‘handler’,
:conditions => {
:domain => is_domain_regex,
:subdomain => /([a-z0-9\-\_]{1,100}[^www])/i
}
)

The next step in this will be to replace “*path” with “:controller/:action/:id” and have it route to namespaced controllers.

Ex:

/controllers/external/controller_name.rb

If you have any ideas on that part. Let me know

Cross domain sessions

JoshMattVander — Thu, 18 Feb 2010 20:04:41 +0000

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.

#Controller
class ServiceController < ApplicationController
def sessioninfo
if session[:user]
@referrer = ‘var referrer=\’‘ + request.env[‘HTTP_REFERER’].to_s + ‘\’;’
@user = ‘var user=’ + session[:user].to_json + ‘;’
else
#there was no session
end
end
end

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 = $(‘’);
$(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.

Private variables in javascript

JoshMattVander — Sat, 05 Sep 2009 04:14:11 +0000

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’
alert(bar.getPrivate()); // Alerts ‘Hello’
alert(bar.privateVar); // Alerts ‘undefined’

Ajaxifying your website

JoshMattVander — Fri, 04 Sep 2009 17:27:55 +0000

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
//With our javascript action
var links = $$(‘a’);
links.each(function(linkElement, index) {
var href = linkElement.href;
if(href.indexOf(‘http://www.yourdomain.com/’) != -1) {
var uri = href.split(‘http://www.yourdomain.com’)[1];
Event.observe(linkElement, ‘click’, function(e){
window.location.hash = uri;
//Disallow the default click to change pages
Event.stop(e);
});
}
});
},
dispatch : function(url) {
//Check to see if the page you are linking to is NOT the current URL
//If different, then send your request
if (this.currentPage != url) {
this.currentPage = url;
var myAjax = new Ajax.Updater(‘content’, url, {
parameters : { ‘quick’ : true }
});
}
}
});
//initialize
new QuickLink();

Your template

if ($_POST[‘quick’]!=true) { ?>
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
"Content-type" content="text/html; charset=utf-8">
Page Title
"content">
} ?>
Some content here
if ($_POST[‘quick’]!=true) { ?>

} ?>

In conclusion

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.

Quick and dirty GZIP Compression w/ .htaccess

JoshMattVander — Fri, 04 Sep 2009 17:16:06 +0000

There are bigger solutions to this problem that you may need to consider. But if you have a medium trafficked site this will work.

"\\.(js|css|html|htm|php|xml)$">
SetOutputFilter DEFLATE
>

A little something for Expires headers & ETags too

"\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
Header unset ETag
FileETag None
>

Front-End Performance Optimizations

JoshMattVander — Tue, 25 Aug 2009 18:24:45 +0000

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

Joseph Smarr: “High-performance JavaScript: Why Everything You’ve Been Taught Is Wrong” @ Yahoo! Video

Look at the cascade: You love it!

The event model in javascript

JoshMattVander — Thu, 16 Jul 2009 04:32:15 +0000

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.

The PPK

PPK (Peter-Paul Koch): "JavaScript Events" @ Yahoo! Video

Quirksmode DOM Events

New Site

JoshMattVander — Sat, 04 Jul 2009 08:32:34 +0000

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.

I hope you enjoy.

-Josh

Javascript prototype linkage “Wierdness”

JoshMattVander — Thu, 02 Jul 2009 04:26:46 +0000

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.

Javascript Scoping

JoshMattVander — Fri, 05 Jun 2009 04:04:25 +0000

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