Теперь доступно: https://iso-coaster.com

Бесплатный конструктор парка аттракционов с открытым исходным кодом, включающий магазины, водные/металлические/деревянные американские горки, гостей, еду, магазины и многое другое.

Регистрация не требуется, кооперативный режим включен.

@WebDev_Plus

Каждый раз, когда я начинаю новый проект на JavaScript, я устанавливаю эти библиотеки.

Сохраните это на потом ;)

@WebDev_Plus

Предотвращение цепной прокрутки с помощью overscroll-behavior

Если мы попытаемся выполнить прокрутку, когда граница скроллинга достигнута, то прокрутка будет выполнена в ближайшей родительской области скроллинга, что называется цепочкой прокрутки(scroll chaining)

Мы можем предотвратить цепочку прокрутки, установив для свойства overscroll-behaviour значение contain или none

- Подробнее
- Поиграть можно здесь

@WebDev_Plus

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

@WebDev_Plus

Оптимизация SVG – краткий гайд для начинающих

Часто на сайтах встречаются SVG-изображения, которые не оптимизированы как следует: они содержат лишние группы, ненужные атрибуты и числа с огромным количеством десятичных знаков

Лаура Калбаг из Penpot делится практическими советами, как сделать SVG-файлы меньше по размеру, но без видимой потери качества – от базовых приёмов до полезных автоматизированных инструментов

Читайте здесь

@WebDev_Plus

Как структурировать React-проект, который можно масштабировать:

app/ → pages/ → features/ → shared/

@WebDev_Plus

Интерактивная статья: как анимировать курсоры других игроков в мультиплеере.

Плавный рендер курсоров почти всегда требует интерполяции, потому что сеть никогда не бывает идеальной. Вот рабочий подход. Автор писал это пару лет назад, но техники все еще актуальны

Ссылка ↓

@WebDev_Plus

ilamy Calendar

Мощная, полнофункциональная библиотека календарных компонентов для React, написанная на TypeScript, Tailwind CSS и с использованием современных React-паттернов. Поддерживает несколько режимов отображения календаря, drag-and-drop, повторяющиеся события и продвинутую интернационализацию

GitHub тут

@WebDev_Plus

Условные типы TypeScript применяют различные правила в зависимости от типа

@WebDev_Plus

Предпросмотр и редактирование SVG прямо в VS Code

Это расширение для VS Code позволяет видеть SVG уже отрендеренными прямо в редакторе и быстро править их без переключения в сторонние дизайн-инструменты.

Если часто работаешь с иконками, иллюстрациями или UI-графикой, экономит кучу времени на лишние переходы

Посмотреть можно здесь

@WebDev_Plus

Полезный совет по DevTools для доступности

Хром умеет эмулировать дальтонизм и размытие зрения. Быстрый способ проверить, насколько ваш UI дружелюбен к тем, кто видит мир иначе

DevTools → Rendering → Emulate vision deficiencies

@WebDev_Plus

Один паренек написал блог-пост: Building Bulletproof React Components.

В нём подробно разбираю, как создавать компоненты в React, которые надёжны, легко тестируются и безопасны для использования в больших проектах.

@WebDev_Plus

Утилита минимальной фильтрации объектов в JavaScript

@WebDev_Plus

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

Сканирует весь сайт и выставляет оценку каждой странице.

По сути, это Lighthouse, но с обзором всего сайта целиком.

Запускается так: npx unlighthouse --site <твой-сайт>

@WebDev_Plus

Фильтрация свойств объекта по типу в TypeScript

@WebDev_Plus

Современный способ смотреть npm-пакеты, и он реально молниеносный

NPMX это новый браузер для npm registry, который делает упор на скорость и удобство для разработчиков.

Никакого мусора. Никаких тормозных страниц. Просто мгновенная инфа по пакету, когда она нужна :)

Источник : [http://npmx.dev]

@WebDev_Plus

Это прям топ, если хочешь реально глубоко врубиться в TypeScript

Это красиво сделанный интерактивный ресурс, который объясняет концепты TypeScript визуально, а не только текстом и код-блоками.

Можно прямо “пощупать” как работают типы через живые визуализации, из-за чего сложные штуки доходят заметно быстрее.

И ещё кайф: есть опциональные клавиатурные хоткеи, так что можно плавно переключаться между примерами и концентрироваться на обучении, а не на бесконечном скролле :)

Источник : http://types.kitlangton.com

@WebDev_Plus

Аннотация типа (type annotation) vs satisfies + as const в TypeScript

@WebDev_Plus

Знакомьтесь: json-render × React Native

Еще один шаг к UGI (User-Generated Interfaces), на базе Generative UI.

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

Заранее заданные компоненты и экшены дают безопасный, предсказуемый результат.

@WebDev_Plus

Нужно простое OTP (одноразовые пароли) для приложения?

Есть легковесная либa, которая позволяет без лишнего веса генерить TOTP/HOTP коды в JavaScript. Норм вариант для 2FA, флоу верификации или безопасного логина, когда не хочется тащить тяжёлые зависимости :)

http://github.com/hectorm/otpauth

@WebDev_Plus