👩‍💻 Хочешь держать все проекты под рукой?

Project Manager — позволяет переключаться между разными проектами внутри одного экземпляра VS Code. Просто откройте боковую панель и выберите нужный. Можно группировать, давать имена, закреплять самые частые, всё максимально просто и быстро.

📣 Code Ready | #vscode

Определяем системную тему пользователя!

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

Проверим текущие настройки:

const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
console.log(isDark ? "🌙 Тёмная тема" : "☀️ Светлая тема");

Реагируем на изменение темы:

const mq = window.matchMedia("(prefers-color-scheme: dark)");

mq.addEventListener("change", e => {
  document.body.dataset.theme = e.matches ? "dark" : "light";
  console.log(`🎨 Тема: ${e.matches ? "dark" : "light"}`);
});

И сразу применяем тему при загрузке:

document.body.dataset.theme = isDark ? "dark" : "light";

🔥 Такой пример полезен для практики работы с браузерными API, реакцией на системные события и динамическим управлением интерфейсом.

📣 Code Ready | #практика

👩‍💻 Масштабируй весь интерфейс одной строкой!

Все размеры заданы в rem?
Значит, масштабировать дизайн можно одним изменением:

html {
  font-size: 62.5%; /* 1rem = 10px при базовых 16px */
}

Хочешь увеличить всю страницу на 20% — достаточно поменять одно значение:

html {
  font-size: 75%;
}

Всё: шрифты, отступы, кнопки, автоматически подстроятся, если их размеры заданы в rem:

h1 {
  font-size: 2.4rem; /* 24px при font-size:10px */
}

.button {
  padding: 1.2rem 2rem;
}

Подходит для дизайн-систем, адаптива и гибкой настройки интерфейса под пользователя.

📣 Code Ready | #совет

👩‍💻 Нужно быстро перевести текст, название переменной или комментарий?

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

📣 Code Ready | #vscode

⚡️ Бесплатное обучение фронтенд-разработке с нуля: HTML/CSS, JavaScript, Next.js — с поддержкой от наставника

Подойдёт и новичкам, и тем, у кого есть опыт во фронтенде

На канале Интенсивный JavaScript действующий тимлид и опытный разработчик помогает изучить фронтенд на практических задачах, которые интересно кодить

С 8 ноября стартует новое бесплтаное обучение, где он на практике поможет разобраться во фронтенде: новичкамм в HTML/CSS и JavaScript, а тем, кто с опытом — Next.js

Всего сделаете три проекта:
💡 сайт услуг сборки ПК
💡 фронтенд для магазина на Next.js
💡 и ещё один проект полностью самостоятельно в формате соревнования с другими участниками

Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля

🔖Ещё автор регулярно набирает людей в свою команду, проводит собесы и знает, почему прилетают отказы большинству джунов

Что будет кроме уроков:

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

Для тех, кто опытнее:
какие проекты в портфолио повышают шансы на удачный собес
тест знаний и навыков
как искать заказы на фрилансе, когда биржи умерли

Подписывайтесь, чтобы участвовать, осталось 39 мест

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

➡️Участвовать бесплатно