Broadcast Channel API

Broadcast Channel API позволяет контекстам браузера (browser contexts) обмениваться данными друг с другом. К браузерным контекстам относятся такие элементы, как окно, вкладка, iframe и т.д.

По причинам безопасности контексты, обменивающиеся данными, должны принадлежать одному источнику (same origin). Один источник означает одинаковый протокол, домен и порт

➡️ @FrontendPortal | #js

Интерактивный конструктор border-radius

Нашёл сайт, где можно поэкспериментировать с border-radius и скопировать готовые значения в свой CSS-код

Генерируются сразу 8 значений для border-radius. Также можно настроить размер элемента

Тестируем здесь ✌️

➡️ @FrontendPortal | #resourse

Наконец-то! Node теперь может выполнять TypeScript-файлы

Стабильно, без конфигурации и без зависимостей

Доступно начиная с версий 22.18.0 и 25.2.0.

➡️ @FrontendPortal

HTML Tip: Самый простой способ отключить несколько элементов формы

Мы можем установить атрибут disabled на элемент <fieldset>, чтобы автоматически отключить все вложенные элементы формы.

➡️ @FrontendPortal | #tip by Shripal Soni

Определяем, когда пользователь переключает вкладки браузера и меняем favicon

Этот трюк можно реализовать с помощью Page Visibility API

Page Visibility API — это API браузера, который проверяет видимость страницы. Он помогает определять, скрыта или свернута текущая страница, и тем самым позволяет контролировать ее поведение и использование ресурсов

➡️ @FrontendPortal | #tip #js

Огромная коллекцию из 1500+ отобранных API для ваших проектов, от погоды и карт до генераторов картинок и NLP-сервисов

Забираем с сайта или с GitHub 🍯

➡️ @FrontendPortal | #resourse

HTML эволюционирует, чтобы использовать меньше JS 🤩

Новый атрибут command позволяет вызывать методы DOM-элементов.

Он уже работает в Chrome, Edge, Firefox и скоро появится в Safari.

Вот так можно открывать/закрывать модалки всего двумя строками HTML

➡️ @FrontendPortal

99% разрабов не знают об этом хаке в Chrome DevTools 🤯

Вы можете включить тёмную тему на любом сайте, даже если у него нет собственного тёмного режима. Для этого откройте DevTools, нажмите на иконку кисти и выберите Automatic Dark Mode.

Это идеально, когда вы проектируете тёмный режим для своего сайта - вы моментально получаете предварительный просмотр интерфейса примерно на 90%.

➡️ @FrontendPortal

Совет по Chrome Dev Tools: Инспекция стилей плейсхолдера

По умолчанию Chrome DevTools не отображает стили ::placeholder при инспекции элементов.

Можно включить настройку "Show user agent shadow DOM", чтобы отображать shadow DOM браузера, генерируемый для различных встроенных элементов, таких как <input>, <progress>, <video> и др.

Мы можем инспектировать эти элементы shadow DOM, созданные user agent'ом, чтобы просматривать/редактировать стили плейсхолдера, ползунка у range input и т. п.

➡️ @FrontendPortal | #tip by Shripal Soni

Создавайте отличную продуктовую документацию

Эта React-библиотека под названием Fumadocs упрощает весь процесс за счёт компонентов, лэйаутов и всего необходимого функционала для создания современных и аккуратных документаций.

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

GitHub: fumadocs

➡️ @FrontendPortal | #resourse