The Trick
Checkout the below table:
What? What is that and how does it work?
The above table is populated dyamically from the app called Xata, which essentially acts as a serverless “database-as-a-service” that you can configure completely with a UI. I hooked up a google cloud function to call the xata API to retrive data, with the appropriate credentials and context. The google cloud function can also facilitate working with different tables, selecting columns, managing metadata, and more (though right now it’s not doing much). Lastly, this webpage calls that google cloud function to retreive the data, and formats it as an HTML table using javascript.
Why Dyanmic?
Essentially it turns this site into a proto-web app. That is, content here doesn’t need to be static - I don’t need to change the text, config files, or other “front-end” metadata in-order to change what actually shows up on the site when you load it. In particular, I can update data somewhere else (xata) and those changes will propogate to the site.
Why do you need a Google Cloud Function in the middle?
Long story short: security reasons. Xata requires an API key that I shouldn’t and won’t put in the client-side code. Google cloud functions, however, you can call without authentication, so instead the client code calls the cloud function, which calls xata. I setup the google cloud function with a budget so that it won’t get called excessively.
Why did my web browser let you do this?
A web browser typically won’t let a site request information from another site unless it was configured ahead of time via CORS, or Cross-Origin Resource Sharing. For example, let’s say a website A calls an API from a website B. If website B doesn’t respond saying that it allows requests from website A as an “allowed origin,” then the web browser will refuse to load it. In addition, website B can only allow specific methods, headers, ages, and more. It is the responsibiliy of the client-side code to only call services which have responsible CORS policies.
It’s a bit slow to load…
The table will take a bit longer to load than the rest of the text on this page. However, it’s a bit too slow right now… more on that in a future post.