Media is too big
VIEW IN TELEGRAM
Отличная демонстрация функции
Функция
CSS постепенно превращается в полноценный язык программирования :)
@WebDev_Plus
if() в CSS Функция
if() в CSS позволяет использовать условную логику прямо внутри значений CSS-свойств.CSS постепенно превращается в полноценный язык программирования :)
@WebDev_Plus
1👍17❤4
This media is not supported in your browser
VIEW IN TELEGRAM
Эффектная библиотека JavaScript для создания слайдеров с анимацией и эффектом параллакса.
>
@WebDev_Plus
>
pnpm i smooothy@WebDev_Plus
🔥10❤4
Совет по CSS:
создавай динамические тултипы только с помощью CSS, используя функцию
Вы можете увидеть его в действии здесь
@WebDev_Plus
создавай динамические тултипы только с помощью CSS, используя функцию
attr()Вы можете увидеть его в действии здесь
@WebDev_Plus
👍8❤3
Прощай, 💔
В Node теперь можно читать
С помощью метода:
@WebDev_Plus
dotenv В Node теперь можно читать
.env файл без установки каких-либо зависимостей.С помощью метода:
process.loadEnvFile()@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤12
This media is not supported in your browser
VIEW IN TELEGRAM
Мощный трюк с JavaScript
Вместо
@WebDev_Plus
Вместо
console.log для просмотра объектов используй console.table — вывод будет в виде аккуратной и наглядной таблицы. Идеально для отладки структурированных данных @WebDev_Plus
❤18🔥9
This media is not supported in your browser
VIEW IN TELEGRAM
Хочешь добавить крутой эффект жидкого стекла в свой CSS-проект?
Этот бесплатный инструмент позволяет сгенерировать эффект с кучей настроек :)
Источник : http://glass3d.dev
@WebDev_Plus
Этот бесплатный инструмент позволяет сгенерировать эффект с кучей настроек :)
Источник : http://glass3d.dev
@WebDev_Plus
👍9❤3
This media is not supported in your browser
VIEW IN TELEGRAM
Когда-нибудь приходилось сопоставлять сочетания клавиш между платформами, вроде CmdOrCtrl+Enter?
В Electron это есть из коробки, но, странным образом, нет подходящего пакета для стандартных KeyboardEvent в браузере. Поэтому мой товарищ сделал свой☺️
Этот пакет также помогает обрабатывать односимвольные действия — без необходимости вручную проверять, что никакие модификаторы не зажаты.
Особенно удобно для приложений в стиле Linear, где, например, клавиша E — это архив, U — пометить как непрочитанное и т.д.
Как всегда, всё в open source: https://github.com/bholmesdev/keymatch
@WebDev_Plus
В Electron это есть из коробки, но, странным образом, нет подходящего пакета для стандартных KeyboardEvent в браузере. Поэтому мой товарищ сделал свой
npm i keymatch
Этот пакет также помогает обрабатывать односимвольные действия — без необходимости вручную проверять, что никакие модификаторы не зажаты.
Особенно удобно для приложений в стиле Linear, где, например, клавиша E — это архив, U — пометить как непрочитанное и т.д.
Как всегда, всё в open source: https://github.com/bholmesdev/keymatch
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4❤2
CSS-совет
Создай бесконечную бегущую строку с логотипами с помощью современных возможностей CSS — буквально за несколько строк кода.
Смотреть пример
Что в этом нового?
🔸 Респонсивная верстка
🔸 Поддержка любого количества изображений
🔸 Без "магических чисел"
🔸 Удобное управление через CSS-переменные
Отличный кейс для современных CSS-фич: shape(), sibling-index(), sibling-count() и других
@WebDev_Plus
Создай бесконечную бегущую строку с логотипами с помощью современных возможностей CSS — буквально за несколько строк кода.
Смотреть пример
Что в этом нового?
Отличный кейс для современных CSS-фич: shape(), sibling-index(), sibling-count() и других
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6
Лучшая альтернатива
Библиотека утилит для JavaScript
✓ Без внешних зависимостей
✓ debounce, pick, chunk, cloneDeep, countBy...
✓ Оптимизирована для Node 18+ и современных браузеров
@WebDev_Plus
lodashБиблиотека утилит для JavaScript
✓ Без внешних зависимостей
✓ debounce, pick, chunk, cloneDeep, countBy...
✓ Оптимизирована для Node 18+ и современных браузеров
pnpm install es-toolkit
import { debounce, pick, chunk } from 'es-toolkit'
// 1. pick — выбирает конкретные свойства из объекта
const user = { name: 'Midu', email: 'midu@gmail.com', edad: 40 }
const profile = pick(user, ['name'])
console.log(profile) // { name: 'Midu' }
// 2. chunk — разбивает массив на группы
const nums = [1, 2, 3, 4, 5, 6, 7]
console.log(chunk(nums, 3))
// Результат: [[1, 2, 3], [4, 5, 6], [7]]
// 3. debounce — откладывает выполнение до завершения ввода
const debouncedSearch = debounce(query => {
console.log('Поиск:', query)
}, 500) // задержка 0.5 с
const searchInput = document.getElementById('buscador')
searchInput.addEventListener('input', e => {
debouncedSearch(e.target.value)
})@WebDev_Plus
❤1😁1
This media is not supported in your browser
VIEW IN TELEGRAM
Это как использовать GitHub на стероидах
Просто добавь
@WebDev_Plus
Просто добавь
explain перед github в URL любого репозитория — и ты сможешь задавать вопросы по коду, общаться с репозиторием в чате и даже скопировать всю структуру директорий. @WebDev_Plus
🔥8❤4
This media is not supported in your browser
VIEW IN TELEGRAM
Лайфхак для Visual Studio Code: как активировать автодополнение в терминале с помощью Cursor и Windsurf
@WebDev_Plus
@WebDev_Plus
❤3
This media is not supported in your browser
VIEW IN TELEGRAM
Твои CSS box-shadow могли бы выглядеть лучше.
Посмотри на плагин Beautiful Shadows для Figma.
Он позволяет играть с высотой, яркостью и расстоянием для создания красивых, многослойных теней.
Копируй как CSS и вставляй прямо в свой проект или в Tailwind-тему👍
@WebDev_Plus
Посмотри на плагин Beautiful Shadows для Figma.
Он позволяет играть с высотой, яркостью и расстоянием для создания красивых, многослойных теней.
Копируй как CSS и вставляй прямо в свой проект или в Tailwind-тему
@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
Возможно, ты не знал об этом псевдоклассе в 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