Browser + Razor = Blazor!

In case you missed it, a few days ago Microsoft decided to enter the Single Page Application (SPA) frameworks war. Well not in a fully committed way yet, but nevertheless in a rather interesting way. Blazor will allow developers to write SPA Web applications, using C# and Razor syntax. Yes you will be able to build composable web UIs using C#! This is direct competition with popular frameworks such as Angular and React. I know what you will all say “I just got done learning Angular, React, Aurelia, Meteor, Ember, Polymer, Backbone, Vue, Knockout, Mercury, and was so looking forward to learning the next great JavaScript framework”. Well you still can but maybe, just maybe in the future you might not have to.

This is all made possible by the work the Mono team at Microsoft has been busy with. They have been working on bringing Mono to WebAssembly. WebAssembly has been around for a while now and it allows for the efficient and safe execition of code in web browsers. As a matter of fact WebAssembly is an open standard and with the introduction of iOS 11 it is now pretty much universally available on all major browsers. The Mono team has managed to bring the ability to run C# code within WebAssembly and hence develop applications using C# and Razor that natively run in the browser. WebAssembly is designed as an open standard by a W3C Community Group. You can learn more about it

All this is currently in the very early stages of development but it is all very exciting. Even though Microsoft says this is not a committed project, it seems to be heading to the right direction. This could help Web Developers to finally have a “go to” framework for SPA development instead of having to learn and pick between the ever changing JavaScript SPA frameworks.

You can see a live demo here

This is all part of the long term Microsoft strategy to embrace as many environments and tools as possible. They have been heavily investing in attracting as many developers as possible to their ecosystem. With their efforts in delivering open source frameworks and free cross platform development environments they are aiming to get people using their tools with the hope, of course, that they will choose Azure as their hosting platform. Long gone the days that Microsoft can demand huge sums for IDEs and compilers. Nowadays all an engineer needs is a good text editor and an LLVM compiler and off they go. Microsoft simply decided to provide most of their tools free of charge in order to attract people to their platform. Blazor is another great example of how they are shifting and embracing this brave new open world.


WWDC 2017 – And so it begins!

This year’s WWDC Keynote is only hours away and with registration completed, you can feel the excitement in the air in San Jose. Thousands of talented engineers are eagerly awaiting for this year’s announcements. Let a week of coding begin! Have a great week everybody.

WWDC 2017 – Predicitions

June is upon us and so the annual pilgrimage to California is about to start. I am one of 5,000 randomly selected engineers that will descent to San Jose, CA this year to spend a week learning how to build a digital future on Apple’s platform in the year to come. It’s an insane week with 15 hour days. Sessions & Labs that stretch for 10 hours each day, followed by the necessary evening networking events. It is a very long, but exciting week for all who attend. My predictions (and hopes) this year for what we can expect are:

– iOS 11
– macOS 10.13
– watchOS & tvOS upgrades
– Upgrades to Xcode & Swift
– Siri Speaker??????
– More Siri APIs????
– Server-side Swift????
– New MacBook Pro machines???????

After almost 15 years, WWDC has been moved back to its original hosting place, San Jose. Apple has hosted the event in San Francisco since 2003. Hope you all know the way to San Jose!!!

Yandex stretching your site like Spandex?!?!

So you have built your great new wine selling site. You made sure you have used only the best practices. You invested time in making sure your software engineers used the best frameworks available to them. Your UI engineers have ensured that your site is fully responsive and will provide your users with the best possible user exprerience on any device. Whether it is a mobile phone, a tablet, a fridge door with internet connectivity or even something as exotic as a desktop computer – they made sure your site is accessible and designed to ensure optimal performance. But what if you are a bot? No really what if you are a bot? A search engine bot – say like googlebot or yandexbot? After all you want your users to find your site on their favourite search engine, so you made sure that all your links are crawlable and provided with a reasonable robots.txt file? But are you sure you haven’t provided far too many links?

So your site sells wines from all over the world. Imagine a global wine selling site, where every vineyard can sell directly to its connoisseurs. Your site allows your users to:

– Search for wines by name, or colour (for simplification reasons)
– View wine prices in local currencies (25 major currencies)
– View wines in their local language (20 major languages)
– And sort these results by price

Clearly you anticipate that the site will be a massive success, hence why you made sure caching is used properly to ensure optimum performance. But how much can you cache?

Let us assume that you have managed to sign up 1,000 vineyards from around the world. And all of these sell three types of wine (white, red and rose). So your site can sell 1,000 x 3 = 3,000 unique bottles of wine. Each of these bottles comes with a great description, ratings and various tags. Let us assume that each wine has 200KB of data attached to it. So far your site can actually return results of 3,000 bottles x 200KB = 600,000KB (600 MB) of data. So great you can cache all of that and your site will be super fast. But what about the currencies and sorting? Ah yes well that will create more unique cached result sets. Actually a lot more! 20 languages x 25 currencies x 2 sort directions x 600 MB = 600,000 MB (585 GB). Can you still cache all of that? No you can’t. But then you most likely don’t need to. Most users will not convert the prices nor change the sorting too often. You can afford to produce these result sets when needed and cache for a short time.

What about bots? Have you made sure that all your links have rel=“nofollow”? Yes all your A tags have that attribute, but what about your input select tags that you included for your mobile users? These cannot have rel=“nofollow”. And that will cause bots to crawl your site for all of these extra links that don’t really alter the results sets and don’t really add any SEO value. Initially your site will perform fine but over time it will start to buckle a bit. If bots are finding all your currency and order parameters in your URLs then your servers will start to cache slowly more and more data. And because it is highly impossible you will have 1TB of RAM you will start running out memory pretty quickly. Which means your system’s page file will start coming into use and that’s when your site will really slow down. Well until of course bots like google realise this and slow down their crawl rate to allow your site to catch up or maybe they don’t? Some bots, like Yandex, will actually do 20-30 simultaneous calls to your site. Can you imagine the load?

So please make sure of the following:
– All your non result altering links (sorts, currency conversions, locales) need to have rel=“nofollow”.
– If you need to provide a select type of link options, then use javascript to construct them. Hence not allowing the bots to crawl them.
– Upload an appropriate robots.txt file to your site. Ensure you exclude params in them and even set the frequency of querying. Some bots, like Yandex, allow you to slow down the crawl by providing extra params in your robots.txt file.

User-agent: Yandex
Crawl-delay: 4.5
Clean-param: curr&rad&locale

By adding the above statements to your robots.txt you are telling Yandex to allow at least 4.5 seconds between calls to your site and to ignore the specified params. This doesn’t mean that your site will be crawled every 4.5 seconds.

I hope this will help you to not allow bots to control and “stretch” your site’s resources.

Love Sonos, Love AirPlay = AirSonos

I love my Sonos Speakers and I love my Apple devices. But most of all I love the simplicity of AirPlay. Unfortunately I hate the Sonos software. It’s difficult to use and doesn’t integrate well with other services such as Spotify. 

So why not use AirPlay directly from my iPhone or iPad to play music to my Sonos speakers? Well the answer is simple. Sonos chose to not include the necessary hardware and software components needed in their speakers. I don’t really know why, except for the cost of licensing from Apple. For those of you waiting for native AirPlay support from Sonos, that won’t happen. Well not for existing systems anyway. AirPlay does require hardware components as well as software to work.

Enter AirSonos…

AirSonos is an open-source free server that adds AirPlay support to your Sonos devices on the network. The only catch is that you will need to have your Mac running if you want this work all the time. But small price to pay for AirPlay!

So here’s a step by step guide to getting up and running in no time:

1. Download and install Node.JS (a JavaScript open-source, cross-platform runtime environment for server-side applications). This also include ndm (a Node.JS download manager – needed for installing and running AirSonos).

Downoload the files here (Mac OS X Installer (.pkg) – Universal is what you need for Macs)

2. Once downloaded, install the package. Make sure you use the default settings.
3. Start the Terminal App.
4. Type sudo npm install airsonos -g (enter your account password when prompted). The install will take a while (note an Internet connection is needed).

5. Once that is completed, just type airsonos and voila, you will see all your Sonos devices visible in the prompt. Note that this must remain running if you want to have access to them from your iDevices as well as any other Macs.

6. Now open your AirPlay menu on any iDevice and you will see your Sonos players there (might take a few seconds).
7. If you want to run this more easily then simply create a new plain text file in TextEdit (make sure you switch to Plain Text (in the Format menu). Type airsonos in the document and save it on your desktop as airsonos.command. Then grant this file execution rights from the Terminal (navigate to your Desktop folder) and type
chmod u+x airsonos.command

8. Then double click the file and there you have!

You can read and contribute to the project here.

Enjoy your music!!!

Objectively Patterned – Singleton

In this series of blog articles I will try to cover a number of very important software design patterns, that every developer should have in their toolkit. Design patterns are highly reusable solutions to common software design problems. At their core they are just simple code templates that have been designed to help engineers write clean, reusable and easily understandable code. Most, if not all, design patterns apply across all modern object-oriented programming languages. Despite that, I will be using my favourite one, Objective-C, for this series of articles.

In this article we will cover the Singleton pattern.

The Singleton pattern makes sure that only one instance of a class can ever be initialised. This is extremely useful when you need a single global access point to an instance of a class across your system. There are numerous examples of the Singleton pattern used across Cocoa Frameworks. For instance [UIApplication sharedApplication] is an example of a Singleton object.

Let’s assume we are building a download manager. This class allows you to add items to a queue for downloading from a specified URL. You will want the process of downloading to be accessed in global fashion from any part of your application. That way you can provide feedback on completion and progress as well as access for adding items to the queue.

The code below assumes you are familiar with GCD (Grand Central Dispatch), Apple’s concurrent code execution framework for iOS and OS X. You can read more here Also we will be using Blocks. Blocks are similar to C functions but on steroids! You can read more here

Take a look at the code below:

@interface DownloadManager : NSObject
        + (DownloadManager *)sharedDownloadManager;
        – (
void)addToDownloadQueueWithUrl:(NSURL *)url;

+ (DownloadManager *)sharedDownloadManager
        static DownloadManager *sharedDownloadManager = nil;
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
sharedDownloadManager = [[self alloc]init];
return sharedDownloadManager;

Let’s break up the above code and see what’s going on:

Firstly we declare a static variable that will hold our instance and make it globally available within our class.

        static DownloadManager *sharedDownloadManager = nil;

Then we declare a static dispatch_once_t variable. This predicate will ensure that our initialisation code will execute once and only once for the lifetime of our application.

Finally we use GCD’s dispatch_once function to execute a block of code that will initialise our instance of sharedDownloadManager. GCD ensures this is done is a thread-safe manner. So next time the [[DownloadManager sharedDownloadManager]is executed it will initialise an instance of our class. Subsequent calls will always return a reference to the previously created instance. You can now safely call any instance function of this class, knowing that you are working against one global instance. Of course you can expand the above code to add your own custom initialisation code as well.

Simple UIView Animations – Part 2

WWDC 2012 registration has now opened! But I still have time for coffee at the Ferry Building and a quick second tutorial on UIView Animations.

In this tutorial we will build on top of our last sample. So far we have managed to fade in a picture on our App’s main UIView. Now we will go ahead and make things a little bit more interesting by mixing UIView animations and CoreGraphics transformations. This is a very simple yet very powerful technique. Let’s go ahead and rotate our image.

Our UI is now slightly changed. We have added a new “Rotate Photo” button, which when tapped it will make the photo of the Golden Gate Bridge rotate by 180 degrees (upside down). Of course the rotation will be animated and last one second.


Let’s take a look at the code.

– (IBAction)btnRotate:(id)sender


[UIView beginAnimations:@”imgPhoto Rotate” context:nil];

[UIView setAnimationDuration:1.0];

CGAffineTransform transform = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(180));

self.imgPhoto.transform = transform;

[UIView commitAnimations];


As in the previous sample, we declare our UIView animations and the only difference here is that we define a CoreGraphics affine transformation matrix. By using the CGAffineTransformMakeRotation we are defining an affine transformation matrix constructed from the given rotation value. The value is in radians. To simplify this, you can define a DEGREES_TO_RADIANS macro that converts degrees to radians:

#define DEGREES_TO_RADIANS(angle) (angle / 180.0 * M_PI)

Again please remember that had you not included your transform in a UIView animation it would have simply rotated the image instantly without animating the effect. So go ahead and have fun with this.

In the next tutorial we will start combining multiple control animations!

Off to register at Moscone West!

Simple UIView Animations – Part 1

Hello from 38,000 feet somewhere over British Columbia, Canada en route to San Francisco to attend this year’s WWDC. In this series of tutorials we will look at some basic UIView Animations. UIView is an exceptionally powerful class that is pretty much the basis of everything UI in iOS. Pretty much every UIKit control inherits from UIView. UIView is the silent underdog of the UIKit. Not many people respect it and sometimes forget how powerful it actually is and how much it can simplify their lives. I’ve seen a lot of engineers diving straight into using CoreGraphics or CoreAnimation when a similar, if not identical, animation could be achieved using UIView and nothing but UIView. Please do not think that CG and CA are not useful, on the contrary but iOS and CocoaTouch are all about simplicity. If a solution to a problem is becoming too complex, then either the problem is not broken down sufficiently, the solution is wrong or a mixture of both.

So let’s look at some simple UIView animations. Please note that for the purposes of this tutorial, the use of ARC is assumed. The following is not encouraged in iOS 4.0 and above, instead you should aim to use block-based animation methods instead. This tutorial is using non block-based examples for simplicity.

Fade In Animation

The first animation is a simple Image Fade In. The screenshot below shows the final stage of the animation. When first loaded the envelope image is not visible until the button below is tapped. Once that is done the image will fade in slowly. The animation duration will take one second to complete. Of course the duration is completely configurable.


Let’s take a look at the code for this sample:

Header file:


// ViewController.h

// animationSample


// Created by Joseph Megkousoglou on 09/06/2012.

// Copyright (c) 2012 Joseph Megkousoglou. All rights reserved.


#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property (nonatomic, strong) IBOutlet UIImageView *imgPhoto;

– (IBAction)btnShow:(id)sender;


Source file:

#import “ViewController.h”

@interface ViewController ()


@implementation ViewController

@synthesize imgPhoto = _imgPhoto;

– (void)viewDidLoad


[super viewDidLoad];

        // Do any additional setup after loading the view, typically from a nib.


– (void)viewDidUnload


[super viewDidUnload];

// Release any retained subviews of the main view.


– (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation


return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);


– (IBAction)btnShow:(id)sender


[UIView beginAnimations:@”imgPhone Fade In Animation” context:nil];

[UIView setAnimationDuration:1.0];

self.imgPhoto.alpha = 1.0;

[UIView commitAnimations];



The above code is pretty simple, but let’s go over some finer details. First of all you are starting by letting the compiler know that you want to perform an animation. You do this by calling:

+ (void)beginAnimations:(NSString *)animationID context:(void *)context

This is a very trivial class method of UIView you are calling, but it is the beginning of the animation magic! If your application has many different animations, it is advisable to pick a descriptive “animationID” as this will come in handy if you wish to debug this animation later on.

+ (void)setAnimationDuration:(NSTimeInterval)duration

setAnimationDuration allows you to specify how long you want this animation to last. The duration is measured in seconds.

+ (void)commitAnimations

Finally this how you tell the compiler that you are finished with your animation.

So here’s a couple of points so far. All these methods are class methods, because they will apply the animation to the current view. Secondly all the “stuff” you want to animate can now be easily included in between the begin and commit methods. This example only demonstrates the animation of a single control, but you can animate as many controls as you want in a single animation. Just remember that all the animations will take the same amount of time to complete.

So in this example all we are doing is setting the alpha value of the image from 0 to 1. This will result in the image becoming completely visible. If we just set the alpha value outside of a UIView animation it will just make the image instantly appear. By setting the value within the animation methods, we are telling the framework to slowly make the image visible over a period of one second. Basically imagine running a for loop from 0.0 to 1.0, incrementing the alpha value just the right amount in every iteration in order to reach 1.0 in one second. This is how you get to realise how powerful UIView’s animations are. If you were doing this manually you would need to keep track of the state of the control, ensure that it takes exactly one second (so you would have to ensure that the increments are specific to the performance of the device as some older iOS devices could take longer to execute this), and of course do all of this in a completely separate thread so the main UI thread is not blocked.

I hope this first tutorial gives you a first glimpse of how powerful UIView is. Of course you are only limited by your creativity in what you can do within the “begin” and “commit” methods! Have fun!!!

More coming soon!

WWDC 2012 – Minus 4 days

4 days until this year’s Apple WWDC in San Francisco. This is a very special WWDC indeed as it will be the first post-Steve WWDC, where Tim Cook is expected to give the Keynote address. As always there are tons of rumours flying about. Here’s my predictions for what will be announced:

  1. Mountain Lion – this is a given, but we will get even more details on new features and APIs available.
  2. iOS 6 preview – it will come as a great shock to everyone if Apple doesn’t preview this during the keynote.
  3. Google Maps replacement APIs. MapKit is to be revamped to work with the new alleged Apple mapping service.
  4. New hardware – not sure on this one. If any hardware is demoed it will be the new iPhone. I am not expecting new computer models to be released.

Let’s be realistic. This year’s keynote is what? An hour and a half long? Well I bet only 2 topics will covered. Last year’s keynote was 2 hours and only 3 topics were covered: Lion, iOS 5 and iCloud.

Very exciting never the less, as tons of new APIs are too be announced in iOS and OS X!!! Looking forward to new MapKit and Facebook APIs.

See you all there in 4 days!!!