DEV Community: Seerat Awan

How to Deploy GitHub Org Repos to Vercel for Free (Bookmark This)

Seerat Awan — Tue, 30 Dec 2025 05:10:11 +0000

If you ever hit this error on Vercel:

"Cannot deploy from private repository on GitHub organization... Upgrade to Pro"

Bookmark this. You'll need it.

Deploy GitHub Organization Repo to Vercel Hobby Plan for Free (2026 Guide) | Capturable Blog

Can't deploy your GitHub organization's private repo to Vercel's free Hobby plan? Here's the proven workaround using GitHub Actions to mirror your org repo to a personal repo and deploy for free.

capturable.io

5-minute fix using GitHub Actions. No $20/month Pro plan needed.

You are welcome 😉

Crafting Unforgettable Digital Experiences, One Project at a Time

Seerat Awan — Tue, 09 Apr 2024 20:01:45 +0000

I'm Seerat Awan, a front-end development expert committed to delivering exceptional user experiences.

Read about how I can unlock your project's full potential:

Hire the best Front-End developer: Unlock Next-Level User Experiences — Seerat Awan

As a seasoned Full-Stack Engineer, I, Seerat Awan, specialize in building exceptional SaaS platforms that deliver unparalleled user experiences. With over 8 years of expertise, I am the ideal partner to elevate your project's front-end and drive lasting success.

seeratawan.me

React Custom Hook: useDidMountEffect

Seerat Awan — Sun, 31 Mar 2024 16:19:27 +0000

In React development, managing side effects is crucial to building efficient and responsive applications. While the built-in use effect hook is a powerful tool for handling side effects, there are cases where you may want to skip the effect during the initial render and only execute it on subsequent updates based on specific dependencies.

This is where the useDidMountEffect hook comes into play. This custom hook is designed to provide precise control over when side effects are executed, helping you optimize your React components and improve their performance.

Find out how to create it through this comprehensive guide -> https://www.seeratawan.me/blog/react-custom-hook-use-did-mount-effect/

Cross-Domain Tracking Implementation

Seerat Awan — Thu, 15 Feb 2024 07:33:55 +0000

At Usermaven, I built a seamless way to track users across domains without extra implementation work. Read on to learn how I designed and implemented it.

How I Implemented Cross-Domain Tracking at Usermaven — Seerat Awan

Learn how I designed and built a transparent cross-domain tracking solution at Usermaven to connect user data across multiple websites.

seeratawan.me

Lazy Load Fonts in Next.js with Web Components

Seerat Awan — Mon, 08 Jan 2024 20:56:05 +0000

As a developer and co-founder of Postnitro.ai, I've tackled numerous performance hurdles.

One solution I'm really proud of is the creation of a custom web component <font-previewer>.

Learn how I revolutionized font-loading in Next.js in my latest blog post!

Lazy Load Fonts in Next.js with Web Components — Seerat Awan

Learn to lazy load fonts in Next.js by building a custom web component with TypeScript. Conditionally loading fonts improves performance by preventing massive files from being served to all.

seeratawan.me

Postnitro.ai has officially launched on Product Hunt! 🚀

Seerat Awan — Mon, 20 Nov 2023 11:44:27 +0000

We're thrilled to announce that Postnitro.ai has officially launched on Product Hunt! 🚀

PostNitro 🎉🎉 helps you create carousels for social media in minutes using AI.

It's been an amazing journey creating this tool, and we're so excited to share it with the Product Hunt community.

If you get a chance, we'd hugely appreciate your upvote on our Product Hunt page: https://www.producthunt.com/posts/postnitro-ai

This launch means the world to our small but dedicated team. Please show your support by checking out Postnitro on Product Hunt and sharing with fellow creators!

AI-Powered Carousel Maker - Create Carousels 10x Faster

Seerat Awan — Fri, 06 Oct 2023 19:18:17 +0000

I'm so pumped to tell you about Postnitro.ai - the AI carousel maker we built that creates stunning carousels in minutes.

All you do is enter a topic and Postnitro generates eye-catching carousels with optimized copy and branding tailored to you.

I'm not exaggerating when I say this AI is insanely fast and accurate. With Postnitro, anyone can create beautiful, high-converting carousels in under 5 minutes with zero design skills.

And since we built Postnitro to leverage the latest AI models, you can produce unlimited top-notch carousels at scale for free, customized to your brand and audience.

If you want a smarter, faster way to make carousel content that works on social media, you need to try Postnitro today. I'm really proud of the AI carousel maker I created and know it can take your marketing to the next level.

Let me know what you think once you see my AI in action! I'm confident Postnitro will blow you away just as much as it continues to amaze me each day. The future is here!

Free Carousel Maker And Generator - Postnitro

Best and fastest way to create a carousel for your LinkedIn, Instagram and TikTok

postnitro.ai

Automating Fonts Previews with Python and Pillow

Seerat Awan — Sat, 12 Aug 2023 12:27:51 +0000

Selecting fonts from lists is a pain when you cant visualize how they'll look. Thats why I wrote a Python script using Pillow to auto-generate font previews.

# we're importing the needed libraries
import json
import requests
from PIL import Image, ImageDraw, ImageFont
from io import BytesIO
import os

# open fonts.json file to load fonts
with open('fonts.json') as f:
    fonts = json.load(f)

# set directory for font previews
outdir = './font_previews'

# creates previews directory if it doesn't exist
os.makedirs(outdir, exist_ok=True)

# for each font in the fonts list, it will attempt the following:
for idx, font in enumerate(fonts):

    try:
        # downloads the font file from the URL provided in the font list
        response = requests.get(font['url'])

        # create a bytesIO object with downloaded font. This object behaves like a file object.
        font_file = BytesIO(response.content)

        # if the response from the server is not successful (status code 200),
        # it will print a message and will skip the rest of the loop for the current font
        if response.status_code != 200:
            print(f"Skipping font {font['postscript_name']} due to unsuccessful download from {font['url']}.")
            continue

        # creates a new image with white background
        img = Image.new('RGB', (500, 200), color='white')

        # we can now do drawing operations on this opened image
        draw = ImageDraw.Draw(img)

        # loads the downloaded font file to be later used on the image
        loadfont = ImageFont.truetype(font_file, 36)

        # calculates size in pixels of the font family string
        left, upper, right, lower = draw.textbbox((0, 0), font['family'], font=loadfont)
        w, h = right - left, lower - upper

        # calculates the center position in the image for our string to be placed
        text_pos = ((img.width - w) / 2, (img.height - h) / 2)

        # places the text (the font family string) at the calculated position
        draw.text(text_pos, font['family'], fill='black', font=loadfont)

        # sets the output filename
        outfile = os.path.join(outdir, font['postscript_name'] + '.png')

        # and saves the image in a PNG format
        img.save(outfile)

        # notifies by printing
        print(f"Saved {outfile}")

    except Exception as e:
        # handles exceptions during font handling, notifies about the error.
        print(f"An error occurred with font {font['postscript_name']}: {e}")

Read the full article here: https://www.seeratawan.me/blog/generating-font-previews-with-python-pillow-for-enhanced-ux/

Unlock Innovation: How to Rewire Your Brain for Out-of-the-Box Thinking

Seerat Awan — Mon, 31 Jul 2023 05:21:32 +0000

Challenge assumptions, disrupt routines, and stimulate creativity using the B.R.A.I.N. framework.

Unlock Innovation - How to Rewire Your Brain for Out-of-the-Box Thinking — Seerat Awan

Discover techniques based on neuroscience and cognitive research to purposefully disrupt habitual thinking and spark creative insights. The B.R.A.I.N. framework shows how breaking patterns, restricting choices, analyzing assumptions, inspiring novelty, and napping can reshape neural connections for innovative thinking.

seeratawan.me

Why I Move from Pixels (px) to Relative Units (rem) in CSS

Seerat Awan — Mon, 31 Jul 2023 05:17:22 +0000

Switching from pixels to relative CSS units like rems improves accessibility, responsiveness, and maintenance of sites over time.

Why You Should Move from Pixels (px) to Relative Units (rem) in CSS — Seerat Awan

An in-depth guide on why you should move from using pixels (px) to relative units like rems for sizing elements in CSS. Details the benefits of fluid relative units for responsiveness, accessibility, and maintaining sites over time.

seeratawan.me

🚀 Check out useReducer!

Seerat Awan — Sun, 12 Mar 2023 16:10:16 +0000

Are you tired of using multiple useState hooks to manage your state in React?

🚀 Check out useReducer!

🙌 With useReducer, you can manage multiple states in your components without creating a bunch of useState hooks. By passing a reducer function and an initial state to the hook, you can easily update your state with the dispatch function.

👀 And the best part? useReducer is a lightweight solution that doesn't require any additional libraries or complex configurations.

💡 So, next time you find yourself creating multiple useState hooks to manage your state, try out useReducer instead. It's a simple and effective way to streamline your state management in React.

Cool library that I recently discovered: Zag.js

Seerat Awan — Sun, 05 Mar 2023 15:31:04 +0000

Today, I want to share with you a cool library that I recently discovered: Zag.js! 🎉

🌟 Zag.js is framework-agnostic, which means you can use it with popular frameworks like React, Solid, and Vue, and more without sweating over the logic. With Zag.js, you can focus on creating visually stunning UI components and let the toolkit handle the rest.

💻 This library is perfect for those who need to build custom UI components while minimizing the time spent reinventing the wheel by writing state logic from scratch.

📚 Whether you're building menus, accordions, dialogs, or any other UI component, Zag.js provides a wealth of pre-built state machines to choose from. You can find a complete list of available state machines in their documentation.

👨‍💻I highly recommend giving Zag.js a try. It's an excellent choice for building custom UI components in your web applications while ensuring accessibility, and it works with many frameworks!

🔗 Head over to https://zagjs.com/ to learn more about Zag.js and get started with building accessible UI components in your web applications!