<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Rockwell Schrock</title>
    <description>The latest articles on DEV Community by Rockwell Schrock (@schrockwell).</description>
    <link>https://dev.to/schrockwell</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F264695%2F11b4035b-f10d-4d44-8d81-04aa6bf63a08.jpeg</url>
      <title>DEV Community: Rockwell Schrock</title>
      <link>https://dev.to/schrockwell</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/schrockwell"/>
    <language>en</language>
    <item>
      <title>From e-mail to e-ink: an inbox-powered feed for TRMNL</title>
      <dc:creator>Rockwell Schrock</dc:creator>
      <pubDate>Wed, 28 May 2025 15:28:41 +0000</pubDate>
      <link>https://dev.to/schrockwell/from-e-mail-to-e-ink-an-inbox-powered-feed-for-trmnl-2p60</link>
      <guid>https://dev.to/schrockwell/from-e-mail-to-e-ink-an-inbox-powered-feed-for-trmnl-2p60</guid>
      <description>&lt;p&gt;This is a submission for the &lt;a href="https://dev.to/challenges/postmark"&gt;Postmark Challenge: Inbox Innovators&lt;/a&gt;.&lt;/p&gt;




&lt;p&gt;Since 2014, Postmark has been my email backend of choice for business, client, and personal web apps.&lt;/p&gt;

&lt;p&gt;When I joined the &lt;a href="https://usetrmnl.com" rel="noopener noreferrer"&gt;TRMNL&lt;/a&gt; team last year, it was no surprise to find Postmark in their Rails app, too. They had even developed &lt;a href="https://usetrmnl.com/integrations/postmark-analytics" rel="noopener noreferrer"&gt;an analytics dashboard&lt;/a&gt; for the TRMNL itself for users to track their e-mail health.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvegyt6hodwzpxikta41q.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvegyt6hodwzpxikta41q.png" alt="Postmark integration screenshot" width="800" height="341"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;That works great for monitoring outbound email, but this week's challenge is all about &lt;em&gt;inbound&lt;/em&gt; messages. So I decided to build a new fun plugin that works in the other direction.&lt;/p&gt;




&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;PSTMRK is an e-ink dashboard for TRMNL that transforms a Postmark inbound email address into a personal microblog for display around the home or workplace.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5e8s1nndifeyg1ia61i4.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5e8s1nndifeyg1ia61i4.jpeg" alt="TRMNL in the kitchen" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Simply send a message to the inbound address and the display automatically updates. The dashboard displays the five latest messages, including their date, sender, subject, and body. Keep the message contents brief and plain-text - this is a 7.5" screen, after all!&lt;/p&gt;

&lt;p&gt;The plugin and its backing web services are fully open-source. TRMNL owners can easily fork the plugin recipe and customize it to fit their needs.&lt;/p&gt;

&lt;p&gt;Some use cases:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Send yourself a quick reminder, or area of focus for the day&lt;/li&gt;
&lt;li&gt;Set up a forwarding rule in your primary inbox to redirect important messages to the plugin&lt;/li&gt;
&lt;li&gt;Connect the email address to a third-party notification service&lt;/li&gt;
&lt;li&gt;Share the inbound address with friends and family so they can send you private messages, honey-dos, and dad jokes&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;You can see the latest updates to my personal feed on &lt;a href="https://usetrmnl.com/recipes/74331" rel="noopener noreferrer"&gt;the recipe page&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv4esf9c0l4hea2jz7c02.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv4esf9c0l4hea2jz7c02.jpeg" alt="TRMNL with a cat" width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It's easy to set up your own demo using either a TRMNL, a &lt;a href="https://www.seeedstudio.com/XIAO-7-5-ePaper-Panel-p-6416.html" rel="noopener noreferrer"&gt;compatible third-party e-ink display&lt;/a&gt;, or even &lt;a href="https://docs.usetrmnl.com/go/diy/byod" rel="noopener noreferrer"&gt;bring your own device (BYOD)&lt;/a&gt;.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Sign up for &lt;a href="https://pipedream.com" rel="noopener noreferrer"&gt;Pipedream&lt;/a&gt; and create a new workflow from &lt;a href="https://pipedream.com/new?h=tch_n0fJBg" rel="noopener noreferrer"&gt;the template&lt;/a&gt;.  Copy the trigger URL to your clipboard. &lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw9hbxeafhoyx4q5teggs.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw9hbxeafhoyx4q5teggs.png" alt="Pipedream screenshot" width="800" height="391"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Sign up for &lt;a href="https://postmarkapp.com" rel="noopener noreferrer"&gt;Postmark&lt;/a&gt;, configure the Default Inbound Stream, and paste in the trigger URL from step 1. &lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft7358zsmsg96ema0rup8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft7358zsmsg96ema0rup8.png" alt="Postmark screenshot" width="800" height="199"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;In your TRMNL account, fork &lt;a href="https://usetrmnl.com/recipes/74331" rel="noopener noreferrer"&gt;the recipe&lt;/a&gt;. Copy the webhook URL from the plugin settings.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw59wyb7g453xoi3jz1zb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw59wyb7g453xoi3jz1zb.png" alt="TRMNL account screenshot" width="800" height="178"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Back in Pipedream, create a new the project variable &lt;code&gt;PLUGIN_WEBHOOK_URL&lt;/code&gt; and paste in the webhook URL from step 3. &lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo8jddng05hsjwptnc79s.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo8jddng05hsjwptnc79s.png" alt="Pipedream screenshot" width="800" height="265"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;There is no step five – everything should be all wired up. Sending a message to the inbound address triggers a chain of events that fires off a webhook from Postmark, then Pipedream posts a webhook to the TRMNL plugin, the screen is re-rendered, and finally the device displays it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Code Repository
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/schrockwell/trmnl-postmark-challenge" rel="noopener noreferrer"&gt;https://github.com/schrockwell/trmnl-postmark-challenge&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The Git repo contains both the TRMNL plugin source under &lt;code&gt;trmnl/&lt;/code&gt; and the Pipedream workflow steps under &lt;code&gt;pipedream/&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  How I Built It
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvhoqoxovhgnizk3e38q1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvhoqoxovhgnizk3e38q1.png" alt="Flow diagram" width="800" height="256"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;There are two main pieces to this project:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;A TRMNL &lt;a href="https://help.usetrmnl.com/en/articles/9510536-private-plugins" rel="noopener noreferrer"&gt;plugin&lt;/a&gt; which accepts data via &lt;a href="https://docs.usetrmnl.com/go/private-plugins/create-a-screen" rel="noopener noreferrer"&gt;webhooks&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;A &lt;a href="https://pipedream.com" rel="noopener noreferrer"&gt;Pipedream&lt;/a&gt; workflow that transforms Postmark's webhook into the format expected by TRMNL&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Pipedream workflow
&lt;/h3&gt;

&lt;p&gt;It was actually a link in Postmark's docs that led me to &lt;a href="https://pipedream.com" rel="noopener noreferrer"&gt;Pipedream&lt;/a&gt; and its AI coding assistant, String. After some back-and-forth where I described the input and output formats of the webhooks, String understood the assignment and wrote, tested, and deployed an endpoint to Pipedream. &lt;/p&gt;

&lt;p&gt;Sometimes, it's cool living in The Future.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F55cgtxekwa0t93aj5hhx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F55cgtxekwa0t93aj5hhx.png" alt="Screenshot of the Pipedream workflow steps" width="800" height="372"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  TRMNL plugin
&lt;/h3&gt;

&lt;p&gt;To design the plugin itself, I leveraged TRMNL's &lt;a href="https://usetrmnl.com/framework" rel="noopener noreferrer"&gt;UI framework&lt;/a&gt; to build a pixel-perfect feed with HTML, CSS, and &lt;a href="https://shopify.github.io/liquid/" rel="noopener noreferrer"&gt;Liquid&lt;/a&gt;. The recipe was designed, tested, and submitted from within the web-based editor. &lt;/p&gt;

&lt;p&gt;It now joins the 200+ user-created plugins for TRMNL, with subjects ranging from webcomics to public transit schedules.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh7cjrnkqa6m2yciqfppe.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh7cjrnkqa6m2yciqfppe.png" alt="TRMNL plugin editor screenshot" width="800" height="350"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  In Summary
&lt;/h2&gt;

&lt;p&gt;This challenge was a fun mashup combining one of the Internet's oldest protocols with the latest in display technology.&lt;/p&gt;

&lt;p&gt;And it's all to make mail look like paper again.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa8z1rz4ivf6p3rd2tk7p.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa8z1rz4ivf6p3rd2tk7p.jpeg" alt="TRMNL on the patio" width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>postmarkchallenge</category>
      <category>webdev</category>
      <category>api</category>
    </item>
  </channel>
</rss>
