Публикации по теме 'responsive-design'


Как мы перестроили busuu.com - пример использования клиентской части
Обзор Контекст и проблемы Рабочая обстановка Технические решения Результаты Последние мысли Обзор Привет, я Себастьян. Я работаю в busuu ведущим Front-end инженером. busuu - компания, занимающаяся изучением языков, наша миссия - помочь каждому выучить новый язык. У нас есть Backend-команда, которая предоставляет API-интерфейсы для остальной технической команды, веб-команда, которая занимается 3 различными веб-приложениями, и команды iOS / Android, которые работают над..
Использование Resize Observer для адаптивного дизайна
На этой неделе я наткнулся на чрезвычайно мощный API/хук под названием «Resize Observer». Короче говоря, Resize Observer дает вам возможность отображать на странице совершенно разные элементы в зависимости от того, в каких размерах она просматривается. Например, если ваш экран имеет ширину более 1200 пикселей, Resize Observer даст вам возможность отобразить совершенно другой блок div, чем если бы он был меньше 1200 пикселей, и то же самое может быть даже для менее 900 пикселей или..
5 вещей, которые я хотел бы знать перед тем, как начать разработку фронтенда
Вы когда-нибудь просматривали веб-сайт и просто восхищались дизайном, потоком данных и общим пользовательским интерфейсом? Вы, должно быть, заглянули на чей-то веб-сайт с резюме и подумали о своем собственном веб-портфолио, чтобы продемонстрировать удивительные вещи, которые вы сделали. Но вы не знаете, с чего начать… не так ли? Что ж, вы начинаете с изучения основных языков, таких как HTML, CSS и Javascript, и переходите к другим навыкам, совершенствуя основы. Существует масса..
Компонент React Lazy-Loader для многократного использования изображений
Для увеличения времени загрузки страницы и улучшения взаимодействия с пользователем. Эта проблема Если вы когда-либо были на сайте с большим количеством изображений, вы знаете, что это за борьба. Изображения загружаются дольше, чем остальное содержимое сайта, создавая сдвигающийся макет страницы по мере того, как каждое изображение полностью отображается. Это плохо по нескольким причинам. Первая причина в том, что постоянно меняющийся макет создает неудобства для пользователей...
Шаблон мобильного рендеринга JavaScript для React
Вы обнаруживаете, что пишете много проверок условий, что такое область просмотра, а затем визуализируете пользовательский интерфейс, специфичный для области просмотра, для компонента в ваших приложениях. Если вы чувствуете боль от поддержания такого количества условий в своем коде, вы попали в нужное место. Прочтите ниже, чтобы узнать, как мы можем переместить все эти уродливые проверки условий по всему вашему коду рендеринга в одно место. С этим шаблоном ваш код становится более читаемым..
Создание адаптивного заголовка с помощью MaterialUI и React
Часть 2 Привет! Ранее мы узнали как создать базовый Header компонент с помощью Material UI и React для достижения статического результата, показанного ниже: В этом руководстве давайте превратим эту статическую настольную версию в мобильную, когда пользователь изменит размер своего экрана. Адаптивный дизайн важен, поскольку вы не захотите лишить своих пользователей удобной навигации по веб-приложению на их мобильных устройствах. Если вы еще этого не сделали, ознакомьтесь с..
От адаптивного веб-дизайна к адаптивной визуализации данных
Использование смартфонов, планшетов и других мобильных устройств на предприятии произвело революцию в дизайне веб-приложений. Один размер подходит всем больше не работает. Создание отдельных приложений — это трудоемкая задача, которую нелегко масштабировать в соответствии с требованиями рабочей силы, использующей различные платформы для получения информации. Чтобы идти в ногу с потребностями бизнеса и оставаться актуальными, разработчики должны иметь возможность создавать гибкие..