Frontend Portal

Знаете ли вы, что кнопку отправки формы можно размещать вне самой формы? В большинстве случаев мы размещаем кнопку отправки внутри формы, и так правильно. Но иногда — из-за особенностей вёрстки или по другим причинам — логичнее вынести кнопку отправки за пределы тега <form>. Мы можем легко связать кнопку с формой, используя атрибуты form и id. Таким же способом, при необходимости, можно ассоциировать с формой и другие элементы управления, такие как textarea, checkbox и т.п. ➡️ @FrontendPortal | #tip by Shripal Soni

На Stepik вышла программа «DevOps с нуля: от Linux до Kubernetes» Это комплексная программа из 5 практических курсов по ключевым технологиям DevOps: Linux, Git, Docker, GitLab CI/CD, Kubernetes Вы последовательно пройдёте путь от работы в Linux и управления кодом через Git до контейнеризации приложений, настройки CI/CD-пайплайнов и развёртывания в Kubernetes. Что вы изучите: • работу с Linux и командной строкой • Git и контроль версий в реальных проектах • создание Docker-образов и запуск контейнеров • автоматизацию сборки, тестирования и деплоя в GitLab CI/CD • развёртывание и управление приложениями в Kubernetes • сети, хранилища, конфигурации и секреты • диагностику инфраструктуры и автоматизацию рутинных задач ... и многое другое Все знания закрепляются на практике с помощью заданий с автопроверкой. Материал подаётся последовательно и понятным языком: с примерами, схемами и демонстрациями. Во время обучения можно задавать вопросы по урокам и заданиям, получать обратную связь и помощь при возникновении сложностей. После прохождения программы вы получите сертификат, который можно добавить в резюме. Скидка 20% на 48 часов: по промокоду PORTAL20 стоимость всей программы составит 10 392 ₽. Открыть программу на Stepik

pnpm 12 вышел! Один из лучших пакетных менеджеров для JavaScript-проектов. ✓ Безопасный по умолчанию ✓ Полностью переписан с нуля на Rust ✓ До 3× быстрее при чистой установке → https://pnpm.io/blog/releases/12.0 ➡️ @FrontendPortal

Bun 1.4 уже здесь. Полностью переписан на Rust. ✓ Bun.Image — можно попрощаться с sharp ✓ Bun.WebView — браузер без Playwright ✓ Bun.markdown и Bun.cron ✓ Меньше зависимостей и выше производительность ➡️ @FrontendPortal

Преобразуй свой TypeScript-код в визуальные диаграммы Этот опенсорсный инструмент позволяет вставить любой TS-файл и мгновенно превратить его в аккуратную визуальную диаграмму всех ваших интерфейсов, типов, классов и связей Отлично подходит для обучения, понимания новой кодовой базы и объяснения вашей архитектуры кому-то без необходимости что-либо рисовать вручную 👍 GitHub: tsdiagram ➡️ @FrontendPortal | #resourse

CSS наконец-то позволяет анимировать элементы при их первом появлении @starting-style теперь входит в Baseline и доступен с августа 2024 года. Уже 90% глобального покрытия! Раньше transition не срабатывал при первом обновлении стилей элемента – приходилось городить хаки на JavaScript Теперь стартовое состояние можно задать прямо в чистом CSS. Просто, мощно и давно пора 💪 ➡️ @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

Определяем, когда пользователь переключает вкладки браузера и меняем favicon Этот трюк можно реализовать с помощью Page Visibility API Page Visibility API — это API браузера, который проверяет видимость страницы. Он помогает определять, скрыта или свернута текущая страница, и тем самым позволяет контролировать ее поведение и использование ресурсов ➡️ @FrontendPortal | #tip #js

Рабочее утро удалёнщинка ➡️ @FrontendPortal

Сегодня вышел Firefox 154 В нём появилась поддержка давно ожидаемых CSS-возможностей: ① sibling-index() и sibling-count() — удобно использовать, чтобы создавать эффект разбросанных элементов. ② text-box — полезно для вертикального и горизонтального выравнивания текста в кнопках и других элементах. Теперь эти возможности доступны во всех браузерах. ➡️ @FrontendPortal