#новость дня

В HTTP появился (точнее, вот-вот появится, только RFC приняли) новый метод QUERY.

Примерно такой:

QUERY /search
Content-Type: application/json

{
  "q": "foo",
  "limit": 10,
  "sort": "-published"
}

И самое интересное тут даже не то, что теперь можно отправлять сложный поисковый запрос в теле HTTP-запроса. Самый интересный вопрос: а разве мы не могли делать это через GET?

Могли. Иногда даже делали.

GET /search
Content-Type: application/json

{
  "q": "foo",
  "limit": 10,
  "sort": "-published"
}

На уровне HTTP-сообщения тело у GET возможно. Протокол не развалится только потому, что после заголовков пришёл body.

Проблема в другом: у тела GET нет нормальной общей семантики.

Стандарт не говорит: «тело GET — это параметры запроса». Сервер и клиент могут между собой так договориться, но для остальной инфраструктуры это будет частная магия. Прокси, CDN, кэши, балансировщики, библиотеки и браузерные API не обязаны понимать такой договор.

Поэтому GET с body — это поведение из серии “может работать в нашей связке”. Где-то пройдёт, где-то тело проигнорируют, где-то запрос завернут, а где-то его вообще нельзя будет отправить. Например, браузерный fetch не разрешает body у GET и HEAD.

QUERY как раз стандартизирует этот сценарий.

QUERY /search
Content-Type: application/json

{
  "q": "foo",
  "limit": 10,
  "sort": "-published"
}

Смысл метода: это запрос на чтение, но параметры запроса лежат в теле. То есть больше не нужно притворяться, что сложный фильтр — это короткая строка query-параметров, и не нужно использовать POST там, где состояние на сервере не меняется.

От POST отличие тоже важное. POST для HTTP-инфраструктуры выглядит как метод с возможными побочными эффектами. QUERY, наоборот, описан как safe и idempotent: его можно повторить, не ожидая, что повтор сам по себе что-то создаст или изменит.

Получается, QUERY — это не «GET с body», а нормальный стандартный способ сказать: тело запроса важно, оно описывает выборку, и сам запрос при этом остаётся запросом на чтение.

#http

#такое дня

Как выбесить коллег одной строкой?

А сейчас я покажу вам...

Автор

#бородач #js

#ссылка дня

Когда-то давным давно поддержки кастомных шрифтов в браузерах толком не было, а желание сделать красиво — было.

Как же обходились? Ну, например, генерировали картинки, используя библиотеки FreeType и (для PHP) GD2/Imagemagick.

К слову, это до сих пор валидный кейс, соответствующие плагины для популярных CMS вполне себе поддерживаются: https://www.drupal.org/project/textimage

Просто зачастую нет никакого смысла тащить целый шрифт на фронт ради пары заголовков. Да и даже его часть — тоже.

Естественно, всегда можно резать набор глифов (символов) на лету... например, утилитами вроде https://opentype.js.org/ или FontForge в командном режиме, но каждый ли проект в этом нуждается?

А, ну и как же, нельзя забывать о вкладе Adobe Flash в поддержку кастомных шрифтов! Была технология sIFR, которая генерировала маленькие Flash-апплеты на месте, где должен был располагаться ваш заголовок.

Или аналогичная — Cufon, но уже на связке JS/SVG или VRML (векторный язык в IE).

Забавное было время, конечно, но иногда лучше и правда сгенерировать картинку, чем тащить весь шрифт целиком.

#font #old #бородач

Вышел anime.js 4.5.0.

Anime.js — это JavaScript-библиотека для анимаций. Её часто используют для DOM, CSS-свойств, SVG, таймлайнов и обычных JS-объектов: когда нужна не одна transition, а нормальное управление движением, задержками, easing’ами и последовательностями.

В 4.5.0 появился API адаптеров. Если коротко, теперь anime.js можно научить работать с объектами, которые устроены не как DOM-элементы.

Главный пример в этом релизе — встроенный адаптер для Three.js.

В Three.js анимация часто требует писать во вложенные свойства объекта:

mesh.position.x = 100
mesh.rotation.y = Math.PI / 4
mesh.material.opacity = 0.5
mesh.material.color.set('#ff8844')

С адаптером это можно описывать прямо в animate():

animate(mesh, {
  x: 100,
  rotateY: 45,
  opacity: 0.5,
  color: '#ff8844',
})

Адаптер сам сопоставляет параметры с position, rotation, material, цветом и другими свойствами Three.js.

Появился и более привычный для фронтендера синтаксис 3D-трансформаций: rotateX, rotateY, rotateZ, scale, transformOrigin, плюс skewX, skewY, skewZ.

Материалы тоже стало анимировать проще. Цвет можно передавать строкой — hex, rgb, hsl или CSS-переменной — без ручного перекладывания в THREE.Color.

Ещё одна хорошая часть — instanced mesh. Объекты, которые в Three.js обычно используются для большого количества одинаковой геометрии, теперь можно анимировать почти как обычные меши. Для сцен с сетками, частицами, волнами и кучей повторяющихся элементов это сильно сокращает ручной код.

В stagger() добавили поддержку 3D: теперь задержки можно раскладывать не только по x и y, но и по z. Плюс появились jitter и seed, чтобы делать разброс в движении, но при этом получать повторяемый результат.

Остальные изменения — в changelog: фиксы timeline, keyframes, seek, reversed loops, render engine, работа с цветами и разные мелкие правки.

Важная деталь: сайт anime.js теперь тоже портирован на новый API с Three.js-адаптером. То есть это не просто пример в документации, а уже основа для собственного сайта проекта.

Получился релиз, после которого anime.js заметно лучше ложится на 3D-сцены. Да здравствуют описания анимаций без постоянного ручного прохода по position, rotation, material и прочим внутренним полям.

#animejs #animation #threejs

#статья дня

Не так давно в чате канала проскочил вопрос, как правильно делать контейнеры, которые могут вылезать за визуальные границы.

Например, основной контент находится посредине и занимает в ширину 80-120 приятных для чтения глазу символов, а вот картинки хотелось бы разнести до краёв.

Техника называется full bleed. Я не знаю, как точно перевести.

Если посмотрите видео, то виден ещё один вариант использования, когда галерея выходит за пределы экрана лишь с одной стороны, но дальше тем не менее границы игнорирует.

Вот так: https://codepen.io/hexagoncircle/pen/gOWjwme

Альтернативный вариант: https://codepen.io/maartenbruggink/full/eYWjxae

Раньше такое делалось жонглированием полями, теперь же у нас есть гриды.

И у небезызвестного Джоша Комо есть статья как раз об этом: https://www.joshwcomeau.com/css/full-bleed/

Тем не менее, я рекомендую посмотреть приложенные кодпены, поскольку в них зоны грида именуются и становится понятнее, что к чему.

Всем full bleed, котаны!

#css #fullbleed #gallery #бородач

#библиотека дня

Есть небольшая библиотека для undo/redo в JavaScript: async-history-stack.

Она интересна не тем, что «умеет откатывать состояние». Это как раз самый простой случай. Интереснее другое: в историю можно складывать действия, у которых есть асинхронные операции и побочные эффекты.

Например, пользователь удаляет картинку из галереи. В реальном приложении это может быть не один setState, а целая цепочка: уйти со страницы картинки, отправить запрос на удаление, убрать ссылку из локального состояния, обновить интерфейс.

А при undo надо сделать обратное: восстановить картинку, вернуть ссылку в состояние и снова открыть страницу этой картинки.

async-history-stack предлагает описывать такие действия через push: функция сразу выполняет изменение и возвращает функцию, которая умеет это изменение откатить.

await historyStack.push(async () => {
  await applyChanges()

  return async () => {
    await revertChanges()
  }
})

То есть в историю кладётся не снимок объекта, а переход туда-обратно. Благодаря этому undo/redo может быть не привязан к конкретному стору и нормально покрывает навигацию, RPC, работу с файлами и другие асинхронные штуки.

В библиотеке есть undo, redo, clear, size, timestamp, лимит истории, отмена через signal и merge, чтобы склеивать несколько изменений в одну запись. Например, когда много мелких действий должны откатываться одним undo.

Я набросал демо: галерея, удаление карточки, имитация асинхронного RPC, лог операций, undo/redo и восстановление маршрута. Ну и да, вместо обычных заглушек там процедурно генерируются SVG-паркеты, потому что почему бы и нет.

Ссылка на библиотеку:
https://github.com/kettanaito/async-history-stack

Демо:
https://codepen.io/editor/alinaki/pen/019f1263-8e38-73da-a864-9854b6093cee

Всем undo, котаны!

#history #undo #library #svg #tile

«Под капотом: мультиклауд» — облачный митап от MWS Cloud Platform

📅 16 июля
📍 Москва, Лесная ул., 20, стр. 3
Крыша «Депо на Лесной»
💰 Бесплатно, но требуется регистрация

Что разберём:
• Мультиклауд: мифы, реальность, прикладные сценарии.
• Архитектуры: бэкапы, сети (VPN / Interconnect), Disaster Recovery, IAM, аудит, IaC
• Terraform-провайдер MWS: генерация из OpenAPI, качество, Open Source

Спикеры — руководитель продуктового направления, архитектор и ведущий разработчик MWS Cloud Platform.

Вход бесплатный, но требуется регистрация и её подтверждение — количество мест ограничено

Регистрация — по ссылке

#ссылка дня

Когда технологии стареют, это почти незаметно — пока не становится поздно. Вроде всё работает, но обновлений безопасности больше нет, старые зависимости перестают собираться, а новые версии библиотек ломают совместимость. Так проект постепенно превращается в мину замедленного действия.

Чтобы не попадать в такие ситуации, существует проект endoflife.date. Он показывает, когда заканчивается поддержка языков, библиотек, фреймворков и систем. Вводишь, например, Node.js или Ubuntu — и сразу видно, какие версии ещё живы, а какие пора обновлять. У них даже есть открытое API, так что можно встроить проверку прямо в CI и получать напоминания автоматически.

Но обновляться стоит с умом. Иногда новая версия приносит несовместимые изменения и кучу головной боли. Поэтому существуют LTS-версии — стабильные ветки, которые поддерживаются дольше обычных и меняются не так резко. На них удобно сидеть, если важна предсказуемость и стабильность.

Простая идея, но в долгосрочной перспективе экономит много времени и нервов.

#lts #support #бородач

#инструмент дня

Я уже один раз потерял ссылку на этот сервис, потому на правах закладки.

Встречайте, Cobalt: https://cobalt.tools/

Это сервис с открытым исходным кодом (GitHub), предназначенный для скачивания видео с большой кучи разнообразных сервисов: вк, ютуб, рутуб, тикток, твиттер, инстаграм и так далее и тому подобное. Полный список тут.

Никакой рекламы и занудства. Разве только UI на мобиле подглючивает — у меня не всегда правильно определяется безопасная зона "чёлки".

В общем, рекомендация.

#video #download #бородач

Соскучились по рождественским календарям для программистов?

У CodeRun тут получился Advent of Code посреди лета, только с более олимпиадной составляющей: 15 задач, которые выкатываются пачками по 5 штук каждые 5 дней до 17 июля, общий зачёт и отдельные лидерборды по 11 языкам.

Главная механика — не просто «решил / не решил». Быстрый и экономный код даёт больше баллов, так что после первого accepted всё только начинается: можно переписывать решение, смотреть на время, память, крайние случаи и пытаться выжать из него ещё немного.

Я знаю людей, которые реально встают на час раньше, чтобы перед работой прорешать очередной LeetCode. Я не уверен, что сам готов к такой дисциплине, но понимаю, зачем они это делают: алгоритмы быстро ржавеют, если их не трогать. А здесь примерно тот же формат тренировки, только не в одиночном режиме и с таблицей, где сразу видно, насколько твоё «и так нормально» на самом деле нормально.

Призы тоже есть: топ-1 по каждому из 11 языков получает мерч-пак CodeRun, топ-3 общего зачёта — коллекционный лего-набор, а топ-200 общего зачёта — скип контеста и пробное интервью в Яндекс.

Последний пункт, кстати, довольно практичный. Даже если не относиться к этому как к спорту, такой челлендж можно использовать как понятный способ размяться перед алгоритмическими интервью: задачи, ограничения, дедлайн, сравнение решений и болезненное напоминание, что O(n²) иногда всё ещё O(n²).