Верстальщик от бога

Верстаем сложный прогрессбар в 2026 году #почитать Раньше, чтобы сделать круговой прогрессбар, мы страдали с SVG. Мне до сих пор больно заглядывать в инспектор на старых реализациях. Сегодня всё кардинально упростилось. Современный CSS позволяет собрать сложный, гибкий и красивый круговой прогрессбар буквально на одном div и на одном CSS-свойстве. И всё это — с отличной браузерной поддержкой. В этой статье я разберу именно этот приём. Сначала — ключевую идею подхода, затем — возможности кастомизации, после этого добавлю немного визуальной «дороговизны», удобные ручки управления и экспериментальную CSS-логику. Да-да, напоследок мы немного попрограммируем на CSS! ⏱Читать статью

Как получить оффер в Яндекс, Сбер, МТС и другие крутые компании? На фото ребята из моего комьюнити, где уже больше 220 frontend-разработчиков. Все они успешно устроились в крутые компании и получили офферы от 300 тыс рублей 🫂 👋 Привет, меня зовут Тихон, я действующий Frontend-разработчик и ментор. За руку довожу до оффера в Big Tech и остаюсь рядом на испытательном сроке.

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

И у тебя тоже получится 😎 У меня есть канал, где я: 👉 Показываю, как пройти HR-фильтр и превратить отклики в реальные приглашения 👉 Помогаю найти мотивацию и разбираюсь с убеждениями, которые мешают расти 👉 На примерах показываю, как проходить собеседования, включая техничку 👉 Разбираю резюме и делюсь лайфхаками — например, как аккуратно «пинговать» рекрутеров И регулярно выкладываю полезное: ▪️ Задачи, на которых валятся кандидаты ▪️ Подборка из 100+ каналов с вакансиями для разработчиков ▪️ 100 вопросов, которые помогут тебе на собеседовании ▪️ Чек-лист для проверки своего резюме Подписывайся: https://t.me/+7oWkeZXB4d44ODAy Реклама, erid: 2W5zFH8ydtu ИП Галактионов Тихон Витальевич, ИНН 771618975809

View Transitions API #почитать Полистав различные ресурсы в Интернете и просмотрев множество видео по данной теме, я решил составить наиболее полную картину по данному, не побоюсь этого слова, революционному API, чтобы вы уже сегодня могли начать использовать его в своём проекте! ⏱Читать статью

text-decoration-inset is Like Padding for Text Decorations #почитать The text-decoration-inset property solves a problem that we’ve had since the beginning of the web, which is that text decorations such as underlines extend beyond the first and last characters, resulting in vertical misalignment. ⏱Читать статью

Что на самом деле делает фронтенд: путь данных от сервера до вашего экрана #почитать Фронтенд обычно представляют как «кнопки» и «красивые интерфейсы». Но это очень поверхностное понимание. На самом деле фронтенд — это слой приложения, который работает между пользователем и сервером, управляет данными, обновляет экран без перезагрузки и обеспечивает взаимодействие с системой. ⏱Читать статью

Коллекция полезных HTML и CSS фич, которые редко используются #почитать Я люблю помогать фронтендерам больше узнать о HTML и CSS. Общаясь, я составил список HTML и CSS фич, которые полезные, но почему-то о них мало кто знает. В этой статье я пришёл поделиться ими. ⏱Читать статью

Управляем «протягиванием» прокрутки: разбор overscroll‑behavior #почитать Распространённый сценарий: вы прокручиваете модальное окно, доезжаете до конца и… вместо того чтобы остановиться, браузер продолжает тянуть основной документ. Это так называемый «scroll chaining»: событие прокрутки передаётся родительскому контейнеру. На мобильных устройствах этот эффект сопровождается bounce‑анимацией или pull‑to‑refresh. Для некоторых интерфейсов такое поведение отвлекает пользователя и может мешать вашему коду. В этой статье я расскажу, как CSS‑свойство overscroll-behavior помогает контролировать такие эффекты, избавится от хака overflow: hidden, а также рассмотрим практические примеры и подводные камни. ⏱Читать статью

Старые и новые проблемы Safari на iOS #почитать Safari — новый Internet Explorer для фронтенд-разработчиков! Поведение вёрстки в нём отличается от спецификаций, а иногда бывает и непредсказуемым. Но если Microsoft свой браузер похоронила, то Apple регулярно обновляет Safari, создавая новые проблемы для фронтендеров. Релиз Safari 26.0 не стал исключением, а усложнил ситуацию новый дизайн Liquid Glass, изменивший интерфейс браузера. ⏱Читать статью

Дорогие джуны, не делайте так. Коллекция плохих привычек в HTML и CSS #почитать Давно я ничего не писал для джунов. А ведь HTML и CSS не стали проще для них. Всё так же есть сложности, и мне надо как-то помочь людям. Я выделил несколько привычек, от которых лучше избавиться в самом начале карьеры фронтендера — главное, просто сделать это. Надеюсь, вам будет полезно. ⏱Читать статью

Интересные HTML и CSS фичи, которые почему-то обходят стороной #почитать Во фронтенде изменения происходят постоянно. Только разобрался с одним инструментом, он уже считается устаревшим. Плюс на смену ему появляются новые. В JavaScript регулярно добавляются новые методы и API, а HTML и CSS, разумеется, не отстают. Неудивительно, что в этом постоянном круговороте часть возможностей проходит мимо или просто забывается. В этой статье я собрал несколько таких фич, о которых, по моему опыту, разработчики забыли. ⏱Читать статью

16 июля встречаемся с JS‑сообществом SberProfi в Сбер.Среде. AI уже меняет JavaScript‑разработку. Вопрос не в том, заменит ли он инженеров, а в том, кто освоит его быстрее и качественнее. 🔥 Обсудим изменения на реальных кейсах от Сбера, Cloud․ru и Mish. Очные участники увидят спецформат от блогеров и пообщаются с экспертами GigaCode и GitVerse. ⏳ Начало в 17:00, встреча очных гостей - в 16:00. Количество очных мест ограничено – успейте зарегистрироваться!

Хватит использовать JavaScript для решения задач CSS #почитать Недостаток знаний часто подталкивает людей к чрезмерно сложным решениям, и рано или поздно это отражается на производительности. Возьмем content-visibility: auto. Он дает тот же эффект, что и React-Window, но без единой строчки JS и без увеличения размера сборки. Аналогичная ситуация с современными единицами высоты окна (dvh, svh, lvh): наконец-то приведена в порядок "мобильная" высота, которую годами пытались компенсировать через window.innerHeight. Обе технологии в 2024 году получили более 90% поддержки современных браузеров и полностью готовы для продакшна. Однако мы по привычке продолжаем решать такие задачи с помощью JS, просто потому, что CSS незаметно ушел вперед, пока мы спорили о React Server Components. ⏱Читать статью

Улучшаем API для Resize Observer #почитать Интерфейсы слежения за изменением размера (Resize Observer), изменениями DOM (Mutation Observer) и пересечениями (Intersection Observer) — это полезные API, которые превосходят своих предшественников по производительности: ResizeObserver лучше события window.resize. MutationObserver заменил устаревшие обработчики изменений (Mutation Events). IntersectionObserver позволяет реализовать взаимодействие при прокрутке страницы с меньшими расходами по производительности. API этих трех типов интерфейсов похожи друг на друга (хотя и имеют различия, о которых поговорим позже). ⏱Читать статью

⚠️Хотите разобраться, как обучать интеллектуальных агентов в нестандартных задачах для бизнеса? Начните обучение на курсе «Reinforcement Learning». 🎁Записывайтесь на 3 бесплатных вебинара — познакомьтесь с программой обучения и преподавателями. Задайте свои вопросы экспертам! Вебинар 1: «Обучение с подкреплением - гибкий подход для сложных задач. Создаем собственные окружения». ⏰7 июля в 20:00 мск Программа вебинара: 1. Краткое введение в обучение с подкреплением. 2. Обзор существующих сред и переход к созданию собственного RL-окружения на Python. 3. Напишем свою среду на основе gym.Env и подключим к ней обучающегося агента. Вебинар 2: «Visual DQN: Как научить ИИ-модель видеть мир глазами игрока». ⏰15 июля в 20:00 мск Программа вебинара: 1. Разберем, как DQN работает с изображениями: как агент получает состояние не в виде чисел, а в виде сырых пикселей с экрана. 2. Изучим архитектуру DeepMind-подхода. 3. Запустим обучение DQN в среде Atari Pinball и посмотрим, как агент постепенно учится играть лучше человека. Вебинар 3: «Алгоритм DQN - учим нейросеть принимать решение без помощи человека». ⏰21 июля в 20:00 мск Программа вебинара: 1. Разберем устройство алгоритма DQN: как нейросеть заменяет Q-таблицу и учится выбирать лучшие действия. 2. Изучим ключевые механизмы DQN. 3. Обучим агента решать задачу в среде Gymnasium и проанализируем процесс обучения. Записывайтесь ➡️ https://vk.cc/cZn7g2 Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

Обрезка блоков текста с помощью line-clamp #почитать Функция line-clamp находится в статусе ограниченной доступности в Baseline, но уже широко используется для создания аккуратных текстовых блоков. Это свойство позволяет ограничить отображение текста заданным количеством строк, скрывая всё, что выходит за пределы. Оно идеально подходит для превью статей, цитат или карточек товаров, где нужно показать только часть текста, не перегружая страницу. ⏱Читать статью

There is No Need to Trap Focus on a Dialog Element #почитать Accessibility advice around modals have commonly taught us to trap focus within the modal. Upon further research, it seems like we no longer need to trap focus within the <dialog> (even in modal mode). ⏱Читать статью

Зачем фавиконов нужно аж 24 штуки? #почитать Для каждого экрана, устройства и программы нужен свой размер фавикон изображения. Из статьи вы узнаете различные трюки, используемые для генерации фавикон, и об удобных инструментах для автоматической генерации. ⏱Читать статью

AI-инструменты можно любить и ненавидеть, но работать без них в IT уже практически невозможно 🤩 Коллеги из AvitoTech 11 июля зовут в их офис на Лесной на AI Hardcore Day. Приглашают тех, кто каждый день сталкивается с AI в работе и даже пишет своих AI-агентов. Обещают доклады и нетворкинг-сессию на террасе после — и всё это без записи. 💫 Среди тем: — Spec-Driven Development: теория, инструменты, практика. — Разработка и тестирование MCP для внутренних агентных систем аналитики. — Выпрямляем руки агентов: как сделать MCP удобными и действительно полезными. — Атаки на GenAI-агентов: OWASP на практике. ➡ Регистрация тут!

Как реализовать эффект, подобный Liquid Glass, при помощи CSS без JavaScript и шейдеров #почитать В этой статье я разберу, как создать интерфейс Liquid Glass компании с логотипом фрукта без использования различных npm-модулей или шейдеров, нагружающих видеопамять устройства. ⏱Читать статью

We Completely Missed width/height: stretch #почитать The TL;DR is that stretch does the same thing as declaring 100%, but ignores padding when looking at the available space. ⏱Читать статью