progway — программирование, IT
Как менять состояние вкладки по интервалу Полезная фича для демонстрации, например, уведомлений, которая может пригодиться на очень большом количестве сайтов Для реализации нам необходимо создать состояния, между которыми мы хотим перемещаться: const states…
This media is not supported in your browser
VIEW IN TELEGRAM
Примерно вот так это может в итоге выглядеть
Как определить, активна ли вкладка у пользователя?
Если вам нужно узнать, активна ли вкладка в браузере у пользователя, существует несколько простых методов для этого
Во-первых, у объекта
Это может быть полезно для определения состояния в моменте, хотя пригождается достаточно редко
Чаще всего используется второй способ, а именно отслеживание события
Тут мы отслеживанием фокус вкладки и выполняем какие-то действия на уже при изменении состояния. Особенно полезен такой способ будет где нибудь в React и прочих либах
Зачем это можно использовать? Да абсолютное множество применений:
— дополнительно сохранять данные на закрытие вкладки
— выключать аудио/видео при скрытии вкладки
— сбор аналитики
— и куча всего ещё
Спасибо за прочтение, это важно для меня ❤️
@prog_way_blog — чат — #code #web #theory #javascript
Если вам нужно узнать, активна ли вкладка в браузере у пользователя, существует несколько простых методов для этого
Во-первых, у объекта
document есть свойство hidden, которое указывает открыта ли вкладка на экране пользователя в конкретный момент времени:// если true, значит вкладка работает в фоне
document.hidden // true
// вкладка открыта на весь экран
document.hidden // false
Это может быть полезно для определения состояния в моменте, хотя пригождается достаточно редко
Чаще всего используется второй способ, а именно отслеживание события
visibilitychange:document.addEventListener("visibilitychange", function() {
if (document.hidden) {
console.log("Вкладка неактивна")
} else {
console.log("Вкладка активна")
}
})Тут мы отслеживанием фокус вкладки и выполняем какие-то действия на уже при изменении состояния. Особенно полезен такой способ будет где нибудь в React и прочих либах
Зачем это можно использовать? Да абсолютное множество применений:
— дополнительно сохранять данные на закрытие вкладки
— выключать аудио/видео при скрытии вкладки
— сбор аналитики
— и куча всего ещё
Спасибо за прочтение, это важно для меня ❤️
@prog_way_blog — чат — #code #web #theory #javascript
progway — программирование, IT
Ещё один пример
Бывает такое, что нужно встроить в строку значение, которое может быть пустым. Обычно пишутся доп. проверки:
Можно решить эту же задачу с помощью функции из поста выше, вот так это будет:
Просто вернем
Ну типа костыль. А вроде и нет. Просто ещё один пример посмотреть как это можно применить
@prog_way_blog — чат — #javascript #code
Бывает такое, что нужно встроить в строку значение, которое может быть пустым. Обычно пишутся доп. проверки:
const order = {
city: "Москва" // представим, что возможно undefined или null
}
const { city } = order
// могут писать что-то типа такой проверки
city ? `Ваш город: ${city}` : nullМожно решить эту же задачу с помощью функции из поста выше, вот так это будет:
type SubstitutionPrimitive = string | number | boolean | undefined | null;
const isNullOrUndefined = (value: SubstitutionPrimitive): value is undefined | null => {
return value === undefined || value === null;
};
const safePaste = (strings: TemplateStringsArray, ...substitutions: SubstitutionPrimitive[]) => {
let result = strings[0];
for (let index = 0; index < substitutions.length; index++) {
const value = substitutions[index];
if (isNullOrUndefined(value)) return null;
result += value + strings[index + 1];
}
return result;
};
Просто вернем
null вместо строки, если какое либо из значений в подстановках null или undefined. Вот так это будет вызываться:const apple = {
name: 'Яблоко',
};
const orange = {};
safePaste`Товар: "${apple?.name}"`;
// Товар: "Яблоко"
safePaste`Товар: "${orange?.name}"`;
// nullНу типа костыль. А вроде и нет. Просто ещё один пример посмотреть как это можно применить
@prog_way_blog — чат — #javascript #code
progway — программирование, IT
Please open Telegram to view this post
VIEW IN TELEGRAM
Набор каналов об IT
В телеге есть функция зашарить сразу целую папку с каналами, хочу поделиться с вами одной такой:
🔘 Каналы о пересечении профессии, жизни, разных увлечений
🔘 Фронтенд, мобильная разработка, ИИ модельки и другие сферы
🔘 Новости, экспертный контент и блоги
Добавляйте папку к себе, каналов много, каждый точно найдёт что-то для себя
Добавить папку можно по ссылке
@prog_way_blog — чат
В телеге есть функция зашарить сразу целую папку с каналами, хочу поделиться с вами одной такой:
Добавляйте папку к себе, каналов много, каждый точно найдёт что-то для себя
Добавить папку можно по ссылке
@prog_way_blog — чат
Please open Telegram to view this post
VIEW IN TELEGRAM
Флоу рендеринга компонента в React
Небольшая шпаргалка, которая содержит в себе очередь вызова эффектов при маунте и апдейте компонента.
➡️ При маунте порядок следующий:
1. Рендер на основе изначальных значений состояний
2.
3. Создание DOM
4. Прикрепление ссылок на ноды (ref)
5.
6.
➡️ При апдейте компонента:
1. Рендер на основе новых значений состояний
2. Обновление DOM
3.
4. Прикрепление ссылок на ноды (ref)
5.
6.
📎 Решил вынести её в канал, потому что сам прям недавно сталкивался с этим на рабочем проекте и подумал, что это тоже кому-то может быть полезно
Ну и не реклама, а реально рекомендация — на эту тему хочу поделиться видео Аюба Бегимкулова о нестандартном применении useInsertionEffect. Там он более подробно рассказывает почему порядок именно такой и в целом чуть более подробно раскрывает тему рендера с примерами в коде
Спасибо за прочтение, это важно для меня❤️
@prog_way_blog — чат — #web #theory #react
Небольшая шпаргалка, которая содержит в себе очередь вызова эффектов при маунте и апдейте компонента.
1. Рендер на основе изначальных значений состояний
2.
useInsertionEffect3. Создание DOM
4. Прикрепление ссылок на ноды (ref)
5.
useLayoutEffect6.
useEffect1. Рендер на основе новых значений состояний
2. Обновление DOM
3.
useInsertionEffect4. Прикрепление ссылок на ноды (ref)
5.
useLayoutEffect6.
useEffectНу и не реклама, а реально рекомендация — на эту тему хочу поделиться видео Аюба Бегимкулова о нестандартном применении useInsertionEffect. Там он более подробно рассказывает почему порядок именно такой и в целом чуть более подробно раскрывает тему рендера с примерами в коде
Спасибо за прочтение, это важно для меня
@prog_way_blog — чат — #web #theory #react
Please open Telegram to view this post
VIEW IN TELEGRAM
Ну, верим
@prog_way_blog — #news
Please open Telegram to view this post
VIEW IN TELEGRAM
react.dev
React v19 – React
The library for web and native user interfaces
Модно нынче подводить итоги года и мне стало интересно подбить итоги для канала
Меня эта статистика приятно удивляет, я даже не задумывался что могут получиться такие большие цифры
За этот год я сделал очень много для канала: много что изучил, проводил интерактивы, старался стабильно и по графику выпускать посты, пусть и не всегда успешно. Покупал рекламу, пытался продавать её сам, в чём, кстати, сильно разочаровался
За год в канале вышло 14 по настоящему рекламных постов, в основном, с рекламой каких-то ИМХО адекватных каналов, что ещё куда ни шло, но в основном в предложку летит полный шлак, а продавать места в канале за смешные деньги очень уж впадлу
Поэтому в новом году я желал бы себе монетизировать канал этичным для себя способом, а каждому из вас я желаю получать ещё больше удовольствия от работы и жизни в целом, покорить новые вершины и исполнить все свои желания. Желаю каждому успехов, не только в карьере, новых ярких эмоций и идей
Хочу сказать каждому читающему спасибо за этот год вместе. Спасибо за то время, что вы на эту писанину тратите
Не зря в каждом посте я говорю спасибо за прочтение. Это важно для меня
С канала я ничего кроме вашего прочтения, реакций и комментариев и не получаю
@prog_way_blog — #blog
Please open Telegram to view this post
VIEW IN TELEGRAM