#заметка дня

А где это я сегодня? А я сегодня на конференции Future Frontend 2025!

Было бы странно, если бы я был на 2024…

https://futurefrontend.com/schedule/

Возможно, буду вести некое подобие трансляции по ходу дня. А пока — завтрак, знакомство с будущими коллегами и ожидание старта.

Бейджик отражает уже устаревшую информацию.

Из мерча — банное полотенце! Потому что афтепати будет в сауне. Кстати, в 2021 году тоже давали. Но похуже :)

Как всегда, доверь разработчику настройку стриминга — и ничего не выйдет, все ждут 🫠

#futurefrontend

#стрим дня

Я же совсем забыл докинуть ссылки на стрим! Он, к слову, бесплатный.

Стрим на сегодня: https://www.youtube.com/live/rWqIEWStdkA

На офсайте есть и ссылка на завтра, но мне же завтра тоже надо что-то запостить, верно?

Только что вот закончился доклад Георгиоса Диамантополуса (греческие фамилии очень крутые, согласитесь?) из секции Work-Life Balance о том, как наше тело реагирует на сидячую работу. Очень подробный и убедительный.

Присоединяйтесь!

#futurefrontend

#заметка дня

Пожалуй, лучший доклад дня: распознавание жестов комбинацией Gemini и Tensorflow.js

Секция с демо была просто потрясающей. Не просто «я написала промпт и вызвала апи», а еще и с какими проблемами пришлось столкнуться по пути. И почему просто нельзя было обойтись одним только Tensorflow.js

Переходите на стрим и смотрите. Это стоит того!

Впрочем, следующий доклад о генерации многослойного эмбиента тоже весьма крутой. Как минимум, как демонстрация возможностей Cursor :)

#futurefrontend

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

Вчера на Future Frontend (а вот, кстати, стрим на сегодня) деврелы Google представляли новые и неизвестные возможности Chrome DevTools.

Конечно же, почти вся презентация была посвящена AI, но они мельком напомнили о Workspaces (рабочих пространствах, средах).

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

Но настраивать Workspace — задача довольно раздражающая. Вот бы они создавались автоматически при дев-сборке...

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

Короче, суть в чём. Создаём файл .well-known/appspecific/com.chrome.devtools.json:

{
"workspace": {
"root": "/home/user/awesome-project",
"uuid": "53b029bb-c989-4dca-969b-835fecec3717"
}
}

Ну, в общем, всё! Девтулзы распознают конфигурацию и позволят редактировать проект прямо в браузере. Что, повторю, сильно удобнее, чем кажется.

Особенно если ты умеешь пользоваться отладчиком.

Кстати, в будущем релизе Bun это будет включено по умолчанию для dev-среды.

А если хочется попробовать прямо сейчас, есть официальный плагин для Vite и пример его использования.

В Chrome 137 все нужные флаги уже включены по-умолчанию, кстати.

#devtools #workspace

#игра дня

Давненько не было чего-то необычного.

Впрочем, если вы не фанат Dwarf Fortress, конечно.

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

Каждый уровень — это кусок JS-кода, который можно и нужно менять: отключить ловушку, переписать поведение врагов, добавить себе проход в стене — пожалуйста. Главное — чтобы заработало.

Игру сложно назвать обучающей, но если вы когда-то писали на JavaScript и у вас осталась эта мышечная память for (var i = 0; i < ...), будет ощущение, что вы просто продолжаете работу, только теперь в компании ASCII-графики и странного профессора.

🎮 https://untrustedgame.com/ 📂 https://github.com/AlexNisnevich/untrusted

#game #js

Недавно на Кинопоиске вышел цикл интервью «Истории Яндекса». Это архив воспоминаний бывших и текущих сотрудников, которые развивают компанию. Я глянул пару эпизодов и больше всего мне зашло интервью Сергея Крупина, руководителя направления общей инфраструктуры дата-центров.

Сергей проработал в Яндексе 14 лет и застал сразу несколько исторических эпох компании. Столь длительный путь в одном месте, по его словам, связан не только с интересными задачами и проектами, но и с внутренним кругом общения, который разделяет его ценности.

Тот случай, когда работа становится чем-то большим. Ты идешь туда не потому что «надо», а за атмосферой и людьми, с которыми тебе комфортно. И такой подход я разделяю: никакие бонусы, ДМС и прочие плюшки не смогут дать ощущение, что ты на своём месте.

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

#ссылка дня

Кто хотел красивых анимированных иконок без обязательств?

🙋 Я точно хотел!

Итак, вашему вниманию иконки от Дмитро Товстокорого: https://icons.pqoqubbw.dev/

Анимированные при помощи библиотеки motion SVG с MIT-лицензией, что может быть прекраснее?

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

Ну и никто не мешает вдохновиться и реализовать своё, с использованием своих инструментов, ведь правда?

К слову, библиотека Motion выросла из инструмента Framer, а их уж новичками никак не назовёшь. Так что вполне себе проверена в бою.

Берём, котаны?

#icons #svg #animation #бородач

#заметка дня

А вы заметили, что всё больше и больше веб-сайтов и приложений предлагают ввести сначала почту, а уже потом, на отдельной странице — пароль?

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

Задумывались ли вы вообще, зачем это надо?

Есть, очевидно, простой ответ: для защиты от тупого перебора паролей. Но так ли уж сложнее добавить обработку ещё одной страницы? Если уж я прошёл тест на робота, я и на второй странице его пройду. А вот посетители будут ныть!

И тут возникает логичный вопрос: «А будут ли они ныть»? И вот на него ответ не настолько очевиден.

Какова цель любого проекта? Набрать пользовательскую базу. Ну и удержать её. В итоге нам нужно, как минимум, увести посетителя на регистрацию. И тут начинается веселье...

Огромное число пользователей не видят разницы между Sign In и Sign Up. Ещё больше — боятся слова регистрация, Register here и так далее. А кто-то — просто забывает, что у них уже есть аккаунт!

Ситуация:
1. Перейти к созданию аккаунта
2. Введите адрес электронной почты
3. Ошибка: у вас уже есть аккаунт.
4. Перейти на страницу входа.
5. Снова введите адрес электронной почты.
6. Возможно, вы забыли пароль?
...и так далее.

Кстати, это Цукерберг описывал несколько лет назад. Забавно, что нынче у них снова и почта и пароль вместе. Рост прекратился?

А если вы строите веб-приложение для корпоративных клиентов — возможно, у вас SAML/SSO через одного из провайдеров. И в простейшем случае это Google, Facebook, VK, Microsoft, Apple — далее везде. Ну и вы начинаете ставить кнопки. Итого, поле и 4-5 кнопок. И в какой-то момент пользователь забудет, через что он вообще входил. Что-то опять ну такое...

А если показать и почту, и пароль — то SSO-пользователи просто введут свой пароль от корпоративного аккаунта. Знаем, проходили.

Вот и получается, что многие растущие (помним про Facebook?) сервисы предпочитают предложить посетителю ввести свою почту, а уже потом — разные ветки процесса входа. Либо SSO, либо пароль, либо — код на почту, либо Passkey.

Нормальным менеджерам паролей, кстати, всё равно. Тот же 1Password отлично справляется.

А какой у вас опыт, котаны?

#sso #saml #signin #ux #бородач

#codepen дня

Просыпайся, страна! Minecraft подвезли...

...на CSS!

Подвезли-то давно, но завирусилось только сейчас: https://benjaminaster.com/css-minecraft/

CodePen: https://codepen.io/Benjamin_Aster/pen/gOKwpOd
GitHub: https://github.com/BenjaminAster/CSS-Minecraft

Я не так давно посмотрел серию видео о разработке Minecraft для 8- и 16-битных консолей и даже для калькуляторов, но даже после этого — версия на HTML+CSS повергла в культурный шок.

Скриптов на странице, кстати, нет. Даже поворот — это сочетание псевдокласса :active и animation-play-state!

Дичь совершенная.

#css #minecraft

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

Ладно, кроме шуток. Оказывается, в консоли можно смотреть картинки! И в высоком качестве. И давно.

Узнал случайно, когда смотрел видео про DEC Alpha. Там описали странный формат — SIXEL.

📌 Что это такое?

Этот формат придумали в 1983 году для DEC-принтеров и терминалов вроде VT240. Он позволяет кодировать растровые изображения в текстовом виде с помощью специальных escape-последовательностей.

Последовательности состоят из колонок по 6 пикселей, отсюда и название — six pixels.

Тогда это было нужно, чтобы выводить графику без сложных GUI. А теперь SIXEL неожиданно полезен в терминалах, где можно без сторонних приложений просматривать картинки прямо в консоли!

🖼 Как смотреть картинки в терминале?

👉 Самый простой способ — lsix, это ls, но для миниатюр:

brew install lsix # macOS
sudo apt install lsix # Debian/Ubuntu Linux

А дальше просто запускаем:

lsix

и терминал покажет миниатюры всех картинок в папке. Работает в iTerm2, XTerm и других терминалах с поддержкой SIXEL.

🔄 Конвертация изображений

Для работы с этим форматом есть libsixel, который позволяет преобразовывать обычные изображения:

brew install libsixel
img2sixel myimage.png

А если у вас установлен ImageMagick, можно делать так:

convert myimage.png sixel:- #

Конвертирует и сразу выводит в терминал.

Если уже есть картинка в формате sixel, можно вывести её простым cat.

❓ Поддержка в эмуляторах терминала

Есть список совместимых на сайте:
🔗 https://www.arewesixelyet.com/

Сразу скажу, что стандартный терминал в macOS — не умеет.

Очевидно, формат прекрасно подходит для разгого рода диаграмм и дашбордов.

В общем, когда думаешь, что знаешь всё о графике, а потом узнаёшь, что кроме пикселей и вокселей есть ещё и сиксели! 😄

#console #images #бородач

#совет дня

Расскажу о других авторских каналах, на которые советую подписаться — собрал их в одну папку.

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

Будет полезно как джунам, так и сеньорам — https://t.me/addlist/0FHgy1y1yZgxMDc6

#статья дня

Дэн наше всё Абрамов недавно написал статью о новом способе передачи данных с сервера — Progressive JSON. Это не просто использование курсоров для пагинации, как в том же JSON:API, а настоящий поток данных, где структура JSON передаётся частями, по мере её готовности.

Вообще, много пишет последнее время. Это хорошо!

Зачем нужно? Собственно, для работы React Server Components в том числа!

Пример такого потока:

{
  "header": "Welcome to my blog",
  "post": "$1",
  "footer": "Hope you like it"
}

Видите заглушку $1? Позже — в том же потоке! — приходит следующий кусок:

/* $1 */
{
  "content": "This is my article",
  "comments": "$2"
}

На стороне клиента это будет выглядеть как:

{
  "header": "Welcome to my blog",
  "post": {
    "content": "This is my article",
    "comments": new Promise(/* ... not yet resolved ... */),
  },
  "footer": "Hope you like it"
}

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

Если вам интересна тема оптимизации загрузки данных, стоит прочитать статью Дэна: Progressive JSON.

А, или посмотреть в формате видеоподкаста! Тут: https://www.youtube.com/watch?v=MaMQLNBZz64

#react #json #rsc

#фишка дня

Многие недооценивают css variables, особенно при небольшой поддержке javascript.

Думали динамически можно изменять только цвет/типографику и что-то еще такое же очевидное?
А вот и нет, управлять можно даже текстом (ну ладно, еще немного математикой).

Идея для использования - динамический брендинг.
Задали название продукта/компании/клиента в одном свойстве --client-id и изменили один раз для шапки/подвала/сайдбара.

Пример кода показывает насколько это легко понять и использовать.
https://codepen.io/glebcha/pen/gbpwbob

#css #var

#новость дня

Никогда такого не было, и вот опять!

Уязвимость на базе localhost? Дайте две!

Итак, по порядку. Не так давно мы с вами обсуждали уязвимость под названием 0.0.0.0 Day. Суть её заключалась в том, что браузеры разрешали рандомным сервисам стучаться на разные порты по адресу 0.0.0.0, тем самым, позволяя этим самым сервисам определять, что же у вас на компьютере такого установлено. Это могли быть как средства для разработчиков, так и различные локальные сервисы поиска, защиты или просто мониторинга.

Так вот, на этих ваших прекрасных Android-смартфонах практически каждое приложение Facebook и Яндекса поднимают свой сервер, прослушивающий определённый диапазон портов. А скрипты аналитики и метрик передают куки этим самым серверам, связывая посещение некоего рандомного сайта с вашим аккаунтом в перечисленных компаниях.

А, каково? На iOS так сделать нельзя, потому что долгоживущие фоновые процессы ещё надо обосновать самому Apple.

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

Статья: https://localmess.github.io/
Перевод: https://habr.com/ru/articles/915732/

Совершенная красота, конечно. Facebook, кстати, перестали это использовать. Яндекс вроде ещё использует.

Почитайте статью или перевод. Очень крутая.

#cvs #security #privacy #vulnerability

#фишка дня

...от Ахмада Шадида, уже хорошо нам известного.

Как отменить скругление углов на мобиле, но оставить на дестопе?

Конечно, можно написать медиазапросы. Конечно, можно подождать реализации if()...

А можно просто:

border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999))) / 8px;

Или так:

clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-1));

Вообще, вот статья на тему: https://ishadeed.com/article/conditional-border-radius/

А вот так будем делать в будущем:

border-radius: if(100% < 100vw: 8px; else: 0px);

#css #clamp #math

А вы замечали, что создание онлайн-курса - это как ремонт?

Сначала кажется, что "всего-то видео нарезать", а потом:
сценарий, монтаж, субтитры, обложки, платформа, дедлайн, прокрастинация, траты, новый курс по прокрастинации…

И всё ради того, чтобы потом кто-то досмотрел до второго урока.

Но вот интересный вопрос: а что если AI наконец начал это чинить?

Ребята из русской компании AskHow запилили штуку, которая превращает любое длинное видео - Zoom, эфир, лекцию - в готовый курс за пару минут.

Просто загружаешь файл - и всё остальное делает ИИ:
- транскрибирует
- нарезает на уроки
- формулирует заголовки
- позволяет править текстом (удалил фразу - и она исчезла из видео)

А потом - сразу публикует на платформу, где уже есть мини-LMS, сбор лидов и даже приём оплаты.

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

Если хотите сами опробовать ИИ-инструмент - можно это сделать прямо сейчас, там есть промо-код для бесплатного теста.

В общем, если вы хоть раз говорили "надо бы потом собрать курс" - вот вам то самое "потом")
👉 Попробовать бесплатно и поддержать ребят на Product Radar.

#ux #будниразработчика #edtech #ai #coursebuilder

#заметка дня

— Мама, я хочу Liquid Glass!
— Liquid Glass есть у нас дома!

Liquid Glass дома: https://nrzns4.csb.app/

Кто не в курсе: https://developer.apple.com/videos/play/wwdc2025/219/

Ладно, кроме шуток. Да, это просто материал с картой нормалей. Но так и яблочное решение — не более, чем продвинутый шейдер.

Уверен, что UI-экспериментаторы скоро подтянутся :) Не знаю, насколько это будет востребовано, конечно, но...

Flutter жалко. У React Native тут явное преимущество получается. С другой стороны, Liquid Glass — он не только про виджеты, это попытка выстроить новый дизайн-язык. На мой взгляд, довольно странная, но какие-то изменения давно напрашивались, даже тот же Google в Material Design V3 натворил непонятного.

Идея, стоящая за Liquid Glass, — это отсутствие интерфейса. К сожалению, эта же идея привела к тому, что этого самого интерфейса на десктопной ОС стало даже слишком много.

Поглядим. Сквозь стекло.

#apple #liquid #glass

#ссылка дня

Во, UI-экспериментаторы уже подтянулись.

SVG-фильтры на связи: https://codesandbox.io/p/sandbox/nn5q2y

GitHub: https://github.com/lucasromerodb/liquid-glass-effect-macos

Очень простая реализация, конечно, но есть забавный момент: поддержка SVG-фильтров на Safari довольно плоха, эффекта завихрения не происходит.

Вообще, SVG фильтры в принципе очень недооценённая и недоделанная в каком-то смысле технология, даже карту нормалей можно применить в них, без перехода в WebGL. Но поддержка жах.

#svg #glass

#фишка дня

Использование position: sticky уже так-то стало обыденностью.

А что если можно было бы обращаться к элементам прилипшего родителя и что-то странное с ними вытворять?

Так можно! Для этого у нас буквально не так давно появились скролл-запросы, как часть контейнерных запросов. Так и называются: Container scroll-state queries.

Например, хотите сделать картинку в картинке? Ну, чтобы, например, не блокировать чтение статьи?

Или, наоборот, не прерывать просмотр рекламы? :)

Запросто: https://codepen.io/alinaki/pen/WbvMOPB

@container scroll-state(stuck: top) {
  .pip {
    width: 200px;
    transform: translate(-50%, 0%)
      translate(calc(50vw - (50% + 1rem)), calc(100vh - (100% + 1rem)));
  }
}

Обратите внимание, translate можно складывать, получая интересную математику в итоге :)

А для браузеров, которые в скролл-запросы пока не умеют, всегда можно написать короткий IntersectionObserver (он, кстати, есть в примере).

#css #scroll #state