Когда читаешь документацию через переводчик, и не такое встретишь 🙊

Пишите в комментариях, каких покемонов видели вы 🙃

State-менеджеры vs React Hooks: Когда и что лучше использовать? 🔄

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

📌 Когда использовать React Hooks?
Хуки хорошо подходят для управления локальным состоянием компонента или состоянием, связанным с отображением, например:
- Тема интерфейса (темная/светлая)
- Языковые настройки
- Скрытие и раскрытие блоков (например, в FAQ)
- Локальное значение, введенное в текстовое поле, которое используется внутри компонента Input до передачи данных на сервер/в другие компоненты выше

Хуки позволяют использовать какое-то состояние внутри конкретного компонента. Кроме этого вы можете писать свои кастомные хуки, что делает код проще и чище.

📌 Когда лучше использовать State-менеджеры?
Для глобального управления состоянием, связанным с бизнес-логикой приложения, целесообразнее использовать state-менеджеры. К таким сценариям относятся, например:
- Информация о пользователе
- Данные о товарах, добавленных в избранное
- Фильтры и настройки поиска
- Пагинация и навигация по спискам данных

State-менеджеры, такие как Redux или MobX, позволяют централизовать управление состоянием и упростить обмен данными между различными частями приложения без необходимости проброса пропсов через множество уровней или использования React Context в сложных сценариях.

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

Посмотрим, что на этот вопрос ответил сам ИИ🤔

как думаете, лукавит?🦊

🔍 В прошлом посте мы разбирались, что такое CDN. За подробным сравнением популярных CDN переходите по ссылке: https://habr.com/ru/articles/557048/

Подключение CDN, например, Amazon CloudFront, происходит достаточно просто. Вот подробная инструкция по настройке: https://aws.amazon.com/ru/getting-started/hands-on/deliver-content-faster/

В инструкциях вы столкнётесь с упоминанием S3. Что это такое?

Amazon S3 (Simple Storage Service) — это масштабируемое облачное хранилище данных, предоставляемое Amazon Web Services (AWS). Его можно использовать для хранения всевозможных данных: от картинок, скриптов и шрифтов для веб-сайта до бэкапов и данных для аналитики или машинного обучения.

Однако не только Amazon использует технологию S3. Яндекс, к примеру, предлагает совместимое по API решение. Подробнее о Yandex Object Storage можно почитать здесь: https://yandex.cloud/ru/docs/glossary/s3

Каждый объект в S3 имеет:
- Уникальный идентификатор (URL-адрес объекта)
- Метаданные (размер, тип и дополнительные пользовательские данные)
- Содержимое (сами данные в различных форматах)

Данные в S3 группируются в бакеты, каждый из которых имеет уникальный URL. По итогу ваш ресурс будет доступен по такому адресу - https://storage.yandexcloud.net/<имя бакета>/<имя идентификатора>

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

🌐 Новое видео на канале! Углубляемся в HTML и CSS: Всё о списках

🔢 Что вы узнаете:
- Как создать нумерованный и ненумерованный список
- Как организовывать вложенные списки

🎬 Не забудьте подписаться на канал, чтобы не пропустить множество полезных уроков по веб-разработке

🔗 Смотреть видео

Давайте поговорим о добавлении анимации плавного появления элемента с помощью CSS-свойства transition.

CSS-переходы позволяют анимировать изменения свойств. Вы задаёте свойство для анимации и определяете способ анимации. Когда свойство изменяется, браузер самостоятельно обработает это изменение и отрисует анимацию.

🚫 Однако, если попытаться анимировать свойство display, например:

.animated {
  transition: display 3s;
}

Вы обнаружите, что это не работает. Почему? Дело в том, что не все CSS-свойства можно анимировать. Свойство должно поддерживать интерполяцию своего значения, другими словами иметь диапазон промежуточных значений между двумя состояниями.

Свойство display не анимируется, потому что между display: block; и display: none; нет промежуточных значений. Однако opacity, изменяющееся от 0 до 1, допускает промежуточные значения (например, 0.1, 0.2 и так далее) и отлично подходит для плавных переходов.

💡 Таким образом мы можем переписать наш пример и использовать opacity для плавного появления или исчезновения элемента:

.animated {
  transition: opacity 3s;
  opacity: 1;
}
.animated.hide {
  opacity: 0;
}

🔗 Детальнее про CSS-переходы и анимируемые свойства можно прочитать на MDN:
- Использование CSS-переходов
- Анимируемые CSS-свойства

🌟 Улучшаем Анимации в 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>.