

[Cavy](https://cavy.app/) is a awesome React Native e2e testing library. 
It's easy to create tests, but usage React Navigation is undocumented. 

Here is a technique to control React Navigation 5 navigator in tests.

```tsx
// App.ts
import { NavigationContainer } from '@react-navigation/native';
import { useCavy } from 'cavy';

export default function App() {
  const generateTestHook = useCavy();
  return (
    <NavigationContainer ref={generateTestHook('Navigation')}>{/* ... */}</NavigationContainer>
  );
}
```

And create navigateBack helper:

```tsx
// helper.ts
export async function navigateBack(navigation: any) {
    navigation.goBack();
}
```

Call helper from your tests:

```tsx
// navgationSpec.ts
import { TestScope } from 'cavy';
import { navigateBack } from './helpers';

export default function(spec: TestScope) {
  spec.describe('Test', function() {

    spec.it('works', async function() {
      const navigationComponent = await spec.findComponent('Navigation');
      await navigateBack(navigationComponent)
    });
  });
}
```



Guide to implementing end-to-end testing in React Native apps using Cavy with React Navigation, including navigation testing patterns and best practices.

React Native + React Navigation e2e testing with Cavy

At the Google I/O 2019 Firebase released it's Firebase Performance Monitoring plugin to the web.
Firebase Performance Monitoring is a easy way to find out page speed bottlenecks that are hurting the user experience.
The web version of this plugin is now in open beta.

## What does the Firebase Performance Monitoring measure?

The plugin measures [six default traces](#default-traces) and network traffic's response time.
Users also can implement their own measurements using JavaScript described in [Firebase Performance Monitoring Documentation](https://firebase.google.com/docs/perf-mon/get-started-web#add-custom-trace).

![Firebase Performance Monitoring default metrics dashboard](/firebase-perf-screenshot.png)

## Implementation tutorial

In this tutorial we go through how to implement the SDK to a website.
There are many ways to implement this SDK. In this tutorial we are implementing the standalone SDK from the CDN.
Check out other ways from the [Firebase Performance Monitoring official documentation](https://firebase.google.com/docs/perf-mon/get-started-web).

### The HTML tracking snippet for Firebase Performance Monitoring

Implement snippet below as a first tag inside head.

```html
<head>
  
  <script>
    !(function (n, e) {
      var t,
        o,
        i,
        c = [],
        f = { passive: !0, capture: !0 },
        r = new Date(),
        a = "pointerup",
        u = "pointercancel";
      function p(n, c) {
        t || ((t = c), (o = n), (i = new Date()), w(e), s());
      }
      function s() {
        o >= 0 &&
          o < i - r &&
          (c.forEach(function (n) {
            n(o, t);
          }),
          (c = []));
      }
      function l(t) {
        if (t.cancelable) {
          var o =
            (t.timeStamp > 1e12 ? new Date() : performance.now()) - t.timeStamp;
          "pointerdown" == t.type
            ? (function (t, o) {
                function i() {
                  p(t, o), r();
                }
                function c() {
                  r();
                }
                function r() {
                  e(a, i, f), e(u, c, f);
                }
                n(a, i, f), n(u, c, f);
              })(o, t)
            : p(o, t);
        }
      }
      function w(n) {
        ["click", "mousedown", "keydown", "touchstart", "pointerdown"].forEach(
          function (e) {
            n(e, l, f);
          }
        );
      }
      w(n),
        (self.perfMetrics = self.perfMetrics || {}),
        (self.perfMetrics.onFirstInputDelay = function (n) {
          c.push(n), s();
        });
    })(addEventListener, removeEventListener);
  </script>
  <script>
    (function (sa, fbc) {
      function load(f, c) {
        var a = document.createElement("script");
        a.async = 1;
        a.src = f;
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(a, s);
      }
      load(sa);
      window.onload = function () {
        firebase.initializeApp(fbc).performance();
      };
    })(
      "https://www.gstatic.com/firebasejs/6.0.2/firebase-performance-standalone.js",
      {
        apiKey: "{{apiKey}}",
        authDomain: "{{authDomain}}",
        databaseURL: "{{databaseURL}}",
        projectId: "{{projectId}}",
        storageBucket: "{{storageBucket}}",
        messagingSenderId: "{{messagingSenderId}}",
        appId: "{{appId}}",
      }
    );
  </script>
  

  ...
</head>
```

Get your app's Firebase config object

```js
{
  apiKey: "{{apiKey}}",
  authDomain: "{{authDomain}}",
  databaseURL: "{{databaseURL}}",
  projectId: "{{projectId}}",
  storageBucket: "{{storageBucket}}",
  messagingSenderId: "{{messagingSenderId}}",
  appId: "{{appId}}"
}
```

from the Firebase console.
More info from the [Firebase official documentation](https://firebase.google.com/docs/web/setup#config-object).

## Ready to measure

You ready to measure your site's performance. After the implementation give Firebase 12 hours to gather data.

## Default traces

There are six default traces that the plugin measures.

##### first paint traces

measure the time between when the user navigates to a page and when any visual change happens

##### first contentful paint traces

measure the time between when a user navigates to a page and when meaningful content displays, like an image or text

##### domInteractive traces

measure the time between when the user navigates to a page and when the page is considered interactive for the user

##### domContentLoadedEventEnd traces

measure the time between when the user navigates to a page and when the initial HTML document is completely loaded and parsed

##### loadEventEnd traces

measure the time between when the user navigates to the page and when the current document's load event completes

##### first input delay traces

measure the time between when the user interacts with a page and when the browser is able to respond to that input

Learn how to implement Firebase Performance Monitoring for web to track page speed metrics and improve user experience, with a complete implementation guide.

Measuring page speed with Firebase Performance for Web


## Why?

It's good to monitor your site performance on regular basis. New content like images, tracking pixels and server issues can be problems that affect your site's performance. Lighthouse is a tool which can point out these issues to you.

## What is Lighthouse?

_Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more._
–[Lighthouse Website](https://developers.google.com/web/tools/lighthouse/)

## Getting started

In this tutorial I'll teach you how to run a simple scheduled Lighthouse performance test on your site using GitLab's free CI service.

### What is GitLab?

_GitLab is a single application for the entire software development lifecycle. From project planning and source code management to CI/CD, monitoring, and security._
–[GitLab About page](https://about.gitlab.com/)

GitLab is considered alternative to GitHub.

### 1. Set up GitLab

Register [here](https://gitlab.com/users/sign_in).

### 2. Create new repository

#### Begin by creating new project pressing the `New Project` button on your GitLab root page

![Create new GitLab project](/create-new-gitlab-project.png)

#### Give your project a name

![GitLab project name](/gitlab-project-name.png)
For example name your project like this: `lighthouse-{your site}`.

Finnish creating your project by pressing the `Create project` button. Pressing the button takes you to the next step.

### 3. Create `.gitlab-ci.yml` file

#### To add script where all the magic happens and click the `New file` button

![Fresh GitLab project page](/fresh-gitlab-project-page.png)

#### The file

![GitLab CI config](/gitlab-ci-config.png)

#### Copy the content of the file below and copy it into GitLab's file editor

Remember to replace `{TEST Url}` with the URL of the page you wished to be tested.

```yml
image: markhobson/node-chrome

run_lighthouse:
  variables:
    LIGHTHOUSE_TEST_URL: { TEST Url }
  stage: deploy
  environment: Production
  only:
    - master
  before_script:
    # Install Lighthouse
    - npm i -g lighthouse
  script:
    # Run Lighthouse test
    - lighthouse --chrome-flags="--headless --no-sandbox" $LIGHTHOUSE_TEST_URL --output html --output-path ./report.html
  artifacts:
    paths:
      - ./report.html
    expire_in: 1 week
```

Click `Commit changes` to finish creating the file.

### 4. Test your job

After committing the changes the test should start right away.

#### Go to `CI / CD -> Jobs` on the sidebar to see your test running.

![GitLab CI jobs list](/gitlab-ci-jobs-list.png)

### 5. Schedule tests

#### To Schedule tests go to `CI / CD -> Schedules` and press `Create schedule` button

![GitLab CI create new schedule](/gitlab-ci-create-new-schedule.png)

#### Set up schedule

Give your test a name and a schedule using Cron. More about Cron [here](https://en.wikipedia.org/wiki/Cron).
![GitLab CI schedule a new pipeline](/gitlab-ci-schedule-a-new-pipeline.png)
Press `Save pipeline schedule` to finish your schedule.

#### Schedule is ready

![GitLab CI active pipeline schedule](/gitlab-ci-active-pipeline-schedule.png)

### 6. Review your results

#### All your tests appear at `CI / CD -> Jobs`

![GitLab CI passed pipeline](/gitlab-ci-passed-pipeline.png)
To download and view your Lighthouse reports click the cloud icon on the right.


Step-by-step tutorial on setting up scheduled Lighthouse performance tests using GitLab CI to monitor and improve website performance.

Run simple scheduled Lighthouse tests on GitLab CI


![Getting touch with the users using Firebase In-App Messaging](/firebase-in-app-messages-phones.png)

## Problem

["Bussit kartalla"](https://toukopeltomaa.com/app/Bussit-Kartalla-HSL-Live-bussit/) is an app which shows all the
HSL (Helsinki Public Transport) busses on a map.
Sadly there is a problem with the vehicles real-time tracking.
Any websites, apps even real-time info screens are unable to access the real-time data.
Due to this error my app is unusable therefore it's getting bad reviews.

### A Bad Review

![A bad review](/bad-review.png)

## Solution

![Firebase In-App Messaging logo](/firebase-in-app-messaging.png)

### Firebase In-App Messaging

_Firebase In-App Messaging helps you engage users who are actively using your app by sending them targeted and contextual messages that nudge them to complete key in-app actions - like beating a game level, buying an item, or subscribing to content._ - Firebase Website

### Example use cases

- Onboard new users with a custom message
- Send personalized offers or coupons
- Showcase your app's new feature
- App tips to your users e.g. if you user has failed a game levels

With Firebase In-App messaging I can easily post a banner saying "Our app doesn't work right now".

## Add Firebase In-App Messaging SDK to React Native

### Include the SDK in your build files

Add the In-App Messaging dependency to your app-level `build.gradle`:

```groovy
// ...
dependencies {
    // ...

    // Add the In-App Messaging dependency:
    implementation 'com.google.firebase:firebase-inappmessaging-display:17.0.4'

    // Check that your Firebase dependency is up-to-date:
    implementation 'com.google.firebase:firebase-core:16.0.6'
}
```

The SDK is really easy to implement if you are already using Firebase.

## The Banner

### Banner Configuration in Finnish

![Firebase In-App Messaging config](/firebase-in-app-messaging-config.png)
Its really easy to compose a message to users. On the right you can se the preview of the banner.

### Job done!

Banner shows up for existing and new users once.
![Firebase In-App Messaging config](/screenshot-firebase-in-app-messaging.png)


Learn how to use Firebase In-App Messaging to communicate with users during app downtime, with practical examples from a real-world React Native application.

Getting touch with the users using Firebase In-App Messaging


Next.js is a great [React](https://reactjs.org/) framework. It's easy to use and lightweight. I use it on my personal [website (toukopeltomaa.com)](https://toukopeltomaa.com/).

In this post I'm going to show how to make a simple blog using [Markdown](https://en.wikipedia.org/wiki/Markdown) and [Next.js](https://nextjs.org/).

### 1. Create folder for all Markdown files

Create a folder named posts root of your project. Create all of your posts as Markdown there

#### Example Markdown file in posts/example-post.md

```markdown
---
title: Example post
date: 13-11-2018
writtenBy: Touko Peltomaa
---

## Example post
```

### 2. Add Webpack plugin raw-loader to next.config.js

We need [raw-loader](https://github.com/webpack-contrib/raw-loader) to load Markdown files

```bash
npm i -D raw-loader
```

#### next.config.js file

Create next.config.js to your project's root folder if you haven't already

```js
module.exports = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.md$/,
      use: "raw-loader",
    });

    return config;
  },
};
```

### 3. Create home page at pages/index.js

#### Parse posts

We are going to parse posts with [gray-matter](https://github.com/jonschlinkert/gray-matter) library

gray-matter library will parse the [YAML](https://en.wikipedia.org/wiki/YAML) metadata. We can use the YAML data for SEO, written by and post dates.

```bash
npm i -S gray-matter
```

#### Gets posts from posts/\* folder

```jsx
import React from "react";
import matter from "gray-matter";
import Link from "next/link";

export default class extends React.Component {
  static async getInitialProps() {
    // Get posts from folder
    const posts = ((ctx) => {
      const keys = ctx.keys();
      const values = keys.map(ctx);

      const data = keys.map((key, index) => {
        // Create slug from filename
        const slug = key
          .replace(/^.*[\\\/]/, "")
          .split(".")
          .slice(0, -1)
          .join(".");
        const value = values[index];

        // Parse document
        const document = matter(value);

        return {
          document,
          slug,
        };
      });

      return data;
    })(require.context("../posts", true, /\.md$/));

    return {
      posts,
    };
  }

  render() {
    return (
      <>
        <h1>Posts</h1>
        {this.props.posts.map(({ document: { data }, slug }) => (
          <Link href={{ pathname: "/post", query: { id: slug } }} key={slug}>
            <h2>{data.title}</h2>
          </Link>
        ))}
      </>
    );
  }
}
```

The `getInitialProps` function gets posts from posts folder and returns them in a usable format. _We are going to use your filename as our post's slug or id_

### 3. Create post page at pages/post.js

Get document name from querystring, require it and parse it.

#### Install React Markdown

To render Markdown we are going to use [react-markdown](https://github.com/rexxars/react-markdown)

```bash
npm i -S react-markdown
```

```jsx
import React from "react";
import matter from "gray-matter";
import ReactMarkdown from "react-markdown";

export default class extends React.Component {
  static async getInitialProps({ query }) {
    const post = await import(`../posts/${query.id}.md`);
    const document = matter(post.default);

    return {
      ...document,
    };
  }

  render() {
    return (
      <>
        <h1>{this.props.data.title}</h1>
        <i>{`Written by ${this.props.data.writtenBy} | ${this.props.data.date}`}</i>
        <ReactMarkdown source={this.props.content} />
      </>
    );
  }
}
```


Tutorial on building a Markdown-powered blog with Next.js, including setup, Markdown parsing, and dynamic routing for blog posts.

Blog