Internal hackathons have become a common practice for tech companies these days. Here at SparkPost, we hold two hackathons a year and are happy to have made them a long standing tradition. So the question is, why do we hack? What value do we see in taking people away from their normal work and having them spend two days on completely different projects?

Building Relationships

The first benefit of internal hackathons is the social aspect. During hackathons you get to work with people from other teams, people you’ve possibly never worked with before. There is a lot of value in forming new friendships and strengthening bonds by working toward a common goal together. Hackathons also let you see your coworkers in a new light. Maybe someone has a real talent for something and only during a hackathon do you get to see them excel in their area of expertise. Learning people’s hidden strengths makes them more valuable to the company and allows them to grow even further in areas that are of interest to them.

Creativity

Creativity is a second important benefit. Hackathons allow people to unleash their creativity. Taking a break from your normal workload for a couple of days can help refresh and reset the mind allowing you to tackle your normal projects with renewed vigor when you get back to it on Monday. Engineers often encounter small problems during their normal work day but don’t have time to fix them. Or they see ways in which their project or product can be improved but don’t have the bandwidth to expand on those ideas. Hackathons provide a space for people to voice their ideas and get immediate proof of concept.

Innovation

All of this leads to the third important benefit, hackathons encourage innovation which can be invaluable to a company. So many people have great ideas for ways to improve the product they’re working on and hackathons give them the opportunity to delve into that idea and potentially get it to production. At SparkPost several of our hackathon projects have made it to production including our Zapier integration, HEML, our A/B testing API, our internal customer service app, and more. In addition to producing customer facing products, hackathons also allow the time needed for people to improve architecture and problem solve.

All in all, hackathons are great for our company. At SparkPost, we highly encourage cross team and cross company camaraderie and teamwork. We highly value creativity and praise innovation. Hackathons allow people to look up from their computers and see what could be in the future. It gives them a chance to focus on the bigger picture and flex their inventive muscles. We’ve done ten hackathons so far and we can’t wait to see what cool projects come from the next one.

Hackathon X

Check out this video from our most recent hackathon to learn about some of the exciting projects our engineers are working on!

-Danielle

 

HEML is an open source markup language for building responsive email that displays well across many different client devices. Anyone who’s tried to code responsive HTML for email knows what a tedious process that is.

That’s where HEML comes in. You just focus on creating simple markup. HEML renders it into responsive HTML that handles the quirks, bugs, and limitations of different email clients.

Compared to working in raw HTML, or even working in some drag and drop editors, HEML enables you to work at a higher conceptual level and be more productive. Yet if you have experience working with HTML, HEML will feel very familiar.

That simplicity is one of the reasons that HEML’s been making a great impression in the email and developer community. It has over 3500 stars on GitHub at the time of writing.

For the past couple months, I’ve been using HEML in several of my own projects. It’s really fun to use.

But as they say, it’s better to show than to tell—so I recorded a quick video walk-through of how to build a HEML email from scratch in just a few minutes. And as a bonus, I’ll show you how to turn the HEML output into a SparkPost template.

To recap, in this video, we:

  • Created a nice looking email newsletter in about 100 lines
  • Controlled layouts including images and side-by-side text blocks
  • Put in a fancy footer with a background image
  • Sent the mail and checked it looked good on Gmail
  • Learned some basics of working with HEML

It’s really that easy. If you’d like to look under the hood (err, bonnet), I posted a copy of the template I created in this video to GitHub.

I hope this video walkthrough has been helpful. Let me know what you think on Twitter—or leave comments on the video itself!

Steve

P.S. Want to learn more about HEML? Avi Goldman, HEML’s creator, recently shared the how and why of the HEML open-source project.

 

Today I am excited to announce the first release of HEML, an open source markup language for crafting clean, responsive emails.

Why

If you’re not familiar with writing HTML emails, it can be a painful process. A few months ago I started to play with some exciting interactive developments on the front end. I found the bottleneck wasn’t sending or testing the email, but simply building the email itself. At our next company hackathon, I took the opportunity to solve this problem, and thus HEML was born.

Each element in HEML renders into email-ready HTML so that you can send without worry. HEML also works to iron out CSS bugs and limitations of different email clients. An excellent example of one such bug is an obscure issue in Lotus Notes where if you use RGB decimal value, the entire style declaration will be ignored. HEML will handle that bug for you.

Our Goals

We wanted HEML to help make email more accessible to developers. The idea is for developers to jump in quickly and build their emails without wrestling with Outlook (or any other email inbox). To do this, we focused on three things.

Native feel

We wanted HEML to look and feel like HTML. As a result, it mirrors HTML as closely as possible and uses plain ol’ CSS for styling.

Forward Thinking

HEML doesn’t limit you from taking advantage of all that HTML and CSS can do. It encourages progressive enhancements. Email doesn’t have to look the same everywhere.

Extendable

HEML lets you create your custom elements, share them, and pull in other elements made by the community.

Using HEML

There are a couple of different ways to use HEML.

Get started quickly using our editor at heml.io/editor.

To use it locally, install it with:

Create your HEML email in email.heml:

and run:

That starts a development server that will auto-reload your browser whenever you make a change.

Once you’re ready to send your email into the wild, run:

This generates an email.html  file that is ready to be sent.

Give it a spin!

This is our take on a difficult problem. It doesn’t solve every problem presented by email, but it can help you create solutions for your unique email challenges. There has been amazing work done to simplify this challenge by MJML, Foundation for Email, and many others. We hope you find this equally as helpful!

So give it a try! Hopefully, it makes your life easier. If you have any feedback, suggestions, or bugs, let us know.

 

Happy Coding!

Avi, Developer Advocate
@theavigoldman