FrontEnd Studio💻

описание

🔹 Осваивать современные фреймворки и инструменты (React, VS Code, Git и др.) 🔹 Решать реальные задачи и проходить практику 📚 Материалы для новичков и продвинутых 🛠 Полезные лайфхаки, туториалы и проекты 📨Мой Директ(ЛС): @ItsmeHere_Bro

← к каналу @FrontEnd_Studio

подписчиков

Охват к подписчикам

392,9%

ERR

Реакции к просмотрам

0,64%

7 на 20 постов

Пересылки к просмотрам

0,46%

Постов в день

0,0

всего 20

Где отзываются чаще

доля реакций к просмотрам

17 янв.🔧 Официальные 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// #Windows5,00%
18 янв.🎨 Инструмент, который реально облегчает жизнь фронтендеру Storybook — это среда для разработки и тестирования UI-компонентов в изоляции. Ты собираешь интерфейс как конструктор, не поднимая весь проект, не кликая по страницам и не ломая логику приложения. Что важно: ➡️ Поддержка React, Vue, Angular, Svelte и Web Components ➡️ Автодокументация компонентов и пропсов ➡️ Визуальное тестирование и контроль изменений UI ➡️ Интеграция с дизайн-системами и CI 🐱 Ссылка на репозиторий Если работаешь с компонентами — без этого жить тяжело. 🤩 Only GitHub // #Frontend3,77%
3 февр.HTML-совет Не используй input type="number" для важных числовых полей — типа почтового индекса, номера карты и т.п. Почему? - На десктопе появляется ненужный спиннер. - Значение может случайно измениться при прокрутке мыши или нажатии клавиш вверх/вниз. Вместо этого — используй inputmode="numeric" + pattern ✅ Показывает цифровую клавиатуру на мобильных устройствах — лучше UX. ✅ Добавляет валидацию на цифры. ➡️ @FrontendPortal | #tip by Shripal Soni2,06%
22 янв.Нашёл локальную альтернативу iLovePDF – PDF with Love. Работает полностью в браузере: никаких загрузок файлов на сервер. Ваши PDF никогда не покидают устройство Внутри есть набор инструментов для повседневной работы с PDF: объединение, разделение, сжатие и многое другое Полная приватность. Полностью бесплатно. Пробуем тут. Ссылка на GitHub @IT_Portal1,20%
16 мар.Откопал годную коллекцию из 1500+ потрясающих 3D-иконок в разных стилях, ракурсах и перспективах. Их можно скачать как изображения или использовать прямо в интерфейсах, презентациях, на сайтах и в креативных проектах Идеально подойдёт для UI-разработчиков, дизайнеров и контент-креаторов ✌️ @IT_Portal0,00%
15 мар.Совет по CSS Мы часто используем кнопки действий, появляющиеся при наведении, чтобы интерфейс выглядел чище. Но пользователи с клавиатурой и на тачскринах не могут инициировать наведение, из-за чего такие кнопки становятся недоступными Сделай доступным для клавиатуры: используй :focus-within, чтобы показывать кнопки, когда фокус находится внутри контейнера. Сделай доступным для тачскрина: hover: none сработает, если основное устройство ввода не поддерживает наведение ➡️ @FrontendPortal | #tip by Shripal Soni0,00%
5 мар.tabular-nums должен быть значением по умолчанию для любых чисел, которые обновляются (таймеры, счётчики, цены, проценты, очки, лайв-данные и т.д.). Включить OpenType-фичу tnum можно через CSS-свойство font-variant-numeric: .tabular-nums { font-variant-numeric: tabular-nums; } ➡️ @FrontendPortal0,00%
18 февр.Когда они это добавили? Теперь в Chrome DevTools отображаются вычисленные пошаговые значения для css calc() + переменных. Отладка стала в 100 раз проще ➡️ @FrontendPortal0,00%
21 янв.без подписи0,00%
21 янв.Обнаружение статуса соединения Для отслеживания статуса подключения можно использовать navigator.online API. Это вернет логическое значение, чтобы указать, находится ли пользователь в сети. Мы можем подписаться на офлайн- и онлайн-события, чтобы узнавать об этих конкретных изменениях window.addEventListener('offline', (e) => { console.log('offline'); }); window.addEventListener('online', (e) => { console.log('online'); }); ➡️ @FrontendPortal | #js0,00%
21 янв.Интерактивная библиотека визуализации данных — ECharts Позволяет добавлять интуитивно понятные, интерактивные и настраиваемые диаграммы в проект. - Предоставляет более 20 типов диаграмм - Переключение между рендерингом Canvas и SVG - Автоматически генерируемые описания диаграмм - Написана на чистом JavaScript Забираем тут ➡️ @FrontendPortal | #resourse0,00%
21 янв.Каждый раз, когда видишь setState внутри useEffect, иди постой в углу 5 минут и подумай о том, что ты натворил. А потом удали этот useEffect ➡️ @FrontendPortal0,00%