<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>
|