Это логические операторы, которые используются для проверки условий:
- or (||) — возвращает true, если хотя бы одно из условий истинно.
- and (&&) — возвращает true, только если все условия истинны.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍27💊8
Это ссылка, которая указывает путь к ресурсу относительно текущей страницы или корневого каталога веб-сайта, вместо указания полного пути (абсолютной ссылки).
Относительная ссылка
<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
👍12
1. Промисы — основной способ в современных браузерах:
2. fetch('/api').then(response => callback(response));
3. async/await — оборачиваем функцию в async, а внутри можно использовать await:
4. const callback = async () => {
5. const result = await fetch(...);
6. // обработка
7. };
8. Таймеры и события — классические способы:
9. setTimeout(() => callback(), 1000);
10. element.addEventListener('click', () => callback());
Callback вызывается по завершении асинхронной операции, и важно учитывать задержку выполнения (event loop).
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🔥6
em зависит от размера шрифта родителя (font-size). .parent {
font-size: 20px;
}
.child {
font-size: 1.5em; /* 1.5 * 20px = 30px */
}Но если
.child вложен в .parent, то он наследует font-size, а его em вычисляется относительно родителя..parent {
font-size: 20px;
}
.child {
font-size: 1.5em; /* 30px */
}
.grandchild {
font-size: 2em; /* 2 * 30px = 60px */
}rem всегда зависит от font-size у <html>. html {
font-size: 16px;
}
.container {
font-size: 2rem; /* 2 * 16px = 32px */
}Используйте
rem, если нужно, чтобы шрифты и размеры были предсказуемыми Используйте
em, если хотите, чтобы элементы зависели от родителяСтавь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14🔥4💊2
- Layered architecture — с разделением на controller, service, repository;
- Hexagonal architecture — с портами/адаптерами;
- Microservices с gRPC/REST;
- GraphQL gateway с Apollo;
- Event-driven через Kafka/RabbitMQ;
- Serverless архитектура (AWS Lambda, Firebase Functions).
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥12👍3
В React
ref (сокращение от reference) используется для доступа к DOM-элементам или компонентам напрямую. Он позволяет взаимодействовать с элементами, которые были созданы в процессе рендеринга, предоставляя механизм для манипуляции с ними, получения их размеров, положения или вызова методов у компонент. Это особенно полезно в ситуациях, когда необходимо выполнить операции, которые не могут быть выполнены исключительно через декларативный подход React.Доступ к DOM-элементам:
Использование в сторонних библиотеках:
Сохранение состояния вне дерева компонентов:
Доступ к DOM-элементам
Установка фокуса на элемент
import React, { useRef, useEffect } from 'react';
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// Установить фокус на текстовое поле
inputEl.current.focus();
};
return (
<div>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Установить фокус</button>
</div>
);
}
export default TextInputWithFocusButton;Получение размеров элемента
Измерение элемента:
import React, { useRef, useEffect, useState } from 'react';
function MeasureDiv() {
const divRef = useRef(null);
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
useEffect(() => {
if (divRef.current) {
const { width, height } = divRef.current.getBoundingClientRect();
setDimensions({ width, height });
}
}, []);
return (
<div>
<div ref={divRef} style={{ width: '100px', height: '100px', backgroundColor: 'lightblue' }}>
Измеряемый элемент
</div>
<p>Ширина: {dimensions.width}px, Высота: {dimensions.height}px</p>
</div>
);
}
export default MeasureDiv;Использование в классовых компонентах
Доступ к методам компонента:
import React, { Component } from 'react';
class CustomComponent extends Component {
customMethod() {
console.log('Метод компонента вызван');
}
render() {
return <div>Custom Component</div>;
}
}
class ParentComponent extends Component {
constructor(props) {
super(props);
this.customComponentRef = React.createRef();
}
handleClick = () => {
this.customComponentRef.current.customMethod();
};
render() {
return (
<div>
<CustomComponent ref={this.customComponentRef} />
<button onClick={this.handleClick}>Вызвать метод компонента</button>
</div>
);
}
}
export default ParentComponent;Прямое управление DOM может нарушить декларативный подход React, поэтому его следует использовать только тогда, когда это действительно необходимо.
Когда необходимо использовать сторонние библиотеки, которые требуют прямого доступа к DOM-элементам.
Состояние приложения и его логика должны по возможности управляться через состояния и пропсы React.
ref следует использовать для случаев, которые не могут быть решены этим способом.Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8💊5
Мемоизация (React.memo, useMemo, useCallback) основана на сравнении входных данных. Для объектов и функций сравнение происходит по ссылке.
Если ссылка на объект или функцию изменилась — React считает, что данные изменились. Даже если внутренности одинаковые.
Поэтому важно сохранять одну и ту же ссылку, если значение не изменилось, иначе мемоизация не сработает и будет лишняя перерисовка.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥15👍3
Dependency Injection (DI) – это паттерн проектирования, который помогает разделять зависимости и делает код гибче, тестируемее и поддерживаемее. Вместо того чтобы создавать зависимости внутри класса, они передаются (инъектируются) извне.
Вместо того чтобы жестко привязывать один модуль к другому, DI передает зависимости снаружи.
class UserService {
constructor() {
this.db = new Database(); // Прямо создаем зависимость
}
getUser(id) {
return this.db.findUserById(id);
}
}С DI (гибкость)
class UserService {
constructor(db) {
this.db = db; // DI передает зависимость извне
}
getUser(id) {
return this.db.findUserById(id);
}
}
// Передаем нужную зависимость
const database = new Database();
const userService = new UserService(database);С DI можно подменять зависимости на заглушки (mock, fake, stub).
const userService = new UserService(); // Всегда использует реальную Database
userService.getUser(1); // Как протестировать без реальной БД? 🤔
С DI (можно подменить зависимость)
class FakeDatabase {
findUserById(id) {
return { id, name: "Тестовый пользователь" };
}
}
const fakeDb = new FakeDatabase();
const userService = new UserService(fakeDb);
console.log(userService.getUser(1)); // ✅ Тест без реальной БДДопустим, сначала использовали
MySQLDatabase, но решили перейти на MongoDatabase. class UserService {
constructor() {
this.db = new MySQLDatabase(); // Нужно менять здесь
}
}С DI (добавляем новую зависимость без изменения кода UserService)
const db = new MongoDatabase(); // Просто передаем другую зависимость
const userService = new UserService(db);
В крупных приложениях удобно использовать DI-контейнер (например,
InversifyJS для JavaScript/TypeScript). import "reflect-metadata";
import { Container, injectable, inject } from "inversify";
@injectable()
class Database {
findUserById(id) {
return { id, name: "База данных" };
}
}
@injectable()
class UserService {
constructor(@inject(Database) db) {
this.db = db;
}
getUser(id) {
return this.db.findUserById(id);
}
}
// Настраиваем DI-контейнер
const container = new Container();
container.bind(Database).toSelf();
container.bind(UserService).toSelf();
// Получаем объект с нужными зависимостями
const userService = container.get(UserService);
console.log(userService.getUser(1));
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13
CDN (Content Delivery Network) — это сеть распределённых серверов, которая хранит копии статических ресурсов (изображения, стили, скрипты) и предоставляет их пользователям с ближайшего к ним узла.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥27👍5
Событие, которое срабатывает при потере фокуса элементом формы, называется
blur.Событие
blur используется для выполнения действий, когда пользователь перестает взаимодействовать с элементом ввода. Например: Проверка корректности данных (валидация) после того, как пользователь заполнил поле.Автоматическое сохранение введенных данных при переходе на другой элемент формы.
Скрытие вспомогательной информации (например, подсказок) при уходе с элемента.
blur помогает реализовать логику, связанную с завершением работы с конкретным элементом формы.blur срабатывает, когда элемент теряет фокус, то есть пользователь:Кликнул на другой элемент.
Нажал клавишу Tab, чтобы перейти на следующий элемент.
В отличие от события
focus, которое возникает при получении фокуса, blur позволяет отследить момент завершения работы с элементом.Событие можно обрабатывать с помощью:
1. HTML-атрибутов (например,
onblur).2. JavaScript через метод
addEventListener.Пример на практике
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример blur</title>
<script>
function validateInput(event) {
const input = event.target;
if (input.value.trim() === "") {
alert("Поле не должно быть пустым!");
}
}
document.addEventListener("DOMContentLoaded", () => {
const inputElement = document.getElementById("name");
inputElement.addEventListener("blur", validateInput);
});
</script>
</head>
<body>
<form>
<label for="name">Введите имя:</label>
<input type="text" id="name" name="name" />
<button type="submit">Отправить</button>
</form>
</body>
</html>
Событие
blur не поддерживает всплытие (то есть не распространяется вверх по дереву DOM). Если нужно отслеживать потерю фокуса на уровне родительских элементов, используется делегирование с помощью события focusout.// Работает только для конкретного элемента
element.addEventListener("blur", handler);
// Для делегирования используют focusout
parentElement.addEventListener("focusout", handler);
Событие
change срабатывает только после изменения значения элемента и потери фокуса, тогда как blur срабатывает в любом случае при потере фокуса, независимо от того, менялось ли значение.Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10
- Интерфейсы и типы в TypeScript;
- OpenAPI / Swagger — для API;
- GraphQL-схемы;
- JSON Schema — для валидации;
- JSDoc — документация в JS;
- gRPC-протоколы — строгий контракт между сервисами.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
💊10🔥5
В веб-разработке часто возникает вопрос: использовать кнопку (
<button>) или ссылку (<a>) для взаимодействий? Хотя они внешне могут выглядеть одинаково, у них разные назначения и поведение. Когда действие выполняется на странице без перехода на другую
Когда нужна интерактивность (отправка формы, открытие модального окна, запуск скрипта)
Отправка формы
Открытие/закрытие модального окна
Включение/выключение чего-то на странице
Взаимодействие с JavaScript (AJAX-запросы, события)
<button onclick="alert('Нажато!')">Кликни</button>Пример кнопки в форме:
<form>
<input type="text" placeholder="Введите имя">
<button type="submit">Отправить</button>
</form>
Когда нужно перейти на другую страницу (или секцию сайта)
Когда ссылка ведет на внешний или внутренний ресурс
Навигация по сайту
Переход на другую страницу
Ссылки на соцсети, статьи, файлы
<a href="https://example.com">Перейти на сайт</a>
Ссылка внутри страницы (якорь)
<a href="#section">Перейти вниз</a>
<section id="section">Контент</section>
Открытие в новом окне
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
Открыть в новой вкладке
</a>
Ошибка: использовать
<button> вместо ссылки<button onclick="window.location.href='https://example.com'">Перейти</button>
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11
Качество кода — это:
- семантичная и читаемая структура;
- минимизация дублирования;
- следование стандартам и гайдлайнам (BEM, naming conventions);
- адаптивность и доступность;
- валидность HTML/CSS, отсутствие ошибок и избыточности.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🔥3💊2
При разработке frontend-приложений, которые в будущем будет проще поддерживать и масштабировать, я придерживаюсь ряда ключевых подходов.
Это значит, что код должен быть разделен по зонам ответственности. В frontend-разработке это проявляется в:
Чистом разделении логики, представления и данных (например, с помощью архитектуры MVC, MVVM или FLUX).
Использовании компонентов в React/Vue или шаблонов в Angular.
Разделении CSS, JS и HTML, либо использовании методологий, где стили хранятся рядом с компонентом (CSS Modules, Styled Components).
Вместо того, чтобы писать всю логику и разметку в одном файле:
function App() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}Я разделяю бизнес-логику и представление
// CounterLogic.js
export function useCounter() {
const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);
return { count, increment };
}
// Counter.js
import { useCounter } from "./CounterLogic";
function Counter() {
const { count, increment } = useCounter();
return <button onClick={increment}>Count: {count}</button>;
}
Frontend-приложения должны строиться из переиспользуемых и изолированных компонентов. Это уменьшает дублирование кода и делает его понятным.
// Button.js (переиспользуемый компонент)
function Button({ onClick, children }) {
return <button onClick={onClick}>{children}</button>;
}
// Counter.js (использует Button)
function Counter() {
const [count, setCount] = useState(0);
return <Button onClick={() => setCount(count + 1)}>Count: {count}</Button>;
}
Код должен быть понятным не только мне, но и другим разработчикам.
Понятные имена переменных и функций. Вместо
x → userAge, вместо doSmth() → calculateTotalPrice(). Меньше вложенности. Вместо кучи
if и else, лучше использовать early return. Разбиение кода на модули. Один файл = одна зона ответственности.
function getDiscountedPrice(price, discount) {
if (discount <= 0) return price;
return price - price * (discount / 100);
}В зависимости от сложности приложения нужно правильно управлять состоянием:
Локальное состояние –
useState (React), ref (Vue) для простых данных внутри компонента. Глобальное состояние – Redux, MobX, Zustand, Pinia, Context API – когда данные нужны многим компонентам.
Серверное состояние – React Query, SWR – когда данные приходят с API и их нужно кешировать.
DRY (Don't Repeat Yourself) – не повторяем код, используем функции, хуки, компоненты.
SOLID – например, принцип единственной ответственности (Single Responsibility Principle) гласит, что каждый компонент или функция должны решать только одну задачу.
function sendEmailAndSaveToDB(user) {
sendEmail(user.email);
saveUserToDatabase(user);
}Лучше разделить логику
function sendEmail(email) { /* отправка письма */ }
function saveUserToDatabase(user) { /* сохранение в БД */ }
function registerUser(user) {
sendEmail(user.email);
saveUserToDatabase(user);
}TypeScript помогает избежать ошибок и делать код предсказуемым.
type User = {
id: number;
name: string;
};
function getUserName(user: User): string {
return user.name;
}ESLint + Prettier → автоформатирование и проверка стиля.
JSDoc/TypeScript → документация функций и типов данных.
Storybook → для документирования UI-компонентов.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15💊1
StackBlitz — онлайн-редактор кода, особенно хорош для проектов на Angular, React, TypeScript и WebAssembly.
Особенности:
- Поддерживает instant preview.
- Работает без сервера — использует WebContainers.
- Отлично подходит для демонстраций, обучения и изоляции тестов.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8💊6
Это один из встроенных хуков, который позволяет компонентам подписываться на контекст и получать доступ к данным контекста. Используется для передачи данных через дерево компонентов без необходимости передавать пропсы на каждом уровне. Это особенно полезно для глобальных данных, таких как текущий авторизованный пользователь, тема (светлая/темная) или настройки локализации.
Для создания контекста используется функция
createContext. Она возвращает объект контекста, который содержит два компонента: Provider и Consumer. import React, { createContext, useState } from 'react';
const MyContext = createContext();
Компонент
Provider используется для предоставления значения контекста всем дочерним компонентам. Все компоненты внутри Provider могут получить доступ к значениям, переданным в value. const MyProvider = ({ children }) => {
const [state, setState] = useState('Hello World');
return (
<MyContext.Provider value={{ state, setState }}>
{children}
</MyContext.Provider>
);
};
Используется для подписки на контекст в функциональных компонентах. Он принимает объект контекста, возвращаемый из
createContext, и возвращает текущее значение контекста. import React, { useContext } from 'react';
const MyComponent = () => {
const { state, setState } = useContext(MyContext);
return (
<div>
<p>{state}</p>
<button onClick={() => setState('New Value')}>Change Value</button>
</div>
);
};
Полный пример
import React, { createContext, useState, useContext } from 'react';
// Создание контекста
const MyContext = createContext();
const MyProvider = ({ children }) => {
const [state, setState] = useState('Hello World');
return (
<MyContext.Provider value={{ state, setState }}>
{children}
</MyContext.Provider>
);
};
const MyComponent = () => {
const { state, setState } = useContext(MyContext);
return (
<div>
<p>{state}</p>
<button onClick={() => setState('New Value')}>Change Value</button>
</div>
);
};
const App = () => (
<MyProvider>
<MyComponent />
</MyProvider>
);
export default App;Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍24🔥5
Были введены в ECMAScript 2015 (ES6) и представляют собой улучшение стандартных строк в JavaScript. Они облегчают работу с строками, предоставляя более удобный синтаксис для создания многострочных строк, интерполяции переменных и встроенных выражений.
Шаблонные литералы позволяют встраивать переменные и выражения внутрь строк с помощью синтаксиса
${}.const name = 'Alice';
const age = 25;
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting);
// Вывод: Hello, my name is Alice and I am 25 years old.
Шаблонные литералы позволяют создавать многострочные строки без необходимости использования символов переноса строки (
\n).const multiLineString = `This is a string
that spans across
multiple lines.`;
console.log(multiLineString);
// Вывод:
// This is a string
// that spans across
// multiple lines.
Внутри шаблонных литералов можно использовать любые JavaScript-выражения.
const a = 5;
const b = 10;
const result = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(result);
// Вывод: The sum of 5 and 10 is 15.
Можно вызывать функции и методы внутри шаблонных литералов.
function toUpperCase(str) {
return str.toUpperCase();
}
const name = 'Alice';
const loudGreeting = `Hello, ${toUpperCase(name)}!`;
console.log(loudGreeting);
// Вывод: Hello, ALICE!Тегированные шаблонные литералы позволяют обработать строку с помощью функции перед ее окончательной интерпретацией.
function tag(strings, ...values) {
console.log(strings);
console.log(values);
return 'Tagged template';
}
const name = 'Alice';
const age = 25;
const taggedResult = tag`Name: ${name}, Age: ${age}`;
console.log(taggedResult);
// Вывод:
// [ 'Name: ', ', Age: ', '' ]
// [ 'Alice', 25 ]
// Tagged templateСтавь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17🔥1
Очистку следует выполнять в момент, когда компонент удаляется со страницы. В Vue этот этап называется «размонтирование». Именно в этот момент ты должен завершать таймеры, отписываться от событий или отменять запросы, чтобы избежать утечек памяти и лишней нагрузки.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9👍4
Выбор между абсолютными и относительными единицами измерения зависит от контекста использования и целей, которые вы преследуете. Рассмотрим подробнее, когда и почему стоит использовать те или иные единицы.
Имеют фиксированные размеры и не зависят от других элементов или размеров экрана. Они всегда остаются одинаковыми, независимо от контекста.
Точные размеры: Когда вам нужно задать точные размеры элементов, например, для пиксельной точности в дизайне.
Фиксированные элементы: Для элементов, размеры которых не должны изменяться в зависимости от экрана или родительского элемента (например, логотипы или иконки).
Маленькие декоративные элементы: Когда размеры элементов настолько малы, что относительные единицы могут привести к неконтролируемому результату.
.logo {
width: 100px;
height: 50px;
}Изменяются в зависимости от других элементов или размеров экрана. Они позволяют создавать более гибкие и адаптивные макеты.
Адаптивные макеты: Когда нужно, чтобы элемент занимал определенный процент от размера родительского элемента.
Контейнеры и блоки: Для ширины и высоты блоков, которые должны изменяться вместе с размерами родителя.
.container {
width: 80%;
height: 50%;
}Шрифты: Когда нужно задавать размер шрифта относительно размера шрифта родителя.
Внутренние отступы и поля: Для создания элементов, которые масштабируются вместе с текстом.
.text {
font-size: 1.2em;
margin: 1em;
}Глобальная консистентность: Когда нужно задавать размер относительно корневого элемента (обычно <html>), что обеспечивает более предсказуемое масштабирование.
Шрифты и отступы: Для элементов, которые должны быть пропорциональны базовому размеру шрифта
body {
font-size: 16px;
}
.header {
font-size: 2rem; /* 32px */
margin: 1rem; /* 16px */
}Адаптивные размеры: Когда размеры элементов должны быть пропорциональны размеру вьюпорта (окна браузера).
Фоновые изображения и видео: Для элементов, которые должны занимать определенный процент от экрана.
.hero {
width: 100vw;
height: 100vh;
}Иногда можно комбинировать абсолютные и относительные единицы для достижения наилучшего результата.
.container {
width: 80%; /* Относительная ширина */
padding: 20px; /* Абсолютный внутренний отступ */
}
.text {
font-size: 1.5rem; /* Относительный размер шрифта */
margin: 2em; /* Относительный внешний отступ */
}Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12🤔3