
## Basic goal

In a project I'm working on, I had a simple problem that required taking some HTML (generated by React, but that doesn't really matter),
and generating a PDF from it.

This, apparently, was not as straightforward as I would have liked, as confirmed by Daniel's tweet here:

```tweet
https://twitter.com/autiomaa/status/1364906400778977284
```

So, for the sake of Daniel and other interested parties, I decided to write something about my experience, in the hopes it would benefit someone.

## What is a PDF anyway?

The _Portable Document Format_ needs no introduction - it's a ubiquitous format used to display documents independent of the software, hardware, or operating system.  
Our end goal would be to take a web page and generate a PDF from it.

An important property of the PDF is actually hinted by its name - _portable_; a PDF needs to be displayed consistently across platforms (and across PDF readers like Adobe Acrobat or Foxit).  
What this means is that a PDF needs to contain all the information needed to display inside the actual file. This includes things like fonts, images, vector graphics etc.  
Consider if Bob creates a cool document with a cool font like [Inter](https://fonts.google.com/specimen/Inter?preview.text_type=custom) and wants to send it to Alice.
Bob creates a Word document if he's on Windows or a Pages document if he's on a Mac, right? Well, when Alice opens the document, she can't see the font that Bob used!
She may even get a warning that the font used in the document is not installed on her system.
To accurately represent the content that Bob wants to send, he would need to use a file format which encapsulates all the information needed to display it; that is what the PDF is used for.

To be precise:

> PDF combines three technologies:
>
> - A subset of the PostScript page description programming language, for generating the layout and graphics.
> - A font-embedding/replacement system to allow fonts to travel with the documents.
> - A structured storage system to bundle these elements and any associated content into a single file, with data compression where appropriate.
>
> (from [https://en.wikipedia.org/wiki/PDF](https://en.wikipedia.org/wiki/PDF))

PDF is magic! Or at least, as Arthur Clarke puts it, _"Any sufficiently advanced technology is indistinguishable from magic."_  
It is also [a very inconsistent format](https://www.reddit.com/r/software/comments/3f1b5r/why_is_pdf_such_an_inconsistent_format/ctkgc7q?utm_source=share&utm_medium=web2x&context=3) but let's not get into that here.

Hey, there's a reason why it's the most popular religion:

![](/web-page-to-pdf/pdf-religion.png)

## Requirements

Let's quickly establish the basic premise of this blog post - I want to **take some arbitrary HTML and generate a high quality PDF** that answers to the following requirements:

```info
Note that the PDF you want to generate may not have all these requirements (for example, you may be content with a single "screenshot" of the DOM element as an image inside the PDF),
so consider whether these are important for you too.
Later we'll go over some common approaches which do not guarantee these requirements, but may be fine for what you are trying to achieve!
```

1. **Consistency** - The DOM element (for the uninitiated, the [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) is essentially the in-memory representation of a web page) may not look the same across browsers, or even operating systems.  
   If you want your PDF to look the same no matter how your users access your website, this may be of high significance.
1. **Fidelity** - The PDF should retain as much of the quality of the content in the DOM element, so the text or SVGs will retain the vector information, images will preserve their original quality, etc.  
   This also means that the CSS applied on the web page will need to look the same in the generated PDF.
   When I present the different approaches, you'll see why this is not trivial.
1. **Generic** - The approach should be able to be applied to any arbitrary HTML, so we would need to need to set anything up ahead of time.
   We would want no special handling for embedding certain types of content (a-la images, SVGs) or special handling for different types of HTML tags.
   Everything should Just Work™.  
   This is especially important since, in my project, I need to be able to quickly set up a PDF conversion on changing content.

```takeaways
We want to consistently generate a PDF from a web page that should:
1. Be high-fidelity and preserve all information required to render the web page (CSS, fonts, images, SVGs)
1. Be generated on the fly for any arbitrary HTML
1. Look the same on whichever platform the users are running from
```

## First approaches

So, let's begin by looking around the interwebs for some popular JS-to-PDF converters.  
Mhm, seems like [jspdf](https://github.com/MrRio/jsPDF) or [pdfkit](https://github.com/foliojs/pdfkit) are pretty popular.

Alas, it seems like `jspdf`'s main usage is building a PDF programmatically.

e.g.

```js{4}
import { jsPDF } from "jspdf";

const doc = new jsPDF();
doc.text("Hello world!", 10, 10);
doc.save("a4.pdf");
```

With this library, seems like we need to _manually_ specify the elements we require and build the PDF ahead of time.
This does not scale well and does not fulfill our "Ergonomics" requirement since we want to generate a PDF dynamically based on a dynamic web page.

Looking at [pdfkit](https://github.com/foliojs/pdfkit), which is another great library I considered, it seems to have the same drawback.

Mhm, no luck so far. But I was never one to back down easily!

So, coming back to `jspdf` - it also has a `.html` method which, at first glance, appeared to be what we want:

```js{3}
const doc = new jsPDF();
const source = document.getElementById("convert-me-to-pdf");
doc.html(source, {
   callback: (doc) => {
      // This callback is invoked after the DOM is converted to a PDF.
      // We can now save the generated PDF.
      doc.save();
});
```

Here is a small proof of concept for doing this: [https://codesandbox.io/s/convert-to-pdf-jspdf-p9cnk](https://codesandbox.io/s/convert-to-pdf-jspdf-p9cnk)

> I used a `<div>` with an `<svg>`, an `<image>`, a heading and some text, with various styles (made easy with TailwindCSS).
> Try playing around with it and changing the content inside.

I tried a few libraries similar to that, but soon realized that this wasn't the direction I needed to go in.
You would notice, if you tinkered around with it, that layout was often not preserved, images/SVGs were often not correctly rendered (if at all), etc.

This did not fulfill the "Consistency" requirement (not to mention that the PDF could still look differently across different browsers and operating systems).
Another important note for using `jspdf` or similar libraries - all the CSS you use needs to be included in the DOM you render.
That means one of these two options (or a combination of both):

- Inlining the CSS with `style` attributes
- Including all the CSS stylesheets you use. Note that this means actually including the CSS itself in `<style>` tags, you can't link to external CSS stylesheets from a CDN!  
  In my case, of using [TailwindCSS](https://tailwindcss.com/) this meant downloading the stylesheet from their CDN and plopping it into `<style>` tags (alternatively I could build my CSS and include that)

Keeping optimistic, I stumbled across [react-to-pdf](https://www.npmjs.com/package/react-to-pdf) (I used React for this project).
This seemed promising at first glance, however it also seems to be using `jspdf` under the hood
and similarly to other such libraries that I found, note the final bullet in the important notes section of `react-to-pdf`:

> Not vectorized - the pdf is created from a screenshot of the component and therefore is not vectorized.
> If you are looking for something more advanced for generating pdf using React components, please check out other popular alternatives packages listed below.

What this means is that the generated PDF is a plain image converted to PDF. The last suggestion on checking the alternative packages seems to be PDF renderers.
I saw several solutions like these (which, if I recall correctly, often take advantage of HTML `<canvas>`) but they do not fulfill the "Fidelity" requirement.

But wait... though doing this on the client-side seemed great at first, maybe that is not the correct way to go about it.

Generating the PDF on the client-side would mean:

1. It would generate the PDF based on the user's platform and browser. So someone using Chrome on macOS may not see the same PDF as someone using Firefox on Windows.  
   This does not fulfill the "Consistency" requirement
2. It would run on the user's machine, so if we were to have a very rich DOM, a low-end device (especially mobile) could struggle with this, or take a long time

```takeaways
The solutions I found to generate a PDF on the client-side are usually one (or several) of the following:
1. Meant for programmatically generating a PDF (not what I needed, does not fulfill the "Generic" requirement)
2. Do not generate a high-fidelity PDF (with the CSS, fonts, vector information), thus not fulfilling the "Fidelity" requirement
3. Inconsistent or buggy, especially with rich content

Even if I were to find such a library - it would still be insufficient, due to the fact it runs on the user's machine, and thus may look different on different platforms,
or may be computationally intensive on low-end devices.
```

## Server-side - the best side?

So, as I established in the end of the previous section, generating the PDF on the user's machine has some drawbacks.

I then thought - in the browser, when we "print to PDF", we always get a very high quality PDF, right?
It looks the same as the web page (you can target `print` specifically with CSS `@media` queries with [great browser support](https://caniuse.com/css-mediaqueries)), preserves the font, images and vector graphics.
So, simulating something like this on the server-side seemed like it might be a good approach.
Upon some further research, I decided that this was not an original idea (which is always a good sign in our line of work, to be honest), and it might just be crazy enough to work.

So, how do we simulate a "print to PDF"?
Well, it essentially boils down to the question of simulating a browser, and this I know! Let's use headless browsers.
For those who are unfamiliar, what headless browsers are running browser instances, except without the UI.
This type of browser automation comes up a lot when testing, but is also useful for other things like scraping or in our case, generating PDFs!

I have experience with [puppeteer](https://github.com/puppeteer/puppeteer) so that is what I chose to use.  
There are other very nice alternatives such as [playwright](https://github.com/microsoft/playwright), which would also do very nicely here
(Playwright also has the added benefit of supporting other browsers such as Firefox, but we don't actually need that here).

Puppeteer simulates Google Chrome, and we get some nice benefits:

1. By always using the same browser and running this PDF generator on the same platform (e.g. Ubuntu) means we get consistent looking UI between renders
1. Puppeteer uses a recent version of Chrome which provides the ability to use the latest and greatest of web technologies
1. Puppeteer also has a "non-headless" mode, which does the same thing but displays the actual UI when it's running. This is useful for testing it out when things go wrong

Okay, so let's draw up a game plan:

1. Spin up a headless browser in Puppeteer
1. Generate an HTML [data URI](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) for our web page (with all its dependencies, such as fonts or stylesheets)
1. Print the page to an A4 PDF

Indeed, this turned out great in practice.
I used [Vercel serverless functions](https://vercel.com/docs/serverless-functions/introduction) in my [Next.js](https://nextjs.org/) application.

However, note that if you simply tried this, it wouldn't immediately work - Puppeteer needs to use a Chromium (the engine behind Google Chrome) binary and the server probably does not have it installed.
Vercel functions, which I used for this, run on AWS Lambdas under the hood, so fortunately there is a handy NPM package for this called [chrome-aws-lambda](https://github.com/alixaxel/chrome-aws-lambda) which ships with
the correct Chromium binary for Puppeteer to use.

Some sample code for a Next.js API endpoint could look like this (using Typescript):

```ts
import type { NextApiRequest, NextApiResponse } from "next";
import puppeteer from "puppeteer";
import chrome from "chrome-aws-lambda";
import React from "react";
import ReactDOMServer from "react-dom/server";
import ComponentToRenderToPdf from "..."; // Example

async function printPDF(name: string) {
  const browser = await puppeteer.launch(
    process.env.NODE_ENV === "production"
      ? {
          args: chrome.args,
          executablePath: await chrome.executablePath,
          headless: chrome.headless,
        }
      : { headless: true }
  );
  const page = await browser.newPage();

  // Render the desired React component to a string.
  const html = ReactDOMServer.renderToString(
    <html>
      <head>
         { /* Optionally include external stylesheets here. */ }
      </head>
      <body>
         <ComponentToRenderToPdf name={name}>
      </body>
    </html>
  );

  // Navigate to an HTML data URI with the HTML we generated before.
  const response = await page.goto("data:text/html," + html, { waitUntil: ["networkidle0"] });
  if (!response.ok()) {
     // Handle error appropriately.
  }

  await page.emulateMediaType("print");
  const pdf = await page.pdf({ format: "a4", printBackground: true });

  // Clean up after ourselves like good citizens.
  await browser.close();

  return pdf;
}

export default async (req: NextApiRequest, res: NextApiResponse<Buffer>) => {
  // Optionally use the request and pass parameters to render the component dynamically.
  const name = req.query.name;
  const pdfBuffer = await printPDF(name);

  // Return the result with a MIME type of `application/pdf`.
  res.setHeader("Content-Type", "application/pdf");
  res.setHeader("Content-Length", pdfBuffer.length);
  res.status(200).send(pdfBuffer);
};
```

And this works like a charm.
Navigating to my website with the relative URL `/api/renderPdf?name=Guy` renders the desired PDF, and the performance is great for my needs.

Another benefit of this approach is that the PDF also preserves the functionality of links 🥳

Note that there is still a drawback to this method - if you want to generate a preview of the PDF you want to render using the same React component,
if you're running it on a platform that is different than the server's, the PDF may look differently.
However, that is a trade-off that for my particular project I was willing to live with.

```takeaways
We built a serverless function that, on-demand:
1. Spins up a Google Chrome headless browser instance (by leveraging Puppeteer)
1. Opens an HTML data URI that we created from our HTML (or React component in this case)
1. Prints the web page to a PDF that fulfills all our original requirements
```

## Conclusion

So, my friends, in our journey to becoming a PDF-generation masters, we realized that generating PDFs on the client-side is not straightforward but is also
not the ideal solution to fulfill our requirements and so we went on a server-side approach with a headless browser.

This was not a challenge that I needed to solve in the best possible way and I settled on a "good enough" solution for my use-case.  
Therefore, if you feel that I missed something or if there are better approaches out there, please do not hesitate to reach out!



What does any blog author with two posts need? _"More content!"_ I hear you shout, to which I say - not today!  
I have decided to add - _drum roll, please_ - some anchor links to the headings!
And then I decided to make some content around it, since the last time I posted a blog post... Well, let's just say it's been a long time to avoid embarrassment.

So what are anchor links, anyway? If you're unfamiliar, anchor links are basically links to specific sections of a page.  
Try hovering over one of the headings in this page, and clicking on the icon next to it - it will append a `#` with the heading
(e.g. `#adding-the-anchor`) and will scroll the page so that it focuses on the heading.  
If you navigate to this URL, it will also focus on the heading.  
How this works is not magic - the ID of the heading should match the heading "slug"; In this example, the "Adding the Anchor" `<h2>` heading has an ID of `adding-the-anchor`.
Try inspecting the HTML and seeing for yourself!

So, let's begin with the simplest heading and see how you would go about doing something like this:

```html
<h2>Adding the Anchor</h2>
```

> The actual code I use to render headings is omitted for simplicity (and accounts for various level of heading tags).

Let's break this down into three parts:

1. Add the anchor to the heading
2. Display it only on hover
3. Add the actual anchor link functionality

## Adding the Anchor

First, let's style the heading a bit (I will not be assuming any predefined styles):

```css
h2 {
  font-weight: bold;
  font-size: 40px;
  font-weight: bold;
}
```

This should look something like this:

![](/anchor-links/01.png)

Let's wrap the heading in a `<div>` with a class of `container` (we'll style that soon) and add a link icon from [heroicons](https://heroicons.com/) with a class of `icon` (also to be styled later):

```html{2-5}
<div class="container">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
         stroke="currentColor" class="icon">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
    </svg>
  <h2>Adding the Anchor</h2>
</div>
```

Now, let's style the icon a bit:

```css
.icon {
  color: #9ca3af;
  width: 18px;
  height: 18px;
}
```

> Note: By setting the SVG's `stroke` property to `currentColor` (that is also how it's copied from Heroicons), we can change the text color and it will control the SVG's stroke.
> This technique is particularly useful in CSS utility libraries like Tailwind, in which you have special classes for the setting the text color.

At this point we should have something like this:

![](/anchor-links/02.png)

Instead, what we want to do is want to have them on the same line - we'll use **Flexbox** for that.  
We'll also want to align them both to the bottom, so an `items-end` class should take care of that:

```css{1-4}
.container {
	display: flex;
	align-items: flex-end;
}

.icon {
	color: #9CA3AF;
	width: 18px;
	height: 18px;
}

h2 {
	font-weight: bold;
	font-size: 40px;
	font-weight: bold;
}
```

Another important thing we'll want to do, in my case, is have the heading stay-put, and move the anchor link to the left of it.
The way to achieve is adding having a wrapper with a `position: relative`, and adding a wrapper over the SVG with a `position: absolute`,
thus detaching it from the document flow.  
We'll also move it up a bit, so that its bottom end aligns with the text's baseline (there are better ways to achieve this, but this will be do for our purposes).

```css{2,8-10}
.container {
	position: relative;
	display: flex;
	align-items: flex-end;
}

.icon {
	position: absolute;
	left: -36px;
	bottom: 4px;
	color: #9CA3AF;
	width: 18px;
	height: 18px;
}

h2 {
	font-weight: bold;
	font-size: 40px;
	font-weight: bold;
}
```

![](/anchor-links/03.png)

## Displaying on Hover

Alright, let's say that we're content with this. Now how do we only show it on hover?

Doing this in JavaScript would be very simple; however, I always tend to try and make things work using only HTML and CSS, before asking JS for help.

So, let's set the icon to `display: none` and when the container is hovered, let's change it to `display: block`.  
No sweat, right?

```css{7-9,12}
.container {
	position: relative;
	display: flex;
	align-items: flex-end;
}

.container:hover .icon {
  display: block;
}

.icon {
	display: none;
	position: absolute;
	left: -36px;
	vertical-align: text-bottom;
	bottom: 4px;
	color: #9CA3AF;
	width: 18px;
	height: 18px;
}

h2 {
	font-weight: bold;
	font-size: 40px;
	font-weight: bold;
}
```

Now we get to the tricky part, however.
Do you notice the issue? When we hover over the title, and then move our mouse to the anchor - it disappears!

How I solved this issue (and I am sure that there are other, possibly better approaches out there) is by essentially expanding the "hit box" of the heading
with a neat hack - I added `padding-left: 36px` (which gave the text left padding, thus moving it to the right) and "corrected" it by moving it back left with a `left: 36px` (the class is already `position: relative` so no need to set it).
This alone would work, except it would also move the icon left by `36px`, so I set the icon to `left: 0`.

```css{5-6,16}
.container {
	position: relative;
	display: flex;
	align-items: flex-end;
	padding-left: 36px;
	right: 36px;
}

.container:hover .icon {
  display: block;
}

.icon {
	display: none;
	position: absolute;
	left: 0;
	vertical-align: text-bottom;
	bottom: 4px;
	color: #9CA3AF;
	width: 18px;
	height: 18px;
}

h2 {
	font-weight: bold;
	font-size: 40px;
	font-weight: bold;
}
```

## Adding the Functionality

To make this into a working anchor link, we need to make sure of two things:

1. Add an ID to the heading (its "slug", e.g. for "Adding the Anchor" we could use `adding-the-anchor`)
2. Make the anchor icon a link to the same page, with an added `#adding-the-anchor`

The HTML would look something like this:

```html{2,7-8}
<div class="container">
	<a href="#adding-the-anchor">
		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
			stroke="currentColor" class="icon">
		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
		</svg>
	</a>
  <h2 id="adding-the-anchor">Adding the Anchor</h2>
</div>
```

This concludes this post! I hope it proved useful to at least some of you.

If it helps, here is a Codesandbox which demonstrates this in action: [https://codesandbox.io/s/anchor-link-demo-nk9ez](https://codesandbox.io/s/anchor-link-demo-nk9ez)



3 years ago I created [this UI experiment](https://codepen.io/guywald/pen/xOPqyo) on CodePen, for a call to action with a ripple effect
like ones based on [material design](https://material.io/components/buttons/).
For this post, I'll share how to achieve a similar effect.

This is the final result: [https://codesandbox.io/s/material-button-vanilla-xf9pi]()

In order to achieve this effect, we will rely on CSS animations for the actual ripple but will have to use JavaScript
to obtain the relative mouse position after the button is clicked.
These relative coordinates will be used by the CSS through CSS variables.

I will demonstrate this component in vanilla JavaScript, but stay tuned until the end
if you are interested in this component **in React**.

## Getting Started

Let's start off with the simplest of buttons:

```html
<button class="btn">Click Anywhere</button>
```

We will give the button some basic CSS for resetting its appearance across browsers, center the text and give it some life.
We will use a fixed width and height and center the text horizontically and vertically using Flexbox.

I would normally not hard-code the width and just give it some padding, to conform to dynamic text, but the reason will be explained later on.
Just trust me for now. 😇

```css
.btn {
  /* Reset styles */
  appearance: none;
  outline: none;
  background: none;
  border: none;

  width: 12em;
  height: 3em;

  /* Center text */
  display: flex;
  justify-content: center;
  align-items: center;

  padding: 0.5em 1em;
  font-size: 20px;
  border-radius: 0.3em;
  background: #42a5f5;
  color: #e3f2fd;
}
```

Let's add some shadow for a more material design-y look.
I usually go for a big soft shadow, stacked with a tighter more profound shadow. We will add a `transition` for a nice animation.

> Note that animating `box-shadow` is _not_ GPU-accelerated (like `opacity` and `transform`) so it may cause some UI jank. Use with caution!

```css
.btn {
  /* Reset styles */
  appearance: none;
  outline: none;
  background: none;
  border: none;

  width: 12em;
  height: 3em;

  /* Center text */
  display: flex;
  justify-content: center;
  align-items: center;

  padding: 0.5em 1em;
  font-size: 20px;
  border-radius: 0.3em;
  background: #42a5f5;
  color: #e3f2fd;

  transition: box-shadow 250ms ease;
}

.btn:hover {
  box-shadow: 2px 5px 5px 0px rgba(2, 119, 11, 0.2), /* soft shadow */
  1px 2px 3px 0 rgba(2, 119, 11, 0.1); /* harsh shadow */
}
```

## Adding the Ripple

We will a `div` for our ripple, which we will place before the text.
Our ripple will essentially be a circle which should expand after clicking anywhere on the button, fading in and out.

We will also surround the text with a `div` and give them appropriate `z-index` values, so that the ripple does not obscure the text.

```html
<button class="btn">
  <div class="btn__ripple"></div>
  <div class="btn__text">Click Anywhere</div>
</button>
```

We will want to supply our ripple with coordinates to be placed relatively to the button.
We will mock this for now in the CSS and add this functionality later.

First, we will add a `position: relative` to the button so we can add a `position: absolute`
to the ripple and position it relatively to the button (a `position: absolute` element will
be positioned relative to its first ancestor that is `relative`-ly positioned).

We will use **CSS variables** to mock our mouse coordinates when the button is pressed.
If you have not yet heard of CSS variables (or "custom properties"), [you should](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)!
They are very useful for many things, adhere to the cascade, and the [browser support](https://caniuse.com/#feat=css-variables) is pretty good!

The CSS variables will be added to the button element and not the ripple, since they will be cascaded to all of its inner
elements (the ripple being one of them), but as a general habit I tend to scope the variables to the component, in case they will be needed
in other children of the element. You don't have to do this if you think otherwise.

We will also add an `overflow: hidden` to the button to obscure the ripple that goes out
of its frame.

We will give the ripple the same amount for width and height with a `border-radius` of `50%` to make it a nice circle.
This is why it was important that we set hard-coded width and height to the button before -- going for relative dimensions here could make for a "stretched" oval which
wouldn't look as nice.
For not getting ripples too small for the containing button, I went for hard-coded values in both.

Finally, we will set the `left` and `top` properties according to the CSS variables on the button, which we mocked.
For the `left` property we will substract half of the ripple's width, to center it.
We will do the same for the `top` property, but with the circle's height.

```css
.btn {
  /* Mock the CSS variables (temporary) */
  --left: 12px;
  --top: 24px;

  /* Reset styles */
  appearance: none;
  outline: none;
  background: none;
  border: none;

  position: relative;
  width: 12em;
  height: 3em;

  /* Center text */
  display: flex;
  justify-content: center;
  align-items: center;

  padding: 0.5em 1em;
  font-size: 20px;
  border-radius: 0.3em;
  background: #42a5f5;
  color: #e3f2fd;

  transition: box-shadow 250ms ease;

  overflow: hidden;
}

.btn:hover {
  box-shadow: 2px 5px 5px 0px rgba(2, 119, 11, 0.2), /* soft shadow */ 1px 2px
      3px 0 rgba(2, 119, 11, 0.1); /* harsh shadow */
}

.btn__ripple {
  position: absolute;

  /* We offset half of the circle's radius to center it */
  left: calc(var(--left) - 2em);
  top: calc(var(--top) - 2em);

  width: 4em;
  height: 4em;

  background: #64b5f6;
  border-radius: 50%;

  z-index: 0;
}

.btn__text {
  z-index: 1;
}
```

## Adding Functionality

Now we will receive the coordinates of the mouse when clicking the button, and propagate them to the
CSS variables.

We will add some IDs for the button and the ripple:

```html
<button id="btn" class="btn">
  <div id="ripple" class="btn__ripple"></div>
  <div class="btn__text">Click Anywhere</div>
</button>
```

And an event listener for mouse clicks:

```js
const $button = document.getElementById("btn");
const $ripple = document.getElementById("ripple");

$button.addEventListener("click", e => {
  // Let's handle the click!
});
```

Now, to calculate the relative position of the mouse from the top left corner of the button,
we will use the `pageX` and `pageY` properties on the mouse event from the callback, which will give us
the absolute coordinates of the mouse relative to the viewport.
For the relative _left_ position from the _button_, we will substract the button's DOM element's offset from the left side
of the viewport - its `offsetLeft`. Same goes for the top relative position - we will subtract the button's `offsetTop`.

```js
const $button = document.getElementById("btn");
const $ripple = document.getElementById("ripple");

$button.addEventListener("click", e => {
  const left = e.pageX - $button.offsetLeft;
  const top = e.pageY - $button.offsetTop;

  // Now what?
});
```

After we have these values, what's left is passing these to our button.
How would we do that?
Well, with the CSS variables we mocked earlier! Now we'll pass them the actual values.

```js
const $button = document.getElementById("btn");
const $ripple = document.getElementById("ripple");

$button.addEventListener("click", e => {
  const left = e.pageX - $button.offsetLeft;
  const top = e.pageY - $button.offsetTop;

  $button.style.setProperty("--left", left + "px");
  $button.style.setProperty("--top", top + "px");
});
```

Great! Now let's remove the mock.

## Adding Animations ✨

To get a growing ripple, we will want to have 2 layered animations:

1. A scaling animation, with the ripple going from a scale of `0` to a scale of `1`.
2. A fade animation, with the ripple going from an opacity of `0`, to an opacity of `1` (or some other value) and back to `0`.

For the animation, we will use a good ol' CSS animation.
But there's a problem -- we will need to somehow reset this animation every time the button is clicked.

So to actually trigger the animation, we will use a trick I learned back in the day from [this fantastic CSS-Tricks article](https://css-tricks.com/restart-css-animation/)
-- we have a class that sets off the animation and when we click the button - we will remove the class, trigger a reflow and add the class back.

The magic line that triggers the reflow basically computes a layout property on the DOM node, which therefore gives us
a "window" of sorts, in which we can remove and then add back the class responsible for the animation.

It should look something like this:

```js
const $button = document.getElementById("btn");
const $ripple = document.getElementById("ripple");

$button.addEventListener("click", e => {
  const left = e.pageX - $button.offsetLeft;
  const top = e.pageY - $button.offsetTop;

  $button.style.setProperty("--left", left + "px");
  $button.style.setProperty("--top", top + "px");

  $ripple.classList.remove("ripple");
  void $ripple.offsetWidth; // Force layout refresh
  $ripple.classList.add("ripple");
});
```

Now, let's add the actual animations:

```css
.btn {
  /* ... */
}

.btn:hover {
  /* ... */
}

.btn__ripple {
  /* ... */
}

.btn__text {
  /* ... */
}

.btn__ripple.ripple {
  animation: ripple-opacity-anim 500ms ease, ripple-scale-anim 500ms ease;
}

@keyframes ripple-opacity-anim {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}

@keyframes ripple-scale-anim {
  from {
    transform: scale(0.5);
  }
  to {
    transform: scale(1);
  }
}
```

The `70%` I chose for the peak time of the opacity for the ripple, and `0.5` for the peak value are
personal taste and I encourage you to experiment and see what you like best!

All that's left is scaling up the ripple; When doing this, don't forget changing the offsets for `left` and `top` as well!
Also note that the larger the ripple will be, the faster the animation will look as well, so to compensate you can make the animation
play for a bit longer.

## React Component

For the React component, the styles would be the same, and the component would look something like this:

```jsx
function MaterialButton({ children }) {
  const buttonRef = React.useRef();
  const [isAnimating, setIsAnimating] = React.useState(false);

  function handleClick(e) {
    e.persist();

    const $button = buttonRef.current;

    if (!$button) {
      setIsAnimating(false);
      return;
    }

    const left = e.pageX - $button.offsetLeft;
    const top = e.pageY - $button.offsetTop;

    $button.style.setProperty("--left", `${left}px`);
    $button.style.setProperty("--top", `${top}px`);

    setIsAnimating(false);
    setTimeout(() => setIsAnimating(true), 0);
  }

  return (
    <button ref={buttonRef} className="btn" onClick={handleClick}>
      <div className={"overlay" + (isAnimating ? " grow" : "")} />
      {children}
    </button>
  );
}
```

Here we use a `ref` for accessing the button's DOM node and we use state to track whether
there is a ripple happening.
The magic for resetting the fade is queuing a microtask (the `setTimeout` with `0` milliseconds an argument)
to disable the `isAnimating` flag, therefore not interrupting the animation but preparing the component for the
next ripple.

## Closing Notes and Code

There you have it! Your very own ripple 😊

Some things could have probably been done better but I hope that the concepts are clear and that you learned some new tricks.
Before taking something like this to production, I would make sure that it works consistently across browsers. I have also used CSS variables here,
which as far as I know cannot be polyfilled; Therefore, if you plan on using them, make sure that they conform to your browser support.

I hope that you enjoyed this, please reach out to me if anything seems unclear, or just
to show me your awesome ripply buttons!

The final code can be found on CodeSandbox: [vanilla](https://codesandbox.io/s/material-button-vanilla-xf9pi) or [React](https://codesandbox.io/s/materialbutton-b4101).


Hey there! 👋

I'm Guy Waldman, a software developer and graphic designer from Israel and this blog will be a safe-haven for all my future ramblings.

## A Bit About Myself

Freshly graduating from a B.Sc. in Computer Science from the Technion (Israel Institute of Technology) and a full-time employee at Microsoft Azure.
Before starting at Microsoft, I worked and occasionally freelanced in web development and design.

I have many passions and interests -- both a blessing and a curse; I am also a hybrid in too many things - code/design, platforms and operating systems, languages (both spoken and programming) -- you name it. For the past few years, I've been mostly developing and designing web and mobile applications (primarily in ReactJS).
For the past year or so, I've also taken an interest in the Rust programming language (and systems programming as a whole) so you can expect some content about Rust in the future.

Before pursuing my degree, I also worked in an animation studio as a digital artist (graphic design and occasionally some motion design in After Effects). That was, and still is, my side-passion.

The programming languages I'm most proficient in are JavaScript (with various flavors), Python, Rust, C# and C++.
You will probably see these the most in my blog posts.

## What I Will Post About

Mostly software, design, and UI/UX -- but, really, anything that comes to mind!

👋 Hi, I'm
Guy
Waldman

Recent blog posts

👋 Hi, I'mGuyWaldman

Recent blog posts

👋 Hi, I'm
Guy
Waldman