200+ ресурсов для веб-разработки в одном месте:

→ Платформы для обучения
→ Анимации и эффекты
→ UI-библиотеки
→ Поиск работы
→ Хостинг и деплой
→ Инструменты для разработчиков
...и многое другое 😶

> https://web-dev-resources.com/list/#/

@WebDev_Plus

Хочешь реализовать drag & drop в веб-приложении?

Вот библиотека, проверенная временем и тысячами разработчиков — работает стабильно, легко внедряется и просто спасает.

Если хочешь добавить перетаскивание — это мастхэв 🥇

@WebDev_Plus

Этот сайт — настоящая находка для веб-разработчиков

Полон готовых к использованию фрагментов кода для впечатляющих UI-компонентов.

Просто скопируй код и вставь в свой проект. 😎

> https://snipzy.dev/

➡️ @byFrontDeveloper

Если открыть DevTools (правый клик → Inspect), а затем зажать кнопку обновления, появится опция: "Empty Cache and Hard Reload"

Это очень удобный способ очистить кэш и принудительно загрузить последнюю версию сайта в браузере

Ставь лайк если полезно 😎

@WebDev_Plus

Хочешь добавить интерфейс, похожий на терминал, в свои веб-приложения?

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

🔗 : termo.rajnandan.com

@WebDev_Plus

Новый эффект от Apple, воссозданный с помощью HTML и CSS — благодаря SVG-фильтрам.

👉 Смотри на кодепен

@WebDev_Plus

Это невероятно мощный инструмент для CSS Grid

Генерируй любую сетку, какую только можешь представить, всего за пару кликов — никакого ручного кода

Идеально для разработчиков, ценящих эффективность 😎

> cssgridgenerator.io

@WebDev_Plus

Вот как работает подмена DOM-объектов:

Когда вы создаёте элемент с id, браузер автоматически создаёт глобальную переменную с таким именем:

<a id="foo"></a>

Теперь window.foo указывает на этот элемент.

Но если вы создаёте несколько элементов с одинаковым id:

<a id="foo"></a>
<a id="foo"></a>

Теперь window.foo становится HTMLCollection, а не отдельным элементом.

Если вы добавите атрибут name:

<a id="foo" name="bar" href="..."></a>

Тогда window.foo.bar будет указывать на этот элемент
(работает в браузерах Chromium/WebKit, но не в Firefox).

Теперь представьте распространённый JS-паттерн:

var someObject = window.someObject || {};

Он должен подставить объект по умолчанию, если window.someObject не существует.
Но если window.someObject был подменён через HTML, то вместо объекта будет DOM-элемент и скрипт это молча примет.

Теперь рассмотрим JS-логику:

let imgSrc = someObject.avatar;

Если атакующий подменит someObject.avatar таким образом:

<a id="someObject"></a>
<a id="someObject" name="avatar" href='cid:"onerror=alert(1)//'></a>

И если этот HTML вставлен, например, через innerHTML, то может получиться:

<img src="cid:" onerror="alert(1)//">

И это вызовет XSS 🏆

Вот краткий разбор этой уязвимости и лабораторной работы от WebSecAcademy

@WebDev_Plus

Паришься с подбором шрифтов для UI? 🔥

Вот тулза, которая подберёт идеальную пару основного и второстепенного шрифта, да ещё и на реальных примерах

Больше никаких страданий с типографикой: https://www.uifonts.app/

@WebDev_Plus

Изучи паттерны проектирования на JavaScript

Лучший бесплатный ресурс:

✅ Примеры для React, Vue, Angular, TypeScript
✅ Книга на 400+ страниц с реальными примерами
✅ Интерактивные упражнения и пошаговые объяснения

→ http://patterns.dev

@WebDev_Plus

CSS совет:

Используй свойство scroll-margin-top, чтобы липкий (sticky) хедер не перекрывал контент при переходе по якорю (#anchor).

Прочитай этот гайд из 23 нестандартных приёмов и трюков для CSS, которые редко встречаются в стандартных туториалах ✊

@WebDev_Plus

Преобразуй любой репозиторий GitHub в чистую документацию за секунды

Просто замени github на gittodoc в URL репозитория — и мгновенно получишь удобный вид документации

Особенно полезно для быстрой индексации AI-инструментами для кода, такими как Cursor ✊

@WebDev_Plus