This media is not supported in your browser
VIEW IN TELEGRAM
React-Grid-Layout — это система сеточного расположения, похожая на Packery или Gridster, для React
Она позволяет создавать перетаскиваемые, изменяемые по размеру и адаптивные сеточные макеты в React. Представьте себе панели управления, админ-панели, страницы аналитики или конструкторы страниц, где пользователи могут свободно перемещать и изменять размеры блоков.
Вы один раз определяете сетку, и она сама управляет перетаскиванием, изменением размеров и точками прерывания
GitHub: react-grid-layout
➡️ @FrontendPortal | #resourse
Она позволяет создавать перетаскиваемые, изменяемые по размеру и адаптивные сеточные макеты в React. Представьте себе панели управления, админ-панели, страницы аналитики или конструкторы страниц, где пользователи могут свободно перемещать и изменять размеры блоков.
Вы один раз определяете сетку, и она сама управляет перетаскиванием, изменением размеров и точками прерывания
GitHub: react-grid-layout
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥48💊16❤14👍6🌚1
Обнаружение статуса соединения
Для отслеживания статуса подключения можно использовать
Мы можем подписаться на офлайн- и онлайн-события, чтобы узнавать об этих конкретных изменениях
➡️ @FrontendPortal | #js
Для отслеживания статуса подключения можно использовать
navigator.online API. Это вернет логическое значение, чтобы указать, находится ли пользователь в сети.Мы можем подписаться на офлайн- и онлайн-события, чтобы узнавать об этих конкретных изменениях
window.addEventListener('offline', (e) => {
console.log('offline');
});
window.addEventListener('online', (e) => {
console.log('online');
});Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤35🔥20👍16🤝1
Media is too big
VIEW IN TELEGRAM
Интерактивная библиотека визуализации данных — ECharts
Позволяет добавлять интуитивно понятные, интерактивные и настраиваемые диаграммы в проект.
- Предоставляет более 20 типов диаграмм
- Переключение между рендерингом Canvas и SVG
- Автоматически генерируемые описания диаграмм
- Написана на чистом JavaScript
Забираем тут
➡️ @FrontendPortal | #resourse
Позволяет добавлять интуитивно понятные, интерактивные и настраиваемые диаграммы в проект.
- Предоставляет более 20 типов диаграмм
- Переключение между рендерингом Canvas и SVG
- Автоматически генерируемые описания диаграмм
- Написана на чистом JavaScript
Забираем тут
Please open Telegram to view this post
VIEW IN TELEGRAM
👍39❤9🔥5
Каждый раз, когда видишь setState внутри useEffect, иди постой в углу 5 минут и подумай о том, что ты натворил.
А потом удали этот useEffect
➡️ @FrontendPortal
А потом удали этот useEffect
Please open Telegram to view this post
VIEW IN TELEGRAM
😁85🤔17🏆13🤯7🌚4❤2🥱2💯2👍1
Форматирование чисел и Intl.NumberFormat
Этот конструктор принимает локаль и объект с настройками
Одна из интересных возможностей — генерирование коротких форм для чисел
➡️ @FrontendPortal | #js
Intl.NumberFormat один за конструкторов Internationalization API, который используется для форматирования чисел, валюты, процентов и единиц измерения, таких как длина, температура и др. Этот конструктор принимает локаль и объект с настройками
new Intl.NumberFormat(locale, options).format(number)
Одна из интересных возможностей — генерирование коротких форм для чисел
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤29👍18🔥5
This media is not supported in your browser
VIEW IN TELEGRAM
Предотвращение цепной прокрутки с помощью
Если мы попытаемся выполнить прокрутку, когда граница скроллинга достигнута, то прокрутка будет выполнена в ближайшей родительской области скроллинга, что называется цепочкой прокрутки(scroll chaining)
Мы можем предотвратить цепочку прокрутки, установив для свойства
- Подробнее
- Поиграть можно здесь
➡️ @FrontendPortal | #CSS #tip by Shripal Soni
overscroll-behaviorЕсли мы попытаемся выполнить прокрутку, когда граница скроллинга достигнута, то прокрутка будет выполнена в ближайшей родительской области скроллинга, что называется цепочкой прокрутки(scroll chaining)
Мы можем предотвратить цепочку прокрутки, установив для свойства
overscroll-behaviour значение contain или none- Подробнее
- Поиграть можно здесь
Please open Telegram to view this post
VIEW IN TELEGRAM
❤42👍18🔥4
Оптимизация SVG – краткий гайд для начинающих
Часто на сайтах встречаются SVG-изображения, которые не оптимизированы как следует: они содержат лишние группы, ненужные атрибуты и числа с огромным количеством десятичных знаков
Лаура Калбаг из Penpot делится практическими советами, как сделать SVG-файлы меньше по размеру, но без видимой потери качества – от базовых приёмов до полезных автоматизированных инструментов
Читайте здесь
➡️ @FrontendPortal
Часто на сайтах встречаются SVG-изображения, которые не оптимизированы как следует: они содержат лишние группы, ненужные атрибуты и числа с огромным количеством десятичных знаков
Лаура Калбаг из Penpot делится практическими советами, как сделать SVG-файлы меньше по размеру, но без видимой потери качества – от базовых приёмов до полезных автоматизированных инструментов
Читайте здесь
Please open Telegram to view this post
VIEW IN TELEGRAM
❤19🌚1
Please open Telegram to view this post
VIEW IN TELEGRAM
😁80❤10🌚2
Media is too big
VIEW IN TELEGRAM
ilamy Calendar
Мощная, полнофункциональная библиотека календарных компонентов для React, написанная на TypeScript, Tailwind CSS и с использованием современных React-паттернов. Поддерживает несколько режимов отображения календаря, drag-and-drop, повторяющиеся события и продвинутую интернационализацию
GitHub тут
➡️ @FrontendPortal | #resourse
Мощная, полнофункциональная библиотека календарных компонентов для React, написанная на TypeScript, Tailwind CSS и с использованием современных React-паттернов. Поддерживает несколько режимов отображения календаря, drag-and-drop, повторяющиеся события и продвинутую интернационализацию
GitHub тут
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥20❤6🌚2
Простая кнопка в стиле ретро
Хитрость здесь заключается в том, чтобы создать боксовую тень без размытия для состояния по умолчанию
Для активного состояния я перемещаю кнопку, уменьшая при этом тень, так что тень кажется статичной
Подобного трюка можно добиться и с помощью псевдоэлементов, но я предпочитаю эту технику за ее простоту
➡️ @FrontendPortal
Хитрость здесь заключается в том, чтобы создать боксовую тень без размытия для состояния по умолчанию
Для активного состояния я перемещаю кнопку, уменьшая при этом тень, так что тень кажется статичной
Подобного трюка можно добиться и с помощью псевдоэлементов, но я предпочитаю эту технику за ее простоту
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍41🔥14❤5🥱2😎1
Задаём цвет в зависимости от темы операционной системы пользователя
Функция
Первое значение вернётся, если у пользователя установлена светлая тема, либо тема не выбрана, а второе, если установлена тёмная тема
Чтобы функция
На данный момент поддержка — 87.36%
➡️ @FrontendPortal | #CSS
Функция
light-dark() принимает два аргумента и возвращает один из них в зависимости от того, какую тему выбрал пользователь. Первое значение вернётся, если у пользователя установлена светлая тема, либо тема не выбрана, а второе, если установлена тёмная тема
Чтобы функция
light-dark() заработала, нужно прописать свойство color-scheme со значением light dark. Обычно это делают в псевдоклассе :root. Если это свойство не прописать, то функция всегда будет возвращать только первое значениеНа данный момент поддержка — 87.36%
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤29👍22🤯1
HTML-совет
Не используй
Почему?
- На десктопе появляется ненужный спиннер.
- Значение может случайно измениться при прокрутке мыши или нажатии клавиш вверх/вниз.
Вместо этого — используй
✅ Показывает цифровую клавиатуру на мобильных устройствах — лучше UX.
✅ Добавляет валидацию на цифры.
➡️ @FrontendPortal | #tip by Shripal Soni
Не используй
input type="number" для важных числовых полей — типа почтового индекса, номера карты и т.п.Почему?
- На десктопе появляется ненужный спиннер.
- Значение может случайно измениться при прокрутке мыши или нажатии клавиш вверх/вниз.
Вместо этого — используй
inputmode="numeric" + patternPlease open Telegram to view this post
VIEW IN TELEGRAM
❤68👍39🔥15🤝4
This media is not supported in your browser
VIEW IN TELEGRAM
Как структурировать масштабируемый React-проект:
app/ → pages/ → features/ → shared/
➡️ @FrontendPortal
app/ → pages/ → features/ → shared/
Please open Telegram to view this post
VIEW IN TELEGRAM
❤20👍16😁1🌚1👨💻1
Тем временем подъехали результаты State of JS 2025
TypeScript уверенно лидирует как язык, Vite по загрузкам обогнал Webpack, а доля ИИ-сгенерированного кода к концу 2025 года подобралась вплотную к 30%. Параллельно заметно растёт интерес к инструментам нового поколения: Cursor, Zed, Claude, Gemini и Copilot
Общее состояние JS-экосистемы: ключевые тренды, инструменты, библиотеки и сдвиги за последний год — вся аналитика в отчёте: https://2025.stateofjs.com/en-US/
➡️ @FrontendPortal
TypeScript уверенно лидирует как язык, Vite по загрузкам обогнал Webpack, а доля ИИ-сгенерированного кода к концу 2025 года подобралась вплотную к 30%. Параллельно заметно растёт интерес к инструментам нового поколения: Cursor, Zed, Claude, Gemini и Copilot
Общее состояние JS-экосистемы: ключевые тренды, инструменты, библиотеки и сдвиги за последний год — вся аналитика в отчёте: https://2025.stateofjs.com/en-US/
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤18👍7🤯3🤔1