DEV Community: Mike McCall

Using AWS CDK to Serverlessly Send Words of Encouragement

Mike McCall — Wed, 23 Dec 2020 22:53:18 +0000

I am the father of 2 beautiful girls and as they grow older they are starting to feel the world push back. The emotional roller coaster of growing up can be both amazing and trying. I want them to know the world is full of strong women and they are just as valuable and capable as anyone. I figure some encouraging words from influential women could be nice little reminders.

To achieve this I plan to send a daily text message containing encouraging words from notable women. I have been exploring the various IaC (Infrastructure as Code) tools and AWS CDK was something I was keen on trying. Keep reading if you'd like to see how to achieve this using the AWS CDK with typescript.

First, let's break down the various services.

SNS Topic to subscribe phone numbers to.
Lambda for preparing a message and publishing it to the SNS topic
Event Rule for triggering the lambda on a schedule.

That's it. Time to get started with a new CDK app.

With CDK installed run the following to create a new app.

mkdir encouraging-words && cd encouraging-words
cdk init app --language typescript

Now that the CDK app is initialized we can start describing our stack. We'll start with the SNS topic.

Install the SNS CDK module.

npm install @aws-cdk/aws-sns`

Open lib/encouraging-words-stack.ts and create a new topic.

import * as cdk from '@aws-cdk/core';
import { Topic } from '@aws-cdk/aws-sns'; // new

export class EncouragingWordsStack extends cdk.Stack {
  constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);
    // topic to publish our message to
    const topic = new Topic(this, 'Topic') // new
  }
}

Nice little one-liner!

Next, we need to create a function and add it to our CDK stack. We'll create a new directory in the root of the project called lambda and create a file for our function. I'll call it encouragingWords.js

mkdir lambda
cd lambda
touch encouragingWords.js

This function needs to export a handler, generate a message to send, and publish the message to the SNS topic.

Inside of the lambda directory, we should install the Nodejs AWS SDK. To do so run npm init inside the lambda dir and install the SNS module once complete.

npm install @aws-sdk/client-sns

Open up encouragingWords.js and add the following content. Tweak as desired.

const { SNSClient, PublishCommand } = require("@aws-sdk/client-sns");

exports.handler = async (_event) => {
  const sns = new SNSClient(process.env.REGION)

  const publishCommand = new PublishCommand({
    Message: `${encouragingMessage()}\n\nSent with ❤️ from Dad`,
    TopicArn: process.env.SNS_TOPIC_ARN,
  });

  await sns.send(publishCommand);
}

function encouragingMessage() {
  // Sample quotes. Add more as desired
  const messages = [
    '“It takes a great deal of courage to stand up to your enemies, but even more to stand up to your friends.” — J.K. Rowling',
    '“I have learned over the years that when one’s mind is made up, this diminishes fear; knowing what must be done does away with fear.” — Rosa Parks',
    '“The most beautiful thing you can wear is confidence.” — Blake Lively',
    '“Do you want to meet the love of your life? Look in the mirror.” — Byron Katie',
    '“Always be a first-rate version of yourself, instead of a second-rate version of somebody else.” — Judy Garland',
    '“The most effective way to do it, is to do it.” — Amelia Earhart',
    '“If you’re not making mistakes, then you’re not making decisions.” — Catherine Cook',
  ]
  return messages[Math.floor(Math.random() * messages.length)];

}

Fairly straightforward. This function is importing the SNS module, initializing a new SNSClient, configuring the message and topic, then publishing it. The encouragingMessage() function returns a random message from the messages array. You might have noticed two environment variables, SNS_TOPIC_ARN and REGION. These will be set when the lambda construct is added to the CDK Stack.

Now let's describe the function with a lambda construct.

First, install the CDK lambda module.

npm install @aws-cdk/aws-lambda`

Next, update the lib/encouraging-words-stack.ts with the following code.

import * as cdk from '@aws-cdk/core';
import { Topic } from '@aws-cdk/aws-sns';
import { Function, Code, Runtime } from '@aws-cdk/aws-lambda'; // new

export class EncouragingWordsStack extends cdk.Stack {
  constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    // topic to publish our message to
    const topic = new Topic(this, 'Topic')

    // new
    const fn = new Function(this, 'Function', {
      runtime: Runtime.NODEJS_12_X,
      code: Code.fromAsset('lambda'),
      handler: 'encouragingWords.handler',
      environment: {
        SNS_TOPIC_ARN: topic.topicArn,
        REGION: 'us-west-2',
      }
    })

    topic.grantPublish(fn) // new
  }
}

Again, fairly straightforward. A few things to note in the new Function construct. The code option is telling CDK to look in the lambda folder (relative to where the CDK command is run) and the handler is specifying the file and method. Finally, we set up our environment variables. Most notably the SNS_TOPIC_ARN. We are using the previously assigned topic variable to obtain this value. The code topic.grantPublish(fn) grants permission for the lambda function to publish to the SNS Topic. Very nice!

Lastly, we should schedule this. We don't want to manually run this lambda every time to send the message. That would defeat the purpose. Let's add a scheduled task and complete the CDK app.

Install the events and events targets modules.

npm install @aws-cdk/aws-events @aws-cdk/aws-events-targets

Add the event rule to lib/encouraging-words-stack.ts.

import * as cdk from '@aws-cdk/core';
import { Topic } from '@aws-cdk/aws-sns';
import { Function, Code, Runtime } from '@aws-cdk/aws-lambda';
import { Rule, Schedule } from '@aws-cdk/aws-events'; // new
import { LambdaFunction } from '@aws-cdk/aws-events-targets'; // new

export class EncouragingWordsStack extends cdk.Stack {
  constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    // topic to publish our message to
    const topic = new Topic(this, 'Topic')

    // triggered function for sending message
    const fn = new Function(this, 'Function', {
      runtime: Runtime.NODEJS_12_X,
      code: Code.fromAsset('lambda'),
      handler: 'encouragingWords.handler',
      environment: {
        SNS_TOPIC_ARN: topic.topicArn,
        REGION: 'us-west-2',
      }
    })

    // allow function to publish to sns topic
    topic.grantPublish(fn)

    // new
    const rule = new Rule(this, 'Cron', {
      schedule: Schedule.cron({ minute: '0', hour: '16' })
    })

    //new
    rule.addTarget(new LambdaFunction(fn))

  }
}

This is so readable it's hard to explain any better than the code reads. We create a new event Rule that is scheduled to run at hour 16 and minute 0. The scheduled cron runs in the UTC timezone, so for my purposes, this code will run at 8 am PST.

We also add the lambda function as an event target to the event rule with rule.addTarget(new LambdaFunction(fn)). Very nice!

Time to deploy!

To view the cloudformation template run:

cdk synth

To deploy:

cdk deploy

We are ALMOST done. The stack is deployed and works as expected however we need to subscribe phone numbers to the topic!

Visit the SNS subscriptions section in the AWS console. Click the Create Subscription button. Select the "EncouragingWordsStack-Topic" arn as the Topic and SMS as the Protocol. Add the phone number you'd like to send the message to as the endpoint. Repeat per number.

To test this out invoke the function manually from the CLI or the console.

To clean up simply run:

cdk destroy

This simple app is my first foray into CDK and I really enjoyed it. It's easy to read and the type system makes IaC so comfortable to work with. I was able to achieve this with minimal code liability in a very short amount of time. The cloud has never felt so accessible!

You can view the repo for this project here:

mmccall10 / encouraging-words-app

Resources
AWS CDK
CDK Worskhop
CDK Typescript Reference
AWS SNS
AWS Lambda
AWS Event Bridge

Tailwind Enter/Leave Transition Effects with Stimulus.js

Mike McCall — Tue, 08 Sep 2020 21:55:59 +0000

As a fan of TailwindUI, I was disappointed to find it impossible to support the suggested enter/leave without using Apline.js or Vue.js. The tailwind team even built their own transition component for react support. Working with Ruby on Rails and Stimulus.js I wanted to keep the project close to "core" rails. I didn't feel including Alpine.js or switching to Vue.js just for transitions was optimal. For what it's worth I think both Alpine and Vue are awesome!

Initially, I didn't bother trying. A little bit of research and a few youtube videos later I came up short. I settled on simply hiding/showing the element or applying a generic animation from something such as animate.css. But I just couldn't accept that it was impossible to implement. Plus it didn't look as nice. I dug a little deeper and came across this amazing article. I highly recommend reading it to understand how the transitions are implemented. I learned a lot and give the author a lot of credit!

I was able to take the lessons from the article and abstract it into a handy little npm package el-transition. As I write this el-transition is hot off the press. Please review and contribute!

mmccall10 / el-transition

Apply Enter/Leave transitions

We will use this package to implement our TailwindUI transition effects!

For this example let's build a dropdown component. You can find the tailwind markup here here.

Before we get started install the el-transition package.

$ yarn add el-transition

Time to Code

The following is a direct copy of the dropdown component from TailwindUI's library. Notice the comment specifying the suggested enter/leave transition classes.

<div class="relative inline-block text-left">
  <div>
    <span class="rounded-md shadow-sm">
      <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" aria-expanded="true">
        Options
        <svg class="-mr-1 ml-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </button>
    </span>
  </div>

  <!--
    Dropdown panel, show/hide based on dropdown state.

    Entering: "transition ease-out duration-100"
      From: "transform opacity-0 scale-95"
      To: "transform opacity-100 scale-100"
    Leaving: "transition ease-in duration-75"
      From: "transform opacity-100 scale-100"
      To: "transform opacity-0 scale-95"
  -->
  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg">
    <div class="rounded-md bg-white shadow-xs">
      <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
        <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Account settings</a>
        <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Support</a>
        <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">License</a>
        <form method="POST" action="#">
          <button type="submit" class="block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
            Sign out
          </button>
        </form>
      </div>
    </div>
  </div>
</div>

Now let's create a dropdown stimulus controller we can connect to our dropdown element. We will add two targets button and menu and the toggleMenu function.

// dropdown_controller.js
import {Controller} from "stimulus"

export default class extends Controller {
    static targets = ["menu", "button"]

    toggleMenu() {
        if (this.menuTarget.classList.contains('hidden')) {
            // enter transition
        } else {
            // leave transition
        }
    }
}

Now we can connect the controller to the dropdown.

<!-- add dropdown controller -->
<div data-controller="dropdown" class="relative inline-block text-left">
  <div>
    <span class="rounded-md shadow-sm">

      <!-- Add button target and click action -->
      <button type="button" data-target="dropdown.button" data-action="click->dropdown#toggleMenu" class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" aria-expanded="true">
        Options
        <svg class="-mr-1 ml-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </button>
    </span>
  </div>

  <!-- add menu target -->
  <div data-target="dropdown.menu" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg">
    <div class="rounded-md bg-white shadow-xs">
      <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
        <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Account settings</a>
        <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Support</a>
        <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">License</a>
        <form method="POST" action="#">
          <button type="submit" class="block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
            Sign out
          </button>
        </form>
      </div>
    </div>
  </div>
</div>

Now that the controller is connected let's implement the suggested transitions.

 <!--
    Dropdown panel, show/hide based on dropdown state.

    Entering: "transition ease-out duration-100"
      From: "transform opacity-0 scale-95"
      To: "transform opacity-100 scale-100"
    Leaving: "transition ease-in duration-75"
      From: "transform opacity-100 scale-100"
      To: "transform opacity-0 scale-95"
  -->

To do this, el-transiton expects data-transition-* attributes or an animation class. We will use data attributes which is more in line with how Apline.js works. Here is our updated html with the transitions declared.

<div data-controller="dropdown" class="relative inline-block text-left">
  <div>
    <span class="rounded-md shadow-sm">
      <button type="button" data-target="dropdown.button" data-action="click->dropdown#toggleMenu" class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" aria-expanded="true">
        Options
        <svg class="-mr-1 ml-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </button>
    </span>
  </div>

<!-- add transition data attributes. -->
<div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg hidden"
       data-target="dropdown.menu"
       data-transition-enter="transition ease-out duration-100"
       data-transition-enter-start="transform opacity-0 scale-95"
       data-transition-enter-end="transform opacity-100 scale-100"
       data-transition-leave="transition ease-in duration-75"
       data-transition-leave-start="transform opacity-100 scale-100"
       data-transition-leave-end="transform opacity-0 scale-95"
  >
    <div class="rounded-md bg-white shadow-xs">
      <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
        <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Account settings</a>
        <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Support</a>
        <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">License</a>
        <form method="POST" action="#">
          <button type="submit" class="block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
            Sign out
          </button>
        </form>
      </div>
    </div>
  </div>
</div>

Finally, we can update our stimulus dropdown controller to execute the enter/leave transition effects.

import {Controller} from "stimulus"
// import the enter leave functions
import {enter, leave} from 'el-transition'; 

export default class extends Controller {
    static targets = ["menu", "button"]

    // call the enter and leave functions
    toggleMenu() {
        if(this.menuTarget.classList.contains('hidden')) {
            enter(this.menuTarget)
        } else {
            leave(this.menuTarget)
        }
    }
}

That's it!

You can find a demo here:

Conclusion

I am stoked to be able to support TailwindUI's suggested transition effects as the team puts a lot of care into it and they look nice! While this example is specific to stimulus.js the el-transition is framework agnostic.