При клике на ссылку браузер:
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🔥8👍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
👍15😁1
Это принципы разработки, обеспечивающие удобство использования интерфейса людьми с ограниченными возможностями. Это включает:
- Поддержку экранных читалок (ARIA-атрибуты).
- Клавиатурную навигацию.
- Контрастность и читаемость текста.
- Альтернативный текст для изображений.
- Упрощение форм и интерактивных элементов.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥11👍8❤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
👍9
Отрисовка сайта включает разметку (HTML), стилизацию (CSS) и логику (JavaScript). Браузер парсит код, загружает ресурсы, выполняет скрипты и рендерит страницу на основе DOM и CSSOM. Важно минимизировать блокирующие ресурсы для быстрой загрузки.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13💊3🔥2😁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
👍21
1. Запрос к серверу → браузер получает HTML.
2. Парсинг HTML → создается DOM-дерево.
3. Запрос CSS и JS → загружаются и исполняются стили и скрипты.
4. Создание CSSOM → объединение с DOM → рендер-дерево.
5. Рендеринг → вычисление позиций элементов.
6. Отрисовка → пиксели появляются на экране.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍24🔥14❤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
👍14💊1
- defer – выполняет скрипт после загрузки HTML.
- async – выполняет скрипт сразу после загрузки, без ожидания HTML.
- DOMContentLoaded – ждет построения DOM, но не загрузки стилей и картинок.
- load – ждет загрузки всех ресурсов, включая изображения.
- Promise и async/await – управление асинхронными операциями в коде.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12🔥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
👍23❤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
🔥13👍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
👍9❤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
🔥16👍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
👍13❤2
Стоит делать:
- Оптимизировать изображения и видео.
- Минимизировать количество HTTP-запросов.
- Использовать эффективное кэширование.
- Lazy-loading и code-splitting.
Не стоит делать:
- Загружать слишком много тяжелых скриптов.
- Использовать много inline-стилей вместо внешних CSS.
- Прерывать основной поток тяжелыми JS-операциями.
- Загружать весь контент сразу без lazy-loading.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10👍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🔥3❤1
Если микрозадача (например, Promise) вызывает новую микрозадачу, она будет выполнена сразу после текущей, до перехода к следующей макрозадаче (например, setTimeout). Это может привести к бесконечному циклу, задерживая рендеринг и блокируя интерфейс.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍20🔥12
Forwarded from easyoffer
На easyoffer 2.0 появится:
🎯 Тренажер "Проработка вопросов"
✅ Метод интервальных повторений и флеш-карточки
✅ Персональный подход изучения на основе ваших ответов
✅ Упор на самые частые вопросы
📌 Интервальные повторения по карточкам это научно доказанный метод эффективного обучения. Каждая карточка – это вопрос, который задают на собеседовании, вы можете выбрать "Не знаю", "Знаю", "Не спрашивать". После ответа вам показывается правильный ответ и возможность изучить вопрос подробнее (примеры ответов других людей). От ваших ответов зависит то, как часто карточки будут показываться на следующей тренировке. Трудные вопросы показываются чаще, простые – реже. Это позволяет бить в слабые места. Кроме того, изначальный порядок карточек зависит от частотности (вероятности встретить вопрос).
🚀 Благодаря этому тренажеру вы сможете очень быстро подготовиться к собеседованию, т.к. фокусируетесь отвечать на самые частые вопросы. Именно так готовился я сам, когда искал первую работу программистом.
Уже в течение недели я объявлю о старте краудфандинговой кампании на сбор финансирования, чтобы ускорить разработку сайта. Все кто поддержит проект до официального релиза получат самые выгодные условия пользования сервисом. А именно 1 год доступа к сайту по цене месячной подписки.
‼️ Очень важно, чтобы как можно больше людей поддержали проект в первые дни, по-этому те кто окажет поддержку первыми получат еще более выгодную стоимость на годовую подписку и существенный💎 бонус о котором я позже расскажу в этом телеграм канале. Подписывайтесь, чтобы узнать о старте проекта раньше других и воспользоваться лимитированными вознаграждениями.
🎯 Тренажер "Проработка вопросов"
✅ Метод интервальных повторений и флеш-карточки
✅ Персональный подход изучения на основе ваших ответов
✅ Упор на самые частые вопросы
📌 Интервальные повторения по карточкам это научно доказанный метод эффективного обучения. Каждая карточка – это вопрос, который задают на собеседовании, вы можете выбрать "Не знаю", "Знаю", "Не спрашивать". После ответа вам показывается правильный ответ и возможность изучить вопрос подробнее (примеры ответов других людей). От ваших ответов зависит то, как часто карточки будут показываться на следующей тренировке. Трудные вопросы показываются чаще, простые – реже. Это позволяет бить в слабые места. Кроме того, изначальный порядок карточек зависит от частотности (вероятности встретить вопрос).
🚀 Благодаря этому тренажеру вы сможете очень быстро подготовиться к собеседованию, т.к. фокусируетесь отвечать на самые частые вопросы. Именно так готовился я сам, когда искал первую работу программистом.
Уже в течение недели я объявлю о старте краудфандинговой кампании на сбор финансирования, чтобы ускорить разработку сайта. Все кто поддержит проект до официального релиза получат самые выгодные условия пользования сервисом. А именно 1 год доступа к сайту по цене месячной подписки.
‼️ Очень важно, чтобы как можно больше людей поддержали проект в первые дни, по-этому те кто окажет поддержку первыми получат еще более выгодную стоимость на годовую подписку и существенный
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
Это синтаксический сахар для работы с асинхронными операциями, делающий код, работающий с асинхронными действиями, такими как запросы к серверу или чтение файлов, более читаемым и легким для понимания. Этот синтаксис был введен в 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
👍20❤1
Альтернативы 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
👍10🔥4💊1