Локальная обработка файлов в браузере — быстрый предпросмотр!

Выполняем валидацию файла и мгновенно формируем его превью — все операции происходят локально в браузере, без передачи данных на сервер.

Шаг 1 — получаем выбранный файл:

const input = document.querySelector('#file');

Шаг 2 — создаём FileReader для чтения локального файла:

const reader = new FileReader();

Шаг 3 — реагируем, когда чтение завершено:

reader.onload = () => {
  console.log('Тип:', currentFile.type);
  console.log('Размер:', currentFile.size);
  showPreview(reader.result);
};

Шаг 4 — читаем файл, когда пользователь выбирает его:

let currentFile = null;

input.addEventListener('change', () => {
  const file = input.files[0];
  if (!file) return;

  currentFile = file;
  reader.readAsDataURL(file);
});

Шаг 5 — универсальная мини-утилита для превью:

function readFilePreview(file, cb) {
  const r = new FileReader();
  r.onload = () => cb(r.result, file);
  r.readAsDataURL(file);
}

Пример использования:

readFilePreview(input.files[0], (dataUrl, file) => {
  console.log(file.type, file.size);
  previewImg.src = dataUrl;
});

🔥 Подходит для: локального предпросмотра изображений, предварительной проверки ограничений, улучшения UX загрузки файлов и минимизации лишних серверных обращений.

📣 Code Ready | #практика

👩‍💻 Тег для изменения настроения текста, но без семантического значения!

Тег <i> используется для изменения голоса или настроения части текста, чтобы передать его другое качество: официальное название, идиома из другого языка, транслитерация или ремарки.

Применяется только в том случае, если не существует более подходящего семантического элемента.

Например:

• <em> — смысловое ударение в предложении;
• <strong> — повышенная важность;
• <mark> — выделение «маркером»;
• <dfn> — термин или расшифровка сокращения.

По умолчанию браузеры применяют к <i> курсивное начертание с помощью font-style: italic.

📣 Code Ready | #атрибут

👩‍💻 Управляем состоянием интерфейса через :has()!

Чтобы изменить стиль родителя, когда вложенный элемент находится в активном состоянии делают:

parent.classList.toggle('open', child.checked)

Но CSS может делать это сам:

.card:has(.toggle:checked) .content {
  max-height: 400px;
}

Если внутри .card есть элемент.toggle, который checked, то .content автоматически раскрывается.

Изменение внешнего вида родителя в зависимости от действий пользователя:

.input:has(input:focus) {
  border-color: #4da3ff;
}

Подсветка активного пункта меню:

nav:has(a.active) {
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

🔥 Родитель сам понимает, что внутри есть активный элемент.

📣 Code Ready | #совет

Проверяем, находится ли элемент в фокусе!

Иногда нужно понять, активен ли сейчас input, textarea или любой другой интерактивный элемент. Например, чтобы не открывать подсказки, не ловить горячие клавиши или корректно управлять UI.

Браузер хранит текущий фокус в document.activeElement:

console.log(document.activeElement);

Проверяем, сфокусирован ли конкретный элемент:

const input = document.getElementById('username');

if (document.activeElement === input) {
  console.log('Поле username сейчас в фокусе!');
}

Отслеживаем смену фокуса:

document.addEventListener('focusin', (e) => {
  console.log('Фокус перешёл на:', e.target);
});

Проверяем, что фокус ушёл:

document.addEventListener('focusout', (e) => {
  console.log('Элемент потерял фокус:', e.target);
});

🔥 Такой подход полезен для форм, модалок, горячих клавиш, редакторов и любых интерактивных интерфейсов.

📣 Code Ready | #практика

👩‍💻 Хотите открыть проект из GitHub, не скачивая его?

Remote Repositories — расширение, которое позволяет работать с репозиторием прямо в VS Code: просматривать файлы, править код, создавать коммиты и пушить изменения, без локального клона. Идеально, когда нужно быстро проверить структуру проекта или что-то поправить.

📣 Code Ready | #vscode

👩‍💻 Готовые шаблоны регулярных выражений!

Regex Snippets — расширение, которое добавляет набор готовых шаблонов регулярных выражений: проверка email, поиск чисел, валидация пароля, извлечение групп, работа с пробелами, датами, URL и др. Пишешь короткий префикс и получаешь готовый рабочий паттерн.

📣 Code Ready | #vscode