Frontend Головного Мозга
الذهاب إلى القناة على Telegram
Фронтендер из сибири, обо всём что связано с frontend разработкой и интересно самому: ✅ Новости, статьи, ✅ Авторские кейсы, ✅ Песочница, готовые UI макеты. ✅ Юмор Я хочу услышать три главных слова: JS, Angular, Redux Сотрудничество: @cyberJohnny
إظهار المزيد
الشبكة:6 245
المشتركون
-224 ساعات
-157 أيام
-6330 أيام
جارٍ تحميل البيانات
القنوات المماثلة
سحابة العلامات
الإشارات الواردة والصادرة
---
---
---
---
---
---
جذب المشتركين
أكتوبر '26أكتوبر '26
أكتوبر '26
+5
في 0 قنوات
سبتمبر '26
+14
في 0 قنوات
Get PRO
أغسطس '26
+9
في 0 قنوات
Get PRO
يوليو '26
+9
في 0 قنوات
Get PRO
يونيو '26
+25
في 0 قنوات
Get PRO
مايو '26
+9
في 0 قنوات
Get PRO
أبريل '26
+13
في 0 قنوات
Get PRO
مارس '26
+12
في 0 قنوات
Get PRO
فبراير '26
+12
في 0 قنوات
Get PRO
يناير '26
+8
في 0 قنوات
Get PRO
ديسمبر '25
+12
في 0 قنوات
Get PRO
نوفمبر '25
+17
في 0 قنوات
Get PRO
أكتوبر '25
+11
في 0 قنوات
Get PRO
سبتمبر '25
+19
في 0 قنوات
Get PRO
أغسطس '25
+25
في 0 قنوات
Get PRO
يوليو '25
+9
في 0 قنوات
Get PRO
يونيو '25
+19
في 0 قنوات
Get PRO
مايو '25
+21
في 0 قنوات
Get PRO
أبريل '25
+37
في 0 قنوات
Get PRO
مارس '25
+25
في 0 قنوات
Get PRO
فبراير '25
+51
في 0 قنوات
Get PRO
يناير '25
+31
في 0 قنوات
Get PRO
ديسمبر '24
+32
في 0 قنوات
Get PRO
نوفمبر '24
+22
في 0 قنوات
Get PRO
أكتوبر '24
+86
في 0 قنوات
Get PRO
سبتمبر '24
+20
في 0 قنوات
Get PRO
أغسطس '24
+32
في 0 قنوات
Get PRO
يوليو '24
+13
في 0 قنوات
Get PRO
يونيو '24
+71
في 0 قنوات
Get PRO
مايو '24
+172
في 0 قنوات
Get PRO
أبريل '24
+136
في 0 قنوات
Get PRO
مارس '24
+171
في 17 قنوات
Get PRO
فبراير '24
+201
في 0 قنوات
Get PRO
يناير '24
+218
في 4 قنوات
Get PRO
ديسمبر '23
+165
في 3 قنوات
Get PRO
نوفمبر '23
+78
في 4 قنوات
Get PRO
أكتوبر '23
+67
في 4 قنوات
Get PRO
سبتمبر '23
+257
في 0 قنوات
Get PRO
أغسطس '23
+242
في 0 قنوات
Get PRO
يوليو '23
+221
في 0 قنوات
Get PRO
يونيو '23
+270
في 0 قنوات
Get PRO
مايو '23
+215
في 0 قنوات
Get PRO
أبريل '23
+143
في 0 قنوات
Get PRO
مارس '23
+475
في 0 قنوات
Get PRO
فبراير '23
+122
في 0 قنوات
Get PRO
يناير '23
+136
في 0 قنوات
Get PRO
ديسمبر '22
+103
في 0 قنوات
Get PRO
نوفمبر '22
+141
في 0 قنوات
Get PRO
أكتوبر '22
+165
في 0 قنوات
Get PRO
سبتمبر '22
+209
في 0 قنوات
Get PRO
أغسطس '22
+74
في 0 قنوات
Get PRO
يوليو '22
+66
في 0 قنوات
Get PRO
يونيو '22
+32
في 0 قنوات
Get PRO
مايو '22
+62
في 0 قنوات
Get PRO
أبريل '22
+89
في 0 قنوات
Get PRO
مارس '22
+24
في 0 قنوات
Get PRO
فبراير '22
+30
في 0 قنوات
Get PRO
يناير '22
+30
في 0 قنوات
Get PRO
ديسمبر '21
+45
في 0 قنوات
Get PRO
نوفمبر '21
+80
في 0 قنوات
Get PRO
أكتوبر '21
+49
في 0 قنوات
Get PRO
سبتمبر '21
+51
في 0 قنوات
Get PRO
أغسطس '21
+1 466
في 0 قنوات
Get PRO
يوليو '21
+3 323
في 0 قنوات
Get PRO
يونيو '21
+346
في 0 قنوات
Get PRO
مايو '21
+64
في 0 قنوات
Get PRO
أبريل '21
+9
في 0 قنوات
Get PRO
مارس '21
+153
في 0 قنوات
Get PRO
فبراير '21
+181
في 0 قنوات
Get PRO
يناير '21
+18
في 0 قنوات
Get PRO
ديسمبر '20
+9 195
في 0 قنوات
| التاريخ | نمو المشتركين | الإشارات | القنوات | |
| 28 أكتوبر | +1 | |||
| 27 أكتوبر | 0 | |||
| 26 أكتوبر | 0 | |||
| 25 أكتوبر | 0 | |||
| 24 أكتوبر | 0 | |||
| 23 أكتوبر | 0 | |||
| 22 أكتوبر | 0 | |||
| 21 أكتوبر | 0 | |||
| 20 أكتوبر | 0 | |||
| 19 أكتوبر | 0 | |||
| 18 أكتوبر | 0 | |||
| 17 أكتوبر | 0 | |||
| 16 أكتوبر | 0 | |||
| 15 أكتوبر | 0 | |||
| 14 أكتوبر | 0 | |||
| 13 أكتوبر | 0 | |||
| 12 أكتوبر | +1 | |||
| 11 أكتوبر | +1 | |||
| 10 أكتوبر | 0 | |||
| 09 أكتوبر | +1 | |||
| 08 أكتوبر | +1 | |||
| 07 أكتوبر | 0 | |||
| 06 أكتوبر | 0 | |||
| 05 أكتوبر | 0 | |||
| 04 أكتوبر | 0 | |||
| 03 أكتوبر | 0 | |||
| 02 أكتوبر | 0 | |||
| 01 أكتوبر | 0 |
منشورات القناة
🎯 Тултип, который сам перепрыгивает вниз, без JavaScript
Подсказка над кнопкой проста, пока кнопка не окажется у верхнего края экрана: подсказку обрезает. Обычно это чинили на JavaScript, и код выходил запутанным.
В CSS для этого есть Anchor Positioning API. Кнопке даём имя через anchor-name: --example-anchor, а подсказка привязывается к ней:
.target {
position: fixed;
position-anchor: --example-anchor;
position-area: top;
position-try-fallbacks: flip-block;
}
position-area: top ставит подсказку над кнопкой. Если там не хватает места, flip-block переворачивает её на другую сторону, вниз.
Подвох: с position: absolute переворот не сработает. Браузер ловит выход за содержащий блок, а у absolute он обычно прокручивается вместе с элементом. У fixed этот блок равен окну, поэтому край замечается.
Дальше в статье: как развернуть стрелочку тултипа и чем подстраховать старые браузеры.
👍 - если было полезно
👉
@frontend_mind
| 2 | FrontendOffer поможет пройти техсобесы
Вы сейчас готовитесь к собеседованиям или уже проходите? Не чувствуете себя уверенно со всеми этими километровыми задачами на "что выведет консоль"? Давно не практиковались в лайвкодинге и боитесь налажать?
Поиск работы - дело одинокое и неприятное, но мы справимся вместе (https://t.me/frontendOffer_bot).
⚡️ FrontendOffer - это:
⚫️бот со 100+ вопросами, консольными задачами и лайвкодингами с реальных собеседований от джуновского до сеньорного уровня;
⚫️эталонные ответы, подробные объяснения и дополнительные ресурсы для всех задач - можно выучить, что от тебя ждут или понять тему вглубь ;
⚫️коммьюнити, в котором проводят воркшопы и созвоны 3-4 раза в месяц, вместе тренируют решения задач, прожаривают резюме и помогают проходить собесы уверенно;
📍Ближайшие ивенты коммьюнити:
28 октября - консольный блиц. Будем публично решать и разбирать сложные консольные задачи и нарабатывать уверенность с ними;
🖤Почему мы:
Автор проекта, Наташа Давыдова, фронтенд-разработчик с 6+ годами коммерческого опыта, включая бигтехи.
Я расскажу и покажу, как расщелкивать хардовые и софтовые собесы, чтобы получать офферы с максимальным КПД.
➡️ Приходи к нам (https://t.me/frontendOffer_bot), решай задачи, вступай в коммьюнити. Тебе больше не придется бороться с рынком в одиночку.
Erid 2SDnjcvfJoW
@frontend_mind | 297 |
| 3 |  ✨ Любой кусок страницы в окне поверх всех окон
Обычный Picture-in-Picture выносит в плавающее окошко только видео. Оно остаётся на экране, даже если переключиться на другую вкладку или программу.
Document Picture-in-Picture API делает то же самое с любым HTML: тикер акций, чат, список дел. По сути, получается веб-виджет.
Окно создаёт requestWindow(), и внутри у него свой пустой document. В статье туда клонируют тикер:
/* Select the component */
const stock = document.querySelector("#stock");
/* Clone the component and append it to the DPIP */
DPIP.document.body.append(stock.cloneNode(true));
Стили сами не переедут, их копируют в head окна отдельно. А поправить вид только внутри окна поможет @media (display-mode: picture-in-picture).
Учтите, что API работает только на десктопе, а Safari на момент статьи его не поддерживал.
В статье есть полный код кнопки и разбор опций окна.
👍 - если было полезно
👉
@frontend_mind | 300 |
| 4 |  🧩 Один инпут в Angular для строки, функции, шаблона или компонента
Когда компонент принимает кастомный контент, приходится заранее решать: хватит строки или нужен TemplateRef? Потом тип проверяют через @if и ветвят шаблон.
Библиотека Polymorpheus от команды Taiga UI убирает этот выбор. Директива *polymorpheusOutlet одинаково отрисует любой из четырёх вариантов в переданном контексте:
{{ primitive }}
Строка или результат функции попадает в primitive.
Пример с тултипом: обычно в нём просто текст. Когда понадобится ссылка или кнопка, пользователь передаст шаблон, и API тултипа переделывать не придётся.
Оговорка: функцию от конструктора компонента не отличить, поэтому компонент оборачивают в PolymorpheusComponent.
А в статье ещё и трюк, как сделать иконку, которую можно задать просто по имени или целым шаблоном.
👍 - если было полезно
👉
@frontend_mind | 400 |
| 5 |  🚀 Предзагрузка, которая грузит не те данные
В TanStack Router у маршрута есть loader: он запускает запрос ещё до рендера, а компонент забирает готовые данные из кеша TanStack Query. Но параметры запроса тогда описаны дважды, и если они разойдутся, ошибки никто не покажет.
Пример из статьи. В дашборд добавили ?asOf=дата, но только в компоненте. По ссылке loader грузит данные «на сегодня», а компонент потом запрашивает снимок заново. Лишний запрос и лишнее ожидание.
Автор предлагает класть queryOptions в контекст маршрута. Их создаёт одна функция context, а loader и компонент через useRouteContext() берут один и тот же объект. Разойтись им просто негде.
Учтите, что функция context на момент статьи была новой и не описанной в документации.
В статье ещё о том, как контекст наследуют дочерние маршруты и почему лишних ререндеров не будет.
👍 - если было полезно
👉
@frontend_mind | 428 |
| 6 |  +4لا يوجد نص... | 321 |
| 7 | 🤖Podlodka Backend Crew: AI в бэкенд-задачах
Демо с AI чаще всего выглядят одинаково: агент за десять минут пишет сервис с нуля.
Вот только в работе бэкендера всё сложнее: легаси, рискованные миграции, неработающие тесты и ревью, которое становится бутылочным горлышком.
🗓 С 26 по 30 октября в сезоне Podlodka Backend Crew (https://podlodka.io/becrew?utm_campaign=early_bird_backend_crew_5&utm_source=telegram&utm_medium=paid&utm_content=frontendInterview) «AI в бэкенд-задачах» участники:
• Научатся передавать агенту инженерные стандарты и правила, чтобы он писал так, как нужно, а не как получится
• Соберут ревью, где несколько моделей независимо проверяют изменения, а финальное решение остаётся за человеком
• Посмотрят, куда переезжает сложность миграции легаси, когда код пишет агент
• Выяснят, где ломается мечта отдать миграцию агенту целиком
• Разберут, какие антипаттерны тестов агенты уже успели перенять от разработчиков.
Формат — пять дней живых Zoom-сессий утром и вечером, закрытое сообщество в Telegram и общение со спикерами.
Будет много интерактива и практики. Базовый ликбез оставят за бортом — этот сезон для тех, кто уже пробует AI в реальных проектах. Присоединяйтесь с 26 октября!
🔗 Билеты и программа: https://podlodka.io/becrew (https://podlodka.io/becrew?utm_campaign=early_bird_backend_crew_5&utm_source=telegram&utm_medium=paid&utm_content=frontendInterview)
@frontend_mind | 285 |
| 8 |  ⚡️ В сети начали массово сливать IT-курсы и книги известных онлайн школ
Вот отсортированная база с тонной материала (постепенно пополняется):
(363 видео, 87 книги) — Python(117 видео, 53 книги) — ВАЙБКОД(174 видео, 91 книги) — DevOps(415 видео, 68 книги) — Frontend(137 видео, 93 книги) — DS/ML(143 видео, 33 книги) — ИБ/Хакинг(352 видео, 89 книги) — С/С++/C(343 видео, 87 книги) — Java/QA(176 видео, 32 книги) — Git/Linux(167 видео, 53 книги) — PHP/1С(227 видео, 83 книги) — SQL/БД(114 видео, 77 книги) — Сисадмин(107 видео, 43 книги) — BA/SA(181 видео, 32 книги) — Go/Rust(167 видео, 43 книги) — Kotlin/Swift(112 видео, 24 книги) — Flutter(113 видео, 82 книги) — GameDev(183 видео, 37 книги) — Дизайн(136 видео, 33 книги) — PM/HR (https://t.me/+93HR2BsO7nM4ZmUy)
Скачивать ничего не нужно — все выложили в Telegram (https://t.me/+93HR2BsO7nM4ZmUy)
@frontend_mind | 370 |
| 9 |  ✨ Рамка, которая рисует себя сама, на чистом CSS
Свойство border-image позволяет сделать рамкой элемента градиент вместо обычной линии. Но анимировать градиент напрямую не выйдет: браузер не умеет плавно двигать проценты внутри него.
Это обходится так: регистрируем свою переменную через @property и указываем её тип. Такую переменную браузер уже плавно меняет:
@property --p {
syntax: "";
initial-value: 0%;
inherits: false;
}
Дальше она встаёт в градиент рамки: linear-gradient(-45deg, red var(--p), transparent 0%). Пока --p равна 0%, рамка прозрачная. При наведении --p становится 100%, красный заполняет рамку, и кажется, что её рисуют на глазах.
Есть подвох: border-image не изгибается по форме элемента, так что скруглённые углы он не повторит.
В статье тот же приём крутят дальше: conic-gradient, анимация border-image-slice и ещё куча вариаций.
👍 - если было полезно
👉
@frontend_mind | 438 |
| 10 |  🧩 Как сделать, чтобы фоновый узор не обрезался снизу
У секции повторяющийся фоновый узор, плитка 52×44px. Высота блока зависит от текста, поэтому нижний ряд плиток часто обрезается на середине.
Можно поставить background-repeat: round. Но тогда браузер сжимает или растягивает саму плитку, чтобы она уместилась целиком.
Решение аккуратнее: взять автоматическую высоту через calc-size() и округлить её функцией round() до кратного высоте плитки. Высота плитки лежит в переменной --tile-height.
.section {
height: calc-size(auto, round(up, size, var(--tile-height)));
}
Выглядит как фиксированная высота, но работает скорее как min-height. Блок по-прежнему подстраивается под контент, просто его высота всегда кратна высоте плитки, и узор не режется.
Оговорка: на момент написания статьи это работает только в Chrome.
В оригинале есть живые демо, разбор округления вверх и вниз и то, как подогнать под узор ещё и padding.
👉 @seniorFront
@frontend_mind | 495 |
| 11 |  АЙТИШНИКИ БЕСПЛАТНОЕ ОБУЧЕНИЕ
Проект «Terminal (https://t.me/+cqCn4zG0DwkzYmFi)» стал крупнейшей библиотекой бесплатного образования. В одном канале собраны курсы, книги, полезные инструменты и практические тренажёры для всех разработчиков:
• Практические курсы и задания
• Книги и статьи известных авторов
• Полезные инструменты и ресурсы
• IT-новости и инсайды
Обучение по всем направлениям: SQL, Python, ML, Frontend, PHP, C++, Go, Git, Linux, QA, Java, Vibe-coding, InfoSec и др.
⌨️ подписаться (https://t.me/+cqCn4zG0DwkzYmFi)
@frontend_mind | 493 |
| 12 |  ✨ Скроллбар, который следит за прокруткой без JavaScript
Свой скроллбар обычно рисуют так: нативный прячут, а размер и положение ползунка считают в JS на каждое событие scroll. Это дорого: scroll летит много раз в секунду, а чтение scrollHeight может вызвать reflow.
Разработчик библиотеки Taiga UI отдал эту работу CSS через scroll-driven animations. Их прогресс зависит не от времени, а от прокрутки контейнера.
Хитрее всего с высотой ползунка. Анимации его краёв растягивают на высоту контейнера (100cqb) за конец прокрутки, и в крайней точке они замирают ровно там, где нужно:
.bar {
animation-range: 0% calc(100% + 100cqb), calc(0% - 100cqb) 100%;
animation-fill-mode: both;
}
JS остаётся только для перетаскивания ползунка мышью.
Учтите, что на момент статьи Firefox умел это лишь в Nightly, поэтому в Taiga UI новая схема включается только там, где браузер её поддерживает.
Отдельно красиво решено, как прибить ползунки к краю контейнера: через anchor positioning.
👉 @seniorFront
@frontend_mind | 479 |
| 13 |  ✨ CSS может заметить, что элементы вот-вот столкнутся
Сбоку от секции с карточками висит декоративный элемент, и его размер и положение меняются вместе с экраном. Медиазапросом момент наезда не поймать, а спрятать декор нужно, как только зазор станет меньше 20px.
Между декором и секцией через anchor positioning растягивается невидимый элемент .measure. Внутри у него псевдоэлемент шириной 20px и overflow-x: auto. Когда зазор меньше 20px, .measure переполняется.
Само переполнение запускает scroll-driven анимацию, прокручивать ничего не нужно. Анимация лишь ставит --touching: 1, а style container query прячет декор:
.decor {
@container style(--touching: 1) {
opacity: 0;
}
}
Работает только в браузерах, где есть и scroll-driven анимации, и anchor positioning, так что это улучшение поверх обычной вёрстки.
В статье есть интерактивные демо, где можно потянуть границу и поймать момент срабатывания.
👉 @seniorFront
@frontend_mind | 503 |
| 14 |  🧮 Поле ввода, в которое можно вписать формулу
Часто число для формы сначала надо посчитать. С обычным приходится бегать в калькулятор и обратно. А позже в поле виден только итог, и непонятно, откуда он взялся.
Bramus сделал для этого веб-компонент . Пишешь (2 + 3) * 4, уходишь из поля, и там появляется 20. Возвращаешь фокус, и снова видна формула, её можно проверить или поправить.
Считает компонент своим парсером, без eval(). Он понимает обычные операторы, скобки и функции вроде sqrt, round, min, max. Внутри лежат обычные , поэтому отправка формы и валидация работают как есть. С недописанной формулой вроде 2 + форма не отправится.
Учтите, что по умолчанию в поле с вашим name уходит сама формула «2 + 3», а не 5. Чтобы сервер получил число, нужен атрибут submit="result".
Как устроены три поля внутри и почему стили на самом теге сразу применяются к ним, Bramus показывает в статье.
👉 @seniorFront
@frontend_mind | 495 |
| 15 |  🎨 Текст, который сам подбирает цвет под фон
Если фон карточки задаётся фирменным цветом и может быть любым, подбирать к нему цвет текста вручную неудобно.
CSS-функция contrast-color() берёт цвет и возвращает black или white, смотря что контрастнее:
.card {
--bg: var(--brand-color);
background: var(--bg);
color: contrast-color(var(--bg));
}
Можно пойти дальше. Сохраняем результат в кастомное свойство, зарегистрированное через @property, и проверяем его запросом @container style(). Вышло white, значит фон тёмный, и текст красим в светлый оттенок цвета карточки. Вышло black, берём глубокий тон того же оттенка.
Если цвета палитры задать вручную, а не выводить из фона, на результат contrast-color() уже не опереться: такие пары автор советует тщательно тестировать.
В статье этот приём вместе с light-dark() собран в целую систему светлой и тёмной темы.
👉 @seniorFront
@frontend_mind | 515 |
| 16 |  +65 офферов получили наши ребята на прошлой неделе
Оффер на 4,2k долларов
Оффер на 5k евро
Оффер 260k рублей
Оффер на 210k рублей
Оффер на 220k рублей
И еще 19 за сентябрь... а за лето более 50... и у тебя получится!
👋 Меня зовут Тихон, я действующий Frontend-разработчик и ментор. За руку довожу до оффера в Big Tech и не бросаю на испытательном сроке. Вокруг меня собралось целое комьюнити из почти 300 фронтендеров.
Я веду канал, в котором уже 15 тыс разработчиков. Регулярно публикую полезные материалы по подготовке к собесам. А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме)
Забирайте в закрепленном сообщении
Полные разборы реальных собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ
Сборники вопросов по темам:
Кибербезопасность на собеседовании
Все вопросы по React на собеседовании
Все вопросы по TypeScript на собеседовании
Как решать задачи двумя указателями
Вопросы с Vue собеседований
Вопросы по сетям и методологиям с 200 собесов
Вопросы по JS с 200 собесов
Какие задачи спрашивают на livecoding чаще
Полезные посты:
Job-борды для поиска работы
Запись нашего самого кринжового собеса
Новый HTTP метод QUERY
🏆Статистика по рынку:
Июль, Июнь, Май, Апрель, Март
Подписывайся 👇
frontend_punks
Реклама, erid: 2W5zFGAjYYZ ИП Галактионов Тихон Витальевич, ИНН 771618975809 | 331 |
| 17 |  🔍 Убрал повтор в скринридере и сломал кнопку
Джейк Арчибальд делал кнопку-иконку «жирный» с подсказкой «Bold (⌘B)» на popover="hint". На кнопке стояли aria-label="Bold" и aria-describedby со ссылкой на подсказку.
VoiceOver читал «Bold. Bold. Command B». Чтобы убрать повтор, Джейк удалил aria-label. И кнопка осталась без доступного имени, то есть без названия для скринридера. aria-describedby добавляет только описание, имя он не заменяет.
JAWS в итоге собрал текст из соседних элементов и объявил кнопку сразу жирной и курсивной.
Чинится заменой одного атрибута: aria-labelledby вместо aria-describedby. Он тоже ссылается на подсказку по id, но берёт из неё именно имя. Теперь VoiceOver говорит «Bold. Command B. Button».
Сам Джейк советует проверять в нескольких скринридерах: один, как и один браузер, полной картины не даёт.
В статье есть и вариант, где имя и сочетание клавиш разведены по разным span.
👉 @seniorFront
@frontend_mind | 467 |
| 18 |  🌈 Свечение внутри элемента, но из любого фона
Подсветить элемент изнутри проще всего через box-shadow с inset. Но такое свечение одноцветное. А если хочется радужный conic-gradient() или картинку?
Решение из статьи: накрыть элемент псевдоэлементом ::after с нужным фоном и маской оставить видимыми только края. Середина прозрачна, и сам элемент под ней виден.
Маска для левого и правого краёв (black в маске значит «видно»):
--inset: 30px;
mask-image: linear-gradient(
to right,
black 0%,
transparent var(--inset),
transparent calc(100% - var(--inset)),
black 100%
);
Вторая такая же маска с to bottom берёт верх и низ, а mask-composite: add объединяет обе полосы в рамку.
Накладка стоит на position: absolute и inset: 0, поэтому самому элементу нужен position: relative.
В статье есть демо, где оба вида свечения вспыхивают на случайных элементах.
👉 @seniorFront
@frontend_mind | 534 |
| 19 |  🚀 Два атрибута у картинки, и страница перестаёт прыгать
Пока картинка грузится, тег img занимает на странице нулевой размер. Когда файл приходит, блок раздвигается, и текст под ним резко уезжает вниз. Браузер заново пересчитывает раскладку, а читатель теряет строку.
Лечится это атрибутами width и height у img, например width=800 height=600. Браузер ещё до загрузки файла знает пропорции и сразу оставляет под картинку место. В замере автора это сэкономило около 12% процессорного времени.
Одна тонкость: в CSS картинке нужно задать width: 100% и height: auto. Тогда ширина подстроится под контейнер, а высота посчитается по пропорциям. Без height: auto изображения растянутся.
А ещё в статье объяснено, почему padding-bottom и aspect-ratio автор считает худшими вариантами и как самому замерить разницу в профайлере.
👉 @seniorFront
@frontend_mind | 546 |
| 20 |  Если вы занимаетесь ручным тестированием и хотите перейти к автоматизации, отдельных уроков по JavaScript и Playwright может быть недостаточно. Чтобы уверенно писать автотесты, важно понимать, как устроен весь процесс: от проверки API и интерфейса до запуска тестов в CI/CD.
Курс «Автоматизатор тестирования на JavaScript» поможет выстроить эту систему на практике. Вы научитесь писать автотесты для API и UI, работать с Jest и Playwright, проектировать тестовый фреймворк и запускать проверки с помощью Docker и GitHub CI.
Обучение включает живые занятия, домашние задания и обратную связь от преподавателей-практиков. В итоговом проекте вы создадите собственный тестовый фреймворк, разработаете не менее 10 функциональных автотестов и настроите отчёты о результатах.
Старт курса — 30 сентября. Пройдите вступительное тестирование и узнайте условия обучения: https://vk.cc/d2bLJo
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576 | 372 |
