You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

92 lines
2.5 KiB

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