Code Ready | Frontend

👩‍💻 Пишем кастомный курсор! Курсор — это элемент, который постоянно находится в фокусе внимания пользователя. Даже небольшая замена указателя может сразу задать контекст взаимодействия. Как работает:

• cursor: url() позволяет подменять системный курсор локально; • SVG в data:-URL даёт возможность использовать emoji и векторные символы без внешних файлов; • размер и внешний вид курсора контролируются прямо внутри SVG; • fallback через auto сохраняет корректное поведение в браузерах.

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

Пачку офферов заказывали? О всех трудоустройствах через ИИ-ассистента Софи ребята узнают от пользователей. И какой же кайф, когда они делятся своими историями. Вот так в чате узнали сразу о трех новых офферах: • Кейс Сергея - 2 недели в Софи и 2 оффера. • Кейс Елены - 1 неделя в Софи и оффер спустя 10 лет перерыва в работе. Елене 52 года. • Кейс Юлии - 1 месяц в Софи, свитчер из финансового аналитика в разработчика SQL. И еще один оффер🎉 Искренние поздравления ребятам и удачи им на новой работе! В следующий раз доступ в Софи откроется 24 февраля. Если хочешь получить 3 дня бесплатного доступа - подписывайся на этот канал, все анонсы будут там.

👩‍💻 Живой предпросмотр Markdown-файлов во время редактирования! Markdown Preview Enhanced — расширяет стандартный предпросмотр Markdown в VS Code. Поддерживает диаграммы, формулы, графики, Mermaid, подсветку кода, экспорт в PDF и HTML. Сразу видишь, как будет выглядеть README, документация или статья, без внешних инструментов и лишних шагов. 📣 Code Ready | #vscode

FormData — нативная работа с данными форм и файлами! FormData — базовый Web API для сбора и отправки данных HTML-форм. Позволяет работать с текстовыми полями и файлами без ручной сериализации и напрямую передаётся в fetch или XMLHttpRequest. Создание FormData из формы:

const form = document.querySelector('form');
const formData = new FormData(form);

В FormData попадают только successful controls: элементы с name и без disabled, checked checkbox/radio, выбранные файлы и submit-кнопка при реальном submit; без name — не попадают. Пример 1 — чтение значений:

formData.get('email');
formData.get('password');

get() возвращает первое значение по ключу. Для полей с несколькими значениями используется getAll(). Пример 2 — несколько значений одного поля:

formData.getAll('tags');

Актуально для: checkbox-групп; <select multiple>; динамических списков (повторяющиеся ключи). Пример 3 — добавление и изменение данных:

formData.set('role', 'admin');
formData.append('token', 'abc123');

set() удаляет все предыдущие значения по ключу и устанавливает новое; append() добавляет ещё одно значение (важно для повторяющихся ключей и файлов) Пример 4 — работа с файлами:

const fileInput = document.querySelector('input[type="file"]');

if (fileInput.files.length > 0) {
  formData.append('avatar', fileInput.files[0]);
}

Файл передаётся как File (подтип Blob) с именем, MIME-типом и размером. При выборе нескольких файлов (multiple) FormData содержит несколько записей с одинаковым ключом. Пример 5 — отправка через fetch

fetch('/api/profile', {
  method: 'POST',
  body: formData
});

Не нужно вручную задавать Content-Type, браузер автоматически установит multipart/form-data с корректным boundary. Пример 6 — перебор всех данных:

for (const [key, value] of formData.entries()) {
  console.log(key, value);
}

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

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

✍️ JS for Cats — самоучитель для тех, кто устал от скучной теории! Это необычное руководство по JS, построенное так, чтобы его было легко читать и понимать. Материал объясняет базовые концепции языка простым языком, с примерами и объяснениями. Ресурс подойдёт для знакомства с синтаксисом или для повторения основ без излишне сложной теории. 📌 Оставляю ссылочку: jsforcats.com 📣 Code Ready | #ресурс

Анимация размеров с ключевыми словами! В CSS появился официальный механизм, который разрешает интерполяцию intrinsic-значений размеров. Для этого нужно разрешить использование ключевых слов:

:root {
  interpolate-size: allow-keywords;
}

После этого браузер умеет плавно анимировать переходы между числовым значением и кейвордами (0 - auto, min-content, max-content, fit-content). Важно: keyword <=> keyword по-прежнему не анимируется. Простейший пример с <details> начинает работать так:

<details>
  <summary>Показать</summary>
  <div class="content">Скрытое содержимое</div>
</details>

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

.content {
  overflow: hidden;
  height: 0;
  transition: height 0.5s ease;
}

details[open] .content {
  height: auto;
}

🔥 Важно понимать, что это именно разрешение интерполяции, а не хак, поэтому логика остаётся декларативной и предсказуемой. 📣 Code Ready | #совет

Стажировки и вакансии для JavaScript разработчиков - Вакансии которых нет на джоб-агрегаторах - Только прямые контакты HR в Telegram @jobs_js_fronted для фронтов @jobs_js_back для бека Пока другие листают джоб-сайты — ты уже пишешь HR в Telegram.

📂 Напоминалка по циклам в JavaScript! Например, for удобно использовать, когда заранее известно количество итераций, а for...of — когда нужно пройтись по массиву или строке. На картинке — 5 циклов, которые постоянно встречаются в коде. Сохрани, чтобы не забыть! 📣 Code Ready | #ресурсы

👩‍💻 Нужно визуально показать, что введённое значение допустимо? Псевдоклассы :in-range и :out-of-range в CSS позволяют стилизовать поля формы в зависимости от того, попадает ли введённое значение в заданный диапазон. Они работают с элементами, у которых указаны min и max. Как используется:

• :in-range — значение корректное и находится в пределах диапазона; • :out-of-range — значение выходит за допустимые границы; • можно подсвечивать поля, менять рамку или фон без JavaScript.

Если атрибуты min и max не заданы, то при пустом поле сработает :in-range, а при введённом значении ни один из псевдоклассов не сработает. 📣 Code Ready | #свойство

🚀 Frontend-практика, которая делает тебя сильнее. Без длинных постов и теории ради теории. Только то, что реально нужно: 🧠 ежедневные тесты 🛠 задачи уровня реальных проектов ⚡️ частые ошибки и полезные фишки 👉 JS / React / CSS @fepractice

👩‍💻 Точность и согласованность кода благодаря функции автозаполнения! IntelliCode — улучшает автодополнение в VS Code: предлагает варианты на основе контекста, типа данных и того, что ты уже написал. Удобно в больших проектах, где важно быстрее находить нужные методы и не отвлекаться. 📣 Code Ready | #vscode

Отслеживаем производительность через PerformanceObserver! Когда нужно понять, что именно тормозит страницу (долгие задачи, layout shifts, загрузка ресурсов) — PerformanceObserver даёт нативный доступ к метрикам браузера прямо в рантайме, без devtools и сторонних SDK. API позволяет подписываться на события производительности в реальном времени. Создаём наблюдатель:

const observer = new PerformanceObserver(list => {
  list.getEntries().forEach(entry => {
    console.log(entry);
  });
});

Пример 1 — отслеживание long tasks (блокировки main thread):

observer.observe({
  entryTypes: ['longtask']
});

longtask — любая задача, блокирующая основной поток дольше 50 мс. Прямой индикатор лагов и фризов UI (Long Tasks API, поддержка зависит от браузера). Пример 2 — отслеживание layout shifts (CLS):

let clsValue = 0;

const clsObserver = new PerformanceObserver(list => {
  list.getEntries().forEach(entry => {
    if (!entry.hadRecentInput) {
      clsValue += entry.value;
      console.log('CLS:', clsValue);
    }
  });
});

clsObserver.observe({
  type: 'layout-shift',
  buffered: true
});

Используется для поиска скачков интерфейса при загрузке контента. CLS считается как накопленное значение layout shift’ов без пользовательского ввода. Пример 3 — анализ загрузки ресурсов:

const resourceObserver = new PerformanceObserver(list => {
  list.getEntries().forEach(entry => {
    console.log(
      entry.name,
      entry.initiatorType,
      Math.round(entry.duration) + ' мс'
    );
  });
});

resourceObserver.observe({
  entryTypes: ['resource']
});

Позволяет видеть реальные тайминги загрузки скриптов, стилей и изображений (для кросс-доменных ресурсов подробные данные доступны при Timing-Allow-Origin). PerformanceObserver работает асинхронно — данные предоставляет сам браузер, без ручных замеров. Когда наблюдение больше не нужно:

observer.disconnect();
clsObserver.disconnect();
resourceObserver.disconnect();

🔥 PerformanceObserver — базовый инструмент диагностики производительности и поиска узких мест прямо в коде приложения. 📣 Code Ready | #практика

📱 Chips Input — теги как в Notion / Gmail! Привет! В этом гайде создаём поле ввода, которое превращает текст в аккуратные теги по нажатию Enter и поддерживает удаление с клавиатуры. Ключевые моменты:

• HTML: простая структура — контейнер, поле ввода и зона для тегов. • CSS: аккуратные chips и card-оформление компонента. • JS: логика добавления тегов, обработка Enter и Backspace, управление DOM.

Такой элемент отлично подойдёт для форм, тегов, навыков, категорий и email-полей в веб-приложениях и админках. 📣 Code Ready | #гайд

Изоляция рунета ближе, чем ты думаешь

Loading … ██████████████] 99%

Роскомнадзору дали карт-бланш на блокировки, а «белые списки» сайтов тестируют уже в десятках регионов. И гайки будут закручиваться только сильнее. Чтобы в одночасье не лишиться доступа к свободному Интернету, просто сохрани Only Hack. Тут профессиональный хакер делится фишками, с которыми доступ к глобальной сети у тебя будет даже в случае ядерного апокалипсиса. Не жди момента «Х». Перестрахуйся подпиской.

👩‍💻 Смещение якорей через scroll-margin-top! Когда на странице есть position: sticky фиксированная шапка, переход по якорю почти всегда ломается. Контент прокручивается, но заголовок уезжает под хедер:

<a href="#section">Перейти</a><h2 id="section">Раздел</h2>

По умолчанию браузер скроллит элемент ровно к верху вьюпорта, не зная про фиксированную шапку. Решение есть нативное и очень простое, добавить отступ для скролла самому элементу:

h2 {
  scroll-margin-top: 72px;
}

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

:root {
  --header-h: 72px;
}

h2 {
  scroll-margin-top: var(--header-h);
}

🔥 Это работает для якорных ссылок, scrollIntoView(), навигации по оглавлению, документации и лонгридов. 📣 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. Вакансии, которых нет на ХХ.РУ