DEV Community: Phantasm0009

[Boost]

Phantasm0009 — Fri, 27 Mar 2026 16:52:42 +0000

Phantasm0009

Mar 26

How I used Next.js and Claude 3.5 to stop my PM from nagging me about Jira

#webdev #productivity #nextjs #ai

Comments

4 min read

How I used Next.js and Claude 3.5 to stop my PM from nagging me about Jira

Phantasm0009 — Thu, 26 Mar 2026 23:17:08 +0000

We’ve all been there.

It’s 10:30 AM. You drop your update in the #daily-standup Slack channel: "Finally squashed that weird auth bug on the login portal, moving on to the database migration."

Two hours later, your Product Manager DMs you: "Hey, awesome job on the auth bug! Did you remember to move the ticket to Done in Jira?"

Context switching is the absolute worst part of being a developer. We are already communicating our status naturally in Slack—why do we have to open a new tab, wait for Jira or Linear to load, find the right sprint, and click a button just to say the exact same thing?

Last weekend, I decided I’d had enough. I built a Slack bot that reads my daily updates, figures out which ticket I’m talking about, and auto-closes it for me.

Here is how I built it using Next.js, the Slack Events API, and Claude 3.5 Sonnet.

The Architecture

The flow is surprisingly simple, but the execution requires some strict timing:

Developer posts a message in a monitored Slack channel.
Slack fires a webhook to my Next.js API route.
The API fetches the user's currently open tasks from Jira/Linear.
Claude 3.5 evaluates the Slack message against the open tasks to see if there's a match.
If confidence is > 95%, the bot hits the PM tool's API to mark it "Done" and replies in Slack.

Challenge 1: Beating the Slack 3-Second Timeout

Slack's Events API is notoriously strict. When they send a webhook payload, you have exactly 3 seconds to respond with a 200 OK, or Slack assumes your app is dead and retries the event (which leads to duplicate AI calls and chaos).

Because calling the Anthropic API and the Jira API takes way longer than 3 seconds, you cannot await the AI processing in the main thread.

To solve this in Next.js (deployed on Vercel), I used the waitUntil function from @vercel/functions. This allows the serverless function to return the 200 OK immediately to Slack, while keeping the execution environment alive to finish the AI pipeline in the background:

// src/app/api/webhooks/slack/route.ts
import { waitUntil } from '@vercel/functions';
import { NextRequest, NextResponse } from 'next/server';
import { processSlackMessage } from '@/lib/ai/pipeline';

export const POST = async (request: NextRequest): Promise<NextResponse> => {
  // ... verify signatures and parse payload ...

  const event = payload.event;

  if (event.type === 'message') {
    // 1. Queue the heavy AI processing in the background
    waitUntil(
      processSlackMessage({
        teamId: payload.team_id,
        channelId: event.channel,
        userId: event.user,
        messageText: event.text,
        messageTs: event.ts,
      }).catch(console.error)
    );
  }

  // 2. Immediately return 200 OK to satisfy Slack's 3-second rule
  return NextResponse.json({ ok: true });
};

Challenge 2: Stopping the AI from Hallucinating Tasks

The scariest part of this build was the idea of an AI accidentally closing the wrong ticket. If a developer says "I'm going to start working on the header tomorrow", the AI shouldn't close the "Header Redesign" ticket just because the words match.

To fix this, I engineered a highly specific system prompt for Claude 3.5. Instead of just asking "does this match?", I force the LLM to return a strict JSON object with a calculated confidence_score.

I gave Claude very specific scoring guidelines:

// src/lib/ai/prompts.ts
const SYSTEM_PROMPT = `You are NudgeBot's task-matching engine. Given a Slack message and a list of the sender's open tasks, determine whether the message indicates that one or more tasks have been completed.

Return ONLY valid JSON in this exact shape:
{
  "matches": [
    {
      "task_id": "<uuid>",
      "confidence_score": <0.0–1.0>,
      "reasoning": "<1–2 sentences>"
    }
  ]
}

Scoring guidelines:
  0.95–1.00  Explicit: "finished X", "deployed X", PR merged for X
  0.80–0.94  Strong: past-tense action verbs ("shipped", "pushed") + context
  0.65–0.79  Moderate: implicit completion language, partial name overlap
  0.50–0.64  Weak: tangentially related, ambiguous phrasing

Rules:
- Past tense, "just", "finally", deployment language are positive signals.
- Questions, future tense ("will", "going to"), and negations ("not done") are NOT completions.
- Return empty matches if nothing matches above 0.50.`;

In the backend pipeline, if Claude returns a score of 0.95 or higher, the app automatically closes the ticket. If it's between 0.70 and 0.94, the bot sends an ephemeral (private) message to the user in Slack with a button asking: "Looks like you finished the Auth Bug. Should I close the ticket for you?"

The "Trust" Feature (Audit Trails)

If you automate project management, your PMs will eventually get paranoid about why things are moving.

Whenever the bot closes a ticket, it makes a secondary API call to Jira/Linear to leave a comment on the ticket: ✅ Marked as done by NudgeBot based on a Slack update from @Aditya: "Finally squashed that weird auth bug."

Complete transparency, zero extra clicks.

Don't want to build it yourself?

Building this was a super fun weekend project, but managing OAuth flows for Slack, Jira, Linear, Asana, and Trello is a massive headache.

Because we are developers and we appreciate not reinventing the wheel, I actually packaged this exact codebase into a 1-click installable SaaS.

If you want to stop your PMs from nagging you, you can invite the bot to your workspace and use it for free here: NudgeBot.xyz.

Let me know in the comments if you'd trust an AI to manage your project board!

[Boost]

Phantasm0009 — Mon, 16 Mar 2026 12:36:36 +0000

I wasted 200+ hours parsing client CSVs. So I built a library that does it in one line.

Phantasm0009 ・ Mar 16

#python #datascience #opensource #productivity

I wasted 200+ hours parsing client CSVs. So I built a library that does it in one line.

Phantasm0009 — Mon, 16 Mar 2026 12:34:34 +0000

Every data person has the same nightmare.

German client sends a CSV with semicolons, DD.MM.YYYY dates, and European number formatting. French client sends commas with DD/MM/YYYY. US client sends MM/DD/YYYY. You open each one with pandas.read_csv() and it silently corrupts all three.

I spent two years writing the same "detect encoding, guess delimiter, figure out date format" code for every new client. Last month I finally snapped and built a library.

The problem

Here's a typical European export file:

Kunden-Nr;Name;Datum;Umsatz;Aktiv
00742;Müller GmbH;01.03.2025;1.234,56;Ja
00123;Schäfer AG;15.07.2024;789,00;Nein
00456;Böhm & Co;25.12.2024;12.345,67;Ja

Semicolons as delimiters. Dots in dates. Commas as decimal separators. Leading zeros in IDs. Ja/Nein instead of True/False.

Watch what pandas does to it:

>>> import pandas as pd
>>> df = pd.read_csv("german_export.csv")
>>> print(df)
                                Kunden-Nr;Name;Datum;Umsatz;Aktiv
00742;Müller GmbH;01.03.2025;1.234                         56;Ja
00123;Schäfer AG;15.07.2024;789                          00;Nein
00456;Böhm & Co;25.12.2024;12.345                          67;Ja

One giant mangled column. Pandas assumed commas, so the semicolons became part of the values. The European decimal comma in 1.234,56 split the number across columns. Every single row is corrupted.

You can fix this. Pass sep=";". Pass dtype=str for the ID column. Write a custom date parser. Replace commas in numbers. Map Ja to True.

That's 15 lines of boilerplate. Per file. Per client. Per locale.

The solution

>>> import csvmedic
>>> df = csvmedic.read("german_export.csv")
>>> print(df)
  Kunden-Nr         Name      Datum    Umsatz  Aktiv
0     00742  Müller GmbH 2025-03-01   1234.56   True
1     00123   Schäfer AG 2024-07-15    789.00  False
2     00456    Böhm & Co 2024-12-25  12345.67   True

One line. csvmedic auto-detected the semicolon delimiter, parsed DD.MM.YYYY dates correctly, normalized European numbers, preserved leading zeros as strings, and converted Ja/Nein to booleans.

Every decision is logged:

>>> print(df.diagnosis)
csvmedic Diagnosis (0.17s)
  Encoding: utf_8 (confidence: 62%)
  Delimiter: ';'
  Shape: 3 rows × 5 columns

  — Kunden-Nr: string (confidence: 100%, preserved)
      reason: leading_zeros_detected
  · Name: string (confidence: 100%, skipped)
  ✓ Datum: date (confidence: 100%, converted)
      format_detected: %d.%m.%Y
      dayfirst: True
      ambiguous_count: 1
      unambiguous_count: 2
  ✓ Umsatz: float (confidence: 100%, converted)
      locale_detected: de_DE
      decimal_separator: ,
      thousands_separator: .
  ✓ Aktiv: boolean (confidence: 100%, converted)
      true_variants: ['ja']
      false_variants: ['nein']

No silent corruption. Every transformation visible and auditable. The — means preserved as string (leading zeros detected), · means skipped (already a clean string), and ✓ means successfully converted.

The hard part: DD/MM vs MM/DD

Encoding and delimiter detection are solved problems. The genuinely hard part — and the reason I built this — is date disambiguation.

When you see 03/04/2025, is that March 4 or April 3? There's no way to know from a single value. And pandas just guesses (or gives up and leaves it as a string).

csvmedic doesn't guess. It uses the data itself.

The core insight: you don't need every value to be unambiguous. You need one. If a column contains 03/04/2025, 05/06/2025, and 25/03/2025, that last value has a first component of 25. Since 25 > 12, it can't be a month. So the first component must be the day. One unambiguous value resolves the entire column.

You can see this in the diagnosis output above: ambiguous_count: 1 (the value 01.03.2025 where both 01 and 03 could be day or month) and unambiguous_count: 2 (the values where the day component was > 12, which locked in the format for the whole column).

When there's no single unambiguous value (every date has both components ≤ 12), csvmedic falls through a chain of strategies: cross-column inference (if another date column in the same file was already resolved, assume the same locale), separator hints (dot separator like 01.03.2025 is strongly associated with European day-first formats), and sequential monotonicity (try both orderings and see which produces sorted dates).

If none of these produce a confident answer, csvmedic doesn't guess. It leaves the column as a string and flags it as ambiguous in the diagnosis. Silent corruption is worse than no conversion.

Proving it: csvmedic.diff()

If you're skeptical (you should be), csvmedic has a built-in proof tool:

>>> result = csvmedic.diff("leading_zeros.csv")
>>> print(result.summary())
csvmedic.diff() — pandas vs csvmedic
  File: leading_zeros.csv
  Shape: pandas (3, 4) vs csvmedic (3, 4)
  Columns with value differences: ['product_id', 'zip_code']
  Sample value differences (row, column, pandas, csvmedic):
    (0, 'product_id'): np.int64(742) vs '00742'
    (1, 'product_id'): np.int64(123) vs '00123'
    (2, 'product_id'): np.int64(456) vs '00456'
    (0, 'zip_code'): np.int64(1234) vs '01234'
    (1, 'zip_code'): np.int64(90210) vs '90210'

Pandas converted 00742 to 742, 01234 to 1234. Those are customer IDs and zip codes — they're not numbers, they're strings that happen to contain digits. csvmedic detects the leading zeros and preserves them.

This is the output you show your team lead when they ask "why do we need another dependency?"

Schema pinning for recurring files

Most real-world data work involves the same file format every month. csvmedic lets you save the detected schema and reuse it:

# First time: detect everything
df = csvmedic.read("monthly_export.csv")
csvmedic.save_schema(
    df.attrs["diagnosis"].file_profile,
    "monthly_export.csvmedic.json"
)

# Every time after: skip detection, apply cached schema
df = csvmedic.read("monthly_export.csv", schema="monthly_export.csvmedic.json")

The schema file is plain JSON — you can commit it to your repo, review it in PRs, and share it across your team.

Batch reads with consensus

When you're reading 12 monthly CSVs that should all have the same format, use consensus mode:

dfs = csvmedic.read_batch(
    ["jan.csv", "feb.csv", "mar.csv"],
    use_consensus=True
)

csvmedic samples each file, runs encoding and delimiter detection on all of them, and uses the majority result for every file. If 11 out of 12 files are UTF-8 with semicolons and one is mislabeled, consensus wins.

What it doesn't do

csvmedic is not trying to be a data cleaning framework. It does exactly one thing: get a messy CSV into a clean DataFrame with correct types. It doesn't clean column names, remove duplicates, or handle missing value imputation. It's the first line of your pipeline, not the whole pipeline.

Technical decisions

A few choices that might matter to you:

Everything is read as dtype=str first. csvmedic never lets pandas do type inference. It reads everything as strings, runs its own detection, and then applies conversions explicitly. This is the only way to prevent silent data loss (like leading zeros).

No dateutil.parser. It's too permissive (it'll parse "hello" as today's date) and too slow for batch column analysis. csvmedic uses strptime with explicit format strings — 50-100x faster.

Confidence thresholds. Every detection has a confidence score from 0 to 1. Below 0.75 (configurable), the column stays as a string. You can tighten this to 0.9 if you want csvmedic to be more conservative, or loosen it to 0.6 if you trust the heuristics.

Try it

pip install csvmedic

import csvmedic

df = csvmedic.read("your_messy_file.csv")
print(df.diagnosis)

Links:

PyPI: pypi.org/project/csvmedic
GitHub: github.com/Phantasm0009/CSVMedic

MIT licensed. Pure Python. Two dependencies (pandas + charset-normalizer).

I'd love feedback — especially on edge cases that the date disambiguation misses. Open an issue or drop a comment here.

[Boost]

Phantasm0009 — Mon, 02 Mar 2026 18:49:03 +0000

Building a WebGPU Library from Scratch

Phantasm0009 ・ Mar 2

#webdev #javascript #programming #showdev

Building a WebGPU Library from Scratch

Phantasm0009 — Mon, 02 Mar 2026 18:33:51 +0000

I wanted a NumPy-like API that ran on the GPU in the browser. No training graphs, no autograd—just arrays and ops. So I built one.

Why not just use TensorFlow.js?

TensorFlow.js is great, but it's heavy. I needed something small for demos and experiments. I also wanted to understand how GPU compute actually works under the hood. So I started a small library called accel-gpu.

The basics

WebGPU exposes compute shaders via WGSL. You create buffers, write shaders, and dispatch workgroups. The tricky part is making that feel like a.add(b) instead of "create bind group, set pipeline, dispatch, sync."

I went with a simple model: each op has a precompiled WGSL shader. add is a shader that does out[i] = a[i] + b[i]. relu is out[i] = max(0, a[i]). No runtime shader generation, no graph IR—just a map of op names to shader strings.

@compute @workgroup_size(256)
fn main(@builtin(global_invocation_id) gid: vec3<u32>) {
  let i = gid.x;
  if (i < arrayLength(&out)) {
    out[i] = a[i] + b[i];
  }
}

That's the whole add kernel. The runner creates a pipeline from it, binds buffers, and dispatches. For 100k elements, that's ~400 workgroups of 256 threads.

WebGL fallback

WebGPU isn't everywhere yet. Safari and Firefox need WebGL2. So I added a WebGL backend.

WebGL doesn't have compute shaders. The trick is to use a full-screen quad and a fragment shader. You pack floats into RGBA8 (bit manipulation), render to a texture, and unpack. It's a bit hacky, but it works. Each "compute" op becomes a render pass.

Then there's a CPU backend for Node and headless runs. Same API, different implementation. The API stays the same whether you're on WebGPU, WebGL, or CPU.

Shape inference

For matmul, you need M, N, and K. I didn't want users to pass those every time. So the library infers them from array shapes. If A is [2, 3] and B is [3, 4], it knows M=2, N=4, K=3. That's just a bit of shape logic, but it makes the API much nicer.

Reductions are annoying

sum over 1M elements can't fit in one workgroup. You need a multi-pass reduction. Each pass sums pairs, halves the size, and repeats until you have one value. The first version had a bug where I didn't handle non-power-of-two sizes correctly. Took a while to track down.

argmax is worse—you need both value and index. I ended up doing it on the CPU by reading the buffer back. Not ideal for huge arrays, but fine for typical use.

What I'd do differently

Buffer pooling — I added it later. Creating and destroying GPUBuffers every frame was slow. A simple pool helped a lot.
Error handling — Early on, WebGPU errors were cryptic. I added clearer messages ("reshape: cannot reshape [2,3] to [4]"), and that saved a lot of debugging time.
Testing — I test on the CPU backend. Same ops, same results, no GPU setup. Makes CI straightforward.

The fun parts

Softmax was satisfying: max for numerical stability, then exp, then normalize. Layer norm and attention scores followed. FFT was interesting—Cooley-Tukey, bit reversal, butterfly ops. All on the CPU for now, but the API is there.

Conv2D and pooling are implemented on the CPU as well. They work, but a real GPU implementation would need proper 2D/3D dispatch and more thought about memory layout.

Is it worth it?

For learning, yes. I understand WebGPU and WGSL much better now. For production, it depends. If you need a small, dependency-free GPU math lib, it might fit. If you need full training, use TensorFlow.js or a similar library.

The repo is accel-gpu on GitHub if you want to poke around. The shaders live in src/kernels/shaders.ts.

Looking to partner with a chrome extension partner.

Phantasm0009 — Tue, 20 Jun 2023 18:33:20 +0000

Introducing the perfect collaboration: CodeCrafter and "your chrome extension"! Unite the power of two innovative extensions to supercharge your coding experience. Seamlessly integrate "your Chrome extension's" unique features with CodeCrafter's robust code snippet management capabilities. Together, we're revolutionizing the way developers work, bringing efficiency and productivity to the forefront. Discover the synergy of CodeCrafter and "your Chrome extension", and unlock a whole new level of coding awesomeness.

In short we want to partner with a another chrome extension so we can reach people to install our chrome extension. Our chrome extension(which is also featured) - https://chrome.google.com/webstore/detail/codecrafter/mllegkfjonhcfpbkhokboibclmkibdfl

How to Build a Chatbot using Natural Language Processing (NLP)

Phantasm0009 — Mon, 20 Feb 2023 18:59:39 +0000

How to Build a Chatbot using Natural Language Processing (NLP)

Chatbots have become increasingly popular in recent years, and with good reason. A chatbot is a computer program that is capable of simulating human conversation, and they can be used for a wide range of purposes, from providing customer support to delivering news updates.

One of the key technologies that enables chatbots to simulate human conversation is Natural Language Processing (NLP). NLP is a field of study that focuses on the interactions between human language and computers. By using NLP, chatbots can understand and interpret user inputs, and generate appropriate responses.

In this article, we will explore how to build a chatbot using NLP. We will cover the following steps:

Define your chatbot's purpose.
Choose your NLP framework.
Define your chatbot's intents.
Train your chatbot.
Implement your chatbot's responses.
Test your chatbot.

Step 1: Define Your Chatbot's Purpose

Before you start building your chatbot, you need to define its purpose. What problem will it solve? What tasks will it perform? What kind of user will it interact with? Defining your chatbot's purpose will help you to design its conversation flow and choose the appropriate NLP framework.

Here are a few examples of chatbot purposes:

Customer support: A chatbot that can help customers troubleshoot issues with a product or service.
Sales assistant: A chatbot that can help customers find products or services that meet their needs.
Personal assistant: A chatbot that can help users manage their schedules, set reminders, and perform other tasks.
News bot: A chatbot that can deliver news updates and other information to users.

Step 2: Choose Your NLP Framework

Once you have defined your chatbot's purpose, the next step is to choose your NLP framework. There are several NLP frameworks available, each with its own strengths and weaknesses.

Here are a few popular NLP frameworks:

Dialogflow: A Google-owned platform that allows developers to build conversational interfaces for websites, mobile applications, and messaging platforms.
Microsoft Bot Framework: A framework for building intelligent bots that can be deployed across multiple platforms, including Skype, Slack, and Facebook Messenger.
IBM Watson Assistant: A cloud-based platform that allows developers to build and deploy chatbots across multiple channels.

Step 3: Define Your Chatbot's Intents

Once you have chosen your NLP framework, the next step is to define your chatbot's intents. An intent is a specific goal or action that the user wants to achieve through their conversation with the chatbot. Defining your chatbot's intents will help you to design its conversation flow and train it to understand user inputs.

Here are a few examples of chatbot intents:

Get weather information: A chatbot that can provide users with current weather information for a specific location.
Book a hotel room: A chatbot that can help users book a hotel room based on their preferences.
Order food: A chatbot that can help users order food from a restaurant.

Step 4: Train Your Chatbot

Once you have defined your chatbot's intents, the next step is to train it. Training involves providing examples of user inputs and the corresponding intents that the chatbot should recognize. The more examples you provide, the more accurate your chatbot will become.

Here's an example of how to train a chatbot in Dialogflow:

Open the Dialogflow console and select your chatbot.
In the intents tab, create a new intent.
Define the intent's name and training phrases
Provide examples of user inputs that correspond to the intent.
Train the chatbot by saving the intent.

Repeat this process for each of your chatbot's intents.

Step 6: Test Your Chatbot

Once your chatbot is implemented, the final step is to test it. Testing involves interacting with the chatbot and making sure that it can understand user inputs and provide appropriate responses.

Here are a few tips for testing your chatbot:

Start with simple inputs and gradually increase complexity.
Test the chatbot on different devices and platforms.
Get feedback from users and use it to improve your chatbot's performance.

Conclusion

Building a chatbot using NLP can be a complex process, but it can also be very rewarding. By following the steps outlined in this article, you can build a chatbot that is capable of simulating human conversation and performing a wide range of tasks. Whether you are building a chatbot for customer support, sales, or personal assistance, NLP can help you to create a more engaging and effective user experience.

6 Tips for Writing Cleaner and More Maintainable JavaScript Code

Phantasm0009 — Sun, 19 Feb 2023 19:46:26 +0000

6 Tips for Writing Cleaner and More Maintainable JavaScript Code

As JavaScript continues to grow in popularity, it's becoming increasingly important to write clean and maintainable code. Writing clean code not only makes it easier to read and understand but also reduces the risk of introducing bugs and makes it easier to maintain and update code in the future. In this post, we'll cover 6 tips for writing cleaner and more maintainable JavaScript code.

1. Use Meaningful Variable Names

Using meaningful variable names is essential to writing clean and maintainable code. It helps to make the code more readable and self-documenting. When choosing variable names, it's important to use names that accurately describe the purpose of the variable.

// Bad example
const x = 10;
const y = 20;
const z = x + y;

// Good example
const width = 10;
const height = 20;
const area = width * height;

2.Use Constants for Values That Don't Change

When a value won't change throughout the life of a program, it's best to use a constant instead of a variable. This helps to make the code more readable and ensures that the value doesn't
accidentally get changed later in the program.

// Bad example
let pi = 3.14159;
pi = 3.14;

// Good example
const PI = 3.14159;

3. Avoid Magic Numbers

Magic numbers are hard-coded values that have no explanation or context. They make the code difficult to read and understand. Instead of using magic numbers, use constants with descriptive names.

// Bad example
function calculateArea(radius) {
  return Math.PI * radius * radius;
}

// Good example
const PI = 3.14159;
function calculateArea(radius) {
  return PI * radius * radius;
}

4. Use Functions to Reduce Code Duplication

Code duplication can make code harder to maintain and update. Instead of duplicating code, create functions that can be reused throughout the program.

// Bad example
const width = 10;
const height = 20;
const area = width * height;
const perimeter = 2 * (width + height);

// Good example

function rectangleArea(width, height) {
  return width * height;
}

function rectanglePerimeter(width, height) {
  return 2 * (width + height);
}

const width = 10;
const height = 20;
const area = rectangleArea(width, height);
const perimeter = rectanglePerimeter(width, height);

5. Use Arrow Functions for Concise Code

Arrow functions provide a more concise syntax for defining functions. They also help to reduce the amount of code that needs to be written.

// Bad example
const add = function(x, y) {
  return x + y;
}

// Good example
const add = (x, y) => x + y;

6. Use Template Literals for String Concatenation

Template literals provide a more concise and readable way to concatenate strings.

// Bad example
const firstName = 'John';
const lastName = 'Doe';
const fullName = firstName + ' ' + lastName;

// Good example
const firstName = 'John';
const lastName = 'Doe';
const fullName = `${firstName} ${lastName}`;

Exploring the Benefits and Drawbacks of Serverless Computing

Phantasm0009 — Sun, 19 Feb 2023 19:38:50 +0000

Exploring the Benefits and Drawbacks of Serverless Computing

Serverless computing is a cloud computing model where the cloud provider manages the server infrastructure and automatically allocates resources as needed. In this model, the user does not need to manage or maintain any servers or infrastructure. In this article, we will explore the benefits and drawbacks of serverless computing.

Benefits of Serverless Computing

Scalability

One of the primary benefits of serverless computing is scalability. Serverless applications can handle a sudden spike in traffic without any need for manual intervention. The cloud provider automatically allocates resources based on the application's needs, allowing the application to scale up or down quickly.

Cost-effective

Serverless computing is also cost-effective. In the traditional model, the user needs to pay for the servers regardless of whether the servers are used or not. In serverless computing, the user only pays for the resources used during the execution of the application. This pay-as-you-go model reduces costs and makes serverless computing an attractive option for small and large businesses alike.

Reduced Maintenance

Serverless computing eliminates the need for server maintenance, which saves time and effort. The cloud provider takes care of all the server management, including updates, patches, and security. This frees up the user's time to focus on other tasks.

Faster Development

Serverless computing can speed up application development. Developers can focus on writing code rather than managing servers and infrastructure. The cloud provider handles all the backend tasks, such as scaling and resource allocation, allowing developers to concentrate on building applications.

Drawbacks of Serverless Computing

Cold Start

One of the drawbacks of serverless computing is the cold start problem. When a serverless function is triggered for the first time, the cloud provider needs to allocate resources to execute the function, which can cause a delay. This delay is called a cold start, and it can affect the performance of the application.

Limited Control

Serverless computing reduces the user's control over the infrastructure. Since the cloud provider manages the infrastructure, the user cannot customize the server environment as they would in a traditional model. This limited control can be a disadvantage for certain applications that require specific server configurations.

Debugging

Debugging serverless applications can be challenging. In a traditional model, the user can log in to the server and debug the application. In serverless computing, the user needs to rely on logs and metrics provided by the cloud provider. This can make debugging more difficult.

Vendor Lock-in

Serverless computing can also result in vendor lock-in. Since the user relies on the cloud provider to manage the infrastructure, it can be challenging to switch to a different provider. This can be a disadvantage if the cloud provider experiences downtime or if the user wants to switch to a provider with better features or pricing.

Conclusion

Serverless computing has many benefits, including scalability, cost-effectiveness, reduced maintenance, and faster development. However, there are also drawbacks to consider, such as the cold start problem, limited control, debugging challenges, and vendor lock-in. When deciding whether to adopt serverless computing, it is essential to weigh the benefits and drawbacks carefully and consider the specific needs of the application.

Here's an example of how you can implement a serverless function using AWS Lambda in Python:

import json

def lambda_handler(event, context):
    # handle event
    return {
        'statusCode': 200,
        'body': json.dumps('Hello, World!')
    }

This function returns a JSON response with a 'Hello, World!' message. You can deploy this function on AWS Lambda and trigger it using an API Gateway or an event source.

I hope this article helps you understand the benefits and drawbacks of serverless computing and how it can be used to build scalable and cost-effective applications in the cloud.

How to record videos with puppeter

Phantasm0009 — Mon, 05 Dec 2022 20:40:32 +0000

        <p>I gathered everything you need to know about how to record videos with Puppeteer in one place. Enjoy!</p>

A quickstart

To generate a video with Puppeteer for page, we are going to use the puppeteer-screen-recorder library:

npm i puppeteer-screen-recorder

Enter fullscreen mode



Exit fullscreen mode

Let's start with a simple example by generating a video for loading the landing page of Tailwind CSS and opening their pricing page:

'use strict';

const puppeteer = require('puppeteer');
const { PuppeteerScreenRecorder } = require('puppeteer-screen-recorder');

(async () => {
    const browser = await puppeteer.launch();
    try {
        const page = await browser.newPage();
        await page.setViewport({ width: 1920, height: 1080, deviceScaleFactor: 2 });

        const recorder = new PuppeteerScreenRecorder(page);

        await page.goto('https://tailwindcss.com/');

        await recorder.start('video.mp4');
        await animate(page);
        await recorder.stop();
    } catch (e) {
        console.log(e)
    } finally {
        await browser.close();
    }
})();

const animate = async (page) => {
    await wait(500);
    await page.evaluate(() => { window.scrollBy({ top: 500, left: 0, behavior: 'smooth' }); });
    await wait(500);
    await page.evaluate(() => { window.scrollBy({ top: 1000, left: 0, behavior: 'smooth' }); });
    await wait(1000);
};

const wait = (ms) => new Promise(res => setTimeout(res, ms));

Enter fullscreen mode



Exit fullscreen mode

I added a simple one-time scroll to make the video interactive. Look at the result, how beautiful it is:

GIF

It is not an MP4 video, but GIF for demonstration because dev.to doesn't support direct upload of videos.

You can generate videos in AVI, MP4, MOV, or WebM formats. You can use WebM format if you target the latest versions of modern browsers, but not everyone supports it.

If you need to generate GIF (an image format, not video) for animated screenshots, you can use the FFmpeg library to convert MP4 to GIF. Make sure it is installed locally. And then you can upgrade your script to generate GIFs on demand:

'use strict';

const puppeteer = require('puppeteer');
const { PuppeteerScreenRecorder } = require('puppeteer-screen-recorder');
const util = require('util');
const exec = util.promisify(require('child_process').exec);

(async () => {
    const browser = await puppeteer.launch();
    try {
        const page = await browser.newPage();
        await page.setViewport({ width: 1920, height: 1080, deviceScaleFactor: 2 });

        const recorder = new PuppeteerScreenRecorder(page);

        await page.goto('https://tailwindcss.com/');

        await recorder.start('video.mp4');
        await animate(page);
        await recorder.stop();

        await exec("ffmpeg -i video.mp4 -qscale 0 animated.gif");
    } catch (e) {
        console.log(e)
    } finally {
        await browser.close();
    }
})();

const animate = async (page) => {
    await wait(500);
    await page.evaluate(() => { window.scrollBy({ top: 500, left: 0, behavior: 'smooth' }); });
    await wait(500);
    await page.evaluate(() => { window.scrollBy({ top: 1000, left: 0, behavior: 'smooth' }); });
    await wait(1000);
};

const wait = (ms) => new Promise(res => setTimeout(res, ms));

Enter fullscreen mode



Exit fullscreen mode

Imagine how far you can go with animating screenshots. You can record movies and generate interactive mockups. It opens a new level of marketing for you. It is also a new level of debugging and generating reports for developers and QA automation engineers.

Use cases

Improve your marketing with animated screenshots

You can generate scrollable screenshots of the sites and apply them in many areas of your marketing:

send personalized emails with animated screenshots of the lead site;
place screenshots of parts of your site on your landing page;
make your blog posts interactive with scrollable preview screenshots of the sites you share;
And many more.

Debug

In complex cases, if you run Puppetteer at production, you might want to debug what happens and record a video.

Imagine you scrape a site with a complex scenario by navigating through many pages. Something happens, and the script fails to scrape one of the pages.

Of course, the best way to debug is to reproduce the error locally, but if your environments are different, you can record a video of what happens in the script and review them.

But please, always synchronize your environments and ensure they are identical.

Automate testing reports

One of the most beautiful use cases, for me, is to generate a video on how automated tests are executed and then, if the test fails, attach videos to the report.
It might shorten communication time between the QA team and developers and improve the overall R&D velocity.

Interactive mockups and programmatic movies

You can write simple scripts to make your site interactive. Scroll through it. And record the footage with Puppeteer.

And even more. You can generate cartoons and movies by using JavaScript and CSS! Only your imagination is the limit.

Use API to save time and energy

If you don't have time to implement and generate animated screenshots and deal with video streaming infrastructure, you can rely on ScreenshotOne API.

It supports animated (including scrollable) screenshots of different types, caching based on the world's fastest and most potent CDN (Cloudflare) and blocking ads, cookie banners, and chats.

In just one API request, you can quickly generate animated screenshots. And if you need more, a variety of options and use cases are covered.

Grasp how simple it is:

https://api.screenshotone.com/animate?url=https://tailwindcss.com&access_key=<your access key>

Enter fullscreen mode



Exit fullscreen mode

The result might differ a bit in case default options are changed, but as for now, it is similar to what I have shown in the video.

And the result is the same:

GIF

Summary

Don't waste your time and jump on an opportunity. Level up your marketing and improve your R&D communication.

      </div>

    </div>