Frontend Portal

Extend UI — опенсорсная библиотека React-компонентов для приложений, которые активно работают с документами. В ней есть готовые компоненты для просмотра PDF, DOCX, XLSX и CSV, загрузки и навигации по файлам, работы с цитатами, электронными подписями, разделения документов и других сценариев. Компоненты распространяются по лицензии MIT, поддерживают кастомизацию и могут подключаться к проекту через registry в стиле shadcn. https://github.com/extend-hq/ui ➡️ @FrontendPortal

Ленивая загрузка автоматически воспроизводимых видео, которые находятся ниже первого экрана Установите preload="none" и удалите атрибут autoplay у видео, чтобы оно не загружалось по умолчанию. Затем, используя API Intersection Observer, мы можем воспроизводить видео, когда оно становится видимым в области просмотра Посмотреть это в действии: тык ➡️ @FrontendPortal | #tip by Shripal Soni

Локальное SEO: как продвигать офлайн-бизнес через поиск, Яндекс.Карты и 2ГИС 13 августа пройдет первый бесплатный вебинар из серии «Как превратить поиск и нейросети в канал стабильных продаж» от Рег.Решений и Rocket Business. На встрече эксперты разберут: — как привлекать клиентов из локального поиска; — как работать с Яндекс.Картами и 2ГИС; — какие инструменты помогают продвигать офлайн-бизнес; — какие метрики использовать для оценки эффективности SEO. 📅 13 августа, 14:00–15:00 (Мск) Зарегистрироваться на вебинар

Хотите, чтобы сайт ощущался мгновенно отзывчивым? <script type="speculationrules"> позволяет пререндерить следующую страницу ещё ДО того, как пользователь кликнет по ссылке. Например, когда пользователь наводит курсор на ссылку. Это веб-стандарт. Просто HTML. Без библиотек. Минус: поддержка сейчас около 70% – Safari и Firefox пока не поддерживают. Плюс: если браузер не поддерживает эту возможность, тег просто игнорируется. И всё ➡️ @FrontendPortal

Действительно классный гайд по тому, как прокачать навык работы с дейтпикерами в JS Ты найдёшь примеры, понятные объяснения и отличный визуальный формат, который помогает разобраться во всех тонкостях создания дейтпикеров на чистом JavaScript. Читайте здесь 👍 ➡️ @FrontendPortal | #article

🔴 Тестовое собеседование на Frontend-разработчика со старшим разработчиком ex. Сбер 13 августа(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика. Как это будет: 📂 Даниил Дмитриев, старший разработчик в R-Vision, ex. Сбер, будет задавать реальные вопросы и задачи разработчику-добровольцу 📂 Даниил будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью 📂 В конце можно будет задать любой вопрос Даниилу Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы. Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot Реклама. О рекламодателе.

Интересная коллекция UI-компонентов с физическими анимациями и эффектами в стиле игровых интерфейсов. Подойдёт как для разработки UI с помощью AI-инструментов, так и для обычной ручной вёрстки. Такие компоненты помогают сделать интерфейс более живым и интерактивным ✌️ feralui.dev ➡️ @FrontendPortal

Простой способ создания эффекта бесконечной карусели с помощью CSS Видели ли вы подобную анимацию на сайтах в разделе «Партнеры/клиенты»? Вот простая схема создания этого фальшивого эффекта бесконечной карусели 🦆 В качестве дополнительного совета, если вы не хотите дублировать элементы вручную или указывать количество элементов в CSS, вы можете использовать некоторые манипуляции JavaScript DOM и пользовательские свойства CSS (вот пример продвинутой реализации) ➡️ @FrontendPortal | #tutorial #OldButGold

Есть такая штука — SEO. Это когда ты ведешь условно-бесплатный трафик из поисковиков на сайт, сервис или блог. Причём она зачастую даёт лидов в 5-10 раз дешевле, чем по рекламе. А работать может годами, если один раз всё правильно настроить. Но у 90% людей это вызывает панику, потому что вокруг сео много мутных типов и мифов. А нормальных сеошников можно буквально пересчитать по пальцам. И один из лучших в сфере — Антон Маркин. Он уже 16 лет занимается SEO и публично продвигает сайты подписчиков, пошагово показывает все ошибки и делится только тем, что реально работает. Антон даже полных новичков учит настраивать SEO так, что клиенты платят им за результат годами. А владельцы сайтов самостоятельно оптимизируют свои страницы и получают самый дешёвый целевой трафик. В общем, если у вас свой сайт или вы начинающий сеошник и хотите быстро выйти на стабильные 100к в месяц — обязательно подпишитесь на Антона: @markin_seo

CSS Совет: Синтаксис диапазонов для медиа-запросов Вы, возможно, не знали об этом более удобном и понятном синтаксисе диапазонов для определения медиа-запросов Теперь мы можем использовать операторы <, >, =, <=, >= для определения диапазонов в медиа-запросах, чтобы упростить их понимание ✅ Поддерживается во всех основных браузерах с марта 2023 года (94.01%) ✅ Доступен плагин PostCSS для неподдерживаемых браузеров. ➡️ @FrontendPortal | #tip by Shripal Soni

Подборка микроанимаций для UI Может пригодиться разработчикам, дизайнерам и тем, кто использует ИИ при разработке интерфейсов и хочет улучшить визуальную часть продукта. Здесь собраны примеры микроанимаций, которые можно использовать как референсы при работе над UI https://amicro.vercel.app/ ➡️ @FrontendPortal

Анимации при скролле на чистом CSS! 0 JavaScript. Без зависимостей и костылей. Уже поддерживается всеми современными браузерами. Свойство называется animation-range и работает так 👆 ➡️ @FrontendPortal

CSS Совет: Возможно, вы не знали об этом трюке анимации иконки при клике/фокусе Легко анимируйте иконку при взаимодействии, создавая спрайт изображения со всеми кадрами анимации и используя функцию временного расчета steps() в CSS. input[type="checkbox"] { /* Задаем ширину и высоту, равные размеру одного кадра в спрайте */ width: 28px; height: 28px; appearance: none; background: url('/images/star_sprite.png') no-repeat; /* steps = общее количество кадров - 1 */ transition: background-position 0.3s steps(15); } input[type="checkbox"]:checked { /* Переход к последнему кадру */ /* Ширина одного кадра = 28px */ /* 28px * 15 кадров = 420px */ background-position: -420px 0; } Посмотрите вживую: редактируемая демо-песочница ➡️ @FrontendPortal | #tip by Shripal Soni