barefootstache @barefootstache@qoto.org

#DailyBloggingChallenge (348/365)

In 342 the first mention of using a callback function is used without any concrete description of how it shall be built. From the last image one needs to change the partial reference to be saved as a variable which is then piped with `safeHTML`, so

`{{ $itemsOutput := partial "paypal-button" (dict "paypal" .Params.paypal "items" .Params.paypalItems "headName" .Params.paypalHeadName "headValue" .Params.paypalHeadValue "uniqueID" $uniqueID) }}`

and the rendering is done via

`{{ $itemsOutput | safeHTML }}`

- 342: https://qoto.org/@barefootstache/112786710916723982

#DailyBloggingChallenge (347/365)

Hypothesis: This current epidemic of social media use in childhood and adolescents and its impact of their developing brain has probably been seen before.

About 150a ago the alcohol laws on minimum drinking age has been established to minimize the effects on the developing brain. Back then medical advances in the scientific method just started advancing, thus it took so long to establish such an age. Additionally the age of adulthood has been pushed back by many years, where lots of regions had the ruling that one can drink with marriage, which could start as early as the beginning of teenage years.

Fast forward to today where we already know the adverse effects of social media on the molding minds and are taking little action to prohibit and/or minimize its use. Corporations have tried to install a minimum age requirement and this can be very easily lied on.

I doubt that ID checks will be established on such platforms any time soon, because of the current ecosystem of data value and angst of where such data will land.

It seems like the only place where ID checks were successfully applied are on services where can earn money. And these were first implemented once governments started stepping in to learn where the user is gaining the influx of money.

tl;dr As long as government doesn't intervene, we won't see any positive change towards child brain development.

#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