FrontEnd Studio💻

Откопал годную коллекцию из 1500+ потрясающих 3D-иконок в разных стилях, ракурсах и перспективах. Их можно скачать как изображения или использовать прямо в интерфейсах, презентациях, на сайтах и в креативных проектах Идеально подойдёт для UI-разработчиков, дизайнеров и контент-креаторов ✌️ @IT_Portal

Совет по CSS Мы часто используем кнопки действий, появляющиеся при наведении, чтобы интерфейс выглядел чище. Но пользователи с клавиатурой и на тачскринах не могут инициировать наведение, из-за чего такие кнопки становятся недоступными Сделай доступным для клавиатуры: используй :focus-within, чтобы показывать кнопки, когда фокус находится внутри контейнера. Сделай доступным для тачскрина: hover: none сработает, если основное устройство ввода не поддерживает наведение ➡️ @FrontendPortal | #tip by Shripal Soni

tabular-nums должен быть значением по умолчанию для любых чисел, которые обновляются (таймеры, счётчики, цены, проценты, очки, лайв-данные и т.д.). Включить OpenType-фичу tnum можно через CSS-свойство font-variant-numeric: .tabular-nums { font-variant-numeric: tabular-nums; } ➡️ @FrontendPortal

Когда они это добавили? Теперь в Chrome DevTools отображаются вычисленные пошаговые значения для css calc() + переменных. Отладка стала в 100 раз проще ➡️ @FrontendPortal

HTML-совет Не используй input type="number" для важных числовых полей — типа почтового индекса, номера карты и т.п. Почему? - На десктопе появляется ненужный спиннер. - Значение может случайно измениться при прокрутке мыши или нажатии клавиш вверх/вниз. Вместо этого — используй inputmode="numeric" + pattern ✅ Показывает цифровую клавиатуру на мобильных устройствах — лучше UX. ✅ Добавляет валидацию на цифры. ➡️ @FrontendPortal | #tip by Shripal Soni

Нашёл локальную альтернативу iLovePDF – PDF with Love. Работает полностью в браузере: никаких загрузок файлов на сервер. Ваши PDF никогда не покидают устройство Внутри есть набор инструментов для повседневной работы с PDF: объединение, разделение, сжатие и многое другое Полная приватность. Полностью бесплатно. Пробуем тут. Ссылка на GitHub @IT_Portal

Обнаружение статуса соединения Для отслеживания статуса подключения можно использовать navigator.online API. Это вернет логическое значение, чтобы указать, находится ли пользователь в сети. Мы можем подписаться на офлайн- и онлайн-события, чтобы узнавать об этих конкретных изменениях window.addEventListener('offline', (e) => { console.log('offline'); }); window.addEventListener('online', (e) => { console.log('online'); }); ➡️ @FrontendPortal | #js

Интерактивная библиотека визуализации данных — ECharts Позволяет добавлять интуитивно понятные, интерактивные и настраиваемые диаграммы в проект. - Предоставляет более 20 типов диаграмм - Переключение между рендерингом Canvas и SVG - Автоматически генерируемые описания диаграмм - Написана на чистом JavaScript Забираем тут ➡️ @FrontendPortal | #resourse

Каждый раз, когда видишь setState внутри useEffect, иди постой в углу 5 минут и подумай о том, что ты натворил. А потом удали этот useEffect ➡️ @FrontendPortal

🎨 Инструмент, который реально облегчает жизнь фронтендеру Storybook — это среда для разработки и тестирования UI-компонентов в изоляции. Ты собираешь интерфейс как конструктор, не поднимая весь проект, не кликая по страницам и не ломая логику приложения. Что важно: ➡️ Поддержка React, Vue, Angular, Svelte и Web Components ➡️ Автодокументация компонентов и пропсов ➡️ Визуальное тестирование и контроль изменений UI ➡️ Интеграция с дизайн-системами и CI 🐱 Ссылка на репозиторий Если работаешь с компонентами — без этого жить тяжело. 🤩 Only GitHub // #Frontend

🔧 Официальные PowerToys от Microsoft: open-source набор утилит, который делает Windows удобной для разработчиков Microsoft PowerToys — это набор системных утилит от Microsoft, которые добавляют в Windows функции, о которых мечтают продвинутые пользователи и разработчики. От управления окнами как в tiling-менеджерах до глобального поиска файлов и быстрого изменения размеров изображений — всё в одном пакете. Как это меняет ежедневную работу в Windows: ➡️ FancyZones — менеджер разметки окон, который позволяет создавать custom-сетки и привязывать к ним окна, как в Linux tiling WM. ➡️ PowerToys Run — глобальный поиск лаунчер, вызываемый по Alt+Пробел, который ищет приложения, файлы, выполняет вычисления и даже работает как быстрая консоль. ➡️ Keyboard Manager — продвинутый ремаппер клавиш и сочетаний, который меняет раскладку на уровне системы. 🐱 Ссылка на репозиторий Интересный факт: Изначально PowerToys существовали ещё в эпоху Windows 95, но были возрождены в 2019 году как современный open-source проект. 🤩 Only GitHub// #Windows

🐙 Logocreator: бесплатный ИИ-генератор логотипов с открытым исходным кодом Нашёлся отличный open-source инструмент Logocreator от разработчика Nutlope, который помогает создавать профессиональные логотипы в несколько кликов, работая как гибкий конструктор. Ключевые особенности проекта 🔵Бесплатный и открытый: Весь исходный код доступен на GitHub, проект можно использовать бесплатно или развернуть у себя. 🔵Работает через конструктор: Вы не просто вводите текстовый промпт, а пошагово выбираете стиль, иконки и настройки, собирая логотип как конструктор. 🔵Мощная ИИ-основа: Для генерации используется модель Flux Pro 1.1 через сервис Together AI, что обеспечивает высокое качество и детализацию изображений. 🔵Готовая онлайн-версия: Можно сразу протестировать на сайте logo-creator.io. 🔵Локальный запуск: При желании проект можно развернуть на своём компьютере (потребуется API-ключ Together AI). 🛠 Что нужно знать перед использованием Для локального запуска потребуются базовые навыки работы с командной строкой, Node.js и API-ключ от Together AI. В текущей версии экспорт возможен только в PNG, но в планах есть добавление SVG. ⛓ Репозиторий на GitHub 🤩 Only GitHub

Принёс находку: sshx. Всего одна команда, и у вас в браузере открывается реплика локального терминала: можно звать коллег по ссылке, видеть курсоры друг друга и даже чатиться Идеально для дебага, обучения или просто совместной работы. Cайт здесь, GitHub тут ➡️ @FrontendPortal

Anthropic инвестирует $1,5 млн в экосистему Python Компания Anthropic (создатели Claude) вложит $1,5 млн в поддержку Python Software Foundation и безопасность опенсорса По планам: сделать проактивную автоматизированную проверку пакетов в PyPI (вместо нынешней в основном реактивной модерации), плюс финансирование инфраструктуры и программ поддержки комьюнити @FrontEnd_Studio

📢 Источник: IT_Portal Откопал годный опенсорс тул для быстрого анализа любых сайтов – Web-Check. Кидаешь URL и за пару секунд получаешь полный разбор: DNS, IP, SSL, куки, открытые порты, инфру, перфоманс и базовую безопасность. Можно гонять онлайн или развернуть у себя на сервере. Проверяем здесь, GitHub тут ✌️ @IT_Portal... 🔗 Читать оригинал

Новое в Frontend Portal: Обрати внимание, что в корректном примере чипы мгновенно перемещаются на новую позицию, когда один из чипов удаляется. Это происходит из-за режима popLayout в AnimatePresence из motion/react , который обеспечивает более плавную и быструю анимацию при удалении элемента ➡️ @FrontendPortal Оригинал поста

API интернационализации (Intl) в браузерах и Node.js предоставляет множество полезных инструментов для работы с языковыми специфическими отображениями, например, с "компактной" нотацией, такой как 10K, 5M и т.д. Вот пример, как вы можете использовать это 😎 Это особенно полезно для таких вещей, как панели управления и страницы профилей в социальных сетях. Также этот API предлагает множество других возможностей, обязательно ознакомьтесь с полной документацией на MDN ➡️ @FrontendPortal | #js