Code Ready | Frontend

👩‍💻 Можно ли подсветить элемент, когда он получает внимание пользователя? Псевдокласс :focus срабатывает, когда элемент находится в фокусе — например, после клика мышкой или перехода через клавишу Tab. Примеры использования:

• outline — рисуем рамку вокруг поля ввода; • background — меняем фон кнопки при фокусе; • box-shadow — добавляем мягкое свечение; • transform — можно слегка «увеличить» элемент.

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

— Кто мы? — Разработчики! — Чего мы хотим? — Делать крутые проекты! — Где этому научиться? — На канале «Будни разработчика», конечно! — А что там? — Скрытые фишки, неожиданные подходы к работе, истории лучших девелоперов и топовые статьи. Подписывайся!

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

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

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

Российский хакер Валерий Илларионов третий раз нашёл лазейку в коде ChatGPT 5 Айтишник за пару дней нашёл способ снять ограничения с GPT и настраивать её под любые задачи — от взлома аккаунтов до изготовления оружия В своём блоге «Доктор GPT» он делится множеством других лазеек, которые всё ещё не пофиксили. • Как бесплатно пользоваться Veo 3 и другими генераторами видео • Как генерировать фото 18+ в Midjourney • Отключение ограничений в Gemini, GPT и Perplexity Секретные промты и протоколы собраны здесь — @DoctorGPT 🤫

👩‍💻 Напоминалка по HTML-элементам div и span! Например, <div> используется для группировки блоков и применения стилей к целым секциям, а <span> — для выделения и стилизации отдельных частей текста внутри строки. На картинке — сравнение блокового <div> со строчным <span>, с примерами кода и наглядным результатом. Сохрани, чтобы не забыть! 📣 Code Ready | #ресурсы

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

Хотите полный контроль над AI-инструментами в одном окне? Это Perplexity — и он умеет всё. Использовать разные сервисы для контента, аналитики, видео и кода — дорого, сложно и отнимает время. ⚡️На бесплатном вебинаре от Зерокодер мы покажем, как: – Собрать презентацию, визуал, игру и текст с помощью Perplexity; – Экономить ресурсы, заменяя целую команду инструментов одним; – Получать идеи для монетизации ИИ прямо в процессе работы; – Настроить рабочие процессы с помощью Perplexity так, чтобы он реально ускорял решение задач. Все участники получат готовый гайд с набором промптов, который сделает вашу работу и повседневные задачи проще и интереснее. 🎁 Бонус: в конце практикума расскажем как получить годовую подписку Perplexity Pro бесплатно (обычная стоимость – 240$). Присоединяйтесь к практикуму — и узнайте, как управлять всем процессом из одного пульта, экономя время и силы каждый день. erid: 2W5zFJheLZn ООО Зерокодер, ИНН 9715401631

📱 Напоминалка по работе с массивами! Например методы map(), filter(), find() и другие — это быстрый способ трансформировать, искать и фильтровать данные в массивах. На картинке — 7 ключевых методов массивов. Сохрани, чтобы не забыть! 📣 Code Ready | #ресурсы

👩‍💻 Вывода результатов вычислений или действий пользователя! У <output> есть встроенная роль status. Благодаря ей скринридеры и другие вспомогательные технологии автоматически зачитывают содержимое тега, когда оно обновляется. Как пишется:

• for — значением может быть один или несколько ID, разделённые пробелом; • form — указывается ID формы в этом же документе, с которой связывается поле вывода; • name — имя поля вывода.

Чтобы тег работал во всех браузерах и со всеми скринридерами корректно, рекомендуют явно задавать ему role="status" 📣 Code Ready | #атрибут

2 оффера за 10 минут в день — это реально? Смотрим на примере Антона, который получил 2 оффера через ИИ-ассистента Софи и работает уже 2 недели: ⭐До Софи тратил на поиски по 2 часа в день. С Софи — всего 10 минут в день на разбор чата hh. ⭐Получил 10 приглашений на собеседования за 1 месяц.  ⭐Оффером доволен, но зп побольше хотелось. Зато очень нравится компания. Антон не будет отписываться от Софи, даже несмотря на то, что он получил 2, почти 3 оффера. Говорит, что "слишком выгодно купил") P.s. Бесплатный доступ в Софи открываем уже 23 сентября, в 19:00. Подписывайся, чтобы не пропустить)

👩‍💻 Часто работаете на нескольких устройствах и устали вручную переносить настройки VS Code? Settings Sync — плагин, который автоматически синхронизирует все настройки между разными устройствами. Можно быстро восстановить привычную среду работы или поделиться своим набором настроек с коллегами. 📣 Code Ready | #vscode

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

• HTML: простая структура кнопки с текстом и элементом лоадера. • CSS: плавные переходы, позиционирование лоадера и анимация вращения. • JS: добавление/удаление класса loading и блокировка кнопки на время «загрузки».

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

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

• HTML: простая структура кнопки с текстом и элементом лоадера. • CSS: плавные переходы, позиционирование лоадера и анимация вращения. • JS: добавление/удаление класса loading и блокировка кнопки на время «загрузки».

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

Айтишники зарабатывают ДОХ#Я 💵💵 Не все, конечно, а только самые хваткие. Кто с холодной головой и чёткой архитектурой внутри. 💼 Рынок сейчас покупает НЕ знания. Он покупает тех, кто умеет собрать их в работающую модель Бизнес-архитектор — канал о том, как люди в IT, бизнесе и на фрилансе собирают из своих знаний доход в несколько тысяч $ в месяц. Подпишись и превращай знания в результат: ⤵️ https://t.me/+jONJxjgUpWs3N2Vi https://t.me/+jONJxjgUpWs3N2Vi

Throttle vs Debounce: выбираем инструмент! Функция срабатывает только после остановки прокрутки на 300ms. Пользователь видит скачкообразные обновления интерфейса:

const debouncedScroll = debounce(() => {
  console.log('Scroll handled');
}, 300);

window.addEventListener('scroll', debouncedScroll);

Решение — throttle:

function throttle(fn, limit = 16) {
  let inThrottle;
  return (...args) => {
    if (!inThrottle) {
      fn(...args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

Функция выполняется максимум раз в 16ms, обеспечивая плавные 60 FPS без перегрузки браузера.

const throttledScroll = throttle(() => {
  console.log('Scroll handled');
}, 16); // 16ms = 60 FPS

window.addEventListener('scroll', throttledScroll, { passive: true });

🔥 Поэтому, Throttle — для частых действий (scroll, resize). Debounce — для финального результата (поиск, валидация). 📣 Code Ready | #практика

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

Metanit — это подробный русскоязычный учебник по JavaScript с объяснениями и примерами. Подходит как для новичков, так и для тех, кто хочет углубиться в тонкости языка. 📌 Оставляю ссылочку: metanit.com 📣 Code Ready | #ресурсы