Timo Korinth

2 Meter, 2 Mark

13.04.2015
by Timo Korinth
0 comments

CSS 3D Sphere

Playing around with some CSS 3D transitions and animations to create an animated 3D sphere with nothing more than plain CSS (no JavaScript):

See the Pen 3D CSS Sphere by Timo Korinth (@TimoKorinth) on CodePen.14074

The “magic” is to use some flat div’s with border-radius: 50%; to create circles and rotate them to form up a sphere. After this I just needed to start an infinite CSS animation which changes the rotation for all axis.

25.02.2015
by Timo Korinth
0 comments

Don’t Be Afraid of the Dark (AngularJS)

BASTA_SE_15_Speakerbutton

If you talk to other (.NET) developers and confess that you are doing HTML5, JavaScript and AngularJS development more than .NET and WPF by now, you’ll earn laughter and compassion. But why is that and what can we do about this? In my Session on the BASTA! Spring (26.02. @17:30h) I’ll try to answer these questions from my own experience as a former .NET developer. The one thing I can say is: Don’t be afraid of HTML5, JavaScript and Co.
I’m looking forward to see you there.
UPDATE:
Download my Flexbox demo project here: AngularJS Flexbox Demo

06.12.2014
by Timo Korinth
0 comments

UI-Framework in AngularJS

GUIDesignLogo

Next week (09. – 10. Dec) I will talk about my thoughts on an UI-Framework written for AngularJS on the GUI & Design Conference in Berlin. Based on my recent work in some huge AngularJS projects I created a structure for controls and containers which can be used to implement a custom UI-Framework based on directives and styles. What a UI-Framework is an how it can help you develop and maintain huge software products is the main goal of my session. Hope to see you there.

UPDATE:

Take a look at my slides: UI Framework AngularJS (in german)

22.09.2014
by Timo Korinth
0 comments

See you on BASTA! 2014

Today the BASTA! 2014 starts and we from MAXIMAGO will be there the whole week. If you would like to try the new Oculus DK2 or talk about UX, WPF, HTML5, JavaScript development, meet us at the MAXIMAGO stand.

Beside this, on Wednesday and Thursday I’ll talk about Cross-platform development and Control development in WPF and HTML5 (AngularJS):

I’m looking forward to meet you there ;-)
BASTA! Herbst 2014 Speakerbutton 1

15.04.2014
by Timo Korinth
0 comments

Understanding routing in Ember.js

One of the first things you will come across in Ember development is the routing mechanism. If’ve had a hard time figuring out the concept and differences to other routing approaches until I really understand the benefits of the Ember routing provider. To help you getting started with Ember development, I got some key insights to share with you:

  1. The overall concept is Convention over Configuration
    • That also means that Ember will generate classes (e.g. Controller, Routes etc…) for you, if you do not explicitly define them. That is especially true if you define routes: If you just specify the route name, Ember will automatically create an appropriate route, controller and (empty) template for you. To override the default behavior, you can create one of these objects (creating subclasses) and hook up your own code.
  2. Think of routes as application states
    • It is important that you fully understand the whole concept of ember routing. The main goal (in contrast to many other routing frameworks) is to define application states and make them additionally available through a URL.
    • Route = State + URL
  3. Use of nested routes
    • You can’t nest routes but resources. The important thing: A route nested under a resource will get (by convention) the name of its parent resource + its own name. BUT a resource nested under a resource will just get its own name.

To clarify the last point, here’s an example. Take this route / resource structure:

this.resource('IdentityManagement', function () {
    this.resource('Identities', function () {

        this.resource('Identity', { path: '/:id' }, function () {
            this.route("Edit");
        });
        this.route("New");

        this.resource('Visitors', function () {
            this.resource('Identity', { path: '/:id' }, function () {
                this.route("Edit");
            });
            this.route("New");
        });

        this.resource('Void', function () {
            this.resource('Identity', { path: '/:id' }, function () {
                this.route("Edit");
            });
            this.route("New");
        });

        this.resource('SalesTeam', function () {
            this.resource('Identity', { path: '/:id' }, function () {
                this.route("Edit");
            });
            this.route("New");
        });
    });
});

This structure will lead to the following routes (a subset of all routes that will be implicitly be created by Ember):

App.IdentityManagementRoute = Ember.Route.extend({
    model: function (param) {
        return App.Contact.find();
    }
});

App.IdentitiesRoute = Ember.Route.extend({
    model: function (param) {
        return App.Contact.find();
    }
});

App.VoidRoute = Ember.Route.extend({
    model: function (param) {
        return App.Contact.find();
    }
});

App.IdentityEditRoute = Ember.Route.extend({
    model: function (param) {
        return App.Contact.find();
    }
});

29.03.2014
by Timo Korinth
0 comments

Change WebAPI REST output format from XML to JSON

The default output format of a WebAPI webservice is XML. To change this to JSON format, you have to manually remove the media type “application/xml” from the configuration of the supported media types. Otherwise it will always use the default xml media output format.

Default xml service output:

<ArrayOfContact xmlns:i="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.datacontract.org/2004/07/Siemens.SiveillanceShellServer.Model">
<Contact>
<Id>1</Id>
<Name>Timo Korinth</Name>
</Contact>
<Contact>
<Id>2</Id>
<Name>Han Solo</Name>
</Contact>
<Contact>
</ArrayOfContact>

JSON output format:

[{"Id":1,"Name":"Timo Korinth"},{"Id":2,"Name":"Han Solo"}]

To change this, add these two lines to your server configuration:

var appXmlType = config.Formatters.XmlFormatter.SupportedMediaTypes.FirstOrDefault(t => t.MediaType == "application/xml");
config.Formatters.XmlFormatter.SupportedMediaTypes.Remove(appXmlType);

The complete server code could look like this:

class Program
{
    static readonly Uri _baseAddress = new Uri("http://localhost:60064/");
 
    static void Main(string[] args)
    {
        // Set up server configuration
        HttpSelfHostConfiguration config = new HttpSelfHostConfiguration(_baseAddress);
 
        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
 
        var appXmlType = config.Formatters.XmlFormatter.SupportedMediaTypes.FirstOrDefault(t => t.MediaType == "application/xml");
        config.Formatters.XmlFormatter.SupportedMediaTypes.Remove(appXmlType);
 
        // Create server
        var server = new HttpSelfHostServer(config);
 
        // Start listening
        server.OpenAsync().Wait();
        Console.WriteLine("Web API Self hosted on " + _baseAddress + " Hit ENTER to exit...");
        Console.ReadLine();
        server.CloseAsync().Wait();
    }
}