4 способа добавить иконки на сайт из Figma — все плюсы и минусы

4 способа добавить иконки на сайт из Figma — все плюсы и минусы

Проверяя html-макеты верстальщиков и разработчиков наблюдаю проблемы с добавлением иконок на сайт. Они их добавляют чёрт пойми как… Могут добавить их как png изображения, а могут вообще использовать не иконки из макета, а похожие иконки, использовав, к примеру, FontAwesome. Это жестко, скажу я вам. В связи с этим я хочу расставить все точки над И в этой теме и рассказать достаточно подробно о том, как лучше всего добавлять иконки на сайт. Читать далее

Подробнее
[Перевод] Безопасный CSS, или как писать универсальные стили

[Перевод] Безопасный CSS, или как писать универсальные стили

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

Подробнее
[Перевод] HTML5 и алгоритм разметки документов

[Перевод] HTML5 и алгоритм разметки документов

Все мы уже знаем, что для создания веб-сайтов лучше всего использовать HTML5. Сейчас мы обсудим то, как правильно использовать HTML5. Одной из важных частей HTML5, которую до сих пор не все понимают, является разделение содержимого на разделы: section, article, aside и nav. Чтобы понять разделение содержимого, нам нужно понять алгоритм разметки документа. Понимание алгоритма структурирования документа может оказаться непростой задачей, но оно того стоит. Вы больше не будете ломать голову

Подробнее
Добавление пользовательской темы для фронтэнд-приложений

Добавление пользовательской темы для фронтэнд-приложений

Привет, Хабр! Меня зовут Павел, я фронтэнд-архитектор в компании Itransition. Вот уже более 8 лет я работаю во фронтэнде. В течении этого времени мне довелось поработать с приложениями, как полностью основанными на бэкенд технологиях, так и с классическими сайтами, написанными с использованием нативного JS и различных библиотек и фреймворков. В данной статье я хотел бы провести в некотором роде ретроспективу тех решений, с которыми сталкивался на практике. В последние годы мы привыкли…

Подробнее
Убираем JavaScript. Как при помощи htmx красиво использовать HTML и уменьшить объем кода

Убираем JavaScript. Как при помощи htmx красиво использовать HTML и уменьшить объем кода

htmx — инструмент для создания сложных и интерактивных веб-приложений на HTML, альтернатива клиентскому рендерингу на Javascript. В этой статье рассказываем, как библиотека помогает переиспользовать элементы на сервере, сократить объем кода на Javascript и отказаться от сборки. Читать далее

Подробнее
Никто не знает, как работает каскад

Никто не знает, как работает каскад

Перед началом чтения пройдите простой тест — каким будет значение свойства background-color в первом и во втором варианте, и почему именно так? Неожиданный для многих ответ сразу после ката. Там же подробный рассказ о том, как работает каскад — фильтрует, обрабатывает и вычисляет значения свойств. Например, что будет, если указать в трёх разных местах цвет одного и того же элемента. p.s. Если у вас отключены картинки в ленте на Хабре, то сразу заходите под кат — тест дублируется и…

Подробнее
Начни карьеру frontend-разработчика в СберМаркете

Начни карьеру frontend-разработчика в СберМаркете

Всем привет! Мы открываем набор на оплачиваемую стажировку для начинающих фронтендеров. Лекции и практические занятия подготовят новичков к работе над реальными фронтенд-задачами, а наши менторы в течение всей стажировки будут рядом, чтобы передать свой опыт. Подать заявку можно до 14 ноября. Подробнее о стажировке

Подробнее
Как устроена Дока — опенсорсный справочник с документацией, который сообщество пишет для сообщества

Как устроена Дока — опенсорсный справочник с документацией, который сообщество пишет для сообщества

Дока — это справочник, который помогает начинающим разработчикам разобраться с нюансами веба, а более опытным даёт возможность делиться и обмениваться знаниями. Его особенность в том, что наполнением сайта занимается сообщество, а редакция Доки в этом помогает. Недавно мы писали про запуск проекта, а в этом посте поговорим подробнее про его устройство. Редакторы Доки рассказали, сколько они работали над проектом, в чём отличия Доки от остальных справочников и почему важно формировать…

Подробнее
Как стать web-разработчиком на Python за полгода: конкретный план действий

Как стать web-разработчиком на Python за полгода: конкретный план действий

Всем привет! Меня зовут Евгений Степанов, и я Python Full Stack-Developer в компании PVS-Studio. В этой статье вы узнаете, что нужно сделать, чтобы за полгода стать Python backend-разработчиком. После прочтения данной публикации у вас будет чёткий план, который останется только реализовать. Поехали! Читать далее

Подробнее
Запустилась Дока — опенсорсный справочник по веб-разработке

Запустилась Дока — опенсорсный справочник по веб-разработке

Дока — это опенсорсный справочник с документацией, который веб-разработчики пишут для веб-разработчиков. Цель Доки — сделать документацию по веб-разработке практичной, понятной и не скучной. Это открытый проект, внести вклад в него может каждый. Контент и код Доки лежат на GitHub, правила участия, обсуждения и ревью проходят открыто для всех желающих. Яндекс.Практикум поддерживает работу редакции Доки. Читать дальше →

Подробнее
[Перевод] Как сделать Змейку на чекбоксах и не только

[Перевод] Как сделать Змейку на чекбоксах и не только

В допандемическом 2020 Брайан Браун отправился на неделю в Recurse Center и разработал Checkboxland. Эта библиотека JavaScript отображает текст и анимацию на сетке флажков. К забавному маленькому проекту автор сделал несколько демонстраций, написал об этом, а в итоге положил проект на полку и не прикасался к нему около года. В конце концов, отчаянно захотелось развлечься с программированием, и автор снова взялся за Checkboxland. Хотелось сделать более качественную и сложную анимацию,…

Подробнее
Как создать блок с градиентной обводкой?

Как создать блок с градиентной обводкой?

Представим ситуацию: перед вами встало сверх задание — нужно сделать на сайте блок с градиентной обводкой. Нужно сразу понимать, что для этого не существует простого и очевидного CSS API. Это значит, что для получения необходимого визуального эффекта нам нужно писать определенные “костыли”. Предлагаю рассмотреть 2 подхода к решению этой задачи. Читать далее

Подробнее