Библиотеки JavaScript для всплывающих окон: обзор лучших решений
#почитать
Всплывающие окна (popups, модальные окна) — важный инструмент в веб-разработке. Они помогают отображать уведомления, формы, изображения и другие элементы без перезагрузки страницы. JavaScript-библиотеки делают этот процесс удобным и гибким. Давайте рассмотрим популярные решения и их особенности.
⏱ Читать статью
#почитать
Всплывающие окна (popups, модальные окна) — важный инструмент в веб-разработке. Они помогают отображать уведомления, формы, изображения и другие элементы без перезагрузки страницы. JavaScript-библиотеки делают этот процесс удобным и гибким. Давайте рассмотрим популярные решения и их особенности.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5👍1
Что если использовать контейнерные единицы измерения для... всего?
#почитать
Как-то подумалось, а что, если использовать контейнерные единицы измерения для каждого элемента в дизайне? Наверное, тогда, всё будет хорошо масштабироваться. Контейнерные единицы измерения, если вы о них не слышали, это такие же единицы измерения (вроде, px или rem, но более тесно связанные с единицами измерения области просмотра, например, vw или vi), размер которых зависит от контейнера, в котором они находятся.
Оказалось, сюрприз-сюрприз, все не так просто. Есть множество вещей, с которыми контейнерные запросы работают плохо, или для которых они просто не подходят.
В качестве эксперимента мы взяли довольно простой макет из сетки с карточками разного размера. Не считайте этот демонстрационный пример хорошим, это просто то, что первым пришло в голову.
⏱ Читать статью
#почитать
Как-то подумалось, а что, если использовать контейнерные единицы измерения для каждого элемента в дизайне? Наверное, тогда, всё будет хорошо масштабироваться. Контейнерные единицы измерения, если вы о них не слышали, это такие же единицы измерения (вроде, px или rem, но более тесно связанные с единицами измерения области просмотра, например, vw или vi), размер которых зависит от контейнера, в котором они находятся.
Оказалось, сюрприз-сюрприз, все не так просто. Есть множество вещей, с которыми контейнерные запросы работают плохо, или для которых они просто не подходят.
В качестве эксперимента мы взяли довольно простой макет из сетки с карточками разного размера. Не считайте этот демонстрационный пример хорошим, это просто то, что первым пришло в голову.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
Три подхода к селектору & (амперсанд) в CSS
#почитать
& — мощное дополнение к CSS, позволяющее создавать селекторы без повторений и способствующее улучшению организованности и понимания кода.
⏱ Читать статью
#почитать
& — мощное дополнение к CSS, позволяющее создавать селекторы без повторений и способствующее улучшению организованности и понимания кода.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
Форматирование текста в JavaScript: методы bold(), italics() и другие
#почитать
⏱ Читать статью
#почитать
Исторический контекст: откуда взялись эти методы?
Методы вроде bold() и italics() появились в JavaScript на заре веба, в середине 90-х, когда браузеры вроде Netscape Navigator доминировали в интернете. Тогда веб был больше про документы, чем про интерактивные приложения. Эти методы были частью раннего API строк в JavaScript, чтобы разработчики могли быстро форматировать текст для отображения в HTML-документах. Например, bold() оборачивает строку в тег <b>, а italics() — в <i>. Это было удобно для простых задач, когда CSS ещё не стал стандартом стилизации, а HTML использовался для оформления текста.
Однако с развитием веба и приходом CSS такие методы начали терять популярность. Почему? Потому что CSS позволяет гибко управлять стилями, а методы вроде bold() привязаны к конкретным HTML-тегам, что делает их менее универсальными. Тем не менее, они всё ещё поддерживаются в современных браузерах и могут быть полезны для новичков или в специфических сценариях.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5👍1🔥1
Меню для отзывчивого интерфейса без скриптов
#почитать
Простое и понятное меню навигации — важнейшая часть удобного интерфейса. Отзывчивость меню тоже критична, ведь сейчас более половины всего интернет-трафика приходится на мобильные устройства.
В подходе mobile-first разработка начинается с самого маленького экрана — мобильного, и по мере увеличения ширины добавляются новые стили и элементы. В итоге страница автоматически подстраивается под размер окна браузера.
Хотя адаптивное меню — ключевой элемент хорошего UX, для его реализации не обязательно использовать JavaScript. В этом руководстве мы покажем, как сделать отзывчивое mobile-first меню только с помощью HTML и CSS.
⏱ Читать статью
#почитать
Простое и понятное меню навигации — важнейшая часть удобного интерфейса. Отзывчивость меню тоже критична, ведь сейчас более половины всего интернет-трафика приходится на мобильные устройства.
В подходе mobile-first разработка начинается с самого маленького экрана — мобильного, и по мере увеличения ширины добавляются новые стили и элементы. В итоге страница автоматически подстраивается под размер окна браузера.
Хотя адаптивное меню — ключевой элемент хорошего UX, для его реализации не обязательно использовать JavaScript. В этом руководстве мы покажем, как сделать отзывчивое mobile-first меню только с помощью HTML и CSS.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5👍1
Как переносить «висячие» слова на следующую строку с помощью JavaScript
#почитать
В типографике существует понятие “висячих слов” — это короткие слова (предлоги, союзы, местоимения), которые остаются в конце строки при переносе текста. Такие переносы нарушают удобочитаемость и эстетику текста. В русской типографике принято избегать переносов после коротких слов длиной 1-2 символа.
⏱ Читать статью
#почитать
В типографике существует понятие “висячих слов” — это короткие слова (предлоги, союзы, местоимения), которые остаются в конце строки при переносе текста. Такие переносы нарушают удобочитаемость и эстетику текста. В русской типографике принято избегать переносов после коротких слов длиной 1-2 символа.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
Новый способ стилизации отступов в CSS
#почитать
Стилизация отступов в таких компонентах пользовательского интерфейса, как календари, карточки или сетки данных, может значительно улучшить читаемость и придать общий эстетический вид. Однако достижение этого эффекта в макетах с grid и flexbox традиционно требует неудобных обходных путей с использованием бордеров, псевдоэлементов или фоновых трюков. Такие обходные пути могут быть проблематичными по ряду причин.
⏱ Читать статью
#почитать
Стилизация отступов в таких компонентах пользовательского интерфейса, как календари, карточки или сетки данных, может значительно улучшить читаемость и придать общий эстетический вид. Однако достижение этого эффекта в макетах с grid и flexbox традиционно требует неудобных обходных путей с использованием бордеров, псевдоэлементов или фоновых трюков. Такие обходные пути могут быть проблематичными по ряду причин.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
Полное руководство по типу Number и объекту Math
#почитать
Числа — это основа многих программ, будь то расчёты в играх, обработка данных в формах или генерация случайных событий. В JavaScript числа представлены типом Number, который охватывает как целые, так и дробные значения. А для сложных математических операций есть встроенный объект Math, который предоставляет множество полезных методов. Если вы новичок в веб-разработке, понимание чисел и их возможностей в JavaScript — это ключ к созданию динамичных и функциональных приложений. В этой статье мы подробно разберём тип Number, объект Math, специальные значения вроде Infinity и NaN, а также покажем, как использовать их в реальных проектах.
⏱ Читать статью
#почитать
Числа — это основа многих программ, будь то расчёты в играх, обработка данных в формах или генерация случайных событий. В JavaScript числа представлены типом Number, который охватывает как целые, так и дробные значения. А для сложных математических операций есть встроенный объект Math, который предоставляет множество полезных методов. Если вы новичок в веб-разработке, понимание чисел и их возможностей в JavaScript — это ключ к созданию динамичных и функциональных приложений. В этой статье мы подробно разберём тип Number, объект Math, специальные значения вроде Infinity и NaN, а также покажем, как использовать их в реальных проектах.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
Эти CSS-техники устарели
#почитать
⏱ Читать статью
#почитать
Общаясь с коллегами, я заметил, что они незнакомы с последними возможностями CSS. Как обычно, у всех свои причины. У кого-то много повседневной рутины. Кому-то в принципе неинтересно, что нового происходит в CSS. А кто-то по привычке использует подходы десятилетней давности и ему норм.
Как фанату CSS, мне грустно. Сколько же прикольных вещей проходит мимо них. Да и их код может быть меньше, надёжнее и проще для понимания. В общем, я собрал несколько фрагментов кода, которые были популярны давным-давно, и переписал их с помощью новых возможностей CSS.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6
Создаем галерею-сетку со слайдером: HTML, CSS и JavaScript
#почитать
В этом проекте мы реализуем красивую галерею на примере направлений путешествий для турагентства. Карточки располагаются в сетке, при клике открывается модальное окно со слайдером. Всё работает на чистом JavaScript, без сторонних библиотек.
⏱ Читать статью
#почитать
В этом проекте мы реализуем красивую галерею на примере направлений путешествий для турагентства. Карточки располагаются в сетке, при клике открывается модальное окно со слайдером. Всё работает на чистом JavaScript, без сторонних библиотек.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
Библиотеки JavaScript для создания фотогалереи
#почитать
Веб-разработчики часто сталкиваются с задачей создания фотогалерей для сайтов. Хорошая галерея не только облегчает пользователям просмотр изображений, но и делает сайт более привлекательным и удобным. В этой статье рассмотрим несколько популярных библиотек для создания фотогалерей на JavaScript, которые помогут вам быстро и эффективно решить эту задачу.
⏱ Читать статью
#почитать
Веб-разработчики часто сталкиваются с задачей создания фотогалерей для сайтов. Хорошая галерея не только облегчает пользователям просмотр изображений, но и делает сайт более привлекательным и удобным. В этой статье рассмотрим несколько популярных библиотек для создания фотогалерей на JavaScript, которые помогут вам быстро и эффективно решить эту задачу.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥1
Forwarded from джоброкет 🚀 вакансии в IT
This media is not supported in your browser
VIEW IN TELEGRAM
🪐 Новые вакансии фронтендеров
🚀 Lead Frontend Developer (с функциями системного аналитика) в Senior Soft, до 290 000 ₽
Подробнее➡️
https://jobrocket.ru/job/lead-frontend-developer-s-funkciyami-sistemnogo-analitika-senior-soft-3dc5daf0
🚀 Frontend-разработчик в Human Help, до 80 000 ₽
Подробнее➡️
https://jobrocket.ru/job/frontend-razrabotchik-human-help-b324db4a
🚀 React Frontend Developer в Ziphy, до 390 000 ₽
Подробнее➡️
https://jobrocket.ru/job/react-frontend-developer-ziphy-6e7ee0e9
🚀 Angular-разработчик в ИП, 285 000 - 335 000 ₽
Подробнее➡️
https://jobrocket.ru/job/angular-razrabotchik-nda-cc42d977
🚀 HTML-верстальщик в NDA (веб), 50 000 - 60 000 ₽
Подробнее➡️
https://jobrocket.ru/job/html-verstalshik-nda-veb-228edc88
🚀 Fullstack-разработчик в DataNest, 200 000 - 280 000 ₽
Подробнее➡️
https://jobrocket.ru/job/fullstack-razrabotchik-datanest-7c4cf183
🚀 Разработчик (PHP/Symfony/Angular/Node.js) в Core12, 150 000 - 250 000 ₽
Подробнее➡️
https://jobrocket.ru/job/razrabotchik-phpsymfonyangularnodejs-core12-e074ee3d
🚀 Дизайнер интерфейсов в Vondo, до 120 000 ₽
Подробнее➡️
https://jobrocket.ru/job/dizajner-interfejsov-vondo-04cca7d0
🚀 Fullstack PHP JS в IT-компания (Сколково), 250 000 - 300 000 ₽
Подробнее➡️
https://jobrocket.ru/job/fullstack-php-js-it-kompaniya-7830d561
🚀 Frontend Developer в Infomediji, 380 000 - 570 000 ₽
Подробнее➡️
https://jobrocket.ru/job/frontend-developer-infomediji-9d262255
🚀 UI Lead Designer в NDA (продуктовый стартап на Кипре), oт 380 000 ₽
Подробнее➡️
https://jobrocket.ru/job/ui-lead-designer-nda-produktovyj-startap-na-kipre-79327b83
🚀 Frontend-разработчик в HR-tech проект, 300 000 - 400 000 ₽
Подробнее➡️
https://jobrocket.ru/job/frontend-razrabotchik-hr-tech-proekt-867f27bb
🚀 React-разработчик (контракт), oт 80 000 ₽
Подробнее➡️
https://jobrocket.ru/job/react-razrabotchik-proekt-0b417d4e
🚀 AI-Native Fullstack Developer (React Native) в Unimatch Lab, oт 300 000 ₽
Подробнее➡️
https://jobrocket.ru/job/ai-native-fullstack-developer-react-native-unimatch-lab-faa3acf2
Больше вакансий frontend здесь⤵️
https://jobrocket.ru/?categories=frontend
🚀 Lead Frontend Developer (с функциями системного аналитика) в Senior Soft, до 290 000 ₽
Подробнее
https://jobrocket.ru/job/lead-frontend-developer-s-funkciyami-sistemnogo-analitika-senior-soft-3dc5daf0
🚀 Frontend-разработчик в Human Help, до 80 000 ₽
Подробнее
https://jobrocket.ru/job/frontend-razrabotchik-human-help-b324db4a
🚀 React Frontend Developer в Ziphy, до 390 000 ₽
Подробнее
https://jobrocket.ru/job/react-frontend-developer-ziphy-6e7ee0e9
🚀 Angular-разработчик в ИП, 285 000 - 335 000 ₽
Подробнее
https://jobrocket.ru/job/angular-razrabotchik-nda-cc42d977
🚀 HTML-верстальщик в NDA (веб), 50 000 - 60 000 ₽
Подробнее
https://jobrocket.ru/job/html-verstalshik-nda-veb-228edc88
🚀 Fullstack-разработчик в DataNest, 200 000 - 280 000 ₽
Подробнее
https://jobrocket.ru/job/fullstack-razrabotchik-datanest-7c4cf183
🚀 Разработчик (PHP/Symfony/Angular/Node.js) в Core12, 150 000 - 250 000 ₽
Подробнее
https://jobrocket.ru/job/razrabotchik-phpsymfonyangularnodejs-core12-e074ee3d
🚀 Дизайнер интерфейсов в Vondo, до 120 000 ₽
Подробнее
https://jobrocket.ru/job/dizajner-interfejsov-vondo-04cca7d0
🚀 Fullstack PHP JS в IT-компания (Сколково), 250 000 - 300 000 ₽
Подробнее
https://jobrocket.ru/job/fullstack-php-js-it-kompaniya-7830d561
🚀 Frontend Developer в Infomediji, 380 000 - 570 000 ₽
Подробнее
https://jobrocket.ru/job/frontend-developer-infomediji-9d262255
🚀 UI Lead Designer в NDA (продуктовый стартап на Кипре), oт 380 000 ₽
Подробнее
https://jobrocket.ru/job/ui-lead-designer-nda-produktovyj-startap-na-kipre-79327b83
🚀 Frontend-разработчик в HR-tech проект, 300 000 - 400 000 ₽
Подробнее
https://jobrocket.ru/job/frontend-razrabotchik-hr-tech-proekt-867f27bb
🚀 React-разработчик (контракт), oт 80 000 ₽
Подробнее
https://jobrocket.ru/job/react-razrabotchik-proekt-0b417d4e
🚀 AI-Native Fullstack Developer (React Native) в Unimatch Lab, oт 300 000 ₽
Подробнее
https://jobrocket.ru/job/ai-native-fullstack-developer-react-native-unimatch-lab-faa3acf2
Больше вакансий frontend здесь
https://jobrocket.ru/?categories=frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6👍1
CSS font-palette: управление цветами шрифтов
#почитать
Свойство font-palette позволяет выбрать одну из цветовых палитр, встроенных в цветной шрифт, или создать свою. При использовании — оно задаёт преобладающую окраску глифов, и свойство color уже не влияет.
В свою очередь, цветной шрифт — это шрифт, в котором глифы содержат встроенную информацию о цвете. В отличие от обычных векторных шрифтов (TrueType, OpenType), где цвет задаётся снаружи с помощью CSS-свойства color, в цветном шрифте сами глифы уже закодированы с цветными деталями — например, несколько заливок, градиенты, обводки, изображения.
⏱ Читать статью
#почитать
Свойство font-palette позволяет выбрать одну из цветовых палитр, встроенных в цветной шрифт, или создать свою. При использовании — оно задаёт преобладающую окраску глифов, и свойство color уже не влияет.
В свою очередь, цветной шрифт — это шрифт, в котором глифы содержат встроенную информацию о цвете. В отличие от обычных векторных шрифтов (TrueType, OpenType), где цвет задаётся снаружи с помощью CSS-свойства color, в цветном шрифте сами глифы уже закодированы с цветными деталями — например, несколько заливок, градиенты, обводки, изображения.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
Функции в JavaScript: полное руководство для начинающих
#почитать
Функции в JavaScript — это блоки кода, которые выполняют определённую задачу и могут быть вызваны многократно. Они помогают структурировать программу, делая код чище и удобнее для поддержки. В этой статье мы разберём, как создавать функции, какие их виды существуют, и как использовать параметры, возвращаемые значения и другие возможности. Всё с примерами, чтобы вы могли сразу начать применять знания!
⏱ Читать статью
#почитать
Функции в JavaScript — это блоки кода, которые выполняют определённую задачу и могут быть вызваны многократно. Они помогают структурировать программу, делая код чище и удобнее для поддержки. В этой статье мы разберём, как создавать функции, какие их виды существуют, и как использовать параметры, возвращаемые значения и другие возможности. Всё с примерами, чтобы вы могли сразу начать применять знания!
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
Как работает единица измерения em в CSS
#почитать
Единица em используется в CSS для задания относительных размеров, которые зависят от шрифта родительского или текущего элемента. Это делает верстку гибкой и адаптивной: если пользователь увеличит базовый размер текста, элементы тоже изменятся.
⏱ Читать статью
#почитать
Единица em используется в CSS для задания относительных размеров, которые зависят от шрифта родительского или текущего элемента. Это делает верстку гибкой и адаптивной: если пользователь увеличит базовый размер текста, элементы тоже изменятся.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5❤1🔥1
Веб-разработка на ванильном HTML, CSS и JavaScript: стилизация и сайты
#почитать
Современные веб-приложения построены на основе богатого инструментария работы с CSS, связанного со множеством пакетов NPM и этапов сборки. Ванильное же веб-приложение может выбрать более легковесный путь, отказавшись от современных методик с предварительно обработанным CSS и выбрав нативные для браузеров стратегии.
⏱ Читать статью
#почитать
Современные веб-приложения построены на основе богатого инструментария работы с CSS, связанного со множеством пакетов NPM и этапов сборки. Ванильное же веб-приложение может выбрать более легковесный путь, отказавшись от современных методик с предварительно обработанным CSS и выбрав нативные для браузеров стратегии.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
Округление в CSS с функцией round()
#почитать
Функция round() появилась в CSS как часть стандарта Values and Units Level 4. Она предназначена для округления числовых значений до нужной кратности. Это полезный инструмент, который позволяет контролировать размеры и позиции без лишних ухищрений с calc() или JavaScript.
⏱ Читать статью
#почитать
Функция round() появилась в CSS как часть стандарта Values and Units Level 4. Она предназначена для округления числовых значений до нужной кратности. Это полезный инструмент, который позволяет контролировать размеры и позиции без лишних ухищрений с calc() или JavaScript.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
Псевдоклассы валидации форм: делаем интерфейсы понятнее
#почитать
Когда вы создаёте веб-форму, важно, чтобы пользователь сразу понимал, правильно ли он заполнил поля. Здесь на помощь приходят псевдоклассы :valid и :invalid. Эти инструменты, доступные в браузерах с 2018 года (согласно Baseline, статус «Widely Available»), позволяют стилизовать элементы формы в зависимости от того, проходят ли они валидацию. Представьте: пользователь вводит email, а поле подсвечивается зелёным, если всё верно, или красным, если что-то пошло не так. Это не только удобно, но и делает интерфейс интуитивно понятным даже для новичков.
Кроме того, существуют псевдоклассы :required и :optional. Они помогают визуально выделить обязательные и необязательные поля. Например, можно добавить звёздочку или изменить цвет границы для обязательных полей, чтобы пользователь сразу знал, что их нужно заполнить.
⏱ Читать статью
#почитать
Когда вы создаёте веб-форму, важно, чтобы пользователь сразу понимал, правильно ли он заполнил поля. Здесь на помощь приходят псевдоклассы :valid и :invalid. Эти инструменты, доступные в браузерах с 2018 года (согласно Baseline, статус «Widely Available»), позволяют стилизовать элементы формы в зависимости от того, проходят ли они валидацию. Представьте: пользователь вводит email, а поле подсвечивается зелёным, если всё верно, или красным, если что-то пошло не так. Это не только удобно, но и делает интерфейс интуитивно понятным даже для новичков.
Кроме того, существуют псевдоклассы :required и :optional. Они помогают визуально выделить обязательные и необязательные поля. Например, можно добавить звёздочку или изменить цвет границы для обязательных полей, чтобы пользователь сразу знал, что их нужно заполнить.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5👍3
focus-visible
#почитать
Когда мы создаём сайты, мы хотим, чтобы ими было удобно пользоваться всем людям — и тем, кто управляет страницей с помощью мыши, и тем, кто использует клавиатуру. Например, человек с ограниченными возможностями зрения может перемещаться по элементам с помощью клавиши Tab.
Браузеры по умолчанию показывают рамку (outline) вокруг элемента, когда он получает фокус — например, при клике мышкой или при перемещении с помощью клавиатуры. Эта рамка помогает понять, какой элемент активный.
Но бывает так, что рамка появляется даже тогда, когда она не нужна. Например, Вы кликнули мышкой по кнопке, и вокруг неё появилась рамка — выглядит не очень красиво, а пользы от неё нет, потому что курсор мыши уже показывает, куда мы кликнули.
Тут и помогает :focus-visible. Этот псевдокласс позволяет показывать рамку только в тех случаях, когда это действительно полезно — обычно при навигации с клавиатуры.
⏱ Читать статью
#почитать
Когда мы создаём сайты, мы хотим, чтобы ими было удобно пользоваться всем людям — и тем, кто управляет страницей с помощью мыши, и тем, кто использует клавиатуру. Например, человек с ограниченными возможностями зрения может перемещаться по элементам с помощью клавиши Tab.
Браузеры по умолчанию показывают рамку (outline) вокруг элемента, когда он получает фокус — например, при клике мышкой или при перемещении с помощью клавиатуры. Эта рамка помогает понять, какой элемент активный.
Но бывает так, что рамка появляется даже тогда, когда она не нужна. Например, Вы кликнули мышкой по кнопке, и вокруг неё появилась рамка — выглядит не очень красиво, а пользы от неё нет, потому что курсор мыши уже показывает, куда мы кликнули.
Тут и помогает :focus-visible. Этот псевдокласс позволяет показывать рамку только в тех случаях, когда это действительно полезно — обычно при навигации с клавиатуры.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3❤1🔥1
Как использовать cause для более понятной обработки ошибок в JavaScript
#почитать
Новое свойство cause в объекте error позволяет узнать исходную причину сбоя и облегчить отладку, особенно при повторении ошибок. Оно помогает выстроить цепочку событий и лучше понимать, где возникла проблема.
⏱ Читать статью
#почитать
Новое свойство cause в объекте error позволяет узнать исходную причину сбоя и облегчить отладку, особенно при повторении ошибок. Оно помогает выстроить цепочку событий и лучше понимать, где возникла проблема.
Please open Telegram to view this post
VIEW IN TELEGRAM
👏5👎2🔥2