Category Archives: Javascript

Just let TypeScript do its thing

It is a well known fact that compile-time errors during development are easier and cheaper to catch than runtime ones in production. Unfortunately people keep forgetting that simple fact. Let me tell you a little story about AWS Lambda hiccup, and how it could easily be avoided.

A developer wrote a simple Lambda function in TypeScript that would receive a parameter of the following type:

interface Notification {
    slack?: {
        notify: boolean
    };
    github?: {
        notify: boolean
    };
}

The logic is simple – if slack.notify is true – send slack notification. If github.notify is true – send github commit status notification. The function deployed without issues, and it does send slack notifications. There is one problem: often it would send the same slack notification 3 times in a row. Continue reading →

Scan standalone CDK constructs for misconfiguration

Vulnerability scanners like checkov have become a de facto standard for scanning IaC for possible misconfigurations. They can scan terraform configs, AWS CloudFormation templates, even – in a sense – CDK stacks, because they synthesize into CloudFormation templates that can be scanned.

In order to produce synthesized templates from stacks you have to have a full-blown CDK application. But what if you’re developing a standalone CDK construct as a library, to be used as a dependency in a CDK app? There is a way to scan it for vulnerabilities as well.
Continue reading →

Override private methods in TypeScript

First things first: a word of caution – do this only if you absolutely have to. TypeScript has these checks for a reason, and probably in 99% of the cases you should respect and abide these restrictions. But if your scenario falls within the 1% where you must in a subclass override a private method of a superclass – this post shows a way to do this.

Let’s say we have a class that defines a generic starship, and what happens to it when it’s hit by a weapon:

type Hit = 'phaser' | 'antimatter spread' | 'photon torpedo'

class Starship {
    private totalDamage: number;

    constructor(private shipName: string) {
        this.totalDamage = 0;
    }

    private addDamage(damage: number) {
        this.totalDamage += damage;
    }

    public isHitBy(hit: Hit) {
        console.log(`${this.shipName} is hit by ${hit}!`)

        switch(hit) {
            case 'phaser':
                this.addDamage(100);
                break;
            case 'antimatter spread':
                this.addDamage(300);
                break;
            case 'photon torpedo':
                this.addDamage(500);
                break
        }
    }
}

You can create your own class of starship based on this generic class, then build a ship of the new class, and simulate it being hit by a weapon:

class Galaxy extends Starship {
    constructor(name: string) {
        super(name);
    }
}

const enterprise = new Galaxy('Enterprise');
enterprise.isHitBy('photon torpedo');

Output:

"Enterprise is hit by photon torpedo!"

This is fine, but as you’ve seen the base class has a secret feature to calculate damage inflicted by the weapon. It is secret, because it’s defined by a private method, and is not exposed to derived classes. But, like Kirk in Kobayashi Maru, you want to break the rules, and have this forbidden knowledge. Continue reading →

Reverse values into variables in tmplr

tmplr is a versatile templating tool that lets you quickly create a repository from a template customized for your needs. By running a recipe it can substitute placeholder variables with your own values making the repository truly your own. For example it can update package.json with dynamic values from git context. It can do much more, put for the purpose of this post we will concentrate on literal values in code files.

Let’s say you have a JavaScript code that performs some AWS SDK/CDK actions, and it requires AWS account IDs – for dev and prod deployment. In a regular repo you would define config.js something like this:

const awsAccounts = {
   dev: '1234567890',
   prod: '0987654321'
}

But if we’re building a template repo – we don’t want to hardcode those values. Instead we could use tmplr placeholder variables:

const awsAccounts = {
   dev: '{{ tmplr.dev_account_id }}',
   prod: '{{ tmplr.prod_account_id }}'
}

Save this file as config.tmplr.js – it becomes our template. A user of your template then can create a tmplr recipe:

steps:
  - read: dev_account_id
    eval: '1234567890'
  - read: prod_account_id
    eval: '0987654321'
  - copy: config.tmplr.js
    to: config.js

then save this it into .tmplr.yml file into repo root, and run tmplr cli command – it will create config.js file from config.tmplr.js substituting variables for values from the recipe.

It works great, but there is a problem. Continue reading →

Synthesize only stacks you need in CDK

CDK documentation states that if you supply stack name(s) to CLI commands like cdk synth, cdk list or cdk deploy – it will synthesize only the stacks you requested. But in reality this is not the case, CDK will always synthesize all stacks – and it may lead to unintended consequences.

Let’s say you have following stack declarations in your lib/my-stacks.ts code:

import * as cdk from 'aws-cdk-lib';

export class Stack1 extends cdk.Stack {};
export class Stack2 extends cdk.Stack {};
export class AnotherStack extends cdk.Stack {};
export class YerAnotherStack extends cdk.Stack {};

And in your app’s entry point bin/my-stacks.ts you instantiate those stacks:

import * as cdk from 'aws-cdk-lib';
import * as stacks from '../lib/my-stacks'

const app = new cdk.App();

new stacks.Stack1(app, "Stack1");
new stacks.Stack2(app, "Stack2");
new stacks.AnotherStack(app, "AnotherStack");
new stacks.YerAnotherStack(app, "YetAnotherStack");

And then issue a CLI command to synthesize stacks, but you only want to synthesize “Stack1” and “AnotherStack”:

cdk synth Stack1 AnotherStack

The command output would have you believe that only 2 stacks were synthesized:

Successfully synthesized to ./cdk.out
Supply a stack id (AnotherStack, Stack1) to display its template.

Continue reading →

Easily verify yourself on Mastodon with GitHub

Mastodon unlike Twitter doesn’t have official (or paid, thanks Elon Musk) verification badge for account profile, but it does offer a way to verify yourself – by placing following link tag into HTML of a website/page you own (your blog for example):

<a rel="me" href="https://your.instance/@YourHandle">Mastodon</a>

where “your.instance” and “@YourHandle” are the Mastodon server you use and your profile handle respectfully. But what if you want to verify yourself with your GitHub profile? An ideal place would be something like a README.md file. Unfortunately every link placed into a markdown file automatically gets rel="nofollow", so it’s a no-go. But there is a way to do this. Continue reading →

Writing first Mastodon bot

Over the years I’ve written quite a few Twitter bots. But since Elon Musk took over – the bird site has become unbearable, so I, like many others, migrated to Mastodon. What Mastodon is, and how it operates is a whole another story, but for our intents and purposes it is similar to Twitter: there is a home timeline where posts from people you follow appear, and you can post to the timeline as well.

Back on Twitter I used to have a bot that would tweet one-liners from Pink Floyd lyrics every hour. Follow me along as I recreate it on Mastodon.

First and foremost you have to make sure the Mastodon instance you’re on allows bots. Some do, some don’t – read the server rules to find out. I am using botsin.space instance that is specifically meant to host bots. Continue reading →

Copy/Paste image into an editable DOM element in Chrome

All major browsers allow to paste image directly into a DOM element with contentEditable property set to true. They automatically convert it into IMG element with source pointing to base64 encoded DataURI of the pasted image. That is all browsers, but Chrome. Chrome needs a little help.

In my particular case I need to be able to paste image into an IFRAME with editable body of the content document (for some reason Infragistics WebHtmlEditor ASP.NET control renders itself as this contraption). But the code below applies (with small changes) to any editable DOM element.

To achieve the result we need to perform 3 tasks:

1. Capture image from the clipboard
2. Convert the image to DataURI format
3. Create IMG element with the DataURI source and insert it into the DOM

Take a look at the code below: Continue reading →

Fling a random insult at Trump after every tweet

Ok time to get political. I hate many things that Trump tweets these days and would love to reply to each tweet personally, but have neither time not desire to read his delusions. Fortunately in these modern times robots take many of our jobs. And this looked like a perfect job for a bot. Similarly to the bot described in the previous post it will be IFTTT + Scriptr combo. But this time in reverse, here’s intended flow:

  1. Twitter service at IFTTT detects when @realDonaldTrump tweets
  2. It triggers Maker service that makes HTTP request to Scriptr code
  3. Scriptr code generates random insult and posts a reply to Trump’s tweet

Here’s what IFTTT applet looks like: Continue reading →

Tweet images with Scriptr and IFTTT

Sev Trek

Looks like everybody is doing Twitter bots these days so I decided to try my hand on one as well. And it had to be something lighthearted – to let people’s mind off things for a while. Way back in early 2000s there was a funny parody comic of Star Trek called Sev Trek. Original site is gone now, but archive of images was saved at http://sevspace.com/stupidarchive/sevtrek.asp.htm. Images are numbered sequentially – ideal for automatic processing. My bot would tweet random images every couple hours.

To host bot’s script I decided to go with Scriptr which offers powerful JavaScript backend and multiple expansion modules. And IFTTT has a cool Twitter service, one that can tweet image from an URL. So the idea was:

  1. Code hosted at Scriptr generates URL pointing to an image at sevspace.com
  2. Code then call Maker service of IFTTT – custom service capable of accepting HTTP requests
  3. Maker service triggers Twitter service and passes URL of image it got from Scriptr code
  4. IFTTT Twitter service tweets the image

Continue reading →