This media is not supported in your browser
VIEW IN TELEGRAM
Совет по CSS
Возможно, ты не знал об этом псевдоклассе в CSS.
Псевдокласс
@WebDev_Plus
Возможно, ты не знал об этом псевдоклассе в CSS.
Псевдокласс
:out-of-range выбирает элементы <input>, значение которых выходит за пределы, указанные в атрибутах min и max@WebDev_Plus
❤10
This media is not supported in your browser
VIEW IN TELEGRAM
Знаешь ли ты, что GeoJSON со всеми границами стран весит всего ~1MB?
При клике на глобус система вычисляет точку пересечения луча от курсора, конвертирует её в широту/долготу, определяет страну и отрисовывает её контур.
Для быстрого обновления формы используется кэширование, что ускоряет повторные перерисовки.😦
@WebDev_Plus
При клике на глобус система вычисляет точку пересечения луча от курсора, конвертирует её в широту/долготу, определяет страну и отрисовывает её контур.
Для быстрого обновления формы используется кэширование, что ускоряет повторные перерисовки.
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥11❤3
Хочешь добавить аутентификацию на свой сайт?
С этой библиотекой это займёт всего несколько минут.
✓ Бесплатно
✓ С открытым исходным кодом
✓ Совместимо с React, Astro, Vue, Next.js и другими
✓ Интеграция с Google, GitHub, X, Meta, Discord и многими другими
→ http://github.com/better-auth/better-auth
@WebDev_Plus
С этой библиотекой это займёт всего несколько минут.
✓ Бесплатно
✓ С открытым исходным кодом
✓ Совместимо с React, Astro, Vue, Next.js и другими
✓ Интеграция с Google, GitHub, X, Meta, Discord и многими другими
→ http://github.com/better-auth/better-auth
@WebDev_Plus
👍6
This media is not supported in your browser
VIEW IN TELEGRAM
Возможно, ты годами пользуешься Google Chrome — но знал ли ты об этом простом, но мощном приёме? 🤯
В инструментах разработчика браузера есть встроенная возможность делать скриншоты веб-страниц — без дополнительных расширений и сторонних утилит :)
@WebDev_Plus
В инструментах разработчика браузера есть встроенная возможность делать скриншоты веб-страниц — без дополнительных расширений и сторонних утилит :)
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14❤6
Совет по JavaScript
Используй новый метод
Прощай, громоздкие reduce-хаки - привет чистый и понятный код :)
@WebDev_Plus
Используй новый метод
Object.groupBy() — теперь можно группировать объекты по любому свойству в одну строкуПрощай, громоздкие reduce-хаки - привет чистый и понятный код :)
@WebDev_Plus
❤13👎1
This media is not supported in your browser
VIEW IN TELEGRAM
5 БЕСПЛАТНЫХ инструментов для веб-разработчиков
http://warp.dev - Альтернатива Claude Code
http://sevalla.com - Full-stack хостинг и бесплатный статический сайт
http://usehooks.com - React hooks с примерами
http://ray.so - Создание изображений из фрагментов кода
http://sarthology.github.io/Animatopy - Анимационные сниппеты CSS
@WebDev_Plus
http://warp.dev - Альтернатива Claude Code
http://sevalla.com - Full-stack хостинг и бесплатный статический сайт
http://usehooks.com - React hooks с примерами
http://ray.so - Создание изображений из фрагментов кода
http://sarthology.github.io/Animatopy - Анимационные сниппеты CSS
@WebDev_Plus
❤5
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по использованию инструментов Chrome Dev Tools
Быстрый способ включить/выключить кэш при разработке фронтенда
@WebDev_Plus
Быстрый способ включить/выключить кэш при разработке фронтенда
@WebDev_Plus
🤣3👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Приложение Stickies на macOS - недооценённый инструмент.
– Маленькие плавающие окошки для заметок в течение дня
– Можно закрепить поверх всех окон — остаются на виду
– Есть цветовая маркировка для организации мыслей
Скорее всего, не обновлялось ещё с 90-х, но стабильное ПО не требует лишнего вмешательства.
@WebDev_Plus
– Маленькие плавающие окошки для заметок в течение дня
– Можно закрепить поверх всех окон — остаются на виду
– Есть цветовая маркировка для организации мыслей
Скорее всего, не обновлялось ещё с 90-х, но стабильное ПО не требует лишнего вмешательства.
@WebDev_Plus
👍5💯3❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по CSS
Иногда проще задать поворот, используя единицу
@WebDev_Plus
Иногда проще задать поворот, используя единицу
turn вместо deg, особенно когда нужно указать значение больше 360 градусов.1 turn = 360 deg
@WebDev_Plus
❤8👍4🔥4💯1
This media is not supported in your browser
VIEW IN TELEGRAM
Нужна форма с пошаговой логикой и условиями?
С этой библиотекой ты реализуешь это, просто написав JSON.
✓ Поддерживает условия, переменные, циклы и многое другое
✓ Избавляет от тысяч строк трудночитаемого кода
✓ Отлично работает с React
@WebDev_Plus
С этой библиотекой ты реализуешь это, просто написав JSON.
✓ Поддерживает условия, переменные, циклы и многое другое
✓ Избавляет от тысяч строк трудночитаемого кода
✓ Отлично работает с React
$ npm install formity
@WebDev_Plus
❤4💯2
1👍10🔥2💯2
This media is not supported in your browser
VIEW IN TELEGRAM
VS Code Хак
Устали постоянно набирать
Настройте свой шорткат, например😎
Смотрите видео с пошаговой демонстрацией.
@WebDev_Plus
Устали постоянно набирать
console.log()?Настройте свой шорткат, например
cc → console.log(), срабатывающий при нажатии Tab Смотрите видео с пошаговой демонстрацией.
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤10👍3🤔1
This media is not supported in your browser
VIEW IN TELEGRAM
Эта библиотека фронтенд-компонентов - чистое кино 🔥
Красивые и современные UI-компоненты на все случаи жизни, идеально подходящие для твоих фронтенд- и React-проектов.
Надеюсь, будет полезно — https://nurui.vercel.app/
@WebDev_Plus
Красивые и современные UI-компоненты на все случаи жизни, идеально подходящие для твоих фронтенд- и React-проектов.
Надеюсь, будет полезно — https://nurui.vercel.app/
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6💯2👎1
This media is not supported in your browser
VIEW IN TELEGRAM
tldraw — лучшая аппликация для совместной работы на виртуальной доске 🏆
🔸 Внимание к деталям на высшем уровне. Даже штрихи масштабируются так, чтобы оставаться симметричными
🔸 Клавиатурные шорткаты отрабатывают мгновенно: shift+2 — сфокусироваться на выделении, shift+1 — показать всё
🔸 Есть SDK, который можно встроить куда угодно
@WebDev_Plus
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3❤🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Что, в Chrome теперь встроен API для AI-суммаризации
🔸 Без API ключей, без интернета Работает локально
🔸 Модель подгружается по запросу
🔸 Доступен глобально в последней версии Chrome Работает и в расширениях
У меня теперь куча идей для расширений под Chrome
https://developer.chrome.com/docs/ai/summarizer-api?hl=ru
@WebDev_Plus
У меня теперь куча идей для расширений под Chrome
https://developer.chrome.com/docs/ai/summarizer-api?hl=ru
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6
This media is not supported in your browser
VIEW IN TELEGRAM
Классный CSS трюк от подписчика
Можно легко изменить цвет курсора ввода с помощью свойства
@WebDev_Plus
Можно легко изменить цвет курсора ввода с помощью свойства
caret-color в CSS.@WebDev_Plus
❤14