Video Upload Optimizations via Mux API on BuddyBoss Theme
Poor video performance often leads BuddyBoss site owners to use third-party video embeds via YouTube or Vimeo. However, this requires the user to upload and host their videos from another platform—a platform they do not own nor have control over. This is an unacceptable solution for site visitor-uploaded content, which occurs directly on the business’s BuddyBoss WordPress website.
Using the Mux API, I was able to bring video optimizations to WordPress, including normalized audio tracks. I developed a custom WordPress plugin that uploads new videos to Mux and caches the Mux asset data to the site. To ensure the cached asset data is always current, I implemented a custom REST endpoint to process Mux webhook events. The endpoint is secured by verifying each request’s signature.
Hearst (Houston Chronicle)
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.
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.
Sailthru Email Template Local Development Toolkit and Process Improvements
While working full-time as a Software Engineer with Hearst, I took on additional responsibilities by becoming our team’s Sailthru email template engineer. We did not have a very good development process in place to work with Sailthru’s custom templating language (Zephyr), so I also took it upon myself to implement a toolkit.
Since the email templates contain Zephyr markup, I used Sailthru’s API endpoint for previewing Zephyr email templates. That allowed me to edit the templates on my local machine and then render the email in my web browser. For further testing, I could simply tick a checkbox to send a test email of my changes instead.
Additionally, I wrote two other scripts for downloading Sailthru email template contents and “include” template parts respectively. We use Sailthru in advanced ways at Hearst with custom Data Feed configurations, so I architected the toolkit to support that. Synching the template code locally from Sailthru provided a lot of key benefits:
- Version control and code backups via Git (which also facilitates proper code review process)
- Easily make changes to existing email templates using the developer’s own code editor
- Code searchability via terminal commands such as
grep (which also means easier code auditing)
- Ability to mix custom code with Sailthru’s WYSIWYG editor to reduce custom code burden
- Detailed template error messaging via the Preview endpoint’s response
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.
Self (Personal Project)
Custom WordPress Plugin API to Fulfill Downloads and Remote Updates
After developing Completionist, I wanted to make it available for free download. Instead of listing it in the WordPress.org plugins directory as I had done with Grouped Content, I wanted to create my own resources server API.
To implement the client-side connection, I used YahnisElsts’s plugin-update-checker package on GitHub. This gave me a fantastic starting place to understand what API endpoints I needed to create.
I packaged the resources server code into a WordPress plugin which runs on Purple Turtle Creative. It includes custom WordPress REST API endpoints to dynamically deliver the plugin’s details from the requested release’s ZIP file.
The endpoints are secured with nonces to ensure the download link expires. Direct requests for the plugin ZIP file are also denied via NGINX rules, so the release package can only be downloaded via a valid request to the resources API. Lastly, I implemented Google Analytics’ Measurement Protocol API to monitor the API’s traffic and performance.
Self (Personal Project)
I wanted to track Asana assignments related to my WordPress website as I worked on it. To my amazement, a specialized solution had not been built yet, despite an obvious need in the market.
Ever since then, I have worked on my own solution to integrate Asana tasks with WordPress. Completionist is a WordPress plugin that I offer for free download which features a dashboard widget, post edit panel (aka “metabox”), and custom automations.
Despite being a pretty small project thus far with minimal efforts to make its presence known, Completionist has received some notable attention:
Self (Personal Project)
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.
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.
Facebook Messenger Bot to Register WordPress Users via ManyChat API
A client of mine had a grand vision for their Black Friday marketing initiatives. They were having a lot of success with Facebook Messenger and used ManyChat to automate conversation flows. For Black Friday, they wanted to give their Facebook contacts an easy way to join their WordPress website.
With their marketing team, I configured a ManyChat flow with Dynamic Blocks to process API requests to their WordPress website. The flow collected various information from the user and then sent a request to a custom WordPress REST API endpoint that I developed. Depending on the information provided, the custom endpoint would register the user in WordPress, tag the user in Keap, reward Gamipress points, and then respond with a success message containing their generated password and a sign-in link.