counter-set в CSS: как задать номер без хака и JavaScript

counter-set — это новое CSS-свойство, с помощью которого можно явно установить значение счётчика в нужный момент.

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

🔺 Читать статью

navigator.credentials: как ускорить вход в браузере

➿➿➿➿➿➿➿➿➿➿➿➿

navigator.credentials позволяет браузеру безопасно хранить и по запросу возвращать учётные данные — пароли, токены или ключи. Через get() можно получить сохранённые данные (например, с mediation: optional), а через store() — сохранить их после входа.

Работает по HTTPS, требует фокуса страницы. Поддерживается в Chrome, Edge и Android WebView; в Safari и Firefox — частично или нет.

✅ Читать статью

Вышла вторая часть разбора радиальных градиентов в CSS!

В первой мы научились управлять цветами, смещать центр и менять форму. А теперь — идём глубже:

1️⃣ Radial shape: как зафиксировать градиент в форме круга (circle).
2️⃣ Radial size: абсолютные размеры и ограничения для процентов.
3️⃣ Четыре ключевых слова (closest-side, farthest-side, closest-corner, farthest-corner) — как они работают и когда реально выручают.
4️⃣ Практика: делаем анимированный «бильярдный шарик» с бликом.

🐭 Смотреть на YT
🐹 Смотреть в VK Video

Подводим итоги!

Чемпионат по вёрстке подошёл к концу. В 12:00 вместе с экспертами из компаний подведём итоги чемпионата, раздадим оценки и выберем победителя.

🐭 Подключиться в YT
🐹 Подключиться в VK Video

Гайд, как не пройти испытательный срок

Наверное, всех джунов интересует, как пройти испытательный срок и крепко закрепиться в компании. Вера Ясюкевич, руководитель KLBR Studio, поделилась основной ошибкой новичков, которая приводит к отказу после испытательного срока.

Полный эфир с KLBR Studio — по ссылке:
🐭 Смотреть в YT
🐹 Смотреть в VK Video
🟢 Подробнее о программе

Технические выходные × Колесо фортуны

🎉 День программиста: хороший повод закрыть пробелы и подобрать «пару» курсов на вырост. Одно вращение колеса и случайный подарок ваш. Ищите на сайте коробочку и вращайте колесо все выходные.
➿➿➿➿➿➿➿➿➿➿➿➿
Что добавить в копилку знаний:

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

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

— TypeScript — системное мышление о типах, работа с дженериками, утилитами и сужением типов.

— Vue, Vite, Webpack — сборка под прод, профилирование бандла, HMR по делу.

— Анимации (CSS/JS/SVG) — тайминг-функции, последовательности, производительность.

— Доступность (a11y) и дизайн-системы — роли и атрибуты, токены, библиотека компонентов.

➡️ Коротко: 1 вращение • 12–14 сентября • 7 дней на применение.

https://htmlacademy.ru

Прямой эфир с лидом бэкенд-разработки в Garage Eight

👍 Garage Eight и HTML Academy запускают совместную программу «Обучение под работодателя»: вы занимаетесь в небольшой группе, осваиваете PHP и ООП, REST-подход и тестирование, пробуете типовые задачи джуна на учебных проектах, работаете с Git и CI. На эфире разберём, как это соотносится с рабочими процессами команды и входом на стажировку.

Приходите на эфир 18 сентября в 12:00 (MSK), чтобы:

🔲 Понять, как устроены процессы в Garage Eight: ревью кода, менторство, адаптация новичка и план первых недель;
🔲 Разобрать программу по делу: какие навыки требуются на старте (PHP, работа с фреймворками, REST, тесты) и как они закрываются на учёбе;
🔲 Узнать про стажировку: критерии готовности, отбор, формат занятости и типовые задачи для джуна на входе.

➿➿➿➿➿➿➿➿➿➿➿➿

Планируете вход в профессию, хотите понять ожидания к джуну и как выглядит старт в продуктовой команде? Зарегистрируйтесь по ссылке — пришлём напоминание и доступ к эфиру.

Как работает Map в JavaScript

Коллекция Map — это встроенная структура JavaScript для хранения пар «ключ–значение». Она похожа на обычный объект ({}), но имеет важные преимущества: поддерживает ключи любого типа и сохраняет порядок вставки — удобно, когда нужен предсказуемый перебор.

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

🪻 Читать статью

Таймеры в JavaScript

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

Практически это значит: setTimeout используют не только для задержек, но и для управления порядком выполнения — отложить код после текущего стека (setTimeout(fn, 0)), настроить дебаунс ввода, запустить отложенные эффекты и анимации (а сами анимации — через requestAnimationFrame). А зная про clearTimeout, можно вовремя отменять лишние вызовы и избегать багов.

В статье разбираем механику работы, важные особенности (негарантированная задержка, троттлинг в фоновых вкладках, макро- vs микро-задачи) и показываем практические примеры, чтобы использовать таймеры осознанно.

➕ Читать статью

Вырезы в блоках — революция | CSS боль

Хотите узнать, как делать вырезы в блоках одной строчкой CSS?

В новом выпуске мы сравним старый способ (много контейнеров, фиксированные размеры, хаки) и современный подход с mask-image и радиальными градиентами.

В видео:

1️⃣ как работал классический «дедовский» метод;
2️⃣ mask-image и радиальные градиенты: чистый CSS для вырезов;
3️⃣ приём с полпиксельным смещением для аккуратных краёв;
4️⃣ гибкие и адаптивные компоненты с любым фоном: градиентами, картинками или видео;
5️⃣ смена парадигмы: от «приклеивания блоков» к «вырезанию» прямо в CSS.

🐭 Смотреть на YouTube
🐹 Смотреть в VK