Будни разработчика

#такое дня

Тринадцать лет назад я работал в горнодобывающей/камнеобрабатывающей компании и пилил всякие инхаус-проекты: от учёта блоков, добытых на карьере, до их продажи, каталогизации, распиловки. Вплоть до визуального конструктора надгробий (на котором тщетно пытался сделать бизнес, но сегодня не о нём).

И вот сегодня в девять утра позвонил бывший коллега. С проблемой 🫠

Итак: не грузятся продажи больше, чем за пару дней. Сервер выбивает в пятисотую.

Начал диагностику и понял, что падает по памяти. Причём, не потому что много продаж, а потому что может быть много блоков в продаже.

Ну а памяти-то там кот наплакал. Как крутилось на шаред-хостинге со 128 мегабайтами памяти на PHP 5.3, так и крутится.

Как оказалось, я образца 2012 года, для подсчёта продаж просто грузил в памяти вообще все блоки, а потом их уже фильтровал и считал объёмы.

Казалось бы, какая фигня, скажете вы, ну сколько там тех блоков?

Ну так-то за 13 лет добыли почти 24000 блоков и совершили несколько тысяч продаж. А каждый блок — специфика работы — должен был сохранять историю изменений, распилов, расколов и так далее... Ревизии, короче. Это довольно ощутимый объём данных.

Сначала я предложил просто убрать статистику. Но оказалось, это едва ли не самая нужная фишка — даёт моментальную видимость по контрагенту.

Естественно, код был переписан самым простым способом — пакетной обработкой. Грузим по 5000 блоков, считаем объём. И всё прекрасно заработало.

Это, к слову, о преждевременной оптимизации. Довольно плохой масштабирующийся код прекрасно работал в не самой маленькой компании 13 лет :)

Такой вот blast from the past, ничего не скажешь. Кто бы вообще мог подумать, что это всё будет работать столько лет без проблем.

#php #memory

#пятница дня

Срочно идём и вводим в консоль traceroute -m 50 bad.horse.

И поём все вместе :)

P. S. а цепочка сертификатов https://signed.bad.horse содержит тот же текст.

#такое

#ссылка дня

Пятничных котов вам в ленту! Но просто котов вы можете найти где угодно, тут же — HTTP-коты: https://http.cat/

Знать коды протокола HTTP должен каждый веб-разработчик, чтобы не попадать в глупые ситуации и правильно пользоваться API. А раз их можно выучить, глядя на котов, почему бы и нет.

#http #handbook #бородач

#фишка дня

Когда вызываешь async-функцию, но не обрабатываешь её результат, промис остаётся "висящим" (floating). Это может привести к разным проблемам:

Потеря ошибок.
Если промис завершается с ошибкой, но её никто не ловит, можно упустить важные сбои в коде.

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

Неоптимальное использование ресурсов.
Если промис делает сетевой запрос или что-то грузит, но результат нигде не используется, это просто тратит ресурсы впустую.

Ещё, конечно, IDE ругается и бесит.

Чтобы явно указать, что промис можно игнорировать, используй один из этих способов:

void fetchData(); // Показываем, что знаем о промисе, но он нам не нужен  
fetchData().catch(() => {}); // Глушим ошибки (осторожно, можно скрыть баги!)  
fetchData().then(() => {});  // Запускаем, но не обрабатываем результат  
(async () => { await fetchData(); })(); // IIFE, помните ещё такое?

Правило no-floating-promises (https://typescript-eslint.io/rules/no-floating-promises/) в ESLint помогает находить такие промисы и не оставлять их без внимания.

#eslint #async

#новость дня

Google переводит рендеринг шрифтов в Chrome на Rust

В Chrome 133 для Linux, ChromeOS и Android по-умолчанию включён новый движок рендеринга шрифтов Skrifa, написанный на Rust. Он заменяет старый C++-код и является частью проекта Fontations.

Почему это важно?

Рендеринг шрифтов — одна из самых уязвимых частей браузера. Ошибки в обработке OpenType-файлов могут приводить не только к некорректному отображению текста, но и к серьёзным уязвимостям. 70% всех багов безопасности в Chrome связаны с управлением памятью, а Rust помогает устранить эту проблему на уровне языка.

Похоже, Google наконец-то заметил, что Firefox уже лет пять как использует Rust, и решил, что пора бы догонять.

📌 Подробнее:
🔗 Статья на русском
🔗 Блог Google

#rust #chrome #opentype

#баг дня

Посмотрите на иллюстрацию к посту, ничего интересного не замечаете?

А тут происходит ого-го какая драма!

Да, использование новомодных HDR-цветов и описывание их в OKLCH в Chrome на macOS приводит к неожиданным эффектам, будучи применённым на корневую ноду, aka тег HTML.

Правильный цвет тот, что темнее. Откуда я знаю? В Safari бага нет. В FIrefox, кстати, тоже.

А багу в Chrome на macOS тупо два года уже: https://issues.chromium.org/issues/40064153

Ну, бывает.

#oklch #color #bug

#новость дня

Ну что же, скажем Styled Components пока-пока!

https://opencollective.com/styled-components/updates/thank-you

Спасибо им, что показали нам, как можно работать с компонентами. Правда и цена оказалась высока.

Пока коллективный CSS-in-JS динозавр решал проблему экстракции CSS из бандла, растеряв мощь Babel под натиском Rust-решений, подтянулись млекопитающие вроде Tailwind и заняли нишу гораздо быстрее, мощнее и эффективнее.

С бесплатной экстракцией в том числе, да. И не ограниченные фреймворками.

Маятник мощно качнулся. Я не любитель Tailwind и, возможно, предпочту CSS Modules, но надо признать, что работу они проделали прекрасную.

Помянем, в общем.

А вторая новость — кратко: вышел Parcel 2.14.0 c поддержкой React Server Components!

Они подчёркивают, что Parcel сам по себе не фреймворк, но обеспечивает необходимый минимум и позволяет строить фреймворки уже на его базе.

Дивный новый мир!

#cssinjs #styled #parcel #tailwind

В России можно посещать бесплатные IT-мероприятия хоть каждый день: как оффлайн, так и онлайн.

Чтобы не пропустить полезные — сохраните канал @FreeItEvent.

Анонсы вебинаров, хакатонов, конференций, мастер-классов и других событий в IT. Ивенты от гигантов индустрии и лучших специалистов по frontend и backend разработке

Всё публикуют здесь.

#такое дня

Есть две вещи, которые я очень не люблю в веб-приложениях.

Первая — однокнопочные шорткаты. Например, в Jiira — нажатие на W добавляет тебя в список следящих за таской людей. Зачем? Почему? Непонятно.

Возможно, кому-то и удобно, но моя природная неусидчивость заставляет меня иногда нажимать кнопки на клавиатуре просто так. Ну нравится.

Хабр тоже этим страдает. А в Твиттере — вообще аккордные сочетания клавиш (типа G-T), как будто я в каком-то сраном Emacs.

Не, есть, конечно, приложения, где это возведено в абсолют — вроде Vim. Но это прям идеология. От веб-страниц я такого не жду.

А вторая категория приложений — те, кто перехватывает стандартные шорткаты. Например, ConfigCat — менеджер фича-флагов — делает неудобоваримое с шорткатом поиска.

Зачем? Почему? У меня всего 3-5 флагов на экране, имейте совесть. А может, я ищу UI-элемент какой-то. Ведь всё, что есть на экране — это текст.

А самое смешное, что они записывают факт предупреждения в LocalStorage, и больше такое не показывают. Я прям не могу представить себе этот диалог между продактом и лидом разработки. Надеюсь, была немая сцена.

А что раздражает вас в UX известных приложений и сайтов?

#ux

#статья дня

Я уже не раз выражал свою любовь к шейдерам и 3D в целом. Это какой-то свой особый мир, который требует отдельного погружения. Когда удаётся прикоснуться самостоятельно — хоть немного — уже ору от восторга.

Хочется выделить хотя бы недели две только на изучение нужной математики.

Ладно, хватит нытья. Сегодня у нас прошлогодняя работа Shopify: глобус чёрной пятницы.

Да, глобусы разных вариаций с какими-нибудь рюшками постоянно появляются в ежегодных отчётах разных компаний, то у GitHub, то у Google. Но Shopify добавили nice touch в виде шейдеров фейрверков.

И выкатили об этом статью! Вот: https://shopify.engineering/how-we-built-shopifys-bfcm-2023-globe

Пройдите сразу, насладитесь этой красотой. А уже потом провалитесь в статью и удивитесь, что все эти фейрверки — это просто вершины икосаэдров.

Кстати, статья интерактивная и начинена примерами кода с ног до головы. Включая работу с моделью глобуса, текстурами и камерой.

Это настоящий подарок.

#webgl #glsl #shaders #бородач

#codepen дня

Сайт по продаже пончиков должен быть пончиком и точка!

Пруф: https://codepen.io/narrowdesign/pen/ZYErvWv?editors=1000

Извините, я просто никак больше не могу это прокомментировать.

#threejs #3d

#баг дня

Как вы думаете, что обозначает тип {}?

Ну, буквально:

type b = {};

Быть может, пустой объект? Да. А может, объект с любыми свойствами? Тоже да. А может, число или строка? И опять, да. А пустые? Да! А может, булево значение? Невероятно, но тоже да!

А может, null или undefined ? Нет. Вот тут — нет. Песочница.

Поэтому смысла в использовании типов {} или Object (второе лишь псевдоним к первому) довольно мало.

Если вам нужен пустой объект — так и пишите, Record<PropertyKey, never>.

Подробнее у Мэтта Покока: https://www.totaltypescript.com/the-empty-object-type-in-typescript.

В чём же баг, спросите вы?

А баг у нас на этот раз в реализации проверки типов в WebStorm/PhpStorm. У JetBrains, короче.

Мы выводим типы из схем Zod, но для целей создания шаблона, мне потребовалось исключить некоторые свойства из проверки:

TemplateQueryDetails = Omit<
    z.infer<typeof QueryDetails>, 'metadata'
>;

И мощно получил в лицо: тип ресолвился за 3 минуты на MacBook Pro M2, вешая интерфейс PhpStorm напрочь. Каждый раз.

Решение пришло откуда не ждали:

TemplateQueryDetails = Omit<
    z.infer<typeof QueryDetails>, 'metadata'
> & {};

Обратите внимание на пустой тип. Обнаружил я это случайно: в первом варианте я ещё и добавлял айди шаблона, но впоследствии — отказался.

По всей видимости, система типов IntelliJ построена таким способом, что рассчитвывает конъюнкцию типов как новый тип и кеширует на месте. Но это лишь предположение.

В VS Code, кстати, проблемы не наблюдается.

После обращения в поддержку, мне было рекомендовано включить настройку Use types from server, что буквально выключает встроенные средства и использует типы от LSP. Что, собственно, мне только в плюс.

А как ваши дни проходят? 🙂

#jetbrains #typescript #lsp

#проект дня

Мы прошлым летом проводили отпуск в Валенсии. Целью был более пляжный и гастрономический отпуск, нежели любование музеями и природой, потому поселились в районе, который когда-то представлял из себя рыбацкую деревню — Эль Каваньял (El Cabanyal).

Этот бывший рыбацкий квартал славится домами, украшенными азулежу — расписными глазурованными плитками. Они служили не только украшением, но и защитой стен от влаги и солнца.

Часто встречаются узоры в сине-белых тонах, растительные мотивы, геометрические орнаменты и изображения святых. Многие дома облицованы плиткой полностью или частично, создавая неповторимый колорит района. Сейчас плитки ценятся как культурное наследие, но часть зданий с ними утрачена из-за застройки.

Меня настолько эти плитки и эта традиция восхитили, что я посвятил несколько прогулок по жаре +40 только их фотографированию.

К сожалению, сфотографировать и сами дома тоже мозгов не хватило.

И так фотографии и лежали с конца июля, но я подумал, что пришло время их оформить в очередной проект!

Итак:
1. Собираем фотографии в каталоге
2. Вычленяем из них геоданные
3. Находим в интернете векторный файл пина на карте, для маски, и готовим картинки маркеров и миниатюры.
4. Выводим всё на карте используя библиотеку React Leaflet.

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

const sortedTiles = [...tiles].sort((a, b) => a.lat - b.lat || a.lng - b.lng);
      const majorityStart = Math.floor(tiles.length * 0.3);
      const majorityEnd = Math.ceil(tiles.length * 0.7);
      const majorityTiles = sortedTiles.slice(majorityStart, majorityEnd);

Код в репозитории:
💻 https://github.com/bekharsky/el-cabanyal-tiles

Ну и сама карта, конечно же!
📌 https://bekharsky.github.io/el-cabanyal-tiles/

Кликаем на маркер, а потом перемещаемся по ним клавиатурой.

Мне дико обидно, что я заодно не сфотографировал дома (впрочем, я потом пройдусь по архиву, что-то было же точно), но мне всё равно очень нравится то, что получилось. Какой-никакой музей :)

#spain #valencia #tile #react #leaflet

#codepen дня

Как сделать элементы интерфейса... зернистыми? Напоминающими шершавую структуру, например, пластика? Или плёнки...

Для достижения эффекта можно воспользоваться SVG-фильтром! Например, от Аны Тюдор: https://codepen.io/thebabydino/pen/MWBNrZq

К сожалению, на Safari съехали буквы, но сути дела не меняет :)

#svg #grainy #бородач

#новость дня

Вчерашнего дня, конечно, и многие из вас уже в курсе, но...

TypeScript переписывают на Go!

Да, если вы не знали — транслятор TypeScript всё это время был написан на самом себе, что, как вы понимаете, не делало его быстрым :)

И вот, новость: https://devblogs.microsoft.com/typescript/typescript-native-port/

Результат ошеломляет: разбор типов и сборка уже в 10 раз быстрее! Это означает, что и LSP в ваших IDE будут быстрее. И работать станет приятнее.

Очень рекомендую пойти почитать статью.

Кстати, кто же этот седой дядя на видео? А это Андерс Хейлсберг! Создатель Turbo Pascal, Delphi, C# и, внезапно, TypeScript.

И на этом видео он, в том числе, объясняет, почему не Rust. Этим вопросом задолбали уже всю команду.

И, если коротко:
1. Это портирование, а не переписывание. Они хотели оставить структуру проекта и работы над ним той же, что и была.
2. Rust, хоть и облегчает управление памятью, полностью не освобождает от связанного с этим управлением бойлерплейта. И, поскольку, структура транслятора TypeScript представляет из собой огромный набор вложенных друг в друга структур, количество бойлерплейта вышло бы неразумным.

В общем, нас ждёт дивный новый мир! И я очень рад. И выбором языка тоже.

#typescript #go

#codepen дня

Давно не было рубрики, потому что это ну как-то ну слишком лениво.

Но вы только посмотрите на эту кнопку от Петра Кнолла: https://codepen.io/Petr-Knoll/pen/QwWLZdx


Если это не приближает нас к пику глассморфизма — то я не знаю, что приближает :)

#css #glassmorphism

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

Сложно представить себе проект, в котором не использовался бы ESLint.

Ну разве что вы или до сих пор на TSLint или ушли на Biome.

Так вот, в прошлом году, совместно с релизом версии 9, они обозначили свои планы. А планы большие: стать основным инструментом для поддержки качества кода на фронтенде. Это значит, линтинг JS, TS, JSON, Markdown. Ну и CSS тоже.

И вот, наконец, 18 февраля команда объявила о начальной поддержке линтинга CSS: https://eslint.org/blog/2025/02/eslint-css-support/

Соответственно, выпустив плагин @eslint/css:

no-duplicate-imports - запрещает дубликаты @import rules
no-empty-blocks - запрет пустых блоков
no-invalid-at-rules - валидация @-правил
no-invalid-properties - запрет некорректных свойств
require-baseline - самое интересное, заставляет придерживаться Baseline (современных фич веба и CSS в том числе, которые поддерживаются всеми браузерами в должной мере)
use-layers - а вот это спорно, использование слоёв aka @layer. Я пока не видел никого, кто их понимает :)

Ну что, убираем Stylelint?

#css #lint #eslint

#новость дня

Утекли промпты и модели v0.dev от Vercel: https://github.com/x1xhlol/v0-system-prompts-and-models/

Я их почитал и — как и со всеми кастомными промптами для тех же Cursor, Aider и Claude — сделал для себя всё тот же вывод.

Если вы сами прочитаете промпты и будете следовать им и в своей работе — это сделает вас лучшим (чем вы сейчас) разработчиком. Как подготовка к собеседованию.

Серьезно, они буквально представляют из себя весьма хорошее техническое задание.

К тем, кто составляет эти промпты — вопросов нет :)

В любом случае, очень круто, что инструменты, сокращающие рутину, стали нашей нормальной действительностью.

#ai #vercel #prompt

#фишка дня

Не совсем про разработку, но достаточно интересно.

Итак, понадобилось мне вчера отправить фотографии костюмов из одного сериала знакомой портной. Зашёл я на стриминг HBO Max, нашёл нужные кадры, снял скриншот...

А он чёрный. Элементы UI и... чёрный экран.

— DRM, — подумал Штирлиц.

И таки да, DRM. Защита авторских прав содержимого.

Виральность? Не, не слышали.

Технология, по которой работает DRM на стримингах, называется EME: Encrypted Media Extensions. Разработана совместно Netflix, Google и Microsoft.

Есть хорошее описание её работы: https://hsivonen.fi/eme/

Encrypted Media Extensions (EME) — это JavaScript API для <video> и <audio>, предназначенное для работы с DRM-защищенным контентом. Для расшифровки требуется Content Decryption Module (CDM), который доверен правообладателями и скрывает определенные данные от пользователя. Браузер при этом считается ненадежным.

CDM может быть встроен в браузер, загружен отдельно или реализован на уровне ОС и железа. Он управляет ключами для расшифровки контента. В EME есть учебная система Clear Key, но она не предназначена для коммерческого использования.

CDM может работать по-разному: просто расшифровывать данные, расшифровывать и декодировать видео в браузере, передавать декодированные кадры напрямую ОС или работать с GPU, скрывая пиксели даже от системы. EME определяет только интерфейс API, оставляя детали DRM разработчикам.

Так вот, к фишке дня. В Firefox EME не реализованы, скриншоты делаются без проблем. А в Chrome — работают на GPU, иначе ваши процессоры сошли бы с ума.

А это значит, что достаточно (по крайней мере пока) отключить аппаратное ускорение графики. И, вуаля, скриншоты снова можно делать!

Очевидно, с развитием железа и это скоро станет невозможно. Останется только аналоговая брешь (крутое название для экранки, не правда ли?).

#drm #eme #api

#статья дня

В чатике всплыл очередной вопрос про эффект ambilight.

Если кто не помнит, фоновая интерактивная подсветка ambilight — от Ambient Light — пришла к нам от телевизоров Филипс, а нынче есть даже на YouTube.

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

А для видео же — есть прекрасная статья на Smashing Magazine: https://www.smashingmagazine.com/2023/07/recreating-youtube-ambient-mode-glow-effect/

Описывается создание нужного эффекта на основе canvas, со всеми пояснениями и кодом. Даже хук для React по пути сделали.

Вообще, до меня не сразу дошло, почему именно холст. Почему бы просто не запустить два видео и одно размыть?

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

#ambilight #video #canvas