DEV Community: Eyk

Introducing Catena ⛓️ – a Library for building type-safe Express Handlers

Eyk — Wed, 10 Apr 2024 12:20:51 +0000

Today, we're launching a new framework/library that helps you building type-safe handlers for Express.js based applications, called Catena!

🔎 https://github.com/sonic-technology/catena

Catena features zod-powered request validations, type-safe middlewares, monorepo type sharing & much more.

The following is what a handler might look like. It includes validations for parameters & headers, two middlewares and a response transformer that creates a secure DTO. All in one easy to understand function chain.

Best of all, it can be dropped into any Express application in an isolated way, so you don't have to rewrite your whole application if you want to try it with an existing application..

import { Handler, HTTPError } from '@sonic-tech/catena'
import { z } from 'zod'

app.get(
    '/user/:uuid',
    new Handler().
        .validate('params', {
            uuid: z.string().uuid()
        })
        .validate('headers', {
            authorization: z.string()
        })
        .middleware((req) => {j
            const requestingUser = await SecurityService.getAuthorizedUser(req.headers.authorization);
            if (!requestingUser) {
                // Throw errors when you want to stop further request processing while returning an error at the same time
                throw new HTTPError(400, 'This should fail')
            }

            return {
                requestingUser
            }
        })
        .middleware(AnotherMiddleware)
        .resolve(async (req, res, context) => {
            // You can access the merged type-safe context of all middlewares in the resolver
            const { requestingUser } = context


            const userIncludingPassword = await UserService.getUser(req.uuid)

            return userIncludingPassword
        })
        .transform((data) => {
            return {
                data: {
                    uuid: data.uuid,
                    email: data.email
                }
            }
        })
        .express()
)

Try it out: https://github.com/sonic-technology/catena

I would love to hear your thoughts in the comments!

Fetch images with a React hook

Eyk — Mon, 29 Jun 2020 19:10:07 +0000

This article was originally published on Typesafe. Check out https://typesafe.blog for inspiring frontend articles! 🚀

We all know the default way to fetch and display images:

<img src="/image.jpg" />

It is used across frameworks and libraries throughout the industry. But what if you want to improve your UX and display loading indicators at the position of the image while the image is still loading? Or what if you want to output a message if there was an error while loading the image? Unfortunately this is not that easy with the default way of loading images.

But no worries, because there is a solution. You can just load the image in parallel with a React hook, which will also tell you when the image has finished loading and if there has been an error.

The hook

First of all I would like to introduce the hook:

import { useState, useEffect } from "react";

export const useImage = (src: string) => {
    const [hasLoaded, setHasLoaded] = useState(false);
    const [hasError, setHasError] = useState(false);
    const [hasStartedInitialFetch, setHasStartedInitialFetch] = useState(false);

    useEffect(() => {
        setHasStartedInitialFetch(true);
        setHasLoaded(false);
        setHasError(false);

        // Here's where the magic happens.
        const image = new Image();
        image.src = src;

        const handleError = () => {
            setHasError(true);
        };

        const handleLoad = () => {
            setHasLoaded(true);
            setHasError(false);
        };

        image.onerror = handleError;
        image.onload = handleLoad;

        return () => {
            image.removeEventListener("error", handleError);
            image.removeEventListener("load", handleLoad);
        };
    }, [src]);

    return { hasLoaded, hasError, hasStartedInitialFetch };
};

What does this hook do? Well, it basically loads the image into the cache or retrieves it from the cache if it has already been loaded.

At the same time it provides useful information, such as whether the image has been loaded, whether an error occurred during loading or whether the initial fetch has started. You could then use this information to place a loading indicator in the place of the image as long as the image has not yet loaded. An example integration could look like the following:

const Demo = () => {
    const imageUrl = "/image.png";

    const { hasLoaded, hasError } = useImage(imageUrl);

    if (hasError) {
        return null;
    }

    return (
        <>
            ...
            {!hasLoaded && <LoadingIndicator />}
            {hasLoaded && <img src={imageUrl} />}
        </>
    );
};

But doesn't the image load twice?

No. One might expect this, since the source was entered in both the hook and the image element.
However, only one request is sent, no matter how often a source is referenced. Fortunately, this also leads to the result that the hasLoaded is always turning true, if somewhere (no matter where exactly) on the page this exact image was loaded.

Conclusion

If you want to load images in an easy way and at the same time know the exact loading state, I can highly recommend this hook. In fact, all article thumbnails on typesafe.blog are loaded with this hook. In case you have a slow internet connection, you will see a loading indicator instead of the image until the image has loaded.

Post your article on an emerging frontend blog

Eyk — Tue, 23 Jun 2020 11:03:02 +0000

The goal of Typesafe is to give YOU an opportunity to inspire thousands of developers with your articles.

I created https://typesafe.blog to give talented web developers - who doesn't necessarily work for big startups or companies with a wide reach - a chance to become known through their articles while helping and inspiring other people.

Why should I post articles on Typesafe?

First of all, writing blog articles will always be beneficial for you (and your career). You can find an article here that goes into the why.

Typesafe is a great place for posting an article. It is built to scale well and rank well in search engines. I attached great importance to the minimalism and design of the website to focus on the/your posts themselves.

There is currently no advertising on Typesafe, so it is a non-profit site. The complete focus is on the content.

Furthermore, every post is reviewed & evaluated before publication, so the reader can be sure that your article must be very good.

The main reasons summarised:

Sell yourself - show the world what you are capable of
Inspire people
Reach a great audience

How do I post articles on Typesafe?

You can send your article to eyk@typesafe.blog. The email should include:

The article's content (preferably as markdown) OR the link of your existing article, if you want to crosspost it
The title
Your name
(optional) Subtitle
(optional) LinkedIn Profile Link
(optional) Github Profile Link
(optional) Your "profile picture"

Your name, LinkedIn profile, Github profile and profile picture will be included with the post, so it is clear that you are the author of the post.

Since Typesafe is very exclusive and the main focus is on the quality of the content, every submission will be reviewed.

If you have any questions or other comments on the product, feel free to write them in the comments below or send them via email to eyk@typesafe.blog!

A CLI tool to create universal boilerplates

Eyk — Sat, 28 Dec 2019 17:09:01 +0000

As I created new React components over and over again, I noticed that I wrote a lot of boilerplate code and I wanted to stop doing that. Sure, there are existing solutions to that specific problem, but I wanted to use a universal one, which could fit all my needs for boilerplates.

So I came up with this idea and open-sourced it. Any feedback appreciated!

https://github.com/eykrehbein/cook