Forem: Misha

Overengineering OpenGraph image generation on Vercel

Misha — Wed, 30 Jul 2025 10:54:51 +0000

The OpenGraph protocol is a certified OG - literally. Been globally adopted for well over a decade, powering link previews across the entire internet. But it’s 2025 now, and being a real engineer means using Vercel and Next for everything. So today, I’m going to show you how to max out next/og.

We’re gonna build dynamic OG images using bleeding edge serverless tech, in various aspect ratios (I'll explain why), and squeeze it all into Vercel’s 2MB function limit. because why not overengineer a metadata preview?

Part 1: Image Generation

We’re using next/og, which is powered by satori under the hood.

What you need to know:

It’s open source.
It turns JSX into SVG using a limited subset of CSS.
It works out of the box in Next.js on Vercel.
Like many OSS tools from Vercel, it only works seamlessly on Vercel (unless you have extra time to set it up elsewhere - which I don't).
Overall, it’s the best option if you’re already comfortable with JSX and CSS.

Let’s start with the simplest working version: link to commit.

What it includes:

Dynamic user data via a URL id param.
A custom font with two variations.
A page with meta tags all wired up correctly.

Paste this link into a messenger or social app - you’ll see the preview:

A few notes:

You can style inline or with Tailwind. I prefer Tailwind.
Use tw="..." instead of className="...".
The gap utility doesn’t work - satori doesn’t support it yet. Issue here.

Easy enough. Let’s get weirder.

Part 2: Different Images for Different Platforms

The standard OG image size is 1200x630 - a 1.91:1 ratio. But standards are boring, and no platform actually sticks to them.

Different platforms render OG images differently. In fixed-width UIs (like messengers or social feeds), vertical and square images often show up bigger than horizontal ones.

Check this out:

Or this one:

Is it worth the effort? If you want to squeeze everything out of your funnel, then maybe. I’d suggest testing a few designs, playing with aspect ratios, and actually measuring the impact on conversion.

All aspect ratios for reference:

1.91:1 - the standard; every platform should support this one.
1:1.91 - iMessage.
4:5 - Instagram.
1:1 - Slack, Telegram.

Here's the implementation: link to commit.

Key ideas:

Use User-Agent header to detect the platform and choose an aspect ratio.
Each ratio gets its own JSX component.
I use route.tsx instead of opengraph-image.tsx to parse the aspect_ratio URL search param.

Example: Try pasting this link into iMessage, Telegram/Slack, or Instagram DMs. Should look different depending on where you paste it.

Part 3: Fixing Missing OG Images on Social Platforms

If generation takes too long, the preview might fail to load. Platforms don’t wait.

Two ways to fix it:

Speed it up
Most of the delay is network IO - fetching from DB or storage. Cut that down.
Warm the Vercel Edge Network cache
You can pre-render OG images by pinging the endpoint ahead of time. Just know you'll have to render every variant, because you'll never know which one will be actually used. Still, it works.

Example: for a referral invite page, call curl "${YOUR_PAGE_URL}/opengraph-image?aspect_ratio=${ASPECT_RATIO}" for every aspect ratio variation you support right after creating the invite.

Part 4: Tips

Got a layout with static elements (logos, icons, etc)? Export it as a single image. Don’t try to manually position everything with styles - trust me.
Use Squoosh to compress those static assets. I find turning everything to JPEG via MozJPEG the best option for size/quality balance.
Minimize fonts. Each style/weight is a separate asset.
Always use Promise.all to load everything in parallel.
Stick to WOFF fonts. TTF and OTF are too big. WOFF2 isn’t supported by satori.
Use <div>s for text. Tags like <h1> and <p> come with built-in styles that’ll mess things up.
For Twitter DMs, note the label that appears in the bottom-left corner of the image:

Thanks for reading! Really means a lot. Every like, share, or comment is genuinely appreciated — your support keeps me building (and overengineering) cool stuff like this.

Follow me on X

Preload splash screen in Framer (code component)

Misha — Fri, 19 Jan 2024 14:36:38 +0000

Coming to Framer as a developer was weird: on one hand, simple things are done fast and easily, but when it came to complex ones, like creating a loading splash screen, it felt surprisingly challenging.

I was very disappointed by the fact that Framer is used for building visually rich websites with lots of media content like video backgrounds and yet the problem of showing a loading screen is left unsolved.

It was funny to learn that there are tutorials teaching how to build an animated loading screen (like this one, or this one). But what they recommend is to use a predefined delay for these splash screens (what?).

This means that every time a user opens a page, they will see this animation for a fixed period of time. Even if the page content is cached or wasn't loaded, the loading animation will always play for, let's say, 5 seconds. Crazy 🤯

I wasn't going to give up, and I came up with an honest loading screen solution. It's not ideal but it seems like it's the only one!

The code

import { useEffect, useState } from "react"
import { addPropertyControls, ControlType } from "framer"
import { motion } from "framer-motion"

/**
 * These annotations control how your component sizes
 * Learn more: https://www.framer.com/developers/#code-components-auto-sizing
 *
 * @framerSupportedLayoutWidth auto
 * @framerSupportedLayoutHeight auto
 */
export default function SplashScreen(props) {
    const { children, images } = props
    const [imagesLoaded, setImagesLoaded] = useState(false)

    useEffect(() => {
        console.log("preloading images:", images)

        const loadImages = async () => {
            const total = images.length
            let loaded = 0
            // toggle body scroll off
            document.body.style.overflow = "hidden"

            const promises = images.map((src) => {
                return new Promise<void>((resolve, reject) => {
                    const img = new Image()
                    img.src = src
                    img.fetchPriority = "high"
                    img.onload = () => {
                        loaded += 1
                        console.log(
                            `Preloaded ${loaded}/${total} images (${src})`
                        )
                        resolve()
                    }
                    img.onerror = () => {
                        console.error(`Couldn't preload image ${src}`)
                        resolve()
                    }
                })
            })

            try {
                await Promise.all(promises)
            } catch (error) {
                console.error("Error loading images:", error)
            }

            console.log("finished preloading")
            // toggle body scroll back on
            document.body.style.overflow = ""
            setImagesLoaded(true)
        }

        loadImages()
    }, [])

    return (
        <motion.div
            style={{
                position: "fixed",
                zIndex: 1000,
                inset: 0,
                display: "flex",
                height: "100vh",
                width: "100vw",
                justifyContent: "center",
                alignItems: "center",
                background: "white",
                pointerEvents: imagesLoaded ? "none" : "all",
            }}
            animate={{ opacity: imagesLoaded ? 0 : 1 }}
            transition={{ duration: 0.5 }}
        />
    )
}

addPropertyControls(SplashScreen, {
    images: {
        type: ControlType.Array,
        control: {
            type: ControlType.Image,
        },
    },
})

SplashScreen.defaultProps = {
    images: [],
}

It's a pretty simple component and it doesn't include any progress indicator, but you can easily add it yourself by setting the preloaded images count to state and adding some animation to it.

Here's how you use it: place it as the top layer of your page and list the images to preload in the component’s controls.

You may ask why it only supports images. There are two reasons for this:

Framer doesn't support ControlType.File as an item of ControlType.Image
If you're preloading images and videos, just images are enough most of the time. Why? Because you can set a video's first frame as a poster, and it will be displayed as a still image until it's ready to play. Otherwise, you can always add a single ControlType.File for every file you have on the page.

I hope you find this solution useful. If you have any questions or suggestions, feel free to share them in the comments.

Update: I've decided to post the code that I use on my production project. In this variation I use string input instead of image input because I am preloading videos as well. I hope that helps, happy hacking!

Create React UI Lib 1.1: Ladle and ESLint

Misha — Sat, 08 Jul 2023 13:13:20 +0000

Recently I've released Create React UI Lib: a CLI tool that helps you set up and start building your own UI React component library in no time.

Give it a try!

npm create react-ui-lib@latest

Great news! I've just updated it with cool features:

You can now pick Ladle over Storybook (shout out to @insulineru for this cool idea),
You can also add ESLint now (props to @femincan for the suggestion). It comes with recommended settings for these plugins: typescript, prettier, react, react-hooks, jsx-a11y.

Here's what it looks like:

Do let me know in the comments what you'd like me to add next. Your ideas are always welcome!

If you're liking my work, support me by giving my project a few stars on GitHub. Also, feel free to point out any issues you come across.

If you enjoyed this update, give it a like and stay tuned for more.

Also follow me on Twitter and connect on LinkedIn. Let's keep in touch!

Create React UI Lib: Component Library Speedrun

Misha — Fri, 16 Jun 2023 18:12:38 +0000

Setting up an NPM package for React was always exhausting for me 😮‍💨

Long articles to follow, giant boilerplate repos with tools I never knew I need. It was too complex and overwhelming, even for an experienced dev such as myself. It shouldn't be this way.

So I've decided to finally fix React npm package development DX.

Introducing Create React UI Lib.

The Speedrun

Let's create a React.js component with TypeScript typings, Storybook docs, and publish it as NPM package.

Bootstrap the project by running this command:

npm create react-ui-lib@latest

Then open the project folder with your favorite editor, run npm start and get going!

When you're ready to share your library:

Build the package: npm run build
Open package.json, update the description, your name, the repository, and take out "private": true.
Run npm publish

And to share documentation on GitHub Pages:

Build Storybook: npm run build-storybook
Commit and push the docs folder.
Get your Pages going on GitHub.

And you're done! 😨

Demo

Here's a demo project bootstrapped with create-react-ui-lib:

GitHub
NPM

As you can see, it has docs deployed to GitHub Pages. I told GitHub to take pages from docs folder and boom — it just works!

Let's Dive in

Hey there! I know the headache. If you're looking to create and share a React component library in 2023, it feels like you have to spend forever just to get started.

Which bundler should I use?
How do I get TypeScript to make typings for my components?
How do I make a demo or documentation?
How do I set up NPM?

And so on...

Right now, there's no quick way to create a UI component and share it without spending a lot of time on set up.

So I've made a CLI that bootstraps a minimalistic template so you can start working on your next UI React component library in seconds. I've also made a few choices for you, so you don't have to worry about the tools too much.

Let's review the tech.

Vite

I've picked Vite for bundling. It's quick and easy to set up. It also has a library mode to simplify bundling a library. For module types, I've specified ES and UMD — you probably won't need anything else. But if you do, you can check out Vite's docs.

TypeScript

There's no doubt you're going to use TS in your React UI library in modern age. It's already in Vite, and type definitions for your package are pulled to dist thanks to vite-plugin-dts, so no extra work is needed.

Storybook

The template already has Storybook set up. It's used as a development environment and as documentation for your library. It's built to a docs folder which is under git, so no extra effort is needed to share it on GitHub Pages.

Bring Your Own Tools

I made this template as unopinionated as possible not to bother you with tools you don't need or will most likely configure yourself.

It doesn't come with pre-set ESLint.
No styling library is included, pick the one you like.
No pre-commit hooks. I think you should add them if and when you need them.

That said, I think including popular tools as options in CLI is a good idea. I'll wait for feedback and update the library as needed.

Let me know in the comments which tools you'd prefer to have pre-set. Styled Components or Tailwind? Maybe Reach or Radix? Or would you like ESLint with an AirBnb config? I'm all ears!

Give the project some stars on GitHub and feel free to create an issue.

If you liked the post, please hit reactions and subscribe.

Also follow me on Twitter and connect on LinkedIn.

The Correct :hover

Misha — Mon, 12 Jun 2023 13:32:36 +0000

If you're styling hover with CSS, I have some news for you.

THERE IS NO HOVER ON TOUCHSCREENS!

Why? Well, because hover is the state of an element over which a pointer (mouse cursor) is placed. Obviously, a smartphone does not know over which element a user's finger is hovering.

I don't what was the logic behind it, but for some reason mobile browser developers decided to enable hover styles when tapping on an element. The problem is that tapping on an element on a touchscreen leads to the styles hanging in a hover state.

What it looks like: the user taps a button, and it starts glowing as if a cursor has been placed over it. And this state is maintained until the next tap or scroll.

What to do?

There are Interaction media features in CSS. It's a media query that determines whether a user can hover over elements and whether they use a precise (mouse or stylus) or imprecise (finger) pointer. Example:

/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) { /* ... */ }

/* stylus-based screens */
@media (hover: none) and (pointer: fine) { /* ... */ }

/* Nintendo Wii controller, Microsoft Kinect */
@media (hover: hover) and (pointer: coarse) { /* ... */ }

/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) { /* ... */ }

If you're using SCSS, please write yourself a mixin.

And if you're using Tailwind 3+ just go to your config and set hoverOnlyWhenSupported to true:

// tailwind.config.js
module.exports = {
  future: {
    hoverOnlyWhenSupported: true,
  },
  // ...
}

If you like the article, please hit reactions and subscribe.

Also follow me on Twitter, connect on LinkedIn.

5 Ways to Make Mobile Frontend Look Like a Native App

Misha — Mon, 12 Jun 2023 13:03:44 +0000

When I create a PWA, hybrid app, or even just mobile markup, I want the interface to feel like a native app. It's difficult to achieve native smoothness on the web, that's true. But even fast and beautiful web apps are easily distinguishable from native ones due to the browser-specific UX.

In this article, I will show several tricks that might even make experienced users doubt that they are not facing a native interface. I used these tricks in the mobile version of Timestripe, examples in the article will be from there.

Adding a Manifest

The Web App Manifest is part of the Progressive Web Application (PWA) technology.

A PWA is a web application that can be installed on a device and launched without a browser interface in its own window. A good PWA is awesome. Instant installation, access to native APIs, offline-first, and so on.

To turn a site into a top-notch offline-first PWA, it's not a one-sprint job. But for starters, you can simply add a manifest.json to the static folder, then when adding the application to the desktop, it will launch separately from the browser! Then, you can tweak the rest of the PWA features, read about it here.

More about web app manifests at MDN.

And here you can see the tiny manifest of Timestripe.

Setting Transparent -webkit-tap-highlight-color

The -webkit-tap-highlight-color property determines the color of semi-transparent rectangles that appear above interactive UI elements during pressing.

This feature is necessary just in case, so that the user understands that an interaction with the interface has occurred. Therefore, if your UI elements have no issues with visual feedback, you can confidently make these highlights transparent:

body {
  -webkit-tap-highlight-color: transparent;
}

Fixing hover styles

(pay attention to the "Goal options" button)

There is no hover on touchscreens! Please see my article on the topic.

Disabling pinch-to-zoom

Because native apps do not zoom!

Set user-scalable: 0

<meta 
  name="viewport" 
  content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
/>

Removing Overscroll in Safari

By overscroll, I mean the visual effect of scroll elasticity. In itself, it's not something bad, but an experienced user will smell the scent of the web at the sight of it.

There is a good article about it.

Bonus: use-gesture

For React applications, there's a superb tool - the use-gesture library which has a very convenient API. With its help, you can easily add support for swipes and other gestures to a React component. The documentation includes beautiful examples, including the use of react-spring. So far, these two libraries (react-spring + use-gesture) have provided me with the best DX for complex interface animations.

Perfect Code Makes Everyone Lose

Misha — Tue, 06 Jun 2023 18:07:35 +0000

Perfect code may seem like the ideal goal, but aiming for it can actually lead to loss for everyone involved.

Why?

It sucks up time and resources like a black hole.

Longer hours of work? Check. Higher costs? Double check.

It's a quick ticket to burnout and a slow ticket to progress.

While you're busy polishing every bit of your code, important tasks get left in the dust. Does it make you a coding superstar? Nope, just a worker ant stuck in the endless cycle of 'improvements'.

Your team? Stuck trying to decode your masterpiece instead of pushing the project forward. And all for what? A shiny, 'perfect' code that took twice the time and money it should've?

Here's a hint: aim for 'good enough'. It's fast, it's cheap, and it does the job. No hassle, no waste. Just effective problem-solving.

But what is ‘good enough’ anyway?

I've got a simple checklist:

Does the code meet the spec? Write code, make sure it meets the requirements and move on.
Does the code follow your codebase rules? Keeping things consistent is a must for easy reading and maintaining. Use linters and formatters to automate code convention checks.
Does the code pass the tests? Well, that's if you've got tests to begin with. If not, trying to introduce them outside of the task's initial scope isn't a wise move.
Does the code smell... not too much? This is going to be specific to your particular case, trust your gut feeling.

As long as you stick to these simple checks, you should be fine. Just don't over-engineer.

But what is over-engineering?

Over-engineering is like building a spaceship when all you needed was a bike. It's when you take a simple task and inflate it with complexity that isn't necessary.

Maybe you find yourself continuously refactoring the code you've just written, or messing with parts of the code that weren't part of the original problem. Or, adding unnecessary features for a future that may never come. These are flashing red lights on the road from 'good enough' to over-engineering.

Remember, it's about solving the problem at hand, not crafting a masterpiece for the ages.

If you have something to add, please leave a comment.

Follow me on Twitter and connect on LinkedIn.

Is your package.json safe?

Misha — Wed, 26 Oct 2022 12:39:55 +0000

Let's do a simple check: open any JS project that you have at hand and try to find the ^ symbol in the package versions. If you don't have one, congratulations! Otherwise, I have bad news for you.

“Compatible” versions

By default NPM saves package versions in package.json with ^ prefix in front of the version number.

^version is described as “Compatible with version” in NPM docs which means “any minor or patch version equal or higher than specified”.

The problem with such versions is that after removing node_modules and package-lock.json and running npm install some packages may be upgraded to higher patch or minor versions without you knowing it.

This shouldn't break anything because usually package developers follow semantic versioning rule saying that breaking changes can only be introduced in major version updates.

But in reality there is no guarantee that new minor version of a package wouldn't break something in your app. This happens even for well-tested and well-maintained packages with large community like Webpack (see issue #8082).

Security

But there is also a much worse problem: security risks. Imagine that a hacker gets access to the NPM account of the owner of some popular package. Publishing a patch version with malicious code would immediately make all the applications using this dependency (or even package that depends on this dependency) vulnerable. You can easily find examples of such attacks by googling 'npm package hack', here is one of them: DeFi Exchange dYdX NPM User Account Gets Hacked

How to fix the problem

Add save-exact=true to your package.json. This would make npm install specific versions of the packages that are used in your project.
Remove ^ signs from the package versions in package.json. Or replace this inexact versions with actual versions of installed packages. You can find them in package-lock.json.

But there is a simpler solution: a CLI tool called exactify.

I've created it to automate the process of replacing “compatible with” versions with exact versions of installed packages taken from package-lock.json. It also adds save-exact=true to your .npmrc file which forces NPM to save exact versions for further package installations.

Just type npx exactify in the root of your project and see what happens!

Thank you for reading

Let me know if you found this useful. If you have any suggestions, feature requests or bug reports, feel free to fill an issue or open a PR on GitHub. Stars are kindly appreciated!

Thank you for reading! Don't forget to hit the like button and leave a comment bellow ✨