DEV Community: tomas

✉ Publish a Newsletter Directly from GitHub

tomas — Fri, 18 Sep 2020 06:51:39 +0000

Photo by Andrey Larin on Unsplash

Hey there 👋

For this Hackathon, my inspiration was GitHub's Release Radar, a place where I discovered a lot of interesting projects. I'm glad that it's back and I think it's an excellent resource for the community so I wanted to replicate that.

Using GitHub as a platform for this enables all of Git's features like version control, and more importantly, collaboration so anyone can curate what goes inside the newsletter through a Pull Request.

The GitHub Action uses SendGrid to send emails and keep track of all the subscribers and it's easily adaptable to launch your own newsletter!

Just create a repo, edit the README and follow the instructions:

My Workflow

Set up

You will need a SendGrid account and have completed these steps:

Add the generated API Key as a secret named SENDGRID_API_KEY in your repo settings.

It should look like this:

Create Signup Forms

Once you create it, go to Contacts and open the list that was created automatically, to view it's ID open the list and check the URL, the ID will look like this: 81f44a3f-f1c2-4f47-a9a9-df79dd32d246. This will be your list_id.

Create Unsubscribe Group

Once you create it, you will be able to see it's ID, it will look like this: 22584. This will be your suppression_group_id.

Add a Sender

Once you create it, click the 3 dots in the right of the Sender Management page and Edit the entry, check the URL and you will find a number that looks like this: 1057550. This will be your sender_id.

Inputs

All inputs are REQUIRED

Input Value	Description
`subject`	The subject line of the newsletter.
`list_id`	The recipient List ID that will receive the newsletter.
`suppression_group_id`	The ID of the Suppression Group to allow recipients to unsubscribe.
`sender_id`	The ID of the verified Sender.

Example usage

name: Newsletter
on:
  workflow_dispatch:
    inputs:
      subject:
        description: 'Subject'
        required: true

jobs:
  newsletter:
    runs-on: ubuntu-latest
    name: Send newsletter
    steps:
    - name: Send newsletter
      uses: KNawm/newsletter-action@v1
      env:
        SENDGRID_API_KEY: ${{ secrets.SENDGRID_API_KEY }}
      with:
        subject: ${{ github.event.inputs.subject }}
        list_id: '81f44a3f-f1c2-4f47-a9a9-df79dd32d246'
        suppression_group_id: 22584
        sender_id: 1057550

Demo: KNawm/release-radar

You need to trigger the workflow manually going to the Actions page of your repo and provide a subject line.

Once it's triggered it will send the content of your README to your list of recipients after 5 minutes.

If it's working you can enter here and you should see your email scheduled:

Submission Category:

Wacky Wildcards

Link to Code and Demo

KNawm / newsletter-action

📩 A GitHub Action for sending email formatted using Markdown.

`newsletter-action`

A GitHub Action for sending email formatted using Markdown

Set up

You will need a SendGrid account and have completed these steps:

Add the generated API Key as a secret named SENDGRID_API_KEY in your repo settings.

It should look like this:

Create Signup Forms

Create Unsubscribe Group

Once you create it, you will be able to see it's ID, it will look like this: 22584. This will be your suppression_group_id.

Add a Sender

Once you create it, click the 3 dots in the right of the Sender Management page and Edit the entry, check the URL and you…

View on GitHub

KNawm / release-radar

✉ Welcome to Release Radar Community, where we share projects curated and shipped by you, from world-changing technologies to weekend side projects.

`Issue #1`

`Release Radar Community`

Welcome to Release Radar Community, where we share projects curated and shipped by you, from world-changing technologies to weekend side projects

GitHub CLI 1.0

GitHub CLI brings GitHub to your terminal. It reduces context switching, helps you focus, and enables you to more easily script and create your own workflows. With GitHub CLI 1.0, you can:

Run your entire GitHub workflow from the terminal, from issues through releases Call the GitHub API to script nearly any action, and set a custom alias for any command Connect to GitHub Enterprise Server in addition to GitHub.com

npm CLI v7.0.0

npm 7 comes with some long-awaited and requested features including:

Workspaces: a set of features to the npm CLI that provide support to managing multiple packages from within a singular top-level, root package
Automatically installing peer dependencies: prior to npm 7 developers needed to manage and install their…

View on GitHub

Monetize your Dart apps with Web Monetization

tomas — Sat, 06 Jun 2020 03:02:48 +0000

Dart and the related logo are trademarks of Google LLC. I am not endorsed by or affiliated with Google LLC.

What I built

Monetization is a Dart package for implementing and controlling Web Monetization on your web app. It exposes a straightforward API that resembles and extends the functionality of the Web Monetization's JavaScript API.

Submission Category: Foundational Technology

Demo

Link to Code

KNawm / monetization

💸 A wrapper around the Web Monetization API to monetize apps.

`monetization`

A wrapper around the Web Monetization API

Offer extra content and features for users who stream micro-payments — including premium features, additional content, or digital goods.

API Reference

Usage

A simple usage example that initializes the monetization to a specific payment pointer:

import 'package:monetization/monetization.dart';

main() {
  var monetization = Monetization('\$pay.tomasarias.me');
}

You can subscribe to Web Monetization events using a Stream:

monetization.onPending.listen((event) {
  // Prepare to serve the monetized content
});

monetization.onStart.listen((event) {
  // Show monetized content
});

monetization.onProgress.listen((event) {
  // Do something on each micro-payment
});

monetization.onStop.listen((event) {
  // Hide monetized content
});

You can also check if a user is paying without subscribing to the streams:

Future<bool> isPaying() async {
  // Prefer custom logic over this
  await Future.delayed(const Duration(seconds: 3

…

View on GitHub

How I built it

For this project, I spent most of the time researching Web Monetization and it's eco-system, analyzing its strengths and where it lacked most.
The provided JavaScript API was the first stop as it's the fundamental part to implement Web Monetization, I wanted to have all of the core functionality as familiar as possible. With this in mind, I began to implement the shared API between the two:

In JavaScript, you can check if a user supports Web Monetization checking if document.monetization === undefined but because in Dart there is no use in exposing the document.monetization object directly, we can check everything using the state getter.

/// Returns the monetization state provided by the browser.
///
/// **`undefined`**:
/// Monetization is not supported for this user.
///
/// **`pending`**:
/// Streaming has been initiated, yet first non zero packet is
/// "pending". It will normally transition from this `state` to `started`,
/// yet not always.
///
/// **`started`**:
/// Streaming has received a non zero packet and is still active.
///
/// **`stopped`**:
/// Streaming is inactive. This could mean a variety of things:
/// - May not have started yet
/// - May be paused (potentially will be resumed)
/// - Has finished completely (and awaits another request)
/// - The payment request was denied by user intervention
String get state => _state ?? 'undefined';

In JavaScript, you can listen to the monetizationpending | monetizationstart | monetizationstop | monetizationprogress events, in Dart there are corresponding streams of those events that you can subscribe.

/// Stream that tracks 'monetizationpending' events.
///
/// This event fires when Web Monetization is enabled.
Stream<Map> onPending;

/// Stream that tracks 'monetizationstart' events.
///
/// This event fires when Web Monetization has started actively paying.
Stream<Map> onStart;

/// Stream that tracks 'monetizationstop' events.
///
/// This event fires when Web Monetization has stopped.
Stream<Map> onStop;

/// Stream that tracks 'monetizationprogress' events.
///
/// This event fires when Web Monetization has streamed a payment.
Stream<Map> onProgress;

But all of this functionality only works if you have a payment pointer defined in a <meta> tag in the HTML. This can be achieved initializing a Monetization object:

import 'package:monetization/monetization.dart';

main() {
  var monetization = Monetization('\$pay.tomasarias.me');
}

And that's it, all the set up is done by the package, no need to edit the HTML or do Dart-JS interoperability. This is especially useful on Flutter Web where DOM manipulation or calling JavaScript is very rare.

This is where we began extending beyond the JavaScript API, for example, we can get information about the monetization status:

monetization.isMonetized; // Returns if the user supports monetization
monetization.isPaying;    // Returns if the user is streaming payments
monetization.pointer;     // Returns the current payment pointer

Or even get the revenue paid to the current payment pointer:

monetization.getTotal(); // 884389
monetization.getTotal(formatted: true); // 0.000884389
monetization.assetCode;  // 'XRP'
monetization.assetScale; // 9

Another useful thing we could do is programatically enable or disable the monetization:

var monetization = Monetization('\$pay.tomasarias.me'); // Monetization enabled on initialization
monetization.disable(); // Stops the monetization
monetization.enable();  // Start the monetization again with the same pointer

If you want to share the revenue across different payment pointers, probabilistic revenue sharing is also supported:

final pointers = {
  'pay.tomasarias.me/usd': 0.5,
  'pay.tomasarias.me/xrp': 0.2,
  'pay.tomasarias.me/ars': 0.3
};

var monetization = Monetization.probabilistic(pointers);

This will result in a 50% chance of choosing the first pointer, a 20% chance of choosing the second, and a 30% chance of choosing the third one.

One of the last features we are going to explore is the ability to verify the payment stream and anonymizing the payment pointer.

Verifying the payments is complex and not very straightforward at the moment (at least until STREAM Receipts are fully adopted). Thankfully there is a service that can do that for us, Vanilla keeps your information more secure and ensures users don’t cheat their way around the payment mechanism. To learn more about Vanilla check out this article.

To use Vanilla with Monetization we can initialize it like this:

// Vanilla API Credentials
final clientId = 'Your Client ID';
final clientSecret = 'Your Client Secret';

var monetization = Monetization.vanilla(clientId, clientSecret);

Now you can check if the payment stream is valid in different ways:

// With Vanilla, this will return true if the user is paying and Vanilla generates a proof of payment.
monetization.isPaying;
// With Vanilla, this will return the current payment rate per second, if the monetization is stopped this will be 0.
monetization.getVanillaRate()
// With Vanilla, this will return the total amount received from the current requestId.
monetization.getVanillaTotal();

This gives us much more confidence serving monetized content, ensuring only legit monetized users can access your content.

And last but not least, a debug mode to see all the events in real-time:

Thanks to the Coil team for their sample projects on Glitch, they were great inspiration for the features.

And a special thanks to Norbert Durcansky for sharing his vision and all of the Cinnamon team for crafting Vanilla.

That would be all! 🙌 Thanks for reading and please feel free to communicate your thoughts, suggestions, or corrections.

🧙🏼‍♂️ Embark on an adventure, just a call away!

tomas — Fri, 01 May 2020 06:48:55 +0000

About

Socializing during quarantine is hard, and trapped at home there is only so much that we can do by ourselves, after reading every book in my library and binged every show on Netflix I was out of stories, so what do I do now?

So I built a AI-powered conversational bot to fulfill my lack of stories, not only that but take part on them too. Hey, we all enjoy a good story (or a good laugh)

The Project

KNawm / aidungeon-twilio

🧙🏼‍♂️ Infinite adventures just a call away!

aidungeon-twilio

About

This project shows how to integrate a custom machine learning model with an API to build an AI-powered conversational bot that builds a story based on your input.

Set up

Requirements

Python 3.4 or newer
A Twilio account — sign up
A Twilio phone number with Voice capabilities
A AIDungeon account — sign up

Local development

After the above requirements have been met:

Clone this repository and cd into it

git clone git@github.com:KNawm/aidungeon-twilio.git
cd aidungeon-twilio

Create a new virtual environment

python3 -m venv venv
venv\Scripts\activate

Install dependencies

pip install -r requirements.txt

Set your environment variables

cp .env.example .env

Open .env in your favorite text editor and configure the following values.

Config Value	Description
`TWILIO_ACCOUNT_SID`	Your primary Twilio account identifier - find this in the console here.
`TWILIO_AUTH_TOKEN`	Used to authenticate - you can get it at twilio.com/console.
`AIDUNGEON_EMAIL`	Your AIDungeon account email

…

View on GitHub

How it works

I used Python with Flask for the backend. It's built on top of the AIDungeon API, you just call and the bot will put together a story protagonized by you, fantasy, zombies, apocalypse, you name it, possibilities are endless.

Challenges

I wanted to work with the model directly but for a lack of time I couldn't (maybe next time?). I enjoyed doing it, and I'll definitely continue working on it improving it and adding features!