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
В бета-релизе TypeScript 6.0 появились новые типы для Temporal!
Долгожданное предложение Temporal дошло до стадии 3 и, как ожидается, в ближайшем будущем будет добавлено в JavaScript. В TypeScript 6.0 теперь есть встроенные типы для Temporal API, так что ты можешь начать использовать его в своём TypeScript-коде уже сегодня через
Temporal уже можно использовать в нескольких рантаймах, так что ты сможешь скоро начать с ним экспериментировать. Документация по Temporal API доступна на MDN, хотя она всё ещё может быть неполной.
@WebDev_Plus
Долгожданное предложение Temporal дошло до стадии 3 и, как ожидается, в ближайшем будущем будет добавлено в JavaScript. В TypeScript 6.0 теперь есть встроенные типы для Temporal API, так что ты можешь начать использовать его в своём TypeScript-коде уже сегодня через
--target esnext или "lib": ["esnext"] (или более точечно через temporal.esnext).let yesterday = Temporal.Now.instant().subtract({
hours: 24,
});
let tomorrow = Temporal.Now.instant().add({
hours: 24,
});
console.log(`Yesterday: ${yesterday}`);
console.log(`Tomorrow: ${tomorrow}`);Temporal уже можно использовать в нескольких рантаймах, так что ты сможешь скоро начать с ним экспериментировать. Документация по Temporal API доступна на MDN, хотя она всё ещё может быть неполной.
@WebDev_Plus
Microsoft News
Announcing TypeScript 6.0 Beta
Today we are announcing the beta release of TypeScript 6.0! To get started using the beta, you can get it through npm with the following command: npm install -D typescript@beta TypeScript 6.0 is a unique release in that we intend for it to be the last release…
❤1👍1
Нашел UI-библиотеку, которая меня прям дико, дико, дико выбесила.
Выбесила тем, что почему так не устроено вообще все.
Oat:
* 6KB CSS + 2.2KB JS
* ноль зависимостей
* без фреймворка
* без сборки
* только семантический HTML
Пишешь
Пишешь
Пишешь
Никакого
Никаких
Просто HTML.
Доступность на месте. Навигация с клавиатуры есть. Темная тема уже включена.
Сделал Kailash Nadh (CTO в Zerodha).
https://github.com/knadh/oat
@WebDev_Plus
Выбесила тем, что почему так не устроено вообще все.
Oat:
* 6KB CSS + 2.2KB JS
* ноль зависимостей
* без фреймворка
* без сборки
* только семантический HTML
Пишешь
<button> и он выглядит нормально.Пишешь
<dialog> и он выглядит нормально.Пишешь
<input> и он выглядит нормально.Никакого
className="px-4 py-2 rounded-md bg-blue-500".Никаких
<Button variant="primary" size="md">.Просто HTML.
Доступность на месте. Навигация с клавиатуры есть. Темная тема уже включена.
Сделал Kailash Nadh (CTO в Zerodha).
https://github.com/knadh/oat
@WebDev_Plus
👍4
BridgeJS подъехал
Вышел новый JS <-> Swift bridge, и он безумно быстрее текущего механизма.
⚡️ По микробенчмаркам — примерно в 40 раз быстрее
⚡️ Можно импортировать прямо из TypeScript type definitions
https://github.com/swiftwasm/JavaScriptKit/releases/tag/0.44.0
Если работаешь со Swift + JS — это серьезный апгрейд.
@WebDev_Plus
Вышел новый JS <-> Swift bridge, и он безумно быстрее текущего механизма.
https://github.com/swiftwasm/JavaScriptKit/releases/tag/0.44.0
Если работаешь со Swift + JS — это серьезный апгрейд.
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔1