Приходится много работать с разметкой страниц на сайте и экранах мобильного приложения, чтобы оперативно менять интерфейс под запросы пользователей. Часто даже мельчайшие изменения занимают значительное время, так как требуют работы с кодом и привлечения разработчиков. Чтобы оптимизировать процессы, мы решили создать платформу Bricks и управлять интерфейсами с её помощью.

Казалось бы, можно просто установить в CSS transition от 0 к 1 для opacity элемента dialog, но это не работает. Необходимо изучить @starting-style, а также ключевые слова overlay и allow-discrete.

Рассмотрим один из вариантов интеграции svg иконок в наш фронтенд проект используя веб-компоненты.

Основная идея компонента заключается в том, чтобы лениво подгружать в SVG спрайт иконки и переиспользовать уже загруженные иконки при необходимости.

Сами иконки будем вставлять в разметке в виде <svg-icon name="arrow-angle-down"> нам понадобится всего сотня строк кода.

Скажу сразу, что иконочные шрифты не всегда являются наиболее эффективным и надёжным вариантом, но они по-прежнему относительно просты и легки в реализации.

Помните HTML-элемент marquee? Он устарел, поэтому вряд ли стоит его использовать, когда понадобится что-то вроде горизонтальной автопрокрутки. Вот тут-то и приходит на помощь CSS, потому что в нём есть все необходимые инструменты для реализации этой функции.

В интернете уже довольно много гайдов по Flexbox в CSS. Но чаще всего это шпаргалки, которые не сильно помогают разобраться как на самом деле все работает. Я постараюсь раскрыть тему на реальных примерах. А в конце статьи поделюсь лайфхаками, которыми сам постоянно пользуюсь в работе.

Расскажу о законах человеческой психологии и восприятии, помня о которых можно создать нормальный UX‑дизайн.

Решил поделиться своими советами после более чем 5-летнего опыта работы фронтендером.

Sprite Sheet — это техника в веб-разработке, позволяющая использовать множество различных кадров анимации, хранящихся в одном изображении. Это эффективный способ уменьшить количество HTTP-запросов к серверу и ускорить загрузку веб-страницы, так как все кадры анимации загружаются одновременно.