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
👍12🔥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
👍13
SSE (Server-Sent Events) позволяют одностороннюю передачу данных от сервера к клиенту через открытое соединение. Это альтернатива WebSocket'ам, когда клиенту нужно просто "слушать" события от сервера.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥18👍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
🔥14👍2💊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
👍10🤔1
- string
- number
- bigint
- boolean
- undefined
- null
- symbol
Они не являются объектами и имеют иммутабельную природу.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12🔥2🤔1
MobX — это библиотека для управления состоянием в JavaScript-приложениях, особенно в React. Она основана на реактивности и позволяет автоматически отслеживать изменения данных, обновляя интерфейс только там, где это необходимо.
MobX делает объекты реактивными, автоматически отслеживая их изменения.
import { makeAutoObservable } from "mobx";
class Store {
count = 0;
constructor() {
makeAutoObservable(this); // Автоматически делает свойства "наблюдаемыми"
}
increment() {
this.count++;
}
}
const store = new Store();Это методы, которые изменяют состояние.
store.increment(); // Увеличит count и автоматически обновит UI
Чтобы React-компонент обновлялся при изменении данных, его нужно обернуть в
observer (из mobx-react-lite). import React from "react";
import { observer } from "mobx-react-lite";
const Counter = observer(({ store }) => (
<div>
<p>Счетчик: {store.count}</p>
<button onClick={() => store.increment()}>+</button>
</div>
));
export default Counter;
Это вычисляемые значения, которые пересчитываются только при изменении зависимостей.
class Store {
count = 2;
constructor() {
makeAutoObservable(this);
}
get double() {
return this.count * 2;
}
}
const store = new Store();
console.log(store.double); // 4
store.count = 5;
console.log(store.double); // 10 (пересчиталось автоматически)Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
2. По значению: необходимо пройти по ключам объектов и сравнить их значения вручную или с помощью библиотек, например Lodash.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10
Это структура данных, которая представляет собой упорядоченный список элементов. В JavaScript массивы могут содержать любые типы данных: числа, строки, объекты, другие массивы и даже функции.
Массивы помогают удобно хранить и обрабатывать наборы данных. Вместо того чтобы создавать множество переменных, можно использовать массив, чтобы хранить сразу несколько значений и работать с ними с помощью специальных методов.
Массивы позволяют:
Хранить несколько значений в одной переменной
Перебирать элементы с помощью циклов
Добавлять, удалять, изменять элементы
Выполнять операции, например, сортировку и фильтрацию
В JavaScript массив можно создать разными способами:
С использованием литерала массива
let fruits = ["яблоко", "банан", "апельсин"];
С использованием конструктора
Array let numbers = new Array(1, 2, 3, 4, 5);
Доступ к элементу массива осуществляется по индексу (начинается с 0):
let fruits = ["яблоко", "банан", "апельсин"];
console.log(fruits[0]); // "яблоко"
console.log(fruits[1]); // "банан"
Добавление элемента в конец
push() let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]
Удаление последнего элемента
pop() arr.pop();
console.log(arr); // [1, 2, 3]
Добавление элемента в начало
unshift() arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]
Удаление первого элемента
shift() arr.shift();
console.log(arr); // [1, 2, 3]
Перебор массива
forEach() arr.forEach(item => console.log(item));
Фильтрация элементов
filter() let evenNumbers = arr.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2]
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
Телепорт позволяет отрисовать элемент не внутри текущего компонента, а в другом месте DOM. Например, ты можешь открыть модальное окно или dropdown не внутри своей вложенной структуры, а сразу в body. Это решает проблемы с позиционированием и z-index — особенно для всплывающих элементов, которые не должны быть ограничены стилями родителя.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3🔥1