Инструменты для верстальщика

Читать 🧑‍💻

#полезности

Вендорные префискы

Читать 🧑‍💻

#css | #теория

Свойство pointer-events позволяет управлять тем, как элементы будут реагировать на события мыши или прикосновения к сенсорному экрану.

Часто применяется для того, чтобы можно было взаимодействовать с нижележащими элементами, игнорируя вышележащие. (Например, делая что-то с помощью js)

Значения:
auto - Восстанавливает функциональность элемента по умолчанию.

none - Предотвращает события мыши и щелчки по элементу.

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

Оптимизация верстки

Да, мы все знаем про сжатие изображений, минификацию CSS/JS и ленивую загрузку, но есть нюансы, которые часто упускаются даже опытными разработчиками.

1. Микрооптимизации в CSS
Используйте will-change для элементов, которые будут анимироваться. Это помогает браузеру заранее подготовиться к изменениям.

Избегайте @import в CSS — это блокирует загрузку стилей. Лучше использовать несколько <link> в HTML.

Минимизируйте использование * { } — универсальный селектор может сильно нагрузить браузер, особенно на больших страницах.

2. JavaScript: меньше — лучше
Современный JS (ES6+) часто более читаем, но не всегда эффективен. Например, forEach медленнее, чем классический for. В критичных к производительности местах лучше использовать старые добрые циклы.

Используйте requestAnimationFrame для анимаций вместо setTimeout или setInterval. Это обеспечивает более плавный рендеринг.

3. Доступность и семантика
Не забывайте про ARIA-атрибуты и семантические теги. Это не только для скринридеров, но и для SEO. Например, <section> с заголовком лучше, чем просто <div>.

Проверяйте контрастность цветов — это не только про доступность, но и про пользовательский опыт.

4. Инструменты для анализа
Lighthouse в Chrome DevTools — это классика, но попробуйте также WebPageTest для более глубокого анализа.

Используйте CSS Stats, чтобы понять, насколько ваши стили избыточны.

5. Неочевидные моменты
Шрифты: подключайте только те начертания, которые используете. И помните про font-display: swap;, чтобы текст отображался сразу.

SVG: минифицируйте их с помощью SVGO и вставляйте инлайном, если это возможно. Это уменьшает количество HTTP-запросов.

#полезности

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

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

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

JS Задача: Глубокое клонирование объекта

Описание:
Реализуйте функцию deepClone(obj), которая создает глубокую копию объекта. Изменения в клонированном объекте не должны затрагивать исходный.

Пример
const original = { a: 1, b: { c: 2 } };
const clone = deepClone(original);
clone.b.c = 42;
console.log(original.b.c); // 2
console.log(clone.b.c);    // 42

#домашка

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

Лучшие статьи @free_html_lessons:
1. Оптимизация верстки
2. Pointer events
3. Инструменты для верстальщика

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

Лучшие дизайн вакансии @job_webdesign:
1. UX/UI Дизайнер
2. Web-дизайнер
3. UX/UI Дизайнер

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

Полезные плагины для PostCSS

PostCSS — это мощный инструмент для работы с CSS, который позволяет автоматизировать множество задач. Вот подборка плагинов, которые помогут вам писать чистый, современный и оптимизированный код:

1. Autoprefixer
Автоматически добавляет вендорные префиксы для поддержки старых браузеров. Больше не нужно вручную писать -webkit-, -moz- или -ms-.
👉 https://github.com/postcss/autoprefixer

2. CSSNano
Минификатор CSS, который удаляет лишние пробелы, комментарии и оптимизирует ваш код для production.
👉 https://github.com/cssnano/cssnano

3. PostCSS Preset Env
Позволяет использовать современные возможности CSS (например, кастомные свойства, вложенные правила и т.д.), которые будут автоматически преобразованы для поддержки старых браузеров.
👉 https://github.com/csstools/postcss-preset-env

4. PostCSS Import
Позволяет импортировать CSS-файлы прямо в ваш основной файл стилей, что упрощает организацию кода.
👉 https://github.com/postcss/postcss-import

5. PostCSS Nesting
Добавляет поддержку вложенных правил, как в Sass или Less. Теперь можно писать вложенные селекторы без препроцессоров!
👉 https://github.com/jonathantneal/postcss-nesting

6. PostCSS Custom Properties
Позволяет использовать CSS-переменные (кастомные свойства) даже в браузерах, которые их не поддерживают.
👉 https://github.com/postcss/postcss-custom-properties

7. PostCSS Sort Media Queries
Автоматически сортирует медиа-запросы, что упрощает чтение и поддержку кода.
👉 https://github.com/solversgroup/postcss-sort-media-queries

8. Stylelint
Не совсем плагин, но мощный линтер для CSS, который помогает находить ошибки и соблюдать стиль кода. Интегрируется с PostCSS.
👉 https://github.com/stylelint/stylelint

9. PostCSS Assets
Упрощает работу с ассетами (изображения, шрифты и т.д.), позволяя автоматически управлять путями и кэшированием.
👉 https://github.com/borodean/postcss-assets

10. PostCSS Pxtorem
Автоматически преобразует пиксели (px) в rem, что полезно для создания адаптивных интерфейсов.
👉 https://github.com/cuth/postcss-pxtorem

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

Intersection Observer

Что это такое?
Intersection Observer позволяет отслеживать пересечение элемента с областью видимости (viewport) или другим родительским элементом. Это особенно полезно для:

Ленивой загрузки изображений (lazy loading),
Реализации бесконечной прокрутки,
Анимации элементов при появлении в зоне видимости,
Фиксации элементов при прокрутке (например, кнопок или меню).
Как это работает?

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Элемент виден на экране!');
    } else {
      console.log('Элемент исчез с экрана!');
    }
  });
});

Выбираем элемент для отслеживания:

const target = document.querySelector('.my-element');
observer.observe(target);
Настройка через параметры (threshold и rootMargin):
```const observer = new IntersectionObserver(callback, {
  threshold: 0.5, // Элемент должен быть виден на 50%
  rootMargin: '0px 0px -50px 0px' // Отступы вокруг зоны видимости
});

Пример использования:
Допустим, нужно, чтобы кнопка "Добавить в корзину" прилипала к низу экрана, когда исчезает из зоны видимости:

const button = document.querySelector('.add-to-cart');
const observer = new IntersectionObserver(([entry]) => {
  if (!entry.isIntersecting) {
    button.classList.add('sticky');
  } else {
    button.classList.remove('sticky');
  }
}, { threshold: 1 });
observer.observe(button);

Почему это лучше, чем scroll?
Эффективность: Intersection Observer работает асинхронно и не грузит основной поток.
Гибкость: Можно отслеживать любые элементы и точно настроить, как и когда срабатывают события.
Производительность: Браузер оптимизирует работу Observer, что особенно важно для мобильных устройств.

#js

Псевдокласс :is() в CSS

Читать 🧑‍💻

#css | #теория

Псевдокласс :where() в CSS

Читать 🧑‍💻

#css | #теория

Макет для тренировки (вкусно маркет)

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

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

СSS Задача: CSS Grid

Создайте сетку, в которой три блока будут равномерно распределены по ширине. При уменьшении ширины экрана до 600px блоки должны располагаться друг под другом.

Подсказка: Используйте grid-template-columns и медиа-запросы.

#домашка

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

Лучшие статьи @free_html_lessons:
1. Полезные плагины для PostCSS
2. Intersection Observer
3. Псевдокласс :where() в CSS

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

Лучшие дизайн вакансии @job_webdesign:
1. UX/UI Дизайнер
2. Web-дизайнер
3. UX/UI Дизайнер

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

Верстка HTML-писем. Часть 1

Читать 👨‍💻

#html | #теория

Верстка HTML-писем. Часть 2

Читать 👨‍💻

#html | #теория