Ререндер компонента в React происходит при:
- Изменении состояния (state).
- Изменении пропсов (props).
- Вызове forceUpdate() (редко используется).
- Изменении контекста (context API).
Используется React.memo() и useCallback/useMemo для оптимизации.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥11👍5💊3
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
👍16❤11🔥3😁1
При клике на ссылку браузер:
1. Отправляет HTTP-запрос на сервер.
2. Получает HTTP-ответ, содержащий HTML, CSS, JS.
3. Парсит HTML и загружает ресурсы (CSS, JS, шрифты, изображения).
4. Рендерит страницу, выполняя скрипты и стили.
5. Обновляет историю (pushState, replaceState в SPA).
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
❤18🔥6👍2
Вес селектора (специфичность) – это правило, по которому браузер определяет, какой стиль применить, если есть несколько конфликтующих селекторов.
( inline, id, class/атрибут/псевдокласс, элемент/псевдоэлемент )
Пример
/* Специфичность: (0, 1, 0, 0) */
#header { color: red; }
/* Специфичность: (0, 0, 1, 0) */
.header { color: blue; }
/* Специфичность: (0, 0, 0, 1) */
h1 { color: green; }
Пример 1
h1 { color: red; } /* (0,0,0,1) */
.title { color: blue; } /* (0,0,1,0) */Пример 2
h1 { color: red; } /* (0,0,0,1) */
#main { color: blue; } /* (0,1,0,0) */Пример 3 (комбинированные селекторы)
h1.title { color: red; } /* (0,0,1,1) */
#main h1 { color: blue; } /* (0,1,0,1) */Пример 4 (инлайн-стиль всегда сильнее)
<h1 style="color: green;">Заголовок</h1>
h1 { color: red; } /* (0,0,0,1) */
.title { color: blue; } /* (0,0,1,0) */
#main { color: purple; } /* (0,1,0,0) */Добавить ID (но не злоупотреблять). Использовать более специфичные селекторы (например,
.header h1 вместо h1). Использовать !important (но осторожно!). h1 { color: red !important; } /* Всегда будет красным */Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14😁1
Это принципы разработки, обеспечивающие удобство использования интерфейса людьми с ограниченными возможностями. Это включает:
- Поддержку экранных читалок (ARIA-атрибуты).
- Клавиатурную навигацию.
- Контрастность и читаемость текста.
- Альтернативный текст для изображений.
- Упрощение форм и интерактивных элементов.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥11👍7❤1
В Vue 2 и Vue 3 (Options API) методы жизненного цикла (
mounted, created, beforeDestroy и др.) должны быть обычными функциями, а не стрелочными (() => {}). Когда Vue вызывает метод жизненного цикла, он автоматически привязывает
this к экземпляру компонента. export default {
data() {
return { message: "Привет!" };
},
mounted() {
console.log(this.message); // ✅ Работает, this = { message: "Привет!" }
}
};Стрелочные функции не создают свой собственный
this, а берут this из внешнего контекста (того, что было при их создании). export default {
data() {
return { message: "Привет!" };
},
mounted: () => {
console.log(this.message); // ❌ Ошибка: this === undefined
}
};Хотя стрелочные функции нельзя использовать для методов жизненного цикла, их можно применять внутри обычных методов:
export default {
data() {
return { message: "Привет!" };
},
mounted() {
setTimeout(() => {
console.log(this.message); // ✅ Работает, this берётся из `mounted()`
}, 1000);
}
};Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
Отрисовка сайта включает разметку (HTML), стилизацию (CSS) и логику (JavaScript). Браузер парсит код, загружает ресурсы, выполняет скрипты и рендерит страницу на основе DOM и CSSOM. Важно минимизировать блокирующие ресурсы для быстрой загрузки.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13💊3🔥1😁1
Чтобы увеличить элемент в размере при наведении, не сдвигая при этом соседние элементы, можно использовать CSS свойство
transform с функцией scale. Это позволяет изменять размер элемента, не влияя на его положение и соседние элементы, так как трансформация происходит в контексте самого элемента и не меняет его фактические размеры в документе.<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Увеличение при наведении</title>
<style>
.container {
display: flex;
gap: 10px;
}
.item {
width: 100px;
height: 100px;
background-color: lightblue;
text-align: center;
line-height: 100px;
transition: transform 0.3s;
}
.item:hover {
transform: scale(1.2); /* Увеличение размера при наведении */
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
Увеличение элементов при наведении может служить для привлечения внимания пользователя или для улучшения взаимодействия, например, при работе с интерактивными элементами.
Применение трансформации с
transform: scale позволяет изменять размер элемента без изменения его фактического размера и расположения в документе, что сохраняет стабильность макета и не нарушает расположение соседних элементов.Использование
transition делает анимацию плавной и приятной для глаз, улучшая общее восприятие интерфейса.Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍20
1. Запрос к серверу → браузер получает HTML.
2. Парсинг HTML → создается DOM-дерево.
3. Запрос CSS и JS → загружаются и исполняются стили и скрипты.
4. Создание CSSOM → объединение с DOM → рендер-дерево.
5. Рендеринг → вычисление позиций элементов.
6. Отрисовка → пиксели появляются на экране.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍24🔥13❤2
Это ключевые слова, добавляемые к селекторам, которые указывают на специальное состояние выбранного элемента. Псевдоклассы позволяют стилизовать элементы на основе их состояния в документе, без необходимости добавления дополнительных классов или 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
👍13💊1
- defer – выполняет скрипт после загрузки HTML.
- async – выполняет скрипт сразу после загрузки, без ожидания HTML.
- DOMContentLoaded – ждет построения DOM, но не загрузки стилей и картинок.
- load – ждет загрузки всех ресурсов, включая изображения.
- Promise и async/await – управление асинхронными операциями в коде.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🔥8❤1
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
👍22❤2
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
🔥12👍6
Когда мы добавляем картинку в 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
👍8❤1
- Минимизировать 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
🔥15👍1💊1
Миксины в препроцессорах 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
👍12❤2
Стоит делать:
- Оптимизировать изображения и видео.
- Минимизировать количество HTTP-запросов.
- Использовать эффективное кэширование.
- Lazy-loading и code-splitting.
Не стоит делать:
- Загружать слишком много тяжелых скриптов.
- Использовать много inline-стилей вместо внешних CSS.
- Прерывать основной поток тяжелыми JS-операциями.
- Загружать весь контент сразу без lazy-loading.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9👍1
В веб-разработке есть разные способы загрузки изображений с сервера. Они зависят от того, какой сервер и какая задача (отображение в браузере, скачивание, работа с 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
👍21🔥2❤1
Если микрозадача (например, Promise) вызывает новую микрозадачу, она будет выполнена сразу после текущей, до перехода к следующей макрозадаче (например, setTimeout). Это может привести к бесконечному циклу, задерживая рендеринг и блокируя интерфейс.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍20🔥11
Forwarded from easyoffer
На easyoffer 2.0 появится:
🎯 Тренажер "Проработка вопросов"
✅ Метод интервальных повторений и флеш-карточки
✅ Персональный подход изучения на основе ваших ответов
✅ Упор на самые частые вопросы
📌 Интервальные повторения по карточкам это научно доказанный метод эффективного обучения. Каждая карточка – это вопрос, который задают на собеседовании, вы можете выбрать "Не знаю", "Знаю", "Не спрашивать". После ответа вам показывается правильный ответ и возможность изучить вопрос подробнее (примеры ответов других людей). От ваших ответов зависит то, как часто карточки будут показываться на следующей тренировке. Трудные вопросы показываются чаще, простые – реже. Это позволяет бить в слабые места. Кроме того, изначальный порядок карточек зависит от частотности (вероятности встретить вопрос).
🚀 Благодаря этому тренажеру вы сможете очень быстро подготовиться к собеседованию, т.к. фокусируетесь отвечать на самые частые вопросы. Именно так готовился я сам, когда искал первую работу программистом.
Уже в течение недели я объявлю о старте краудфандинговой кампании на сбор финансирования, чтобы ускорить разработку сайта. Все кто поддержит проект до официального релиза получат самые выгодные условия пользования сервисом. А именно 1 год доступа к сайту по цене месячной подписки.
‼️ Очень важно, чтобы как можно больше людей поддержали проект в первые дни, по-этому те кто окажет поддержку первыми получат еще более выгодную стоимость на годовую подписку и существенный💎 бонус о котором я позже расскажу в этом телеграм канале. Подписывайтесь, чтобы узнать о старте проекта раньше других и воспользоваться лимитированными вознаграждениями.
🎯 Тренажер "Проработка вопросов"
✅ Метод интервальных повторений и флеш-карточки
✅ Персональный подход изучения на основе ваших ответов
✅ Упор на самые частые вопросы
📌 Интервальные повторения по карточкам это научно доказанный метод эффективного обучения. Каждая карточка – это вопрос, который задают на собеседовании, вы можете выбрать "Не знаю", "Знаю", "Не спрашивать". После ответа вам показывается правильный ответ и возможность изучить вопрос подробнее (примеры ответов других людей). От ваших ответов зависит то, как часто карточки будут показываться на следующей тренировке. Трудные вопросы показываются чаще, простые – реже. Это позволяет бить в слабые места. Кроме того, изначальный порядок карточек зависит от частотности (вероятности встретить вопрос).
🚀 Благодаря этому тренажеру вы сможете очень быстро подготовиться к собеседованию, т.к. фокусируетесь отвечать на самые частые вопросы. Именно так готовился я сам, когда искал первую работу программистом.
Уже в течение недели я объявлю о старте краудфандинговой кампании на сбор финансирования, чтобы ускорить разработку сайта. Все кто поддержит проект до официального релиза получат самые выгодные условия пользования сервисом. А именно 1 год доступа к сайту по цене месячной подписки.
‼️ Очень важно, чтобы как можно больше людей поддержали проект в первые дни, по-этому те кто окажет поддержку первыми получат еще более выгодную стоимость на годовую подписку и существенный
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5