A quick tour of Windows Azure Mobile Services

<p>A while back I moved my weblog to Azure websites, because it was just cheaper than the hosting I had. I'm happy with the service I'm getting from Microsoft and the way the weblog performs. Zero downtime so far and the pages are pretty fast. </p> <p>When Microsoft came up with the mobile services API I was pretty excited. If this thing is as good as the websites feature, they will get another bag of money from me and I will be putting mobile services in the cloud for my Windows 8 apps. Or so I initially thought.</p><!--more--><p>In this post I will take you on a tour through the new Mobile Services feature and talk a bit about how to use it and what you can expect when you start building a mobile service.</p> <h2>Creating a new mobile service</h2> <p>The mobile services preview of Azure looks much like the Azure websites feature in terms of how a new service is created. If you want to create a new mobile service, you can click the Large "New" button at the bottom of the screen in the management portal preview site. This will show a menu with various options for new services. One of the options is the Mobile service.</p> <p><a href="http://fizzylogic.azurewebsites.net/wp-content/uploads/2012/09/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/09/image_thumb.png" width="699" height="230"></a></p> <p>Click the mobile service and you will get a wizard that asks you for a name and a SQL database for the service. You can either use an existing database or create a new one. At the moment of writing, you can only create the database in East US, this is because all this stuff is still in preview status.</p> <p><a href="http://fizzylogic.azurewebsites.net/wp-content/uploads/2012/09/image1.png"><img title="image" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="image" src="http://fizzylogic.azurewebsites.net/wp-content/uploads/2012/09/image_thumb1.png" width="244" height="176"></a> <a href="http://fizzylogic.azurewebsites.net/wp-content/uploads/2012/09/image2.png"><img title="image" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="image" src="http://fizzylogic.azurewebsites.net/wp-content/uploads/2012/09/image_thumb2.png" width="244" height="176"></a></p> <p>After completing the wizard, you will see an overview page with a short tutorial on how to connect to your new service. Microsoft has made it really easy to work with mobile services, you can download the application directly from the portal. It's not complete obviously, but it does contain sample code and some pregenerated classes that make working with the mobile service a lot easier.</p> <h2>Working with data</h2> <p>Azure Mobile services are all about data, the service is a REST service. You can only invoke Read, Insert, Update and Delete operations on each table. If you need to query, you will need to construct that query on the client. There is no way to define queries on the server to make querying common datasets easier. Also, the database schema isn't fixed initially. Tables are filled with a schema once you insert the first data item into them.</p> <p>Because the schema is dynamic, you only need to specify tables on the management portal. They will get an ID column initially and that's it. There's currently no option to define the rest of the columns of a table. These are generated once you have defined an entity on the client and posted that to the service.</p> <p>You can create a new table by going to the data section of the mobile service in the management portal and click the large "Create" button at the bottom of the screen. In the screen that will pop up, you can enter the name of the table and the permissions for the table. These permissions determine who can enter data in the table and who can read the data contained in the table. By default Azure will set these permissions to a setting where everyone with an application key can modify and read the data. You can also choose to allow only authenticated users or everyone. </p> <p><a href="http://fizzylogic.azurewebsites.net/wp-content/uploads/2012/09/image3.png"><img title="image" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="image" src="http://fizzylogic.azurewebsites.net/wp-content/uploads/2012/09/image_thumb3.png" width="244" height="211"></a></p> <p>Once you have a table, you can access that table through the Mobile Services SDK on the client. There's an SDK for WinRT available, which you can <a href="http://go.microsoft.com/fwlink/?LinkId=257545" target="_blank">download from the Microsoft website</a>. Accessing the table is easy, first you need to have a MobileService instance in your application with the appropriate settings for the service and the API key for it. Once you have that, you can invoke GetTable<T>() to get the table for the desired entity. </p>

public class DomainContext
#region Private fields
private static MobileServiceClient _mobileService = new MobileServiceClient(
"<your API key>"
private static IMobileServiceTable<City> _cities;
private static IMobileServiceTable<Comment> _comments;
#region Tables
/// <summary>
/// Gets the cities table
/// </summary>
public IMobileServiceTable<City> Cities
if (_cities == null)
_cities = _mobileService.GetTable<City>();
return _cities;
/// <summary>
/// Gets the comments table
/// </summary>
public IMobileServiceTable<Comment> Comments
if (_comments == null)
_comments = _mobileService.GetTable<Comment>();
return _comments;
#region Queries
/// <summary>
/// Gets the last 10 cities added to the application
/// </summary>
public MobileServiceTableQuery<City> GetRecentlyAddedCities()
return this.Cities.OrderByDescending(city => city.DateCreated).Take(10);

Getting a proper version of Ruby running on your Mac.

Since a few months, I switched completely to apple hardware. Reason being that I develop mobile apps including iOS apps, which require you to have a mac. It's been a very fun transition, I learned a lot of new stuff that inspired me to do things a little different on Windows as well.

One of the things I learned is how to use ruby for building test scripts and small utilities. Why ruby? Well, it's easy to learn. Also, it's used in the test tools I use for testing my Xamarin based apps. When you want to run Calabash tests, you have to know a little bit about Ruby development. Now this may sound like it was a breeze to get everything working, but trust me, it wasn't so trivial when I started using these tools.<!--more--> <h2>The update story of Apple</h2> Using ruby to run tools like Calabash on Mac OS X is a bit problematic. Apple does support Ruby out of the box on every apple machine. However, the version that you get with the box is old. The ruby community has moved on to version 2.0.0 while Apple is stuck on 1.8.2 on my machine. This means that several tools that use Ruby no longer work on Mac OS X.

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>

3 Tips to get you up and running with Calabash-Android

A while back I started learning more about specification by example, because of my role as a proxy-product owner (I replace the product owner when he's not around and spend a lot of time with him working out the specs for our application). He somehow managed to get me quite excited about it (Thanks Joop, you did it :P).

After he told me about specification by example a while back, I learned a lot more about its uses during development when I started exploring Calabash-Android.