Frontend | Вопросы собесов
19.4K subscribers
31 photos
1 video
772 links
Сайт easyoffer.ru
Реклама @easyoffer_adv
ВП @easyoffer_vp

Тесты t.me/+T0COHtFzCJkwMDUy
Задачи t.me/+_tcX2w2EmvdmMTgy
Вакансии t.me/+CgCAzIyGHHg0Nzky
Download Telegram
🤔 Как происходит tostring?

Метод .toString() используется для преобразования значения в строку. Он есть у всех объектов в JavaScript, потому что наследуется от Object.prototype. Однако, его поведение зависит от типа данных.

🟠toString() у примитивов
Числа, строки, булевы значения, null, undefined
Для примитивных типов toString() работает просто — возвращает строковое представление значения:
console.log((123).toString());     // "123"
console.log(true.toString()); // "true"
console.log(false.toString()); // "false"
console.log((3.14).toString()); // "3.14"


Но null и undefined не имеют метода toString() и вызов приведёт к ошибке
console.log(null.toString());   //  Ошибка: Cannot read properties of null
console.log(undefined.toString()); // Ошибка


Поэтому для них лучше использовать String()
console.log(String(null));       // "null"
console.log(String(undefined)); // "undefined"


🟠toString() у массивов
Для массивов toString() преобразует их в строку, разделяя элементы запятой
console.log([1, 2, 3].toString()); // "1,2,3"
console.log(["яблоко", "банан"].toString()); // "яблоко,банан"
console.log([].toString()); // "" (пустая строка)


🟠`toString()` у объектов
По умолчанию метод toString() у объекта возвращает строку вида [object Object]
const obj = { a: 1, b: 2 };
console.log(obj.toString()); // "[object Object]"


Если нужно другое поведение, можно переопределить toString() в объекте
const user = {
name: "Иван",
age: 30,
toString() {
return `Имя: ${this.name}, Возраст: ${this.age}`;
}
};

console.log(user.toString()); // "Имя: Иван, Возраст: 30"


🟠`toString()` у классов
Можно переопределять метод toString() в классах
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}

toString() {
return `${this.name} (${this.age} лет)`;
}
}

const person = new Person("Анна", 25);
console.log(person.toString()); // "Анна (25 лет)"


🟠`toString()` у функций
Функции тоже имеют метод toString(), но он возвращает их исходный код
function hello() {
return "Привет!";
}

console.log(hello.toString());
// "function hello() { return 'Привет!'; }"


Для стрелочных функций
const sum = (a, b) => a + b;
console.log(sum.toString());
// "(a, b) => a + b"


🟠Использование `String()` вместо `.toString()`
Лучше использовать String(значение), потому что toString() не работает на null и undefined
console.log(String(null));      // "null"
console.log(String(undefined)); // "undefined"
console.log(String(42)); // "42"
console.log(String({ a: 1 })); // "[object Object]"


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔 Что такое computed-свойства?

Это реактивные свойства, которые зависят от других реактивных данных и автоматически пересчитываются, когда зависимости меняются.
Они кешируются до тех пор, пока зависимости не изменятся.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔 Что такое нечистая функция?

Нечистая функция (impure function) – это функция, результат которой зависит от внешних данных или побочных эффектов. При одном и том же входном значении она может возвращать разные результаты, что делает её непредсказуемой.

🚩Признаки нечистой функции

Зависит от внешнего состояния
Изменяет глобальные переменные
Вызывает побочные эффекты (запросы, изменения DOM, логирование, изменение переданных аргументов и т. д.)

🚩Примеры нечистых функций

Использует внешнюю переменную (зависит от внешнего состояния)
let count = 0;

function increment() {
count += 1;
return count;
}

console.log(increment()); // 1
console.log(increment()); // 2 (результат меняется при каждом вызове)


Модифицирует переданный аргумент
function addElement(arr, item) {
arr.push(item); // изменяет оригинальный массив
return arr;
}

let numbers = [1, 2, 3];
console.log(addElement(numbers, 4)); // [1, 2, 3, 4]
console.log(numbers); // [1, 2, 3, 4] (исходный массив изменён)


Выполняет побочные эффекты (например, изменяет DOM)
function changeTitle(newTitle) {
document.title = newTitle;
}

changeTitle("Новая страница");
console.log(document.title); // "Новая страница"


Генерирует случайное значение
function getRandomNumber() {
return Math.random();
}

console.log(getRandomNumber()); // 0.37485647 (разный результат при каждом вызове)


🚩Чем отличается от чистой функции?
Чистая функция (pure function) всегда возвращает один и тот же результат при одинаковых входных данных и не изменяет внешние состояния.

Чистый вариант функции addElement() (не меняет исходный массив)
function addElementPure(arr, item) {
return [...arr, item]; // создаёт новый массив, не изменяя старый
}

let numbers = [1, 2, 3];
console.log(addElementPure(numbers, 4)); // [1, 2, 3, 4]
console.log(numbers); // [1, 2, 3] (исходный массив не изменился)


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔 Разница между подключением скриптов async и defer?

- async загружает и выполняет скрипт сразу, не дожидаясь загрузки документа — полезно для независимых скриптов.
- defer загружает скрипт параллельно, но выполняет после полной загрузки HTML — лучше для скриптов, работающих с DOM.
Оба улучшают производительность, но используются в разных сценариях.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔 Что такое merge и rebase, в чем отличие друг от друга?

Это два способа интеграции изменений из одной ветки в другую в системе контроля версий Git. Оба метода имеют свои особенности и подходят для разных сценариев.

🚩Merge (слияние)

Объединяет изменения из одной ветки в другую, создавая новый коммит слияния (merge commit). Этот метод сохраняет историю всех коммитов, включая все ветвления и слияния.
Предположим, у вас есть две ветки: main и feature.
В ветке feature вы сделали несколько коммитов.
Вы хотите объединить изменения из feature в main.
git checkout main
git merge feature


🚩Rebase (перебазирование)

Перемещает или переписывает базу текущей ветки на указанную базу другой ветки. Это переписывает историю коммитов, создавая новые коммиты для каждого из оригинальных коммитов.
Предположим, у вас есть две ветки: 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
🤔 Как деплоить приложения?

- CI/CD пайплайны (Jenkins, GitLab, GitHub Actions);
- Сборка и доставка артефактов;
- Docker-контейнеры;
- Размещение в облачных сервисах (Heroku, AWS, GCP, Vercel, Netlify);
- Через scp/rsync или ftp для простых решений.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔 Что делает и для чего нужна функци function.Prototype.Bind?

bind() – это метод, который создает новую функцию с привязанным контекстом (this) и (опционально) фиксированными аргументами.

🚩Основные возможности `bind()`

Привязывает this, чтобы не потерять контекст
Позволяет создавать частично примененные функции
Используется в обработчиках событий и таймерах

Пример: потеря this без bind()
const user = {
name: "Иван",
sayHello() {
console.log(`Привет, ${this.name}!`);
},
};

setTimeout(user.sayHello, 1000); // this = undefined


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔 Какими хуками и средствами можно заблокировать лишний ререндер?

- React.memo — мемоизация компонента.
- useMemo — мемоизация значений.
- useCallback — мемоизация функций.
- shouldComponentUpdate / React.PureComponent — в классовых компонентах.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔 Расскажи про особенности свойства color

color – одно из самых базовых CSS-свойств, которое отвечает за цвет текста и текста в элементах (например, градиентных фонах и SVG).
p {
color: red;
}


🟠Какие значения принимает `color`?
CSS позволяет задавать цвета несколькими способами

🟠Особенности работы `color`
Наследование
color наследуется потомками по умолчанию, в отличие от многих других свойств CSS (например, background).
body {
color: blue;
}
p {
color: inherit; /* Явное наследование */
}


currentColor — скрытое золото
Это специальное значение, которое означает "используй текущее значение color". Очень полезно для стилизации border, box-shadow, outline и SVG.
button {
color: red;
border: 2px solid currentColor; /* Использует color */
}


transparent — особый цвет
p {
color: transparent;
}


Когда rgba() или hsla() лучше
p {
color: rgba(255, 0, 0, 0.5); /* Полупрозрачный красный */
}


color и mix-blend-mode
Можно заставить текст взаимодействовать с фоном с помощью mix-blend-mode
h1 {
color: white;
mix-blend-mode: difference;
}


color в ::selection и ::placeholder
Некоторые элементы (например, выделенный текст или placeholder в input) требуют отдельного указания color
::selection {
background: blue;
color: white;
}

input::placeholder {
color: gray;
}


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔 Какие категории считаются основными категориями контента?

Flow, Phrasing и Sectioning — считаются основными, так как покрывают структурную, текстовую и организационную основу HTML-документа.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔 Является ли, drag and drop частью спецификации?

Да! Drag and Drop (перетаскивание) — это часть спецификации HTML5. В браузерах есть встроенный API, который позволяет делать перетаскивание элементов без дополнительных библиотек.

🚩Как работает Drag and Drop API?

В HTML5 можно сделать элемент перетаскиваемым, добавив ему атрибут draggable="true". Затем срабатывают специальные события, такие как dragstart, drop, dragover и другие.
<div id="drag-item" draggable="true">Перетащи меня</div>
<div id="drop-zone">Сюда можно сбросить</div>

<script>
const dragItem = document.getElementById("drag-item");
const dropZone = document.getElementById("drop-zone");

dragItem.addEventListener("dragstart", (event) => {
event.dataTransfer.setData("text/plain", "Данные элемента");
});

dropZone.addEventListener("dragover", (event) => {
event.preventDefault(); // Нужно, чтобы разрешить сброс
});

dropZone.addEventListener("drop", (event) => {
event.preventDefault();
const data = event.dataTransfer.getData("text/plain");
alert("Элемент сброшен: " + data);
});
</script>


🚩Какие события есть в Drag and Drop?

Основные события:
dragstart — когда начали тянуть элемент.
drag — когда элемент двигается (срабатывает много раз).
dragenter — когда курсор заходит в зону сброса.
dragover — когда элемент находится над зоной (нужно preventDefault()).
dragleave — когда курсор покидает зону сброса.
drop — когда элемент отпущен в зоне сброса.
dragend — когда перетаскивание завершено (даже если не сбросили).

🚩Где используется Drag and Drop?

- Перетаскивание файлов в <input type="file"> (например, загрузка изображений).
- Канбан-доски, как в Trello.
- Онлайн-редакторы, как Figma.
- Игры, где можно перемещать предметы.

🚩Можно ли сделать Drag and Drop без HTML5 API?

Да, можно использовать другие методы:
Через события мыши (mousedown, mousemove, mouseup).
Через CSS position: absolute и transform.
Через JS-библиотеки (Sortable.js, React DnD, Draggable.js).
Например, в мобильных браузерах стандартный Drag and Drop API плохо работает, и там лучше использовать события touchstart, touchmove, touchend.

Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔 Чем похожи массивы, объекты и функции?

Все они — объекты в JavaScript. Их можно изменять, расширять, передавать как аргументы, хранить свойства. Отличаются только поведением и встроенными методами.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔 Зачем нужен ref?

В React ref (сокращение от reference) используется для доступа к DOM-элементам или компонентам напрямую. Он позволяет взаимодействовать с элементами, которые были созданы в процессе рендеринга, предоставляя механизм для манипуляции с ними, получения их размеров, положения или вызова методов у компонент. Это особенно полезно в ситуациях, когда необходимо выполнить операции, которые не могут быть выполнены исключительно через декларативный подход React.

🚩Основные случаи использования `ref`

Доступ к DOM-элементам:
Использование в сторонних библиотеках:
Сохранение состояния вне дерева компонентов:

🚩Примеры использования `ref`

Доступ к 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
🤔 Что такое CSS?

CSS (Cascading Style Sheets) — это язык стилей, используемый для описания внешнего вида и форматирования HTML-элементов, включая цвета, размеры, шрифты и расположение.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔 Как бы добавлял статический метод в prototype?

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

🚩Как работают статические методы? (`static`)

В классе статические методы объявляются с помощью static. Они не находятся в prototype, а принадлежат самому классу.
class User {
static sayHello() {
return "Привет!";
}
}

console.log(User.sayHello()); // "Привет!"
console.log(User.prototype.sayHello); // undefined (нет в prototype)


🚩Добавление "статического" метода в `prototype` (не совсем статический)

Если нужно, чтобы каждый объект имел доступ к "статическому" методу через prototype, можно сделать так
function User(name) {
this.name = name;
}

// Добавляем метод в prototype
User.prototype.sayHello = function () {
return "Привет!";
};

const user1 = new User("Иван");
console.log(user1.sayHello()); // "Привет!"


🚩Добавление метода напрямую в сам класс (имитация `static`)

Если хочется добавить метод на сам класс, а не в prototype, можно сделать так
function User(name) {
this.name = name;
}

// Добавляем метод прямо в функцию-конструктор
User.sayHello = function () {
return "Привет!";
};

console.log(User.sayHello()); // "Привет!"


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔 Что такое методы массива?

Это встроенные функции в Array.prototype, позволяющие перебирать, фильтровать, изменять, объединять и сортировать массивы. Примеры: map, filter, reduce, forEach, push, pop, splice, sort.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔 Какие есть альтернативы ssr?

В современном веб-разработке существует несколько подходов к рендерингу веб-страниц, и помимо SSR (Server-Side Rendering), есть альтернативы, каждая из которых имеет свои особенности, преимущества и недостатки.

🚩CSR (Client-Side Rendering)

Вся логика рендеринга страницы осуществляется на стороне клиента (браузера) с помощью JavaScript. Сервер отправляет минимальный HTML (обычно пустой <div> с ID), а приложение загружается, рендерится и управляется на стороне клиента. Сервер отправляет статический HTML (например, через index.html), а JavaScript (чаще всего — библиотека/фреймворк, например React, Vue или Angular) загружает необходимые данные и динамически создает интерфейс.
<div id="app"></div>
<script src="bundle.js"></script>


🚩Плюсы

Быстрая работа после загрузки
Приложение становится очень интерактивным после инициализации.
Меньшая нагрузка на сервер
Основная работа выполняется на клиентской стороне.
Гибкость и модульность
Легко добавлять сложные интерактивные компоненты.

🚩Минусы

Медленная первая загрузка (Time to First Byte, TTFB)
Пользователь видит пустую страницу, пока загружается JavaScript и данные.
Проблемы с SEO
Поисковым системам сложнее индексировать страницы, так как контент рендерится только в браузере.
Требования к устройствам
Больше ресурсов требуется на стороне клиента.

🚩SSG (Static Site Generation)

Сайт полностью генерируется на этапе сборки (build time) и сервер отдает готовые HTML-страницы. Это популярный подход в JAMstack-приложениях (JavaScript, APIs, Markup). HTML генерируется один раз (обычно через фреймворк вроде Next.js, Gatsby, Nuxt.js) во время сборки. Сайт раздается пользователям как готовый статический контент.
npm run build


🚩Плюсы и минусы

Молниеносная загрузка
HTML статичен и отдается сервером без обработки.
SEO-дружелюбность
Поисковые системы могут легко индексировать готовый HTML.
Уменьшение нагрузки на сервер
Все вычисления выполняются заранее (во время сборки).
Ограничения при частых обновлениях контента
Для обновления нужно заново пересобирать сайт, что может занимать много времени.
Не подходит для динамических данных
Если страница сильно зависит от данных пользователя или часто меняется, SSG становится менее удобным.

🚩ISR (Incremental Static Regeneration)

Это гибрид между SSG и SSR. Вы создаете статический контент во время сборки, но некоторые страницы могут обновляться динамически при запросе, а сервер сохраняет их для следующих пользователей. Фреймворк (например, Next.js) генерирует страницы на этапе сборки, но для определенных страниц вы можете указать интервал обновления (revalidate). После этого сервер пересоберет страницу и кэширует ее.
export async function getStaticProps() {
return {
props: {
data: fetchData(),
},
revalidate: 60, // Обновлять страницу каждые 60 секунд
};
}


🚩Плюсы и минусы

Лучшая производительность
Страницы отдаются как статические, но обновляются при необходимости.
Гибкость
Удобно для контента, который редко обновляется.
SEO
Поисковики видят статические страницы.
Сложнее настроить
Нужно управлять кэшированием и интервалами обновления.
Не подходит для полностью динамических страниц
Если обновления контента слишком частые, ISR может не подойти.

🚩DPR (Dynamic Rendering / Hybrid Rendering)

Это подход, при котором разные версии страницы рендерятся для разных пользователей. Например, для пользователей с обычными браузерами вы используете CSR, а для поисковых ботов — SSR. Запросы от поисковых ботов обрабатываются сервером, который генерирует готовый HTML. Запросы от обычных пользователей обрабатываются через CSR. Этот подход используется с инструментами, такими как Prerender.io или встроенными решениями фреймворков.

🚩Плюсы и минусы

Оптимально для SEO
Боты получают готовый HTML.
Гибкость
Пользователи получают интерактивные страницы через CSR.
Усложнение архитектуры
Нужно отслеживать запросы и разделять их.
Задержки для ботов
Генерация страницы на сервере может занять время.

Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔 Какие теги запрещены в HTML5?

HTML5 устранил устаревшие теги, такие как:
- <font>
- <center>
- <big>, <tt>
- <acronym>
- <frame>, <frameset>, <noframes>
- <applet>, <basefont>, <dir>
Их функциональность заменена CSS и современными элементами.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔 Для чего нужна методология в html?

Методология в HTML (и в веб-разработке в целом) нужна для организации и структурирования кода так, чтобы он был понятным, поддерживаемым и масштабируемым. Она помогает разработчикам работать в команде, избегать хаоса в проекте и ускоряет развитие продукта, делая код простым для чтения и изменения.

🚩Зачем это нужно

🟠Понятность кода
Без единого подхода код может стать "кашей" из классов и тегов. Методология помогает дать элементы структуры, которые легко понять не только автору кода, но и другим разработчикам.

🟠Снижение ошибок
Если есть четкие правила, уменьшается риск дублирования, неправильных имен или конфликтов стилей.

🟠Упрощение масштабирования
В больших проектах количество HTML-структур растет, и без системного подхода будет сложно добавлять новые элементы, не нарушая старые.

🟠Легкость сопровождения
С методологией легко найти нужные элементы и вносить изменения.

🚩Примеры популярных методологий
🟠БЭМ (Блок, Элемент, Модификатор)
Одна из самых популярных методологий для HTML и CSS.
- Она предлагает структурировать классы так:
- Блок: независимый компонент (например, menu).
- Элемент: часть блока (например, menu__item).
- Модификатор: вариант блока или элемента (например, menu__item--active).
Пример кода

     <div class="menu">
<div class="menu__item menu__item--active">Главная</div>
<div class="menu__item">О нас</div>
<div class="menu__item">Контакты</div>
</div>


🟠Atomic Design
Основана на создании интерфейсов из "атомов" (простейшие элементы, например, кнопки), "молекул" (комбинации атомов, например, форма) и "организмов" (сложные компоненты, например, шапка сайта).
Пример

     <!-- Атом -->
<button class="button">Клик</button>
<!-- Молекула -->
<div class="form">
<label class="form__label">Имя</label>
<input class="form__input" type="text">
</div>


🟠SMACSS (Scalable and Modular Architecture for CSS)
Делит код на модули (например, глобальные стили, компоненты, утилиты) и предлагает поддерживать независимость и минимизацию дублирования кода.

Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔 Что такое IIFE (Immediately Invoked Function Expression) и для чего она нужна?

Это немедленно вызываемое функциональное выражение. Используется для:
- Изоляции области видимости;
- Создания модуля;
- Предотвращения загрязнения глобального пространства имён.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM