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

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

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

@WebDev_Plus

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

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

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

@WebDev_Plus

CSS совет:

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

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

@WebDev_Plus

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

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

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

→ http://patterns.dev

@WebDev_Plus

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

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

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

@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

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

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

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

> cssgridgenerator.io

@WebDev_Plus

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

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

@WebDev_Plus

Изучаешь веб-разработку?

Обрати внимание на Learnify — простую и лаконичную платформу с обучающими материалами.

Пошаговые уроки с примерами помогут понять и создать рабочие проекты.

@WebDev_Plus

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

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

🔗 : termo.rajnandan.com

@WebDev_Plus

Лучшая бесплатная и open-source библиотека для добавления аутентификации на твой сайт.

Поддерживает React, Vue, Astro, Next.js, Nuxt и другие.

$ npm install better-auth

@WebDev_Plus

Существуют различные этапы выполнения JavaScript — как в браузере, так и в средах, таких как Node.

Код JS не может быть выполнен, пока не будет разобран в абстрактное синтаксическое дерево (AST). Однако стратегия разбора может повлиять на производительность — решающую роль играет ленивый (lazy) и нетерпеливый (eager) парсинг.

Узнайте, как движок V8 обрабатывает режимы ленивого и нетерпеливого парсинга и как они влияют на работу приложения:

👉 Заранее предупреждаем V8: более быстрый запуск JavaScript с помощью явных подсказок компиляции
https://v8.dev/blog/explicit-compile-hints

👉 Молниеносный парсинг, часть 1: оптимизация сканера
https://v8.dev/blog/scanner

👉 Молниеносный парсинг, часть 2: ленивый парсинг (lazy parsing)
v8.dev/blog/preparser

@WebDev_Plus

Создавай сайты быстрее с этой коллекцией UI-компонентов для копирования и вставки.

Поддержка React, Angular, Vue, Svelte и других

Основаны на Tailwind, легко кастомизируются

→ http://layoutsfortailwind.lalokalabs.dev

@WebDev_Plus

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

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

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

@WebDev_Plus

Новая коллекция бесплатных иконок для вашего сайта

+440 иконок с открытым исходным кодом в 2 стилях.

Доступны в SVG и для Figma:

→ http://glowui.com/icons

@WebDev_Plus

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

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

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

> https://snipzy.dev/

➡️ @byFrontDeveloper

Тёмная тема без media queries в CSS

С новым методом light-dark() можно загружать разные цвета в зависимости от темы (светлой или тёмной) — без использования @media (prefers-color-scheme)

@WebDev_Plus

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

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

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

@WebDev_Plus