Looks familiar?

This can happen to your app and your users can lose work because of maxed out connections to Postgres.

Railway does not let you manually edit the max_connections config anywhere in their dashboard. Probably for the better, since this would be a bandaid and not a proper fix.

This is where PgBouncer comes in.

Install the template made by Brody and it will automatically pre-fill all the necessary Postgres variables from your Railway project.

If you have just one database in that project, then it's seamless. If you have more than one then you're gonna need to manually check / modify the template's variables before deploying.

After you are done deploying the template, go ahead and create a public domain for PgBouncer in the settings. After that is done update your app's environment variables to use the new DATABASE_PUBLIC_URL from the PgBouncer service which you can easily copy from the Variables screen.

Optimizing for serverless

For an app that uses Next.js, transaction mode is the right choice — it returns connections to the pool after each transaction, so they're shared much more efficiently across serverless functions and Server Actions deployed on Vercel.

You can set PGBOUNCER_POOL_MODE to transaction to enable this.

Just make sure you disable prepared statements in your ORM of choice because PgBouncer can route your next query to a different backend connection that doesn't have the prepared statement and cause issues.

Drizzle, which runs on node-postgres under the hood, does not use prepared statements so you are good to go out of the box.

More reading about different pooling modes here:

Remember that to-do list from 2 years ago? Those tasks that seemed impossible to do. If only “you had more time” to focus.

I spent years staring at my to-dos that would never materialize. They were taking up precious cognitive load and preventing me from taking action on other things. Just a single line with a few words causing distress. A task so simple but so out of reach.

I wanted to integrate a simple CMS for this website and I finally did. But there was one key feature that wasn’t fully aligned with my mental model. I sent an email to the founder asking if there was a way to send a webhook when a new post was created.

Instead of waiting around I ripped out the service I just integrated 15 minutes earlier and told Claude to build a custom solution tailored to my needs.

By the time I got a reply I had a fully fleshed out custom CMS integrated into my website with even more features.

Of course the answer from the founder was "no".

I'm writing this post using the rich editor Claude built.

If you can’t spare 8 hours each day to get a big project done, do something small and see the compounding effects later.

Get unstuck. Gain momentum. Even if it's not good enough, it's much easier to iterate on something that exists than starting off with a blank slate.

The mantra of "Why would you make this when [thing] exists already?" is played out.

With the rise of AI tools like Claude Code and Cursor there is no excuse not to build something you want, exactly how you want it.

People love to laugh and complain about yet another to-do app but they all have a reason for existing.

• High subscription price? Build your own.

• Don't like the design? Build your own.

• Lack of specific features? Build your own.

• Scared it might shut down in a year? Build your own.

So many recipes for making the same meal exist. Some people only want it done a specific way. Others are fine with whatever as long as it has the same shape and form.

Those who end up cooking something that tastes great to the masses are able to turn it into a business.

After all, the cheeseburger from McDonald's did not start as an item eaten by billions. Two brothers had to make a burger they liked first.

Focus on what you want and what works well with your mental model. The hypergrowth mindset will only kill your desire to make something good and have fun while doing it.

Software for one+

Build it for yourself first then share it with friends.

For some people your app's mental model might fit their own and they'll love it. Maybe they will give you some useful suggestions on how to make this even better for both of you.

(This is what happened with my iOS app Pixeldrop)

But if they don't, they can create their own version because there's nothing stopping them now.

Use existing systems

Sometimes you don't even need to build a full app, you can just use an existing API and create something small that fixes what the original product lacked for you to be fully satisfied.

I use an Oura Ring for sleep tracking but I didn't like how my sleep pattern data was displayed in the Oura app.

Looking around the web for solutions produced results that were either too much effort to set up or did not match my mental model of what data I wanted to focus on.

So instead I found the Oura API and looked at what I can extract from the responses. This kicked off a custom interactive dashboard with my sleep data.

I published it online and sent a link to my friends. This tool ended up being super helpful because now they bully me to go to sleep earlier if I'm still up sending messages.

Start small and get it done. You might be surprised how fun it is to solve your own problems with software tailored exactly to your needs.

If you need an affordable and performant way to host your app, bot, or microservice I can recommend using Railway.

If you haven't tried Claude Code yet, you can use my guest pass and get a free week by using this link.

You probably ran into a bug where your video that had muted, loop, playsinline, autoplay properties set was not playing and had a giant play button overlay on it when using Safari.

This happens due to Low Power Mode. Apple prevents automatic playback of any video with LPM enabled.

Unfortunately there is no way around it other than getting the user to press the native play button or a custom one that calls the play() function on the video element.

No way to detect it

iOS does not expose a way to detect if Low Power Mode is enabled to prevent fingerprinting risk when websites track you.

Three.js and React Three Fiber also affected

With Low Power Mode enabled, you will not be able to autoplay a video plane inside a Three.js scene either without user interaction.

WebP workaround for short videos

If this is a tiny decorative video there is a possible way to work around this issue. Safari treats animated images differently than videos and lets them autoplay without any restrictions in LPM.

You're going to need to use ffmpeg to convert your video into WebP first.

Then set up a component that loads up the video and checks if it can be played. If playback fails then hide the video element and show an <img> with a WebP source in its place.

However, I truly do not recommend this method as the WebP file will most likely be much larger than the original video and take longer to load + use even more resources.

Easier to just let go and give up. You win this one, Tim Apple. 😩

It's always good to have a place online that you can call home and experiment with. These sites are all full of personality and let you get a glimpse of what goes on in the mind of their creators.

I'm just going to drop the links without saying what I like about each site. You can form your own unbiased opinion.

Hope these inspire you. Some might surprise you.

Presented in no particular order.

But please make it your own and not just a blatant copy of someone else's website. No stealing and pretending you had an original idea without giving credit, okay?

Want to include rich link previews like these on your own website?

Yes, this also works with Safari on macOS 26 Tahoe, iOS 26, iPadOS 26, and visionOS 26.

I just spent over 30 minutes looking for a way to only target Safari with CSS media queries and could not find a reliable way that works with Safari without also targeting Chrome.

Looking through the compatibility table on caniuse.com you can spot that Safari 16 and above has a unique property which is not supported by Chrome or Firefox called hanging-punctuation.

Using that property and -webkit-appearance we can target Safari specifically until any other browser decides to support it.

@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
  .safari-only {
    background-color: red;
  }
}

✦ 2024 Update: You can also chain it with font: -apple-system-body to make this more bulletproof. Thanks to Saber Hayati for the tip.

Demo

If you open this page in Safari, the right column will be red.

Using this method with Tailwind CSS v3

You don't have to be limited to just CSS. Extending your Tailwind config with a custom plugin that adds a safari-only: variant to your Tailwind config is pretty easy:

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    function({ addVariant }) {
      addVariant('safari-only', '@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none)');
    },
  ],
};

Using this method with Tailwind CSS v4

Tailwind v4 uses a CSS-native @custom-variant directive instead of JavaScript plugins. Add this to your main CSS file (e.g., app.css or globals.css):

@custom-variant safari-only {
  @supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
    @slot;
  }
}

The @slot marker indicates where the utility styles get inserted. Usage is the same as in v3:

Safari only

Nice, but why does it also target Arc, Chrome, Firefox, Brave, Internet Explorer, etc. on my iPhone, iPad, or Vision Pro?

Because iOS and iPadOS (and visionOS) use the Mobile Safari rendering engine for all webviews. This means if you are using Chrome or any other “browser” on your iPhone it is still Safari under the hood.

That’s the case until these apps ship with their own rendering engines which will start being possible with iOS 17.4 for the EU.

I keep searching for a perfect workspace mouse to use with my Mac. One that will make me finally forget about the Logitech MX Vertical which is the gold standard of ergonomics, in my eyes.

Unfortunately, it doesn't seem like Logitech will be releasing a work mouse with polling rate over 125Hz anytime soon based on the brand new MX Master 4 that came out this month.

Razer Pro Click V2 Vertical was awful and I returned it.

Then a few months later reviews for the Keychron M5 Vertical showed up on the internet, so naturally I had to order it to try it out for myself. Pricing is $70 in the US and around $95 in Europe.

I decided to pick up the white version because it might hide the wear and tear a bit better down the line.

Polling Rate

This mouse can go up to 8000Hz polling rate using the 2.4GHz dongle. Honestly, that is way overkill for your standard work setup and will drain the battery faster for zero perceivable benefit.

But we love to see it. Finally someone taking the polling rate seriously. It's buttery smooth.

I'm keeping mine at 2000Hz at 2800 DPI which I think is a sweet spot for battery life and responsiveness.

Battery Life

With the settings above, the mouse lasted a full month on a single charge with pretty much daily 6-12 hours of use. No complaints here. That's good enough for me.

Software

Keychron has their own app for configuring the mouse and it's a web app! Which means no bloated software to install, no updates to worry about, and you can configure it from any device.

You can remap buttons to key combos like ⌘W natively, which is great.

Your configuration is saved to the onboard memory so you can easily switch between devices without having to think about software or configuration.

However there is no option to change the sensitivity of both scroll wheels. The default sensitivity of the horizontal wheel is too low. While the vertical wheel's scroll speed is a tad too fast for me.

That can be easily solved with SteerMouse but I decided to keep it simple and use default settings while I'm still getting used to this mouse.

Photo courtesy of LTT Labs

Comfort

I was hoping this would be almost a clone of the MX Vertical in shape and angle but it's not. The mouse sits lower and offers less support on the palm and for your thumb. I end up dragging my pinky on the desk while using it. There is also a chance of pinching it between the mouse and the desk.

Maybe I should 3D print a custom pinky shelf to prevent this from happening?

Here are a few other gripes:

Keychron M5 Vertical (left) has an angle of 47° while MX Vertical (right) has a more comfortable 57°

Conclusion

Photo courtesy of LTT Labs

Keychron M5 Vertical is a great contender in the vertical mouse market. Excellent polling rate, decent build quality, and a non-invasive software experience.

However, it is not perfect.

The comfort could be better by lifting the wrist a bit higher off the table. The grip is a bit too slippery and the angle is not as comfortable as the MX Vertical.

If the MX Vertical stopped existing tomorrow, I would be happy with the Keychron M5 Vertical.

So far I spent around 3 weeks of regular use with the Keychron. Going to use it as my daily driver for the forseeable future.

I really wish these companies started including a USB-C wireless dongle by default with an extra USB-C to USB-A adapter.

Why is this backwards?

You have to add extra bulk to the dongle to plug it into a MacBook with another adapter for no reason. I'm sure most PCs and laptops have a USB-C port these days.

For full technical specs and a more detailed review, check out LTT Labs.

React Native does not have the best reputation when it comes to quality of user interfaces. People associate it with cheap, low-quality apps which is a misconception. Just look how many popular apps have been built with Expo and React Native.

As a mobile engineer, you need to stay on top of gestures, animations, haptics, navigation, and render performance. Especially when you are competing with some of the best teams in the world using UIKit, like Family.

It all comes down to craft.

You don't want to be porting vibe coded shadcn slop from web to mobile because it goes against the grain of the platform.

Putting in extra effort will pay off. Make your users feel like the app is an extension of their phone and not a foreign object.

Luckily, there are a lot of resources out there that can help you speed up the process of making a great app or teach you how to do it properly.

I've compiled a list of things that I keep coming back to.

Some links on this page are affiliate links. If you purchase something using my referral code, I will get a small commission. I only recommend products that I have personally purchased and/or found useful.

Animate React Native

Over 100 animated components for your app using Reanimated, Gesture Handler, and Moti. Many patterns from popular apps that will make your interactions feel more native.

Give the demo app a spin and see for yourself.

Make It Animated

Incredibly detailed recreations of patterns from popular iOS apps like ChatGPT, Slack, Discord, Raycast, Instagram, GitHub, Twitter, Pinterest, and Linear.

You get full access to the source code and even a mobile app to try out the animations on your own devices.

React Native Components

There is a whole library of popular apps and their parts recreated in React Native with code that you can copy and paste into your own app. Previously named Landing Components.

Reactiive

Lots of components and patterns you might need for a modern mobile app. More granular than Landing Components, but also very high quality. 110+ React Native animations
with Skia, Reanimated and Gesture Handler.

They just went open source on September 23, 2025 and everything is free and available on GitHub.

React Native Glow

When someone tells you to "make it pop", you can start by adding animated gradient glows around your buttons and elements.

Zeego

The easiest way to get native context menus working on iOS and Android. Radix-style component API makes it straightforward to use. You have a lot of options to customize the menu to your liking.

Plus, on iOS you can always reach into react-native-ios-context-menu directly if you need.

Galeria

Beautiful image gallery library for adding photo grids and zoomable images with natural gestures.

react-native-fast-squircle

Do you want to make your app feel even more native? Smooth out those buttons and elements with a squircle shape.

callstack/liquid-glass

Yes, a native implementation of Liquid Glass from iOS 26. Good luck doing this in Flutter.

Spotted in Prod

Collection of best iOS apps shipped to production. You can find a lot of great patterns and animations here that can get you unstuck. Absorb and learn.

Tiny humblebrag but my app, Pixeldrop, is also featured on SIP 😇

---

Hope some of these resources end up being useful.

More to come.

Subscribe to the newsletter below to get notified when I publish updates to this list. Or follow the Telegram channel.

I've been in search of a perfect workspace mouse for a long time.

Even considered trying to build my own out of parts from a Logitech gaming mouse with a Lightspeed sensor to fit into the MX Vertical enclosure.

{/ Unfortunately the layout of the PCBs and scroll wheel placement would have been impossible to fit in there without soldering (which I know nothing about yet). FDM 3D printing would not match the quality of injection molding anyway. /}

Some people on Reddit have attempted to do this but the results are not ideal.

{/ I've gone through a lot of mice throughout the years but never landed on one that had it all. /}

There was no vertical mouse with a high polling rate on the market until now.

Meet the Razer Pro Click V2 Vertical

A friend sent me a link to a YouTube video of someone unboxing and reviewing this thing. Of course the review was very positive — just like all the pre-release sponsored propaganda these tech channels put out on a regular basis. 🤢

I saw that it was wireless, vertical, and had a 1000Hz polling rate — exactly what I was looking for.

It was time to hit that Buy Now button on Razer's website and try it out for myself.

The price was a whopping €129.99 ($150) but I was too excited to care. Finally a mouse that might be the one?

Don't forget to do your own research...

I ordered the mouse without checking if it was fully compatible with macOS. A risky move because without the right software you can't turn off the vomit inducing RGB lights.

Razer supported macOS with their peripherals for years so it must just work, right?

Turns out the required software (Razer Synapse V4) was not available for macOS when I unboxed the mouse. You needed to configure it on a Windows PC with Synapse V4 because older versions that work on macOS could not detect this mouse.

Naturally, I procrastinated doing that for almost a week and focused on work instead.

Thankfully, when I decided to pick up the mouse again and download the software to my PC, a button popped up on Razer's website saying that Razer Synapse V4 was available for Mac as an early preview.

Another problem magically solved by procrastinating it away.

Configuration

First thing that hits you in the face is you need to create a Razer account to configure the mouse, like you're signing up for Facebook... Completely unnecessary process that should be optional.

You have plenty of options to configure RGB, standby mode, and sensitivity. When it comes to remapping the actual buttons, that's where this thing falls short.

My biggest issue with the software was the inability to map Back or Forward globally to the side buttons. You could only use those in a "Web Browser" profile.

Strange choice to limit this feature because it is available in the software but only for a specific app profile.

Thankfully that's something that can be easily solved with third-party software like SteerMouse, which I love.

I set the top button as ⌘W for closing tabs and windows while the bottom one was set to Back.

I won't even talk about the "AI" button gimmicks.

Comfort

This Razer mouse is simply not comfortable to use for me. The way it's profiled is very awkward. The arch of the hand lacks support and wants to slide off onto the desk when you try to grip in a relaxed position.

The mouse is too slippery to be picked up easily. The bumpy texture is nice to the touch and probably much more durable than on any other mouse but it doesn't give you a good grip.

via Razer on YouTube

I guess they want you clawing this thing and lifting your wrist up from the desk like you're some kind of competitive gamer.

You either claw it and put tension in your wrist or have the tips of your fingers extend past the left/right click buttons and float in the air.

Kind of like when you put your toes past the edge of a shoe as a kid and they end up touching the pavement.

Using the mouse this way is not ergonomic or comfortable for longer periods of time. And if you have a relaxed grip, your wrist will end up sliding on the desk and rubbing on the bone too much.

Keep in mind this mouse is meant to be for productivity, not gaming. Their internal SKU is RazerProClickV2-WirelessProductivityMouse-VerticalEdition.

I really thought I could get used to it but after 3 weeks I ended up having way more pain in my wrist than when using a regular non-vertical mouse for extended periods of time.

The angle of the grip is just too extreme at 71.7° compared to MX Vertical's 57°.

---

Picking up a Logitech MX Vertical and using it for a few minutes really highlights how much better profiled it is compared to the Razer. You can feel the wrist strain and tension going away instantly. Logitech really nailed the ergonomics on this model.

Conclusion

While the product has impressive specs and technology, the ergonomics are simply not there for me.

I really wanted to like this mouse but I'm sad that it's so uncomfortable and clunky to use. I started the process of returning this mouse at the moment of writing this review. Had to pay $15 to ship it back to Razer in the Netherlands because they don't offer free returns in Europe.

Razer, stick to gaming mice and leave the productivity mice to people with more experience.

I guess we're back to waiting for Logitech to release an improved MX Vertical with a 1000Hz sensor.

via Microsoft on Twitter

Lately, I've been using the Logitech G502 X Plus with my Mac. It's got a Lightspeed 1000Hz sensor, free-spin scroll wheel, and a bunch of side buttons.

Tempted to go back to the MX Vertical again but the laggy cursor response is painful to watch.

The internet is full of links that lead to other places vying for your attention.

Wouldn't it be nice if we knew where those links took us before we clicked them?

Rich link previews give us instant context without leaving our current flow. They transform basic URLs into interactive elements that boost engagement by surfacing key metadata upfront.

You don't have to guess when a link gets presented with a small preview.

And while some platforms (like Instagram) might break their OG tag support, we can build better, more reliable experiences in our own apps. Or even in Telegram chats.

Let me show you how to implement robust link previews using the free metadata.vision API and React Server Components (RSC).

You have a prime example right here. Which link would you rather click?

Demo of what we’re building

Getting the data

Let’s start by creating a server function that will fetch the OG metadata for a link.

async function getMetadata({ site }: { site: string }) {
  try {
    const req = await fetch(https://og.metadata.vision/${site}, {
      next: { revalidate: 60  60  24 }, // Cache for 24 hours with Next.js
    });
    const response = await req.json();
    return response.data;
  } catch (error) {
    console.error(error);
    throw new Error(Failed to fetch metadata for ${site});
  }
}

Rendering the link preview

Now we can create a React Server Component that will render the link preview.

1. By default, we will show a big video preview if the link has a video.
2. If the link has no video, we will show a big image preview.
3. If the link has no video or image, we will show a simple link with a favicon next to the title.

Customizing

Let’s give it some props that will let us style it differently depending on what kind of metadata we want to show.

On smaller screens, the compact prop will not affect the layout as to not cramp the media and text too much.

Final code

Here is the code for our component, styled using Tailwind CSS:

``link-preview.tsx

``

This should give you a good base to work with. Tweak the styles to your liking or remove Tailwind altogether.

If you found this useful, follow me on Twitter or subscribe to the newsletter.

Thanks to Jakub Ziemba and Brandon Johnson for feedback on an earlier draft of this post.

I have a grid of project tiles on my homepage that show dynamic stats at the bottom. It completes the design and makes these tiles a bit more interesting.

Being able to see the stats change over time is really motivating. Small, but needed push to keep working on these projects.

Looking for a way in...

NPM does not have any documentation about their private API that I could find. Snooping around network requests does not reveal any useful endpoints for grabbing this data because they are rendering each package page on the server.

After digging around the internet for a few minutes I found an article by Edoardo Scibona that explains how to use NPM's registry API endpoint to get the weekly downloads count for a package.

Getting the data

You can get the downloads count of a package published to NPM with a simple fetch to this endpoint:

https://api.npmjs.org/downloads/point//

Replace with your package name and with one of these supported values:

Packaging it up into a function for Next.js

Now we can create a simple function that will fetch the data for us and cache it for an hour.

That's where Next.js' revalidate comes into play.

You can lower the value if you want to have more up-to-date stats, but keep in mind that it will cause more incremental static regenerations (ISR) on Vercel when people visit your site.

``npm-stats.tsx
type Period = "last-day" | "last-week" | "last-month" | "last-year";

async function getNPMPackageDownloads(packageName: string, period: Period) {
const res = await fetch(
https://api.npmjs.org/downloads/point/${period}/${packageName},
{
next: { revalidate: 3600 }, // 60 (s) * 60 (min) = 3600 seconds (1 hour)
},
);
return res.json();
}

  ⚠️ Warning: If you omit the revalidate option, the data will remain cached
  and your stats will be stale even across deploys.


Displaying the data

Using the function inside a React Server Component is as simple as importing a hook. Here is an example:

page.tsx
export async function Projects() {
const { downloads } = await getNPMPackageDownloads(
"react-farcaster-embed",
"last-week",
);

If you want to do the same thing for GitHub stars, you can use the GitHub API and extend your function with another fetch. Just remember to use Promise.all()` for best performance.

Making a new project with Payload CMS?

Trying to deploy it on Railway but all you're getting is a vague Application failed to respond screen, no errors in the console, and completely no reference in the docs?

The fix is dead simple. You need to set the PORT environment variable to 3000 in your Railway environment.

Good luck with the rest ✌️