• info@happli.be

Blog

Angular 2 – ngx-datatable – ViewEncapsulation

To me, switching from AngularJS to Angular 2 is not as simple as one would think.

It’s still a bit unclear to me as how webpack gathers every dependency. I learn a bit more about it every time I code in Angular. Last challenge I faced was integrating a datatable component, namely ngx-datatable ( and check out their demo), in an Electron App (built using Angular 2 for a customer).

I’ve tried first adding the required CSS to the webpack.config.js class (I had to eject the config and now I build my app using “npm run…”). No luck.
I then managed to pack everything in the generated bundles by including the relevant styleUrls in my app.component.ts:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css',
     "../../node_modules/@swimlane/ngx-datatable/release/index.css", 
      "../../node_modules/@swimlane/ngx-datatable/release/themes/material.css",
      "../../node_modules/@swimlane/ngx-datatable/release/assets/icons.css"
    ],
  })

With these styles referenced, everything got bundled (you can check that with the developers tools when your app is started). Still I couldn’t get the styles to apply in one of the components (app.clients.ts) of my app.

It’s because of the view encapsulation. For more info, read https://github.com/AngularClass/angular-starter/wiki/How-to-include-SCSS-in-components and https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html.

By overwriting the default view encapsulation, styles get applied globaly. So, the styles referenced in app.component.ts are applied to the app’s other components (e.g. app.clients.ts mentioned earlier). The snippet below shows the option usage.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css',
     "../../node_modules/@swimlane/ngx-datatable/release/index.css", 
      "../../node_modules/@swimlane/ngx-datatable/release/themes/material.css",
      "../../node_modules/@swimlane/ngx-datatable/release/assets/icons.css"
    ],
   encapsulation: ViewEncapsulation.None
  })

After that, the table styles were applied to the ngx-datatable used in the app.clients.ts component.

Samsung T3 – don't use ExFAT on Mac !

So far I’ve been running a Windows 10 Parallels VM full of Dev tools from my Macbook’s SSD, but as I’m running out of space I’m looking for solutions. In my previous post I explored the option of putting the Parallel’s pvm file on a Transcend JetDrive Lite 360 (256 GB). The conclusion was that the speed wasn’t sufficient for my daily work. So I resorted to trying an external drive. This is was this post is about: evaluating the Samsung T3 external SSD drive.  Criterias are the same as in the previous post. I’m evaluating:

  • the compilation speed
  • the time it takes to run all the tests in my Visual Studio solution
  • the benchmark results of CrystalDiskMark

I bought the drive for about 120€. It’s an SSD drive, with a capacity of 250 GB, USB 3.1 connectivity and it’s not too cumbersome.

 

Samsung T3 drive

Samsung T3 drive

Compiling the Visual Studio solution

This is the time it took to rebuild the whole solution. Time was measured with BuildMonitor (a Visual Studio extension). Times are expressed as MM:SS (minutes:seconds).

  • From the Macbook’s SSD: 00:12
  • From the T3: 00:12

No notable difference in compilation time.

Running the tests

This is quite a big set of integration tests. They take a while to execute (I know I should work on it).

  • From the Macbook’s SSD: 03:40
  • From the T3: 02:09

The T3 is significantly faster in this scenario.

CrystalDiskMark benchmark

The benchmark results illustrated below show that the writing speeds of the Macbook’s internal SSD are faster.

CrystalDiskMark benchmark of the SSDCrystalDiskMark benchmark of the SSD

CrystalDiskMark benchmark of the SSD

CrystalDiskMark benchmark of the T3

CrystalDiskMark benchmark of the T3

Conclusion

Even though the benchmark shows slower writing speeds for the T3, my daily tasks don’t seem (compile, test) to run slower.  Visual Studio even tends to perform better when run from the T3.

But pay attention, I had to reformat the drive. At first I found it very very slow. I was a bit disappointed (it was my second attempt at getting a solution for the same storage problem and I failed again) so I googled with a few keywords and BAM: a first hit solution. This article from the Parallels KB made my day. It’s a known problem when the drive on which the VM runs is formatted as exFAT (which was the case of the T3). I had to reformat it to Mac OSX Extended and it worked. Great speed and experience.

The Samsung T3 external SSD drive seems to be a better alternative than the JetDrive Lite for running a Virtual Machine in a developer context.

I’ll give that solution a go.

Transcend JetDrive Lite 360 256GB: Developer review

I’ve got a Macbook Pro that I use for developing apps cross-platform apps.  It’s a been a great tool so far. I’ve got a Windows 10 running as a Parallels VM and there are plenty tools installed on that VM. Everything that a modern .NET Developer needs (Visual Studio, Git…). I came to the point that I’m running out of free disk space on my macbook’s SSD.

So I started to look for an external storage solution.

  • I wanted something fast (I would put my VM on it)
  • I wanted a compact solution (I carry my Macbook very often, and didn’t want to have to take an external hard drive and its cable with me all the time)

I found that Transcend produces the Transcend JetDrive Lite range. These are tailor-made sd cards for Macbook. They have a specific size so that they do not protrude.

The card has a special size

Special Format

JetDrive Lite 360 256GB inserted in a Macbook Pro

JetDrive Lite 360 256GB inserted in a Macbook Pro

I went for the 360 as I own a mid 2015 Macbook Pro (you have to pick the right model depending on your Macbook). The Transcend JetDrive Lite 360 offers up to 256 GB of storage.

After plugging it into my Macbook, I copied my Parallels VM (a 140 GB .pvm file) from the Macbook SSD onto the JetDrive card. Then I started that VM from Parallels. The boot process seemed slower than from the SSD.  Then I started Visual Studio 2015, opened a solution file composed of several projects. It seemed slower to compile as well. Then, I ran a subset of the NUnit tests contained in that solution (117): it was obviously much slower.

Today, I decided to measure the time it took from the SSD and from the JetDrive Lite so that I could have a better idea of how bad that was. Nothing too scientific. It was all about deciding if I would accept working daily with that setup or if it was definitely too slow. The tasks I measured were the following:

  • compiling the solution file (mentioned above)
  • running the NUnit tests

Here are the results.

Compiling

This is the time it took to rebuild the whole solution. Time was measured with BuildMonitor (a Visual Studio extension). Times are expressed as MM:SS (minutes:seconds).

  • From the Macbook’s SSD: 00:12
  • From JetDrive Lite: 01:17

The JetDrive Lite is 6 times slower at compiling the same solution.

Running NUnit tests

This is quite a big set of integration tests. They take a while to execute (I know I should work on it).

  • From the Macbook’s SSD: 03:40
  • From JetDriveLite: 07:45

The JetDrive Lite is twice as slow as the SSD at this task.

Disk access benchmark with CrystalDiskMark

Even though SSD’s are obviously faster than SD cards, I decided to benchmark the disk access just to get an order of magnitude. I used CrystalDiskMark, from the running VM (under Windows 10). Here are the benchmark results.

CrystalDiskMark benchmark of the SSDCrystalDiskMark benchmark of the SSD

CrystalDiskMark benchmark of the Macbook’s SSD

CrystalDiskMark benchmark of the JetDrive Lite

CrystalDiskMark benchmark of the JetDrive Lite

The JetDrive Lite 360 is a lot slower at writing than its SSD rival.

Conclusion

Even though Transcend doesn’t recommend installing an OS on its JetDrive Lite, I gave it a try in the context of a VM. I wanted to try the SD card solution, even though SSD’s are obviously faster than SD cards, because the option wasn’t too expensive. Still I’m bit disappointed. I think this could be a good solution for some kind of permanent storage, but not for running resource consuming tasks.

I’m still stuck with the same problem of insufficient disk space on my Mac. I’ll have to try different strategies. I’m thinking of:

  • reducing the SmartGuard snapshots retention
  • having a separate virtual Hard Drive (stored on the JetDrive) for my Windows 10 VM and reinstalling dev environments on that separate Hard Drive
  • resorting to using a USB 3 external hard drive that I would have to carry.

Visual Studio – Web Applications : Always debug in Chrome with developer tools open

If, like me, you’re getting bored( it’s just a press on F12 but anyway) of manually having to open the Chrome Developer Tools when you start a new debugging session for a Web Application from Visual Studio, the following trick might help.

We’ll simply tell Visual Studio to pass a specific argument to Google Chrome when it starts it for debugging. That argument is –auto-open-devtools-for-tabs (credits: http://stackoverflow.com/questions/12212504/automatically-open-chrome-developer-tools-when-new-tab-new-window-is-opened)

To let Visual Studio know about that, expand the list of browsers that can be used for debugging and click on “Browse With”, as shown below. In the pop-up that should open, click on “Add”.

List of browsers that Visual Studio can use for debugging

List of browsers that VS can use for debugging

In that pop-up, specify the path to Chrome’s executable file and the argument that VS must pass to it.

Add new browser for debugging

Add a new browser for debugging

You should then confirm and end-up with such a list of browsers. You can set the new browser as the default one (the one that will be used by default when starting to debug your web app).

Add a new brower

This is how it should look now

Then test it. If Chrome was already running, close all its instances (processes included) then start debugging.

Such a trick was used by Scott Hanselmann in the following post http://www.hanselman.com/blog/VisualStudioWebDevelopmentTipAddChromeIncognitoModeAsABrowser.aspx

 

On Windows like on Mac: Desktops and Spaces

If like me you spend your freetime on a Mac but work on a Windows machine, You might miss the Spaces feature during work hours.

If you don’t know what Spaces is, check it out.

Wanna get a similar experience on Windows?  Try Desktops from Windows Sysinternals.

Creating a new desktop is easy, switching between them is as well. No setup required, no admin rights either. Just run the executable file and that’s it!

I wish I had known that before.

Move an existing Git Repository to Visual Studio Team Services

Say you’ve been working on a project for a while. That project is not an open-source project. The source code is private and owned by your customer. You’ve been working alone so far, thus having a Git Repository hosted on a NAS and exposed through some VPN or WebDAV way (http://happliblog.azurewebsites.net/2015/09/07/setup-git-on-synology/) used to work a threat.

But someone joins the project. You have to give him access to the project’s source code, but you don’t want him to reach your NAS (additional trafic, security risks…). So you think about moving your repository to an online hosting. Several options exist out there. I considered two of them: GitHub and Visual Studio Team Services.

This post describes the platform I choose and how I “uploaded” my repository to the chosen hosting service. It then show how to add a team member using the selected platform.

GitHub vs VS Team Services

Pricing

Neither solution are free.

GitHub has a free offer for public repositories. But this isn’t an option if your code must remain private. Paying for the private repositories will cost you 7$/month.

GitHub pricing Details

GitHub pricing Details (https://github.com/pricing/plans)

Visual Studio Team Services (VSTS) is free for up to 5 users. Repositories are private.

Visual Studio Team Services pricing details

Visual Studio Team Services pricing details (https://www.visualstudio.com/pricing/visual-studio-team-services-pricing-vs)

As long as your team remains small (max 5 team members), Visual Studio Team Services is your best bet on the price side of things.

Features

Besides Git-base source code hosting, both platforms come with additional features. Here’s a subset of them. I’m not including advanced features like API

GitHUB has (https://github.com/features):

  • Issues tracking, with a nice commit-to-issue linking system
  • Pull requests: a kind of advanced collaborative mechanism. After collaborators have worked on a branch, when they want their changes to be integrated into the product’s main branch, they fill a pull request which contains code, comments and issues. It allows grouping information about a set of changes.
  • API (https://developer.github.com/v3/)
  • Syntax highlighting when browsing code in web views
  • Integrated Web Pages for blogging about a project… (https://pages.github.com/)

VSTS has (https://www.visualstudio.com/en-us/products/visual-studio-team-services-feature-matrix-vs.aspx):

Conclusion

Given that we’re only two team members working on the code  and I want to keep a private repository, Visual Studio Team Services wins on the pricing side of things.

On the feature side of things, Visual Studio Team Services offers a nice agile development process support. On the other hand, GitHub has a cool web pages offer. But the integrated CI feature of Visual Studio Team Services makes it my preference (less time spent configuring a CI system).

This project doesn’t involve a large organization nor specific integration with external tools. So I didn’t care about team management features nor about API’s exposed by the platforms.

So I went for Visual Studio Team Services.

Moving the existing repository to the hosted repository

Git and its ease of adding remote repositories allows for a smooth transition from a private repository to a more robust hosted one. In that way, it helps support scaling of the project.

Start by making sure you’ve got a clone of your existing repository on your local machine.

Given an existing Visual Studio Team Services account, create a project from that account (select Git as the versioning system). Then, navigate to the “code” tab of your project (see below).

VSTS Code Tab

VSTS Code Tab

You’ll get something like below. Start by generating Git Credentials (click on the button highlighted).

Generate Git Credentials

VSTS Generate Git Credentials

Once the credentials are generated, scroll down and you’ll find out how to push an existing Git repository to the VSTS hosted Git repository, as illustrated below.

Push Existing Repository To Another One

Push Existing Repository To Another One

Using your command line, navigate to the Git Repository that you’d like to “publish” to Visual Studio Team Services. Then execute the two commands above. Pay attention:

  • You might want to change “Origin” to some other name (if your local repository is a clone of another origin).
  • Don’t forget to change the URL in order to match your new repository’s name (in the screenshot above, the repository name is “test”).
  • You will need to specify the Git Credentials you’ve just created.

Git will do its job and push all the source code (including all branches) to Visual Studio Team Services. Go back to your browser and you should see the code. I didn’t even have to refresh the webpage!

Next step: adding the new contributor to the list of team members on VSTS.

Adding the new contributor

Adding the new contributor to the project is done on the project’s home page. Simply click on the “Team Members” panel (highlighted below) and then specify the new member’s e-mail address.

VSTS Project Team Members

VSTS Project Team Members

Phonegap – Local Notifications plugin

If you ever need to display notifications to the users of your mobile app, you’ll need a plugin. The one I’ve used is Local notifications (https://github.com/katzer/cordova-plugin-local-notifications). So far, I’m satisfied with it. The picture below illustrates the notification appearing in the notification center (iOS).

INSERT PICTURE HERE

The following screenshot show it when it’s received.

INSERT PICTURE HERE

Don’t be surprised if you don’t see the notifications you schedule when the app is in foreground. It depends on the platform used. Under iOs it’s “by design”. See https://github.com/katzer/cordova-plugin-local-notifications/issues/625 for more information.

You can use a simple trick to make sure your users will be notified, regardless they’re in your app (in foreground) or not (in background). This SO post explains it all: http://stackoverflow.com/questions/29606012/how-to-check-app-running-in-foreground-or-background-in-ionic-cordova-phonegap. Basically, it all comes down to declaring a boolean variable (e.g. isInForeground) and changing its state in the “pause” and “resume” event handlers.

Tested and approved 🙂

 

Adding Android platform to an existing Cordova app

Today, I tried adding a platform to an existing cordova app, which used to work under iOS  was developed on a Macbook Pro. This post lists the things I had to do in order to get it working and the bumps I hit.

Setup the environment

You have to follow the Android platform guide. It’s very well explained and easy to follow. I found it pretty annoying that I’ve had lots of timeouts during the download of the several packages (through the SDK manager). Just keep on trying and you’ll end up with a working environment.

I’ve had another problem when I tried to run the emulator. I was told that Intel HAXM wasn’t installed, so I installed it.

But I couldn’t get the emulator running, I didn’t have much info through the avd manager, so I created a blank project in Android Studio, then I tried to run it in the emulator. And then I was able to read more info about the problem:

Failed to sync vcpu reg.

I was just one google search away from getting it running This SO post helped me. This message seemed to be in relation with the VirtualBox that was running on my Mac at the same time. Shutting down the VirtualBox VM allowed me to get the Android emulator running.

Add the Android platform to the cordova project

cordova platform add android.

So far so good, but when trying to compile the app like below, I had a problem.

cordova build android

I was told that

Screen Shot 2015-09-28 at 22.28.33

Multiple dex files define Landroid/support/annotation/AnimRes;

I found the solution in this post. I simply had to remove the android v4 support from my project’s plugins. I don’t know how this one got there.

Debug the project

Once able to build the project and to make it run, I needed a way to debug it. Just launch chrome and type chrome://inspect/#devices in the address bar (the app must be running first).

Conclusion

It took me less than 2 hours to make my project run on Android. Most of that time was linked to the setup of the environment.  So I’m still convinced that cordova was the right choice to build this cross-platform mobile app.

Migrating a Phonegap app to iOS 9

I installed the iOS 9 update as soon as Apple offered me to and … what a journey! The phone update process was smooth, as was installing the latest version of XCode (7).

But I’ve lost a lot of time making my phonegap app work again on iOS 9. Here’s a note on the things I’ve lost a lot of time on.

Not installing OS X El Capitan

Not installing OS X El Capitan on my Mac. It made the debugging experience awful. I couldn’t get anything written to Safari Web Inspector. Installing OS X El Capitan made it ok again.

App not initializing properly

Not having any clue why my Angular app wasn’t initializing properly. I first thought that I had the window.location bug which you can read about on the web: http://stackoverflow.com/questions/32719631/how-to-fix-window-location-issue-in-ios9-uiwebview. I read that Angular had to be fixed, that there was a patch out there and that the patch was included in AngularJS 1.4.6 => Had to migrate my angular components (cookies, route, google-maps) to that version. Still I had no result. ng-view not showing and nothing written on Web Inspector console. I’ve had to make two pages: one index.html (loading cordova) and a second one app.html (angular app). And by doing that I was able to get all the errors written to the console and could solve them one by one.

HTTP Request headers problems

I’ve had this problem as well with my services adding authentication headers to their http requests.

Apache hosting

I also had a web ui hosted on my Mac OS dev machine, under Apache, which I needed to use because it’s the “admin way” to the system’s data. It used to run under Yosemite, but didn’t any longer after El Capitan upgrade. I guess Apache got upgraded as well. I had to re-check all that config and was helped by this post. And indeed I think some of my previous customizations to Apache config files had been discarded by the upgrade process.

Phonegap – APNS push notifications with PushPlugin, Azure Notification Hub

There are a many plug-ins out there to help you with push notifications. I’ve used PushPlugin:  https://github.com/phonegap/phonegap-plugin-push

I’ve spent quite a lot of time getting the whole APNS-Azure Notification Hub-iPhone flow working. Just getting started requires quite a lot of prerequisites:

  • An Apple Developper Account (99$/year)
  • A Mac, so that you can generate certificates using KeyChain
  • A Windows Azure subscription (free trials exist), with a Notification Hub
  • An iPhone (I didn’t try, but it looks like you won’t get it working on iOS Simulator)
  • A phonegap project.

Here are a few things that have been time-consuming:

Not having a Mac

Working on the sources on a PC, Uploading the sources to phone gap build, waiting for the build to finish, downloading the IPA package, importing it to iTunes then synchronising it with the iPhone is… as you guess very time consuming. Yes, I’ve tried to work with Phone Gap’s hydration. Still it remains a lot to package everything in a zip, then upload it to PhoneGap Build. Yes, there exists a Phone Gap Build REST API that one could use to automate an upload-then-build process (and maybe such tools already exist, I haven’t searched for them). Even though you automate that step, it’s still slower than compiling locally from a Mac. Moreover, not having a Mac prevents you from having a decent debugging experience (see that post to find out how to debug your phone gap App using Safari).

All-in-all I’ve lost a lot of time trying to do without one, but I finally resorted to getting a Mac.

Get a Mac.

Getting the token

Getting the token from APNS isn’t hard if you get the correct certificates. Pay attention to your phone gap projet name. It must match the Application Identifier you create in the Apple Developer portal. Can cost a lot of time

Registering the token

Passing the token to the intermediate push server (the notification hub in our case) hasn’t been easy. I couldn’t find an easy-to-use javascript client for their API. I’ve used the Azure Mobile Service phone gap plugin. Indeed, with every Azure Mobile Services you get a Notification Hub associated. The phone gap plugin lets you access that Notification Hub, as shown below.

Azure notification hub apns token registration

Note:

  1. I used to call registerTemplate for APNS. It never worked. I had to call registerNative. It took me quite long before I tried that.
  2. There might be a better way to register the token with Notification Hub. Leave a comment in case you know of one.