Code Ready | Frontend

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

• 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 | #практика

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

👨👨👨👨👨👨👨👨👨👨 Каналы с Junior IT вакансиями и стажировками Подписывайся и забирай свой оффер 🤘 1. Стажировки и вакансии по России и миру 2. IT вакансии по СНГ 3. IT стажировки по СНГ 4. ИИ-ассистент для автооткликов 5. IT стажировки и волонтерства 6. IT стажировки в топовых компаниях мира 7. Удалённые IT вакансии и стажировки 8. Python вакансии и стажировки 9. БИГТЕХ вакансии и стажировки 10. Design вакансии и стажировки 11. QA вакансии и стажировки 12. Junior вакансии и стажировки 13. Frontend вакансии и вопросы собесов 14. Вакансии и стажировки для аналитиков 15. Вакансии в русских стартапах за границей 16. Вакансии и стажировки для DevOps 17. Вакансии, которых нет на ХХ.РУ

👩‍💻 Можно ли подсветить элемент, когда он получает внимание пользователя? Псевдокласс :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 | #гайд