WebDev+ | Веб-разработка

Знаете, что в языке JavaScript можно писать тесты прямо в исходниках

Rstest поддерживает тесты прямо в коде — тесты пишутся рядом с реализацией. При сборке для продакшена тестовый код вырезается. Нулевые издержки на бандл.

Подход в стиле Раста для удобства разработки, теперь в тулчейне JavaScript 🦀

https://rstest.rs/config/test/include-source

#JavaScript #Rstest #Rspack

@WebDev_Plus

Сопоставленные типы и обобщённая индексация в TypeScript

Форма payload привязана к имени события.

Обратился не к тому полю внутри обработчика — получил ошибку компиляции.

#TypeScript

@WebDev_Plus

🤔 Говорили, что CSS — это просто стилизация
Тем временем CSS с :where() и :has() уже выглядит как SQL-запросы.

@WebDev_Plus

Напоминание: использовать structuredClone вместо связки JSON.parse / JSON.stringify.
Функция широко доступна с марта 2022 года.

@WebDev_Plus

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

ИИ-агенты для кодинга часто опираются на устаревшие паттерны, из-за чего получается перегруженный JavaScript. Google Chrome и Microsoft Edge совместно работают над тем, чтобы это исправить — помогая ИИ генерировать более чистый и современный код с использованием актуальных возможностей платформы. Итог — более качественные веб-приложения для всей экосистемы веба.

Публичный репозиторий: https://github.com/GoogleChrome/modern-web-guidance

@WebDev_Plus

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

Все мы рады новым релизам фреймворка Laravel.
Но что если хочется опробовать изменения до официального релиза?
Не переживайте! В вашем composer.json, в секции require, просто замените версию laravel/framework на 13.x-dev и выполните composer update.
Это установит последнюю версию фреймворка с всех последних коммитов ветки 13.x, позволяя попробовать новые возможности заранее.

Важно: не коммитьте это и не используйте в продакшене — ветка может быть нестабильной до официального релиза.

#laravel #php

@WebDev_Plus

Mapped types + generic indexing в TypeScript
Форма вашего payload привязана к имени события.
Обратились к неправильному полю внутри обработчика? Ошибка компиляции. 👇

#TypeScript

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

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

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

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

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

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

#laravel #php

@WebDev_Plus

🧪 Эксперимент по созданию минималистичного языка программирования. Основной фокус — парсинг и исполнение директив, а не набор возможностей самого языка. Проект вдохновлён легендарным c4.
Посмотреть всё можно здесь: https://langsagne.vercel.app/

@WebDev_Plus

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

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

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

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

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

@WebDev_Plus

Совет по JavaScript:

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

@WebDev_Plus

Продолжая предыдущий пост:

Пользуюсь чем-то похожим уже около 8 лет — на базе Promise.

💡 Довольно крутая идея — использовать генераторы.

Кнопка может получать поток значений и со временем менять свой label.

@WebDev_Plus

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

StackBlitz demo

@WebDev_Plus

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

#TypeScript

@WebDev_Plus

Совет по JavaScript:

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

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

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

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

@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

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

@WebDev_Plus

Всё ещё выбрасываешь ошибки по-старому?

В JS есть 3 современных примитива:
Пользовательские классы Error со структурированными полями, такими как statusCode
Error.cause для оборачивания ошибок и сохранения цепочки ошибок
AggregateError — когда сразу несколько вещей завершаются с ошибкой
Сниппет ниже 👇

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

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

@WebDev_Plus