Hey there! I am Christian Liebel from Leimersheim, Germany. I’m working at Thinktecture in Karlsruhe. Angular, cross-platform development using Cordova and Electron, Gulp, .NET and Node.js are our day-to-day business. Feel free to contact me anytime.
Alexa is Amazon’s voice-controlled personal assistant. It’s super convenient and so you might want to create your own skills as well. You’ll be surprised how easy this is can be with the help of Microsoft Azure Logic Apps.
Here’s our sample project: Let’s say you share a family Slack with your spouse and children. Whenever food is ready or the rabbits need to be fed, you want to send a Slack message to your children. This should be as easy as saying:
Alexa, tell my children: food is ready.
Alexa, tell my children to feed the bunnies.
We’ll do all of this with zero lines of code, in less than 15 minutes. Ready, set, go!
Bitbucket is a quite popular cloud-hosted source code repository. It has a free plan which includes unlimited private Git or Mercurial repositories for up to five team members and even 50 build minutes per month. Bitbucket Pipelines is its integrated Continuous Integration tool, comparable to Travis or AppVeyor: A repository can be configured to run a certain script after each commit. For example, to check if the build passes—or to build a Docker container of your ASP.NET Core 2.0 app which is automatically pushed to Azure Container Registry (ACR), from where you can deploy your container to Azure App Services or robust Kubernetes clusters. In this blog post, I will explain how to set up Bitbucket Pipelines, build your ASP.NET Core 2.0 app (checked in to a BitBucket Git repository), package it as a Docker container and push it to your Azure Container Registry.
Important update: RxJS 5.5 brought us Pipeable Operators that eliminate some of the problems noted below. If you can update to TypeScript 2.4, RxJS 5.5, Angular 5 and Angular CLI 1.5, you should definitely go with Pipeable Operators.
Angular has some third-party dependencies, one of which is RxJS, a library which makes reactive programming very easy to use. The library is obtained as an npm package. In order to use functionality from the RxJS library, it has to be imported first. So before you can use an operator such as map in the following snippet, it has to be imported:
Whereas IDEs such as WebStorm (prior to 2017.2) or Visual Studio Code do a good job for auto-importing symbols, they don’t suggest anything at all for RxJS symbols. Both IDEs simply print the following error message from TypeScript:
Property ‘map’ does not exist on type ‘Observable’.
This transpiler flag enables us to write safer code. TypeScript with strict null checking enabled feels even more comfortable for developers with a static-typed language background. Without strict null checking, assigning null or undefined for instance to a variable of type number is perfectly possible:
Testability is an important discipline in application development. Angular was always built with testability in mind. Protractor is Angular’s end-to-end testing framework. It was originally created for AngularJS, the first edition of the popular SPA framework, but works perfectly with Angular 2 by simply setting useAllAngular2AppRoots to truein Protractor’s config.js. In addition, you can optionally specify an element name for the rootElement property to exclusively test against this element.
Despite its infinitesimal market share, there are valid reasons to target the BlackBerry 10 platform. Adding BlackBerry 10 as a target platform to a Cordova-based project is as easy as running the cordova platform add blackberry10 command on your terminal. However, if you try to deploy your app to the device and run cordova run blackberry10, you might stumble upon the following error message:
blackberry-nativepackager cannot be found on the path. Aborting.
It seems as if we are missing the native platform SDK here. In this article, I want to show you which steps are required in order to successfully run and debug your Cordova-based app on your BlackBerry 10 phone. Please note that I’m using OS X, so the exact steps may and will differ on other platforms.
If you are working with Node.js Package Manager (npm), you will usually retrieve npm packages from the official registry of npm (https://registry.npmjs.org) and publish own packages there. But in some cases, you might want to keep packages private, such as internal components. For this purpose, you could either go with npm which offers paid plans and on-premises installations of the package registry or you could alternatively decide to run a custom repository server. Sinopia is such a private npm repository server, which in addition acts as a proxy for the official npm package registry and caches downloaded packages. This saves bandwidth and continues to work if the internet connection or the original package registry is down.
npm has a concept of scoped packages, where similar or related packages are grouped together. Angular 2 utilizes this concept in its packages named like @angular/core, with angular being the scope and core being the package name. But if you try to install a scoped package via Sinopia, the installation fails. In the Sinopia logs, you will see an error message similar to:
http < -- 404, user: undefined, req: 'GET /@angular%2fcompiler', error: no such package available
Microsoft Windows for Workgroups (WfW) 3.11, released back in 1993, was the first operating system I ever used. As the name suggests, WfW was designed for networking in workgroups of a few people and workstations. This included centralized authentication, file and printer sharing based on Microsoft NetBEUI or NetBIOS (transported for example over Novell’s IPX/SPX protocols). This however was restricted to a local network.
In 1993, the Internet and its protocols were invented for a long time and the World Wide Web (WWW) based on Internet protocols started to emerge. But WfW didn’t ship with a TCP/IP stack and thus was incapable of connecting to the Internet. Luckily, this stack is available as a separate download which will allow us to connect to the Internet using WfW 3.11 even today. Nostalgia alert!
Detecting clicks on a component is easy in Angular 2: Just use the (click) event binding, pass a function from the component’s instance and you are done. However, if you need to detect clicks outside of your component, things are getting tricky. You will usually need this for custom implementations of drop-down lists, context menus, pop-ups or widgets.
As this is a functionality which you might use more often, you should wrap it in a reusable directive. Angular 2 offers a syntactically nice way to implement such a directive. So let’s go ahead and implement a simple click-outside directive in Angular 2!
tl;dr: Implementing this directive is super easy. If you feel lazy, just run npm i angular2-click-outside.
One of our customers at Thinktecture recently wanted to set up an auto deployment of its GitLab repository to an App Service hosted by Microsoft Azure. If you want to set up auto deployments for GitLab, you might be disappointed because this service is not included in the list of available services. Setting up auto deploy from GitLab.com or on-premises editions of GitLab is a manual process—luckily, it’s an easy one.
GitLab.com is a very popular service, as it allows free private Git repositories with up to ten gigabytes in size. If this still doesn’t suit your needs or you want to host the software yourself, GitLab also offers on-premises editions (Community Edition, free and Enterprise Edition, paid per user and year).
Microsoft Azure is a popular cloud service, offering so-called App Services (free plans available). App Services are used for hosting web apps or back-ends based on .NET, Node.js, Java, PHP and other technologies. An App Service can be set up to auto deploy changes that are pushed to a certain branch of a Git repository.
Here’s how to do it for GitLab.com or on-premises editions of GitLab: