Розыгрыш оффлайн билета FC 2025 🚀

Кто первый дешифрует СЛОВО и напишет его в комменты, тот и победил!

0L7RgNC00Y8g0Lgg0YvQu9C60LjRhiDQtdGL0L3QvdC10YLRgdCw0L0g0LXQuNC60YHRgtC10L/QuNCz0LUg0Y/QsNCy0YvRgtCw0LHQsNGA0LfQsNGAINC+0L3QstC10L3QtNC10LbQtSDQuNC40YbQutC90YPRhCDQtdGL0LLQvtC9INGC0LXQsNCy0LjQttCw0LvRgtC+INCw0LTQvdCw0LzQvtC6

P.S. если за 24 часа никто не поймёт, что там за слово, то разыграю его другим образом

UPD: Победитель @AlexSentyurin

Организаторы Frontend Conf, дали промокод на скидку 5% fc25_pasta, он действует на онлайн/оффлайн билеты

Можешь купить сам или принести своему работодателю, с 1го сентября будет повышение цен, поторопись 🫡

https://frontendconf.ru/moscow/2025

Автоматизация личных аккаунтов в телеграм 🧑‍🎓

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

Теперь мои коллеги в рабочем чате будут получать каждое утро сообщение "Доброе утро ☀️" и случайно пикчу с котиком с unsplash 🐈

Что ещё можно интересно/полезного реализовать?

Вот и подкрался Baseline 2025 и 86% на caniuse по Popover API 🫡

Собираю все посты по popover API здесь:

— Наши потомки будут делать бургер меню в 3 строчки 🤯
— Представляем popover API 👨‍💻
— Навигационная панель с поповером на CSS 😱
— Popover = hint — новый атрибут для модных поповеров из Popover API ⚡️
— Атрибуты command и commandfor

Caniuse
https://caniuse.com/?search=popover

Документация:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/popover

React Conf 2025 — бесплатная онлайн конференция ⚛️

Что там тебя ждёт?

React Keynote. Здесь обычно и рассказывают про курс платформы и ближайшие изменения экосистемы.

React Compiler. в 2025 он в RC, и команда продолжает путь к стабильному релизу. Если вы всё ещё вручную обклеиваете код useMemo/useCallback, самое время посмотреть, как автоматическая мемоизация меняет подход к оптимизациям.

Производительность. отдельные доклады по профилированию и performance-трекам

Async React. обновлённые паттерны работы с асинхронщиной и контроль пользовательского опыта в реальных приложениях.

React и AI. как интегрировать LLM-сценарии в обычные фронтенд-флоу без превращения кода в свалку.

Трансляция будет 7-8 октября

Регистрация 👇
https://conf.react.dev/

CSS sibling-index() — позиция элемента среди соседей без JS 🧑‍🎓

Функция sibling-index() возвращает позицию элемента среди его соседей по одному родителю, счёт начинается с 1, работает прямо в значениях свойств, особенно полезно в calc()

Идея: стилизуем по порядковому номеру без классов и скриптов

Базовый синтексис

/* вернёт 1, 2, 3... для каждого ребёнка */
width: calc(8px * sibling-index());

4 быстрых приёмчика
1. Ступенчатая анимация — естественный «каскад» появления без JS

.item {
  animation: fade .6s both;
  animation-delay: calc(80ms * sibling-index());
}
@keyframes fade { from {opacity:0} to {opacity:1} }

2. Градиент по карточкам — комбо с sibling-count() даёт предсказуемые палитры для N элементов

.card {
  /* равномерно раскидываем оттенки по ряду */
  background: hsl(
    calc(360deg / sibling-count() * sibling-index()) 60% 55%
  );
}

3. Нумерация без <ol> — удобно, когда HTML менять нельзя

.row { --i: sibling-index(); display: grid; grid-auto-flow: column; gap: .5rem; }
.row::before { content: var(--i); opacity: .6; }

4. Обратный порядок — подходит для flex/grid, когда DOM трогать нельзя

.item { order: calc(sibling-count() - sibling-index()); }

На данный момент эта фича работает только в Chrome 138+, 65% на caniuse

Почитать подробнее 👇
https://developer.mozilla.org/en-US/docs/Web/CSS/sibling-count

#css@frontend_pasta

Хочу быть ближе 📺

Недавно я делился с тобой частью своего путешествия по Мурманской области, очень хочу поделиться с тобой бо́льшим🫰

Мы начали вести тг канал @nikita_alena_travel, там рассказываем про наши путешествия и жизнь, в целом 🤲

Сейчас мы в Батуми, едим хинкали и хачапури, и обыгрываем местные казино, буду очень рад с кем-нибудь из вас встретиться! 🇬🇪

Параллельно экспериментируем с видео на YouTube, буквально вчера смонтировали видео про Териберку (село на берегу Баренцева моря)
https://www.youtube.com/watch?v=NSxy9YRWOeA

🐑 CSS Overflow Level 5: карусели, маркеры и кнопки скролла — уже в Chrome

Chrome завёз из CSS Overflow 5 нативные маркеры прокрутки и кнопки скролла, а затем добавил scroll-target-group для простого scroll-spy. Это позволяет делать карусели, оглавления и навигацию по секциям без JS

Что можно делать прямо сейчас
1️⃣ ::scroll-marker и ::scroll-marker-group — автоматические «точки»/метки прокрутки для любого скролл-контейнера
2️⃣ ::scroll-button() — настоящие кнопки «влево/вправо/вверх/вниз» у контейнера
3️⃣ scroll-target-group + :target-current — простая подсветка «активного пункта» в оглавлении/навигации

Мини-пример: карусель без JS
https://codepen.io/qmzik-the-typescripter/pen/jEWGaVJ

<ul class="carousel">
  <li>Слайд 1</li>
  <li>Слайд 2</li>
  <li>Слайд 3</li>
</ul>

<style>
/* Включаем маркеры и кнопки, если браузер умеет */
@supports selector(::scroll-button(right)) and (scroll-marker-group: after) {
  .carousel {
    display: grid;
    grid-auto-flow: column;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-marker-group: after; /* группа маркеров после контента */
    padding: 1rem 2.5rem;       /* место под кнопки */
  }

  .carousel > * {
    scroll-snap-align: center;
    inline-size: clamp(260px, 60vw, 520px);
    block-size: 200px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border, #ccc);
    border-radius: .75rem;
  }

  /* один маркер на каждый элемент */
  .carousel > *::scroll-marker { content: ""; }

  /* подсветка активного маркера */
  .carousel > *::scroll-marker:target-current {
    outline: 2px solid currentColor;
  }

  /* кнопки прокрутки */
  .carousel::scroll-button(left)  { content: "◄"/"Prev"; }
  .carousel::scroll-button(right) { content: "►"/"Next"; }
  .carousel::scroll-button() {
    padding: .4rem .6rem;
    background: color-mix(in oklab, Canvas 85%, CanvasText 15%);
    border-radius: .5rem;
  }
}
</style>

⛔️ Пока работает только в Chrome 135+

Почитать подробнее 👇
https://developer.chrome.com/blog/carousels-with-css?utm_source=chatgpt.com&hl=ru

::scroll-marker, ::scroll-button, scroll-target-group, :target-current

ChatGPT Atlas: браузер от OpenAI. Что значит для фронтенда? 🧑‍🎓

ChatGPT Atlas — браузер с встроенным ChatGPT. Пока только macOS, Windows/iOS/Android обещают позже. Идея простая: ИИ прямо на странице помогает читать, искать, резюмировать и выполнять рутинные действия

Что в нём есть? 🧐
— Ask ChatGPT Sidebar: открывается на любой странице, может суммировать, объяснять, вытягивать данные, не переключаясь между вкладками

— Умный поиск: помимо чата есть вкладки со ссылками, картинками, видео и новостями

— Инлайн-помощник в формах: редактирование текста прямо в input/textarea

— Browser memories: запоминает важные детали твоего серфинга, всё можно просматривать/чистить в настройках

— Agent mode (Preview): Plus/Pro/Business могут поручать Atlas цепочки задач. Есть ограничения безопасности: агент не запускает код в браузере, не ставит расширения, не лезет в файловую систему

Что важно для нас как для фронтендеров? 👨‍💻
1. Под капотом Chromium: значит на 95% ничего не сломается

2. Семантика и доступность теперь еще практичнее: Atlas использует структуру страницы, включая ARIA-атрибуты, чтобы понимать элементы и их роли. Чем лучше у вас роли/label/state, тем корректнее ИИ взаимодействует с интерфейсом. Проверь свои кнопочки, меню, формы, диалоги

3. Контент-инженерия на странице: документацию, релизноты и PR-обсуждения можно быстро превращать в дайджесты, сравнивать версии и вытягивать TODO

4. Микро-тексты прямо в UI: подсказки, ошибки форм, tooltips правятся без использования дополнительных инструментов

5. Нет расширений: пока не поддерживаются, как и их публичный API, но вроде обещают сделать (пока без дат)

Кто-то уже успел потестить его? 🤓

Cursor выкатил версию 2.0 🚀

Теперь это уже не просто IDE с ИИ-подсказками, а площадка для работы с кучей агентов одновременно. И вместе с этим они представили свой первый модельный стек для кода — Composer

Вот что поменялось 👇

🧠 Composer — свой флагманский кодовый ИИ
— Заявляют, что он в 4 раза быстрее моделей схожего уровня
— Большинство запросов закрывает меньше чем за 30 секунд, даже для многошаговых задач
— Модель тренировали с доступом к семантическому поиску по всей кодовой базе, поэтому она лучше держит в голове большой проект, а не один файл

🤖 Cursor 2.0: IDE вокруг агентов, а не файлов
— IDE теперь центрируется вокруг агентов, а не вокруг дерева файлов: ты формулируешь задачу, а агенты уже решают, куда лезть в коде
— Можно запускать много агентов параллельно, причём они друг другу не мешают: под капотом git worktree или удалённые машины
— Есть режим, когда несколько моделей одновременно решают одну и ту же задачу, а ты забираешь лучший результат, особенно полезно на сложных задачах

🤤 И ещё важный момент — они начали закрывать две реальные боли работы с ИИ в коде:
— Ревью изменений: стало проще быстро посмотреть, что именно агент наделал, и провалиться в детали

— Тестирование: появился нативный браузерный тул, с помощью которого Cursor сам прогоняет свою работу и итеративно правит, пока не добьётся корректного результата

https://cursor.com/download

Идеально Размещённые Тултипы: База 🧑‍🎓

Anchor Positioning API всё ближе и ближе к массовой поддержке, пора поднять паруса и узнать больше 🏋️‍♀️

https://habr.com/ru/articles/965066/

Идеально размещённые тултипы: все четыре стороны 🧑‍🎓

Продолжаем прокачивать Anchor Positioning API 🚀

https://habr.com/ru/articles/966998/

P.S. если не читал первую часть, то начни с неё 👈

Знаю, что ты скучаешь на работе, думаю тебе стоит сделать паузу и решить кроссворд😏

Идеально размещённые тултипы: по углам 🧑‍🎓

Наконец-то добрался до перевода 3-ей части, приятного тебе чтения ❤️

https://habr.com/ru/articles/972190/

1 часть — Идеально Размещённые Тултипы: База
2 часть — Идеально размещённые тултипы: все четыре стороны

В каждой шутке есть доля неправды 😉

Теперь можно тротлить или блочить отдельный запрос через девтулзы хрома, мега удобно 🔥

https://developer.chrome.com/blog/throttle-individual-network-requests

P.S. извини что пропал, возвращаюсь в строй, всех с прошедшим НГ 🫡