DEV Community

Cover image for Engineering of Small Things #1 : Email Newsletters
ShatilKhan
ShatilKhan

Posted on • Edited on

4 1 1 1

Engineering of Small Things #1 : Email Newsletters

This is by no means a guide on how to make Email Newsletter, but rather the particular problems I faced while developing my first email newsletter as a jr. dev & how I found the solution the hard way!

The Beginning of a Disaster

Recently I had the opportunity to develop an Email newsletter , but also I had to make a backend functionality to send to multiple people at once. I used Mailgun API for email management. But also at the same time, had no idea how one might develop a newsletter subscription system (honestly , I'm still learning :))

In a Figma File Far Far Away....
There was a design, that I had no idea how to convert to code & send to a bunch of people. So I did what literally everyone does these days.

AI... I used an AI

Image description

But that is just the beginning of the disaster :)
I thought I could just convert the figma file to html & send it. Well that plan seems solid until I actually tried doing it & figured the plugins convert figma to basic html which don't have images linked. Some plugins do, but most are premium.

AWS S3 to the Rescue

Image description

So I used good old S3 Bucket to store the images & serve them.
But it wasn't easy. I still iterated through a bunch of AI Figma Plugins & what I realized was that instead of Figma to HTML Plugin, I needed Figma to Email Template Plugin. There's a big difference & we'll discuss why in a moment.
But basically I innocently downloaded the html code, uploaded EACH Photo to S3 .... Multiple Times Too! Because I have shitty Internet :)

Then the html template for the email was done! Then I ran by Script for sending the Email to a list of recipients. It was pretty basic Script that has a function read a list of emails from an excel sheet & send an html template to those emails.

So I loaded up everything & sent a test mail to my own mail first (pheew)

The email looked liked this:

Image description

No CSS Loaded, No Structure... Nothing. Just a bunch of text.

Then I started googling... and I found that google doesn't allow any external CSS to be sent over email. And a lot of other css classed & properties aren't allowed. What fascinated me was WHY they weren't allowed. Because they can be used as a vulnerability to inject malicious scripts. 👀👀👀

So THEN I looked for Figma to Email Template & Found Kombai !
Kombai proved to be a great tool for email newsletter because it creates html template that directly adhere to gmail css restrictions.

It also organized the images in the design properly.
And then I had to use AWS S3 again 😢. But finally got it working (Kinda). I mean it worked mostly fine ,except on some devices where it still broke. But Yeah, building a Email Newsletter Template Sender from Scratch is like reinventing the wheel :)

But I learned some interesting Info. Also While I was checking different figma plugins for html conversion, I found Brevo ! Which is like an All in one tool for email marketing.
Mailgun is also good , I used it to track the emails. But it does not have a template designer. In comparison Brevo had a lot of built in features. Then I learned more about Brevo's no-code/low-code email newsletter features. But ultimately I learned a lot stuff while making this newsletter template.
I also made a small diagram & I want to hone my skills in designing architecture components.

Image description

None of these are perfect or standard, but I wanted to learn how to make these architecture designs as well and I thought the best way would be to get my hands dirty!
Keep on Coding!

Image description

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more