#статья дня

Сегодня у нас, прости господи, статья с Хабра. Там нынче много странного контента и плохих переводов, но эта — хорошая.

Автор — Карен Ананян, продуктовый дизайнер — предлагает новый (?) метод адаптивного дизайна, объединяющий принципы отзывчивого дизайна, адаптивного дизайна и масштабирования.

Я поставил вопрос после «новый», потому что, по факту, автор перепридумал clamp(). Но не то чтобы совсем.

Существующие подходы:

Responsive design (отзывчивый дизайн): Элементы интерфейса адаптируются к размерам экрана, сохраняя общую композицию и функциональность. Однако при значительном увеличении размеров экрана элементы могут чрезмерно растягиваться, ухудшая удобочитаемость и внешний вид.

Adaptive design (адаптивный дизайн): Структура блоков и элементов перестраивается в зависимости от устройства. Это требует разработки и поддержки нескольких макетов для разных типов устройств, что может быть трудоемким процессом.

Проблемы существующих подходов:

В Responsive design элементы могут чрезмерно растягиваться на больших экранах, что снижает удобство использования.

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

Предлагаемое решение: Stretch, Scale, Switch (SSS):

Автор предлагает трехэтапный подход к адаптивному веб-дизайну:

Stretch (Растяжение): Использование принципов отзывчивого дизайна для гибкого изменения размеров элементов по ширине или высоте, что обеспечивает адаптацию интерфейса к различным размерам экранов.

Scale (Масштабирование): При значительном изменении размеров экрана применяется пропорциональное масштабирование всего макета, включая шрифты, отступы и размеры блоков, с использованием выбранного множителя (scale-фактора).

Switch (Переключение): Если масштабирование достигает предела своей эффективности, происходит переключение на другой макет, оптимизированный для текущего разрешения экрана.

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

А вот собственно, ссылка: https://habr.com/ru/companies/simpleone/articles/881168/

#css #adaptive #responsive

#молния дня

Вы знали, что git reset --hard после git add . грохает все новые файлы в репе?

89 штук 🥲

Подробности завтра...

#такое дня

Итак, что же произошло?

Жена изучает Wordpress и React. Вот вы знали, почему Gutenberg — конструктор блоков в Wordpress — так боготворят? Вот я раньше не знал, пока, собственно, жена в колледже не начала его изучать.

Если коротко, каждый блок в Gutenberg можно описать в React. А потом рендерить WYSIWYG в конструкторе и PHP-версию для сайта. Исконный SSR как он есть :) На самом деле, я был почти в восторге.

И для этого процесса имеется кодогенератор.

Он сгенерирует JSON-схему блока, стили и начальные скрипты для редактора и клиентской части сайта, package.json с нужными скриптами, PHP-обвязку, readme... В общем, с десяток файлов.

Но вы не за этим тут собрались, верно?

Итак, нагенерировали 9 блоков, три из них практически полностью закончили, остальные — оставили в виде кодгена. И попросила жена меня помочь уложить всё в git. Последить, что все сделано правильно.

Как показали события, нашла, конечно, кого просить.

Ну, первый раз чтоле:
git init
touch .gitignore
git add .
git status
...так, index.php же не нужен...
git reset --hard
echo "index.php" >> .gitignore
...блять

89 файлов исчезли, осталось лишь то, что было открыто в файлах.

Зачем я сказал сделать хард-ресет — я сам не очень понимаю, если честно. Даже не спрашивайте. Я привык работать инкрементально: и добавлять файлы с самого начала, и ветки на каждый чих и так далее. Потому ресет для меня был инструментом простой подчистки мусора.

Теперь-то понятно, что от этой привычки надо избавляться.

К счастью, в git ничего не пропадает бесследно. Есть возможность вытащить «подвисшие» файлы из индекса, пока не произошёл коммит. Как-то так:

git fsck --lost-found

Эта команда вытащит подвисшие файлы в директорию .git/lost-found/.

Вот только вытащит она их по хэшу. Названия будут утеряны. Ну и ещё — одинаковые файлы будут, очевидно, схлопнуты в один (ещё раз внимание на слово хэш).

К счастью, мы же помним, что у нас кодогенератор? Содержимое каждого из этих файлов явно говорит, к чему оно относится. Так что, вооружившись списком файлов, который мне ранее дала команда git status, я создал 89 пустых файлов с верными именами и пошёл копировать один за одним. Полчаса из жизни.

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

Да, во многи редакторах присутствует концепция локальной истории, но тот же VS Code реагирует только на открытые файлы.

В общем, было весело. И немного стыдно, да.

P. S. удалять index.php из списка добавленных файлов надо было так:

git reset index.php

Или просто

git reset

...чтобы очистить список файлов к добавлению.

#git #wordpress #fail

Привет, котаны! 🐱

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

У меня есть несколько любимых каналов, но интересно, что читаете вы? Давайте вместе соберем список Telegram-каналов, которые реально заходят.

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

Это могут быть каналы про разработку, ИТ, технологии или даже научпоп, общетематические или авторские — главное, чтобы читать их было интересно, а не «ну ладно, пусть висит в подписках».

Делитесь в комментариях! Если видите канал, который тоже читаете — ставьте реакцию. Посмотрим, какие из них набирают больше всего респекта в нашей ленте.🚀

Какими мини-апами в tg вы пользуетесь?

Вот какой удобный Mini App появился недавно: Calendar for Telegram

Это:
💫 Быстрый доступ к расписанию, которое теперь всегда под рукой;
💫 Лёгкий шэринг событий – без e-mail! Просто отправьте приглашение другу/коллеге в чат или в группу;
💫 Афиши – общее расписания для работы, мероприятий, совместных путешествий или спорта;
💫 Слоты – отражают доступность вашего свободного времени для назначения встреч (это как Calendly, только в вашем tCalendar);
💫 Моментальный видео-звонок – возможность создавать Google Meet сразу в tCalendar;
💫 Синхронизация с Google Календарем – все события всегда актуальны в обоих календарях.

Самое приятное, что всё это бесплатно и незаменимо в обычной жизни👌

Юзкейс такой: поняли, что нужна встреча -> создали её тут же в тг -> пригласили участников. В Гугл календарь само придет. 🪄✨

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

F*ck Leetcode.

Как-то так приветствует нас проект https://www.interviewcoder.co/

Что же он делает?

А разработчики проекта догадались сделать невидимый для шаринга экрана ИИ-оверлей, который находит на экране и решает алгоритмические задачи.

Невидим он для:

- Zoom < v6.1.6
- Всех браузеров
- Discord
- Встроенного в maxOS скриншотера (не видео)

Видим для:
- Zoom > v6.1.6
- Записи видео в том же macOS

Может не только решать код, но и дебажить его, давать построчные подсказки и исправлять ошибки.

Ну что, литкод-собесам конец? :)

Да, проект — открытый: https://github.com/ibttf/interview-coder

И в доказательство — запись реального собеседования: https://youtu.be/rcH813f5vCE

#leetcode #interview #ai #cheat

#фишка дня

Я всегда считал карту кода достаточно бестолковой фишкой. С другой стороны, TODO-комментарии и ошибки достаточно легко распознаваемы и перемещаться по ним удобно.

А сегодня я узнал, что блоки кода можно ещё и помечать комментарием // MARK: Something, и этот самый Something будет виден на карте.

В идеале, конечно, не стоит развозить свой код на несколько экранов, но прежде чем разбивать — надо ж распознать, верно? :)

#vscode #minimap #бородач

#молния дня

Вы же посмотрели видеодемонстрацию ИИ-помощника, который поверх экрана выводит ответ на тестовое лайвкодинг-задание?

Вот: https://youtu.be/rcH813f5vCE

Так вот, повторю: это было реальное собеседование в Амазон. И интервьюверу потом это видео прислали.

И в Амазон обиделись! И требуют отчисления автора проекта из университета!

Пруф: https://x.com/im_roy_lee/status/1895276427005845981

В комментарии приложу картинку оттуда, на случай, если что-то с твитом пойдёт не так :)

#статья дня

В чатике всплыл очередной вопрос про эффект 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

#фишка дня

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

Итак, понадобилось мне вчера отправить фотографии костюмов из одного сериала знакомой портной. Зашёл я на стриминг 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

#новость дня

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

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

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

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

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

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

#ai #vercel #prompt

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

Сложно представить себе проект, в котором не использовался бы 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

#codepen дня

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

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


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

#css #glassmorphism

#новость дня

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

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 дня

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

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

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

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

#проект дня

Мы прошлым летом проводили отпуск в Валенсии. Целью был более пляжный и гастрономический отпуск, нежели любование музеями и природой, потому поселились в районе, который когда-то представлял из себя рыбацкую деревню — Эль Каваньял (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

#баг дня

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

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

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

#codepen дня

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

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

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

#threejs #3d

#статья дня

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

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

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

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

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

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

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

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

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

#такое дня

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

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

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

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

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

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

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

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

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

#ux