Как сделать карточку-превью для фото из Telegram-бота.
Делитесь картинкой из бота в Twitter или чате, а карточки нет. Пошагово: зачем нужна крошечная страница на каждое фото, какие теги она несёт и как направить на неё ссылки для шеринга.
Блог.
Заметки о том, что мы создаём, как думаем о системах и что узнаём по пути.
Как сделать графовый интерфейс в своём приложении на React Flow и Dagre.
React Flow рисует узлы и рёбра, но не раскладывает их и не знает ваших данных. Конкретный пример: построить граф из состояния приложения, разместить его через Dagre и не пересчитывать раскладку на каждое нажатие клавиши.
Как разобрать шаблоны #placeholder#, когда регулярки мало.
Шаблон #([^#]+)# не отличает экранированную решётку от разделителя. Небольшой токенайзер на конечном автомате, который делит литералы и плейсхолдеры и уважает экранирование обратным слешем.
Как посчитать и случайно выбрать вариант из комбинаторного пространства без перебора.
Конфигурации, генерация тест-входов, процедурный контент: за многими функциями стоит пространство вариантов, которое слишком велико, чтобы выписать. Как получить точное число, взять равномерно случайный элемент и выдать несколько разных, и всё это одним …
Как измерить размер текста до отрисовки браузером.
Чтобы положить текст на слайд, надо знать, что он влезет, до того как его нарисуют. Измерение через canvas, корректный перенос Unicode и поправка на расхождение между canvas и DOM.
Как разбить текст на ровные слайды карусели без ИИ.
Где ставить границы слайдов? Фиксированное число символов режет предложения и оставляет неровные слайды. Как мы превратили разбиение в оптимизацию с небольшой моделью стоимости и динамическим программированием.
Почему экспорт из HTML в картинку берёт не тот шрифт, и как это решает HarfBuzz.
Растеризация SVG в PNG через элемент изображения соревнуется с загрузкой шрифта и обычно проигрывает, поэтому экспорт выходит запасным шрифтом. Решение в том, чтобы превратить текст в векторные контуры до растеризации, с шейпингом через HarfBuzz.
Как рисовать линии-коннекторы между словами в тексте с переносами.
SVG-слой может соединять слова в двух строках HTML, но только если знает, куда их поставил браузер. Как измеряются позиции слов и как дуги остаются привязанными при переносах, ресайзе и догрузке шрифтов.