Всем привет!
Наткнулся на интересный репозиторий - 30 second of code
Более сотни коротких кусочков кода. Залипнуть можно на долго, многое может пригодиться для решения ваших задач.
Рекомендую 👍
#js
Наткнулся на интересный репозиторий - 30 second of code
Более сотни коротких кусочков кода. Залипнуть можно на долго, многое может пригодиться для решения ваших задач.
Рекомендую 👍
#js
GitHub
GitHub - Chalarangelo/30-seconds-of-code: Coding articles to level up your development skills
Coding articles to level up your development skills - Chalarangelo/30-seconds-of-code
Реактивный ... CSS!
Чего, чего??? А такое бывает? Это мои первые мысли, когда я увидел перевод статьи от Adam Crockett
👉Подробнее
#css
Чего, чего??? А такое бывает? Это мои первые мысли, когда я увидел перевод статьи от Adam Crockett
👉Подробнее
#css
Webformyself
Как сделать CSS реактивным!
Реактивный CSS: что такое, как и зачем его таким делать. Разделение задач. Функция Calc. Собственные свойства из переменных sass
Классная статья - Оптимизация подключения REST API для React приложений
Спойлер - там не только про Реакт. Рекомендую всем почитать
#js #api
Спойлер - там не только про Реакт. Рекомендую всем почитать
#js #api
vc.ru
Оптимизация подключения REST API для React приложений — Разработка на vc.ru
Инструкция направлена на оптимизацию способа обмена данными между клиентом и сервером.
Всем привет!🖖
Я уже сталкивался с библиотекой Vix в React и вот наткнулся на обзор на русском
GitHub - https://github.com/airbnb/visx
Документация и примеры - https://airbnb.io/visx
#react
Я уже сталкивался с библиотекой Vix в React и вот наткнулся на обзор на русском
GitHub - https://github.com/airbnb/visx
Документация и примеры - https://airbnb.io/visx
#react
Хабр
Visx — коллекция графических примитивов для React-приложений, созданная в Airbnb
После 3 лет разработки и 2,5 лет использования в продакшн-проектах Airbnb, после переписывания кода на TypeScript, мы рады представить вам официальный релиз коллекции графических примитивов visx 1.0 ...
Всем привет!
Последнее время постоянно в требованиях стоит создание кастомных полос прокрутки.
Если вы ещё не делали, попробуйте - я уже не представляю скролл без них.
Простая инструкция - создаём полосу прокрутки на CSS
#css
Последнее время постоянно в требованиях стоит создание кастомных полос прокрутки.
Если вы ещё не делали, попробуйте - я уже не представляю скролл без них.
Простая инструкция - создаём полосу прокрутки на CSS
#css
Webformyself
Создание пользовательской полосы прокрутки на CSS
24 строки кода: создаем пользовательскую полосу прокрутки за 24 строки с помощью CSS, HTML, JavaScript.
Всем привет!
Недавно в чате было обсуждение - как организовывать статус пользователей. И если по статусам, получаемым от сервера(например, online, offline) все ясно, то как организовать статусы, которые только на клиенте можно отследить? Например, afk, idle и тп
Тогда я ответил, что скоро буду писать код, отвечающий за подобные статусы и поделюсь решением.
Первоначально, я планировал так - организовываю слежку за активностью пользователя (движения мыши, клики, нажатия клавиш), вешаю глобальным обработчиком, при смене статуса отправляю уведомление на сервер.
В жизни решил эту проблему так же, но гораздо проще))) Коллега подсказал просто супер билиотеку - React Idle Timer. Простая в использовании, но очень мощная. Да, она для React, но уверен, что есть аналоги и для других фреймворков + можно посмотреть исходники))))
Хорошая, документация, примеры, TypeScript - короче, рекомендую!
зы страничка на github
ззы Прикреплю скрин - на Хуках весь код вышел в несколько строк! В документации в примерах все есть
#react
Недавно в чате было обсуждение - как организовывать статус пользователей. И если по статусам, получаемым от сервера(например, online, offline) все ясно, то как организовать статусы, которые только на клиенте можно отследить? Например, afk, idle и тп
Тогда я ответил, что скоро буду писать код, отвечающий за подобные статусы и поделюсь решением.
Первоначально, я планировал так - организовываю слежку за активностью пользователя (движения мыши, клики, нажатия клавиш), вешаю глобальным обработчиком, при смене статуса отправляю уведомление на сервер.
В жизни решил эту проблему так же, но гораздо проще))) Коллега подсказал просто супер билиотеку - React Idle Timer. Простая в использовании, но очень мощная. Да, она для React, но уверен, что есть аналоги и для других фреймворков + можно посмотреть исходники))))
Хорошая, документация, примеры, TypeScript - короче, рекомендую!
зы страничка на github
ззы Прикреплю скрин - на Хуках весь код вышел в несколько строк! В документации в примерах все есть
#react
Всем привет!
Сейчас на работе потребовалось освоить SSG - генератор создания статических сайтов. Т.к. я использую React, то выбор пал на Gatsby - модная штука, особо часто сейчас используют, при переводе сайтов в wordpress на React.
Кратко: Gatsby позволяет отвязать сайт от БД. Сайт становится статичным и быстро грузится (Реакт в чистый HTML) и появляется возможность хостиинга на халявные сайты, где нет поддержки БД.
На практике пока могу одно сказать - нужно знать graphQl (хотя и без него можно, но с ним вся фишка) и немного напрягают другие мелочи, возможно, я просто не разобрался еще.
Кстати, сегодня утром прочел статью, где автор как раз сравнивает ssg решения - Почему я выбрал Next.js, а не Gatsby, Gridsome или Nuxt?
#ssr #react #gatsby #next
Сейчас на работе потребовалось освоить SSG - генератор создания статических сайтов. Т.к. я использую React, то выбор пал на Gatsby - модная штука, особо часто сейчас используют, при переводе сайтов в wordpress на React.
Кратко: Gatsby позволяет отвязать сайт от БД. Сайт становится статичным и быстро грузится (Реакт в чистый HTML) и появляется возможность хостиинга на халявные сайты, где нет поддержки БД.
На практике пока могу одно сказать - нужно знать graphQl (хотя и без него можно, но с ним вся фишка) и немного напрягают другие мелочи, возможно, я просто не разобрался еще.
Кстати, сегодня утром прочел статью, где автор как раз сравнивает ssg решения - Почему я выбрал Next.js, а не Gatsby, Gridsome или Nuxt?
#ssr #react #gatsby #next
Хабр
Почему я выбрал Next.js, а не Gatsby, Gridsome или Nuxt?
Мы, выбирая фреймворк для нового веб-проекта, обычно склонны останавливаться на инструментах, с которыми знакомы, не обращая внимания на то, насколько хорошо они подходят для этого проекта. Я же...
Если кто использует React+Redux, но ещё не пробовал хуки именно Redux - вот прям настоятельно рекомендую!
ЗЫ Вот не плохая статья на этот счёт.
#react #redux
ЗЫ Вот не плохая статья на этот счёт.
#react #redux
Medium
How to Hook Redux in a React App
In this article we’ll learn how to use the new Redux hooks to build a food ordering app. It’ll cover various UI patterns like fetching…
Продолжу тему библиотек для управления состоянием приложения.
Классная статья - Почему мы выбрали MobX, а не Redux, и как его использовать эффективнее
#react #mobx
Классная статья - Почему мы выбрали MobX, а не Redux, и как его использовать эффективнее
#react #mobx
Хабр
Почему мы выбрали MobX, а не Redux, и как его использовать эффективнее
Choices and consequences .. BY Ash-3xpired. Источник https://www.deviantart.com/ash-3xpired/art/Choices-and-consequences-198140687Меня зовут Назим Гафаров, я ра...
Всем привет!
Одна из востребованных задач в верстке - фиксация header (у меня в текущем проекте еще и footer фиксируется в некоторых компонентах).
Если вы еще не делали это при помощи Grid - эта статья вам в помощь! 👍
#css #grid
Одна из востребованных задач в верстке - фиксация header (у меня в текущем проекте еще и footer фиксируется в некоторых компонентах).
Если вы еще не делали это при помощи Grid - эта статья вам в помощь! 👍
#css #grid
Webformyself
Как использовать CSS Grid для закрепления хэдера и футера
Фиксированный хэдер и футер: как использовать CSS Grid. Базовые стили. Регулируемая ширина
Всем привет! 🖖
Продолжаю мучить вёрстку и начинаю с теплотой вспоминать свой legacy проект))))
А пока интересна скорость с которой нормальные люди, не то что я, верстают проекты)
Например, вот макет - обычный лендинг. Сколько рабочих дней у вас уйдет на него?
Продолжаю мучить вёрстку и начинаю с теплотой вспоминать свой legacy проект))))
А пока интересна скорость с которой нормальные люди, не то что я, верстают проекты)
Например, вот макет - обычный лендинг. Сколько рабочих дней у вас уйдет на него?
Figma
mob-first
Created with Figma
Сколько рабочих дней вы верстаете среднестатистический лендинг?
Anonymous Poll
13%
1
18%
2
23%
3
7%
4
11%
5
28%
>5
Всем привет!
На днях вышла 5 версия Webpack.
Подробности релиза можно почитать тут.
Либо офф блог.
#webpack
На днях вышла 5 версия Webpack.
Подробности релиза можно почитать тут.
Либо офф блог.
#webpack
defront.ru
Что нового в Webpack 5
Новинки релиза — улучшения скорости сборки, улучшение поддержки долгосрочного кэширования бандлов и tree shaking. Реализован новый подход для работы с ассетами. Добавлен Module Federation и многое другое
Всем привет!
Я тут приболел немного - штормит с пятницы меня. Ни работать, ни в канал писать нет сил и желания(((
Хочу пожелать всем здоровья, мойте руки, соблюдайте дистанцию, носите маски в общественных местах. Всем удачи и не болейте.👍
Я тут приболел немного - штормит с пятницы меня. Ни работать, ни в канал писать нет сил и желания(((
Хочу пожелать всем здоровья, мойте руки, соблюдайте дистанцию, носите маски в общественных местах. Всем удачи и не болейте.👍
Если вы разрабатываете на React, Vue или Angular - рекомендую использовать Storybook.
Эта штука просто незаменима при создании компонентов. Вам не нужно запускать проект и проверять, что вы там создали, как оно работает в разных состояниях и т.д. - вот для этих целей storybook
Вот краткая инструкция
ps Офф сайт - https://storybook.js.org/
#react #storybook
Эта штука просто незаменима при создании компонентов. Вам не нужно запускать проект и проверять, что вы там создали, как оно работает в разных состояниях и т.д. - вот для этих целей storybook
Вот краткая инструкция
ps Офф сайт - https://storybook.js.org/
#react #storybook
DEV Community
Getting Started with Storybook: How to Develop React Components Without an App
I wanted to write up some thoughts and a quick tutorial on one of my favorite development tools, Stor...