flylocal-web/pages/index copy.vue

<template>
  <main class="special">
    <div class="section">
      <NuxtLink to="/go" class="btn btn--primary">
        go to the site
      </NuxtLink>
      <br><br>
      <h1 style="font-size: 2rem;">
        "what is this site, really?"
      </h1>
      <br>
      <pre style="white-space: pre-wrap;">
Last week, I was mulling over FlyLocal.io's speed issues.

As an exercise, I made a list of all the things that the FlyLocal website does.

- [1] get data from a server three times
- [2] display data on a map, twice
- [3] display data on a page, once

I let it ruminate that, by design, all the heavy lifting, all the processing, is already being done by Airtable.
From a technical perspective, the site is really just a *viewer* of our product, and our product is Airtable data.

   ***

Then I thought about all the previous iterations of the site.

It occurred to me that all the fancy stuff I'd done in Bubble v1 and pre-Bubble was for a business model that no longer existed.

There was nothing fancy about this *new* model. No forms, no calculations. Get data, display data.

And it occurred me that all the time-consuming stuff I'd done with Bubble v2 over the last year was really about me learning Bubble and figuring out how to get it to do the stuff that I already knew that websites could do: Get data, display data.

And really, there was nothing all that time-consuming about getting data and displaying data, especially in 2021.

   ***

So... I decided to take a couple days and make a website. And I'm pleasantly surprised with how quickly it all came together.

Hand-coded from the ground up on a modern, popular web-dev framework, it's lean, snappy, mobile-first, it has an elegant backend, and it checks all of my boxes.

It still needs some css TLC, but all the major dev is complete.

      </pre>
      <NuxtLink to="/go" class="btn btn--primary">
        v5, for your consideration
      </NuxtLink>
    </div>
  </main>
</template>

<script>
export default {
  mounted () {
    const body = document.querySelector('body')
    body.classList.add('special')
  }
}
</script>

<style>

main.special {
  color: #888 !important;
  display: flex;
  align-items: center;
  padding: 3rem;
  background: #262626;
  overflow-y: scroll;
}

.section {
  max-width: 60ch;
  border-radius: 2rem;
  border: 1px solid #888;
  background: rgba(255, 255, 255, 0.05);
  padding: 3rem;
}

.btn {
  border-radius: 999px;
  padding: 0.4em 0.8em;
  font-size: 1rem;
  white-space: nowrap;
  transition: 0.2s all;
}

.btn.btn--primary {
  background: #007fff;
  color: #fff;
}
</style>