Integrating video into your website

Integrating video sounds easy on paper. But believe me, it isn't. Video formats are a complete nightmare and even a simple player is hard to integrate. In this post I will show you some important tricks that you will need in order to succesfully integrate video into your website.<!--more-->

<h2>HTML5 video element</h2> Integrating a basic video into your website isn't all that complex. All you need to do is to add a video element with a source to your HTML. This will give you the standard video player offered by your browser.

5 Important CSS best-practices to improve your webapplications

<p>In the past few months I've been designing and developing a new webapplication with a few other developers. During the project As a rare mix between designer and developer I'm responsible for making designs for each of the screens in the web application. On the other hand I'm responsible for making sure it's technically in top shape. </p> <p>As part of this weird mix of things I've been watching the CSS files of the website with growing interest. I'm seeing a lot of cool tricks and a lot of things that can go wrong. </p> <p>In this post I've written down a few tips that I think will help to make your website more awesome and maintainable. </p><!--more--><h2>Tip 1: Use LESS to build your CSS</h2> <p>CSS is fine if you know how to properly use all the combinations of rules. If you're like me, a practical guy, you will probably run into a ton of problems building an efficient set of rules. This is because CSS can do a lot, but it's complex and not very maintainable on its own. For those who have done CSS before, know what I'm talking about.</p> <p>Soon after I started doing CSS for real, I discovered that SASS and LESS are languages that are going to help big time in reducing the maintainability problem. For both SASS and LESS there's a good compiler available that can be integrated into your automated build system, so there's no reason why you shouldn't be using both of these frameworks.</p> <p>Here's a few quick links to get you started:</p> <ul> <li>Compiler for use on Windows computers: <a title="https://github.com/duncansmart/less.js-windows" href="https://github.com/duncansmart/less.js-windows">https://github.com/duncansmart/less.js-windows</a> <li>Documentation on LESS: <a title="http://lesscss.org/" href="http://lesscss.org/">http://lesscss.org/</a> <li>Documentation on SASS: <a title="http://sass-lang.com/" href="http://sass-lang.com/">http://sass-lang.com/</a></li></ul> <h2>Tip 2: Normalize the browser output</h2> <p>Important if you're building for multiple browsers is that you normalize the output of each of these browers. Almost every browser handles margins and padding differently in terms of defaults for them. So a normalize.css file is a must if you want your styling to survive a visit from an IE7 browser (sorry, IE6 is dead, and this is all the text I'm going to spend on that).</p> <p>Need a normalize.css file? Check this website: <a title="http://necolas.github.com/normalize.css/" href="http://necolas.github.com/normalize.css/">http://necolas.github.com/normalize.css/</a></p> <p>I had a reset.css before, but the one linked above is better for modern browsers. So instead of going with the good old reset.css I suggest you give the normalize stylesheet a spin <img class="wlEmoticon wlEmoticon-smile" style="border-top-style: none; border-left-style: none; border-bottom-style: none; border-right-style: none" alt="Glimlach" src="http://fizzylogic.azurewebsites.net/wp-content/uploads/2012/09/wlEmoticon-smile.png"></p> <h2>Tip 3: Standardize your text</h2> <p>Most of your website is going to be text, so why not take some time out of your day to define a set of standard styles for text on your website. </p> <p>Start out with defining styles for the body and work your way down to specialized styles to make certain pieces of text larger or smaller based on a specific CSS class you include on a text element on the page. </p> <p>Place all of this stuff in a separate LESS include file and you can include them anywhere you need a typical typography setup. To make things even easier, here's <a href="http://snipplr.com/view/14702" target="_blank">a boilerplate typography CSS file</a>.</p> <h2>Tip 4: Use a grid system</h2> <p>Making a layout in CSS is easy when you want a crappy one. Slap a few DIV elements on the page, give them an ID and start floating, spacing and sizing them with named rules. Easy peasy. </p> <p>Using named elements to make a layout makes your styling less extensible. As in, you cannot do anything to the layout, unless you start editing the CSS which may or may not break everything else on the page. It's awful and very unnecessary. </p> <p>Instead, opt for a grid system where you divide your page in a predefined number of columns. A column based design for a webpage is probably the best thing you can do to a layout, because all webpages tend to follow a design that flows top to bottom instead of using fixed heights. Vertical scrolling is such a normal thing to do, so everyone is expecting you to allow them to scroll verically. So why not go with what everyone is expecting and fix the width, but not the height of elements in your design.</p> <p>As I said before grid systems divide the page up into multiple columns. Each element in a row can take up 1 or more columns in the grid, up to a maximum within a container defined by the grid system. If you want a second row of elements, just make a new container for a set of columns and you can add more content to that row.</p> <p>You can roll your own grid system, but you can also download one right from the great interwebs. Here's a few samples:</p> <ul> <li>960.gs - <a title="http://960.gs/" href="http://960.gs/">http://960.gs/</a> <li>The golden grid system - <a title="http://goldengridsystem.com/" href="http://goldengridsystem.com/">http://goldengridsystem.com/</a></li></ul> <h2>Tip 5: Classify don't name</h2> <p>Last but certainly not least. Please stop using an ID for everything. Make your design using classified elements. If you're using boxes on your website, classify them using a CSS class. That way you make your design more extensible. Want another box with a drop shadow? Just add the right CSS class and you're done. </p> <p>I'm stating it boldly, because I think this one is important. But I wouldn't be much of a developer if I didn't know about exceptions and problems with the above statement. </p> <p>For example, you have two pages where you want a set of buttons that flow horizontally, with a margin between them. One of the buttons is also on a different page, where it doesn't need the extra margin. Here's a few things you can do with this one:</p> <ul> <li>Make a rule on the container of the buttons, which gives each anchor element (A) in the container a margin-right automatically. This way, if a button with the same class is added to a different container, it doesn't get the margin. <li>Make a rule that matches the class of the button, but include the container in that rule, so the rule only applies when an element has the specified class AND is placed in that container. <br><br>Pro tip™: Add a page class to your body element. This way, you can vary styling for certain classes on a per page basis while keeping the no-ID rule intact.</li></ul> <p><strong>Please note: </strong>Not using an ID and basing styles is kind of a puristic thing to do in some cases. Personally I think that the ID is reserved for naming elements that need to be accessible by tools such as JavaScript, screenreaders and test automation products. But if you cannot solve a design issue by using just classes, by all means go ahead and make a rule for that named element. It's just a guideline and it's only there to make things easier. It shouldn't be your first choice for fixing CSS, that's what the rule is for.</p> <h2>Final thoughts</h2> <p>All the tips in this article work when you're building a design that supports such actions. If the designer decides to build something that doesn't follow the function of your website, you're screwed. So to make the most out of all of these tips, please make sure you talk to your designer about it. He needs to make sure that the grid system can be followed to base his design work on a column based design. Also, he needs to make sure, you can split the design into reusable components.</p> <p><strong>Personal note:</strong> Dear designers, you are not making a piece of art. It's a piece of industrial equipment, in which form follows function. So make me a happy camper and talk to someone on the development team before putting that pencil to the paper. It will help you greatly in producing an excellent design!</p>

Responsive JavaScript rules to make your responsive design complete

<p>Adaptive designs are hot lately and I think they are a great way to build your website. Why? Simple: It makes it more usable on different computers. I absolutely hate scrolling horizontally and I hate zooming in on my mobile phone even more. And I'm pretty sure you do too.</p> <p>There's various different techniques around the web that you can apply to your website in order to build a responsive/adaptive layout for it. Whether you are a mobile first or a desktop first type of guy, you will most likely be using a ton of CSS media queries and CSS classes to make everything look excellent on all possible resolutions. </p> <p>In the responsive/adaptive layout for knowNow, I used a lot of CSS media queries and special CSS classes too. However I found out that it didn't cover 100% of what I wanted with the design. Some things you just can't do with CSS. For example, swap a bootstrap span9 for a span12 is not possible in CSS. For that you need javascript. </p> <p>Of course you can build all that javascript by hand, but that makes a hell of a mess in your website. After thinking about it for a bit I came up with a different idea to solve the problem.</p><!--more--><h2>Meet Responsive.js</h2> <p>My solution to the problem was to build a small jQuery plugin that lets me define rules for pixel range within which I want certain actions to be applied to my HTML layout. It makes building that list bit of a responsive layout that much easier.</p> <p>The plugin defines $.responsive.rule(minWidth,maxWidth,callback) as a function that you can use to define a rule. Using the plugin within a website looks like this:</p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// Define the rules for the page using the responsive plugin.
// You can create multiple rules for the same range, the rules get applied in the order they are defined.
$.responsive.rule(0,479,function() {
$("#border-extrasmall").addClass("active");
$("#border-small").removeClass("active");
$("#border-wide").removeClass("active");
$("#border-extrawide").removeClass("active");
});
$.responsive.rule(480,979,function() {
$("#border-extrasmall").removeClass("active");
$("#border-small").addClass("active");
$("#border-wide").removeClass("active");
$("#border-extrawide").removeClass("active");
});
$.responsive.rule(980,1199,function() {
$("#border-extrasmall").removeClass("active");
$("#border-small").removeClass("active");
$("#border-wide").addClass("active");
$("#border-extrawide").removeClass("active");
});
$.responsive.rule(1200,0,function() {
$("#border-extrasmall").removeClass("active");
$("#border-small").removeClass("active");
$("#border-wide").removeClass("active");
$("#border-extrawide").addClass("active");
});

<p>You don't need to worry about when rules are defined or applied. The plugin makes sure that every rule is applied when window is resized or when the document is ready. If you create rules after the document was loaded, the rule will get applied as soon as you create it. This means that you can create rules at any time during the page lifetime.</p> <h2>How are rules applied?</h2> <p>When you invoke the $.responsive.rule function, a new rule object is created and stored. When the window is being resized, the plugin will iterate over all the rules that have been previously created and it will invoke them.</p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/**
* Defines a responsive rule object, containing the logic for a single responsive rule.
*/
function responsiveRule(minWidth, maxWidth, callback) {
var ruleCallback = callback;
var ruleMinWidth = minWidth;
var ruleMaxWidth = maxWidth;
var isApplied = false;
/**
* Invokes the responsive rule if the specified width is within the range of the rule
* and the rule wasn't applied before when the width was within the range of the rule.
* @param width The current client width
*/
function invoke(width) {
var shouldBeApplied = ((ruleMinWidth === 0 || ruleMinWidth <= width) &amp;&amp; (ruleMaxWidth === 0 || ruleMaxWidth >= width));
// If the rule was previously applied and should be applied now, stop processing the rule.
// This ensures that all the magic in the callback isn't applied a second time.
if(isApplied &amp;&amp; shouldBeApplied) {
return;
}
// Invoke the rule callback when the width is within the ranges specified.
// If one of the range limits is set to zero, skip checking for that limit.
if(shouldBeApplied) {
ruleCallback(width,ruleMinWidth, ruleMaxWidth);
// Mark the rule as applied. This flag will be used later to check if the rule
// should be applied again when the current width is still within the range of the rule.
isApplied = true;
} else {
// Make the rule as unapplied. This ensures that the rule is executed
// when the width comes within the range of the rule the first time.
isApplied = false;
}
}
return {
invoke: invoke
};
};

Building apps on Windows Azure –A whole different kind of scalability or...?

<p>There's an increased demand for scalable applications the pas few years. Companies are growing and so are their datasets and computing needs. This asks for solution where software can be scaled to immense sizes. If you ask me, this is the main reason we have cloud computing today and why it has become so popular.</p><!--more--><p>There is however some kind of sentiment that if you move your application to the cloud, it will scale to a huge size without you doing anything. This is where people are missing something really important. Building scalable applications isn't about moving it to a platform like Windows Azure. It's about making the right choices, choices that either make the application scale really well or fail miserably.</p> <p>As I discovered on monday during the pre-con on TechEd 2012, there are a few things you need to do to get the most out of your Azure installation.</p> <h2>The tale of turning the knob</h2> <p>One of the things you hear a lot is "Need more power? Just turn the knob and increase the number of nodes". Yes, this solves some problems in your application. But there's more. Scaling just the computer power increases the stress on your data tier and will ultimately cause queues on the database and query failures. </p> <p>Scaling a cloud application or any application needs to be done on the application as a whole. If you increase the compute power on the application tier, you also need to increase the power on the data tier. </p> <h2>Scaling databases on Azure</h2> <p>On any regular application you would scale a database by building a database server cluster. Increase the number of machines in the cluster and thereby increase the power available to process SQL queries/commands. This may work on a traditional application, but it is different on Windows Azure. </p> <p>Microsoft is running Windows Azure on commodity hardware, which means that the servers have limited room. There's no terabytes of disk space available on a single node. Instead the data is divided among many nodes in smaller portions. As a result you cannot build databases with more than 150 gigabytes of data in them. This means that you need a different technique of scaling the database beyond this limit.</p> <p>Azure offers database sharding to scale application beyond the 150Gb limit. Azure federations is the technique that allows administrators to partition databases into different shards. The partitioning is done using so called federation keys. These are columns in your database that are marked for federation. You can configure a range for a column to determine which set of records is going into which shard. Check out the weblog of the Azure team for <a href="http://blogs.msdn.com/b/windowsazure/archive/2011/12/13/building-large-scale-elastic-database-tiers-with-sql-azure-introducing-federations.aspx">more information about this feature</a>.</p> <p>It is important that you take enough time to think about how your are going to scale your application beyond 150Gb. Some data you want to be split up into different shards, some data is best kept central or maybe even replicated between the different shards. This means that a good database design is important for a successful cloud application. </p> <p><strong>Please note: </strong>Repartitioning your data can be done while the application is running. This may sound like you can always change the partitioning of your data afterwards. The caveat here is that you need to explicitly select a partition to be able to access a specific set of records. So while you can repartition, you may need to change logic in your application to effectively use the new partitioning. </p> <p>By applying sharding to your data tier, you can vastly increase the amount of power available to your application on the data tier. Choose the correct partitioning and you can use hundreds of SQL database nodes to distribute the load, making the scaling possibilities immense.</p> <h2>Scaling compute power more effectively</h2> <p>With database sharding and turning the knob for increased compute power, you can get pretty far in scaling the application. There are however plenty of things that can still limit the scale of your application.</p> <p>The following technique is one that can be used effectively to make your solution scalable. Draw out the components that make up your application and determine which groups of components can be duplicated. A single group of components that can be duplicated is called a scale unit. By placing a scale unit on a single instance you can scale out your application by simply activating another instance containing of that scale unit. Keep in mind that your application must be built in such a way that it is able to address multiple instances of a scale unit. </p> <p>Apart from defining scale units in your application architecture, you can also apply the following tips to make the application scale better:</p> <ul> <li>Apply service oriented architecture patterns like autonomous services. This decreases the number of dependencies, thus increasing the chance that you can scale your application more effectively. <br> <li>Use a centralized configuration mechanism, this decreases the amount of configuration needed for an instance of your application. Thus making it possible to scale faster in case the demand is increasing at a fast pace.</li></ul> <h2>Other techniques to make your application scale better on Azure</h2> <p>A good architectural design of the application is the most effective technique to make your application scale better on Azure, There's also a few other things you can do to make your application scale better and give users a better experience.</p> <ul> <li>Make use of geo distribution. Check where the audience of your application lives. Do they live in one area or all over the world? If the latter is the case, consider deploying your application in different data centres around the world. This will lower the latency and provide a better experience for users. <br> <li>Use the CDN for distributing files. Especially when you have users all over the world. Again this decreases the latency for users and it reduces the load on your compute instances.</li></ul> <h2>Final thoughts</h2> <p>The cloud changes the game in some ways, but there always remains the role of the architect and the developer to come up with a proper design of the application. Using Windows Azure is no excuse for doing a lame-ass job designing the application just because you seem to have unlimited resources. Resources cost money, so a good design will not only scale better, but will ultimately save you a lot of money.</p> <p>Having said that, the platform is quite fun to design for, so if you haven't done so, <a href="https://www.windowsazure.com/nl-nl/pricing/free-trial/">try it out</a>. You will discover that Azure will make building large scale apps a lot easier than it used to be before because of all these free infrastructural components.</p>

Welcome in 2012, the year of clouds

<p>The one sentence I keep saying to my co-workers, friends, family and all others is this: Welcome to 2012! It is the sentence I use to tell someone that he should lighten up and accept that things have changed. We're not in 1999 anymore.</p> <p>On that note I'd like to show you around on the latest incarnation of my weblog. I've moved the whole thing to the cloud in less than 10 minutes. That includes a full restore of the data (well, full, the important stuff is there, just a few links are missing) and the installation of a bunch of modules and my custom theme.</p> <p>How is that all possible? Read on!</p><!--more--><h2>Windows Azure, my old friend</h2> <p>The Windows Azure platform has been around for a while now and I have been looking into it a few times. The problem however always has been the price. It's too expensive for me. I am not going to pay 90 dollars to host a weblog when I can do the same thing on a virtual machine somewhere else for just 17 euros. </p> <p>Up until a few weeks ago, the price was my excuse not to move to the cloud. That all changed when Microsoft launched the new Azure websites feature. A cheap way to host your website in the cloud with all the Azure goodness of a proper control panel and installation possibilities. You cannot excuse yourself for the price, it's just 5 dollars per month. Way cheaper than the traditional hosting I had. </p> <p>As soon as I saw the offer of a 90 days trial I subscribed myself and went ahead to try out the new features Azure has to offer. </p> <h2>The pure awesomesauce of Azure websites</h2> <p>Azure websites is a new feature on Windows Azure that smells a little like Microsoft Web Matrix. You can either choose to create a site with no files or choose a product from the gallery and deploy that on a site. At this point the gallery is filled with loads off good open source products you can use to build websites. There's wordpress, dotnetnuke, drupal and more of that kind of products. </p> <p>Creating a new website is done through the new management portal. Select websites on the left-hand side of the screen and click the new button at the bottom of the screen. </p> <p><a href="http://fizzylogic.azurewebsites.net/wp-content/uploads/2012/06/image.png"><img title="image" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="image" src="http://fizzylogic.azurewebsites.net/wp-content/uploads/2012/06/image_thumb.png" width="298" height="180"></a> <a href="http://fizzylogic.azurewebsites.net/wp-content/uploads/2012/06/image1.png"><img title="image" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="image" src="http://fizzylogic.azurewebsites.net/wp-content/uploads/2012/06/image_thumb1.png" width="298" height="180"></a></p> <p>The new option offers a number of things you can do. You can create a website quickly using the quick create option. This reserves an URL for your website, but doess nothing after that. When using the quick create option you have to manually deploy your website. The next option is create with database, this option allows you to deploy a website together with the site. Again, the actual content you need to deploy afterwards. </p> <p>The final option, and in my opinion the best, is the <em>From gallery </em>option. This allows you to select a standard product giving you an instant productivity boost.</p> <p><a href="http://fizzylogic.azurewebsites.net/wp-content/uploads/2012/06/image2.png"><img title="image" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="image" src="http://fizzylogic.azurewebsites.net/wp-content/uploads/2012/06/image_thumb2.png" width="298" height="180"></a> <a href="http://fizzylogic.azurewebsites.net/wp-content/uploads/2012/06/image3.png"><img title="image" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="image" src="http://fizzylogic.azurewebsites.net/wp-content/uploads/2012/06/image_thumb3.png" width="298" height="180"></a></p> <p>This is what makes Azure websites so great. I can simply create a new website based on something standard. I don't have to worry about things like, will it work in the cloud, configuration options, deploying databases, etc. I don't see any other hoster around that offers such a flexibility at the price of just 5 dollar a month. You cannot beat that.</p> <h2>Migrating my old stuff</h2> <p>Okay, so I didn't really migrate my website one-on-one. The reason being that I don't want to poke around with MySQL backups that I possibly cannot restore into the cloud because of version differences. The old MySQL installation was kind of weird and I have had problems before.</p> <p>I still was able to migrate my stuff, because of Wordpress export/import functionality. It imports pictures, posts and comments in one go. Very neat! And because the deployment functionality on Azure configured the weblog just right I was able to import my old theme and modules without problems. </p> <h2>Conclusion</h2> <p>All things included it took me less than 10 minutes to move my weblog to the cloud. Giving me a costs reduction of exactly 12 euros. Did I mention it's now scalable too? Not that I will use that function any time soon, but I'm happy to have it. </p>

Lap around the new Mono for Android 4.2 release

<p>Today Xamarin released a new version of Mono for Android, the C# tooling for building apps on Android devices. The new release features a ton of new and old stuff that got improved. There's quite a few things in there that will make many developers happy for sure. </p> <p>In this post I will give you a very short runthrough of what's there and why I think it is good to have.</p><!--more--><h2>The new Mono for Android designer</h2> <p>The first feature I'd like to talk about is the new designer that has been added to the Mono for Android tools. This designer was one of the things I wanted since the beginning. You can edit the xml files for the layouts by hand, but it's a pain in the behind. Later there was a designer in Eclipse, but that one sucks too much to be of any serious use. So I was very happy that Xamarin has created a designer that integrates nicely into Visual Studio and does a good job at designing layouts for your apps.</p> <p><a href="http://fizzylogic.azurewebsites.net/wp-content/uploads/2012/05/image.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://fizzylogic.azurewebsites.net/wp-content/uploads/2012/05/image_thumb.png" width="707" height="397"></a></p> <p>The designer has a ton of options. You can select the device you're designing for, the screen you're designing for and the operating system version you're designing for. Last but least you can also configure which orientation the screen has. This maximizes the comfort for the developer who is designing the app. </p> <p>If this doesn't make you want to program C# on Android, I know another good reason to start developing C# for Android. The property editor for the screen layouts is waaay better than the clunky, broken, irritating property editing experience eclipse offers.</p> <p align="center"><a href="http://fizzylogic.azurewebsites.net/wp-content/uploads/2012/05/image1.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://fizzylogic.azurewebsites.net/wp-content/uploads/2012/05/image_thumb1.png" width="124" height="244"></a> <a href="http://fizzylogic.azurewebsites.net/wp-content/uploads/2012/05/image2.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://fizzylogic.azurewebsites.net/wp-content/uploads/2012/05/image_thumb2.png" width="273" height="244"></a> <a href="http://fizzylogic.azurewebsites.net/wp-content/uploads/2012/05/image3.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://fizzylogic.azurewebsites.net/wp-content/uploads/2012/05/image_thumb3.png" width="131" height="244"></a></p> <h2>Better support for API targeting</h2> <p>In the past you could build Mono for Android apps with a platform setting configured to Android 2.2, this would produce an app that can be run on Android 2.2, but not lower. Even if you set the target version in your manifest to API level 8, the app would in most cases not start on device running that API level. The only way around this problem is to lower the target platform setting on the properties page of your project and skip on some of the useful features that a higher API level has to offer.</p> <p>To fully understand why this is a problem, let me tell you a littlebit about the WebView widget on Android. This widget can be used to display webpages in your application. It can handle both HTTP and HTTPS traffic. But the latter has some specific issues. If you happen to be running Android 2.1, the default behavior for handling HTTPS traffic is as follows. If the site has a certificate, the device doesn't trust, the request is aborted. Simple as that. There is no way around it. If you target Android 2.2, you can add a so called WebViewClient to this widget, which allows you to handle this situation much more gracefully by overriding OnSslErrorReceived and calling handler.Proceed() inside this method. Funny enough, the trick works for Android 2.1 devices too, but you need your app to be build with SDK level 8 (Android 2.2) and the manifest set to API level 7 (Android 2.1). </p> <p>With the new version you can do this and the above will work fine. Keep in mind though that although you can do this with the new Mono for Android 4.2 tooling, you need to make sure that the Java classes you use, do exist on the target API level. Otherwise you end up getting a load of Java errors.</p> <h2>Java API binding generation</h2> <p>The last feature I'd like to talk about is Java API binding generation. Mono for Android at the heart is the Mono framework with a bunch of Java API bindings that allow you to invoke Java code from C#. This is the way your C# activities can call into OS functionality. </p> <p>In previous versions you could write your own bindings by hand. I've done that too, but it's a painful process and there's no guarantuee that it will work without problems. In the new version of the Mono for Android tooling you can do the same thing without having to worry about delegates, IntPtrs and method signatures. Instead Xamarin created a custom project type that you can use to generate the correct bindings for you. Excellent stuff when you want that extra Java library in your app.</p> <p><a href="http://fizzylogic.azurewebsites.net/wp-content/uploads/2012/05/image4.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://fizzylogic.azurewebsites.net/wp-content/uploads/2012/05/image_thumb4.png" width="314" height="218"></a></p> <p>Not only did they improve the Java to C# binding, they also improved the way C# code is exposed to Java. This means that you can now export arbitrary C# members so that they are made available in Java. It is all automatically translated into the correct Java components. What that means? It means that things like java.lang.ISerializable can be implemented on your C# class. Imagine serializing a C# object in Java land so it can be sent to other Java activities etc. Cool stuff!</p> <h2>The bonus section</h2> <p>And to top it all off, here's the bonus section with other stuff that is fixed:</p> <ul> <li>The shared runtime shrunk by 50% which means smaller binaries, which means targetting more devices that have less space available to store apps in.</li> <li>Support for Android 4.0 (Icecream sandwich)</li> <li>Support for the x86 emulator. This is great since the x86 emulator is faster than the ARM emulator for Android. Great for giving presentations. And who knows, some day you may end up running Mono for Android apps on a x86 Android device.</li></ul> <p>I personally think that this is one of the best releases Xamarin has done so far. Now if you will excuse me, I've got some libraries to recompile <img style="border-bottom-style: none; border-left-style: none; border-top-style: none; border-right-style: none" class="wlEmoticon wlEmoticon-winkingsmile" alt="Knipogende emoticon" src="http://fizzylogic.azurewebsites.net/wp-content/uploads/2012/05/wlEmoticon-winkingsmile.png"></p>