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

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

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

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

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

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

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

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

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

Главное не тешьте себя надеждами, что это всё история на пару месяцев, а после 100кк/наносек, сейчас рынку больше нужны специалисты миддл+ уровня, потому что джунов стоит целая очередь, а ещё нейронки пишут легкий код всё лучше и лучше, поэтому будет куда правильнее если потратите на обучение хотя бы год, но даже потратив год не думайте, что залетите на работу за месяц, слышал данные, что сейчас в РФ среднее время поиска работы у джуна это полгода, поэтому учитесь и не отчаивайтесь

В представленных здесь функциях есть гораздо больше синтаксиса, подробностей и нюансов, я просто хотел показать вам возможности, продемонстрировать базовый синтаксис и примеры использования.

Все верстальщики рано или поздно сталкивались с болью, которая заключается в адаптиве сайта под различные устройства. Существуют разные технологии, упрощающие подгонку размеров под определённые устройства, например, clamp(). Эта функция удобна, так как позволяет минимизировать использование брейкпоинтов, но у неё есть свои недостатки.