A card for DEV resolutions

TL;DR

Get yourself a card of your #DEVResolutions2024. The image can be shared on Twitter and wherever you like. Maybe have a printout of it and hang it on your refrigerator.

Prologue

I'm worse when it comes to choosing resolutions for a new year. I can't come up with any. I have three emails from DEV marked as important. These emails talk about making resolutions. I can't help it! SOS!
However, I can code well. Hence, I came up with the idea of having personal cards engraved with individual resolutions that can be shared on social media.
I have experience using NextJS and Satori to generate images previously. But it suffers greatly in terms of performance as for every change in prompt there is a network req-res cycle from an API endpoint. Maybe I could've used wasm binaries of Satori to generate images on the client side.
This time I chose html2canvas library.

Setup

The setup for the project is fairly minimal. The project is based on NextJS for foundation and Tailwind CSS for styling. Note: The form is imported from Preline UI. There are three goal input boxes which are wired using the React state to the card. Changing the prompt would change the text on the card.
Next, comes the submit button which calls the function which saves the card as an image.

Tip

While using html2canvas library, there is a problem with vertical text alignment. This can be easily solved by adjusting the image's CSS in the core CSS file.

@layer base {
  img {
     @apply
       inline-block;
  }
}

ref: https://stackoverflow.com/questions/74980740/html2canvas-shifting-text-downwards

Conclusion

Try it out and share your cards on Twitter tagging me and DEV.

References

repo: https://github.com/ashishk1331/DEVResolutions2024
demo: https://dev-resolutions2024.vercel.app/
issues: https://github.com/ashishk1331/DEVResolutions2024/issues/new