True Frontender
1.02K subscribers
143 photos
7 videos
89 links
Сборная солянка про фронтенд.

JavaScript, React, TypeScript, HTML, CSS — здесь обсуждаем всё, что связано с веб-разработкой!

Связь: @pmowq
Download Telegram
Разбор задачи с собеседования: Реализация Promise.allSettled

В одном из наших прошлых постов(тык) мы разбирали реализацию Promise.all. Продолжая тему асинхронного программирования, на этот раз мы сосредоточимся на Promise.allSettled - еще одном ключевом методе для управления промисами в JavaScript. Эта задача на собеседовании проверяет умение кандидата работать с асинхронными операциями и его способность создавать комплексные решения.

Что такое Promise.allSettled
Promise.allSettled - это метод, который принимает массив промисов и возвращает промис, который разрешается после завершения всех промисов в массиве. В отличие от Promise.all, который отклоняется при первом же отклоненном промисе в массиве, Promise.allSettled предоставляет результат каждого промиса, независимо от его состояния.

Задача
Написать функцию promiseAllSettled, имитирующую поведение Promise.allSettled.
Функция должна:
1. Возвращать промис.
2. Разрешаться с массивом результатов всех промисов, независимо от их состояния.
3. Каждый результат в массиве должен быть объектом с полями status и value (для выполненных промисов) или status и reason (для отклоненных промисов).

Реализация promiseAllSettled

function promiseAllSettled(promises) {
return new Promise(resolve => {
const results = new Array(promises.length).fill(null);
let completed = 0;
promises.forEach((promise, index) => {
Promise.resolve(promise)
.then(value => {
results[index] = { status: 'fulfilled', value };
})
.catch(reason => {
results[index] = { status: 'rejected', reason };
})
.finally(() => {
completed++;
if (completed === promises.length) {
resolve(results);
}
});
});
});
}


Объяснение реализации
1. Функция promiseAllSettled принимает массив промисов promises.
2. Создается массив results для хранения результатов каждого промиса.
3. Каждый промис в массиве обрабатывается с помощью Promise.resolve, чтобы поддержать как промисы, так и не-промисные значения.
4. Для каждого промиса результат (успешное выполнение или отклонение) записывается в results.
5. После обработки всех промисов функция возвращает промис, разрешенный с массивом результатов.

Заключение
Реализация promiseAllSettled демонстрирует продвинутое понимание промисов в JavaScript и предоставляет мощный инструмент для обработки нескольких асинхронных операций. Это типичный вопрос на собеседованиях, который позволяет оценить умение кандидата работать с асинхронным кодом и его способность решать сложные задачи.

#interview #javascript
👍7🔥41
useImperativeHandle в React: хук, о котором Вы, возможно, не знали

Если вы работаете с React, вероятно, вы использовали множество различных хуков. Но есть один хук, о котором многие разработчики даже не слышали, не говоря уже о его использовании - useImperativeHandle. Этот хук часто остается в тени более популярных хуков, но он может быть неоценимым инструментом в определенных сценариях, особенно когда требуется более тонкое управление взаимодействиями между родительскими и дочерними компонентами.

Как работает useImperativeHandle
useImperativeHandle обычно используется в сочетании с forwardRef и позволяет родительскому компоненту вызывать специфические функции дочернего компонента. Это может быть полезно для управления фокусом, триггеринга анимаций или других действий, которые должны быть инициированы родительским компонентом, но выполнены дочерним.

Пример использования
Давайте рассмотрим пример, где у нас есть TextInput, и мы хотим, чтобы родительский компонент мог вызывать его метод focus.

import React, { useRef, useImperativeHandle } from 'react';

const TextInput = React.forwardRef((props, ref) => {
const inputRef = useRef();

useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));

return <input ref={inputRef} type="text" />;
});

function ParentComponent() {
const textInputRef = useRef();

const focusTextInput = () => {
textInputRef.current.focus();
};

return (
<>
<TextInput ref={textInputRef} />
<button onClick={focusTextInput}>Focus on Input</button>
</>
);
}


В этом примере useImperativeHandle используется для предоставления родительскому компоненту метода focus, позволяя управлять фокусом текстового поля.

Заключение
useImperativeHandle в React может оказаться необходимым в определенных сценариях, особенно когда требуется более тонкое управление поведением дочерних компонентов. Его использование должно быть оправданным и целенаправленным, так как чрезмерное увлечение императивными подходами может привести к усложнению архитектуры и уменьшению гибкости компонентов.

#react
👍9🔥3👨‍💻21
Generic Types в TypeScript

Дженерики в TypeScript - это мощный инструмент, позволяющий создавать универсальные, но при этом типобезопасные функции, классы и интерфейсы. Они обеспечивают гибкость при работе с различными типами данных, сохраняя строгую типизацию.

Что такое дженерики?
Дженерики позволяют определить компоненты, способные работать с разными типами, без уточнения конкретных типов данных до момента использования этих компонентов. Это обеспечивает большую гибкость и повторное использование кода.

Преимущества:
- Дженерики в TypeScript обеспечивают гибкость, позволяя создавать компоненты, которые могут работать с различными типами данных.
- Использование дженериков способствует повторному использованию кода, уменьшая необходимость в дублировании за счет универсальных шаблонов для разных типов.
- Они гарантируют типобезопасность, обеспечивая строгую проверку типов на этапе компиляции и уменьшая риск ошибок во время выполнения программы.

Заключение
Дженерики в TypeScript открывают новые возможности для создания гибких и типобезопасных решений. Они облегчают разработку универсальных компонентов, что особенно полезно в больших и сложных проектах. Правильное использование дженериков может значительно улучшить качество кода, сделать его более читаемым и удобным для поддержки.

#typescript
👍7🔥31
Глубокое копирование в JavaScript: Использование structuredClone

В JavaScript, глубокое копирование объектов и массивов является часто встречаемой задачей. С появлением функции structuredClone, эта задача стала решаться значительно проще и эффективнее.

Что такое structuredClone?
structuredClone - это новый стандартный метод JavaScript, предназначенный для создания глубоких копий объектов. Он может копировать более сложные структуры данных, чем JSON.parse(JSON.stringify()), и поддерживает большее количество типов данных.

Пример использования structuredClone:

const original = {
a: 1,
b: { c: 2, d: new Date() },
e: new Set([1, 2, 3])
};

const deepCopy = structuredClone(original);

deepCopy.b.c = 20;
console.log(original.b.c); // Выведет 2, не 20


В этом примере structuredClone успешно копирует весь объект, включая вложенные объекты и структуры данных, такие как Date и Set.

Преимущества structuredClone:
- Может копировать множество различных типов данных, включая те, которые не поддерживаются JSON.parse(JSON.stringify()).
- Обычно работает быстрее, чем ручные или рекурсивные методы глубокого копирования.
- Поскольку это встроенная функция, она обеспечивает более надежное и безопасное копирование.

Ограничения structuredClone:
- Не может клонировать функции и некоторые другие типы объектов, такие как Error объекты или DOM узлы.
- Может не поддерживаться во всех средах выполнения JavaScript (например, в старых версиях браузеров).

Заключение
structuredClone представляет собой мощный инструмент для выполнения глубокого копирования в JavaScript, предлагая улучшенную поддержку типов данных и лучшую производительность по сравнению с традиционными методами. Это делает его идеальным выбором для работы со сложными или большими структурами данных в современной разработке.

#javascript
👍81🆒1
Темная и светлая темы: использование prefers-color-scheme в CSS

Адаптация веб-сайтов к пользовательским предпочтениям, включая выбор между светлой и темной темами, становится ключевым аспектом современного веб-дизайна. CSS медиа-запрос prefers-color-scheme позволяет автоматически адаптировать стили веб-страницы к выбранной пользователем теме. В этом посте мы рассмотрим, как использовать и тестировать prefers-color-scheme.

Как использовать prefers-color-scheme в стилях:

body {
background-color: white;
color: black;
}

@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}

В этом примере кода определяются основные стили, а затем альтернативные стили для темной темы.

Лучшие практики
- Обеспечьте достаточный контраст между текстом и фоном в обеих темах для лучшей читаемости и доступности.
- Подумайте об использовании разных изображений для светлой и темной тем, если это необходимо для сохранения визуального качества.
- Тестируйте ваш сайт в обеих темах для гарантии оптимального визуального опыта и удобства пользователя.

Тестирование тем в Chrome
Для тестирования разных тем на вашем сайте в Chrome можно принудительно установить значение prefers-color-scheme как light или dark:
1. Откройте DevTools, нажав F12.
2. Нажмите shift+cmd+p (на MacOS) или shift+ctrl+p (на Windows/Linux) для открытия командной строки.
3. Введите "prefers" в командную строку.
4. Выберите опцию "Emulate CSS prefers-color-scheme: dark" или "Emulate CSS prefers-color-scheme: light" для имитации выбора темной или светлой темы.

Этот метод позволяет легко и быстро проверить, как ваш сайт выглядит и функционирует в разных темах, не меняя системные настройки.

Заключение
Адаптивность веб-сайтов к предпочтениям пользователя по теме интерфейса улучшает общий пользовательский опыт и доступность сайта. Использование prefers-color-scheme в CSS поможет вам создать веб-страницы, которые выглядят отлично в любой цветовой схеме, и уважают выбор пользователя.

#css
👍4👨‍💻21
🎄 С наступающим Новым Годом, дорогие подписчики! 🎄

Наступающий Новый Год – это время новых возможностей и начинаний. Желаю вам, чтобы 2024 год был полон вдохновения, творчества и профессиональных успехов.

🌟 Пусть он принесет вам новые интересные проекты, креативные идеи и множество возможностей для роста и развития. Желаю, чтобы каждый ваш проект был успешным, а работа приносила удовольствие.

🤝 Благодарю вас за поддержку моего канала. Ваш интерес и участие делают наше сообщество особенным. Я ценю каждого из вас и с нетерпением жду продолжения нашего общения в новом году.

📅 Обратите внимание, что в новом году я начну публикацию новых постов с 4 января. Уже готовлю для вас новые посты!

🎆 Желаю вам волшебного Нового Года, наполненного счастьем, здоровьем и успехами во всех начинаниях. До встречи в 2024 году!
Please open Telegram to view this post
VIEW IN TELEGRAM
1444
Адаптация приложений к уровню заряда батареи с помощью Battery Status API

В современном мире, где многие из нас зависят от мобильных устройств, управление энергопотреблением становится достаточно важным аспектом в разработке. Battery Status API открывает перед разработчиками возможности для адаптации приложений в зависимости от уровня заряда батареи устройства. Давайте рассмотрим, как этот API может быть использован.

Что такое Battery Status API?
Battery Status API - это веб-API, предоставляющее данные о заряде батареи устройства, будь то мобильный телефон или ноутбук. Он сообщает о проценте заряда батареи, её состоянии зарядки и предполагаемом времени до полной разрядки или зарядки.

Пример использования Battery Status API:

navigator.getBattery().then(battery => {
console.log(`Уровень заряда батареи: ${battery.level * 100}%`);
console.log(`Зарядка в процессе: ${battery.charging ? 'да' : 'нет'}`);

battery.addEventListener('chargingchange', () => {
console.log(`Изменение состояния зарядки: ${battery.charging ? 'да' : 'нет'}`);
});

battery.addEventListener('levelchange', () => {
console.log(`Изменение уровня заряда: ${battery.level * 100}%`);
});
});

Этот код демонстрирует, как можно отслеживать состояние батареи и реагировать на изменения.

Что возвращает метод getBattery:
Метод getBattery() возвращает Promise, который при успешном выполнении разрешается в объект BatteryManager. Объект BatteryManager предоставляет доступ к информации о состоянии батареи и различные события, связанные с ней.

Ключевые свойства, которые предоставляет BatteryManager:
- Уровень заряда батареи level представлен числом от 0.0 до 1.0, что показывает процент заряда от полностью разряженной до полностью заряженной батареи.
- Значение charging указывает, заряжается ли устройство в данный момент, где true означает, что устройство заряжается, а false - что нет.
- Время до полной зарядки батареи chargingTime выражается в секундах и возвращает Infinity, если устройство не заряжается или уже полностью заряжено.
- Время до полной разрядки батареи dischargingTime также выражается в секундах и возвращает Infinity в случае зарядки батареи.

Как использовать в веб-приложениях
1. Адаптация функциональности приложения при низком уровне заряда батареи, такая как сокращение частоты обновлений или отключение ресурсоемких анимаций.
2. Информирование пользователя о низком уровне заряда с предложением сохранить важные данные или подключить устройство к зарядке.
3. Оптимизация работы приложения для уменьшения энергопотребления и увеличения времени работы устройства.

Заключение
Использование Battery Status API делает приложения умнее и энергоэффективнее. Это помогает разработчикам создавать решения, которые не только отвечают на текущие потребности пользователей, но и экономят заряд их устройств.

#webapi #javascript
👍7🔥51
Разбор задачи с собеседования: Реализация Promise.race

На собеседованиях разработчиков часто просят показать свое понимание асинхронного программирования, предложив написать собственную версию стандартных функций. Одна из таких интересных задач - реализация метода Promise.race.

Что такое Promise.race
Promise.race - это метод, который принимает массив промисов и возвращает новый промис, который разрешается или отклоняется, как только первый промис в массиве разрешается или отклоняется. Он возвращает результат или ошибку этого первого промиса.

Задача
Написать функцию promiseRace, ведущую себя аналогично Promise.race.
Функция должна:
1. Возвращать промис.
2. Разрешаться или отклоняться с результатом или ошибкой первого завершенного промиса из массива.

Реализация promiseRace

function promiseRace(promises) {
return new Promise((resolve, reject) => {
if (!Array.isArray(promises)) {
return reject(new TypeError('Аргумент должен быть массивом'));
}

for (const promise of promises) {
Promise.resolve(promise)
.then(resolve)
.catch(reject);
}
});
}


Объяснение реализации:
1. Функция promiseRace принимает массив промисов promises.
2. Если promises не является массивом, функция отклоняется с TypeError.
3. Используется цикл for...of для перебора всех промисов.
4. Каждый промис оборачивается в Promise.resolve для поддержки как промисов, так и обычных значений.
4. resolve и reject передаются непосредственно в .then() и .catch() каждого промиса.
5. Как только любой промис из массива завершается, возвращается его результат или ошибка.

Заключение
Умение реализовать Promise.race показывает понимание работы промисов и асинхронного программирования в JavaScript. Это популярный вопрос на собеседованиях, который проверяет способность кандидата эффективно работать с асинхронным кодом.

#interview #javascript
👍8🔥41
Паттерн Singleton в JavaScript

Ранее мы обсуждали различные шаблоны проектирования, и сегодня я хочу поговорить о одном из них: паттерне Синглтон. Этот шаблон чрезвычайно полезен в определенных ситуациях, и его понимание может значительно улучшить вашу архитектуру кода.

Что такое Синглтон?
Синглтон - это шаблон проектирования, который обеспечивает создание только одного экземпляра класса. Этот единственный экземпляр затем становится легко доступным в глобальном масштабе. Чрезвычайно полезен в сценариях, где требуется централизованное управление ресурсами или информацией.

Пример использования
Прекрасный пример использования синглтона - система аналитики в приложении. Такая система должна быть единственной, чтобы эффективно собирать и обрабатывать данные без избыточности или конфликтов

Реализация Синглтона для аналитики:

class Analytics {
constructor() {
if (Analytics.instance) {
return Analytics.instance;
}
Analytics.instance = this;
this.eventLog = [];
}

logEvent(event) {
this.eventLog.push(event);
console.log('Logged:', event);
}

// Другие методы аналитики
}

// Использование
const analytics = new Analytics();
analytics.logEvent('UserLoggedIn');

const anotherAnalytics = new Analytics();
anotherAnalytics.logEvent('PageViewed');

console.log(analytics === anotherAnalytics); // true
console.log(analytics.eventLog); // ['UserLoggedIn', 'PageViewed']


Объяснение Реализации
В классе Analytics проверяется, существует ли уже экземпляр.
Если экземпляр существует, он возвращается, иначе создается новый.
Метод logEvent демонстрирует добавление событий в общий лог.

Заключение
Паттерн синглтон идеален для создания уникальных объектов, где необходима единственность и глобальный доступ. Он позволяет избежать дублирования и обеспечивает централизованное управление, что особенно важно в системах аналитики.

#javascript #patterns
👍10👏31
Погружение в Big O Notation

В программировании часто возникают вопросы о производительности и оптимизации кода. Один из ключевых инструментов, помогающих понять и оценить эффективность алгоритмов, - это Big O Notation. Сегодня мы разберем, что это такое и почему каждому разработчику важно это знать.

Что такое Big O Notation?
Big O Notation - это математическая нотация, используемая для описания сложности алгоритма. Она помогает оценить, как изменяется время выполнения или занимаемый объем памяти в зависимости от размера входных данных. В Big O акцентируется внимание на худшем сценарии выполнения алгоритма.

Почему это важно?
Понимание Big O помогает разработчикам:
1. Предсказывать производительность алгоритмов.
2. Определять потенциальные узкие места в коде.
3. Выбирать наиболее эффективные алгоритмы и структуры данных для конкретной задачи.

Примеры big O
- O(1) представляет константную сложность, где время выполнения остается неизменным независимо от размера входных данных. Пример - доступ к элементу массива по индексу.
- O(n) отражает линейную сложность, при которой время выполнения растет пропорционально размеру входных данных. Пример - линейный поиск в массиве.
- O(n²) означает квадратичную сложность, когда время выполнения увеличивается пропорционально квадрату размера входных данных. Типичный пример - двойной цикл для перебора элементов матрицы.
- O(log n) соответствует логарифмической сложности, при которой время выполнения увеличивается логарифмически с увеличением размера входных данных. Пример - бинарный поиск.
- O(n log n) представляет линейно-логарифмическую сложность, часто встречающуюся в алгоритмах сортировки, таких как быстрая сортировка. Время выполнения увеличивается не так стремительно, как в квадратичных или экспоненциальных алгоритмах.
- O(2^n) соответствует экспоненциальной сложности, где время выполнения растет очень быстро с увеличением размера входных данных. Примеры - рекурсивные вычисления, такие как вычисление чисел Фибоначчи.
- O(n!) относится к факториальной сложности, одной из самых высоких форм сложности. Пример - задача коммивояжера, где количество возможных путей растет факториально с увеличением числа точек маршрута.

Заключение
Big O Notation является фундаментальным инструментом в арсенале каждого разработчика. Она не только помогает лучше понимать алгоритмы, но и способствует написанию более эффективного и оптимизированного кода. В будущих постах мы более детально разберем каждую из этих сложностей и их применение на практике.

#algorithm #optimization
👍105🤯2👏1
HTML элемент dialog для создания модальных окон

В этой статье мы разберемся с HTML элементом dialog, который играет важную роль в создании модальных окон. Этот элемент является мощным инструментом в арсенале разработчиков, позволяющим упростить реализацию модальных окон без сложного JavaScript или CSS.

-> Читать статью

#javascript #html
👍134👨‍💻2
Всем привет! В этом посте хочу рассмотреть способы общения между окнами. Общение между разными окнами или вкладками браузера представляет собой важный элемент в создании интерактивных приложений.

Что такое общение между окнами?
Это процесс взаимодействия между страницами, находящимися в разных окнах или вкладках. Такое общение необходимо для различных задач, например, для аутентификации пользователей, обмена информацией и синхронизации данных.

Методы общения между окнами:
1. Метод postMessage позволяет окнам безопасно обмениваться данными. Это один из самых безопасных способов общения, поскольку он позволяет избежать проблем, связанных с кросс-доменными запросами. Всегда проверяйте источник (origin) и содержимое сообщений.

// В дочернем окне:
window.opener.postMessage('Привет от дочернего окна!', 'https://telegram.org');

// В родительском окне:
window.addEventListener('message', (event) => {
if (event.origin !== 'https://telegram.org') return;
console.log('Сообщение от дочернего окна: ', event.data);
});


2. Изменения в localStorage одного окна могут быть отслежены в другом окне через события storage.

// В одной вкладке:
localStorage.setItem('data', 'Некоторые данные');

// В другой вкладке:
window.addEventListener('storage', (event) => {
if (event.key === 'data') {
console.log('Обновленные данные: ', event.newValue);
}
});


3. BroadcastChannel позволяет разным контекстам браузера, включая вкладки и iframe, обмениваться сообщениями. Хочу отметить, что поддержка BroadcastChannel может варьироваться в разных браузерах.

// В одной вкладке:
const channel = new BroadcastChannel('channel_name');
channel.postMessage('Привет от вкладки 1!');

// В другой вкладке:
const channel = new BroadcastChannel('channel_name');
channel.onmessage = (event) => {
console.log('Получено сообщение: ', event.data);
};


4. SharedWorker используется для создания общего контекста, который может быть доступен для нескольких скриптов, даже работающих в разных окнах. Его поддержка браузерами ограничена.

// Воркер (shared-worker.js):
onconnect = function(e) {
const port = e.ports[0];
port.onmessage = function(event) {
port.postMessage('Получено: ' + event.data);
};
};

// В главном скрипте:
const worker = new SharedWorker('shared-worker.js');
worker.port.start();
worker.port.postMessage('Сообщение в SharedWorker');
worker.port.onmessage = function(event) {
console.log('Ответ от SharedWorker: ', event.data);
};


Заключение
Межоконное общение значительно расширяет возможности, позволяя создавать более многофункциональные и динамичные приложения. Применение выше описанных методов, открывает новые возможности в управлении взаимодействиями между окнами и вкладками.

#javascript
👍10🔥43
Добрый вечер! 👋

Надеюсь, вы отлично отдохнули за эти выходные. Как и у многих из нас, к сожалению, мои выходные тоже подошли к концу 😔 Я старался насладиться этим временем по максимуму и уделить достаточно внимания моим кошкам - надеюсь, это запасло их лаской на какое-то время 🤗
Сегодня, в первый рабочий день, я особо ничего не делал. Просто плавно вкатывался в работу после длительного перерыва. Верю, что вкатывание пройдет гладко, а то уже немного отвык от работы) Надеюсь, что в этом году мой канал будет полезным для вас, вне зависимости от того, находитесь ли вы в поиске работы или уже работаете 🫰

А как прошли ваши выходные и рабочий день? Были ли у вас какие-то интересные задачи, или вы пока тоже привыкаете? Делитесь своими историями в комментариях, мне будет интересно почитать, или просто ставьте 🙂
Please open Telegram to view this post
VIEW IN TELEGRAM
12🔥32
Привет! Сегодня я хочу вместе с вами поглубже погрузиться в изучение DOM. Это понятие встречается на каждом шагу нашей работы и играет важную роль в подготовке к собеседованиям.

Что такое DOM?
DOM (Document Object Model) представляет собой структуру, которая отображает HTML-документ как иерархическое дерево узлов. Каждый элемент страницы, будь то тег, текст или атрибут, становится узлом в этом дереве. Эта структура позволяет JavaScript коду взаимодействовать с элементами страницы - читать их, изменять, добавлять или удалять.
Когда браузер загружает страницу, он создает DOM и сохраняет его в переменной document, после чего генерирует событие DOMContentLoaded, сигнализируя о том, что DOM полностью построен и готов к манипуляциям. Именно с переменной document начинается вся работа JavaScript с HTML-разметкой страницы, позволяя управлять содержимым и структурой страницы.

Особенности работы с DOM в JavaScript
- DOM представляет HTML-документ в виде дерева узлов, где каждый узел является частью веб-страницы.
- Через JavaScript можно изменять элементы DOM, добавляя или удаляя узлы, изменяя стили и атрибуты.
- События в DOM позволяют отслеживать действия пользователя на странице, такие как клики мыши и нажатия клавиш, для создания интерактивных интерфейсов.

Важные аспекты DOM:
1. Автоисправление позволяет браузерам исправлять ошибки в HTML-коде в процессе построения DOM, обеспечивая корректное отображение страницы.
2. Влияние на производительность может быть значительным при частых манипуляциях с DOM. Оптимизация таких операций помогает улучшить скорость и отзывчивость веб-приложений.
3. Кроссбраузерная совместимость играет важную роль, так как разные браузеры могут по-разному интерпретировать DOM. Тестирование в различных браузерах обеспечивает стабильность работы веб-приложений.
4. Безопасность в работе с DOM особенно важна при обработке пользовательских данных для защиты от XSS-атак.
5. Доступность должна быть учтена при взаимодействии с DOM, чтобы веб-страницы были удобны для всех пользователей, включая тех, кто использует вспомогательные технологии.

Заключение
Владение навыками работы с DOM в JavaScript открывает широкие возможности для создания интерактивных страниц.

#html #javascript #interview
👍7🔥42
Какое событие указывает на то, что DOM полностью построен и готов к взаимодействию с JavaScript?
Anonymous Quiz
13%
onload
13%
ready
71%
DOMContentLoaded
3%
load
👍9👨‍💻4👾21
Всем ✌️! Сегодня я хочу поделиться с вами своими мыслями о !important в CSS, этой маленькой, но мощной детали, которая часто становится предметом горячих дебатов.

Что такое !important?
!important - это декларация, которая может быть добавлена к стилю, чтобы повысить его приоритет над другими объявлениями. Например:

p {
color: blue !important;
}

В этом случае, независимо от других селекторов или стилей, примененных к элементу <p>, цвет текста будет синим.

Когда использование !important оправдано
- Переопределение стилей сторонних библиотек или фреймворков иногда требует применения !important.
- В специфических случаях, когда необходимо гарантировать применение определенного стиля, !important может быть полезным.

Возможные проблемы при использовании !important
- Сложность поддержки кода увеличивается из-за усложнения стилевой логики.
- Конфликты стилей могут возникать из-за высокого приоритета стилей с !important.
- Отладка и тестирование стилей усложняются при наличии множества правил с !important.

Рекомендации по использованию !important
- Используйте !important только как крайнюю меру.
- Постарайтесь писать чистый и структурированный код, избегая необходимости в !important.
- Документируйте случаи использования !important, чтобы облегчить понимание и поддержку кода в будущем.

Заключение
!important это мощный инструмент, но его использование должно быть обоснованным и ограниченным. Осознанное применение !important поможет избежать многих проблем, связанных с поддержкой и масштабированием ваших проектов.

#css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1153
Привет! Сегодня хочу разобрать пользовательские события в JavaScript. Узнаем как эти события работают и как мы можем их использовать.

Что такое пользовательское событие?
Пользовательское событие - это событие, которое определено разработчиком, в отличие от стандартных событий, таких как click, mouseover и т.д. Это позволяет создавать более сложные и специфические сценарии взаимодействия в приложении.

Как создать пользовательское событие?
1. Использование конструктора Event. Это базовый способ создания пользовательских событий.
const event = new Event('customEvent', {
bubbles: true, // Событие всплывает
cancelable: true // Событие можно отменить
});

// Добавление слушателя для события
document.addEventListener('customEvent', function(e) {
console.log('Пользовательское событие активировано');
});

// Инициирование события
document.dispatchEvent(event);


2. Использование конструктора CustomEvent. CustomEvent - это расширение Event, которое позволяет передавать дополнительные данные с событием.
const customEvent = new CustomEvent('customEvent', {
detail: { message: 'Привет от CustomEvent' },
bubbles: true,
cancelable: true
});

document.addEventListener('customEvent', function(e) {
console.log('Сообщение: ', e.detail.message);
});

document.dispatchEvent(customEvent);


Применение пользовательских событий
Пользовательские события могут быть использованы для реализации сложных интерактивных функций, таких как синхронизация данных между компонентами, уведомления о изменениях в приложении и т.д.

Заключение
Генерация пользовательских событий предоставляет мощный инструмент для создания интерактивных и динамичных приложений. Это позволяет создавать более сложные и настраиваемые сценарии взаимодействия, улучшая пользовательский опыт и функциональность приложений.

#javascript
👍11🔥72