🫳 Для вас браузерная игрушка для обучения командам Vim

В игре есть разные режимы, куча задач: от перемещений по тексту до редактирования и поиска.

Тренируемся тут

✖️ xCode Journal

🤚 Как научиться быть уверенным в своём коде

Сложные задачи, множество технологий и фреймворков, постоянная угроза багов и необходимости адаптировать код под новые требования. Всё это может вызывать сомнения и даже неуверенность в своём коде. Как научиться справляться с этим и повышать уверенность в своей работе? Давай разберемся, как научиться быть уверенным в своём коде и не бояться принимать решения.

➕ Не бойся ошибок — это часть пути

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

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

➕ Проверяй свои решения с коллегами

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

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

➕ Пробуй решать задачи поэтапно

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

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

➕ Отслеживай свой прогресс и учись на своих ошибках

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

📌 Неуверенность в своём коде — это нормальная часть пути развития. Все мы иногда сомневаемся, но важно продолжать работать, учиться и не бояться просить помощи. Со временем ты научишься быть более уверенным в своих решениях и в своём коде.

🚪 Frontender's notes

⭐️ Что нового в Chrome DevTools 2025?

Никто не может отрицать, что Chrome DevTools стал незаменимым инструментом для фронтенд-разработчиков. В последние обновления DevTools добавили несколько фич, которые действительно меняют картину и значительно упрощают повседневную работу.

➕ Performance Insights 2.0

Раньше для того, чтобы понять, почему страница тормозит, нам приходилось долго и упорно искать узкие места, но теперь Chrome стал намного умнее. В новой версии DevTools есть подробный анализ производительности, который не только показывает графики, но и дает точные рекомендации.

✅ Что изменилось

— Chrome теперь подскажет, какие узлы тормозят перерисовку
— Вы увидите проблемы с reflow и repaint без необходимости вручную искать их в графиках
— Появились рекомендации, как сократить количество лишних рендеров, что позволяет улучшить производительность без глубоких исследований

➕ Новый инспектор анимаций

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

✅ Что можно делать теперь

— Замедлять анимации и визуализировать их таймлайн
— Сравнивать разные keyframes и анализировать, как анимация ведет себя на разных этапах
— Проверять кривые Безье и анализировать плавность переходов без сторонних инструментов, таких как Lottie Inspector

➕ Подсветка больших DOM-узлов и CSS Scope Debugging

— Когда в DOM появляются элементы с тысячами дочерних узлов, это может привести к огромным задержкам. Теперь DevTools подскажет, где именно могут возникать лаги, если структура DOM слишком громоздкая.

— С появлением новых фич в CSS (например, :scope и scoped-стилей), стало сложнее отслеживать, какие правила применяются к конкретному элементу. В DevTools теперь можно легко фильтровать стили по scope.

📌 В общем, эти обновления в Chrome DevTools — это неплохая помощь для тех кто работает с крупными и сложными интерфейсами.

🚪 Frontender's notes

📣 Когда и зачем использовать never в TypeScript

Тип never — значение, которое никогда не встречается. Это очень специфическая часть системы типов, но она обладает мощной функциональностью. Но что это за тип и почему его стоит использовать? Часто на него просто не обращают внимания, а зря. Давайте разберёмся, зачем never так важен и как его применять.

🔎 Примеры ситуаций, где используется never:

— Функция, которая выбрасывает исключение
— Функция, которая никогда не завершится (например, бесконечный цикл)
— Ситуация, которая логически невозможна в программе

ℹ️ Когда и где never полезен

— Проверка полноты условий: тип never помогает убедиться, что все возможные варианты были учтены. Например, при использовании switch с объединённым типом, если мы забудем обработать какой-то вариант, TypeScript сразу поднимет ошибку.

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

📝 Пример кода

type Shape = "circle" | "square";

function area(shape: Shape) {
switch (shape) {
case "circle": return 3.14;
case "square": return 4;
default:
const check: never = shape; // Ошибка, если добавим новый вариант и не обработаем
}
}

📌 Тип never может показаться мелочью, но его применение серьёзно улучшает качество и безопасность кода. Когда вы работаете с большими типами данных или комплексной логикой, never помогает избежать ошибок на самых ранних этапах разработки. Так что, если вы ещё не используете его в проекте — попробуйте, это действительно может сделать ваш код чище и безопаснее!

🚪 Frontender's notes

🕔 Нативные таймауты для fetch() — теперь проще, чем когда-либо

Нам часто приходится сталкиваться с необходимостью устанавливать таймауты для fetch(). До недавнего времени приходилось прибегать к костылям вроде Promise.race(), или писать дополнительный код с AbortController. Но теперь в JavaScript появилась нативная возможность — метод AbortSignal.timeout(), который позволяет просто и удобно задавать таймауты для запросов.

ℹ️ Как это работает?

try {
const response = await fetch("https://api.example.com/data", {
signal: AbortSignal.timeout(3000) // 3 секунды
});
const data = await response.json();
console.log(data);
} catch (err) {
console.error("Запрос превысил лимит времени", err);
}

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

— В этом примере мы используем AbortSignal.timeout(3000) для установки таймаута в 3 секунды. Это означает, что если ответ не придёт за это время, запрос будет автоматически отменён.

— Если запрос завершится успешно, данные выводятся в консоль.

— Если время ожидания истечёт, мы ловим ошибку и выводим сообщение о том, что запрос превысил лимит времени.

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

🚪 Frontender's notes

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

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

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

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

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

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

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

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

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

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

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

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

🚪 Frontender's notes

💬 Округление значений в CSS — когда точность важна

Посмотрев на свойство margin в инструментах разработчика, мы можем заметить, что оно выводит дробную часть — 1.25rem. Как бы это ни казалось точным, для меня такие значения порой раздражают. Если вы, как и я, хотите избавиться от десятичных значений в CSS, у нас есть отличная новинка: математическая функция round(). Используя round(), можно округлить число, а с помощью функции to-zero, избавиться от дробной части.

ℹ️ Как это работает:

html {
font-size: 106.25%; /* это будет равно 17px */
}

.awesome-block {
width: 2rem;
height: 2rem;
background-color: tomato;
box-sizing: border-box;
margin: round(to-zero, 1.25rem, 1px);
}

📌 Теперь значение свойства будет идеально округленным без лишней десятичной части. Хотя это не всегда критично, но знать про эту функцию в целом не помешает.

🚪 Frontender's notes

💻 Псевдо-класс :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