DEV Community: Zeno Rocha

How to send emails using Bun and React

Zeno Rocha — Wed, 20 Sep 2023 15:01:46 +0000

What is Bun again?

Bun is an all-in-one runtime for JavaScript. It comes with a bundler, test runner, and package manager.

The best thing about Bun is its speed. It's way faster than Node.js and Deno, which makes it pretty compelling for edge computing.

Since lots of emails are sent via background jobs running in edge functions, we decided to explore how to send emails using Bun.

Starting the HTTP server

To get started, we will create an index.tsx file and include a simple HTTP server that returns a "Hello World" message.

const server = Bun.serve({
  port: 3000,
  fetch(request) {
    return new Response('Hello World!');
  },
});

console.log(`Listening on localhost:${server.port}`);

Run the local server by executing bun index.tsx on the terminal. Once you navigate to http://localhost:3000, you will see the message.

Now that we have this foundation, we can add the actual email functionality.

Adding Resend for email sending

First, we import the resend package and create a new client that will authenticate using an Resend API key.

Then, we call the send method and return the response object. In this example, we're sending an email using the html property.

import { Resend } from 'resend';

const resend = new Resend(process.env.RESEND_API_KEY);

const server = Bun.serve({
  port: 3000,
  async fetch() {
    const data = await resend.emails.send({
      from: 'Acme <onboarding@resend.dev>',
      to: ['delivered@resend.dev'],
      subject: 'Hello World',
      html: '<p>It works!</p>',
    });

    return new Response(JSON.stringify(data));
  },
});

console.log(`Listening on http://localhost:${server.port} ...`);

Integrating React Email templates

Being able to send an email using HTML is nice, but being able to use an engine like React Email is even better.

To make things interesting, let's create a new waitlist-email.tsx file that will render a beautiful waitlist email.

import {
  Body,
  Container,
  Head,
  Heading,
  Html,
  Preview,
  Text,
} from '@react-email/components';
import * as React from 'react';

interface WaitlistEmailProps {
  name: string;
}

export const WaitlistEmail = ({ name }: WaitlistEmailProps) => (
  <Html>
    <Head />
    <Preview>Thank you for joining our waitlist and for your patience</Preview>
    <Body style={main}>
      <Container style={container}>
        <Heading style={h1}>Coming Soon.</Heading>
        <Text style={text}>
          Thank you {name} for joining our waitlist and for your patience. We
          will send you a note when we have something new to share.
        </Text>
      </Container>
    </Body>
  </Html>
);

const main = {
  backgroundColor: '#000000',
  margin: '0 auto',
};

const container = {
  margin: 'auto',
  padding: '96px 20px 64px',
};

const h1 = {
  color: '#ffffff',
  fontSize: '24px',
  fontWeight: '600',
  lineHeight: '40px',
  margin: '0 0 20px',
};

const text = {
  color: '#aaaaaa',
  fontSize: '14px',
  lineHeight: '24px',
  margin: '0 0 40px',
};

Now that we have this template, we can import it into our index.tsx file and use it to send an email.

import { Resend } from 'resend';
import { WaitlistEmail } from './waitlist-email';

const resend = new Resend(process.env.RESEND_API_KEY);

const server = Bun.serve({
  port: 3000,
  async fetch() {
    const data = await resend.emails.send({
      from: 'Acme <onboarding@resend.dev>',
      to: ['delivered@resend.dev'],
      subject: 'Hello from Bun + Resend + React Email 🫓💌',
      react: WaitlistEmail({ name: 'Vitor' }),
    });

    return new Response(JSON.stringify(data));
  },
});

console.log(`Listening on http://localhost:${server.port} ...`);

By running bun index.tsx, you should see the email being sent using React.

Learn more

We're excited to see what you build with Bun and Resend.

If you want to see the full code, you can check out the GitHub repository.

Email Authentication: A Developer's Guide

Zeno Rocha — Fri, 25 Aug 2023 16:57:35 +0000

Proper email authentication can be the difference between reaching the human or the spam folder, but it is often overlooked or misunderstood.

Think of your emails as a startup getting into a competitive accelerator program.

SPF (Receiving Applications)

Competitive startup programs will receive 10's of thousands of applications. Their first step is to see which of these applications can be thrown out without being considered.

SPF (Sender Policy Framework) is similar. It's the first triage of the emails coming to an inbox, checking to make sure that each email should even be considered for delivery.

The DNS record for SPF declares a list of origins (servers) that are allowed to send email for this domain, and the inbox will confirm that the message they received matches one of them. If a server isn't on the list, it's like an application being tossed out because it wasn't fully filled or the business idea is illegal.

Every domain or subdomain can only have one SPF policy, and policies on the root/apex domain (domain.com) are not applied to subdomains (sub.domain.com).

Your SPF policy, specified in a TXT record, probably looks like this:

v=spf1 include:_spf.google.com include:amazonses.com ~all

v=spf1: The version of SPF
include:_spf.google.com: Allows Google servers to send emails on your domain
include:amazonses.com: Allows AWS servers to send emails on your domain
~all: The policy which tells the server what to do if the SPF check fails

When a mailbox receives a message from you, it will look at the Return-Path in the email header and expects it to map back to one of the origins specified in the record.

DKIM (Application Vetting)

If the application passes that initial check, then the vetting process begins to make sure all the claims the applicants made are true.

DKIM (DomainKeys Identified Mail) plays a similar role to confirm the legitimacy of the message by adding a signature on each message that verifies the email sender is who they say they are.

DKIM is set with a private/public key pairing.

You set a public key in your DNS records (usually a CNAME or TXT record)
Each email you send includes a DKIM signature
When an inbox receives your message, it compares the signature with the public record to confirm a pair

Especially as your company becomes more well known, there are more incentives for hackers to send an email as if it is from you.

The DKIM, like a strong login password, is an essential way to prove who you are by providing information only you know.

It is common to have multiple DKIM records, usually one or more per email provider.

DMARC (Selection Policy)

What if an applicant fails one of these steps? How should their application be handled?

DMARC (Domain-based Message Authentication, Reporting & Conformance) is the selection policy. It sets rules for what happens if an applicant lies on an application (DKIM) vs. not demonstrate enough traction (SPF). For email, DMARC establishes your policy as a sender for what should happen to your messages if they fail DKIM or SPF.

You would likely have one DMARC policy set for your entire domain, including subdomains, in a TXT record that looks like this:

v=DMARC1;p=quarantine;pct=100;rua=mailto:dmarc@domain.com

v: The version of DMARC
p: What the mailbox should do (policy) if SPF or DKIM fails (none, quarantine, reject)
pct: The percentage of failed messages that should be affected by the policy.
rua: A valid inbox where the providers should send their DMARC reports

Implementing DMARC, particularly with a policy of quarantine or reject, enhances your domain's reputation. This is because inbox providers can rely on your commitment to prevent the delivery of suspicious messages, thereby improving their user experience within the inbox.

Check out our full guide on how to set up DMARC.

BIMI (Exclusive Access)

Making it into a startup accelerator is an amazing feat, but if you want to be exceptional, you need to gain the attention of the industry leaders and pioneers. There are no hacks or shortcuts to this, you simply need to prove yourself.

BIMI (Brand Indicators for Message Identification) is this kind of access in the inbox. It sets you apart from all the others by showcasing your brand and legitimacy to your users in the inbox by displaying your logo and, in some cases, a verified checkmark.

With over 347 billion emails sent every day, this is an exceptional way to stand out.

Obtaining BIMI is exclusive because of the long, hard process it takes to complete the verification. Here are a few things you need:

DMARC: The DMARC policy must be at quarantine or reject and at 100%
Trademarked Logo: The logo you want to showcase must be trademarked
VMC: The certificate which verifies your identity, domain, and trademark

v=BIMI1; l=https://vmc.digicert.com/00-00.svg; a=https://vmc.digicert.com/00-00.pem;

v: The version of BIMI
l: The location of the SVG logo
a: The location of the Verified Mark Certificate (VMC)

Check out our full guide on how to set up BIMI.

Delivery is the Goal

The good news is that SPF and DKIM are handled for you when using Resend. All you need to do is add a domain and we take care of the rest.

Ultimately, inbox providers aim to only show the emails their users want to see, and spoofed or compromised emails are not on the list.

Without these protocols, they can't tell you from a spammer.

Assure them you're legit, and they'll prioritize your emails. It's a win-win.

How to configure Supabase to send emails from your domain

Zeno Rocha — Thu, 10 Aug 2023 16:02:54 +0000

One of the coolest things about Supabase is that it has a built-in authentication system that allows you to send emails to your users.

These emails typically include:

Confirm signup
Invite user
Magic link
Reset password
Change email address

As you get ready to move to production, you might want to consider sending emails from a custom SMTP service. Here's why.

The challenge of sending emails via Supabase

All of the Supabase Auth emails are sent from noreply@mail.app.supabase.io.

Although this is good enough to get started, you probably want these emails to be sent from your own domain for brand recognition.

Apart from that, you can only send up to 4 emails per hour. That's a recent change caused by an influx of spam messages.

"The default email system we provide is only for testing purposes - it is not intended for production use. This means that the deliverability will not be great, because everyone is using it for testing and is a major reason we don't recommend using it for production." - Paul Copplestone (CEO at Supabase)

Beyond rate limits, a managed SMTP server might also help with:

Deliverability and IP reputation management
Compliance and anti-spam practices
Analytics and webhooks
Scalability

Integrate to have full control and visibility

Supporting existing tools is one of Supabase's product principles, so they have made it easy to configure a custom SMTP server, or any other tool you need.

On top of that, we've built an integration that allows you to connect your Supabase project to Resend.

All you need to do is navigate to the Integrations page and follow the steps.

Once you're done, you'll be able to send emails from your own domain.

This will give you full control and visibility over your email delivery.

No more "Hey, I didn't get your email" from your users. Now you can see exactly what's happening with your emails - if they were sent, delivered, bounced, or marked as spam.

Here's a video showing the integration end-to-end:

Configure a custom SMTP server manually

If you prefer to configure your SMTP server manually, you can do that as well.

Navigate to your Supabase project, click on Project Settings, then navigate to Auth. Over there you'll find the SMTP Settings section.

Once you toggle the Enable Custom SMTP option, you'll be able to configure your SMTP server. You can change the host, port number, username, password, sender email, and sender name.

You can copy-and-paste all of these values from the Resend SMTP page.

Check the documentation to learn more about integrating SMTP with Supabase.

14 Best Free Fonts for Programming

Zeno Rocha — Wed, 10 Feb 2021 16:45:45 +0000

We spend the entire day using code editors, terminal emulators, and other developer tools. Using a font that feels comfortable to your eyes can make a huge difference and improve your productivity.

Here's a compilation of the best free monospace fonts for coding, along with additional comments and download links.

1. Fira Code

I've used Monaco for 10+ years until I finally met Fira Code. This font has more than 53,600 stars on GitHub, and it's popular for a reason. Nikita Prokopov puts a lot of effort into the ligatures, which transforms characters into single logical tokens. It's my favorite font nowadays.

Download • Github

2. IBM Plex Mono

The Plex family was created to replace Helvetica as the IBM corporate typeface after more than 50 years. The italics look great, and it features very crisp and easy-to-read glyphs. Unfortunately, it doesn't include ligatures.

Download • Github

3. Source Code Pro

This was one of the first open source fonts made by Adobe. After its release in 2012, the font got extremely popular and was adopted by many developers. It preserves the design features and vertical proportions of Source Sans, but alters the glyph widths so that they are uniform across all weights.

Download • Github

4. Monoid

If you're one of those people who hate horizontal scrolling, this is the right font for you. It's optimized for coding with bitmap-like sharpness at 12px/9pt even on low res displays. There's also a Font Awesome integration called Monoisome.

Download • Github

5. Hack

This is one of the most customizable fonts of all. It has 1,573 glyphs, and you can change the details of each one yourself. Powerline glyphs are also included in the regular set.

Download • Github

6. Iosevka

This font provides a slender outfit by default: glyphs are exactly 1/2em wide. Compared to the competitors, you could fit more columns within the same screen width. It also has two widths, Normal and Extended, so if you prefer more breeze between the character, go with the Extended version.

Download • Github

7. JetBrains Mono

JetBrains, the company behind IntelliJ, WebStorm, and so many other IDEs, surprised us all in 2020 when it came with its own font. Their approach is to keep code lines to the length that developers expect, making each letter occupy more pixels. They do that by having characters remain standard in width, but the height of the lowercase is maximized.

Download • Github

8. Fantasque Sans Mono

Designed with functionality in mind, this is the kind of font that adds an extra touch to your code. Its handwriting-like fuzziness makes it a really cool option.

Download • Github

9. Ubuntu Mono

Especifically created to complement the Ubuntu tone of voice. It has a contemporary style and contains characteristics unique to the Ubuntu brand that convey a precise, reliable, and free attitude. If you enjoy Linux but have to work in Windows or MacOS, this font gives you a little happiness.

Download • Site

10. Anonymous Pro

The cool thing about this font is that characters that could be mistaken for each other like 0 (zero) vs O (capital O) are intentionally differentiated. It's a family of four fixed-width fonts designed especially with coding in mind.

Download • Site

11. Inconsolata

An open source alternative to the proprietary Consolas font from Microsoft. It's a monospace font designed for printed code listings, terminal emulators, and similar uses. Comes with ligatures for a great coding experience.

Download • GitHub

12. Victor Mono

This typeface is clean, crisp and narrow, with a large x-height and clear punctuation, making it legible and ideal for code. It comes in seven weights and Roman, Italic and Oblique styles. It also has optional semi-connected cursive italics and programming symbol ligatures.

Download • Github

13. Space Mono

Developed explicitly for use in headline and display typography, the letterforms infuse a geometric slab core with novel over-rationalized forms. It supports a Latin Extended glyph set, enabling typesetting for English and other Western European languages.

Download • GitHub

14. Hasklig

Based on Source Code Pro, this font solves the problem the way typographers have always solved ill-fitting characters, which co-occur often: ligatures. The underlying code stays the same — only the representation changes.

Download • Github

What's your favorite one?

Fonts, just like themes, are a very personal subject. Different developers like different fonts. Some love ligatures, others hate. Some love italics, others hate.

Hopefully, this compilation was useful to identify what works best for you. Give it a shot, try them for a couple of days, and you'll notice the difference.

I'd love to hear which one you like the most. Hit me up on Twitter!

Do you speak English?

Zeno Rocha — Sat, 25 Jul 2020 18:11:06 +0000

I've noticed a pattern recently.

@dvassallo [1], @arvidkahl [2], and I [3] wrote books in English but we're not native English speakers.

Some may see this as a weakness. I see this as a strength.

It doesn't matter where you are from. Don't be afraid to share knowledge.

[1] - $17K sales in the first 2 days
[2] - 1000+ Books Sold in 7 Days
[3] - $3,954.32 in 48 hours with my first e-book

Working from home

Zeno Rocha — Mon, 16 Mar 2020 16:32:34 +0000

For the next two weeks, I'll be working from home.

I once worked for one year and a half remotely and learned a lot about maintaining focus.

Here are some tips for those of you who are going through this experience for the first time:

Resist the temptation of waking up and starting to work right away. Take your time. Have breakfast. Read a little bit. Then start.
Go exercise and have a shower before the day starts. This will completely change your productivity. It's an investment of time.
Routine is not your enemy. Routine is your best ally.
Be patient and educate others who live with you. They are probably not used to having you at the house.
Don't eat at your desk. Have lunch away from your computer (and phone).
Overcommunicate and be transparent. If you have to step away for some reason, just change your Slack status and let your team know.
Know when to stop.

What are your personal tips?

I made a Color Scheme for Programming Using Math

Zeno Rocha — Tue, 11 Feb 2020 15:36:39 +0000

It's been almost 7 years since I launched Dracula as an open source project.

Today I'm launching Dracula PRO.

🤔 The problem

In 2013, my laptop was stolen, so I had to re-configure everything. At that time, there were thousands of color schemes for programming out there, but none of them were appealing to me. So I decided to create my own.

Fast forward to 2020, Dracula is one of the most popular themes in the world with more than 2 million downloads. Still, I felt that something was missing. I wanted to help with more than just a theme.

🛠 My solution

I decided to create a new color scheme using mathematical concepts to normalize lightness and saturation. I also tested the contrast ratio for better visibility on low-light environments.

Besides that, I hand-picked 4 monospaced programming fonts that fit perfectly with the theme. These fonts have built-in ligature support that improves readability.

Dracula PRO is everything I know about color schemes, typography, and productivity tips into one package.

🧛‍♂️ What do you think?

I would love to hear your thoughts on this. And if you have any questions, please do comment