На собеседованиях часто возникают ситуации, когда тебя спрашивают что-то, что ты не знаешь. Все мы в такой ситуации бывали. Что делать в этом случае?
• Уходить в молчание
Молчание — это плохой выбор. Даже если ты не знаешь ответа, не стоит просто сидеть и молчать.
• Пытаться угадать наугад
Глупые догадки — не лучший способ. Лучше быть честным, чем вводить собеседующего в заблуждение.
• Оправдываться, мол «на проекте это не нужно»
Это не оправдание. Собеседование — не место для объяснений по поводу того, почему ты не сталкивался с этой задачей.
• Признайся, что не знаешь
Это нормально. Мы все не можем знать всего. Признание своей неосведомленности покажет, что ты честен и открыт.
• Покажи ход мыслей
Часто интервьюеру важнее понять, как ты размышляешь, а не какой ответ ты даешь. Процесс мышления важен: «Я не использовал эту фичу, но думаю, что она работает так-то, потому что…».
• Предложи, как бы ты узнал ответ
Если не знаешь, покажи, как бы ты подошел к решению: «Я бы сначала заглянул в документацию, а потом попробовал бы воспроизвести это в песочнице».
• Сохраняй уверенность
Не зная ответа, не теряй уверенности в себе. Это не снижает твоего профессионализма. Важно, как ты справляешься с ситуацией, а не сам факт незнания.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤13🐳2
При работе с таблицами часто сталкиваешься с пустыми ячейками, особенно если данные неполные. Лично меня это сильно не беспокоило, но иногда такие ячейки всё же могут портить внешний вид. Вот тут и приходит на помощь свойство 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 позволяет сделать таблицы визуально чище и аккуратнее, не затрудняя при этом работу с данными. Это простой способ скрыть пустые ячейки, не переписывая разметку и не добавляя сложных решений.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤7👍7
This media is not supported in your browser
VIEW IN TELEGRAM
Плагин Settings Sync для VS Code — это настоящий спасатель! Он автоматически синхронизирует все ваши настройки между устройствами.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤10👍5🐳1
Forwarded from xCode Journal
This media is not supported in your browser
VIEW IN TELEGRAM
Выбираете нужный шаблон и подстраиваете все под себя, а потом можно сразу скопировать HTML и CSS. Есть удобное превью и даже подсказки по свойствам. Короче, идеально для быстрого прототипирования.
Фронтендеры, вам посвящается
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥13👎2👀2
Когда работаем с формами на мобильных устройствах, часто сталкиваемся с тем, что виртуальная клавиатура отображается по своему усмотрению. Мы, как фронтендеры, не можем сильно повлиять на это, но есть один небольшой, но полезный способ улучшить взаимодействие с пользователем — это атрибут
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. Хотя их не так много, этого достаточно, чтобы улучшить взаимодействие пользователя с интерфейсом.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15❤8👀2
Многие считают, что стать сеньором — это неизбежный шаг к тимлиду, но на самом деле, это совершенно разные роли. Я тоже долго не мог понять, почему сеньоры и лиды — это не одно и то же, пока не столкнулся с реальностью управления проектами.
Сеньор — это тот, кто достиг вершины в своей технической экспертизе. Он отлично знает свой стек технологий и решает задачи высокой сложности. Он также способен работать с архитектурой, менторить менее опытных коллег и устранять баги с оптимизацией.🔫 Преимущества сеньора:
— Знание стеков и технологий на глубоком уровне
— Способность решать сложные задачи
— Опыт в оптимизации и устранении багов
— Менторство и поддержка менее опытных коллег
Лидер — это не только про код, но и про управление людьми, процессами и проектами. Лидер отвечает за распределение задач, коммуникацию с бизнесом, развитие команды и мотивацию сотрудников.🔫 Что важно для лидера:
— Ответственность за проект и команду
— Навыки коммуникации с бизнесом и разработчиками
— Мотивация и развитие команды
— Умение принимать решения и разрешать конфликты
Please open Telegram to view this post
VIEW IN TELEGRAM
1❤7👍6👎3
Задачи вроде ленивой загрузки изображений, анимаций и других тяжелых элементов становятся обычным делом. И тут на помощь приходит IntersectionObserver, который с каждым годом набирает популярность в кругах опытных разработчиков. Этот API предлагает способ следить за видимостью элементов на экране без переполнения ресурсов.
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.
— После загрузки изображения мы снимаем его с наблюдения, чтобы избежать лишней работы для уже загруженных картинок.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10❤3👍3🐳1
Код-ревью — это не только о том, чтобы найти ошибки. Задача в том, чтобы помочь улучшить качество кода и сделать процесс более эффективным. Но вот как избежать перегибов, которые превращают проверку в стресс для обеих сторон?
✅ Фокус на главном
Когда вы проверяете код, старайтесь избегать ловушки фокусировки на мелочах. Ошибки в стиле или опечатки можно легко исправить позже, но если проблемы касаются архитектуры или производительности — это нужно проработать сразу. Не тратьте время на мелкие недочёты, когда перед вами ключевые вопросы.✅ Автоматизация и инструменты
Для качественного ревью важно использовать современные инструменты. Статический анализ, такие как SonarQube или Psalm, поможет вам быстро поймать баги, а системы CI/CD вроде GitHub Actions или GitLab CI значительно упростят проверку. Линтеры тоже не лишние — они автоматизируют стилистику и помогают избежать мелких ошибок. Кроме того, кросс-ревью с другими коллегами улучшает качество кода и ускоряет обработку MR. Это также способствует профессиональному росту всей команды.✅ Прозрачность и чёткость обратной связи
Когда дело доходит до комментариев, важно соблюдать дружелюбный и чёткий стиль. Письменная коммуникация в код-ревью — это не только про технические замечания, но и про эмоции. Старайтесь выражать свои мысли точно и без лишней критики.✅ Качество кода: на что стоит обратить внимание
Наконец, код-ревью должно быть ориентировано на основные стандарты: соответствие код-стайлу, наличие тестов, соблюдение архитектурных принципов. Обязательно оставляйте подробные комментарии, чтобы другие члены команды могли понять, что именно нужно улучшить и почему.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5👍2
Алоха, коллеги! 👋
Канал растёт, я уже почти 8 лет веду свой канал и хочу сделать один небольшой шаг, который поможет лучше понимать вас и то, что здесь действительно ценно. Подготовил короткую форму - всего пару кликов, но для меня это важно.
❓Снизу я задам вам 4 вопроса, давайте проявим максимальную активность и познакомимся поближе.
Канал растёт, я уже почти 8 лет веду свой канал и хочу сделать один небольшой шаг, который поможет лучше понимать вас и то, что здесь действительно ценно. Подготовил короткую форму - всего пару кликов, но для меня это важно.
❓Снизу я задам вам 4 вопроса, давайте проявим максимальную активность и познакомимся поближе.
❤6🔥2⚡1🐳1
Чем сейчас занимаетесь?
Anonymous Poll
16%
учусь/не работаю
68%
работаю в IT
2%
работаю в сфере ИИ
9%
работаю в найме
3%
работаю на фрилансе
2%
предприниматель
❤2
Если работаете уже в айтишке или планируете то какой Грейд
Anonymous Poll
15%
Еще не работаю но хочу
3%
Трейни
12%
Джун
36%
Мидл
23%
Сеньор
8%
Тех или Тим-Лид
3%
Босс покрупнее
🔥4❤2🐳1
Сколько зарабатываете?
Anonymous Poll
18%
не зарабатываю
1%
до 15.000
2%
от 15.000 до 30.000
4%
от 30.000 до 50.000
7%
от 50.000 до 80.000
10%
от 80.000 до 120.000
15%
от 120.000 до 180.000
43%
от 180.000
😁16👀7❤2🐳2
Forwarded from xCode Journal
Такую статистику показало новое исследование. Больше половины работодателей в России сталкивались с приукрашенным резюме у кандидатов. При этом чаще всего врут разработчики ПО, за ними идут тестировщики и руководители проектов.
А вот меньше всего обманывают эйчаров датасаентисты, аналитики, сетевые инженеры и специалисты технической поддержки.
Please open Telegram to view this post
VIEW IN TELEGRAM
😁8👍5❤2🔥1
Баланс: pet-проекты vs работа
Каждый разработчик хоть раз ловил себя на мысли: “Хочу сделать свой проект. Но после работы нет ни сил, ни желания писать код.”
И вот тут начинается борьба между желанием развиваться и желанием просто отдохнуть.
✅ Pet-проекты — это топливо для роста.
Ты пробуешь новые технологии без дедлайнов, без легаси и без код-ревью с “а зачем тут вообще useMemo?”.
Это та самая зона, где возвращается интерес к разработке, особенно когда на работе монотонные задачи.
Но.
🙅♂️ Pet-проект не должен превращаться во вторую работу.
Если ты после 8 часов продакшена садишься за ещё 4 часа кода — это не развитие, это выгорание в красивой обёртке.
И так: как найти баланс?:
Итог:
Работа — даёт стабильность.
Pet-проекты — дают развитие.
Отдых — даёт энергию, чтобы выдержать первые два пункта.
Главное — не забывать, что кодить “в кайф” иногда важнее, чем кодить “всё время”.
Каждый разработчик хоть раз ловил себя на мысли: “Хочу сделать свой проект. Но после работы нет ни сил, ни желания писать код.”
И вот тут начинается борьба между желанием развиваться и желанием просто отдохнуть.
Ты пробуешь новые технологии без дедлайнов, без легаси и без код-ревью с “а зачем тут вообще useMemo?”.
Это та самая зона, где возвращается интерес к разработке, особенно когда на работе монотонные задачи.
Но.
Если ты после 8 часов продакшена садишься за ещё 4 часа кода — это не развитие, это выгорание в красивой обёртке.
И так: как найти баланс?:
🔘 Делай pet-проекты короткими и законченными.
Маленький тул или демо — лучше, чем вечный “стартап мечты”.🔘 Ставь себе ограничение по времени.
Например, кодишь только 2 вечера в неделю.🔘 Не чувствуй вины, если не делаешь ничего.
Отдых — тоже часть продуктивности.
Мой личный опыт:
Pet-проекты реально помогают не терять интерес к коду.
Но только когда они не конкурируют с отдыхом, а заменяют бессмысленный скролл YouTube чем-то, что тебя вдохновляет.
Итог:
Работа — даёт стабильность.
Pet-проекты — дают развитие.
Отдых — даёт энергию, чтобы выдержать первые два пункта.
Главное — не забывать, что кодить “в кайф” иногда важнее, чем кодить “всё время”.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤22🔥4🐳3
Storage API в 2025: что, где и когда хранить
Хранение данных в браузере — это не просто localStorage.setItem().
Современные API дают кучу способов работать с кэшем, оффлайном и большими объёмами данных.
Главное — понимать, какой инструмент для чего.
💛 LocalStorage — для простого и быстрого
💛 IndexedDB — когда данных много
💛 Cache Storage API — для сетевых запросов
💛 Best Practices
📍 Итог:
Браузер — уже не просто “тонкий клиент”.
Он умеет кэшировать, хранить и синхронизировать данные не хуже бэкенда.
Главное — не пихать всё в localStorage и думать, что этого достаточно
Хранение данных в браузере — это не просто localStorage.setItem().
Современные API дают кучу способов работать с кэшем, оффлайном и большими объёмами данных.
Главное — понимать, какой инструмент для чего.
- Объём: до ~5MB
- Синхронный API (блокирует поток)
- Только строки✅ Идеально для:
- Настроек интерфейса (тема, язык)
- Состояния, не критичного к потере🙅♂️ Не подходит для:
- Частых записей
- Больших данных
- Асинхронных операций🔘 Частая ошибка: хранить JWT или токены авторизации.
Не делай так — XSS и ты в опасности. Лучше HttpOnly cookie.
- Асинхронная, ключ-значение база прямо в браузере
- Поддерживает сложные структуры (объекты, Blob, файлы)
- Работает оффлайн✅ Идеально для:
- SPA с оффлайн-режимом
- Кеширования запросов
- Локальных кэшей для heavy UI (например, таблицы на тысячи строк)🙅♂️ Минусы:
- API громоздкий (лучше использовать обёртки вроде Dexie.js)
- Не всегда очевидное управление версиями
Используется вместе с Service Worker.
Позволяет сохранять ответы от fetch и выдавать их оффлайн.✅ Идеально для:
- PWA и offline-first приложений
- Кэширования статики (CSS, JS, картинки)
- Быстрых перезапусков SPA🙅♂️ Не путай с LocalStorage — это не просто “сохранил строку”, а полноценный HTTP-кеш.
🔘 Комбинируй: IndexedDB для данных, Cache для запросов, LocalStorage для мелочей.🔘 Удаляй устаревшие версии данных (особенно при обновлении схем).🔘 Не храни чувствительные данные — браузер ≠ сейф.🔘 Проверяй лимиты хранилища (navigator.storage.estimate() — underrated).🔘 Используй Background Sync, если нужно синхронизировать оффлайн-данные.
Браузер — уже не просто “тонкий клиент”.
Он умеет кэшировать, хранить и синхронизировать данные не хуже бэкенда.
Главное — не пихать всё в localStorage и думать, что этого достаточно
Please open Telegram to view this post
VIEW IN TELEGRAM
❤15👍5🔥4👀3🐳1
Quantum CSS и ML-оптимизация верстки — будущее фронтенда?
Звучит как хайп, но тренд реальный:
всё чаще ML-алгоритмы применяются не только для генерации кода, но и для оптимизации CSS, DOM и layout-процессов.
Что такое Quantum CSS
ML-оптимизация верстки
Что нас ждёт
Мой вывод
А как ты относишься к идее ML-CSS?
Хотел бы, чтобы браузер сам решал, какие стили тебе нужны — или всё-таки контроль должен оставаться за человеком?
Звучит как хайп, но тренд реальный:
всё чаще ML-алгоритмы применяются не только для генерации кода, но и для оптимизации CSS, DOM и layout-процессов.
Что такое Quantum CSS
Если коротко — это концепция (а не фреймворк), где браузер или сборщик анализирует и оптимизирует стили на уровне движка, не дожидаясь ручной оптимизации от разработчика.
Mozilla когда-то начала этот путь с Project Quantum (оптимизация движка Firefox), и идея живёт:
браузер сам решает, как рендерить части DOM параллельно и какие CSS-правила реально нужны в viewport.
Главная цель:
ускорить перерисовку и минимизировать “CSS-инфляцию” — когда у проекта тысячи неиспользуемых классов и стилей.
ML-оптимизация верстки
ML-модели уже умеют анализировать структуру страницы и:
выявлять дублирующиеся CSS-паттерны;
предлагать оптимальную архитектуру классов (например, по BEM или atomic-подходу);
предсказывать layout shifts и предлагать фиксы для CLS;
автоматически “чистить” стили после деплоя (CSS pruning с учётом поведения реальных пользователей).
Что нас ждёт
Через пару лет мы можем прийти к IDE, которая:💛 отслеживает реальное использование на проде,💛 сама обучается оптимизировать layout.
Типа “GitHub Copilot для CSS”, но с реальной экономией трафика и FPS.
Мой вывод
CSS медленно превращается из “ручного ремесла” в систему адаптивной оптимизации.
И если сейчас мы думаем “как проще написать стили”,
то скоро будем думать “как обучить модель писать и обслуживать их за нас”.
А как ты относишься к идее ML-CSS?
Хотел бы, чтобы браузер сам решал, какие стили тебе нужны — или всё-таки контроль должен оставаться за человеком?
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥11❤2👎2🐳1👀1