Forem: HARSH VATS

Creating a Next.js API to Convert HTML to PDF with Puppeteer (Vercel-Compatible)

HARSH VATS — Fri, 11 Oct 2024 15:26:45 +0000

Converting HTML to PDF is a common requirement in web applications. In this blog post, we'll explore how to create a Next.js API route that converts HTML to PDF using Puppeteer, and we'll ensure it works when deployed to Vercel.

The Challenge

While Puppeteer is a powerful tool for HTML to PDF conversion, it presents challenges when deploying to serverless environments like Vercel. The main issues are:

Puppeteer requires a Chromium binary, which exceeds Vercel's size limits.
Serverless functions have limited execution time and resources.

The Solution

We'll use a combination of @sparticuz/chromium-min and puppeteer-core to overcome these limitations. Here's how we'll approach it:

Use a minimal Chromium build designed for serverless environments.
Configure Puppeteer to use this minimal Chromium version.
Optimize the PDF generation process for serverless execution.

Step 1: Setting Up the Project

First, create a new Next.js project or use an existing one. Then, install the necessary dependencies:

npm install @sparticuz/chromium-min puppeteer-core

To ensure compatibility and optimal performance, it's important to use the correct versions of the required packages. As of the latest testing, the following versions are recommended:

{
  "dependencies": {
    "@sparticuz/chromium-min": "^129.0.0",
    "puppeteer-core": "^23.5.0"
  }
}

Step 2: Creating the API Route

Create a new file at app/api/html-to-pdf/route.js (for Next.js 13+ app router) or pages/api/html-to-pdf.js (for Pages router). Here's the code:

const chromium = require("@sparticuz/chromium-min");
const puppeteer = require("puppeteer-core");

async function getBrowser() {
  return puppeteer.launch({
    args: [...chromium.args, "--hide-scrollbars", "--disable-web-security"],
    defaultViewport: chromium.defaultViewport,
    executablePath: await chromium.executablePath(
      `https://github.com/Sparticuz/chromium/releases/download/v129.0.0/chromium-v129.0.0-pack.tar`
    ),
    headless: chromium.headless,
    ignoreHTTPSErrors: true
  });
}

export async function POST(request) {
  try {
    const { html } = await request.json();

    const browser = await getBrowser();
    const page = await browser.newPage();
    await page.setContent(html, { waitUntil: "networkidle0" });
    const pdfBuffer = await page.pdf({
      format: "A4",
      printBackground: true,
      margin: { top: "1cm", right: "1cm", bottom: "1cm", left: "1cm" }
    });
    await browser.close();

    return new Response(pdfBuffer, {
      headers: {
        "Content-Type": "application/pdf",
        "Content-Disposition": 'attachment; filename="output.pdf"'
      }
    });
  } catch (error) {
    console.error("Error generating PDF:", error);
    return new Response(JSON.stringify({ error: "Failed to generate PDF" }), {
      status: 500,
      headers: { "Content-Type": "application/json" }
    });
  }
}

Step 3: Understanding the Code

Let's break down the key parts of this code:

Browser Configuration

The getBrowser function sets up Puppeteer with the minimal Chromium binary:

async function getBrowser() {
  return puppeteer.launch({
    args: [...chromium.args, "--hide-scrollbars", "--disable-web-security"],
    defaultViewport: chromium.defaultViewport,
    executablePath: await chromium.executablePath(
      `https://github.com/Sparticuz/chromium/releases/download/v129.0.0/chromium-v129.0.0-pack.tar`
    ),
    headless: chromium.headless,
    ignoreHTTPSErrors: true
  });
}

This configuration uses the @sparticuz/chromium-min package to provide a minimal Chromium binary compatible with serverless environments.

PDF Generation

The main logic for PDF generation is in the POST function:

Extract the HTML from the request body.
Launch a browser instance using the getBrowser function.
Create a new page and set its content to the provided HTML.
Generate a PDF from the page content.
Close the browser to free up resources.
Return the PDF as a response with appropriate headers.

Step 4: Using the API

To use this API, send a POST request with the HTML content in the request body:

const response = await fetch('/api/html-to-pdf', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ html: '<h1>Hello, World!</h1>' }),
});

if (response.ok) {
  const blob = await response.blob();
  // Handle the PDF blob (e.g., download or display)
}

Deployment Considerations

When deploying to Vercel, keep these points in mind:

Execution Time: Vercel has a maximum execution time of 10 seconds for hobby plans and 60 seconds for pro plans. Optimize your HTML and PDF generation process to fit within these limits.
Memory Usage: Be mindful of memory usage. The minimal Chromium binary helps, but complex PDFs might still use significant memory.
Cold Starts: Serverless functions can experience cold starts. The first invocation might be slower as it needs to download and set up the Chromium binary.
Error Handling: Implement robust error handling to manage timeouts or resource constraints.
Caching: Consider implementing caching strategies for frequently generated PDFs to reduce load on your serverless functions.

Conclusion

This approach allows you to create a powerful HTML to PDF conversion API using Next.js and Puppeteer, compatible with Vercel's serverless environment. By leveraging @sparticuz/chromium-min and puppeteer-core, we overcome the main challenges of running Puppeteer in a serverless context.

Github VS Gitlab Vs Bitbucket

HARSH VATS — Fri, 06 Jan 2023 15:48:59 +0000

GitHub, GitLab, and Bitbucket are like the three musketeers of version control. They all offer a wide range of tools for developers to track changes in their code and collaborate with their team, but they each have their own unique set of features and quirks.

GitHub is like the cool, laid-back friend who is always down to hang out. It's cloud-based, so you don't have to worry about setting up your own servers. It's also free for open-source projects and has a pretty reasonable pricing model for private repositories. The only downside is that it's not as focused on CI/CD as GitLab and Bitbucket. But hey, at least you can use it to host your personal website and share your cat memes with the world.

GitLab is like the organized, ambitious friend who always has a plan. It offers both cloud-based and self-hosted options, so you can choose the hosting solution that works best for you. It also has a ton of features for CI/CD and project management, which makes it a great choice for teams that want to streamline their development process. Just don't forget to bring snacks to their team meetings, because they'll probably be talking about pipelines and artifacts for a while.

Bitbucket is like the nerdy, reliable friend who is always there when you need them. They also offer both cloud-based and self-hosted options, as well as a wide range of integrations with other tools and services. They might not be as flashy as the other two, but they get the job done and they do it well. Just don't be surprised if they start talking to you in Git commands during lunch.

In the end, the choice between GitHub, GitLab, and Bitbucket will depend on your project's needs and your team's preferences. So whether you're a fan of the cool and casual approach, the ambitious and organized approach, or the nerdy and reliable approach, there's a version control platform out there for you. Just don't forget to invite all three musketeers to the code review party.

What are your thoughts?

How to stay motivated and focused as a developer?

HARSH VATS — Sat, 05 Jun 2021 08:33:58 +0000

The only way to stay motivated is to be around people who are doing something great daily. You can't stay motivated if you are around people who are doing the same stuff daily.

Before learning to stay motivated, learn to not get demotivated. Things like your side projects can also demotivate you, trust me.

How to avoid getting demotivated?

1. If you are not able to figure out something, even after spending hours on it, then call it off for that day.

At first, you might think that how can you find the solution to a problem if you wouldn't spend more time on it, but that's not always the case. I'm saying it by experience that sometimes, you need to keep your mind off the problem. Start fresh the next day, with a different perspective towards the problem, and you might find a solution within minutes.

2. If someone tells you that you are in the wrong direction, don't just listen to them blindly.

There will be several people who'll tell you to follow a different path to achieve the same target like becoming a web developer. There can be infinite ways to achieve the same thing and most people don't understand that. Don't make yourself uncomfortable with what they say. Instead, just keep going if you feel like you are making progress. You can't lie to yourself, you know whether you are making progress or not. If yes then keep going, if not, then take some time to reconsider.

3. Never feel guilty about time wasted.

It happens to me many times. I play mobile games a lot(just one specifically called shadow fight arena). Sometimes, I think about it that I played that game for 2 hours last day, the precious time which I could've used to learn something or spend some time refactoring my old code. This generates a feeling of guilt and we don't feel like anything. Another day goes by doing nothing.

I'm slowly trying to get out of this by inculcating a thought that playing a game should make me happy and relaxed Instead of filling me with guilt.

4. Don't let your college marks decide what you can do.

I'll be honest here. I'm a below 6 pointer student who wants to learn more and more about how the web works. I want to learn how things work at a basic level. I don't just know React.js, I know what they do under the hood (almost and still learning).

You can't call yourself a web lover if you don't know how DNS works.

That's what I'm talking about, don't let my last sentence demotivate you. If you don't know how DNS works then learn it. This should be the attitude. If you don't have time right now, then make notes of what you need to learn and when. You will find yourself filled with motivation. You won't have time for the boring stuff.

How to stay motivated?

1. Read online articles/blogs and watch tutorials.

You need to join a community of developers around you. The best part of being a developer is to have the freedom of creating anything that could reach millions of users overnight. But obviously, that requires a lot of skills other than being a developer. But at least you can think start building things on your own.

You do know that Mark Zuckerberg made Facebook in his hostel room right?

Well, I'm not saying go out there and make another Facebook, but there's a lot of other things that you can try. Remember one thing, you can't make it perfect just on the first try.

If you knew success was a certainty, what would you attempt to do?

That's the beauty of life. So keep trying and keep building stuff.

2. Whatever you build, make sure you can show that to anyone.

A negative feeling can arise if you built something and now you cannot show that to someone. Keep your projects on the git and also showcase them on platforms like LinkedIn, in your blogs, on your website.

Also, make sure that the project you are showing is complete, otherwise, it'll leave a negative impact. You'll see that these things can boost your confidence. Don't make anything public until you are happy with that.

3. Always spend time on your old written code.

This might not sound that effective but it works for me. Instead of wasting time just sitting idle, I like to spend some time refactoring my personal projects, add new features, or bug fixing.

I am also making it a habit to spend some time on open source projects instead of just working on mine, that'll make me a really good developer.

4. Humans are social animal (Are you human?)

Don't feel like you can do much by ditching friends and utilizing that time to code. You are a social animal, enjoy your life dude and keep exploring things.

That's it for today. Have a good day devs. Let me know in the comments what else we can do to stay motivated and focused on our goal.

Keep exploring things...

Please refactor your code.

HARSH VATS — Thu, 18 Mar 2021 03:40:09 +0000

Try to refactor your code whenever you get time.

This is a very small post(actually my linkedin post) but very helpful.

If you don't have the habbit of refactoring your code, try now, this is going to be the best experience and learning for you.

How code refactoring would help???

You will realize that there are some pieces in your code which are not at all being used. Now you can delete them. This gives immense pleasure 😅.
You can apply your newly learned things. For me, I was never confident in object destructuring in javascript but in refactoring the code, I applied my learning and became more confident like giving initial value, renaming in destructing.
As your code gets better and better and now that you have gone through it many times, you can now explain it to anybody about your project and how you did it. Most of the times, we are not able to explain our code just bcoz we left it after we realized that it's doing the required job and never cared to refactor it.

Doesn't matter if project is big or small, you need to refactor it now.

Let me know your thoughts in the comments.

That's it, have a good day dev 😊.

Any chrome extension to delete inactive tabs?

HARSH VATS — Mon, 08 Mar 2021 17:14:17 +0000

Do you know any chrome extension to automatically close all inactive tabs after some time.

Also i should be able to change inactivity time for each website. Like if i have set 10 minutes of inactivity time, then extension should automatically close all stackoverflow tabs that i haven't visited in last 10 minutes.

I can set less time for github repo's i've opened.

I mean, i should have the flexibility to change websites and their inactivity time.

I don't think there's any chrome extension there which can do that, that's why I'm working to make one.

If there's any plz let me know now :)

Thanks developers

Rate my resume out of 10.

HARSH VATS — Sat, 20 Feb 2021 07:45:10 +0000

Hi, I am sick of googling "online resume builder". So I decided to make it from scratch. I ended up with some basic resume which looks same and exact to others. I wanted something unique.
I recently learned figma almost 2 months ago to speed up my web development projects. So i also decided to use it for making resume.
It's my first try on making resume. I want the help of dev.to community to rate this design so i can know what can be improved in this.

Also if you want the same design for yourself for free, plz tell me in the comments.
For those who are wondering why would I do it for free, you just need to follow me here on dev.to :)
Thank you

How to get more web development clients in the early stages in India.

HARSH VATS — Wed, 03 Feb 2021 10:03:49 +0000

Hi, I'm Harsh Vats, a full stack web developer and a designer.

I'm in my 6th semester while writing this blog post and I've done contributions to 3 startups and successfully delivered more than 20 websites to clients, some Indian and some International.

The below points are some ways to get more website development clients. However, it's not necessary to follow them in order but that's how it worked for me atleast.

1. Find clients in your family or friends.

This is where you should start. Don't charge too much. In India, if you are doing designing and development yourself, then you can easily charge minimum of 2000 rupees for static sites like a gym of your friend, real estate business of your uncle, etc.

If you don't have any projects to show at this point, just ask them to pay for hosting and domain and do the development for free. Consider these are your projects which will help you later. A project is a project and no one knows how much you charged for the website.

2. Be active on social media.

This one might seem a bit over work for now but trust me, it'll eventually help you build your profile and trust.

I never worked on my social media and always thought that it's just a waste of time. But I realised later that social media is "The Thing" in coming times.

You need to build your good presence on social media like instagram or linkedIn. LinkedIn can also help you in getting jobs or generating leads. Keep posting your original thoughts.

Don't post any motivational stuff all the time. Sometimes it's okay but most of the time it just feels like someone is trying to make connections or increase followers without doing any effort. In short, it just feels annoying.

3. You should have atleast 3 complete websites to show.

Except your friends or family, nobody is going to believe that you can make good websites without actually seeing some of the websites that you have built in the past.

So the more the good websites, the easier it would be for you to get web development clients.

These websites can be those which you built for your family. You can tell clients that you built the website for "x" amount of money and there's high chance of getting your next project from there.

4. Print your visiting card

Believe me, you need a visiting card to show that you actually are a professional developer and can make some great websites.

Not only it reflects professionalism but also shows authenticity.

In India, you can easily print cards with a rate of 2rupees/card.

Here is a great visiting card design for you.

5. Go to meetups/functions.

This is very important to not miss meetups and functions. After my admission to IIT, I never really went to marriages because I thought that they won't benefit me.

You know how many functions happen in India daily and we get invitaitions a lot. This is the best opportunity to go and meet different people and tell them that you make websites, give them your visiting card.

They might call you one day for a website.

6. It's time to go in the market and tell people about your service.

You are now ready to go the market and talk to real customers where you can charge good amount.

Show them your previous projects and tell them the benefits of having a website.

If they want a website, it's good otherwise leave your card and tell them to call you if they change their mind or they know someone who wants a website.

You are not only getting clients by this but also making connections and building your profile.

7. Start on online platforms like Upwork.

There are many platforms for freelancers like upwork, freelancer to start your freelancing but it's very tough to get work at the beginning.

Keep applying and don't loose hope. Trust me, you will get some work eventually from these platform. I personally use upwork and have never used any other platform. It's very good source of income and I also build some good connections from here.

Thank you for reading till here. I know it's hard to get clients in the starting but this is how the world works. You need to put some efforts.

Getting clients is tough but not impossible.

Thank you
Harsh Vats

Do restaurants really need a website?

HARSH VATS — Sun, 20 Dec 2020 06:26:02 +0000

The answer is, yes and no.

While there’s no doubt that websites help restaurateurs build direct relationships with customers, you can’t ignore the importance of third-party reservation sources. Platforms like Google My Business (GMB) and other online sources of reservation like TripAdvisor hold tremendous potential and can drive extra revenue for your business when used correctly.

Let's the discuss both the sides, starting with how the capabilities of third-party platforms can make you think of getting rid of a website altogether.

No, Restaurants don't need a website

As stated earlier, booking functionality is now available outside of standalone restaurant websites via Reserve with Google and other third-party reservation sources. Restaurateurs can use these channels to accept reservations through Google Maps, Google Search, as well as Google Voice Assistant.

If you’re planning to use Reserve with Google, you’ll need to apply for a Google Reservation link. If you’re accepted, the “reserve a table” option will appear on your Google My Business profile, after which the tourists and residents in your city will be able to book a table at your restaurant via Google’s easy-to-use interface.

Because Google owns the local search experience, you’ll find that your Google My Business profile (and the reservation link) always appears in a prominent place. It's vital to realize just how powerful Reserve with Google is for restaurant discovery online.

In addition, Google My Business integrates with Google Maps, which means anyone searching for a restaurant via mobile or desktop can make reserve a table directly within Maps. Your restaurant’s GMB profile may even show up for certain keywords like “steakhouse” and “Italian” on Maps. As far as we know, a traditional restaurant website can’t offer this experience.

So if you haven’t made a GMB profile yet, learn how to make one here. For restaurateurs who’ve already created their GMB listing, our optimization tips for Google My Business may help them generate more reservations.

Of course, you’re not just restricted to Google’s offerings. You can also create or claim a listing on third-party aggregators like TripAdvisor and Zomato. These websites usually offer a better user experience, have reviews integrated into their backend, and even let you offer discounts for online reservations.

You can’t replicate such features on a restaurant website without installing a plugin or two, which makes websites slow (not to mention, the review feature on booking aggregators looks and works much better).

Moreover, it’s much easier to maintain and manage third-party profiles than a complete website. You don’t have to work with a drag-and-drop builder or write any sort of code. Just provide things like your restaurant name, booking times, and images, and you’ll have a listings page ready to go.

Besides these booking platforms, you can promote your restaurant on social media instead of creating a restaurant website. This way, you can build a social community full of people that act as brand ambassadors for your restaurants.

The best part? Some social networks will even let you add a “book now” button, so anyone checking out your posts can click that button to reserve a table through your reservation partner’s website.

However, there are also clear benefits of having a more traditional website which shouldn’t be neglected. Below is a breakdown of why, despite the availability of all these booking platforms, it makes sense to invest in a restaurant website.

Yes, Restaurants really need a website

A website serves as a key part of a restaurant’s brand. It can showcase your business in a way that third-party aggregators can’t – stories, design and content all help portray the “vibe” of your restaurant. Consider working with a web designer to infuse life into your site, or apply a pre-existing template that closely resembles the offline theme of your restaurant.

Apart from web design and layout, a restaurant website allows you to control 100% of your content and marketing. You can create as many pages of web content as you like and share information via your custom-branded email newsletters. You’re not restricted by word limits, and you don’t have to settle for third-party email promotions.

In terms of SEO, a restaurant website enables you to optimize for different searches and keywords beyond your brand name, like “restaurants that offer weekend discounts,” “restaurants for students,” etc. You can’t do this with profiles on third-party listings. Websites will even let you create a blog where you can post unlimited details and content about your promotions, people and business.

But perhaps the most appealing aspect of having a restaurant website is that you’ll get to build your own database of clients, names, and users. What if a third-party website removes your listing and you are left with no information on your customers? Your business will take a hit.

Therefore, it’s best to really own the customer data so that you can control the guest experience from start to finish. CRM for restaurants can help you gain insight into your guests’ demographics and preferences, allowing you to provide a tailored experience to each of your customers.

Another benefit of having a website comes in the form of commission-free bookings. You can put up a “Reserve Your Table” button and take as many bookings as you like. Direct reservations are free whereas some third-party booking websites charge a commission per cover.

All of this means there’s potential to quickly earn back whatever you spend on creating a website in a matter of months. And once you start making a profit, you can reinvest some of the income into your own digital property and keep earning more.

Conclusion

As you can see, third-party platforms offer a range of benefits, but a restaurant website comes with its own set of perks which can’t be ignored.

A good idea is to test waters on a third party website in the early days of your restaurant, and then reinvest any money you make to create a custom website. That way, you can slowly gain clout with online audiences and also learn how to run a site effectively.

Then, after a few months, come up with a plan to optimize your third-party listing as well as your website. We don’t advise you to completely focus on one or the other because the best strategy, in our opinion, is to attain a balance between these two resources.

Who knows, a customer who wasn’t impressed by your TripAdvisor listing decides to pay you a visit after looking at your restaurant website or vice versa. It’s all about smart cross-promotion of your various properties and optimum utilization of each and every one of them.

Finally, If you have any restaurant and looking for a simple yet elegant website, contact us at DigiVats.

How to lazy load images in html with pure Javascript?

HARSH VATS — Wed, 04 Nov 2020 17:58:37 +0000

Let's read this article at my place :)

If you just want to do image lazy loading without any understanding of the concepts involved because maybe this is your first time and you have to use in it your project then don't worry at all. I can assure you this article will give you everything already done so that you just need to copy paste.

1. Copy paste this code just before closing body tag

document.addEventListener('DOMContentLoaded', function () {
        var lazyloadImages = document.querySelectorAll('img.lazy');
        var lazyloadThrottleTimeout;

        function lazyload() {
          if (lazyloadThrottleTimeout) {
            clearTimeout(lazyloadThrottleTimeout);
          }

          lazyloadThrottleTimeout = setTimeout(function () {
            var scrollTop = window.pageYOffset;
            lazyloadImages.forEach(function (img) {
              if (img.offsetTop < window.innerHeight + scrollTop) {
                img.src = img.dataset.src;
                img.classList.remove('lazy');
              }
            });
            if (lazyloadImages.length == 0) {
              document.removeEventListener('scroll', lazyload);
              window.removeEventListener('resize', lazyload);
              window.removeEventListener('orientationChange', lazyload);
            }
          }, 20);
        }

        document.addEventListener('scroll', lazyload);
        window.addEventListener('resize', lazyload);
        window.addEventListener('orientationChange', lazyload);
      });

2. Replace image `src` attribute with `data-src`

If you have

<img src="<url>" />

then replace it with

<img data-src="<url>" />

3. This is the last point. Add `class="lazy"` to all the images you want to lazy load.

Now you are good to go. Thank you for reading this article. I don't write articles for others, I write them for myself so I can use ready made code or revise my concepts. But if it helps you in any way then plz let me know here.

Will Typescript be more used than Javascript after 5 years??

HARSH VATS — Mon, 12 Oct 2020 04:46:58 +0000

Optional chaining in javascript (?.)

HARSH VATS — Sun, 27 Sep 2020 14:43:52 +0000

?. is known as the chaining operator in javascript. This operator is so usefull that after reading this article you will start using this operator right away.

What does this optional chaining operator does?

The ?. operator functions similarly to the . chaining operator, except that instead of causing an error if a reference is nullish (null or undefined), the expression short-circuits with a return value of undefined.
Let's discuss some details so that it's more clear to you.

Consider

const person = {
  a: {
    b: 'c'
}
};

What will happen if you will try to

console.log(person.a.b)

You are correct... It will definitely print 'c' in the console.

But what if you try to

console.log(person.d.e)

Hmmm...Tricky one?? Not at all... It will give you an error.

Uncaught reference error: Cannot read property e of undefined.

It's because 'b' is not a property of object 'a'. So here's a big question.

Why on Earth would you try to print a property that you know does not exist??

The answer is pretty straight forward. You want to print some data which will be in the object soon but is not available yet (e.g. fetching data using http requests). In ususal cases what you could have done is just apply if else condition that if the value exists only then print the data but using optional chaining operator it will become very simple. See below

if (person.d) console.log(person.d.e)

console.log(person.d.?e)

The second one will not give an error even if the data is not fetched. It will just print undefined.
That's really an awesome thing if you literally love js. I always love to teach the concept in as easy as possible way.

Thank you for reading

Happy javascripting....

::after and ::before in CSS

HARSH VATS — Wed, 02 Sep 2020 08:13:35 +0000

One month before, I didn't knew about these ::after and ::before pseudo elements so i used to make an extra div if i wanted to include anything before a particular div. For example, if i wanted to underline a div without using border, or overlay a light image with dark background so that my light text is clearly visibile on light image, i usually do that by making another div which does not contain any content in it, just some background color and other styling. So it made my code look ugly, trust me if you want to have that overlay in many images, it would really make your code look poor as it would contain unnecessary markup in html, only for styling.

So what i do in my free time is just find any good website with some great looking animations but still simple and pretty clean, and start making a copy of it. First i try myself and then look for their css in dev tools. It's a really really good practice to learn some extra skills in css and html. I learn a lot of great css properties. It increases your knowledge, like i recently was making a website https://realestate01.vercel.app by copying it from https://adigedesign.com and then i see they have used font-smoothing: antialiased; which i then searched on google, so i found out it was used earlier to smoothen the text and make it sharp on a webpage but now it's a not a web standard and mdn highly recommend to NOT use it in production at all. So these are the things that you can also learn while trying to make a copy of website in your free time.

In this website i have also used ::after in some images so that the text is clearly visible over image. Let's say you have a div which contains an image and a text over that image. It will look like this

However if i use ::after on the div to make a slightly dark background, it will look like this

Did you notice the slightly dark background of the second image? And i haven't even touched the html, it's just pure css.

Wanna see the code?

div {
    position: relative;
}
div::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background-image: linear- 
    gradient(transparent, rgba(0,0,0,0.6));
}

Let me explain it to you. The div that contains image is the div in the css code above. Relative position is required so that the child of this div even pseudo child, will be positioned according to this div.
content is an empty string because we don't want to put any text after the div. Anyways it's a lot better and efficient than using an empty div in the html. Agreed?? The ::after is given position absolute because we want it to overlap. Height is 40% because we don't want to overlap it completely. Height 40% should start from the bottom that's why bottom is 0. Background image, you can use anything but i am using linear gradient.

I hope now power of ::after and ::before is clear to you.

Forem: HARSH VATS

Creating a Next.js API to Convert HTML to PDF with Puppeteer (Vercel-Compatible)

The Challenge

The Solution

Step 1: Setting Up the Project

Step 2: Creating the API Route

Step 3: Understanding the Code

Browser Configuration

PDF Generation

Step 4: Using the API

Deployment Considerations

Conclusion

Github VS Gitlab Vs Bitbucket

How to stay motivated and focused as a developer?

How to avoid getting demotivated?

1. If you are not able to figure out something, even after spending hours on it, then call it off for that day.

2. If someone tells you that you are in the wrong direction, don't just listen to them blindly.

3. Never feel guilty about time wasted.

4. Don't let your college marks decide what you can do.

How to stay motivated?

1. Read online articles/blogs and watch tutorials.

2. Whatever you build, make sure you can show that to anyone.

3. Always spend time on your old written code.

4. Humans are social animal (Are you human?)

Please refactor your code.

Any chrome extension to delete inactive tabs?

Rate my resume out of 10.

How to get more web development clients in the early stages in India.

1. Find clients in your family or friends.

2. Be active on social media.

3. You should have atleast 3 complete websites to show.

4. Print your visiting card

5. Go to meetups/functions.

6. It's time to go in the market and tell people about your service.

7. Start on online platforms like Upwork.

Do restaurants really need a website?

No, Restaurants don't need a website

Yes, Restaurants really need a website

Conclusion

How to lazy load images in html with pure Javascript?

1. Copy paste this code just before closing body tag

2. Replace image src attribute with data-src

3. This is the last point. Add class="lazy" to all the images you want to lazy load.

Will Typescript be more used than Javascript after 5 years??

Optional chaining in javascript (?.)

What does this optional chaining operator does?

What will happen if you will try to

Why on Earth would you try to print a property that you know does not exist??

::after and ::before in CSS

Wanna see the code?

2. Replace image `src` attribute with `data-src`

3. This is the last point. Add `class="lazy"` to all the images you want to lazy load.