WebCraft - ремесло веб разработки
6.61K subscribers
1.58K photos
235 videos
2 files
189 links
Интересуешься php , js , css , html , Laravel , Vue ? Этот канал для тебя

Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront
Менеджер по рекламе: @Spiral_Yuri

Купить рекламу: https://telega.in/c/web_craft
Download Telegram
Проверка фокуса на элементе

document.activeElement — это свойство в JavaScript, которое позволяет определить текущий сфокусированный элемент в документе. Его использование позволяет узнать, находится ли определенный элемент в фокусе. Это свойство возвращает элемент, который в данный момент имеет фокус, или null, если ни один элемент не сфокусирован. Важно отметить, что document.activeElement доступно только для чтения, что означает, что нельзя напрямую изменить его значение.

Пример:

let el = document.querySelector('.btn-white');
let isFocus = el === document.activeElement;

console.log(isFocus); // true/false


В этом примере с помощью document.querySelector выбирается элемент с классом .btn-white. Затем, переменная isFocus устанавливается в true, если выбранный элемент el совпадает с текущим сфокусированным элементом document.activeElement, и в false в противном случае. Это позволяет легко определить, сфокусирован ли данный элемент в текущий момент.

👉 @web_craft | #frontend
Создание сервиса для обмена файлами без головной боли.

Статья описывает, как создать сервис для обмена файлами, используя Fly.io и Tigris1. Автор статьи рассказывает о проблемах, связанных с обменом больших файлов между пользователями в разных частях мира, и предлагает решение этой проблемы с помощью глобального хранилища объектов и вычислительных ресурсов, предоставляемых Fly.io и Tigris1.

👉 @web_craft | #frontend
This media is not supported in your browser
VIEW IN TELEGRAM
CSS LEGO Minifigure Maker

Интерактивный редактор LEGO фигурки на CSS.

👉 @web_craft | #frontend
Использование функции Intl.NumberFormat

Для чего используется Intl.NumberFormat в JavaScript?

Если забыли, то вернитесь к посту от 28.05.2024.

👉 @web_craft | #frontend
Отслеживание изменений в DOM

MutationObserver — это API в JS для наблюдения за изменениями в DOM. Оно позволяет отслеживать добавление или удаление узлов, изменения атрибутов и текста.

Пример:
const targetNode = document.getElementById('myDiv');
const config = { attributes: true, childList: true, subtree: true };
const callback = function(mutationsList, observer) {
for(const mutation of mutationsList) {
if (mutation.type === 'childList') {
console.log('A child node has been added or removed.');
}
else if (mutation.type === 'attributes') {
console.log(`The ${mutation.attributeName} attribute was modified.`);
}
}
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);


В этом примере, при любом изменении атрибутов или дочерних элементов внутри myDiv (или его потомков, благодаря опции subtree: true), функция callback будет вызвана и выведет соответствующее сообщение в консоль.

👉 @web_craft | #frontend
Предложение по стандартизации сигналов для TC39

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

👉 @web_craft | #frontend
Работа top-level await

Что позволяет делать top-level await в JavaScript?

Если забыли, то вернитесь к посту от 04.06.2024.

👉 @web_craft | #frontend
Обнаружение статуса соединения

navigator.online — свойство интерфейса Navigator для определения статуса подключения, возвращающее логическое значение: true, если пользователь в сети, и false, если не в сети.

Пример использования:
if (navigator.online) {
console.log('Вы в сети');
} else {
console.log('Вы не в сети');
}


Для реагирования на изменения сетевого состояния можно использовать события online и offline, генерируемые объектом window:
window.addEventListener('online', () => {
console.log('Соединение с сетью восстановлено');
});

window.addEventListener('offline', () => {
console.log('Соединение с сетью потеряно');
});


navigator.online полезен для отслеживания статуса подключения пользователей в реальном времени, таких как мессенджеры или системы совместной работы.

Пример:
navigator.online ? console.log('Пользователь в сети') : console.log('Пользователь не в сети');


👉 @web_craft | #frontend
DOM: что такое объектная модель документа простыми словами

Статья объясняет концепцию DOM, которая представляет структуру веб-страницы в виде дерева объектов. Автор рассматривает, как DOM позволяет скриптам взаимодействовать с HTML-документами, делать их более динамичными и интерактивными. В статье приведены примеры использования методов и свойств DOM для доступа к элементам страницы и их изменения, таких как querySelector, createElement, getElementById, innerHTML, и addEventListener.

👉 @web_craft | #frontend