Integrate transactional emails in your continuous deployment process

Image for post
Image for post
Photo by Adam Solomon on Unsplash

In an effort to satisfy GDPR requirements, it was apparent that I could no longer put off adding email integration to my app. Email marketing websites offered “beautiful, award-winning templates,” but what they lacked — what I craved — was the ability to maintain emails in the same way that I maintained the rest of my application: with changes tracked through GitHub so that it could undergo the same review and deploy process.


Your setup does not have to mirror mine exactly, but it is available to provide some context.

How I cracked UI component architecture and built sturdy and reusable tests

abstract structure of interwoven components
abstract structure of interwoven components
Photo by Maarten Deckers on Unsplash

As a back-end developer delving into the world of Vue development, I quickly realized that unit testing would be critical to the success of my product. It felt like UI development was like playing a game of whack-a-mole, where fixing one thing resulted in undoing another thing fixed previously.

At first, I thought that component testing meant that I had to compare the DOM output against the combination of props, slots, triggers, and data sources. But writing tests to validate a component’s HTML seemed like it would lead to brittle, unwieldy tests, impractical for my rapidly evolving code base. …

Because a lot of the guides I read were from 2018 and didn’t work.

Image for post
Image for post
It has all been one elaborate cover up!

I enjoy using code coverage tools. It promotes developer accountability and serves as a checklist for test cases that may be unnecessary or overlooked. It has some gamification elements as well, with the colors and percentages, that make my brain’s reward center squeal with delight.

What isn’t fun about code coverage was trying to figure out how to set it up correctly. I read so many articles and Stack Overflows that said the same wrong things. Here is what worked for me, and will hopefully work for you (for at least the next 6 months or so *wink*).

My Setup

You actually can’t really do this, but we’re going to anyway

Dragging animation
Dragging animation
Avatars provided by DiceBear Avatars.

Before We Begin

This method definitely works on Chrome, but not on Firefox. I have yet to validate this on IE or Safari.

If you are unfamiliar with the basics of the HTML Drag and Drop API, I would highly recommend that you read about it in the Mozilla Developer docs.

TL;DR — Here Is the Full Example

Designate the “Fake” Drag Image

The documentation states that you can use any visible element on the DOM as the drag image. This undermines the intention of what we are trying to do because we want the element to only be visible as the drag image. …

Just set the class names, the instructor names, and the times, and you’re good to go!

Image for post
Image for post

How do I add colors to my instructors’ names?

Click on the sheet labeled “Staff” (in the bottom left-hand corner) and set it to the names of your staff members. Currently, it only supports up to 15 instructors, but you can add more colors by adding a rule in Format > Conditional Format Rules

Can I change the start date?

Sure! Just set the start date in cell A1, and the week will automatically update itself.

What happens if I need to add/delete class times?

No problem! Just add and delete rows as needed, the color formatting will remain the same.

What if I have more than one week?

Just copy and paste the week and update the start date!

Originally published at on October 7, 2020.

Summer Mousa

Software Engineer and Founder of Take Initiative, LLC

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store