Weekly Picks: Designing emails and uber animations
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.
