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

Связь: @devmangx
Download Telegram
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
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
5
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по использованию инструментов Chrome Dev Tools

Быстрый способ включить/выключить кэш при разработке фронтенда

@WebDev_Plus
🤣3👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Приложение Stickies на macOS - недооценённый инструмент.

– Маленькие плавающие окошки для заметок в течение дня
– Можно закрепить поверх всех окон — остаются на виду
– Есть цветовая маркировка для организации мыслей

Скорее всего, не обновлялось ещё с 90-х, но стабильное ПО не требует лишнего вмешательства.

@WebDev_Plus
👍5💯32
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по CSS

Иногда проще задать поворот, используя единицу 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

$ npm install formity


@WebDev_Plus
4💯2
К слову о "смерти" PHP - по некоторой статистике PHP используют более 74% веб-сайтов

@WebDev_Plus
1👍10🔥2💯2
This media is not supported in your browser
VIEW IN TELEGRAM
VS Code Хак

Устали постоянно набирать console.log()?

Настройте свой шорткат, например ccconsole.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
Please open Telegram to view this post
VIEW IN TELEGRAM
6💯2👎1