Свёртки наглядно: интерактивный foldl

Этот пост — демонстрация «богатого» формата: прямо в тексте живёт интерактивный компонент (island), встроено видео и отрендерены формулы. Всё это статически собирается, а интерактив подгружается на клиенте только когда нужен.

Что такое левая свёртка

Левая свёртка проходит список слева направо, протаскивая аккумулятор. В Haskell:

foldl :: (b -> a -> b) -> b -> [a] -> b
foldl _ acc []       = acc
foldl f acc (x : xs) = foldl f (f acc x) xs

Формально для списка $[x_1, x_2, \dots, x_n]$ и функции $\oplus$ с начальным значением $z$:

$$\mathrm{foldl}\ (\oplus)\ z\ [x_1, \dots, x_n] = (\dots((z \oplus x_1) \oplus x_2) \dots) \oplus x_n$$

Пощупать руками

Ниже — настоящий island на Preact. Выбери операцию и шагай по свёртке, наблюдая, как меняется аккумулятор. Компонент интерактивен только на клиенте (client:visible), а разметка вокруг остаётся статической:

сумма (+)произведение (×)максимум

3141592

foldl (+) 0 [3, 1, 4, 1, 5, 9, 2] → аккумулятор = 0

◀ шаг назадшаг вперёд ▶сброс

Обрати внимание: для сумма начальное значение $z = 0$, для произведение $z = 1$ — нейтральные элементы соответствующих моноидов.

Видео-эмбед

Видео подключается через astro-embed — оно ленивое (грузится по клику, без веса плеера в начальной загрузке):

Play

Итог

Один и тот же движок блога отдаёт и минималистичный текстовый пост, и вот такой интерактивный — за счёт MDX и Astro Islands. Ровно то, ради чего выбран Astro.