Ich selbst habe unterschiedliche Sprachen benutzt oder benutze diese noch. Ob C#, C++, Ruby oder JavaScript, jede Sprache hat Vor- und Nachteile. Doch was mir in den letzten Jahren immer mehr auffällt ist das es nicht auf die Sprache ankommt. Auch auf Frameworks und Tooling möchte ich nicht all zu sehr eingehen, da hat jede Sprache eine breite Basis und auch gute Unterstützung und je nach Einsatzszenario auch dedizierte Frameworks wie z.B. ASP.NET MVC oder Ruby on Rails.

Vielmehr möchte ich auf einen Paradigmenwechsel anhand meiner eigenen Erfahrung eingehen, welcher den Umgang mit API’s drastisch ändern wird.

Do you speak Asynchron?

Unabhängig von der Wahl einer Programmiersprache werden sich viele Teile verschiedener Technologien in Richtung Asynchrone Programmierung ändern. Teilweise hat man solche Dinge heute schon in einzelnen Frameworks drinnen um z.B. Berechnungen in seperaten Tasks zu verpacken und die Aufgaben so auf mehrere Prozessorkerne zu verteilen.

var task = Task.Factory.StartNew( () =>
{
    CallSomeFreakingAlgorithm();
}

// work goes on, we can watch task

Hier wird Asynchronität (C# Code) genutzt um Performance zu steigern indem man die Maschinenressourcen ausnutzt und dem Framework das Verteilen der Aufgabe auf Rechnerkerne bzw. Threads überlässt. Doch asynchrone Programmierung wird auch genutzt um ein performantes oder sagen wir lieber reaktionsfreudiges UI zu erstellen. Das wird primär im Web Umfeld sehr stark genutzt, immmer dann wenn man mit JavaScript per AJAX Aufrufe dynamische Seiteninhalte aktualisiert oder Funktionen aufruft.

$.getJSON( 'http://xyz.de', function( data ) {
    $.each( data, function( key, value ) {
      // do something with the result
    });
});

// do something else

Dieser AJAX Aufruf (per jQuery) wird abgefeuert und weiterer Code kann abgearbeitet werden.

APIs werden Asynchron

Die Muster asynchroner Programmierung finden sich in immer mehr Bibliotheken und APIs wieder. Schreibt man heutzutage eine Anwendung für das Windows Phone in Silverlight so hat man mit asynchronen Aufrufen zu tun. Synchrone Aufrufe gehören der Vergangenheit an wenn es um ein schnelles, bedienbares UI geht. Da liegt es nahe das Funktionalität eines Devices über ein Betriebssystem zur Verfügung gestellt wird, eben auch asynchron angeboten wird.

Der Dateizugriff den man bisher vermutlich meist synchron benutzt hat, ist plötzlich nur noch asynchron anzusprechen.

Doch asynchrone Muster haben auch einen wichtigen Unterschied. Wo man bisher z.B. auf ein Dateisystem synchron zugegriffen hat

// Pseudo Code
var file = fs.Open();
var content = file.ReadToEndAsString();
console.log( content );

und sicher sein konnte das der Inhalt zu dem Zeitpunkt des Zugriffs vorhanden ist, so muss man bei einer asynchronen API entsprechend mit Callbacks arbeiten

// Node.js Code
var fs = require( 'fs' );

fs.readFile( "somefile.txt", function( data ) {
    // callback for input data
});

Das sieht bei diesem einfachen Zugriff auf den Inhalt noch sehr einfach und übersichtlich aus, wird aber durchaus komplexer bei mehreren ineinander verschachtelten Aufrufen.

// Node.js multipart/form-data, taken from Felix Geisendörfer
function upload_file(req, res) {
  req.setBodyEncoding('binary');

  var stream = new multipart.Stream(req);
  stream.addListener('part', function(part) {
    part.addListener('body', function(chunk) {
      var progress = (stream.bytesReceived / stream.bytesTotal * 100).toFixed(2);
      var mb = (stream.bytesTotal / 1024 / 1024).toFixed(1);

      sys.print("Uploading "+mb+"mb ("+progress+"%)\015");

      // chunk could be appended to a file if the uploaded file needs to be saved
    });
  });
  stream.addListener('complete', function() {
    res.sendHeader(200, {'Content-Type': 'text/plain'});
    res.sendBody('Thanks for playing!');
    res.finish();
    sys.puts("\n=> Done");
  });
}

Asynchronität – Nicht Egal!

Ganz gleich mit welcher Programmiersprache man letztlich Anwendungen entwickelt, mit asynchronen Aufrufen umzugehen ist essentiell. Es stellt sich also nicht die Frage ob man zum Beispiel für Windows 8 mit C# / XAML oder JavaScript / HTML5 entwickelt, sondern es ist wichtig mit beiden Sprachen asynchron entwickeln zu können und damit ist nicht die Sprachmöglichkeit gemeint sondern der Umgang als Entwickler mit dieser Sprache.

Die Anwendung ist auf Windows Azure gehostet und hier ist der Link: Star Wars: The Old Republic Mobiler Klassenbrowser.

In der Demo nutze ich jQuery Mobile nur Rudimentär. Ich verwende lediglich CSS Klassen und jQuery Mobile Custom Attribute um das Look & Feel zu bekommen. Die Demo ist als ASP.NET MVC3 Anwendung erstellt, in der nächsten Version von MVC ist jQuery Mobile dann auch gleich Bestandteil des Standardprojekttemplates.

Wer anschauen möchte wie die Demo Anwendung von einer Stillosen weißen Webseite in eine Mobil-freundliche Variante angepasst wird kann sich dieses Video reinziehen.

Im übrigen, ich spiele auf Sith Triumvirate einen Söldner und ja, ich finde 2:30h in der Warteschlange auch ziemlich Blöde!

Sanity Check

Nach dem herunterladen vom SDK habe ich mir die Beispiele angeschaut. Es wird Schritt für Schritt erklärt wie man den Azure Service anlegt, eine Rolle hinzufügt, den Code anpasst und das ganze zuerst im Emulator und dann auch in der Cloud ausführt.

Die Beispiele zeigen wie man mit den Azure Diensten Storage, Tables und Queues arbeiten kann. Lediglich die Möglichkeit einen Diagnose Output zu machen habe ich in den Tutorials vermisst. Ich weiß auch nicht ob im Azure Node Package Module die Implementierung vorhanden ist. Der übliche Weg über console.out funktioniert im Emulator nicht und natürlich auch nicht in der Cloud. Das gilt es noch zu prüfen, ansonsten muss man sich wohl mit dem Azure Table Storage behelfen und selbst wegschreiben.

Socket.IO

Getestet habe ich nun mit Socket.IO, einer Bibliothek die bidirektionale TCP Kommunikation ermöglicht. Hier zu werden, je nach Browser Unterstützung, WebSockets, Long-Polling, Server Side Events oder auch Flash verwendet und der Entwickler hat eine transparente API. Zum installieren der verschiedenen Pakete unter Node.js benutzt man npm. Die aktuelle Node Version unterstützt npm auch auf Windows.

npm install socket.io

Nach der Installation kann man das Beispiel von der Socket.IO Webseite nehmen. Ich habe lediglich zwei Änderungen gemacht. In der server.js - welche einfach nur die app.js umbenannt ist - habe ich den Port angepasst. Da man die Anwendung sowohl im Emulator wie auch in der Cloud ohne Änderungen lauffähig haben will, überlässt man die Portwahl der Windows Azure Infrastruktur.

app.listen( process.env.port );

Die index.html enthält eine kleine Modifikation um die Ausgabe  direkt im Browser zu haben anstatt in der Debugging Console des Browsers.

<html>
<head>
  <script src='/socket.io/socket.io.js'></script>
</head>
<body>
<h1>socket.io demo</h1>
<div id="output"></div>
</body>
  <script>
    var output = document.getElementById( "output" );
    var socket = io.connect( 'http://localhost:81' );
    socket.on( 'news', function( data ) {
      output.innerHTML = JSON.stringify( data );
      socket.emit( 'my other event', { my: 'data' });
    });
  </script>
</html>

Node.js support – checked

Der direkte Node.js Support auf Windows Azure ist ein Riesenvorteil im Vergleich zu einem selbstgestrickten Deployment wie ich es oben schon erwähnt hatte. Das Windows Azure SDK für Node.js erlaubt es einfach Node.js Anwendungen in die Windows Azure Cloud zu deployen, die Commandlets lassen sich in beliebige Buildskripte integrieren und gegen Automatisierungen im Build Prozess hat wohl keiner was. Vor allem die Möglichkeit lokal wie gewohnt zu entwickeln, per npm neue Module zu installieren und im Azure Emulator gleich zu testen, vereinfacht die Entwicklung von Cloud-basierten Diensten ungemein. Ich habe Socket.IO hier getestet, ein weiteres Beispiel wäre Node.js im Zusammenspiel mit MongoDB auf Windows Azure.

Markdown Mode für Visual Studio

Github hat mich als erstes mit Markdown konfrontiert. Seit dem liebe ich es und schreibe auch meinen Blog in diesem Format. Obwohl die Extension schon länger existiert bin ich erst jetzt auf diese Aufmerksam geworden. 

This extension provides support for editing files that use the Markdown syntax. In the current version, it supports the following features:

• Syntax highlighting (for Markdown and HTML)
• A live preview window of the file you are editing
• A rudimentary margin with buttons for showing the preview window and copying the HTMLized version of the file you are editing to the clipboard.

Link: Markdown Mode Extension für Visual Studio

Freckle Time Tracking

Zeiterfassung ist ein wichtiges Thema für viele Entwickler. Vor allem wenn die Zeiterfassung so einfach von der Hand geht wie mit Freckle. Das schöne an Freckle, es lässt sich noch mit Github kombinieren und erstellt bei Bedarf seit kurzem auch Rechnungen, wobei letzteres noch in Beta ist. Freckle kostest Stand heute 12$ im Monat, ob es sich lohnt kann man in 30 Tagen Test herausfinden.

Tracking your time—for your clients, for yourself—doesn’t have to be a dreaded task. Dispense with the preparation, avoidance, and gnashing of teeth. Freckle eliminates all the nonsense between you and your work.

Link: Let’s freckle

Helicon Zoo

Helicon Zoo erlaubt es unterschiedliche Web Frameworks auf dem IIS in einer Shared Hosting Umgebung zu installieren. 

Helicon Zoo is a simple and powerful solution for setting up development and production environment with various web frameworks on Windows systems with IIS. It includes such popular frameworks as Ruby on Rails, Django, Node.js and more. Zoo can be used as a platform for Windows shared technology hosting, as well as a development platform for Windows based workstations. It supports IIS 7, IIS 7.5 and IIS Express and uses Web Platform Installer to provide you a simple tool to deploy applications and entire environments.

Inside: Python 2.7 + pip, Django 1.3, Ruby 1.9.2, Rails 3.0, Perl Strawberry 5.12 and Mojolicious 1.34 

Link: Helicon Zoo

Yahoo! Cocktails

Klingt süffig, verspricht viel. Ein Framework um Anwendungen nahtlos auf dem Desktop und im Web laufen zu lassen. Zusammenspiel von HTML5, Node.js, CSS3 und JavaScript.

Developers, time to geek out. Yahoo! has been working behind the scenes for the past several months on an exciting new technology that we think will deeply impact the web developer community. We call it “Cocktails” and it’s the technology powering Livestand, which we launched today at Product Runway.

“Cocktails” is a mix of HTML5, Node.JS, CSS3, JavaScript and a lot of ingenious, creative mind-bending tricks from Yahoo!’s engineers. Today, we are announcing two Cocktails: Yahoo!’s Mojito, an environment-agnostic JavaScript web application framework, and Yahoo! Manhattan, a hosted platform for Mojito-based applications.

Link: Weiterführende Infos zu Manhatten, Cocktails und Mojito

JavaScript ASCII Raytracer

Dieser hat es mir besonders angetan. Ein Raytracer der ASCII ausgibt. Zwar total Sinnlos, aber irgendwie Saucool!

Link: JavaScript ASCII Raytracer auf Github

Notifier.js

Eine JavaScript Bibliothek um Notifications im Browser anzuzeigen. Die Notifications werden gestackt und entsprechend ausgeblendet. Die Demo Seite zeigt die unterschiedlichen Möglichkeiten.

Link: Notifier.js auf Github

Nodeup – A Node.js Podcast

Node.js ist in aller Munde. Die meisten brauchen es eigentlich gar nicht, trotzdem frickeln viele damit rum. Ja, ich auch, bin halt irgendwie doch Geek. Jetzt gibt es eine Podcast Serie die sich Node.js verschrieben hat: Nodeup. Sechs folgend sind bisher raus.

Link: Nodeup

C++ Reference

Neben JavaScript ist auch  C++ wieder ein wichtiger Bestandteil meiner Arbeit. Da habe ich im Netz gleich eine nette Referenz gefunden die auch C++11 abdeckt.

Feature Auszug der Seite 

Link: C++ Reference

public class EntryData
{
  public string Project { get; set; }
  public string User { get; set; }
  public DateTime Date { get; set; }
}

wird zum Beispiel über diese Controller Action

[HttpPost]
public ActionResult Echo( EntryData newEntry )
{
  return Json( newEntry );
}

in die entsprechende JavaScript Notation umgewandelt

{
  "Project": "hi",
  "User": "kuck",
  "Date": "/Date(1320015600000)/"
}

Das sieht soweit ganz gut aus. Allerdings möchte ich in JavaScript mit der entsprechenden lowerCamelCase Notation arbeiten, des weiteren soll das Datum auch entsprechend in ISO UTC serialisiert werden, das lässt sich mit der Json Funktion standardmässig nicht realisieren.

Nach einiger Recherche habe ich auf Codeplex das Projekt JSON.NET gefunden. In JSON.NET kann die Serialisierung in vielen Bereichen parametrisiert werden. So kann man CamelCase sowie Datumsformattierungen anpassen. JSON.NET ist als Nuget Package verfügbar und lässt sich schnell mittels Install-Package Newtonsoft.Json installieren.

Für die Serialisierung habe ich auf Jason’s Blog (welch Wortspiel) eine eigene ActionResult Implementierung names JsonNetResult gefunden die man einfach in seine Controller Methoden einbinden kann.

Damit sieht die Methode im Controller folgendermaßen aus

[HttpPost]
public ActionResult Echo( EntryData newEntry )
{
  return new JsonNetResult
  {
    Data = newEntry,
    Formatting = Formatting.Indented,
    SerializerSettings = new JsonSerializerSettings
    {
      ContractResolver = new CamelCasePropertyNamesContractResolver(),
      Converters = { new IsoDateTimeConverter() }
    }
  };
}

und das Ergebnis ist mein gewünschtes JSON Format:

{
  "project": "hi",
  "user": "kuck",
  "date": "2011-10-31T00:00:00"
}

Um einen Prozess in Windows Azure zu hosten nimmt man am besten die Worker Role her. Dort wird die Basis gelegt um die Node.js Umgebung samt Anwendung zu starten und einen Port nach außen durchzureichen.

Die Node.js Anwendung

Zuerst zur Demo App für Node.js. Die Anwendung reagiert auf folgende Routen

• / (Redirect auf /info )
• /json (Rückgabe als JSON)
• /info (Info-Text als HTML Rückgabe)
• /form (Eine einfache Eingabemaske)
• /data (Die Ausgabe der /form via POST)

und verwendet hierfür zwei Module. Zum einen node-router um die URL Routen mit Funktionalität zu verknüpfen, zum anderen node-formidable um Postback Daten einer HTML Form einfach auszuwerten.

Normalerweise installiert man Node Module per npm. Allerdings ist das node-router Modul nicht in der npm Registry. Somit habe ich es einfach mittels

git clone git@github.com:creationx/node-router.git node-router

in das Verzeichnis nodemodules_ hineinkopiert. Formidable dagegen ist in der npm Registry und kann mittels

npm install formidable

installiert werden. Damit habe ich folgende Verzeichnisstruktur in meiner Node Anwendung:

- index.js
- node_modules
- formidable
- node-router

In index.js werden zuerst die Module referenziert

var server     = require( "node-router" ).getServer(),
util       = require( "util" ),
formidable = require( "formidable" );

util enthält ein paar praktische Helfer unter anderem um Objekt-Dumps in der Console anzuzeigen

console.log( util.inspect( fields ) );

Das Modul node-router erlaubt es einfach Routen mit den entsprechenden HTTP Verb an Funktionen zu binden. Zum Beispiel

server.get( "/", function( req, res ) {
res.redirect( "/info" );
} );

wird mit der Route “/” und dem HTTP Verb die Funktion verknüfpt in welcher dann ein Redirect auf “/info” erfolgt.

Mit dem Modul formidable kann man einfach Form Daten auswerten und bekommt einen Callback für jedes Formfeld zurück.

var form = new formidable.IncomingForm();
form.on( "field", function( field, value ) {
console.log( field, value );
} );

Das Gesamtlisting von index.js sieht dann folgendermaßen aus:

var server = require( "node-router" ).getServer(),
util = require( "util" ),
formidable = require( "formidable" );
server.get("/", function (req, res, match) {
res.redirect( "/info" );
} );
server.get( "/info", function ( req, res, match ){
res.writeHead( 200, { "Content-Type": "text/html" });
res.write( "<h1>Node.js on Windows Azure</h1>" );
res.write( "<div>A simple demo app using node-router and node-formidable.</div>" );
res.end();
} );
server.get( "/json", function( req, res ) {
res.simpleJson( 200, { name: "Dariusz", email:          "dparys@microsoft.com" });
} );
server.get( "/form", function( req, res ) {
res.writeHead( 200, { "Content-Type": "text/html" });
res.write( "<form method='post' action='/data'>");
res.write( "<label for='eingabe'>Nachricht</label><br/>");
res.write( "<input type='text' name='eingabe' />");
res.write( "<input type='submit' name='Senden' value='Senden'/>");
res.write( "</form>" );
res.end();
} );
server.post( "/data", function( req, res ) {
var form = new formidable.IncomingForm();
// Writing a 200 header cause I'm
// optimistic. Don't do this in production code!
res.writeHead( 200, { "content-type": "text/html" } );
res.write( "<h1>Data from Post</h1>");
form
.on( "field", function( field, value ) {
res.write( "<h3>" + field + "</h3>" );
res.write( "<div>" + value + "</div>"   );
} )
.on( "end", function() {
res.end();
} );
form.parse( req );
} );
server.listen( 80 );

Die Worker Role für Windows Azure

In einem neuen Windows Azure Projekt legt man eine Worker role an. In diese kopiert man nun folgende Dateien

- node.exe
- index.js
- node_modules
- node-router
- package.json
- lib
- node-router.js
- formidable
- package.json
- lib
- file.js
- incoming_form.js
- index.js
- multipart_parser.js
- querystring_parser.js
- util.js

und stellt bei der Eigenschaft Copy If Newer ein. Damit wird die Node Anwendung ins Output Verzeichnis kopiert. Man kann natürlich auch ein Post Build Event einbauen das einfach die Dateien rüberkopiert, so kann man von xcopy profitieren ohne für jede einzelne Datei die Einstellungen zu tätigen.

Um die node.exe in der Windows Azure Umgebung zu starten benutzt man den Hook OnStart() in der WorkerRole Klasse. Mittels Process() wird ein neuer Prozess gestartet und die entsprechenden Umgebungsparameter gesetzt.

public override bool OnStart()
{
process = new Process()
{
StartInfo = new ProcessStartInfo(
Environment.ExpandEnvironmentVariables(
@"%RoleRoot%\approot\node.exe"),
"index.js" )
{
UseShellExecute = false,
CreateNoWindow = true,
WorkingDirectory =
Environment.ExpandEnvironmentVariables(
@"%RoleRoot%\approot\" )
}
};
process.Start();
return base.OnStart();
}

Zum Schluß muss man noch in der Konfiguration der Worker Role einen TCP Port nach außen einrichten. Der Code hierfür kommt von Nathan Totten.

Deployment nach Windows Azure

Der Rest ist reine Formsache. Packages erstellen und nach Windows Azure hochladen,

warten bis der Upgrade durch ist

und final noch den Browser öffnen und schauen ob die Anwendung läuft.

Grundlage gelegt

Damit ist die Grundlage gelegt um Node.js Anwendung auf Windows Azure zu betreiben. Vieles muss man noch von Hand machen. Einen komfortableren Weg kann man mit der Vorgefertigten Windows Azure Rolle SmarxRole nehmen. Steve Marx hat hier neben Node.js zusätzlich Ruby und Python eingebunden und verknüpft das mit einer komfortablen Anwendungsinstallation die direkt aus GitHub oder dem Azure Storage erfolgen kann.

Unter den zahlreichen Modulen die es für Node.js gibt findet man auch eines das den Zugriff auf die Windows Azure Blob Storage und Queue API kapselt. Natürlich sind die großen Service APIs wie Dropbox, Twitter, Facebook, usw. auch vertreten. Einfach mal reinschauen.

The IFRAME element is useful to integrate complete HTML web pages into your own web page. Using theIFRAME element is straightforward. You specify the tag and link to the source of content you want to embed into your webpage.

<iframe src="somecontent.html"></iframe> 

A lot of today’s websites are using the IFRAME tag to integrate content. This can be as simple as hosting advertisement as a seperate entity and as complex as providing an email service showing user generated HTML mails.

Whatever your scenario is to use the IFRAME element tag, you should know that there are some valid security concerns to host content this way.

A black box

Embedding content with an IFRAME is like hosting an party announced publicly on Facebook. You think you know who you have shared your annoucement, but you have no idea who reshared and who will come. The same is true for framing content. You know what you are referencing but you have no idea how the site will evolve in the future. This is true for the content of the page you include as well as for the functionality of the page.

Security concerns using iframe

The source of content is a regular HTML page with all options you have in HTML. The browser handles the page like any other regular web page. Forms can be used to retrieve user input, scripts can be executed, the page can navigate within the browser window, browser plugins can be executed – you have no control what the hosted content will do. At least there is one mechanism in place by default which prevents some kind of attacks. The cross-domain policy.

Rehosting content from another domain

If the hosted content is coming from another domain, cross-domain policy comes into play and is prohibiting the foreign content to access the parents document object model.

The embedded page is not able to read for instance cookies or the browser’s local storage for the hosted domain. But there are still risks left. Such hosted content can still renavigate on the top level and display the same website like the user would expect, trying to phish some confidential information from the user. Or try to retrieve more information from the user through an form which is styled as it would belong to the same page. It is still a big risk.

Rehosting content from the same domain

The case for rehosting content from the same domain is even worse. No security restrictions are applied as the content is coming from the same domain. Embedded content is able to access the complete loaded browser DOM and manipulate everything. Also content on the same domain should be safe, but there is still the risk of user generated content if such will be rehosted in the IFRAME

A sandboxed approach

All those valid concerns haven’t been addressed for a long time by standards body. Therefore Microsoft provided an proprietary implementation of IFRAME security in Internet Explorer 8. This implementation was due the fact of a missing W3C standard and showed the necessity of securing the host from framed content. Others picked up Internet Exporers implementation and discussed it as baseline for their browsers as well. Today’s Internet Explorer implementation is based on the W3C IFrame Sandbox Attribute.

The sandbox attribute was introduced with HTML5. Its purpose is to secure the content host of the embedded resource. To apply it just add it as empty attribute to the IFRAME element.

<iframe sandbox src="http://somewebsite.com/default.html"></iframe> 

That’s it. The IFRAME sandboxed content is rehosted in the browser with the following restrictions:

• Plugins are disabled. Any kind of ActiveX, Flash or Silverlight Plugin will not be executed.
• Forms are disabled. The hosted content is not allowed to make form post back to any target.
• Scripts are disabled. JavaScript is disabled and will not execute.
• Links to other browsing contexts are disabled. An anchor tag targeting different browser levels will not execute.
• Unique origin treatment. All content is treated under an unique origin. The content is not able to traverse the DOM or read Cookie information.

This means that even content coming from the same domain is treated with the cross-domain policy, as each IFRAME content will be viewed as an unique origin.

Embedded content is just able to display information. No further actions can be done inside the iframe which could compromise the hosting website.

Checking for the sandbox attribute

We know that an IFRAME is an open gate. We know that the sandbox attribute is locking down security of hosted content. The decision is clear: Use IFRAME elements just with the sandbox attribute! You can check if the browser supports the IFRAME sandbox attribute with a simple check in JavaScript:

if( "sandbox" in document.createElement( "IFRAME" ) ) { // render the iframe element... } else { // embed content through other ways, // as the browser does not support the sandbox } 

If it is the case just use it. If not try to embed the content through other ways or just display the user a message that he should upgrade to a modern browser.

Customizing the Sandbox

There are cases where we need some level of customization on the restrictions. This is possible with the sandbox attribute. Several attribute values relax the standard sandbox policy.

allow-forms

If you want to enable forms post back within the IFRAME element you just specify the allow-forms value for the sandbox attribute.

<iframe sandbox="allow-forms" src="xyz.html"></iframe> 

If this value is present the embedded page is allowed to post back using a form submit within the frame.

allow-scripts

JavaScript is a powerful language and is often used to have dynamic interactions on the client side without resending information to the server. But that power brings also risks when rehosting foreign web pages. Therefore, think if you really want to enable JavaScript in IFRAME scenarios. Especially when the content is from an unknown source.

Enabling JavaScript is done through the allow-scripts value.

<iframe sandbox="allow-scripts" src="xyz.html"></iframe> 

allow-same-origin

Per default an IFRAME page from the same domain has the possibility to access the parent’s document object model. With the sandbox attribute in place the page will be treated not under the same origin. This page has no access to the resources even when coming from the same domain.

To reenable same origin treatment in an sandboxed scenario you have to specify the allow-same-orignattribute.

<iframe sandbox="allow-same-origin" src="xyz.html"></iframe> 

The value itself is not very helpful as you need some script capabilities to make use of it. Here is an example. If you want to access the local storage of the current domain like in this code snippet

function loadFromStorage( key ) { if( localStorage ) { return localStorage.getItem( key ); } }); 

you also need the allow-scripts value.

<iframe sandbox="allow-scripts allow-same-origin" src="xyz.html"></iframe> 

Now access works. But be warned:

Allowing scripts and same origin in the same sandbox enables the hosted content to manipulate the attributes of the sandbox and remove further restrictions.

allow-top-navigation

Per default anchor targeting other browsing contexts are ignored and not executed. This protects the website hosting the IFRAME content from being replaced by the hosted content. The following anchor link will not be executed in the default sandbox

<a href="xyz.html" target="_top">Click me</a> 

as the target would replace the complete web page.

Therefore relaxing this policy is also just recommended if you trust the content you host.

<iframe sandbox="allow-top-navigation" src="xyz.html"></iframe> 

ms-allow-popups

Sometimes it is useful to allow embedded content opening up new popup windows. A perfect example is using mapping services like Bing Maps. When embedding bing map some more functionality like directions or information about the place shown can be looked up in popup windows. Due to the fact that the sandbox is prohibiting this, there is a setting in Internet Explorer 10 which enables popups without compromising the sandbox. The following code shows how to setup ms-allow-popups.

<iframe sandbox="ms-allow-popups" src="xyz.html"></iframe> 

When setting this value embedded sites are able to display information in a new window

<a href="xyz.html" target="_new">Show Info</a> 

Putting it all together

You can combine several attribute values on one sandbox, for instance, you want to enable forms postback, top-level navigation and JavaScript, just specify

<iframe sandbox="allow-forms allow-top-navigation allow-scripts" src="xyz.html"></iframe> 

It is also good to know that the sandbox behaves correctly when used in hierachical situations – several nested iframes with different sandbox attribute values. The top level sandbox always dominates down the hierachy. For instance if the top IFRAME sandbox is just allowing forms you can’t extend the sandbox in an IFRAME below to allow scripts.

You can play around with the HTML sandbox in this demo.

You can also download a copy of this demo from Github to play around with it. To enable the form postback demo just open the project folder in WebMatrix and start the project from there.

Conclusion

The sandbox attribute is the key to use the IFRAME element in a secure way on your website. You should check if the browser is supporting the HTML sandbox and display the content just in that case. Start today, download a modern browser like Internet Explorer 10 Platform Preview 2 and get familiar with the sandbox by reading the IE developer guide. This is a step towards a more secure web and modern browsers are ready to sandbox embedded content.

Bilder kann man mittels des img Elements platzieren und mit einer entsprechenden Textpassage beschreiben. Das könnte z.B. so aussehen:

<img src="barca-vs-real.jpg"/>
<p>El Classico deklassierend, der FC Barcelona gegen Real Madrid - Endstand 5:0</p>

El Classico deklassierend, der FC Barcelona gegen Real Madrid – Endstand 5:0

Figure und Figcaption

Es gibt allerdings eine bessere Möglichkeit. Mittels Figure und Figcaption kann man Inhalte semantisch zusammenfassen. Grafik und Untertitel bilden so eine Einheit.

<figure>
<img src="barca-vs-real.jpg"/>
<figcaption>
El Classico deklassierend, der FC Barcelona gegen Real Madrid - Endstand 5:0
</figcaption>
</figure>

Das Ergebnis würde allerdings in der Ausgabe identisch sein wie oben, mit dem Unterschied das man es jetzt einfacher Stylen kann. Denn figure und figcaption können nun als Stylingcontainer genutzt werden.

Die Kachel bauen

Um nun das gleiche Look & Feel zu bekommen benötige ich noch mehr Dinge. Zum einen hat die Kachel neben dem eigentlichen Bild-Inhalt auch noch ein Icon, zum anderen neben dem Beschreibenden Text auch noch einen Hinweis auf die Nummer des Fotos.

Für das Bild das ich verwende möchte ich ein Foto Icon verwenden und das Datum der Publizierung. Daraus ergibt sich nun folgendes HTML:

<figure>
<img src="barca-vs-real.jpg"/>
<figcaption>
<img src="images/camera.png"/>
<div>El Classico deklassierend, der FC Barcelona gegen Real Madrid - Endstand 5:0</div>
<time pubdate="2011-08-05">5. August 2011</time>
</figcaption>
</figure>

Das Ergebnis ist nach wie vor weit von der eigentlichen Kachel weg, die Grundlage für das Styling ist jetzt aber gelegt. Anmerkung: Das Kamera Icon ist weiß und deshalb momentan noch nicht zu sehen.

CSS Anwenden

Ich schätze Designer benutzen grafische Tools um Layouts für Webseiten zu erstellen. Entwickler tendieren meist dazu direkt Code zu schreiben, ich für meinen Fall habe das CSS von Hand erstellt. Wer jedoch mehr Code-basiert CSS schreiben möchte, dem würde SASS empfehlen, eine Meta-Sprache um CSS zu beschreiben und zu erstellen.

body
{
font-family: "Segoe WP";
font-size: 1em;
}
figure
{
margin: 0;
float: left;
position: relative;
}
figure > img
{
width: 100%;
}
figcaption
{
margin: 0;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
vertical-align: text-bottom;
background-color: DarkRed;
color: White;
max-height: 20%;
}
figcaption div
{
font-size: 1.2em;
}
figcaption img
{
float: left;
padding: 1%;
}
figcaption time
{
float: right;
padding-right: 1%;
font-size: 0.8em;
}

Das Resultat sieht jetzt fast aus wie eine Kachel aus dem Windows 8 Video:

Eine Referenz als Grafik, falls die Schriftart nicht auf Eurem Rechner ist.

Ich bin Entwickler

Yep, Entwickler und kein Designer. Dementsprechend hat das obige CSS auch noch seine Tücken. Ist zum Beispiel der beschreibende Text kürzer so wird das Erscheinungsdatum nicht unten rechts sondern rechts mittig angezeigt. Auch das Verändern des Browserfensters hat Einfluß auf den eigentlichen Inhalt, sowie die Tatsache das ich die Windows Phone 7 Schrift verwende welche auf den meisten PC’s nicht vorhanden sein dürfte.

Trotzdem ist es recht einfach die Shell Elemente nachzubauen, ich habe auf Github Spaßeshalber ein Projekt angelegt welches ich ab und zu aktualisieren werde.

Node.js is an event-driven I/O server-side JavaScript environment based on V8. It is intended for writing scalable network programs such as web servers. It was created by Ryan Dahl in 2009

Serverseitiges JavaScript

Node.js programmiert man mit JavaScript. Die API ist sehr low-level, sprich, viel Infrastruktur die man von anderen Webstacks gewöhnt ist, wie z.B. vom IIS muss man hier erst selbst schreiben. Doch es gibt schon eine recht rege Community die kontinuierlich neue Packages erstellt und pflegt.

Ein einfacher Webserver

Nach dem herunterladen von Node kopiert man die Node.exe in ein beliebiges Verzeichnis und startet dann aus diesem seine Projekte. Ein paar Grundlegende APIs kommen schon mit Node.js mit, sodass man einen HTTP request mit wenigen Zeilen Code bedienen kann.

var http = require( "http" );
function onRequest( request, response ) {
response.writeHead( 200, { "Content-Type" : "text/plain" } );
response.end( "Hello aus Node.js" );
}
http.createServer( onRequest ).listen( 4567 );
console.log( "listening on http://localhost:4567" );

Die Datei speichert man unter einem beliebigen Namen (bei mir first-node-app.js) im gleichen Verzeichnis wie die node.exe und gibt einfach folgenes ein:

node first-node-app.js

Mit dem Browser auf http://localhost:4567 navigieren und der Text erscheint.

Eigene Module

Um Funktionalität wiederzuverwenden kann man sich Module erstellen. Diese werden in eigenen JavaScript Dateien abgelegt und können über require eingebunden werden. Ein Modul könnte z.B. so aussehen:

exports.message = function() {
return
"<!doctype html>" +
"<html>" +
"   <head>" +
"       <title>Served by node.js</title>" +
"   </head>" +
"   <body>" +
"       <h1>Hello, world.</h1>" +
"       <h2>brought to you by node.js</h2>" +
"   </body>" +
"</html>";
};

Dieses Modul unter welcome.js gespeichert kann nun direkt aus dem first-app.node.js im Code referenziert und verwendet werden:

var http = require( "http" ),
welcome = require( "welcome" );
function onRequest( request, response ) {
response.writeHead( 200, { "Content-Type" : "text/html" } );
response.write( welcome.message() );
response.end();
}
http.createServer( onRequest ).listen( 4567 );
console.log( "listening on http://localhost:4567" );

Andere Pakete installieren

npm ist der Node Package Manager welcher für Windows noch nicht zur Verfügung steht. Trotzdem kann man diese Pakete verwenden. Die Schritte sind einfach

1. Zip-Paket herunterladen
2. Im Anwendungsverzeichnis auspacken und so umbenennen das es genauso heisst wie das referenzierte JavaScript Modul.
3. Im Code referenzieren und benutzen

Somit lässt sich z.B. das node-router Paket von GitHub herunterladen und benutzen.

var router = require( "node-router" ),
welcome = require( "welcome" );
var server = router.getServer();
server.get( "/", function( request, response ) {
response.simpleHtml( 200, welcome.message() );
});
server.listen( 4567, "localhost" );

Die console.log Ausgabe kann man sich sparen, da der Router entsprechend Ausgaben erzeugt.

Weitere Informationen

Für Tutorials und Node.js spezifische Blogs gibt es hier einen guten Einstieg. Herzlich Willkommen Node.js!

Ich verschenke diese, man muss allerdings eine Kleinigkeit tun. Einfach in den Comments einen Link zu einem JavaScript relevanten Post den man selbst verfasst hat oder einen Link auf sein eigenes JavaScript relevantes Projekt auf GitHub / Codeplex hinterlassen. Ich werde dann über die Comments gehen und Euch direkt anschreiben. Falls der Referenzlink keine Kontaktdaten enthält, einfach zusätzlich mir eine Email über das Kontaktformular schreiben.

Erwähnen sollte ich noch das auf der Rückseite des Shirts ein Microsoft Logo am Nacken platziert ist.

Am 11. August verschicke ich die Shirts dann.