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

Паришься с подбором шрифтов для 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

Разыгрываем лучшие гаджеты года: iPhone 16 Pro Max на 256 ГБ, 15-дюймовый MacBook Air 16/256 ГБ и PlayStation 5 Pro! Чтобы их получить, достаточно подписаться на: • наш канал «Техночат» • И на канал «Больше, чем экономика» Нажимаете после этого на кнопку «Участвовать» и ждёте 2 июля — в этот день в 20:00 по московскому времени рандомайзер выберет трёх победителей. Первый получит айфон, второй — макбук, а третий — PlayStation. Призы бесплатно вышлем в ближайший к вам пункт выдачи СДЭК, поэтому уточните, есть ли он в вашей стране.

Хочешь добавить эффектные компоненты в стиле neobrutalism в свои фронтенд-проекты? Эта open-source UI-библиотека предлагает смелый и уникальный дизайн, который сразу выделит твой проект среди остальных neobrutalism.dev @WebDev_Plus

200+ ресурсов для веб-разработки в одном месте: → Платформы для обучения → Анимации и эффекты → UI-библиотеки → Поиск работы → Хостинг и деплой → Инструменты для разработчиков ...и многое другое 😶 > https://web-dev-resources.com/list/#/ @WebDev_Plus

Хочешь оптимизировать изображения для своего сайта или приложения? Тебе нужен этот новый бесплатный ресурс для разработчиков ✓ Преобразует в JPG, WEBP, AVIF и JXL ✓ Уменьшает размер изображений до 98% → imgto․xyz Вот пример: с 3MB PNG до 60KB в AVIF @WebDev_Plus

Коллекция бесплатных шаблонов для вашего сайта 1500+ шаблонов для всего: – лендинги, портфолио, блоги – Tailwind, React, Next.js, Laravel – даже админки и магазины есть > http://htmlrev.com @WebDev_Plus

Эта демка на Three.js от Renault — просто взрыв мозга Так круто они продвигают свою машину, что невозможно оторваться. Глянь сам: https://renaultespace.littleworkshop.fr/ 💩 @WebDev_Plus