ForesightJS предсказывает намерения пользователей, чтобы предварительно загружать только то, на что они будут нажимать.
@WebDev_Plus
@WebDev_Plus
❤4
Оптимизация SVG – краткий гайд для начинающих
Часто на сайтах встречаются SVG-изображения, которые не оптимизированы как следует: они содержат лишние группы, ненужные атрибуты и числа с огромным количеством десятичных знаков
Лаура Калбаг из Penpot делится практическими советами, как сделать SVG-файлы меньше по размеру, но без видимой потери качества – от базовых приёмов до полезных автоматизированных инструментов
Читайте здесь
@WebDev_Plus
Часто на сайтах встречаются SVG-изображения, которые не оптимизированы как следует: они содержат лишние группы, ненужные атрибуты и числа с огромным количеством десятичных знаков
Лаура Калбаг из Penpot делится практическими советами, как сделать SVG-файлы меньше по размеру, но без видимой потери качества – от базовых приёмов до полезных автоматизированных инструментов
Читайте здесь
@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Как структурировать React-проект, который можно масштабировать:
app/ → pages/ → features/ → shared/
@WebDev_Plus
app/ → pages/ → features/ → shared/
@WebDev_Plus
❤🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Интерактивная статья: как анимировать курсоры других игроков в мультиплеере.
Плавный рендер курсоров почти всегда требует интерполяции, потому что сеть никогда не бывает идеальной. Вот рабочий подход. Автор писал это пару лет назад, но техники все еще актуальны
Ссылка ↓
@WebDev_Plus
Плавный рендер курсоров почти всегда требует интерполяции, потому что сеть никогда не бывает идеальной. Вот рабочий подход. Автор писал это пару лет назад, но техники все еще актуальны
Ссылка ↓
@WebDev_Plus
❤3
Media is too big
VIEW IN TELEGRAM
ilamy Calendar
Мощная, полнофункциональная библиотека календарных компонентов для React, написанная на TypeScript, Tailwind CSS и с использованием современных React-паттернов. Поддерживает несколько режимов отображения календаря, drag-and-drop, повторяющиеся события и продвинутую интернационализацию
GitHub тут
@WebDev_Plus
Мощная, полнофункциональная библиотека календарных компонентов для React, написанная на TypeScript, Tailwind CSS и с использованием современных React-паттернов. Поддерживает несколько режимов отображения календаря, drag-and-drop, повторяющиеся события и продвинутую интернационализацию
GitHub тут
@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
Предпросмотр и редактирование SVG прямо в VS Code
Это расширение для VS Code позволяет видеть SVG уже отрендеренными прямо в редакторе и быстро править их без переключения в сторонние дизайн-инструменты.
Если часто работаешь с иконками, иллюстрациями или UI-графикой, экономит кучу времени на лишние переходы
Посмотреть можно здесь
@WebDev_Plus
Это расширение для VS Code позволяет видеть SVG уже отрендеренными прямо в редакторе и быстро править их без переключения в сторонние дизайн-инструменты.
Если часто работаешь с иконками, иллюстрациями или UI-графикой, экономит кучу времени на лишние переходы
Посмотреть можно здесь
@WebDev_Plus
Visualstudio
Svg Preview - Visual Studio Marketplace
Extension for Visual Studio Code - Preview for Svg files
This media is not supported in your browser
VIEW IN TELEGRAM
Полезный совет по DevTools для доступности
Хром умеет эмулировать дальтонизм и размытие зрения. Быстрый способ проверить, насколько ваш UI дружелюбен к тем, кто видит мир иначе
DevTools → Rendering → Emulate vision deficiencies
@WebDev_Plus
Хром умеет эмулировать дальтонизм и размытие зрения. Быстрый способ проверить, насколько ваш UI дружелюбен к тем, кто видит мир иначе
DevTools → Rendering → Emulate vision deficiencies
@WebDev_Plus
Один паренек написал блог-пост: Building Bulletproof React Components.
В нём подробно разбираю, как создавать компоненты в React, которые надёжны, легко тестируются и безопасны для использования в больших проектах.
@WebDev_Plus
В нём подробно разбираю, как создавать компоненты в React, которые надёжны, легко тестируются и безопасны для использования в больших проектах.
@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Имба тулза для проверки веб-производительности.
Сканирует весь сайт и выставляет оценку каждой странице.
По сути, это Lighthouse, но с обзором всего сайта целиком.
Запускается так:
@WebDev_Plus
Сканирует весь сайт и выставляет оценку каждой странице.
По сути, это Lighthouse, но с обзором всего сайта целиком.
Запускается так:
npx unlighthouse --site <твой-сайт>@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Современный способ смотреть npm-пакеты, и он реально молниеносный
NPMX это новый браузер для npm registry, который делает упор на скорость и удобство для разработчиков.
Никакого мусора. Никаких тормозных страниц. Просто мгновенная инфа по пакету, когда она нужна :)
Источник : [http://npmx.dev]
@WebDev_Plus
NPMX это новый браузер для npm registry, который делает упор на скорость и удобство для разработчиков.
Никакого мусора. Никаких тормозных страниц. Просто мгновенная инфа по пакету, когда она нужна :)
Источник : [http://npmx.dev]
@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Это прям топ, если хочешь реально глубоко врубиться в TypeScript
Это красиво сделанный интерактивный ресурс, который объясняет концепты TypeScript визуально, а не только текстом и код-блоками.
Можно прямо “пощупать” как работают типы через живые визуализации, из-за чего сложные штуки доходят заметно быстрее.
И ещё кайф: есть опциональные клавиатурные хоткеи, так что можно плавно переключаться между примерами и концентрироваться на обучении, а не на бесконечном скролле :)
Источник : http://types.kitlangton.com
@WebDev_Plus
Это красиво сделанный интерактивный ресурс, который объясняет концепты TypeScript визуально, а не только текстом и код-блоками.
Можно прямо “пощупать” как работают типы через живые визуализации, из-за чего сложные штуки доходят заметно быстрее.
И ещё кайф: есть опциональные клавиатурные хоткеи, так что можно плавно переключаться между примерами и концентрироваться на обучении, а не на бесконечном скролле :)
Источник : http://types.kitlangton.com
@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Знакомьтесь: json-render × React Native
Еще один шаг к UGI (User-Generated Interfaces), на базе Generative UI.
Динамические, персонализированные интерфейсы под каждого пользователя без потери надежности.
Заранее заданные компоненты и экшены дают безопасный, предсказуемый результат.
@WebDev_Plus
Еще один шаг к UGI (User-Generated Interfaces), на базе Generative UI.
Динамические, персонализированные интерфейсы под каждого пользователя без потери надежности.
Заранее заданные компоненты и экшены дают безопасный, предсказуемый результат.
@WebDev_Plus
Нужно простое OTP (одноразовые пароли) для приложения?
Есть легковесная либa, которая позволяет без лишнего веса генерить TOTP/HOTP коды в JavaScript. Норм вариант для 2FA, флоу верификации или безопасного логина, когда не хочется тащить тяжёлые зависимости :)
http://github.com/hectorm/otpauth
@WebDev_Plus
Есть легковесная либa, которая позволяет без лишнего веса генерить TOTP/HOTP коды в JavaScript. Норм вариант для 2FA, флоу верификации или безопасного логина, когда не хочется тащить тяжёлые зависимости :)
http://github.com/hectorm/otpauth
@WebDev_Plus
👍1
Минималистичное опенсорсное приложение для заметок на macOS: http://github.com/erictli/scratch
Основано на Markdown, offline-first, и хранит все как обычные .md файлы, которые реально принадлежат тебе. Никакого облака, аккаунтов и вообще интернет не нужен.
Что кайфового:
➡️ WYSIWYG-редактор, но сохраняет в Markdown
➡️ Можно править заметки через Claude Code CLI
➡️ Подхватывает внешние изменения (например, если другие AI-агенты поменяли файлы)
➡️ Keyboard-first: шорткаты + command palette
➡️ Кастомные темы и типографика
➡️ Опциональная интеграция с Git для контроля версий
➡️ Легкое и быстрое
@WebDev_Plus
Основано на Markdown, offline-first, и хранит все как обычные .md файлы, которые реально принадлежат тебе. Никакого облака, аккаунтов и вообще интернет не нужен.
Что кайфового:
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Если тебе кажется, что используемые градиенты выглядят тусклыми или "грязными", попробуй вместо этого использовать цвета в пространстве OKLCH
В OKLCH оттенок задаётся как угол, а значит цвета, через которые проходит градиент, отличаются от тех, что получаются в sRGB
Можно подробнее почитать об этом здесь
@WebDev_Plus
В OKLCH оттенок задаётся как угол, а значит цвета, через которые проходит градиент, отличаются от тех, что получаются в sRGB
Можно подробнее почитать об этом здесь
@WebDev_Plus
👍1