DEV Community: Jason Lengstorf

🌶️ Newest Episode of Leet Heat: A Game Show For Developers!

Jason Lengstorf — Tue, 25 Mar 2025 13:00:00 +0000

Today we're excited to announce the newest episode of Leet Heat: A game show for web developers.

What happens when two very experienced developers go head-to-head on web dev trivia — with fiery consequences for wrong answers?

In this episode, principal engineer Chris takes on staff engineer Jeremy to see who can bring the knowledge — or face the heat! 🌶️🔥

Leet Heat is a game show created by web developers, for web developers. Host Mark Techson and executive producer Jason Lengstorf cook up challenging questions and even more challenging bites in this original series from CodeTV.

How Leet Heat works

In every episode, two developers face off to test their web dev knowledge. They spin the wheel to choose a category, then answer a series of questions. Correct answers earn points. Wrong answers lose points — and require the dev to eat a Deno nuggie drenched in hot sauce that gets hotter with every wrong answer.

Test your knowledge alongside the contestants: how many spicy bites would you have to eat?

Categories in this episode

Every episode tests the devs across the full stack of web dev knowledge. In this episode, they'll need to demonstrate their knowledge of:

Shipping Fast
Authentication
CSS
Acronyms
Accessibility

Thank you to the sponsors that make Leet Heat possible

Neon provides a serverless Postgres platform with database branching, ephemeral environments, and a lot more
Clerk is a comprehensive user management platform with drop-in components to get auth handled in your app
Deno‬ is a batteries-included platform for TypeScript and JavaScript projects
CodePen lets you build, share, and remix frontend ideas with a community of talented and creative developers
DataStax‬ is the fastest way to build AI applications

Use AI to moderate abusive and vulgar comments (full tutorial)

Jason Lengstorf — Mon, 24 Jul 2023 00:00:00 +0000

Build an internal dashboard to view and moderate comments in this full tutorial. Plus, learn how to use OpenAI to automatically flag the worst comments.

Want to jump to the end? Check out the source code on GitHub.

Internal tools don't get prioritized. That's why so many developers have horror stories of teams running superadmin commands against the production database that they copy-pasted from a doc somewhere.

In this tutorial, you'll learn how to build an internal dashboard to moderate a custom comments database. You won't have to write much code, but everything you create will be stored as human-readable code that can be checked into source control and edited manually without breaking the low-code workflow.

As an added bonus, we'll also look at how we can integrate AI (using OpenAI/Chat-GPT integrated into Airplane) to automatically flag the most abusive and vulgar comments, decreasing the psychic damage taken by human moderators.

Thanks to Airplane for sponsoring this tutorial. Go get a free account so you can follow along with this tutorial and start using their developer platform for building internal tools quickly and with minimal code.

Create a new Airplane project

To start, register for or sign into your Airplane account.

Next, install the Airplane CLI so you can develop locally:

brew install airplanedev/tap/airplane

Clone the starter repo, then move into it and start Airplane

# clone the start branch of the repo
gh repo clone learnwithjason/airplane-content-moderation -- -b start

# move into the cloned app directory
cd airplane-content-moderation/

Inside, this app contains the boilerplate for a project — such as a tsconfig.json and a package.json — as well as a file called airplane.yaml. The only thing inside this file is a note about the Node version (set to Node 18). This is a pretty cool feature of Airplane: there's very little boilerplate required.

There's also an example app folder, which you can ignore for now. We'll come back to that after we've got the Airplane tasks and views built.

Inside the project folder, use the Airplane CLI to start the project.

# start Airplane in dev mode (will prompt for login on first run)
airplane dev

The first time you run this command, you'll be asked to log in.

Next, the CLI will start the dev server and give you the option to press enter to open the Airplane Studio, which is a UI for local development that updates your local files in real time. Press enter to open the studio.

Set up the database and initial queries

Our first step will be to make sure we have data to work with and that we're able to read it out of our database in Airplane.

NOTE: Airplane provides a demo database we can use for this tutorial. In a real project, you'll need to connect your own database as a resource.

Create a task to initialize the comments table

To begin, let's create a table to store comments and add a few entries so we can verify things are working as expected.

To get the work done that our tutorial requires, we'll be using Airplane tasks. These can take a few forms, but we'll start with a SQL task.

Create a new task in the Studio called "comments_db_reset" and choose the SQL option.

NOTE: You can call your tasks whatever you want. I've chosen the format of placing the affected data (comments) first, followed by what the task does.

Once you create the task, two new files will be created in your working directory:

comments_db_reset.sql
comments_db_reset.task.yaml

It's possible to edit these files directly — we'll do that for a future task — but in many cases it's much more convenient to use the Studio UI.

In the Studio, update the details in the "Define" section:

Name: Reset comments database
Description: Deletes the current comments table, including all comment entries, then creates a new comments table with a few seed entries.

The local files will update as you type.

Next, scroll down to the "Build" section and choose "[Demo DB]" from the "Database Resource" dropdown.

Under "Query", add the following:

DROP TABLE comments;

CREATE TABLE IF NOT EXISTS
  comments (
    id      SERIAL PRIMARY KEY,
    comment TEXT NOT NULL,
    flagged BOOLEAN
  );

INSERT INTO
  comments (comment, flagged)
VALUES
  ('this looks so delicious omg', false),
  ('I think you suck', true),
  ('I do not want to eat this', false),
  ('eat poop', true)
;

This is a set of SQL instructions that removes the comments table, creates a new one with the necessary fields, and then inserts example entries into it that we can use to build out the rest of our dashboard.

Our changes save as we type, so once everything is entered, we can click the "Execute Task" button in the top panel.

That's the whole process for setting up Airplane and modifying a database. I love this flow because it feels magical, but nothing that happens is "magic" or hidden from me — everything I entered in the UI is stored in my code base now.

The UI is a convenience, not a requirement — I can choose not to use it if I prefer.

Create a task to list all comments

Next, let's add another task to list all of our comments. Create a new task in the Studio, choose SQL, and name it "comments_list_all". Add the following details in the "Define" section:

Name: List all comments
Description: Lists all comments in the database, regardless of flagged status

Choose the demo DB from the database dropdown and add the following query:

SELECT
  id,
  comment,
  flagged
FROM
  comments
ORDER BY
  flagged
;

Click the "Execute Task" button and you'll see the seed comments listed on the screen.

Create a task to list flagged comments

Next, repeat this process to create a task called "comments_list_flagged" to list only flagged comments using the following details:

Name: List flagged comments
Description: List all comments that have been flagged as abusive or otherwise problematic.

Choose the demo DB and add the following query:

SELECT
  id,
  comment,
  flagged
FROM
  comments
WHERE
  flagged = true
;

Create a task to list approved comments

We'll also need to be able to select all the unflagged (approved) comments. For these, we can copy-paste the comments_list_flagged files and make small adjustments right in the code.

Rename both files to comments_list_approved, keeping their respective extensions. In comments_list_approved.task.yaml, make the following edits:

    slug: comments_list_approved
    name: List approved comments
    description: List all comments that have been approved.
    sql:
      resource: demo_db
      entrypoint: comments_list_approved.sql

Next, replace the contents of comments_list_approved.sql with the following:

SELECT
  id,
  comment,
  flagged
FROM
  comments
WHERE
  flagged = false
;

Build a comment moderation dashboard view

So far, we've only looked at tasks in Airplane. Next, let's dig into how Airplane views work.

Create an Airplane view

In the Studio, create a new view by clicking the + at the top of the explorer. Give it the following details:

Name: Comment Moderation Dashboard
Description: Allows admins to see all approved comments, and optionally see flagged comments. They're also able to change the approved/flagged state of a comment and delete comments permanently.

This will create a new file in your local directory called CommentModerationDashboard.airplane.tsx — you can rename this if you want, but we'll leave it as-is for this project.

Update the view with a table to display approved comments

Inside, you'll see an example component. Replace the file contents with the following:

import { Heading, Stack, Table } from '@airplane/views';
import airplane from 'airplane';

const CommentModerationDashboard = () => {
  return (
    <Stack>
      <Heading>Comment Moderation Dashboard</Heading>

      <Table
        title="Approved Comments"
        task="comments_list_approved"
        defaultPageSize={20}
        hiddenColumns={['flagged']}
      />
    </Stack>
  );
};

export default airplane.view(
  {
    slug: 'comment_moderation_dashboard',
    name: 'Comment Moderation Dashboard',
    description:
      "Allows admins to see all approved comments, and optionally see flagged comments. They're also able to change the approved/flagged state of a comment and delete comments permanently.",
  },
  CommentModerationDashboard
);

Airplane provides a suite of React UI components to make building dashboards as straightforward as snapping together components.

A Stack is a container for content, and inside we've added a Heading to let the viewer know what this dashboard is for, followed by a Table to display approved comments.

The Table accepts a few props. The title is displayed at the top, the defaultPageSize tells the table how many rows to show before paginating, and hiddenColumns lets us leave out columns from the table that we don't need.

The really interesting prop here is the task prop. Many Airplane components can be task-backed, which means we can perform tasks (such as loading data or performing a query) using their slugs. This is a great productivity boost, because we don't have to mess with calling APIs to load data, then looping through them to build table views — we just say, "Give me a table with the result of the task called comments_list_approved" and Airplane does the rest. Neat!

Once we've saved this component, we'll see a new icon pop up in the explorer for a view called "Comment Moderation Dashboard". Click on it and you'll see the layout you just built, including the approved comment entries displayed in the table.

Add another table to display flagged comments

We also need a way to see flagged comments, so add another Table that uses the comments_list_flagged task:

    import { Heading, Stack, Table } from '@airplane/views';
    import airplane from 'airplane';

    const CommentModerationDashboard = () => {
        return (
            <Stack>
                <Heading>Comment Moderation Dashboard</Heading>

                <Table
                    title="Approved Comments"
                    task="comments_list_approved"
                    defaultPageSize={20}
                    hiddenColumns={['flagged']}
                />
+
+               <Table
+                   title="Flagged Comments"
+                   task="comments_list_flagged"
+                   defaultPageSize={20}
+                   hiddenColumns={['flagged']}
+               />
            </Stack>
        );
    };

    export default airplane.view(
        {
            slug: 'comment_moderation_dashboard',
            name: 'Comment Moderation Dashboard',
            description:
                "Allows admins to see all approved comments, and optionally see flagged comments. They're also able to change the approved/flagged state of a comment and delete comments permanently.",
        },
        CommentModerationDashboard,
    );

Save and the flagged comments appear, but this isn't ideal — we don't want to subject our admins to potentially abusive comments every time they load the dashboard. Instead, let's hide the flagged comments by default and only show them if the admin clicks a checkbox to confirm that they want to review flagged comments.

Inside the view, let's add a Checkbox from the Airplane component library, as well as the useComponentState hook that will let us check whether it's checked or not:

    import {
+       type CheckboxState,
        Heading,
        Stack,
        Table,
+       Checkbox,
+       useComponentState,
    } from '@airplane/views';
    import airplane from 'airplane';

    const CommentModerationDashboard = () => {
+       const { id, checked } = useComponentState<CheckboxState>();

        return (
            <Stack>
                <Heading>Comment Moderation Dashboard</Heading>

                <Table
                    title="Approved Comments"
                    task="comments_list_approved"
                    defaultPageSize={20}
                    hiddenColumns={['flagged']}
                />

+               <Checkbox
+                   id={id}
+                   label="Show flagged comments (view at your own risk!)"
+               />
+
+               {checked ? (
                    <Table
                        title="Flagged Comments"
                        task="comments_list_flagged"
                        defaultPageSize={20}
                        hiddenColumns={['flagged']}
                    />
+               ) : null}
            </Stack>
        );
    };

    export default airplane.view(
        {
            slug: 'comment_moderation_dashboard',
            name: 'Comment Moderation Dashboard',
            description:
                "Allows admins to see all approved comments, and optionally see flagged comments. They're also able to change the approved/flagged state of a comment and delete comments permanently.",
        },
        CommentModerationDashboard,
    );

Now the dashboard hides the comments that could ruin someone's day by default, and they only have to be viewed if it becomes necessary to review them.

Add a task to flag comments as abusive

If a comment is approved by mistake, we need the ability to manually flag it. To do that, create a new task called "comment_flag" with the following details:

Name: Flag comment as abusive

Under parameters, click the "Add parameter" button and add the following values:

Name: id
Description: The ID of the comment to flag.
Type: Integer
Required: true

All the other values can remain unchanged.

Click Update to save.

Next, choose the demo DB as the database resource and add the following query:

UPDATE
  comments
SET
  flagged = true
WHERE
  id = :id
;

Finally, set the query argument to be "id" and the value to be {{params.id}}, which connects the parameter of the task to the query argument of this query.

To test, grab an ID from one of the approved comments on the dashboard, enter it into the ID field of the "Flag comment as abusive" task, and click the "Execute task" button.

The previously approved comment will now be flagged, which you can verify by visiting the dashboard again.

Add a task to unflag comments

Now, it's not against our site rules to dislike something, so that comment should be approved. Let's add another task to allow us to do that.

Create a task called "comment_approve" with the following details:

Name: Approve comment
Description: Approve a comment for public display.

Add a parameter called id as an integer with the description, "The ID of the comment to approve".

Next, set the demo DB as the database resource and add this query:

UPDATE
  comments
SET
  flagged = false
WHERE
  id = :id
;

For query arguments, add a new one called id with the value of {{params.id}}.

Use the same comment ID that you just flagged and execute the task. It will now be back on the approved list in the dashboard.

Create a SQL task to delete comments

After an admin has reviewed a flagged comment to confirm that, yep, this comment is terrible, we want to let them delete it permanently — no reason for anyone else to have to see that trash.

To do that, create a new task called "comment_delete" with the following details:

Name: Delete comment permanently
Description: Removes a comment permanently. There is no undo for this action!

Add a parameter called id as an integer with the description, "The ID of the comment to delete".

Next, set the demo DB as the database resource and add this query:

DELETE FROM
  comments
WHERE
  id = :id
;

For query arguments, add a new one called id with the value of {{params.id}}.

Test this by adding a comment ID in the field and clicking "execute task".

NOTE: Remember that you can always run the "Reset comments database" task to revert the comments table to its starting state, so don't worry about deleting things.

Call tasks from table rows in Airplane

At this point, what we've built is already pretty useful. We can:

View comments (both flagged and approved)
Toggle the flagged status of comments
Delete comments

This could be considered good enough. But we can make this much more user friendly with only a few more lines of code thanks to a built-in Airplane feature called row actions.

Add a row action to flag or approve a comment

In Airplane Table components, we can add a rowActions prop that adds a button in each row and performs the specified action for the current row when clicked.

There are a few ways to do this, up to and including fully custom solutions. For our needs, the task-backed row actions are perfect: they will automatically pass through the current comment's ID — we only need to provide the task to be performed and label for it!

In CommentModerationDashboard.airplane.ts, make the following changes:

    import {
        type CheckboxState,
        Heading,
        Stack,
        Table,
        Checkbox,
        useComponentState,
    } from '@airplane/views';
    import airplane from 'airplane';

    const CommentModerationDashboard = () => {
        const { id, checked } = useComponentState<CheckboxState>();

        return (
            <Stack>
                <Heading>Comment Moderation Dashboard</Heading>

                <Table
                    title="Approved Comments"
                    task="comments_list_approved"
                    defaultPageSize={20}
                    hiddenColumns={['flagged']}
+                   rowActions={{
+                       slug: 'comment_flag',
+                       label: 'flag',
+                   }}
                />

                <Checkbox
                    id={id}
                    label="Show flagged comments (view at your own risk!)"
                />

                {checked ? (
                    <Table
                        title="Flagged Comments"
                        task="comments_list_flagged"
                        defaultPageSize={20}
                        hiddenColumns={['flagged']}
+                       rowActions={[
+                           {
+                               slug: 'comment_approve',
+                               label: 'approve',
+                           },
+                           {
+                               slug: 'comment_delete',
+                               label: 'delete',
+                           },
+                       ]}
                    />
                ) : null}
            </Stack>
        );
    };

    export default airplane.view(
        {
            slug: 'comment_moderation_dashboard',
            name: 'Comment Moderation Dashboard',
            description:
                "Allows admins to see all approved comments, and optionally see flagged comments. They're also able to change the approved/flagged state of a comment and delete comments permanently.",
        },
        CommentModerationDashboard,
    );

Save, refresh the studio, and your dashboard will now show the "flag" option on approved comments, and the "approve" and "delete" options on flagged comments.

Test out the buttons to see row actions in, uh, action!

Refresh other tables when row actions are performed

You may have noticed that right now, the table that contains the updated row updates, but other tables require a page refresh to show the changes.

Let's fix that.

Airplane provides a hook called useTaskQuery that lets us, among other things, force a refetch of the given task, causing all components using it to update.

Make the following changes in CommentModerationDashboard.airplane.ts to refetch all tables whenever a comment is modified:

    import {
        type CheckboxState,
        Heading,
        Stack,
        Table,
        Checkbox,
        useComponentState,
+       useTaskQuery,
    } from '@airplane/views';
    import airplane from 'airplane';

    const CommentModerationDashboard = () => {
        const { id, checked } = useComponentState<CheckboxState>();
+       const flagged = useTaskQuery('comments_list_flagged');
+       const approved = useTaskQuery('comments_list_approved');

        return (
            <Stack>
                <Heading>Comment Moderation Dashboard</Heading>

                <Table
                    title="Approved Comments"
                    task="comments_list_approved"
                    defaultPageSize={20}
                    hiddenColumns={['flagged']}
                    rowActions={{
                        slug: 'comment_flag',
                        label: 'flag',
+                       onSuccess: () => flagged.refetch(),
                    }}
                />

                <Checkbox
                    id={id}
                    label="Show flagged comments (view at your own risk!)"
                />

                {checked ? (
                    <Table
                        title="Flagged Comments"
                        task="comments_list_flagged"
                        defaultPageSize={20}
                        hiddenColumns={['flagged']}
                        rowActions={[
                            {
                                slug: 'comment_approve',
                                label: 'approve',
+                               onSuccess: () => approved.refetch(),
                            },
                            {
                                slug: 'comment_delete',
                                label: 'delete',
                            },
                        ]}
                    />
                ) : null}
            </Stack>
        );
    };

    export default airplane.view(
        {
            slug: 'comment_moderation_dashboard',
            name: 'Comment Moderation Dashboard',
            description:
                "Allows admins to see all approved comments, and optionally see flagged comments. They're also able to change the approved/flagged state of a comment and delete comments permanently.",
        },
        CommentModerationDashboard,
    );

Save, then try again. Now both tables update whenever a comment is modified.

Create a TypeScript task to add a new comment

To this point, we've been using only SQL tasks, but Airplane also supports tasks written in JavaScript, Python, and more.

Create a new task and choose JavaScript as the type. Give it the name "comment_add" and leave TypeScript selected. Use the following details:

Name: Add a comment
Description: Save a new comment in the database. Includes a step to check for abusive comments and flag them to limit problematic content from becoming visible.
Parameters: comment, type "Long text"

Add the demo DB as a resource, then open comment_add.airplane.ts in your editor. The second argument to airplane.task is an async function, which contains everything you want the task to do when called.

Replace the boilerplate function with the following:

import airplane from 'airplane';

export default airplane.task(
  {
    slug: 'comment_add',
    name: 'Add a comment',
    description:
      'Save a new comment in the database. Includes a step to check for abusive comments and flag them to limit problematic content from becoming visible.',
    parameters: {
      comment: {
        name: 'comment',
        type: 'shorttext',
      },
    },
    resources: ['demo_db'],
  },
  async (params) => {
    const { comment } = params;

    // TODO add check for abusive content
    const output = { flagged: false };

    const res = await airplane.sql.query(
      'demo_db',
      'INSERT INTO comments (comment, flagged) VALUES (:comment, :flagged);',
      { args: { comment, flagged: output.flagged } }
    );

    console.log(res);

    let message = `Your comment was saved.`;

    return { message, flagged: output.flagged };
  }
);

Here's what this code does:

Get the comment out of the params so we can work with it
For now, temporarily hard-code the output, which we'll build for real in the next section
Use the built-in airplane.sql.query method to run an INSERT in our demo database to save the new comment along with its flagged status
Return a message and whether the comment was flagged

Save, then write a new comment in the task's input in the Studio and execute the task. Check the dashboard to see your new comment saved.

Use AI to automatically flag abusive comments

Moderation is not optional when we're opening up spaces for public comments. Flagging abusive content is a must if you want to have a space free of harassment and other unacceptable behavior.

The challenges with moderation are enormous and complicated. We won't cover all of them in this post, but we will look at two:

The people who moderate content prevent us from seeing the most terrible things that are said in the comments section — but for them to do their jobs, they have to read that awful content. A moderator is forced to confront the absolute worst the web has to offer every day, and that takes its toll.
Good moderation means not showing comments until they've been checked. This adds a significant delay between posting a comment and seeing the comment live, which can prevent conversations from happening because it takes too long to see responses.

To address these two challenges, one possible solution is using a large language model (LLM) as a kind of "first line defense" for comment moderation.

NOTE: Before we continue, let me add a giant, flashing asterisk to this section. AI is cool, but it has huge unanswered ethical questions. We haven't figured out how to control for the bias of the people training the models yet, and that means we need to be extremely careful about how we use AI — and we need to make sure we're checking its work thoroughly.

For this use case, we're attempting to catch abusive and hateful comments. We're also saving all comments for a final human review before deletion, which will allow us to adjust the instructions we're providing the LLM if it's incorrectly flagging comments.

Use Airplane's built-in AI functions to moderate user input

Airplane provides several built-in operations, including AI support for both OpenAI and Anthropic.

For our app, we'll use OpenAI, which currently provides $5 in credit to new accounts, which is more than enough to build and test this feature.

Next, head to the the Airplane Studio and create a config var (the icon that looks like (x) in the left-hand sidebar). Name the config OPENAI_API_KEY and paste in your OpenAI key.

NOTE: This value will be added to airplane.dev.yaml! Remember not to commit this file to avoid leaking your API key.

Go back to your "Add a comment" task in the explorer and scroll down to the "build" section of the config. Under "Environment variables", click "add variable". Name it OPENAI_API_KEY, then choose "From config var" from the dropdown. In the new dropdown that appears, choose the OPENAI_API_KEY config.

This will update the task file with a reference to the config var, which makes it safe to commit the task file (but, again, do not commit airplane.dev.yaml).

With the API key available, modify comment_add.airplane.ts to add the AI moderation step:

    import airplane from 'airplane';

    export default airplane.task(
        {
            slug: 'comment_add',
            name: 'Add a comment',
            description:
                'Save a new comment in the database. Includes a step to check for abusive comments and flag them to limit problematic content from becoming visible.',
            parameters: {
                comment: {
                    name: 'comment',
                    type: 'shorttext',
                },
            },
            resources: ['demo_db'],
            envVars: {
                OPENAI_API_KEY: {
                    config: 'OPENAI_API_KEY',
                },
            },
        },
        async (params) => {
            const { comment } = params;

-           // TODO add check for abusive content
-           const output = { flagged: false };
+           const getSentiment = airplane.ai.func(
+               'Identify abusive and vulgar comments. Negative opinions are allowed but personal attacks are not.',
+               [
+                   {
+                       input: 'This is the shit!',
+                       output: { flagged: false, sentiment: 'positive' },
+                   },
+                   {
+                       input: 'You are stupid!',
+                       output: { flagged: true, sentiment: 'negative' },
+                   },
+                   {
+                       input: 'Burgers are gross',
+                       output: { flagged: false, sentiment: 'negative' },
+                   },
+               ],
+           );
+
+           const { output, confidence } = await getSentiment(comment);
+
+           if (typeof output === 'string') {
+               return { message: 'unparseable input' };
+           }

            const res = await airplane.sql.query(
                'demo_db',
                'INSERT INTO comments (comment, flagged) VALUES (:comment, :flagged);',
                { args: { comment, flagged: output.flagged } },
            );

            console.log(res);

-           let message = `Your comment was saved.`;
+           let message = `Your comment was saved. The sentiment was read as ${output.sentiment}.`;
+           if (output.flagged === true && confidence >= 0.75) {
+               message = 'Wow, you kiss your mother with that mouth?';
+           }

            return { message, flagged: output.flagged };
        },
    );

Save, then add an abusive comment to make sure it'll get caught (I recommend trying, "you're a doofus").

Less than 25 lines of code, and we've got a pretty okay auto-moderation flow in place — that's pretty impressive!

And again: remember that this is not a replacement for human moderation. It's a tool that can help the moderators work more effectively.

Deploy your Airplane dashboard

So far we've only been working locally. To make this dashboard available to your team, you'll need to deploy it.

Add config vars for production

For your tasks to work properly, you'll need to add a production config var with your OpenAI API key. Name it OPENAI_API_KEY — save it and you're all set.

Deploy Airplane tasks and views to production

To deploy, open the terminal and run the following command:

airplane deploy

Once the deployment completes, head to https://app.airplane.dev and check the library to see your deployed tasks and views.

Try the demo app to see the comment moderation flow in action

To provide a way to test the moderation workflow, the demo app for this project executes Airplane tasks directly via API. You could also set up a webhook to run the moderation flow in the background after a comment is added to your production database.

We won't go through exactly how to build this demo app, but the overview is:

It's an Astro site
The site runs in hybrid mode so it can process form submissions
Approved comments are loaded by executing the comments_list_approved task and getting its outputs
New comments are created by executing the comment_add task and returning its outputs

To see the source code, check out the GitHub repo.

For a user on the site, submitting a comment will take a few seconds and then immediate feedback will be sent: either the comment is approved and visible immediately, or it's flagged and the comment form will chide the user for posting abusive or vulgar comments.

Congratulations! You've built a complete comment moderation dashboard, including a first line of defense against the most vulgar and abusive comments powered by OpenAI.

For more content like this, subscribe to my newsletter!

Links and additional resources

Source code: https://github.com/learnwithjason/airplane-content-moderation
Get started with Airplane
More information on the ethical concerns around AI
A reminder that biases in AI can quite literally kill people if we don’t actively check the results

Clean as you go (a coding life hack)

Jason Lengstorf — Fri, 21 Jul 2023 17:08:02 +0000

I learned to cook in a restaurant. I was a prep cook.

Every morning, I clocked in to stacks of produce I needed to have ready before the lunch rush. Every morning, I grabbed a cutting board and a knife, opened the first box of romaine lettuce, and got to chopping. And every morning, I'd make an enormous mess.

As I chopped, I pushed the scraps aside into a pile to deal with them later. Cleaning, after all, happened after I finished prep.

Big messes require big efforts to clean

But the scraps piled up, and my workspace got tighter and tighter. Onion skins stuck to the tomatoes; remnants of diced parsley speckled the cucumbers. My scrap pile got so out of control that I'd occasionally end up dumping handfuls of veggie waste onto the floor by mistake.

Working around my mess made prep stressful, but that paled in comparison to the cleanup. My prep technique left the kitchen looking like the aftermath of a food fight. It took me so long to clean up that I had to rush to avoid delaying the lunch shift from getting started. (There should have been an hour or so of downtime.)

The more experienced staff was horrified by this.

And, fortunately for me, they decided to help me instead of just firing me immediately.

Clean as you go to avoid big messes

One of the cooks very patiently introduced me to the concept of cleaning as you go. They had a bench scraper and a bleach bucket standing by, and positioned the trash can right next to the table. As I chopped, they encouraged me to move the scraps directly to the trash instead of making a pile. When I finished an ingredient, I grabbed the bench scraper to clear away all the left behind bits, then gave a quick wipe with a rag to reset my station to clean before starting the next one.

NOTE: If you cook, I can't recommend getting a bench scraper enough. Use it to scoop ingredients off the cutting board instead of using your knife (and potentially dulling it), get all the bits off your flat surfaces, cut and measure dough — it's a versatile tool that I've noticed people don't tend to know about unless they've worked in restaurant kitchens before.

At first, I resisted this. Cleaning at each step had to be slower, right? After all, context switching is a terrible idea, and this was clearly going to make me even slower for sure.

But my options were to do it their way or get fired, so I stuck to it. And a few things happened:

The quality of my work went up. No more bits of the previous veggie showing up in the next one. And because my workspace was less cramped, I could see what I was doing and make fine adjustments more easily.
The prep itself went faster. Starting with a clean station made it faster to do the prep because I wasn't working around previous mess.
Cleanup went faster. By cleaning as I went, cleaning was as simple as a few swipes with a bench scraper and a quick wipe-down with a rag. Nothing piled up, so my last veggie was as easy to clean up after as the first one.

I wasn't rushing to get everything done and cleaned anymore. Instead of the cooks worrying about me, they started giving me additional training and opportunities.

It felt counterintuitive, but cleaning as I went had made me both better and faster at my job.

Isn't stopping to clean slower?

My knee-jerk reaction to cleaning as I went was to condemn it as multitasking, which makes work slower. But... was it?

NOTE: I'm taking a bit of artistic license with
timelines to connect this story. I learned about cleaning as you go in my teens; context switching didn't formally enter my awareness until a decade or so later. With the benefit of hindsight, I think my initial distaste for cleaning as you go was some vague sense of "it'll take longer!" — but honestly I was a teenager so I may have just been against it because I was acting like a sulky prick.

Cleaning as you go seems like multitasking, but it's actually an efficient way of sequentially tackling work.

Small messes clean up fast

By not cleaning as we go, multiple messes compound on each other. A small mess is fast to clean, but a dozen or more small messes become a much bigger mess that's harder to clean up.

In food prep, the scrap pile might spill off the table. Wet scraps might dry to the table, making them far more difficult to clean up. A large pile has a tendency to spread out and get additional dishes and utensils dirty.

By contrast, a small mess is almost always a couple quick wipes away from being clean.

"Clean as you go" as a guiding principle for everything

This lesson didn't just save my high school job — it made a huge impression on my outlook on life. I try to clean as I go wherever I can these days, whether I'm cooking dinner at home or writing code at work.

In a codebase, we always make small messes as we work. We're solving problems, and until we hit a solution that works our code is full of small choices based on educated guesses that are directionally correct, but that probably wander a bit since they lack the full context of the working solution.

If we ship the code as-is, everything will be fine. The code works, and that's ultimately the point.

But we left a small mess. And if we do that every time we build a new feature, the small messes start to build into a big mess — this is how we end up with tech debt that's so overwhelming that we start to argue that the only reasonable solution is to start over from scratch.

If, instead, we choose to clean as we go — to do an immediate small refactor as part of submitting the PR, for example — we'll clean up those small messes before they can pile up into big ones. And because the messes are being continually addressed, we have cleaner, easier to manage code, and that makes us faster.

Building new habits is hard, but worth it

Cleaning as you go is a tricky habit to build. It requires a concentrated effort to change the way you work, and if you're in a team it's even trickier because you're trying to shift the team culture.

However, if you put in the work to build the habit, it pays dividends in every area of your life where you choose to adopt it.

Be weird & fun (as a business strategy)

Jason Lengstorf — Wed, 01 Jun 2022 17:14:24 +0000

The short version: I worked with my incredible team to write and create a video comparing the experience of Netlify with other development workflows. We shot this with a professional production team in a studio in San Francisco and I think it's almost as fun to watch as it was for us to make it.

Watch it here:

For more information, you can also read the official Netlify post about this video.

Why make a video like this?

The post-pandemic world has changed how people want to spend their time. Things that used to be a staple, like webinars, have become much harder to attract attendees to because no one wants yet another Zoom call on their calendar.

We can't just go back to only in-person events, either, because not everyone is ready to travel or be in a crowded room again. Many people are being choosy about what they're willing to travel for — they're (quite reasonably) prioritizing vacations and family visits over company events and conferences.

Reaching folks in the community is more challenging than ever. We need to get creative — the old ways of outreach are showing diminishing returns. Companies could see this as a sign of doom, but I find it pretty exciting: it means that we're not able to rely on the standard playbook anymore, so companies are incentivized to try new things. That means some of my weirder ideas that might have been dismissed as too risky in the past might actually get greenlit now.

Here are some loosely structured thoughts on why I think this project was a good way to shake things up and reach the broader community.

Showing how it feels to use something is easier than writing it down

This project is our attempt to create something fun to watch that tells a story that's been hard for us to tell: Netlify falls into that category of products where the real value of what we're building is how it feels to use it — we solve real problems for teams that build for the web, and once they've switched to our tools they feel like they've gained superpowers.

We know that people who take advantage of Netlify's platform for modern web development will love it — we've seen that over and over again. But how do we convince people to try it in the first place?

In my experience, when I talk to folks who haven't tried Netlify yet, it's not because they're happy with how they work today. It's often because they weren't aware that they had a choice of something better. Especially in bigger companies, people expect things to be bureaucratic and hard — that's just Big Business™, right?

So when I tell them that huge companies like Unilever, Nike, Twilio, and Verizon have switched to Netlify, there's this dawning of realization that they have options.

This video is an attempt to create something interesting enough to watch on its own, and along the way show all the folks I haven't had the chance to talk to in person that they have options, too.

When you've got a talented team, you should play to your strengths

Our team at Netlify is absolutely stacked with creative, talented people. Marisa on our Design Research team has been performing since she was a toddler. Rachael, our Senior Manager of Technical Writing for Developer Documentation, is not only a great performer but actually worked as a teacher for theater. Our Director of Developer Experience, Phil, is a stand-up comedian on the side. That's just a sampling of the team — just about everyone has a broad, fascinating background that gives them experience in the performing arts or other creative outlets.

We've assembled a team that is willing to go all-in on a wild idea and have a blast trying something new, and to not take advantage of that feels like a huge missed opportunity.

When we wrote the script, we put in opportunities for the team to help build the worlds in these two universes. Many of the one-liners and gags in the video are the results of the team doing improv on the spot — Tara, our Manager of Templates Engineering, stole the show with her portrayal of the "other universe boss".

I had so much dang fun working on this video with this delightful group of weirdos.

Whatever you do, lead with fun

If you're a developer, you've probably watched quite a bit of video about web development. If you try to recall your favorites, what comes to mind?

For me, I think of the things that made me laugh while teaching me something:

Cassidy Williams teaching us empathy for OSS devs on TikTok
Anjana Vakil and Natalia Margolis teaching Tail Call Optimization as a musical at !!Con
Gary Bernhardt's classic speedrun of weird behavior in programming languages, "Wat"

The majority of the content out there is information dense, but dry. I often find myself forcing my way through a video because I need the information, but I'm certainly not enjoying myself. It feels like a chore to get the knowledge out.

Finding ways to make knowledge transfer fun has been pretty central to my career — whether it's something like Learn With Jason where I'm actively teaching development skills, or the way I entertain myself with meta-commentary in my blog posts, or the absurd level of effort I put into silly apps for my workshops because they make me smile.

I can only speak for myself, but I am far more likely to follow through on something if I'm having fun while I do it, so I've started prioritizing fun in projects as the most important factor. No matter what we make, we're going to share knowledge; that's table stakes. When we look at how we're going to share that knowledge, the approach that sounds like the most fun is going to win out every time.

There's more where this came from

We've been working toward this video for over a year now. It takes a lot of coordination with a lot of people to start something new like this: we have to get aligned on strategy, agree on budgets, make sure we're telling the right story, hook into our overarching strategy, and a million other little agreements that need to be in place for something like this to exist.

I'm making a big assumption that this video will be successful in the ways we want it to be. But unless things go pretty poorly, I'll keep pushing for weird, fun projects like these. (Which I guess is a good opportunity for me to say, if this sounds like your kind of fun, we're hiring.)

I'm excited to explore new ideas and media. I hope you'll have as much fun watching what we're able to create as we're having making it.

Send GraphQL Queries With the Fetch API (Without Apollo, URQL)

Jason Lengstorf — Tue, 22 Dec 2020 17:28:20 +0000

GraphQL is a powerful solution for working with data, but it often gets a bad rap for being too complicated to set up and use. In this tutorial, we'll learn how to send GraphQL queries and mutations without any third-party tools using the browser's built-in Fetch API.

How to send a GraphQL query with Fetch

Under the hood, GraphQL works by sending HTTP requests to an endpoint. This means that there's nothing magical about sending a GraphQL request — we can use built-in browser APIs to send them!

Heads up! We'll be using the built-in Fetch API for this example, but you could also use axios, jQuery.ajax(), or your preferred library for sending HTTP requests.

First, let's look at the component parts of a GraphQL query:

The query itself
Any query variables

A GraphQL query might look something like this:

query GetLearnWithJasonEpisodes($now: DateTime!) {
  allEpisode(sort: {date: ASC}, where: {date: {gte: $now}}) {
    date
    title
    guest {
      name
      twitter
    }
    description
  }
}

This query loads the Learn With Jason schedule by searching for all episodes with a date greater than $now.

But what is $now? A query variable!

Query variables are passed to GraphQL as a JavaScript object:

{
  now: new Date().toISOString()
}

In this case, the variable will be set to the current date and time that the query is executed, which means we'll only see future episodes.

How can we send the GraphQL query to the GraphQL endpoint using Fetch?

Once we have the query and variables, we can write a bit of JavaScript to send a call with the Fetch API:

fetch('https://www.learnwithjason.dev/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    query: `
        query GetLearnWithJasonEpisodes($now: DateTime!) {
          allEpisode(limit: 10, sort: {date: ASC}, where: {date: {gte: $now}}) {
            date
            title
            guest {
              name
              twitter
            }
            description
          }
        }
      `,
    variables: {
      now: new Date().toISOString(),
    },
  }),
})
  .then((res) => res.json())
  .then((result) => console.log(result));

This sends the GraphQL query and variables as a JSON object to the endpoint https://www.learnwithjason.dev/graphql, then logs the result, which looks something like this:

Heads up! You can open your browser console and run this JavaScript to see this in action right now!

If you'd like to try this with other GraphQL endpoints, check out the Rick and Morty GraphQL API or the countries API.

What are the requirements to send a GraphQL query request?

For a GraphQL request to be successfully sent as an HTTP request, we have to meet a few requirements. Let's step through them one at a time.

The request needs to be sent using the `POST` method

Some endpoints may support other methods, but I have yet to find one that doesn’t support POST, so it's a safe bet to use this with any GraphQL endpoint.

The query and variables need to be sent as a JSON object

GraphQL endpoints expect the body of the request to be a stringified JSON object that contains a query and variables property.

Even if you don't have variables, send an empty object:

JSON.stringify({
  query: `
    query SomeQuery {
      # your query here
    }`,
  variables: {},
});

Send the right headers

This is optional, technically, but it's a good idea to include a Content-Type header to specify that you're sending JSON.

Many GraphQL endpoints will require an Authorization header or other access control, which will vary depending on the service or tools you're using to serve GraphQL data. Check the docs for your GraphQL endpoint if you run into access control issues when sending your request.

GraphQL clients are powerful, but you may not need one!

GraphQL clients like Apollo and URQL add a lot of extra power, including caching support and advanced features like subscriptions. In apps that have lots of queries or that are implementing complex data management, it's probably a good idea to implement an actual GraphQL client.

However, if you're building an app that needs to make a few GraphQL queries, you may not need a full-blown GraphQL client! In a lot of cases, a simple HTTP request is enough.

Access Query String Parameters in Serverless Functions

Jason Lengstorf — Sat, 11 Jan 2020 01:47:28 +0000

Serverless functions really start to show their potential when we can accept user input and respond to it. The most straightforward way to do this is with query parameters in the browser using GET requests. In this article, we'll look at how to retrieve query parameters in a serverless function and use them to affect the output of our function.

Heads up! This tutorial uses Netlify Functions for development and deployment. If you'd like more information, I've written a primer on how to deploy serverless functions to Netlify.

Create your dev environment

If you've been following along with the full series on serverless functions, you can use the same codebase you originally set up. If you're starting fresh, you can clone the starter repo:

# clone the starter branch of the repo
git clone --single-branch --branch starter https://github.com/jlengstorf/serverless-functions.git

# move into the project
cd serverless-functions/

# install dependencies (can also use `npm install`)
yarn

# install the Netlify CLI (can also use npm i -g netlify-cli)
yarn global add netlify-cli

NOTE: check out the Netlify CLI docs for more details.

Write the serverless function

To start, let’s create a serverless function that will allow us to boop our friends. Create a file called boop-a-friend.js in the functions folder of your project and write the following code inside:

exports.handler = async () => {
  // TODO get this value from the query string
  const boopee = 'Jason';

  return {
    statusCode: 200,
    body: `You booped ${boopee} on the nose. Boop!`,
  };
};

Run netlify dev and visit http://localhost:9999/.netlify/functions/boop-a-friend and we see the return text, "You booped Jason on the nose. Boop!"

We want to be able to choose who we boop, though, and we want to do that from the browser — meaning we'll be using the GET method to call our serverless function. In practice, it will look like this:

http://localhost:9999/.netlify/functions/boop-a-friend?boopee=Marisa

We're using a query string (the ?boopee=Marisa part) to set our boopee value to "Marisa", because that's who we want to boop.

Next, we need to use the query string value in our serverless function.

Retrieve values from query strings in serverless functions

Because we're using Netlify Functions, we receive the event as the first argument to our serverless function, and it contains a property called queryStringParameters, which contains any query string values as an object.

What this looks like in practice is that if we call our serverless function using the query string above:

http://localhost:9999/.netlify/functions/boop-a-friend?boopee=Marisa

We can access query parameters in our serverless function by making the following changes:

- exports.handler = async () => {
+ exports.handler = async event => {
+   console.log(event.queryStringParameters);

    // TODO get this value from the query string
    const boopee = 'Jason';

    return {
      statusCode: 200,
      body: `You booped ${boopee} on the nose. Boop!`,
    };
  };

When we run netlify dev and call our function, the logs will show us the following output:

Request from ::1: GET /.netlify/functions/boop-a-friend?boopee=Marisa
[Object: null prototype] { boopee: 'Marisa' }
Response with status 200 in 0 ms.

Our boopee is there!

Now we can use it by making a few more adjustments to our code:

  exports.handler = async event => {
-   console.log(event.queryStringParameters);
-
-   // TODO get this value from the query string
-   const boopee = 'Jason';
+   const querystring = event.queryStringParameters;
+   const boopee = querystring.boopee || 'a friend';

    return {
      statusCode: 200,
      body: `You booped ${boopee} on the nose. Boop!`,
    };
  };

Now we can call our function by visiting http://localhost:9999/.netlify/functions/boop-a-friend?boopee=Marisa and we'll see that we're booping Marisa, just like we wanted to!

If we don't add a query string, we fall back to the default text:

We did it! We can now send, parse, and use query string parameters in our serverless functions!

What to do next

Deploy Your First Serverless Function Using JavaScript

Jason Lengstorf — Wed, 08 Jan 2020 16:38:18 +0000

Serverless functions are a powerful solution for adding additional functionality to JAMstack sites. In this post, we'll step through creating and deploying your first serverless function using Netlify Functions.

Write your first serverless function

Our first step is to write the serverless function itself. In an empty folder, create a folder called functions, and create a new file called my-first-function.js inside with the following code:

exports.handler = async () => ({
  statusCode: 200,
  body: 'boop',
});

That's all there is to it — you've just written your first serverless function! 🎉 The rest of this article is about getting this function online; we're done coding now.

What are the requirements of a serverless function?

There are three required components in a serverless function:

The file needs to export a function named handler — this is what exports.handler is doing on line 1 above
The function needs to return an object with a statusCode matching a valid HTTP response code
The response object also needs to include a body value, which is plain text by default

Configure your project for deployment to Netlify

With Netlify Functions, we only need two lines of configuration, which we need to save in netlify.toml at the root of the folder:

[build]
  functions = "functions"

This tells Netlify that our functions live in the functions folder.

Heads up! Check the docs for details on how Netlify config files work.

Create the repo and push to GitHub

At this point, we‘re ready to get this function on the internet!

Create a new repo on GitHub, then add and push our code to it:

# add your new repo as an origin
# IMPORTANT: make sure to use your own username/repo name!
git remote add origin git@github.com:yourusername/yourreponame.git

# add all the files
git add -A

# commit the files
git commit -m 'my first serverless function'

# push the changes to GitHub
git push -u origin master

IMPORTANT: make sure to use your own username and repo name when you add the origin above!

Create a new Netlify site

You can create your site through the Netlify dashboard or through the CLI. The CLI is really convenient and powerful, so let's use that for this site.

# install the Netlify CLI globally
npm install --global netlify-cli

# log into your Netlify account
netlify login

# initialize a new site
netlify init

This command will set up a new Netlify site in your account connected to the GitHub repo we just created.

It will ask several questions:

What would you like to do? — choose "Create & configure a new site"
Team — choose which Netlify team you want to add this site to
Site name (optional) — choose a name for your site, or press enter to get a randomly-generated name
Your build command — press enter to leave this blank; we don't need it for running functions
Directory to deploy — hit backspace to remove the suggested value, then press enter to leave it blank

Once the site has been created, we can grab the URL from the terminal output. In the above screenshot, the generated site name was:

https://confident-nightingale-4e5a0b.netlify.com/

By default, Netlify functions live at the URL endpoint /.netlify/functions/<function-name> — this is to minimize the chances that the route will conflict with other routes on your site. (We can customize our function URLs with redirects, if we want to.)

Our function file is called my-first-function.js, so it will be accessible on the web at https://confident-nightingale-4e5a0b.netlify.com/.netlify/functions/my-first-function. Go ahead and click that link — it works!

That's all there is to it! You've successfully deployed your first serverless function to Netlify.

What to do next

See the full collection of serverless function examples
Read the Netlify CLI docs on setting up continuous deployment
Learn how to use redirects in Netlify

DEV Community: Jason Lengstorf

🌶️ Newest Episode of Leet Heat: A Game Show For Developers!

How Leet Heat works

Categories in this episode

Thank you to the sponsors that make Leet Heat possible

Use AI to moderate abusive and vulgar comments (full tutorial)

Create a new Airplane project

Set up the database and initial queries

Create a task to initialize the comments table

Create a task to list all comments

Create a task to list flagged comments

Create a task to list approved comments

Build a comment moderation dashboard view

Create an Airplane view

Update the view with a table to display approved comments

Add another table to display flagged comments

Add a task to flag comments as abusive

Add a task to unflag comments

Create a SQL task to delete comments

Call tasks from table rows in Airplane

Add a row action to flag or approve a comment

Refresh other tables when row actions are performed

Create a TypeScript task to add a new comment

Use AI to automatically flag abusive comments

Use Airplane's built-in AI functions to moderate user input

Deploy your Airplane dashboard

Add config vars for production

Deploy Airplane tasks and views to production

Try the demo app to see the comment moderation flow in action

Links and additional resources

Clean as you go (a coding life hack)

Big messes require big efforts to clean

Clean as you go to avoid big messes

Isn't stopping to clean slower?

Small messes clean up fast

"Clean as you go" as a guiding principle for everything

Building new habits is hard, but worth it

Be weird & fun (as a business strategy)

Why make a video like this?

Showing how it feels to use something is easier than writing it down

When you've got a talented team, you should play to your strengths

Whatever you do, lead with fun

There's more where this came from

Send GraphQL Queries With the Fetch API (Without Apollo, URQL)

How to send a GraphQL query with Fetch

How can we send the GraphQL query to the GraphQL endpoint using Fetch?

What are the requirements to send a GraphQL query request?

The request needs to be sent using the POST method

The query and variables need to be sent as a JSON object

Send the right headers

GraphQL clients are powerful, but you may not need one!

Further reading

Access Query String Parameters in Serverless Functions

Create your dev environment

Write the serverless function

Retrieve values from query strings in serverless functions

What to do next

Deploy Your First Serverless Function Using JavaScript

Write your first serverless function

What are the requirements of a serverless function?

Configure your project for deployment to Netlify

Create the repo and push to GitHub

Create a new Netlify site

What to do next

More posts like this

#jamuary

The request needs to be sent using the `POST` method