WebDev+ | Веб-разработка
8.3K subscribers
508 photos
242 videos
10 files
703 links
Присоединяйтесь к нашему каналу и погрузитесь в мир веб-разработки

Связь: @devmangx
Download Telegram
Media is too big
VIEW IN TELEGRAM
Отличная демонстрация функции if() в CSS

Функция if() в CSS позволяет использовать условную логику прямо внутри значений CSS-свойств.

CSS постепенно превращается в полноценный язык программирования :)

@WebDev_Plus
1👍174
This media is not supported in your browser
VIEW IN TELEGRAM
Эффектная библиотека JavaScript для создания слайдеров с анимацией и эффектом параллакса.

> pnpm i smooothy

@WebDev_Plus
🔥104
Совет по CSS:

создавай динамические тултипы только с помощью CSS, используя функцию attr()

Вы можете увидеть его в действии здесь

@WebDev_Plus
👍83
Прощай, 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

Вместо 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
👍93
This media is not supported in your browser
VIEW IN TELEGRAM
Когда-нибудь приходилось сопоставлять сочетания клавиш между платформами, вроде CmdOrCtrl+Enter?

В 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
🔥42
CSS-совет

Создай бесконечную бегущую строку с логотипами с помощью современных возможностей CSS — буквально за несколько строк кода.

Смотреть пример

Что в этом нового?

🔸Респонсивная верстка
🔸Поддержка любого количества изображений
🔸Без "магических чисел"
🔸Удобное управление через 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
Лучшая альтернатива 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
Как придать стиль элементу на основе состояния его родителя в Tailwind

@WebDev_Plus
6
This media is not supported in your browser
VIEW IN TELEGRAM
Это как использовать GitHub на стероидах

Просто добавь explain перед github в URL любого репозитория — и ты сможешь задавать вопросы по коду, общаться с репозиторием в чате и даже скопировать всю структуру директорий.

@WebDev_Plus
🔥84
This media is not supported in your browser
VIEW IN TELEGRAM
Лайфхак для Visual Studio Code: как активировать автодополнение в терминале с помощью Cursor и Windsurf

@WebDev_Plus
3
This media is not supported in your browser
VIEW IN TELEGRAM
Твои CSS box-shadow могли бы выглядеть лучше.

Посмотри на плагин 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.

Псевдокласс :out-of-range выбирает элементы <input>, значение которых выходит за пределы, указанные в атрибутах min и max

@WebDev_Plus
10
This media is not supported in your browser
VIEW IN TELEGRAM
Новое в Chrome DevTools

Копирование всех консольных сообщений за один раз

@WebDev_Plus
4👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Знаешь ли ты, что GeoJSON со всеми границами стран весит всего ~1MB?

При клике на глобус система вычисляет точку пересечения луча от курсора, конвертирует её в широту/долготу, определяет страну и отрисовывает её контур.

Для быстрого обновления формы используется кэширование, что ускоряет повторные перерисовки. 😦

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥113
Хочешь добавить аутентификацию на свой сайт?
С этой библиотекой это займёт всего несколько минут.

✓ Бесплатно
✓ С открытым исходным кодом
✓ Совместимо с 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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍146
Совет по JavaScript

Используй новый метод Object.groupBy() — теперь можно группировать объекты по любому свойству в одну строку

Прощай, громоздкие reduce-хаки - привет чистый и понятный код :)

@WebDev_Plus
13👎1