Статьи

CSS-анимация и создание искусства с помощью кода с помощью Рейчел Смит

Сентябрь 20, 2018

Версионное шоу с Рэйчел Смит

В этом выпуске Showing Version к Тиму и Дэвиду присоединилась Рэйчел Смит, разработчик внешнего интерфейса в CodePen. Они обсуждают создание искусства с помощью кода, обучение навыкам анимации, будущее анимации в Интернете и неограниченное творческое использование кода.

Показать заметки

Шоу с Рэйчел Смит

расшифровка

Тим:

Эй, как дела, все это Тим Эвко …

Дэвид:

… а это М. Дэвид Грин …

Тим:

… и вы слушаете пятый выпуск подкаста версий.

Дэвид:

Это место, где мы собираемся, чтобы обсудить индустрию Интернета от разработки до дизайна — с некоторыми из людей, которые делают это сегодня и планируют, в каком направлении она будет в следующей версии.

Тим:

Итак, сегодня у нас есть Рэйчел Смит. Итак, Рейчел, большое спасибо за присоединение к нам! Вы хотите дать нам краткое введение для тех из нас, кто вас не знает?

Рейчел:

Конечно, меня зовут Рэйчел Смит. Я — австралийский веб-разработчик, который живет в США в Калифорнии, и моя ежедневная работа связана с CodePen — помогая создавать приложение, которое является CodePen.

И я в основном фронт-энд-разработчик, но я также немного разбираюсь в бэк-энде, и у меня есть своего рода хобби в создании искусства с помощью кода.

Дэвид:

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

Рейчел:

Оооо! [Смеется]. Какая у меня версия в моей нынешней карьере? Я бы сказал, лучшая версия! То, где я сейчас нахожусь в моей карьере, это то место, к которому я уже давно работаю. И эта работа, работа над продуктом, в который я действительно верю и которым я действительно наслаждаюсь — возможность сделать это лучше — походит на сценарий моей работы мечты, насколько моя карьера затронута.

Так что, да, это версия.

Тим:

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

Рейчел:

Да неужели? Это хорошо! [Смеется]

Тим:

Каждый выбирает номер и проходит через это «У меня была версия 0.0 здесь…». Вы просто сказали «Нет, лучшая версия прямо здесь».

Рейчел:

О, верно! Скажем, последний, лучший, стабильный. [Смеется]

Тим:

Звучит хорошо.

Дэвид:

Стабильность — это то, к чему мы все можем стремиться.

Тим:

Итак, говоря о создании искусства с помощью кода, очень интересно, что вы упомянули об этом, потому что сегодня я смотрел видео на YouTube. Я уверен, что это @mpjme ? (Возможно, я это сделал .) Но он делает FunFunFunction , и каждый понедельник он выпускает новое видео, и сегодняшняя тема была связана с искусством и кодом .

Итак, по пятам, вы хотите немного подробнее рассказать о том, как создавать искусство с помощью кода?

Рейчел:

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

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

Дэвид:

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

Рейчел:

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

Обычно это было похоже на лотерейные баннеры — пытаясь продать лотерейные билеты — потому что азартные игры — огромная индустрия в Австралии. Поэтому мы делали эти баннеры, которые были сумасшедшими, анимированными, прыгали на вас, пытаясь заставить людей нажимать на них. И это было с Flash.

И оттуда я влюбился в дизайн движений в сети. И это привело меня в область, где я могу оценить абстрактное использование анимации с — я больше не использую Flash, но я вроде как применил этот подход к использованию HTML, CSS, JavaScript для создания этих странных, бессмысленных вещей, которые на что приятно смотреть.

Давид [4:24] :

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

Но в какие сроки вы начали переходить на HTML, CSS и JavaScript для этого, и как вы это увидели?

Рейчел:

Я думаю, что мой первый опыт создания анимации без Flash был через CSS3, а также через canvas Вероятно, это было примерно в то время, когда HTML5 был громким модным словом, поэтому я просто думаю, когда это произойдет. Это был бы конец 2011 и 2012, я думаю.

И это было, когда CSS3 и CSS-анимации стали более распространенными интерфейсными методами, а также HTML5 Canvas API. Вот тогда я и начал изучать эти варианты. В 2012 году я работал подрядчиком в Лондоне, и мне пришлось взять на себя несколько контрактных заданий в сфере рекламы, где им требовалось много анимации HTML5, но они хотели, чтобы она работала на iPad.

Таким образом, мы были вынуждены покончить с Flash и действительно пытаться раздвинуть границы возможностей HTML5. А потом мы столкнулись с множеством препятствий, и было очень сложно сделать что-то хорошее с хорошей частотой кадров. И я думаю, что главное, что меня взволновало с тех пор — с 2012 года — мы наблюдаем огромный рост возможностей в том, что может делать движок рендеринга браузера и что он может делать с этими технологиями анимации.

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

Тим:

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

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

Итак, как вы осуществили этот переход от CSS-анимации, которую некоторые люди считают несколько менее сложной, к этим полноценным WebGL и 3D-средам?

Рейчел:

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

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

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

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

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

Дэвид [9:04] :

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

Рейчел:

Есть пара книг, которые я обычно рекомендую для анимации JavaScript. Обычно это мои рекомендации. Я чувствую, что самая важная вещь, которой я делюсь с людьми, это то, что вы можете взять некоторые из моих ресурсов для начинающих и прочитать их. А потом возможно найти более сложные проекты на GitHub, где люди делятся своим кодом.

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

Дэвид:

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

Рейчел:

Да, я чувствую, что способ, которым нас учат в разработке, часто заключается в поиске лучшего способа что-то сделать — прочесать Интернет и читать, пока мы не найдем наиболее эффективное решение проблемы.

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

Тим:

Это очень крутой и очень здравый совет.

Итак, вы упомянули ранее CodePen, и это было для вас чем-то вроде работы мечты, что определенно звучит потрясающе. Не могли бы вы немного рассказать о том, какую работу вы там делаете? И как вы находите в этом искусство, и каковы типичные стандарты для типов взаимодействий, которые вы строите?

Рейчел:

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

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

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

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

Давид [12:55] :

Мне любопытно, есть ли какие-то особые проблемы при работе на сайте, который предназначен для показа чужих кодов и чужих проектов?

Рейчел:

О, так много испытаний! Когда вы позволяете людям запускать код на сайте, очевидно, есть много проблем с безопасностью, которые я определенно не имею права решать, но другие ребята, с которыми я работаю, проделали большую работу по решению этих проблем. Но проблема, с которой мы сталкиваемся, заключается в том, что наши пользователи действительно раздвигают границы с возможностями браузерного рендеринга — что удивительно, это так здорово — у вас может возникнуть ситуация, когда, если у вас есть восемь фреймов на странице, и они все пытаются сделать несколько сумасшедших CSS-анимаций, которые могут привести к замедлению работы браузера. Так что это то, о чем мы всегда знаем, и это постоянная вещь, против которой мы должны бороться.

Тим:

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

Отойдя на секунду от анимации, есть ли другие вещи, над которыми вам обычно нравится работать, какие-либо побочные проекты, подобные вещи?

Рейчел:

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

Так что они также побочные интересы моих.

Дэвид:

Звучит так, будто вы приходите на работу с интерфейсом с неким фоном дизайна, а также фоном разработки. У вас есть опыт в дизайне?

Рейчел:

Я действительно изучал какой-то дизайн, когда поступил в колледж во второй раз (потому что первый раз был небольшим провалом).

Во второй раз я решил, что хочу стать веб-дизайнером, и это потому, что в первый раз я подумал, что собираюсь стать инженером-программистом. Это пошло не так хорошо, потому что это был слишком «инженерный бэкэнд», чтобы поддерживать мой интерес — потому что я вроде очень визуальный человек, но мне нравится логика.

И когда я пошел изучать веб-дизайн, я не знал, что в то время существовал целый передовой мир, где вы могли использовать свои дизайнерские навыки, а также навыки программирования. И именно во время этого курса веб-дизайна мы познакомились с HTML, CSS JavaScript, а затем я сказал: «О, это то, что мне нравится, что я должен делать». Итак…

Дэвид:

Это захватывающе, и это здорово, когда ты обнаруживаешь что-то подобное.

Рейчел:

Угу.

Дэвид:

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

Рейчел [16:00] :

Я думаю, что пространство для такого рода вещей растет вместе с инструментами, которые люди могут использовать для создания прототипов. И специально для дизайнеров, чтобы прототип проектных работ, чтобы они могли работать со своими разработчиками. Есть пара инструментов; тот, кто приходит на ум, это Фреймер . Это позволяет вам создавать быстрые анимированные прототипы дизайна, не имея при этом серьезных навыков разработки.

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

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

Тим:

В своей работе я работаю на сайте электронной коммерции. Это определенно то, с чем я сталкиваюсь — между получением типичного файла Sketch или документа Photoshop, а затем промежуточным состоянием: каковы взаимодействия? Время от времени бывают композиции слоев или видео, но всегда есть трудности с тем, как вы переводите реальное ощущение того, с чем работаете. Так что я определенно понимаю, что там.

Рейчел:

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

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

Дэвид:

Да, это очень захватывающее время, и оно определенно находится на острие того, над чем мы пытаемся работать прямо сейчас. Мне интересно, как люди могут найти вас в Интернете и связаться с вами?

Рейчел:

Наверное, лучшее место, где меня можно найти — это Twitter. Я довольно активен в Твиттере, и мой хэндл Twitter — @Rachsmithtweets .

Вы можете найти меня на CodePen, очевидно, codepen.io/RachSmith . У меня также есть веб-сайт RachSmith.com , но я не особо публикую там, потому что большую часть своего блога я размещаю в своем блоге CodePen . У меня также есть репозиторий GitHub «Спроси меня о чем-нибудь» , который является отличным местом для тех, кто хочет задать вопрос, который они хотят мне задать. Я получаю электронную почту, и я, как правило, плохо отношусь к электронной почте и не отвечаю. Так что, если у вас есть вопрос, у меня есть репозиторий GitHub, который хорош для этого.

Дэвид:

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

Рейчел:

Спасибо, что приняли меня!

[Музыкальная интерлюдия]

Тим:

Так что это было определенно очень интересно. Одна из причин, по которой я хотел, чтобы Рэйчел была на шоу, заключается в том, насколько она хороша в том, чтобы выпускать такой чистый код и простые в освоении и понимании демонстрации. Что ты думаешь, Дэвид?

Дэвид:

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

Тим:

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

Давид [20:22] :

Это стесняющая зубы ситуация. К сожалению, мне пришлось много с этим справляться. Я работал в компаниях, и я консультировался с компаниями, которые пытаются вывести свои интерфейсы в Интернет, на самом переднем крае того, на что способны браузеры. И это перешло от «Будем ли мы делать Flash?» До «Собираемся ли мы делать CSS?» И «Будем ли мы использовать JavaScript для нашей анимации? Что наиболее эффективно для пользователей? »

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

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

Тим:

Да, это иронично, потому что на моей работе один из основных способов, которыми мы пытаемся связать эти взаимодействия друг с другом — между разработкой и дизайном — это рассылка демонстраций CodePen. Это довольно забавно, потому что есть один для всего, вплоть до «Я хочу щелкнуть этот значок поиска SVG, и он превратится в X. И как это выглядит и ощущается?»

Но CodePen отлично подходит как минимум для справочного материала. И если у вас нет чего-то подобного, то мое следующее занятие — просто сесть с дизайнером и сказать: «Хорошо, что вы думаете? Давай прототипируем это вместе.

Дэвид:

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

Но это код прототипа, и путаница в том, «сделано» это или нет — в действительности «готова к производству» — это то, что инженеры должны держать во главе при работе с дизайнерами.

Тим:

Осторожно — та незавершенная вещь, которую вы упоминаете, звучит опасно близко к тому, что я делаю каждый день! Так …

[Смех]

Дэвид:

Эй, я верю в тебя. Я знаю, что вы смотрите на общую проблему качества кода производства.

Тим:

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

Дэвид:

Может быть, кто-то, кто может общаться так же хорошо, как Рейчел.

Тим:

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

Дэвид:

Да, и теперь все знают, как связаться с ней, потому что это все в заметках к шоу для этого эпизода.

Тим:

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

[Смех]

Дэвид:

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

Тим:

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

Я имею в виду, например, для себя, большинство из того, что я знаю о JavaScript и производительности браузера и CSS, происходит именно от этих трех, и это хорошая вещь. Я определенно думаю скопировать это сам. Если есть что-то, что кто-то хочет спросить меня — я не знаю.

Дэвид:

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

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

Тим:

Да, безусловно. Отличное решение.

Дэвид:

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

Тим:

Да, конечно.

Спасибо вам большое за внимание, все. Нам всегда нравится говорить со всеми вами о технологиях.

Дэвид:

Мы также хотели бы поблагодарить SitePoint.com и наших продюсеров, Адама Робертса и Офели Лехат. Пожалуйста, не стесняйтесь, присылайте нам свои комментарии на Twitter — @versioningshow — и дайте нам оценку на iTunes .

Дайте нам знать, как у нас дела.

Тим:

Увидимся в следующий раз и надеемся, что вам понравилась эта версия.

39
Share: