​​Всем привет!

Недавно в чате было обсуждение - как организовывать статус пользователей. И если по статусам, получаемым от сервера(например, online, offline) все ясно, то как организовать статусы, которые только на клиенте можно отследить? Например, afk, idle и тп

Тогда я ответил, что скоро буду писать код, отвечающий за подобные статусы и поделюсь решением.

Первоначально, я планировал так - организовываю слежку за активностью пользователя (движения мыши, клики, нажатия клавиш), вешаю глобальным обработчиком, при смене статуса отправляю уведомление на сервер.

В жизни решил эту проблему так же, но гораздо проще))) Коллега подсказал просто супер билиотеку - React Idle Timer. Простая в использовании, но очень мощная. Да, она для React, но уверен, что есть аналоги и для других фреймворков + можно посмотреть исходники))))
Хорошая, документация, примеры, TypeScript - короче, рекомендую!
зы страничка на github

ззы Прикреплю скрин - на Хуках весь код вышел в несколько строк! В документации в примерах все есть

#react

Всем привет!

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

ps В РФ через vpn доступен сайт

#book

Всем привет!

Сейчас на работе потребовалось освоить SSG - генератор создания статических сайтов. Т.к. я использую React, то выбор пал на Gatsby - модная штука, особо часто сейчас используют, при переводе сайтов в wordpress на React.
Кратко: Gatsby позволяет отвязать сайт от БД. Сайт становится статичным и быстро грузится (Реакт в чистый HTML) и появляется возможность хостиинга на халявные сайты, где нет поддержки БД.
На практике пока могу одно сказать - нужно знать graphQl (хотя и без него можно, но с ним вся фишка) и немного напрягают другие мелочи, возможно, я просто не разобрался еще.

Кстати, сегодня утром прочел статью, где автор как раз сравнивает ssg решения - Почему я выбрал Next.js, а не Gatsby, Gridsome или Nuxt?

#ssr #react #gatsby #next

Если кто использует React+Redux, но ещё не пробовал хуки именно Redux - вот прям настоятельно рекомендую!
ЗЫ Вот не плохая статья на этот счёт.

#react #redux

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

#react #mobx

Всем привет!

Одна из востребованных задач в верстке - фиксация header (у меня в текущем проекте еще и footer фиксируется в некоторых компонентах).
Если вы еще не делали это при помощи Grid - эта статья вам в помощь! 👍

#css #grid

Всем привет! 🖖

Продолжаю мучить вёрстку и начинаю с теплотой вспоминать свой legacy проект))))

А пока интересна скорость с которой нормальные люди, не то что я, верстают проекты)

Например, вот макет - обычный лендинг. Сколько рабочих дней у вас уйдет на него?

Всем привет!

На днях вышла 5 версия Webpack.
Подробности релиза можно почитать тут.

Либо офф блог.

#webpack

Всем привет! 🖖

Интересная статья о модальных окнах - мне понравился фундаментальный подход автора, рекомендую почитать.
#js

Коллекция примеров оформления ссылок + можно кодом воспользоваться.
Рекомендую👍
#css

Всем привет!

Я тут приболел немного - штормит с пятницы меня. Ни работать, ни в канал писать нет сил и желания(((

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

Если вы разрабатываете на React, Vue или Angular - рекомендую использовать Storybook.
Эта штука просто незаменима при создании компонентов. Вам не нужно запускать проект и проверять, что вы там создали, как оно работает в разных состояниях и т.д. - вот для этих целей storybook
Вот краткая инструкция

ps Офф сайт - https://storybook.js.org/

#react #storybook

Всем привет!

Сделал свой первый проект на Gatsby и хочу написать пару слов.

Фантастическое быстродействие сайта (тестирую с lighthouse), множество плагинов, хорошая документация, актуальность технологи... глюки при сборке (причиной Typescript модуль был), частое "зависание" live server, какие-то мелки баги...
Короче, пока не знаю, что сказать, но фреймворк прикольный. Жаль я Next.js не пробовал, чтоб можно было сравнить.
Думаю, буду дальше разбираться с Gatsby. А тем кто занимается разработкой сайтов - рекомендую попробовать. Слышал, что многие переводят WordPress на Реакт и вот тут Gatsby вам должен зайти

#gatsby

Clip-path - как использовать обрезку в CSS.

👉Подробнее

#css

Всем привет!

Наткнулся на интересную статью, в которой автор заставил меня задуматься, о вертикальной составляющей в адаптивном дизайне. А то я, как и многие, обычно только ширину учитываю.

👉Отзывчивый веб-дизайн и учёт высоты окна браузера

#css

Всем привет!

Вчера задумался о переходе с Redux на Redux Toolkit (если это можно назвать переходом). Конечно, был бы это мой выбор - я бы весь проект на MobX перевел, но...имеем, что имеем.
Если кто не в курсе, что такое Toolkit, то вот вам короткие видео, где наглядно показывают разницу от Redux
Часть 1
Часть 2

Кстати, кто уже использует Tollkit - напишите в комментария, достаточно вам встроенного в него thunk или в каких-то случаях приходится Redux Saga использовать?

#redux