#фишка дня

«Как компьютер стал современным» журнала 8БИТ от Яндекс Образования

Классная серия статей, в которой просто и понятно рассказывают, как мы смогли от сорокатонных компьютеров прийти к современным MacBook. Главные инженерные, физические и математические открытия, детальные (но простые!) пояснения как работает ПО, программы и интернет.

Отличный контент для тех, кто хочет детальнее понять как работает железо. Почитать можно по ссылке

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

Когда Mac засыпает посреди сборки или загрузки — не обязательно ставить сторонние приложения, чтобы этого избежать. В macOS уже есть встроенный инструмент:
caffeinate

Он мешает системе уснуть, пока вы этого не захотите.

Основные ключи:
-d — не гасить дисплей
-i — не переходить в сон
-m — не «усыплять» диски
-s — держать систему бодрой при подключённом питании
-u — эмулировать активность пользователя

Можно запустить команду вместе со своей задачей:
caffeinate -i npm run build
Пока идёт сборка — Mac не уснёт.

Альтернатива для любителей GUI — старая утилита Caffeine, или другие «keep awake» приложения из Mac App Store.

Накидайте в комментарии вариантов для других ОС.

#mac #sleep #tool

#фишка дня

Если вам нужны более мягкие градиентные переходы, но лень возиться с easing-формулами, попробуйте комбинировать их. Например, радиальные градиенты в прозрачность: https://codepen.io/alinaki/pen/eYRBbYj?editors=1100

Во многих случаях это именно то, что нужно. Менее насыщенная середина с двумя акцентами по краям.

Про то, что же такое easing-градиенты я писал тут: https://t.iss.one/htmlshit/581

#css #gradient #radial #бородач

#статья дня

Каждый, кто хоть раз поручал задачу джуну, знает это чувство: вроде бы всё объяснил, а результат — что-то странное. В статье The AI Coding Trap Крис Лой пишет, что работа с ИИ похожа именно на это. Только теперь джуниор не человек, а алгоритм — послушный, быстрый, но без интуиции и контекста. И если человеку можно сказать «подумай ещё», то ИИ просто перегенерирует тот же бред, но с другим форматированием.

Все знакомые мне лиды, которые действительно активно используют агентов в работе, давно пришли к тому же выводу: LLM-агенты — это потрясающе быстрые и усердные джуны. Они не устают, не спорят, не теряют мотивацию и могут за ночь сделать объём, на который у человека ушла бы неделя. Но — как и с живыми джунами — ключевое слово тут «под присмотром». Им нужен контекст, ревью и здравый смысл наставника. И статья Лоя отлично это подтверждает: ИИ может безупречно исполнять, но не способен осознанно решать.

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

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

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

#llm #ai #agent #junior

#ссылка дня

Laws of UX — это коллекция законов, которые объясняют, почему одни интерфейсы ощущаются естественными, а другие — ломают голову пользователю. Каждый принцип описан просто и наглядно, с иллюстрациями, ссылками на статьи и книги, так что сайт отлично подходит и как справочник, и как учебник.

Там можно вспомнить и проверить себя на классике:

‣ Эффект эстетики и полезности — красивый интерфейс воспринимается как более удобный.

‣ Перегрузка выбора — чем больше опций, тем сложнее принять решение.

‣ Закон Фиттса — время, чтобы попасть в цель, зависит от её размера и расстояния.

Это, кстати, причина, по которой меню в macOS единое и наверху.

‣ Закон Миллера — человек может удерживать в памяти около семи элементов.
‣ Закон Паркинсона — работа занимает всё отпущенное на неё время.

‣ Эффект последовательности — люди запоминают начало и конец взаимодействия, забывая середину.

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

Отличное место, чтобы прокачать UX-интуицию и вспомнить, почему «меньше» часто значит «понятнее».

https://lawsofux.com/

#такое дня

А вы знали, что «долой» переводится как «down with the»?

«Долой короля» — «Down with the king» и так далее. Так вот, это я к чему.

У меня теперь все коммиты в гит называются так:

down with the bootstrap
down with the enzyme
down with the reselect
down with the react-async

Я не знаю, зачем вам эта информация. Как вы называете ваши коммиты? :)

#git #work

#фишка дня

На правах субботы!

Наверное все знают, что у Google есть анимированные и интерактивные «дудлы» (doodle, ну, интерактивный логотип, грубо говоря). Но вот не всем известно, что в зависимости от результатов поиска можно найти пасхальное яйцо.

Вот что я сегодня увидел:
1. Введи в строку поиска «Wizard of oz»
2. Кликни по красным башмачкам 👠
3. А теперь по торнадо 🌪

Самый асбестовый фильм на свете к вашим услугам!

Не благодарите :)

#oz #google #doodle #бородач

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

Назовите самое недооценённое штатное приложение в вашей ОС.

Я начну: в macOS это Automator. Буду удивлён, если вы знаете, что это такое.

Это, грубо говоря, маленькая IDE для создания ваших собственных макросов, действий, приложений. Её немного портит тот факт, что дефолтная библиотека сильно заточена под стандартные яблочные приложения (кто-то использует Photos? Серьёзно?), но ими не ограничивается!

Итак, понадобилось мне тут сделать из записанного видео — гифку. Можно использовать онлайн-ресурсы, можно — найти приложение, а можно — создать своё!

Идём в Automator, выбираем Application и добавляем Run shell script из списка.

Пишем код:

#!/bin/bash
exec &> ~/automator_ffmpeg_log.txt
set -e

export PATH="/opt/homebrew/bin:/usr/local/bin:/usr/bin:/bin"

echo "Starting Automator FFmpeg GIF conversion..."
echo "Files: $@"

for f in "$@"; do
    dir="$(dirname "$f")"
    filename="$(basename "${f%.*}")"
    palette="$dir/${filename}_palette.png"
    gif="$dir/${filename}.gif"

    echo "Processing: $f"
    ffmpeg -v error -i "$f" -vf "fps=15,scale=720:-1:flags=bicubic,palettegen" -y "$palette"
    ffmpeg -v error -i "$f" -i "$palette" -filter_complex "fps=15,scale=720:-1:flags=bicubic[x];[x][1:v]paletteuse=dither=bayer" -y "$gif"
    rm -f "$palette"
    echo "Saved: $gif"

 terminal-notifier -title "GIF Created" -message "Saved as ${filename}.gif"
done

echo "Done."

и устанавливаем Pass input как as arguments.

Та-дам, вы великолепны! Естественно, у вас должны быть установлены ffmpeg и terminal-notifier. Проще всего — из brew, но вы и так это знаете.

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

#macos #automator

🚀 Не стройте ракету, пока не собрали бумажный самолёт

Один из главных рисков в запуске IT-продукта — застрять в бесконечной доработке и не выйти на рынок.

В комьюнити Короче, Капитан делают по-другому.

Челлендж: 12 запусков за 12 месяцев.

✅ Разработка и запуск — за 1 месяц
✅ Минимальные вложения (средний бюджет на продвижение — $150)
✅ Честный разбор: что получилось, а что — нет

Формула проста:
1 запуск = 1 функция = решение 1 проблемы

Три главных правила:
⚡️Проверенный спрос, а не догадки
⚡️ Быстрый запуск без перфекционизма
⚡️ Только США и ЕС — там платят за удобство

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

Без иллюзий, без теорий — только работающие подходы и реальные цифры.

👉 Подписаться: @its_capitan

Реклама. ИП Зуев, ИНН 360408359441, erid: 2Vtzqw26e5c

#фишка дня

Когда-то давно я слышал о таком свойстве, как text-align-last.

Что оно делает? Ну, думаю, всё понятно из иллюстрации :)

Работает с последней строкой индивидуально, позволяя сделать более приятные глазу переходы текста, соответствующие остальной стилистике. Вот хорошая статья на тему: https://www.stefanjudis.com/today-i-learned/how-to-align-the-text-of-the-last-paragraph-line/

С интерактивным примером, как вы любите.

Почему я акцентировал на нём внимание?

Да просто я знал о нём ещё тогда, когда оно толком нигде не поддерживалось. Вот в IE работало, буквально, а в Chrome нет. И как-то все на него забили в итоге.

В этом есть небольшая беда так нами любимых «the future CSS tip». Наиграешься, разочаруешься, и забудешь :(

Но есть же наш уютный канальчик, мы тут всё вспомним :)

#css #thefuturepast #бородач

#день_рождения дня

Сегодня День рождения не только лишь у меня, но и у HTML тегов!

29 октября 1991 года Тим Бернерс-Ли выкатил документ с названием HTML Tags.

И состоял он из описания 18 первых тегов: <title>, <nextid>, <a>, <isindex>, <plaintext>, <listing>, <p>, <h1>…<h6>, <address>, <hp1>, <hp2>…, <dl>, <dt>, <dd>, <ul>, <li>,<menu> и <dir>.

Архивная версия: https://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html

С Днём рождения, HTML! Ну и я :)

#html #бородач

#расширение дня

Странный хештег, если честно. Как расширение сознания. Давайте я расширения разного рода буду лучше как #инструмент дня публиковать.

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

Swark — расширение для VS Code. Строит схемы вашего (или не очень) кода, используя мощности Github Copilot чтобы группировать модули и пояснять их предназначение. Под капотом использует Mermaid.js. У этой библиотеки вообще с LLMками случился ренессанс, никто не хотел писать диаграммы текстом, кроме определённых нердов вроде меня.

В общем, надо пробовать!

#tool #diagram #llm

#заметка дня

Итак, ты хочешь использовать Tanstack (React) Query для запроса данных, но хочешь делать это по-запросу, а не декларативно?

Ни слова больше! Используй useMutation, даже если это контр-интуитивно. Мутации — они по своей природе императивные, их нужно вызывать ручками в нужный момент.

Вот только есть один нюанс: мутацию — опять же, по-определению — нельзя отменить. Если требование изменений ушло на сервер — слишком много телодвижений нужно, чтобы перестать это делать. Нет уверенности в том, что изменения ещё не применились.

Да, даже если мутация, на самом деле, ничего не делает.

А мне надо было, стояла задача подключаться к источникам данных, но иметь возможность это подключение (или несколько) прекратить в любой момент без создания, собственно, токена.

А вот запрос — отменить можно. Прямо в документации: или посылая AbortSignal, или вызывая соответствующий метод клиента, cancelQueries, по ключу запроса.

С мутацией сильно больше телодвижений.

Кстати, вы же в курсе, что ключи действуют как wildcard? todo среагирует и на todo-1, и на todo-2 и так далее. Это не самая очевидная вещь.

Ладно, но всё же, как вызвать запрос императивно?

Очень просто: комбинацией из refetch и параметра enabled в конфигурации хука:

useQuery<TokenResponse>({
    enabled: false,
    retry: false,
    refetchOnReconnect: false,
    refetchOnWindowFocus: false,
    refetchInterval: false,
    queryKey: ['connecting', dsId, connectionKey],
    queryFn: async ({ signal }) => {
         signal?.addEventListener('abort', cancelConnection);
          ...
     }
});

И используем как обычно:

const {
    data: profile,
    refetch: startConnection,
    connectionStatus,
    isFetching: isFetchingConnection,
    isError,
} = useConnect(dataSource, ...);

Секрет в том, что теперь refetch можно передать куда угодно и дёрнуть.

Естественно, всегда создавайте кастомные хуки для useQuery и useMutation. Не держите логику в компоненте.

Я ещё люблю отключать refetch по фокусу на окне и по потере соединения. Про идиотскую ситуацию с неправильным определением потери соединения я уже писал ранее.

#react #tanstack #query #бородач

#презентация дня

Я тут сегодня успел на митапе побывать! И не просто побывать, а ещё и спикером там был.

Митап — Design System Breakfast, который лидит Варя Степанова — посвящён, как несложно догадаться, дизайн-системам в разных их проявлениях. И сегодня я там презентовал открытую мной недавно возможность писать функциональные и поведенческие тесты прямо в сторях, а потом запускать их в Jest как локально, так и в CI/CD.

И называется эта вся прелесть — Storybook Interactions. И, естественно, одним только Jest дело не ограничивается, скорее даже наоборрот — официальная их рекомендация это использование Vitest и Playwright. Но у нас в команде уже есть сформированная экосистема.

Итак, презентация: https://docs.google.com/presentation/d/1hpAt3y4zE1U8vRhY_IfmM3NEeY8qCe9QdKnQLAJF8oo/edit?usp=sharing

Ну и, конечно же, пример на гитхабе: https://github.com/bekharsky/when-jest-met-storybook

Стек: Vite, React 19, MSW, MUI, React Router, Tanstack Query, Storybook 9 и Jest с SWC.

Если нужно больше подробностей или хотите стрим прямо здесь на канале — требуйте, не стесняйтесь, котаны!

#react #design #storybook #ui #test

#статья дня

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

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

Потому, вашему вниманию — новая статья Ахмада Шадида: «Верстка секций современным CSS».

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

Особое внимание уделено таким возможностям, как container queries, logical properties и flexible gaps. Шадид показывает, как всё это помогает создавать действительно устойчивые макеты, которые не ломаются при изменении контента, языка или даже направления текста.

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

А, ссылка: https://ishadeed.com/article/modern-css-section-layout/

#css #article #container #cqw

У кого там была шестидневка — лучиков, котаны ❤️