Когда мы добавляем картинку в 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
Чтобы элементы списка появлялись и исчезали плавно, Vue предлагает встроенные средства для анимации. Нужно просто сообщить системе, что ты хочешь анимировать добавление и удаление, и определить, как именно это будет происходить — через классы, переходы или другие визуальные эффекты. Это позволяет делать интерфейс более живым и понятным пользователю.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
💊11🔥6👍2
C атрибутом
disabled, используя селекторы атрибутов. Селектор [disabled] позволяет выбрать все элементы, которые имеют этот атрибут, а селектор :disabled позволяет выбрать все элементы, которые находятся в состоянии disabled.Этот селектор выбирает все элементы, у которых присутствует атрибут
disabled.button[disabled] {
background-color: gray;
color: white;
border: 1px solid #ccc;
cursor: not-allowed; /* Указывает, что элемент недоступен для взаимодействия */
opacity: 0.6; /* Уменьшает непрозрачность */
}Этот селектор выбирает все элементы, которые находятся в состоянии
disabled.button:disabled {
background-color: gray;
color: white;
border: 1px solid #ccc;
cursor: not-allowed;
opacity: 0.6;
}С HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disabled Button Styling</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button>Active Button</button>
<button disabled>Disabled Button</button>
</body>
</html>
С CSS
/* Стили для активных кнопок */
button {
background-color: blue;
color: white;
border: 1px solid #000;
padding: 10px 20px;
cursor: pointer;
}
/* Стили для кнопок с атрибутом disabled */
button[disabled] {
background-color: gray;
color: white;
border: 1px solid #ccc;
cursor: not-allowed;
opacity: 0.6;
}
/* Альтернативный способ с использованием псевдокласса :disabled */
button:disabled {
background-color: gray;
color: white;
border: 1px solid #ccc;
cursor: not-allowed;
opacity: 0.6;
}
Вы можете комбинировать селекторы атрибутов с другими селекторами для более точного применения стилей.
/* Стили для кнопок с классом .special, которые имеют атрибут disabled */
button.special[disabled] {
background-color: darkgray;
color: black;
border: 1px dashed #999;
cursor: not-allowed;
opacity: 0.7;
}
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10
Тег <link> используется для подключения внешних ресурсов:
- CSS-стилей;
- фавиконок;
- шрифтов;
- предзагрузки и приоритезации (preload, dns-prefetch).
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🔥3
Если пользователи захотят распечатать вашу веб-страницу, важно, чтобы она выглядела чисто и профессионально. Для этого используется CSS-медиа-правило
@media print, которое позволяет задать специальные стили для печати. Вы можете задать стили, которые будут применяться только при печати
@media print {
body {
font-size: 12pt; /* Оптимальный размер шрифта */
color: black; /* Убираем цветной текст для экономии чернил */
background: none !important; /* Убираем фон */
}
}Некоторые элементы (например, навигация, футер, кнопки) не нужны при печати, их можно скрыть
@media print {
nav, .sidebar, .ads, .button {
display: none; /* Скрываем ненужное */
}
}Обычно страницы шире, чем лист бумаги. Можно задать
max-width для удобства@media print {
body {
width: 100%;
max-width: 800px; /* Уменьшаем ширину */
margin: auto; /* Центрируем */
}
}Заменяем цвета на чёрно-белые (экономия чернил)
@media print {
a {
color: black !important; /* Делаем ссылки чёрными */
text-decoration: underline; /* Добавляем подчёркивание */
}
}При печати гиперссылки не работают, поэтому можно показать их адрес
@media print {
a::after {
content: " (" attr(href) ")"; /* Добавляем URL рядом со ссылкой */
font-size: 10pt;
color: gray;
}
}Избегаем разрывов страниц в неудобных местах
@media print {
h1, h2, h3 {
page-break-after: avoid; /* Не разрываем страницу после заголовка */
}
p {
page-break-inside: avoid; /* Не разрываем абзац на две страницы */
}
}Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12
Для завершения работы Web Worker используется метод terminate() со стороны главного потока или self.close() внутри самого воркера. Это освобождает ресурсы.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5
Promise – это объект, представляющий отложенный результат (асинхронную операцию). Помимо
new Promise(), у Promise есть статические методы, которые помогают работать с несколькими промисами. Возвращает успешно выполненный
Promise с переданным значением. Promise.resolve(42).then(console.log); // 42
Возвращает промис в состоянии "отклонён" (
rejected). Promise.reject("Ошибка!").catch(console.error); // "Ошибка!"Выполняет все промисы параллельно и ждёт, пока ВСЕ выполнятся.
Если один промис отклонится,
Promise.all немедленно выдаст ошибку. Promise.all([
Promise.resolve(10),
Promise.resolve(20),
Promise.resolve(30),
]).then(console.log); // [10, 20, 30]
Ошибка прерывает выполнение
Promise.all([
Promise.resolve(1),
Promise.reject("Ошибка!"),
Promise.resolve(3),
]).catch(console.error); // "Ошибка!"
Возвращает массив состояний (
fulfilled или rejected) каждого промиса. Никогда не отклоняется, даже если есть ошибки.
Promise.allSettled([
Promise.resolve(100),
Promise.reject("Ошибка!"),
Promise.resolve(300),
]).then(console.log);
Выведет
[
{ status: "fulfilled", value: 100 },
{ status: "rejected", reason: "Ошибка!" },
{ status: "fulfilled", value: 300 }
]
Возвращает результат ПЕРВОГО выполненного или отклонённого промиса.
Promise.race([
new Promise(res => setTimeout(() => res("Промис 1"), 500)),
new Promise(res => setTimeout(() => res("Промис 2"), 300)),
]).then(console.log); // "Промис 2" (он быстрее)
Возвращает результат ПЕРВОГО выполненного (
fulfilled) промиса. Если ВСЕ промисы отклонены (
rejected), возвращает AggregateError. Promise.any([
Promise.reject("Ошибка 1"),
Promise.resolve("Успех!"),
Promise.reject("Ошибка 2"),
]).then(console.log); // "Успех!"
Ошибка, если все промисы
reject Promise.any([
Promise.reject("Ошибка 1"),
Promise.reject("Ошибка 2"),
]).catch(console.error); // AggregateError: Все промисы отклонены
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12
SSE (Server-Sent Events) позволяют одностороннюю передачу данных от сервера к клиенту через открытое соединение. Это альтернатива WebSocket'ам, когда клиенту нужно просто "слушать" события от сервера.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥17👍5💊1
В JavaScript, чтобы уничтожить объект
Web Worker, необходимо использовать метод terminate(). Этот метод останавливает выполнение worker'а, освобождает связанные с ним ресурсы и завершает его работу. После вызова terminate() объект worker больше не может быть использован.Web Worker позволяет выполнять тяжелые операции в фоновом потоке, не блокируя основной поток (UI-поток). Однако, если worker больше не нужен, он продолжает существовать и занимает ресурсы (память, процессорное время). Чтобы избежать утечек памяти и оптимизировать работу приложения, важно уничтожать worker, когда он больше не используется.
Вы вызываете метод
terminate() на экземпляре объекта worker. Это мгновенно останавливает выполнение фонового скрипта.// Создаем worker
const myWorker = new Worker('worker.js');
// Выполняем какие-то операции через worker
myWorker.postMessage('Hello, worker!');
// Завершаем работу worker, когда он больше не нужен
myWorker.terminate();
terminate() worker полностью уничтожается и больше не может отправлять или получать сообщения.onmessage), они автоматически удаляются.terminate() не приведет к ошибке, но никакие операции через него больше работать не будут.const worker = new Worker('worker.js');
// Отправляем сообщение
worker.postMessage('Start working');
// Завершаем работу worker
worker.terminate();
// Попытка отправить сообщение после уничтожения worker
worker.postMessage('Will this work?'); // Ничего не произойдет, worker уже завершенЕсли вы перезагружаете страницу или закрываете вкладку, все web worker автоматически уничтожаются браузером. Однако в рамках текущей сессии ответственность за уничтожение лежит на разработчике.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7💊1
- Удалять обработчики событий (removeEventListener).
- Обнулять переменные, если объект больше не нужен.
- Использовать WeakMap/WeakSet для хранения временных ссылок.
- Следить за замыканиями и таймерами.
- Профилировать память в DevTools (вкладка Memory).
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥13👍1💊1
Оба этих хука выполняют побочные эффекты в React, но разница в том, когда именно они выполняются
useEffect выполняется после рендера и отрисовки в браузере. useLayoutEffect выполняется сразу после рендера, но перед отрисовкой в браузере. То есть
useLayoutEffect блокирует рендер, а useEffect — нет. useEffect выполняется асинхронно, после того как браузер отрисовал страницу. Используется для:
- Запросов к API.
- Подключения WebSocket'ов или таймеров.
- Логирования данных.
- Изменения заголовка страницы (
document.title). import { useState, useEffect } from "react";
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `Вы кликнули ${count} раз`;
}, [count]); // Запускается после рендера
return <button onClick={() => setCount(count + 1)}>Клик: {count}</button>;
}useLayoutEffect выполняется сразу после рендера, но перед тем, как браузер отобразит изменения. Используется для
- Синхронных манипуляций с DOM.
- Измерения размеров элементов (
getBoundingClientRect). - Анимаций (например, при расчёте позиций).
import { useEffect, useLayoutEffect, useState } from "react";
function Example() {
const [width, setWidth] = useState(0);
useLayoutEffect(() => {
const box = document.getElementById("box");
setWidth(box.offsetWidth);
}, []);
return (
<div>
<div id="box" style={{ width: "100px", height: "50px", background: "red" }}></div>
<p>Ширина: {width}px</p>
</div>
);
}Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🤔1
Постоянно получаешь отказы в ответ на отклики?
Не получается пробиться на собеседование и получить оффер?
Рынок найма в IT сейчас перегрет: сотни откликов — ноль ответов, автоотказы, HR, которые просто не видят кандидата. Многие застревают на этом этапе и не понимают, что делать дальше.
Решение — разобраться, как реально работает рынок IT-найма, и выстроить процесс поиска работы системно:
— оптимизировать резюме под алгоритмы поиска;
— разработать стратегию откликов;
— подготовить сильную самопрезентацию;
— научиться проходить каждый этап воронки от отклика до оффера.
Андрей, практикующий Senior Frontend разработчик, посвятил свой канал тому:
— как оптимизировать резюме под поисковые алгоритмы площадок;
— как строить воронку отклик → скрининг → собес → оффер;
— как презентовать свои навыки;
— как сохранить мотивацию, когда сотни откликов уходят в пустоту.
🎁 В закрепе уже доступен бесплатный гайд по трудоустройству для фронтенд-разработчиков.
Если нужны актуальные стратегии трудоустройства в 2025 году и самые рабочие практики — присоединяйся 👉 @RusanovMentor
Не получается пробиться на собеседование и получить оффер?
Рынок найма в IT сейчас перегрет: сотни откликов — ноль ответов, автоотказы, HR, которые просто не видят кандидата. Многие застревают на этом этапе и не понимают, что делать дальше.
Решение — разобраться, как реально работает рынок IT-найма, и выстроить процесс поиска работы системно:
— оптимизировать резюме под алгоритмы поиска;
— разработать стратегию откликов;
— подготовить сильную самопрезентацию;
— научиться проходить каждый этап воронки от отклика до оффера.
Андрей, практикующий Senior Frontend разработчик, посвятил свой канал тому:
— как оптимизировать резюме под поисковые алгоритмы площадок;
— как строить воронку отклик → скрининг → собес → оффер;
— как презентовать свои навыки;
— как сохранить мотивацию, когда сотни откликов уходят в пустоту.
🎁 В закрепе уже доступен бесплатный гайд по трудоустройству для фронтенд-разработчиков.
Если нужны актуальные стратегии трудоустройства в 2025 году и самые рабочие практики — присоединяйся 👉 @RusanovMentor
👍1💊1
- string
- number
- bigint
- boolean
- undefined
- null
- symbol
Они не являются объектами и имеют иммутабельную природу.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🔥1🤔1