🌟 Улучшаем Анимации в CSS! 🌟

Продолжаем разговор про анимации, и сегодня рассмотрим, как сделать ваши анимации ещё более захватывающими с использованием CSS-свойства animation и ключевого слова @keyframes.

🔹 Что может @keyframes?
Это мощный инструмент, который позволяет задавать мультистадийные анимации с точным контролем изменений свойств на каждом этапе. В качестве простого примера сделаем так, чтобы некоторый элемент появлялся снизу и плавно входил в поле зрения пользователя:

@keyframes appearFromBottom {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(0);
    }
}

🔹 Применение анимации:
Чтобы оживить ваш элемент этой анимацией, просто используйте:

.element {
    animation-name: appearFromBottom;
    animation-duration: 1s;
    animation-timing-function: ease;

    /* Или коротко */
    animation: appearFromBottom 1s ease;
}

💥 Вот и всё! Теперь элемент «выплывает» снизу, становясь видимым к середине анимации и плавно достигая конечной точки. Использование функции ease делает анимацию более интересной, поскольку переход становится нелинейным, добавляя плавность в начале и конце анимации.

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

⏩ Не забудьте, что любое свойство, анимированное через @keyframes, должно поддерживать интерполяцию, так же как в случае с transition.

🔍 Оптимизация изображений с тегом <picture>

Изображения являются неотъемлемой частью любого современного сайта. Сегодня мы поглубже поговорим о том, как можно улучшить их загрузку, адаптивность и производительность с помощью тега <picture>.

Обычно мы сталкиваемся с проблемой, что разные устройства требуют разных размеров изображений. Например, нет смысла загружать на смартфон фото с огромным разрешением, предназначенное для больших мониторов. Тег <picture> идеально подходит для таких случаев.

✅ Вот как работает этот тег:

- Внутрь тега вставляется <img> с базовым изображением.
- Добавляются один или несколько тегов <source>, каждый из которых может указывать разные источники изображений для разных условий (например, ширины экрана).

Пример кода:

<picture>
    <source media="(min-width:1024px)" srcset="img_big.jpg">
    <source media="(max-width:465px)" srcset="img_small.jpg">
    <img src="img.jpg" alt="Awesome image" style="width:auto;">
</picture>

✨ В итоге на устройствах с шириной экрана до 465 пикселей загрузится img_small.jpg, а на ширине более 1024 пикселей - img_big.jpg. Для всех остальных случаев будет использоваться img.jpg.

Также, <picture> отлично подходит для использования современных форматов изображений, как WEBP, который может значительно уменьшить размер файлов, но поддерживается не всеми браузерами. Атрибут type у тега <source> позволяет указать формат изображения, так что браузер сможет загрузить изображение только если поддерживает данный формат. Это предотвращает загрузку несовместимого контента и ускоряет отображение страницы:

<picture>
    <source type="image/webp" media="(min-width: 1024px)" srcset="img_large.webp">
    <source type="image/jpg" media="(min-width: 1024px)" srcset="img_large.jpg">
    <img src="img.jpg" style="width: 100%;">
</picture>

🔗 Узнать больше про использование тега <picture> вы можете в статье на Medium: HTML <picture> tag in practice.

Как видите, тег <picture> является мощным инструментом для создания адаптивных и оптимизированных интернет-ресурсов. Внедряйте его в свои проекты для улучшения пользовательского опыта и скорости загрузки страниц!

🎵🎬 Добавляем мультимедиа на сайт с помощью тегов <audio> и <video>!

Иногда на сайт требуется добавить медиаконтент, в том числе это может быть аудиодорожка или блок с видео. Теги <audio> и <video> позволяют это сделать, и каждый из них может использовать тег <source> для определения множественных источников медиа, подобно его использованию в <picture>.

🔊 Тег <audio>

Атрибуты:
- src: URL файла.
- preload: Управляет предзагрузкой данных; может быть none (не предзагружать), metadata (загружать только метаданные) или auto (предзагрузка данных).
- controls: Показывает элементы управления - кнопки воспроизведения/паузы, управление громкостью и так далее.
- autoplay, loop, muted: Автоматическое воспроизведение, повтор после завершения и отключение звука соответственно.

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

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    <!-- Если ни один из ресурсов не подошёл -->
    Ваш браузер не поддерживает тег audio.
</audio>

🎥 Тег <video>

Атрибуты:
- src, preload, controls, autoplay, loop, muted: Аналогичны тегу <audio>.
- poster: Изображение до загрузки видео.
- width и height: Размеры видеоплеера.

Пример:

<video controls poster="thumbnail.jpg">
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    <!-- Если ни один из ресурсов не подошёл -->
    Ваш браузер не поддерживает тег video.
</video>

🔗 Для более глубокого изучения мультимедийных возможностей HTML рекомендуем ознакомиться с подробным руководством на MDN.

Кажется, будущее становится всё ближе!😱 На прошлой неделе компания Open AI сообщила о выпуске новой версии чата GPT-4o (Omni). Давайте вместе посмотрим презентацию на русском языке https://youtu.be/WBqG0fLriqk. И делитесь впечатлениями!

⚡️ Новое видео на канале! Поговорим о новом GPT-4o и о том, как программист может использовать нейросеть для своей работы. https://youtu.be/NbkmSZCpECU?si=gzt8zNvgLBonogA3

Пятничное бинго 🎱

Делитесь в комментариях своими результатами!

🌐 Как работают поисковые системы?

Нередко возникает вопрос, как большие поисковые системы подбирают ресурсы под ваш запрос, и как поднять свой сайт в таких системах. Разбираемся ниже ⬇️

Популярные поисковые системы работают по сложному алгоритму, включающему три основные стадии:

1. Сканирование. Во время это стадии поисковые роботы посещают веб-страницы, переходят по ссылкам и собирают информацию о содержимом сайтов.

2. Индексирование. На этом этапе информация организуется и сохраняется в больших базах данных.

3. Ранжирование. На основе большого количества сигналов поисковые системы определяют релевантность каждой страницы к поисковому запросу пользователя и строят список результатов поиска от самых релевантных к менее релевантным.

❓ Так что же делать, чтобы ваш сайт поднимался выше в поисковых системах? Вот несколько советов:

✅ Выберите подходящие ключевые слова и фразы, которые чаще всего используют ваша целевая аудитория. Используйте эти ключевые слова в заголовках, подзаголовках, основном тексте и мета-описаниях на вашем сайте.
✅ Оптимизируйте сайт таким образом, чтобы посетителям было удобно и понятно им пользоваться. Скорость загрузки страниц, мобильная адаптация и интуитивно понятная навигация могут значительно повлиять на позиции в поиске.
✅ Фокусируйтесь на создании ценного, информативного контента, который будут цитировать другие сайты или с которым захотят поделиться в социальных сетях. Наличие ссылок на ваш сайт с других респектабельных сайтов может значительно улучшить ваш рейтинг.
✅ Убедитесь, что все изображения на вашем сайте сопровождаются атрибутами alt, которые описывают содержимое изображений с помощью релевантных ключевых слов. Это не только помогает поисковикам понять, что изображено на картинке, но и улучшает доступность сайта.

🔗 Больше информации на официальных ресурсах:

- https://webmasters.googleblog.com/ - блог от вебмастеров Google. Здесь обсуждаются изменения в алгоритмах, новые фичи и лучшие практики SEO.
- https://yandex.ru/blog/webmaster - аналогичный ресурс от Яндекса, важен для понимания специфики российского рынка.

⚡️Новое видео на канале!
https://youtu.be/gDjMSD2q36o?si=ptevZFjGNinptch9

🎨 Как подключить локальные шрифты к вашему сайту?

Подключение шрифтов к веб-странице позволяет стилизовать текст и улучшить визуальное восприятие контента. Шрифты можно подключать как из локальных файлов, так и из удалённых ресурсов. В этом посте мы подробно разберем, как работает подключение шрифтов с использованием локальных файлов.

Шаг 1: Использование @font-face

Для подключения локальных шрифтов используем CSS-правило @font-face. Это правило позволяет указать, откуда и как браузер должен загрузить шрифт, его стиль и жирность. Например:

@font-face {
    font-family: 'AwesomeFont';
    src: local('AwesomeFont'),
         url('/path/to/awesome_font.woff2') format('woff2'),
         url('/path/to/awesome_font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

👉 font-family задаёт название шрифта, которое мы будем использовать в CSS для вызова шрифта.
👉 src определяет источники шрифта:
- local('AwesomeFont') - пытается найти шрифт, установленный локально на устройстве пользователя.
- url(...) - пути к файлам шрифта, которые будут использоваться, если локальный шрифт не найден, где format указывает на формат файла. Итоговый формат будет выбран в зависимости от предпочтений браузера.

Чтобы поддержать разные стили и жирности текста, можно определить несколько правил @font-face для одного и того же шрифтового семейства, но с различными значениями свойств font-style и font-weight. Это дает гибкость в применении разных стилей текста, используя одно и то же шрифтовое семейство.

Шаг 2: Применение шрифта

Чтобы применить шрифт на странице, используем его имя в свойстве font-family там, где это необходимо:

body {
    font-family: 'AwesomeFont', 'Roboto', sans-serif;
}

Здесь AwesomeFont используется как основной шрифт, а Roboto и sans-serif указаны как запасные варианты. Это означает, что если AwesomeFont не загрузится, браузер попытается использовать Roboto, и если и его не окажется, то применится доступный без засечек шрифт системы.

🔗 Подробнее о работе директивы @font-face можно узнать в документации на MDN.

🌿 Разбираемся с HTML-формами: Зачем и как их использовать

HTML-формы — это средство для сбора данных пользователя. Через формы можно отправлять информацию из веб-интерфейса на сервер: это может быть поиск по сайту, отправка отзыва или регистрация в сервисе.

Преимущества использования форм:
✅ Упрощение сбора данных: Формы упаковывают введенные данные в удобный для отправки формат.
✅ Встроенная валидация: Браузеры поддерживают простые методы валидации данных, такие как проверка заполнения обязательных полей.
✅ Доступность: Правильно оформленные формы лучше всего подходят для использования всеми пользователями, включая тех, кто использует вспомогательные технологии.
✅ Экономия времени при разработке: Использование форм сокращает объем необходимого кода для сбора данных.

Почему не следует контролировать каждый элемент отдельно?
Вместо того, чтобы вручную управлять каждым элементом ввода, формы позволяют стандартизировать обработку на клиентской стороне, что упрощает как сам код, так и последующую поддержку проекта.

Пример кода формы:

<form action="/submit-path" method="POST">
  <label for="username">Имя пользователя:</label>
  <input type="text" id="username" name="username" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <button type="submit">Отправить</button>
</form>

- <form>: Определяет контейнер для группы элементов, которые собирают данные от пользователя.
- action и method: Указывают, куда и как отправлять данные.
- <label> и <input>: Обеспечивают интерфейс для ввода данных.
- required: Делает поле обязательным.
- <button type="submit">: Инициирует отправку формы на сервер.

❗В этом примере данные из формы будут отправлены на указанный url без использования JavaScript, и по умолчанию произойдёт перезагрузка страницы. Поэтому чаще всего разработчики переопределяют встроенный метод отправки с помощью JavaScript, чтобы не обновлять страницу и показывать пользователю состояние загрузки и конечный результат.

🔗 Узнать больше информации о формах и их атрибутах можно на W3Schools и разобрать пример создания формы на MDN.

🔍 SVG: что это такое и с чем его едят?

Тег <svg> – это элемент, используемый для описания векторных изображений в формате SVG прямо в HTML-документе. SVG используется для создания графики, которая может масштабироваться без потери качества, поэтому он отлично подходит для использования на различных устройствах и размерах экрана. SVG можно стилизовать и анимировать с помощью CSS и манипулировать с использованием JavaScript, а также этот элемент поддерживает фильтры, маски, клипы и другие сложные эффекты.

Важные атрибуты SVG:

- width и height – задают ширину и высоту изображения.
- viewBox – определяет область просмотра изображения.
- preserveAspectRatio – управляет сохранением пропорций изображения при вписывании в область отображения.
- fill и stroke – задают цвет заливки и цвет контура объектов внутри SVG соответственно.

🤔 Подробнее про viewBox

Атрибут viewBox в SVG задает область просмотра, которая определяет часть SVG, что будет видимой, и масштабирование этой области. Проще говоря, viewBox позволяет вам контролировать отображение SVG без изменения его реальных размеров.

ViewBox принимает четыре значения: min-x, min-y, width, height:
- min-x и min-y указывают на начальную точку видимой области.
- width и height обозначают размеры этой области.

Например, следующий SVG рисует квадрат, левый верхний угол которого находится в точке (10, 10), а правый нижний в (60, 60), так как высота и ширина составляют по 50 пикселей. Элемент <svg> использует viewBox для изменения его масштаба и области просмотра:

<svg width="140" height="140" viewBox="0 0 70 70">
    <rect x="10" y="10" width="50" height="50" fill="red" />
</svg>

⬇️ Пример для визуализации приложен к этому посту. Краткое объяснение:

- viewBox="0 0 70 70" означает, что видимая область начинается в точке (0, 0) с размерами 70x70, и визуально наш квадрат будет находиться в центре с отступами в 10 пикселей от краёв видимой области.
- При этом визуально изображение масштабируется в 2 раза, так как область просмотра в 70x70 пикселей пропорционально увеличена до размера элемента SVG 140x140 пикселей.

⚡Особое CSS-свойство: currentColor

Это специальное свойство в CSS, которое можно использовать в SVG для задания цвета элементов, например в качестве значения fill или stroke. Значение currentColor ссылается на значение свойства color наследуемого элемента. Таким образом, если в примере выше у элемента <rect> указать fill="currentColor", а для всего SVG в css задать { color: red }, то квадрат также останется красным. Это особенно удобно, когда в SVG несколько элементов или когда цвет элементов контролируется извне.

🔗 Узнать подробнее о возможностях SVG можно в этой статье. В ней также описаны варианты элементов, которые могут использоваться внутри тега <svg>.

⚡️Новое видео на канале! Мы продолжаем экспериментировать, и в этот раз в формате подкаста обсудили плюсы, минусы и подводные камни работы в IT https://youtu.be/IWq_LFVA5IQ

🤔 Адаптивный iFrame - правда или миф?

Нередко возникает потребность использовать iFrame - элемент HTML, позволяющий внедрять на одну веб-страницу другую веб-страницу. iFrame действует как окно или портал, через который можно видеть и взаимодействовать с другим документом, не покидая исходной страницы.

Основная проблема iFrame в том, что он не обладает такой гибкостью, как стандартные HTML-элементы. Например, его нельзя просто и безболезненно растянуть на весь родительский контейнер.

❓ Но что делать, если хочется, например, растянуть iFrame по ширине контейнера, при этом сохранив пропорции окна? Современный CSS позволяет это сделать при помощи свойства aspect-ratio. Это свойство полезно не только для iFrame, но и для изображений и вообще любых элементов.

На самом деле, до появления aspect-ratio ситуация c iFrame не была совсем безысходной. Приходилось выкручиваться, добавляя элементу четко рассчитанный padding-top или padding-bottom.

🔗 Рекомендуем прочитать статью, в которой приведены примеры обеих реализаций. А подробнее про aspect-ratio можно узнать на MDN.

💣 Разбираемся с особенностями CSS-свойства z-index

CSS-свойство z-index используется для управления порядком перекрытия элементов вдоль оси z (ось, перпендикулярная экрану). Это свойство определяет, какой из элементов находится "поверх" других, когда они находятся на одном и том же месте в документе или перекрываются.

Как работает z-index:

1. Применение: z-index может быть применён только к элементам, у которых задано свойство position со значением, отличным от static. Например, relative, absolute, fixed или sticky.

2. Числовые значения: Чем выше значение z-index, тем выше "слой", на котором будет находиться элемент. Значения могут быть положительными или отрицательными.

3. Локальная контекстная наложенность: z-index работает в рамках одного контекста наложения. Есть несколько способов задать новый контекст наложения, но об этом мы поговорим немного позже. Здесь важно понимать, что элемент с z-index: 1000 не перекроет элемент с z-index: 5, если они находятся в разных контекстах наложения.

Примеры:

Элемент с бо́льшим значением z-index будет перекрывать элемент с меньшим значением, если они расположены в одном контексте наложения:

<div style="position: relative; z-index: 1;">
    <div style="position: absolute; z-index: 2;">Перекрывает</div>
    <div style="position: absolute; z-index: 1;">Перекрываемый</div>
</div>

Элемент с отрицательным z-index может быть расположен под базовым уровнем своего контекста. Например, через него можно явно указать, что элемент будет фоном внутри своего родителя:

<div style="position: relative">
    <div style="position: absolute; z-index: -1">Содержимое фона</div>
    Основное содержимое блока
</div>

🔗 Подробнее про z-index на MDN.

🔍 Продолжаем разговор про z-index: Контекст наложения

Контекст наложения (stacking context) — это концепция в CSS, которая определяет, как элементы должны перекрываться или как они наложены друг на друга на веб-странице. Контекст наложения создается в следующих случаях:

1️⃣ Корневой элемент (HTML): По умолчанию корневой элемент создает контекст наложения.

2️⃣ Свойства position и z-index: Любой элемент с свойством position отличным от static, и заданным значением z-index задаёт новый контекст наложения.

3️⃣ Некоторые CSS-свойства также создают новый контекст наложения:

🔸 opacity со значением меньше 1.
🔸 transform, не равное none.
🔸 filter, не равное none.
🔸 perspective, большее нуля.
🔸 clip-path, не равное none.
🔸 mask / mask-image / mask-border, не равные none.
🔸 mix-blend-mode, кроме normal.
🔸 will-change, упоминающее любое из свойств, создающих контекст наложения.
🔸 isolation: isolate.

Внутри контекста элементы сортируются сначала по порядку расположения в HTML, а элементы с указанным z-index перемещаются в соответствии с их значениями z-index. Элемент с более высоким z-index находится над элементом с более низким z-index.

Особенностью контекста наложения является его изоляция: z-index работает только в пределах одного контекста наложения и не взаимодействует с элементами, которые находятся за его пределами в других контекстах. Это означает, что z-index одного блока не может влиять на элементы, находящиеся в другом блоке, если каждый из них создает собственный контекст наложения.

<style>
    #content-1 { color: red; height: 18px }
    #new-context { margin-top: -12px }
    #content-2 { color: blue; height: 18px }
    #content-3 { color: green; margin-top: -12px } 
</style>

<div id="main" style="position: relative; z-index: 1;">
    <div id="content-1" style="position: relative; z-index: 10;">#content-1</div>
    <div id="new-context" style="opacity: 0.7;">
        <div id="content-2" style="position: relative; z-index: 200;">#content-2</div>
        <div id="content-3" style="position: relative; z-index: 100;">#content-3</div>
    </div>
</div>

🔹 Здесь элемент #new-context задаёт новый контекст наложения внутри контекста #main.
🔹 Поэтому, несмотря на то, что z-index у элементов #content-2 и #content-3 выше, чем у #content-1, они визуально будут расположены ниже, так как #content-1 поднимается выше всего #new-context благодаря своему z-index.
🔹 При этом #content-2 будет перекрывать #content-3 внутри общего контекста наложения #new-context.

🔗 Подробнее про контекст наложения на MDN.

⚡ Новое видео на канале: наглядно показываем, как работает z-index и контекст наложения, чтобы развеять все вопросы! https://www.youtube.com/watch?v=6p86YhPLwsY

🚀 Разбираемся с видами зависимостей в package.json

Зависимости в проекте Node.js — это модули или пакеты, которые ваше приложение использует для корректной работы. Эти зависимости указываются и управляются через package.json - файл, который служит своего рода картой или спецификацией для проекта. Сегодня разберемся, какие у проекта могут быть зависимости и как правильно их использовать.

1️⃣ dependencies — это основные зависимости, которые необходимы вашему приложению в продакшене. Они включают библиотеки и фреймворки, от которых напрямую зависит работоспособность вашего проекта. Например:

"dependencies": {
  "express": "^4.17.1",
  "mongoose": "^5.9.10"
}

2️⃣ devDependencies — это инструменты и библиотеки, используемые во время разработки и тестирования, но не нужные в продакшене. В эту категорию входят компиляторы, тестовые фреймворки и другие инструменты для улучшения процесса разработки. Пример:

"devDependencies": {
  "eslint": "^7.2.0",
  "jest": "^26.0.1"
}

3️⃣ peerDependencies — обычно используются при разработке библиотек или плагинов. Они указывают на зависимости, которые должны быть установлены в проекте, который будет использовать вашу библиотеку. Но при этом не устанавливают их автоматически, оставляя это на усмотрение разработчика, чтобы не вызывать дублирование библиотек с разными версиями. Например, если ваша библиотека требует обязательного наличия React 18-й версии, то нужно указать:

"peerDependencies": {
  "react": "18.x"
}

Как и для чего разделять зависимости?
- Чистота: Разделение помогает уменьшить размер сборки продукта.
- Безопасность и скорость: В продакшне загружаются только необходимые библиотеки.
- Совместимость: PeerDependencies предотвращают конфликты версий, особенно важно для разработчиков библиотек.

🔗 На самом деле, это только основные виды зависимостей, которые могут быть использованы в проектах. Более подробно про них и про другие виды можно узнать в официальной документации NPM.