Создание липкого заголовка в СSS

Блоки с «липким» позиционированием ведут себя как position: relative и position: fixed одновременно

Пока блок не достиг указанного расстояния от края окна браузера, он ведёт себя как относительно спозиционированный. Когда блок достигнет этой точки, то станет вести себя, как будто мы указали position: fixed

Когда таких заголовков несколько, они накладываются друг на друга, и пользователю виден последний из них

➡️ @FrontendPortal | #CSS #tutorial

Действительно классный гайд по тому, как прокачать навык работы с дейтпикерами в JS

Ты найдёшь примеры, понятные объяснения и отличный визуальный формат, который помогает разобраться во всех тонкостях создания дейтпикеров на чистом JavaScript.

Читайте здесь 👍

➡️ @FrontendPortal | #article

Ленивая загрузка автоматически воспроизводимых видео, которые находятся ниже первого экрана

Установите preload="none" и удалите атрибут autoplay у видео, чтобы оно не загружалось по умолчанию. Затем, используя API Intersection Observer, мы можем воспроизводить видео, когда оно становится видимым в области просмотра

Посмотреть это в действии: тык

➡️ @FrontendPortal | #tip by Shripal Soni

ThiingsGrid

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

Подходит для отображения больших наборов данных в виде сетки с кастомными рендерами ячеек ✌️

GitHub: thiings-grid

➡️ @FrontendPortal | #resourse

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