Как создать систему плагинов в Интернете и хорошо выспаться ночью

Содержание статьи

1 Проблема №2: копирование сцены стоит дорого
2 Последствия запуска в главном потоке
3 Что значит для eval быть опасным?
4 Скрытие глобальных переменных

Проблема №2: копирование сцены стоит дорого

Вторая проблема с Подход </code> заключается в том, что он требует сериализации больших частей документа перед отправкой их в плагин. </p> <p class="text_block-module--paragraph--1anyX"> Оказывается, что люди могут создавать очень, очень большие документы в Figma до такой степени, что достигают пределов памяти. Например, в файле систем проектирования Microsoft (который мы потратили месяц на оптимизацию в прошлом году) потребовалось 14 секунд, чтобы сериализовать документ и отправить его плагину <em>прежде чем плагин мог даже работать </em>. Учитывая, что большинство плагинов будут включать быстрые действия, такие как «поменять два элемента в моем выборе», это сделает плагины непригодными для использования. </p> <p class="text_block-module--paragraph--1anyX"> <em> Загрузка данных с приращением или ленивым также не является возможным вариантом, потому что : </em> </p> <ol start="1" class="css-1c1hft1"> <li class="css-1ihnge6"> Это может занять месяцы перестройки основного продукта. </li> <li class="css-1ihnge6"> Любой API, который может нуждаться в ожидании части данных, которая еще не поступила, будет теперь будем асинхронными. </li> </ol> <p class="text_block-module--paragraph--1anyX"> В итоге, поскольку документы Figma могут иметь действительно большой объем данных с большим количеством взаимозависимостей, <code> <iframe> </code> не сработали для нас . </p> <p class="text_block-module--paragraph--1anyX"> Поскольку подход <code> <iframe> </code> был исключен, нам пришлось вернуться назад в нашем исследовании. </p> <div class='code-block code-block-3 ai-viewport-1 ai-viewport-2' style='margin: 8px 0; clear: both;'>  <div id="yandex_rtb_R-A-268541-2"></div> <script type="text/javascript"> (function(w, d, n, s, t) { w[n] = w[n] || []; w[n].push(function() { Ya.Context.AdvManager.render({ blockId: "R-A-268541-2", renderTo: "yandex_rtb_R-A-268541-2", async: true }); }); t = d.getElementsByTagName("script")[0]; s = d.createElement("script"); s.type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); })(this, this.document, "yandexContextAsyncCallbacks"); </script></div> <p class="text_block-module--paragraph--1anyX"> Мы вернулись к чертежной доске и провели две долгих недели обсуждая различные подходы. Поскольку простое решение не сработало, нам пришлось серьезно рассмотреть более экзотические идеи. Их было много — слишком много, чтобы заполнить поля этого сообщения в блоге. </p> <p class="text_block-module--paragraph--1anyX"> <em> Но большинство подходов имели один или несколько существенных недостатков: </em> </p> <ul class="css-1bcf4ob"> <li class="css-1ihnge6"> Иметь API, который было бы слишком сложно использовать (например, доступ к документу с помощью REST API или GraphQL-подобный метод) </li> <li class="css-1ihnge6"> Зависит от функций браузера, которые производители браузера удалили или пытаются (например, синхронный xhr + сервисный работник, общие буферы) </li> <li class="css-1ihnge6"> Требует значительной исследовательской работы или ре-архитектуры нашего приложения, которое может занять месяцы, прежде чем мы сможем даже проверить, что оно может работать (например, загрузить копию Figma в iframe + синхронизировать через CRDT, взломать зеленые потоки в JavaScript с генераторами путем кросс-компиляции) </li> </ul> <p class="text_block-module--paragraph--1anyX">. В итоге мы пришли к выводу, что нам нужно найти способ создать модель, в которой плагины могут напрямую манипулировать документом. Написание плагина должно чувствовать себя дизайнером, автоматизирующим свои действия. Поэтому мы знали, что нам нужно разрешить плагинам запускаться в главном потоке. </p> <h3 id="implications-of-running-on-the-main-thread" class="css-tatx5o"><span id="Posledstviya-zapuska-v-glavnom-potoke"> Последствия запуска в главном потоке </span></h3> <p class="text_block-module--paragraph--1anyX"> Прежде чем мы углубимся в попытку №2, нам нужно сделать шаг Вернитесь назад и еще раз проверьте, что означает запуск плагинов в главном потоке. В конце концов, мы сначала не рассматривали это, потому что знали, что это может быть опасно. Работа в основном потоке звучит очень похоже на <code> eval (UNSAFE_CODE) </code>. </p> <p class="text_block-module--paragraph--1anyX"> <em> Преимущества работы в основном потоке заключаются в том, что плагины могут: </em> </p> <ol start="1" class="css-1c1hft1"> <li class="css-1ihnge6"> Непосредственно редактируйте документ, а не его копию, устраняя проблемы со временем загрузки. </li> <li class="css-1ihnge6"> Запустите нашу логику обновления сложных компонентов и ограничения, не имея необходимости иметь две копии этого кода. </li> <li class="css-1ihnge6"> Выполнять синхронные вызовы API в ситуациях, когда вы ожидаете синхронный API. Не было бы никакой путаницы с загрузкой или сбросом обновлений. </li> <li class="css-1ihnge6"> Писать можно более интуитивно понятным способом: плагины — это просто автоматизация действий, которые в противном случае пользователь делал бы вручную с помощью нашего пользовательского интерфейса. </li> </ol> <p class="text_block-module--paragraph--1anyX"> <em> Однако теперь у нас есть следующие проблемы: </em> </p> <ol start="1" class="css-1c1hft1"> <li class="css-1ihnge6"> Плагины могут зависать, и нет никакого способа прервать плагин. </li> <li class="css-1ihnge6"> Плагины могут выполнять сетевые запросы, как фигма .com. </li> <li class="css-1ihnge6"> Плагины могут получать доступ и изменять глобальное состояние. Это включает в себя изменение нашего пользовательского интерфейса, создание зависимостей от внутреннего состояния приложения вне API или выполнение совершенно злонамеренных действий, таких как изменение значения <code> ({}) .__ proto __ </code>которое отравляет каждый новый и существующий объект JavaScript. </li> </ol> <p class="text_block-module--paragraph--1anyX"> Мы решили, что можем отказаться от требования (1). Когда плагины зависают, это влияет на воспринимаемую стабильность Figma. Однако наша модель плагинов работает так, что они когда-либо запускаются только при явном действии пользователя. Изменяя пользовательский интерфейс при запуске плагина, зависания всегда будут приписываться плагину. Это также означает, что плагин не может «взломать» документ. </p> <h3 id="what-does-it-mean-for-eval-to-be-dangerous" class="css-tatx5o"><span id="CHto-znachit-dlya-eval-byt-opasnym"> Что значит для <code> eval </code> быть опасным? </span></h3> <p class="text_block-module--paragraph--1anyX"> иметь дело с Вопрос о том, что плагины могут выполнять сетевые запросы и получать доступ к глобальному состоянию, мы должны сначала точно понять, что означает, что «любой произвольный код JavaScript опасен». </p> <p class="text_block-module--paragraph--1anyX"> Если вариант JavaScript, назовем его SimpleScript, имел только способность делать арифметику, такую как <code> 7 * 24 * 60 * 60 </code>было бы вполне безопасно <code> eval </code>. </p> <p class="text_block-module--paragraph--1anyX"> Вы можете добавить некоторые функции в SimpleScript как переменную присваивание и операторы if делают его более похожим на язык программирования, и это все равно будет очень безопасно. В конце концов, это все еще сводится к арифметике. Добавьте оценку функции, и теперь у вас есть лямбда-исчисление и полнота Тьюринга. </p> <p class="text_block-module--paragraph--1anyX"> Другими словами, в JavaScript <em> нет </em>чтобы быть опасным. В своей наиболее редукционистской форме это просто расширенный способ выполнения арифметики. <em> опасно </em>когда у него есть доступ к входу и выходу. Это включает доступ к сети, доступ к DOM и т. Д. Опасные API <strong> браузера </strong> </p> <p class="text_block-module--paragraph--1anyX"> И все API являются глобальными переменными. Так что скрывайте глобальные переменные! </p> <h3 id="hiding-the-global-variables" class="css-tatx5o"><span id="Skrytie-globalnyh-peremennyh"> Скрытие глобальных переменных </span></h3> <p class="text_block-module--paragraph--1anyX"> Теперь сокрытие глобальных переменных звучит хорошо в теории, но сложно создать безопасные реализации, просто «скрывая» их. Вы можете рассмотреть, например, удаление всех свойств объекта <code> окна </code> или установку для них значения <code> null </code>но код все равно может получить доступ к глобальным значениям, таким как <code> ({ }). конструктор </code>. Было бы очень сложно найти все возможные пути утечки какого-либо глобального значения. </p> <p class="text_block-module--paragraph--1anyX"> Скорее нам нужна более сильная форма «песочницы», в которой эти глобальные значения никогда не существовали. </p> <div class="blockquote-module--blockquoteContainer--3SVVf"> <blockquote class="blockquote-module--blockquote--1I9Ja blockquote-module--tdes20--3hTlJ blockquote-module--tmob18--3EwSh"> <p class="text_block-module--paragraph--1anyX"> Другими словами, JavaScript не должен быть опасным. </p> </blockquote></div> <p class="text_block-module--paragraph--1anyX"> Рассмотрим предыдущий пример гипотетического SimpleScript, который поддерживает только арифметику. Простое упражнение CS 101 — написать программу арифметической оценки. В любой разумной реализации этой программы SimpleScript просто не сможет делать ничего, кроме арифметики. </p> <p class="text_block-module--paragraph--1anyX"> Теперь расширяйте SimpleScript, чтобы поддерживать больше возможностей языка, пока он не станет JavaScript, и эта программа называется интерпретатором <strong> </strong> — это то, как запускается JavaScript, динамический интерпретируемый язык. </p> <p class="text_block-module--paragraph--1anyX"> Реализация JavaScript — это слишком много работы для небольшого запуска, такого как наш. Вместо этого, чтобы проверить этот подход, мы взяли Duktape, облегченный интерпретатор JavaScript, написанный на C ++, и скомпилировали его в WebAssembly. </p> <p class="text_block-module--paragraph--1anyX"> Чтобы убедиться, что он работает, мы запустили на нем test262, стандартный набор тестов JavaScript. Он проходит все тесты ES5, за исключением нескольких несущественных сбоев. Чтобы запустить код плагина с помощью Duktape, мы бы назвали функцию <code> eval </code> из <em> скомпилированным интерпретатором </em>. </p> <p class="text_block-module--paragraph--1anyX"> <em> Каковы свойства этого подхода? </em> </p> <ul class="css-1bcf4ob"> <li class="css-1ihnge6"> Этот интерпретатор работает в основном потоке, что означает, что мы можем создать API на основе основного потока. </li> <li class="css-1ihnge6"> Он безопасен, о чем легко думать. Duktape не поддерживает API-интерфейсы браузера — и это особенность! Кроме того, он работает как WebAssembly, которая сама является изолированной средой, которая не имеет доступа к API-интерфейсам браузера. Другими словами, код плагина может взаимодействовать с внешним миром только через явные API-интерфейсы из белого списка. </li> <li class="css-1ihnge6"> Он медленнее обычного JavaScript, поскольку этот интерпретатор не является JIT, но это нормально. </li> <li class="css-1ihnge6"> требует, чтобы браузер скомпилировал бинарный файл WASM среднего размера, что имеет определенную стоимость. </li> <li class="css-1ihnge6"> Инструменты отладки браузера не работают по умолчанию, но мы потратили день на реализацию консоли для интерпретатора, чтобы проверить, что он будет по крайней мере, можно отлаживать плагины. </li> <li class="css-1ihnge6"> Duktape поддерживает только ES5, но в веб-сообществе уже широко распространена практика кросс-компиляции новых версий JavaScript с использованием таких инструментов, как Babel. </li> </ul> <p class="text_block-module--paragraph--1anyX"> (Кроме того, несколько месяцев спустя Фабрис Беллард выпустил QuickJS, который изначально поддерживает ES6.) </p> <p class="text_block-module--paragraph--1anyX"> Теперь, собираем интерпретатор JavaScript! В зависимости от ваших склонностей или эстетики как программиста, вы можете подумать: </p> <p class="text_block-module--paragraph--1anyX"> ЭТО УДИВИТЕЛЬНО! 🤩 </p> <p class="text_block-module--paragraph--1anyX"> или </p> <p class="text_block-module--paragraph--1anyX">… на самом деле? Механизм JavaScript в браузере, который <em> уже имеет механизм JavaScript? </em> 🤨. Что дальше, операционная система в браузере? </p> <p class="text_block-module--paragraph--1anyX"> И некоторые подозрения полезны! Лучше избегать повторной реализации браузера, если в этом нет необходимости. Мы уже потратили много усилий на внедрение всей системы рендеринга. Это было необходимо для обеспечения производительности и межбраузерной поддержки, и мы рады, что сделали это, но мы все еще пытаемся не изобретать колесо. </p> <p class="text_block-module--paragraph--1anyX"> <strong> Это не тот подход, которым мы в конечном итоге придерживались. </strong> Есть еще лучший подход. Тем не менее, важно было осветить шаг к пониманию нашей окончательной модели песочницы, которая является более сложной. </p> <p class="text_block-module--paragraph--1anyX"> Хотя у нас был многообещающий подход к компиляции интерпретатора JS, был еще один инструмент, на который нужно было обратить внимание. Мы нашли технологию, называемую Shim Realms, созданную ребятами из Agoric. </p> <p class="text_block-module--paragraph--1anyX"> Эта технология описывает создание песочницы и поддержку плагинов в качестве потенциального варианта использования. Многообещающее описание! API Realms выглядит примерно так: </p> </p></div> </pre> <span class="cp-load-after-post"></span></div><div class="post-meta wf-mobile-collapsed"><div class="entry-meta"><span class="category-link">Category: <a href="https://artforlife.ru/stati-po-dizajnu" >Статьи по дизайну</a></span><a href="https://artforlife.ru/2019/08/28" title="01:00" class="data-link" rel="bookmark"><time class="entry-date updated" datetime="2019-08-28T01:00:16+00:00">28.08.2019</time></a></div><div class="entry-tags">Теги: <a href="https://artforlife.ru/tag/v" rel="tag">в</a><a href="https://artforlife.ru/tag/vyspatsya" rel="tag">выспаться</a><a href="https://artforlife.ru/tag/i" rel="tag">и</a><a href="https://artforlife.ru/tag/internete" rel="tag">Интернете</a><a href="https://artforlife.ru/tag/kak" rel="tag">как</a><a href="https://artforlife.ru/tag/nochyu" rel="tag">ночью</a><a href="https://artforlife.ru/tag/plaginov" rel="tag">плагинов</a><a href="https://artforlife.ru/tag/sistemu" rel="tag">систему</a><a href="https://artforlife.ru/tag/sozdat" rel="tag">создать</a><a href="https://artforlife.ru/tag/horosho" rel="tag">Хорошо</a></div></br>Пожалуйста, поставьте рейтинг статье:<div id="post-ratings-39542" class="post-ratings" itemscope itemtype="http://schema.org/Article" data-nonce="6b99c03bda"><img id="rating_39542_1" src="https://artforlife.ru/wp-content/plugins/wp-postratings/images/stars/rating_off.gif" alt="1 Звезда" title="1 Звезда" onmouseover="current_rating(39542, 1, '1 Звезда');" onmouseout="ratings_off(0, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" /><img id="rating_39542_2" src="https://artforlife.ru/wp-content/plugins/wp-postratings/images/stars/rating_off.gif" alt="2 Звезды" title="2 Звезды" onmouseover="current_rating(39542, 2, '2 Звезды');" onmouseout="ratings_off(0, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" /><img id="rating_39542_3" src="https://artforlife.ru/wp-content/plugins/wp-postratings/images/stars/rating_off.gif" alt="3 Звезды" title="3 Звезды" onmouseover="current_rating(39542, 3, '3 Звезды');" onmouseout="ratings_off(0, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" /><img id="rating_39542_4" src="https://artforlife.ru/wp-content/plugins/wp-postratings/images/stars/rating_off.gif" alt="4 Звезды" title="4 Звезды" onmouseover="current_rating(39542, 4, '4 Звезды');" onmouseout="ratings_off(0, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" /><img id="rating_39542_5" src="https://artforlife.ru/wp-content/plugins/wp-postratings/images/stars/rating_off.gif" alt="5 Звезд" title="5 Звезд" onmouseover="current_rating(39542, 5, '5 Звезд');" onmouseout="ratings_off(0, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" /> (Пока оценок нет)<br /><span class="post-ratings-text" id="ratings_39542_text"></span><meta itemprop="headline" content="Как создать систему плагинов в Интернете и хорошо выспаться ночью" /><meta itemprop="description" content=" Проблема №2: копирование сцены стоит дорого Вторая проблема с Подход заключается в том, что он требует сериализации больших частей документа перед отправкой их в плагин. Оказывается, что ..." /><meta itemprop="datePublished" content="2019-08-28T01:00:16+00:00" /><meta itemprop="dateModified" content="2019-08-28T01:00:16+00:00" /><meta itemprop="url" content="https://artforlife.ru/stati-po-dizajnu/kak-sozdat-sistemu-plaginov-v-internete-i-horosho-vyspatsya-nochyu.html" /><meta itemprop="author" content="admin" /><meta itemprop="mainEntityOfPage" content="https://artforlife.ru/stati-po-dizajnu/kak-sozdat-sistemu-plaginov-v-internete-i-horosho-vyspatsya-nochyu.html" /><div style="display: none;" itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><meta itemprop="url" content="https://artforlife.ru/wp-content/uploads/2019/08/pre-kak-sozdat-sistemu-plaginov-v-internete-i-horosho-vyspatsya-nochyu-150x150.png" /><meta itemprop="width" content="150" /><meta itemprop="height" content="150" /></div><div style="display: none;" itemprop="publisher" itemscope itemtype="https://schema.org/Organization"><meta itemprop="name" content="Новости искусства и дизайна" /><div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"><meta itemprop="url" content="" /></div></div></div><div id="post-ratings-39542-loading" class="post-ratings-loading"> <img src="https://artforlife.ru/wp-content/plugins/wp-postratings/images/loading.gif" width="16" height="16" class="post-ratings-image" /> Загрузка...</div></div><div class="single-share-box"><div class="share-link-description">Поделиться этой записью</div><div class="share-buttons"><a class="facebook" href="http://www.facebook.com/sharer.php?u=https%3A%2F%2Fartforlife.ru%2Fstati-po-dizajnu%2Fkak-sozdat-sistemu-plaginov-v-internete-i-horosho-vyspatsya-nochyu.html&t=%D0%9A%D0%B0%D0%BA+%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D1%82%D1%8C+%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D1%83+%D0%BF%D0%BB%D0%B0%D0%B3%D0%B8%D0%BD%D0%BE%D0%B2+%D0%B2+%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82%D0%B5+%D0%B8+%D1%85%D0%BE%D1%80%D0%BE%D1%88%D0%BE+%D0%B2%D1%8B%D1%81%D0%BF%D0%B0%D1%82%D1%8C%D1%81%D1%8F+%D0%BD%D0%BE%D1%87%D1%8C%D1%8E" title="Facebook" target="_blank"><span class="soc-font-icon"></span><span class="screen-reader-text">Share with Facebook</span></a><a class="twitter" href="https://twitter.com/share?url=https%3A%2F%2Fartforlife.ru%2Fstati-po-dizajnu%2Fkak-sozdat-sistemu-plaginov-v-internete-i-horosho-vyspatsya-nochyu.html&text=%D0%9A%D0%B0%D0%BA+%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D1%82%D1%8C+%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D1%83+%D0%BF%D0%BB%D0%B0%D0%B3%D0%B8%D0%BD%D0%BE%D0%B2+%D0%B2+%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82%D0%B5+%D0%B8+%D1%85%D0%BE%D1%80%D0%BE%D1%88%D0%BE+%D0%B2%D1%8B%D1%81%D0%BF%D0%B0%D1%82%D1%8C%D1%81%D1%8F+%D0%BD%D0%BE%D1%87%D1%8C%D1%8E" title="Twitter" target="_blank"><span class="soc-font-icon"></span><span class="screen-reader-text">Share with Twitter</span></a><a class="google" href="https://plus.google.com/share?url=https%3A%2F%2Fartforlife.ru%2Fstati-po-dizajnu%2Fkak-sozdat-sistemu-plaginov-v-internete-i-horosho-vyspatsya-nochyu.html&title=%D0%9A%D0%B0%D0%BA+%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D1%82%D1%8C+%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D1%83+%D0%BF%D0%BB%D0%B0%D0%B3%D0%B8%D0%BD%D0%BE%D0%B2+%D0%B2+%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82%D0%B5+%D0%B8+%D1%85%D0%BE%D1%80%D0%BE%D1%88%D0%BE+%D0%B2%D1%8B%D1%81%D0%BF%D0%B0%D1%82%D1%8C%D1%81%D1%8F+%D0%BD%D0%BE%D1%87%D1%8C%D1%8E" title="Google+" target="_blank"><span class="soc-font-icon"></span><span class="screen-reader-text">Share with Google+</span></a><a class="pinterest pinit-marklet" href="//pinterest.com/pin/create/button/" title="Pinterest" target="_blank" data-pin-config="above" data-pin-do="buttonBookmark"><span class="soc-font-icon"></span><span class="screen-reader-text">Share with Pinterest</span></a><a class="linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fartforlife.ru%2Fstati-po-dizajnu%2Fkak-sozdat-sistemu-plaginov-v-internete-i-horosho-vyspatsya-nochyu.html&title=%D0%9A%D0%B0%D0%BA%20%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D1%82%D1%8C%20%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D1%83%20%D0%BF%D0%BB%D0%B0%D0%B3%D0%B8%D0%BD%D0%BE%D0%B2%20%D0%B2%20%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82%D0%B5%20%D0%B8%20%D1%85%D0%BE%D1%80%D0%BE%D1%88%D0%BE%20%D0%B2%D1%8B%D1%81%D0%BF%D0%B0%D1%82%D1%8C%D1%81%D1%8F%20%D0%BD%D0%BE%D1%87%D1%8C%D1%8E&summary=&source=%D0%9D%D0%BE%D0%B2%D0%BE%D1%81%D1%82%D0%B8%20%D0%B8%D1%81%D0%BA%D1%83%D1%81%D1%81%D1%82%D0%B2%D0%B0%20%D0%B8%20%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD%D0%B0" title="LinkedIn" target="_blank"><span class="soc-font-icon"></span><span class="screen-reader-text">Share with LinkedIn</span></a><a class="whatsapp" href="whatsapp://send?text=%D0%9A%D0%B0%D0%BA%20%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D1%82%D1%8C%20%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D1%83%20%D0%BF%D0%BB%D0%B0%D0%B3%D0%B8%D0%BD%D0%BE%D0%B2%20%D0%B2%20%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82%D0%B5%20%D0%B8%20%D1%85%D0%BE%D1%80%D0%BE%D1%88%D0%BE%20%D0%B2%D1%8B%D1%81%D0%BF%D0%B0%D1%82%D1%8C%D1%81%D1%8F%20%D0%BD%D0%BE%D1%87%D1%8C%D1%8E%20-%20https%3A%2F%2Fartforlife.ru%2Fstati-po-dizajnu%2Fkak-sozdat-sistemu-plaginov-v-internete-i-horosho-vyspatsya-nochyu.html" title="WhatsApp" target="_blank"rel="nofollow" data-action="share/whatsapp/share"><span class="soc-font-icon"></span><span class="screen-reader-text">Share with WhatsApp</span></a></div></div><nav class="navigation post-navigation" role="navigation"><h2 class="screen-reader-text">Навигация по записям</h2><div class="nav-links"><a class="nav-previous" href="https://artforlife.ru/stati-po-dizajnu/ux-design-course-at-kyiv-academy-of-media-arts-case-study-furnify.html" rel="next"><i class="fa fa-angle-left" aria-hidden="true"></i><span class="meta-nav" aria-hidden="true">Предыдущая</span><span class="screen-reader-text">Предыдущая запись:</span><span class="post-title h4-size">UX Design course at Kyiv Academy of Media Arts. Case study: Furnify</span></a><a class="nav-next" href="https://artforlife.ru/stati-po-dizajnu/10-kompanij-kotorye-pytayutsya-ispolzovat-dizajnerov-hudozhnikov-i-fotografov.html" rel="prev"><i class="fa fa-angle-right" aria-hidden="true"></i><span class="meta-nav" aria-hidden="true">Следующая</span><span class="screen-reader-text">Следующая запись:</span><span class="post-title h4-size">10 компаний, которые пытаются использовать дизайнеров, художников и фотографов</span></a></div></nav><div class="single-related-posts"><h3>Связанные записи</h3><section class="items-grid"><div class=" related-item"><article class="post-format-standard"><div class="wf-td"><a class="alignleft post-rollover" href="https://artforlife.ru/stati-po-dizajnu/stoit-li-platit-za-kursy-esli-vy-hotite-stat-dizajnerom-2.html" ><img class="preload-me" src="https://artforlife.ru/wp-content/uploads/2024/04/Stoit-li-platit-za-kursy-esli-vy-hotite-stat-dizajnerom-110x80.jpg" srcset="https://artforlife.ru/wp-content/uploads/2024/04/Stoit-li-platit-za-kursy-esli-vy-hotite-stat-dizajnerom-110x80.jpg 110w, https://artforlife.ru/wp-content/uploads/2024/04/Stoit-li-platit-za-kursy-esli-vy-hotite-stat-dizajnerom-220x160.jpg 220w" width="110" height="80" alt="" /></a></div><div class="post-content"><a href="https://artforlife.ru/stati-po-dizajnu/stoit-li-platit-za-kursy-esli-vy-hotite-stat-dizajnerom-2.html">Стоит ли платить за курсы, если вы хотите стать дизайнером?</a><br /><time class="text-secondary" datetime="2024-04-17T17:24:45+00:00">17.04.2024</time></div></article></div><div class=" related-item"><article class="post-format-standard"><div class="wf-td"><a class="alignleft post-rollover" href="https://artforlife.ru/stati-po-dizajnu/top-5-besplatnyh-prilozhenij-android-dlya-udalennogo-dostupa-k-pk.html" ><img class="preload-me" src="https://artforlife.ru/wp-content/uploads/2024/04/1713291780_Top-5-besplatnyh-prilozhenij-Android-dlya-udalennogo-dostupa-k-PK-110x80.png" srcset="https://artforlife.ru/wp-content/uploads/2024/04/1713291780_Top-5-besplatnyh-prilozhenij-Android-dlya-udalennogo-dostupa-k-PK-110x80.png 110w, https://artforlife.ru/wp-content/uploads/2024/04/1713291780_Top-5-besplatnyh-prilozhenij-Android-dlya-udalennogo-dostupa-k-PK-220x160.png 220w" width="110" height="80" alt="" /></a></div><div class="post-content"><a href="https://artforlife.ru/stati-po-dizajnu/top-5-besplatnyh-prilozhenij-android-dlya-udalennogo-dostupa-k-pk.html">Топ-5 бесплатных приложений Android для удаленного доступа к ПК</a><br /><time class="text-secondary" datetime="2024-04-16T21:23:00+00:00">16.04.2024</time></div></article></div><div class=" related-item"><article class="post-format-standard"><div class="wf-td"><a class="alignleft post-rollover" href="https://artforlife.ru/stati-po-dizajnu/veb-dizajner-i-verstalshhik-v-chem-raznitsa-zhizn-sajty-i-birzhi-frilansa-obzory-frilans-birzh-novosti-sovety-frilans-dlya-nachinayushhih-freelance-today.html" ><img class="preload-me" src="https://artforlife.ru/wp-content/uploads/2024/04/Veb-dizajner-i-verstalshhik-v-chem-raznitsa-ZHizn-110x80.png" srcset="https://artforlife.ru/wp-content/uploads/2024/04/Veb-dizajner-i-verstalshhik-v-chem-raznitsa-ZHizn-110x80.png 110w, https://artforlife.ru/wp-content/uploads/2024/04/Veb-dizajner-i-verstalshhik-v-chem-raznitsa-ZHizn-220x160.png 220w" width="110" height="80" alt="" /></a></div><div class="post-content"><a href="https://artforlife.ru/stati-po-dizajnu/veb-dizajner-i-verstalshhik-v-chem-raznitsa-zhizn-sajty-i-birzhi-frilansa-obzory-frilans-birzh-novosti-sovety-frilans-dlya-nachinayushhih-freelance-today.html">Веб-дизайнер и верстальщик — в чем разница? / Жизнь / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY</a><br /><time class="text-secondary" datetime="2024-04-16T11:21:43+00:00">16.04.2024</time></div></article></div><div class=" related-item"><article class="post-format-standard"><div class="wf-td"><a class="alignleft post-rollover" href="https://artforlife.ru/stati-po-dizajnu/kak-prodavat-tsifrovye-produkty-v-2024-godu.html" ><img class="preload-me" src="https://artforlife.ru/wp-content/uploads/2024/04/Kak-prodavat-tsifrovye-produkty-v-2024-godu-110x80.jpg" srcset="https://artforlife.ru/wp-content/uploads/2024/04/Kak-prodavat-tsifrovye-produkty-v-2024-godu-110x80.jpg 110w, https://artforlife.ru/wp-content/uploads/2024/04/Kak-prodavat-tsifrovye-produkty-v-2024-godu-220x160.jpg 220w" width="110" height="80" alt="" /></a></div><div class="post-content"><a href="https://artforlife.ru/stati-po-dizajnu/kak-prodavat-tsifrovye-produkty-v-2024-godu.html">Как продавать цифровые продукты в 2024 году</a><br /><time class="text-secondary" datetime="2024-04-16T01:20:42+00:00">16.04.2024</time></div></article></div><div class=" related-item"><article class="post-format-standard"><div class="wf-td"><a class="alignleft post-rollover" href="https://artforlife.ru/stati-po-dizajnu/10-osnovnyh-tryukov-youtube-kotorye-vy-dolzhny-znat.html" ><img class="preload-me" src="https://artforlife.ru/wp-content/uploads/2024/04/1713183465_10-osnovnyh-tryukov-YouTube-kotorye-vy-dolzhny-znat-110x80.jpg" srcset="https://artforlife.ru/wp-content/uploads/2024/04/1713183465_10-osnovnyh-tryukov-YouTube-kotorye-vy-dolzhny-znat-110x80.jpg 110w, https://artforlife.ru/wp-content/uploads/2024/04/1713183465_10-osnovnyh-tryukov-YouTube-kotorye-vy-dolzhny-znat-220x160.jpg 220w" width="110" height="80" alt="" /></a></div><div class="post-content"><a href="https://artforlife.ru/stati-po-dizajnu/10-osnovnyh-tryukov-youtube-kotorye-vy-dolzhny-znat.html">10 основных трюков YouTube, которые вы должны знать</a><br /><time class="text-secondary" datetime="2024-04-15T15:17:44+00:00">15.04.2024</time></div></article></div><div class=" related-item"><article class="post-format-standard"><div class="wf-td"><a class="alignleft post-rollover" href="https://artforlife.ru/stati-po-dizajnu/55-luchshih-besplatnyh-stokovyh-fotobankov-kotorye-nuzhno-znat-v-2024-godu.html" ><img class="preload-me" src="https://artforlife.ru/wp-content/uploads/2024/04/55-luchshih-besplatnyh-stokovyh-fotobankov-kotorye-nuzhno-znat-v-2024-110x80.png" srcset="https://artforlife.ru/wp-content/uploads/2024/04/55-luchshih-besplatnyh-stokovyh-fotobankov-kotorye-nuzhno-znat-v-2024-110x80.png 110w, https://artforlife.ru/wp-content/uploads/2024/04/55-luchshih-besplatnyh-stokovyh-fotobankov-kotorye-nuzhno-znat-v-2024-220x160.png 220w" width="110" height="80" alt="" /></a></div><div class="post-content"><a href="https://artforlife.ru/stati-po-dizajnu/55-luchshih-besplatnyh-stokovyh-fotobankov-kotorye-nuzhno-znat-v-2024-godu.html">55 лучших бесплатных стоковых фотобанков, которые нужно знать в 2024 году</a><br /><time class="text-secondary" datetime="2024-04-12T15:56:54+00:00">12.04.2024</time></div></article></div></section></div> </article> </div> <aside id="sidebar" class="sidebar"> <div class="sidebar-content widget-divider-off"> <section id="custom_html-2" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"> <div id="yandex_rtb_R-A-268541-1"></div> <script type="text/javascript"> (function(w, d, n, s, t) { w[n] = w[n] || []; w[n].push(function() { Ya.Context.AdvManager.render({ blockId: "R-A-268541-1", renderTo: "yandex_rtb_R-A-268541-1", async: true }); }); t = d.getElementsByTagName("script")[0]; s = d.createElement("script"); s.type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); })(this, this.document, "yandexContextAsyncCallbacks"); </script>  <div id="yandex_direct_D-A-268824-2"></div> <script type="text/javascript"> (function(w, d, n, s, t) { w[n] = w[n] || []; w[n].push(function() { Ya.Context.AdvManager.render({ blockId: "D-A-268824-2", renderTo: "yandex_direct_D-A-268824-2", searchText: "поисковый запрос", searchPageNumber: 1 }); }); t = d.getElementsByTagName("script")[0]; s = d.createElement("script"); s.type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); })(this, this.document, "yandexContextAsyncCallbacks"); </script> </div></section><section id="uw_recent_posts_thumb-2" class="style1 widget uw_widget_wrap uw_thumb_widget"> <h3 class="uw-title"> <span>Самые свежие статьи</span> </h3> <ul class="uw-ul uw-widget-recent-posts clr style-default"> <li class="uw-widget-recent-posts-li"> <a href="https://artforlife.ru/stati-po-dizajnu/stoit-li-platit-za-kursy-esli-vy-hotite-stat-dizajnerom-2.html" title="Стоит ли платить за курсы, если вы хотите стать дизайнером?" class="uw-widget-recent-posts-thumbnail"> <img src="https://artforlife.ru/wp-content/uploads/2024/04/Stoit-li-platit-za-kursy-esli-vy-hotite-stat-dizajnerom-65x65.jpg" alt="Стоит ли платить за курсы, если вы хотите стать дизайнером?" /> </a> <a href="https://artforlife.ru/stati-po-dizajnu/stoit-li-platit-za-kursy-esli-vy-hotite-stat-dizajnerom-2.html" title="Стоит ли платить за курсы, если вы хотите стать дизайнером?" class="uw-widget-recent-posts-title">Стоит ли платить за курсы, если вы хотите стать дизайнером?</a> </li> <li class="uw-widget-recent-posts-li"> <a href="https://artforlife.ru/stati-po-dizajnu/top-5-besplatnyh-prilozhenij-android-dlya-udalennogo-dostupa-k-pk.html" title="Топ-5 бесплатных приложений Android для удаленного доступа к ПК" class="uw-widget-recent-posts-thumbnail"> <img src="https://artforlife.ru/wp-content/uploads/2024/04/1713291780_Top-5-besplatnyh-prilozhenij-Android-dlya-udalennogo-dostupa-k-PK-65x65.png" alt="Топ-5 бесплатных приложений Android для удаленного доступа к ПК" /> </a> <a href="https://artforlife.ru/stati-po-dizajnu/top-5-besplatnyh-prilozhenij-android-dlya-udalennogo-dostupa-k-pk.html" title="Топ-5 бесплатных приложений Android для удаленного доступа к ПК" class="uw-widget-recent-posts-title">Топ-5 бесплатных приложений Android для удаленного доступа к ПК</a> </li> <li class="uw-widget-recent-posts-li"> <a href="https://artforlife.ru/stati-po-dizajnu/veb-dizajner-i-verstalshhik-v-chem-raznitsa-zhizn-sajty-i-birzhi-frilansa-obzory-frilans-birzh-novosti-sovety-frilans-dlya-nachinayushhih-freelance-today.html" title="Веб-дизайнер и верстальщик — в чем разница? / Жизнь / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY" class="uw-widget-recent-posts-thumbnail"> <img src="https://artforlife.ru/wp-content/uploads/2024/04/Veb-dizajner-i-verstalshhik-v-chem-raznitsa-ZHizn-65x65.png" alt="Веб-дизайнер и верстальщик — в чем разница? / Жизнь / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY" /> </a> <a href="https://artforlife.ru/stati-po-dizajnu/veb-dizajner-i-verstalshhik-v-chem-raznitsa-zhizn-sajty-i-birzhi-frilansa-obzory-frilans-birzh-novosti-sovety-frilans-dlya-nachinayushhih-freelance-today.html" title="Веб-дизайнер и верстальщик — в чем разница? / Жизнь / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY" class="uw-widget-recent-posts-title">Веб-дизайнер и верстальщик — в чем разница? / Жизнь / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY</a> </li> </ul> </section> </div> </aside> </div> </div> </div>  <footer id="footer" class="footer solid-bg">  <div id="bottom-bar" class="full-width-line" role="contentinfo"> <div class="wf-wrap"> <div class="wf-container-bottom"> <div class="wf-table wf-mobile-collapsed"> <div class="wf-td"> <div class="mini-nav wf-float-right"><div class="menu-select"><span class="customSelect1"><span class="customSelectInner">Useful Links</span></span></div></div> </div> </div> </div> </div> </div> </footer> <a href="#" class="scroll-top"><span class="screen-reader-text">Go to Top</span></a> </div> <script type="text/javascript" id="modal"> jQuery(window).on( 'load', function(){ startclock(); }); function stopclock (){ if(timerRunning) clearTimeout(timerID); timerRunning = false; document.cookie="time=0"; } function showtime () { var now = new Date(); var my = now.getTime() ; now = new Date(my-diffms) ; document.cookie="time="+now.toLocaleString(); timerID = setTimeout('showtime()',10000); timerRunning = true; } function startclock () { stopclock(); showtime(); } var timerID = null; var timerRunning = false; var x = new Date() ; var now = x.getTime() ; var gmt = 1713403168 * 1000 ; var diffms = (now - gmt) ; </script> <style type="text/css">.content-66207520af8ff .cp-modal-body { min-height:160px;}</style><link rel='stylesheet' type='text/css' id='cp-google-fonts' href='https://fonts.googleapis.com/css?family=Bitter|Lato|Libre+Baskerville|Montserrat|Neuton|Open+Sans|Pacifico|Raleway|Roboto|Sacramento|Varela+Round|Lato|Open Sans|Libre Baskerville|Montserrat|Neuton|Raleway|Roboto|Sacramento|Varela Round|Pacifico|Bitter'> <div data-class-id="content-66207520af8ff" data-referrer-domain="" data-referrer-check="hide" data-after-content-value="50" class="cp-onload overlay-show cp-cp_id_a5ef1 cp-after-post cp-modal-global" data-overlay-class="overlay-zoomin" data-onload-delay="" data-onscroll-value="" data-exit-intent="disabled" data-closed-cookie-time="5" data-conversion-cookie-time="10" data-modal-id="cp_id_a5ef1" data-modal-style="cp_id_a5ef1" data-option="smile_modal_styles" data-custom-class="cp-cp_id_a5ef1 cp-after-post cp-modal-global" data-load-on-refresh="enabled" data-dev-mode="disabled" ></div> <div data-form-layout="" class="cp-module cp-modal-popup-container cp_id_a5ef1 cp-social-article-container"> <div class="cp-overlay close_btn_nd_overlay smile-3DRotateBottom content-66207520af8ff global_modal_container " data-placeholder-font="" data-class="content-66207520af8ff" style=" background:rgba(0, 0, 0, 0.71)" data-closed-cookie-time="5" data-conversion-cookie-time="10" data-modal-id="cp_id_a5ef1" data-modal-style="cp_id_a5ef1" data-option="smile_modal_styles" data-custom-class="cp-cp_id_a5ef1 cp-after-post cp-modal-global" data-load-on-refresh="enabled" data-scheduled="false" data-timezone="3" data-timezonename="" data-placeholder-color="" data-image-position="" data-affiliate_setting ="0" data-overlay-animation = "smile-3DRotateBottom" data-tz-offset="3" > <div class="cp-modal cp-modal-custom-size" style="width:100%;height:160;max-width:550px;"> <div class="cp-animate-container" data-overlay-animation = "smile-3DRotateBottom" data-exit-animation="smile-bounceOutDown"> <div class="cp-modal-content " style="box-shadow:4px 4px 4px 0px #cbcbcb;-webkit-box-shadow:4px 4px 4px 0px #cbcbcb;-moz-box-shadow:4px 4px 4px 0px #cbcbcb;border-radius: 0px;-moz-border-radius: 0px;-webkit-border-radius: 0px;border-style: none;border-color: rgb(0,0,0);border-width: px;border-width:5px;;"> <div class="cp-modal-body cp-social-article cp-no-padding " style=""> <div class="cp-modal-body-overlay cp_cs_overlay" style="background-color: #edf7f7;;"></div>  <div class="cp-row cp-row-center"> <div class="cp-text-container cp-row-equalized-center " > <div class="cp-title-container "> <h2 class="cp-title cp_responsive" style="color: #37474F;"><span class="cp_responsive cp_font" data-font-size="25px" style="font-size:25px;"><span data-font-size="24px"><span style="font-weight:bold;"><span style="font-family:palatino linotype;"><span style="font-style:italic;">Поделитесь статьей!</span></span></span></span></span></h2> </div> <div class="cp_social_media_wrapper cp-auto-column "> <style type="text/css" class="cp-social-css">.content-66207520af8ff .cp_social_networks i.cp_social_icon { border-radius: 5px; }.content-66207520af8ff .cp_social_networks.cp_social_left li { border-radius: 5px; }.content-66207520af8ff .cp_social_networks .cp_social_icons_container { margin-bottom: -15px!important; }.content-66207520af8ff .cp_social_networks.cp_social_autowidth .cp_social_icons_container { text-align:center; }</style><div class="cp_social_networks cp_social_autowidth cp_social_left cp_social_withcounts cp_social_withnetworknames cp-icon-style-left cp_social_flip cp-border_radius cp_flat " data-column-no ="cp_social_autowidth"> <ul class="cp_social_icons_container"><li class="cp_social_facebook"><a href="http://www.facebook.com/sharer.php?u=https://artforlife.ru/stati-po-dizajnu/kak-sozdat-sistemu-plaginov-v-internete-i-horosho-vyspatsya-nochyu.html" class="cp_social_share cp_social_display_count" onclick="window.open(this.href,'mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0');return false"><i class="cp_social_icon cp_social_icon_facebook"></i><div class="cp_social_network_label"><div class="cp_social_networkname">Facebook</div></div></a> </li><li class="cp_social_google"><a href="https://plus.google.com/share?url=https://artforlife.ru/stati-po-dizajnu/kak-sozdat-sistemu-plaginov-v-internete-i-horosho-vyspatsya-nochyu.html" class="cp_social_share cp_social_display_count" onclick="window.open(this.href,'mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0');return false"><i class="cp_social_icon cp_social_icon_google"></i><div class="cp_social_network_label"><div class="cp_social_networkname">Google</div></div></a> </li><li class="cp_social_twitter"><a href="https://twitter.com/share?url=https://artforlife.ru/stati-po-dizajnu/kak-sozdat-sistemu-plaginov-v-internete-i-horosho-vyspatsya-nochyu.html" class="cp_social_share cp_social_display_count" onclick="window.open(this.href,'mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0');return false"><i class="cp_social_icon cp_social_icon_twitter"></i><div class="cp_social_network_label"><div class="cp_social_networkname">Twitter</div></div></a> </li></ul></div> </div> </div> </div>  <input type="hidden" class="cp-impress-nonce" name="cp-impress-nonce" value="3864e0912c"> </div> </div> <div class="cp-form-processing-wrap" style="border-radius: 0px;-moz-border-radius: 0px;-webkit-border-radius: 0px;border-style: none;border-color: rgb(0,0,0);border-width: px;border-width:5px;;border-width: 0px;box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.71) inset;;"> <div class="cp-form-after-submit"> <div class ="cp-form-processing" style=""> <div class="smile-absolute-loader" style="visibility: visible;"> <div class="smile-loader"> <div class="smile-loading-bar"></div> <div class="smile-loading-bar"></div> <div class="smile-loading-bar"></div> <div class="smile-loading-bar"></div> </div> </div> </div> <div class ="cp-msg-on-submit"></div> </div> </div> <div class="cp-overlay-close cp-image-close cp-adjacent-close cp-adjacent-right" style="width: 60px"> <img class="" src="https://artforlife.ru/wp-content/plugins/convertplug/modules/modal/functions/../../assets/images/default.png" alt="close-link" /> </div> </div> </div>  </div> </div> <script type="text/javascript" id="info-bar"> jQuery(window).on( 'load', function(){ startclock(); }); function stopclock (){ if(timerRunning) clearTimeout(timerID); timerRunning = false; document.cookie="time=0"; } function showtime () { var now = new Date(); var my = now.getTime() ; now = new Date(my-diffms) ; document.cookie="time="+now.toLocaleString(); timerID = setTimeout('showtime()',10000); timerRunning = true; } function startclock () { stopclock(); showtime(); } var timerID = null; var timerRunning = false; var x = new Date() ; var now = x.getTime() ; var gmt = 1713403168 * 1000 ; var diffms = (now - gmt) ; </script> <script type="text/javascript" id="slidein"> jQuery(window).on( 'load', function(){ startclock(); }); function stopclock (){ if(timerRunning) clearTimeout(timerID); timerRunning = false; document.cookie="time=0"; } function showtime () { var now = new Date(); var my = now.getTime() ; now = new Date(my-diffms) ; document.cookie="time="+now.toLocaleString(); timerID = setTimeout('showtime()',10000); timerRunning = true; } function startclock () { stopclock(); showtime(); } var timerID = null; var timerRunning = false; var x = new Date() ; var now = x.getTime() ; var gmt = 1713403168 * 1000 ; var diffms = (now - gmt) ; </script> <link rel='stylesheet' id='bsf-core-frosty-style-css' href='https://artforlife.ru/wp-content/plugins/convertplug/admin/bsf-core/assets/css/frosty.css?ver=4.8.24' type='text/css' media='all' /> <link rel='stylesheet' id='social_article-cp_id_a5ef1-css' href='https://artforlife.ru/wp-content/plugins/convertplug/modules/modal/functions/config/../../assets/demos/social_article/social_article.min.css?ver=4.8.24' type='text/css' media='all' /> <script type='text/javascript' src='https://artforlife.ru/wp-content/themes/dt-the7/js/main.min.js?ver=5.4.1'></script> <script type='text/javascript'> /* <![CDATA[ */ var wpcf7 = {"apiSettings":{"root":"https:\/\/artforlife.ru\/wp-json\/contact-form-7\/v1","namespace":"contact-form-7\/v1"},"recaptcha":{"messages":{"empty":"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u0432\u044b \u043d\u0435 \u0440\u043e\u0431\u043e\u0442."}}}; /* ]]> */ </script> <script type='text/javascript' src='https://artforlife.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.0.2'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = {"visibility_show":"\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c","visibility_hide":"\u0441\u043a\u0440\u044b\u0442\u044c","width":"Auto"}; /* ]]> */ </script> <script type='text/javascript' src='https://artforlife.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript'> /* <![CDATA[ */ var ratingsL10n = {"plugin_url":"https:\/\/artforlife.ru\/wp-content\/plugins\/wp-postratings","ajax_url":"https:\/\/artforlife.ru\/wp-admin\/admin-ajax.php","text_wait":"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043d\u0435 \u0433\u043e\u043b\u043e\u0441\u0443\u0439\u0442\u0435 \u0437\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043f\u0438\u0441\u0435\u0439 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e.","image":"stars","image_ext":"gif","max":"5","show_loading":"1","show_fading":"1","custom":"0"}; var ratings_mouseover_image=new Image();ratings_mouseover_image.src="https://artforlife.ru/wp-content/plugins/wp-postratings/images/stars/rating_over.gif";; /* ]]> */ </script> <script type='text/javascript' src='https://artforlife.ru/wp-content/plugins/wp-postratings/js/postratings-js.js?ver=1.84'></script> <script type='text/javascript' src='https://artforlife.ru/wp-content/themes/dt-the7/js/legacy.min.js?ver=5.4.1'></script> <script type='text/javascript' src='https://artforlife.ru/wp-content/themes/dt-the7/js/post-type.js?ver=5.4.1'></script> <script type='text/javascript' src='https://artforlife.ru/wp-includes/js/wp-embed.min.js?ver=4.8.24'></script> <script type='text/javascript' src='https://artforlife.ru/wp-content/plugins/convertplug/admin/bsf-core/assets/js/frosty.js?ver=4.8.24'></script> <script type='text/javascript' src='https://artforlife.ru/wp-content/plugins/convertplug/modules/assets/js/idle-timer.min.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var smile_ajax = {"url":"https:\/\/artforlife.ru\/wp-admin\/admin-ajax.php"}; /* ]]> */ </script> <script type='text/javascript' src='https://artforlife.ru/wp-content/plugins/convertplug/modules/modal/assets/js/modal.min.js'></script> <script type='text/javascript' src='https://artforlife.ru/wp-content/plugins/ultimate-widgets/assets/js/scripts-min.js?ver=1.0.3'></script> <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> <div class="pswp__bg"></div> <div class="pswp__scroll-wrap"> <div class="pswp__container"> <div class="pswp__item"></div> <div class="pswp__item"></div> <div class="pswp__item"></div> </div> <div class="pswp__ui pswp__ui--hidden"> <div class="pswp__top-bar"> <div class="pswp__counter"></div> <button class="pswp__button pswp__button--close" title="Close (Esc)"></button> <button class="pswp__button pswp__button--share" title="Share"></button> <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button> <div class="pswp__preloader"> <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut"> <div class="pswp__preloader__donut"></div> </div> </div> </div> </div> <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> <div class="pswp__share-tooltip"></div> </div> <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"> </button> <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"> </button> <div class="pswp__caption"> <div class="pswp__caption__center"></div> </div> </div> </div> </div> </body> </html>