WebDev+ | Веб-разработка

Знаешь ли ты, что GeoJSON со всеми границами стран весит всего ~1MB?

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

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

@WebDev_Plus

Новое в Chrome DevTools

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

@WebDev_Plus

Совет по CSS

Возможно, ты не знал об этом псевдоклассе в CSS.

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

@WebDev_Plus

Твои CSS box-shadow могли бы выглядеть лучше.

Посмотри на плагин Beautiful Shadows для Figma.
Он позволяет играть с высотой, яркостью и расстоянием для создания красивых, многослойных теней.

Копируй как CSS и вставляй прямо в свой проект или в Tailwind-тему 👍

@WebDev_Plus

Лайфхак для Visual Studio Code: как активировать автодополнение в терминале с помощью Cursor и Windsurf

@WebDev_Plus

Это как использовать GitHub на стероидах

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

@WebDev_Plus

Как придать стиль элементу на основе состояния его родителя в Tailwind

@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

CSS-совет

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

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

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

🔸Респонсивная верстка
🔸Поддержка любого количества изображений
🔸Без "магических чисел"
🔸Удобное управление через CSS-переменные

Отличный кейс для современных CSS-фич: shape(), sibling-index(), sibling-count() и других

@WebDev_Plus

Когда-нибудь приходилось сопоставлять сочетания клавиш между платформами, вроде CmdOrCtrl+Enter?

В Electron это есть из коробки, но, странным образом, нет подходящего пакета для стандартных KeyboardEvent в браузере. Поэтому мой товарищ сделал свой ☺️

npm i keymatch

Этот пакет также помогает обрабатывать односимвольные действия — без необходимости вручную проверять, что никакие модификаторы не зажаты.
Особенно удобно для приложений в стиле Linear, где, например, клавиша E — это архив, U — пометить как непрочитанное и т.д.

Как всегда, всё в open source: https://github.com/bholmesdev/keymatch

@WebDev_Plus

Хочешь добавить крутой эффект жидкого стекла в свой CSS-проект?

Этот бесплатный инструмент позволяет сгенерировать эффект с кучей настроек :)

Источник : http://glass3d.dev

@WebDev_Plus

Мощный трюк с JavaScript

Вместо console.log для просмотра объектов используй console.table — вывод будет в виде аккуратной и наглядной таблицы. Идеально для отладки структурированных данных

@WebDev_Plus

Прощай, dotenv 💔

В Node теперь можно читать .env файл без установки каких-либо зависимостей.

С помощью метода: process.loadEnvFile()

@WebDev_Plus

Совет по CSS:

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

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

@WebDev_Plus

Эффектная библиотека JavaScript для создания слайдеров с анимацией и эффектом параллакса.

> pnpm i smooothy

@WebDev_Plus

Отличная демонстрация функции if() в CSS

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

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

@WebDev_Plus

CSS совет

Знаешь поле для одноразового пароля (OTP)? Его можно реализовать с помощью всего одного input и нескольких строк CSS.

HTML: <input type="text" maxlength="6">

Код и демо: https://css-tip.com/single-digit-inputs/

Количество символов можно контролировать через атрибут maxlength

@WebDev_Plus

Лучший каталог пользовательского интерфейса для быстрого создания приборных панелей

С полным набором диаграмм, данных, форм и шаблонов.

✓ Открытый исходный код
✓ +35 компонентов React
✓ Возможность настройки с помощью Tailwind CSS 4

→ tremor․so

@WebDev_Plus

Устал каждый раз копипастить --set-upstream при пуше новой ветки? Есть git-настройка, которая решает это:

git config --global push.autoSetupRemote true

@WebDev_Plus