React Doctor v2 уже здесь

Ваш агент пишет плохой React-код — этот инструмент это отлавливает.

Работает с Next.js, Vite и React Native. Можно привести приложение в порядок за несколько минут.

npx react-doctor@latest

https://github.com/millionco/react-doctor

@WebDev_Plus

Атрибут tabindex в HTML управляет тем, может ли элемент получать фокус с клавиатуры и в каком порядке происходит навигация по элементам через клавишу Tab.

Используется в основном для доступности и управления клавиатурной навигацией.

Основные моменты:

▪️ tabindex="0" — добавляет элемент в естественный порядок фокуса
▪️ tabindex="-1" — фокус возможен только программно через JS, но не через Tab
▪️ положительные значения (1, 2 и т.д.) — задают кастомный порядок обхода
▪️ работает как для интерактивных, так и для неинтерактивных элементов

@WebDev_Plus

Создание нового логотипа не должно занимать много времени.

Я хотел инструмент быстрый, простой и бесплатный.

Поэтому собрал Logo Lattice.

Полностью бесплатный.
Работает прямо в браузере.
Полный контроль и владение созданными результатами.

@WebDev_Plus

HTML совет 💡

Можно использовать атрибут translate, чтобы указать, должен ли контент элемента переводиться встроенными средствами браузера.

@WebDev_Plus

Жди завершения всех промисов, даже упавших

Promise.allSettled() дожидается завершения каждого промиса — успешного или с ошибкой.
⋅ Возвращает { status: 'fulfilled', value } или { status: 'rejected', reason }
⋅ Отлично подходит для пакетных операций

Подробнее 👇
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled

@WebDev_Plus

Используй CSS @property, чтобы открыть доступ к таким вещам, как:

Анимированные конические градиенты
Вращающиеся рамки и лоадеры
Hover-переходы для точек градиента

Обычная переменная --angle не работает для анимации точек градиента, потому что CSS не понимает, как интерполировать такое значение.

@property решает это через типы вроде <angle>, <color> и другие.

@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.card {
  --angle: 0deg;

  background: linear-gradient(
    var(--angle),
    #38bdf8,
    #0ea5e9,
    #2563eb,
    #1e40af
  );

  transition: --angle 0.8s ease;
}

.card:hover {
  --angle: 45deg;
}

За счёт initial-value не нужно каждый раз вручную задавать стартовое значение.

@WebDev_Plus

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

CSS-Tricks — Dark Mode and Variable Fonts

@WebDev_Plus

Можно закрепить скролл чата внизу через CSS-свойство overflow-anchor, без MutationObserver и без вызовов scrollTo().

<div id="scroller">
  ...
  ...
  <div id="anchor"></div>
</div>
#scroller * {
  overflow-anchor: none;
}

#anchor {
  overflow-anchor: auto;
  height: 1px;
}

В браузерах по умолчанию включён scroll anchoring, чтобы уменьшать визуальные сдвиги при изменении DOM.
Если отключить его у дочерних элементов и оставить включённым только на маленьком (1px) якоре внизу, скролл автоматически удерживается на новых элементах и «едет» вниз вместе с добавляемым контентом.

@WebDev_Plus

Интерактивная 3D-галерея клеточных структур на базе React + Three.js для обучения биологии и научно-популярной визуализации: https://github.com/cclank/cell-architecture-studio

3D-модели семи типов клеток, которые можно свободно вращать и просматривать: растительные клетки, лейкоциты, нейроны и другие. Растительные клетки и лейкоциты используют высокоточные GLB-модели, остальные реализованы через процедурную геометрию как fallback. По клику на органеллы отображается подробная информация, также доступно сравнение двух клеток бок о бок. Встроена AI-панель-тьютор, которая даёт обучающие подсказки.

@WebDev_Plus

Ремаппинг mapped types в TypeScript для автоматической генерации feature-флагов!
#TypeScript

@WebDev_Plus

Если ты работаешь с React и Next.js, тебе нужен этот репозиторий!

10 лет знаний про оптимизации и best practices упакованы в скилл для AI-агентов.

40+ правил, отсортированных по влиянию
Срезать bundle, избегать waterfalls, избегать лишних rerender’ов...

https://github.com/vercel-labs/agent-skills/tree/main/skills/react-best-practices

@WebDev_Plus

Совет по JavaScript:

Можно использовать метод console.table(), чтобы вывести табличные данные в виде таблицы в консоли.

Ты, скорее всего, каждый день пользуешься console.log().
Но знаешь ли ты, что у объекта console есть и другие полезные методы — например, console.table() и console.error()?

Подробнее — в статье

Ещё больше трюков по JavaScript можно найти здесь

@WebDev_Plus

⚡️ В TypeScript можно использовать labeled tuples, чтобы на этапе компиляции жёстко задавать точную длину массива.

#TypeScript

@WebDev_Plus

<LoadingButton />
Никакого isLoading. Никакого useState в родительских компонентах.
Просто делаете yield внутри обработчика onClick.

StackBlitz demo

@WebDev_Plus

Совет по JavaScript:

Используйте Web Share API, чтобы заменить все кнопки шаринга одной нативной кнопкой, которая открывает системное окно «Поделиться» на устройстве пользователя.

@WebDev_Plus

Разработчикам Laravel

Обычно загрузка файлов — одна из самых частых фич в типичном веб-приложении.
Но в реальных кодовых базах часто встречается неполная валидация загрузки файлов.

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

Поэтому при загрузке файлов всегда стоит использовать правило валидации mimes вместе с проверкой расширения для дополнительной безопасности.

Правило валидации mimes фактически проверяет содержимое файла и выбрасывает ValidationException, если содержимое не соответствует заявленным типам.

@WebDev_Plus

Привет, разработчики Laravel

Работа с адресами, локациями и геопозициями — ключевая часть современных веб-приложений.

Недавно я наткнулся на пакет для Laravel, который сразу поддерживает большинство этих фич, что может существенно ускорить разработку.

Возможности пакета:

- Добавление связей для адресов доставки и биллинга к любой модели Eloquent
- Возможность отмечать определённый адрес как основной
- Поиск адресов в заданном радиусе

Рекомендую попробовать и поделиться своим опытом.

#laravel #php

@WebDev_Plus