I find myself organizing, separating the books from papers from photos from trash. I look around and make a cup of instant coffee. How quickly I’ve found myself losing the taste for fresh coffee. Patterns I formed while away fall to the wayside in this malaise of the past. Present tense in this old familiar place requires other forms of being. I find myself being absorbed into old routines of when I was last home. I sense some distance from my peers who have found themselves outside of home through finding one of their own. Do I have a say as to where all the clutter should go? Should I invest myself into this lifetime project to rid ourselves of the anguish that we have collected over years? How does one even begin? Is the kind of resolve required for this process contained in me? What is my complicity in all this?

How much of my motivations are a reflection of my desire for a sense of accomplishment? My mother has spent her years living and being in the way she knows best – a life that cannot become mine no matter how much I try. I am me and she is her. The qualities that I value seem to be at odds with who I am seeing her to be. Yet, just like her, I have started this slow accumulation of things, memories, notes, experiences that have years to fully mature and someday overflow into a cluttered house that I will one day call my home. This aversion to home seems to come from a misunderstanding of the kind of person my mother is – a collector of memories fueled by the refusal to simply let things fade away into mercy of the brain’s short memory. She insists on taking pictures, let’s things bloom to an old age, keeps a record of things she has acquired since she can remember. These are the simple patterns whence every aspect of her life flows from. Yet, I seek the very novelty that has drawn me farther away from knowing a lifetime of living. Five years from now, how can I remember that things I liked, kind of food I ate, books I read, people I talked to if I throw away anchors to the person I am becoming. And that, is perhaps why I turn to this form of recording through words, though inadequate it is to keep a true account of being, of seeing, of understanding this world and what it lays before me. Writing, however, can only be a tool in the attempt to confront my past. It can take me to the gate, but I must enter it myself, and walk through the thorny bushes, jump the cliffs, and brace the storms. Then, just maybe, I will again find the will to write about what I find on the other side of this journey.

Custom Utility Types

1. FilteredType - A Type that filters down the TypeToFilter to a tuple of types that match the Condition

   type FilteredType<TypeToFilter, Condition> = {
       [K in keyof TypeToFilter]: TypeToFilter[K] extends Condition ? K : never
   }[keyof TypeToFilter]
   

2. Constructable<T>- a type that matches a type that can be instantiated, i.e. classes

   type Constructable<T> = new (...args: any[]) => T
   

3. ValueOf - For a given type, this filters down to a tuple of the values of the type

   type ValueOf<T> = T[keyof T]
   

4. DeepPartial - Makes all nested properties of an object to be Optional.

   type DeepPartial<T> = T extends Object ? {
       [K in keyof T] : DeepPartial<T[K]>
   } : T
   

Utility Functions

1. The filterKeys type filters a type based on the regex provided. This is useful if you would like to get the keys of an object that meet a certain criteria.

   function filterKeys<T extends Object, K extends RegExp>(source: T, regExp: K): FilteredType<T, K>[]{
     return Object.keys(source).filter((key) =>
       regExp.test(key)
     ) as FilteredType<T, K>[]
   }
   

2. getConstructorParams - this returns a list of the constructor parameters of the class. We can also utilize the Constructable<T> type we defined earlier and pass the class into the function:

   /* as defined above in the utility types */
   type Constructable<T> = new (...args: any[]) => T
   
   function getConstructorParams<T>(constructor: Constructable<T>) {
       const params = constructor.toString().match(/\(([^)]*)\)/)?.[1]
       return params?.split(',').map((param) => param.trim()) ?? []
   }
   

Within Angular applications, we can leverage the CanDeactivate interface to implement a route guard which can then be added to the route’s canDeactivate property to notify a user that they have unsaved changes in their app.

Defining the Component that can deactivate navigation

The component that checks whether navigation can proceed or be cancelled contains a function, canDeactivate, that can be called in the route guard to check whether or not navigation away from the component or page can continue or be cancelled.

An interface can be defined which will be implemented by our component. The function to be called can have one of the following return types:

type CanDeactivateFn = (...args: any[]) => Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree;

In our case, we’ll stick to boolean | Observable<boolean>. Our component will call it’s canDeactivate function and return boolean | Observable<boolean> depending on whatever checks the component runs to determine this.

So we have as our interface:

// deactivatable-component.interface.ts
export interface DeactivatableComponent {
    canDeactivate: () => boolean | Observable<boolean>
}

We can now implement this interface in a component. Assuming we have a form page that would possibly contains unsaved changes, the component has the following functions:

• containsUnsavedChanges - a function that returns true or false checking if the form values have been saved by the user. This implementation could be enhanced to fit any use case — even checking the server for unsaved changes or invalid values and so forth
• ngAfterViewInit - this is a life cycle hook that updates the form with the values saved in local storage. These values could be updated from the state and/or the database
• save - this function updates the state when the user clicks the “Save” button.
• canDeactivate - this is our implementation of the CanDeactivate interface that our component implements. This function checks whether changes have been saved when a user tries to navigate away from the page, and if not, opens a dialog to confirm whether the user would like to proceed with or without saving the changes

import { AfterContentInit, Component, ViewChild } from '@angular/core'
import { NgForm } from '@angular/forms'
import { MatDialog } from '@angular/material/dialog'
import { tap } from 'rxjs'
import { CoreModule } from '../../core/core.module'
import { DeactivatableComponent } from '../../unsaved-changes.guard'
import { UnsavedChangesDialog } from '../unsaved-changes-dialog.component'

@Component({
        standalone: true,
    imports: [CoreModule],
    templateUrl: './favorites-form.component.html',
    styles: [
        `
            h1{
                text-align: center;
            }
            form{
                margin: 1em;
                display: grid;
                gap: 1em;
            }
            footer{
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;

            }
            .unsaved-changes{
                margin-bottom: 0.5em;
            }
        `,
    ],
})
export FormComponent implements DeactivatableComponent{
        /** Our favorites object to save changes */
    private favorites = { movie: '', tvShow: '' }
    /** Read the form from the Template */
    @ViewChild('FavoritesForm', { static: true }) favoritesForm!: NgForm

    constructor(private dialog: MatDialog) {}

    ngAfterContentInit() {
        /** We need to check the next tick since the controls are not registered yet */
        setTimeout(() =>
            this.favoritesForm.setValue(JSON.parse(window.localStorage?.getItem('favorites')) ?? this.favorites)
        )
        this.favorites = JSON.parse(window.localStorage?.getItem('favorites')) ?? this.favorites
    }

    /**
     * Checks whether the form contains unsaved changes
     */
    containsUnsavedChanges() {
        return Object.keys(this.favorites)
            .map((key) => this.favoritesForm.value[key] === this.favorites[key])
            .some((value) => !value)
    }

    /**
     * Updates the favorites object and saves it to local storage
     */
    save() {
        this.favorites = { ...this.favoritesForm.value }
        window.localStorage.setItem('favorites', JSON.stringify(this.favorites))
    }

    /**
     * If changes are not saved, a dialog is opened to confirm with the user
     * that they want to proceed without saving
     */
    canDeactivate() {
        if (!this.containsUnsavedChanges()) {
            return true
        } else {
            return this.dialog.open(UnsavedChangesDialog).afterClosed()
        }
    }}
}

Here would be the template for this component:

<h1>Favourite Movies & TV Shows</h1>
<form #FavoritesForm="ngForm">
    <mat-form-field>
        <mat-label>Favorite Movie of all time</mat-label>
        <input name="movie" matInput placeholder="Ex. Interstellar" value="" ngModel />
    </mat-form-field>

    <mat-form-field>
        <mat-label>Favorite TV Show of all time</mat-label>
        <input name="tvShow" matInput placeholder="Ex. The Last of Us" ngModel />
    </mat-form-field>
</form>
<footer>
    <p *ngIf="containsUnsavedChanges()" class="unsaved-changes" color="warn">The form contains unsaved changes</p>
    <button mat-raised-button color="primary" (click)="save()">Save</button>
</footer>

As one can infer from the form, if the user doesn’t save changes, then a dialog will be opened to confirm whether the user would like to save the changes or not

Implementing the CanDeactivate guard

There are two ways of writing route guards in Angular. Either a class that implements the CanDeactivate interface or a function with the CanDeactivateFn signature.

1. Implementing the guard as a function

   As of Angular 14.2, Functional Route guards were introduced as a way to simplify the writing and wiring up of various types of guards in Angular. You can read more about the updates in this blog post (Advancements in the Angular Router).

   Our implementation would then simply call the components canDeactivate function

   import { CanDeactivateFn } from '@angular/router'
   import { Observable } from 'rxjs'
   import { DeactivatableComponent } from './deactivatable-component.interface.ts'
   
   /** Our Route Guard as a Function */
   export const canDeactivateFormComponent: CanDeactivateFn<DeactivatableComponent> = (component: DeactivatableComponent) => {
       if (component.canDeactivate) {
           return component.canDeactivate()
       }
       return true
   }
   

   This function can then be passed directly to the routes as:

   const routes: Routes = [
       {
           path: 'favorites',
           component: FavoritesForm,
           canDeactivate: [canDeactivateFormComponent],
       },
   ]
   

2. Implementing the route guard as an injectable class

   Route guards can also be implemented as an injectable class. This implementation looks very similar to the functional guard. And so we have:

   import { CanDeactivate } from '@angular/router'
   import { Observable } from 'rxjs'
   import { Injectable } from '@angular/core'
   
   /* Our Route Guard as an Injectable Class */
   @Injectable({
       providedIn: 'root',
   })
   export class UnsavedChangesGuard implements CanDeactivate<DeactivatableComponent> {
       canDeactivate: CanDeactivateFn<DeactivatableComponent> = (component: DeactivatableComponent) => {
           if (component.canDeactivate) {
               return component.canDeactivate()
           }
           return true
       }
   }
   
   export interface DeactivatableComponent {
       canDeactivate: () => boolean | Observable<boolean>
   }
   

   This can then also be added to the canDeactivate property for the route as:

   const routes: Routes = [
       {
           path: 'favorites',
           component: FavoritesForm,
           canDeactivate: [canDeactivateFormComponent],
       }
   ]
   

With our guard in place, if we edit the form and try to navigate away without saving, we will be warned through a dialog

You can preview an example of the app here:

Links and Resources

• Route properties (Angular Docs)
• CanDeactivateFn signature
• CanDeactivate interface
• Advancements in the Angular Router (Angular Blog)

Here's my track of the Week

<SpotifyTrack src="https://open.spotify.com/embed/track/5Te2aNOI54aBtQPqLqMsSq?utm_source=generator&theme=0"

One issue that one may encounter is when trying to build libraries that depend on other libraries within the same monorepo. Say for instance we are working in an nx workspace called @boomerang and within this workspace we have two angular buildable libraries called @boomerang/common and @boomerang/utils. Since these are Angular libraries, NX uses it's own wrapper around ng-packagr called @nrwl/ng-packagr-lite.

If, say @boomerang/common imports @boomerang/utils, when trying to build @boomerang/common, an error I encountered looked like TS2307: Cannot find module '@boomerang/utils' or its corresponding type declarations.

When I looked into what was causing the issue, its seems like a small tweak to the tsConfig.base.json at the root of the workspace by adding the @boomerang/utils dist path to the compilerOptions paths fixes the import issue.

{
    "compilerOptions": {
        "paths: {
            "@boomerang/common": ["libs/common/src/index.ts"],
-             "@boomerang/utils": ["libs/utils/src/index.ts"],
+             "@boomerang/utils": [
+                 "dist/libs/utils",
+                 "libs/utils/src/index.ts"
+             ]
        }
    }
}

This solution was inspired by this comment on nx github issues as well as this commit diff solution. Both of these mention updating the package.json as well to use the npm scope, i.e. updating the package.json for @boomerang/utils to look like:

{
    "name": "@boomerang/utils"
}

However, this update doesn’t necessarily fix the build issue if your packages are not publishable.

Happy Hacking!

Resources and Links

• Publishable and Buildable Nx Libraries
• @nrwl/ng-packagr-lite docs
• @nrwl/angular:library docs
• Github Comment with solution
• poc-workspace diff by zack9433 on github to show a solution

The RxJs Subject is a type of observable that is also an observer. A common pattern I find myself implementing in several projects is defining a Subject, often also a BehaviorSubject which then holds different pieces of data to be consumed in differnt parts of an application. In order to pass data to the Subject, which is also an observer, we call the .next with the data the Subject should hold. A simple example would be while using the tap operator to perform side effects in our observable stream.

A common pitfall is then passing Subject.next directly as the argument to a pipeable operator. For instance, when using tap, calling tap(new Subject().next). We will see how this can cause unexpected errors that are may be hard to debug and how to avoid it.

Suppose you have an RxJs subject that is keeping track of the value in an observable stream (say called stream$).

import { Subject, timer, take, tap } from 'rxjs'

const stream$ = timer(0, 1000).pipe(take(5))

One way to pass the current value to the subject is using the tap operator that accepts an observer, i.e. an object containing the next, error and complete functions.

If we only pass a callback function that logs out the current value in the observable stream, we would have something that looks like:

stream$.pipe(
    tap(console.log)
).subscribe()
/*
// Result would look like:
0
1
2
3
4
*/

If we have a subject called _count where we would like to keep track of the current value in the stream, the first instinct would be to replace console.log with _count.next:

const _count = new Subject<number>()

stream$.pipe(
    tap(_count.next)
).subscribe()

However, you'll notice that the above implementation does not work, resulting in the error: TypeError: _this._throwIfClosed is not a function.

The reason being that RxJs's Subject is a class whose next implementation relies on this keyword which refers to the _count instance. You can view the source code here. Passing just the _count.next function would reference this which refers to the global scope and not the _count instance.

We can see this in action by implementing our own observer that references this:

const observerStore = {
    store: new Array<number>(),
    next(value: number) {
        this.store.push(value)
    },
}
/* Replacing the _count with our observer would then look like below👇🏻 */
stream$.pipe(
    tap(observerStore.next)
).subscribe()

The implementation above would also give us an error: TypeError: Cannot read properties of undefined (reading 'push'). For the same reason that the this reference would refer to the global object and not the observerStore object.

For instance, if our observerStore's next function just logged out the value, then passing in the observerStore.next to tap would work as expected since the next function does not reference this:

const observerStore = {
    store: new Array<number>(),
    next(value: number) {
        console.log(value)
    },
}

/* Works! */
stream$.pipe(tap<number>(_count.next)).subscribe()

Solutions

1. Pass in the observer object

   The straightforward solution would be to simply to pass in the observer object into the tap operator:

   /* This works */
   stream$.pipe(
       tap(observerStore)
   ).subscribe()
   

2. Bind the observer to this

   One could use Function.prototype.bind which is available to the function prototype to bind this to the observer object so that when this is referenced, the function references the observer instead of the global this object:

   /* _count Subjct */
   stream$.pipe(
       tap(_count.next.bind(_count))
   ).subscribe()
   
   /* the observerStore */
   stream$.pipe(
       tap(observerStore.next.bind(observerStore))
   ).subscribe()
   

   As the MDN docs state, “The bind() method creates a new function that, when called, has its thiskeyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.”

Although both of the solutions work, passing the observer object is much more clear to another reader of the code on what is going on whereas the latter would cause someone who didn't write the code to stop and ask why we are calling .bind in the first place.

Happy hacking!

References

• MDN references on Function.prototype.bind()
• RxJs tap operator
• RxJs Operators

One of these the ways the library achieves this is by adding your own palette instead of the default themes: deep-purple-amber, indigo-pink, purple-green or pink-bluegrey.

The first thing you'd need to do is select your primary, accent and tertiary colors. The material.io Color Tool provides a useful visual preview of what your primary and accent colors would look like on an application interface.

Here's a sample which you can also preview here:

<img alt="Using the Material UI Color Tool to select your primary and accent colors" src={'https://raw.githubusercontent.com/laudebugs/blog-posts/main/assets/_/using-material-design-color-tool.png'} width={'100%'} />

The tool also shows you how accessible your color palette is against fonts of various colors. With the above palette, for instance, the P-Dark with black text would not be as visible.

Although this tool doesn't provide an option to add a warn color, the angular material documentation makes this palette optional and defaults to red if not specified.

With the palette above: (primary: #673ab7, secondary: #9b27af, and a warn color value of #f4511e), we can use an open source tool called Material Design Palette generator to generate hues of 50 and then each 100 between 100 and 900 without having to do this manually.

Our resulting palette would look like below. You could also play around with the palette here and try out different colors as well.

<img alt="Using the Material UI Palette Generator to generate a palette" src={'https://raw.githubusercontent.com/laudebugs/blog-posts/main/assets/_/using-the-palette-generator.png'} width={'100%'} />

The cool thing about the tool above is that it provides an easy export function for various frameworks including Android, Angular, React, Vue, Ember and more.

Since we are using Angular, we would use the Angular 2 Material exported values which we can define in a palette.scss file:

/* For use in src/lib/core/theming/_palette.scss */
$primary: (
    50: #ede7f6,
    100: #d1c4e9,
    200: #b39ddb,
    300: #9575cd,
    400: #7e58c2,
    500: #673ab7,
    600: #5f34b0,
    700: #542ca7,
    800: #4a259f,
    900: #391890,
    A100: #d4c7ff,
    A200: #ad94ff,
    A400: #8661ff,
    A700: #7347ff,
    contrast: (
        50: #000000,
        100: #000000,
        200: #000000,
        300: #000000,
        400: #ffffff,
        500: #ffffff,
        600: #ffffff,
        700: #ffffff,
        800: #ffffff,
        900: #ffffff,
        A100: #000000,
        A200: #000000,
        A400: #ffffff,
        A700: #ffffff,
    ),
);

$accent: (
    50: #f3e5f5,
    100: #e1bee7,
    200: #cd93d7,
    300: #b968c7,
    400: #aa47bb,
    500: #9b27af,
    600: #9323a8,
    700: #891d9f,
    800: #7f1796,
    900: #6d0e86,
    A100: #efb7ff,
    A200: #e384ff,
    A400: #d851ff,
    A700: #d237ff,
    contrast: (
        50: #000000,
        100: #000000,
        200: #000000,
        300: #000000,
        400: #ffffff,
        500: #ffffff,
        600: #ffffff,
        700: #ffffff,
        800: #ffffff,
        900: #ffffff,
        A100: #000000,
        A200: #000000,
        A400: #000000,
        A700: #ffffff,
    ),
);

$warn: (
    50: #feeae4,
    100: #fccbbc,
    200: #faa88f,
    300: #f78562,
    400: #f66b40,
    500: #f4511e,
    600: #f34a1a,
    700: #f14016,
    800: #ef3712,
    900: #ec270a,
    A100: #ffffff,
    A200: #ffe5e2,
    A400: #ffb7af,
    A700: #ffa096,
    contrast: (
        50: #000000,
        100: #000000,
        200: #000000,
        300: #000000,
        400: #000000,
        500: #ffffff,
        600: #ffffff,
        700: #ffffff,
        800: #ffffff,
        900: #ffffff,
        A100: #000000,
        A200: #000000,
        A400: #000000,
        A700: #000000,
    ),
);

In our theme.scss file, we would then define our palette as below:

@use './palette.scss' as palette;
@use '@angular/material' as mat;
@import '@angular/material/theming';

$app-primary: mat.define-palette(palette.$primary);
$app-accent: mat.define-palette(palette.$accent);
$app-warn: mat.define-palette(palette.$warn);

$app-theme: mat.define-light-theme(
    (
        color: (
            primary: $app-primary,
            accent: $app-accent,
            warn: $app-warn,
        ),
    )
);
@include mat.all-component-themes($app-theme);

And just like that, we have customized our Angular App using Angular Material and a custom theme.

Links and Resources

• Angular Material
• Material Design Color Tool
• Material Design Palette Generator

Why should we write tests? Why should we refactor? Why should we write documentation? The answers to such questions are easy to bullet point and yet, I see in them a pursuit of some kind of impact. Because we don't do each of these tasks out of pleasure — as some would like to claim, but out of desiring that (a) our code “feel” perfect and immutable or on a more altruistic sense that (b) our efforts might help someone understand why we wrote the code the way we did.

In a sense, it helps to understand that our efforts may or may not matter. Yet, it's we keep adding, giving even though we may not know if it will be received or not. We move on, start something here, pick up something else there and wander in pursuit of imperfection, adding our own, because that's unmistakably what remains when we leave.

However, what if you needed to write your custom operator to transform data the way you wanted, or tweak the captureError operator to handle the error in a certain way and return something else in case an error happened.

In an application I was working on, for which I was using Sentry to handle any errors, I wanted to have the captureError to send the error message to Sentry, and return fallback data in case an error happened.

import { captureException } from '@sentry/angular'
import { BehaviorSubject, Observable, OperatorFunction, catchError, tap } from 'rxjs'

export function consume<T>(consumer: BehaviorSubject<T>, fallback$: Observable<T>): OperatorFunction<T, T> {
    return (source$: Observable<T>) => {
        return source$.pipe(
            catchError((error) => {
                captureException(error)
                return fallback$
            }),
            tap(consumer),
        )
    }
}

The operator above is written in the form of a curried function, that accepts two initial inputs: consumer - which in this case was a behavior subject that stores the current value in the observable stream, and fallback$ which is the data to return in case an error happens. If no error happens, the captureError rxjs operator isn't called. In all cases, either the data from the observable stream or the fallback data is passed on to the consuming behavior Subject.

And there we have it! Our own custom RxJS operator 🧞‍♂️

Links

• RxJs documentation
• RxJs Subject reference
• catch / catchError in RxJs
• Sentry JavaScript library documentation
• Currying in JavaScript

Broadly speaking, there are two ways to create dynamic components in Angular:

1. Using a ViewContainerRef - that “represents a container where one or more views can be attached to a component.” or
2. By using Angular's built in NgComponentOutlet directive

The main focus of this article will be the former, using a ViewContainerRef to create dynamic components since the Angular documentation is really clear on the second way - using NgComponentOutlet.

Using ViewContainerRef

The ViewContainerRef is a class that gets access to a container where other components (host views) can be inserted at run time using the createComponent() method of the ViewContainerRef class.

To dynamically create a component, we have to decide how and where we would like to place the component (the “anchor point”).

Step 1. Defining the anchor point

How you define the anchor point determines where you can place it within a host component.

(i) The Anchor Directive

Following the Angular docs example on creating a dynamic component, one can utilize a directive placed on an element such that the element will act as an insertion point to the dynamic component (a host - i.e. “Create the dynamic component and place me wherever you see this directive” on an element.)

To achieve this, we first create the directive and inject the ViewContainerRef . The ViewContainerRef will get a reference to the element on which the directive is placed, dynamically create the component and insert it into the view at the position where the element is.

Take the scenario where we would like to display a list of movies with their information (a simple example that can be achieved with other ways but easy enough to demonstrate with dynamic components).

A movie has the following interface:

export interface IMovie {
    id: number
    title: string
    poster: string
    synopsis: string
    genres: Array<string>
    year: number
    director: string
    actors: Array<string>
    hours: Array<string>
}

We can then define our MovieHostDirective as follows:

import { Directive, ViewContainerRef } from '@angular/core'

@Directive({
    selector: '[movieHost]',
})
export class MovieHostDirective {
    constructor(public viewContainerRef: ViewContainerRef) {}
}

When we then create our host component template, we can place this directive on an element such as a div or using angular's ng-template or ng-container.

<!-- using an html element -->
<div movieHost></div>

<!-- Using ng-template -->
<ng-template movieHost></ng-template>

<!-- using ng-container -->
<ng-container movieHost></ng-container>

We can then get a reference to the element with the directive by querying the component template for the first occurrence of the directive (using ViewChild ), or all occurrences of the directive (using ViewChildren):

/* Using ViewChild to get the first occurrence */
@ViewChild(MovieHostDirective, { static: true }) movieHost: MovieHostDirective;

/* Using ViewChildren to get the all occurrences */
@ViewChildren(MovieHostDirective, { static: true }) movieHosts: QueryList<MovieHostDirective>;

(ii) Using a Template Variable to target an element as an Anchor

One can target an element to act as a host for our dynamic component by using a template variable that follows the syntax # followed by whatever variable name we would like. For example, if our template variable name is to be called: TemplateRefAnchor then, in our html template, we would have:

<!-- using an html element -->
<div #TemplateRefAnchor></div>

<!-- Using ng-template -->
<ng-template #TemplateRefAnchor></ng-template>

<!-- using ng-container -->
<ng-container #TemplateRefAnchor></ng-container>

(iii) The Host View as the Anchor

We can use the host view (the component in which we will create the dynamic component) as an anchor for the newly created component. In this case, the created components would be appended at the end of the DOM tree. This works if we know that we don't have to insert the newly created elements before other elements that were generated at build time.

In this case, we inject the ViewContainerRef into the component:

Step 2: Creating the Dynamic Component

Taking the @ViewChild use case, (the same applies to the @ViewChildren case), the view queries are set before the ngAfterViewInit life cycle hook is called. We can then create our dynamic components at this point.

import { Component, AfterViewInit, ViewChild, } from '@angular/core';

/* We defined the MovieHostDirective earlier */
import { MovieHostDirective } from '../core/directives/movie-host.directive'
/* Assume we created this MovieComponent component somewhere else */
import { MovieComponent } from '../core/components/movie/movie.component'

@Component({
    selector: 'app-home',
    template: `<ng-template movieHost></ng-template>`,
})
export class HomeComponent extends AfterViewInit {
    /* Look up the element containing the MoviehostDirective */
    @ViewChild(MovieHostDirective, { static: true, read: ViewContainerRef }) movieHost!: ViewContainerRef

    /* Look Up the template reference called TemplateRefAnchor */
    @ViewChild('TemplateRefAnchor', { static: true, read: ViewContainerRef }) templateRefAnchor!: ViewContainerRef

    /* Another template reference to use createOptions */
    @ViewChild('UsingCreateComponentOptionsAnchor', { static: true, read: ViewContainerRef }) createComponentOptionsAnchor!: ViewContainerRef

    /* Create dynamic components here */
    ngAfterViewInit(){
        const component = this.movieHost.createComponent(MovieComponent)
        component.instance.movie = MOVIES[0]
    }
}

Similar example while using a template reference as an anchor:

// ... code ommited
@Component({
    selector: 'app-home',
    template: `<ng-template #TemplateRefAnchor></ng-template>`,
})
export class HomeComponent extends AfterViewInit {
    /* Look Up the template reference called TemplateRefAnchor */
    @ViewChild('TemplateRefAnchor', { static: true, read: ViewContainerRef }) templateRefAnchor!: ViewContainerRef

    ngAfterViewInit(){
        /* Create the dynamic component using the template reference as an anchor */
        const component = this.templateRefAnchor.createComponent(MovieComponent)
        component.instance.movie = MOVIES[0]
    }
}

Similar example using the host element as the anchor:

// ... code ommited
@Component({
    selector: 'app-home',
    template: `<h1> Host element </h1>`,
})
export class HomeComponent extends AfterViewInit {

    constructor(private viewContainerRef: ViewContainerRef) { }

    ngAfterViewInit(){
        const component = this.viewContainerRef.createComponent(MovieComponent)
        component.instance.movie = MOVIES[0]
    }
}

We also see another issue with this approach. Since we mutate the data of the dynamic component, Angular's change detection will throw the ExpressionChangedAfterItHasBeenCheckedError warning that you may have encountered before:

The reason for this particular case is that angular has detected that we have changed the variable after it was last checked when the dynamically created component's view was initialized.

Some ways to resolve this is to move our code into the ngAfterContentInit life cycle hook or injecting the change detector (ChangeDetectorRef) and calling its detectChanges() method:

1. ngAfterContentInit

   // code ommitted
   export class HomeComponent implements AfterContentInit {
   
       /* Implement the AfterContentInit life cycle hook */
       ngAfterContentInit() {
           /* Create the component */
           const movieComponent = this.viewContainerRef.createComponent<MovieComponent>(MovieComponent)
   
           /* Pass data to the dynamically created component here. */
           movieComponent.instance.movie = MOVIES[0]
       }
   }
   

2. using the ChangeDetectorRef

   // code ommitted
   export class HomeComponent implements AfterViewInit {
       /* Inject the ChangeDetectorRef */
       constructor(private cd: ChangeDetectorRef, private viewContainerRef: ViewContainerRef) {}
   
       ngAfterViewInit() {
           /* Create the component */
           const movieComponent = this.viewContainerRef.createComponent<MovieComponent>(MovieComponent)
   
           /* Pass data to the dynamically created component here. */
           movieComponent.instance.movie = MOVIES[0]
   
           /*  Tell angular to check for changes */
           this.cd.detectChanges()
       }
   }
   

The ViewContainerRef also provides a way to inject dependencies into our dynamically created component in the options object (the optional second parameter of the createComponent method). The options object contains the following extra parameters (quoted from the Angular docs):

• index - the index at which to insert the new components host view
• injector - the injector to use as the parent for the new component
• ngModuleRef - an ngModuleRef of the component's NgModule
• projectableNodes - list of Dom nodes that should be projected though ng-content

Things begin to get a little more interesting as we explore this options object and how it expands our flexibility with dynamically created components. We'll explore the first two for now (index and injector).

index

The index parameter allows us to insert a dynamically created component at a particular index. Say we would like to create a second component dynamically and place it at index 0, then we would do something like:

const movieComponent2 = viewContainerRef.createComponent<MovieComponent>(MovieComponent, { index: 0 })

Of course, we can't place an element at index 1 if the length of dynamically created components in the ViewContainerRef is 0.

injector

We can inject dependencies into our dynamic components using the injector parameter.

Say, for instance, we want to pass in the movie when we create the component. We can first create an injector token that we can pass in for the movie dependency:

import { InjectionToken } from '@angular/core'

export const MOVIE_TOKEN = new InjectionToken<string>('movie')

In our movie.component.ts file, we can then pass this dependency as a required dependency, or mark it as an optional dependency in the constructor - if you want to:

// In movie.component.ts
constructor(@Inject(MOVIE_TOKEN) public movie: IMovie) {}

// As an optional dependency
constructor(@Inject(MOVIE_TOKEN) @Optional() public movie: IMovie) {}

In our app.component.ts, we would then create an injector and pass it to our component when we create it. Firstly, we provide our token and pass in the value that we would like to be available to the dynamically created component.

// ... code ommitted
export class HomeComponent extends AfterViewInit {
    constructor(public parentInjector: Injector) {}
    // code ommited
    ngAfterViewInit() {
        /* Create the injector to be passed to the component and provide the value */
        const injector = Injector.create({
            providers: [{ provide: MOVIE_TOKEN, useValue: MOVIES[0] }],
            parent: this.parentInjector,
        })

        /* Create the component with the injector passed in */
        const movieComponent = viewContainerRef.createComponent<MovieComponent>(MovieComponent, {
            index: 0,
            injector,
        })
    }
}

Noteworthy

In previous versions of Angular, Dynamically created components had to be added to the entryComponents of the NgModule in which they are to be imported. With Ivy, this is no longer a requirement and they can be imported the same way as other components. You can read more about it here.

Recap

However you decide to choose where to anchor your components, all these ways are valid and can go far in and of themselves. One advantage of dynamically generating the component using the ViewContainerRef is that you have access to the current state of the newly created component and can leverage it for your particular use case.

NgComponentOutlet

The NgComponentOutlet directive provides a “declarative approach for dynamic component creation” (quoted from the Angular docs). Here, the documentation is pretty clear on how to use this directive to dynamically create a component.

Resources and Links

• Dynamic component loader
• ViewContainerRef
• NgComponentOutlet
• QueryList
• Stackblitz example on Dynamic Components
• GitHub repository to run locally

In our case, we would like to take advantage of Apollo Client's apis that offer useful features within a react application such as hooks, caching, and also since it's simpler (one can argue). 💁

Setup

To get started, working with queries and mutations can be achieved by following Apollo's documentation.. Where it get's interesting is once a subscription is needed to be made by the client.

First, we need to configure our Apollo client to make use of the Apollo links to connect to the AppSync api. These are: aws-appsync-auth-link and aws-appsync-subscription-link. The former provides authentication for the Apollo client to connect to the api while the later provides the subscription tooling that AWS Lambdas need to work with subscriptions, which we would have otherwise needed to implement ourselves.🤢

The example provided in the docs here is pretty straightforward. In our case, the auth provided to the Apollo links would look like:

const auth = {
  type: 'OPENID_CONNECT'
  jwtToken: async () => token, // Required when you use Cognito UserPools OR OpenID Connect. token object is obtained previously
};

Although, the only thing to note is that, since we need to provide a token to the client, we just pass in our token that retrieves the most current Open ID JWT to pass to our requests.

Thus:

const link = ApolloLink.from([
    createAuthLink({
        url: API_URL,
        region: AWS_REGION,
        auth: { type: 'OPENID_CONNECT', jwtToken: async () => await getToken() },
    }),
    createSubscriptionHandshakeLink(
        { url: API_URL, region: AWS_REGION, auth: { type: 'OPENID_CONNECT', jwtToken: async () => await getToken() } },
        httpLink,
    ),
])

This workaround was noted in this issue on Github.

Issues

• Unable to resolve module buffer:

  <img width={'100%'} alt="Screen Shot 2022-01-24 at 4 57 07 PM" src="https://user-images.githubusercontent.com/25782070/150878930-80928c4c-0e1e-421b-8314-3c1c580ebf97.png"/>

This can be solved by installing buffer and adding it to to the App.tsx file as noted in here on Stack overflow.

import { Buffer } from 'buffer';

global.Buffer = Buffer;

Links

• AppSync subscriptions with ApolloClient in React
• Using Authorization and Subscription links with Apollo Client V3 (No offline support)
• Building a real-time WebSocket client

I power on my machine, perhaps spending a minute or two to get my cold brew, swivel on my chair and listen. There's always someone running the show, and I turn on my editor back to where I'd left over the previous day.

I'm definitely late for that meeting and assemble my thoughts before I'm picked on to give an update. A few Uhhms as I open my pending PRs. "Working on [this and that]" I say - but If I were really stretching myself I could've finished all the work for this sprint in a day or two. I like the "corporate" nature of work sometimes - but I know there's a temptation to sink into the benignness of getting assigned tasks - and being expected to get into the routine of delivering things on certain timelines. That predictability of what I do at work I have found frustrating - so during my free time, I've spent my evenings and nights shipping something of my own - without timelines, without well-known requirements - chipping away at a project one google search after another - since my four year degree taught me how to google somewhat well enough so far.

And yet - I know there's plenty of things to learn at times it has felt overwhelming - so I've used the projects I've been involved in as a guide to learning something new - because it's not how much I know about something that's been helpful but rather being flexible and ready to learn. So sometimes I tell my PM or Scrum Master that the implementation doesn't matter because it's a learning opportunity for me. I think that's important for my curiosity - or I'll get bored changing margins and font-sizes.

I worked from my bed, from my closet, from my kitchen, from the train, from the airport. This thing I do - isn't work anymore - at least not in the traditional sense that I've seen it. Perhaps it's the whole work from anywhere that's erased the boundaries.

In a sense - there's always this dance to play — between staying curious and contributing to a vision - even in the smallest of ways. Or else we'd be all trying to get our own things done and not achieve as much as we could together.

Tools Mentioned in this guide

• Husky
• Prettier
• Eslint
• Commitlint
• Commitizen
• Standard Version

Husky

Husky is used to make our commits more cool, and powerful to help development easier. In this guide, husky will be used to format both the files (source code) and commits themselves before they are executed (thus "pre" in the pre-commit hooks).

Read more here.

• Initialize Husky:

  # install husky
  npm install -D husky
  
  # initialize
  npx husky-init
  

Prettier & EsLint

If we would like to have our commits automatically format our code on every commit - to ensure that the codebase follows a specified standard, defined in the prettierrc file, then this is a handy tool to have.

1. Add Prettier and eslint to your project:

   # prettier
   npm install -D prettier
   
   # eslint
   npm install -D eslint
   

2. Add a prettier config file to the repository - named .prettierrc.json (or following the specified format for configuration files:

   {
     "trailingComma": "all",
     "tabWidth": 4,
     "semi": false,
     "singleQuote": true
     //more rules below
   }
   

3. Initialize EsLint:

   npx eslint --init
   

4. Set up ESLint to work with prettier

   Add prettier plugin to the eslint configuration file:

   // .eslintrc.json
   {
     "extends": [
       // other extensions,
       "prettier"
     ]
   }
   

   Now, you can specify prettier rules to work with your linter and not have both ESLint and Prettier enforcing different styles

5. Add Prettier Pre-commit Hook:

   npm install -D pretty-quick
   
   npx husky set ./husky/pre-commit "npx pretty-quick --staged"
   

There are more ways to configure your prettier pre-commit hooks found here.

CommitLint & CommitLint Hooks

Commitlint is a tool that lints commits - and make sure they are up to standard. We will also add a husky pre-commit hook that lints our commit messages

1. Install Commitlint

   npm install -D @commitlint/config-conventional @commitlint/cli
   
   # Configure commitlint to use conventional config
   echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
   

2. . Add the commitlint hooks:

   # Add hook
   npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'
   

3. Add a husky pre-commit hook config to the package.json

   "husky": {
     "hooks": {
       "prepare-commit-msg": "exec < /dev/tty && git cz --hook || true"
     }
   }
   

Commitizen

Commitizen is a command line interface tool that can be helpful in making commits a pretty-forward process following your linting rules.

1. Install the tool

   npm install -D commitizen
   

2. Add a script to the package.json to easily run commitizen:

   {
       "scripts": {
         "commit": "cz"
       }
   }
   

   An Example use:

source

Conventional Changelog

This will assist in generating changelogs automatically from commits:

1. Initialize:

   npx commitizen init cz-conventional-changelog -D --save-exac
   

Versioning and Release

We can use Standard Version to automatically generate versions for out projects.

1. Install Standard Version

   npm install -D standard-version
   

2. Add scripts to easily run releases and generate changelogs automaticallly:

   {
     "scripts": {
       "release": "standard-version"
     }
   }
   

   Another option to Standard version is semantic-release

You can now run your first release by:

npm run release

Plug: Here is an example of a changelog for my website.

If you create a release - then you can push that release by running:

git push --follow-tags

Update (25th Feb 2022)

I ended up writing a simple npm package to automate setting this whole process up for new projects You can find the package here.

References & Resources

Articles

• How to control your deployments and versioning with semantic-release & friends- (logrocket)
• Commit Standard and Semantic Versioning for any project - (dev)
• Automate Semantic Versioning with Conventional Commits (medium)
• Automatically generate and release a changelog using Node.js (logrocket)
• Development: How to adapt a custom conventional changelog (medium)
• Make everyone in your project write beautiful commit messages using commitlint and commitizen - loved this one!

Documentation

• Husky
• ESLint - Getting started
• Prettier - Pre-Commit Hooks
• Commitizen
• Commitlint
• Conventional Changelog
• Semantic Release

Other Useful Links

• Gitmoji

From May, 2020

Of all the past winters I've experienced, this past winter was also a time when I was trying to figure out my career, my faith, writing, family, friends and more. Most of that is still work in progress – I'm writing again – which I'm happy about. The opportunity intern at Antra, a consulting company, has been a process of learning. I recently also became a daily coffee drinker which I didn't ever see coming. I still convince a part of myself that it's not an addiction.

At the beginning of this very past winter, the was a kind of longing that hung in the air as I moved back to New York. This longing was for the certain past – the good and the bad as well as the future – always a time to look forward to and hope. This longing was at times deep and frustrating and at other times faded amidst the daily rhythms and rituals. Past victories and failures are both in themselves alluring. The former because I can easily hold them too close and close my eyes to what lays before me, now. The latter because I can also easily jump back right into them and stimy any progress I made to learn from my mistakes. However, the most attractive thing about the past is that the past has a certainty to it – it's complete and bound up in itself. How I badly wanted that – the certainty that the past could offer.

The future holds hope as an appeal. Often at times I tend to want to feed into that hope now – by doing what I can to make the future become the present. At times I don't want to wait – why wait for something so deeply attractive as a future. The risk here is, I think far more dangerous because I may then become frustrated and dissatisfied with the work I need to do to get there. The work needed to get there remains very much so in the present. I am writing all this as a reminder to myself that the living part is very much in the now.

As a side note, I've also been trying new recipes. Although I have tried different recipes, my beef stew isn't quite there yet as last weekend I skipped the tomatoes and added too much water but managed to salvage a meal for my room mates.

That's it for now, but I hope to share more in the future.

Thank you for reading.

Motivation

The Github GraphQL API provides a lot more capabilities than I can cover in one snack.

However, in searching for a way to share the small lessons that I pick up week in week out, I knew that publishing through Contentful, which it the CMS, I use for the main content in my blog site, was a little too much to share easily and quicly. Posting on Github and sharing that as gists seemed like I would be writing too much for a gist that is supposed to be a short code snippet - which was the original title of this section. Although MichaelCurrin proves me otherwise! His article is what got me goint in the first place!

Querying the GraphQL API for posts.

In order to use the Github GraphQL API, you can either use the API explorer by logging in through your github account, use an api testing tool like Insomnia, or you can use it programmatically.

Since I was using the Apollo Graph QL library to query my backend - that helps me manage comments and likes, I began to do a little research on how to query the Github GraphQL API. I will link the articles below. This stack overflow answered how to add an authorization header to an Apollo Client Query.

The Query

We will be using writing our query in a node.js environment using both Apollo Client and Axios

1. Obtain your github public access token

The only permission you need for this task is public_repo under repo:

• repo
  • public_repo

Give your token a name and will look something like this:

89fdd35bcd40787b519e97462cec0f9975a66a58

Note the token above is revoked and you'll need to generate yours. Once you're done, we're ready for the next step!

2. Querying the repo

In my case, I will be looking for files in my repository called articles. If you'd like to use your own repository, simply make note of your repository name.

Using the Apollo Client

1. Install the Apollo client

   npm install @apollo/client graphql
   

2. Working in your js file, import the Apollo client and a few methods that we will make use of:

   import { ApolloClient, InMemoryCache, gql, ApolloLink, HttpLink } from '@apollo/client'
   

3. Initialize a new apollo client with the github graphQL endpoint and your token

   const token = '89fdd35bcd40787b519e97462cec0f9975a66a58'
   
   const endpoint = 'https://api.github.com/graphql'
   
   // Add the toke to the header of your client for all your requests
   const githubLClient = new ApolloClient({
     uri: endpoint,
     headers: {
       authorization: `Bearer ${token}`
     },
     cache: new InMemoryCache({
       addTypename: false
     })
   })
   

4. Make the query I referenced github user int128's gist for the structure of the graphQl query:

   let request = await githubClient.query({
     query: gql`
       {
         repository(owner: "laudebugs", name: "articles") {
           defaultBranchRef {
             target {
               ... on Commit {
                 file(path: "/") {
                   type
                   object {
                     ... on Tree {
                       entries {
                         name
                         object {
                           ... on Blob {
                             text
                           }
                         }
                       }
                     }
                   }
                 }
               }
             }
           }
         }
       }
     `
   })
   

5. Parse your output to obtain the file's contents. By making this same query on Github's GraphQL explorer, the data returned, which is essentially a json object, at the time of writing this, looks like this:

   {
     "data": {
       "repository": {
         "defaultBranchRef": {
           "target": {
             "file": {
               "type": "tree",
               "object": {
                 "entries": [
                   {
                     "name": "QraphQL.md",
                     "object": {
                       "text": "# Exploring GraphQL\n"
                     }
                   },
                   {
                     "name": "README.md",
                     "object": {
                       "text": "# Articles"
                     }
                   }
                 ]
               }
             }
           }
         }
       }
     }
   }
   

   So, if to obtain the entries, we would access them by:

   let result = request.data.repository.defaultBranchRef.target.file.type.object.entries
   

Using Axios

1. Install the axios npm package

   npm install axios
   

2. Import exios into your node project:

   import axios from 'axios'
   

3. initialize an authentication object and the query string that will be attatched to your request

   // The Authorization in the header of the request
   const oauth = { Authorization: 'bearer ' + token }
   
   // The Query String
   const query = `
           {
             repository(owner: "laudebugs", name: "articles") {
               defaultBranchRef {
                 target {
                   ... on Commit {
                     file(path: "/") {
                       type
                       object {
                         ... on Tree {
                           entries {
                             name
                             object {
                               ... on Blob {
                                 text
                               }
                             }
                           }
                         }
                       }
                     }
                   }
                 }
               }
             }
           }
         `
   

4. Make the request, adding in the query and the header

   let request = axios.post(githubUrl, { query: query }, { headers: oauth })
   

5. Parse your output as above:

   let result = request.data.repository.defaultBranchRef.target.file.type.object.entries
   

Referenced articles

• Graph QL query for getting files.
• GraphQL Queries using Insomnia
• How to create a personal access token from your github account: Creating a personal access token
• Set Authorization Header with Apollo Client
• How to handle authorization header with apollo graphql? - Stack Overflow
• Get started with GitHub GraphQL API 👨‍🔬 on Dev

Initilizing the project

We'll be working in a terminal - be it the standalone teminal - or the integrated terminal in your text editor.

1. Initialize a repository in an empty folder, say, we call ours express-gql-api.:

   mkdir express-gql-api
   
   # enter the project folder
   cd express-gql-api
   

2. Initialize the folder as a node and git project:

   npm init -y
   
   git init
   

3. Initialize a Readme Having a Readme is essential for any project - this is the document people will see when they come across your repository in Github.

   
   We'll start off with a simple description but feel free to add more information about your project as you go. ```bash echo '# Express GraphQLAPI in TypeScript' > Readme.md ```

4. Initalize the source directory This is where we will place our .ts files

   mkdir src
   

TypeScript and Project SetUp

TypeScript is usually compiled to JavaScript and which is the code that is actually run. Assuming you already have the TypeScript installed, we will write the configuration file that tells the TypeScript compiler how to compile out files into JavaScript:

1. Initialize a tsconfig.json file in your root directory from the terminal

   tsc --init
   

2. . Working in the text editor, we will set the following compiler options:

   1. "rootDir" - this is the directory where the TypeScript compiler will search for .ts files to compile into JavaScript. In our case, the root directory is the src folder:

      {
        "compilerOptions": {
          //...
          "rootDir": "./src"
          //...
        }
      }
      

   2. "outDir" - this is the directory where the compiled JavaScript will be placed: In our case, we will call our output directory "dist"

      {
        "compilerOptions": {
          //...
          "rootDir": "./src",
          "ourDir": "./dist"
          //...
        }
      }
      

3. Finally, we will edit the package.json file so that we have a smooth time running the project. Add the following line under script in package.json:

   "scripts":{
     //...
      "start" : "nodemon dist/index.js",
      //...
   }
   

This is the basic setup that we need before we get started

SetUp

We will be working with a few packages that we need to install:

1. express - since we are buiding an express server
2. express-graphql - this is the express middleware that will allow us to build our graphQL endpoint
3. graphql-tools - A package that helps build the GraphQL Schema
4. mongoose - The library that will allow us to connect to a MongoDB database

Before we jump right into installing the packages, let's create a .gitignore file at the root folder and add node_modules so that git doesn't track npm packages:

echo node_modules > .gitignore

To install all the tools, we can do so in one command:

npm install -s express express-graphql graphql-tools mongoose nodemon

Before we start writing some code, we need to have our TypeScript compiler running so that we can generate the JavaScript files as we go. So, in a separate window, run the typescript compiler with a watch flag:

tsc -w

And now we are ready to build our api

The API 🥑

Let's add some files to our file structure first:

📦express-gql-api
┣ 📂src
┣ 📜.gitignore
┣ 📜Readme.md
┣ 📜package.json
┗ 📜tsconfig.json

However, let's add some files in the src folder first Create an empty directory in the src folder called data - this is where we willl be placing out database connectors, types, schemas and resolver files. Create the following files to match the following structure:

📦express-gql-api
┣ 📂src
┃ ┣ 📂data
┃ ┃ ┣ 📜db.ts
┃ ┃ ┣ 📜resolvers.ts
┃ ┃ ┣ 📜schema.ts
┃ ┃ ┗ 📜types.ts
┃ ┗ 📜index.ts
┣ 📜Readme.md
┣ 📜package.json
┗ 📜tsconfig.json

Schema Definition

GraphQL requires a schema to be defined. A schema what graphQL uses to know what type of data to expect.

• a user type

• a UserInput input - that has the same structure as the User type

• a Query type - where we will define all the queries

• a Mutation type - where we will define the mutations

  import { resolvers } from './resolvers'
  import { makeExecutableSchema } from 'graphql-tools'
  
  const typeDefs = `
      type User {
        name: String
        username: String
      }
      input UserInput {
        name: String
        username: String
      }
      type Query {
        getUser(username: String): User
      }
      type Mutation{
        createUser(user: UserInput): User
      }
    `
  // Build the schema and export
  const schema = makeExecutableSchema({ typeDefs, resolvers })
  export { schema }
  

Definine the type - type.ts

export class UserType {
  constructor(public name: String, public username: String) {}
}

Connecting the Database

Setting up the MongoDB instance 🗄️

Before we move into this step, we will need to first set up our database. One can do so by following this process:

1. create a free MongoDB account here
2. Create a free cluster.
3. Once the cluster has been created, click connect to your cluster. Further instructions can be found here
4. You will need to add a connection IP address - typically your own IP for development locally
5. create a database user with a username and password - You will need this to login to your database later
6. Proceed to choosing a connection method - in our case we will use the connect your application option
7. This will lead us to a page to select our driver and version - which in our case should be Node.js Version 3.6 or later.
8. Copy your connection string somewhere safe that you can edit. You will notice that the username is included in the connection string but you will need to replace the <password> with your password and also pick a name for our database {' '}
   Assuming our username was `amani` with password `AEDPfTeq61WH04NL`, and we want our database to be called `bliss`, our connection string would look like:

mongodb+srv://amani:AEDPfTeq61WH04NL@cluster0.9ntf0.mongodb.net/bliss?retryWrites=true&w=majority

9. Save this connection string somewhere where you can reference it later as we will need it when running our program.

Connecting to the Database programmatically - db.ts

In the db.js file, we will import mongoose and then define a new schema for the database - in our case, the only schema we will need is the user schema.

import mongoose from 'mongoose'
const Schema = mongoose.Schema

// @ts-ignore
const connectionString: String = process.env.MONGO_DB
// @ts-ignore
mongoose.connect(connectionString, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  useFindAndModify: false,
  useCreateIndex: true
})

const UserSchema = new Schema({
  name: String,
  username: String
})

const User = mongoose.model('User', UserSchema)

export { User }

Declaring the resolvers - resolvers.ts

The resolvers are the functions that are run whenever the endpoint is run - so you need to define a function for each query and mutation as we will do below:

import { UserType } from './types'

// import the User from the database
import { User } from './db'

export const resolvers = {
  Query: {
    //@ts-ignore
    getUser: (root, { username }) => {
      return User.findOne({ username: username })
        .then((user: UserType) => {
          return user
        })
        .catch((error: any) => {
          console.log(error.message)
        })
    }
  },
  Mutation: {
    // @ts-ignore
    createUser: async (root, { user }) => {
      const newUser = new User({ name: user.name, username: user.username })
      await newUser.save()
      return newUser
    }
  }
}

Piece the pie together 🥧 - index.ts

Our index.ts file is where all the majic happens. We will begin by importing the necessary packages and instantiating a new express app. Then we will initialize the connection to the database and attach the grapqlHTTP middleware function with our schema and graphiql - which we can use to explore the api:

import express from 'express'
import { graphqlHTTP } from 'express-graphql'
import { schema } from './data/schema'

// Initialize app
const app = express()
require('./data/db')

// the graphQL endpoint at /graphql.
app.use('/graphql', graphqlHTTP({ schema: schema, graphiql: true }))

app.get('*', (req, res) => {
  res.json({ message: 'Welcome to the api' })
})

const PORT = 7000
app.listen(PORT, () => {
  console.log(`api is running on port ${PORT}`)
})

Running the server

Before we run the server, we will need to add our mongoDB connection string to the environment variables:

  export MONGO_DB='mongodb+srv://amani:AEDPfTeq61WH04NL@cluster0.9ntf0.mongodb.net/bliss?retryWrites=true&w=majority'

Now, we are ready to run the server 🚀

  npm run start

And we can run the server and explore our api. Here's an example of a mutation that you can make with the api:

Mutation

We can add a user by making a mutation on the api:

  mutation createUser ($input:UserInput){
    createUser(user:$input) {
      name
      username
    }
  }

We can then pass in the user input using the query variables:

  {
    "input": {
      "name": "Laurence",
      "username": "laudebugs"
    }
  }

Here's how the mutation looks like:

<img src={'https://raw.githubusercontent.com/laudebugs/articles/main/resources/graphqlmutation.png'} width={'100%'} />

Query

If we were to then ask the api for a certain user, we can make the query by:

  query {
    getUser (username:"laudebugs"){
      name
    }
  }

You can check out the repo here

Common Issues that you may run into:

1. IP isn't whitelisted: If you're running into this issue, it may be the case that your ip address has changed and you need to add your current IP to be able to connect.
2. Could not find a declaration file for 'express' Install the declaratio file for express:

    npm install --save-dev express

Further Reading

• GraphQL quick tip: How to pass variables in GraphiQL

Now would be a good time to wake up from this dream. I think I've slept too long and my head hurts from too much wine. I need water. Where can we find things that seem to not want to be found? With limited space, how will I know what to bring on this journey? What lies are worth believing?

In general, English places adjectives before the subject unlike Swahili or French (the later that I spoke since 14), . So, what ends up happening is that in describing a person, their skin color is pointed out before we know that subject is first and foremost a person. With an attempt then, to place the person before the color of their skin (a person who is black as opposed to a black person), I witnessed the slight dissociation of skin color from becoming the defining characteristic of a person. I can therefore be a human being before I am black, I can be a man before I am black, I can be a Kenyan before I am black. Since in Kenya there was no concept of being black, I began to try to understand Black America, through conversation, the media, and readings. Back home, there is a loose concept of blackness and so, as I asked myself the question of “how do I move through this space as a black person,” I found myself having to stop and think in a state of mind that did not occur naturally to me. To have to think about the tone of my voice, the cadence of my speech, how my feet bounced off the ground, how my hands and neck revealed my body language, whether, if in fact, I was a danger to anyone was exhausting. I think of how my female friends talked about how they work against the grain of a misogynist culture, how they have to be aware of their senses because you can never be too careful. How then could I weave my identity as a person of color while sustaining my Kenyan heritage, and could the two exist in concert?

It was in the fall of 2016 that I became awakened to the color my skin having implications on how I moved through spaces. More and more, I began to see how the color of one's skin can be a reference point to the kinds of lives that could be extrapolated solely from what color that is. How black America was presented was very much a culture as well as the stories that are attached to its invention. To be black was also taking up and actualizing an identity from the color of my skin. Superficial blackness is for instance, cool, slick, having that delicate bounce and smooth swagger. The deeper work was internal – from understanding my relationship with my skin – learning how to take care of it in the cold and dry winters and reaffirming its affinity to the warm tropical weather. I was growing out my hair since the end of high school and taking delight in how it looked up with its coarse texture. And this process intrigued me, along with the idea of becoming black. An African such as I could empathize with the African American history of being enslaved and discriminated against, judged, lynched because of the color of one's skin. But in as much as this dark history seemed to take center stage in discussions and conversations about racism against African Americans, there were stories of tremendous triumph, stories of black enterprise and far-reaching cultural movements in music, art and literature among others. Whether I could juggle these two aspects as well as discover other manifestations of the black experience remains an unresolved journey. Three realities emerged. There were environments where I became fully conscious of the color of my skin, there were also spaces where I could forget the color of my skin mattered and there were situations where the consciousness and lack thereof existed in a kind of tug of war.

There is a kind of inward gaze about black America to which I observed: that the story of the black America is often centered on his experience and how that experience shapes his worldview. For me, a Kenyan who looked outward into the world, and from the outward gaze into America, the process of looking inside led me, first, to take a closer look at how I was raised and how that upbringing did, if in any way, shape my black experience; and secondly, to begin to pay attention to how I navigate different spaces and social situations and how this navigation is informed by (a) my being a man and (b) having black skin. Very quickly after I arrived in New York that Fall of 2016, I became more aware of how, as a black man, could walk the streets of New York at odd hours of the night and carry little fear – unlike some of my fellow female friends who kept mentioning the amount of caution that they exercised in the city at night. With the #MeToo movement, various celebrities, and public figures, primarily men, began facing the consequences of taking advantage of their power and influence to assault and/or take advantage of women. This calling out of men couple with conversations with others, as well as reading, began to open my eyes to the power dynamics that exist when I interact with women and how much work there still remains to be done, especially back home, for men to understand how it is also up to them, not only women, to examine the ways they are brought up to view women. While growing up there was a lack of direct conversation surrounding what it means to be a man, I took mental notes from my father who was a preacher/minister and an academic, in that order. Looking then, into my blackness, I defaulted towards my faith and my upbringing – neither of which seemed to provide adequate fodder for my nascent conceptualizations of Black America. Black America needed me, a man with black skin, to keep engaging with its gripping past to bring myself to an understanding of its present form in daily life.

Toni Morrison, in her book, The Origin of Others talks about how easy it is to estrange others. I think about this idea of Othering, how many times I have made it possible for someone to feel different, how deliberate as well as easy this act can be – to not listen deeply, to make lazy assumptions, to not want to know someone's experience, to put value to one person over another. I think again of how simple the process of seeing the world with my eyes alone. “Why should we want to close the distance when we can close the gate?” – Morrison asks. Yet, to the many who have stretched themselves to me, it has been a selfless gift as well as a humanizing and healing process. How much more, then, am I to give an ear, to take a pause, be open to another point of view, step into the discomfort and know another?

Credit to one dear friend who helped me edit this piece.

1. is slow, is fast, is blurry and gets lost often, in its becoming.

2. It has no ring to it, no newness, no uniqueness.

3. Everything is mundane with rabid desires and ugly hair in odd places.

4. Memory remains of the past and the future is yet one day at a time.

5. One day at a time. How much further can I look but one day at a time.

6. For I cannot escape the loop unless I can see it.

7. Where can I find questions?

8. How do I begin to question myself and not risk falling into myself?

9. Deep cuts hurt less yet much more than ever.

10. Can I find time to pause?

11. My black skin seems even darker when I look at it.

12. Sometimes I think it's easier to forget.

13. At times I figure it is much simpler to get out of my head.

14. There are certain selves that seem so elusive.

15. Can we fix those parts that are worn out?

16. Who I am and who I think I am are two worlds apart.

17. But I walk that thin line between hope and fear,

18. In 100 years perhaps I will have mastered the art of high-wire artistry,

19. No longer needing these doubts that seem to fuel my demise.

20. Going back one step back to take two steps forward.

21. Yellow birds across the sky – turn to grey dust and fade away.

22. Just a single amen can save a soul.

23. Under which pressures will I bow?

24. XOXO

I begin a schedule – early mornings and perhaps I won't spend too much time thinking about regressing into lax streaks. I'm trying to bring our conversations down to earth with a friend because they risk being over there and not in the moment and wonder how to do this without being too introspective. I am reading, and writing, listening, learning to get across what I mean to say. Tomorrow I will run. Though there's still today that just only began. Only just reared its head and let's deal with this day first.

The stories she tells draw out time in a way by bringing the choices of others to influence my existence at this moment in time stretching as well as into the lives of many of those after me. That life is uneasy, rarely takes the form of a straight line is a recurrent theme in our conversations. Without being explicit, she hints that I will have to brave the unknowable future – with faith – evident in how she herself took on challenges with grace.

With the lot of advice given to me before I left for America – some in passing and most alluded within the jokes, goodbyes and prayers, my mother then and even now in our talks tells me that I am the best. Although she has and always had the best intentions in mind, I begin to wonder how this kind of affirmation translates to knowing how to brave the tough times when things are out of control or when I fail. How will I find the courage to come to speak to her during the difficult moments when she projects a version of me that falls seems flawless? Each time after these conversations that I have had with my mother, I think it is necessary that I do hear the stories of her ambitions, joys as well as the trials in her life as the listening saves me from thinking that my own shortcomings are too big to overcome, that I should as well celebrate each small victory in my life

Funneling this energy, emotion and body into meaning is a task that's ridiculously slippery. And I for one, in fits and starts, only begin to scratch the surface – confronting the truths, the histories, the stories that I weave.

And holding on to these hopes I have with not the whys that inform them, how they form, what makes them persist is letting them stick loose enough to be move, shift, evolve while I look away.

It's the kind of thirst that only God can fill – fully – completely – dwelling in him. The next months will be dedicated to this exposition of the attitudes, hopes and joys, pain and brokenness that describe lives of pursuits.

Ask me what I think is the most pressing issue for me, and I pause, then stutter between, one: the upside and downsides of my “born-tao” (brought up in the city) childhood growing up in an ethnically diverse community and two: bridging the gaps in technology, education and empowerment for women, men and the poor in the society. Where all this becomes possible is through understanding what it takes to build an idea from concept to product and to then leverage the designs that are not only elegant but also consider other points of view.

The simplest way I can describe the intersection between having an inclination to write poetry and code is that each is a an attempt to bridge the gap between the inconsistencies that presents themselves in the world that we exist in today. By acknowledging the brokenness in systems, recognizing how fragmented and diverse human desire is – then I find the courage to begin to look into the gaps, plough through my own apathy and cynicism.

Lingering on this very question – of where the intersection lies between poetic eye and debugging code is a slope undefined for several reasons. One is tempted, as I have, to draw clear distinctions of where the former ends and the latter begins – a line so faint that when staring into it too much, it can feel crystal one day and maddeningly blurred the very next. Both are ways to escape into imagination. Yet neither can deliver what they promise fully and most of the time it ends up unfinished business and so, they both are a good lesson in learning when and how to look away. And so some days – most in actual sense – it feels as though my left and right eye are seeing two different renderings of reality, and I fear they may never reconcile fully.

"Everyday each of us invents the world and the self who meets that world, opens up or closes down space for others within that." - Rebecca Solnit

In looking over our records, it was noted that

you have not returned to this chest center for re-examination

There are calls from mama. She wants to know how I'm doing.

A new appointment has been scheduled for you.

If it is not possible to keep this appointment,

please call us immediately.

They're testing me for all these things that I never knew existed.

Mama says to call her!

There are drugs for everything.

Rifampin treats TB and other types of infections

I'm experiencing other types of feelings.

Could you treat ME - I want to ask.

Do not use more than directed

It is important to take rifampin on a regular schedule

It is important to have a regular schedule.

I think about home cooked food.

Possible side effects while using this medication:

Itching or hives, Swelling in your face or hands,

I'm adding weight.

Swelling or tingling in your mouth or throat, Chest tightness, trouble breathing

I have trouble breathing.

Blistering, peeling or red skin rash

I skipped the shower while I slept in for days.

Bloody or very dark urine

Blurred vision or eye pain

I need glasses to see what the teacher is writing.

Decrease in how much or how often you urinate

I go to the toilet every five minutes

Diarrhea that may contain blood

Fever, chills, cough, sore throat, and body aches

Sleep is what I need.

Nausea, vomiting, loss of appetite, or pain in your upper stomach

Numbness, pain, or tingling in your arms or legs.

Shortness of breath or troubled breathing

Unsteadiness or weakness

I need to go home.

Unusual bleeding bruising or weakness

Yellowing of your skin or the whites of your eyes

The sun is too bright.

Call your doctor right away if you notice any of these side effects

The internet is a vast “land” with plenty of room to create, share and find content. Internet usage in Kenya is increasing by the year. COVID-19 brought to the forefront, the importance of having an online presence. Companies like Amazon, that were internet-first, widened their market share of internet sales and became more relevant. Those companies that didn't have an online presence realized that they needed to adapt quickly to the times. Even people realized that they needed to build an online presence to showcase their work or seek jobs.

In developing countries like Kenya, with companies shifting online, there is a growing need to track these trends. However, data is still expensive for the average Kenyan even though data consumption in the country has been increasing by the year. Therefor, in as much as companies are moving online, they need to take into consideration this very fact that accessing websites should not require a large amount of data – say more than 2MB (to be revised later). And web developers need to be creative in ways that they can reduce data consumption on subsequent website visits to the sites they build. For instance, through caching or giving users a low-data version of their site once they land on the page before loading any subsequent content.

Conceptualization

Through this project, I would like to accomplish two things:

• Create a directory of Kenyan websites - websites with extensions “.co.ke” or “.ke” or that include “kenya” within the domain name.
• Of the collected sites, note how much data is downloaded on the landing page of the site and organize this data into a repository.

Data Collection and Preparation

How many websites can I find by randomly searching common words and the big companies in Kenya?

After considering this, I searched the internet to try to find a difinitive list of websites in Kenya. To find this list, I would have to contact organizations like The Kenya Network Information Centre (KENIC) to obtain this information. And although this seemed like the route to go, I also found a list of the top 500 websites in Kenya provided by Alexa and figured that this list would be more useful to use as a baseline of websites in Kenya. And as the list showed, there's a large number of domains that do not end with .co.ke or .ke that Kenyans use. After signing up for the free trial, I parsed the data to this json file using a simple java script.

Considering all the information that lighthouse provided, two metrics seemed important: the performance of the site as well as the amount of data downloaded when a user accesses the website., i.e. Total size. Two metrics: Performance and total size downloaded on page load The size will vary from device to device since mobile devices might have cached the websites before or CDN's might be used to deliver a faster and smaller payload.

Why lighthouse?

Google provides Lighthouse as a developer tool to generate a report on a website. The tool is also available as a commandline interface tool. However, I wanted to use the tool as part of a node.js project. Therefore, I stumbled on this project by Sahava on github from which I borrowed heavily and modified to my own use. Generating the Reports

Since my computer crawled at even the thought of running lighthouse on 500 websites, I decided to run the runLightHouse.js script on AWS. Here are the steps for creating an AWS instance: After Creating an Amazon AWS account, Create an EC2 instance. You can proceed with launching an instance that contains the free tier.

Launch instance > Ubuntu 20.04 (with Free tier eligible) > General Purpose Instance Type > Choose an Existing Key-pair for ssh into your instance or download a new instance >Launch instance

I however created an instance type with a GPU (just for fun) and to perform lighthouse processes fast. (this cost a couple of cents/hr) SSH into your instance:

# move your .pem file into the come folder
# Assuming you downloaded the .pem file to the downloads folder:
# cd into the root directory
cd
# check whether a .ssh folder exists
ls -al
# if it doesn't, create the folder
mkdir .ssh
#move the .pem file into the .ssh folder. Here assume I call my .pem file myKeyPair
mv [path where the .pem file exists]/myKeyPair.pem myKeyPair.pem
# change the permissions of the .pem file
chmod 400 .ssh/myKeyPair.pem

Copy your Public DNS (IPv4) from your AWS instance - this is usually located at your instances page when you click on your instance

SSH into your instance

# replace [my public ip with the actual ip]
ssh -i ~/.ssh/myKeyPair.pem ubuntu@[Public DNS (IPv4)]
# you may be asked whether to type yes or no to proceed. Type yes to proceed

# Prepare the server to run your script
install git
sudo apt install git -y
# Install latest version of npm
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash
sudo apt-get install -y nodejs
# Install Chrome. I referenced this article

# Download Google chrome
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
# install google chrome
sudo apt install ./google-chrome-stable_current_amd64.deb

Running the script

# Clone the repo
git clone https://github.com/laudebugs/kenya-web-project.git

# enter project folder
cd kenya-web-project

# Install packages
npm install

# Run the script
node generateReports.js
# Exit the AWS instance

Update

I tried running the script on an amazon linux server but there was always an error generated, so I switched to using an ubuntu 20.04 instance. Below are the instructions fro setting up and to ssh into an Amazon linux ec2 instance: After Creating an Amazon AWS account, Create an EC2 instance. You can proceed with launching an instance that contains the free tier.

Launch instance > Amazon Linux (with Free tier eligible) > General Purpose Instance Type > Choose an Existing Key-pair for ssh into your instance or download a new instance >Launch instance

I however created an instance type with a GPU (just for fun) and to perform lighthouse processes fast. (this cost a couple of cents/hr) SSH into your instance:

# move your .pem file into the come folder
# Assuming you downloaded the .pem file to the downloads folder:
# cd into the root directory
cd [root directory]

# check whether a .ssh folder exists
ls -al

# if it doesn't, create the folder
mkdir .ssh
#move the .pem file into the .ssh folder. Here assume I call my .pem file myKeyPair
mv [path where the .pem file exists]/myKeyPair.pem myKeyPair.pem

Change the permissions of the .pem file
```bash
chmod 400 .ssh/myKeyPair.pem

Copy your Public DNS (IPv4) from your AWS instance - this is usually located at your instances page when you click on your instance

SSH into your instance
```bash
# replace [my public ip with the actual ip]
ssh -i ~/.ssh/myKeyPair.pem ec2-user@[Public DNS (IPv4)]

You may be asked whether to type yes or no to proceed. Type yes to proceed

# Prepare the server to run your script
# install git
sudo yum install git -y

install npm using Amazon's instructions

# Install latest version of npm
npm install -g npm@latest
# Install Chrome. I referenced this article
curl https://intoli.com/install-google-chrome.sh | bash

Running the script

#Clone the repo
git clone https://github.com/laudebugs/kenya-web-project.git

# enter project folder
```bash
cd kenya-web-project
# Install packages
npm install
# Exit the AWS instance
exit

Analysis

Having obtained two additional metrics of each website, i.e. the performance and size of page downloaded, then we can plot several graphs to gauge how one metric affects the other.

In order to answer questions that the data presented, there still remained missing pieces of information that would enable me to analyze the data accurately. With metrics such as performance, size of webpage downloaded and average time spent on a website, we could take a look at the general trend of the top websites in Kenya as shown below.

<img alt="Size of the web page downloaded" src={ 'https://raw.githubusercontent.com/laudebugs/kenya-web-project/master/analysis/graphs/Size%20of%20the%20web%20page%20downloaded.png' } width={'100%'} />

The optimal size of a web page is 0 - 1 MB downloaded once a use logs onto a site. This is of course, not taking into account cached resources that might reduce the size of the page downloaded.

<img alt="TimeSpentOnWebsite" src={'https://raw.githubusercontent.com/laudebugs/kenya-web-project/master/analysis/graphs/TimeSpentOnWebsite.png'} width={'100%'} />

The modal time spent on a website by Kenyans is 3 minutes with the average coming to 7.2682 minutes.

Postscript

In analyzing the dataset, there's a temptation to draw immediate conclusions from the various datapoints such as comparing the time spent and how this changes based on the size of the web page downloaded when a user accesses the website. However, this analysis doesn't take into account the fact that different websites serve different functions. For instance, a person logging into the Kenya Revenue Authority website would perhaps use the site for a specific predetermined use case while a person using YouTube might not have a goal in mind while using the site. And therefore one would need to make assumptions to immediately draw conclusions from the data. On modelling the graph, the size of the page downloaded doesn't relate to how much time is spent on the site. Further information is needed to ask deeper questions from the dataset. One such piece is the genre of the website which would be able to draw distinctions between the different websites and make comparisons within websites of a certain type. As of now, the dataset is freely available to use and for more research to be done. Especially at a time when the internet is crucial to keep systems moving during Covid-19, we need to examine more closely how Kenyans use the internet. Hiccups along the way In generating the lighthouse reports for the site, I decided to splice the list of websites into groups of 30 websites at a time - because even AWS servers weren't running all the reports smoothly. At other times, I ran 50 reports at a time. However, while doing this, I realised I skipped over close to 70 websites spread over my input set of 500. And so, I wrote a small python script to find the missing sites. I had to manually run the website Bet365.com using the lighthouse cli because the node script kept timing out

After installing lighthouse

npm install -g lighthouse

lighthouse https://www.bet365.com/ --quiet --output json --output-path ./www_Bet365_com.json

References

• Multisite Lighthouse
• Top Sites in Kenya
• Google Chrome Lighthouse Github Repository

-> Checkout the Github Repository

how easy Essences weave into skin, from memory, into the present,

Forming shapes and escapes into The wind that blows away memories and hopes I attempt to replace.

i Best be prepped for death in the many ways it comes. The Angel is holding her breath, letting her teeth sink into her lips, Awaiting a slip of a step, expectations can change the outcome, and even those I hide, find their way out, hungrier, fiercer to achieve their aim, If … when I failed to pay attention, [the lot of] demons bid for [my] skin. Can I Allow [my]self one fine glance to salvation's hope in prayers I already lost many days ago, or will I give someone the final dance, before I allow my soul to sink into rubble. Steep slopes emerge and so does any grip of fading lines that were once thick and clear. to get to where my gods really want, I let thin ropes merge my desire and transgression Empty hopes diverge and there's not just one path, but many that lead nowhere. I paste my disfigured portrait Onto faces and the like and all I get in return is a letting go of grains of myself that fall between the cracks. for this person I become, Family's never been too close yet too far gone. Voices bring more silence as they scream on the inside. not. out. On the walls are pictures, previous versions of the us stuck in time, events to commit to memory, But down and under brews peace, love and disunity.

Dust begins to settle in such a present,

a comfortable promise,

each day layering up with more fantasies,

a future that is always coming.

sunrises eating into time.

Faith prompts acting on the future of a present to come.

The earth sentenced me to foraging the dust until I've bored deep into the skin;

Playing the part of becoming something else.

Compromise is easy.

For the moments now barrage what could be.

To go back may be the only way to move forward.

Baba, I will bring you that which I promised:

A heart full of unfulfilled desires.

What you told me though,

I seem to let go the more I think of staying.

I don't own the tissues wrapping my shell together.

Should I let alternate ideas get birthed in me,

I know not where they lead.

I chase memory.

No longer do I record moments because they, in part, I tend to plan to go out, plan to eat, plan to dance, and recording thrusts me into trying to control the past in the present. Give me time, this is where I am. I will learn again to forget.

Being in temporary disarray happens more often than I would like. And when I consider context, I reason to blame dislocation from memory. My past roots became upset and tried to adjust to new ground. Deep they sank into the self, only to unearth fears and dreams I have to consider giving up for a future that wants to etch itself onto me. I gaze, and my mouth wriggles into the shape shame if I bend to it.

For the best. They reckon.

Everyone out there – beating out their chests and wrapping warmly their seductive selves. So hangs the overcast skies. Bidding for the rain to plunder the earth with tears that ache.

I look up so the sky will replace my dried up ducts.