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
This media is not supported in your browser
VIEW IN TELEGRAM
Видел эти мелкие “мертвые зоны” между плотно стоящими элементами списка? Я тоже стал замечать их чаще.
Лечится просто: добавь каждому элементу CSS-псевдоэлемент
Нюанс: чтобы не перекрыть клики, если внутри есть ссылки/кнопки, можно добавить
@WebDev_Plus
Лечится просто: добавь каждому элементу CSS-псевдоэлемент
::before, чтобы расширить кликабельную область:.item {
position: relative;
}
.item::before {
content: "";
position: absolute;
inset: -10px 0; /* расширяем область по вертикали на 10px */
}Нюанс: чтобы не перекрыть клики, если внутри есть ссылки/кнопки, можно добавить
pointer-events: none на ::before, а клики обрабатывать на самом .item (или наоборот, в зависимости от разметки).@WebDev_Plus
Идеальный boilerplate, чтобы быстро собирать SaaS-проекты
Сделан на Next.js и уже из коробки настроен: аутентификация, подписки Stripe, база данных, авторизация, Tailwind и современные UI-компоненты.
Больше не нужно убивать дни на склейку auth и оплат. Просто клонируешь, настраиваешь и начинаешь пилить реальный продукт :)
Источник: http://github.com/webdevcody/ppai-next-starter
@WebDev_Plus
Сделан на Next.js и уже из коробки настроен: аутентификация, подписки Stripe, база данных, авторизация, Tailwind и современные UI-компоненты.
Больше не нужно убивать дни на склейку auth и оплат. Просто клонируешь, настраиваешь и начинаешь пилить реальный продукт :)
Источник: http://github.com/webdevcody/ppai-next-starter
@WebDev_Plus
Совет по HTML/JavaScript:
Если использовать у кнопки атрибут commandfor, можно прямо указать на интерактивный элемент (например, <dialog> или popover) и задать, что именно с ним сделать.
@WebDev_Plus
Если использовать у кнопки атрибут commandfor, можно прямо указать на интерактивный элемент (например, <dialog> или popover) и задать, что именно с ним сделать.
@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Этот ресурс просто бомба. Если вы ищете SVG-файл любого логотипа, то здесь он точно есть. Здесь доступно 581 файл.
Оптимизированы и готовы к использованию в React, Vue, Angular и SVG:
→ https://svgl.app
@WebDev_Plus
Оптимизированы и готовы к использованию в React, Vue, Angular и SVG:
→ https://svgl.app
@WebDev_Plus
🗿1
JavaScript-совет
К элементам массива можно обращаться с "отрицательными" индексами через метод
@WebDev_Plus
К элементам массива можно обращаться с "отрицательными" индексами через метод
at().@WebDev_Plus
❤3
This media is not supported in your browser
VIEW IN TELEGRAM
В теории графов есть алгоритмы, которые находят кратчайший путь между двумя узлами. Я сделал такой алгоритм на чистом CSS (включая отрисовку самого графа).
Перетаскивай узлы, и кратчайший путь будет пересчитываться в реальном времени!
[https://css-tip.com/graph-theory/]
Демо, которое работает на всех современных CSS-фичах🤩
@WebDev_Plus
Перетаскивай узлы, и кратчайший путь будет пересчитываться в реальном времени!
[https://css-tip.com/graph-theory/]
Демо, которое работает на всех современных CSS-фичах
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Вышла лучшая библиотека React 2026 года
Она называется Sileo и представляет собой компонент уведомлений.
✓ Красивый по умолчанию, не требует настройки
✓ Несколько состояний и положений
✓ Анимация с помощью SVG
→
@WebDev_Plus
Она называется Sileo и представляет собой компонент уведомлений.
✓ Красивый по умолчанию, не требует настройки
✓ Несколько состояний и положений
✓ Анимация с помощью SVG
→
npm install sileo@WebDev_Plus
👍6❤4
Функция calc() в CSS
Она позволяет делать математические вычисления прямо в CSS, чтобы верстка была гибкой и лучше адаптировалась под разные экраны.
Поддерживает сложение, вычитание, умножение и деление
Можно смешивать разные единицы: %, px, rem, vw
Вокруг операторов + и - нужны пробелы
Часто используют в адаптивной верстке: динамическая ширина, отступы, “плавающие” размеры шрифта.
@WebDev_Plus
Она позволяет делать математические вычисления прямо в CSS, чтобы верстка была гибкой и лучше адаптировалась под разные экраны.
Поддерживает сложение, вычитание, умножение и деление
Можно смешивать разные единицы: %, px, rem, vw
Вокруг операторов + и - нужны пробелы
Часто используют в адаптивной верстке: динамическая ширина, отступы, “плавающие” размеры шрифта.
@WebDev_Plus