Code Ready | Frontend

🔥Прими участие в Хакатоне от ИТ-холдинга Т1 в Новосибирске и поборись за призовой фонд 800 000 рублей! Когда: 23–26 октября Формат: онлайн + финал на площадке Участвуй, если ты: 🔹обучаешься на технической или ИТ-специальности; 🔹развиваешься в направлении разработки, аналитики, CV, ML или DevOps; 🔹сможешь быть в Новосибирске 26 октября. Выбери свой кейс:

✴️Цифровой дресс-код: фон, который выделяет вас. Создай локальный ML-модуль сегментации видео и генератор персонализированных фонов. ✴️CodeMetrics: метрики, которые помогают расти. Разработай систему автооценки эффективности команд через анализ Git-метрик.

Почему стоит участвовать: 🔘Кейс в портфолио и полезная обратная связь от менторов Т1; 🔘Шанс проявить себя, чтобы начать карьеру в одной из крупнейших ИТ-компаний; 🔘Реальный опыт командной работы; 🔘Мерч и атмосфера сильного комьюнити — в Т1 более 5 000 джунов из 580+ вузов России и Беларуси. Регистрация открыта! ➡️ Успей до 21 октября по ссылке. erid: 2Vtzqwmd32u

👩‍💻 Не хотите скучную декоративную линию между колонками? Свойство column-rule-style отвечает за стиль линии между колонками в многоколоночной вёрстке. Примеры значений:

• solid — сплошная линия; • dashed — пунктирная линия; • dotted — точки; • double — двойная линия.

Обычно свойство используют вместе с column-rule-width и column-rule-color, чтобы полностью контролировать внешний вид разделителя. 📣 Code Ready | #свойство

ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ Айтишники поймут ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ

Проверяем заряд батареи устройства! Нативный браузерный 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 | #атрибут