Let The Universe shuf() For You

The Modern Diviner’s Guide to API Calls

The first thing after finally learning how the mysterious API calls the greybeards spoke of worked, is probably going to be thinking about how to automatically change them. In the exercises that the other junior wizards are working on with me, we are hard-coding our calls. But obviously not every ritual is manually evoked, clearly we will need to invoke these automatically at some point. Given that prescient bit of divination, today let’s randomly draw a tarot card with an API call. Skip to the bottom for a live demo of this concept.

SUMMONING FOR THE INITIATE

To begin, we’ll need to get our finest chalks and smelliest candles, so we can draw up our rudimentary summoning circle. Store-bought is fine, feel free to copy mine as shown here.

      const init = () => {
            //become aware of the form on the page
            const inputForm = document.getElementById('cardForm');
            
            //when the submit button is clicked, learn the number of cards requested and get that many cards by making a request from WikiPedia
            inputForm.addEventListener('submit', (event) => {
                event.preventDefault();
                console.log(event);
                const input = validNumericInput(event.target.children[1].value);
                console.log(input);

                const url = 'https://en.wikipedia.org/w/api.php?action=parse&format=json&page=';
                const rider = '&origin=*';
                let cardDrawn = drawDeck();

                //draw the requested number of cards
                for (let i = 0; i < input; i++) {
                    console.log(fetch(`${url}+${cardDrawn}+${rider}`)
                        .then(response => response.json())
                        .then(data => {
                            console.log(data);
                            updateCard(input, data);
                        }));
                }

            });

The way this API call works, for those who have never seen an evoker at work, is that all that work comes to a head here on a certain line with this item:

 fetch(${ur}+${cardDrawn}+${rider}) 

Essentially, this is not the normal fetch(). A normal fetch() does the usual thing, which is summon a hellhound to go get something from somewhere, vanishing with a little smoldering IOU and a function to run when it gets back. This time the hellhound has three attendant imps that go with it and tell it what to get.

URL

const url = 'https://en.wikipedia.org/w/api.php?action=parse&format=json&page=';

The first imp is the being known as url, and is contained within a smaller summoning circle ${url} to keep him in line. He’s not the heftiest imp, but like a large cricket he seems unusually heavy for how small he is. He has a note with him and will always have the same directive. This is because we want to request resources from the same foreign circle of hell every time.

RIDER

const rider = '&origin=*';

Leaving aside the middle imp for a moment, let’s look at the smallest imp, no bigger than the size of a gnat. He also has the same directive every time. This littler rider is not usually needed on fetch() requests, since usually origin is configured on the remote resource’s server. However, the WikiMedia API has configured origin to be supplied by the requester. This is important because one of the purposes of origin is to navigate cross-origin security. We’re letting our fate be dictated by the universe today, and setting our origin appropriately. It would probably be better if I had set this to be ashtonmackenzie.com.

CARDDRAWN

The middle imp has a ledger under their arm and a calculating look in their eye that you’re not sure you trust the likes of. You feel like you could be redirected at any time.

      function drawDeck() {
            const deck = [
               ...
            ];
            index = Math.floor(Math.random() * 78);
            return deck[index];
        }

Scrolling through the ledger does take us some time but once our eyes unglaze we can see that the imp is selecting a random number between 0 and 77, and using the corresponding value from their ledger array for their directive.

BY THEIR POWERS COMBINED

An example full API request string generated by the three imps is 

https://en.wikipedia.org/w/api.php?action=parse&format=json&page=Page%20of%20Cups&origin=* .

The hellhound may now go fetch the specified resource, and we can check to see if that was the only card that wanted to be drawn or if there are further hounds that yet need to be summoned:

 //draw the requested number of cards
                for (let i = 0; i < input; i++) {
                    console.log(fetch(`${url}+${cardDrawn}+${rider}`)
                        .then(response => response.json())
                        .then(data => {
                            console.log(data);
                            updateCard(input, data);
                        }));
                }

Once the hounds have returned, payloads in tow, .then() we can break apart the objects into their constituent properties and slide that juicy text into a pre-sized <div> just waiting for a card and description. There’s only a little hellhound drool on it, and it’ll steam off soon enough.

A final word of wisdom:

//only divine once the world has loaded
        document.addEventListener('DOMContentLoaded', init);

The code associated with this demonstration is maintained on GitHub.

Some further ideas on this concept:

There’s no reason in this day and age to limit ourselves to only the original 78 tarot cards. We could have an option for your tarot card to be any random non-stub Wikipedia article. The temptation is there to use machine learning to compare a set of card draws and subsequent interpretations to interpretations of Wikipedia articles, but because the interpretation of a card is such a generative experience anyway, we could simply request a random Wikipedia article and do something else. We could check the article for whether it is a stub, and compare the text body to a cached list of keywords associated with card interpretations. The card whose keywords most match your text body will have its connotations but not the card name displayed next to your Wikipedia article, and you can decide what your Celtic cross results that include Indonesia, Bees (Insects), and Internal Combustion Engine mean for your personalized fortune.

Demo

Tarot Spreads

Are you tired of having to look up the meaning of a tarot card every time you draw? Get the card and every documentated interpretation provided to Wikipedia, the free encyclopedia anyone can edit, on every reading.

• Single Card

  Get some perspective on today, or think about the card's message over a longer timeframe.

• Two Cards

  Compare and contrast, evaluate compatibility, decide potential outcomes.

• Three Cards

  Past/Present/Future; Help/Hinder/Potential; Current situation/Challenges/Guidance; Think/Feel/Do; Mind/Body/Spirit

I hope you enjoyed this demonstration of the power that awaits us, and found your reading to be a thoughtful addition to your day.

The total word count of this article is below via Word Count Plugin.