Channel: Frontend | Вопросы собесов
1. Запрос к серверу → браузер получает HTML.
2. Парсинг HTML → создается DOM-дерево.
3. Запрос CSS и JS → загружаются и исполняются стили и скрипты.
4. Создание CSSOM → объединение с DOM → рендер-дерево.
5. Рендеринг → вычисление позиций элементов.
6. Отрисовка → пиксели появляются на экране.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Это ключевые слова, добавляемые к селекторам, которые указывают на специальное состояние выбранного элемента. Псевдоклассы позволяют стилизовать элементы на основе их состояния в документе, без необходимости добавления дополнительных классов или ID напрямую в HTML-код. С их помощью можно, например, изменить внешний вид ссылок при наведении курсора, стилизовать четные и нечетные элементы списка, изменять стиль элементов при получении фокуса и многое другое.
:hover
— применяется к элементу, когда на него наводят курсор мыши.a:hover {
color: red; /* Ссылка станет красной при наведении /
}
:focus
— применяется к элементу, когда он получает фокус (например, при переходе на элемент с помощью клавиатуры или при клике мыши).input:focus {
border-color: blue; / Граница инпута станет синей при фокусе /
}
:active
— применяется к элементу в момент его активации пользователем (например, во время клика по кнопке).button:active {
transform: scale(0.98); / Кнопка немного уменьшится при клике /
}
:nth-child()
— позволяет стилизовать элементы в зависимости от их порядка среди детей родительского элемента.li:nth-child(odd) {
background-color: gray; / Заливка каждого нечетного элемента списка /
}
:not()
— исключает из выборки элементы, соответствующие указанному селектору.div:not(.special) {
color: green; / Применяется к каждому div, который не имеет класса special */
}
Они делают CSS более мощным и гибким, позволяя разработчикам применять стили к элементам на основе их состояния или положения в документе, без изменения HTML-структуры. Это особенно полезно для создания интерактивных и реактивных пользовательских интерфейсов, где визуальное состояние элемента должно меняться в ответ на действия пользователя.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
- defer – выполняет скрипт после загрузки HTML.
- async – выполняет скрипт сразу после загрузки, без ожидания HTML.
- DOMContentLoaded – ждет построения DOM, но не загрузки стилей и картинок.
- load – ждет загрузки всех ресурсов, включая изображения.
- Promise и async/await – управление асинхронными операциями в коде.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Nginx — это мощный веб-сервер, который используется для раздачи статических файлов, балансировки нагрузки, проксирования запросов и обеспечения безопасности.
Когда мы билдим SPA-приложение (например, React/Vue/Angular), в папке
dist
появляются статические файлы (index.html
, app.js
, styles.css
). server {
listen 80;
server_name myapp.com;
root /var/www/myapp/dist;
index index.html;
location / {
try_files $uri /index.html;
}
}
Если фронтенд (
myapp.com
) и бэкенд (api.myapp.com
) находятся на разных серверах, Nginx может перенаправлять запросы на API. server {
listen 80;
server_name myapp.com;
root /var/www/myapp/dist;
index index.html;
location / {
try_files $uri /index.html;
}
# Проксирование API-запросов
location /api/ {
proxy_pass http://localhost:5000/; # Node.js, Python, PHP и т. д.
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}
Если у нас несколько бэкенд-серверов, Nginx может распределять нагрузку между ними.
upstream backend {
server backend1.myapp.com;
server backend2.myapp.com;
}
server {
listen 80;
server_name api.myapp.com;
location / {
proxy_pass http://backend;
}
}
Кэширование уменьшает нагрузку на сервер и ускоряет загрузку страниц.
location /static/ {
expires 7d; # Кэшировать файлы на 7 дней
add_header Cache-Control "public, max-age=604800";
}
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
1. Lighthouse (Chrome DevTools) – анализ производительности.
2. PageSpeed Insights – оценка скорости загрузки.
3. Web Vitals (FCP, LCP, CLS, TBT, FID) – ключевые метрики.
4. Performance API – измерение времени загрузки ресурсов.
5. GTmetrix – детальный анализ производительности.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Когда мы добавляем картинку в HTML, текст по умолчанию может обтекать её, если используется
float
. Если изображение обтекается текстом из-за
float
, нужно очистить обтекание с помощью clear: both;
. <img src="image.jpg" class="float-img">
<p class="clear-text">Этот текст не будет обтекать картинку.</p>
.float-img {
float: left; /* Изображение обтекается текстом */
margin-right: 10px;
}
.clear-text {
clear: both; /* Останавливает обтекание */
}
По умолчанию
img
– inline-block элемент, поэтому текст может располагаться рядом. Если сделать его display: block;
, текст уйдёт вниз. img {
display: block;
margin: 10px auto; /* Центрирование */
}
Если у родителя есть
float
, можно использовать overflow: hidden;
для очистки потока. .container {
overflow: hidden; /* Очищает обтекание */
}
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
- Минимизировать CSS, JS и HTML (Minification, gzip, Brotli).
- Lazy-loading изображений и видео.
- Использовать CDN для быстрой доставки контента.
- Оптимизировать рендеринг с помощью критического CSS.
- Использовать кэширование (Cache-Control, ETag).
- Уменьшить количество HTTP-запросов (объединять файлы, использовать sprites).
- Оптимизировать шрифты и уменьшить их количество.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Миксины в препроцессорах CSS, таких как Sass, LESS и Stylus, представляют собой переиспользуемые блоки кода, которые можно вставлять в другие блоки стилей. Они позволяют группировать наборы стилей, которые можно повторно использовать по всему CSS-файлу. Это помогает уменьшить дублирование кода и упростить его поддержку.
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(10px);
}
.button {
@include border-radius(5px);
}
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.box {
.border-radius(10px);
}
.button {
.border-radius(5px);
}
border-radius(radius)
-webkit-border-radius: radius
-moz-border-radius: radius
border-radius: radius
.box
border-radius(10px)
.button
border-radius(5px
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Стоит делать:
- Оптимизировать изображения и видео.
- Минимизировать количество HTTP-запросов.
- Использовать эффективное кэширование.
- Lazy-loading и code-splitting.
Не стоит делать:
- Загружать слишком много тяжелых скриптов.
- Использовать много inline-стилей вместо внешних CSS.
- Прерывать основной поток тяжелыми JS-операциями.
- Загружать весь контент сразу без lazy-loading.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
В веб-разработке есть разные способы загрузки изображений с сервера. Они зависят от того, какой сервер и какая задача (отображение в браузере, скачивание, работа с API и т. д.).
<img>
– самый простой способ (браузер сам загружает) <img src="https://example.com/image.jpg" alt="Картинка">
CSS (
background-image
) – если нужно фоновое изображение .element {
background-image: url("https://example.com/image.jpg");
background-size: cover;
}
Можно загрузить изображение как Blob и создать временный URL.
fetch("https://example.com/image.jpg")
.then(response => response.blob())
.then(blob => {
const url = URL.createObjectURL(blob);
document.getElementById("img").src = url;
});
XMLHttpRequest
– старый метод (устарел, но работает) const xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/image.jpg", true);
xhr.responseType = "blob";
xhr.onload = function () {
const url = URL.createObjectURL(xhr.response);
document.getElementById("img").src = url;
};
xhr.send();
Можно загрузить картинку и нарисовать её на
<canvas>
. const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = new Image();
img.onload = function () {
ctx.drawImage(img, 0, 0);
};
img.src = "https://example.com/image.jpg";
WebSocket – если изображение передаётся в реальном времени
const socket = new WebSocket("wss://example.com/socket");
socket.onmessage = function (event) {
const url = URL.createObjectURL(event.data);
document.getElementById("img").src = url;
};
data URL
(Base64) – если нужно хранить изображение в тексте <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." />
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Если микрозадача (например, Promise) вызывает новую микрозадачу, она будет выполнена сразу после текущей, до перехода к следующей макрозадаче (например, setTimeout). Это может привести к бесконечному циклу, задерживая рендеринг и блокируя интерфейс.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from easyoffer
На easyoffer 2.0 появится:
🎯 Тренажер "Проработка вопросов"
✅ Метод интервальных повторений и флеш-карточки
✅ Персональный подход изучения на основе ваших ответов
✅ Упор на самые частые вопросы
📌 Интервальные повторения по карточкам это научно доказанный метод эффективного обучения. Каждая карточка – это вопрос, который задают на собеседовании, вы можете выбрать "Не знаю", "Знаю", "Не спрашивать". После ответа вам показывается правильный ответ и возможность изучить вопрос подробнее (примеры ответов других людей). От ваших ответов зависит то, как часто карточки будут показываться на следующей тренировке. Трудные вопросы показываются чаще, простые – реже. Это позволяет бить в слабые места. Кроме того, изначальный порядок карточек зависит от частотности (вероятности встретить вопрос).
🚀 Благодаря этому тренажеру вы сможете очень быстро подготовиться к собеседованию, т.к. фокусируетесь отвечать на самые частые вопросы. Именно так готовился я сам, когда искал первую работу программистом.
Уже в течение недели я объявлю о старте краудфандинговой кампании на сбор финансирования, чтобы ускорить разработку сайта. Все кто поддержит проект до официального релиза получат самые выгодные условия пользования сервисом. А именно 1 год доступа к сайту по цене месячной подписки.
‼️ Очень важно, чтобы как можно больше людей поддержали проект в первые дни, по-этому те кто окажет поддержку первыми получат еще более выгодную стоимость на годовую подписку и существенный💎 бонус о котором я позже расскажу в этом телеграм канале. Подписывайтесь, чтобы узнать о старте проекта раньше других и воспользоваться лимитированными вознаграждениями.
🎯 Тренажер "Проработка вопросов"
✅ Метод интервальных повторений и флеш-карточки
✅ Персональный подход изучения на основе ваших ответов
✅ Упор на самые частые вопросы
📌 Интервальные повторения по карточкам это научно доказанный метод эффективного обучения. Каждая карточка – это вопрос, который задают на собеседовании, вы можете выбрать "Не знаю", "Знаю", "Не спрашивать". После ответа вам показывается правильный ответ и возможность изучить вопрос подробнее (примеры ответов других людей). От ваших ответов зависит то, как часто карточки будут показываться на следующей тренировке. Трудные вопросы показываются чаще, простые – реже. Это позволяет бить в слабые места. Кроме того, изначальный порядок карточек зависит от частотности (вероятности встретить вопрос).
🚀 Благодаря этому тренажеру вы сможете очень быстро подготовиться к собеседованию, т.к. фокусируетесь отвечать на самые частые вопросы. Именно так готовился я сам, когда искал первую работу программистом.
Уже в течение недели я объявлю о старте краудфандинговой кампании на сбор финансирования, чтобы ускорить разработку сайта. Все кто поддержит проект до официального релиза получат самые выгодные условия пользования сервисом. А именно 1 год доступа к сайту по цене месячной подписки.
‼️ Очень важно, чтобы как можно больше людей поддержали проект в первые дни, по-этому те кто окажет поддержку первыми получат еще более выгодную стоимость на годовую подписку и существенный
Please open Telegram to view this post
VIEW IN TELEGRAM
Это синтаксический сахар для работы с асинхронными операциями, делающий код, работающий с асинхронными действиями, такими как запросы к серверу или чтение файлов, более читаемым и легким для понимания. Этот синтаксис был введен в ES2017 (ES8) и строится на промисах (Promises).
async
Используется перед объявлением функции. Это позволяет функции автоматически возвращать промис. Если эта функция возвращает не промис, то возвращаемое значение будет автоматически обернуто в промис.
async function fetchData() {
return 'данные';
}
fetchData().then(data => console.log(data)); // выводит "данные"
await
Используется для ожидания результата промиса внутри асинхронной функции
async
. Оно приостанавливает выполнение асинхронной функции до тех пор, пока промис не выполнится (т.е. не будет разрешен или отклонен). ЕЕ можно использовать только внутри асинхронных функций.async function fetchData() {
let data = await fetch('https://api.example.com/data');
let json = await data.json();
return json;
}
Асинхронный код, написанный с использованием
async
/await
, выглядит более структурированным и похожим на синхронный код, что упрощает его пониманиеВ асинхронных функциях с
await
можно использовать стандартный синтаксис try
/catch
для обработки ошибок, что делает код единообразнее.Использование
async
/await
позволяет избежать сложностей с вложенными коллбэками, которые могут возникнуть при использовании промисов или старого стиля асинхронного кода с коллбэками.Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Альтернативы Redux включают:
- Context API + useReducer – встроенное в React решение для управления состоянием.
- Recoil – удобный state-менеджер с простым API и атомарным состоянием.
- Zustand – легковесное хранилище с удобным синтаксисом.
- MobX – реактивное управление состоянием с автоматическими обновлениями.
- Jotai – атомарное управление состоянием, похожее на Recoil, но проще.
Выбор зависит от сложности проекта: для небольших – Context API, для масштабных – Zustand, MobX или Redux Toolkit.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Все три тега (
<div>
, <img>
, <p>
) используются в HTML, но у них разные предназначения и свойства. Блочный элемент, используется для группировки других элементов и стилизации.
<div class="container">
<p>Привет, мир!</p>
<img src="image.jpg" alt="Картинка">
</div>
Особенности
<div>
- Не несёт семантического значения (просто контейнер).
- По умолчанию блочный (занимает всю ширину).
- Используется для группировки и стилизации через CSS.
Строчно-замещающий элемент, предназначен для вставки картинок.
<img src="logo.png" alt="Логотип">
Особенности
<img>
- Не имеет закрывающего тега (
<img>
– одиночный тег). - Строчно-замещающий (ведёт себя как
inline
, но может иметь размеры). - Заменяется на картинку при отображении страницы.
- Требует
alt
для доступности и SEO. Блочный элемент, предназначен для разметки текста.
<p>Это текст в абзаце.</p>
Особенности
<p>
- Блочный (начинается с новой строки).
- Используется только для текста.
- Внутри нельзя размещать другие блочные элементы (
<div>
, <p>
). Ошибка
<p>Привет, мир!</p>
<p>Второй абзац</p> <!-- Это правильно -->
<p><div>Ошибка!</div></p> <!-- ❌ Нельзя вставлять <div> внутрь <p> -->
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Это функция в Redux, которая отправляет экшены (actions) в хранилище (store). Она запускает редюсер, который изменяет состояние на основе переданного экшена.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Промисы (
Promise
) относятся к асинхронным объектам, реализующим паттерн "Promise". Они позволяют работать с отложенными и асинхронными операциями (например, сетевые запросы, таймеры, операции с файлами). Категория: Асинхронные программные конструкции (Async Objects / Async Patterns)
Тип: Объект (Promise Object)*
Используются в: Асинхронном программировании (Async/Await,
then/catch
) Промисы не выполняются сразу, а ждут завершения операции, после чего выполняют код в
.then()
или .catch()
. const fetchData = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Данные загружены!"); // Успех
}, 2000);
});
fetchData.then(data => console.log(data));
До появления
Promise
в JavaScript использовались колбэки, но они приводили к "callback hell". function fetchData(callback) {
setTimeout(() => {
callback("Данные загружены!");
}, 2000);
}
fetchData(data => console.log(data));
Решение с
Promise
fetchData()
.then(data => console.log(data))
.catch(error => console.error(error));
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Централизованное хранилище состояния в Redux. Оно содержит данные приложения, позволяет подписываться на обновления и изменять состояние только через dispatch.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from easyoffer
На easyoffer 2.0 появится новый раздел:
Задачи с собеседований
🟠 Задачи на Алгоритмические, Live-coding и System Design из реальных собеседований
🟠 Вероятность встретить ту или иную задачу
🟠 Возможность подготовиться к задачам конкретной компании
Есть много сайтов, на которых можно тренироваться решать задачи, но у них у всех одна проблема – сами задачи люди просто выдумывают. На easyoffer 2.0 вы сможете готовиться к live-coding и system design секциям на основе задач из реальных собеседований. Вы можете найдете самые частые задачи и сделаете упор на их решение.
Считаные дни остались до старта краудфандинговой кампании, чтобы ускорить разработку easyoffer 2.0. Все кто, поддержал проект на этом этапе смогу получить 1 год доступа к сайту по цене месячной подписки, а те кто поддержат проект раньше других ито дешевле + получат существенный бонус. Следите за стартом 👉 в этом телеграм канале.
Задачи с собеседований
Есть много сайтов, на которых можно тренироваться решать задачи, но у них у всех одна проблема – сами задачи люди просто выдумывают. На easyoffer 2.0 вы сможете готовиться к live-coding и system design секциям на основе задач из реальных собеседований. Вы можете найдете самые частые задачи и сделаете упор на их решение.
Считаные дни остались до старта краудфандинговой кампании, чтобы ускорить разработку easyoffer 2.0. Все кто, поддержал проект на этом этапе смогу получить 1 год доступа к сайту по цене месячной подписки, а те кто поддержат проект раньше других ито дешевле + получат существенный бонус. Следите за стартом 👉 в этом телеграм канале.
Please open Telegram to view this post
VIEW IN TELEGRAM
float
– это CSS-свойство, которое позволяет "выплывать" элементу из обычного потока документа и обтекаться другими элементами (например, текстом). Основные значения
float
<img src="image.jpg" class="float-img">
<p>Это текст, который будет обтекать картинку.</p>
.float-img {
float: left;
margin-right: 10px;
}
Когда внутри
div
есть только float
-элементы, браузер считает, что он пустой, потому что float
убирает элемент из потока. <div class="container">
<img src="image.jpg" class="float-img">
<p>Текст обтекает картинку.</p>
</div>
.container {
background: lightgray;
}
.float-img {
float: left;
}
Решение 1:
overflow: hidden;
.container {
overflow: hidden; /* Контейнер теперь учитывает float-элементы */
}
Решение 2:
clearfix
(старый способ) .container::after {
content: "";
display: block;
clear: both;
}
Чтобы отменить обтекание, используется
clear
. <img src="image.jpg" class="float-img">
<p>Этот текст обтекает картинку.</p>
<div class="clear"></div>
<p>Этот текст пойдёт на новую строку.</p>
.float-img {
float: left;
margin-right: 10px;
}
.clear {
clear: both;
}
Раньше
float
использовали для создания колонок и сеток, но сегодня его заменили: Flexbox (
display: flex;
) – лучше для адаптивных макетов. CSS Grid (
display: grid;
) – мощный инструмент для сложных сеток. .container {
display: flex;
align-items: center;
}
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
HTML Embed Code: