DEV Community: Corentin

🚀 Introducing EmbedLite. A Drop-In, Privacy-Friendly Replacement for YouTube Embeds

Corentin — Fri, 03 Oct 2025 09:30:58 +0000

YouTube’s embed iframe is kind of… awful. Every time you paste a YouTube <iframe> into your website, it loads hundreds of kilobytes of scripts, and slows down your page. Even if your visitor never clicks “play.”

So I built something to fix that.

👉 EmbedLite.com — a drop-in, open-source replacement for YouTube’s embed iframe that’s lightning fast, SEO-optimized, and privacy-friendly.

💡 The Problem

If you’ve ever run Lighthouse or PageSpeed Insights on a page with multiple YouTube videos, you’ve probably noticed how bad it gets.

A single YouTube embed can:

Load multiple JavaScript bundles from youtube.com, google.com, and doubleclick.net
Add network requests even before interaction
Delay Largest Contentful Paint (LCP)
Leak privacy data through tracking pixels and cookies

And that's for each video on the page...

⚡ The Solution: EmbedLite

EmbedLite replaces the heavy YouTube iframe with a tiny, static placeholder — basically a thumbnail and play button. The real YouTube player only loads after the user clicks “play.”

That’s it. No tracking, no preloading, no layout shifts.

All you have to do is change this:

-- <iframe src="https://youtube.com/embed/..."
++ <iframe src="https://embedlite.com/embed/..."

And you’re done.

Your site instantly becomes faster, more privacy-friendly, and better optimized for SEO.

🧩 How It Works

Under the hood, EmbedLite is a super-light static app. It fetches the video thumbnail and title, displays them with minimal HTML and CSS, and only when someone interacts does it swap in the real YouTube iframe.

This means:

Zero external scripts until play
No cookies or tracking before user consent
Smaller total payloads
Instant page loads, even with multiple videos

It’s inspired by projects like Paul Irish’s lite-youtube-embed and Justin Ribeiro’s lite-youtube, but it’s hosted, API-like, and even simpler to use.

🛠️ Usage

Replace your YouTube embed with an EmbedLite URL:

-- <iframe src="https://www.youtube.com/embed/jNQXAC9IVRw" ...></iframe>
++ <iframe src="https://www.embedlite.com/embed/jNQXAC9IVRw" ...></iframe>

That’s literally it.

You can also pass parameters just like you would to YouTube:

https://embedlite.com/embed/dQw4w9WgXcQ?controls=0&mute=1&start=30&end=120

Or set a custom title:

https://embedlite.com/embed/dQw4w9WgXcQ?autoplay=true&title=Rick%20Astley

☁️ Host It Yourself (If You Want)

You can deploy your own version of EmbedLite anywhere static files can live:

Cloudflare Pages
Vercel
Netlify
Or your own server

Everything is open source on GitHub: github.com/embedlite/embedlite.

🧠 Why This Matters

By reducing unnecessary network requests and avoiding trackers, EmbedLite:

Improves Core Web Vitals
Keeps privacy in the user’s hands
Makes your frontend simpler and lighter

It’s a small fix with a surprisingly big impact.

🧑‍💻 What's next?

I built EmbedLite because I was tired of my pages getting bogged down by YouTube embeds. I plan on making a npm package so that it's easy to add to your project. Let me know your thoughts!

In the meantime, give it a try at:

👉 EmbedLite.com

📦 GitHub: embedlite/embedlite

YouTube embed

Corentin — Wed, 30 Jul 2025 17:32:18 +0000

Migrating from Google's reCAPTCHA to Cloudflare Turnstile?

Corentin — Mon, 22 Jul 2024 15:43:08 +0000

Google reCAPTCHA new pricing will be rolled out on August 1st, meaning that you have a few days left to migrate to a cheaper alternative or ensure your bank account is well-funded.

Starting at $1 for 1,000 verifications, it is going to cost a lot. At Mailmeteor, we use reCAPTCHA extensively to protect our services from bots. With Google's pricing change, we calculated that we're about to pay thousands of dollar per month to keep using their reCAPTCHA service.

What's a CAPTCHA?

CAPTCHAs are an essential part of the web. It aims to separate good citizens from bad actors. Essentially, it's a service that will operate on the frontend and generate a token that is transmitted to the backend. The backend then verifies that the token is legit, and, if so, performs the action.

Google did a great job at promoting their own service, but thankfully, there are some alternatives:

hCaptcha. We considered it at first, but their pricing is quite similar to new Google's pricing.
Cloudflare Turnstile. We are huge fans of Cloudflare, and definitely looked into it. As for now, it's a free service.

Let's dig in.

Moving away from Google reCAPTCHA...

One of our free tools is an AI Email Writer. It's basically an HTML page that send request to our backend, which then makes to a third-party AI solution.

To protect it from abuse, Google reCAPTCHA was enabled from day one. Here's how the verification was done so far (backend-side):

// index.js
app.post('/api/email-ai-writer', recaptcha.middleware.verify, aiEmailWriter)

// ai_email_writer.js
async function aiEmailWriter(request, response) {
  try {
    // Recaptcha
    if (!request.recaptcha || request.recaptcha.error || !request.recaptcha.data) {
      console.warn('Recaptcha: verification failed.')
      return response.status(403).send({ error: true, message: 'Recaptcha: verification failed' })
    } else if (request.recaptcha.data.action !== 'aiemailwriter') {
      console.warn('Recaptcha: bad action name')
      return response.status(403).send({ error: true, message: 'Recaptcha: bad action name' })
    } else if (request.recaptcha.data.score < 0.3) {
      const score = request.recaptcha.data.score
      console.warn(`Recaptcha: score is below 0.3 (${score})`)
      return response.status(403).send({ error: true, message: 'Recaptcha: score too low' })
    }

    ...

That's quite simple and it's an essential part of why Google reCAPTCHA was so popular. The footprint is very limited and it's really easy to implement. For the most curious ones, we leveraged the express-recaptcha package to make it really easy to implement.

... to Cloudflare Turnstile

When migrating to Turnstile, we couldn't found an NPM package, so we had to write a middleware to process the token. Here's how it looks like:

// middlewares/turnstile.js
const turnstile = async (request, response, next) => {
  try {
    // Turnstile injects a token in "cf-turnstile-response".
    const token = request.query['cf-turnstile-response']
    const ip = request.header('CF-Connecting-IP')

    if (!token) {
      throw new Error('Missing CloudFlare Turnstile Token')
    }

    // Validate the token by calling the
    // "/siteverify" API endpoint.
    const formData = new FormData()
    formData.append('secret', process.env.CLOUDFLARE_TURNSTILE_SECRET_KEY)
    formData.append('response', token)
    if (ip) formData.append('remoteip', ip)

    const url = 'https://challenges.cloudflare.com/turnstile/v0/siteverify'
    const result = await fetch(url, {
      body: formData,
      method: 'POST',
    })

    // Process the verification outcome
    const outcome = await result.json()

    if (!outcome.success) {
      throw new Error('CloudFlare Turnstile declined the token')
    }

    request.turnstile = outcome

    // If authentified, go to next middleware
    next()
  } catch (err) {
    console.error(err)
    return response.status(403).send('Forbidden')
  }
}

export { turnstile }

Once the middleware is in place, we can apply it to any requests:

// index.js
app.post('/api/ai-email-writer', aiRateLimiter, turnstile, aiEmailWriter)

And inside the function that treats the request, it's quite similar to what we had previously:

// ai_email_writer.js
async function aiEmailWriter(request, response) {
  try {
    // CloudFlare Turnstile protection
    if (!request.turnstile || request.turnstile.error) {
      console.warn('Recaptcha: verification failed.')
      return response.status(403).json({ error: true, message: 'Recaptcha: verification failed' })
    } else if (request.turnstile.action !== 'aiemailwriter') {
      console.warn('Recaptcha: bad action name')
      return response.status(403).json({ error: true, message: 'Recaptcha: bad action name' })
    }

    ...

Conclusion

Migrating from reCAPTCHA to Turnstile is straightforward and shouldn't take more than a few hours. It works quite similar and will definitely save you a lot of money at the same time.

I didn't cover the frontend in this article, because we use an invisible widget that our users don't see. But Turnstile's documentation covers extensively how to use their interactive widgets.

Call it a day!

How to monetize your Google Workspace add-on?

Corentin — Sun, 06 Nov 2022 17:13:24 +0000

You've built a great add-on for the Google Workspace ecosystem (Google Docs, Google Sheets, Gmail & co.). It's getting a lot of traction and you feel like you can monetize it. If this is your current situation, great! We were in the same situation a few years ago at Mailmeteor and we totally understand how excited you can feel today.

Below is the guide I wish I had found a few years ago when I was researching how to monetize our mail merge add-on for Google Sheets.

There are several ways to manage how you monetize add-ons. I'll share with you how we do it at Mailmeteor. Our approach is - I believe - one that provides the best user experience (for your users) and high security (for you, the developer).

Also, at Mailmeteor, we heavily rely on Firebase, which has a NoSQL database (Real-time Database) and can run serverless functions (Cloud Functions). We use both to handle the licensing. If you aren't familiar with Firebase yet, feel free to read on. The general concept still applies even if you prefer AWS or other cloud providers.

Step 1. Authentication

First, you need to authenticate your users. When you build an add-on, sometimes you don't have a way for your users to authenticate. That's especially true for narrowed add-ons (that provide a limited set of features). The thing is as soon as you want to monetize your add-on, you need to provide a signup flow to safely authenticate users and retrieve their status (e.g. free vs. paid).

Google Apps Script already provides an authentication mechanism, so there's no need to start from scratch. Using UserSession.getEmail() you can safely know which user is running your code. That's a very good start. Plus, if you take this path (which we did at Mailmeteor) you don't need to prompt to users an email/password form. The user is already logged in. That's a high-five for your users, plus this will save you hours of work.

This being said, now you need to make Google Apps Script communicate with your backend. As I said, at Mailmetoer, we use Cloud Functions for our backend. This has the benefit of being relatively cheap at the start and scaling automatically as the add-on grows. But, Cloud Functions is not a requirement, you could grab a cheap $4 droplet on DigitalOcean and that would work just as well.

To make Google Apps Script work with your backend, you can create a User class in your Apps Script code. And add a getProfile method in it. That method will fetch the user profile every time you call the function. Here's a gist of our user.gs file in Apps Script:

export class User {
  public getProfile() {
    const userId = this.getUserIdFromEmail(Session.getEffectiveUser().getEmail())
    const request = {
      url: BACKEND_ENDPOINT_ + '/user?uid=' + (email),
      options: {
        method: 'GET',
        headers: {
          Authorization: 'Bearer ' + BACKEND_TOKEN_
        }
      }
    }

    const response = UrlFetchApp.fetch(request)
    const profile = JSON.parse(response.getContentText())

    return profile
  }

  public getUserIdFromEmail(email) {
    const hash = `SOME_RANDOM_STRING-${email.toLowerCase().trim()}`
    const digest = Utilities.computeDigest(Utilities.DigestAlgorithm.SHA_256, hash);

    return digest
      .map(function(byte) {
        const v = byte < 0 ? 256 + byte : byte;
        return ("0" + v.toString(16)).slice(-2);
      })
      .join("");
  }
}

To retrieve the authenticated user profile, you would run new User().getProfile(). As you can see, we rely on Session.getEffectiveUser().getEmail() to safely retrieve the authenticated user email. This method is made available by Google Apps Script via the Session class.

Also, you might have noticed that the user's ID is generated by the getUserIdFromEmail which is just an SHA-256 of the user email. That won't resist brute force, so we prefix it with a random string to make it harder to guess.

Sometimes, your addon might use Apps Script to create and serve HTML, for example by showing a modal or sidebar. In such a case, you would have to create a function in your user.gs file: function getUserProfile() { return new User().getProfile() }. Then, you can retrieve the user profile from the HTML page by running google.script.run.getUserProfile().

Now that you know how to retrieve a user profile, let's see how to create a user.

Step 2. User creation

In your backend, you will need to create the /user endpoint that will retrieve the user profile. Again, Firebase provides a great environment to do just that:

export const profile = async (request, response, next) => {
  try {
    // Retrieve params
    const userId = request.query.uid;

    // Validation
    if (typeof userId !== 'string' || !userId) throw new Error('invalid_params');

    // Retrieve the profile from Firebase Real-time Database
    const userRef = FirebaseDatabase.ref(`users/${uid}`);
    const userSnap = await userRef.once('value');
    const profile = userSnap.val() || {};

    // Send response to client
    response.status(200);
    response.send(profile);
    response.end();
  } catch (error) {
    next(error);
  }
};

The user ID generated in Apps Script. We use it as a key in our Firebase Real-time Database to retrieve the user profile. That's very easy to implement. Before releasing to production, make sure to secure your application by protecting your database from read/write (learn how to do it.

If you are already familiar with Firebase, you might have noticed that this example doesn't use Firebase Authentication - Firebase's user management feature. That's because it way easier to do like that and at Mailmeteor we have some applications that run just this code. Mailmeteor is a bit different as we provide a Dashboard where users can sign in to send emails and manage their accounts. So we do use the Firebase Authentication layer.

What's great about using Firebase, is that it lets you build lots of things easily. For example, Firebase lets you run a function as soon as a new field is created in your database. This can help you send an onboarding email sequence for example.

Step 3. Integrating with Stripe

So let's recap, from your add-on, using Apps Script and Firebase, you can now safely retrieve a user profile. All you need to do now is to update the user profile when someone pays you.

We use Stripe because that's a relatively intuitive payment platform, but the following would work just as well with a PayPal account or any other service. We use Stripe Checkout at Mailmeteor to handle the checkout flow. If you want to manage the checkout flow yourself, you can do so according to their docs.

What we will focus on here are Stripe webhooks. In Stripe, you can create webhooks, so that Stripe can inform you whenever something happens. There are webhooks for just about anything (new customer, new subscription, new payment, new invoice, etc.).

The webhook that you will use depends on the business model:

for lifetime subscriptions (i.e. the user pays you once and gets full access to the software for the rest of its life), you need to listen to the checkout.session.completed event.
for recurring subscriptions (i.e. you are building a SaaS), you need to listen to multiple webhooks. At least: webhook.checkout.session.completed and customer.subscription.deleted. And depending on how advanced your SaaS is, you might need as well customer.subscription.updated and invoice.* events.

To keep things simple, I'll show you how to listen to checkout.session.completed. And if the business model of your add-on requires more, it's up to you to handle more webhooks events.

export const webhook = async (req, res, next) => {
  // Stripe webhook request signature
  const sig = req.get('stripe-signature')

  // Stripe webhook raw request
  // Note: "rawBody" is a Firebase method
  // @see: https://firebase.google.com/docs/functions/http-events
  const rawBody = req.rawBody

  try {
    // Verify Stripe request
    const event = stripe.webhooks.constructEvent(rawBody, sig, STRIPE_WEBHOOK_SECRET)

    // Handle the event
    switch (event.type) {
      case 'checkout.session.completed':
        const session = event.data.object
        const customer = (await stripe.customers.retrieve(session.customer))

        // Update profile in Firebase RTDB
        const uid = getUserIdFromEmail(customer.email)
        const userRef = await FirebaseDatabase.ref(`users/${uid}`);
        await userRef.update({ paid: true, customer: customer.id })

        break
    }
  }
}

The webhook function updates the user's profile with the status paid = true and the customer's ID (more on that later). This means that starting from now, whenever you retrieve the user's profile, you can show it all your paid features.

Once you have deployed the webhook function to Firebase, you can configure the webhook in Stripe Dashboard. Just retrieve the URL of your function in the Firebase console and paste it into Stripe.

I would highly recommend you use Stripe's test mode to make sure everything works great.

Bonus: Customer portal

When you start to monetize your add-on, your users will regularly ask you for their invoices. If you don't want to spend 50% of your support on these requests, it's best to create a customer portal where users can retrieve their invoices on their own.

Good news: Stripe can help you with that! From your add-on, in the UI, you could add a new view where users can manage their accounts.

To add a link to the customer portal, you need to redirect your users to Cloud Functions which will create the Stripe URL to the customer's portal. The portal function looks similar to this one:

export const portal = async (re, res, next) => {
  const userId = req.body && req.body.user;
  const customerId = req.body && req.body.customer;

  if (typeof userId !== 'string' || !userId) throw new Error('invalid_params');
  if (typeof customerId !== 'string' || !customerId) throw new Error('invalid_params');

  const customer = await stripe.customers.retrieve(customerId);
  const userEmail = getUserIdFromEmail(customer.email);

  if (userId !== userEmail) throw new Error('invalid_customer');

  const session = await stripe.billingPortal.sessions.create({
    customer: customer.id,
  });

  res.redirect(session.url);
};

The customer value is saved at the webhook step, so you can reuse it easily. Also, for better security, we double-check that the customer's email in Stripe matches the provided user ID.

Well, that was a lot?! You'll probably need a few things here and here to finalize the process. But I hope that's a good starting point to help you monetize your Google Workspace add-on.

If you need more help to connect-the-dots, please feel free to reach out to me. And if you haven't an add-on yet, find some inspiration in our best Google add-ons directory.

How to schedule tasks in more than 30 days in Google Cloud Tasks API?

Corentin — Mon, 28 Mar 2022 13:40:55 +0000

At Mailmeteor, we rely heavily on Google Cloud Tasks to send emails. In fact, each time we send an email, there's one (or more) Cloud Tasks associated to it. That's a lot of tasks in the end.

While Google's product is really robust, one thing that has always being tricky is that you can't schedule a task that will run in more than 30 days.

Resource	Value	Description
Maximum schedule time for a task	30 days from current date and time	The maximum amount of time in the future that a task can be scheduled.

Extract from Google Cloud Tasks documentation on quotas & limits

It is still way more than what AWS proposes (AWS SQS - Simple Queue Service - lets you queue messages for up to 15 minutes). Nevertheless, there are so many use cases when having a very-long tasks scheduler is needed.

While I wasn't sure why Google has limited the execution delay to a month, one of their employee has explained on StackOverflow that such limit "is a design decision. Google does not charge for the storage space of tasks, so extending that would detrimental to our costs." (source).

Though, Google Cloud Tasks is already a paid product. So extending the date, whether you need to pay for it or not, wouldn't be that much of an issue for them. In fact, according to this StackOverflow thread, more than 1,000 people have been interested in extending the task delay. And there's already a feature request, back from 2020, which I urge you to star to make sure Google prioritizes this.

Too much talking. Let's see how we can keep using Google Cloud Tasks and extend the execution delay "to infinity and beyond".

Solution

The trick is in adding an ETA header to your tasks. This way, before executing the task, you can check if the ETA is now (and thus execute the task) or in the future (and thus re-schedule the task). This way you can recursively keep creating tasks and eventually execute your task at your desired time.

Let's take an example:

I have a task to run in 45 days
I create a new task with the max execution time (30 days)
Then:
- 30 days later, the task executes, but it's too early, so I reschedule it in 45-30 = 14 days
- 14 days later (45 days in total), the task executes normally.

In fact, doing so let's you create tasks in 1 year (or more) from now.

Implementation (JS)

In Express.js, all you need is a middleware that will check if the execution time is in the future, and if so will reschedule the tasks:

// Middleware to reschedule Google Cloud Tasks
export const googleTasksScheduleMiddleware = async (req, res, next) => {
  const taskETAHeader = req.headers['google-cloud-tasks-eta'];

  // If no header, skip middleware
  if(taskETAHeader == null || taskETAHeader == ""){
    next()
    return
  }

  const now = Date.now();
  const intHeader = parseInt(taskETAHeader);

  // Time has passed, let's process the task now
  if(intHeader < now) {
    next()
    return
  }

  // It's too early! Reschedule the task
  else {
    // Construct the task.
    createTask(req.method, req.url, req.headers, req.body)

    res.send('Re-scheduled')    
    return
  }
}

Then, add your middle before the first routes of your application:

app.use(googleTasksScheduleMiddleware)

Conclusion

As you can see, it's pretty easy to implement and doesn't require refactoring your application. If you are interested in more engineering articles from Mailmeteor, make sure to follow my account.

Cannot find name 'Bugsnag'

Corentin — Wed, 03 Nov 2021 13:28:07 +0000

When you get started with Bugsnag, they have a handy guide to help you make sure errors are well reported to their monitoring tool. In Mailmeteor, we are using Bugsnag to make sure our tools are robust and bug-free.

But recently, when initializing a new TypeScript project on Bugsnag, I end up having this error: Cannot find name 'Bugsnag' (which might also be seen as Bugsnag is not defined).

Quick fix

Just add import Bugsnag from '@bugsnag/js'. The type error is gone :-)

How to add a sparkline to your Vue.js app

Corentin — Tue, 13 Jul 2021 14:02:31 +0000

Very recently, I was looking to add a neat sparkline to a Vue.js application of my own.

As always, I googled just that, looking for sparkline vue.js or sparkline npm. But I couldn't find something that was easy, with a small footprint and yet customizable.

After playing a bit with Chart.js, I just stopped and considered how I could build a decent, yet very simple, sparkline component (i.e. without any dependency).

If you look at how npm's sparkline works as well as the ones from Stripe's dashboard, you will quickly realize that it's just a SVG element that you customize with JavaScript.

So bear with me, I'll show you how to do just that.

Demo

Behind the scene

The sparkline is just a Vue.js component where you provide the coordinates of the sparkline as an array. Here's how I've rendered the sparkline in the example above:

<sparkline v-bind:data="[2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31]"></sparkline>

The source code of the component is the following:

As you might have noticed, the code renders an <svg> HTML element by computing the coordinates of the different <path>.

There are two <path>. One for the blue line. And another one for the blue background. I've used the color #1f8ceb but of course this is totally customizable, just like the width/height of the sparkline.

That component is pretty basic and contrary to NPM or Stripe, it doesn't handle when a mouse hovers the <svg>. I didn't need that for my use case, but if ever you implement it, feel free to edit the gist and share it with the community.

Basic mail merge script for Gmail (using Google Apps Script)

Corentin — Mon, 12 Apr 2021 15:04:32 +0000

Sending mass emails from Gmail is sometimes seen as a challenge. I can tell you it's not! In this article we'll look at the basics of building a mail merge script for Gmail and how it can fit your email marketing needs.

First, here's what you need to send emails in bulk with Gmail:

a Gmail (or Google Workspace) account
a list of contacts
a template of the emails you want to send
basic development skills

Now let's see the 6 steps to reproduce to create your Google script to send emails.

Tutorial: Building a mail merge script for Gmail

Open Google Apps Script
Click on the "New project" button to create a new project.
You should now see the script editor.
From the editor, copy and paste the following script:

Update the recipients variable with your list of recipients. Also update the template subject and content to make it fit your needs
Click on "Save" to save your changes
Then click on "▶️ Run" to send your emails.

Note: the first time you use this script it will ask for the permission to send emails on your behalf. Then it won't ask you again.

Emails are usually immediately delivered, but sometimes it takes a few seconds. Check your "Sent" folder in Gmail to confirm that all emails have been sent! As you will see, all your recipients receive a unique email sent from your email address. You don't need to use bcc or any other techniques.

Conclusion

Some say that it's impossible to send emails in bulk with Gmail. It's totally untrue. Of course, this is a very basic macro for Google Sheets to send lots of emails with Gmail. You might need to adapt it a little bit more, but thanks to Google Apps Script you can do lot of things.

Before you go, here are two things to keep in mind when using Gmail as an email marketing tool:

Be sure to abide by Gmail bulk senders guidelines. Especially, note that you are limited to send a reasonable amount of emails per day. If you have a @gmail.com email address, you can send at most 500 emails/day while with a Google Workspace account, you sending limit hits 2000 emails per day. That's probably well enough for 99% of Gmail users, but it's good to have in mind those limits.
If you are looking for more a advanced script, for example that let you send personalized emails (e.g. Hi {{ firstname }}), I'd recommend you to use a Gmail mail merge tool such a Mailmeteor that does it for you. It already handles personalization, as well as dozens of features from attachments to aliases. Learn more about the features and benefits of Mailmeteor here.

This article is part of an extended guide on Mail merge in Gmail (2021). If you want to learn much more, go check it out!

How to send a mail merge with Gmail?

Corentin — Wed, 03 Mar 2021 10:59:05 +0000

There are 2 ways to mail merge in Gmail. You can either use a Google add-on that will do the job for you or build your own mail merge script in Gmail.

We’ll cover both methods in this guide. Even though we recommend using software built for that purpose which cover most issues and will probably save you time.

Method 1: building a merge in Gmail using Google Apps Scripts

As a developer, it's a good challenge to try to build your own Gmail mail merge without an add-on. And thankfully we’re going to use Google Apps Script, which makes it really easy to create Google add-ons.

Google Developer Advocates have already released a great script to help us move forward with the code.

Here is the latest version of the open-source code hosted on GitHub written by Martin Hawksey - @mhawksey. We gonna look at it step-by-step just after.

// Copyright Martin Hawksey 2020
//
// Licensed under the Apache License, Version 2.0 (the "License"); you may not
// use this file except in compliance with the License.  You may obtain a copy
// of the License at
//
//     https://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  See the
// License for the specific language governing permissions and limitations under
// the License.

/**
 * @OnlyCurrentDoc
*/

/**
 * Change these to match the column names you are using for email 
 * recipient addresses and email sent column.
*/
const RECIPIENT_COL  = "Recipient";
const EMAIL_SENT_COL = "Email Sent";

/** 
 * Creates the menu item "Mail Merge" for user to run scripts on drop-down.
 */
function onOpen() {
  const ui = SpreadsheetApp.getUi();
  ui.createMenu('Mail Merge')
      .addItem('Send Emails', 'sendEmails')
      .addToUi();
}

/**
 * Send emails from sheet data.
 * @param {string} subjectLine (optional) for the email draft message
 * @param {Sheet} sheet to read data from
*/
function sendEmails(subjectLine, sheet=SpreadsheetApp.getActiveSheet()) {
  // option to skip browser prompt if you want to use this code in other projects
  if (!subjectLine){
    subjectLine = Browser.inputBox("Mail Merge", 
                                      "Type or copy/paste the subject line of the Gmail " +
                                      "draft message you would like to mail merge with:",
                                      Browser.Buttons.OK_CANCEL);

    if (subjectLine === "cancel" || subjectLine == ""){ 
    // if no subject line finish up
    return;
    }
  }

  // get the draft Gmail message to use as a template
  const emailTemplate = getGmailTemplateFromDrafts_(subjectLine);

  // get the data from the passed sheet
  const dataRange = sheet.getDataRange();
  // Fetch displayed values for each row in the Range HT Andrew Roberts 
  // https://mashe.hawksey.info/2020/04/a-bulk-email-mail-merge-with-gmail-and-google-sheets-solution-evolution-using-v8/#comment-187490
  // @see https://developers.google.com/apps-script/reference/spreadsheet/range#getdisplayvalues
  const data = dataRange.getDisplayValues();

  // assuming row 1 contains our column headings
  const heads = data.shift(); 

  // get the index of column named 'Email Status' (Assume header names are unique)
  // @see http://ramblings.mcpher.com/Home/excelquirks/gooscript/arrayfunctions
  const emailSentColIdx = heads.indexOf(EMAIL_SENT_COL);

  // convert 2d array into object array
  // @see https://stackoverflow.com/a/22917499/1027723
  // for pretty version see https://mashe.hawksey.info/?p=17869/#comment-184945
  const obj = data.map(r => (heads.reduce((o, k, i) => (o[k] = r[i] || '', o), {})));

  // used to record sent emails
  const out = [];

  // loop through all the rows of data
  obj.forEach(function(row, rowIdx){
    // only send emails is email_sent cell is blank and not hidden by filter
    if (row[EMAIL_SENT_COL] == ''){
      try {
        const msgObj = fillInTemplateFromObject_(emailTemplate.message, row);

        // @see https://developers.google.com/apps-script/reference/gmail/gmail-app#sendEmail(String,String,String,Object)
        // if you need to send emails with unicode/emoji characters change GmailApp for MailApp
        // Uncomment advanced parameters as needed (see docs for limitations)
        GmailApp.sendEmail(row[RECIPIENT_COL], msgObj.subject, msgObj.text, {
          htmlBody: msgObj.html,
          // bcc: 'a.bbc@email.com',
          // cc: 'a.cc@email.com',
          // from: 'an.alias@email.com',
          // name: 'name of the sender',
          // replyTo: 'a.reply@email.com',
          // noReply: true, // if the email should be sent from a generic no-reply email address (not available to gmail.com users)
          attachments: emailTemplate.attachments,
          inlineImages: emailTemplate.inlineImages
        });
        // modify cell to record email sent date
        out.push([new Date()]);
      } catch(e) {
        // modify cell to record error
        out.push([e.message]);
      }
    } else {
      out.push([row[EMAIL_SENT_COL]]);
    }
  });

  // updating the sheet with new data
  sheet.getRange(2, emailSentColIdx+1, out.length).setValues(out);

  /**
   * Get a Gmail draft message by matching the subject line.
   * @param {string} subject_line to search for draft message
   * @return {object} containing the subject, plain and html message body and attachments
  */
  function getGmailTemplateFromDrafts_(subject_line){
    try {
      // get drafts
      const drafts = GmailApp.getDrafts();
      // filter the drafts that match subject line
      const draft = drafts.filter(subjectFilter_(subject_line))[0];
      // get the message object
      const msg = draft.getMessage();

      // Handling inline images and attachments so they can be included in the merge
      // Based on https://stackoverflow.com/a/65813881/1027723
      // Get all attachments and inline image attachments
      const allInlineImages = draft.getMessage().getAttachments({includeInlineImages: true,includeAttachments:false});
      const attachments = draft.getMessage().getAttachments({includeInlineImages: false});
      const htmlBody = msg.getBody(); 

      // Create an inline image object with the image name as key 
      // (can't rely on image index as array based on insert order)
      const img_obj = allInlineImages.reduce((obj, i) => (obj[i.getName()] = i, obj) ,{});

      //Regexp to search for all img string positions with cid
      const imgexp = RegExp('<img.*?src="cid:(.*?)".*?alt="(.*?)"[^\>]+>', 'g');
      const matches = [...htmlBody.matchAll(imgexp)];

      //Initiate the allInlineImages object
      const inlineImagesObj = {};
      // built an inlineImagesObj from inline image matches
      matches.forEach(match => inlineImagesObj[match[1]] = img_obj[match[2]]);

      return {message: {subject: subject_line, text: msg.getPlainBody(), html:htmlBody}, 
              attachments: attachments, inlineImages: inlineImagesObj };
    } catch(e) {
      throw new Error("Oops - can't find Gmail draft");
    }

    /**
     * Filter draft objects with the matching subject linemessage by matching the subject line.
     * @param {string} subject_line to search for draft message
     * @return {object} GmailDraft object
    */
    function subjectFilter_(subject_line){
      return function(element) {
        if (element.getMessage().getSubject() === subject_line) {
          return element;
        }
      }
    }
  }

  /**
   * Fill template string with data object
   * @see https://stackoverflow.com/a/378000/1027723
   * @param {string} template string containing {{}} markers which are replaced with data
   * @param {object} data object used to replace {{}} markers
   * @return {object} message replaced with data
  */
  function fillInTemplateFromObject_(template, data) {
    // we have two templates one for plain text and the html body
    // stringifing the object means we can do a global replace
    let template_string = JSON.stringify(template);

    // token replacement
    template_string = template_string.replace(/{{[^{}]+}}/g, key => {
      return escapeData_(data[key.replace(/[{}]+/g, "")] || "");
    });
    return  JSON.parse(template_string);
  }

  /**
   * Escape cell data to make JSON safe
   * @see https://stackoverflow.com/a/9204218/1027723
   * @param {string} str to escape JSON special characters from
   * @return {string} escaped string
  */
  function escapeData_(str) {
    return str
      .replace(/[\\]/g, '\\\\')
      .replace(/[\"]/g, '\\\"')
      .replace(/[\/]/g, '\\/')
      .replace(/[\b]/g, '\\b')
      .replace(/[\f]/g, '\\f')
      .replace(/[\n]/g, '\\n')
      .replace(/[\r]/g, '\\r')
      .replace(/[\t]/g, '\\t');
  };
}

Follow the guidelines below to understand how to mail merge in Gmail using Apps Script:

1. Create a copy of the sample mail merge spreadsheet

Open this demonstration spreadsheet and click on “Make a copy” to get your own copy.

2. In your new spreadsheet

Click on Tools > Script editor to open Google Apps Script. From there, you will see that a script is already tied to your spreadsheet. That's because you've made a copy of the previous spreadsheet!

In the script editor, you can update the code as you wish. Changes will be reflected immediately.

Back to copied spreadsheet, update the “Recipients” column with email addresses you would like to use in the mail merge. Replace the cells’ value under the “Recipients” column with your own email address for example.

3. Now, open Gmail to create a new draft email

You can use personalized variables, like {{ firstname }} which correspond to column names of the spreadsheet you just copied. This indicates text you’d like to be replaced with data from the copied spreadsheet.

4. Back in the copied spreadsheet, click on the custom menu item called “Mail Merge” and then click on “Send Emails”

This item menu was created by the Apps Script project and will start the mail merge process.

5. A dialog box appears for authorization. Read the authorization notice and continue

Important note: The script we are using has been created and proofread by Google Apps Script teams. Always be super careful when authorizing scripts and third-party apps in general.

When prompted enter or copy-paste the subject line used in your draft Gmail message. Then click OK.

6. Sending your emails

You will see that the “Email Sent” column will update with the message status. Back in Gmail, check your Sent folder and review the emails the program just sent for you!

Keep in mind that using a script is at your own risk. Check Gmail’s sending limit before sending large volumes of emails. Especailly, be aware that your account can get blocked by Gmail if your emailing activity seems unusual in the eyes of anti-spam filters.

For these reasons, we would recommend using a mail merge solution such as Mailmeteor. Mailmeteor deals with all these aspects for you and ensures that your privacy remains protected.

Method 2: using a mail merge add-on like Mailmeteor

We’ll start with a real-life example to show you how to do a mail merge from Gmail using a Google Sheets add-on. In this example, we’re using Mailmeteor, the best rated Google mail merge add-on.

1. Get Mailmeteor

All you have to do is to install Mailmeteor from the Google Workspace Marketplace. The Worskpace Marketplace is a place where you can find all the apps compatible with your Google Suite. Mailmeteor is a tool that integrates with Gmail and Google Sheets to merge emails with Gmail.

2. Add contact in Google Sheets

Once Mailmeteor is installed, open a Google Sheets spreadsheet.

First of all, you will need to add recipients to a Google Sheets spreadsheet. This spreadsheet will be the place where you store your contact list. You will also be able to track your campaign metrics from there.

To create a mailing list you can either add your recipients manually or import contacts. To import contacts in Google Sheets, go to Menu > File > Import and select your Excel or .csv file.

Here’s a mail merge demo spreadsheet we’re going to use:

Link to mail merge demo spreadsheet

Note: when opening Mailmeteor for the first time, you will be guided through a quick onboarding tutorial. A demo spreadsheet like this one will be created for you.

Let’s breakdown how your spreadsheet should look like:

➤ Add column headers on the 1st row

Mailmeteor will pull the information from your spreadsheet to personalize your emails. Each column represents a personalized field. This field will be replaced in your email template.

In our example, we have 4 columns named: firstname, email, company, postscriptum.

Add as many columns as you want and pick any column header name you want. Make sure you have a column named “email”.

➤ Fill the columns with your recipients’ information

Fill your spreadsheet with your recipients’ info. Ensure all email cells are filled with valid email addresses. Apart from the emails, you can leave some cells blank, that is fine! In the example below, some recipients will get a Post Scriptum whereas others won't.

3. Open Mailmeteor from the Add-ons menu in Google Sheets

Once your contact list is ready, open Mailmeteor. To open Mailmeteor go to the menu and select Add-ons> Mailmeteor > Open Mailmeteor.

This is the Mailmeteor interface. It tells you how many emails you can send per day and details related to your campaign. Next, we are going to compose the template that will be used for the mail merge.

4. Compose a new email template

Click on the “Create new template” button. This will open an editor in which you can compose your email. The Mailmeteor editor is the exact same as Gmail, you will find all the actions you need to customize your email.

Now we’re going to personalize your email. Personalizing emails is important as it helps make your recipients feel unique when they receive your emails. Using personalization will also dramatically improve your opening rates - and thus the replies you will get.

5. Personalize your emails

A mail merge transforms a standard email template into a personalized email copy. It’s done by replacing variables fields within the template with the content from your spreadsheet.

To insert a variable it’s easy: add variables using double brackets like this {{ firstname }}

Here is a template you can copy-paste:

When adding a variable, always make sure that it matches a header in your spreadsheet.

Once you are satisfied with your template, click the “Save” button.

6. Preview emails before sending

Mailmeteor offers a preview feature that is super helpful to review emails before sending. The preview mode gives you a glimpse of the actual output of your email once personalized for each recipient.

You can also send a test email to yourself. Testing your emails on several devices is a best practice. This will ensure your emails will display correctly in most situations.

7. Send your mail merge

Ready for take-off? It’s time to send your mailmerge campaign.

We know that sending your mail merge can be a bit daunting at first. No worries though, if you follow these steps, everything will be alright!

✨ That's it! You are now ready to mail merge emails with Gmail using an add-on such as Mailmeteor ✨

Here's a real-life example. Watch this teacher use Mailmeteor to mail merge emails to his students:

Now it’s your turn

That’s it for this guide to mail merge in Gmail. We hope you now better understand this simple yet incredibly powerful tool called mail merge.

This guide is part of an extended guide on Mail merge in Gmail (2021). If you want to learn much more, go check it out!

From 0 to integrations, in less than 5 minutes

Corentin — Thu, 29 Oct 2020 10:47:39 +0000

APIs that use OAuth provides the best experience for their users. But from a developer's perspective, well... it's a real nightmare.

It doesn't have to be like that. That's why a few months ago, we open-sourced Pizzly, an API Integrations Manager, dedicated to solve all OAuth's pains for developers.

It provides everything a developer needs to go from 0 to integrations, in less than 5 minutes. 80+ pre-configured APIs, OAuth-dance, refresh token, integrations dashboard, JavaScript SDKs, and more.

Today, Pizzly is on Product Hunt 🤩

It's the best time to show us some love to an open-source project. I'm looking forward to see you there 🚀

Introducing Pizzly - an open-sourced, free, fast & simple API Integrations Manager

Corentin — Mon, 14 Sep 2020 08:07:30 +0000

Within my company, Bearer, the whole team is focused on helping developers that rely on third-party APIs. In 2019, our engineers developed a solution that eased how to integrate with any API that uses OAuth.

It saved hours of engineering time when working with API integrations, by handling both the authentication strategy (with refresh tokens) as well as proxying the request.

As we believe no developers should ever have to spend hours dealing with the ins and outs of integrating OAuth API, we’ve decided to fully open-source our tool. Introducing Pizzly: The OAuth Integration Proxy.

NangoHQ / nango

A single API for all your integrations.

What is Pizzly?

Pizzly is an OAuth Integrations Manager. It provides everything a developer needs to easily consume an OAuth-based API (aka an API that uses OAuth as the authentication method).

Most APIs now use the OAuth framework to authorize an application that wants to access a user's data. One of the main reasons is that OAuth provides the best user experience while being very secure. But one thing has been totally forgotten in the OAuth framework: the developer experience.

It is much more difficult for a developer to use an OAuth based API than it is to use an API that relies on an API Key. Try timing yourself on how long it takes to integrate with two APIs. Let's see how long it takes to have your first successful request to the Stripe API compared to the Google Sheets API.

Time To First API Call (TTFAC) without Pizzly

It took me around 43 minutes and 19 seconds to perform an authenticated request to Google Sheets starting from scratch (source). And only 5 minutes for Stripe (source). We should change that.

Pizzly aims to provide the best developer experience when using an OAuth-based API. One of its power-features is that it completely handles the OAuth-dance (including refreshing a token), meaning a developer can focus on requesting endpoints without spending hours dealing with authentication.

Here's the same test using Pizzly:

Time To First API Call (TTFAC) with Pizzly

It took me almost the same amount of time (5 min vs 7 min) to perform an authenticated request to the Google Sheets API compared with Stripe, starting from scratch with Pizzly. Again, here's the source. And contrary to the previous test, using Pizzly means the token will be refreshed once expired.

How does it work?

Pizzly provides multiple tools to help developers with their API integrations, including:

an auth service - to handle the OAuth-dance;
a proxy - to make authenticated requests to an API;
a dashboard - to enable and configure APIs;
a JS library - to connect a user from your frontend.

The two major services are Auth and Proxy:

The auth service handles the OAuth-dance and generates what is called an authId each time a user has successfully authorized your OAuth application. The authId acts as a reference to the OAuth payload (i.e. access token and refresh token). While the access token and refresh token expire and change over time, the authId is always the same. Think of it as something like a user identity.
The proxy service forwards HTTP requests to the third-party APIs. To authenticate the request, the developer sends the authId alongside. This tells the proxy service to transform the request and authenticate it with the right access token. In case it has expired, Pizzly will refresh the token and retry the request.

Another great tool that Pizzly brings is the dashboard.

The dashboard lets you configure your integrations, test them, and look at what's happening.

How to use it?

Pizzly is self-hosted, meaning you can install it on your machine or any platform-as-a-service (e.g. Heroku, AWS, etc.). Here's a guide on how to get started.

Once installed, enable an API from the list and trigger a complete OAuth-dance in a few lines of code using the Pizzly JS library:

// Initialize Pizzly
const pizzly = new Pizzly({ host: "pizzly.example.org" }) 
const api = pizzly.integration('api')

// Connect a user to an API
api
  .connect()
  .then(({ authId }) => console.log("Sucessfully connected!", authId))
  .catch((error) => console.error("It failed!", error))

When a user is successfully connected, you retrieve an authId that you can use to make authenticated requests to the API. Here's a cURL on how to make a request to the Google Sheets API to create a spreadsheet on the user's drive:

curl -X POST /proxy/google-sheets/ \\
 -H "Pizzly-Auth-Id: REPLACE-WITH-YOUR-AUTH-ID"

No matter what your backend is running on (Ruby, Go, Node.js), send your requests to the proxy. It makes integrating APIs much faster. You can even perform your calls from your frontend, with the JS client.

Some demo

Some great project are already using Pizzly to handle the API requests:

Airtable Shipping Block
Push to Google Sheets
GitHub fetch profile (tutorial) in React or Vue.js

Psst. At Bearer.sh, Pizzly is a full part of our API integrations flow, to manage Slack notifications for example.

How it can help you?

Pizzly supports more than 50 APIs out-of-the-box. All you need to do is set your credentials and scopes in the dashboard. This list includes the most common APIs, such as:

Communication APIs: Gmail, Microsoft Teams, Slack, Zoom;
CRM: Front, Hubspot, Salesforce, etc.
Developer tools: BitBucket, GitHub, GitLab, etc.
Finance APIs: Xero, Sellsy, Zoho Books, etc.
Productivity: Asana, Google Drive, Google Sheets, Jira, Trello, etc.
Social APIs: Facebook, LinkedIn, Reddit, etc.
and more...

But that's not all. Each pre-configured API is a .json file located within the /integrations/ folder. So if you want an API that is not pre-configured yet, you can set up the configuration as a new .json file within that directory. If ever you feel like sharing, create a new PR to share your own configuration with the community.

Built with

Node.js ⚡️
Passport.js - To handle the OAuth dance 🕺
Knex - To manage requests to the database 📃
EJS - For the dashboard templating ⚙️
Vanilla JavaScript - For some magic 🍦

Support us

Star the repo on GitHub, Tweet, share among your friends, teams and contacts!

You can also get in touch directly with me via email at corentin@bearer.sh or on Twitter @frenchcooc. And if you really want to help us make Pizzly better, contribute to the GitHub repo!

⚡️ How to call an OAuth based API in React?

Corentin — Wed, 02 Sep 2020 15:43:19 +0000

Do you know what Facebook, Google, GitHub, and thousands more APIs have in common? They use OAuth to authenticate requests.

OAuth, especially OAuth 2.0, is now everywhere. It's a very powerful authentication framework that powers up developers to have granularity over the data that it needs.

React + OAuth = 🤔

When it comes to OAuth-based API, your React app is not well-suited to send requests. You just can't hide your API keys deep into your codebase. Someone will easily find it.

What you need to do is to set up some backend service, that proxies requests to the third-party API. It can be fun to do, but it's a long process for a quick API call.

For example, you will need a backend to protect your API keys. Declare routes, understand packages (like Passport.js), proxying requests, and dozens of more actions. It doesn't have to be so hard.

Today, I'll showcase an open-source project that I'm actively contributing to. It's called Pizzly and it helps a lot with using API from a single page application.

Let's see how it looks like with a simple demo:

Curious about how you can do it on your application? Here's a full guide.

The React skeleton 🦴

To learn how to make API calls to an API, we first need a React skeleton. And the least that we need is an app that consumes an API endpoint using OAuth2.

As you probably have a GitHub account, we will use that API, but you can easily switch to any other API that uses OAuth2 (Slack, Salesforce, ...) or OAuth1 (Twitter, Trello, ...).

Here's how the application will look like:

import React, { useState } from 'react'
import Pizzly from 'pizzly-js'
import Profile from './Profile'

const App = () => {
  const [profile, setProfile] = useState()

  return (
    <div className="App">
      <h1>Hello!</h1>
      <p>
        Click the button bellow to retrieve your GitHub profile using{' '}
        <a target="_blank" rel="noopener noreferrer" href="https://github.com/Bearer/Pizzly">
          Pizzly
        </a>
        .
      </p>
      <button onClick={connect}>Retrieve your GitHub profile</button>
      {profile && <Profile profile={profile} />}
    </div>
  )
};

export default App;

It's a very basic React application that renders the user's profile as a plain JSON when it has been fetched. Otherwise, it asks the user to connect to GitHub.

The authentication 🔐

Here, we gonna use Pizzly, the open-source project I told you about a few lines above.

It provides a .connect() method that triggers an authentication flow from your frontend, which you can handle with callbacks. No need to create a redirect URL, deal with backend, etc.

Let's see how to update the skeleton above to use with Pizzly.

First, we need to initialize Pizzly:

// Initialize Pizzly
const pizzly = new Pizzly({
  host: PIZZLY_HOSTNAME,
  publishableKey: PIZZLY_PUBLISHABLE_KEY
})

const github = pizzly.integration('github', {
  setupId: PIZZLY_SETUP_ID_GITHUB_DEMO_APP
})

Then, we add a new connect() method to trigger the authentication flow:

const App = () => {

  // ...

  /**
   * The connect method lets us authenticate a user
   * to our GitHub application (i.e. the OAuth dance)
   */

  const connect = () => {
    github
      .connect()
      .then(({ authId }) => {
        console.log('Sucessfully connected!', authId)
        fetchProfile(authId)
      })
      .catch(console.error)
  }

  // ...
};

export default App;

That's it. A few lines of code in your application and you are ready to handle any OAuth based API 💪.

The configuration 🤖

Pizzly is a self-hosted OAuth manager. This means that you need to host it somewhere, for example on Heroku (it takes 30 seconds). Once hosted, you can access Pizzly's dashboard, which is where you configure your GitHub integration.

To deploy your own Pizzly instance right now, click on any of the following button:

Heroku	Platform.sh

Then, select the GitHub API. And configure it by saving your application's client ID, client credentials and scopes. You will get them from GitHub by following this guide.

Once your Pizzly instance is created and you have configured a GitHub application, edit your React application with the following values:

// Pizzly environment variables, make sure to replace
// these with those of your own Pizzly instance
const PIZZLY_HOSTNAME = "";
const PIZZLY_PUBLISHABLE_KEY = "";
const PIZZLY_SETUP_ID_GITHUB_DEMO_APP = "";

The least that you need is PIZZLY_HOSTNAME. The two others are optional.

An authenticated API request 🎉

Alright, we have already spend a few minutes on the configuration. Let's move back to funny things.

The GitHub API provides a handy endpoint (/user) to retrieve the profile of the authenticated user. This endpoint uses OAuth authentication, so it looks like a good use case.

Let's add a new method to our application to do that:

const App = () => {
  // ...

  /**
   * The fetchProfile method retrieves the authenticated
   * user profile on GitHub (the request is proxied through Pizzly)
   */

  const fetchProfile = async (authId) => {
    await github
      .auth(authId)
      .get("/user")
      .then((response) => response.json())
      .then((json) => setProfile(json));
  };

  // ...
};

export default App;

And voilà!

NB: To authenticate the request, we have provided an authId. It's like a user identity for that particular API. It was generated (and saved) with the connect() method.

What's next? 💡

You now know how to authenticate a user towards any OAuth based API using React. If you prefer Vue.js, the same tutorial is available for Vue.js.

It's easily adaptable to all the most famous APIs. No need to create backend routes or understand every single concept of OAuth. Pizzly takes care of that for you (and for the experts, Pizzly automatically refreshes the access_token).

Again, have a look at the CodeSandbox to have a full understanding of the code and share your thoughts/questions in the comments below.

And if you've liked this tutorial, please add a star to Pizzly on GitHub. Here's the link: https://github.com/Bearer/Pizzly.