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

Преобразуй любой репозиторий GitHub в чистую документацию за секунды Просто замени github на gittodoc в URL репозитория — и мгновенно получишь удобный вид документации Особенно полезно для быстрой индексации AI-инструментами для кода, такими как Cursor ✊ @WebDev_Plus

Ищем новичков во фронтенд-разработке и вёрстке сайтов. Хотим помочь тебе собрать сайт, как полноценный заказ даже если ты никогда не кодил. А именно: - Сверстать веб-сайт на HTML + CSS; - Реализовать функционал на JavaScript; - Пощупать фронтенд-фреймворк Angular; - Подключить Backend и загрузить сайт на хостинг; - Использовать ChatGPT и Giga, как профи. + Помощь куратора на каждом этапе. Чтобы в итоге ты своими руками разработал качественный сайт, который не стыдно добавить в портфолио или продать. Такой опыт можно получить на бесплатном практикуме за 7 дней. 👉 Приходи на бесплатное обучение и зови с собой друзей Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.

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

Разыгрываем лучшие гаджеты года: 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