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

Привет. Вот тебе самые топовые каналы по IT! ⚙️ Free Znanija (IT) — Самая огромная коллекция платных курсов, которые можно скачать бесплатно; 👩‍💻 IT Books — Самая огромная библиотека книг; 💻 Hacking & InfoSec Base — Крутой блог белого хакера; 🛡 CyberGuard — Всё про ИБ; 🤔 ИБ Вакансии— Всё, чтобы найти работу в ИБ; 👩‍💻 linux administration — Всё про Линукс; 👩‍💻 Программистика — Python, python и ещё раз python; 👩‍💻 GameDev Base — Всё про GameDev; 🖥 Coding Base — Мемы, полезные репозитории и инструменты, а так же софт: 😆 //code — Самые топовые мемы по IT: А так же крутой блог админа: Rahol Jey | тг вайб

Хочешь добавить аутентификацию на свой сайт? С этой библиотекой это займёт всего несколько минут. ✓ Бесплатно ✓ С открытым исходным кодом ✓ Совместимо с React, Astro, Vue, Next.js и другими ✓ Интеграция с Google, GitHub, X, Meta, Discord и многими другими → http://github.com/better-auth/better-auth @WebDev_Plus

Знаешь ли ты, что 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

console.log(
"Программирование — В С Ё!"
)

В 2025 году на кодинге уже не вывезешь, перспектива года - Кибербезопасность. Ловите полезные каналы, которые помогут ворваться в новое направление: 👍 ZeroDay — Подробные уроки по безопасности с нуля, эксплуатации уязвимостей, инструментам и свежие новости. 👨‍💻 Серверная Админа — Большое количество уроков, статей, книг и гайдов по устройству и настройке компьютерных сетей. База которую должен знать каждый

Лучшая альтернатива 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

🔥🔥🔥 @FreelanceFastTrackerBot Телеграм бот, который облегчает жизнь фрилансерам в поиске заказов сразу на 3 биржах: - kwork - fl - freelance 🧠 без категорий, часто они криво работают, ML - лучше. ✅подходит и 🅾️отклонить - кнопки для обучения бота. Обучается только под Ваши интересы. 🔍 уже на старте НЕ присылает 80-90% нерелевантных задач из 1000 в сутки. 🎲 после 1000+ реакций присылает только 5-10% малоподходящих задач, пытаясь не упустить интересующие задачи. 🚀 есть возможности быстрого обучения по архивным задачам или вашим архивным откликам на биржах, чтобы максимально быстро его обучить и наслаждаться его работой. @FreelanceFastTrackerBot 🚀🚀🚀🚀🚀

Когда-нибудь приходилось сопоставлять сочетания клавиш между платформами, вроде 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

🔒 Гигабайты платных материалов из айти школ выложили в Telegram Выбирай, всё бесплатно: 🤩385 ГБ — Python 🤩229 ГБ — JS, HTML, CSS 🤩422 ГБ — C, C++, C# 🤩147 ГБ — Java, PHP 🤩202 ГБ — Rust, Golang 🤩352 ГБ — Flutter, Kotlin, Swift 🤩168 ГБ — DevOps, СисАдмин 🤩242 ГБ — ИБ, Хакинг 🤩122 ГБ — Windows, Linux 🤩107 ГБ — Git, GitHub 🤩242 ГБ — БД (SQL и NoSQL) 🤩163 ГБ — QA-тестирование 🤩108 ГБ — ИИ, Machine Learning 🤩189 ГБ — Разработка игр 🤩171 ГБ — Разработка ботов 🤩612 ГБ — Собеседования в IT 🤩3942 ГБ — Другие направления База ежедневно обновляется ⏳

Мощный трюк с 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