We love a good hack day, here at EcoSend.
It's always incredibly inspiring to see what the team can create in just a single day, when all meetings and calls are cleared, and everyone's inboxes are closed.
Last Friday, we all took part in our March 2024 hack day, and by the time we wrapped up for demos at 5pm, the creations were a delight.
Here's what each of us got up to…
JT — email optimisation
I’m a little bit obsessive when it comes to code optimisation and efficiency - even to the point of counting individual bytes in our HTTP responses (when you multiply those bytes by billions of requests, they add up!) so it’s been on my mind for a while that a lot of point-and-click style email builders can often output HTML code that is spectacularly inefficient, just because you may have happened to copy-paste certain things, or select text and change font styles in a particular order.
We’ve observed this in the real world affecting our own customers - even constructing a fairly simple HTML email with our visual builder, we’ve seen examples with more than 300 levels of nested <span> elements as the editor tries to faithfully record every single formatting tweak you make. Some fairly simple emails can balloon into several hundred kilobytes in size from this sort of bloat.
With EcoSend, one of our main goals is to help our customers be more efficient and reduce the overall overhead of their email communications (without reducing their impact!) - and this is a prime example of where unnecessary bloat can creep in. For example, if your email message has 100KB of unnecessary HTML code and you send it to a million people, that’s 100GB of data flying around that simply doesn’t need to be transmitted! And not only that; if your email is overly bloated then the experience for your recipients is also degraded - I’m sure we’ve all had the experience of watching a loading spinner for what feels like forever while our inbox loads over a slow connection, or noticing that Gmail has clipped away a large chunk of the email (Gmail in particular will only show the first 102KB of an email, so if your HTML code is longer than this, the full email is hidden behind a “View entire message” link).
Now, there are plenty of existing tools out there to optimise and minify HTML code, but none of them can cope with the sort of situations we were seeing - they would all prioritise maintaining your HTML document’s structure so as not to risk breaking everything.
This makes sense of course, you don’t want an automated HTML optimisation tool to spit out code that’s subtly different from your input in ways that would break things - they can’t alter the fundamental structure of your code, in case you’re using specific styles or scripts that rely on that particular structure being in place.
But those other HTML optimisers are designed to be super-flexible and generic, whereas our particular scenario is a lot more specific: we’re working with HTML emails, not just any old web page. Emails are much more structured and self-contained - they don’t allow JavaScript and all your CSS styles are also inline. This means we have much more information to make what would otherwise be much more dangerous alterations to optimise your HTML code.
So that’s what I set out to achieve on this hack day - write a HTML optimiser that’s geared specifically towards self-contained emails and can be much more clever with what it does.
A couple of specific optimisations I was keen to make sure it could cope with:
Got hundreds of levels of nested
<span>elements for a single line of text? It can find and flatten all the CSS and only keep what’s strictly needed to maintain your styles.Sometimes you find elements with huge amounts of elaborate CSS styles, and they’re applying only to invisible or whitespace characters - like setting the font color of a line-break. We can tell what styles will make no visual difference and strip them out.
If you’ve pasted content in from an external tool like Figma, there’s a high chance that it’s injected a huge amount of extra metadata hidden in your HTML. We know that data isn’t visible in any email clients so we can intelligently strip it out.
Since we’re loading and examining the whole HTML document and its styles, we can automatically detect if you’re using features that aren’t supported in email clients (or only in certain clients but not others, thanks to tools like https://www.caniemail.com/) - in addition to outputting the optimised HTML, we can also track these usage statistics to warn you if there’s a chance your email might behave strangely in different email clients.
By the end of the day I managed to achieve most of these optimisations in an optimiser that hopefully doesn’t break all your HTML emails. In some of the real-world examples I tested it on, it could achieve reductions of up to 85% in the overall size of your email.
I’m really excited for us to build this into our email-sending pipeline - there’s definitely still a lot more testing we need to do to make sure it won’t ever completely break your HTML, but the impact it could have for our customers and their email recipients could be huge!
Or, well, small.
Because it makes your HTML smaller.
Please laugh.
James — Hugo and a changelog
I was so excited coming in to this hack day! I had a few ideas, but was more excited to see what everyone else would do.
I managed to clear my schedule, so I was meeting-free, but I felt guilty about how many emails were starting to build in my inbox. I will pay the price on Monday morning…
Friday though, I put my hacker hat on.
Hugo's adventures
I started the day prompted by Chris asking if I could help design a newsletter within EcoSend and record the process to show customers what is possible.
By lunch, I had a new brand and newsletter: “Hugo’s adventures”, and a newsletter designed, built, and sent using a combination of Figma, EcoSend, and our Unlayer visual editor. I was pleased with the result, but perhaps most proud of the dog-themed puns.
EcoSend logo experimentation
For a “palate-cleanser” of a task, I tried getting some ideas out of my head around a potential variation of the EcoSend word mark. Right now, we have our logo (affectionately known as the leaf plane), and the word “EcoSend” in bold all-caps.
I’ve been wondering what a handwritten, cursive version of the wordmark would look, so I tried drawing it and then playing around with Figma’s vector tools. It’s been a while since I’ve tried anything like this so it was a great opportunity to brush up on my Figma vector skills and to put myself in typography mode again.
In ~30 minutes I got to a place where I had had some fun, but it’s still a long way from being something we could actually use. Perhaps I can play with this some more in a spare evening!
The EcoSend product changelog
We’re always working on the EcoSend platform. Often we will publish small updates throughout the day, and every now and again we make a big splash about a significant new feature.
However, since the inception of EcoSend, we have shared the changelog of updates across GoSquared and EcoSend. Early-on, we did this because it was easy and we were not sure where things would go next.
Now, a year on with EcoSend, we’ve found that GoSquared deserves a dedicated place for analytics-focused updates, and EcoSend needs its own dedicated place, so it’s obvious which updates apply to which product, and we don’t unnecessarily confuse (or annoy!) customers with updates that are irrelevant to them.
What I managed to build on hack day doesn’t solve for everything, but it’s a start, and at least helps us address one need in the short term: a place to link customers to so they can see what we’ve been working on.
What’s great, is by using Framer, I could go from an idea to a responsive page, backed by a CMS, shipped and live on the site, within an hour or two. What a world we live in!
Check out the product updates changelog
Russell — integrations
Building an EcoSend WordPress Integration
For March’s hackday, Russell set out to build an integration for EcoSend with WordPress. Having worked on the GoSquared Analytics WordPress plugin a few years ago, Russell opted to use the @wordpress/env package (wp-env) for this integration. This package is specially designed to set up a local WordPress environment using Docker for building and testing plugins and themes, with no additional configuration required. It massively speeds up the time it takes to get started building WordPress plugins.
The goal of the plugin was to build a block within the Gutenberg Editor to allow a user to easily add an EcoSend form to their page. As a user can have multiple EcoSend Forms for different use cases, such as a Newsletter form and a Contact Us form, the EcoSend Block would allow you to pick from a list of your forms. Once selected, you could then position the form as you’d like on your page using Gutenberg’s built-in styling tools.
EcoSend Zapier Integration
The next project on Russell's Hackday agenda was the integration of EcoSend with Zapier. This integration was designed to trigger "zaps" from EcoSend when a contact enters a Smart Group. The potential for the integration is huge as it opens the door for automated processes that could save time and resources. For example, now, on top of triggering Email Automation within EcoSend when a user matches a segment, you could also potentially update your CRM with one of Zapier’s hundreds of integrations.
Zapier’s development platform is so intuitive today that you can build an integration without the need to write hardly any code. If you have the existing infrastructure set up to handle webhooks and APIs for your application, it’s really just a matter of walking through the builder’s steps.
Effectively, you just need to give a user the ability to authenticate (through OAuth or API keys, etc.) and then you can walk through building out your triggers to initiate an automation and actions—what you’d like to happen after an automation has been triggered.
Once’s that’s done, it’s just a matter of testing and you’re ready to publish.
Chris — holding the fort
Chris didn't feel he had much to shout about from Hack Day, but his focus was figuring out custom pricing for higher tiers on EcoSend, and migrating our back catalogue of support videos from Wisita to YouTube. Not to mention, we never want to let our customers down — Chris was crucial to holding the fort, handling customer service as diligently as ever, enabling the rest of the team to dedicate their focus to hack day.
Johan — creating a circle progress bar
During a recent hack day, I dedicated time to enhancing our Setup Guide by implementing a customisable progress bar. The inspiration for this project stemmed from a design provided by James in a Figma sketch. The primary goal was to integrate a visual aid that would help guide the users through the setup process.
Taking James's design as a guide, I developed a progress bar tailored specifically for our Setup Guide. This progress bar serves as a visual indicator of progress, allowing users to easily track their journey through the setup process. By incorporating customization options, such as fill percentage, size, and colour, I ensured that the progress bar seamlessly aligned with James's design while offering flexibility to adapt to future changes.
The progress bar features a keyframe animation for added visual appeal and smooth transitions.
