Web skills. Frontend. Уроки по веб-разработке

А ты знал, что в VS Code можно мгновенно выделить всё содержимое между парными скобками? 🤯Просто дважды кликни внутри пары {} или (), и VS Code автоматически выделит весь код, который находится между ними.Мелкая фишка, но при редактировании кода она может неожиданно сэкономить кучу времени

Этот опенсорсный веб-компонент автоматически генерирует скелетон-заглушки с shimmer-эффектом на основе вашего реального UI с множеством настроек.→ не нужно создавать отдельные skeleton-компоненты→ генерирует лоадеры по фактической структуре DOM→ настраиваемые shimmer-эффекты и стили→ работает с React, Vue, Svelte и другими фреймворкамиhttps://github.com/Aejkatappaja/phantom-ui

Познакомьтесь с Datatype – шрифтом, который превращает текст в графики. Доступен в Google Fonts и в Workspace.Простой синтаксис вроде {b:10,25,7,95} автоматически преобразуется в спарклайны, круговые диаграммы и бар-чарты, которые отлично смотрятся в ваших документах, презентациях и таблицахDatatype на Google Fonts

Нативный CSS-скоупинг: как изолировать стили без сборщиковЕсли вы работали с Vue или Svelte, то наверняка любите их локальные стили (scoping) — это когда код компонента заперт внутри него и не ломает верстку в других частях сайта. Раньше для этого приходилось настраивать CSS Modules или плагины для Webpack/Vite. Теперь браузеры учатся делать это сами.В Safari появилась интересная фича — контейнеры только по имени (Name-Only Containers).Обычно директива @container проверяет размеры экрана (например, «если родитель шире 500px»). Но если убрать условие размера и оставить только имя, мы получаем отличный инструмент для изоляции стилей:CSS/* Обозначаем границы нашего компонента карточки */.my-card { container-name: card-container; }/* Пишем стили, которые будут работать ТОЛЬКО внутри этой карточки */@container card-container { .title { color: royalblue; }}Теперь, даже если на сайте есть другие элементы с классом .title, наш цвет применится только внутри .my-card.

Comimi — это JS/TS-библиотека, которая позволяет создавать кастомизируемые интерфейсы для чтения манги и комиксов в вебе→ лейауты для чтения манги/комиксов→ несколько режимов просмотра и чтения→ гибкая настройка поведения ридера→ создано для веб-ридеров комиксовGitHub тут ✌️

Да начнутся голодные игры 😊

В контексте безопасности и необходимости замены версии можно сосредоточиться на уязвимости в библиотеке Swiper, которая была обнаружена в феврале 2026 года. Уязвимость связана с загрязнением прототипа (prototype pollution) и затрагивает версии Swiper от 6.5.1 до 12.1.1. Уязвимость CVE-2026-27212Описание: в файле shared/utils.mjs (строка 94) используется функция indexOf() для проверки пользовательского ввода на наличие запрещённых строк. Несмотря на предыдущую попытку устранить загрязнение прототипа путём проверки запрещённых ключей, остаётся возможность загрязнить Object.prototype с помощью специально сформированного ввода, использующего Array.prototype. Последствия:обход аутентификации;отказ в обслуживании (DoS);удалённое выполнение кода (RCE). Условия эксплуатации: уязвимость работает на Windows и Linux, а также в средах Node.js и Bun. Затрагивает приложения, которые обрабатывают вводимые пользователем данные с помощью Swiper. CVSS-оценка: 9.4 (критическая) по версии 4.0. Исправление: уязвимость устранена в версии 12.1.2. Аргументы для замены версииКритическая уязвимость. Уязвимость позволяет злоумышленнику выполнить произвольный код, обойти аутентификацию или вызвать отказ в обслуживании. Это представляет серьёзную угрозу для безопасности приложения.Наличие эксплойта. В открытых источниках доступен PoC (proof of concept), что упрощает эксплуатацию уязвимости. Официальное исправление. Разработчики Swiper выпустили обновлённую версию 12.1.2, которая устраняет проблему. Широкое распространение. Swiper — популярный пакет, используемый во многих проектах, что увеличивает вероятность его целевой атаки.РекомендацииНеобходимо обновить Swiper до версии 12.1.2 или более поздней. Это устранит уязвимость и снизит риски для безопасности приложения. Если обновление невозможно выполнить немедленно, следует ограничить доступ к приложению и внедрить компенсирующие меры, например мониторинг подозрительной активности.

Markdown-редактор для React, который реально ощущается отполированным 🙂MDXEditor – это редактор в стиле Notion с поддержкой продвинутого markdown, MDX, JSX, таблиц, блоков с кодом и прочего.→ современное и удобное редактирование текста→ гибкая система расширений с нормальной настройкой→ отлично вписывается в React- и MDX-разработку→ всё работает плавно и без ощущения сырого инструментаИдеально подойдёт для документации, блогов, CMS и всяких инструментов для написания контента ✋GitHub тут

Дошли наконец руки сбилдить релиз. Коллеги, кому не жалко, 🙃 подайте звезд на пропитание продвижение. 😃https://www.npmjs.com/package/phone-mask-native