Это невероятно мощный инструмент для 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

Знаешь ли ты, что элемент <input> может использовать атрибут form, чтобы связаться с формой по её id — и быть отправленным вместе с этой формой, даже если он находится вне её? 👀

В этом примере на PHP поле ввода, размещённое вне формы, добавляет аргумент в URL. При этом выводится только второе значение параметра (1337), связанное с этой формой.

@WebDev_Plus

Это одно из самых безумных творений на JavaScript 🤯

Сайт Генри Хеффернана создан с помощью Three.js — JavaScript-библиотеки для 3D-графики и погружает в полностью иммерсивный опыт прямо в браузере.

🔗: henryheffernan.com

@WebDev_Plus

Знаешь, что можно расшарить свой localhost прямо из Visual Studio Code — за секунды, без лишнего софта? Это встроенный порт-форвардинг.

😮 Безопасно?

• HTTPS-шифрование
• Открыт только нужный порт
• Видимость — на твой выбор (приват / паблик)
• Без возни с роутером и фаерволом

Но для продакшена не годится

@WebDev_Plus

Нужен источник вдохновения для веб-дизайна?

Этот ресурс предоставляет массу идей

Каждый день — новые страницы для вдохновения.

→ http://godly.website 😊

@WebDev_Plus

Это очень крутая библиотека UI-компонентов в ретро-стиле для фронтенд-разработчиков

Вдохновлённая 8-битной эстетикой, она идеально подойдёт для добавления ностальгического пиксель-арт настроения в современные веб-проекты. 🥹

🔗: 8bitcn.com

@WebDev_Plus

WOW! Этот сайт как соцсеть для AI-промптов

Огромная коллекция качественных промптов по темам:

🔸Программирование
🔸Дизайн
🔸Продуктивность
…и многое другое!

🔗: prompts.chat — исследуй, сохраняй, делись.

@WebDev_Plus

Улучшай UI своих веб-страниц с помощью этого каталога анимированных и плавных компонентов

🔗: http://animate-ui.com

@WebDev_Plus

Новый инструмент от Google для проектирования интерфейсов на базе ИИ — Stitch, поразил меня

Я ввёл запрос, и всего за несколько секунд он сгенерировал:

✅ Эстетичный дизайн UI
✅ Файл Figma
✅ HTML-код, готовый к использованию в продакшене

Попробовать можно здесь: stitch.withgoogle.com

@WebDev_Plus

Следующая версия Chrome включает новый JavaScript API для перевода текста с помощью ИИ.

Он бесплатный, так как работает прямо на устройстве пользователя. Что думаешь? 🥰

@WebDev_Plus

Небольшой, но стильный трюк для разработчиков

Сгенерируй визитку в стиле VS Code, идеально подходит для README на GitHub, личных сайтов или просто по фану.

Просто введи свои данные и карточка будет собрана автоматически - card.hekmon.com 😂

@WebDev_Plus

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

Этот практический курс как раз об этом.

В нём Боб проводит через более чем 170 задач и 6 проектов, чтобы обучить основам React 😊

@WebDev_Plus

Это одна из самых крутых вещей, сделанных на JavaScript

Это гениально и смешно =)

Кажется, что ты сможешь поставить галочку… но так ли это? 😂

🔗: codepen.io/jh3y/pen/LYNZwGm

@WebDev_Plus

Минималистичный сайт-портфолио с плавной анимацией и резким типографическим акцентом.

Подходит как референс для дизайнеров, кто хочет подчеркнуть индивидуальность через лаконичный UI ❤️

> https://duroc.ma/en/

@WebDev_Plus