В JavaScript у событий есть специальные модификаторы, которые позволяют изменять поведение события, управлять его распространением, обработкой и связанной с ним логикой.
Этот метод предотвращает всплытие события вверх по дереву DOM.
По умолчанию, события в DOM распространяются по фазам: погружение (capturing) → цель (target) → всплытие (bubbling). Если вы хотите остановить обработку события на текущем элементе и не позволить ему "подняться" выше по дереву DOM, используйте
stopPropagation
.<div id="parent" style="padding: 20px; background: lightblue;">
Родительский элемент
<button id="child">Дочерний элемент</button>
</div>
<script>
document.getElementById("parent").addEventListener("click", () => {
alert("Событие всплыло до родителя");
});
document.getElementById("child").addEventListener("click", (event) => {
alert("Событие на кнопке");
event.stopPropagation(); // Остановим всплытие
});
</script>
Этот метод, помимо остановки всплытия (как
stopPropagation
), предотвращает выполнение других обработчиков на том же элементе. Если у одного и того же элемента есть несколько обработчиков для одного события, stopImmediatePropagation
гарантирует, что после его вызова остальные обработчики не будут выполнены.<button id="myButton">Нажми меня</button>
<script>
const button = document.getElementById("myButton");
button.addEventListener("click", () => {
alert("Обработчик 1");
});
button.addEventListener("click", (event) => {
alert("Обработчик 2");
event.stopImmediatePropagation(); // Остановим все остальные обработчики
});
button.addEventListener("click", () => {
alert("Обработчик 3"); // Этот обработчик не выполнится
});
</script>
Этот метод отменяет поведение элемента по умолчанию.
Некоторые элементы (например, ссылки или формы) имеют стандартное поведение. Например:
- Клик по ссылке ведет на новый URL.
- Отправка формы перезагружает страницу.
С помощью
preventDefault
можно предотвратить это поведение.<a href="https://example.com" id="link">Перейти на сайт</a>
<script>
const link = document.getElementById("link");
link.addEventListener("click", (event) => {
event.preventDefault(); // Останавливаем переход по ссылке
alert("Поведение ссылки отменено");
});
</script>
Это модификатор, который не является методом, а используется в настройках обработчика событий. Он указывает, что обработчик не вызывает
preventDefault
. Этот модификатор помогает оптимизировать обработку событий, таких как прокрутка (scroll
), делая их более производительными. Некоторые браузеры при обработке событий (например, touchstart
или wheel
) предполагают, что вы можете использовать preventDefault
. Это замедляет прокрутку, так как браузеру нужно ждать завершения вашего обработчика. Указав passive: true
, вы говорите браузеру, что не собираетесь отменять поведение.window.addEventListener("scroll", () => {
console.log("Скролл работает");
}, { passive: true });
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍22
Forwarded from easyoffer
easyoffer
Backend
Python | Вопросы
Python | Удалёнка
Python | LeetCode
Python | Тесты
Frontend | Вопросы
Frontend | Удалёнка
JavaScript | LeetCode
Frontend | Тесты
Java | Вопросы
Java | Удалёнка
Java | LeetCode
Java | Тесты
Тестировщик | Вопросы
Тестировщик | Удалёнка
Тестировщик | Тесты
Data Science | Вопросы
Data Science | Удалёнка
Data Science | Тесты
C# | Вопросы
C# | Удалёнка
C# | LeetCode
C# | Тесты
C/C++ | Вопросы
C/C++ | Удалёнка
C/C++ | LeetCode
C/C++ | Тесты
Golang | Вопросы
Golang | Удалёнка
Golang | LeetCode
Golang | Тесты
DevOps | Вопросы
DevOps | Удалёнка
DevOps | Тесты
PHP | Вопросы
PHP | Удалёнка
PHP | LeetCode
PHP | Тесты
Kotlin | Вопросы
Kotlin | Удалёнка
Kotlin | LeetCode
Kotlin | Тесты
Swift | Вопросы
Swift | Удалёнка
Swift | LeetCode
Swift | Тесты
Please open Telegram to view this post
VIEW IN TELEGRAM
💊2
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍25🔥5❤3
В JavaScript, чтобы уничтожить объект
Web Worker
, необходимо использовать метод terminate()
. Этот метод останавливает выполнение worker'а, освобождает связанные с ним ресурсы и завершает его работу. После вызова terminate()
объект worker больше не может быть использован.Web Worker позволяет выполнять тяжелые операции в фоновом потоке, не блокируя основной поток (UI-поток). Однако, если worker больше не нужен, он продолжает существовать и занимает ресурсы (память, процессорное время). Чтобы избежать утечек памяти и оптимизировать работу приложения, важно уничтожать worker, когда он больше не используется.
Вы вызываете метод
terminate()
на экземпляре объекта worker. Это мгновенно останавливает выполнение фонового скрипта.// Создаем worker
const myWorker = new Worker('worker.js');
// Выполняем какие-то операции через worker
myWorker.postMessage('Hello, worker!');
// Завершаем работу worker, когда он больше не нужен
myWorker.terminate();
terminate()
worker полностью уничтожается и больше не может отправлять или получать сообщения.onmessage
), они автоматически удаляются.terminate()
не приведет к ошибке, но никакие операции через него больше работать не будут.const worker = new Worker('worker.js');
// Отправляем сообщение
worker.postMessage('Start working');
// Завершаем работу worker
worker.terminate();
// Попытка отправить сообщение после уничтожения worker
worker.postMessage('Will this work?'); // Ничего не произойдет, worker уже завершен
Если вы перезагружаете страницу или закрываете вкладку, все web worker автоматически уничтожаются браузером. Однако в рамках текущей сессии ответственность за уничтожение лежит на разработчике.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍33🔥3💊2
Сжатие без потери качества: Используйте инструменты, такие как TinyPNG или ImageOptim. Использование современных форматов: WebP и AVIF обеспечивают лучшее сжатие и качество. Lazy Click Me Load More: Загружайте изображения по мере их появления в области видимости пользователя.
Минификация: Уменьшайте размеры CSS, JavaScript и HTML-файлов с помощью инструментов, таких как UglifyJS и CSSNano. Объединение: Сокращайте количество HTTP-запросов, объединяя несколько файлов в один.
Размещайте копии вашего сайта на серверах по всему миру, чтобы уменьшить задержки для пользователей из разных регионов.
На стороне клиента: Настройте заголовки кэширования HTTP. На стороне сервера: Используйте технологии, такие как Varnish или Nginx.
Асинхронная загрузка: Используйте атрибуты async и defer для JavaScript. Критический CSS: Встраивайте важные стили прямо в HTML, чтобы ускорить начальную отрисовку страницы.
Сжатие данных: Включите gzip или Brotli. HTTP/2: Переходите на HTTP/2 для мультиплексирования запросов.
Service Workers: Для офлайн-работы и улучшенного кэширования. Prefetching и Preloading: Предзагрузка и предзапросы ресурсов.
Google Lighthouse, PageSpeed Insights: Используйте для анализа производительности. Реальное время: Применяйте Google Analytics, New Relic.
Читаемость кода: Минимизация без генерации карт кода (source maps) может усложнить отладку.
Размер файлов: Это замедляет загрузку и увеличивает потребление трафика пользователем.
Асинхронная загрузка: Используйте техники lazy loading и асинхронной загрузки.
Отсутствие кэширования: Увеличивает время загрузки для повторных посещений.
JavaScript и CSS: Не блокируйте рендеринг страницы тяжелыми файлами.
Производительность: Сложные анимации и большие скрипты могут замедлить сайт, особенно на мобильных устройствах.
Нагрузки: Избыток плагинов может значительно замедлить сайт и создать проблемы с безопасностью.
Мобильная версия: Сайт должен быть оптимизирован для мобильных пользователей, так как большинство пользователей используют мобильные устройства.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21❤6
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21😁5
Ключевые слова var и const используются для объявления переменных, но они имеют ряд существенных различий, которые важно понимать для правильного использования в коде.
Объявления переменных с ее использованием имеют функциональную область видимости (function scope), что означает, что переменная доступна везде в функции, где была объявлена.
Как и
let
, она имеет блочную область видимости (block scope), ограничивая доступность переменной блоком (например, циклом или условным оператором), в котором была объявлена.Переменные, объявленные с помощью нее, могут быть переназначены и изменены. Это означает, что после объявления переменной её можно не только изменить, но и полностью переназначить на другое значение.
Переменные, объявленные с помощью нее, не могут быть переназначены. Однако, если переменная представляет собой объект или массив, её содержимое может быть изменено (например, можно добавить новое свойство в объект или новый элемент в массив). Важно понимать, что
const
предотвращает переназначение самой переменной, но не защищает содержимое объекта от изменений.Переменные, объявленные через нее, поднимаются в начало своей функциональной области видимости перед выполнением кода. Однако до их объявления в коде они будут иметь значение
undefined
.Подобно
let
, ее объявления тоже поднимаются, но доступ к переменной до её объявления в коде приведёт к ошибке ReferenceError
. Это явление известно как "временная мертвая зона".Эти переменные можно объявить без инициализации, и их начальное значение будет
undefined
.Эти переменные требуют обязательной инициализации при объявлении. Если попытаться объявить его без инициализации, это приведет к синтаксической ошибке.
var varVariable = 1;
varVariable = 2; // Переназначение возможно
const constVariable = { a: 1 };
constVariable.a = 2; // Изменение содержимого объекта возможно
// constVariable = { b: 3 }; // Переназначение вызовет ошибку
if (true) {
var varScope = "доступна везде в функции";
const constScope = "доступна только в этом блоке";
}
console.log(varScope); // Выведет строку
console.log(constScope); // Ошибка: constScope не определена
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍31
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21🔥15
Проверить правильную иерархию HTML-заголовков важно для улучшения доступности (Accessibility) и SEO. Правильная структура заголовков помогает пользователям (включая тех, кто использует скринридеры) и поисковым системам лучше понимать содержание страницы.
Заголовки задают структуру страницы, разбивая контент на разделы и подразделы. Это как оглавление книги.
Люди, использующие вспомогательные технологии (например, скринридеры), полагаются на правильные заголовки для навигации по странице.
Поисковые системы оценивают структуру заголовков для индексации и понимания ключевых тем страницы.
Заголовок страницы (должен быть уникальным и только один на странице).
Подразделы
<h1>
.Подразделы
<h2>
, и так далее.<h1>Главный заголовок страницы</h1>
<h2>Раздел 1</h2>
<h3>Подраздел 1.1</h3>
<h3>Подраздел 1.2</h3>
<h2>Раздел 2</h2>
<h3>Подраздел 2.1</h3>
<h4>Подраздел 2.1.1</h4>
Вручную просмотрите HTML-код страницы и убедитесь, что заголовки идут в порядке. Например,
<h1>
→ <h2>
→ <h3>
и так далее, без "перескакивания". Избегайте "пропуска уровней" (например, от <h2>
сразу к <h4>
).В браузере откройте DevTools (например, в Chrome нажмите
F12
или Ctrl+Shift+I
). Перейдите на вкладку "Elements" (Элементы). Найдите заголовки (<h1>
, <h2>
и так далее) и проверьте их последовательность.Используйте расширения или инструменты для оценки доступности, такие как: Lighthouse (встроено в Chrome DevTools). Выполните аудит доступности и посмотрите рекомендации. WAVE (Web Accessibility Evaluation Tool) — онлайн-инструмент для анализа доступности. Эти инструменты покажут ошибки или пропуски в структуре заголовков.
Если вы работаете над большим проектом, можно написать скрипт для проверки иерархии заголовков.
const headings = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')];
headings.forEach((heading, index) => {
console.log(`${index + 1}: ${heading.tagName} - ${heading.textContent.trim()}`);
});
Для популярных CMS (например, WordPress) существуют плагины, которые проверяют структуру заголовков, например, Yoast SEO.
Ошибка: Пропуск уровней заголовков
<h1>Главный заголовок</h1>
<h3>Подраздел</h3> <!-- Пропущен <h2> -->
Исправление
<h1>Главный заголовок</h1>
<h2>Подраздел</h2>
Ошибка: Несколько
<h1>
на одной странице<h1>Главный заголовок</h1>
<h1>Еще один заголовок</h1>
Исправление
<h1>Главный заголовок</h1>
<h2>Еще один заголовок</h2>
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍20
Вызывает функцию с указанным контекстом this и массивом аргументов. Например: func.apply(context, [arg1, arg2]). Удобен для динамического вызова функций.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15🔥9
Это два способа интеграции изменений из одной ветки в другую в системе контроля версий Git. Оба метода имеют свои особенности и подходят для разных сценариев.
Объединяет изменения из одной ветки в другую, создавая новый коммит слияния (merge commit). Этот метод сохраняет историю всех коммитов, включая все ветвления и слияния.
Предположим, у вас есть две ветки:
main
и feature
.В ветке
feature
вы сделали несколько коммитов.Вы хотите объединить изменения из
feature
в main
.git checkout main
git merge feature
Перемещает или переписывает базу текущей ветки на указанную базу другой ветки. Это переписывает историю коммитов, создавая новые коммиты для каждого из оригинальных коммитов.
Предположим, у вас есть две ветки:
main
и feature
.В ветке
feature
вы сделали несколько коммитов.Вы хотите перенести изменения из
feature
на текущий конец main
.git checkout feature
git rebase main
Merge: Сохраняет всю историю, включая коммиты слияния. История показывает, когда и как происходили слияния веток.
Rebase: Переписывает историю, делая её линейной. История показывает, как если бы все изменения были сделаны последовательно, без ветвлений.
Merge: Создает новый коммит слияния, который объединяет изменения из двух веток.
Rebase: Не создает коммит слияния. Перебазирование "переносит" коммиты одной ветки на другую.
Merge: Конфликты решаются один раз при слиянии.
Rebase: Конфликты могут возникнуть на каждом коммите, и их нужно решать поэтапно.
Merge: Хорош для сохранения полного контекста истории разработки, особенно в командной работе.
Rebase: Хорош для поддержания чистой, линейной истории, особенно перед слиянием ветки в основную ветку, например, main или master.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍20❤1
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍24
Это специальный синтаксис, позволяющий стилизовать определенные части элемента или добавлять специальные элементы (как бы "элементы-призраки"), не создавая для этого дополнительные теги в HTML. Псевдоэлементы предоставляют удобный способ внесения изменений в структуру документа, не затрагивая HTML.
Начинается с двойного двоеточия (
::
), за которым следует название псевдоэлемента. Например, ::before
или ::after
.::before
и ::after
: Позволяют вставлять содержимое до или после содержимого выбранного элемента соответственно. Очень часто используются для добавления декоративных элементов.p::before {
content: "«";
color: blue;
}
p::after {
content: "»";
color: blue;
}
::first-line
: Применяет стили к первой строке текста в блочном элементе.p::first-line {
font-weight: bold;
}
::first-letter
: Применяет стили к первой букве текста в блочном элементе.p::first-letter {
font-size: 200%;
}
::selection
: Применяет стили к части текста, которую пользователь выделил.p::selection {
background: yellow;
}
Работают как часть документа, но на самом деле не существуют в DOM-дереве, а создаются стилями.
Чтобы псевдоэлементы
::before
и ::after
отображались, необходимо задать свойство content
, даже если оно пустое (content: "";
).Могут быть стилизованы почти так же, как обычные элементы, но есть некоторые ограничения, например, связанные с взаимодействием с JavaScript.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍24❤1
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍33🔥9
В современном веб-разработке существует несколько подходов к рендерингу веб-страниц, и помимо SSR (Server-Side Rendering), есть альтернативы, каждая из которых имеет свои особенности, преимущества и недостатки.
Вся логика рендеринга страницы осуществляется на стороне клиента (браузера) с помощью JavaScript. Сервер отправляет минимальный HTML (обычно пустой
<div>
с ID), а приложение загружается, рендерится и управляется на стороне клиента. Сервер отправляет статический HTML (например, через index.html
), а JavaScript (чаще всего — библиотека/фреймворк, например React, Vue или Angular) загружает необходимые данные и динамически создает интерфейс.<div id="app"></div>
<script src="bundle.js"></script>
Приложение становится очень интерактивным после инициализации.
Основная работа выполняется на клиентской стороне.
Легко добавлять сложные интерактивные компоненты.
Пользователь видит пустую страницу, пока загружается JavaScript и данные.
Поисковым системам сложнее индексировать страницы, так как контент рендерится только в браузере.
Больше ресурсов требуется на стороне клиента.
Сайт полностью генерируется на этапе сборки (build time) и сервер отдает готовые HTML-страницы. Это популярный подход в JAMstack-приложениях (JavaScript, APIs, Markup). HTML генерируется один раз (обычно через фреймворк вроде Next.js, Gatsby, Nuxt.js) во время сборки. Сайт раздается пользователям как готовый статический контент.
npm run build
HTML статичен и отдается сервером без обработки.
Поисковые системы могут легко индексировать готовый HTML.
Все вычисления выполняются заранее (во время сборки).
Для обновления нужно заново пересобирать сайт, что может занимать много времени.
Если страница сильно зависит от данных пользователя или часто меняется, SSG становится менее удобным.
Это гибрид между SSG и SSR. Вы создаете статический контент во время сборки, но некоторые страницы могут обновляться динамически при запросе, а сервер сохраняет их для следующих пользователей. Фреймворк (например, Next.js) генерирует страницы на этапе сборки, но для определенных страниц вы можете указать интервал обновления (
revalidate
). После этого сервер пересоберет страницу и кэширует ее.export async function getStaticProps() {
return {
props: {
data: fetchData(),
},
revalidate: 60, // Обновлять страницу каждые 60 секунд
};
}
Страницы отдаются как статические, но обновляются при необходимости.
Удобно для контента, который редко обновляется.
Поисковики видят статические страницы.
Нужно управлять кэшированием и интервалами обновления.
Если обновления контента слишком частые, ISR может не подойти.
Это подход, при котором разные версии страницы рендерятся для разных пользователей. Например, для пользователей с обычными браузерами вы используете CSR, а для поисковых ботов — SSR. Запросы от поисковых ботов обрабатываются сервером, который генерирует готовый HTML. Запросы от обычных пользователей обрабатываются через CSR. Этот подход используется с инструментами, такими как Prerender.io или встроенными решениями фреймворков.
Боты получают готовый HTML.
Пользователи получают интерактивные страницы через CSR.
Нужно отслеживать запросы и разделять их.
Генерация страницы на сервере может занять время.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16❤5🔥2
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍32🔥3
Это ссылка, которая указывает путь к ресурсу относительно текущей страницы или корневого каталога веб-сайта, вместо указания полного пути (абсолютной ссылки).
Относительная ссылка
<a href="../contact.html">Контакты</a>
Абсолютная ссылка
<a href="https://example.com/contact.html">Контакты</a>
Указывают путь к ресурсу, который находится в текущем каталоге или подкаталоге.
<a href="page.html">Страница</a> <!-- Ресурс в текущем каталоге -->
Используются два символа точки (
..
) для перехода на уровень выше.<a href="../folder/page.html">Страница</a> <!-- Подъем на один уровень вверх -->
Указывают путь относительно корня веб-сайта, начиная с
/
.<a href="/images/photo.jpg">Фото</a> <!-- Начало пути от корня сайта -->
Относительные ссылки работают независимо от домена. Если вы разрабатываете сайт локально (например, через
localhost
), вам не нужно указывать абсолютный путь с доменом.Если домен или структура сайта меняется, относительные ссылки автоматически адаптируются, если структура каталогов остается прежней.
Меньше текста в коде, особенно если проект содержит множество ссылок.
Ссылка на файл в текущей папке
<a href="file.html">Файл в текущей папке</a>
Ссылка на файл в подкаталоге
<a href="subfolder/file.html">Файл в подкаталоге</a>
Ссылка на файл в родительской папке
<a href="../file.html">Файл в родительской папке</a>
Ссылка на файл относительно корня сайта
<a href="/folder/file.html">Файл в папке от корня</a>
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21🔥2
Чтобы растянуть элемент на 100% (по ширине, высоте или обоим направлениям), нужно понимать контекст, от чего "100%" будет вычисляться. Значение
100%
в CSS основывается на родительском элементе. Рассмотрим различные случаи и подходы.Элемент займет всю ширину своего родителя.
<div style="width: 300px; background: lightblue;">
<div style="width: 100%; background: coral;">Я растянут по ширине!</div>
</div>
Элемент займет всю высоту родительского элемента.
<div style="height: 300px; background: lightblue;">
<div style="height: 100%; background: coral;">Я растянут по высоте!</div>
</div>
Для растяжения элемента как по ширине, так и по высоте относительно родителя используются
width: 100%;
и height: 100%;
.<div style="width: 300px; height: 300px; background: lightblue;">
<div style="width: 100%; height: 100%; background: coral;">Растянут по ширине и высоте!</div>
</div>
Если элемент нужно растянуть на весь экран, используются единицы
100vw
(ширина окна) и 100vh
(высота окна).<div style="width: 100vw; height: 100vh; background: coral;">
Я растянут на весь экран!
</div>
Для исключения полосы прокрутки можно использовать
width: calc(100vw - 16px); /* Учитывается ширина скролла */
Когда нужно растянуть элемент независимо от размера его содержимого, можно использовать
position: absolute
.<div style="position: relative; width: 300px; height: 300px; background: lightblue;">
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: coral;">
Я растянут абсолютно!
</div>
</div>
Flexbox автоматически растягивает вложенные элементы, если у них указаны свойства
flex: 1
или align-items: stretch
.<div style="display: flex; width: 300px; height: 300px; background: lightblue;">
<div style="flex: 1; background: coral;">Я растянут по Flexbox!</div>
</div>
CSS Grid также позволяет растягивать элементы.
<div style="display: grid; width: 300px; height: 300px; background: lightblue;">
<div style="width: 100%; height: 100%; background: coral;">Я растянут внутри Grid!</div>
</div>
Если нужно учесть отступы (padding) или границы (border), используйте свойство
box-sizing: border-box
. Это гарантирует, что элемент с width: 100%
и height: 100%
не будет "выходить за пределы" из-за отступов.<div style="width: 300px; height: 300px; background: lightblue;">
<div style="width: 100%; height: 100%; padding: 20px; box-sizing: border-box; background: coral;">
Я растянут с учетом отступов!
</div>
</div>
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍25❤3