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
  </mat-sidenav>
  <mat-sidenav-content>
    // My main content is here
  </mat-sidenav-content>
</mat-sidenav-container>

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.

https://source.android.com/security/apksigning/v2

Reason

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.

Solution

  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 keys.dev.pub 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 https://raw.githubusercontent.com/composer/getcomposer.org/76a7060ccb93902cd7576b67264ad91c8a2700e2/web/installer -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 keys.dev.pub 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 Audiobooke.com, 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';

@Pipe({
  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

@NgModule({
  declarations: [
    HumanFriendlySecondsPipe
  ],
  providers: [],
  exports: [
    HumanFriendlySecondsPipe
  ]
})

export class HumanFriendlySecondsModule {

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

Examples

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:

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

A sample Angular project that has the code above is also available as a GitHub repo.

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).

Using a Samsung M2070 Printer on Ubuntu/Linux?

Recently, I’ve changed my home PCs OS to Ubuntu 18.04. I also have a Samsung M2070 printer/scanner and I was wondering if I it’ll work as smoothly under a Linux based OS, as it did under Windows (Printer manufacturers tend to focus solely on Windows OS as the primary OS of their end users, unfortunately).

Here are the steps I followed to get everything working:

  1. Head to the Samsung Drivers page for M2070 and download the Linux package
  2. Unarchive the package to a suitable location in your system, e.g. ~/Downloads/samsung_printer/
  3. Open a terminal and navigate to that folder using “cd ~/Downloads/samsung_printer”. Make sure that you see a folder called “uld” when you type “ls”.
  4. “cd uld && chmod +x install.sh” to make sure that the installation file is executable
  5. Run the installation using “sudo ./install.sh”
  6. You will get a long license agreement, which I’m sure you will read. You can scroll through it by pressing the Space key.
  7. When you are finished reading, type “y” and hit Enter
  8. Follow the on-screen instructions about adding the optional additional firewall rules.

You may be thinking “I’m done”. Yes and no. Now you need to add your printer in the Ubuntu Settings -> Devices -> Printers area:

Now you are really done. Happy printing. 🙂