Blog

Bring your own React

Wednesday 13 July 2016

React is a a great UI library from Facebook that works well for creating fast browser based user interfaces. Working with it is quite easy. Once you learn the basics you can be quite productive. But to create great applications it is helpful to understand some of the internals of React. But that is where things become a bit more complex. The React source code is not easy to understand. There are a lot of performance optimizations that make code harder to read. Also there are  a lot of browser...

Introducing the React Tutorial

Monday 09 May 2016

React is hot and it seems that almost every front-end web developer wants a piece of it. Not surprising maybe because Facebook created and open sourced React. And React not only powers the Facebook website but also many others like Netflix and Airbnb. Because I have been using and teaching React for the last year I decided to try doing things a bit bigger. If you want to learn React I want to help you with a series of online video tutorials. Each video covers one part and the whole series will...
Yesterday I had some fun doing a session about running an ASP.NET Core application on a Linux based Docker container at the GET.NET conference in Łódź, Poland. The slides can be found here, the Docker image here and the sample code here.   Enjoy

Turbocharging Docker build

Tuesday 01 March 2016

Building a Docker image can take a bit of time depending on what you have to do. Specially when you have to do something like DNU Restore, DotNet Restore, NPM Install or Nuget Restore builds can become slow because packages might have to be downloaded from the internet. Take the following Dockerfile which does a DNU Restore. FROM microsoft/aspnet:1.0.0-rc1-update1-coreclrMAINTAINER Maurice de Beijer <maurice.de.beijer@gmail.com>COPY . ./app WORKDIR ./appRUN dnu restoreEXPOSE 5000CMD...

Docker, From zero to hero

Friday 26 February 2016

Yesterday I did a presentation for the dotNed users group in the Netherlands. The slides can be found here on SlideShare. The demo code here on GitHub and the demo container image is on the Docker hub here. Thanks to Centric for sponsoring the event.

JavaScript functional goodness

Monday 14 December 2015

Using some functional principals and using immutable data can really make your JavaScript a lot better and easier to test. While using immutable data in JavaScript seems like something really complex it turns out is really isn’t that hard to get started with if you are already using Babel. And while libraries like Immutable.js are highly recommended we can start even simpler. Babel does a lot of things for you as it lets you use all sorts of next generation JavaScript, or ECMAScript 2015 to be...
Note: This post is based on ASP.NET 5 Beta8, the samples might not work for you anymore Docker has becoming a popular way of hosting Linux based applications the last few years. With Windows Server 2016 Docker containers are also coming to Windows and are likely going to be a popular way of hosting there as well. But as Windows support is just in CPT form right now and ASP.NET is also moving to Linux with the CoreCLR I decided to try and run an ASP.NET web site on a Linux based container.  ...

What is the right level of maturity

Monday 02 February 2015

In my previous blog post I explained about the Data Storage Maturity Model and how you would get a much more mature and capable application if you used Event Sourcing. That blog post did bring up some interesting question.   Should I always use Event Sourcing? Given that Event Sourcing was at the top of the pyramid you could conclude that you should always aim for the the top and use Event Sourcing. Aiming high is a noble cause and sounds like the right thing but it turns out that it isn’t that...

Data Storage Maturity Model

Tuesday 20 January 2015

There are many ways of storing data when developing applications, some more mature and capable than others. Storing data of some sort or another in an application is common. Extremely common to be exact as almost every application out there needs to store data is some way or another. After all even a game usually stores the users achievements. But it’s not games I am interested in. Sure they are interesting to develop and play but most developers I know are busy developing line of business...

Speeding up your AngularJS applications

Saturday 20 December 2014

In general AngularJS applications are quite fast, specially when compared to more traditional browser based applications that constantly post back to the server. However there are always a few things that will help performance and make an application even faster.   Disabling Debug Data Normally AngularJS adds several things like CSS classes and some scope related properties to DOM elements. This is not really needed to run the application and is really only done to help development tools like...
Testing AngularJS directives usually isn’t very hard. Most of the time it is just a matter of instantiating the directive using the $compile() function and interacting with the scope or related controller to verify if the behavior is as expected. However that leaves a bit of a gap as most of the time the interaction between the directives template and it’s scope isn’t tested. With really simple templates you can include them in the template property but using the templateUrl and loading them on...

SDC 2014 – Slides and Samples

Tuesday 02 December 2014

Online demo: http://rawstack.azurewebsites.net/ Source code: https://github.com/mauricedb/SDC-2014 https://github.com/mauricedb/RawStack
There are two ways to use the angular.module() function. There is the call with one parameter, that returns an existing module and there is an option of using two parameter which creates a new module. The second way, where a new module is created, is perfectly fine and should be used. However the first option, where an existing module is loaded should be considered and anti pattern in most cases and should not be used unless there is an exceptional and very good reason.   What is wrong with...
Managing JavaScript dependencies in the browser is hard. Library scripts typically create global variables and functions. Other scripts now depend on those global objects to do their work. This works but in order to load all required scripts we have to add <script> elements to our HTML, making sure to add them in the right order, and basically know what each exposes. The problem Consider the following client side code: 1: // Print a message 2: utils.print("Hello");   This depends on another...
As with many other things in JavaScript Automatic Semicolon Insertion is usually not a problem but it can occasionally bite you if you are unaware of it. What Automatic Semicolon Insertion does is really simple. It basically boils down to semicolons being optional in JavaScript and the parser  injecting them when it is appropriate. That might sound very nice, after all you can leave semicolons out and the right thing will happen. For example the following code, without a single semicolon, is...

Updated RSS feed for blog posts

Tuesday 29 July 2014

Just so you are aware, the URL with the RSS feed for my blog has changed. Please use the following URL now: http://blogs.msmvps.com/theproblemsolver/feed/   Apologies for the inconvenience.
Another item of things every JavaScript developer should know is how comparisons work. Just like with some of the other JavaScript, or I should really say ECMAScript, features anything you know about C# or Java could actually be misleading here.   To == or to === One of the weird things is there are actually two comparison operators in JavaScript, the double and the triple equals. The == is called the equals operator, see section 11.9.1 of the ECMAScript standard, and was the original equality...
In a previous blog post I demonstrated how to denormalize the RavenDB sample database and use the DenormalizedReference<T> and INamedDocument types from the RavenDB documentation to make life really sweet. That leaves us with one small problem and that is that the original sample database doesn’t work with our improved document design. With the sample database, small as it is, loading all document as a dynamic type, converting them and saving them would be easy enough but in a real database...

Denormalizing data in RavenDB

Tuesday 01 July 2014

One of the things with RavenDB, or NoSQL document databases in general, is that you don’t do joins to combine data. Normally you try to model the documents you store in such a way that the data you need for most common actions is stored in the document itself. That often means denormalizing data. When you first get started with document databases that feels strange, after all with relational databases we are taught to normalize data as much as possible and not repeat the same values. Where...
The slides from my AngularJS talk at the GNH DevDays AngularJS = Browser applications on steroidsfrom Maurice Beijer   The sample code can be found here.   Enjoy!

To SPA or not to SPA

Wednesday 23 October 2013

Index:Getting started with AngularJSCreating an AngularJS ControllerThe AngularJS $scope is not the MVC ModelUsing repeating elements in AngularJSFiltering the data in an AngularJS ngRepeat elementUsing the AngularJS FormController to control form submissionCreating an AngularJS DirectiveUsing the DOM in an AngularJS applicationTo SPA or not to SPA   Creating Single Page Applications, usually abbreviated to SPA, is getting more and more popular these days. There are some popular applications...

LIDNUG & DevelopMentor Practical HTML5

Thursday 17 October 2013

These are the slides and sample code for my Practical HTML5 session for the LIDNUG.   Practical HTML5from Maurice Beijer   You can watch the recording on YouTube here.     Enjoy!
One common problem with displaying local dates an times in a browser is that you get no information about the current time zone a browser is in. The browser will tell you the preferred language through the Accept-Language HTTP header but there is no such header for the users time zone. This means that it is easy enough to display a DateTime in the servers time zone but not in the users time zone. Now if your server is in the same time zone as your users this isn't much of an issue.. However...

LIDNUG: Practical HTML5

Monday 07 October 2013

On Wednesday, October 16 I will be presenting an online session on practical HTML5 for the Linked .Net Users Group.   More info about this free event as well as the registration form can be found here.   Hope to see you there!
Next week Wednesday, September 25, 2013, I will be presenting an online session for the Linked .Net Users Group.   More info about this free event as well as the registration form can be found here.   Hope to see you there!

Using the DOM in an AngularJS application

Thursday 05 September 2013

Index:Getting started with AngularJSCreating an AngularJS ControllerThe AngularJS $scope is not the MVC ModelUsing repeating elements in AngularJSFiltering the data in an AngularJS ngRepeat elementUsing the AngularJS FormController to control form submissionCreating an AngularJS DirectiveUsing the DOM in an AngularJS applicationTo SPA or not to SPA   Even though you should not manipulate the DOM in an AngularJS application but leave that up to AngularJS itself to do there are certainly places...
Index:Getting started with AngularJSCreating an AngularJS ControllerThe AngularJS $scope is not the MVC ModelUsing repeating elements in AngularJSFiltering the data in an AngularJS ngRepeat elementUsing the AngularJS FormController to control form submissionCreating an AngularJS Directive   In the previous  posts I showed how to get started with AngularJS and use some of the basic AngularJS directives to data bind. In these examples I uses a really simple single element to bind to. However in...
Index:Getting started with AngularJSCreating an AngularJS ControllerThe AngularJS $scope is not the MVC ModelUsing repeating elements in AngularJSFiltering the data in an AngularJS ngRepeat elementUsing the AngularJS FormController to control form submissionCreating an AngularJS Directive   In the previous post I showed how to create and use an MVC Controller in AngularJS to manage the logic of an application. In this post I showed how to use the $scope variable that is passed into the...

Creating an AngularJS Controller

Wednesday 10 April 2013

Index:Getting started with AngularJSCreating an AngularJS ControllerThe AngularJS $scope is not the MVC ModelUsing repeating elements in AngularJSFiltering the data in an AngularJS ngRepeat elementUsing the AngularJS FormController to control form submissionCreating an AngularJS Directive   In the previous blog post I showed how to get started with a really minimal AngularJS application. Even though the app could multiply two numbers it could hardly be called useful and as it turns out that...

Getting started with AngularJS

Friday 05 April 2013

Index:Getting started with AngularJSCreating an AngularJS ControllerThe AngularJS $scope is not the MVC ModelUsing repeating elements in AngularJSFiltering the data in an AngularJS ngRepeat elementUsing the AngularJS FormController to control form submissionCreating an AngularJS DirectiveUsing the DOM in an AngularJS application     One of the nicer JavaScript frameworks out there to work with must be AngularJS. Now there are quite a few other ones out there and I have used a number of them...

SignalR and camelCase data contracts

Thursday 14 March 2013

I really like SignalR for its capability to do push notifications from the server to the client. But there are a few thing in SignalR I am not quite happy with. Fortunately SignalR is really pluggable and you can change it to suit your needs. :-)  PascalCase versus camelCase One thing I am not really happy about is the fact that all data is send over the wire with a request as is. And with SignalR the server tends to be C# where the convention is to have methods and properties in PascalCase....

Using optimistic concurrency with RavenDB

Wednesday 30 January 2013

Whatever database your are using, relational or document, there is one thing you can be certain of as soon as you get a second user of the system and that is concurrency conflicts. It may not happen often but eventually it will happen that two users load the same document, make some changes to it and save it back to the database. There are several ways of dealing with these kind of concurrency problems:Just ignoring it and letting the second users changes overwrite the first onesWhile this...

Paging through data in RavenDB

Monday 28 January 2013

RavenDB has a very nice feature in it being safe by default and returns just 128 documents. Now you can override these safe defaults but it is very unwise to do so. And even if you decide to do so are you really going to show a million customers to your user at the same time? I would guess not as the user would not be really happy with the response or the speed of it. In most cases using paging is a much better solution.  Paging through a RavenDB result set It turns out that paging through a...

Practical HTML5

Friday 25 January 2013

The slides from my presentation on Practical use of HTML5 for the DotNed user group.  Practical html5from Maurice Beijer     The source code can be found here.   There is an online demo version hosted on Azure websites here.   Enjoy!

Praktisch aan de slag met HTML5

Tuesday 08 January 2013

Donderdag 24 januari 2013 doe ik weer een presentatie over HTML5 voor de DotNed gebruikersgroep.   Op dit moment is HTML5 een van de grote hypes. Door de HTML5 standaard te gebruiken gaan we alles anders doen op het web. Uiteraard gaat alles goed en vanaf nu werkt alles gewoon zoals verwacht op alle browsers hetzelfde. En zo zijn er nog wel meer fabeltjes. Zoals iedereen, die al langer voor het web ontwikkelt, weet dat dit tot nu toe nog nooit het geval is geweest. En zelfs als dat in een...

Enabling Tincr on Windows 8

Friday 21 December 2012

Some time ago I posted a blog post on Tincr and live reloading of CSS/JavaScript in Google Chrome. This works really well with one exception, on Windows 8 it will not install. When you try Chrome shows the following error message: This application is not supported on this computer. Installation has been disabled. The Chromium team has acknowledged this as a bug but it still needs to be fixed.  The interim solution Fortunately Lauricio Su came up with a nice workaround and posted it in the...

Querying RavenDB databases

Monday 17 December 2012

As we have seen in previous blog posts getting data from a RavenDB database is easy. Either use the IDocumentSession.Query<T>() function to load a series of documents or the IDocumentSession..Load<T>() function to load a document using its identity. However sometimes we want more control over what we want to load. It turns out this is rather easy as the IDocumentSession.Query<T>() function returns an IQueryable<T>, actually it returns a IRavenQueryable<T> to be exact but more about that another...

Using RavenDB with Azure websites

Monday 10 December 2012

In a previous post I explored various options of hosting RavenDB. While using RavenDB as a Windows Service or hosted in IIS is probably the best way to go in most cases there are a number of cases where the embedded option is great. And one of the places where I really like the embedded option of hosting RavenDB is when doing simple standalone websites. And with the new Azure website option that is a great way to host them.   The code is real straightforward and just like before. I am using a...

Different options for hosting RavenDB

Wednesday 05 December 2012

In the previous blog posts about RavenDB I used the Raven.Server.exe to create a database server. Just running raven.Server.exe and connecting to it is fine for development but certainly not our only option.  Running RavenDB as a Windows Service Once you have the RavenDB.Server NuGet package you can install it as a Windows Service. This means it is always available and running whenever you need it. Certainly a nice and simple way of using RavenDB if you do so more often.   Installing is...

Understanding Map - Reduce

Monday 03 December 2012

Quite a few people seem to be intimidated by the concept of Map-Reduce. As it turns out Map-Reduce is actually quite simple and straightforward when you get to understand the basic principle.  Basic principle The basic Map-Reduce consists of two steps. I guess you are not going to be very surprised when I tell you that these steps are called Map and Reduce. The Map process gets the raw data as input and discard anything in the data we are not interested in, basically each input has a...

RavenDB and multiple databases

Tuesday 27 November 2012

In my previous two posts about RavenDB I used a Book class as the example. The first example was an ASP.NET MVC 3 application and the second was an ASP.NET MVC 4 application and I just copies the Books class from the first to the second example. As I just used the default namespace in both projects .NET would consider this two different classes, after all the namespace and assemblies are different.  How does RavenDB handle CLR types It turns out RavenDB doesn’t really care about these...

Using RavenDB with ASP.NET MVC 4

Monday 26 November 2012

Some people might have wondered why I used ASP.NET MVC 3 in my previous blog post. The reason is that the RavenDB.Client package uses Newtonsoft.Json and ASP.NET MVC 4 also has a dependency on Newtonsoft.Json. In itself this isn’t a problem except that RavenDB requires Newtonsoft.Json version 4.0.8 and ASP.NET MVC 4 ships with a much newer version of Newtonsoft.Json, to be exact version 4.5.6. The result is that trying to Install-Package RavenDB.Client produces the following...
RavenDB is one of the newer document type databases that is conceptually comparable to MongoDB or CouchDB. One of the nice thing about RavenDB, at least for a .NET developer, is that is has been developed with .NET in mind from the start. And this makes it really easy to get started with. In fact it is so easy to get started with that it surprises me that not everyone is using it.   One of the things that attract me to document databases like RavenDB is the fact that they are really fast and...
The standard workflow with web development is run the web application, make some changes to your CSS in Visual Studio, flip back to the browser and reload the page to see the effect. While this works relatively well it can be somewhat slow at times.   One improvement is make changes to your CSS in the browser. I use Google Chrome as my main browser and it’s CSS and JavaScript viewer is actually an editor so you can make changes there. The nice thing is you see the effect of your changes...

Modern Web Development

Saturday 10 November 2012

The PowerPoint and samples from my presentation at the QNH DevDays in Arnhem. Modern web developmentfrom Maurice Beijer   SignalR demo Other demos   Enjoy!
I recently did a blog post describing how to enable the jQuery UI drag effects. In this post I showed how to get the draggable effect to work on an iPad. While that works just fine it isn’t the end of the story. Microsoft has shipped Windows 8 and Internet Explorer 10 and the jQuery UI draggable effect doesn’t work there as is.  The solution Fortunately the solution is a lot simpler and doesn’t require an additional plug-in. It turns out that Internet Explorer 10 has quite a good support for...

HTML5 Slides and Samples

Thursday 18 October 2012

The slides and samples from the HTML5 talk I did yesterday at the DevelopMentor office in London.   HTML5from Maurice Beijer   Enjoy!

jQuery UI and touch screens

Monday 17 September 2012

I really like using jQuery UI in my web applications. But even though jQuery UI is very well tested there are some potential issues to keep in mind. One of those is using the jQuery UI controls on touch devices like the iPad. With these touch enabled devices becoming more and more popular support is quite important if you don’t know you exact client configuration. And for that matter, even if you client has standardized on a specific browser, let say Internet Explorer 9 for example, you may...
In deze podcast spreekt Maurice de Beijer met Erik van Appeldoorn over het maken van mobiele websites met ASP.NET MVC. Door de opkomst van smartphones, tablets en andere mobile devices is het van essentieel belang dat je website er ook op deze apparaten goed uit ziet en tevens handig en intuïtief functioneert. Met de komst van de nieuwe ASP.NET MVC 4.0 template wordt nieuwe functionaliteit meegeleverd die je kan helpen je site te optimaliseren voor deze mobile devices. We praten je bij over de...
In a previous post I showed how easy it is to create a simple chat application using SignalR. And chatting on the internet might be popular but as it turns out there are rather a lot of applications that need to do more than just chat. As it is there are a lot more CRUD style applications, where users edit data usually stored in a database for some purpose, than chat applications. So in this blog post I am using a simple CRUD, without the delete part, application to show the power of...
One of the easy ways of speeding up a web application is by using a CDN or content delivery network. The main purpose of a CDN is serving up resources that are not specific to you site. The quintessential example of using a CDN is jQuery. There are many websites using jQuery, according to some statistics some 50% of all websites. And if each site hosts its own copy of jQuery everyone has to download it multiple times. How often depends but assuming everyone does a perfect job of adding cache...
In a previous blog post I mentioned how exited I was about WebSockets and the future with real time duplex communication over the Internet. Unfortunately the current support for WebSockets, both on the client and on the server, is still somewhat limited making this a thing of the future. Does that mean we can do this yet? Not quite.  SignalR to the resque Even if a pure Web Socket solution isn’t possible yet there are perfectly good alternatives. And the one I really like is SignalR as it...

HTML5 WebSockets

Thursday 05 July 2012

One of the most exiting new things in HTML5 is the ability to start pushing data from the server to the client. Traditionally web applications have depended on clients requesting data from the server. And this is fine in most applications. However there are lots of cases when you might want to push events to the client as soon as they happen and not wait for a client to query for them. For example a stock broker application requires traders to know about stock price changes as soon as they...
One of the problems with running JavaScript in the browser is that everything usually executes on the same thread as the UI. With most scripts this is fine because they are short executing however if you start doing more complex calculations you might run into the vase where the UI becomes non responsive because of the JavaScript executing. And when that happens you will see one of these dialogs popup and you are at the mercy of the end user, not the best of places to be.   Update: Check out...

HTML5 and Device API’s

Monday 16 April 2012

Last week the question of HTML5 and sensors came up. This wasn’t really strange as we where talking about the HTML5 GeoLocation features and using the, optional, GPS is just one device or sensor you might want to use. It turns out the W3C has a Device APIs Working Group working on this problem. They are working on a whole range of interesting devices like:Battery Status APIContacts APIHTML Media CaptureMedia Capture APINetwork Information APISensor APIVibration APICalendar APIMediaStream...

The browser landscape is changing

Friday 13 April 2012

I hadn’t really been paying attention to the popularity of browsers a whole lot for the last few months until this week as I was teaching HTML5 and the usage stats influence what is usable and what not. Sure I heard some time ago that Chrome was larger then IE but as most of these statistics are more about politics then anything else I tend to ignore them and just check some sites I know are producing real numbers for me. And the best I know way is to compare Google Analytics on some large...
jQuery is one of the most useful frameworks out there for web development. And while most of jQuery is very much about working with the browser DOM there is also another side to it that makes doing networking real easy and that is all based around the $.ajax() and related, like the $.getJSON(), functions. Now HTML5 contains a real useful part in Web Workers for doing work that should not block the background thread. And using the XMLHttpRequest for network IO is fine in a Web Worker....
Having the ASP.NET Web API as a REST service returning data is kind of nice but to be efficient on the wire we don’t want to return more data that required only to discard it in the client.   As we have seen in a previous post just returning a collection data was real easy.   As it turns out changing the service so the client can filter data is almost just as easy. In the previous example we returned an IEnumerable<Product>. All we need to di is change this to return an IQueryable<Product>...
With REST there is not a lot required on the client as far as sending requests goes. As long as you can send HTTP GET requests you are good to go and there are very few programming stacks that don’t allow for some form of doing that. Of course just doing an HTTP GET is going to give you some data back and you still have to understand that data but that is an application specific issue. In order to make life even easier the ASP.NET Web API adds some client support in the form of the HttpClient...
In the previous blog post I demonstrated how to get started with the ASP.NET Web API and retrieve some products data from the Northwind database. Something that was really easy to do But quite often we want to update data just as much as we want to retrieve it.  A quick recap of REST and HTTP methods used. The convention for REST service as defined by Roy Fielding is to use different HTTP methods to signify our intent with the HTTP request. The HTTP GET method, by far the most commonly used...
Some time ago I did a number of blog posts about the beta versions of the WCF Web API. As it turns out the WCF Web API team has moved into the ASP.NET team, a good thing as far as I am concerned, and as a result it is now called ASP.NET Web API. Now this is much more that just a name change. For starters there is very little of the WCF bits still involved, in fact when you use ASP.NET as a host none at all. As a result it takes on quite a few characteristics of ASP.NET MVC with convention over...

Enter the next level of HTML5

Monday 27 February 2012

The game is on. The competition is open. It's time for FrameRate Fest 2012. Internet Explorer 9 challenges you to play yourself to the front line of HTML5.   In this creative competition it's all about building an awesome HTML5 frame. In this year's edition there is an extra challenge: create a small but nice, awesome or freaky game component in your frame. Your ultimate chance to gain fame.   Cause we've got a worldwide scoop: a developers Kinect code in combination with your HTML5 game....
In deze, tijdens de TechDays opgenomen, podcast spreekt Maurice de Beijer met Steve Sanderson over de toekomst van web development met de moderne browsers. Ze spreken ondermeer over Kockout.js, een JavaScript library die MVVM stijl databinding mogelijk maakt binnen HTML/JavaScript applicaties. Je kan de podcast hier beluisteren. Enjoy!

HTML5 & REST TechDays 2112 material

Monday 20 February 2012

Several people asked about getting the slides and samples from my HTML5 & REST talk at the TechDays 2012 conference in the Netherlands. You can download the slides and the sample if you like.   Enjoy!

HTML5 TechDays material

Friday 17 February 2012

Several people asked about getting the slides and samples from my HTML5 talk at the TechDays conference in the Netherlands. You can download the slides and the sample if you like.   Enjoy!
In the previous two blog posts about getting started with Knockout.js and controlling updates using Knockout.js I showed to to get started with the awesome Knockout.js library. In this post I am going to show how easy it is to load a collection of items from a REST service and data bind to the complete collection. To data bind to collections of data Knockout supports the foreach data binding. This lets us point at a collection of data and create a new item for each object in the collection. In...
In deze podcast spreekt Maurice de Beijer met Roland Guijt over de moderne manier van het ontwikkelen van web applicaties. Roland verteld over het gebruik van Knockout.js voor de data binding van data aan de HTML elementen on de browser. Verder verteld hij waar hij jQuery allemaal gebruikt en geeft hij diverse tips over het ontwikkelen van single page web applicaties.   De podcast is hier te downloaden.     Voor het gemak kan je natuurlijk ook een RSS feed, iTunes of Zune link...
In the previous blog post about Knockout.js I showed why and how to get started with Knockout.js. And I explained that the reason I really like Knockout.js is that it is a very familiar way of working with its MVVM style. I created a small demo where we could update the first and last name of a person and the ViewModel would combine the two and display the concatenated parts as the complete name. This worked just fine as soon as I started using observables except for one thing. Whenever I...

How to get started with Knockout.js

Monday 06 February 2012

Once you get into doing more client side JavaScript code with business applications and REST services you are going to run into the question of how to construct the client side HTML required to show the data to the users.   Using jQuery Assuming most people are going to be using jQuery on the client you might start with some jQuery code to generate HTML. Your code might look something like this$(function () { $("#btn").click(function () { ...
One of the problems with HTML5, or development at the cutting edge of the web, has always the need to support a large number of different browsers. Depending on who you ask the numbers will vary slightly but is usually boils down to Internet Explorer being the biggest and Chrome and FireFox each taking quite a big chunk of the stats and the remainder of the browsers filling up the gaps. So that means that any public facing website should at the very least support the three major browsers,...
Thanks everyone for joining in with the DevelopMentor webinar I did last night on Getting Started with WCF and Rest. If you want to take another look at the slides or samples you can download them using the links below:PowerPoint slides.ASP.NET MVC 3 project containing the REST service.   For more info about the WCF Web API you can check the WCF CodePlex site.   Enjoy!
Uiteraard ben ik ook dit jaar weer aanwezig op de Microsoft TechDays 2012. Voor degene die het gemist hebben de TechDays zijn dit jaar van 15 t/m 17 februari in Den Haag.   Ik doe dit jaar twee sessies:Op vrijdag middag doe ik een sessie over het maken van een HTML5 client voor REST services. Het maken van een REST service is pas deel een van een oplossing. Nadat deze er is moet er meestal ook een grafische interface voor gemaakt worden. En in de huidige tijd, waar het ondersteunen van...

HTML5 Presentatie slides en demo

Friday 06 January 2012

De PowerPoint slides en de demo code van mijn HTML5 presentatie van gisteravond zijn nu beschikbaar.   Voor de liefhebbers ook online via SlideShare.HTML5 OverviewView more presentations from Maurice Beijer Met dank aan 4DotNet die de sponsor was van deze bijeenkomst.   Enjoy!

HTML5 sessie bij 4DotNet in Utrecht

Thursday 15 December 2011

Op donderdag 5 januari 2012 beginnen we het nieuwe jaar met een herhaling van de sessie van Maurice de Beijer over HTML5. Deze avond wordt gehost door 4dotnet en zal plaats vinden in Utrecht. Er wordt al tijden veel over de nieuwe HTML5 standaard gesproken. Maar wanneer kan je als ontwikkelaar nu eigenlijk met HTML5 aan de slag? En als je het kan gaan gebruiken wat heeft het eigenlijk allemaal te bieden? Hoe zit het met al die oudere browsers die mensen misschien nog gebruiken? En dan hebben...

HTML5 Video

Tuesday 13 December 2011

Video has always been a difficult thing on the web. With HTML5 supporting the <video> element that should become a lot easier right? After all you just add a video element, set the source and you are good to go right? If you create a page like this:<!DOCTYPEhtml><html><head><title>HTML5 Video demo</title><style> video { height: 200px; width: 400px; ...
Consider the following problem: You might be tempted to start working with HTML5 features in your web applications but you have to support older bowsers.   So for many HTML5 features there are polyfills available that will let you make older browsers like Internet Explorer 7 or 8 work with the newer API. See a possible list of HTML5 polyfills here. However a number of these is JavaScript based and while that works in older browsers their JavaScript engine is often quite slow as well making...

HTML5 in een vogelvlucht

Thursday 01 December 2011

De PowerPoint presentaties van mijn HTML 5 in een vogelvlucht sessie bij Achmea is hier te downloaden en de demo code hier. De presentatie is ook op SlideShare te vinden.HTML 5 in een vogelvlucht (Dutch)View more presentations from Maurice Beijer Enjoy!
Services are becoming more important with richer HTML5 style applications. But by default the browser will let you call into a service on the originating domain but not another one. And that means you have to include all your services one the same domain, not very practical. And worse if you want to use a 3rd part service you can’t call this directly from the your JavaScript code. A technique that has been used for quite some time to solve this problem is JSONP. Basically when you are doing a...

Using HTML5 WebSockets

Friday 11 November 2011

In previous blog posts I wrote about using Server-Sent Events so send data from the server to the browser. This works but has the drawback that it is a one way messaging from the server to the browser. There is nothing preventing you from doing ajax style calls back to the server but basically you are using 2 connection. The big plus for Server-Sent Events is that is use standard HTTP connections so the infrastructure is no problem.   WebSockets Sometimes you want more flexibility of duplex...

Customizing the HTML5 checks Modernizr does

Wednesday 09 November 2011

In the previous blog post I demonstrated how to use Modernizr to test for the availability of HTML 5 features. Doing so was quite easy but as every test is always performed to add CSS classes to the <html> element there is a bit of overhead in using the default Modernizr JavaScript file. Fortunately they have made a fix for this rather easy and added a page where you can quickly create a custom version with just the checks you need for your site.     Adding custom checks The careful reader...

HTML5 feature detection aka Modernizr

Tuesday 08 November 2011

Yesterday I blogged about using the new Server-Sent Events or the EventSource object to send messages from the server to the client. But what happens if I try to do this in a browser that doesn’t support Server-Sent Events? If I run the code from yesterday in Internet Explorer 9 I sill see the following error dialog: The reason is that IE 9 doesn’t support Server-Sent Events, see CanIUse.com, so it results in an Microsoft JScript runtime error: 'EventSource' is undefined exception ...

HTML5 - Server-Sent Events

Monday 07 November 2011

There are a lot of cool new features and one of these is Server-Sent Events. According to CanIUse.com Server-Sent Events are usable on almost half of the modern browsers. And as is often the case Internet Explorer is the big missing piece again. But fortunately there are some nice polyfills to take care of IE. More about that some other time.   So what are Server-Sent Events? Server-Sent Events are a way of sending data from the server to the client. There is actually another part of HTML5...

HTML5 and Geolocation

Friday 04 November 2011

One of the cool new features in HTML5 is Geolocation or the capability to determine where someone is. It turns out most modern browsers support the Geolocation API as you can see on CanIUse.com. Unfortunately Internet Explorer 8, the most popular version of IE at this moment, is the big exception. The Geolocation API is very easy to use. The basic function to use is the getCurrentPosition() which is located on the geolocation object which in turn is located on the navigator object. It takes a...
For those who missed the online event about building JavaScript and HTML5 client for a REST service build using the new WCF Web API the recordings are up. You can download the hi res recording here or download one of the other formats from the main page here. And remember there a bunch of other useful recording from other DevelopMentor instructors on the same page.   Enjoy!

HTML5 slides and demo code

Friday 28 October 2011

Below is are the links to the slides and demo code from my HTML 5 presentation I did yesterday evening at the DotNed user group meeting hosted by 4DotNet in Meppel.Slides (Dutch language)Code   The slides are also on SlideShare here.  HTML5 (Dutch)View more presentations from Maurice Beijer   Enjoy!
You can download the slide from my session on Building rich HTM 5 clients using REST serviceshere and the sample application using the WCF Web API here.   The slides are also available on SlideShare.  Building rich HTML 5 clients using REST servicesView more presentations from Maurice Beijer Enjoy!
In the previous blog post we use the new HTML5 Drag and Drop API to drag files from the Windows Explorer into the browser and process them using JavaScript. That worked pretty well, except for Internet Explorer that is, but the File object didn’t give is a lot of details about the file. In fact we only get the file name, size, last modified date and the type. Useful but not a whole lot of information. But HTML 5 also provides a way we can read the data using the FileReader API.   The...

HTML5 and file Drag & Drop

Thursday 13 October 2011

There is a lot of new goodness in HTML5 and one of these features is being able to drag a file from the Windows explorer into the browser and handling the drop event using JavaScript. If you are a GMail user you are probably familiar with this as GMail allows users to attach files to emails using this Drag&Drop style. Of course as always not every browser supports the new feature. According to CanIUse.com 88.92% of browser support Drag&Drop, including Internet Explorer 6 and above, but it...