When you have python ready, open your terminal app or the command line as administrator.
Search for terminal or cmd in the search menu, right click the app and select open as administrator.

Install huggingface by typing in “pip install -U "huggingface_hub[cli]"

If the installer says something like “Defaulting to user installation because normal site-packages is not writeable“ then you are in normal mode for the terminal, and not using it as an administrator.

(some also have success by making creating a virtual enviroment for their python project with “python -m venv .env”)

After the huggingface cli is installed, then you have to add the path to the installed files to your PATH variables.

If you dont add the installpath to the PATH then you often get this error:
“'huggingface-cli' is not recognized as an internal or external command, operable program or batch file.”

The programs were installed in this location:

“C:\Users\%username%\AppData\Roaming\Python\Python313\Scripts\“

You have to find your real username first, go to “c:\users” and look what users you have created in your windows installation.

Then right click the start menu icon and choose “System”, then look for “Advanced system settings”
Then click “Environment Variables”
At the bottom part locate the “path” in the list and click edit.

Choose “new” and enter “C:\Users\your_username_here\AppData\Roaming\Python\Python313\Scripts\”
make sure to put in your own username.

Restart windows to make sure that the setting is applied.

After the reboot you can open your terminal or cmd app and type in “huggingface-cli —help” and you should see something like the article image as the response.

I’m still on the free plan for Cloudinary, and I have gotten some extra credits from them for retweeting and doing some other small advertising tasks for them.

Its kind of hard to figure out exactly how much usage you can get from the free tier, but these are my calculations:

How much can Cloudinary free tier serve with the 25 credit quota:

5000 images à 2MB (10GB of quota) +
5000 transformations (5 of quota) +
150.000 requests à 70Kb (10 of quota)

If this is month 1, then on month 2 expecting the same amount of transformations and request you would not be able to upload any more images.

But with these numbers I would still be safe on the free plan for the foreseeable future.

ImageKit are kind of similar to Cloudinary and also has a quota based plan system. On their free plan you get:

25GB requests bandwidth
5GB image storage quota
Unlimited transformations

And with the following amount of images and traffic you would exceed the quota for a month: 2500 images à 2MB (5GB)

375.000 requests à 70Kb (25GB of quota)

So with both these services you would be hard limited by the amount of uploaded images. Not so much by the transformations and traffic.

A new actor in this field is Cloudflare, they advertise with 5000 free transformations each month, but they downplay that they charge for all traffic. So as far as I can see you wont be on a total free plan with them.

And the last provider I considered turned out the be the cheapest by far, not surprising since I guess both Cloudinary and ImageKit bases their platforms on top of AWS.

The pricing of AWS is always tricky to figure out, but I made an attempt at it, where I tried to compare all these 4 services like for like.

Cost calculations premise of the paid versions:

100.000 original images, average size 400Kb - 40GB
20% of the library is renewed every month
1 million image requests per month, average size 22Kb - 22GB

So you can see that with these calculations AWS would be 10x cheaper than both Cloudinary and ImageKit, but both these have quite a bit more room in their quotas.

Cloudflare is also a good choice, and it is significantly easier to use than AWS because with AWS you have to setup all the infrastructure yourself. There are good guides for this, but its definitely not for everyone.

Cloudinary offers a good website with a backend for viewing and managing your images, so thats lacking from Cloudflare as far as I can tell.

And both Cloudinary and ImageKit handles videos out of the box, so thats something to consider if you rely on video support.

I also tried calculating the cost of the Cloudinary free tier if hosted on AWS:

Storing of the images in 2 S3 buckets: (5000 images x 2000 Kb + 5000 images x 70 Kb) / 1024 / 1024 x 0.023 = 0.22$

Transforming: seems to be 0.37$

So a total of $0.59 per month.

Some other comparisons between the four providers:

AWS and Cloudinary both support these common filetypes: PNG, GIF, JPEG, WebP, HEIC, AVIF, SVG. As well as some animated versions of the same.

While Cloudflare doesnt support HEIC and AVIF, and ImageKit doesnt support HEIC (the apple format)

After all this calculating I decided to make it into a webpage so others can calculate this for themselves. I also added more providers, and more calculators for other SaaS stuff aswell. You can find the best prices for PostgreSQL databases, transactional email, web analytics and authentication providers.

Go to https://saasprices.net/images to see the calculator

Why Sentry?

• Real-time error tracking: Get instant notifications when errors occur

• Detailed error context: Capture stack traces, user information, and environment data

• Issue grouping: Similar errors are automatically grouped for easier debugging

• Performance monitoring: Track application performance alongside errors

• Cross-platform support: Works with multiple frameworks and languages

Getting Started

1. Installation

First, install the Sentry SDK in your JavaScript project:

# Using npm
npm install @sentry/browser

# Using yarn
yarn add @sentry/browser

2. Basic Configuration

Initialize Sentry as early as possible in your application:

import * as Sentry from "@sentry/browser";

Sentry.init({
  dsn: "your-dsn-here",
  // Set tracesSampleRate to 1.0 to capture 100% of transactions
  tracesSampleRate: 1.0,
  environment: process.env.NODE_ENV
});

3. Capturing Errors

Automatic Error Capturing

Once initialized, Sentry automatically captures unhandled exceptions and promise rejections:

// This error will be automatically captured
throw new Error("This is an example error");

Manual Error Capturing

For more control, you can manually capture errors:

try {
  someRiskyOperation();
} catch (error) {
  Sentry.captureException(error);
}

// Or capture a custom message
Sentry.captureMessage("Something went wrong", "error");

4. Adding Context

Make your error reports more useful by adding extra context:

// Add user context
Sentry.setUser({
  id: "123",
  email: "user@example.com",
  username: "johnDoe"
});

// Add tags for better filtering
Sentry.setTag("page_locale", "de-at");

// Add extra context
Sentry.setExtra("character_count", 5);

5. Custom Error Breadcrumbs

Breadcrumbs help you understand what happened before an error:

Sentry.addBreadcrumb({
  category: "auth",
  message: "Attempting user login",
  level: "info"
});

Best Practices

1. Filter Sensitive Data

Sentry.init({
  dsn: "your-dsn-here",
  beforeSend(event) {
    // Don't send passwords or personal info
    if (event.request?.headers?.["Authorization"]) {
      delete event.request.headers["Authorization"];
    }
    return event;
  }
});

2. Set Release Information

Sentry.init({
  dsn: "your-dsn-here",
  release: "my-app@1.0.0",
  environment: process.env.NODE_ENV
});

3. Configure Error Sampling

Sentry.init({
  dsn: "your-dsn-here",
  sampleRate: 0.5 // Only send 50% of errors
});

Framework-Specific Integration

React

import * as Sentry from "@sentry/react";

// Error boundary component
const FallbackComponent = () => <div>An error has occurred</div>;

export default Sentry.withErrorBoundary(YourComponent, {
  fallback: FallbackComponent
});

Vue

import * as Sentry from "@sentry/vue";

Sentry.init({
  Vue,
  dsn: "your-dsn-here"
});

Conclusion

Implementing Sentry in your JavaScript application is a crucial step toward maintaining a reliable production environment. With its powerful features and easy integration, you can quickly start capturing and analyzing errors to improve your application's stability.

Remember to:

• Initialize Sentry as early as possible in your application

• Add relevant context to your error reports

• Configure error sampling based on your needs

• Filter out sensitive information

• Use framework-specific integrations when available

By following these guidelines, you'll have a robust error tracking system that helps you identify and fix issues before they impact your users.

Setting Up PostHog

First, install the PostHog Node.js library:

npm install posthog-node
# or
yarn add posthog-node

Initializing PostHog

Initialize PostHog with your project API key:

const { PostHog } = require('posthog-node')

const client = new PostHog(
    'phc_YOUR_API_KEY',
    { 
        host: 'https://app.posthog.com' // Optional: Use your self-hosted instance URL if applicable
    }
)

Capturing Basic Events

The simplest way to capture an event is using the capture method:

client.capture({
    distinctId: 'user_123',
    event: 'subscription_created',
    properties: {
        planType: 'premium',
        billingInterval: 'monthly',
        amount: 29.99
    }
})

Best Practices for Backend Events

1. Consistent Event Naming

Use a consistent naming convention for your events. A common pattern is:

• Noun_Verb for state changes: subscription_created, payment_failed

• Verb_Noun for actions: generate_report, send_notification

2. Rich Properties

Include relevant properties that will be useful for analysis:

client.capture({
    distinctId: 'user_123',
    event: 'api_request_completed',
    properties: {
        endpoint: '/api/v1/users',
        method: 'POST',
        responseTimeMs: 235,
        statusCode: 200,
        userAgent: req.headers['user-agent'],
        ipAddress: req.ip
    }
})

3. Batch Processing

For high-volume events, use batch capturing to improve performance:

const events = [
    {
        distinctId: 'user_123',
        event: 'item_purchased',
        properties: { itemId: '456', price: 29.99 }
    },
    {
        distinctId: 'user_123',
        event: 'checkout_completed',
        properties: { total: 29.99, itemsCount: 1 }
    }
]

await client.batchCapture(events)

Advanced Features

1. Feature Flags

You can evaluate feature flags in your backend code:

const flagEnabled = await client.isFeatureEnabled('new_billing_flow', 'user_123')
if (flagEnabled) {
    // Roll out new billing logic
}

2. Group Analytics

Track events at an organization level:

// Identify a group
await client.groupIdentify({
    groupType: 'company',
    groupKey: 'company_123',
    properties: {
        name: 'Acme Corp',
        industry: 'Technology',
        employeeCount: 500
    }
})

// Capture event with group information
await client.capture({
    distinctId: 'user_123',
    event: 'project_created',
    properties: { projectName: 'New Project' },
    groups: { company: 'company_123' }
})

3. Error Handling

Implement robust error handling to prevent event capture failures from affecting your application:

try {
    await client.capture({
        distinctId: 'user_123',
        event: 'important_action',
        properties: { key: 'value' }
    })
} catch (error) {
    console.error('Failed to capture PostHog event:', error)
    // Consider adding to a retry queue
}

Common Patterns and Use Cases

Here are some typical backend events you might want to track:

1. Authentication Events

await client.capture({
    distinctId: 'user_123',
    event: 'login_attempted',
    properties: {
        method: 'password',
        success: true,
        userAgent: req.headers['user-agent'],
        ipAddress: req.ip
    }
})

2. Background Job Events

await client.capture({
    distinctId: 'system',
    event: 'scheduled_job_completed',
    properties: {
        jobName: 'daily_report_generation',
        durationSeconds: 145,
        recordsProcessed: 1000,
        success: true
    }
})

3. API Usage Events

await client.capture({
    distinctId: 'user_123',
    event: 'api_key_generated',
    properties: {
        keyType: 'read_only',
        expirationDays: 30,
        permissions: ['read_users', 'read_projects']
    }
})

Shutdown

When your application is shutting down, make sure to close the PostHog client to ensure all events are sent:

await client.shutdown()

Using with Express.js

Here's an example of integrating PostHog with an Express.js middleware:

const express = require('express')
const app = express()

// Middleware to track API requests
app.use(async (req, res, next) => {
    const startTime = Date.now()

    // Continue with the request
    next()

    // After the request is completed
    res.on('finish', async () => {
        try {
            await client.capture({
                distinctId: req.user?.id || 'anonymous',
                event: 'api_request',
                properties: {
                    path: req.path,
                    method: req.method,
                    statusCode: res.statusCode,
                    duration: Date.now() - startTime,
                    userAgent: req.headers['user-agent']
                }
            })
        } catch (error) {
            console.error('Failed to capture API request event:', error)
        }
    })
})

Conclusion

Backend event tracking with PostHog in Node.js provides valuable insights into your application's behavior and usage patterns. By following these best practices and patterns, you can build a robust event tracking system that helps you make data-driven decisions about your product.

Remember to:

• Use consistent naming conventions

• Include relevant properties with each event

• Handle errors gracefully

• Use batch processing for high-volume events

• Properly shut down the client when your application terminates

• Leverage advanced features like feature flags and group analytics when appropriate

For more information, check out the PostHog Node.js documentation for detailed API references and additional features.

In my side project I want the users to create products with descriptions, as well as usernames and slugs for urls. I check all of these for profanities or swear words as best as I can.

I found this handy library called “obscenity”, and it already has a large library of forbidden words. This is perfect for this use case and this way I dont have to come up with all the bad words myself!

import {
    RegExpMatcher,
    TextCensor,
    englishDataset,
    englishRecommendedTransformers,
} from 'obscenity'

function badWordsDetector(input: string) {
// the input example is: 'fuck you little bitch'

    const matcher = new RegExpMatcher({
        ...englishDataset.build(),
        ...englishRecommendedTransformers,
    });

    const censor = new TextCensor();
    const matches = matcher.getAllMatches(input);

    return censor.applyTo(input, matches);

    // the censored text then returns: '%@$% you little **%@%'

}

I create a file for the svg, and make it into a JSX component.

export default function FacebookSvg() {
    return (<div>
        <svg ... />
    </div>
    )
}

Simple Icons is a good site for finding brand icons like Facebook. https://simpleicons.org/?q=facebbok

Just search for the brand and click the image to copy the svg code.

We have to do some edits to make this code behave the way I like, such as replacing or adding the height and width properties, and change the kebab-case properties to camelCase so it works for React.

// add width and height
<svg
width="100%"
height="100%"
...
/>

Setting the width and height to 100% makes you able to scale the svg by setting a size on the wrapping container in HTML.

<div style="width: 30px; height: 30px;">
    <FacebookSVG />
</div>

// replace kebab-case with camelCase
clip-path becomes clipPath
xlink:type becomes xlinkType
etc

The icons from Simple Icons all have white color, but if you want to set another color you can pass that as a prop to the SVG

export default function FacebookSvg(fillColor: string ) {
    return (
        <svg 
            height="100%"
            width="100%"
            role="img"
            viewBox="0 0 24 24" 
            xmlns="http://www.w3.org/2000/svg">
            <title>Facebook</title>
            <path 
                fill={fillColor}
                // or do: fill="currentColor"
                d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"/>
            </svg>)
}

My customers can create QR codes to link back to their profiles, embedding the image in their SoMe posts or videos.

The project is made in next.js so I went for the react-qr-code library.

You just have to give the QRCode component a string value with the info for the QR code, and most of the props are optional.

But you can change the colors, size and complexity for the QR code.
The level is different variants of error checking, so when you use a smaller QR code image it might be best to go for the largest “L” level, and move towards the “M” level the larger the image you create.

import QRCode from "react-qr-code";

function QRCodeComponent() {
  const url = `https://affill.io/${username}/${slug}`;

  const [size, setSize] = useState(128);
  const [level, setLevel] = useState<"L" | "M" | "Q" | "H">("M");
  const [backgroundColor, setBackgroundColor] = useState("#ffffff");
  const [color, setColor] = useState("#000000");

  return (<QRCode
      size={size}
      value={url}
      viewBox={`0 0 ${size} ${size}`}
      id="QRCode"
      level={level}
      bgColor={backgroundColor}
      fgColor={color}
  />)
}

If I just make a new row for the free accounts post I would have to make the slug column empty since I dont know what the next id would be.

So how can I use the database id as the slug in the new database row if I dont know what the id will be?

The answer I found for this is database triggers. I use supabase as the database host for this project, and I can either enter plain SQL to make the trigger and the function, or I can use their UI in the admin part of supabase.

The PL SQL code for the function to get the id of the new post would be something like this:

CREATE FUNCTION create_post_id_as_slug() RETURNS trigger AS $$
BEGIN
    IF NEW.paid is FALSE THEN
    NEW.slug := NEW.id;
    END IF;
    RETURN NEW;
END;
$$ LANGUAGE plpgsql;

Here I have first added a column called “paid”, and I do a check in javascript before inserting the row to the database. If the user has a subscription I set the paid property of the javascript object to true, if its a free account it gets set to false.

“NEW” in the function is the data for the row we are inserting, so it contains all the columns you defined in the insert query.

We check if the “paid” is false, and if so - we set the “slug” to be equal to the “id” that the postgres database has now generated for this new row.

Now we have to make the trigger that makes postgres run this function. The trigger is simple and looks like this:

CREATE TRIGGER post_slug_trigger
BEFORE INSERT ON "Post"
FOR EACH ROW
EXECUTE PROCEDURE create_post_id_as_slug()

Triggers can be set to run either BEFORE or AFTER the action.
And actions can be insert, update, delete on the row.
And triggers can run for each row, or after the whole statement. Here we want to run it per row. This means that if we do 10 inserts, the trigger is run for every insert - total 10 times.

If its set to run after the statement and we say update 10 rows with one query, the trigger would then run only once.

So now I can get these kind of urls for paid users: https://affill.io/skorpio/lego-collection

And free users gets the post id as its url/slug like this: https://affill.io/example/1003

In the supabase UI you can find functions and triggers under the “Database” menu choice.

So I decided to go for the opensource tool Typesense, and I wanted to self host it.

I went for a small CX11 vps from Hetzner, and after following their guide on using docker compose I got it up and running. I dont have much data yet so the 2GB RAM is enough for now.

But I wanted to have my own domain for the search and get a SSL certificate from Let's encrypt.
It's been a while since I worked with linux, but the excellent howto from certbot on how to get the certificate generated helped me get up and running.

Now all that was left was to get typesense to work with my certificates, I made the docker-compose.yml file and tried to start the container with docker compose up -d

But the server just kept on restarting

NAME                    IMAGE                        COMMAND                  SERVICE     CREATED          STATUS                        PORTS
typesense-typesense-1   typesense/typesense:0.25.2   "/opt/typesense-serv…"   typesense   41 seconds ago   Restarting (1) 1 second ago

I ran docker compose logs and could see that typesense couldnt find my certification files.

typesense-1  | E20240415 18:01:05.855815     1 http_server.cpp:1069] An error occurred while trying to load server certificate file: /cert/fullchain.pem
typesense-1  | E20240415 18:01:05.861860     1 http_server.cpp:175] Failed to listen on 0.0.0.0:8108 - No such file or directory

The error was that I tried to map the domain folder of letsencrypt

- /etc/letsencrypt/live/www.example.com:/cert

When mounting this folder the symlink wouldnt work, so I had to change the folder mount to be the /etc/letsencrypt folder instead.

This is my final docker-compose.yml file:

version: '3.4'
services:
  typesense:
    image: typesense/typesense:0.25.2
    restart: on-failure
    ports:
      - "443:8108"
    volumes:
      - ./typesense-data:/data
      - ./log:/log
      - /etc/letsencrypt:/cert
    command: '--data-dir /data --log-dir /log --enable-cors --ssl-certificate /cert/live/www.example.com/fullchain.pem --ssl-certificate-key /cert/live/www.example.com/privkey.pem

And now everything works!

I couldnt find any information about how to disassemble or repair this lawnmower, so I figured I could just wing it. And this blog post is made to help out anyone else needing to repair their Gardena lawnmower.

I found the part number to be the 587 44 94-02 motor kit (looks like this), I ordered a new rubber sealing strip aswell. These are original parts that can be used both for Gardena and Husqvarna. In Norway the best place to get these parts seems to be Gartnerservice

This is how I disassembled the lawnmower:

Step 1 - disconnect the battery
Turn off the lawnmower, open the battery cover by removing the 4 torx bolts

Close the cover to avoid getting dirt inside the battery compartment.

Step 2 - remove the rear cover
Two torx bolts holds the rear cover attached.

Step 3 - remove the top plastic cover(s)
The light gray top cover is attached by plastic clips.

Step 4 - release top chassis from the shock absorbers
The shock absorber gaskets should be slid out of their sockets. They can be quite stuck, I had to lube with some WD-40 and use quite some power to get them slid into the open position. It might be best to start with the front one, but this is attached to the shock detector so be a bit careful

Step 5 - disconnect the charging cable
Remember to turn off the lawnmower and disconnect the battery before doing this step.

Step 6 - open main chassis
Remove the marked torx bolts.
Remember the top of the main chassis has the controls and the display, these are connected with wires so be careful when lifting the top chassis.

Step 7 - disconnect wheel motor
Unclip the cable

Step 8 - remove wheel motor
Remove wheel cover, loosen wheel nut.

Remove the 4 torx bolts, slide the motor out.

Step 9 - replace sealing strip
Overlap the strip a bit at the starting point, make sure to press the strip gently down into the groove.

Overview picture of the inside of the lawnmower

Took about an hour to do, most of the time was fidgeting with the shock absorbers being stuck. New motor works fine, lawnmower is back to working 24/7

This installs the dependencies for me, and creates the setup files automatically.

When I installed the Button component and the Sheet component I couldnt get them to work properly, the styles didnt apply and the Sheet didnt show on the screen when I clicked the Open button in the top right of the image.

As you see in the header image the buttons with the text "Test" and "Open" and the sun icon are not supposed to look like this.

And clicking the sun icon or the "Open" button changes the html if inspected, but doesnt show anything for the user.

The problem was that the automatic setup wanted to use aliasing for the components folder. So it created the @/components/ folder.

But you have to add these folder paths to the tailwind.config.js file aswell.

module.exports = {
  darkMode: ["class"],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './@/components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
    ],

So the fix is in the line 6: './@/components/**/*.{ts,tsx}',

And now the styles work and the menus show like they are supposed to.

In the documentation it says that you can use the resetPasswordForEmail method to generate a link and send it to the user via email:

const { data, error } = await supabase.auth
  .resetPasswordForEmail('user@email.com', {
    redirectTo: "http://localhost:5137/login/newpassword"
  })

This triggers Supabase to send an email to the user with an URL with tokens.

(You can change the email template for this in your supabase dashboard, you can also change the generated redirect url in the same place, eg if you want to add the token directly to the url.)

This standard URL looks kinda like this:
SITE_URL>#access_token=x&refresh_token=y&expires_in=z&token_type=bearer&type=recovery

This link sends the user to Supabases server, they authenticate and logs the user in, and then redirects the user to the URL we provided (http://localhost:5137/login/newpassword)

The security in this is that only the user should have access to their own email, and thus noone else should get the URL from supabase with the tokens.

Supabase then checks that the tokens in the URL are correct and then redirects the user back to us.

We then have to verify that the onAuthStateChange event is of the type "PASSWORD_RECOVERY", and if it is, we redirect the user to the set new password form.

So lets do some coding, first we make the forgot password page with an forgot_password action.

This is the +page.svelte for "/loing/forgotpassword"

<script lang="ts">
  import { enhance } from "$app/forms";
  export let form;
</script>

<div class="w-[512px] p-2 flex flex-col gap-2">
    <h5 class="font-bold text-2xl">Forgot password?</h5>
    <p>Enter your email to reset your password.</p>
    <form method="POST" action="?/forgot_password" class="flex flex-col gap-2" use:enhance>
        <label for="email">Email:<input type="email" name="email" id="email" required /></label>
        {#if form?.errors?.email}
            <span class="text-red-500">{form?.errors?.email[0]}</span>
        {/if}

        <button type="submit" class="bg-blue-300 text-black font-semibold text-lg border border-solid border-black p-1 w-44 mt-4">Send</button>
    </form>
    {#if form && form.success === true } 
        <div class="bg-green-300 p-2">
            <p>Check your email for the reset-password email from supabase</p>
        </div>
    {/if}
    {#if form && form.success === false } 
        <div class="bg-red-300 p-2">
            <p>Could not find a user with this email.</p>
        </div>
    {/if}

</div>

I get the supabase client and the session from locals, see supabase sveltekit auth helpers how this is set up.
I use Zod for validating form inputs, this is the +page.server.ts for forgotpassword:

import { z } from 'zod';

const changeEmailSchema = z.object({
    email: z.string().email(),
});

export const actions = {
    forgot_password: async (event) => {
        const { request, locals } = event;
        const { supabaseClient } = locals;

        const data = await request.formData();
        const obj = Object.fromEntries(data);

        const { email } = obj;

        try {
            const result = changeEmailSchema.parse(obj);

            const { data: user, error } = await supabaseClient.auth.resetPasswordForEmail(result.email, {
                redirectTo: 'http://localhost:5173/login/newpassword',
            });

            if (error) {
                return {
                    errors: [
                        { field: 'email', message: 'Something went wrong' },
                    ],
                    data: obj,
                    success: false,
                };
            }

            return {
                data: user,
                errors: [],
                success: true,
            };
        } catch (error: any) {
            const { fieldErrors: errors } = error.flatten();

            return {
                errors: errors,
                data: obj,
                success: false,
            };
        }
    },
};

This action generates the email from supabase, and the redirect link that sends the user back to us after supabase authenticated them from the tokens.

Now we have to catch the "PASSWORD_RECOVERY" event from supabase.
I use the Supabase auth helpers package, and the event listener with the auth helper is located in my +layout.svelte file in the root of my routes folder.

This is only a snippet from the file, follow the instructions from the auth helpers package for the full setup.

onMount(() => {
        const {
            data: { subscription },
        } = supabase.auth.onAuthStateChange((event, session) => {
            if (event === "PASSWORD_RECOVERY") {
                // const { url } = $page;
                // const { hash} = url;

                // const token = hash.split('&')[0].slice(14);
                // redirect user to the page where it creates a new password
                throw redirect(302, '/login/newpassword?token=' + session?.access_token);
            } else {
                // default action
                invalidate('supabase:auth');
            }
        });

        return () => {
            subscription.unsubscribe();
        };
    });

I am not sure if Supabase has changed the order of events when you are reading this, there is a discussion/PR where they are thinking of NOT logging the user in before sending the "PASSWORD_RECOVERY" event. If they have changed this, you will not have a session to get the token from. Just remove the token from the url if this is the case.

This onAuthStateChange detects the password recovery and we then redirect the user to our new "change password page".

+page.svelte for /login/newpassword

<script type="ts">
  import { page } from '$app/stores';
  import { enhance } from "$app/forms";

    export let form;

    const { url } = $page;
    const { searchParams } = url;

    const token = searchParams.get('token');
</script>

<div class="w-[512px]">
    <span>Change password</span>
        <form method="POST" action="?/new_password" class="flex flex-col gap-2" use:enhance>
            <label for="password">New password:<input type="password" name="password" id="password" required /></label>
            {#if form?.errors?.password}
                <span class="text-red-500">{form?.errors?.password[0]}</span>
            {/if}
            <label for="confirm_password">Confirm password:<input type="password" name="confirm_password" id="confirm_password" required /></label>
            {#if form?.errors?.confirm_password}
                <span class="text-red-500">{form?.errors?.confirm_password[0]}</span>
            {/if}
            <input type="hidden" name="token" value={token} />
            {#if form?.errors?.token}
                <span class="text-red-500">{form?.errors?.token[0]}</span>
            {/if}
            <button type="submit" class="bg-blue-300 text-black font-semibold text-lg border border-solid border-black p-1 w-44 mt-4">Send</button>
        </form>

    {#if form && form.success === true }
        <div class="bg-green-300 p-2">
            <p>Your password was changed.</p>
        </div>
    {/if}

    {#if form && form.success === false }
        <div class="bg-red-300 p-2">
            <p>Could not change password.</p>
        </div>
    {/if}
</div>

+page.server.ts for "/login/newpassword"

import { error } from '@sveltejs/kit';
import { z } from 'zod';

const changePasswordSchema = z
    .object({
        password: z.string().min(8, { message: 'Password must contain at least 8 characters' }),
        confirm_password: z.string().min(8, { message: 'Password must contain at least 8 characters' }),
        token: z.string(),
    })
    .superRefine((data, ctx) => {
        if (data.password !== data.confirm_password) {
            ctx.addIssue({
                code: 'custom',
                message: 'Passwords must match',
                path: ['confirm_password'],
            });
        }
    });

export const actions = {
    new_password: async (event) => {
        const { request, locals } = event;
        const { supabaseClient, getSession } = locals;
        const session = await getSession();

        // user is logged in from the supabase reset password flow - from +layout.svelte onMount
        if (!session) {
            throw error(401, { message: 'not authorized' });
        }

        const data = await request.formData();
        const obj = Object.fromEntries(data);

        try {
            const result = changePasswordSchema.parse(obj);

            if (result) {
// supabase logged the user in, so we can change the users password
                const { data: user, error } = await supabaseClient.auth.updateUser({
                    password: result.password,
                });

                if (error) {
                    console.log('supa change pw error', error);
                    return {
                        errors: [
                            { field: 'password', message: 'Something went wrong, cant update password' },
                        ],
                        data: {},
                        success: false,
                    };
                }

                if (user) {
                    return {
                        data: user,
                        errors: [],
                        success: true,
                    };
                }
            }
        } catch (error: any) {
            try {
                const { fieldErrors: errors } = error.flatten();
                console.log('catch error', errors);

                return {
                    errors: errors,
                    data: obj,
                    success: false,
                };
            } catch (error2) {
                console.log(error);
            }
        }
    },
};

The user has now changed the password, and is logged in.

You could now redirect them to the frontpage, or where ever you want them to go.

Schema:

model Product {
  id String @id @default(cuid())

  published DateTime?
  creatorId String

  userId Int
  user   UserInfo @relation("products", fields: [userId], references: [id], onDelete: Cascade)

  imageId String?       @unique
  image   ProductImage? @relation("productImage", fields: [imageId], references: [id])

  affiliateId String?
  affiliate   Affiliate? @relation("productAffiliate", fields: [affiliateId], references: [id])

  brandId String?
  brand   Brand?  @relation("productBrand", fields: [brandId], references: [id])

  post  Post[]
  tagId String?
  tag   ProductTag? @relation("mainProductTag", fields: [tagId], references: [id])

  tags  ProductTag[]  @relation("productTags")
  lists ProductList[] @relation("productList")

  title       String?
  slug        String  @default("")
  description String?
  url         String?
  favorite    Boolean @default(false)
  sort        Int     @default(10)
  discount    Int     @default(0)

  price  Float   @default(0)
  valuta String?

  createdAt DateTime  @default(now())
  updatedAt DateTime  @updatedAt
  deletedAt DateTime?
}

When I create a product I may or may not have all the connected data, like brand, affiliate, tag and so on.

To do this we can leverage the undefined variable like this: (link to Prisma documentation)

let product = await prisma.product.create({
      data: {
        title,
        description,
        url,
        creatorId: session.user.id,
        published: published ? new Date() : undefined,
        favorite: favorite ? true : false,
        user: {
          connect: {
            id: Number(session.user.userInfo),
          },
        },
        image: {
          connect: {
            id: image,
          },
        },
        affiliate: affiliate
          ? {
              connect: {
                id: affiliate,
              },
            }
          : undefined,
        brand: brand
          ? {
              connect: {
                id: brand,
              },
            }
          : undefined,
        tag: tag
          ? {
              connect: {
                id: tag,
              },
            }
          : undefined,
        post: post
          ? {
              connect: {
                id: post,
              },
            }
          : undefined,
      },
    });

For affiliate: If the affiliate variable is truthy, we do the connect, else we give the 'undefined' value.

For accessability I found that react-aria from Adobe is pretty good, I am used to working with Chakra UI and Material UI (MUI) so the component style is making me feel at home.

react-hook-form with Zod gives me easy validation and typing of my form fields. Logrocket got a good blog on using these two together here.

"react-aria": "^3.19.0",
"@hookform/error-message": "^2.0.0",
"@hookform/resolvers": "^2.9.8",
"react-hook-form": "^7.35.0",
"zod": "^3.19.1"

But trying to use react-aria with react-hook-form and zod wasnt straight forward. The solution wasnt that complex, but I had to google alot and try many different thing before I understood what the problem was. Scroll to the bottom if you want the solution straight away.

I followed some guides and tried with the example code from react-aria and the example code for react-hook-form with Zod. Looking like this:

TextField.tsx
import { useTextField } from "react-aria";

function TextField(props) {
  let { label } = props;
  let ref = useRef();
  let { labelProps, inputProps, descriptionProps, errorMessageProps } =
    useTextField(props, ref);

  return (
    <div style={{ display: "flex", flexDirection: "column", width: 200 }}>
      <label {...labelProps}>{label}</label>
      <input {...inputProps} ref={ref} />
      {props.description && (
        <div {...descriptionProps} style={{ fontSize: 12 }}>
          {props.description}
        </div>
      )}
      {props.errorMessage && (
        <div {...errorMessageProps} style={{ color: "red", fontSize: 12 }}>
          {props.errorMessage}
        </div>
      )}
    </div>
  );
});

Form.tsx

import TextField from 'components/utils/TextField';
import { useForm, SubmitHandler } from "react-hook-form";
import { z, object, TypeOf } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { ErrorMessage } from "@hookform/error-message";

export default function TestAria() {
  const zodSchema = object({
    title: z.string().min(4, { message: "Must be 5 or more characters long" }),
    description: z
      .string()
      .min(4, { message: "Must be 5 or more characters long" }),
  });
  type RegisterInput = TypeOf<typeof zodSchema>;

  const {
    register,
    formState: { errors, isSubmitSuccessful },
    handleSubmit,
  } = useForm<RegisterInput>({
    resolver: zodResolver(zodSchema),
  });

  const onSubmitHandler: SubmitHandler<RegisterInput> = (values) => {
    console.log({ values });
  };

  return (
    <form onSubmit={handleSubmit(onSubmitHandler)}>
      <div className="flex flex-col">
        <TextField
          label="Title"
          {...register("title")}
          validationState={!!errors.title?.message}
          errorMessage={errors.title?.message ?? ""}
        />
        <div className="flex flex-col">
          <label htmlFor="description">Description</label>
          <br />
          <textarea
            rows={5}
            aria-label="description"
            {...register("description")}
          />
          <ErrorMessage errors={errors} name="description" />
        </div>
        <button type="submit">Create</button>
      </div>
    </form>
  );
}

In Form.tsx I got the title input that is a react-aria component, and the description input that is a regular html input that works fine with react-hook-form and zod for comparison.

This didnt work, errormessages started popping up when I typed into the title input.

I am using Next.js and the first error that popped up in my console was this:

Warning: Prop `id` did not match. Server: "react-aria-5" Client: "react-aria-2"
label

This ment that the server side rendered part of Next.js and the client side rendered part got different ids on my title input. Googling the error said to use SSRProvider from react-aria to fix this.

_app.tsx

import { SSRProvider } from "react-aria";

function MyApp({ Component, pageProps: { ...pageProps } }: AppProps) {
  return (
        <SSRProvider>
          <Component {...pageProps} />
        </SSRProvider>
  );
}

export default MyApp;

Ok so that errormessage was gone, but a new one showed up:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

So to use react-aria uncontrolled (not using react state) they use ref to keep control of which input field we are trying to type into. So the parent (Form.tsx) has to send in a ref for the child (TextField.tsx) to apply to the input field.

After googling and finding some issues on react-arias github page I tried different things mentioned in the issue-post, but what ended up working was using forwardRef (like the errormessage said :)) like this:

import { useTextField } from "react-aria";
import { forwardRef } from "react";

const TextField = forwardRef((props: any, ref: any) => {
  let { label } = props;
  // let ref = useRef();
  let { labelProps, inputProps, descriptionProps, errorMessageProps } =
    useTextField(props, ref);
  console.log({ inputProps }, { ref });

  return (
    <div style={{ display: "flex", flexDirection: "column", width: 200 }}>
      <label {...labelProps}>{label}</label>
      <input {...inputProps} ref={ref} />
      {props.description && (
        <div {...descriptionProps} style={{ fontSize: 12 }}>
          {props.description}
        </div>
      )}
      {props.errorMessage && (
        <div {...errorMessageProps} style={{ color: "red", fontSize: 12 }}>
          {props.errorMessage}
        </div>
      )}
    </div>
  );
});

export default TextField;

Well trying again and a new error message:

Uncaught (in promise) TypeError: target is undefined
    onChange index.esm.mjs:1738

It seemed to me that the change in the input didnt get registered or registered wrongly. Once again I had to google and found that react-hook-form has several other methods and properties in the {...register("title")} function.

const {
    onChange,
    onBlur,
    name,
    ref,
  } = register("title");

There we can see the ref that gets created and sent to the react-aria, along with the name and interestingly a onChange.

I console logged what react-hook-form got from the onChange

<TextField
            label="Title"
            {...register("title")}
            onChange={(e) => console.log({e})}
          />

What returned was just the string, if I typed "abc" the return was "abc".

I expected that the onChange from react-hook-form needs the format event.target.value (in TypeScript: ChangeEvent), and the error message said "target is undefined".

So I tried making a change to the onChange:

const onChangeHandler = (event) => {
    const e = { target: { event } };
    return e;
  };

<TextField
            label="Title"
            {...register("title")}
            onChange={(e) => register("title").onChange(onChangeHandler(e))}
          />

This way the onChange for react-hook-form would get the format event.target.value

And now everything worked!

Edit: I also found this bugreport that describes the problem, and a link to a discussion for why they wont change the behaviour of onChange.

But I wanted to make the submenus open when I hover the mouse over them.

Red is anchorEl (mainmenu item) Yellow is menu (submenu)

My starter code:

return (
    <div>
      <Drawer
        variant="permanent"
        className="menu-list"
       >
        <List
          component="nav"
          aria-labelledby="nested-list-subheader"
          subheader={
            <div className={classes.subHeader}>
              <img src={OMSLogo} className={classes.logo} alt="site logo"/>
            </div>
          }
          className={classes.root}
        >
          {modules.map((module, k) => (
            <ManagerMenuModule module={module} key={k} classes={{ nested: classes.nested }} />
          ))}
        </List>
      </Drawer>
    </div>
  );

And the ManagerMenuModule:

  const [smallMenuOpen, setSmallMenuOpen] = React.useState(false);
  const [anchorEl, setAnchorEl] = React.useState<any>(null);

return (
        <div id="simple-menu">
          <Popper
            open={smallMenuOpen}
            anchorEl={anchorEl}
            placement={"right-start"}
            transition
            onMouseLeave={(e) => handleSmallMenuClose()}
            className={classes.popper}
          >
            {({ TransitionProps }) => (
              <ClickAwayListener onClickAway={handleSmallMenuClose}>
                <Zoom {...TransitionProps}>
                  <Paper elevation={3}>{smallSubMenu(props.module.module_name, true)}</Paper>
                </Zoom>
              </ClickAwayListener>
            )}
          </Popper>
          <Tooltip placement="right" arrow title={props.module.module_name} enterDelay={1000}>
          <ListItem className={listItemClasses()} button key={props.module.module_id} onClick={handleSmallMenuOpen}
                      onMouseOver={handleSingleModuleSmallMenu}
                      onMouseLeave={(e) => handleClose(e)}

                      >
            <ListItemIcon className={listItemIconClasses()}>{renderIcon(props.module.icon)}</ListItemIcon>
          </ListItem>
          </Tooltip>
        </div >
      );

 const handleSingleModuleSmallMenu = (event) => {
    setAnchorEl(event.currentTarget);
    setSmallMenuOpen(true);
  };

  const handleClose = (e) => {
    if (e.currentTarget.localName !== "ul") {
      const menu = document.getElementById("simple-menu");
      const menuBoundary = {
        left: (anchorEl?.offsetLeft  ?? 0) + (anchorEl?.offsetWidth ?? 0),
        top: anchorEl?.offsetTop ?? 0,
        right: ((anchorEl?.offsetLeft  ?? 0) + (anchorEl?.offsetWidth ?? 0)) + (menu?.offsetWidth  ?? 0),
        bottom: (menu?.offsetHeight ?? 0) + (anchorEl.offsetTop ?? 0)
      };
      // console.log("coords", menuBoundary.left, menuBoundary.top, menuBoundary.right, menuBoundary.bottom, e.clientX, e.clientY)
      if (
        e.clientX >= menuBoundary.left &&
        e.clientX <= menuBoundary.right &&
        e.clientY <= menuBoundary.bottom &&
        e.clientY >= menuBoundary.top
      ) {
        return;
      }
    }

    setSmallMenuOpen(false);
  }

So just by setting onMouseOver={handleSingleModuleSmallMenu} on the ListItem the menu item shows, but if you dont tell it when to close you end up with all menu items open.

If you just do onMouseLeave={() => setSmallMenuOpen(false)} you cant move the mouse to the submenu, because it closes the menu as soon as your mouse leaves the main menu icon/text.

So we make the handleClose method to decide when to close the submenu.

First we save the main menu item, so we know where on the page we are. setAnchorEl(event.currentTarget)

Next we have given the

We then define the divs outer limits, so we know when we move the mouse outside of these bounds - we can close the menu.

const menuBoundary = {
        left: anchorEl.offsetLeft + anchorEl.offsetWidth,
        top: anchorEl.offsetTop,
        right: anchorEl.offsetLeft + anchorEl.offsetWidth + menu.offsetWidth,
        bottom: menu.offsetHeight + anchorEl.offsetTop
      };

*Left is: where does anchorEl start + anchorEl width. Marked pink on picture.

Right is: where does anchorEl start + anchorEl width + submenu width. Marked red+green on image.

Top is: where does anchorEl start. Marked red on image.

Bottom is: where does anchorEl start + submenu height. Marked blue on image.*

The submenu shows up on the right side of the mainmenu. So we use the anchorEl ref to have a startingpoint. Everything is in relative position to this ref.

Last we just have to check if the coordinates of the onMouseLeave event is inside the submenu or not. If it is inside submenu, we dont close.

This only handles the onMouseLeave on the ListItem, which is the mainmenu.

But we also have to listen for onMouseLeave on the shown submenu, this is being handled by setting onMouseLeave={() => handleSmallMenuClose()} on the parent element, which in this case is the Popper .

When you use NextAuth with the Prisma adapter you get the user object automatically attached to the session.

But I have additional relations on my User model in the Prisma schema:

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String?   @unique
  emailVerified DateTime?
  image         String?
  accounts      Account[]
  sessions      Session[]
  accountType    Role[] // custom relation containing roles
  userDetails    UserDetails // custom table containing additional info about the user
}

So how to get this added to the user object in the session?

I tried changing the callbacks in [...nextauth].ts:

callbacks: {
    async session({ session, token, user }) {
      // Send properties to the client, like an access_token from a provider.
      session.user = user;

      let userDetails = await prisma.userDetails.findUnique({
        where: {
          userId: user.id,
        },
      });
      session.userdetails = userDetails;

      return session;
    },
  },

This works, but the session callback now have an additional object, like this:

session: 
{
    user: {user},
    session: {session},
    userdetails: {userDetails}
}

While I want it like this:

session: 
{
    user: {user}, // userDetails and accountType added to this object
    session: {session},
}

The PrismaAdapter is opensource and I found it on github: https://github.com/nextauthjs/adapters/blob/main/packages/prisma/src/index.ts

I then added this function to my [...nextauth].ts file, but changed the getSessionAndUser function.

So instead of importing the PrismaAdapter, you add the function yourself. You could of course put it in its own file and import that.

Now the file looks kinda like this, the change is the "include" portion.

// [...nextauth].ts
// import { PrismaAdapter } from "@next-auth/prisma-adapter"; // not importing this anymore

// added this to the file:
function PrismaAdapter(p: PrismaClient): Adapter {
  return {
   ... // not showing all the functions, only the changed part:

    async getSessionAndUser(sessionToken) {
      const userAndSession = await p.session.findUnique({
        where: { sessionToken },
        include: {
          user: {
            include: {
              accountType: true,
              userDetails: true,
            },
          },
        },
      });
      if (!userAndSession) return null;
      const { user, ...session } = userAndSession;
      return { user, session };
    },

    ...
}

Now I get accountType and userDetails included in my {user} in the session!

import { TwitterTweetEmbed } from "react-twitter-embed";

type IProps = {
  id: string;
};
const Tweet = (props: IProps) => {
  return (
      <TwitterTweetEmbed tweetId={props.id} />
  );
};

TwitterTweetEmbed takes an option object, but that did not increase the size like I wanted.

<TwitterTweetEmbed tweetId={props.id} options={{width: 550}} />

But wrapping the TwitterTweetEmbed in a div with a set width solved the issue:

const Tweet = (props: IProps) => {
  return (
    <div style={{ width: "600px" }}>
      <TwitterTweetEmbed tweetId={props.id} />
    </div>
  );
};

The result then looks like this:

My custom styled components button:

import { Button, styled } from '@mui/material';

const ColorButton  = styled(Button) (({ theme }) => ({
        color: theme.palette.getContrastText('#fff'),
        backgroundColor: '#00535a',
        '&:hover': {
          backgroundColor: '#00535a',
        },
      }));

When compiling it gave the following error: JSX element type 'ColorButton' does not have any construct or call signatures.ts(2604)

I tried importing Button from Material UI like this:

import Button from '@mui/material/Button';

I tried importing styled components a few different ways:

import { styled } from '@mui/material/styles';
import styled from 'styled-components';

tried adding resolution to package.json:

   "dependencies": {
    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
   },
  "resolutions": {
    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
  },
 }

added path to tsconfig.json:

   "compilerOptions": {
    "paths": {
     "@mui/styled-engine": ["./node_modules/@mui/styled-engine-sc"]
    }
   },
 }

But the solution was way simpler, just type the new styled component as a React.Component

const ColorButton: React.Component  = styled(Button) (({ theme }) => ({
        color: theme.palette.getContrastText('#fff'),
        backgroundColor: '#00535a',
        '&:hover': {
          backgroundColor: '#00535a',
        },
      }));