Come along as we dive into limited liability corporations, tax law, lawyers, and mistakes we made when becoming an official company. What a roller coaster! - https://building.barkpass.com/entry/the-journey-from-barkpass-to-barkpass-llc

Come along as we dive into limited liability corporations, tax law, lawyers, and mistakes we made when becoming an official company. What a roller coaster!

The Journey From Barkpass to Barkpass, LLC

Let's dive into the tech stack powering Barkpass. We'll chat backend, frontend, and the dreaded rewrite of 2019. Buckle in! - https://building.barkpass.com/entry/a-peek-inside-the-tech-stack-of-barkpass

Let's dive into the tech stack powering Barkpass. We'll chat backend, frontend, and the dreaded rewrite of 2019. Buckle in!

A Peek Inside the Tech Stack of Barkpass

We're designers now! Let's refactor an important Barkpass form component for better usability.  - https://building.barkpass.com/entry/refactoring-a-document-input-form

We're designers now! Let's refactor an important Barkpass form component for better usability. 

Refactoring a Document Input Form

From the spark to the pitch, learn how the idea of Barkpass came to fruition for this intrepid couple and a car full of dogs. - https://building.barkpass.com/entry/how-barkpass-came-to-be

From the spark to the pitch, learn how the idea of Barkpass came to fruition for this intrepid couple and a car full of dogs.

How Barkpass came to be

We built dog park management software, and we want to tell you about it. Also, Bri and Josh introduce themselves. - https://building.barkpass.com/entry/introducing-barkpass

We built dog park management software, and we want to tell you about it. Also, Bri and Josh introduce themselves.

Introducing Barkpass

<p>Just a couple friends sitting on the couch before bath time.</p>


Just a couple friends sitting on the couch before bath time.


<p>Just a nice sunny day out on the lawn.</p>


<p>Just a little piano time at grandma and grandpa&#39;s.</p>


Just a little piano time at grandma and grandpa's.


<p>The latest in a series where Barrett and I play piano. This time: a Beethoven prelude.</p>


The latest in a series where Barrett and I play piano. This time: a Beethoven prelude.


<p>I don&#39;t often livestream, but I did this particular morning (especially since Bri was willing to watch Barrett for 45 minutes). This is me building <a href="https://rafter.app">Rafter</a>.</p>


I don't often livestream, but I did this particular morning (especially since Bri was willing to watch Barrett for 45 minutes). This is me building [Rafter](https://rafter.app).


I talk about building my new website with some fun new technologies.

Building my new website with Next.js, TailwindCSS, and Vercel

Songs I Sing to Barrett As Lullabies

Creativity vs. Consumption

How We Rewrote a Vue App with React and Tailwind in 21 Days

Managing complex object inputs with wrapper classes in JavaScript

Tracking Queued Job Chains in Laravel

Building Commands Integration

<p>Great question! I’ll answer in a few different ways.</p><h2 id="-the-tldr-description" style="position:relative"><a href="#-the-tldr-description" aria-label=" the tldr description permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>🔥 The TL;DR Description</h2><p>Rafter is a <strong>serverless deployment platform</strong> powered by Google Cloud Run. It supports popular full-stack frameworks like Laravel, Rails, WordPress and more.</p><p>The <strong>serverless</strong> part means you don’t have to worry about servers. It’s container-based, but you don’t even need to worry about Docker! Rafter acts as an abstraction layer over those details.</p><p>For developers, this means:</p><ul><li>Connect an existing GitHub, GitLab, or Bitbucket repository and deploy instantly.</li><li>Or type <code>rafter deploy</code> to push a project from the command line.</li><li>Your project scales to 0, meaning you’re not paying for resources not being used.</li><li>You own the entire stack: it lives in your Google Cloud account, so you can walk away from Rafter whenever you want.</li><li><strong>You can focus on building your product instead of your infrastructure</strong>.</li></ul><h2 id="-the-technical-description" style="position:relative"><a href="#-the-technical-description" aria-label=" the technical description permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>👨‍💻 The Technical Description</h2><p>Rafter projects are created with several entrypoints in mind:</p><ul><li>Source control providers (GitHub, Gitlab, etc)</li><li>Command line pushes (manually typing <code>rafter deploy</code>)</li></ul><p>When a new input is received, Rafter kicks off a chain of jobs to:</p><ol><li><strong>Create a Docker image using Google Cloud Build</strong>. Rafter uses the type of your project (Rails, Laravel, Node) to provide a basic <code>Dockerfile</code> to use (<code>php</code> for Laravel, <code>ruby</code> for Rails), meaning you don’t have to provide your own.</li><li><strong>Deploy to Google Cloud Run</strong>. Rafter uses the image to create new <code>web</code> and <code>worker</code> services in Cloud Run.</li><li><strong>Inject Environment Variables</strong>. Using a handy Secrets and Variables Management UI, Rafter injects the required environment variables into your application.</li><li><strong>Provision and Manage a Database</strong>. If requested, Rafter creates a Cloud SQL database, connects it to your Cloud Run services, and injects the correct variables.</li><li><strong>Manage Queues</strong>: Rafter creates a new queue in Cloud Tasks for your service, and provides first-class integrations into your framework to integrate queue workers in a serverless environment.</li><li><strong>Schedule Cloud Jobs</strong>: Rafter uses Cloud Scheduler to ping your service using first-class framework integrations to run scheduled jobs.</li><li><strong>Run Commands</strong>: Using PubSub, Rafter integrates with your framework to run CLI commands (think: <code>rails</code> or <code>artisan</code>).</li><li><strong>Provide Logs</strong>: Rafter provides a UI to inspect the logs from your application as well as other metrics.</li></ol><h2 id="other-descriptions" style="position:relative"><a href="#other-descriptions" aria-label="other descriptions permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Other Descriptions</h2><ul><li>Rafter is like <a href="https://heroku.com">Heroku</a>, except you own the stack. Heroku uses AWS behind the scenes, but you pay for their services at a markup from AWS base costs. With Rafter, you pay Google Cloud for whatever costs you incur.</li><li>Rafter is like <a href="https://vapor.laravel.com">Laravel Vapor</a>, but for Google Cloud — and it supports multiple frameworks and languages instead of just PHP and Laravel.</li><li>Rafter is a wrapper around <a href="https://cloud.google.com/run">Google Cloud Run</a>. You can totally do everything Rafter does manually, except you need to know Docker, Cloud Run APIs, configuration management, and more.</li><li>Rafter is like Google App Engine, only it supports additional runtimes (anything that will fit in a Docker container).</li><li>Rafter is Kuberetes, only several abstractions removed (Rafter » Cloud Run » Knative » Kubernetes).</li></ul><p>I’m hoping to put together an even consider definition in the future. Stay tuned!</p><style class="grvsc-styles">
  .grvsc-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 1rem;
    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));
    padding-bottom: 1rem;
    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));
    border-radius: 8px;
    border-radius: var(--grvsc-border-radius, 8px);
    font-feature-settings: normal;
  }
  
  .grvsc-code {
    display: inline-block;
    min-width: 100%;
  }
  
  .grvsc-line {
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    padding-left: 1.5rem;
    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));
    padding-right: 1.5rem;
    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));
  }
  
  .grvsc-line-highlighted {
    background-color: var(--grvsc-line-highlighted-background-color, transparent);
    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);
  }
  
</style>

What is Rafter?

<p>I’m building the interface of Rafter with <a href="https://tailwindui.com">Tailwind UI</a>! Follow along.</p><h2 id="april-22-2020" style="position:relative"><a href="#april-22-2020" aria-label="april 22 2020 permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>April 22, 2020</h2><p>Here’s what I have so far!</p><p><span class="gatsby-resp-image-wrapper" style="position:relative;display:block;margin-left:auto;margin-right:auto;max-width:700px">
      <a class="gatsby-resp-image-link" href="/static/a6bfaf0dbbaf44eb3720c3cddfb6f233/f90e6/dashboard-1.png" style="display:block" target="_blank" rel="noopener">
    <span class="gatsby-resp-image-background-image" style="padding-bottom:44.57142857142857%;position:relative;bottom:0;left:0;background-image:url(&#x27;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAABYlAAAWJQFJUiTwAAABDklEQVQoz42QbUvDMBSF86e2fRmzoA5EmSgD8W9bdcPvK7YVbZs0bdqkx9z0Raeu88LDCcnNyT1hp5f3mJ/dYLFcw7u4w8y7xvRkhal3BNszszpZrDA/v8Xyao2J3WP+0xbPmxc8+Bv4j1uE0RukLCBEDpEfJs/lHqJTlqQZ0owjl9KhtcF/yphmQDs1bs1Sa0imfWmt3WHTdBeaH9g9OiuVglKV1X1YGL4iiiIEQYA4jsE5d6ZUdPEQ7ePGmaiqHmD0V1wIlKVqp2soghmFEtR1jcryy5Aiv38krqFt1KOT9dNR3Oqb0WDoIochdrsdkiQBzzJn3EfGH4xGlkUBoihLNx1RdXGOQQZfhq1+AlcNlbLchvGtAAAAAElFTkSuQmCC&#x27;);background-size:cover;display:block"></span>
  <img class="gatsby-resp-image-image" alt="Dashboard, v1" title="Dashboard, v1" src="/static/a6bfaf0dbbaf44eb3720c3cddfb6f233/8c557/dashboard-1.png" srcSet="/static/a6bfaf0dbbaf44eb3720c3cddfb6f233/4edbd/dashboard-1.png 175w,/static/a6bfaf0dbbaf44eb3720c3cddfb6f233/13ae7/dashboard-1.png 350w,/static/a6bfaf0dbbaf44eb3720c3cddfb6f233/8c557/dashboard-1.png 700w,/static/a6bfaf0dbbaf44eb3720c3cddfb6f233/e996b/dashboard-1.png 1050w,/static/a6bfaf0dbbaf44eb3720c3cddfb6f233/2cefc/dashboard-1.png 1400w,/static/a6bfaf0dbbaf44eb3720c3cddfb6f233/f90e6/dashboard-1.png 2594w" sizes="(max-width: 700px) 100vw, 700px" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0" loading="lazy"/>
  </a>
    </span></p><p>I’m using the <a href="https://tailwindui.com/components/application-ui/application-shells/stacked#component-10058606cac5398d7fa2c73b64089874">Dark nav with white page header</a> layout from Tailwind UI. I really like this so far - it’s concise and it seems like it will be brandable to whichever color/font selections I might eventually want to use.</p><p>My main focus so far has been on the <strong>Project/Environment page</strong>:</p><p><span class="gatsby-resp-image-wrapper" style="position:relative;display:block;margin-left:auto;margin-right:auto;max-width:700px">
      <a class="gatsby-resp-image-link" href="/static/56d3a6d83820687bcfd4505b1f53ed3d/eb645/project-1.png" style="display:block" target="_blank" rel="noopener">
    <span class="gatsby-resp-image-background-image" style="padding-bottom:25.142857142857146%;position:relative;bottom:0;left:0;background-image:url(&#x27;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAzklEQVQY042PSwvCMBCE86t8gEgVVPSgSBU9+o9FKYoHEU9qa23Tmkdr2zFNFXwgGPiY7A472ZCeOUO9PYLRGcPoTlBrmSgZfVQagy/Kxm+qzSH65hRku9tjaa1hrTaYLyx4PgXnAtcrQ/gBY1x7TMEfMF70cv/iUZA8wDm7qvBhO642pYwQxzfIKNL3p6Zphl8nyzIkaQpyPDk4HG3QINShBVSFxIhU6Ct5TyjeVD3k0QC+ggsJQsMEIUvApVRrczBRqHwM/EMeKvRPYtwBCNZZqfNeaTsAAAAASUVORK5CYII=&#x27;);background-size:cover;display:block"></span>
  <img class="gatsby-resp-image-image" alt="Project, v1" title="Project, v1" src="/static/56d3a6d83820687bcfd4505b1f53ed3d/8c557/project-1.png" srcSet="/static/56d3a6d83820687bcfd4505b1f53ed3d/4edbd/project-1.png 175w,/static/56d3a6d83820687bcfd4505b1f53ed3d/13ae7/project-1.png 350w,/static/56d3a6d83820687bcfd4505b1f53ed3d/8c557/project-1.png 700w,/static/56d3a6d83820687bcfd4505b1f53ed3d/e996b/project-1.png 1050w,/static/56d3a6d83820687bcfd4505b1f53ed3d/2cefc/project-1.png 1400w,/static/56d3a6d83820687bcfd4505b1f53ed3d/eb645/project-1.png 2500w" sizes="(max-width: 700px) 100vw, 700px" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0" loading="lazy"/>
  </a>
    </span></p><p>My biggest inspirations so far have been <a href="https://vercel.com">Vercel</a> (fka Zeit):</p><p><span class="gatsby-resp-image-wrapper" style="position:relative;display:block;margin-left:auto;margin-right:auto;max-width:700px">
      <a class="gatsby-resp-image-link" href="/static/27a4dac1b272c205407b2337af0c7f49/437e0/vercel-1.png" style="display:block" target="_blank" rel="noopener">
    <span class="gatsby-resp-image-background-image" style="padding-bottom:53.14285714285714%;position:relative;bottom:0;left:0;background-image:url(&#x27;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAABdklEQVQoz3VSWW7CMBD1ETkA35UqVeopegHUi/EDIiSQjSRkTyAbJLx6Bhm5CEZ68iT2LG/miWPkw3N2OJ8bXC4XkN1uN4Yy3Z+mCW3bYhgG9H2PruswjiPCwEVdlRBJkspkZ74gXK9XBgVQARVIQSo5+erUbZL/xNC3/NEP92qqKiVTgdSV3jWdVJQsyzL4vo8gCLi4+P35QBYfsNkYWC6XWK/XWK1WqKrqMYJn6lSormv2F4sFZrMZ5vM59vs9xPfXJ4ztDkkSczV9Xvo8n/HqDZlou54doqBTehX4LoluopKbOZ1Obx8TPTXLTs43SdMH3VcshGVZcByH50XQO1UJ1YKOxwMce4c4TiRipDJ5nucoy5IXwktJi5w3FEURPyqKgjf9f6vTXWuhD9d1OEkYBjxzYtc0DccQpA4TrkSXdKHEq9NQtMPQg2UasCUj13VB7AzDgOd5nIw7JFGT8glKh+8wjhNi2QDJyjRN2LbN3VIzSrt/cR9OH0QWq1YAAAAASUVORK5CYII=&#x27;);background-size:cover;display:block"></span>
  <img class="gatsby-resp-image-image" alt="Vercel 1" title="Vercel 1" src="/static/27a4dac1b272c205407b2337af0c7f49/8c557/vercel-1.png" srcSet="/static/27a4dac1b272c205407b2337af0c7f49/4edbd/vercel-1.png 175w,/static/27a4dac1b272c205407b2337af0c7f49/13ae7/vercel-1.png 350w,/static/27a4dac1b272c205407b2337af0c7f49/8c557/vercel-1.png 700w,/static/27a4dac1b272c205407b2337af0c7f49/e996b/vercel-1.png 1050w,/static/27a4dac1b272c205407b2337af0c7f49/2cefc/vercel-1.png 1400w,/static/27a4dac1b272c205407b2337af0c7f49/437e0/vercel-1.png 2094w" sizes="(max-width: 700px) 100vw, 700px" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0" loading="lazy"/>
  </a>
    </span></p><p>And <a href="https://vapor.laravel.com">Laravel Vapor</a>:</p><p><span class="gatsby-resp-image-wrapper" style="position:relative;display:block;margin-left:auto;margin-right:auto;max-width:700px">
      <a class="gatsby-resp-image-link" href="/static/1077f8ea56af899ad128ae635605cada/c6720/vapor-1.png" style="display:block" target="_blank" rel="noopener">
    <span class="gatsby-resp-image-background-image" style="padding-bottom:48%;position:relative;bottom:0;left:0;background-image:url(&#x27;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAABYlAAAWJQFJUiTwAAAB+0lEQVQoz3WRXW8SURCG94cYG5R+KNAgoKIxrVF/pDdeeKUxaiWhaY2JNzXRAl22xqItFGHZjwoIu+wXy+7yOnsOwWj04jnvnDnnzJyZEa5czyGxmsFKMoWTxjdMgwim42GyIIwizOfzP4gWPm/qY9jXYVkWfN9nPiFd2MLa5h2kC9s4PWsiCAJMJhY8b4o5PWSP/0N8Ft93HAemaSIKQwibN+9jNVNEhrRx2sSMnKbtwHY9siO25/oPAn429Wdw6bf+LKCAtx7wH+a3cCh9geH6aMkqOtoPaEMD+k+DdMxsrmOoA87FyETfsNA3bQyI2BayxYdYX5RckU4wdqY46yhodlVGS9aYthUdXb2PrtanZKT6ADolGbBgFg8cB0zlt5c9rBw3YPnUQ8uG47oIw7hHIYMNB+DQ4s9mVKrPCKgtw4nDggs3io+QTN9mJX8UP2NsuxgZJsaEScMxzAmDJ/EYNiWzaBC24zI71osRb4+Qyt1D4loeG9m72H9/gHNZQeu8ja7cg6JqhMpU1XRCW6BD7inodGV2r6eo+Nr6jkazDSGxkcPKWhbJVAHPX5VQESVUqjVUa0eoHYlLu16XIEnHqC+RINbrzC8SHw6rOPhUhXA5mcGlqykk1rN4/OQpym/f4dnL14wXOyWUdvfxZnePU+bslPd++/7iF4VbokWdvHUWAAAAAElFTkSuQmCC&#x27;);background-size:cover;display:block"></span>
  <img class="gatsby-resp-image-image" alt="Vapor 1" title="Vapor 1" src="/static/1077f8ea56af899ad128ae635605cada/8c557/vapor-1.png" srcSet="/static/1077f8ea56af899ad128ae635605cada/4edbd/vapor-1.png 175w,/static/1077f8ea56af899ad128ae635605cada/13ae7/vapor-1.png 350w,/static/1077f8ea56af899ad128ae635605cada/8c557/vapor-1.png 700w,/static/1077f8ea56af899ad128ae635605cada/e996b/vapor-1.png 1050w,/static/1077f8ea56af899ad128ae635605cada/2cefc/vapor-1.png 1400w,/static/1077f8ea56af899ad128ae635605cada/c6720/vapor-1.png 1922w" sizes="(max-width: 700px) 100vw, 700px" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0" loading="lazy"/>
  </a>
    </span></p><ul><li>I really like the simplicity of Vercel</li><li>Vapor places a big emphasis on the concept of an <strong>Environment</strong>. I’m torn - it feels like an extra step to send the user through a list of environments before selecting an “environment detail” which is more like the “project detail” page in Vercel</li><li>As a compromise, I think I’ll redirect the user to live on the <code>production</code> environment by default.</li><li>Heroku does some interesting things here, but it’s a little more closely tied to the concept of a “pipeline”</li></ul><style class="grvsc-styles">
  .grvsc-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 1rem;
    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));
    padding-bottom: 1rem;
    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));
    border-radius: 8px;
    border-radius: var(--grvsc-border-radius, 8px);
    font-feature-settings: normal;
  }
  
  .grvsc-code {
    display: inline-block;
    min-width: 100%;
  }
  
  .grvsc-line {
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    padding-left: 1.5rem;
    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));
    padding-right: 1.5rem;
    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));
  }
  
  .grvsc-line-highlighted {
    background-color: var(--grvsc-line-highlighted-background-color, transparent);
    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);
  }
  
</style>

Building Interfaces with Tailwind UI

<p><strong>I’m building a project called <a href="https://github.com/rafter-platform/rafter">Rafter</a></strong>.</p><p>It’s a container-based serverless hosting platform powered by Google Cloud Run. It caters to full-stack frameworks like Laravel, Rails, and WordPress — but it can host <em>anything</em> that fits in a container.</p><p>I plan to write a lot about the technical aspects of this service. But first, I wanted to step back and talk about <em>why</em> I’m building this at all.</p><p>Here’s a set of <strong>four core beliefs</strong> that are driving this product:</p><h3 id="1-developers-should-not-have-to-think-about-docker-or-kubernetes" style="position:relative"><a href="#1-developers-should-not-have-to-think-about-docker-or-kubernetes" aria-label="1 developers should not have to think about docker or kubernetes permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Developers should not have to think about Docker or Kubernetes</h3><p>If you’re building a product or webiste, developer time spent on <em>building the actual product</em> is much better than developer time spent on tooling, debugging Dockerfiles, configuring Helm charts or inspecting Kubernetes ReplicaSets.</p><p>I’ve seen far too many developers attempt to solve a simple issue in a codebase only to be blocked by a day of Docker troubleshooting.</p><p>As a developer, <strong>you shouldn’t have to know a thing about Docker</strong> to deploy your app.</p><h3 id="2-theres-still-value-in-full-stack-frameworks" style="position:relative"><a href="#2-theres-still-value-in-full-stack-frameworks" aria-label="2 theres still value in full stack frameworks permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. There’s still value in full-stack frameworks</h3><p>Microservices and static-generated JAMStack applications are all the rage. They play a great role in the future of our industry, and they are super powerful. But full-stack frameworks like Laravel and Rails are <strong>still valued and used by many products</strong>. It’s hard to beat built-in request lifecycles, authentication, middleware, queues, filesystem interaction, and email handling.</p><p>These applications deserve to be deployed and scaled as seemlessly as their microservice and JAMStack counterparts.</p><h3 id="3-you-shouldnt-have-to-pay-for-hosting-when-your-app-isnt-being-used" style="position:relative"><a href="#3-you-shouldnt-have-to-pay-for-hosting-when-your-app-isnt-being-used" aria-label="3 you shouldnt have to pay for hosting when your app isnt being used permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>3. You shouldn’t have to pay for hosting when your app isn’t being used</h3><p>This is pretty simple. The technology exists. You can find numerous JAMStack-like services with a generous free tier. Container-based serverless options — more likely to support full-stack frameworks — are just starting to offer scale-to-zero features along with those free tiers.</p><p>We as developers shouldn’t have to waste any more money paying for a \$5/mo VPS, hosting side projects nobody ever visits.</p><h3 id="4-developer-experience-dx-and-user-experience-ux-are-core-tenants-of-a-product" style="position:relative"><a href="#4-developer-experience-dx-and-user-experience-ux-are-core-tenants-of-a-product" aria-label="4 developer experience dx and user experience ux are core tenants of a product permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>4. Developer experience (DX) and user experience (UX) are core tenants of a product</h3><p>I can’t tell you how many times I’ve abandoned a product because of poor DX or UX. If a product is not well-designed — or if it’s clear a developer cobbled it together without thinking of how it would be <em>used</em> — it’s likely not going to be a great experience in the long run. This is why I’ve avoided using AWS for so long and been attracted to Google Cloud Platform’s more useful dashboards and documentation. DX should be at the forefront of every new tool and API we build.</p><h2 id="the-history" style="position:relative"><a href="#the-history" aria-label="the history permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>The History</h2><p>In February 2019, I wrote a blog post called <a href="https://creative.jplhomer.org/009-my-dream-side-project/">My Dream Side Project</a>.</p><p>In it, I expressed my desire for a <strong>serverless hosting solution for PHP</strong>, among other things. I went into detail about how <a href="https://kubernetes.io/">Kubernetes</a> and <a href="https://knative.dev/">Knative</a> set the stage to make this possible.</p><p>But a lot has happened since then.</p><p>In April 2019, Google announced <a href="https://cloud.google.com/blog/products/serverless/announcing-cloud-run-the-newest-member-of-our-serverless-compute-stack">Cloud Run</a>, their container-based serverless platform built on Knative.</p><p>And in July 2019, Taylor Otwell introduced <a href="https://www.youtube.com/watch?v=XsPeWjKAUt0">Laravel Vapor</a>, which is the exact type of serverless platform I’d envisioned building for Laravel PHP apps, though this was hosted on AWS and powered by Lambdas.</p><p>It seems like I’m not the only one who wanted this sort of thing to exist!</p><p>I started <a href="https://building.barkpass.com">building Barkpass</a> in 2019 with my wife, and this is what really drove the spark to create a new platform for serverless deployments on Google Cloud Run. While I still haven’t made the transition (I’m paying monthly for a VPS on DigitalOcean), it’s truly what got Rafter’s wheels turning.</p><h2 id="lots-of-thinking" style="position:relative"><a href="#lots-of-thinking" aria-label="lots of thinking permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Lots of thinking</h2><p>Since I wrote that blog post more than a year ago, I’ve been doing a lot of thinking.</p><p>Thinking while mowing the lawn
…while vacuuming the house
…while walking the dogs
…while lying in bed.</p><p>While I tend to get down on myself when I haven’t <a href="https://creative.jplhomer.org/011-creativity-consumption/">actively created something</a>, I need to give myself more credit: I’ve been putting a lot of time into thinking about solutions for this problem!</p><p>But up to the beginning of this year, I hadn’t sat down to <em>create</em> anything out of that thinking.</p><p>That all changed in January 2020.</p><h2 id="building-the-thing" style="position:relative"><a href="#building-the-thing" aria-label="building the thing permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Building the thing</h2><p>Fueled by a new sense of focus in a sleep-deprived state, I started building Rafter right when I became a new dad. This is a silly idea — I wouldn’t recommend all new software projects start this way. But I enjoyed being able to knock out 20 minutes of writing code and then switching back to dad mode.</p><p>Feeding my son a bottle or rocking him to sleep gave me just enough time to think about my next coding move. And had I not been pressed for time, I probably wouldn’t have been as productive.</p><p>The project is <a href="https://github.com/rafter-platform/rafter">open-source</a> right now. It’s built with <a href="https://laravel.com/">Laravel</a> with help from <a href="https://tailwindcss.com">Tailwind</a>, <a href="https://laravel-livewire.com/">Laravel Livewire</a>, and <a href="https://github.com/alpinejs/alpine">Alpine.js</a>. <em>I’m not using any major JavaScript framework like React or Vue… yet</em>. 😱</p><p>The actual app is not yet in a working state, nor is it ready for alpha/beta testers. <em>Soon</em> though, I hope.</p><h2 id="my-goals" style="position:relative"><a href="#my-goals" aria-label="my goals permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>My Goals</h2><p>I’ve built quite a few side projects in my decade as a professional software engineer. I’ve learned that <strong>most things don’t take off</strong>, and I set my expectations accordingly.</p><p>I’ve also fallen into the trap of building something I <em>think</em> people will be into, but something I’m not actively using myself. This becomes an issue when I lose interest six months later, but other people are actively using it. <em>Sorry, <a href="https://uselifeboat.com/">Lifeboat</a></em>.</p><p>So my goals for this are outlined as such:</p><ul><li><strong>Learn lots of new things</strong>, and write about those new things. This comes in handy when I want to show prospective employers the way I think and build, but also to point to examples of things I’ve learned with existing colleagues.</li><li><strong>Improve my own development toolkit</strong> for <a href="https://barkpass.com">Barkpass</a> and custom Laravel/WordPress projects</li></ul><p>I have anti-goals, too:</p><ul><li><strong>Make money.</strong> I’m not setting out to make bank with this project. It’s more of a true side project. At the time of writing this, I’m not keen on having to support production-level clients in this industry nor am I particularly excited about quitting my day job to pursue this type of work full-time. I might charge some sort of fee, but I’m guessing it will be optional or via some sort of GitHub Sponsor endeavor - just to offset hosting costs, if it grows.</li></ul><hr/><p>I’m planning to write about my inspirations, how the darn thing works, unstructured journals/logs about the building process, and lots of other learnings. Hope you enjoy the ride as much as I do!</p><style class="grvsc-styles">
  .grvsc-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 1rem;
    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));
    padding-bottom: 1rem;
    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));
    border-radius: 8px;
    border-radius: var(--grvsc-border-radius, 8px);
    font-feature-settings: normal;
  }
  
  .grvsc-code {
    display: inline-block;
    min-width: 100%;
  }
  
  .grvsc-line {
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    padding-left: 1.5rem;
    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));
    padding-right: 1.5rem;
    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));
  }
  
  .grvsc-line-highlighted {
    background-color: var(--grvsc-line-highlighted-background-color, transparent);
    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);
  }
  
</style>

I'm Josh Larson. Nice to meet you!

Rafter

Barkpass

Fresa

Full-Stack Fundamentals

Lifeboat

Glances