В процессе разработки UI для игр Forza Horizon 3 и Forza Motorsport 7 я имел возможность поработать с потрясающими акриловыми матовыми элементами дизайна.
Вдохновлённый этим дизайном, я захотел создать похожий эффект при помощи HTML. В этом посте я расскажу о своих попытках создания красивого эффекта стекла, а также представлю пример кода и ассетов для тех, кто захочет попробовать реализовать эту методику самостоятельно.
Предупреждаю, это будет относительно большая статья. Но советую дочитать до конца, особенно тем, кто сейчас учится или думает о построении плана обучения и своей дороги в программировании в целом. Этот пост основан на моем опыте: расскажу, как я нашел первую работу и обучался.
Можно сказать, это «краткое резюме» моей 9-летней карьеры в IT в качестве frontend разработчика. Обязательно будет интересно! Даже если местами будет казаться скучно, продолжайте читать — оно того стоит.
В веб-разработке часто возникает необходимость обрабатывать различные типы взаимодействий пользователя, включая короткие и длинные нажатия. В этой статье мы рассмотрим изящный способ реализации обработчиков для этих двух взаимодействий.
▎Зачем нужен Long Press?
Long Press — это взаимодействие, при котором пользователь удерживает палец на экране или кнопку в течение определенного времени. Это может быть полезно для вызова дополнительных действий, таких как контекстное меню, всплывающие подсказки или специальные функции, которые не должны выполняться при обычном клике.
▎Стандартное решение
Реализация обработчиков долгого и короткого нажатия на чистом JavaScript будет выглядеть примерно следующим образом:
До недавнего времени далеко не все свойства CSS можно было анимировать. Например, чтобы создать эффект плавного появления или исчезновения элемента, приходилось использовать свойство opacity, а не display, поскольку display нельзя было анимировать. А проблема в том, что визуально скрытый элемент всё же оставался на странице.
В статье сравниваем традиционные методы и новые функции Chrome, с помощью которых можно анимировать свойство видимости и изменение размера элемента.
Привет, Хабр! Это Саша Раднаев, фронтенд-разработчик в МТС Диджитал. Сегодня поговорим о фронтенде и тех инструментах, которые делают работу специалистов более эффективной. Я бы сказал, что подборка рассчитана на начинающих, но, возможно, и те, кто уже давно в теме, найдут для себя что-то интересное. Было бы отлично, если бы вы делились собственными находками в комментариях. Поехали!
В прошлой статье я рассказал, какие возможности скрывает в себе поле HTML-документа, выведенное на форму 1С. Сегодня подробнее остановлюсь на возможностях языков CSS (язык стилей и некоторых элементов поведения) и JavaScript (язык программирования, используемый в веб-разработке), которые могут пригодиться в работе с 1С-интерфейсом.
Рассмотрим распространенные ошибки которые допускают разработчики при работе с tailwind и пути их решения.
Микроразметка сайта: личный опыт и решения. Никита Неминущий, ведущий инженер-программист «Выберу.ру», рассказывает о том, как на их сайте была реализована микроразметка и какие трудности пришлось преодолеть. Узнайте, как микроразметка влияет на поисковую выдачу и какие инструменты помогли упростить процесс ее добавления.
Здравствуйте, товарищи! Сегодня мы снова поговорим про тулинг для фронтенда. В этот раз обсудим разработку плагинов для сборщиков, таких как: Webpack, Vite, esbuild и подобных. За основу мы возьмем Unplugin.
Короткий ответ на вопрос из заголовка: пока никак. Чуть более длинный - изображен на обложке. А в качестве полноценного ответа, предлагаю вам эту статью. Попробуем хотя бы приблизиться к заявленному результату.
Сразу стоит уточнить: это не туториал, а скорее case-study.
"И так сойдет" ((c) М/Ф "Вовка в 3/9 царстве")
"Работает - не чини" ((c) вольный перевод афоризма Б.Ланса "If it ain't broke, don't fix it")
К появлению этой статьи привело совпадение нескольких событий.
Рынок с каждым днем развивается и для текущих разработчиков главной задачей всегда является держать руку на пульсе и быть с курсе всех изменений в сфере IT. Будь то технологии, библиотеки, либо архитектурные решения. Программисты любого направления Middle уровня и выше понимают, что главная ценность в разработчике это — решать проблему лучшим, доступным и самым простым способом. И для достижения этой цели необходимо использовать определенный набор инструментов, который не всегда одинаковый.
Приведу аналогию.
Мы знакомы с поведением поля ввода пятизвездочного рейтинга. Отображены пустые звезды. Пользователь решает, сколько баллов из пяти будет содержать его оценка. Он выбирает (тап/клик) звезду, которая соответствует оценке (в зависимости от позиции с начала). Выбранная звезда и все звезды, расположенные перед ней, отображаются закрашенными, что обозначает их активное состояние. Если, например, пользователь хочет оценить на три из пяти, он кликает на третьей звезде. После этого первая, вторая и третья звезда «зажигаются». Если не выбрана ни одна звезда, считается, что пользователь не оценивал и оценка не приравнивается к нулю. Оценив однажды, пользователь не может вернуться, чтобы отменить оценивание.
Векторизация — это процесс преобразования растрового изображения (состоящего из пикселей) в векторное изображение, которое описывается математическими формулами. Векторные изображения имеют несколько преимуществ, таких как возможность масштабирования без потери качества и меньший размер файла для определённых типов графики.
В контексте вашего вопроса, если вы преобразуете картинку в векторное отображение с картой высот, это может означать, что вы создаёте векторную графику, которая также включает информацию о высоте или рельефе, что может быть полезно, например, в 3D-моделировании или при создании карт.
Причины написания статьи, общие правила использования handlebars в superset и советы содержатся в первой статье, поэтому сразу опишу следующие шаблоны.
Всем привет. Я Андрей Осипов, фронтендер из Контура. Почти три года назад, когда у компании был еще старый фирменный стиль, мы столкнулись с проблемой экспорта из фигмы изображений в формате SVG. Сложность была с изображениями, где был эффект глассморфизма, он же эффект матового стекла (frosted glass).
Недавно чисто из любопытства я решил проверить, починили ли в Figma эту проблему. Проблема осталась. Плагинов так и нет, а гугл не предлагает хороших решений. Поэтому решил выложить эту статью сюда, может, кому пригодится.
Привет, Хабр! В прошлый раз мы с вами создавали «Игру жизни» на Godot. Движок показал себя отлично, но для такой простой задачи это всё равно что забивать микроскопом гвозди. Особенно когда речь идёт о веб‑экспорте.
В последнее время стоит заикнуться про генерацию изображений, как все сразу вспоминают про нейросети. Stable Diffusion, Midjourney и прочие модели впечатляют, не спорю. Но давайте взглянем на другую сторону генеративного искусства. Ту, где картинки создаются не гигабайтами весов нейронной сети, а несколькими килобайтами JavaScript-кода.
И кстати раз уж речь зашла про красоту в коде: мы как раз запустили «Конкурс красоты кода 2.0». Самое время показать, что даже простые алгоритмы могут создавать нечто впечатляющее. Именно такие работы, где за внешней простотой скрывается математическая элегантность, часто оказываются самыми интересными.
Признаюсь, поначалу я была скептиком ручного кодирования SVG. Будучи фронтенд-разработчиком, привыкшим приводить в порядок "плохие" SVG-файлы, я никогда всерьез не задумывалась о том, чтобы самой рисовать с помощью кода.
Однако, прошлой зимой я создавала проект для рисования каллиграфических сеток и с головой погрузилась в изучение спецификаций SVG. Оказалось, что, несмотря на знание базовых структур и правил работы с SVG, по-настоящему понять значение всех этих цифр и их взаимодействие между собой можно только через практику ручного кодирования.
А как только освоишься, это занятие становится на редкость увлекательным и даже забавным.
Apache Superset всё чаще становится выбором для визуализации данных благодаря открытому коду. Но, увы, столкнувшись с его ограничениями и тонкостями, даже самые опытные пользователи могут столкнуться с трудностями. Есть много ограничений, которые требуют обращения за доработками к разработчикам, но с помощью шаблона Handlebars в сочетании с шаблонизацией jinja некоторые трудности можно обойти.
С его помощью можно внедрить web-верстку прямо в ваши дашборды, обходя множество подводных камней. Готовых шаблонов для handlebars (superset) мало, так как это довольно трудоемкая задача, часто выходящая за рамки работы с готовыми BI-системами.
Вот что вам нужно знать:
Document "picture-in-picture" дает вам больше возможностей для управления окнами "picture-in-picture".
Вложенные объявления в CSS - исправление некоторых сложных ситуаций.
Вы можете задать поведение декораций для элементов, которые разделяются на несколько строк.
И многое другое.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam erat leo, tempus at malesuada sed, dapibus vitae ipsum. Morbi vitae dignissim lectus. Nulla lectus nisl, pretium sit amet viverra vitae, feugiat quis nunc. In semper justo orci. Praesent ultrices risus eu odio ornare suscipit. Pellentesque dapibus mauris magna. Sed congue, quam ut pharetra euismod, justo augue cursus ex, congue volutpat orci metus non enim. Suspendisse orci justo, vehicula et rhoncus eu, eleifend ut massa. Morbi sodales mauris felis, id tincidunt nulla congue quis.
