The last six years spent with BRIK has been wonderful and I’ve grown both as a human and as a developer. I’ve worked on a lot of fun projects, some of which has grown quite large, and some not so fun ones. I’ve worked with every aspect of development, from working with clients to drawing technical flowcharts only to throw them away moments later. I’ve worked solo and I’ve acted as CTO for my own, and other companies. I’ll still have an interest in the company as member of the Board, and as an owner, but if everything goes as planned, the company will carry on, and continue to grow even without me as we’ve got some great people on board, and hopefully more will join us (want in on the action?).

Time will tell what I’ll be doing at Facebook, but with the people I’ve met there, the atmosphere and the culture, I can promise you it’s going to be awesome! I have great expectations, to the company as a whole, but most to Facebook as a platform for a new generation of socially enabled (and driven) applications.

As you can probably understand, I’m really thrilled about joining the company, and to add to that, it has caused some publicity here in Norway in both regional and nation wide newspaper (printed and online).
Although most of the content is correct, and as expected, some of it comes across a bit out of context and without reference, which really isn’t to my liking. But I guess that is to be expected..
Anyway’s, just to make it clear; statements such as “I’m the best in the world” are taken completely out of context (and proportions) (I am one of the best on my specific field), and I did not make comments about certain people not knowing what they were doing, rather that they weren’t fully in control of that specific field.

But it’s getting late now, and in about 5 hours, I’ll be on my way to the airport to spend two weeks in San Francisco doing som RnR and some apartment scouting – if you know something suitable in the Mission are, do give me a shout!

Using both ASP.NET AJAX and ExtJS on the same page does not create any serious problems (I think there might be a couple of collisions on the Date object), but it does mean that you have quite a bit of overhead.

Removing the ASP.NET AJAX framework does not work initially as the generated proxy code needs this to work, so if we remove the ASP.NET AJAX framework, well, then we are going to need to replace it with something that caters to the proxy codes needs without the extra overhead of loading the entire ASP.NET AJAX framework. And here it is – this is the minimum of code needed to bootstrap the automatically generated proxy code, and to tie it into the ExtJs framework. If you want to use it with a different framework then it should not be a difficult task to exchange the Ext dependencies.

// Extend Functions prototype
Function.prototype.initializeBase = function(instance, baseArguments){
};
Function.prototype.registerClass = function(typeName, baseType, interfaceTypes){
    if (baseType) {
        for (var name in baseType.prototype) {
            this.prototype[name] = baseType.prototype[name];
        }
    }
};
Function.prototype.registerEnum = function(name, flags){
};

// Add Type and Type.registerNamespace
var Type = {
    registerNamespace: function(ns){
        var va = window;
        ns = ns.split(".");
        for (var i = 0, len = ns.length; i < len; i++) {
            va = va[ns[i]] = {};
        }
    }
};

// Create the Sys.Net.WebServiceProxy object
Type.registerNamespace("Sys.Net");

Sys.Net.WebServiceProxy = function(){
    //empty constructor
};

Sys.Net.WebServiceProxy._generateTypedConstructor = function(type){
    return function(properties){
        if (properties) {
            for (var name in properties) {
                this[name] = properties[name];
            }
        }
        this.__type = type;
    };
};

Sys.Net.WebServiceProxy.prototype._invoke = function(path, action, useGet, params, onSuccess, onFailure, userContext){
    // Use Ext.Ajax to perform the xhr call
    Ext.Ajax.request({
        url: path + "/" + action,
        method: useGet ? "get" : "post",
        jsonData: params,
        success: function(data){
            onSuccess(Ext.decode(data.responseText).d);
        },
        failure: function(data){
            onFailure(Ext.decode(data.responseText).d);
        },
        scope: userContext
    });
};
Sys.Net.WebServiceProxy.prototype.set_path = function(path){
    this._path = path;
};
Sys.Net.WebServiceProxy.prototype.get_path = function(){
    return this._path;
};

The only thing was, this just exited with a message saying unsupported platform or something. I quickly tested if the exe file was an archive and discovered I could unpack it with 7-Zip. Inside the resulting directory, in a folder named Installer, I found a file called Configuration.icf, and in this a line with the string

TargetOSs=winXP,winVista

I added ‘,win7′ on a hunch and ran Installer.exe, and what do you know, it worked

I’ve just completed the first version of my cross-site scripting library easyXSS. It is available at http://code.google.com/p/easyxss/ under a MIT-license.

As it is now it supports simple messaging between windows of different domains, but it also supports proxying method calls and results between them making it well-suited for creating API’s.

I’ve prepared several examples and demo’s at http://code.google.com/p/easyxss/ and look forward to getting feedback!

To show you a quick example, here is the code needed to have a method ‘doMagic’ that is located on domainA available in a window from domainB.

This is placed in the document api.html at domainA

var channel = easyXSS.createChannel({
onReady: function(){
remote = easyXSS.createInterface(channel, {
local: {
doMagic: _privateMethodDoingMagic
}
});
}
});

and this is placed in the document at domainB

var remote;
var channel = easyXSS.createChannel({
local: "/hash.html",
remote: "http://domaina.com/api.html",
onReady: function(){
remote = easyXSS.createInterface(channel, {
remote: {
doMagic: {}
}
});
}
});

The medhod doMagic can now be called from domainB using

remote.doMagic('argument1',2,'three',function(result){
// Consume the result
});

You can view a demo of it here.

The calendar supports loading data through a Ext.data.Store, d’n'd of timespans, events for handling d’n'd, editing etc.

Since my apps (ajax based, no updatepanels etc) use generic httpHandlers for these kind of things, I went looking for the ‘httphandler way’ of rendering the chart controls – but it does not exist..

So I whipped out reflector and took a look at the chart class, and found the three lines needed for doing this

Imports System.Web
Imports System.Web.Services
Imports System.Web.UI.DataVisualization.Charting
Imports System.IO

Public Class chart
Implements System.Web.IHttpHandler

Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
'create the chart
Dim ch As New System.Web.UI.DataVisualization.Charting.Chart
ch.ID = "chart"
ch.Height = 296
ch.Width = 412
ch.ImageType = DataVisualization.Charting.ChartImageType.Png
ch.Palette = DataVisualization.Charting.ChartColorPalette.BrightPastel
ch.BackColor = Drawing.Color.Azure
ch.RenderType = DataVisualization.Charting.RenderType.BinaryStreaming
ch.BorderlineDashStyle = DataVisualization.Charting.ChartDashStyle.Solid
ch.BackGradientStyle = DataVisualization.Charting.GradientStyle.TopBottom
ch.BorderlineWidth = 2
ch.BorderlineColor = Drawing.Color.Blue
ch.BorderSkin.SkinStyle = BorderSkinStyle.Emboss

Dim ser As System.Web.UI.DataVisualization.Charting.Series = ch.Series.Add("Series1")
ser.ChartType = DataVisualization.Charting.SeriesChartType.SplineArea
ser.BorderColor = Drawing.Color.CadetBlue
ser.ShadowOffset = 2

ser.Points.Add(New DataPoint() With {.YValues = New Double() {6}})
ser.Points.Add(New DataPoint() With {.YValues = New Double() {9}})
ser.Points.Add(New DataPoint() With {.YValues = New Double() {3}})
ser.Points.Add(New DataPoint() With {.YValues = New Double() {5}})
ser.Points.Add(New DataPoint() With {.YValues = New Double() {2}})
ser.Points.Add(New DataPoint() With {.YValues = New Double() {7}})
ser.Points.Add(New DataPoint() With {.YValues = New Double() {8}})
ser.Points.Add(New DataPoint() With {.YValues = New Double() {1}})

Dim ca = ch.ChartAreas.Add("Default")
ca.BackColor = Drawing.Color.Transparent
ca.BorderColor = Drawing.Color.Red
ca.AxisX.IsMarginVisible = False

context.Response.ContentType = "image/png"
context.Response.Charset = ""

'here comes the magic
Dim imageStream As New MemoryStream
ch.SaveImage(imageStream)
context.Response.BinaryWrite(imageStream.GetBuffer)

End Sub

ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
Get
Return False
End Get
End Property

End Class

There is quite good support for drag’n'drop here, but it lacks one thing; the precious reorder list.
An example of such can be found here

Since doing the google didn’t return anything like this I ended up implementing it my self.

I started out with the example given here, but this only implements basic d’n'd of elements, not the reordering.
So with the following html:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../lib/ext/resources/css/ext-all.css" temp_href="../lib/ext/resources/css/ext-all.css">
<script type="text/javascript" src="../lib/ext/adapter/ext/ext-base.js" temp_src="../lib/ext/adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="../lib/ext/ext-all-debug.js" temp_src="../lib/ext/ext-all-debug.js">
</script>
<script type="text/javascript" src="custom.js" temp_src="custom.js">
</script>
<script type="text/javascript">Ext.onReady(Tutorial.dd.init, Tutorial.dd);
</script>
<title>Custom Drag & Drop Tutorial</title>
<style type="text/css">

.dd-item {
height: 18px;
border: 1px solid #a0a0a0;
background-color: #c4d0ff;
vertical-align: middle;
cursor: move;
padding: 2px;
z-index: 1000;
}

.dd-ct .dd-item {
margin: 2px;
width:200px;
}

.dd-proxy {
opacity: 0.4;
-moz-opacity: 0.4;
filter: alpha( opacity = 40 );
}
</style>
</head>
<body>
<div class="dd-ct" id="dd1-ct">
<div class="dd-item" id="dd1-item1">
Item 1.1
</div>
<div class="dd-item" id="dd1-item2">
Item 1.2
</div>
<div class="dd-item" id="dd1-item3">
Item 1.3
</div>
</div>
</body>
</html>

and the following Javascript in index.js:

Ext.BLANK_IMAGE_URL = '../lib/ext/resources/images/default/s.gif';
Ext.namespace('Tutorial');
Ext.override(Ext.dd.DDProxy, {
startDrag: function(x, y){
var dragEl = Ext.get(this.getDragEl());
var el = Ext.get(this.getEl());
dragEl.applyStyles({
border: '',
'z-index': 2000
});
dragEl.update(el.dom.innerHTML);
dragEl.addClass(el.dom.className + ' dd-proxy');
},
onDragEnter: function(e, targetId){
var target = Ext.get(targetId);

if (target.dd instanceof Ext.dd.DDProxy) {
this._target = target;
this.updateTargetPosition();
}
},
updateTargetPosition: function(){
var _box = this._target.getBox();
this._crossOver = {
x: (this._target.getLeft() + (_box.width / 2)),
y: (this._target.getTop() + (_box.height / 2))
}
},
onDragOver: function(e, targetId){
if (this._target) {
var el = Ext.get(this.getEl());
if (el.id != this._target.id) {
if (this._placement == "before") {
el.insertBefore(this._target);
}
else {
el.insertAfter(this._target);
}
this.updateTargetPosition();
var xy = e.getXY();
this._placement = (xy[1] < this._crossOver.y) ? "before" : "after";
}
}
},
endDrag: function(){
var el = Ext.get(this.getEl());
el.applyStyles({
position: '',
width: ''
});
this._target = null;
this._placement = null;
this._crossOver = null;
}
});

Tutorial.dd = function(){
return {

init: function(){
var dz1 = new Ext.dd.DropZone('dd1-ct', {
ddGroup: 'group'
});

var dd11 = Ext.get('dd1-item1');
dd11.dd = new Ext.dd.DDProxy('dd1-item1', 'group');
var dd12 = Ext.get('dd1-item2');
dd12.dd = new Ext.dd.DDProxy('dd1-item2', 'group');
var dd13 = Ext.get('dd1-item3');
dd13.dd = new Ext.dd.DDProxy('dd1-item3', 'group');

}
};
}
();

we suddenly have what we need.
For now this only supports non-floating block elements, but I will extend it to also support floats.

UPDATE 1
This demo is now available at http://kinsey.no/examples/reorderlist/

UPDATE 2
I now have a version supporting float ready and will publish this when I have the time.
There is also a reorderview available using a reading and updating from a standard datastore.

This page contains both secure and nonsecure items.

Do you want to display the nonsecure items?

This, in general, has to do with mixing of content from different security zones in IE, for example Internet and Local, or http and https.

I’ve had my go at Google and there are indeed loads of sites where this, and solutions to it has been brought up, but none of these applied to my application.
To sum it up, most solutions consists of checking the following

• That all URL’s are either consistent (http or https, not a mix) or relative URL’s
• That all iframes or frames written in markup has a src set
• That all iframes or frames created with javascript and added to the DOM has a src set prior to adding
• That all resources resolve and do not generate a 404, (the 404 page is considered local zone)

After checking all of these off, my application was still throwing the same error, and something I had read a long time a go bubbled up.
IE will treat all images that has a relative src set through the DOM as an insecure element!
Therefor my solution was to create a resourceBase variable that I use to prefix all the previously relative paths with.
The simplest way to do this is by:

var resourceBase=window.location.protocol + "//" + window.location.host +"/resources/";

Following is a quick example of a function converting a relative path to an absolute one:

function relativeToAbsolute(_urlToResolve){
if (_urlToResolve.substring(0, 1) == "/") {
_urlToResolve = _urlToResolve.substring(1);
}
var _documentURI = document.location.href.substring(window.location.protocol.length + 2, document.location.href.lastIndexOf("/"));
var _lastIndexOf = null;
while (_urlToResolve.substring(0, 2) == "..") {
_urlToResolve = _urlToResolve.substring(3);
if ((_lastIndexOf = _documentURI.lastIndexOf("/")) != -1) {
_documentURI = _documentURI.substring(0, _lastIndexOf);
}
}
return window.location.protocol + "//" + _documentURI + "/" + _urlToResolve;
}

For some reason I woke up early this morning with a solution to this.
The following code will do all of the above and has the same overhead for all number of signatures.

//returns an overloadable method
Function.CreateOverloaded = function(){
    var overloads = [];
    //creates the overloaded method
    var func = function(){
        var sign = [];
        for (var i=0;i < arguments.length; i++) {
            sign.push(typeof arguments[i]);
        }
        sign = sign.join();
        var func = overloads["(" + sign + ")"];
        if (!func) {throw "No matching signature";}
        return func.apply(this, arguments);
    };

    //method for adding a function with a spesific signature
    func.AddSignature = function(func, sign){
        if (overloads["(" + sign + ")"]){throw "Duplicate signature"};
        overloads["(" + sign + ")"] = func;
    };
    return func;
}

To test it you can use the following code

var myFunc = Function.CreateOverloaded();
myFunc.AddSignature(function(){
    alert("test1");
}, "");
myFunc.AddSignature(function(var){
    alert(var);
}, "string");
myFunc.AddSignature(function(integer){
    alert(integer + "x 5 = " + (integer * 5));
}, "number");
myFunc.AddSignature(function(int1, int2){
    alert(int1 * int2);
}, "number,number");
myFunc.AddSignature(function(string, int){
    alert(string + " equals " + int);
}, "string,number");

myFunct();
myFunc("test2")
myFunc(3);
myFunc(3, 5);
myFunc("five", 5);