🤝🏻 Двусторонняя клиент-серверная связь, часть 3: Server-Sent Events

Недавно я уже рассказывала о двух методах для обеспечения двусторонней связи между клиентом и сервером – Long Polling и WebSockets. Сегодня хочется рассмотреть ещё одну технологию, которая может помочь в организации такой связи - механизм Server-Sent Events (SSE).

👉🏻 SSE — это технология, позволяющая серверам инициировать отправку данных клиентам, подписанным на эти уведомления. Основное применение SSE – отправка обновлений в режиме реального времени от сервера к клиенту через стандартный HTTP-протокол. Как можно заметить, это не совсем двусторонняя, а скорее односторонняя связь, но она в том числе позволяет обмениваться данными между разными клиентами в реальном времени.

Как это работает:

Клиент создаёт объект EventSource, указывая URL сервера, от которого будет получать обновления:

const eventSource = new EventSource('https://example.com/sse');

Сервер обрабатывает запрос, устанавливает необходимые заголовки ответа (самый важный из которых – Content-Type: text/event-stream), и начинает передавать сообщения в формате, специфичном для SSE. Примеры:

data: Сообщение №1 
retry: 2000
--
data: Сообщение №2
id: 2
--
event: specificevent
data: Сообщение с пользовательским типом события

Клиент в это время подписывается на события и обрабатывает их привычным способом:

eventSource.onopen = function(event) {
    console.log('Соединение установлено');
};

eventSource.onmessage = function(event) {
    console.log('Новое сообщение:', event.data);
};

eventSource.addEventListener('specificevent', function(event) {
    console.log('Сообщение с пользовательским типом:', event.data);
});

⚡️ Вот и всё! Снова всё предельно просто. Пример реализации этого подхода для уже знакомого нам чата можно найти в нашем репозитрии. Здесь как раз используется подход SSE для обеспечения двусторонней связи, так как сервер инициирует отправку данных клиентам через SSE в ответ на получение сообщения от клиентов. А также можно потрогать Live Demo, которое мы сделали и для этой технологии.

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

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

🖇 IntersectionObserver – что он пересекает и кого обозревает?

IntersectionObserver в JavaScript – это API, с помощью которого можно подписаться на изменение видимости определённых элементов страницы относительно их родительских элементов или глобальной области просмотра (viewport). Таким образом, можно асинхронно отслеживать появление или исчезновение тех или иных элементов документа.

💡 Для чего он может быть полезен?

1. Ленивая загрузка (lazy loading) изображений и видео: загрузка медиа-контента только тогда, когда пользователь прокручивает страницу, и контент должен скоро появиться в области видимости.

2. “Бесконечный” скролл: динамическая подгрузка данных при достижении конца страницы, чтобы улучшить производительность при работе с большими объёмами данных.

3. Отслеживание взаимодействия с рекламой: определение, просматривал ли пользователь рекламные блоки достаточное время для учета показов.

4. Анимации: активация анимации только тогда, когда элемент становится видимым на экране.

📝 Рассмотрим пример применения IntersectionObserver для реализации бесконечного скролла. Пусть на странице есть 2 элемента:

<div id="container">
  <!-- Сюда динамически добавляем данные -->
</div>
<div id="sentinel"></div> <!-- Элемент, за которым мы наблюдаем -->

И мы хотим загружать новые данные, когда пользователь промотает страницу до конца контейнера. Тогда JavaScript-код будет выглядеть следующим образом:

document.addEventListener("DOMContentLoaded", function() {
    const container = document.getElementById('container');
    const sentinel = document.getElementById('sentinel');

  // Обработчик загрузки и добавления новых данных
    const loadItems = () => { /* ... */ };

  // Обработчик измненения видимости элемента
  const handler = (entries) => {
    entries.forEach(entry => {
         if (entry.isIntersecting) {
             loadItems();
         }
     });
  }
  
  // Создаем объект IntersectionObserver с колбэком
    const observer = new IntersectionObserver(handler);

  // Подписываемся на наш элемент
    observer.observe(sentinel);

  // Загружаем первую порцию данных
    loadItems();
});

Таким образом, мы подписываемся на невидимый элемент, который находится в самом низу нашего списка данных. Как только этот элемент появится в области видимости (то есть выполнится условие entry.isIntersecting), будет инициирована загрузка новых данных, после чего элемент снова окажется внизу страницы. Также в реализации в реальной жизни стоит учесть, что элементы могут закончиться, и не инициировать лишние загрузки при каждом появлении отслеживаемого элемента в области видимости.

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

📏 Prettier, ESLint и Stylelint: в чем разница?

Если вы фронтенд-разработчик, то, скорее всего, сталкивались с инструментами Prettier и ESLint. Оба они широко используются в мире JavaScript для улучшения качества кода, часто встречаются вместе на одном проекте, однако выполняют разные функции. И сегодня хочется разобраться, чем они отличаются и как каждый из них может быть полезен. А также обсудим еще один важный инструмент, который часто игнорируют в этой теме — Stylelint.

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

👉 ESLint — это анализатор кода (линтер), который проверяет ваш код на наличие потенциальных ошибок и плохих практик. ESLint позволяет настроить множество правил на проекте, чтобы обеспечить соблюдение различных стандартов кода и предотвращать ошибки.

👉 Stylelint — это инструмент для линтинга стилей, который проверяет ваш CSS (а также Sass, Less и другие варианты CSS-препроцессоров), чтобы обеспечить соблюдение заданных вами правил и предотвратить ошибки. Stylelint очень полезен для поддержания консистентности и качества ваших стилей.

В чем разница?

- Цель:
- Prettier фокусируется на автоматическом форматировании кода.
- ESLint ориентирован на проверку качества кода и обнаружение ошибок в JavaScript и TypeScript.
- Stylelint занимается линтингом и проверкой CSS-стилей.

- Форматирование против линтинга:
- Prettier просто форматирует код.
- ESLint более глубоко анализирует код и сообщает о проблемах, которые нужно исправить вручную.

- Настройка и правила:
- Prettier практически не требует настроек, он просто работает "из коробки".
- ESLint и Stylelint требуют бОльшей настройки для определения, какие ошибки и правила должны быть проверены, однако позволяют расширять свой функционал через множество плагинов. Например, один из таких интересных плагинов — это eslint-plugin-react-compiler, плагин для React, который помогает улучшить качество кода, показывая анализ нового компилятора React Compiler прямо в IDE (подробнее писали тут).

Prettier, ESLint и Stylelint не являются взаимозаменяемыми инструментами, но они дополняют друг друга. Используя все три инструмента в вашем проекте, вы можете гарантировать, что ваш код будет не только правильно отформатирован, но и лишен потенциальных ошибок, анти-паттернов, а также будет содержать качественно написанные стили.

👍 Ставьте реакции, если интересно узнать подробнее о настройке Prettier, ESLint и Stylelint в проекте с нуля!

Если кто-то еще спросит, в чём проблема !important 😅

📢 Сегодня обсудим одну из опасных веб-атак - CSRF (Cross-Site Request Forgery).

CSRF, или Cross-Site Request Forgery, это вид атаки на веб-приложения, при котором злоумышленник обманывает пользователя и заставляет его выполнить нежелательные действия на сайте, на котором он уже аутентифицирован (например, совершить покупку, изменить настройки аккаунта и т.д.).

Как это работает?

1. Пользователь аутентифицируется на доверенном сайте (например, на сайте банка).
2. Затем он попадает на вредоносный сайт, созданный злоумышленником.
3. Вредоносный сайт отправляет скрытый запрос к доверенному сайту, используя аутентификационные данные (куки, сессионные данные и т.д.).
4. Доверенный сайт выполняет этот запрос, считая его легитимным.

Эта атака возможна благодаря тому, что браузерные запросы автоматически включают в себя все куки, включая сессионные.

Примеры атак:

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

Для защиты от CSRF-атак разработчику следует:

1. Использовать встроенную защиту от CSRF в вашем фреймворке, если она есть.
2. Добавлять CSRF-токены ко всем запросам, изменяющим состояние, и проверять их на сервере.
3. Использовать атрибут SameSite Cookie для сессионных куки.
4. Проверять происхождение запроса с использованием стандартных заголовков: origin и referer.
5. НЕ использовать GET-запросы для операций, изменяющих состояние. Если используете, защитите эти ресурсы от CSRF.

⚠️ Важно помнить, что XSS-уязвимости могут обойти все методы защиты от CSRF!

Подробнее про методы защиты можно почитать здесь

🌟 Простой способ сделать красивый скролл!

Вы можете использовать два CSS-свойства - scrollbar-width и scrollbar-color, которые поддерживаются всеми браузерами, кроме Safari. А для того, чтобы поддержать стилизацию и в нём, можно использовать псевдоклассы с вендорным префиксом ::-webkit-scrollbar.

Вот так быстро можно сделать скролл красивым, используя лишь чистый CSS!

Как и обещали, возвращаемся к вам с разбором задачи с LeetCode!)

Ставьте лайки этому видео и пишите в комментариях, какие еще задачи разобрать 💻

https://youtu.be/c44ISTawL1c

📚 Начало рабочей недели - самое время, чтобы продолжить разговор о линтерах!
Сегодня мы рассмотрим, как настроить с нуля в своем проекте ESLint, Prettier, Stylelint, а также Husky и lint-staged.

P.S. Мы пробуем новый формат статей в Telegraph. Если вам он понравится, поддержите этот пост реакциями!)

📌 Полезное свойство в JSDoc, особенно при рефакторинге! Помогает отмечать функции и константы как deprecated, то есть устаревшими и не рекомендованными к использованию.

В комментариях также полезно указывать альтернативу старому решению.

IDE автоматически будет зачеркивать такие функции в коде и отображать специальную подсказку.

Сегодня мы хотели бы поделиться тем, как можно организовать с нуля небольшой проект, для которого кроме клиента необходимо иметь простой сервер, но при этом нет нужды писать сложный бэкенд или использовать специальные большие фреймворки. А также бонусом расскажем, как можно быстро и просто его задеплоить ⬇️

https://telegra.ph/Eshchyo-odin-preset-sozdayom-demo-s-pomoshchyu-Vite-i-Express-08-17

💡 Как можно сделать такой элемент, используя только один div?

С помощью CSS-свойства outline можно добавить вторую границу вокруг элемента! А если нужно сделать расстояние до границы прозрачным, можно использовать свойство outline-offset.

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

Сегодня хотим поделиться с вами отличным ресурсом для изучения и практики CSS Flexbox!

Это бесплатный игровой тренажёр 👉 Flexbox Froggy

Закрепляем на видное место и вперёд оттачивать свои навыки в flexbox-ах!) 🚀

🤔 Вы когда-нибудь задавались вопросом, чем отличаются import и require, и почему где-то используется одно, а где-то другое? Если да, то мы написали подробный разбор систем модулей в JavaScript, чтобы развеять все вопросы. А если вы уже разбираетесь в них, то статья поможет закрепить знания.

https://telegra.ph/CommonJS-i-ECMAScript-Modules-v-JavaScript-v-chyom-raznica-i-kak-s-nimi-zhit-08-24

Все мы хоть раз пользовались директивой @ts-ignore, которая позволяет игнорировать строку кода на наличие ошибок TypeScript. Но, на самом деле, это не единственная директива, позволяющая управлять поведением компилятора. Вот ещё несколько примеров:

1️⃣ @ts-expect-error — похожа на @ts-ignore, но ожидает, что следующая строка кода вызовет ошибку компиляции. Если ошибка не возникает, TypeScript выдаст предупреждение.

2️⃣ @ts-nocheck — отключает проверку ошибок для всего файла. Полезно, когда нужно быстро включить файл в проект без необходимости исправлять все ошибки типизации. например, при миграции существующего JavaScript-проекта на TypeScript.

3️⃣ @ts-check — включает проверку типов в файле JavaScript, когда в TypeScript включён режим allowJs. Полезно, если в вашем проекте используются файлы JavaScript, и вы хотите частично применять возможности TypeScript для повышения надёжности кода.

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

Что проверяется в этом условии? 🤡
Пишите ваши варианты в комментариях)

Сегодня я расскажу о том, как работают JWT-токены, а также что такое access и refresh токены, и как с помощью них организовывается процесс аутентификации и авторизации в современных приложениях

Читать статью

Обрезка нескольких строк с троеточием на чистом CSS!

Все мы знаем, что с помощью свойства text-overflow: ellipsis; можно добавить троеточие к одной строчке, которая выходит за пределы контейнера. Но также с помощью свойства -webkit-line-clamp мы можем обрезать несколько строк текста!

Для его использования нужно также установить два нестандартных свойства: display: -webkit-box; и -webkit-box-orient: vertical;

Обратите внимание, что без добавления overflow: hidden; содержимое не будет обрезано, но многоточие все равно будет отображаться после указанного количества строк.