Как искать и выбирать npm-пакеты? — Блог HTML Academy

Что делает разработчик, если ему нужно раскрасить кнопку в красный цвет? Ищет в npm пакет, окрашивающий кнопки в красный цвет.

Реестр npm

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

Конечно, бездумно использовать менеджер пакетов не стоит: некоторые задачи можно решить и без него. Но всё же npm-пакеты полезны и постоянно применяются в веб-разработке. Поэтому важно знать, как их правильно выбрать, где искать и на что обратить внимание перед установкой.

Как искать подходящий npm-пакет?

Сначала нужно понять, для чего он вам нужен. Предположим, вы хотите автоматически расставить префиксы в свой код. Если вы уже работали с подходящим пакетом и знаете, как он называется, просто открываете сайт npmjs.com и вводите название в строку поиска. Например, «autoprefixer».

Точное совпадение по названию пакета

Если не знаете, какой пакет позволяет это сделать — открываете браузер и вводите в поиске запрос о том, какой npm-пакет подключить для создания HTTP-клиента. Обычно в поисковой выдаче сразу же появляются ссылки на страницы сайта npmjs.com или другие сайты, на которых разработчики обсуждают подходящие варианты.

Гуглим пакет по примерному описанию

Если не получится найти самостоятельно, всегда можно попросить помощи на профессиональных форумах. Например, на Хабре или StackOverflow.

Как выбрать npm-пакет?

Реестр npm — это общедоступная коллекция. Здесь любой разработчик может предложить свой вариант кода, поэтому для решения каждой задачи существует сразу несколько схожих пакетов: десятки или даже сотни готовых вариантов. Но если их бездумно добавлять в свой проект, ситуация может выйти из-под контроля. И поэтому приходится тщательно выбирать.

Чтобы помочь разработчикам, команда npm ввела критерии, по которым можно отсортировать пакеты и выбрать из них наиболее подходящий. Есть четыре условия ранжирования: по популярности, качеству, обслуживанию и оптимальности.

Обслуживание (maintenance). Сортирует пакеты по уровню поддержки кода разработчиками. Считается, что пакеты с хорошей поддержкой будут лучше работать с текущими или будущими версиями npm CLI — интерфейсом командной строки. Обслуживание — это один из важнейших параметров, ведь порой даже высокорейтинговые пакеты с миллионными загрузками перестают поддерживать. Для них не выпускают обновления и не исправляют ошибки, поэтому использование такого пакета рано или поздно может привести к проблемам.

Посмотреть дату последнего обновления можно как в репозитории GitHub (слева), так и прямо на странице пакета на сайте npmjs.com (справа).

Популярность (popularity). Сортирует пакеты по количеству загрузок: чем больше разработчиков использует пакет, тем больше к нему доверия. Сравнить популярность можно и без сортировки. Для этого посмотрите количество еженедельных загрузок на странице пакета на сайте npmjs.comили зайдите в репозиторий на Github и сравните количество звёзд.

Еженедельное число загрузок пакета на npmjs.com

Любопытный факт: на GitHub 16 млн репозиториев, у которых есть хотя бы одна звезда. 1800 имеют более 10 тыс звезд и всего у 20 репозиториев более 100 тыс звезд.

Качество (quality). Учитывает стабильность, наличие файла README, тесты, актуальные зависимости и сложность кода. Его тоже можно проверить без сортировки. Для этого зайдите в репозиторий проекта, посмотрите на коммиты и файлы, в том числе README. Последний заслуживает особенного внимания, потому что содержит информацию о проекте: как устанавливать пакет и как работать с кодом.

Пример файла README, который описывает установку пакета CSSO — минификатора CSS

Оптимальность (optimal). Это универсальный критерий, который объединяет перечисленные выше условия сортировки: популярность, качество и обслуживание.

Коротко

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

А когда сделаете выбор — загляните ещё и на другие ресурсы. Посмотрите обзоры других разработчиков и только после этого решайте, стоит ли использовать пакет в своем проекте или поискать что-то другое.

Какие пакеты чаще используют фронтенд-разработчики?

Разработчики подбирают npm-пакеты в зависимости от поставленных целей. К примеру, HTML Academy использует в учебных проектах несколько npm-пакетов, которые полностью автоматизируют рутинные задачи разработки.

Чтобы оптимизировать картинки, уменьшить их вес и перевести в новый формат, наши студенты и стажёры используют gulp-svgstore, imagemin и gulp-webp. Для минификации HTML и CSS файлов применяют csso и html-minifier. Но так как в production-окружении важно иметь возможность просмотреть сжатый код, дополнительно устанавливают gulp-sourcemaps.

Чтобы сделать код более читаемым и ускорить процесс разработки, студенты и стажёры используют препроцессоры. Поэтому в проект добавляют less или sass. А чтобы запустить локальный сервер и подготовить код к production-окружению, применяют gulp-plumber, del, browser-sync и другие npm-пакеты.

Подборка инструментов для редактирования, конвертирования и оптимизации SVG

Подготовили список инструментов, которые помогут вам с правильно использовать простоту и гибкость формата SVG в своих проектах.

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

Наиболее многосторонний вариант – Inkscape. Это бесплатный векторный графический редактор с открытым исходным кодом, который предоставляет несколько инструментов для рисования и манипуляций с объектами. Кроме импорта вектора, также поддерживается AI, EPS, PS и PNG.

Другим бесплатным графическим редактором является Boxy SVG. Это мультиплатформенный редактор, который способен работать не только в браузерах на Chromium, но и на любой из доступных вам ОС: Windows, MacOS и все семейство Linux.

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

PicSVG позволяет загрузить изображение на сайт, где мгновенно происходит конвертация в вектор. Работает с PNG, JPEG и GIF.

Vectormagic предлагает более сложные функции. Этот инструмент дает больше контроля, позволяя просматривать результат и настраивать, например, цвета и уровень детализации. После регистрации доступны две бесплатные конвертации, затем придется воспользоваться одним из тарифов по подписке (от $7,95).

Если вам нужно превратить растровое изображение в векторное, проверьте px2svg от Эрика Мейера (Eric Meyer). Это небольшой PHP-скрипт, который обрабатывает исходное изображение попиксельно, прямоугольник к прямоугольнику воссоздавая оригинал в векторном виде.

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

Базовая оптимизация

Чтобы быть уверенным в содержимом файла и не потерять лишнее, сокращая объем, следует воспользоваться ручным редактированием. Для этого подойдет любой редактор кода с живым предпросмотром изображений – это позволит вычистить файл от служебных классов, лишних пробелов и запятых не нарушив целостность графики. Хорошей идеей будет воспользоваться гайдом от Андреаса Ларсена (Andreas Larsen), если решите делать все руками.

Кроме того, можно использовать специальные сервисы для автоматической оптимизации, например svgo. Но тут стоит быть внимательным – чтобы сохранить важное содержимое (например, относящееся к анимации), лучше все-таки делать это вручную.

Создание SVG-набора

SVG-набор может стать отличной альтернативой классическим шрифтам-иконкам. В то время как, если со шрифтом возникнет какая-то проблема, пользователь не увидит ничего, SVG может грациозно откатиться к PNG (главное предусмотреть эту возможность).

Создание таких наборов возможно вручную – здесь Крис Койлер (Chris Coyier) рассказывает, как это сделать. А можно воспользоваться плагином для Grunt grunt-svgstore или gulp-svgstore для Gulp.

Чек-лист идеального сайта

Оптимизация веб-страницы: подробное руководство

Design System, часть 2. Иконки, шрифты SVG, Gulp | by Сергей Никишкин

Как автоматизировать процесс работы с иконками на стороне дизайна и разработки

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

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

До вмешательства ситуация с иконками была следующая:

Технологии, которые мы использовали для добавления иконок на товары

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

Дизайнеры не отставали и старательно поддерживали этот бардак. Некоторые иконки в отдельном формате SVG были разбросаны по папкам, другие хранились в AI-файлах, а остальные иконки были доступны только в Sketch и Zeplin.

  • Единое место для хранения и поиска текущих иконок
  • Автоматическое добавление и обновление иконок в файлах Sketch
  • Единое решение на стороне разработки

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

Sketch

На первом этапе мы собрали все иконки в один файл Sketch, классифицировали их по продуктам и добавили в Zeplin.

Sketch-файл со списком иконок

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

Вместо отсутствующих иконок в макетах и ​​тестовых стендах мы используем цветные квадраты в качестве заполнителей.

Пример заполнителя

Как только отсутствующий значок появится в шрифте и новая сборка будет опубликована, заполнитель автоматически изменится на правильное изображение.

Lingo

На втором этапе мы добавили собранные иконки в Lingo и пометили их для удобства. Теперь вы можете искать значки по размеру, типу, синониму, названию или фильтровать по продукту.

Значки в Lingo

Добавление значков в новый документ или обновление существующего документа осуществляется с помощью подключаемого модуля Sketch, который поставляется с Lingo. Кстати, в Lingo хранятся не только иконки, но и вся библиотека компонентов. Немного подробнее об этом приложении я рассказал в предыдущей статье.

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

Маска с цветом для иконки в Sketch

Несмотря на очевидные преимущества, этот метод имел один существенный недостаток. При использовании масок после экспорта SVG код выглядел так:

Пример кода, который был сгенерирован при экспорте из Sketch

Невозможно правильно добавить такую ​​иконку к шрифту. Из-за маски вместо значка будет цветной прямоугольник. Идея держать дополнительный набор «чистых» иконок для разработчиков была отвергнута как трудоемкая, и мы начали искать решение. Первым делом мы посмотрели на SVGO и провели несколько тестов:

Результат консольной утилиты «Gulp-svgmin»

SVGO удалил много лишнего кода, оптимизировал и минимизировал его, но не смог решить основную проблему. Немного погуглив, мы поняли, что подходящих решений в открытом доступе нет, и встали перед выбором: либо отказываемся от масок со стороны дизайна, либо разрабатываем собственное решение.

Конечно, мы выбрали второй вариант и решили изобрести собственное колесо. На всякий случай мы проверили несколько десятков иконок и убедились, что Sketch выдает примерно одинаковый код для любого SVG, экспортированного из библиотеки.

Код трех разных SVG, экспортированных из Sketch

В таком коде легко найти шаблоны. После нахождения паттернов вырезать ненужные части и перестроить SVG — это чисто технический вопрос. Результатом является задача Gulp, которая делает следующее:

Пример задачи Gulp, которую мы сделали

Все, что нам нужно сделать, чтобы запустить задачу, это написать одну команду в консоли, а работа с набором из 200 иконок занимает менее секунду и дает нам именно те результаты, которые нам нужны.

Да, сейчас конец 2017 года, и мы используем шрифт SVG. Почему? Во-первых, исторически, а во-вторых, это решение оказалось наиболее универсальным для всех команд разработчиков. Кроме того, поддержка старых браузеров для нас гораздо важнее, чем возможности, которые предлагают современные технологии SVG.

До сих пор в разработке использовались два метода сборки шрифтов.

  • Icomoon — веб-приложение. Шрифты собираются и обновляются вручную.
  • FontCustom — набор консольных утилит. Сборка запускается автоматически, но требует ruby ​​ , python , eot-utils и fontforge .

Мы сразу отказались от Icomoon из-за большого объема ручной работы. FontCustom после детального тестирования был заменен на более гибкий и предсказуемый gulp-iconfont , не требующий ничего лишнего и достаточно простой в настройке. Для каждой новой версии шрифта gulp-iconfont создает предварительный просмотр HTML со всеми значками. Предварительный просмотр позволяет контролировать качество значков до того, как изменения попадут в репозиторий.

Предварительный просмотр в браузере сгенерированного SVG-шрифта

Далее дизайнер публикует обновленную версию в git, где срабатывает триггер, который выполняет задание в Jenkins для сборки и публикации в npm . После публикации все изменения сразу же становятся доступными в каждом проекте, в котором используется этот шрифт.

Давайте еще раз посмотрим на процесс до нашего вмешательства:

Процесс добавления новой иконки в различные товары до

Теперь после:

Процесс добавления новой иконки в различные товары после

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

Отдельное спасибо Сергею Сабурову и Дмитрию Козлову за помощь, терпение и поддержку.

  • Часть 1: Единая библиотека компонентов
  • Часть 3: Самодельные инструменты, которые мы используем в повседневной работе
  • Как создать плагин Sketch, который будет связывать символы из вашей библиотеки с любой внешней документацией
  • Lingo
  • Icomoon
  • FontCustom
  • Gulp-iconfont
  • Facebook
  • Medium

Создание систем Icon с помощью SVG

Создание отличной системы и рабочего процесса — одна из самых сложных задач. Долгое время создание систем иконок для тем и веб-сайтов подразумевало использование знаковых шрифтов. Но по мере того, как поддержка браузеров улучшилась, встроенные SVG стали новой модной вещью.

Система значков SVG — это способ скомпилировать набор значков для использования на вашем сайте со встроенным листом спрайтов SVG и элементом для ссылки на значок.

Многие дизайнеры и разработчики хотят использовать систему значков SVG, но не имеют локально настроенного Shopify или не используют инструменты сборки, такие как Gulp и Grunt. Если это так, то этот урок для вас. Это руководство покажет вам, как использовать спрайты SVG в первый раз, особенно полезно, если вы все еще используете знаковые шрифты и хотите перейти на систему значков SVG.

Мы будем использовать Vectr для создания и экспорта пользовательских SVG и приложение под названием Fontastic для создания спрайта SVG. Я также ссылаюсь на другие руководства по настройке спрайтов SVG в Shopify с помощью Gulp и Grunt в конце этой статьи.

Learning Liquid: Начало работы с Shopify Theming

Получите это бесплатное руководство и узнайте практические советы, приемы и методы, чтобы начать изменять, разрабатывать и создавать темы Shopify.

Указав свой адрес электронной почты, мы также будем отправлять вам маркетинговые сообщения, связанные с Shopify. Вы можете отказаться от подписки в любое время. Примечание. Руководство не будет доставлено по электронной почте на основе ролей, например info@, developer@ и т. д.

Наши виртуальные винтики крутятся.

Обратите внимание, что доставка нашего электронного письма
до вашего почтового ящика может занять от
до 15 минут.

1. Подготовка ваших SVG

Чтобы подготовить пользовательские SVG для вашей системы значков, вам потребуется использовать такие программы, как Illustrator, Sketch или Vectr, для создания любых пользовательских значков. Если вы уже используете знаковый шрифт, вам нужно убедиться, что у вас есть SVG-версия вашего шрифта, чтобы создать спрайт SVG с помощью стороннего инструмента.

При экспорте из Vectr обязательно выберите selection в качестве источника и svg в качестве формата, если вы не настроили размер страницы заранее. Это гарантирует, что экспортированный SVG не будет содержать кучу пробелов того же размера, что и страница.

2. Создание набора иконок

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

Преобразование шрифта или загрузка пользовательских значков

Если у вас есть знаковый шрифт, в который нужно преобразовать, и формат шрифта SVG, вы можете сделать это с помощью этого онлайн-конвертера шрифтов.

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

Таким же образом можно добавлять отдельные значки или в уже созданный набор. Нажмите Импортируйте значки , затем выберите свой шрифт SVG или пользовательские значки SVG.

Выбор из существующих наборов значков

Кроме того, вы можете создать собственную систему значков из существующих библиотек значков. Чтобы сократить время загрузки и повысить производительность, я бы рекомендовал всегда создавать системы , включающие только те значки, которые вы будете использовать. Если вы используете только 10 из них на своем сайте, нет веской причины ссылаться на всю библиотеку иконок Fontawesome.

Выбор из существующей библиотеки иконок, такой как Font Awesome.

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

3. Выбор способа встраивания системы значков

Теперь, когда мы создали набор значков, нам нужно связать его с нашим веб-сайтом или темой. Мы можем сделать это несколькими способами, самый простой способ — использовать простой фрагмент кода для встраивания. Вы также можете найти инструкции по встраиванию SVG-спрайта на веб-сайте Fontastic.

Простой фрагмент кода для встраивания

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

На экране публикации Fontastic выберите вкладку SVG-спрайтов .

Затем вам нужно будет скопировать и вставить фрагмент кода в элемент вашей темы Shopify. Для большинства тем Shopify вы можете найти своей темы Shopify, перейдя на страницу редактирования HTML/CSS в административной панели Shopify, а затем перейдя к файлу theme.liquid .

Внутри открывающих и закрывающих тегов вставьте фрагмент кода, скопированный из Fontastic.

4. Добавление CSS для вашей системы значков

Чтобы ваши значки отображались в правильном размере, вам нужно добавить дополнительный CSS в вашу тему Shopify. В вашей теме 9=»значок-«], [класс*=»значок-«]{ высота: 32 пикселя; ширина: 32 пикселя; отображение: встроенный блок; заливка: текущий цвет; }

Свойства height и width управляют размером значка по умолчанию. Чтобы настроить размер, просто отрегулируйте значения. Чтобы изменить цвет значка, вы можете использовать свойство

fill . Ключевое слово currentColor наследует значение цвета родительского элемента, его можно изменить для конкретных значков, используя имя класса на значке и установив для него определенный заливка цветом.

Значки отображаются неправильно? CSS-конфликты?

Если вы используете тему из магазина тем Shopify, в которой уже есть какая-либо система значков, у вас могут возникнуть конфликты CSS. Это означает, что CSS, который мы добавили в таблицу стилей, который правильно определяет размер наших значков для использования, может конфликтовать с другим CSS в теме.

Один из способов обойти этот конфликт — задать интервал между именами в нашей пользовательской системе значков с использованием префикса пользовательского класса CSS. Вы можете сделать это в Fontastic, перейдя на Изменить шрифт и изменить имя класса.

Примечание: Если вы обновите префикс класса CSS для пространства имен системы значков, вышеуказанные селекторы CSS должны будут измениться на любое новое пространство имен.

5. Использование ваших иконок!

Чтобы использовать свои значки, все, что вам нужно сделать, это скопировать и вставить код, указанный в справочнике значков.

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

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

Некоторые преимущества использования спрайтов SVG включают:
  • Визуальный рендеринг
    SVG всегда отображаются резко, без сглаживания, как это делают некоторые знаковые шрифты.
  • Более широкие возможности управления CSS для анимации
    Поскольку вы можете ориентироваться на встроенные пути SVG, у вас есть больший контроль над анимацией значков и тем, как эти значки стилизуются с помощью CSS.
  • Семантика и доступность
    Вместо использования глифов внутри элементов ::before браузер должен знать, что вы показываете изображение. Со встроенными спрайтами svg браузер понимает, что этот значок является изображением. Вы даже можете предоставить заголовки для SVG, чтобы помочь программам чтения с экрана.

Вы можете найти полную сравнительную разбивку Криса Койера на CSS Tricks.

Вам также может понравиться: Дизайн с помощью SVG: как масштабируемая векторная графика может увеличить вовлеченность посетителей.

Другие приложения: Icomoon

Многие другие статьи на эту тему обращаются к Icomoon, чтобы сделать что-то очень похожее на Fontastic.me. Fontastic не только имеет доступ к различным библиотекам иконок (аналогично Fontello и Icomoon), но также имеет возможность создать постоянную ссылку CDN для вашего спрайта SVG в бесплатной учетной записи с неограниченной пропускной способностью.

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

Системы иконок SVG с Gulp и Grunt

Карсон Шолд (Carson Shold), фронтенд-разработчик здесь, в Shopify, написал отличное руководство о том, как использовать gulp для создания системы иконок SVG. Крис Койер также написал статью о том, как сделать это с помощью Grunt, это не относится к Shopify, но довольно просто, если вы уже привыкли использовать средство запуска задач.

Поддержка браузеров

Системы иконок SVG стали обычным явлением. Если вы используете простой фрагмент кода для встраивания через Fontastic, не беспокойтесь! Он поставляется со встроенной поддержкой IE9.+, используя полифилл SVG4everybody.

А если вы используете тему Shopify, если у вас есть полифилл SVG4everybody, вы можете без проблем внедрить внешний SVG для всех браузеров, поддерживаемых Shopify.

Дополнительные ресурсы

  • Переход от шрифтов значков к SVG: Преобразование значков шрифтов в SVG — описывает, как создавать спрайты SVG с помощью Icomoon и Font Blast.
  • Десять причин, по которым мы перешли с иконочного шрифта на SVG — Как и почему singleplanet.com перешел с иконочного шрифта на SVG.
  • The Great Icon Debate: Fonts Vs SVG — отличная статья на sitepoint.com о спорах между иконочными шрифтами и системами иконок svg.
  • Сборник информации о SVG — огромный список статей о SVG. Разделение различных тем на категории со ссылками и описанием каждой статьи.

    No related posts.