DНЕВНИК web-программиста

Всем привет!

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

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

#gatsby

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

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

#react #storybook

Всем привет!

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

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

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

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

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

Всем привет!

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

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

#webpack

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

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

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

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

Всем привет!

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

#css #grid

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

#react #mobx

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

#react #redux

Всем привет!

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

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

#ssr #react #gatsby #next

Всем привет!

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

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

#book

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

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

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

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

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

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

#react

Всем привет!

Последнее время постоянно в требованиях стоит создание кастомных полос прокрутки.
Если вы ещё не делали, попробуйте - я уже не представляю скролл без них.
Простая инструкция - создаём полосу прокрутки на CSS

#css

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

Я уже сталкивался с библиотекой Vix в React и вот наткнулся на обзор на русском
GitHub - https://github.com/airbnb/visx

Документация и примеры - https://airbnb.io/visx

#react

Классная статья - Оптимизация подключения REST API для React приложений

Спойлер - там не только про Реакт. Рекомендую всем почитать

#js #api

Немного юмора от коллеги по работе 🤣

#юмор

Реактивный ... CSS!

Чего, чего??? А такое бывает? Это мои первые мысли, когда я увидел перевод статьи от Adam Crockett

👉Подробнее

#css