Вышел React Doctor v2!

Он находит и исправляет ошибки в вашем React-приложении.

✓ Лишние useState и useEffect
✓ Ошибки accessibility и производительности
✓ Избегаемый prop drilling с помощью Context

Опенсорс:
$ npx react-doctor@latest

➡️ @FrontendPortal

Совет по JS

Самый простой способ получать/устанавливать query-параметры

Можно использовать свойство searchParams (экземпляр URLSearchParams) у объекта URL, чтобы получать и задавать query-параметры URL

➡️ @FrontendPortal | #tip by Shripal Soni

Если бы не он, то кто?

➡️ @FrontendPortal

В Next.js обнаружили самую серьёзную уязвимость за всю его историю – CVSS 8.6

→ затронуты версии 13.4.13+, 14.x, 15.x и 16.0.0–16.2.4
→ злоумышленники могут получить доступ к вашим внутренним сервисам, cloud credentials, API-ключам и админ-панелям
→ аутентификация не требуется
→ достаточно одного специально сформированного запроса
→ прямо сейчас уязвимы примерно 79 000 инстансов
→ приложения на Vercel защищены, self-hosted — нет

Срочно обновитесь до 15.5.18 или 16.2.6 🚨

➡️ @FrontendPortal

Совет по CSS: простой способ получения доступа к любому значению атрибута в виде строки с помощью функции attr()

CSS-функция, которая умеет получать значение любого атрибута элемента, а потом использовать это значение прямо в стилях

Самые распространённые случаи использования этой функции - для создания тултипа(пример на гифке) и также для отображение значения атрибута href после текста ссылки при печати страницы

@media print {
  a::after {
    content: " [" attr(href) "]";
  }
}

Попробовать можно здесь

➡️ @FrontendPortal | #CSS #tip by Shripal Soni

🧑‍💻 React: у нас есть Concurrent Features

🤡 GitHub:

➡️ @FrontendPortal

Только олды вспомнят

➡️ @FrontendPortal

Новая статья: прокачиваем fluid sizing с помощью round()

Автор написал о том, как CSS-функция round() улучшает значения, получаемые через clamp(), при работе с размерами, типографикой и отступами. Почему это важно и как это использовать

http://ishadeed.com/article/css-round

➡️ @FrontendPortal

Новый HTML-элемент для установки приложений! И это можно будет делать без JavaScript.

Он рендерит кнопку на языке пользователя и запускает процесс установки по клику.

Пока что тестируется в Chrome и Edge.

➡️ @FrontendPortal

Markdown-редактор для React, который реально ощущается отполированным 🙂

MDXEditor – это редактор в стиле Notion с поддержкой продвинутого markdown, MDX, JSX, таблиц, блоков с кодом и прочего.

→ современное и удобное редактирование текста
→ гибкая система расширений с нормальной настройкой
→ отлично вписывается в React- и MDX-разработку
→ всё работает плавно и без ощущения сырого инструмента

Идеально подойдёт для документации, блогов, CMS и всяких инструментов для написания контента ✋

GitHub тут

➡️ @FrontendPortal

Да начнутся голодные игры 😊

@IT_Portal

Вау, это наконец-то происходит!

npm планирует по умолчанию блокировать postinstall-скрипты в одном из будущих релизов.

В ближайшем будущем мы, скорее всего, начнём получать предупреждение.

Ссылка на PR с реализацией первого этапа:
https://github.com/npm/cli/pull/9360
Ссылка на RFC с описанием всех связанных фич и трёхэтапного плана роллаута:
https://github.com/npm/rfcs/pull/868

➡️ @FrontendPortal

Comimi — это JS/TS-библиотека, которая позволяет создавать кастомизируемые интерфейсы для чтения манги и комиксов в вебе

→ лейауты для чтения манги/комиксов
→ несколько режимов просмотра и чтения
→ гибкая настройка поведения ридера
→ создано для веб-ридеров комиксов

GitHub тут ✌️

➡️ @FrontendPortal

Вот здесь можно найти кучу красивых абстрактных SVG-шейпов и мгновенно скопировать код в один клик.

Идеально для дизайнеров и разработчиков, которые хотят сделать свои интерфейсы более динамичными и визуально насыщенными 😏

➡️ @FrontendPortal

Познакомьтесь с Datatype – шрифтом, который превращает текст в графики. Доступен в Google Fonts и в Workspace.

Простой синтаксис вроде {b:10,25,7,95} автоматически преобразуется в спарклайны, круговые диаграммы и бар-чарты, которые отлично смотрятся в ваших документах, презентациях и таблицах

Datatype на Google Fonts

➡️ @FrontendPortal

Этот опенсорсный веб-компонент автоматически генерирует скелетон-заглушки с shimmer-эффектом на основе вашего реального UI с множеством настроек.

→ не нужно создавать отдельные skeleton-компоненты
→ генерирует лоадеры по фактической структуре DOM
→ настраиваемые shimmer-эффекты и стили
→ работает с React, Vue, Svelte и другими фреймворками

https://github.com/Aejkatappaja/phantom-ui

➡️ @FrontendPortal

Blossom — это опенсорс система каруселей с огромным количеством красивых паттернов и готовых примеров. Также в комплекте идут навыки для AI-агентов, а ещё есть поддержка React, Vue, Svelte и Web Components.

github.com/jespervos/blossom-carousel

➡️ @FrontendPortal

Во ВКонтакте серьезно обновили frontend-архитектуру

Речь про переход ключевых разделов vk.com на SPA: ленты, профилей, сообществ, мессенджера и других сценариев, то есть про реальный highload frontend.

Что получили:
→ первая отрисовка страницы ускорилась на 25%
→ переходы между разделами — в 3.5 раза быстрее
→ интерфейс сразу показывает каркас страницы, а затем догружает контент

Из интересного по инженерке:
→ деплой фронтенда сократился до 20 секунд
→ 6–8 релизов в сутки
→ 100+ merge request ежедневно попадает в прод

Переход делали постепенно и без изменения привычного интерфейса.

https://www.cnews.ru/news/line/2026-06-03_vkontakte_obnovila_veb-platformu

➡️ @FrontendPortal

А ты знал, что в VS Code можно мгновенно выделить всё содержимое между парными скобками? 🤯

Просто дважды кликни внутри пары {} или (), и VS Code автоматически выделит весь код, который находится между ними.

Мелкая фишка, но при редактировании кода она может неожиданно сэкономить кучу времени ✌️

➡️ @FrontendPortal