Weekly Picks: Designing emails and uber animations

Cole Townsend
The Cole Mine
Published in
2 min readDec 2, 2016

This week I made some inroads on developing emails in React! Developing email designs and templates for various third party services is still a pain in the butt.

  • Hot reloading for emails is the holy grail
  • diving in to source code is a great way of learning how to build something (imagine that!)

Rogie King’s Portfolio

Rogie has some of the most fun designs — imagine if Disney and Captain Underpants joined up to make a web designer.

Dribbble Pick

This is just addictive to watch on loop.

Really nice product sites

Nicely Done Club takes screenshots of a full product including the marketing pages. And its a sharp site.

Formkeep

Plugging my own work, I redesigned the Formkeep marketing site! If you hate writing form endpoints this is for you.

React HTML Email and Courier

If you’re developing emails, this is the ticket. With React HTML Emails you can server side render email templates. Combine that with Courier and you can programmatically send Mailchimp campaigns! Pro-tip: if you add react-tml-email tocreate-react-app you can render the email templates to #root and benefit from hot module reloading. If you need full control over your emails I find react-html-email is easier because you can choose

….or MJML

MJML provides a very abstracted framework for developing emails — it doesn’t have the same hot module reloading that you can set up with create-react-app but I’m sure if one was so included you could open a pull request! I find MJML a lot harder to style but otherwise they have great plugins for linting on Atom and Sublime as well as auto-completion. For styling mjml, what I really wish you could do was provide a set of common styles as a spread a la {...headerStyles} matching the required props of a particular element. They are very restrictive with what properties can be styled on an element in order have cross browser

TypeStyle

Typesafe styles and an IDE like experience when writing styes. Read more on why. Specifically geared for TypeScript.

React Stylesheet

Type safety, all the fun powers of javascript. Very similar to styled-components but with Typescript and Flowtype.

--

--