Пошаговая инструкция: как с Node.js организовать иконки из Figma в проекте

Эта статья подробно описывает создание небольшого скрипта на Node.js для выгрузки векторных иконок из Figma в проект, а также универсального компонента для разных видов иконок, который удобно использовать в своём приложении. Скрипт может пригодиться командам, которые ещё не определились с общим подходом к использованию и хранению иконок в проекте, и тем, кто стремится автоматизировать этот процесс. Под катом – довольно длинный (мы предупредили!) и подробный текст, но с большим…

Подробнее

[Перевод] Геометрия объектной модели документа: исчерпывающее руководство

Я не считаю, что DHTML — cool, просто картинка хорошая) Привет, друзья! Представляю вашему вниманию перевод этой замечательной статьи. Знаете ли вы, что кроме интерфейсов, определенных спецификациями объектной модели документа (Document Object Model, DOM) и объектной модели каскадных таблиц стилей (Cascading Style Sheets (CSS) Object Model, CSSOM), существует также набор свойств и методов, определяемых в модуле отображения CSSOM (CSSOM View Module)? Этот интерфейс…

Подробнее

[Перевод] HTML & CSS Features, Tips For a 10x Faster Page Loading Speed — DEV Community

В этой статье мы будем рассматривать ускорение работы страницы только с помощью файлов HTML и CSS Читать далее

Подробнее

Чёрная магия трансформов, или об оптимизации анимаций на CSS

Иногда Frontend-разработчики сталкиваются с тем, что для оптимизации производительности нужно написать волшебное свойство translateZ(0) или will-change. Анимации перестанут зависать, ничего не будет лагать и мир станет чуть ярче. ✨ Читать далее

Подробнее

Резиновый десктопный адаптив: как сделать большие экраны одинаковыми

Зачастую, когда говорят об адаптиве, подразумевают сужение большого экрана до мобильного размера без потери функциональности. Однако, на самом деле, адаптив также существует между разными десктопными версиями. Обычно разработчики не очень стараются применять адаптивные подходы для больших экранов, ведь если интерфейс поместился на HD разрешении, то он точно поместится на 2K разрешении и больше. Однако контент никак не масштабируется, поэтому имеем на больших разрешениях маленькие

Подробнее

[Перевод] Как сделать динамические цвета в CSS

Когда говорим «динамический», подразумеваем JavaScript. Но некоторые динамические функции можно реализовать, используя только CSS. Например, цвета. Читать далее

Подробнее

База знаний веб-разработчика: прокачиваем навыки владения CSS

Владея знаниями по вёрстке, можно достичь поставленных целей и перейти на следующую ступень профессионализма. В этой статье я расскажу, какие материалы мы с коллегами используем в своей работе: уверен, эта информация будет полезна разработчикам на CSS. На базовом уровне Цель: Помнить все свойства в CSS. Достигается примерно за 300 часов Что изучать? Читать далее

Подробнее

OpenSource на завтрак

Делиться своими идеями с сообществом - хорошо и правильно. Это позволяет развиваться, перенимать лучшие практики, исследовать новые инструменты, учиться оформлять свои решения. Но какой код стоит выносить в общий доступ? И как делать это на постоянной основе? Чтобы разобраться в этих вопросах я решил сделать свой Javascript OpenSource Boilerplate - маленькую, но максимально расширяемую библиотеку компонентов. Она называется handy-ones. Читать далее

Подробнее

[Перевод] CSS :autofill селектор

Псевдокласс :auto-fill в CSS позволяет нам стилизовать элементы , которые содержат контент, автоматически заполняемый браузером. В качестве примера возьмем форму регистрации нового пользователя. Вы когда-нибудь нажимали на поле ввода и видели раскрывающийся список предложений для вставки? Читать далее

Подробнее

[recovery mode] Кровь, пот и слезы: как я переделал навигацию на сайте документации и в чём профит переделки

Привет! Меня зовут Владимир, но вы можете звать меня просто Иннокентий Алексеевич. Я люблю эксперименты. Сегодня я расскажу, как можно улучшить навигационное меню на сайте документации, сократить время сборки и размер сайта больше чем в два раза. В качестве примера возьму сайт документации, собранный при помощи Antora. Кому будет полезен материал: техническим писателям, разработчикам сайтов документации и просто любителям опенсорса и красивых вещей. Antora — генератор…

Подробнее

[Перевод] Разбираемся в анимациях и временных переходах в CSS

Анимация — несколько рисунков, показанных последовательно, чтобы создать иллюзию движения. Анимации привлекают внимание пользователей и помогают сделать интерфейсы понятными. Мы подготовили перевод статьи, чтобы разобраться, как контролировать движения и переходы в CSS. Читать далее

Подробнее

Как работать из PyCharm community c CSS

Я только начинаю свой путь, как в веб-разработке, так и в программировании в принципе, с ответом на этот вопрос мучился 2 дня и казалось бы перепробовал все, НО как это обычно бывает, решение лежало на поверхности. P.S. Могу путаться в терминах в силу своей неопытности, прошу строго не судить. Всегда рад конструктивной обратной связи, спасибо за понимание! Да, я знаю о существовании Django, просто начинать как мне кажется лучше с голого кода и дальше с базовыми знаниями переходить к

Подробнее