Катерина | Про Frontend

Как сделать «скрытый, но находимый» контент? 🔍Представьте: у вас длинная страница с FAQ, аккордеонами и сворачиваемыми разделами. Пользователь нажимает Ctrl/Cmd+F, вводит слово — и... браузер ничего не показывает, потому что нужный текст спрятан в свернутом аккордеоне. Раздражает? 😔Для таких случаев есть hidden="until-found" — атрибут, который позволяет визуально скрывать контент, но оставлять его доступным для поиска на странице. Если браузер находит совпадение, он автоматически раскрывает нужный блок и даёт возможность синхронизировать интерфейс через событие beforematch.По сути, это прогрессивное улучшение:✔️ браузер поддерживает фичу → поиск работает «магически»;✔️ не поддерживает → интерфейс остаётся полностью рабочим.Главный плюс подхода — компактный интерфейс без потери находимости контента. Пользователь по-прежнему может быстро найти нужный фрагмент обычным поиском, даже если он спрятан в аккордеоне.Если браузер не умеет раскрывать контент автоматически, ничего страшного не происходит. Достаточно проверить поддержку события beforematch и включить запасной сценарий — например, раскрывать все секции или использовать собственный поиск.if (!('onbeforematch' in document)) { // fallback-логика}‼️ Нюансы, о которых стоит помнить⏺️ beforematch удобно использовать для синхронизации аккордеона и прокрутки к найденному месту;⏺️ hidden="until-found" — это не display: none: поведение layout-API (getBoundingClientRect, content-visibility, contain) может отличаться, лучше протестировать;⏺️ Не все браузеры поддерживают данную возможность, поэтому для браузеров без поддержки стоит заранее продумать fallback: явное раскрытие важных секций или альтернативный поиск. 😁Полезные ссылки:⛓ Подробнее в Chrome for Developers ⛓ Потыкать демо (CodePen)

На днях увидела на одном сайте интересный эффект — интерактивную «лупу», через которую видно нижний фон сквозь верхний слой. Давайте реализовывать! 👩‍💻Первое решение, которое приходит в голову — использовать mask-image. Но тут есть нюанс. 🤔Дело в том, что маска (mask-image) управляет прозрачностью всего элемента, а не отдельных слоёв фоновых изображений. То есть, если вы применяете маску к элементу с несколькими background’ами, прозрачная зона не покажет нижний фон того же блока, а только то, что находится за элементом — например, фон страницы. 😥Правильное решение вытекает из этой логики: если вы хотите, чтобы прозрачная область показывала нижний фон, слои нужно разделять по DOM. То есть создаём два уровня:⏺️ родительский блок с нижним фоном;⏺️ дочерний абсолютный блок с верхним фоном и маской.Теперь маска режет только верхний блок, а нижний фон родителя виден сквозь прозрачную область. Такой подход простой, предсказуемый и гибкий: можно менять диаметр лупы, добавлять тень, анимацию или эффект увеличения, не ломая основную структуру. 👍Всё, что нужно знать для реализации:✔️ Два слоя: родитель = нижний фон, ребёнок = верхний фон + маска;✔️ Маска создаётся через radial-gradient на верхнем блоке;✔️ Положение «лупы» управляется CSS-переменными (--mx, --my);✔️ JS обновляет эти переменные по движению мыши (mousemove) и прячет лупу при уходе за пределы блока (mouseleave);✔️ Размер и форма лупы легко настраиваются через CSS-переменные, что позволяет быстро экспериментировать.Полноценное решение доступно по ссылке

Grid vs Flex — когда сетка действительно нужна 🤓Оба инструмента — мастхэв в современном CSS, но решают разные задачи.✔️ Flexbox оптимален для одномерных раскладок, где важно выровнять элементы вдоль одной оси.✔️ Grid — для двумерной разметки: строки и колонки одновременно, с декларативной структурой и прозрачным намерением автора. 🙂Частая ошибка — выбирать инструмент по привычке. 😔 Если нужно расположить кнопки в ряд или выровнять элементы по центру — Flex остаётся самым компактным и читаемым решением.Но когда макет становится двумерным: карточная сетка, форма со сложной геометрией, области, которые должны занимать конкретные «ячейки» и изменять расположение при адаптиве — Grid даёт очевидные преимущества.Основные из них:➕ Явный контроль структурыВы задаёте строки и колонки явно:grid-template-columns: 200px 1fr 2fr;Макет становится предсказуемым.➕ Размещение элементов по ячейкамЭлементы можно «растягивать» на несколько рядов/колонок:.item { grid-column: 1 / 3; grid-row: 2 / 4;}Никакой магии — всё видно в декларации. 😁➕ Автоматические адаптивные сеткиКомбинация repeat(), minmax() и auto-fit/auto-fill позволяет строить адаптивные сетки без множества медиазапросов:grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));➕ Единая геометрия без «костылей»Grid легко выравнивает строки и колонки, делает их одинаковыми и создаёт ровную сетку без вспомогательных контейнеров.👨‍💻 Примеры✨ Flex — компактная группа кнопок:.actions { display: flex; gap: 12px; align-items: center;}✨ Grid — адаптивная сетка карточек:.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;}Как итог,✔️ Если задача читается как «ряд/колонка» — Flex;✔️ Если как «сетка/ячейки» — Grid. 🙂

⭐️ Откуда LLM реально берут ответы В ИИ-выдачу чаще всего попадает инфа с пользовательских форумов (как Reddit). Но с тем же Reddit вы ничего не контролируете: обсуждения живут своей жизнью. А для продвижения в России это вообще слабый управляемый канал.Посмотрим на другие источники. По данным анализа (1000 запросов) чаще всего попадают в ответы LLM:🔴Энциклопедии и справочникиСтраницы с чёткими определениями и базовыми объяснениями. Формат «что это / как работает» заходит лучше всего.🔴Образовательные и академические ресурсыУниверситеты, базы знаний, материалы с ссылками на источники.🔴Медиа и редакционные сайтыСтруктурированные статьи с фактами, цифрами и понятной подачей.🔴Блоги с сильной экспертизойНе «мнения», а разборы с конкретикой и логикой.🔴Документация и гайдыПошаговые инструкции, FAQ, help-центры.Эта выборка подчеркивает важность размещения контента на авторитетных специализированных сайтах.Проверить упоминания вашего бренда в ИИ-выдаче можно в инструменте 🔗 https://pr-cy.ru/ai-serp/____@prcynews

Клоду можно сказать: Не ошибайся. НЕ ГАЛЛЮЦИНИРУЙ. ТЫ РАЗРАБОТЧИК ЭКСПЕРТ.Всегда буду так делать теперь.

🚀 Fine-tuning LLM теперь можно делать даже на ноутбукеС помощью ноутбука от Unsloth AI можно дообучать Gemma 4 с 8GB VRAM.Это уровень обычной GPU или даже бесплатного Colab T4.🔗 Ссылка на ноутбук📍 Навигация: Вакансии • Задачи • СобесыБиблиотека дата-сайентиста#буст

Новые версии продукта - типа, новые ощущения !?Расскажите это админам новомодного S/4HANA.Тут вот на значительном ряде современных ядер от 753 по 919 включительно в утилите tp обнаружили баг, которому наверное "отчень много лет". Ну или мне так показалось..🤓История такая:1) Запрос транспортный успешно отрелизили в разработке.2) Далее мы импортируем его в систему качества для "QA Approval/Rejection"3) Открываем очередь STMS_QA , а там йок(‼), нету нужного запроса.Решение стандартное: качаем свежую версию tp и обновляем в системах.Далее список из версий tp в которых безобразие это - вылечено:KERNEL919: tp 381.733.04KERNEL918: tp 381.715.04KERNEL917: tp 381.709.04KERNEL916: tp 381.700.04KERNEL793: tp 381.588.04KERNEL789: tp 381.577.04KERNEL754: tp 381.40.04KERNEL753: tp 381.30.04(imho) про ядро 777, как обычно успешно забыли...!?#STMS_QA_BUG#TP#KERNEL919#KERNEL753

В НИИ прикладной химии разработали патрон, который способен противостоять дронам. Он может поражать БПЛА на дальности до 100 метров.По словам авторов разработки, соотношение массы тяжелой дроби к массе всего патрона дает возможность получить нужную энергию отдельных дробин, позволяющую разрушать элементы конструкции беспилотников на расстоянии от 70 до 100 метров. В более ранних разработках попадание связанной дроби не всегда заканчивалось сбитием дронов на дальностях более 80 метров.Особенность устройства патрона позволяет раскрыться осыпи дроби на оптимальном расстоянии «для эффективного поражения БПЛА».

Слева новый первый день. А справа мой первый Macbook Pro 13" Late 2013 который взял в феврале 2014 года. Прошло 12 лет, 3 замены батарейки и он всё ещё работает, правда уже на Linux :) Самое удивтельное у него всё ещё отличный на сегодня экран, клавиатура, тачпад. Пережил падения, удары и всё равно не выглядит уставшим, а яблочко всё ещё светится сздади) А когда я на нём на парах, записывая лекцию, в Parallels играл в винде в ArcheAge притом писал скрипты по посадке урожая xDИстория однако

Плотная линия - изменение импорта в США связанных с ИИ отраслей, прерывистая - импорта не связанных с ИИ отраслей.Когда вся твоя экономика сделала ставку на продвинутую форму автокорректа.

OpenAI Codex vs Claude Code vs Amp Code vs OpenCode + DS4 ProЯ сегодня закончил сложный рефактор проекта ядра BitGN. И состояние кода теперь просит генеральной уборки.Из интереса я задал один и тот же вопрос разным агентам:Scan through the repository on a high level (ignore code under /modules). I want you to suggest ways, how we can make it more simple and straightforward, refactor away traces of growing pains. Focus on small changes that allow to drop code, or reduce cognitive complexity with a small LOC change cost.OpenAI Codex с GPT-5.5 High потратил 3 минуты и 132k tokens из подписки и предложил:(1) удалить папку /dbg с начинкой - давно пора(2) переименовать пакет stor в store - можно(3) упростить ULID генератор - да, можно(4) убрать AddVMCreateds - можно(5) зарефакторить run finalization/push - надо посмотреть(6) удалить public-release backfill - да, это прямо точно можно(7) почистить Makefile - мелочь, но можно(8) почистить раутинг до виртуальных машин- да, теперь можно(9) утащить виртуальную FS в PAC1 - имеет смыслAmp Code в deep thinking потратил 4 минуты и 90 центов, выдал список первоочередных изменений, которые пересекаются с кодексом:(1) Удалить папку /dbg с начинкой - ok(2) упростить раутинг до виртуальных машин - да, можно(3) зарефакторить run finalization/push - надо посмотреть(4) убрать public-release backfill - ok(5) убрать fx.VM интерфейс и поправить доки - да, действительноClaude Code + Opus 4.7 XHigh потратил 8 минут (говорит, что 2$ из подписки) и предложил прежде всего:(1) убрать fx.VM интерфейс - ок(2) убрать helper err(), который код сильно упрощает - нет(3) оптимизировать ненужные конструкторы storage - надо смотреть(4) переместить файлы с интерфейсами айдишников в файл с интерфейсами IO, ибо “используются вместе и сэкономят одну строчку кода” - нет, спасибо(5) удалить пустую папку /cmd - она даже не в git, но ок(6) удалить proto_api/bitgn/vm/ecom.proto - и оставить вас без интерфейса к соревнованию. Нет, спасибо.OpenCode + DeepSeek V4 Pro потратил 1.15$ + 6 минут и предложил:(1) слить файлы с конфигами - и так нормально(2) переместить файлы с интерфейсами айдишников в файл с интерфейсами IO - как и Claude. Нет, спасибо.(3) удалить папку dbg с начинкой - ok(4) удалить пустую папку с /cmd - ну ок(5) заменить lib/set.go на inline map[string]struct{} - ни в коем случае, это код упрощает(6) удалить systemd socket activation logic, ибо “the most complex code”, что сразу уронило бы все сервера.OpenCode +DS4 Pro пока совсем сыроват. Ответы Claude Opus немного лучше. Codex идет в работу. Amp тоже нашел толковое без шума, но меньше Кодекса.Ваш, @llm_under_hood 🤗

Плох тот AI, который не мечтает уничтожить Человечество создать нечто, до чего не догадалась Жизнь...две новейшие научные работы под это утверждение 🧐➡️ Вот тут, с помощью AI собирают ферменты, осуществляющие одну из самых распространенных реакций в природе - разрыв фосфатных связей (таковые наполняют ДНК, РНК, сигнальные и прочие молекулы). Без белков-ферментов некоторые из этих связей будут "ждать" распада годами. Главное, что показали авторы - такой фермент, AI может спроектировать очень НЕ похожим на природные аналоги. Их белок как бы “эволюционировал” внутри AI-алгоритма, который шаг за шагом отбирал варианты, и результат крайне отличается от "натуральных" ферментов.➡️ А здесь, тоже в AI-пайплайне, конструируют "под заказ" белки, способные специфически связать определённые участки ДНК. Опять-таки, важно что AI не варьировал природные байндеры ДНК (цинковые пальцы, TALE или CRISPR) - а сгенерировал "с нуля" небольшие белки, которые распознают заданные последовательности ДНК. Обе статьи - препринты. И, кстати, второй проект - детище Дэвида Бейкера великого и ужасного пожалуй главного эксперта по собиранию белковых молекул из шариков и палок под любую биохимическую задачу... ах, да - он ещё и лауреат сами-понимаете-какой Премии ⬅️. Уверен, что оба обсуждаемых инструмента вскоре опубликуются в ведущих научных журналах - и обретут интереснейшие прикладные применения.#ии #люди

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