How to clone a CodeCommit repo inside a Cloud9 environment?

Cloud9 is Amazon’s cloud-based IDE that makes writing and building projects a breeze. There are no licensing fees involved (unlike PHPStorm or other similar IDEs) and the added benefit is that you get tight integration with AWS services like Lambda and CodeCommit.

A common use case for using Cloud9 is working collaboratively on a project, that’s hosted in Git (version control). And what’s better than using Amazon’s native Git repo hosting, called CodeCommit?

In this short tutorial, you’ll learn how to clone a CodeCommit repo inside a Cloud9 development environment. We will assume that you already have a Cloud9 environment created, you have logged in and there is an existing CodeCommit repo.

Steps to clone a CodeCommit repo inside Cloud9

While in the terminal of your Code9 environment, run the following commands:

git config --global credential.helper '!aws codecommit credential-helper $@'
git config --global credential.UseHttpPath true

What this does is it tells the Git CLI to use the AWS CLI whenever Git HTTP authentication is required (when cloning, pulling, pushing code). Additionally, the second line tells the Git CLI to enforce strict HTTPs pulling instead of HTTP.

The final result will be that whenever you enter the Cloud9 environment and attempt to clone a CodeCommit repo, the AWS helper will kick in and use temporary AWS credentials that represent YOU (the current Cloud9 user) before CodeCommit while doing Git operations.

The final step would be to clone a Git repo inside Cloud9. Remember to always use the HTTPs clone URL instead of the SSH one, because SSH will fallback to private key-based authentication. Something we haven’t configured above, so it won’t work.

Take the HTTPs clone URL from the CodeCommit console
Clone inside Cloud9 using the same HTTPs clone URL

Happy coding!

Automatically close Angular Material Sidenav when menu element is clicked

I’ve recently started digging deeper into Angular Material – the UI kit by Google to be used in Angular projects.

The stack of components available is pretty rich and flexible and includes a variety of things that you can use to quickly scaffold an application, including a Toolbar, Menu, Sidenav, etc.

One thing that I discovered that doesn’t come out of the box is the ability to automatically hide the Sidenav (left side menu) when you click on some of the menu items. Here’s an example structure that I had for a recent project:

The left side is the <mat-sidenav> component and the right side (the table) is wrapped in a <mat-sidenav-content> component. Both of them are wrapped in a <mat-sidenav-container> component.

I wanted to automatically hide the sidebar whenever any of the menu elements: Homepage, Transactions, Accounts, My profile – is being clicked. The solution was pretty simple actually:

<mat-sidenav-container class="example-container">
  <mat-sidenav #sidenav (click)="sidenav.toggle()">
    // My menu is here
    // My main content is here

The trick is to call sidenav.toggle() when a click is triggered on the <mat-sidenav> component.

Error while uploading APK to Firebase Test Lab: “The uploaded APK does not have a valid signature”. Reason and solution

Recently, while experimenting with Firebase’s new features in general, and more specifically – a tool called Test Lab, I encountered the following issue: whenever I tried to upload the APK file that I exported from Android Studio (the production-ready version of an Android app), the Test Lab was constantly throwing an ambiguous error: “The uploaded APK does not have a valid signature”.

After some searching around, the reason and the subsequent solution, was pretty clear. Here’s why this error occurs:

Android “Nougat” (SDK v7) introduced a new APK signature sheme v2, which comes with its own benefits over the old v1 signature scheme, as described well in its documentation:

APK Signature Scheme v2 is a whole-file signature scheme that increases verification speed and strengthens integrity guarantees by detecting any changes to the protected parts of the APK.

Signing using APK Signature Scheme v2 inserts an APK Signing Block into the APK file immediately before the ZIP Central Directory section. Inside the APK Signing Block, v2 signatures and signer identity information are stored in an APK Signature Scheme v2 Block.


Since the v2 signing scheme was introduced in Android 7.0, APKs signed with this scheme can not be installed on older Android devices like Android 6.0 Marshmallow. Firebase Test Lab contains a variety of Android versions you can test against, including those that are pre-7.0. For this reason, it requires that the APK that you upload is signed with the older, widely-supported v1 APK signing schema.


  1. Inside Android Studio choose Build -> Generated signed Bundle / APK
  2. Choose APK on the first step (I think Android App Bundle is still not supported in Firebase Test Lab as of writing this)
  3. Select your provide key and enter the passwords in the next step.
  4. IMPORTANT: In the last step where you select the build variant and flavor, make sure Signature version V1 (Jar Signature) is selected:

Fixing a failing Composer installation: Unable to write to: /home/$USER/.composer

Recently, I started a project which uses Composer as a dependency management system. In the spirit of reducing the dependencies on the host system, I wanted to bundle even Composer itself inside the project’s source code. This is possible by downloading and including a composer.phar at the root of the project. However, failing Composer installation is not something new to developers, especially if you haven’t used it before.

What is composer.phar?

It’s basically a PHP script that contains the core functionality of Composer – namely, the ability to read a composer.json/composer.lock file (a JSON definition of the project’s dependencies) and manage those dependencies – download them, resolve them to the best possible version, lock them to a version, etc.

How to download composer.phar?

There are basically two main ways to download the composer.phar:

  • Programmatically (easier)
  • Manual (safer)

For my most recent project, I opted for the programmatical approach, which is documented on the Composer website.

Using that approach, you pretty much have to run a single command:

wget -O - -q | php -- --quiet
Note: The command above is up to date as of writing this but may change in the future. For the up to date version, go through the website link above.
Troubleshooting: Composer installation error on Ubuntu – “Failing Composer installation: Unable to write to: /home/$USER/.composer”

Occasionally, I stumble upon this error when I try to include Composer in a real life project. The error is kind of ambiguous, but the reason behind it is pretty clear: your current user doesn’t have ownership over the /home/$USER/.composer folder OR some of the files inside.

Solution: Change the ownership of the .composer folder to be owned by your user ($USER is a variable that always refers to the current user in UNIX systems):

sudo chown $USER -R /home/$USER/.composer

Let me know in the comments if that worked for you. If you are still struggling with Composer issues, I am available for paid consulting.

Angular pipe for displaying a timestamp in a human-friendly way

Angular is a great framework that comes with a variety of good things such as “routing”, “cli” and some good built-in Pipes to get you started. Although those are enough to get your project off the ground, often times you’ll encounter scenarios where you’ll have to get your hands dirty and plug your custom use cases on top of what the Angular framework provides.

One such use case I had recently, while working on the audiobooks portal, was the ability to take a raw timestamp of seconds from the database and visualize it inside an Angular component’s template, in a “human friendly” way (in other words display a value of “60” as “1 minute” or 3665 as “1 hour 1 minute 5 seconds”, etc).

Here are the steps I did to create a custom Angular pipe to visualize timestamps in a human friendly format:

Install the dependency that does the heavy lifting

npm install --save pretty-ms

This will install a library that does a pretty good job of transforming timestamps to human-friendly labels in vanilla JavaScript. No need to reinvent the wheel here.

Create a custom pipe

Now we create a new Angular pipe that we can reuse inside templates.

import {Pipe, PipeTransform} from '@angular/core';
import * as prettyMs from 'pretty-ms';

  name: 'secondsHumanFriendly',
export class HumanFriendlySecondsPipe implements PipeTransform {

  transform(seconds: any) {
    return prettyMs(seconds * 1000);

Import the pipe into your AppModule

We are assuming that your app consists of just one NgModule. This is rarely true for a production app, so make sure to include the pipe into the correct module where it will be needed. Note that if you want to reuse the Pipe into multiple modules at once, you need to wrap it into its own NgModule and import the new NgModule instead. The example below illustrates exactly this “production ready” use case.

// human-friendly-seconds.module.ts

  declarations: [
  providers: [],
  exports: [

export class HumanFriendlySecondsModule {

// app.module.ts
  declarations: [
    // Your real components go here
  imports: [
    // We include the above HumanFriendlySecondsModule module
    // as a reusable dependency here, so we can take advantage of its
    // exported Pipes
  bootstrap: [AppComponent]
export class AppModule {


Let’s give our code a test drive. Go into the template of your AppComponent or whichever component you want to visualize a timestamp in. Inside it’s template, we try the following examples:

{{60 | secondsHumanFriendly}}<br/>
{{3600 | secondsHumanFriendly}}<br/>
{{3663 | secondsHumanFriendly}}<br/>
{{999999 | secondsHumanFriendly}}<br/>

The results are:

1h 1m 3s
11d 13h 46m 39s

Happy coding!

How to uninstall Swarmpit – the Docker Swarm orchestration tool

Recently, I’ve been looking for a good Docker container orchestration and host machine management tool and I’ve come across Swarmpit.

It’s a wonderful tool and I recomment it to anyone who is looking for a web based interface to make it easier to launch, scale and destroy Docker Swarm stacks on host machines, without having SSH access to the machine itself (e.g. while traveling).

However, what’s missing online is information about how to uninstall Swarmpit, once you no longer need it. Here are the steps to do it:

  1. SSH into the machine where Swarmpit is running
  2. “docker stack ls” and find the stack that represents Swarmpit. It’s usually called simply “swarmpit“. Take note of this name.
  3. Destroy the Swarmpit stack using “docker stack rm swarmpit“. Replace “swarmpit” with the name of the stack from the previous step.

While you are here, if you are struggling with integrating Docker or Docker Swarm within your project, feel free to write me – I may be able to help (for a fee).