Последние посты
Frontend База
22 сент., 18:05
🤝 Автогенерация типов выявила командные проблемыКажется, что автогенерация типов из OpenAPI решит все проблемы взаимодействия фронта и бэка? На практике она лишь обнажила глубинные командные сложности.Автогенерация вытащила наружу реальные проблемы: кто отказывается писать документацию, почему у одной сущности два разных имени, из-за чего падал dev-сервер. Это оказалось не про типы, а про процессы, эго и умение договариваться в команде.Ценный кейс для команд, которые хотят наладить процессы между фронтом и бэком, а не просто внедрить очередной инструмент 🚀🌐 Перейти на сайт💻 Frontend База | #Frontend #Backend #Процессы
Frontend База
22 сент., 13:05
⚛️ Как устроено состояние в React.jsСобеседования превратились в заучивание синтаксиса, но реальная архитектура остаётся загадкой? Автор — ведущий разработчик интерфейсов — показывает, почему знание useState и Redux без понимания концепций уже не работает.Ключевая проблема: разработчики зубрят синтаксис библиотек, но не понимают фундаментальные концепции управления состоянием. Статья разбирает эволюцию от Gmail 2007 года до современных решений, объясняет почему одни подходы требуют Provider, а другие нет, и как выбирать инструменты осознанно.Обязательно к прочтению всем, кто хочет перестать просто заучивать ответы и начать понимать архитектурные решения на глубоком уровне 🧠🌐 Перейти на сайт💻 Frontend База | #React #Frontend #Гайды
Frontend База
22 сент., 06:05
🤔 Зачем учить алгоритмы фронтендеруКажется, что фронтенд — это про кнопки и интерфейсы, а алгоритмы остались в университете? Автор разбирает, почему базовые алгоритмические знания всё равно пригодятся даже в повседневной разработке интерфейсов.Проблема: многие разработчики считают алгоритмы ненужной теорией. Решение: автор показывает конкретные кейсы из фронтенда, где бинарный поиск, сортировки и алгоритмы на графах реально помогают оптимизировать работу с данными, деревьями компонентов и сложными состояниями приложений.Полезный материал для тех, кто хочет понять практическую ценность алгоритмов во фронтенде и перестать воспринимать их как абстрактную академическую дисциплину 🧠🌐 Перейти на сайт💻 Frontend База | #Frontend #Алгоритмы #Гайды
Frontend База
21 сент., 18:05
🎨 Онлайн-редактор SVG-контуровРаботаешь с векторной графикой и устал вручную прописывать path в коде? Этот инструмент позволяет визуально создавать и редактировать SVG-контуры без необходимости помнить синтаксис команд.Ключевые возможности: визуальное редактирование точек и кривых, drag-and-drop для перемещения элементов, вставка и удаление команд, преобразование между относительными и абсолютными координатами, масштабирование и вращение всего контура, настройка viewBox для точного позиционирования.Отличный инструмент для дизайнеров и фронтенд-разработчиков, которые хотят быстро создавать и править SVG-графику без ручного кодирования 🎯🐱 Перейти на GitHub💻 Frontend База | #SVG #Frontend #Tools
Frontend База
21 сент., 14:45
Frontend База
21 сент., 13:05
🎨 Простые лайфхаки для дружелюбных интерфейсовРаздражают неудобные интерфейсы, где пользователь постоянно спотыкается о мелочи? Автор собрал коллекцию простых HTML/CSS-приёмов, которые делают взаимодействие интуитивным и приятным.Что разберём: автоматическое выравнивание текста с text-wrap: balance, кастомные чекбоксы без JavaScript, адаптивные таблицы с overflow-x, улучшенные placeholder'ы и другие фишки для UX. Все решения работают в любом фреймворке.Отличный материал для фронтендеров, которые хотят быстро улучшить пользовательский опыт без переписывания всей логики приложения 🚀🌐 Перейти на сайт💻 Frontend База | #CSS #Frontend #UX
Frontend База
21 сент., 06:05
📜 Виртуальные Scroll-контейнеры для AngularРаботаешь с большими списками в Angular и столкнулся с тормозами при рендеринге тысяч элементов?Решение — библиотека ng-virtual-scroll-view, которая рендерит только видимую часть контента вместо всего списка. Под капотом: автоматическое управление DOM, поддержка динамических высот элементов, нативная интеграция с Angular CDK и оптимизация производительности для сложных интерфейсов.Отличный выбор для разработчиков Angular, которые хотят сохранить плавность интерфейса при работе с большими объёмами данных 🚀🌐 Перейти на сайт💻 Frontend База | #Angular #Frontend #Tools
Frontend База
20 сент., 18:05
⚛️ 5 библиотек для UX в React NativeРазрабатываешь MVP на React Native и хочешь, чтобы приложение выглядело как полноценный продукт, а не сырая версия?Что разбираем: react-native-reanimated для плавных анимаций на UI-потоке, react-native-gesture-handler для нативных жестов, react-native-svg для векторной графики, react-native-fast-image для быстрой загрузки изображений и react-native-haptic-feedback для тактильного откликаОтличный набор для тех, кто хочет быстро добавить профессиональный лоск в мобильное приложение без лишних затрат времени 🚀🌐 Перейти на сайт💻 Frontend База | #React #Frontend #Tools
Frontend База
20 сент., 13:05
🎯 CSS-селекторы без регистрозависимостиЧасто сталкиваешься с тем, что атрибутные селекторы в CSS чувствительны к регистру? Это особенно раздражает при работе с пользовательскими данными или сторонними библиотеками.Проблема: стандартные селекторы вроде [class="button"] не находят элементы с Button или BUTTON. Решение — использовать селектор с флагом 'i': [class="button" i] для поиска без учёта регистра. Это работает для class, id, data-атрибутов и любых других.Полезный трюк для тех, кто работает с динамическим контентом или legacy-кодом, где регистр может быть непредсказуемым 🎯🌐 Перейти на сайт💻 Frontend База | #CSS #Frontend #Гайды
Frontend База
20 сент., 06:05
🎨 Процедурная геометрия в Three.js и WebGPUКак превратить обычный штрих в сложные кристаллические структуры или биолюминесцентные рифы? В этом туториале разбирают создание Geometry Painter — инструмента для генерации процедурной геометрии прямо на поверхности 3D-объектов.Система позволяет рисовать на сфере и мгновенно генерировать кристаллы, трещины, сияющие узоры или живые рифы. Ключевые возможности: работа с WebGPU и TSL, выбор поверхности, процедурная геометрия, кастомные шейдеры, динамическое освещение и постобработка. Архитектура построена так, что новые режимы рисования добавляются без изменения основного кода.Отличный вариант для разработчиков, которые хотят освоить современную графику в вебе и создавать интерактивные визуальные эффекты без сложных инструментов 🚀🌐 Перейти на сайт💻 Frontend База | #WebGL #ThreeJS #Frontend
Frontend База
19 сент., 18:05
🎨 DaisyUI — компоненты для Tailwind CSSИщешь способ ускорить разработку интерфейсов без потери кастомизации? DaisyUI решает эту задачу — это популярная библиотека компонентов, которая расширяет возможности Tailwind CSS.Основная проблема: Tailwind даёт гибкость, но требует много ручной работы над компонентами. DaisyUI добавляет готовые UI-элементы — кнопки, формы, навигацию, модальные окна — которые можно легко кастомизировать через стандартные классы Tailwind.Отличное решение для фронтендеров, которые хотят сохранить гибкость Tailwind, но сократить время на создание базовых компонентов с нуля 🚀🐱 Перейти на GitHub💻 Frontend База | #Frontend #CSS #Tools
Frontend База
19 сент., 13:05
📱 WebKit поддерживает interactive-widget для виртуальной клавиатурыЗнали, что на мобильных сайтах виртуальная клавиатура часто перекрывает фиксированную навигацию и важные элементы формы? В WebKit недавно появилась поддержка новой CSS-свойства, которое решает эту проблему.Ключевая проблема: когда на мобильных устройствах появляется виртуальная клавиатура, браузеры по-разному обрабатывают viewport — одни (Chrome до 2022) меняли layout viewport, другие (Safari) только visual viewport. Решение: interactive-widget позволяет контролировать поведение виджетов вроде клавиатуры и предотвращать перекрытие важных элементов интерфейса.Идеальное решение для фронтенд-разработчиков, которые работают с мобильными формами и хотят обеспечить удобство пользователям без хаков с viewport и JavaScript 🚀🌐 Перейти на сайт💻 Frontend База | #Frontend #CSS #Mobile
Frontend База
19 сент., 06:05
⚛️ React приложение размонтируется при переводе ChromeЗаметили странные ошибки NotFoundError в трекере, которые появляются у пользователей с включенным переводчиком страниц? Автор потратил месяц на исследование поведения пяти разных переводчиков браузеров и обнаружил интересную причину.Проблема: Chrome Translate не редактирует текстовые узлы React, а создаёт новые обёрнутые элементы и отключает оригиналы. React продолжает указывать на отключённые узлы, что вызывает ошибки removeChild и молчаливые заморозки интерфейса.Важная находка для React-разработчиков, которые работают с международной аудиторией и хотят избежать скрытых багов при использовании браузерных переводчиков 🔍🌐 Перейти на сайт💻 Frontend База | #React #Frontend #Разбор
Frontend База
18 сент., 18:05
🎭 Забытые HTML/CSS фичи, которые всё ещё работаютДумаешь, что знаешь всё о HTML и CSS? Эта подборка показывает старые возможности браузеров, которые многие разработчики обходят стороной, хотя они уже лет 8+ полностью поддерживаются и могут решить реальные задачи.Что разберём: contenteditable для инлайн-редактирования контента, inputmode для подсказок клавиатуры на мобильных, details/summary для аккордеонов без JavaScript, а также старые селекторы CSS вроде :not(:empty), которые до сих пор могут упростить вёрстку.Неплохой способ освежить знания о возможностях веб-платформы и найти готовые решения вместо переизобретения велосипедов на JavaScript ✨🌐 Перейти на сайт💻 Frontend База | #Frontend #HTML #CSS
Frontend База
18 сент., 13:05
🎨 Анимированные CSS Grid с Anchor PositioningВидел когда-нибудь плавную перестройку сетки при изменении размера окна? Браузер Brave использует такую анимацию на своей стартовой странице, и теперь можно повторить этот эффект без View Transitions.Секрет в комбинации CSS Anchor Positioning и обычных CSS Transitions. Нужно создать дополнительный враппер внутри каждой ячейки сетки, который будет служить якорем для контента, а затем анимировать перемещение элементов при изменении макета.Отличный способ добавить интерактивности адаптивным интерфейсам и сделать пользовательский опыт более плавным и приятным ✨🌐 Перейти на сайт💻 Frontend База | #CSS #Frontend #Гайды
Frontend База
18 сент., 06:05
🚀 Как Shopify собрали Shop.app на RemixНужно быстро запустить веб-версию популярного мобильного приложения с миллионами пользователей? Команда Shopify рассказывает, как они перевели Shop с iOS/Android на веб всего за несколько месяцев.Ключевые требования: использовать существующую инфраструктуру, переиспользовать код из нативных клиентов, обеспечить быстрые релизы и масштабирование под миллионы пользователей. Решение — Remix с Vite для быстрой разработки и деплоя.Отличный кейс для фронтендеров, которые хотят увидеть, как крупные компании выбирают стек для высоконагруженных проектов 🚀🌐 Перейти на сайт💻 Frontend База | #Frontend #Remix #CaseStudy
Frontend База
17 сент., 18:05
⚛️ React 19.3 с View Transitions и Fragment RefsНужны плавные анимации при изменениях UI без ручной работы с CSS? React 19.3 стабилизировал экспериментальные API, которые позволяют легко добавлять переходы между состояниями компонентов.Ключевые фичи: ViewTransition для автоматических анимаций входа/выхода элементов через браузерный View Transition API, Fragment Refs для доступа к DOM-узлам фрагментов. Также добавлена поддержка Trusted Types в React DOM и возможность рендерить Context напрямую в Server Components.Отличное обновление для тех, кто хочет современные анимации "из коробки" без дополнительных зависимостей и ручной работы с CSS-переходами 🎬🌐 Перейти на сайт💻 Frontend База | #React #Frontend #News
Frontend База
17 сент., 13:05
🚀 Three.js демо с катапультой Эйфелевой башниХочешь поиграть с физикой в браузере и полетать над Парижем? Это демо превращает знаменитую башню в мощную катапульту на Three.js.Интерактивная физическая модель позволяет тянуть Эйфелеву башню как рогатку, накапливая энергию для запуска. Использует реальные 3D-данные Cesium ion для точной карты Парижа. Цель — приземлиться у конференции Three.js.Отличный способ развлечься и посмотреть на возможности Three.js в действии — особенно если собираешься на конференцию в Париже! 🎯🌐 Перейти на сайт💻 Frontend База | #ThreeJS #WebGL #Tools
Frontend База
17 сент., 06:05
🎨 Преврати имя в 3D-архитектуру с Three.jsХочешь увидеть, как обычное имя превращается в сложную металлическую структуру? На Three.js Conference в Париже показали интерактивный эксперимент, который делает именно это.Каждая буква представлена замкнутым контуром из 120 точек — фиксированное количество позволяет плавно трансформировать одну букву в другую. Система учитывает даже отверстия в буквах, а точки движутся по изогнутым траекториям с деформацией структуры в процессе.Крутой пример того, как можно превратить простой текст в динамичную 3D-визуализацию с помощью современных веб-технологий 🚀🌐 Перейти на сайт💻 Frontend База | #ThreeJS #WebGL #Frontend
Frontend База
16 сент., 18:05
🎲 Полифилл для CSS random() во всех браузерахХочешь использовать генерацию случайных значений прямо в CSS, но браузеры пока не поддерживают новую функцию? Решение есть уже сейчас.Как устроить контролируемый хаос в дизайне с помощью полифилла CSS random(). Разбор реальных кейсов: создание "конфетти" с брендовыми цветами, динамическое обновление элементов, контроль уровня рандомизации для UX без хаоса.Идеальный инструмент для фронтендеров, которые хотят экспериментировать с генеративным UI без ожидания нативной поддержки в браузерах 🚀🌐 Перейти на сайт💻 Frontend База | #CSS #Frontend #Tools
