Purple Turtle Creative
Mailgun Subscribe Form with Security Features to Limit Costs
July 2023
While Twitter was becoming X and Meta was releasing Threads, Purple Turtle Creative decided to offer a reliable, platform-independent way to keep interested users informed: good ol’ fashioned email. Purple Turtle Creative is a bootstrapped business that keeps costs low by foregoing expensive CRM service subscriptions, though. This meant that I needed to implement a re-usable mailing list subscription form by using our API-based email service provider, Mailgun.
Since Mailgun uses volume-based pricing, security was a top priority for the mailing list subscription forms to protect Purple Turtle Creative from exorbitant surprise fees. As the first layer of protection, I implemented Cloudflare’s new CAPTCHA solution called Turnstile on the client side. An advanced bot might still slip through, though, and humans sometimes make mistakes. That’s why I also decided to implement a double opt-in process to ensure the integrity of the mailing list and protect Purple Turtle Creative’s sender reputation.
Using a double opt-in process means that subscribers must click a verification link in a confirmation email to actually subscribe to the mailing list. That costs one email in Mailgun’s volume-based pricing, so I created a database table to track email verification requests and impose rate limits. There is a cooldown period to prevent rapid repeat requests, a maximum number of permitted retries per email address, and a weekly limit of total API usage. Atomic database access is essential to ensure there is consistency between all rate limit trackers and concurrent email verification requests.
To optimize the user experience, the subscription forms submit asynchronously via JavaScript and a custom WordPress REST API endpoint. Form interactions are tracked via Google Analytics on the frontend for conversion performance reporting, and the backend is tracked via Google’s Measurement Protocol API for site reliability monitoring and further insights on system behavior.
Food & Water Action
August 2022
To prepare for the upcoming elections in 2022, Food and Water Action wanted to refresh some areas of their WordPress website. After the web designer and backend developer finished their work, I implemented the frontend styles and interactivity.
The Endorsements page features an interactive SVG map. Different regions of the map become highlighted on hover and, when selected, filter the grid of candidates listed below. The candidate items feature a fun, stylish look with additional hover effects of their own. Fixed at the bottom of the viewport is an interactive donation component that smoothly transforms its layout when expanded. As the user slides between various donation values, the data points dynamically update to inform the donor on the impact of their contribution.
Additionally, I themed the single Endorsement template, the News & Opinions archive template, the Volunteer Stories archive template, and the Victories archive template. Across these templates, I implemented various other frontend features such as masonry grids, sliders, hover animations, animated counters, and scroll effects.
Hearst (Houston Chronicle)
Beauty Deals Finder ReactJS Application and Custom Sailthru Email Alerts
May 2022
Beauty Deals Finder is a custom application built with ReactJS + Redux Toolkit and SCSS modules. It is configured and hosted on Houston Chronicle’s local commerce website (aka “Chron Shopping”) via WordPress.
Users may search for deals by selecting various brands and then save their selections as preferences. When a user saves their brand preferences, they are added to an email mailing list in Sailthru to receive automated, personalized daily alerts. The email notifies the user how many new deals have been added for their chosen brands, if any at all, within the past 24 hours. Clicking a link in the email takes the user to the Beauty Deals Finder application, automatically signing them in to review their latest deals.
All deal data displayed in the application and the Sailthru emails is requested from a separate internal service.
Purple Turtle Creative
December 2020
The Purple Turtle Creative website was originally created with the Elementor Pro plugin with Elementor’s Hello theme. Since the website no longer needed design changes, it was time to commit the design to custom code. The main goal of the conversion was to remove dependency on the Elementor plugin. This would ultimately optimize site performance, decrease expenses, and reduce upkeep.
Throughout development, Google Lighthouse reports were my main KPIs (key performance indicators). I optimized CSS code coverage by strategically using SCSS partials to compose single stylesheets per theme template. Additionally, I dequeue third-party scripts and stylesheets on templates not using them. My theme scripts use only vanilla JavaScript, so I could remove jQuery as a frontend dependency, as well. To efficiently load the site’s fonts, I limited the imported character sets and defined proper preconnect and preload link tags.
With many other optimizations implemented, the result is a blazing fast, custom Gutenberg WordPress website that loads in less than half a second. For more information, please read my blog post for a thorough report of the performance improvements.
Hearst Newspapers
February 2022
Upon joining the Local Commerce team at Hearst, I was asked to overhaul our map article custom post type. Each map article post features a custom Google Maps instance with scroll event interactions and animations.
To streamline the curation team’s efforts, I implemented the ability to import their collected merchant listing data from Google Sheets. The data is stored as metadata for each map article post, effectively caching the data in WordPress and serving as the posts’ main content.
With our team’s designer, I then updated the frontend styles and functionality to improve the map articles’ sales appeal. Additional features were implemented to make sponsored listings stand out from the regular listings. In particular, I custom-coded asynchronous email signup form modals which submitted to the Mailchimp and Sailthru APIs. To ensure proper security, I also implemented custom WordPress REST API endpoints to proxy the form submission requests to the third-party APIs. My custom implementation of the Google ReCaptcha v3 API also validated the form submissions to reduce spam signups.
PETA Germany
February 2021
PETA Germany had rebranded their Veganstart mobile application and needed to update the promotional website to match. They worked with a web designer to create and publish the layouts in Adobe XD. I then developed a new WordPress Gutenberg theme based on the design compositions.
The site build notably included a custom SlickJS slider, GDPR compliance with CookiePro, custom blocks via ACF Pro’s acf_register_block_type() method in PHP, and adequate accessibility features. The differences between the desktop and mobile styles required quite a bit of finesse to achieve a smooth degradation in screen size. My goal was to use as few markup differences as possible between desktop and mobile to optimize performance and DOM tree simplicity.