programming

Compiling TypeScript files on Azure Web Apps

Your TypeScript project shouldn’t have JavaScript files in the repository. It may be problematic when you want to deploy your site from git repo on Azure Web Apps. You may consider adding some custom scripts, but there is a better way: use npm postinstall.

I have created a simple TypeScript project, put it on github, and deployed to tscpostinstall.azurewebsites.net

You can check out how to deploy Azure Web App from github in one of my Azure Tips & Tricks videos:


Web Accessibility Hacker Way

web accessibility meme

Have you heard about accessibility? Do you know what that is? Do you know what it takes to make your website accessible?

Making your website accessible means providing the ability for everyone – regardless of disability or special needs – to use it.

Unfortunately, if you put together all accessibility specifications and print it, the stack will be higher than CN Tower in Toronto:

CN Tower (Toronto)

This is not very encouraging. Many people think that it is not worth the effort because the customer base with special needs is significantly low. However, there is a thing called situational disability that applies to all of us. Moreover, when we are building our websites with accessibility in mind, we make them better for everyone. Why? Because everybody is more comfortable when allowed to fill out forms on a website using just a keyboard (without mouse) and able to switch between fields fast. Generally, everybody likes it when the focus is set on the search bar for sites because 99% of the time, the first thing you do is search for something. Everybody likes properly matched colors (accessible contrast).

How do you get started? How to survive without reading tons of specifications?

3 steps to fulfill 80% standards with 20% effort

  1. Make your website usable with keyboard only:
    • make sure that focus outline is visible all the time and user can determine which element is currently focused
    • no extra/unnecessary TAB stops
    • no tabstop traps (when you cannot get out of an element with the keyboard)
  2. Implement smart focus management:
    • set focus on appropriate elements after user actions (e.g., when a user navigates to a page with a login form – set the focus on the login text field; in 90% of the cases the next user action will be entering the login)
    • restore focus to appropriate elements after user actions (e.g., when a user closes a menu, focus should be restored to the element that was focused on before opening the menu)
    • make tab order user-friendly (remove non-actionable and non-informative tab stops)
  3. Make your website usable with screen reader:
    • When element gets focused, screen reader should provide meaningful information to the user (e.g., “image Satya Nadella” when focused on Satya’s image, or “menu collapsed” when focused on dropdown menu)
    • Min bar: make it good enough with one screen reader and one browser first. As of 2016-08-22 the best browser + screen reader combination is Firefox + NVDA (it has a text mode that prints output instead of converting it into speech: Tools -> Speech viewer)
    • Add aria tags to elements only when the screen reader cannot infer information from HTML (e.g., button element does not need role=’button’ as screen reader will infer it)

Good to know

  1. Don’t focus too much on “being compliant to the standards” at the beginning. Just use the common sense and your intuition. You can deep dive into the standards later on.
  2. Make your website’s most common scenarios work well first and focus on less popular pages later.
  3. Only 20% of accessibility requirements can be verified by tools. The rest has to be verified manually by:
    • yourself
    • user study
    • an accessibility expert

Resources to get started

Summary

If you are web developer you probably like when the tool you are using enables you to do everything without the mouse. This is thanks to keyboard accessibility, and smart focus management. If you play with color contrast analyzer you will notice that colors with good contrast are easier to read and simply just look better. Be aware that accessibility is about performance first. When your website is slow it can lead to unexpected focus behaviors, unwanted user actions, or moving content. How many times you tried to scroll to some part of website and it was moving because images were loading? I’m sure a lot.

What do you think? Is the website you are working on accessible? Have you ever even thought about it?

Accessibility all the things


Azure Portal – the largest Single Page App in the World

Azure Portal - dashboard

Last week I had a pleasure to attend and present the Azure Portal insights at the Visual Studio Live conference in Redmond.

Throughout the conference, 5 sessions were being presented simultaneously, and 1 session was being streamed live. My session was chosen to be streamed live, and is now available on channel9:


I updated this session since the last time when I presented it at NDC London. I restructured it, added more demos, and new section with performance tips&tricks that you can apply in your project. I encourage you to check it out!

I received a lot of great feedback after my session:

Visual Studio Live session feedback (Hanselman)

Visual Studio Live session feedback

Now, I am waiting for YOUR feedback. Leave it in comments or tweet me at @JakubJedryszek. What did you like, what did you not like, what would you like to see that I haven’t show?

You can also check out other recorded sessions from VSLive at channel9.

I really enjoyed this conference. I had opportunity to meet many interesting people with passion in Software Development. From marketing people, through Software Developers, to CEOs and CTOs.

Interesting fact I learned from two gentlemen working as Software Engineers at Panama Canal: it cost hundreds of thousands of dollars to cross the Panama Canal once!

Panama Canal


Getting started with Xamarin in 2016

Xamarin

Xamarin is a cross-platform mobile development framework that allows you to build native mobile applications with C# and share code between them. There are two approaches:

  • native Xamarin – write native UI code in C# (views cannot be shared, business logic can be shared)
  • Xamarin.Forms – write shared UI in XAML (native controls are being generated, and business logic can be shared as well)

Xamarin vs Xamarin.Forms

The beauty of the first approach is ability to take advantage of Swift (iOS) or Java (Android) code samples, documentation, and community support. Swift/Java code can be easily translated into C#. In Xamarin.iOS app you have storyboards, ViewControllers and everything else you know from native iOS development. Similarly in Xamarin.Android – there are activities, fragments, action bars etc.

Xamarin.Forms on the other hand allows you to build apps faster. It’s very good fit for business applications.

Which approach should you choose? Ask StackOverflow.

Resources to get started

The great way to get started with Xamarin is Xamarin University. You can also find variety of Xamarin courses at Pluralsight. I especially recommend Building Your First Xamarin.iOS App from Start to StoreBuilding Your First Xamarin.Android App from Start to Store, and Introduction to Xamarin.Forms.

Friend of mine, James Montemagno (Developer Evangelist at Xamarin), runs video series Motz Codes Live where he explores different areas of Xamarin: from internals of MVVM, through Xamarin Inspector, to using Azure as backend for Xamarin mobile apps. You can also find a bunch of his videos from variety of conferences on youtube.

Additionally, there is a bunch of guides, recipes, and samples at Xamarin website. The official documentation is also a good source of knowledge.

Many of you were asking about Xamarin.Forms on reddit. A lot has been changed in this area as well. Check out the latest, greatest Xamarin.Forms update from James on .NET Rocks:

Code sharing strategies

One of the main advantages of Xamarin is code sharing. There are two ways to share code across platforms:

  • Portable Class Library (PCL) – produces separated .dll
  • Shared Project – compiled into one assembly with platform specific projects (you can think about files in shared projects as they all are present in all platform specific projects)

Most important differences:

  • PCL can have referenced libraries, while shared project cannot.
  • When we want to test shared code then in PCL case it is enough to reference PCL project only in the test project, while shared project requires additionally to add reference for all references that are being used by Shared Project.
  • You cannot have platform specific code in PCL, while shared project allows that using compiler directives.

You can learn more about code sharing here.

Two apps – two approaches

A few months ago I created two mobile apps with Xamarin, for 3 platforms (iOS, Android, UWP) and published them to 3 stores (App Store, Google Play, Windows Store):

  • Shopping Pad – smart shopping list that allows you not only to create a shopping list, but also remembers items that you have purchased in the past, how often they have been purchased, and based on that suggests items for your next grocery store trip.
  • Bread Crumbs – enables you to save your current location, and you can navigate to it later on (useful if you are in the new city, and you want to comeback to some place that you are “currently at”)

In Shopping Pad I used Portable Class Library to share code between platforms. In Bread Crumbs – Shared Project. I used SQLite for persistence in both apps, and the only difference I experienced was in creating SQLite connections. In PCL you need to create connection on “platform project” (you cannot do it from PCL). Shared Project allows you to use conditional compilation, and instantiate connection(s) in one file (using compiler directives).

I created unit tests (with xUnit) for Shopping Pad, and I was able to test entire app logic (for 3 platforms!) with only one test project. No platform specific code. Awesome!

Many times when I was looking for a solution to particular problem, I was able to reuse native iOS (Objective-C/Swift) or Android (Java) code samples, and translate them into C#.

Even for these two, small apps, shared code reuse was significant during development process. Especially in keeping consistency across platforms.

Both apps are available on App Store, Google Play, and Windows Store (Shopping Pad, Bread Crumbs).

Tips & Tricks

The struggle you may (and you probably will) experience at the beginning is platform setup. I recommend you to use Visual Studio simulators for Android (with Hyper-V) – they are faster. You need to have XCode installed on your Mac in order to run iOS apps built with Xamarin.

I develop Xamarin apps with Visual Studio on my ThinkPad X1, and use Mac only as host for running iOS apps. Some people run Windows on Mac with Parallels. Others use Xamarin Studio for iOS and Android, and switch to Windows only for UWP development. This will minimize the number of configuration issues, but will also give you worse development experience. I find Visual Studio much nicer for C#, and also for Xamarin development.

Xamarin – Windows Setup guide and Xamarin – Mac OS X Setup guide can help you get through configuration process. There is also fresh post from James about Setting Up Xamarin on Surface Book.

During mobile apps development with Xamarin you will encounter some problems that will not occur when developing pure native apps with Swift and Java. To save you some time, here are the list of a few of typical problems, together with solutions:

  • Problem: connecting with iOS host sometimes will not work. Solution: update your Mac (and XCode), update Xamarin plugin for Visual Studio, make sure your XCode path in Visual Studio settings is correct, and restart both machines. If it does not help check other solutions here.
  • Problem: iOS simulators not visible in Visual Studio. Solution: link.
  • Problem: Error: “Failed to add reference to ‘System.Collections’. Please make sure that it is in the Global Assembly Cache.”. Solution: add, manually, Droid/iOS dlls to references.
  • Problem: free provisioning Xamarin.iOS app. Solution: this guide.
  • Generic solution for many problems: restart Visual Studio (seriously, I’ve seen many StackOverflow questions where somebody was wondering why something does not work, and then “oh…after restarting Visual Studio it started working”).

One, not Xamarin specific tip: if want to have relations in SQLite database? Use SQLite-Net Extensions.

Publishing apps to stores

Android – bananas! Seconds for auto-validation, and ~3 hours to the store. I didn’t encounter any problems except copyrights for Bread Crumbs app icon, which I had to change. It was automatically detected! Impressive! This guide is more than enough to guide you through the process.

iOS – ~20 minutes for auto-validation, and ~4(!) days to the store. You can check current wait times here. Creating app bundle might be a little bit challenging. I was able to figure it out with Xamarin guide and this gist (I recommend option 2).

Windows Store – ~3h for auto-validation, and ~1 day to the store. I had my apps rejected, despite the fact that they were working on Windows machine, and on Windows Phone Device (Lumia 920). There were 2 issues:

  1. Referencing incorrect SQLite assembly: “SQLite for Universal App Platform” instead of “SQLite for Universal Windows Platform”.
  2. I didn’t test apps with with .NET Native (Project properties > Build > Compile with .NET Native Tool Chain), and one app was crashing during verification process. After debugging with .NET Native I was able to repro, diagnose and fix the problem.

Summary

Xamarin is not only sunshine and rainbows. You will have problems you wouldn’t when developing native apps, but also – you do not have some problems you would have when developing native apps. Check discussion about pros and cons of using Xamarin at Hacker News: Some thoughts after (almost) a year of real Xamarin use.

Be aware that there are also other cross-platform mobile frameworks, e.g., Apache CordovaReact Native, or NativeScript .

Since this year, Xamarin is free for Students, OSS projects and small teams (up to 5 people). You can use Visual Studio (including free Visual Studio Community Edition) or free Xamarin Studio Community Edition. That means – now you can use Xamarin for FREE!

Happy development!

Let me know in comments if you have any questions about developing apps with Xamarin!


How to save money on Azure with WebJobs

This blog is hosted on Azure. It is using WordPress, which stores its data in MySQL database hosted by ClearDb. I blogged about the issues with WordPress database size over a year ago. The issue is inserting transient entries into database that are growing its size and exceeding free 20MB ClearDB limit. As I mentioned in this blog post – you can use plugins that clear database for you, or…you can use web jobs. Azure WebJobs is very neat way to perform custom tasks, such as database maintenance, periodically.

I created a web job that is performing database maintenance for me. Everyday it removes ‘transient’ entries from wp_options table to keep my MySQL database under 20MB ClearDB limit.

One problem was: how to do MySQL backup without mysqldump? As you know, there is a Virtual Machine underneath every Azure website. And this VM has MySQL, along with mysqldump installed:

Azure Console: mysqldump

Based on this article I created a small Console App called DbMaintenance that performs 3 mentioned tasks:

  1. Backup database
  2. Remove transient entries from wp_options table.
  3. Backup database

Two backups gives me more confidence that I have my database backed up correctly. Especially because I am performing them before and after the operation that potentially can broke things.

You can customize my app by editing Initialize method. Current paths (for mysqldump and database backup directory) are set for Azure Website. Additionally you have to create directory for backups (D:\home\db-backups). You can do it from the web app console available on the Azure Portal:

mkdir D:\home\db-backup

Once this is done, you need to zip DbMaintenance.exe and MySql.Data.dll file, and create a WebJob. On the Azure Portal go to your web app -> Settings -> WebJobs, and add a new WebJob:

Azure Portal: add WebJob

You can see the status in Settings -> WebJobs -> YOUR_JOB_NAME:

azure webjobs

By clicking on logs column, you can get details about web job:

Azure WebJob: details

And console output from each execution:

Azure WebJob: console output

I configured my WebJob to run everyday. You can also run it on demand, or continuously.

You can find more about Azure WebJobs in this article.