Вышел релиз БД Сокол (SoQoL)
На сайте SQLize.online версия БД Сокол (SoQoL) обновлена до 3.0.1 - все кто следит за развитием проекта могут ознакомиться с новыми функциями добавленными в этой версии.
Снимок экрана с указанием версии БД Сокол
Web-технологии
458 постов
•
5 752 подписчика
React 19 — useOptimistic
useOptimistic — новый хук, который позволяет отобразить “оптимистичное” состояние. Оно называется “оптимистичным”, потому что мы “оптимистично” надеемся, что наш запрос не свалится с ошибкой и после выполнения запроса состояние будет выглядеть именно так.
❓Как используется
- В useOptimistic передаётся реальное состояние (cart) и функцию-reducer, для обновления оптимистичного состояния
- Компонент (Cart) использует “оптимистичное” состояние (optimisticCart) для рендера
- Перед выполнением запроса обновляется “оптимистичное” состояние
- Когда запрос завершился, нужно обновить реальное состояние
- Как только реальное состояние обновилось, оптимистичное состояние обновится автоматически, так как оно передано в useOptimistic первым параметром. ⚠️ Поэтому важно следить, чтобы приходило одно и то же состояние.
- Если запрос упал с ошибкой, нужно откатить изменения в оптимистичном состояниb.
ℹ️ Первый вопрос, которым я задался, а в чём отличие от обычного setState, путём экспериментов, вот что удалось найти:
- useOptimistic работает с формами. Работать с обычной кнопкой в Single Page Application мне не удалось, обновление происходило только после завершения запроса
- useOptimistic работает только внутри асинхронного обработчика, что логично. Если убрать async/await, обновление произойдёт только после завершения запроса
- Параметр в useState используется только для инициализации, и игнорируется в последующих рендерах. useOptimistic будет сихронизироваться со значением переданным первым параметром.
🤷♂️ Очень мало полезного удалось найти о useOptimistic. Во всех статьях и видео тривиальные примеры, нигде не рассказывается как обрабатывать более сложные ситуации:
- Как обновлять оптимистичное состояние, если запустить несколько запросов одновременно?
- Как использовать useOptimistic в SPA вне форм?
Поэтому пришлось создать пару ишью: раз и два. В любом случае, пока useOptimistic выглядит каким-то низкоуровневым API. Надеюсь скоро появится больше Best Practices по его применению. Если вам есть что добавить — пишите в комментах.
Ещё по теме:
- Frontend First — Ep 179 - React Deep Dive: useOptimistic
- Официальная документация по useOptimistic
- Код из примера тут
https://t.me/cherkashindev/184
Показать полностью
1
React 19 — use(Promise)
use — новый хук, который позволяет считывать данные из промиса и при этом интегрирован с Suspense и ErrorBoundary.
ℹ️ Основные моменты:
- На этот хук не распространяются правила хуков — его можно использовать внутри циклов и условных операторов.
- Если мы используем хук use(Promise), то где-то в родительском компоненте мы должны положить сам промис (не данные как мы делали раньше) в стейт (useState). Это позволяет избавиться от useEffect’а, который был нужен, чтобы запросить данные при первом рендере.
- Хук интегрирован с Suspense, поэтому пока промис не разрезолвится — будет показан fallback объявленный в ближайшем Suspense.
- Если промис зареджектился, то будет показан fallback объявленный в ближайшем ErrorBoundary
- Песочница тут
- Официальная документация тут
Показать полностью
1
Быстрые комбинации
Опытные специалисты предпочитают работать за компьютером, обходясь без мышки. Зачем? Все действия можно выполнить с помощью клавиатуры, что значительно повышает эффективность работы. Запомните хотя бы три комбинации клавиш, которые значительно увеличат скорость работы за ПК.
1. Поиск на странице: Используйте комбинацию клавиш «Ctrl+F», чтобы быстро найти нужную информацию на странице. Это сокращает время, потраченное на поиск, и делает работу более продуктивной.
2. Открытие новой вкладки: Нажмите «Ctrl+T», чтобы мгновенно открыть новую вкладку в браузере. Это удобно, если вам нужно быстро переключаться между несколькими страницами или источниками информации.
3. Переход в адресную строку: С помощью комбинации «Ctrl+L» можно мгновенно перейти в адресную строку браузера. Это позволяет быстро вводить новые адреса веб-сайтов или выполнять поиск без необходимости использовать мышь.
Запоминая эти три простых комбинации клавиш, вы сможете значительно увеличить свою производительность за компьютером.
Явное управление ресурсами в TypeScript — using
Недавно, когда я рассказывал, как мы пишем тесты, я уже упоминал, что в TypeScript’е появилось новое ключевое слово using. Оно позволяет нам сделать код чище и более линейным, избавившись от try/finally.
Но мы можем использовать using не только, когда открываем файл или подключение к базе данных, иначе его использование ограничилось бы исключительно сервером.
Мне нравится рассматривать using, как Undo/Redo только наоборот, сперва мы выполняем какое-то действие, а в конце отменяем его:
- создали объект, удалили
- показали спиннер и скрыли, когда получили данные
Причем отмена удобно происходит в самом конце функции, даже если мы используем async/await.
Вот простой пример, как можно использовать using, чтобы показывать/скрывать спиннер в React коде.
// обычный код на React
useEffect(() => {
try {
setIsLoading(true);
await await Promise.resolve().then(() => console.log("promise.resolve"));
} finally {
setIsLoading(false);
}
}, [])
// такой же код, с использованием using
useEffect(() => {
using manager = new LoadingManager(setIsLoading);
await await Promise.resolve().then(() => console.log("promise.resolve"));
}, []);
/**
* Класс, который управляет состоянием спиннера
*/
class LoadingManager {
constructor(private setIsLoading: (value: boolean) => any) {
this.setIsLoading(true);
console.log("constructor");
}
[Symbol.dispose]() {
this.setIsLoading(false);
console.log("disposer")
}
}
// В консоли будет выведено в следующем порядке
// constructor
// promise.resolve
// disposer
Код можно открыть в песочнице.
К сожалению, нельзя опустить переменную manager, но это лучше, чем лепить везде try / finally.
Ещё по теме:
- using Declarations and Explicit Resource Management
- Явное управление ресурсами: пробуем новую фичу JavaScript и TypeScript
Показать полностью
Требуется помощь веб-разработчиков (сила Пикабу!)
upd^ СПАСИБО , ПОМОГЛИ!!!
Ребятушки- кулцхакеры, есть к вам просьба.
Есть такая приложуха iSki, которая пишет треки. Таких много, но у этой отличие в том что можно добавлять друзей и смотреть их движ, кто где катается.
Но у приложухи есть несколько недостатков, один из них в том что нет экспорта чистого GPS-трека.
Есть только экспорт ссылки по которой его можно посмотреть, пример: https://share.iski.cc/shares/share_iski/tracks/bDMZCqdpzdFyx...
Вопрос:
1) есть ли данные трека в файлах этой веб-страницы, которые прилетают на комп, или все рисуется на сервере?
2) можете ли вы помочь - подсказать как выцепить эти данные? хотя бы в каком файле или как их посмотреть?
Я лет 20 назад кодил на JS и PHP, но мои знания уже безнадежно устарели....
Показать полностью
1
Pinky Chat — PHP-скрипт живого чата
v1.6 (10.01.2024)
Скрипт для онлайн-чата службы поддержки для ваших веб-сайтов. Общайтесь со своим пользователями в режиме реального времени через компьютер или на мобильных устройствах. Кроме того, вы можете отслеживать аналитику вашего веб-сайта, путь посетителя и данные о географическом местоположении.
Функционал:
- Неограниченное общение в реальном времени
- Двусторонний обмен файлами
- Чат между операторами
- Стандартные ответы (ярлыки)
- Многоязычная поддержка (переводится на любой язык)
- Адаптивное окно чата (удобно для мобильных устройств)
- Междоменная поддержка
- Отправка транскриптов пользователям
- Несколько Поддержка отделов
- Страница контактов, когда нет операторов онлайн
- Черный список отображения виджетов
- Поддержка встроенных виджетов
- Полноэкранный режим чата
- Настраиваемые аватары, смайлики, тон уведомлений и т. д.
- Разговор нескольких операторов и гостей
- Звуки уведомлений о сообщениях
- Пользовательские шаблоны чата
- Встроенная аналитика ( Отслеживайте трафик посетителей, источник трафика и т. д.)
- Отслеживание пути посетителей
- Настройки производительности
- Пользовательские позиции виджетов
- Обнаружение Adblock
- Режим обслуживания
- Защита от капчи (включена Google reCAPTCHA)
- Поддержка как SMTP, так и собственной почты PHP
- Поддержка надстроек
- Система коротких кодов
- Блокировка нежелательных IP-адресов пользователей
- Простая панель установщика
Больше информации и сам скрипт можно скачать тут
Показать полностью
2