💻 Псевдо-класс :nth-child() — новый взгляд на старые вещи

Часто наш опыт с фронтендом открывает новые возможности в привычных инструментах. Например, псевдо-класс :nth-child(), с которым я работаю уже много лет. Я узнал, что с его помощью можно стилизовать диапазон элементов без добавления дополнительных классов. Давайте разберёмся, как это сделать.

ℹ️ Вам нужно применить стили с 2-го по 4-й элемент в списке, но без дополнительных классов? Вот как это можно сделать

.awesome-box:nth-child(n+2):nth-child(-n+4) {
outline: 4px dashed coral;
outline-offset: 5px;
}

✅ Как это работает

— :nth-child(n+2): этот псевдо-класс начинается с 2-го элемента и увеличивается. То есть, это будет первым шагом для создания диапазона.

— :nth-child(-n+4): второй псевдо-класс ограничивает диапазон, делая максимальное значение равным 4. Важно, что использование -n позволяет начать отсчёт с большего числа и уменьшать его.

— Пересечение этих двух правил позволяет браузеру точно понять, какие элементы нужно стилизовать: с 2-го по 4-й.

📌 До этого я всегда добавлял классы или пытался прибегнуть к более сложным решениям с JS. Это оказалось полезным на реальных проектах, особенно когда нужно быстро применить стили к группе элементов.

🚪 Frontender's notes

⬆️ Scoped styles в HTML: компоненты с локальными стилями

Атрибут scoped для <style> позволяет писать стили которые применяются только внутри компонента. Это альтернатива сложным подходам с shadow DOM или неймингами классов для предотвращения конфликтов. Избавляет от необходимости писать универсальные классы или подключать сложные сторонние библиотеки для изоляции стилей.

ℹ️ Пример кода:

<div class="card">
<style scoped>
p { color: red; }
</style>
</div>

✅ Объяснение кода

— Мы добавляем элемент <style scoped> внутри компонента div с классом card

— Все стили, написанные внутри этого блока, будут применяться только к элементам внутри компонента, не затрагивая глобальные стили

— В примере, стиль color: red; применяется только к абзацу <p>, который находится внутри данного компонента card

📌 Я не часто использую scoped styles в своей работе (почти никогда) но в редких случаях это позволяло мне решить задачи более чисто.

🚪 Frontender's notes

😁 Вот и узнаем, кто был лишний

💥 xCode Journal

📰 Как быстро разобраться в коде или объяснить проект коллеге?

CodeTour — плагин, который превращает код в понятные пошаговые экскурсии.

ℹ️ С ним можно выделять важные строки, добавлять комментарии и формировать последовательность шагов для лёгкого понимания логики проекта. Независимо от того, объясняете вы проект новичку или возвращаетесь к своему коду через несколько месяцев, CodeTour помогает не потеряться.

📌 Простой способ структурировать объяснения и не тратить время на поиски, где что лежит в большом проекте.

🚪 Frontender's notes

🔕 Недооцененные возможности DevTools в Chrome и Edge

Все мы знакомы с DevTools — без них никуда. Обычно мы открываем их ради консоли или инспектора, но инструменты, скрытые под клавишей F12, обладают рядом полезных но не всем известных функций, которые даже опытные разработчики часто не используют. Пора немного заглянуть глубже и посмотреть, что ещё нам может предложить этот инструмент.

✅ Copy → JS Path / Selector / XPath
Не все знают о суперполезной фиче для быстрого копирования пути к элементу. Просто сделай правый клик по элементу, выбери Copy → JS Path, и DevTools сам сгенерирует точный путь. Отлично подходит для быстрого написания скриптов или проверки всего через консоль.

✅ Панель “Rendering” (Shift+P → «Show Rendering»)
Мало кто заходит сюда, а зря! На этой панели можно включить такие вещи, как подсветка layout shift’ов, слоёв компоновки, paint flashing и fps overlay. Если твой сайт «фризит» — это твоя суперсила для диагностики.

✅ Network → Throttling
Многие знают о «Slow 3G», но у этой функции гораздо больше потенциала. Ты можешь настроить свои параметры, чтобы тестировать поведение приложения в реальных условиях — например, как работает сайт в 4G на движущемся лифте или на Wi-Fi в метро.

✅ Coverage
Ещё одна полезная фича: Shift+P → «Show Coverage». Она показывает, какой JS и CSS на самом деле используется на странице. Если хочешь узнать, сколько лишнего ты грузишь в бандле — это то, что тебе нужно.

✅ Recorder (новинка)
Теперь в DevTools есть Recorder. С помощью этой функции можно записывать сценарии пользовательских действий и воспроизводить их. Идеально для тестирования, отладки багов или демонстраций. Записал — воспроизвёл — сразу видишь, что не так с логикой.

✅ Панель «Performance Insights» (особенно круто в Edge)
Если ты ещё не пробовал Performance Insights, то в Edge эта панель — настоящая находка. Она показывает метрики Web Vitals, layout shifts и долгие задачи прямо на графике. Больше не нужно вручную копаться в таймлайне — все данные уже разложены по полочкам.

📌 DevTools — это не просто инструменты для инспектора стилей. Это полноценный набор для анализа, профилирования и оптимизации фронта. Если освоишь хотя бы половину, отладка станет станет куда более эффективной.

🚪 Frontender's notes

🤖 LLM-инструменты для разработчиков: кто действительно помогает, а кто просто «играет в ИИ»

В последние годы инструменты с большими языковыми моделями (LLM) для разработчиков стали настоящим трендом. GitHub Copilot, Cody, Windsurf, Cursor, Continue, Pieces, Codeium — каждый из них обещает «в 10 раз ускорить разработку» и «освободить от рутины». Но давайте быть честными — далеко не все из них действительно экономят ваше время и усилия.

➕ Что реально работает:

• GitHub Copilot
Лучший инструмент для подсказок и автокомплита. Понимает контекст функции и предлагает адекватные продолжения.
Но вот минус — часто предлагает «почти правильный» код, который нужно тщательно проверять. Полностью полагаться на него не стоит.

• Cursor / Windsurf
IDE с встроенным LLM. Ты можешь взаимодействовать с кодом прямо внутри проекта. Например, сказать: «переделай этот хук под Zustand», и — вуаля — работает!
Это не просто плагин, а настоящая интеграция с вашей средой разработки.

• Cody (Sourcegraph)
Прекрасно справляется с большими кодовыми базами. Читает весь репозиторий, понимает зависимости и может ответить на вопросы вроде «где используется эта функция?»
Это особенно полезно для крупных проектов, где нужно быстро ориентироваться в коде.

❌ Что пока сыро:

— Например, плагины для VSCode, которые просто подключают ChatGPT. Они не понимают контекста проекта, путаются в импортax, иногда предлагают код, который не компилируется. Эти инструменты вряд ли сильно помогут в реальной работе.

— LLM уже не игрушка. Это совершенно новый способ взаимодействия с кодом. Но эффективность зависит от того, насколько хорошо этот инструмент интегрирован в рабочий процесс.

📌 Когда AI становится частью вашей IDE, а не просто чат-ботом, он начинает действительно помогать, а не просто давать бесполезные подсказки. Сейчас стоит смотреть на инструменты, которые глубже интегрируются в ваш код и контекст, а не на те, что просто дают подсказки из интернета.

🚪 Frontender's notes

🤩 Фронтенд разрабы, вам пригодится

Это коллекция системных CSS-шрифтов, аккуратно отсортированных по типографическим семействам для всех современных ОС.

— Никаких загрузок и мерцаний — всё рендерится мгновенно;
— Подборки под serif, sans, mono и прочие классы;
— Идеально для сайтов, где важна скорость и нативный вид без Google Fonts.

✖️ xCode Journal

💼 Как вести себя на собеседовании, если не знаешь ответа?

На собеседованиях часто возникают ситуации, когда тебя спрашивают что-то, что ты не знаешь. Все мы в такой ситуации бывали. Что делать в этом случае?

❌ Что делать не стоит:

• Уходить в молчание
Молчание — это плохой выбор. Даже если ты не знаешь ответа, не стоит просто сидеть и молчать.

• Пытаться угадать наугад
Глупые догадки — не лучший способ. Лучше быть честным, чем вводить собеседующего в заблуждение.

• Оправдываться, мол «на проекте это не нужно»
Это не оправдание. Собеседование — не место для объяснений по поводу того, почему ты не сталкивался с этой задачей.

➕ Что стоит сделать:

• Признайся, что не знаешь
Это нормально. Мы все не можем знать всего. Признание своей неосведомленности покажет, что ты честен и открыт.

• Покажи ход мыслей
Часто интервьюеру важнее понять, как ты размышляешь, а не какой ответ ты даешь. Процесс мышления важен: «Я не использовал эту фичу, но думаю, что она работает так-то, потому что…».

• Предложи, как бы ты узнал ответ
Если не знаешь, покажи, как бы ты подошел к решению: «Я бы сначала заглянул в документацию, а потом попробовал бы воспроизвести это в песочнице».

• Сохраняй уверенность
Не зная ответа, не теряй уверенности в себе. Это не снижает твоего профессионализма. Важно, как ты справляешься с ситуацией, а не сам факт незнания.

📌 Лично я всегда признавался, если не знал ответа, и объяснял, как бы я подошел к решению. Это, во-первых, показывало мою способность честно оценивать свои знания, а во-вторых, демонстрировало готовность искать ответы. В реальной работе часто приходится сталкиваться с незнанием каких-то деталей, но главное — это умение найти решение.

🚪 Frontender's notes

🤣 Хорошие новости: до замены офисных работяг ИИ еще далеко

💥 xCode Journal

📝 Как скрыть пустые ячейки в таблице с помощью свойства empty-cells

При работе с таблицами часто сталкиваешься с пустыми ячейками, особенно если данные неполные. Лично меня это сильно не беспокоило, но иногда такие ячейки всё же могут портить внешний вид. Вот тут и приходит на помощь свойство empty-cells в CSS.

ℹ️ Рассмотрим на примере таблицы с именем и возрастом игроков:

<body>
<table style="empty-cells: hide;">
<tbody>
<tr>
<th>Игрок</th>
<th>Возраст</th>
</tr>
<tr>
<td>Головин</td>
<td>29</td>
</tr>
<tr>
<td>Пиняев</td>
<td></td>
</tr>
<tr>
<td>Кисляк</td>
<td></td>
</tr>
<tr>
<td>Сафонов</td>
<td>26</td>
</tr>
</tbody>
</table>
</body>

✅ Что это даёт?

— Иногда данные в столбце могут быть отсутствующими, и это будет выглядеть как пустые ячейки. Два игрока не указали свой возраст, и ячейки для их возраста пустые. Это может немного «разбалансировать» таблицу. Применяем свойство empty-cells с значением hide, чтобы скрыть такие пустые ячейки.

— Как только мы добавляем это свойство, пустые ячейки исчезают с экрана. Браузер больше не будет их отображать, но сама ячейка остаётся на месте. Если вы откроете инструменты разработчика, то заметите, что пустая ячейка всё ещё присутствует в разметке, но её визуальное отображение скрыто. В чем секрет? Это свойство не позволяет отображаться фону и рамкам этих ячеек.

— Использование empty-cells: hide позволяет сделать таблицы визуально чище и аккуратнее, не затрудняя при этом работу с данными. Это простой способ скрыть пустые ячейки, не переписывая разметку и не добавляя сложных решений.

📌 Используется не очень часто но возможно вам потребуется для какой либо специфической задачи.

🚪 Frontender's notes

⛓ Как синхронизировать настройки VS Code на нескольких устройствах?

Плагин Settings Sync для VS Code — это настоящий спасатель! Он автоматически синхронизирует все ваши настройки между устройствами.

ℹ️ Это значит, что на каждом компьютере у вас будет одинаковая рабочая среда, и не нужно каждый раз вручную копировать конфиги. Всё работает как часы, и больше не нужно тратить время на настройку всего заново.

📌 Как маленький лайфхак — можно легко поделиться своими настройками с коллегами.

🚪 Frontender's notes

🦾 Нашли для вас бесплатный визуальный редактор разметки на гридах и флексбоксах

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

Фронтендеры, вам посвящается

✖️ xCode Journal

👤 Использование атрибута enterkeyhint для улучшения пользовательского интерфейса

Когда работаем с формами на мобильных устройствах, часто сталкиваемся с тем, что виртуальная клавиатура отображается по своему усмотрению. Мы, как фронтендеры, не можем сильно повлиять на это, но есть один небольшой, но полезный способ улучшить взаимодействие с пользователем — это атрибут enterkeyhint.

ℹ️ Давайте рассмотрим, как можно использовать этот атрибут в реальной ситуации

Например, у нас есть форма с полями для ввода логина и пароля. Если мы добавим атрибут enterkeyhint="send" к полю ввода пароля, то подпись на кнопке изменится на «Отправить»:

<body>
<form>
<div class="field">
<label class="field__label" for="login">Логин</label>
<input class="field__input" type="text" id="login">
</div>
<div class="field">
<label class="field__label" for="password">Пароль</label>
<input class="field__input" type="password" id="password" enterkeyhint="send">
</div>
<button type="submit">Отправить</button>
</form>
</body>

✅ Что это даёт?

— В правом нижнем углу виртуальной клавиатуры появляется кнопка с надписью «Отправить», а если язык интерфейса — английский, то будет показано «Send». Это позволяет сделать интерфейс более интуитивно понятным.

— Важно понимать, что нельзя выбрать произвольный текст для кнопки. Всего поддерживаются семь значений: enter, done, go, next, previous, search и send. Хотя их не так много, этого достаточно, чтобы улучшить взаимодействие пользователя с интерфейсом.

📌 Это простое изменение позволяет сделать пользовательский опыт более контекстно-ориентированным. Для пользователя это может быть маленьким, но приятным улучшением, которое делает форму гораздо удобнее. А для нас — это простой и быстрый способ улучшить UI без лишних усилий.

🚪 Frontender's notes

💼 Сеньор ≠ Лидер: разделение ролей в команде

Многие считают, что стать сеньором — это неизбежный шаг к тимлиду, но на самом деле, это совершенно разные роли. Я тоже долго не мог понять, почему сеньоры и лиды — это не одно и то же, пока не столкнулся с реальностью управления проектами.

👤 Кто такой сеньор?

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

🔫 Преимущества сеньора:

— Знание стеков и технологий на глубоком уровне
— Способность решать сложные задачи
— Опыт в оптимизации и устранении багов
— Менторство и поддержка менее опытных коллег

👥 Кто такой лидер?

Лидер — это не только про код, но и про управление людьми, процессами и проектами. Лидер отвечает за распределение задач, коммуникацию с бизнесом, развитие команды и мотивацию сотрудников.

🔫 Что важно для лидера:

— Ответственность за проект и команду
— Навыки коммуникации с бизнесом и разработчиками
— Мотивация и развитие команды
— Умение принимать решения и разрешать конфликты

📌 Для меня стало очевидно, что сеньор — это мастера кода, а лидер — мастера людей. Каждый из этих путей ценен, но важен для разных целей. Будучи сеньором, можно не стремиться к лидерству, если хочется углубиться в технические детали и стать экспертом. В свою очередь, лидер может не быть глубоко вовлечён в код, но быть отличным организатором и человеком, который ведет команду к успеху.

🚪 Frontender's notes

➡️ IntersectionObserver: более эффективный подход к загрузке контента

Задачи вроде ленивой загрузки изображений, анимаций и других тяжелых элементов становятся обычным делом. И тут на помощь приходит IntersectionObserver, который с каждым годом набирает популярность в кругах опытных разработчиков. Этот API предлагает способ следить за видимостью элементов на экране без переполнения ресурсов.

ℹ️ Пример использования IntersectionObserver для ленивой загрузки изображений:

const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.getAttribute('data-src');
img.removeAttribute('data-src');
observer.unobserve(img);
}
});
}, { threshold: 0.1 });

images.forEach(img => observer.observe(img));

✅ Объяснение кода

— Мы используем IntersectionObserver, чтобы отслеживать, когда изображение попадает в область видимости пользователя.

— Как только изображение становится видимым (согласно опции threshold: 0.1, то есть 10% изображения становится видимым), мы подгружаем его с помощью data-src.

— После загрузки изображения мы снимаем его с наблюдения, чтобы избежать лишней работы для уже загруженных картинок.

📌 Использование IntersectionObserver — это не просто фича для ленивой загрузки. Она открывает возможности для повышения производительности в реальных приложениях, с минимальными затратами. Внедрение таких вещей значительно улучшает общую картину UX, особенно на мобильных устройствах. Если ещё не использовали то думаю стоит как миимум пощупать эту штуку.

🚪 Frontender's notes

🤣 К вопросам от эйчаров готов на 100%

💥 xCode Journal

👤 Код-ревью без стресса: как давать полезную обратную связь

Код-ревью — это не только о том, чтобы найти ошибки. Задача в том, чтобы помочь улучшить качество кода и сделать процесс более эффективным. Но вот как избежать перегибов, которые превращают проверку в стресс для обеих сторон?

✅ Фокус на главном
Когда вы проверяете код, старайтесь избегать ловушки фокусировки на мелочах. Ошибки в стиле или опечатки можно легко исправить позже, но если проблемы касаются архитектуры или производительности — это нужно проработать сразу. Не тратьте время на мелкие недочёты, когда перед вами ключевые вопросы.

✅ Автоматизация и инструменты
Для качественного ревью важно использовать современные инструменты. Статический анализ, такие как SonarQube или Psalm, поможет вам быстро поймать баги, а системы CI/CD вроде GitHub Actions или GitLab CI значительно упростят проверку. Линтеры тоже не лишние — они автоматизируют стилистику и помогают избежать мелких ошибок. Кроме того, кросс-ревью с другими коллегами улучшает качество кода и ускоряет обработку MR. Это также способствует профессиональному росту всей команды.

✅ Прозрачность и чёткость обратной связи
Когда дело доходит до комментариев, важно соблюдать дружелюбный и чёткий стиль. Письменная коммуникация в код-ревью — это не только про технические замечания, но и про эмоции. Старайтесь выражать свои мысли точно и без лишней критики.

✅ Качество кода: на что стоит обратить внимание
Наконец, код-ревью должно быть ориентировано на основные стандарты: соответствие код-стайлу, наличие тестов, соблюдение архитектурных принципов. Обязательно оставляйте подробные комментарии, чтобы другие члены команды могли понять, что именно нужно улучшить и почему.

📌 Правильный подход к код-ревью не только помогает улучшить качество кода, но и делает работу приятной и эффективной. Используйте автоматизацию, не зацикливайтесь на мелочах и всегда поддерживайте хорошую атмосферу в команде. Когда вы уважаете время друг друга и даёте конструктивную обратную связь, все выигрывают.

🚪 Frontender's notes