Forem: Preet Suthar

Typeform was too expensive so I built my own forms

Preet Suthar — Fri, 11 Jul 2025 05:56:24 +0000

I'm a solopreneur and run a web design agency.

I create open-source apps, but I also work as a freelancer and designer. I was accepting any new freelance project via forms on my agency website.

I was using Typeform, but as time went by and more people submitted forms, it got more and more expensive. That time, I thought to use Google Form, but it was way too blocky and looked very unprofessional on my agency website.

So I thought to build my own forms for my own usage, and it turns out it almost doubled form submissions and inquiry calls.

I was happy, so I thought to build it for everyone and make it open-source.

I added AI functionalities using Vercel AISDK. I can generate forms almost instantly using AI and also added analytics AI so that users can talk with their forms—more like talk with their analytics data.

[https://ikiform.com](https://ikiform.com

I've been building this publicly, sharing updates on my X account preetsuthar17

I hope this product will be as helpful to you as it was for me. Would love your feedback pls

Preet

Prevent Spam Bot Attacks in Form Submissions

Preet Suthar — Sat, 24 May 2025 08:18:18 +0000

Spam bot attacks on forms can be a nuisance, leading to spam submissions and potential security risks. Here's a simple method to prevent spam bot attacks in form submissions using a hidden field.

Step 1: Add a Hidden Field

Add a hidden field to your form. This field should be invisible to users but visible to bots. For example:

const [honey, setHoney] = useState("");

<input
  type="text"
  value={honey}
  onChange={(e) => setHoney(e.target.value)}
  tabIndex="-1"
  area-hidden="true"
/>;

Step 2: Validate the Hidden Field

When processing the form submission, check if the hidden field is empty. If it's not empty, it's likely a bot submission.

const handleSubmit = (e) => {
  e.preventDefault();

  if (honey) {
    // This is a bot submission
    console.log("Spam bot detected!");
    return;
  }

  // Process the form submission
  console.log("Form submitted successfully!");
};

Complete Example

import React, { useState } from "react";

const Form = () => {
  const [honey, setHoney] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();

    if (honey) {
      console.log("Spam bot detected!");
      return;
    }

    console.log("Form submitted successfully!");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={honey}
        onChange={(e) => setHoney(e.target.value)}
        tabIndex="-1"
        area-hidden="true"
      />
      <button type="submit">Submit</button>
    </form>
  );
};

Actual users won't see the hidden field, but bots will fill it out, allowing you to filter out spam submissions easily. This method is simple and effective for preventing spam bot attacks in form submissions.

Actual Twitter thread: link

Add a badge to the filename in Fumadocs

Preet Suthar — Sat, 24 May 2025 08:16:58 +0000

This is the type of badge you can add to the filename in Fumadocs.

It is very easy to add a badge to the filename in Fumadocs.

first step is to extend the frontmatter schema.

go to source.config.ts file in root folder of fumadocs project and add the following code.

export const docs = defineDocs({
  docs: {
    schema: frontmatterSchema.extend({
      new: z.boolean().default(false),
    }),
  },
});

now we can basically add the frontmatter prop in lib/source.ts file.

Make sure to rename the lib/source.ts to lib/source.tsx

export const source = loader({
  baseUrl: "/docs",
  source: docs.toFumadocsSource(),
  pageTree: {
    attachFile(node, file) {
      if (!file) return node;

      const data = file.data.data as {
        new: boolean;
      };

      // JSX nodes are allowed
      if (data.new) {
        node.name = (
          <>
            {node.name}
            <div className="bg-fd-primary">NEW</div>
          </>
        );
      }

      return node;
    },
  },
});

now to use this we can just use new prop in the frontmatter.

---
title: "File Upload"
description: "Animated and interactive file upload component."
new: true
---

final result would be like this.

Guide to minimal website design

Preet Suthar — Sat, 24 May 2025 08:15:51 +0000

Minimalist website design is a refined art form focused on simplicity, clarity, and functionality. By stripping away nonessential elements, it highlights what truly matters and creates a seamless experience for visitors.

7 Principles of Minimalist Web Design

Embrace Simplicity
Prioritize User Experience
Showcase Quality Visuals
Leverage Whitespace
Highlight Content
Ensure Fast Load Times
Implement Clear Calls to Action

1. Embrace Simplicity

At the heart of minimalist design is simplicity. A straightforward, uncluttered layout with a restrained color palette, fonts, and graphics creates an inviting environment. Generous whitespace not only enhances aesthetics but also improves readability, allowing your content to shine.

A good example is SquareSpace website, simple and clean showing only content that is important

2. Prioritize User Experience

A user-centric approach is essential in minimalist design. Your website should be intuitive, with streamlined navigation and legible typography. Given the increasing use of mobile devices, ensure that your site is responsive and offers a smooth experience on all screen sizes.

3. Showcase Quality Visuals

Minimalism does not equate to a lack of visual appeal. Instead, select high-caliber images or illustrations that resonate with your brand’s identity. Opt for unique visuals rather than generic stock photos to add a touch of personality and distinction.

4. Leverage Whitespace

Whitespace, or negative space, is a critical design element that lends structure and focus to your layout. It helps guide the visitor’s eye toward key content and creates a sense of balance and harmony throughout the site.

5. Highlight Content

In minimalist design, content remains the focal point. Employ concise and precise language to communicate your message effectively. Use headings and subheadings to break up text, making it both engaging and easy to navigate, while avoiding distractions that detract from your core message.

Stripe‘s website is both functional and visually appealing. The website features a clean white background, straightforward typography, and plenty of negative space, making it easy to navigate and understand. The design highlights the company’s products and services without distracting users with unnecessary graphics or information.

6. Ensure Fast Load Times

A hallmark of minimalist design is its ability to enhance performance. By using a lightweight theme, compressing images, and minimizing extraneous code, you can achieve faster load times, thereby improving overall user satisfaction and search engine performance.

7. Implement Clear Calls to Action

While the design is minimalist, your calls to action (CTAs) should be unmistakably clear and compelling. Use direct language and contrasting elements to ensure that your CTAs stand out, guiding visitors seamlessly toward the desired actions.

Conclusion

In summary, minimalist website design is both an art and a science—a pursuit of elegance through simplicity. By adhering to these seven principles, you can craft a website that not only captivates visually but also delivers a superb user experience.

A minimalist approach ensures that every element has a purpose, transforming your website into a sophisticated, efficient, and enjoyable digital space that leaves a lasting impression on visitors. Embrace simplicity, enhance functionality, and let your content take center stage while delighting your audience with a touch of fun and refinement.

Force refresh page in Next.js

Preet Suthar — Sat, 24 May 2025 08:13:50 +0000

If you’re inside a React component, grab the router instance with the useRouter hook:

import { useRouter } from "next/router";

function MyComponent() {
  const router = useRouter();

  // reload the current page
  router.reload(window.location.pathname);
}

If you need to trigger a reload from outside a component—for example, in a plain utility module—just import the singleton Router instead:

import Router from "next/router";

// reload the current page
Router.reload(window.location.pathname);

Prefetching content in Next.js

Preet Suthar — Wed, 23 Apr 2025 04:50:18 +0000

When linking two pages in a Next.js application, the built-in <Link> component allows for seamless client-side navigation. Instead of triggering a full page reload like traditional websites, Next.js uses frontend routing to display the new page instantly, making for a faster user experience.

But that’s not all—Next.js also prefetches linked pages automatically. As soon as a <Link> element enters the viewport (i.e., becomes visible on screen), Next.js begins preloading the linked page in the background—provided it’s an internal link within your site. This makes navigation nearly instant when users click the link.

However, this prefetching behavior only works in production mode. If you're running your app in development with npm run dev, prefetching won't be triggered. To see it in action, stop the dev server, run npm run build to generate your production bundle, and start the app with npm run start.

You can observe this behavior in your browser’s Network tab. Once the page finishes loading (after the load event fires), links that are already visible (i.e., above the fold) start prefetching. Links that are out of view will be prefetched as the user scrolls them into the viewport.

Prefetching happens automatically on fast internet connections (like Wi-Fi or 3G+), unless the browser sends a Save-Data header indicating a preference for reduced data usage.

If you want to disable prefetching for a specific link, you can do so by passing prefetch={false} to the <Link> component:

<Link href="/contact" prefetch={false}>
  Contact
</Link>

How User Feedback Can Transform Your SaaS Product

Preet Suthar — Thu, 02 Jan 2025 04:40:52 +0000

Your product’s success doesn’t come from guessing what users want—it comes from listening to what they actually need. Let’s explore how you can turn user feedback into your secret weapon.

Why User Feedback is a Game-Changer

Imagine this: you spend months building what you think is the perfect SaaS product. It looks great, it works flawlessly, but after launch, users aren’t as thrilled as you hoped. That’s when feedback becomes your guiding star.

How to Collect Useful Feedback

Pro Tip: Don’t sit back and wait. Go out and ask your users for their thoughts.

Here are some effective ways to gather feedback:

In-app Surveys: Add short surveys that pop up at the right time—like right after users try a new feature. Ask something simple, like, “Did this feature solve your problem?” Fresh experiences lead to honest answers.
User Interviews: Chat directly with users, both happy and unhappy ones. These conversations often uncover issues that numbers alone can’t. One founder completely revamped their onboarding process after learning users felt overwhelmed in the first 10 minutes.
Usage Data: Pay attention to how users interact with your product. If a feature you thought was a must-have barely gets used, that’s valuable information.

Managing Feedback Without Losing Your Mind

The Challenge: Juggling feedback from emails, chats, surveys, and more can feel chaotic.

Here’s a simple solution: Rate This Tool. It’s a platform where you can:

Collect all your feedback in one place
Spot trends across platforms
Rank feature requests by priority
Make smarter decisions based on real data

Turning Feedback into Real Improvements

Here’s how top SaaS companies use feedback to stay ahead:

Prioritize Smartly: Not all feedback is created equal. Use a scoring system to rank requests based on how often they come up, how much impact they’ll have, and how hard they are to implement. If lots of users mention the same issue, it’s probably worth tackling.
Start Small: Instead of rolling out huge changes, test small tweaks first. One SaaS company simplified their settings page after users complained it was confusing—and saw a 25% boost in user retention.

What to Do When Things Don’t Go as Planned

Lesson Learned: Feedback can guide your next big idea Even if your product doesn’t take off.

Document Everything: Record all feedback, including the context. Sometimes a failed idea plants the seed for a successful one. For example, Slack grew out of feedback from a failed gaming project.
Find the Patterns: Look for common threads in feedback from different users. Sometimes, the problem worth solving isn’t the one you originally set out to fix.

Closing the Loop with Your Users

Always let your users know their voices matter:

Thank them for their feedback
Update them on what you’ve changed because of it
Be transparent about why some suggestions might not work
Keep them involved in your journey

The takeaway: You don’t need to get everything right on day one. Success comes from creating a feedback loop that helps you keep improving.

Ready to Take Action?

Start managing your feedback better today with Rate This Tool. When all your user insights are in one place, spotting what matters, making better decisions, and building a product your users love is easier.

Remember, your users are your best product advisors. All you have to do is listen.

The modern component library

Preet Suthar — Sun, 28 Apr 2024 08:16:08 +0000

HextaUI - Gorgeous Web Components, Zero Effort

Elevate your projects with stunning, modern components. Simply copy and paste these responsive, beautiful elements for instant awesomeness.

In HextaUI everything is a component so you can Copy and paste components like this into your website and customize with your style without any effort. Start building your website with these components today!

HextaUI has so many modern components that are really easy to use. No complex steps nothing just copy & paste and you're good to go!

Here is the link to HextaUI - https://ui.hextastudio.in

Some component Preview

Code Syntax highlighting in Next Js

Preet Suthar — Mon, 15 Jan 2024 05:32:57 +0000

If you're running blog page or website you know that adding syntax highlighting can be very tough and complex process. but fortunately I have found a way to add syntax highlighting in your next js blog website.

To add syntax highlighting in next js website we are gonna use library called highlightjs. This library supports ton of languages and themes for customizing as per your needs.

Let's get started by installing the highlight js

Setup

we can use yarn or npm to install this package.

npm install highlight.js
# or
yarn add highlight.js

After installation we import this package in our file. For me I'm gonna be using [slug].js which is basically dynamic page for blog posts.

import hljs from "highlight.js/lib/core";

Now we will need to import some of the required files for this package using <script/> tag but since we're using next js we're gonna use next/script.

import Script from "next/script";

Now to use this feature we have to enable experimental feature in our next config file.

next.config.js

module.exports = {
  experimental: {
    nextScriptWorkers: true,
  },
};

We're done with config file. Now we head back to our [slug].js file and start using <Script/> tag

import Script from "next/script";

const post = ({ post }) => {
  return (
    <>
      <div>{/*Post content goes here*/}</div>
    </>
  );
};

This is our basic setup now let's import highlight.js file using our <Script/> tag

Importing highlight.js

import Script from "next/script";

const post = ({ post }) => {
  return (
    <>
      <Script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></Script>
      {/* Import highlight js */}
      <div>{/* Post content goes here */}</div>
    </>
  );
};

Importing stylesheet for highlighting

Now after importing highlight.js library we'll need to import stylesheet for highlighting. In our next js project we have a file _document.js we'll import this stylesheet in that page.

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

This is my _document.js, yours can be different depends on the project. We import the stylesheet inside the Head tag which is basically replacement of default <head/> to <Head/> by next js.

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/tokyo-night-dark.min.css"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Here I have imported the stylesheet inside the Head tag. You can find large collection of these stylesheet here. Just select the Asset type to Styling and keep experimenting with theme until you find the right one.

We're done with the _document.js file. let's head back to [slug].js and finish the final process.

Now to enable syntax highlighting for various languages we need to register those languages.

[slug].js

import Script from "next/script";

const post = ({ post }) => {
  return (
    <>
      <Script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></Script>
      {/* Import highlight js */}
      <div>{/* Post content goes here */}</div>
    </>
  );
};

First let's import the highlight.js.

import Script from "next/script";
import hljs from "highlight.js/lib/core";

const post = ({ post }) => {
  return (
    <>
      <Script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></Script>
      {/* Import highlight js */}
      <div>{/* Post content goes here */}</div>
    </>
  );
};

Enabling various language support

Now let's import various languages highlighting support

import Script from "next/script";

// Importing libraries
import hljs from "highlight.js/lib/core";

// Importing languages
import sql from "highlight.js/lib/languages/sql";
import javascript from "highlight.js/lib/languages/javascript";
import c from "highlight.js/lib/languages/c";
import css from "highlight.js/lib/languages/css";
import scss from "highlight.js/lib/languages/scss";
import shell from "highlight.js/lib/languages/shell";
import python from "highlight.js/lib/languages/python";
import powershell from "highlight.js/lib/languages/powershell";
import cpp from "highlight.js/lib/languages/cpp";
import php from "highlight.js/lib/languages/php";
import phpTemplate from "highlight.js/lib/languages/php-template";
import xml from "highlight.js/lib/languages/xml";

const post = ({ post }) => {
  return (
    <>
      <Script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></Script>
      {/* Import highlight js */}
      <div>{/* Post content goes here */}</div>
    </>
  );
};

Here I have import most common languages but you can find more languages in the list.

Registering languages for highlighting

Now we register these languages. We'll need to useEffect() to register these language onReady.

import Script from "next/script";

// Importing useEffect
import { useEffect } from "react";

import hljs from "highlight.js/lib/core";

import sql from "highlight.js/lib/languages/sql";
import javascript from "highlight.js/lib/languages/javascript";
import c from "highlight.js/lib/languages/c";
import css from "highlight.js/lib/languages/css";
import scss from "highlight.js/lib/languages/scss";
import shell from "highlight.js/lib/languages/shell";
import python from "highlight.js/lib/languages/python";
import powershell from "highlight.js/lib/languages/powershell";
import cpp from "highlight.js/lib/languages/cpp";
import php from "highlight.js/lib/languages/php";
import phpTemplate from "highlight.js/lib/languages/php-template";
import xml from "highlight.js/lib/languages/xml";

const post = ({ post }) => {
  // Registering languages
  useEffect(() => {
    hljs.registerLanguage("sql", sql);
    hljs.registerLanguage("javascript", javascript);
    hljs.registerLanguage("python", python);
    hljs.registerLanguage("c", c);
    hljs.registerLanguage("cpp", cpp);
    hljs.registerLanguage("powershell", powershell);
    hljs.registerLanguage("shell", shell);
    hljs.registerLanguage("scss", scss);
    hljs.registerLanguage("css", css);
    hljs.registerLanguage("php", php);
    hljs.registerLanguage("php-template", phpTemplate);
    hljs.registerLanguage("html", xml);
    hljs.registerLanguage("xml", xml);
  });

  return (
    <>
      <Script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></Script>
      {/* Import highlight js */}
      <div>{/* Post content goes here */}</div>
    </>
  );
};

Final step

We have successfully registered all the languages now final step is to highlight the code. for that we'll be using highlightAll() function from the hljs means Highlight.Js

We'll be wrapping the highlightAll() function inside useEffect() so that it highlight only when window is loaded.

[slug].js

useEffect(() => {
  hljs.highlightAll({ detectLanguage: true });
});

And that's it! Our final code should look like this

import Script from "next/script";

// Importing useEffect
import { useEffect } from "react";

import hljs from "highlight.js/lib/core";

import sql from "highlight.js/lib/languages/sql";
import javascript from "highlight.js/lib/languages/javascript";
import c from "highlight.js/lib/languages/c";
import css from "highlight.js/lib/languages/css";
import scss from "highlight.js/lib/languages/scss";
import shell from "highlight.js/lib/languages/shell";
import python from "highlight.js/lib/languages/python";
import powershell from "highlight.js/lib/languages/powershell";
import cpp from "highlight.js/lib/languages/cpp";
import php from "highlight.js/lib/languages/php";
import phpTemplate from "highlight.js/lib/languages/php-template";
import xml from "highlight.js/lib/languages/xml";

const post = ({ post }) => {
  // Registering languages
  useEffect(() => {
    hljs.registerLanguage("sql", sql);
    hljs.registerLanguage("javascript", javascript);
    hljs.registerLanguage("python", python);
    hljs.registerLanguage("c", c);
    hljs.registerLanguage("cpp", cpp);
    hljs.registerLanguage("powershell", powershell);
    hljs.registerLanguage("shell", shell);
    hljs.registerLanguage("scss", scss);
    hljs.registerLanguage("css", css);
    hljs.registerLanguage("php", php);
    hljs.registerLanguage("php-template", phpTemplate);
    hljs.registerLanguage("html", xml);
    hljs.registerLanguage("xml", xml);
  });

  useEffect(() => {
    hljs.highlightAll({ detectLanguage: true });
  });

  return (
    <>
      <Script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></Script>
      {/* Import highlight js */}
      <div>{/* Post content goes here */}</div>
    </>
  );
};

export default post;

Wrapping up

So that was it for this blog. If you get any issues or need any help feel free to post comment or reaching me on LinkedIn or Mail

Thank you for reading! I Preet Suthar sign out here!

Responsive Masonry Layout using only CSS

Preet Suthar — Fri, 08 Sep 2023 12:27:32 +0000

Introduction

First of all let's talk what is a masonry layout. Well Masonry means "craft of building a structure with brick, stone, or similar material" - According to google definition.

Well if you ask me I'll say creating responsive and beautiful layouts in HTML with different sizes of elements.

In this article we are going to create a Image Gallery website using masonry layout which will be pretty and responsive.

Let's get started!

Before learning to create masonry layouts let's learn how to make images responsive using CSS only.

Making images responsive

Let's assume we have image in our website,

<img
  class="image"
  src="https://images.unsplash.com/photo-1693761935441-ad0ffad6905b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDF8NnNNVmpUTFNrZVF8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
/>

Now to make this image responsive we have to use only two lines of css.

img {
  max-width: 100%;
  height: auto;
}

just by using these two CSS lines we can make every image in our responsive. No matter what device width will get the max-width of image will always stay 100% and we added height: auto so when width changes with device width it also updates the height by itself.

Let's create masonry layout

It's time we create masonry layout. First of all let's add some images in our HTML

<div class="image-gallery">
  <div class="image-card">
    <img
      src="https://images.unsplash.com/photo-1693761935441-ad0ffad6905b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDF8NnNNVmpUTFNrZVF8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
      alt="ShowCaseGallery"
    />
  </div>
  <div class="image-card">
    <img
      src="https://images.unsplash.com/photo-1694009606218-eb46476e6300?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDR8NnNNVmpUTFNrZVF8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
      alt="ShowCaseGallery"
    />
  </div>
  <div class="image-card">
    <img
      src="https://images.unsplash.com/photo-1693165074962-ae564d6b16ee?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDJ8NnNNVmpUTFNrZVF8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
      alt="ShowCaseGallery"
    />
  </div>
  <div class="image-card">
    <img
      src="https://images.unsplash.com/photo-1693754079764-d90b63861dd3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
      alt="ShowCaseGallery"
    />
  </div>
  <div class="image-card">
    <img
      src="https://images.unsplash.com/photo-1693057205752-f7cabeaff629?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDl8NnNNVmpUTFNrZVF8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
      alt="ShowCaseGallery"
    />
  </div>
  <div class="image-card">
    <img
      src="https://images.unsplash.com/photo-1693928626612-629e0b697ce1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDEyfDZzTVZqVExTa2VRfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60"
      alt="ShowCaseGallery"
    />
  </div>
</div>

Here I've added bunch of images from unsplash and all of them have different heights and widths.

Currently the images looks like this in straight line,

Now we want images to be in row and also we want them to update as the device width changes.

We want layout to look something like this,

So we'll define number of columns to display in page, Let's write some css to make things looks beautiful.

/* Parent container of .image-card */
.image-gallery {
  columns: 3;
  column-gap: 16px;
  margin: 1rem;
}

So we defined 3 columns on page and we also gave column-gap: 16px so that it looks cleaner with bit of space around every .image-card we also added margin: 1rem so add some spacing around the entire container.

Let's target our .image-card in CSS and minor CSS.

.image-card {
  position: relative;
  margin-bottom: 16px;
}

Our masonry layout is ready :D It's time to make it responsive with some @media queries Check out this post to learn more about @media queries

@media screen and (max-width: 1200px) {
  .image-gallery {
    columns: 3;
  }
}

@media screen and (max-width: 900px) {
  .image-gallery {
    columns: 2;
  }
}

@media screen and (max-width: 500px) {
  .image-gallery {
    columns: 1;
  }
}

And we're done!

Wrapping up

It's is pretty basic to create masonry layout using only CSS and still you can spice it up by implementing Javascript and more feature.

@keyframes - CSS Animation

Preet Suthar — Thu, 24 Aug 2023 08:10:44 +0000

Check out more blogs 👀

Animations are pretty cool, aren't they? yes, they are, but you might think adding
animations to the website is complex and challenging. But what if I say you can add
some pretty cool animation using CSS?

Let's get started

We can add animation to our website using CSS @keyframes it's just as easy as writing normal CSS. In CSS using the animation property we can add some basic animations to Div or to any text.

Syntax

We can use the animation property in CSS.

.container {
  animation: time identifier animation_style;
}

@keyframes identifier {
  /* Keyframes */
}

You see in CSS we can add animation frame by frame which is pretty cool and you can do so much just with @keyframes in CSS. Let's see an example.

Example

Let's assume we have div in html with class container.

<div class="container"></div>

Here we are trying to create animation that automatically changes color frame by frame.

Let's write our CSS now!

.container {
  background-color: red;
  animation: 3s changeColor infinite;
}

@keyframes changeColor {
  0% {
    background-color: red;
  }
  50% {
    background-color: yellow;
  }

  70% {
    background-color: green;
  }
  100% {
    background-color: red;
  }
}

Explaination

Let's understand the code a bit more. Here we had a div with a class name of container we used .continer in the CSS file to target the specific.

Now to the div, we added the CSS animation property,

animation: 3s changeColor infinite;

And after adding the animation property we added @keyframes to animate the div.
Let's understand @keyframes.

In CSS @keyframes are used to give animation to the animation property. For the @keyframes identifier we use the same identifier we added in the animation property in CSS

animation: 3s changeColor infinite;

@keyframes changeColor{
  /**Same name as identifier in animation property. */
}

Let's divide the @keyframes

@keyframes changeColor {
  0% {
    background-color: red;
  }
  50% {`
    background-color: yellow;
  }

  70% {
    background-color: green;
  }
  100% {
    background-color: red;
  }

Now as you can we provided some frames like 0%, 10% etc. Now it represents the framing of animation. Here what I mean is when animation just started the frame will be 0% when animation is finished half the frames will be 50% when animation is finished the frames will be 100%.

So basically in this block of @keyframes code, we added some frames like when the animation frame is 0% background-color of .container will be red. just like that, we change the color according to the frames.

When the animation is running it will look something like this,

So yeah that's the most basic of @keyframes and CSS animations.

Animation Delay property

CSS animation has some more properties like,

animation-delay: The value/Time provided in this property will delay the animation by that value/time

If we add animation-delay: 1s; then the animation will run after 1 second

So yeah CSS animation still has more properties to learn but we'll end this basics article here. Thank you for reading!

Font-size slider

Preet Suthar — Tue, 22 Aug 2023 06:05:36 +0000

Find out more articles

Introduction

Here what I when i said font size font size slider? Well It basically means that we create a input with type of range and give it some magic of javascript to make that slider adjust the font-size property in CSS

Live example

When we change value of slider it also changes value of font-size in css for the specified div.

Let's get started

First of in your index.html file we write the structure code for slider and the the text of which we want the size to change when slider takes input.

index.html

<div class="slider-container">
  <label for="font-size-slider">Adjust font Size</label>
  <input type="range" id="font-size-slider" min="20" max="40" value="20" />
</div>
<div class="display-text" id="display-text">
  Here what I when i said font size font size slider? Well It basically means
  that we create a input with type of range and give it some magic of javascript
  to make that slider adjust the `font-size` property in CSS
</div>

This is most basic code for stucture of slider and para. Here in the <input> we gave the type of input range so we get the slider and in attr we have min and max values and also we gave default value of slider which is 20, So whenever the page is opened that stays as default font size

Now let's give it bit of css to make everything in center,

style.css

.slider-container {
  display: flex;
  padding-top: 3rem;
  justify-content: center;
  align-items: center;
}

.display-text {
  text-align: center;
  padding-top: 2rem;
}

Now it's time for magic of javaScript,

Logic...

Here is basic logic what we want is to get the value of slider and we want to give the slider value to font size value in CSS which means, slider value == fontSize correct? yeah. Now to do this let's fetch the value of slider first,

This is out javascript code

const fontSizeSlider = document.getElementById("font-size-slider");
const displayText = document.getElementById("display-text");

We target the slider by its ID we gave in HTML and we also target the text of which size we want to be changed

<label for="font-size-slider">Adjust font Size</label>
<div class="display-text" id="display-text">
  Here what I when i said font size font size slider? Well It basically means
  that we create a input with type of range and give it some magic of javascript
  to make that slider adjust the `font-size` property in CSS
</div>

We got the element it self. Now to get the value of range slider we need to use eventListener in JavaScript

fontSizeSlider.addEventListener("input", () => {});

Here in this code we use an eventListener to check when the input slider has any change and if yes then we fetch the value of change in input slider,

const fontSize = fontSizeSlider.value;

Now we got the value of range input. The last step is to set the value of slider as value of FontSize in CSS,

displayText.style.fontSize = `${fontSize}px`;

And yeah here we are done! Your JavaScript code should look something like this,

const fontSizeSlider = document.getElementById("font-size-slider");
const displayText = document.getElementById("display-text");

fontSizeSlider.addEventListener("input", () => {
  const fontSize = fontSizeSlider.value;
  displayText.style.fontSize = `${fontSize}px`;
});

So that's how we easily created Font Size Adjusting slider using HTML and JavaScript. We can also achieve this functionality in React but code will be different because we'll need to make use of useSate to set the font size and all. Let me know in the comments if you want the article for same functionality but using reactjs. That's for this article!

Thanks for reading!