In this story I will explain how to take app screenshots easily using Protractor and a headless chrome instance.

Set up

I assume you have an Angular app set up and running. In my case I was using Ionic, a sophisticated mobile app framework supporting Angular and cordova.

We will use the default e2e app Angular generated for us, located in e2e/ .

In your e2e/protractor.conf.js add the following configuration:

// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.tsconst { SpecReporter } = require('jasmine-spec-reporter');exports.config = {
  // ...
  capabilities: {
    browserName: 'chrome'…

There are many guides out there which show you how to set up Google Analytics with Rails 5+. Many of them neglect current best practices, such as Content Security Policies. In this story I will describe a secure and up-to-date way of setting up Google Analytics.

Prerequisites

I assume you have a Google Analytics property set up and your tracking id at hand.

Managing credentials with Rails

Rails 5 introduced a secure way to store your credentials. Add your credentials by running bin/rails credentials:edit . Fill in the file like this:

google_analytics:
  test:
    tracking_id: UA-XXXXXXXXX-X
  development:
    tracking_id: UA-XXXXXXXXX-Y
  production:
    tracking_id: UA-XXXXXXXXX-Z

I suggest to use…

Angular offers excellent functionality in its router, including resolvers to load data and easily accessing path and query params. However the way these are used in the documentation we typically lose TypeScript’s type-safety. A way to win it back is to use computed property types and enums.

Traditionally we write following code:

// navigate to a route with query params
this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);// access query params (similar to path params)
this.sessionId = this.route       
  .queryParamMap       
  .pipe(map(params => params.get('session_id') || 'None'));

If we mistype the id , foo or session_id in other parts of the application we…

Angular’s Resolvers are a nice, declarative way of getting data into your components. However when used as described in the Angular guide they quickly stretch their limits. We suggest a simple and elegant way on how to make resolvers more flexible including the ability to respond to new data (e.g. when resolved data changes in a cache).

Example

In our shift scheduling application tift we interface a GraphQL API from our frontend written in Angular.

When someone accesses a so called “Plan” we need to load it from the server. …

Often times a different set of environment variables is needed when executing jobs in Gitlab CI depending on the branch we are on. The following is a real life example for the website of our shift scheduling software at tiftapp.com.

We build our website with Hugo and deploy it to different subdomains. From our develop branch we want to deploy to staging and from master we want to deploy to production.

In the past we scattered some test commands around our deploy script, however when our build stage required one of the environment variables as well we decided for a…