barefootstache @barefootstache@qoto.org

#DailyBloggingChallenge (346/365)

The trickiness of #teaching is taking a multidimensional concept and presenting it in a linear fashion.

The trickiness of #studying is taking the linear concept and transforming it into a multidimensional pattern that one's mind can understand.

Transpiling these ideas to the #TypeScript language would be:

In the ideal case the teacher can just `JSON.stringify(<concept>)` and the student just reverts the function with `JSON.parse(JSON.stringify(<concept>))` and learning would be done. People aren't basic #JavaScript objects and have a schema tied to their minds, thus they need additional parsing to comprehend the concept.

#DailyBloggingChallenge (345/365)

The next step is to create an unique value. Luckily #Hugo has a built in command via

`{{ $uniqueID := .File.UniqueID }}`

which needs to be placed within a range tag meaning within

`{{ range .Pages }}`

So the whole `list.html` file would look like the image. We are also passing in the `"uniqueID" $uniqueID` as the last parameter in the `dict` for the `partial "paypal-button"`.

#DailyBloggingChallenge (344/365)

Let's say we would implement this pseudo code for the subdirectory `content/post/store`. It would work fine for one product in the subdirectory `store`.

Now let's add a second product that also has the same form (339) with different values.

If one would change either drop-down, both would update. The reason is that the #JavaScript callback is only checking for the #CSS class change and not for an unique class.

References

- 339: https://qoto.org/@barefootstache/112786502951083139

#DailyBloggingChallenge (343/365)

Time to make an overview of what we have so far:

(image Initial)

Since we are already using the callback approach, it would be better to move out everything that is not viable to the #paypal form. Thus making the overview more like

(image Reformed)

#Hugo #HTML #XML

#DailyBloggingChallenge (342/365)

First we want to resolve the UX nightmare issue by designing the UI usable.

Let's go with this arrangement of items:

- title of item
- image of item
- drop-down to choose the item

This means we want to create some kind of callback that updates the prior two components that are dependent on the selection within the drop-down. Thus, we will need to extend #Hugo with #JavaScript while using #golang.

#DailyBloggingChallenge (341/365)

The question now is how to build the partial. Since #Hugo is a static site generator that focuses on using static elements like raw #HTML and #CSS, one quickly realizes the options to continue further are not many.

One could try to use the CSS `option:checked` property and other pseudo classes within the `<option>` HTML tag to turn on and off the various choices within the array. Though this becomes quite difficult to reference items outside of the `<option>` tag and can make the whole thing an UX nightmare.

#DailyBloggingChallenge (340/365)

Now we will create a partial called `paypal-button.html` within the `layouts/partials/` directory. We want to call this partial like

`{{ partial "paypal-button" (dict "paypal" .Params.paypal "items" .Params.paypalItems "headName" .Params.paypalHeadName "headValue" .Params.paypalHeadValue) }}`

within a list template (either the default or another partial).

#Hugo

#DailyBloggingChallenge (339/365)

Through the abstraction of these variables and using the power of an array in the meta of #Hugo as #toml, one can create an item like in the image.

The array in this example is called `paypalItems` and each element has the properties: `name, value, image`. Further properties of the meta are `paypal` as the `<PAYPAL_TOKEN>`, `price` should align with the price within the #paypal cart, `paypalHeadName` as `<PAYPAL_INIT_REFERENCE>`
paypalHeadValue as `<PAYPAL_INIT_VALUE>`.

Of course one could optimize the code somewhat by removing the variables that have `INIT_(VALUE|NAME)` within them and replacing them by the first item `1_(VALUE|NAME)`. And replacing `<PAYPAL_INIT_REFERENCE>` with `on0`.

#DailyBloggingChallenge (338/365)

The #HTML code from #PayPal looks like the image with these variables:

- `<PAYPAL_TOKEN>` is the main PayPal hook, so it knows how to update the store relative to all further actions taken within the form
- `<PAYPAL_INIT_REFERENCE>` usually as `on0`
- `<PAYPAL_INIT_VALUE>` is usually equivalent to `<PAYPAL_ITEM_1_VALUE>`
- `<PAYPAL_INIT_NAME>` is usually equivalent to `<PAYPAL_ITEM_1_NAME>`
- `<PAYPAL_ITEM_1_NAME>` is usually equal to `<PAYPAL_ITEM_1_VALUE>`
- `<PAYPAL_ITEM_2_NAME>` is usually equal to `<PAYPAL_ITEM_2_VALUE>`

#DailyBloggingChallenge (337/365)

Another example is the genre of memes.

Most individuals just consume memes. Some individuals send memes to their peers, thus making them dealers. Some further individuals harvest memes or other funny texts from one platform like the Fediverse and share them to another platform like Signal, thus making them harvesters. And the least, actually create a new meme, either an original or a remix, thus making them producers.

#DailyBloggingChallenge (336/365)

These categories are not strict to any one individual and each individual can be of any of these categories at any time.

E.g. one reads an interesting article and shares it with one's peers over DMs, then one is a dealer. If instead one just bookmarks the article, then one is a harvester. And if one reads it with no further action, then one is a consumer. If one wrote the article, then one is a producer.

#DailyBloggingChallenge (335/365)

Most people fall into the consumer category and the further up one goes through the list, the less amount of people one will find.

The consumer is an individual who only intakes the information.

The dealer is an individual who intakes the information and actively shares it with other individuals.

The harvester is an individual who takes information from one source and transfers it to another source. In comparison to dealers, they do a one-to-many sharing action over a one-to-one sharing action.

The producer creates new information.

#DailyBloggingChallenge (334/365)

While observing most genres of information exchange, one can categorize the individuals who partake into four categories:

1. Producer
2. Harvester
3. Dealer
4. Consumer

A great talk from Meredith Whittaker on the history and problems of #AI.

She explains that #ArtificialIntelligence is a marketing term and the product only works due to #surveillance and #cloud infrastructure provided by #BigTech.

https://www.helmut-schmidt.de/aktuelles/detail/die-rede-der-zukunftspreistraegerin

(only the title is in German, the rest is in English)