10 библиотек для css и js анимации

Читать 👨‍💻

#полезности

Что такое Markdown и зачем он нужен

Читать 👨‍💻

#полезности

Макет для тренировки (Империум Лофт)

Перейти к макету 🧑‍💻

#практика | #макет

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. Что такое Markdown и зачем он нужен
2. 10 библиотек для css и js анимации
3. Пример использования StyleObserver

Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Middle frontend developer (Vue)
3. HTML-верстальщик

Лучшие дизайн вакансии @job_webdesign:
1. Продуктовый мобильный дизайнер
2. AI Веб-дизайнер
3. Графический дизайнер

#лучшеезанеделю

Поисковая оптимизация для начинающих

Читать 👨‍💻

#полезности

HTML5 Drag and Drop API — перетаскивание без библиотек

Если тебе нужно реализовать функциональность, похожую на Trello, канбан-доски, визуальные редакторы или просто перемещение блоков — тебе не нужен фреймворк. HTML5 Drag & Drop API позволяет всё это сделать на чистом JavaScript.

Базовый пример
HTML:

<div id="box" draggable="true">Перетащи меня</div>

Атрибут draggable="true" говорит браузеру: этот элемент можно тащить.

JS:

const box = document.getElementById("box");
box.addEventListener("dragstart", () => {
  box.style.opacity = "0.5";
});

box.addEventListener("dragend", () => {
  box.style.opacity = "1";
});

Что ты можешь делать с Drag and Drop API:
- Перетаскивать элементы между разными контейнерами
- Сортировать блоки внутри одной области
- Строить визуальные drag’n’drop редакторы
- Загружать файлы через перетаскивание
- Работать с dataTransfer для передачи информации

Важно помнить:
- Drag & Drop работает только для элементов DOM, не для всего подряд.
- Некоторые события (dragover, drop) требуют e.preventDefault(), иначе браузер блокирует действие.
- Если хочешь поддерживать мобильные устройства — придётся использовать кастомные решения, т.к. HTML5 Drag&Drop плохо работает на touch-экранах.

Подробнее: https://developer.mozilla.org/ru/docs/Web/API/HTML_Drag_and_Drop_API

#html | #полезности

Как браузер рисует сайт: что такое layout, paint и reflow

Когда ты открываешь любую страницу в браузере, начинается цепочка процессов. Чтобы ты понимал, производительность вёрстки — это не только «как красиво», но и насколько быстро всё рендерится. Вот что происходит «под капотом»:

Этапы рендеринга сайта
1. HTML → DOM (Document Object Model)
Браузер читает HTML и строит древовидную структуру. Всё, что ты написал — <div>, <p>, <h1> — превращается в объекты, которые JS может изменять.
2. CSS → CSSOM (CSS Object Model)
Параллельно браузер анализирует CSS. Правила, селекторы, каскад, наследование — всё сводится в дерево стилей.
3. DOM + CSSOM = Render Tree
Из двух деревьев строится дерево отрисовки. Оно содержит только те элементы, которые реально отображаются (например, display: none сюда не попадают).

Layout (или reflow)
Браузер рассчитывает размеры, положение и геометрию всех элементов: где находится блок, какая у него ширина и высота, отступы, границы, вложенность и т.д.
Что может вызвать повторный layout (reflow):
- изменение размеров (width, height)
- изменение положения (top, left, margin, padding)
- изменение шрифта
- добавление/удаление элементов в DOM

❗️Это один из самых тяжёлых этапов — он может тормозить страницу.

Paint
Далее браузер «рисует» пиксели — цвет фона, бордеры, тени, изображения и т.д. Это проще, чем layout, но всё равно требует ресурсов.

Composite
Если на странице есть слои (например, position: fixed, transform, opacity) — они объединяются на этом этапе. Это последний шаг перед выводом на экран.

Как избежать лишних затрат
Не меняй width, top, margin, padding — это вызывает reflow.

Лучше используй transform: translate() и opacity — это затрагивает только composite, и работает быстрее.

Если используешь анимации — делай их через transform, а не left/right.

Как проверить
Открой DevTools → вкладка Performance
→ нажми «Record»
→ соверши действия на странице
→ посмотри, где происходит Layout, Paint, Composite.

#полезности

Toast Notifications на чистом css

Смотреть на codepen 👨‍💻

#практика

Макет для тренировки (doring)

Перейти к макету 🧑‍💻

#практика | #макет

Задача на TypeScript

Дан массив задач:

type Task = { id: number; title: string; priority: 'low' | 'medium' | 'high' };

const tasks: Task[] = [
  { id: 1, title: 'Do laundry', priority: 'low' },
  { id: 2, title: 'Finish project', priority: 'high' },
  { id: 3, title: 'Buy groceries', priority: 'medium' },
];

Отсортируй задачи по приоритету: сначала high, потом medium, потом low.

#домашка

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. Toast Notifications на чистом css
2. Как браузер рисует сайт: что такое layout, paint и reflow
3. Поисковая оптимизация для начинающих

Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Junior / Middle Frontend Developer
3. HTML-верстальщик

Лучшие дизайн вакансии @job_webdesign:
1. Дизайнер мобильных приложений
2. UI/UX Designer
3. UX/UI дизайнер

#лучшеезанеделю

Как валидировать формы на JavaScript

Многие начинающие верстальщики ограничиваются required, type="email" и pattern="". Это удобно, но часто недостаточно. Гибкая валидация требует JavaScript.

Простой пример валидации email

HTML:
<form id="myForm">
  <input type="email" name="email" placeholder="Введите email" required />
  <button type="submit">Отправить</button>
</form>

JS:

const form = document.getElementById("myForm");

form.addEventListener("submit", (e) => {
  e.preventDefault();

  const emailInput = form.email;
  const email = emailInput.value;

  if (!email.includes("@") || !email.includes(".")) {
    alert("Пожалуйста, введите корректный email");
    emailInput.focus();
    return;
  }

  alert("Форма успешно отправлена");
  form.reset();
});

Варианты валидации
1. HTML-проверка через pattern:

<input type="text" pattern="[A-Za-z]{3,}" title="Только латиница, минимум 3 буквы">

2. JS: input.validity
js

if (!emailInput.validity.valid) {
  alert("Некорректный email");
}

3. JS: setCustomValidity()

emailInput.setCustomValidity("Пожалуйста, проверьте email");

Работает только с формами, которые потом отправляются нативно (form.submit() без preventDefault).

Дополнительные советы
Используй trim() при проверке, чтобы убрать пробелы.

Проверяй не только email, но и пароли, телефоны, checkbox'ы.

Добавляй визуальные подсказки (цвета, сообщения).

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

#js | #полезности

inverse text-sizing with attr

Смотреть на codepen 👨‍💻

#практика

Плати криптой легко и быстро с MaxSwap

MaxSwap откроет для тебя новый мир криптокарты без заморочек.

Почему MaxSwap — это круто:

➡️Мгновенная активация карты без документов — всего несколько шагов

➡️Низкие комиссии — больше денег на важные покупки

➡️Анонимные платежи — безопасная оплата по всему миру

➡️Плати через Apple Pay — а скоро и Google Pay

Где бы ты ни был, твоя виртуальная криптокарта всегда с тобой.

С MaxSwap ты всегда будешь чувствовать себя свободным в мире криптовалют.

Атрибут novalidate

Читать 👨‍💻

#html | #теория

Макет для тренировки (app prototype)

Перейти к макету 🧑‍💻

#практика | #макет