Code Ready | Frontend

Проверяем заряд батареи устройства! Нативный браузерный API позволяет узнать уровень заряда, время работы и подключение к сети — без плагинов и библиотек. Но Battery Status API поддерживается не во всех браузерах. Получим информацию о батарее:

navigator.getBattery().then(battery => {
  console.log("Заряд:", battery.level * 100 + "%");
  console.log("Подключено к сети:", battery.charging);
});

Теперь оформим вывод:

navigator.getBattery().then(battery => {
  const percent = Math.round(battery.level * 100);
  const status = battery.charging ? "🔌 Заряжается" : "🔋 Автономно";
  console.log(`${status} — ${percent}%`);
});

Добавим реакцию на изменение уровня заряда:

navigator.getBattery().then(battery => {
  battery.addEventListener("levelchange", () => {
    console.log("Обновлённый заряд:", battery.level * 100 + "%");
  });
});

🔥 Теперь можно адаптировать интерфейс под состояние батареи: отключать анимации при 10% или показывать предупреждение. 📣 Code Ready | #практика

📱 Разбираем работу с координатами и размерами элементов! В этой шпаргалке — практические методы для измерения позиций, габаритов и взаимодействия с элементами DOM. Они применяются при создании адаптивных интерфейсов, построении анимаций и обработке событий скролла или клика. 📣 Code Ready | #шпора

Коллапс рынка Frontend 💥 В 2025 нельзя не признать - рынок найма переживает самое тяжелое время в своей истории 😢 Любой кто пытался найти работу с ноября прошлого года после волны массовых сокращений 👊, подтвердит этот факт одним скрином из hh Чтобы оставаться на плаву и успешно находить работу, сделали подборку полезных материалов: * Ты не правильно откликаешься: забудь про автоотклики * Как пробиться на собес фронтендеру в 2025 * Технический чекап перед собеседованием * Контакты HR из топ компаний * Гайд на алгоритмы и лайвкодинг * Задачи на рефакторинг React-компонентов с собеседований Больше материалов тут

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

• HTML: разметка шагов с полями ввода и кнопками. • CSS: стилизация прогресс-бара и кнопок с плавными эффектами. • JS: переключение шагов и обновление прогресса.

Такая форма идеально подходит для регистраций, анкет и опросов, когда нужно разбить ввод данных на простые шаги. 📣 Code Ready | #гайд

📱 Курс "JavaScript по картинкам и Аудио" Данный курс подходит новичкам и не только, слушать можно как подряд, так и с нужной темы. Он полностью бесплатный и доступен здесь в TG, смело ставьте на 1.5х или 2х, если чувствуете, что успеваете усваивать инфу. ОГЛАВЛЕНИЕ: 1. Введение. Что такое JavaScript?; 2. Переменные, константы, типы данных; 3. Операторы, условные конструкции; 4. Массивы, циклы, данные; 5. Что такое функции в JS? 6. Объекты и работа с данными; 7. Методы работы с массивами, стрелочные функции; 8. ООП в JS; 9. Промисы, async/await, работа с сервером; 10. Практика изученного на реальном веб-приложении. Автор курса: Андрей Шопинский

Нативный выбор цвета через браузерный API Хотите встроить в проект пипетку как в Photoshop — без лишних библиотек? В Chrome, Edge и Opera уже есть нативный EyeDropper API. Работает по HTTPS и в последних версиях Chromium-браузеров. Шаг 1 — добавляем кнопку:

<button id="pickColor">Выбрать цвет</button>

Шаг 2 — подключаем EyeDropper:

if (!window.EyeDropper) {
  alert("Ваш браузер не поддерживает EyeDropper API");
}

Шаг 3 — открываем пипетку и используем цвет:

const btn = document.getElementById("pickColor");
btn.addEventListener("click", async () => {
  const eyeDropper = new EyeDropper();
  const { sRGBHex } = await eyeDropper.open();
  console.log("Цвет:", sRGBHex);
  document.body.style.backgroundColor = sRGBHex;
});

Пипетка выбирает цвет с экрана и тут же применяет его к фону, а в консоли появляется hex-код. 🔥 Отличный инструмент для кастомизации, темизации и цветовых палитр прямо в браузере. 📣 Code Ready | #практика

📱 Разбираем управление асинхронностью с Promise! В этой шпаргалке собраны ключевые методы работы с Promise: от ошибочного завершения до параллельного выполнения задач и контроля всех статусов. Эти приёмы применяются при построении API-запросов, пайплайнов обработки данных и разработке отказоустойчивых асинхронных сервисов. 📣 Code Ready | #шпора

📱 Кнопка для копирования текста! Привет! В этом гайде создаём кнопку «Скопировать» рядом с текстовым полем. При клике содержимое попадает в буфер обмена, а кнопка меняет состояние, показывая обратную связь пользователю. Ключевые моменты:

• HTML: разметка с input и кнопкой. • CSS: цвета, тени, интерактивные эффекты наведения. • JS: использование Clipboard API и асинхронной логики для копирования.

Подходит для форм, сниппетов кода, документации и любых интерфейсов, где важно быстро скопировать данные. 📣 Code Ready | #гайд

👩‍💻 Эффект «печатающегося текста» с мигающим курсором! В этом посте - анимация, которая имитирует набор текста на клавиатуре. Всё работает на чистом CSS! Принцип работы:

• Свойство steps() в анимации ограничивает показ текста посимвольно; • border-right используется как курсор, а keyframes blink заставляет его мигать; • Количество шагов (steps(n,end)) и ширину в ch подбираем под длину текста; • Для доступности добавляем prefers-reduced-motion.

Приём отлично подходит для hero-секций, заголовков и промо-блоков, добавляя динамики и «живости» интерфейсу. 📣 Code Ready | #фишка

📱 Работаем с Map! В этой шпаргалке — методы для работы с картами (Map) в JS: создание, добавление и удаление элементов, проверка наличия ключей, перебор данных и очистка коллекции. Это основа для хранения пар «ключ → значение», где ключи могут быть не только строками, но и объектами или функциями. 📣 Code Ready | #шпора

☕️ Программист из IT Hole собрал курсы со всего интернета, отсортировал и разбил их по каналам. Ищи свое направление: 🖥 Python - 1183 ГБ 🖥 Java - 730 ГБ 🖥 ИБ - 476 ГБ 🖥 Хакинг - 512 ГБ 🖥 C/C++ - 1067 ГБ 🖥 SQL & БД - 788 ГБ 👩‍💻 DevOps - 321 ГБ 👩‍💻 Kotlin - 440 ГБ 🖥 PHP - 865 ГБ 👣 GO - 1005 ГБ 🖥 Machine Learning - 1367 ГБ 🖥 Data Science - 582 ГБ 🖥 Figma & Design - 991 ГБ Материалы в канале постоянно пополняются! 👆

Современное копирование текста через Clipboard API! Почти каждое веб-приложение сегодня требует возможности быстро скопировать данные: ссылку, токен, код. Для этой задачи используется navigator.clipboard. Начнём с базовой команды на копирование:

const value = "https://example.com?ref=JS";
navigator.clipboard.writeText(value);

Этот метод возвращает промис, поэтому стоит обернуть его в аккуратную обёртку с обработкой результата:

navigator.clipboard.writeText(value)
  .then(() => console.log("✅ Скопировано"))
  .catch(err => console.error("❌ Ошибка:", err));

Создадим функцию copyToClipboard, которую можно переиспользовать в любом месте приложения:

function copyToClipboard(text) {
  return navigator.clipboard.writeText(text);
}

И используем её в нужный момент (например, по клику или по горячей клавише):

copyToClipboard("PROMO2025").then(() =>
  console.log("Промокод отправлен в буфер 🎯")
);

🔥 Всё лаконично и нативно. Главное, что это работает во всех современных браузерах. 📣 Code Ready | #практика

👩‍💻 Помечаем поля формы, которые доступны только для чтения! Атрибут readonly делает поля формы доступными только для чтения. Пользователь не сможет изменить значение такого поля, но сможет выделить и скопировать текст. Например:

• Отображение данных из профиля, которые нельзя изменить; • Показ результатов расчётов; • Демонстрация значений по умолчанию.

Не путайте readonly с disabled. Неактивные поля не получают фокус и не отправляются с формой, а поля только для чтения (readonly) - получают и отправляются. 📣 Code Ready | #атрибут

⚡️ Бесплатное обучение фронтенд-разработке с нуля до React — с поддержкой от наставника Опыт в программировании не нужен. На канале Интенсивный JavaScript действующий тимлид и опытный разработчик помогает изучить фронтенд на практических задачах, которые интересно кодить С 27 сентября стартует бесплтаное обучение, где он на практике поможет разобраться в основах — HTML/CSS и JavaScript, а также попробовать самый популярный фреймворк — React 💡Всё объясняет на примере проекта — доски объявлений Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля 🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как трудоустроиться и джуну, и разрабу поопытнее Помимо работы с кодом он даст пошаговый план изучения всего, что нужно современному фронтенду. Поделится способами посика клиентов с поомщью ИИ. Расскажет, как взять свой первый заказ на фрилансе без фриланс-бирж с огромной конкуренцией Подписывайтесь, чтобы участвовать, осталось 33 места Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду 🟠Участвовать бесплатно

😎 CSS Diner — игра, которая учит CSS-селекторы! Хочешь наконец разобраться в селекторах, комбинаторах и псевдоклассах без скучной теории и документации? CSS Diner - идеальный способ: уровни начинаются с простых селекторов, а дальше всё усложняется, придётся реально думать. 📌 Делюсь ссылочкой: flukeout.github.io 📣 Code Ready | #ресурсы

📱 Анимированный кастомный курсор! Привет! В этом гайде создаём собственный курсор — круглый элемент, который плавно двигается за мышкой, реагирует на клики и увеличивается при наведении на ссылки и кнопки. Ключевые моменты:

• HTML: контейнер для курсора. • CSS: стили кружка, плавные переходы, эффекты клика и hover. • JS: слежение за движением мыши, анимация клика и реакция на интерактивные элементы.

Подходит для креативных сайтов, лендингов, портфолио и интерфейсов с акцентом на стильный интерактив. 📣 Code Ready | #гайд

Все надоело и пропал интерес, чувствуешь себя амебой и хочется только залипать в телефоне. Бывает? Homo Manifestans — канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам 🤗 ✓ Как научиться отвлекаться от работы и отдыхать? ✓ Как совместить кучу рабочих задач и время с семьей? ✓ Как справиться с прокрастинацией? ✓ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит? Подписывайтесь на канал @vadimpetrovpsi и научитесь работать без упахивания, выгорания и ущерба для личной жизни! Псс. Заходите в закреп — там много полезного, и даже бесплатный мини-курс по выходу из апатии: 👉 https://t.me/+qjb8_vBjD744YTRi

Конвертируем фунты в килограммы и обратно! Нередко требуется перевести значение между разными единицами массы. Реализуем небольшой конвертер для фунтов (lb) и килограммов (kg) на чистом JS. Задаём коэффициент:

const KG_PER_LB = 0.45359237;

Пишем функцию:

function convert(value, direction) {
  return direction === 'lb→kg'
    ? +(value * KG_PER_LB).toFixed(2)
    : +(value / KG_PER_LB).toFixed(2);
}

Проверяем работу:

console.log(`50 lb = ${convert(50, 'lb→kg')} кг`);
console.log(`100 кг = ${convert(100, 'kg→lb')} lb`);

Результат:

50 lb = 22.68 кг
100 кг = 220.46 lb

🔥 Такой сниппет можно встроить в калькулятор веса или форму на сайте. 📣 Code Ready | #практика