feed.xml

<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" xml:lang="ru_RU"><generator uri="https://jekyllrb.com/" version="3.8.7">Jekyll</generator><link href="https://handleman.github.io/feed.xml" rel="self" type="application/atom+xml" /><link href="https://handleman.github.io/" rel="alternate" type="text/html" hreflang="ru_RU" /><updated>2021-06-09T14:34:57+03:00</updated><id>https://handleman.github.io/feed.xml</id><title type="html">Переводы, комиксы, разработка</title><subtitle>Мой личный блог, связанный с веб-разработкой. Где я публикую переводы понравившихся мне тематических статей, делюсь впечатлениями о прочитанных мною комиксах, и делюсь своим опытом.</subtitle><entry><title type="html">Frontend: Svelte в сравнении с другими популярными фреймворками</title><link href="https://handleman.github.io/frontend,/js,/javascript/2021/06/09/svelte-react-angular-compare.html" rel="alternate" type="text/html" title="Frontend: Svelte в сравнении с другими популярными фреймворками" /><published>2021-06-09T12:48:59+03:00</published><updated>2021-06-09T12:48:59+03:00</updated><id>https://handleman.github.io/frontend,/js,/javascript/2021/06/09/svelte-react-angular-compare</id><content type="html" xml:base="https://handleman.github.io/frontend,/js,/javascript/2021/06/09/svelte-react-angular-compare.html">&lt;p&gt;Svelte это фронтендерский фреймворк, который стремительно ворвался в индустрию году так в 2018-2019, и произвел тогда невероятно сильное впечатление: новый подход, новый приятный синтаксис и невероятные показатели бенчмарков. Был только один вопрос, сможет ли такое более-менее-радикальное решение закрепиться на рынке и продержаться достаточно долго чтобы обрасти экосистемой вокруг - стать достаточно взрослым “для продакшена”.&lt;/p&gt;

&lt;p&gt;Сейчас можно смело сказать что проект готов к реальным условиям: он живой, оброс различными готовыми решениями, получает поддержку от именитых организаций, и, мне захотелось попробовать его на практике, для того, чтобы сравнить по конкретным параметрам с другими популярными сейчас фреймворками, стандартами индустрии как React и Angular.&lt;/p&gt;

&lt;blockquote&gt;
  &lt;p&gt;p.s: я не взял Vue.js  в сравнение просто из-за нехватки свободного времени, в остальном прекрасный фреймворк, имею опыт.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Для надежности я решил сделать свой тестовый стенд - свое приложение, написанное на каждом из указанных выше фреймворках. Таким образом я контролирую всю кодовую базу и смогу попробовать именно те концепции   что я использую в реальной работе.&lt;/p&gt;

&lt;p&gt;Меня интересует как будет себя вести и ощущаться разработка следующих концепций:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;роутинг&lt;/li&gt;
  &lt;li&gt;стейт-менеджмент&lt;/li&gt;
  &lt;li&gt;различные варианты вложенности компонентов, слоты.&lt;/li&gt;
  &lt;li&gt;работа с формами&lt;/li&gt;
  &lt;li&gt;препроцессинг стилей&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Причем разработка должна быть на максимально популярных и массовых для этих фреймворках технологиях и подходах, но при этом структура компонентов и в целом структура и количество кода максимально похожей - чтобы увеличить точность. Поэтому, &lt;strong&gt;местами код получился спорным&lt;/strong&gt;, но я это делал с умыслом, чтобы максимально сблизить примеры.&lt;/p&gt;

&lt;h2 id=&quot;стек-технологий&quot;&gt;стек технологий&lt;/h2&gt;
&lt;p&gt;Svelte: Sapper + встроенные средства для state management&lt;/p&gt;

&lt;p&gt;React: Next.js + Redux&lt;/p&gt;

&lt;p&gt;Angular : возможности стандартной Angular CLI + ngRx&lt;/p&gt;

&lt;h2 id=&quot;тестирование&quot;&gt;тестирование&lt;/h2&gt;

&lt;p&gt;Что я посчитал важным протестировать и сравнить:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;общая скорость и комфорт разработки (сугубо по ощущениям и затраченному времени)&lt;/li&gt;
  &lt;li&gt;размер билда, размер кода в памяти.&lt;/li&gt;
  &lt;li&gt;передача данных по сети, количество запросов, и т.д.&lt;/li&gt;
  &lt;li&gt;скорость отрисовки и рендеринга при различных общих операциях&lt;/li&gt;
  &lt;li&gt;ну и общий скоринг lighthouse и webpagetest.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2 id=&quot;реализация&quot;&gt;реализация&lt;/h2&gt;

&lt;p&gt;Описывать и разбирать код по частям не имеет смысла, прикладываю ссылки на репозиторий для каждого варианта.&lt;/p&gt;

&lt;h3 id=&quot;svelte&quot;&gt;Svelte&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;репозиторий:&lt;/strong&gt; &lt;a href=&quot;https://github.com/handleman/svelte-pomodore-timer-example&quot;&gt;github: svelte-pomodore-timer-example&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;билд:&lt;/strong&gt; &lt;a href=&quot;http://svelte-pomodoro-timer-example.surge.sh&quot;&gt;surge: svelte-pomodoro-timer-example&lt;/a&gt;&lt;/p&gt;

&lt;h3 id=&quot;angular&quot;&gt;Angular&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;репозиторий:&lt;/strong&gt; &lt;a href=&quot;https://github.com/handleman/angular-pomodoro-timer-example&quot;&gt;github: angular-pomodoro-timer-example&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;билд:&lt;/strong&gt; &lt;a href=&quot;http://angular-pomodoro-timer-example.surge.sh/&quot;&gt;surge: angular-pomodoro-timer-example&lt;/a&gt;&lt;/p&gt;

&lt;h3 id=&quot;react&quot;&gt;React&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;репозиторий:&lt;/strong&gt; &lt;a href=&quot;https://github.com/handleman/angular-pomodoro-timer-example&quot;&gt;github: angular-pomodoro-timer-example&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;билд:&lt;/strong&gt; &lt;a href=&quot;http://angular-pomodoro-timer-example.surge.sh/&quot;&gt;surge: angular-pomodoro-timer-example&lt;/a&gt;&lt;/p&gt;

&lt;h2 id=&quot;результаты-сводная-таблица&quot;&gt;Результаты, сводная таблица&lt;/h2&gt;

&lt;p&gt;По субъективным ощущениям комфорта побеждает конечно Svelte, несмотря на то, что для меня это абсолютно новый синтаксис, работать с концепцией приятно. Код пишется легко и в малом количестве.&lt;/p&gt;

&lt;p&gt;Тяжелее всего, было на реакте, в силу большого количества Boulerplate-like кода и файлов которые надо описывать вручную, где, например, в Angular, за тебя делает CLI.&lt;/p&gt;

&lt;p&gt;По показателям, размера бандла и работой с сетью с уверенным отрывом побеждает Svelte, т.е. эта вещь точно нужна при условии ограниченной памяти на целевом устройстве.&lt;/p&gt;

&lt;p&gt;В отношении скорости рендера &lt;strong&gt;не все однозначно&lt;/strong&gt; отрыв незначительный, слишком небольшой, чтобы быть уверенным что это не результат погрешности.&lt;/p&gt;

&lt;p&gt;Неприятно удивил React/Next, и бандл самый большой, и непонятная магия с запросами под капотом.&lt;/p&gt;

&lt;p&gt;Ниже прилагаю сводную таблицу с конкретными данными.&lt;/p&gt;

&lt;style type=&quot;text/css&quot;&gt;
.svelte-color{
    background-color: #FFD966;
}
.angular-color{
    background-color: #E06666;
}
.react-color{
    background-color: #9FC5E8
}
.green-cell{
    background-color: #D9EAD3
}
.yellow-cell{
    background-color: #FFF2CC
}
.red-cell{
    background-color: #F4CCCC
}
.gray-cell{
    background-color: #EFEFEF;
    text-align:center;
}
.dark-green-cell{
    background-color: #6AA84F;
    text-align:center;
    color:white;
}
.frameworks-compare-table td {
    padding: .5em .5em .5em 1em;
}
&lt;/style&gt;

&lt;table class=&quot;frameworks-compare-table&quot;&gt;
    &lt;tr&gt;
        &lt;td&gt;
        &lt;/td&gt;
        &lt;td class=&quot;svelte-color&quot;&gt;
            &lt;b&gt;Svelte (Sapper)&lt;/b&gt;
        &lt;/td&gt;
        &lt;td class=&quot;react-color&quot;&gt;
            &lt;b&gt;React (Next.js)&lt;/b&gt;
        &lt;/td&gt;
        &lt;td class=&quot;angular-color&quot;&gt;
            &lt;b&gt;Angular (Angular-CLI)&lt;/b&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;
            &lt;b&gt;Github page&lt;/b&gt;
        &lt;/td&gt;
        &lt;td&gt;
            &lt;a href=&quot;https://github.com/handleman/svelte-pomodore-timer-example&quot; target=&quot;_blank&quot;&gt;application code&lt;/a&gt;
        &lt;/td&gt;
        &lt;td&gt;
            &lt;a href=&quot;https://github.com/handleman/react-pomodoro-timer-example&quot; target=&quot;_blank&quot;&gt;application code&lt;/a&gt;
        &lt;/td&gt;
        &lt;td&gt;
            &lt;a href=&quot; https://github.com/handleman/angular-pomodoro-timer-example&quot; target=&quot;_blank&quot;&gt; application code&lt;/a&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
         &lt;td&gt;
            &lt;b&gt;Live demo&lt;/b&gt;
        &lt;/td&gt;
        &lt;td&gt;
            &lt;a href=&quot;http://svelte-pomodoro-timer-example.surge.sh/&quot; target=&quot;_blank&quot;&gt;application example&lt;/a&gt;
        &lt;/td&gt;
        &lt;td&gt;
            &lt;a href=&quot;http://react-pomodoro-timer-example.surge.sh/&quot; target=&quot;_blank&quot;&gt;application example&lt;/a&gt;
        &lt;/td&gt;
        &lt;td&gt;
            &lt;a href=&quot;http://angular-pomodoro-timer-example.surge.sh/&quot; target=&quot;_blank&quot;&gt;application example&lt;/a&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td colspan=&quot;4&quot; class=&quot;gray-cell&quot;&gt;
            &lt;b&gt;Build phase&lt;/b&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Bundle build time (sec)
        &lt;/td&gt;
        &lt;td class=&quot;yellow-cell&quot;&gt;9
        &lt;/td&gt;
        &lt;td class=&quot;green-cell&quot;&gt;6
        &lt;/td&gt;
        &lt;td class=&quot;red-cell&quot;&gt;12
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Production build export size
        &lt;/td&gt;
        &lt;td class=&quot;green-cell&quot;&gt;104 KB
        &lt;/td&gt;
        &lt;td class=&quot;red-cell&quot;&gt;380 KB and increasing every build
        &lt;/td&gt;
        &lt;td class=&quot;yellow-cell&quot;&gt;292 KB
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td colspan=&quot;4&quot; class=&quot;gray-cell&quot;&gt;
            &lt;b&gt;Network&lt;/b&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;JS files in browser (kB)
        &lt;/td&gt;
        &lt;td class=&quot;green-cell&quot;&gt;29,3
        &lt;/td&gt;
        &lt;td class=&quot;red-cell&quot;&gt;83,778
        &lt;/td&gt;
        &lt;td class=&quot;yellow-cell&quot;&gt;81,1
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;CSS files in browser (kB)
        &lt;/td&gt;
        &lt;td class=&quot;green-cell&quot;&gt;0,93
        &lt;/td&gt;
        &lt;td class=&quot;red-cell&quot;&gt;2,1
        &lt;/td&gt;
        &lt;td class=&quot;yellow-cell&quot;&gt;0,94
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Total resources loaded (kB)
        &lt;/td&gt;
        &lt;td class=&quot;green-cell&quot;&gt;88,2
        &lt;/td&gt;
        &lt;td class=&quot;red-cell&quot;&gt;276
        &lt;/td&gt;
        &lt;td class=&quot;yellow-cell&quot;&gt;269
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Total requests
        &lt;/td&gt;
        &lt;td class=&quot;yellow-cell&quot;&gt;8
        &lt;/td&gt;
        &lt;td class=&quot;red-cell&quot;&gt;19
        &lt;/td&gt;
        &lt;td class=&quot;green-cell&quot;&gt;6
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;DOM Content Loaded (sec)
        &lt;/td&gt;   
        &lt;td class=&quot;yellow-cell&quot;&gt;1,13
        &lt;/td&gt;
        &lt;td class=&quot;green-cell&quot;&gt;0,581
        &lt;/td&gt;
        &lt;td class=&quot;red-cell&quot;&gt;1,31
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Total Load (sec)
        &lt;/td&gt;   
        &lt;td class=&quot;yellow-cell&quot;&gt;1,52
        &lt;/td&gt;
        &lt;td class=&quot;red-cell&quot;&gt;1,82
        &lt;/td&gt;
        &lt;td class=&quot;green-cell&quot;&gt;1,31
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td colspan=&quot;4&quot; class=&quot;gray-cell&quot;&gt;
            &lt;b&gt;Coverage&lt;/b&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Js code used (%)
        &lt;/td&gt;   
        &lt;td class=&quot;green-cell&quot;&gt;82
        &lt;/td&gt;
        &lt;td class=&quot;yellow-cell&quot;&gt;74
        &lt;/td&gt;
        &lt;td class=&quot;yellow-cell&quot;&gt;74
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;CSS code used (%)
        &lt;/td&gt;   
        &lt;td class=&quot;green-cell&quot;&gt;90
        &lt;/td&gt;
        &lt;td class=&quot;red-cell&quot;&gt;57
        &lt;/td&gt;
        &lt;td class=&quot;yellow-cell&quot;&gt;66
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td colspan=&quot;4&quot; class=&quot;gray-cell&quot;&gt;
                &lt;b&gt;Lighthouse scoring&lt;/b&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Performance
        &lt;/td&gt;   
        &lt;td class=&quot;green-cell&quot;&gt;100
        &lt;/td&gt;
        &lt;td class=&quot;yellow-cell&quot;&gt;99
        &lt;/td&gt;
        &lt;td class=&quot;red-cell&quot;&gt;97
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Accessibility
        &lt;/td&gt;   
        &lt;td class=&quot;green-cell&quot;&gt;100
        &lt;/td&gt;
        &lt;td class=&quot;yellow-cell&quot;&gt;94
        &lt;/td&gt;
        &lt;td class=&quot;yellow-cell&quot;&gt;94
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Best Practices
        &lt;/td&gt;   
        &lt;td class=&quot;green-cell&quot;&gt;93
        &lt;/td&gt;
        &lt;td class=&quot;green-cell&quot;&gt;93
        &lt;/td&gt;
        &lt;td class=&quot;green-cell&quot;&gt;93
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;SEO
        &lt;/td&gt;   
        &lt;td class=&quot;green-cell&quot;&gt;80
        &lt;/td&gt;
        &lt;td class=&quot;green-cell&quot;&gt;80
        &lt;/td&gt;
        &lt;td class=&quot;green-cell&quot;&gt;80
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td colspan=&quot;4&quot; class=&quot;gray-cell&quot;&gt;
            &lt;b&gt;webpagetest.org scoring&lt;/b&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;First Byte (sec)
        &lt;/td&gt;   
        &lt;td class=&quot;red-cell&quot;&gt;0,365
        &lt;/td&gt;
        &lt;td class=&quot;yellow-cell&quot;&gt;0,353
        &lt;/td&gt;
        &lt;td class=&quot;green-cell&quot;&gt;0,324
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Start Render (sec)
        &lt;/td&gt;   
        &lt;td class=&quot;yellow-cell&quot;&gt;0,7
        &lt;/td&gt;
        &lt;td class=&quot;green-cell&quot;&gt;0,6
        &lt;/td&gt;
        &lt;td class=&quot;red-cell&quot;&gt;1
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;First Contentful Paint (sec)
        &lt;/td&gt;   
        &lt;td class=&quot;yellow-cell&quot;&gt;0,647
        &lt;/td&gt;
        &lt;td class=&quot;green-cell&quot;&gt;0,619
        &lt;/td&gt;
        &lt;td class=&quot;red-cell&quot;&gt;0,97
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Largest contentful paint (sec)
        &lt;/td&gt;   
        &lt;td class=&quot;yellow-cell&quot;&gt;0,646
        &lt;/td&gt;
        &lt;td class=&quot;green-cell&quot;&gt;0,619
        &lt;/td&gt;
        &lt;td class=&quot;red-cell&quot;&gt;0,97
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td colspan=&quot;4&quot; class=&quot;dark-green-cell&quot;&gt;
            &lt;b&gt;Performance investigation&lt;/b&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td colspan=&quot;4&quot; class=&quot;gray-cell&quot;&gt;
            &lt;b&gt;When pomodoro timer decreased by one second&lt;/b&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Scripting (ms)
        &lt;/td&gt;   
        &lt;td class=&quot;green-cell&quot;&gt;0,4
        &lt;/td&gt;
        &lt;td class=&quot;red-cell&quot;&gt;0,6
        &lt;/td&gt;
        &lt;td class=&quot;yellow-cell&quot;&gt;0,5
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Rendering (ms)
        &lt;/td&gt;   
        &lt;td class=&quot;green-cell&quot;&gt;0,3
        &lt;/td&gt;
        &lt;td class=&quot;green-cell&quot;&gt;0,3
        &lt;/td&gt;
        &lt;td class=&quot;green-cell&quot;&gt;0,3
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Painting (ms)
        &lt;/td&gt;   
        &lt;td class=&quot;green-cell&quot;&gt;0,2
        &lt;/td&gt;
        &lt;td class=&quot;green-cell&quot;&gt;0,2
        &lt;/td&gt;
        &lt;td class=&quot;green-cell&quot;&gt;0,2
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;System (ms)
        &lt;/td&gt;   
        &lt;td class=&quot;green-cell&quot;&gt;0
        &lt;/td&gt;
        &lt;td class=&quot;green-cell&quot;&gt;0
        &lt;/td&gt;
        &lt;td class=&quot;green-cell&quot;&gt;0
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td colspan=&quot;4&quot; class=&quot;gray-cell&quot;&gt;
            &lt;b&gt;When user click &quot;pause&quot; button and timer goest into on-pause-state&lt;/b&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Scripting (ms)
        &lt;/td&gt;   
        &lt;td class=&quot;green-cell&quot;&gt;3
        &lt;/td&gt;
        &lt;td class=&quot;yellow-cell&quot;&gt;5
        &lt;/td&gt;
        &lt;td class=&quot;green-cell&quot;&gt;3
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Rendering (ms)
        &lt;/td&gt;   
        &lt;td class=&quot;green-cell&quot;&gt;5
        &lt;/td&gt;
        &lt;td class=&quot;yellow-cell&quot;&gt;6
        &lt;/td&gt;
        &lt;td class=&quot;yellow-cell&quot;&gt;6
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Painting (ms)
        &lt;/td&gt;   
        &lt;td class=&quot;green-cell&quot;&gt;4
        &lt;/td&gt;
        &lt;td class=&quot;green-cell&quot;&gt;4
        &lt;/td&gt;
        &lt;td class=&quot;yellow-cell&quot;&gt;5
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;System (ms)
        &lt;/td&gt;   
        &lt;td class=&quot;green-cell&quot;&gt;8
        &lt;/td&gt;
        &lt;td class=&quot;yellow-cell&quot;&gt;9
        &lt;/td&gt;
        &lt;td class=&quot;yellow-cell&quot;&gt;9
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td colspan=&quot;4&quot; class=&quot;gray-cell&quot;&gt;
            &lt;b&gt;Route change behaviour (User goes to /config SPA page)&lt;/b&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Scripting (ms)
        &lt;/td&gt;   
        &lt;td class=&quot;green-cell&quot;&gt;5
        &lt;/td&gt;
        &lt;td class=&quot;yellow-cell&quot;&gt;9
        &lt;/td&gt;
        &lt;td class=&quot;red-cell&quot;&gt;10
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Rendering (ms)
        &lt;/td&gt;   
        &lt;td class=&quot;yellow-cell&quot;&gt;2
        &lt;/td&gt;
        &lt;td class=&quot;green-cell&quot;&gt;1
        &lt;/td&gt;
        &lt;td class=&quot;green-cell&quot;&gt;1
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Painting (ms)
        &lt;/td&gt;   
        &lt;td class=&quot;yellow-cell&quot;&gt;0,4
        &lt;/td&gt;
        &lt;td class=&quot;yellow-cell&quot;&gt;0,3
        &lt;/td&gt;
        &lt;td class=&quot;green-cell&quot;&gt;0,2
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;System (ms)
        &lt;/td&gt;   
        &lt;td class=&quot;green-cell&quot;&gt;1
        &lt;/td&gt;
        &lt;td class=&quot;green-cell&quot;&gt;1
        &lt;/td&gt;
        &lt;td class=&quot;green-cell&quot;&gt;1
        &lt;/td&gt;
    &lt;/tr&gt;
    
&lt;/table&gt;</content><author><name></name></author><category term="frontend," /><category term="js," /><category term="javascript" /><summary type="html">Svelte это фронтендерский фреймворк, который стремительно ворвался в индустрию году так в 2018-2019, и произвел тогда невероятно сильное впечатление: новый подход, новый приятный синтаксис и невероятные показатели бенчмарков. Был только один вопрос, сможет ли такое более-менее-радикальное решение закрепиться на рынке и продержаться достаточно долго чтобы обрасти экосистемой вокруг - стать достаточно взрослым “для продакшена”.</summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://handleman.github.io/assets/images/articles/svelte-logo.png" /><media:content medium="image" url="https://handleman.github.io/assets/images/articles/svelte-logo.png" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry><title type="html">Python: Бэкап в B2 Cloud Storage с помощью Python</title><link href="https://handleman.github.io/python/2020/09/26/python-backup-to-b2-cloud.html" rel="alternate" type="text/html" title="Python: Бэкап в B2 Cloud Storage с помощью Python" /><published>2020-09-26T12:48:59+03:00</published><updated>2020-09-26T12:48:59+03:00</updated><id>https://handleman.github.io/python/2020/09/26/python-backup-to-b2-cloud</id><content type="html" xml:base="https://handleman.github.io/python/2020/09/26/python-backup-to-b2-cloud.html">&lt;p&gt;В этом посте мы напишем и разберем скрипт на Python для бэкапа любых файлов (любого размера и количества) в облачное объектное хранилище “B2 Cloud Storage” от компании Backblaze. Почему именно “B2”? - Потому-что он дешевле раза в четыре популярного S3, ставшего уже для нас стандартом “Де-факто”. По своим возможностям и удобству использования B2 конечно уступает, но, для простого бэкапа - этого более чем достаточно.&lt;/p&gt;

&lt;p&gt;Сравнить цены с другими популярными решениями можно &lt;a href=&quot;https://www.backblaze.com/b2/cloud-storage-pricing.html&quot;&gt;тут&lt;/a&gt;&lt;/p&gt;

&lt;h2 id=&quot;планирование&quot;&gt;Планирование&lt;/h2&gt;

&lt;p&gt;В качестве среды выполнения задачи будем использовать Python 3.8 (актуальный на момент написания).&lt;/p&gt;

&lt;p&gt;Предположим, что в итоге мы хотим видеть скрипт, консольную утилиту, которой мы будем передавать наши “креды” для B2 и путь к директории которую мы хотим загрузить.&lt;/p&gt;

&lt;p&gt;Например:&lt;/p&gt;
&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;python3 b2_backup.py &lt;span class=&quot;nt&quot;&gt;-k&lt;/span&gt; &amp;lt;KEY_ID&amp;gt; &lt;span class=&quot;nt&quot;&gt;-a&lt;/span&gt; &amp;lt;APP_KEY&amp;gt; &amp;lt;PATH_TO_FILES&amp;gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;подготовка&quot;&gt;Подготовка&lt;/h2&gt;

&lt;p&gt;Для того, чтобы начать, нам нужно зарегистрироваться &lt;a href=&quot;https://www.backblaze.com/b2/sign-up.html&quot;&gt;на самом сервисе&lt;/a&gt;, затем &lt;a href=&quot;https://www.backblaze.com/b2/docs/quick_account.html&quot;&gt;активировать B2 Cloud Storage&lt;/a&gt;, подключить платежную карточку, создать “бакет” и &lt;strong&gt;настроить доступ к нему&lt;/strong&gt;, получив в итоге два ключа:&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;&lt;strong&gt;“keyID”&lt;/strong&gt; - привязанный к конкретному бакету id-шник&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;“Application key”&lt;/strong&gt; - тоже привязанный к конкретному бакету ключ, по которому мы и будем коннектиться к файловому хранилищу.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Подробно расписывать процесс регистрации не нужно, там все достаточно просто, единственное, акцентирую внимание на том, что &lt;strong&gt;необходимо добавлять новые ключи&lt;/strong&gt; для каждого созданного бакета, а не использовать общий “Master Application Key”.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/images/articles/b2_backup/app_key.jpg&quot; alt=&quot;registering access keys for B2 Cloud&quot; /&gt;&lt;/p&gt;

&lt;h2 id=&quot;принципы-работы-с-b2-cloud-service-api&quot;&gt;Принципы работы с B2 Cloud Service API&lt;/h2&gt;

&lt;p&gt;Работать с B2 мы будем через https запросы к нативному API сервиса.&lt;/p&gt;

&lt;p&gt;Главное отличие нативного API B2 от того же S3 в том, что, в целях экономии, они не используют балансировку трафика на стороне сервера. Вместо автоматической балансировки и единого API URL для всех операций, они построили апишку согласно понятию “Архитектура Контрактов” (&lt;a href=&quot;https://www.backblaze.com/blog/design-thinking-b2-apis-the-hidden-costs-of-s3-compatibility/&quot;&gt;Contract Architecture&lt;/a&gt;)&lt;/p&gt;

&lt;p&gt;Это значит что вместо единого URL для всех операций (авторизация, добавить/удалить файл, список файлов), API разбито на множетсов отдельных URL, &lt;strong&gt;по одному для каждой операции&lt;/strong&gt;. Что, в принципе имеет смысл, но требует немного больше операций в коде клиента, который мы сейчас и напишем.&lt;/p&gt;

&lt;p&gt;И так, разобраавшись с &lt;a href=&quot;https://www.backblaze.com/b2/docs/integration_checklist.html&quot;&gt;документацией&lt;/a&gt;, приходим к выводу, что для нашей простой задачи - “загрузить указанный каталог в облако” нам нужно использовать всего 3 операции:&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;&lt;strong&gt;Авторизация на сервисе&lt;/strong&gt; (&lt;a href=&quot;https://www.backblaze.com/b2/docs/b2_authorize_account.html&quot;&gt;b2_authorize_account&lt;/a&gt;). API URL: &lt;code class=&quot;highlighter-rouge&quot;&gt;https://api.backblazeb2.com/b2api/v2/b2_authorize_account&lt;/code&gt;&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Запрос адреса сервера загрузки&lt;/strong&gt; (&lt;a href=&quot;https://www.backblaze.com/b2/docs/b2_get_upload_url.html&quot;&gt;b2_get_upload_url&lt;/a&gt;). API URL: &lt;code class=&quot;highlighter-rouge&quot;&gt;https://&amp;lt;AUTHORIZED_API_URL&amp;gt;/b2api/v2/b2_get_upload_url&lt;/code&gt;&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Загрзука файла&lt;/strong&gt; (&lt;a href=&quot;https://www.backblaze.com/b2/docs/b2_upload_file.html&quot;&gt;b2_upload_file&lt;/a&gt;). API URL: &lt;code class=&quot;highlighter-rouge&quot;&gt;https://&amp;lt;UPOLOAD_URL&amp;gt;/b2api/v2/b2_upload_file&lt;/code&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Определившись с тем что конкретно нам нужно делать, мы готовы описать каждую операцию в Python.&lt;/p&gt;

&lt;h2 id=&quot;шаг-1-авторизация-на-сервисе&quot;&gt;Шаг 1. Авторизация на сервисе&lt;/h2&gt;

&lt;p&gt;Первый шаг, на котором мы “скармливаем” полученные ранее &lt;strong&gt;“keyID”&lt;/strong&gt; и &lt;strong&gt;“Application key”&lt;/strong&gt; для того чтобы получить токен и все необходимое для остальных операций.&lt;/p&gt;

&lt;div class=&quot;language-python highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;base64&lt;/span&gt;
&lt;span class=&quot;kn&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;urllib.request&lt;/span&gt; &lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;Request&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;urlopen&lt;/span&gt;

&lt;span class=&quot;k&quot;&gt;def&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;b2_authorize&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;applicationKeyId&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;str&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;applicationKeyValue&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;str&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;-&amp;gt;&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;dict&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;id_and_key&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;sa&quot;&gt;f&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;applicationKeyId&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;applicationKeyValue&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;id_and_key_base64&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;base64&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;b64encode&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;id_and_key&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;encode&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'utf-8'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)).&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;decode&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'utf-8'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;basic_auth_string&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;sa&quot;&gt;f&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'Basic &lt;/span&gt;&lt;span class=&quot;si&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;id_and_key_base64&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;headers&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'Authorization'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;basic_auth_string&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;b2_auth_url&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;'https://api.backblazeb2.com/b2api/v2/b2_authorize_account'&lt;/span&gt;

    &lt;span class=&quot;n&quot;&gt;request&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;Request&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;b2_auth_url&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;headers&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;headers&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;with&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;urlopen&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;request&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;as&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;response&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;auth&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;json&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;loads&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;response&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;read&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;())&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;response&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;close&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;auth&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;Описанная функция принимает 2 параметра: &lt;code class=&quot;highlighter-rouge&quot;&gt;applicationKeyId&lt;/code&gt; и &lt;code class=&quot;highlighter-rouge&quot;&gt;applicationKeyValue&lt;/code&gt;, в которые мы передадим &lt;strong&gt;“keyID”&lt;/strong&gt; и &lt;strong&gt;“Application key”&lt;/strong&gt; соответственно.  Функция возвращает объект &lt;code class=&quot;highlighter-rouge&quot;&gt;auth&lt;/code&gt; который содержит в себе токен, API URL для остальных операций и другую вспомогательную информацию.&lt;/p&gt;

&lt;p&gt;Для построения запроса мы используем &lt;code class=&quot;highlighter-rouge&quot;&gt;urllib.request&lt;/code&gt; стандартно по дефолту без каких либо специфических настроек и заголовков, за исключением &lt;code class=&quot;highlighter-rouge&quot;&gt;'Authorization'&lt;/code&gt; заголовка.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Обратите внимание:&lt;/em&gt;&lt;/p&gt;
&lt;div class=&quot;language-python highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;n&quot;&gt;id_and_key_base64&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;base64&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;b64encode&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;id_and_key&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;encode&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'utf-8'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)).&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;decode&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'utf-8'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;В Python начиная с версии 3, модуль &lt;code class=&quot;highlighter-rouge&quot;&gt;base64&lt;/code&gt; не работает с ASCII строками, поэтому для шифрования приходится строку с ключами вначале переводить в кодировку ‘UTF-8’, а затем - обратно.&lt;/p&gt;

&lt;h2 id=&quot;шаг-2-адрес-свободного-сервера-и-токен-для-него&quot;&gt;Шаг 2. Адрес свободного сервера и токен для него&lt;/h2&gt;

&lt;p&gt;Эта операция ключевая для, упомянутой выше, “Архитектуры Контрактов” (&lt;a href=&quot;https://www.backblaze.com/blog/design-thinking-b2-apis-the-hidden-costs-of-s3-compatibility/&quot;&gt;Contract Architecture&lt;/a&gt;) - на этом шаге мы просим у B2 Cloud Service дать нам &lt;strong&gt;адрес свободного на данный момент сервера&lt;/strong&gt; на который мы будем грузить свои файлы. Таким образом ответственность за балансировку переносится на сторону клиента.&lt;/p&gt;

&lt;div class=&quot;language-python highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kn&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;urllib.request&lt;/span&gt; &lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;Request&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;urlopen&lt;/span&gt;
&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;json&lt;/span&gt;

&lt;span class=&quot;k&quot;&gt;def&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;b2_get_upload_url&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;apiUrl&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;str&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;authToken&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;str&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;bucketId&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;str&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;-&amp;gt;&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;dict&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;b2_get_upload_url&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;sa&quot;&gt;f&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;apiUrl&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;/b2api/v2/b2_get_upload_url'&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;get_url_body&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'bucketId'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;bucketId&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;get_url_headers&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'Authorization'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;authToken&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;request&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;Request&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;b2_get_upload_url&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;json&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;dumps&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;get_url_body&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;).&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;encode&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'utf-8'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;),&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;headers&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;get_url_headers&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;with&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;urlopen&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;request&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;as&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;response&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;uploadData&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;json&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;loads&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;response&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;read&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;())&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;response&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;close&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;uploadData&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;Описанная функция принимает три параметра:&lt;/p&gt;
&lt;ol&gt;
  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;apiURl&lt;/code&gt; - API URL привязанный к нашей авторизованной сессии.&lt;/li&gt;
  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;authToken&lt;/code&gt; - Токен для второго уровня авторизации.&lt;/li&gt;
  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;buckedId&lt;/code&gt; - Внутренний ID вашего бакета в который мы авторизовались.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Все эти три параметра у нас уже есть - мы получили их на первом шаге авторизации. Все эти данные находятся в &lt;code class=&quot;highlighter-rouge&quot;&gt;auth&lt;/code&gt; объекте.&lt;/p&gt;

&lt;p&gt;Данная функция вернет нам условный &lt;code class=&quot;highlighter-rouge&quot;&gt;uploadData&lt;/code&gt; объект, в котором уже все что нужно для того, чтобы перейти непосредственно к загрузке файлов - т.е. &lt;code class=&quot;highlighter-rouge&quot;&gt;uploadUrl&lt;/code&gt; и новый &lt;code class=&quot;highlighter-rouge&quot;&gt;authorizationToken&lt;/code&gt;.&lt;/p&gt;

&lt;h2 id=&quot;шаг-3-загрузка-файла&quot;&gt;Шаг 3. Загрузка файла&lt;/h2&gt;

&lt;p&gt;Самая большая и сложная функция, которая принимает параметр &lt;code class=&quot;highlighter-rouge&quot;&gt;filePathName&lt;/code&gt; - путь к файлу, и собрав все нужные данные и оформив нужные заголовки - отправляет указанный файл на сервер.&lt;/p&gt;

&lt;div class=&quot;language-python highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kn&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;urllib.request&lt;/span&gt; &lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;Request&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;urlopen&lt;/span&gt;
&lt;span class=&quot;kn&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;urllib.error&lt;/span&gt; &lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;HTTPError&lt;/span&gt;
&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;json&lt;/span&gt;
&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;hashlib&lt;/span&gt;
&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;urllib.parse&lt;/span&gt;

&lt;span class=&quot;k&quot;&gt;def&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;b2_upload_file_callback&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;filePathName&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;str&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;-&amp;gt;&lt;/span&gt; &lt;span class=&quot;bp&quot;&gt;None&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;global&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;uploadUrl&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;authTokenUpload&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;print&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;sa&quot;&gt;f&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'[ Upload in progress ]: &lt;/span&gt;&lt;span class=&quot;si&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;filePathName&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;end&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'...'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;flush&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;bp&quot;&gt;True&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;allowed_codes&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;500&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;503&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;content_type&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;'b2/x-auto'&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;file_path_name_encoded&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;urllib&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;parse&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;quote&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;filePathName&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;

    &lt;span class=&quot;c1&quot;&gt;# we trim backslash in order to create right directories structure on B2 Cloud
&lt;/span&gt;    &lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;file_path_name_encoded&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;==&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;'/'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;file_path_name_encoded&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;file_path_name_encoded&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:]&lt;/span&gt;

    &lt;span class=&quot;k&quot;&gt;with&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;open&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;filePathName&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;'br'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;as&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;file&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;file_data&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;file&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;read&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;
    &lt;span class=&quot;nb&quot;&gt;file&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;close&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;

    &lt;span class=&quot;n&quot;&gt;file_hash&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;hashlib&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;sha1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;file_data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;).&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;hexdigest&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;

    &lt;span class=&quot;n&quot;&gt;headers&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;s&quot;&gt;'Authorization'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;authTokenUpload&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;s&quot;&gt;'X-Bz-File-Name'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;file_path_name_encoded&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;s&quot;&gt;'Content-Type'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;content_type&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;s&quot;&gt;'X-Bz-Content-Sha1'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;file_hash&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;

    &lt;span class=&quot;n&quot;&gt;request&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;Request&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;uploadUrl&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;file_data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;headers&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;headers&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;try&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;response&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;urlopen&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;request&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;response&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;close&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;
        &lt;span class=&quot;k&quot;&gt;print&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'&amp;lt;- [DONE] '&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;except&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;HTTPError&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;as&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;err&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
        &lt;span class=&quot;k&quot;&gt;print&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'&amp;lt;- [FAILED] '&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
        &lt;span class=&quot;c1&quot;&gt;# B2 Cloud sends 500,503 errors when need to re-establish upload connection (upload url and authenticationToken could be changed)
&lt;/span&gt;        &lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;err&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;code&lt;/span&gt; &lt;span class=&quot;ow&quot;&gt;in&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;allowed_codes&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
            &lt;span class=&quot;k&quot;&gt;print&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'[ 503 error, reiastablishing connection... ]'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
            &lt;span class=&quot;n&quot;&gt;uploadSettings&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;b2_get_upload_url&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;apiUrl&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;authToken&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;bucketId&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
            &lt;span class=&quot;n&quot;&gt;uploadUrl&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;uploadSettings&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'uploadUrl'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
            &lt;span class=&quot;n&quot;&gt;authTokenUpload&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;uploadSettings&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'authorizationToken'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
            &lt;span class=&quot;n&quot;&gt;b2_upload_file_callback&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;filePathName&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;Главным отличием этой функции от остальных является наличие “try-except” блока.&lt;/p&gt;

&lt;p&gt;В этом блоке мы проверяем код ошибки и если это 500 или 503, то мы &lt;strong&gt;должны повторить шаг  2 - “Запросить адрес сервера загрузки”&lt;/strong&gt;,  обновить  &lt;code class=&quot;highlighter-rouge&quot;&gt;uploadUrl&lt;/code&gt; и  токен для &lt;code class=&quot;highlighter-rouge&quot;&gt;authTokenUpload&lt;/code&gt; после чего повторить попытку его загрузки.&lt;/p&gt;

&lt;p&gt;При работе с &lt;strong&gt;b2_upload_file&lt;/strong&gt; API код ошибки 500 или 503 зарезервированы как сигнал разработчику  о том, что необходимо обратится за новым токеном и получить доступ к другому серверу, т.к. текущий может быть перегружен или заполнен. Таким образом и осуществляется “ручная балансировка” на стороне клиента. (&lt;a href=&quot;https://www.backblaze.com/blog/b2-503-500-server-error/&quot;&gt;см. доку&lt;/a&gt;)&lt;/p&gt;

&lt;p&gt;Мы поместили некоторые важные данные в глобальные переменные, например для адреса сервера загрузки и токена:&lt;/p&gt;

&lt;div class=&quot;language-python highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;k&quot;&gt;global&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;uploadUrl&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;authTokenUpload&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;И, после их обновления, вызываем эту же функцию рекурсивно, дабы полностью повторить весь этап загрузки.&lt;/p&gt;

&lt;p&gt;Помиомо прочего, перед отправкой файла, формируем специфические для API “b2_upload_file” заголовки запроса:&lt;/p&gt;

&lt;div class=&quot;language-python highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;n&quot;&gt;headers&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;s&quot;&gt;'Authorization'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;authTokenUpload&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;s&quot;&gt;'X-Bz-File-Name'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;file_path_name_encoded&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;s&quot;&gt;'Content-Type'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;'b2/x-auto'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;s&quot;&gt;'X-Bz-Content-Sha1'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;file_hash&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;Где:&lt;/p&gt;
&lt;ol&gt;
  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;Authorization&lt;/code&gt; - Токен полученный на предыдущем шаге &lt;code class=&quot;highlighter-rouge&quot;&gt;b2_get_upload_url()&lt;/code&gt;&lt;/li&gt;
  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;X-Bz-File-Name&lt;/code&gt; - Имя файла, под которым мы хотим хранить данные.&lt;/li&gt;
  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;Content-Type&lt;/code&gt; - Мы указали как &lt;code class=&quot;highlighter-rouge&quot;&gt;'b2/x-auto'&lt;/code&gt;, для того чтобы B2 определил тип файла автоматически (с чем он, кстати, неплохо справляется).&lt;/li&gt;
  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;X-Bz-Content-Sha1&lt;/code&gt; - обязательный для B2 заголовок в который мы передаем хеш файла, для того чтобы B2 имело возможность проверить целостность файла после загрузки.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Сам файл мы достаем из файловой системы  стандартной в Python процедурой &lt;code class=&quot;highlighter-rouge&quot;&gt;open()&lt;/code&gt; и содержимое передаем в теле запроса для &lt;code class=&quot;highlighter-rouge&quot;&gt;urllib.request.Request()&lt;/code&gt; метода.&lt;/p&gt;

&lt;h2 id=&quot;дополнительная-работа&quot;&gt;Дополнительная работа&lt;/h2&gt;

&lt;p&gt;Мы описали кодом все три операции, которые нам нужны для работы с B2 Cloud Storage, теперь нам осталось добавить несколько вспомогательных функций.&lt;/p&gt;

&lt;h3 id=&quot;аргументы-командной-строки&quot;&gt;Аргументы командной строки&lt;/h3&gt;
&lt;p&gt;Для того, чтобы мы могли передавать в наш скрипт аргументы из командной строки необходимо их описать с помощью либы &lt;code class=&quot;highlighter-rouge&quot;&gt;argparse&lt;/code&gt; (&lt;a href=&quot;https://docs.python.org/3.8/library/argparse.html&quot;&gt;см. доки&lt;/a&gt;)&lt;/p&gt;

&lt;div class=&quot;language-python highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;argparse&lt;/span&gt;

&lt;span class=&quot;k&quot;&gt;def&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;init_argparse&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;-&amp;gt;&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;argparse&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;ArgumentParser&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;parser&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;argparse&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;ArgumentParser&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;description&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'''Makes copy of your files to given B2 folder.
            You need to have &quot;keyID&quot; and &quot;App Key&quot; to authorize in B2 services.
            KeyId and App Key can be found in B2 Cloud Storage client dashboard
            '''&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;parser&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;add_argument&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
        &lt;span class=&quot;s&quot;&gt;&quot;-v&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;--version&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;action&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;version&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;version&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;sa&quot;&gt;f&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;parser&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;prog&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;s&quot;&gt; version 1.0.0&quot;&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;parser&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;add_argument&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
        &lt;span class=&quot;s&quot;&gt;'directory'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;help&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;Path to directory you want to upload to B2 cloud&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;requiredNamed&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;parser&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;add_argument_group&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'required named arguments'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;requiredNamed&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;add_argument&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
        &lt;span class=&quot;s&quot;&gt;'-k'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;'--key-id'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;help&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'B2 &quot;keyID&quot; value (is given to you when you create B2 bucket and access &quot;App key&quot; for it)'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;required&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;bp&quot;&gt;True&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;requiredNamed&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;add_argument&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
        &lt;span class=&quot;s&quot;&gt;'-a'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;'--app-key'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;help&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'B2 &quot;Application Key&quot; value (is given to you when you create B2 bucket and access &quot;App key&quot; for it)'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;required&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;bp&quot;&gt;True&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;parser&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;Таким образом, помимо самих аргументов, мы получим  еще “help” страницу с подробным описанием “из коробки”, как в настоящем консольном приложении.&lt;/p&gt;

&lt;h3 id=&quot;доступ--к-файлам&quot;&gt;Доступ  к файлам&lt;/h3&gt;

&lt;p&gt;Согласно плану, пользователь должен нам передать путь к директории которую он/она хочет загрузить, и мы должны загрузить все содержимое независимо от глубины вложенности и количества файлов.&lt;/p&gt;

&lt;p&gt;При условии, что нам неизвестно количество файлов, необходимо продумать максимально эффективное решение.&lt;/p&gt;

&lt;p&gt;Очевидный подход - составить список всех файлов в данной директории и потом циклически запускать для каждого загрузку - затратно по памяти, т.к. список может быть на сотни тысяч позиций. Поэтому в дело вступают структуры данных и метод &lt;code class=&quot;highlighter-rouge&quot;&gt;os.walk()&lt;/code&gt; который возвращает iterable структуру для содержимого указанного каталога. Извлекаем из полученного iterable данные по порядку и передаем их в коллбек &lt;code class=&quot;highlighter-rouge&quot;&gt;b2_upload_file_callback()&lt;/code&gt; из третьего  шага (операции).&lt;/p&gt;

&lt;p&gt;Опишем функцию:&lt;/p&gt;
&lt;div class=&quot;language-python highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;os&lt;/span&gt;

&lt;span class=&quot;k&quot;&gt;def&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;applyForFile&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;filesPath&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;str&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;callback&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;Callable&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[[&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;str&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt; &lt;span class=&quot;bp&quot;&gt;None&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;])&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;-&amp;gt;&lt;/span&gt; &lt;span class=&quot;bp&quot;&gt;None&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;excludes&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'.DS_Store'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;'.Trashes'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;'.fseventsd'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
                &lt;span class=&quot;s&quot;&gt;'.Spotlight-V100'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;'desktop.ini'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;

    &lt;span class=&quot;k&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;root&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;directories&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;files&lt;/span&gt; &lt;span class=&quot;ow&quot;&gt;in&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;os&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;walk&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;filesPath&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;):&lt;/span&gt;
        &lt;span class=&quot;k&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;name&lt;/span&gt; &lt;span class=&quot;ow&quot;&gt;in&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;files&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
            &lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;name&lt;/span&gt; &lt;span class=&quot;ow&quot;&gt;not&lt;/span&gt; &lt;span class=&quot;ow&quot;&gt;in&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;excludes&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
                &lt;span class=&quot;n&quot;&gt;full_name&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;os&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;path&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;join&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;root&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
                &lt;span class=&quot;n&quot;&gt;callback&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;full_name&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;где два параметра:&lt;/p&gt;
&lt;ol&gt;
  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;filesPath&lt;/code&gt; - путь к каталогу, содержимое которого мы хотим загрузить.&lt;/li&gt;
  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;callback&lt;/code&gt; -  функция как параметр, коллбэк в который мы будем передавать путь к каждому конкретному файлу.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2 id=&quot;собираем-все-вместе&quot;&gt;Собираем все вместе&lt;/h2&gt;

&lt;p&gt;Все готово, теперь соберем все вместе и правильно расставим вызовы функций и данные. В итоге мы получим целый скрипт вот такого вида:&lt;/p&gt;

&lt;div class=&quot;language-python highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;argparse&lt;/span&gt;
&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;os&lt;/span&gt;
&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;base64&lt;/span&gt;
&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;json&lt;/span&gt;
&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;hashlib&lt;/span&gt;
&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;urllib.parse&lt;/span&gt;
&lt;span class=&quot;kn&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;urllib.request&lt;/span&gt; &lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;Request&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;urlopen&lt;/span&gt;
&lt;span class=&quot;kn&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;urllib.error&lt;/span&gt; &lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;HTTPError&lt;/span&gt;
&lt;span class=&quot;kn&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;typing&lt;/span&gt; &lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;Callable&lt;/span&gt;

&lt;span class=&quot;c1&quot;&gt;# global variables
&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;uploadUrl&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;str&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;bp&quot;&gt;None&lt;/span&gt;
&lt;span class=&quot;n&quot;&gt;authTokenUpload&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;str&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;bp&quot;&gt;None&lt;/span&gt;
&lt;span class=&quot;n&quot;&gt;authToken&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;str&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;bp&quot;&gt;None&lt;/span&gt;
&lt;span class=&quot;n&quot;&gt;apiUrl&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;str&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;bp&quot;&gt;None&lt;/span&gt;
&lt;span class=&quot;n&quot;&gt;bucketId&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;str&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;bp&quot;&gt;None&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;# add Callable annotation
&lt;/span&gt;

&lt;span class=&quot;k&quot;&gt;def&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;init_argparse&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;-&amp;gt;&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;argparse&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;ArgumentParser&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;parser&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;argparse&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;ArgumentParser&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;description&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'''Makes copy of your files to given B2 folder.
            You need to have &quot;keyID&quot; and &quot;App Key&quot; to authorize in B2 services.
            KeyId and App Key can be found in B2 Cloud Storage client dashboard
            '''&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;parser&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;add_argument&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
        &lt;span class=&quot;s&quot;&gt;&quot;-v&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;--version&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;action&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;version&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;version&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;sa&quot;&gt;f&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;parser&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;prog&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;s&quot;&gt; version 1.0.0&quot;&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;parser&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;add_argument&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
        &lt;span class=&quot;s&quot;&gt;'directory'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;help&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;Path to directory you want to upload to B2 cloud&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;requiredNamed&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;parser&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;add_argument_group&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'required named arguments'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;requiredNamed&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;add_argument&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
        &lt;span class=&quot;s&quot;&gt;'-k'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;'--key-id'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;help&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'B2 &quot;keyID&quot; value (is given to you when you create B2 bucket and access &quot;App key&quot; for it)'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;required&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;bp&quot;&gt;True&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;requiredNamed&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;add_argument&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
        &lt;span class=&quot;s&quot;&gt;'-a'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;'--app-key'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;help&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'B2 &quot;Application Key&quot; value (is given to you when you create B2 bucket and access &quot;App key&quot; for it)'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;required&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;bp&quot;&gt;True&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;parser&lt;/span&gt;


&lt;span class=&quot;k&quot;&gt;def&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;b2_authorize&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;applicationKeyId&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;str&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;applicationKeyValue&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;str&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;-&amp;gt;&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;dict&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;id_and_key&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;sa&quot;&gt;f&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;applicationKeyId&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;applicationKeyValue&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;id_and_key_base64&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;base64&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;b64encode&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;id_and_key&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;encode&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'utf-8'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)).&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;decode&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'utf-8'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;basic_auth_string&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;sa&quot;&gt;f&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'Basic &lt;/span&gt;&lt;span class=&quot;si&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;id_and_key_base64&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;headers&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'Authorization'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;basic_auth_string&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;b2_auth_url&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;'https://api.backblazeb2.com/b2api/v2/b2_authorize_account'&lt;/span&gt;

    &lt;span class=&quot;n&quot;&gt;request&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;Request&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;b2_auth_url&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;headers&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;headers&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;with&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;urlopen&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;request&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;as&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;response&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;auth&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;json&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;loads&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;response&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;read&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;())&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;response&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;close&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;auth&lt;/span&gt;


&lt;span class=&quot;k&quot;&gt;def&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;b2_get_upload_url&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;apiUrl&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;str&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;authToken&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;str&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;bucketId&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;str&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;-&amp;gt;&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;dict&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;b2_get_upload_url&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;sa&quot;&gt;f&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;apiUrl&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;/b2api/v2/b2_get_upload_url'&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;get_url_body&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'bucketId'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;bucketId&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;get_url_headers&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'Authorization'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;authToken&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;request&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;Request&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;b2_get_upload_url&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;json&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;dumps&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;get_url_body&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;).&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;encode&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'utf-8'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;),&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;headers&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;get_url_headers&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;with&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;urlopen&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;request&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;as&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;response&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;uploadData&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;json&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;loads&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;response&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;read&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;())&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;response&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;close&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;uploadData&lt;/span&gt;


&lt;span class=&quot;k&quot;&gt;def&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;b2_upload_file_callback&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;filePathName&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;str&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;-&amp;gt;&lt;/span&gt; &lt;span class=&quot;bp&quot;&gt;None&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;global&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;uploadUrl&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;authTokenUpload&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;print&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;sa&quot;&gt;f&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'[ Upload in progress ]: &lt;/span&gt;&lt;span class=&quot;si&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;filePathName&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;end&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'...'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;flush&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;bp&quot;&gt;True&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;allowed_codes&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;500&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;503&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;content_type&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;'b2/x-auto'&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;file_path_name_encoded&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;urllib&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;parse&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;quote&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;filePathName&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;

    &lt;span class=&quot;c1&quot;&gt;# we trim backslash in order to create right directories structure on B2 Cloud
&lt;/span&gt;    &lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;file_path_name_encoded&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;==&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;'/'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;file_path_name_encoded&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;file_path_name_encoded&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:]&lt;/span&gt;

    &lt;span class=&quot;k&quot;&gt;with&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;open&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;filePathName&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;'br'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;as&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;file&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;file_data&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;file&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;read&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;
    &lt;span class=&quot;nb&quot;&gt;file&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;close&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;

    &lt;span class=&quot;n&quot;&gt;file_hash&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;hashlib&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;sha1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;file_data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;).&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;hexdigest&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;

    &lt;span class=&quot;n&quot;&gt;headers&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;s&quot;&gt;'Authorization'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;authTokenUpload&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;s&quot;&gt;'X-Bz-File-Name'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;file_path_name_encoded&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;s&quot;&gt;'Content-Type'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;content_type&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;s&quot;&gt;'X-Bz-Content-Sha1'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;file_hash&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;

    &lt;span class=&quot;n&quot;&gt;request&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;Request&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;uploadUrl&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;file_data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;headers&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;headers&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;try&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;response&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;urlopen&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;request&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;response&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;close&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;
        &lt;span class=&quot;k&quot;&gt;print&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'&amp;lt;- [DONE] '&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;except&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;HTTPError&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;as&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;err&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
        &lt;span class=&quot;k&quot;&gt;print&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'&amp;lt;- [FAILED] '&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
        &lt;span class=&quot;c1&quot;&gt;# B2 Cloud sends 500,503 errors when need to re-establish upload connection (upload url and authenticationToken could be changed)
&lt;/span&gt;        &lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;err&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;code&lt;/span&gt; &lt;span class=&quot;ow&quot;&gt;in&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;allowed_codes&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
            &lt;span class=&quot;k&quot;&gt;print&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'[ 503 error, reestablishing connection... ]'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
            &lt;span class=&quot;n&quot;&gt;uploadSettings&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;b2_get_upload_url&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;apiUrl&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;authToken&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;bucketId&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
            &lt;span class=&quot;n&quot;&gt;uploadUrl&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;uploadSettings&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'uploadUrl'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
            &lt;span class=&quot;n&quot;&gt;authTokenUpload&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;uploadSettings&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'authorizationToken'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
            &lt;span class=&quot;n&quot;&gt;b2_upload_file_callback&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;filePathName&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;


&lt;span class=&quot;k&quot;&gt;def&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;applyForFile&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;filesPath&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;str&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;callback&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;Callable&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[[&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;str&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt; &lt;span class=&quot;bp&quot;&gt;None&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;])&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;-&amp;gt;&lt;/span&gt; &lt;span class=&quot;bp&quot;&gt;None&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;excludes&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'.DS_Store'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;'.Trashes'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;'.fseventsd'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
                &lt;span class=&quot;s&quot;&gt;'.Spotlight-V100'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;'desktop.ini'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;

    &lt;span class=&quot;k&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;root&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;directories&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;files&lt;/span&gt; &lt;span class=&quot;ow&quot;&gt;in&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;os&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;walk&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;filesPath&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;):&lt;/span&gt;
        &lt;span class=&quot;k&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;name&lt;/span&gt; &lt;span class=&quot;ow&quot;&gt;in&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;files&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
            &lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;name&lt;/span&gt; &lt;span class=&quot;ow&quot;&gt;not&lt;/span&gt; &lt;span class=&quot;ow&quot;&gt;in&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;excludes&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
                &lt;span class=&quot;n&quot;&gt;full_name&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;os&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;path&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;join&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;root&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
                &lt;span class=&quot;n&quot;&gt;callback&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;full_name&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;


&lt;span class=&quot;k&quot;&gt;def&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;main&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;-&amp;gt;&lt;/span&gt; &lt;span class=&quot;bp&quot;&gt;None&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;global&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;authToken&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;uploadUrl&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;authTokenUpload&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;apiUrl&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;bucketId&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;parser&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;init_argparse&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;args&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;vars&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;parser&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;parse_args&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;())&lt;/span&gt;

    &lt;span class=&quot;n&quot;&gt;directory&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;args&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;directory&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;keyId&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;args&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;key_id&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;keyValue&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;args&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;app_key&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;

    &lt;span class=&quot;n&quot;&gt;auth&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;b2_authorize&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;keyId&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;keyValue&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;

    &lt;span class=&quot;n&quot;&gt;apiUrl&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;auth&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'apiUrl'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;authToken&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;auth&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'authorizationToken'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;bucketId&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;auth&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'allowed'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;][&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'bucketId'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;uploadSettings&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;b2_get_upload_url&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;apiUrl&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;authToken&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;bucketId&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;

    &lt;span class=&quot;n&quot;&gt;uploadUrl&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;uploadSettings&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'uploadUrl'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;authTokenUpload&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;uploadSettings&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'authorizationToken'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;applyForFile&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;directory&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;b2_upload_file_callback&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;

    &lt;span class=&quot;k&quot;&gt;print&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'[ All files were successfully uploaded ]!'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;


&lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;__name__&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;==&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;__main__&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;main&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;выводы&quot;&gt;Выводы&lt;/h2&gt;

&lt;p&gt;Итого мы получили скрипт для бэкапа данных в облако вида:&lt;/p&gt;
&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;python3 b2_backup.py &lt;span class=&quot;nt&quot;&gt;-k&lt;/span&gt; &amp;lt;KEY_ID&amp;gt; &lt;span class=&quot;nt&quot;&gt;-a&lt;/span&gt; &amp;lt;APP_KEY&amp;gt; &amp;lt;PATH_TO_FILES&amp;gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;Разобрались в особенностях работы с нативным API сервиса B2 Cloud Storage и по пути научились “шагать” по файловой системе и отправлять файлами по http\https запросам.&lt;/p&gt;

&lt;p&gt;Полная актуальная версия моего скрипта находится на моем &lt;a href=&quot;https://github.com/handleman/b2_backup&quot;&gt;github&lt;/a&gt;&lt;/p&gt;</content><author><name></name></author><category term="python" /><summary type="html">В этом посте мы напишем и разберем скрипт на Python для бэкапа любых файлов (любого размера и количества) в облачное объектное хранилище “B2 Cloud Storage” от компании Backblaze. Почему именно “B2”? - Потому-что он дешевле раза в четыре популярного S3, ставшего уже для нас стандартом “Де-факто”. По своим возможностям и удобству использования B2 конечно уступает, но, для простого бэкапа - этого более чем достаточно.</summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://handleman.github.io/assets/images/articles/backblaze.jpg" /><media:content medium="image" url="https://handleman.github.io/assets/images/articles/backblaze.jpg" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry><title type="html">Open Source антивирус clamAv на macOs и проверка по расписанию</title><link href="https://handleman.github.io/system/2020/05/07/clamav-mac-os.html" rel="alternate" type="text/html" title="Open Source антивирус clamAv на macOs и проверка по расписанию" /><published>2020-05-07T12:48:59+03:00</published><updated>2020-05-07T12:48:59+03:00</updated><id>https://handleman.github.io/system/2020/05/07/clamav-mac-os</id><content type="html" xml:base="https://handleman.github.io/system/2020/05/07/clamav-mac-os.html">&lt;p&gt;Даже самые известные и крутые Opensource проекты грешат своей недружелюбностью к пользователю и требуют от него различных усилий, порой требующих внушительных знаний и навыков, чтобы просто установить и заставить работать как надо. ClamAv не является исключением, а даже, скорее, гордо стоит в авангарде подобных тулзов.&lt;/p&gt;

&lt;p&gt;В данном примере я все делал через bash shell, но, в целом — использовать можно все что угодно. Важен только принцип и конкретные файлы конфигов которые нужно будет подправить.&lt;/p&gt;

&lt;h2 id=&quot;шаг-1-установка-и-настройка-clamav&quot;&gt;Шаг 1. Установка и настройка clamAV&lt;/h2&gt;

&lt;p&gt;Ставлю все через   &lt;code class=&quot;highlighter-rouge&quot;&gt;Brew&lt;/code&gt;&lt;/p&gt;
&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;brew &lt;span class=&quot;nb&quot;&gt;install &lt;/span&gt;clamav
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;&lt;strong&gt;Brew&lt;/strong&gt; ложит сам clamAv в каталог  &lt;code class=&quot;highlighter-rouge&quot;&gt;/usr/local/etc/clamav&lt;/code&gt;, там же лежат и конфиги. Настраиваем нужный удобный путь для логов через конфиг:&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;cd&lt;/span&gt; /usr/local/etc/clamav
&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;cp &lt;/span&gt;clamd.conf.sample clamd.conf
&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;echo&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;LogFile /Users/handleman/log/clamd.log&quot;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;gt;&amp;gt;&lt;/span&gt; clamd.conf
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;На этом шаге мы указали свой кастомный файл для лога, для удобства, размещенный в каталоге пользователя который в моем случае ‘/Users/handleman’. Просто чтобы не держать в голове дефолтный путь к логам или искать его каждый раз, чтобы посмотреть отчет.&lt;/p&gt;

&lt;p&gt;Вообще файл конфига &lt;strong&gt;clamd.conf&lt;/strong&gt; очень подробно задокументирован внутри, с примерами использования. Советую заглянуть туда, потратить время, и настроить конкретно под себя. Сделать с ним можно очень много, например включить режим “защиты в реальном времени” как у “настоящих” антивирусов включив параметр &lt;code class=&quot;highlighter-rouge&quot;&gt;ScanOnAccess&lt;/code&gt; в конфиге.&lt;/p&gt;

&lt;h3 id=&quot;настройка-утилиты-freshclam&quot;&gt;Настройка утилиты freshclam&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Freshclam&lt;/strong&gt; нужна для апдейта базы сигнатур вирусов, работать с ней очень просто — нужно просто ее запустить дополнительных параметров передавать не нужно, только один раз настроить файл конфига - по тому же принципу что и сам clamv:&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;cd&lt;/span&gt; /usr/local/etc/clamav
&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;cp &lt;/span&gt;freshclam.conf.sample freshclam.conf
&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;echo&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;UpdateLogFile /Users/handleman/log/freshclam.log&quot;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;gt;&amp;gt;&lt;/span&gt; freshclam.conf
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id=&quot;скрипт-для-запуска-апдейта-сигнатур-и-сканера&quot;&gt;Скрипт для запуска апдейта сигнатур и сканера&lt;/h3&gt;

&lt;p&gt;Принцип, по которому я планирую использовать &lt;code class=&quot;highlighter-rouge&quot;&gt;clamAV&lt;/code&gt; у меня, следующий:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;clamd&lt;/code&gt; запущенный в бэкграунд как процесс (daemon)&lt;/li&gt;
  &lt;li&gt;Запуск &lt;strong&gt;freshclam&lt;/strong&gt; и сканера &lt;strong&gt;clamdscan&lt;/strong&gt; “упакованные” в отдельный sh скрипт по расписанию, скажем, каждый понедельник ночью.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Создаем скрипт, содержащий команды запуска &lt;code class=&quot;highlighter-rouge&quot;&gt;clamdscan&lt;/code&gt; и &lt;code class=&quot;highlighter-rouge&quot;&gt;freshclam&lt;/code&gt; (каталог не важен, в моем случае это &lt;code class=&quot;highlighter-rouge&quot;&gt;~/projects/scripts&lt;/code&gt;):&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;mkdir&lt;/span&gt; ~/quarantine
&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;cd&lt;/span&gt; ~/projects/scripts
&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;touch &lt;/span&gt;avd.sh
&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;chmod&lt;/span&gt; +x avd.sh
&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;echo&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;#&lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\!&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;/usr/bin/env bash &lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\n&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;/usr/local/bin/freshclam &amp;amp;&amp;amp; /usr/local/bin/clamdscan -i --multiscan --move=/Users/handleman/quarantine ~&quot;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;gt;&amp;gt;&lt;/span&gt; avd.sh

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;Таким образом мы создали каталог “карантина” &lt;code class=&quot;highlighter-rouge&quot;&gt;~/quarantine&lt;/code&gt; куда мы попросили &lt;code class=&quot;highlighter-rouge&quot;&gt;clamAV&lt;/code&gt; складывать зараженные файлы и указали каталог &lt;code class=&quot;highlighter-rouge&quot;&gt;~&lt;/code&gt; (домашний каталог текущего пользователя) как отправную точку для скана.&lt;/p&gt;

&lt;p&gt;Мы создали файл &lt;strong&gt;avd.sh&lt;/strong&gt;, в котором 2 команды&lt;/p&gt;
&lt;ol&gt;
  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;freshclam&lt;/code&gt; - без параметров, для запуска обновления сигнатур перед каждым сканом.&lt;/li&gt;
  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;сlamdscan -i --multiscan --move=/Users/handleman/quarantine ~&lt;/code&gt; - непосредственно, сам сканер — нацеленный на каталог ‘~’ (домашний каталог активного пользователя) и, так же, попросили его складывать инфицированные файлы в каталог &lt;code class=&quot;highlighter-rouge&quot;&gt;~/quarantine&lt;/code&gt; всего лишь для собственного удобства, повторюсь, поигравшись с конфигом &lt;code class=&quot;highlighter-rouge&quot;&gt;clamd.conf&lt;/code&gt; можно сделать многое, например удалять инфицированные файлы автоматически.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;С конфигурацией &lt;strong&gt;clamAV&lt;/strong&gt; покончено, впереди самое интересное:&lt;/p&gt;

&lt;h2 id=&quot;шаг-2-запуск-сканера-clamav-по-расписанию-в-macos&quot;&gt;Шаг 2. Запуск сканера ClamAV по расписанию в MacOs&lt;/h2&gt;

&lt;p&gt;Чтобы приступить, необходимо немного углубится в принципы работы процессов (демонов) в macOs.
&lt;a href=&quot;https://developer.apple.com/library/archive/documentation/MacOSX/Conceptual/BPSystemStartup/Chapters/CreatingLaunchdJobs.html&quot;&gt;Официаьная документация от Aplle&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Если, вкратце и своими словами, то для того, чтобы запускать свои скрипты автоматически или по расписанию &lt;strong&gt;мы должны создать свой кастомный демон со своим кастомным конфигом&lt;/strong&gt;, где будет все: и путь к исполняемому скрипту, и различные параметры демона и параметры запуска и расписания вызова.&lt;/p&gt;

&lt;p&gt;Технически это будут 2 простых действия:&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;Создаем два XML файла конфигурации демона с расширением.plist в специально отведенных системой местах.&lt;/li&gt;
  &lt;li&gt;“Скармливаем” эти файлы утилите &lt;code class=&quot;highlighter-rouge&quot;&gt;launchctl&lt;/code&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;За работу с демонами в macOs отвечает универсальный Open Source фреймворк под названием &lt;a href=&quot;https://www.launchd.info/&quot;&gt;&lt;strong&gt;launchd&lt;/strong&gt;&lt;/a&gt;. Регистрация созданных демонов/процессов происходит через утилиту &lt;strong&gt;launchctl&lt;/strong&gt; в составе этого фреймворка.&lt;/p&gt;

&lt;p&gt;Важно понимать, что в рамках MacOs &lt;strong&gt;существуют 2 типа демонов:&lt;/strong&gt;&lt;/p&gt;
&lt;ol&gt;
  &lt;li&gt;&lt;strong&gt;Agents&lt;/strong&gt; запускаются от лица залогиненного пользователя в момент логина.&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Daemons&lt;/strong&gt; запускаются с правами root и работают в фоне независимо от того какой активный юзер залогинен и залогинен ли кто-нибудь вообще.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;“Агенты” и “Демоны” в свою очередь, бывают “системные”, “глобальные” и, так же, “Агент” может быть “локальным” для одного конкретного пользователя.&lt;/p&gt;

&lt;p&gt;Вообще эта тема, сама по себе,  интересная и дает полную свободу автоматизации системы: хоть бэкапы, хоть антивирус, хоть что угодно… и, в момент логина, и фоном независимо от пользователя вообще.&lt;/p&gt;

&lt;p&gt;В этом конкретном случае все очень просто - Я хочу чтобы:&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;При каждом моем логине запускался процесс clamd.&lt;/li&gt;
  &lt;li&gt;Раз в неделю, по понедельникам в час ночи запускался апдейт сигнатур антивируса и запуск сканера.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Для этих целей нам нужен как раз &lt;strong&gt;“System Agent”&lt;/strong&gt;
для этого, в каталоге &lt;code class=&quot;highlighter-rouge&quot;&gt;/Library/LaunchAgents/&lt;/code&gt; мы создадим файл &lt;code class=&quot;highlighter-rouge&quot;&gt;com.cisco.clamd.plist&lt;/code&gt; (название может быть любым главное чтобы оно было уникальным и с расширением ‘.plist’)&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;/Library/LaunchAgents/com.cisco.clamd.plist&lt;/strong&gt; с содержимым:&lt;/p&gt;
&lt;div class=&quot;language-xml highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;cp&quot;&gt;&amp;lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&amp;gt;&lt;/span&gt;
&lt;span class=&quot;cp&quot;&gt;&amp;lt;!DOCTYPE plist PUBLIC &quot;-//Apple Computer//DTD PLIST 1.0//EN&quot; &quot;http://www.apple.com/DTDs/PropertyList-1.0.dtd&quot;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;plist&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;version=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;1.0&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;dict&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;key&amp;gt;&lt;/span&gt;Label&lt;span class=&quot;nt&quot;&gt;&amp;lt;/key&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;string&amp;gt;&lt;/span&gt;com.cisco.clamd&lt;span class=&quot;nt&quot;&gt;&amp;lt;/string&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;key&amp;gt;&lt;/span&gt;Program&lt;span class=&quot;nt&quot;&gt;&amp;lt;/key&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;string&amp;gt;&lt;/span&gt;/usr/local/sbin/clamd&lt;span class=&quot;nt&quot;&gt;&amp;lt;/string&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;key&amp;gt;&lt;/span&gt;RunAtLoad&lt;span class=&quot;nt&quot;&gt;&amp;lt;/key&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;true/&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;key&amp;gt;&lt;/span&gt;KeepAlive&lt;span class=&quot;nt&quot;&gt;&amp;lt;/key&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;false/&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/dict&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/plist&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;В котором, мы просим фреймворк launchd запустить &lt;strong&gt;clamd&lt;/strong&gt; (/usr/local/sbin/clamd) один раз при каждом логине текущего пользователя. С помощью говорящего за себя параметра &lt;code class=&quot;highlighter-rouge&quot;&gt;RunAtLoad&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Причем &lt;code class=&quot;highlighter-rouge&quot;&gt;KeepAlive&lt;/code&gt; в состоянии &lt;code class=&quot;highlighter-rouge&quot;&gt;false&lt;/code&gt;, иначе система несколько раз в минуту будет перезапускать этот процесс что скажется на производительности, чего нам, в нашей простой задаче не нужно.&lt;/p&gt;

&lt;p&gt;Создадим второй аналогичный конфиг, но уже для, ранее созданного, &lt;code class=&quot;highlighter-rouge&quot;&gt;~/scripts/avd.sh&lt;/code&gt; и попросим &lt;strong&gt;launchd&lt;/strong&gt; запускать его по расписанию. Для этого, в каталоге &lt;code class=&quot;highlighter-rouge&quot;&gt;~/Library/LaunchAgents/&lt;/code&gt; мы создадим файл &lt;code class=&quot;highlighter-rouge&quot;&gt;com.cisco.clamdscan.plist&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;~/Library/LaunchAgents/com.cisco.clamdscan.plist&lt;/strong&gt; с содержимым:&lt;/p&gt;

&lt;div class=&quot;language-xml highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;cp&quot;&gt;&amp;lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&amp;gt;&lt;/span&gt;
&lt;span class=&quot;cp&quot;&gt;&amp;lt;!DOCTYPE plist PUBLIC &quot;-//Apple Computer//DTD PLIST 1.0//EN&quot; &quot;http://www.apple.com/DTDs/PropertyList-1.0.dtd&quot;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;plist&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;version=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;1.0&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;dict&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;key&amp;gt;&lt;/span&gt;Label&lt;span class=&quot;nt&quot;&gt;&amp;lt;/key&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;string&amp;gt;&lt;/span&gt;com.cisco.clamdscan&lt;span class=&quot;nt&quot;&gt;&amp;lt;/string&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;key&amp;gt;&lt;/span&gt;Program&lt;span class=&quot;nt&quot;&gt;&amp;lt;/key&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;string&amp;gt;&lt;/span&gt;/Users/handleman/projects/scripts/avd.sh&lt;span class=&quot;nt&quot;&gt;&amp;lt;/string&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;key&amp;gt;&lt;/span&gt;StartCalendarInterval&lt;span class=&quot;nt&quot;&gt;&amp;lt;/key&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;dict&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;nt&quot;&gt;&amp;lt;key&amp;gt;&lt;/span&gt;Hour&lt;span class=&quot;nt&quot;&gt;&amp;lt;/key&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;nt&quot;&gt;&amp;lt;integer&amp;gt;&lt;/span&gt;1&lt;span class=&quot;nt&quot;&gt;&amp;lt;/integer&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;nt&quot;&gt;&amp;lt;key&amp;gt;&lt;/span&gt;Minute&lt;span class=&quot;nt&quot;&gt;&amp;lt;/key&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;nt&quot;&gt;&amp;lt;integer&amp;gt;&lt;/span&gt;0&lt;span class=&quot;nt&quot;&gt;&amp;lt;/integer&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;nt&quot;&gt;&amp;lt;key&amp;gt;&lt;/span&gt;Weekday&lt;span class=&quot;nt&quot;&gt;&amp;lt;/key&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;nt&quot;&gt;&amp;lt;integer&amp;gt;&lt;/span&gt;1&lt;span class=&quot;nt&quot;&gt;&amp;lt;/integer&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;/dict&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/dict&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/plist&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;Конфиг примерно такой же, за исключением того, что нам не надо запускать наш скрипт (&lt;code class=&quot;highlighter-rouge&quot;&gt;/Users/handleman/projects/scripts/avd.sh&lt;/code&gt;) во время старта системы, а нужно запускать по расписанию раз в неделю согласно указанному параметру &lt;code class=&quot;highlighter-rouge&quot;&gt;StartCalendarInterval&lt;/code&gt; и его параметрам&lt;/p&gt;

&lt;h2 id=&quot;последний-штрих&quot;&gt;Последний штрих&lt;/h2&gt;

&lt;p&gt;Для того чтобы запустить демоны не дожидаясь перезагрузки системы, загрузим их в память с помощью утилиты &lt;code class=&quot;highlighter-rouge&quot;&gt;launchctl&lt;/code&gt;&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;sudo &lt;/span&gt;launchctl load /Library/LaunchAgents/com.cisco.clamd.plist
&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;launchctl load ~/Library/LaunchAgents/com.cisco.clamdscan.plist
&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;launchctl start com.cisco.clamd

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;Вот и все! Теперь у вас в фоне работает антивирус ClamAv автоматически сканирующий ваш каталог пользователя раз в неделю, и пишет в ваш лог файл, откуда вы можете наблюдать всю активность сканера, так же инфицированные файлы отправляются в карантин &lt;code class=&quot;highlighter-rouge&quot;&gt;~/quarantine&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Вообще, покопавшись, в конфигах, теоретически, можно сделать еще много чего, например нотификации, но для моих нужд данного сетапа волне достаточно.&lt;/p&gt;</content><author><name></name></author><category term="system" /><summary type="html">Даже самые известные и крутые Opensource проекты грешат своей недружелюбностью к пользователю и требуют от него различных усилий, порой требующих внушительных знаний и навыков, чтобы просто установить и заставить работать как надо. ClamAv не является исключением, а даже, скорее, гордо стоит в авангарде подобных тулзов.</summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://handleman.github.io/assets/images/articles/clamav.webp" /><media:content medium="image" url="https://handleman.github.io/assets/images/articles/clamav.webp" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry><title type="html">Комиксы: Moi, Dragon (Я - Дракон)</title><link href="https://handleman.github.io/comics/2019/06/15/moi-dragon.html" rel="alternate" type="text/html" title="Комиксы: Moi, Dragon (Я - Дракон)" /><published>2019-06-15T13:35:59+03:00</published><updated>2019-06-15T13:35:59+03:00</updated><id>https://handleman.github.io/comics/2019/06/15/moi-dragon</id><content type="html" xml:base="https://handleman.github.io/comics/2019/06/15/moi-dragon.html">&lt;p&gt;Невероятно красивое и захватывающее мрачное фэнтези от мэтра Хуана Гименеза (Juan Gimenez). Нетривиальная для фэнтези история, полная экшена, баталий и неожиданных сюжетных решений. Детализация образов как в визуальном плане, так и в плане самой истории просто поражает глубиной, но при этом история достаточно сбалансирована и читается вполне бодро.&lt;/p&gt;

&lt;p&gt;Замок, дворцовые интриги, любовь, предательство и драконы, все это чудесным образом переплетается в абсолютно оригинальный и не банальный сюжет который сам по себе как полноценный роман, при этом подан визуальным языком великолепного художника Хуана Гименеза - в своем фирменном стиле.&lt;/p&gt;

&lt;p&gt;&lt;img class=&quot;comic_page&quot; src=&quot;/assets/images/articles/moi_dragon/dragon.jpg&quot; alt=&quot; комикс moi, Dragon. (Я, Дракон)&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img class=&quot;comic_page&quot; src=&quot;/assets/images/articles/moi_dragon/dragon2.jpg&quot; alt=&quot; комикс moi, Dragon. (Я, Дракон)&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img class=&quot;comic_page&quot; src=&quot;/assets/images/articles/moi_dragon/dragon3.jpg&quot; alt=&quot; комикс moi, Dragon. (Я, Дракон)&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img class=&quot;comic_page&quot; src=&quot;/assets/images/articles/moi_dragon/dragon4.jpg&quot; alt=&quot; комикс moi, Dragon. (Я, Дракон)&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img class=&quot;comic_page&quot; src=&quot;/assets/images/articles/moi_dragon/dragon5.jpg&quot; alt=&quot; комикс moi, Dragon. (Я, Дракон)&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img class=&quot;comic_page&quot; src=&quot;/assets/images/articles/moi_dragon/dragon6.jpg&quot; alt=&quot; комикс moi, Dragon. (Я, Дракон)&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Насколько я понимаю на данный момент этот графический роман официально не был переведен на русский, поэтому ознакомится с ним можно только &lt;strong&gt;скачав любительский перевод:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;http://rus-bd.com/component/content/article/35-bdarticlescategory/604-moi-dragon-by-juan-gimenez.html&quot;&gt;Moi, Dragon (Я - Дракон) by Juan Gimenez&lt;/a&gt;&lt;/p&gt;</content><author><name></name></author><category term="comics" /><summary type="html">Невероятно красивое и захватывающее мрачное фэнтези от мэтра Хуана Гименеза (Juan Gimenez). Нетривиальная для фэнтези история, полная экшена, баталий и неожиданных сюжетных решений. Детализация образов как в визуальном плане, так и в плане самой истории просто поражает глубиной, но при этом история достаточно сбалансирована и читается вполне бодро.</summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://handleman.github.io/assets/images/articles/moi_dragon/dragon.jpg" /><media:content medium="image" url="https://handleman.github.io/assets/images/articles/moi_dragon/dragon.jpg" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry><title type="html">Перевод: Понимание Virtual DOM</title><link href="https://handleman.github.io/translation/2019/03/22/virtual-dom.html" rel="alternate" type="text/html" title="Перевод: Понимание Virtual DOM" /><published>2019-03-22T10:35:00+03:00</published><updated>2019-03-22T10:35:00+03:00</updated><id>https://handleman.github.io/translation/2019/03/22/virtual-dom</id><content type="html" xml:base="https://handleman.github.io/translation/2019/03/22/virtual-dom.html">&lt;p&gt;В прошлом месяце я опубликовал статьи на темы: &lt;a href=&quot;https://handleman.github.io/translation/2019/01/11/dom.html&quot;&gt;что такое DOM&lt;/a&gt;, и &lt;a href=&quot;https://handleman.github.io/translation/2019/01/22/shadow-dom.html&quot;&gt;Shadow DOM&lt;/a&gt; и чем они отличаются.
Чтобы немного вспомнить, повторим основные понятия. «Объектная Модель Документа» (DOM) - это представление HTML кода страницы в виде Javascript объекта и интерфейс для изменения параметров этого объекта. Shadow DOM можно рассматривать как облегченную (малую) версию DOM. Это тоже объектное представление элементов на странице, но не всей страницы сразу а, изолированные кусочки верстки со своими стилями, что позволяет разбить наш документ на меньшие автономные части, которые можно легко переиспользовать на других страницах сайта (приложения).&lt;/p&gt;

&lt;p&gt;Еще один подобный термин, который вы могли встретить - «Virtual DOM».
Хотя термин существует уже достаточно давно, он стал более популярен благодаря использованию в среде React. В этой статье я расскажу чем собственно является Virtual DOM, чем он отличается от оригинального DOM и как он используется.&lt;/p&gt;

&lt;h2 id=&quot;зачем-нам-нужен-виртуальный-dom&quot;&gt;Зачем нам нужен виртуальный DOM&lt;/h2&gt;
&lt;p&gt;Чтобы понять как появился термин virtual DOM, нам надо вернуться к оригинальному DOM. Как я упоминал ранее DOM можно условно поделить на 2 части: объектное представление страницы и, собственно, API, для манипуляций с этим объектом.&lt;/p&gt;

&lt;p&gt;Для примера возьмем простой HTML элемент с неупорядоченным списком и одним элементом внутри:&lt;/p&gt;

&lt;div class=&quot;language-html highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;cp&quot;&gt;&amp;lt;!doctype html&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;html&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;lang=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;en&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
 &lt;span class=&quot;nt&quot;&gt;&amp;lt;head&amp;gt;&amp;lt;/head&amp;gt;&lt;/span&gt;
 &lt;span class=&quot;nt&quot;&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;ul&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;class=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;list&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;nt&quot;&gt;&amp;lt;li&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;class=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;list__item&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;List item&lt;span class=&quot;nt&quot;&gt;&amp;lt;/li&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;/ul&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;nt&quot;&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Этот документ может быть представлен в виде следующего DOM-дерева:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;html
    &lt;ul&gt;
      &lt;li&gt;head lang=”en”&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;body
    &lt;ul&gt;
      &lt;li&gt;ul class=”list”
        &lt;ul&gt;
          &lt;li&gt;li class=”list__item”
            &lt;ul&gt;
              &lt;li&gt;“List item”&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Предположим, что мы хотим поменять контент первого элемента на &lt;strong&gt;«List item one»&lt;/strong&gt; и, так же, добавить второй элемент. Чтобы сделать это,  нам нужно использовать API от DOM - чтобы найти элементы которые нам нужно апдейтить, создать новые элементы, добавить атрибуты и нужный контент и, на конец, обновить текущее DOM дерево.&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;listItemOne&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;getElementsByClassName&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;list__item&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;];&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;listItemOne&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;textContent&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;List item one&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;list&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;getElementsByClassName&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;list&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;];&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;listItemTwo&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createElement&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;listItemTwo&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;classList&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;add&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;list__item&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;listItemTwo&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;textContent&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;List item two&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;list&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;appendChild&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;listItemTwo&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;dom-был-создан-не-для-этого&quot;&gt;DOM был создан не для этого…&lt;/h2&gt;

&lt;p&gt;Когда, в далеком 1998, вышла первая версия спецификации DOM, мы строили страницы и управляли ими совсем по другому. Не было необходимости так часто использовать DOM API для изменения контента страницы, как мы делаем это сейчас.&lt;/p&gt;

&lt;p&gt;Простые методы, такие как &lt;code class=&quot;highlighter-rouge&quot;&gt;document.getElementsByClassName()&lt;/code&gt; хороши в малых масштабах, но, если нам нужно апдейтить несколько элементов на странице каждые несколько секунд — постоянный запрос и апдейт конкретного элемента, может выйти очень дорогим для общей производительности страницы.&lt;/p&gt;

&lt;p&gt;Более того,  сама структура API такая, сто обычно проще выполнить более тяжелые операции над большим куском разметки, нежели искать и обновлять конкретный элемент каждый раз.&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;list&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;getElementsByClassName&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;list&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;];&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;list&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;innerHTML&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;`
&amp;lt;li class=&quot;list__item&quot;&amp;gt;List item one&amp;lt;/li&amp;gt;
&amp;lt;li class=&quot;list__item&quot;&amp;gt;List item two&amp;lt;/li&amp;gt;
`&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;В этом конкретном примере, разница в производительности между методами незначительная. Однако, с ростом объёмов страницы, становится более важным выбирать и обновлять только то, что нужно&lt;/p&gt;

&lt;h2 id=&quot;-но-ведь-был-virtual-dom&quot;&gt;… Но ведь был Virtual DOM!&lt;/h2&gt;

&lt;p&gt;Virtual DOM был придуман, для того чтобы решить эти проблемы частых запросов к разметке, с уклоном в перформанс. В отличие от DOM или того же Shadow DOM, виртуальный DOM не является официальной спецификацией, а, скорее просто новый общепринятый способ работы с DOM.&lt;/p&gt;

&lt;p&gt;Виртуальный DOM можно считать копией обычного DOM. Над этой копией можно работать сколько угодно часто, не используя при этом тяжелые вызовы методов оригинального DOM. Как только все необходимые изменения будут сделаны в рамках виртуального DOM, мы увидим какие конкретные изменения должны пойти в оригинальный DOM, и сделаем это направленным и оптимизированным способом.&lt;/p&gt;

&lt;h2 id=&quot;как-выглядит-virtual-dom&quot;&gt;Как выглядит Virtual DOM?&lt;/h2&gt;
&lt;p&gt;Имя «виртуальный DOM” только добавляет мистики на то, что происходит на самом деле. По факту виртуальный дом это обычный javascript объект.&lt;/p&gt;

&lt;p&gt;Предлагаю вернуться к DOM дереву, которое мы рассматривали ранее:&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;html
    &lt;ul&gt;
      &lt;li&gt;head lang=”en”&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;body
    &lt;ul&gt;
      &lt;li&gt;ul class=”list”
        &lt;ul&gt;
          &lt;li&gt;li class=”list__item”
            &lt;ul&gt;
              &lt;li&gt;“List item”&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Это же дерево может быть представлено в виде javascript объекта:&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;vdom&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;tagName&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;html&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;tagName&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;head&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;tagName&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;body&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;
                &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
                    &lt;span class=&quot;na&quot;&gt;tagName&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;ul&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
                    &lt;span class=&quot;na&quot;&gt;attributes&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;list&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
                    &lt;span class=&quot;na&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;
                        &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
                            &lt;span class=&quot;na&quot;&gt;tagName&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
                            &lt;span class=&quot;na&quot;&gt;attributes&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;list__item&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
                            &lt;span class=&quot;na&quot;&gt;textContent&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;List item&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;
                        &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;c1&quot;&gt;// end li&lt;/span&gt;
                    &lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
                &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;c1&quot;&gt;// end ul&lt;/span&gt;
            &lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;c1&quot;&gt;// end body&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;c1&quot;&gt;// end html&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Представим что данный объект это наше виртуальное DOM-дерево. Как и оригинальный DOM, это не более чем объектное представление нашего HTML документа. Но, из-за того, что это простой  отдельный javascript объект, мы можем свободно и часто менять его свойства, не затрагивая настоящий актуальный DOM, до тех пор, пока нам это не понадобится.&lt;/p&gt;

&lt;p&gt;Так же, вместо того чтобы работать с объектом целиком, чаще принято работать с малыми секциями виртуального DOM. Например мы можем создать виртуальный элемент списка, который потом «спроецируется» на реальный неупорядоченный список находящийся внутри DOM страницы.&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;list&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;tagName&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;ul&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;attributes&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;list&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;tagName&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;attributes&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;list__item&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;textContent&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;List item&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;под-капотом-виртуального-dom&quot;&gt;Под капотом виртуального DOM&lt;/h2&gt;

&lt;p&gt;Теперь, когда мы видели как выглядит Virtual DOM, резонно задать вопрос:, как это может решить проблемы перфоманса и доступа к содержимому страницы?&lt;/p&gt;

&lt;p&gt;Как уже упоминалось ранее, с помощью virtual DOM мы можем выделить конкретные изменения которые мы хотим внести в DOM. Давайте вернемся к нашему примеру с неупорядоченным списком и внесем те же изменения с помощью DOM API.&lt;/p&gt;

&lt;p&gt;Первое что необходимо, это создать копию виртуального DOM, содержащую изменения которые мы хотим сделать. Пока нам не нужно использовать DOM API, мы можем просто создать новый javascript объект.&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;copy&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;tagName&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;ul&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;attributes&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;list&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;tagName&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;attributes&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;list__item&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;textContent&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;List item one&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;tagName&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;attributes&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;list__item&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;textContent&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;List item two&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Этот объект используется для создания, так называемого, «дифа»(“diff”) - разницы между настоящим виртуальным DOM, в нашем случае списком (&amp;lt;ul&amp;gt;) и нашим объектом с новыми данными. «Дифы» могут выглядеть примерно так:&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;diffs&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;newNode&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;cm&quot;&gt;/* new version of list item one */&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;oldNode&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;cm&quot;&gt;/* original version of list item one */&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;index&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;cm&quot;&gt;/* index of element in parent's list of child nodes */&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;newNode&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;cm&quot;&gt;/* list item two */&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;index&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;cm&quot;&gt;/* */&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Этот массив содержит инструкции («дифы») того, как нужно обновить актуальный DOM. Как только все эти «дифы» будут собраны мы сможем «влить» все изменения в оригинальный DOM, делая только те изменения, которые нам нужны.&lt;/p&gt;

&lt;p&gt;Например, мы можем пройтись циклом через все «дифы» и, в зависимости от указанных данных, добавить новый  элемент или обновить уже имеющийся.&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;domElement&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;getElementsByClassName&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;list&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;];&lt;/span&gt;

&lt;span class=&quot;nx&quot;&gt;diffs&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;forEach&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;((&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;diff&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;

    &lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;newElement&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createElement&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;diff&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;newNode&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;tagName&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
    &lt;span class=&quot;cm&quot;&gt;/* Add attributes ... */&lt;/span&gt;
    
    &lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;diff&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;oldNode&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;c1&quot;&gt;// If there is an old version, replace it with the new version&lt;/span&gt;
        &lt;span class=&quot;nx&quot;&gt;domElement&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;replaceChild&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;diff&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;newNode&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;diff&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;index&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;else&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;c1&quot;&gt;// If no old version exists, create a new node&lt;/span&gt;
        &lt;span class=&quot;nx&quot;&gt;domElement&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;appendChild&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;diff&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;newNode&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Важно понимать, что  это всего лишь упрощенный, обрезанный пример того, как можно использовать виртуальный DOM, причем, существует множество вариантов которые мы здесь не затрагиваем.&lt;/p&gt;

&lt;h2 id=&quot;виртуальный-dom-и-фреймворки&quot;&gt;Виртуальный DOM и фреймворки&lt;/h2&gt;

&lt;p&gt;Чаще с virtual DOM работают через какой-нибудь фреймворк, вместо того чтобы работать с ним в ручную - как в примере выше.&lt;/p&gt;

&lt;p&gt;Такие фреймворки как React или Vue используют внутри себя концепцию виртуального DOM, для оптимизации скорости работы с подлинным DOM страницы. Для примера, наш компонент списка мог бы быть реализован с React таким способом:&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;react&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;ReactDOM&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;react-dom&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;list&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createElement&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;ul&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;list&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
    &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createElement&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;list__item&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;List item&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;

&lt;span class=&quot;nx&quot;&gt;ReactDOM&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;list&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;body&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Если бы мы захотели обновить наш лист, мы могли бы всего-лишь переписать сам темплейт и, затем, вызвать &lt;code class=&quot;highlighter-rouge&quot;&gt;ReactDOM.render()&lt;/code&gt; снова, передав новый лист.&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;newList&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createElement&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;ul&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;list&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
    &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createElement&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;list__item&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;List item one&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;),&lt;/span&gt;
    &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createElement&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;list__item&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;List item two&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;

&lt;span class=&quot;nx&quot;&gt;setTimeout&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(()&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;ReactDOM&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;newList&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;body&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;),&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;5000&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Из-за того, что React использует виртуальный DOM, даже в случае если мы переписываем весь темплейт, применятся только те части которые были измененны. Если мы заглянем в dev-tools, в тот момент, когда происходят изменения — мы увидим конкретный элемент и его части которые были подвержены изменениям.&lt;/p&gt;

&lt;h2 id=&quot;dom-против-виртуального-dom&quot;&gt;DOM против виртуального DOM&lt;/h2&gt;
&lt;p&gt;Подводя итоги: виртуальный DOM это просто инструмент который позволяет нам взаимодействовать с DOM страницы более простым и производительным способом. Это, по сути, простой Javascript объект копирующий оригинальный DOM, но, который мы можем изменять как угодно, столько раз сколько потребуется.&lt;/p&gt;

&lt;p&gt;Изменения сделанные в этом объекте сопоставляются с оригинальным DOM, и происходит изменение только конкретных его элементов, что значительно снижает общее количество обращений к оригинальному DOM.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Данный текст это мой вольный перевод оригинальной статьи &lt;a href=&quot;https://ireaderinokun.com&quot;&gt;Ire Aderinokun&lt;/a&gt; - &lt;a href=&quot;https://bitsofco.de/understanding-the-virtual-dom/&quot;&gt;Understanding the Virtual DOM&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;</content><author><name></name></author><category term="translation" /><summary type="html">В прошлом месяце я опубликовал статьи на темы: что такое DOM, и Shadow DOM и чем они отличаются. Чтобы немного вспомнить, повторим основные понятия. «Объектная Модель Документа» (DOM) - это представление HTML кода страницы в виде Javascript объекта и интерфейс для изменения параметров этого объекта. Shadow DOM можно рассматривать как облегченную (малую) версию DOM. Это тоже объектное представление элементов на странице, но не всей страницы сразу а, изолированные кусочки верстки со своими стилями, что позволяет разбить наш документ на меньшие автономные части, которые можно легко переиспользовать на других страницах сайта (приложения).</summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://handleman.github.io/assets/images/articles/virtual_dom.jpg" /><media:content medium="image" url="https://handleman.github.io/assets/images/articles/virtual_dom.jpg" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry><title type="html">Перевод: Что такое Shadow DOM</title><link href="https://handleman.github.io/translation/2019/01/22/shadow-dom.html" rel="alternate" type="text/html" title="Перевод: Что такое Shadow DOM" /><published>2019-01-22T13:35:00+03:00</published><updated>2019-01-22T13:35:00+03:00</updated><id>https://handleman.github.io/translation/2019/01/22/shadow-dom</id><content type="html" xml:base="https://handleman.github.io/translation/2019/01/22/shadow-dom.html">&lt;p&gt;Пару недель назад был опубликован пост про то, &lt;a href=&quot;https://handleman.github.io/translation/2019/01/11/dom.html&quot;&gt;что из себя представляет DOM&lt;/a&gt;. Чтобы освежить понятие в памяти, DOM (Объектное представление документа) это представление HTML кода в виде объекта, который используется браузером для определения того, что должно быть отрисовано в окне. Так же DOM используется в JavaScript для редактирования контента и структуры страницы, а так же для стилизации элементов.&lt;/p&gt;

&lt;p&gt;Для примера рассмотрим следующий документ:&lt;/p&gt;

&lt;div class=&quot;language-html highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;cp&quot;&gt;&amp;lt;!doctype html&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;html&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;lang=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;en&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
 &lt;span class=&quot;nt&quot;&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
 &lt;span class=&quot;nt&quot;&gt;&amp;lt;title&amp;gt;&lt;/span&gt;My first web page&lt;span class=&quot;nt&quot;&gt;&amp;lt;/title&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;nt&quot;&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;
 &lt;span class=&quot;nt&quot;&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;Hello, world!&lt;span class=&quot;nt&quot;&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;p&amp;gt;&lt;/span&gt;How are you?&lt;span class=&quot;nt&quot;&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
 &lt;span class=&quot;nt&quot;&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Этот HTMl, может быть представлен как дерево:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;html
    &lt;ul&gt;
      &lt;li&gt;head
        &lt;ul&gt;
          &lt;li&gt;title
            &lt;ul&gt;
              &lt;li&gt;My first web page&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;body
    &lt;ul&gt;
      &lt;li&gt;h1
        &lt;ul&gt;
          &lt;li&gt;Hello, world!&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;p
        &lt;ul&gt;
          &lt;li&gt;How are you?&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;На протяжении последних лет, вы наверное слышали такие термины как: &lt;strong&gt;“Shadow DOM”&lt;/strong&gt; и &lt;strong&gt;“Virtual DOM”&lt;/strong&gt;. Они, конечно же имея отношение к оригинальному DOM, но представляют собой очень разные концепции. В этой статье мы рассмотрим что такое Shadow DOM на самом деле, и чем он отличается от обычного DOM-дерева. В следующей статье я сделаю так же, но уже про Virtual DOM.&lt;/p&gt;

&lt;h2 id=&quot;все-находится-в-глобальной-области-видимости--постойте-а-ведь-все-находится-в-глобальной-области-видимости-&quot;&gt;Все находится в глобальной области видимости 👍🏾! Постойте, а ведь все находится в глобальной области видимости 👎🏾&lt;/h2&gt;

&lt;p&gt;Все элементы и стили внутри HTML-странницы располагаются в одной, глобальной области видимости. К Любому элементу на странице можно получить доступ через метод &lt;code class=&quot;highlighter-rouge&quot;&gt;document.querySelector()&lt;/code&gt;, независимо от его расположения уровня вложенности внутри HTML-страницы. Похожим образом, CSS, на странице имеет доступ к любому элементу и не важно где он находится на странице.&lt;/p&gt;

&lt;p&gt;Подобное поведение может действительно сыграть нам на руку, если мы хотим применить стили ко всей странице целиком. Это невероятно полезно иметь возможность выбрать каждый элемент на странице и изменить конкретное стилевое свойство, например &lt;code class=&quot;highlighter-rouge&quot;&gt;box-sizing&lt;/code&gt;, сразу для всех одинаковых элементов, с помощью всего одной строки.&lt;/p&gt;

&lt;p&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;* { box-sizing: border-box }&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Однако, бывают случаи когда нам нужно изолировать компонент на странице, и мы не хотели бы чтобы он мог быть изменен извне глобальными стилями. Хороший пример такого случая это сторонний встраиваемый виджет, кнопка “follow me” в твиттере.&lt;/p&gt;

&lt;p&gt;Представим как можно ее реализовать:&lt;/p&gt;

&lt;p&gt;Предположим, вы инспектируете этот элемент в браузере, вы можете заметить что кнопка это &lt;code class=&quot;highlighter-rouge&quot;&gt;&amp;lt;iframe&amp;gt;&lt;/code&gt;, который грузит небольшой HTML документ, со стилизованной кнопкой которую вы и видите на странице.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://bitsofco.de/content/images/2018/12/Follow-button-widget-iframe.png&quot; alt=&quot;twitter button inside iframe&quot; title=&quot;twitter button inside iframe&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Это единственный способ, для твиттера, обезопасить себя от конфликта стилей кнопки и документа, на котором она может быть расположена. Хотя и есть возможность, добиться схожих результатов с помощью каскада, нет более надежного способа изоляции чем простой &lt;code class=&quot;highlighter-rouge&quot;&gt;&amp;lt;iframe&amp;gt;&lt;/code&gt;, но и этот способ не идеален.&lt;/p&gt;

&lt;p&gt;Shadow DOM, был сделан для того, чтобы разрешить разработчикам делать инкапсуляцию (изоляцию данных) и работать следуя компонентному подходу нативно, без вынужденного доверия сторонним элементам, таким как &lt;code class=&quot;highlighter-rouge&quot;&gt;&amp;lt;iframe&amp;gt;&lt;/code&gt;, который, к слову, был придуман для совершенно других целей.&lt;/p&gt;

&lt;h2 id=&quot;dom-внутри-dom&quot;&gt;DOM внутри DOM&lt;/h2&gt;

&lt;p&gt;Вы можете считать что Shadow DOM это&lt;br /&gt;
«DOM внутри другого DOM». Это самостоятельное DOM-дерево, со своими собственными элементами и стилями, полностью изолированное от внешнего содержимого страницы.&lt;/p&gt;

&lt;p&gt;Несмотря на то, что технология получила свое распространите относительно недавно, shadow DOM использовался браузерами годами для стилизации сложных интерфейсных элементов, таких как формы и их элементы. Возьмем для примера элемент типа Range (ползунок). Для его создания, все что, то нам нужно сделать это добавить следующий элемент:
&lt;code class=&quot;highlighter-rouge&quot;&gt;&amp;lt;input type=&quot;range&quot;&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Этот единственный элемент становится следующим компонентом:&lt;/p&gt;

&lt;p&gt;&lt;input type=&quot;range&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Если мы копнем глубже, то увидим, что этот &lt;code class=&quot;highlighter-rouge&quot;&gt;&amp;lt;input&amp;gt;&lt;/code&gt; элемент состоит из нескольких более мелких &lt;code class=&quot;highlighter-rouge&quot;&gt;&amp;lt;div&amp;gt;&lt;/code&gt; элементов, контролирующих поведение трека и ручки ползунка (слайдера).&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://bitsofco.de/content/images/2018/12/Range-input-shadow-dom.png&quot; alt=&quot;input type range structure&quot; title=&quot;input type range structure&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Такой компонент, сделан с помощью shadow DOM. Этот элемент отображается в коде как простой &lt;code class=&quot;highlighter-rouge&quot;&gt;&amp;lt;input&amp;gt;&lt;/code&gt;, за которым, на самом деле располагаются другие элементы и стили связанные с ним, но не являющееся частью глобального DOM.&lt;/p&gt;

&lt;h2 id=&quot;как-работает-shadow-dom&quot;&gt;Как работает Shadow DOM&lt;/h2&gt;

&lt;p&gt;Для иллюстрации того, как работает Shadow DOM, давайте воссоздадим кнопку “follow me” для Twitter, но уже не используя &lt;code class=&quot;highlighter-rouge&quot;&gt;&amp;lt;iframe&amp;gt;&lt;/code&gt;.
Прежде всего надо начать с элемента, в котором будет располагаться Shadow DOM элемент. Это будет обычный HTML элемент, в составе общего DOM, в который мы добавим наш Shadow DOM элемент. Такой компонент как кнопка “follow me”, может содержать fallback элемент показываемый в случае если отключен javascript или же браузер не поддерживает Shadow DOM.&lt;/p&gt;

&lt;div class=&quot;language-html highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nt&quot;&gt;&amp;lt;span&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;class=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;shadow-host&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;nt&quot;&gt;&amp;lt;a&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;href=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;https://twitter.com/ireaderinokun&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
     Follow @ireaderinokun
  &lt;span class=&quot;nt&quot;&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/span&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Обратите внимание, что мы не использовали элемент &lt;code class=&quot;highlighter-rouge&quot;&gt;&amp;lt;a&amp;gt;&lt;/code&gt; сразу как хост для нашего Shadow DOM, потому что некоторые элементы, в основном интерактивные, не могут быть хостами для shadow DOM элементов.&lt;/p&gt;

&lt;p&gt;Для добавления Shadow DOM в хост элемент, мы должны использовать метод &lt;code class=&quot;highlighter-rouge&quot;&gt;attachShadow()&lt;/code&gt;.&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;shadowEl&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;.shadow-host&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;shadow&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;shadowEl&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;attachShadow&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;mode&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;open&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Эти инструкции создадут пустой корневой Shadow элемент (&lt;strong&gt;Shadow root&lt;/strong&gt;). Shadow root это стартовая точка для новых элементов Shadow DOM, в таком же отношении как &lt;code class=&quot;highlighter-rouge&quot;&gt;&lt;span class=&quot;nt&quot;&gt;&amp;lt;html&amp;gt;&lt;/span&gt;&lt;/code&gt; является стартовой точкой для всех HTML элементов страницы в целом. Мы можем видеть наш Shadow root элемент как &lt;strong&gt;#shadow-root&lt;/strong&gt; в инспекторе объектов DevTools.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://bitsofco.de/content/images/2018/12/Empty--shadow-root.png&quot; alt=&quot;shadow DOM root element&quot; title=&quot;shadow DOM root element&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Хотя изначальное содержимое Shadow Host - простые HTML элементы, мы можем увидеть в веб-инспекторе, в браузере уже будет отображаться новое содержимое из Shadow DOM.&lt;/p&gt;

&lt;p&gt;Следующее что мы должны сделать, это заполнить содержимым новое дерево (Shadow tree). Shadow tree это то же самое что и DOM tree, только для Shadow DOM вместо обычного DOM на странице. Теперь же, для того, чтобы создать кнопку follow, все что нам нужно это добавить к Shadow DOM &lt;code class=&quot;highlighter-rouge&quot;&gt;&amp;lt;a&amp;gt;&lt;/code&gt; элемент, точно такой же как созданный ранее, только с иконкой внутри.&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;link&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createElement&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;link&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;href&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;shadowEl&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;).&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;link&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;innerHTML&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;`
    &amp;lt;span aria-label=&quot;Twitter icon&quot;&amp;gt;&amp;lt;/span&amp;gt; 
    &lt;/span&gt;&lt;span class=&quot;p&quot;&gt;${&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;shadowEl&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;).&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;textContent&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;
`&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Мы добавляем этот новый элемент к shadow DOM точно так же как, как мы добавляем любой другой дочерний по отношению к родительскому элементу на странице через метод &lt;code class=&quot;highlighter-rouge&quot;&gt;appendChild()&lt;/code&gt;.&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nx&quot;&gt;shadow&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;appendChild&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;link&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;На текущем этапе наш элемент выглядит так:&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://bitsofco.de/content/images/2018/12/Plain-text-of--22Follow-@ireaderinokun-22.png&quot; alt=&quot;twitter button&quot; title=&quot;twitter button&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Наконец, мы можем добавить стили, если создадим &lt;code class=&quot;highlighter-rouge&quot;&gt;&amp;lt;style&amp;gt;&lt;/code&gt; тег и так же добавим его к shadow root, как и остальные элементы.&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;styles&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createElement&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;style&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;styles&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;textContent&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;`
a, span {
  vertical-align: top;
  display: inline-block;
  box-sizing: border-box;
}

a {
    height: 20px;
    padding: 1px 8px 1px 6px;
    background-color: #1b95e0;
    color: #fff;
    border-radius: 3px;
    font-weight: 500;
    font-size: 11px;
    font-family:'Helvetica Neue', Arial, sans-serif;
    line-height: 18px;
    text-decoration: none;   
}

a:hover {  background-color: #0c7abf; }

span {
    position: relative;
    top: 2px;
    width: 14px;
    height: 14px;
    margin-right: 3px;
    background: transparent 0 0 no-repeat;
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h72v72H0z%22%2F%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%23fff%22%20d%3D%22M68.812%2015.14c-2.348%201.04-4.87%201.744-7.52%202.06%202.704-1.62%204.78-4.186%205.757-7.243-2.53%201.5-5.33%202.592-8.314%203.176C56.35%2010.59%2052.948%209%2049.182%209c-7.23%200-13.092%205.86-13.092%2013.093%200%201.026.118%202.02.338%202.98C25.543%2024.527%2015.9%2019.318%209.44%2011.396c-1.125%201.936-1.77%204.184-1.77%206.58%200%204.543%202.312%208.552%205.824%2010.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163%200%206.345%204.513%2011.638%2010.504%2012.84-1.1.298-2.256.457-3.45.457-.845%200-1.666-.078-2.464-.23%201.667%205.2%206.5%208.985%2012.23%209.09-4.482%203.51-10.13%205.605-16.26%205.605-1.055%200-2.096-.06-3.122-.184%205.794%203.717%2012.676%205.882%2020.067%205.882%2024.083%200%2037.25-19.95%2037.25-37.25%200-.565-.013-1.133-.038-1.693%202.558-1.847%204.778-4.15%206.532-6.774z%22%2F%3E%3C%2Fsvg%3E);
}
`&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;nx&quot;&gt;shadow&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;appendChild&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;styles&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;dom-против-shadow-dom&quot;&gt;DOM против Shadow DOM&lt;/h2&gt;

&lt;p&gt;В некотором отношении, Shadow DOM это облегченная версия обычного DOM. Так же как и DOM, это объектное представление HTML элементов на странице, помогающее определить что будет отрисовано в конце и дающее возможность разработчику модифицировать элементы на странице. НО, в отличие от DOM, не базируется на целом самостоятельном документе. Shadow DOM, как видно из имени, всегда базируется на уже имеющемся в основном DOM готовом элементе. Без основного родительского DOM, Shadow DOM, не существует.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Данный текст это мой вольный перевод оригинальной статьи &lt;a href=&quot;https://ireaderinokun.com&quot;&gt;Ire Aderinokun&lt;/a&gt; - &lt;a href=&quot;https://bitsofco.de/what-is-the-shadow-dom/&quot;&gt;What is the Shadow DOM?&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;</content><author><name></name></author><category term="translation" /><summary type="html">Пару недель назад был опубликован пост про то, что из себя представляет DOM. Чтобы освежить понятие в памяти, DOM (Объектное представление документа) это представление HTML кода в виде объекта, который используется браузером для определения того, что должно быть отрисовано в окне. Так же DOM используется в JavaScript для редактирования контента и структуры страницы, а так же для стилизации элементов.</summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://handleman.github.io/assets/images/articles/shadow_dom.jpg" /><media:content medium="image" url="https://handleman.github.io/assets/images/articles/shadow_dom.jpg" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry><title type="html">Перевод: Что такое DOM дерево</title><link href="https://handleman.github.io/translation/2019/01/11/dom.html" rel="alternate" type="text/html" title="Перевод: Что такое DOM дерево" /><published>2019-01-11T13:35:00+03:00</published><updated>2019-01-11T13:35:00+03:00</updated><id>https://handleman.github.io/translation/2019/01/11/dom</id><content type="html" xml:base="https://handleman.github.io/translation/2019/01/11/dom.html">&lt;p&gt;«Объектная модель документа» по другому «DOM-дерево» это не что иное, как интерфейс доступа к веб-странице. И основная задача этого интерфейса - обеспечить возможность для редактирования контента и манипуляции со структурой и стилями документа.
Давайте разберем понятие по порядку.&lt;/p&gt;

&lt;h2 id=&quot;как-строится-веб-страница-в-браузере&quot;&gt;Как строится веб-страница в браузере&lt;/h2&gt;

&lt;p&gt;Процесс при котором браузер получив исходный код выводит интерактивную и стилизованную страницу в окно браузера называется «Критический путь рендера» (“Critical Rendering Path”). Хотя этот процесс, сам по себе, состоит из множества шагов, мы можем условно выделить два этапа. Первый этап заключается в том что браузер парсит исходный код, чтобы выяснить что конкретно должно быть прорисовано на странице, а второй этап это уже сам рендер.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://bitsofco.de/content/images/2018/11/HTML-to-Render-Tree-to-Final.png&quot; alt=&quot;HTML-to-Render-Tree-to-Final&quot; title=&quot;Critical Rendering Path&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Результат выполнения первого этапа это так называемое «рендер-дерево». Рендер-дерево это представление HTML элементов, которое должны быть отрисованы вместе со связанными с ними стилями. Для того чтобы построить такое дерево браузеру нужно две вещи:&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;CSSOM - Представление стилей связанных с элементами на странице.&lt;/li&gt;
  &lt;li&gt;DOM - Объектное представление HTML элементов на странице.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2 id=&quot;как-создается-dom-и-как-он-выглядит&quot;&gt;Как создается DOM (и как он выглядит)&lt;/h2&gt;

&lt;p&gt;DOM, как уже было сказано, это объектное представление кода HTML документа, т.е другими словами объект свойства которого это имена тегов HTML с учетом вложенности и дополнительной информации - такой как: атрибуты тегов, текстовое содержимое и т.д. Однако, есть некоторые отличия, которые мы рассмотрим ниже, но, в целом, все они связаны с попыткой конвертированного в объект HTML соответствовать нуждам программ которые его используют.&lt;/p&gt;

&lt;p&gt;Структурно DOM принимает вид упорядоченного дерева, потому как оно представлено в виде единственного родительского элемента от которого ответвляются все остальные “ветви”, каждая их которых имеет свои дочерние элементы “листья дерева”. В нашем случае главный родительский элемент это тег &lt;strong&gt;&amp;lt;html&amp;gt;&lt;/strong&gt;, дочерние ответвления это другие вложенные теги и элементы HTML документа, а завершают цепочку листья - контент внутри тегов.&lt;/p&gt;

&lt;p&gt;Давайте рассмотрим следующий пример:&lt;/p&gt;

&lt;div class=&quot;language-html highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;cp&quot;&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;html&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;lang=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;en&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;nt&quot;&gt;&amp;lt;title&amp;gt;&lt;/span&gt;My first web page&lt;span class=&quot;nt&quot;&gt;&amp;lt;/title&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;nt&quot;&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;Hello, world!&lt;span class=&quot;nt&quot;&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;nt&quot;&gt;&amp;lt;p&amp;gt;&lt;/span&gt;How are you?&lt;span class=&quot;nt&quot;&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;этот HTML документ может быть представлен в виде следующего дерева:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;html
    &lt;ul&gt;
      &lt;li&gt;head
        &lt;ul&gt;
          &lt;li&gt;title
            &lt;ul&gt;
              &lt;li&gt;My first web page&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;body
    &lt;ul&gt;
      &lt;li&gt;h1
        &lt;ul&gt;
          &lt;li&gt;Hello, world!&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;p
        &lt;ul&gt;
          &lt;li&gt;How are you?&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;h2 id=&quot;чем-dom-не-является&quot;&gt;Чем DOM НЕ является&lt;/h2&gt;

&lt;p&gt;Из примера выше, может показаться что DOM это точное (1 к 1) отображение исходного кода, который вы можете наблюдать в вашем devTools. Однако, как я отмечал ранее, тут есть отличия. Чтобы полностью понять что такое DOM-дерево. Мы должны рассмотреть чем оно НЕ является.&lt;/p&gt;

&lt;h3 id=&quot;dom-это-не-ваш-исходный-код&quot;&gt;DOM это не ваш исходный код&lt;/h3&gt;

&lt;p&gt;Несмотря на то, что DOM строится по исходному коду HTML документа, не всегда это одно и то же. Есть два случая, в которых DOM может отличаться от исходного HTML:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Когда HTML не валидный.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;DOM это интерфейс к валидному HTML документу. Во время его создания, браузер может откорректировать некоторые невалидные элементы.&lt;/p&gt;

&lt;p&gt;Для примера рассмотрим следующий документ:&lt;/p&gt;

&lt;div class=&quot;language-html highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;cp&quot;&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;html&amp;gt;&lt;/span&gt;
    Hello, world!
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;В документе отсутствуют &amp;lt;head&amp;gt; и &amp;lt;body&amp;gt;, которые нужны для того чтобы документ был валидным. Но, если мы взглянем на DOM дерево, полученное в результате, мы увидим что это было исправлено:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;html
    &lt;ul&gt;
      &lt;li&gt;head&lt;/li&gt;
      &lt;li&gt;body
        &lt;ul&gt;
          &lt;li&gt;Hello, world!&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;2. Когда DOM изменяется через javascript.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Вместе с тем, что это интерфейс для отображения HTML документа, DOM также может быть модифицирован, тем самым превратившись в динамический ресурс.&lt;/p&gt;

&lt;p&gt;К примеру, мы можем добавлять новые вершины в DOM дерево&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;newParagraph&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createElement&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;p&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;paragraphContent&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createTextNode&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;I'm new!&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;newParagraph&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;appendChild&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;paragraphContent&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;body&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;appendChild&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;newParagraph&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Эта инструкция обновит наше DOM-дерево, но, исходный HTML код конечно же не изменится.&lt;/p&gt;

&lt;h3 id=&quot;dom-это-не-то-что-вы-видите-в-браузере-те-это-не-render-tree&quot;&gt;DOM это не то что вы видите в браузере (т.е это не render-tree)&lt;/h3&gt;

&lt;p&gt;То что вы видите в окне браузера, это рендер-дерево (render-tree), которое, как упоминалось ранее это комбинация DOM и CSSOM. Главное отличие DOM от Render-tree в том, что последнее содержит в себе именно то, и только то, что будет отрисовано на экране.&lt;/p&gt;

&lt;p&gt;Из-за того, что Render-tree заинтересовано только в том что должно быть отрисовано, оно не содержит элементов, которые визуально скрыты от пользователей.&lt;/p&gt;

&lt;p&gt;Например это могут быть все элементы, для которых выставлен ‘display:none’ в CSS стилях.&lt;/p&gt;

&lt;div class=&quot;language-html highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;cp&quot;&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;html&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;lang=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;en&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;head&amp;gt;&amp;lt;/head&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;nt&quot;&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;Hello, world!&lt;span class=&quot;nt&quot;&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;nt&quot;&gt;&amp;lt;p&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;style=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;display: none;&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;How are you?&lt;span class=&quot;nt&quot;&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;В примере выше, DOM будет содержать элемент &amp;lt;p&amp;gt;:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;html
    &lt;ul&gt;
      &lt;li&gt;head&lt;/li&gt;
      &lt;li&gt;body
        &lt;ul&gt;
          &lt;li&gt;h1&lt;/li&gt;
          &lt;li&gt;p&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;При этом Render-tree, а значит и то что будет отображено в окне браузера - этого элемента не содержит и будет выглядеть так:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;html
    &lt;ul&gt;
      &lt;li&gt;body
        &lt;ul&gt;
          &lt;li&gt;h1&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;DOM это не то же самое что находится в DevTools.&lt;/p&gt;

&lt;p&gt;Разница тут не очевидна, т.к инспектор элементов в DevTools показывает максимально приближенную к DOM версию дерева. Однако, инспектор в DevTools включает в себя дополнительную информацию которой нет в DOM.&lt;/p&gt;

&lt;p&gt;Лучший пример такой информации это псевдо-элементы. Псевдо-элементы создаются с помощью селекторов &lt;code class=&quot;highlighter-rouge&quot;&gt;::after&lt;/code&gt; и &lt;code class=&quot;highlighter-rouge&quot;&gt;::before&lt;/code&gt; берутся из CSSOM как части готового Render-tree, но, при этом, технически не являются частью DOM. Это потому, что DOM построен по HTML документу, не включая стили применяемые к элементу.&lt;/p&gt;

&lt;p&gt;Несмотря на то, что псевдо-элементы не являются частью DOM-дерева, они все равно присутствуют в нашем инспекторе элементов devTools.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://bitsofco.de/content/images/2018/11/Pseudo-element-in-devtools-inspector.png&quot; alt=&quot;Pseudo-element-in-devtools-inspector&quot; title=&quot;Псевдо-элементы в инспекторе кода  Chrome DevTools&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Именно поэтому псевдо-элементы “не видны” из javascript, потому что они не являются частью DOM-дерева.&lt;/p&gt;

&lt;h2 id=&quot;вывод&quot;&gt;Вывод&lt;/h2&gt;

&lt;p&gt;DOM-дерево это интерфейс к HTML-документу. Оно используется браузерами на первом шаге процесса рендера страницы, для определения того что необходимо отрисовать, и, программами на javascript - для модификации содержимого, структуры или же для стилизации контента страницы.&lt;/p&gt;

&lt;p&gt;Несмотря на сходства с остальными формами исходного HTML-кода, DOM имеет ряд отличий:&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;Это всегда только валидный HTML&lt;/li&gt;
  &lt;li&gt;Это живая модель которая может быть изменена с помощью javascript&lt;/li&gt;
  &lt;li&gt;Не содержит псевдоэлементов (::before, ::after и т.д.)&lt;/li&gt;
  &lt;li&gt;Не содержит скрытых элементов (display:none; и т.д.)&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Данный текст это мой вольный перевод оригинальной статьи &lt;a href=&quot;https://ireaderinokun.com&quot;&gt;Ire Aderinokun&lt;/a&gt; - &lt;a href=&quot;https://bitsofco.de/what-exactly-is-the-dom/&quot;&gt;What, exactly, is the DOM?&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;</content><author><name></name></author><category term="translation" /><summary type="html">«Объектная модель документа» по другому «DOM-дерево» это не что иное, как интерфейс доступа к веб-странице. И основная задача этого интерфейса - обеспечить возможность для редактирования контента и манипуляции со структурой и стилями документа. Давайте разберем понятие по порядку.</summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://handleman.github.io/assets/images/articles/dom_tree.png" /><media:content medium="image" url="https://handleman.github.io/assets/images/articles/dom_tree.png" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry><title type="html">Разработка: Набор полезных сниппетов №2</title><link href="https://handleman.github.io/webdev/2018/12/09/snippets-2.html" rel="alternate" type="text/html" title="Разработка: Набор полезных сниппетов №2" /><published>2018-12-09T10:35:00+03:00</published><updated>2018-12-09T10:35:00+03:00</updated><id>https://handleman.github.io/webdev/2018/12/09/snippets-2</id><content type="html" xml:base="https://handleman.github.io/webdev/2018/12/09/snippets-2.html">&lt;p&gt;Делюсь набором полезных сниппетов кода, накопившихся у меня в процессе работы с прошлой статьи.
На этот раз тут есть все - от bash команд до css: общая черта только то что они так или иначе связаны с веб- разработкой, и у свое время сильно мне помогли.&lt;/p&gt;

&lt;h4 id=&quot;bashunix-как-убить-процесс-занимающий-определенный-порт&quot;&gt;Bash/unix: Как убить процесс занимающий определенный порт.&lt;/h4&gt;
&lt;script src=&quot;https://gist.github.com/handleman/e070241c817ac9e244d3a673cae98c31.js&quot;&gt;&lt;/script&gt;

&lt;h4 id=&quot;javascript-как-запустить-несколько-npm-команд-из-packagejson&quot;&gt;Javascript: Как запустить несколько NPM команд из package.json.&lt;/h4&gt;
&lt;script src=&quot;https://gist.github.com/handleman/9cb2f527c4efa82722cc77ecbe7bfa04.js&quot;&gt;&lt;/script&gt;

&lt;h4 id=&quot;bashunix-вариант-удобного-цветной-bash-формата-для-команды-git-log&quot;&gt;Bash/Unix: Вариант удобного (цветной bash) формата для команды git log.&lt;/h4&gt;
&lt;script src=&quot;https://gist.github.com/handleman/ac2c3e7084e09c8da82c8e0824251a6c.js&quot;&gt;&lt;/script&gt;

&lt;h4 id=&quot;javascript-как-определить-пустой-объект-&quot;&gt;Javascript: Как определить пустой объект. ({})&lt;/h4&gt;
&lt;script src=&quot;https://gist.github.com/handleman/4bf5d36a648d4db41b391f2bc424f52b.js&quot;&gt;&lt;/script&gt;

&lt;h4 id=&quot;javascript-как-узнать-высоту-динамического-dom-элемента&quot;&gt;Javascript: Как узнать высоту динамического DOM элемента.&lt;/h4&gt;
&lt;script src=&quot;https://gist.github.com/handleman/97d9866134fa8aae6e7f11dbbb5f13d8.js&quot;&gt;&lt;/script&gt;

&lt;h4 id=&quot;javascript-как-получить-значение-свойств-вложенного-объекта-любого-уровня-вложенности&quot;&gt;Javascript: Как получить значение свойств вложенного объекта, любого уровня вложенности.&lt;/h4&gt;
&lt;script src=&quot;https://gist.github.com/handleman/8deb5ceaa362e7866bbec4240f34fe50.js&quot;&gt;&lt;/script&gt;

&lt;h4 id=&quot;css-стилизация-формы-в-как-material-design&quot;&gt;Css: Стилизация формы в (как) material design.&lt;/h4&gt;
&lt;script src=&quot;https://gist.github.com/handleman/148c6f57d008fb427084cefe85d72cc3.js&quot;&gt;&lt;/script&gt;

&lt;h4 id=&quot;javascript-как-получить-завтрашнюю-дату-в-javascript&quot;&gt;Javascript: Как получить завтрашнюю дату в javascript.&lt;/h4&gt;
&lt;script src=&quot;https://gist.github.com/handleman/27d0c9242ea6468706dabcbd243b2a76.js&quot;&gt;&lt;/script&gt;

&lt;h4 id=&quot;javascript-как-определить-ie-11-на-фронте-в-браузере&quot;&gt;Javascript: Как определить ie 11 на фронте (в браузере).&lt;/h4&gt;
&lt;script src=&quot;https://gist.github.com/handleman/64dbe44219f1b9837fe8a9103aec0fd9.js&quot;&gt;&lt;/script&gt;

&lt;h4 id=&quot;javascript-как-заставить-браузер--выполнить-сохранить-как-файл-вместо-того-чтобы-открыть-его&quot;&gt;Javascript: Как заставить браузер  выполнить «Сохранить как файл» вместо того чтобы открыть его&lt;/h4&gt;
&lt;script src=&quot;https://gist.github.com/handleman/6ac609c084c735e6738f5d155e29a874.js&quot;&gt;&lt;/script&gt;

&lt;h4 id=&quot;javascript-скруглить-углы-у-бар-чарта-в-c3js&quot;&gt;Javascript: Скруглить углы у бар-чарта в c3.js&lt;/h4&gt;
&lt;script src=&quot;https://gist.github.com/handleman/6ea17874d5ac98e46477a34cad57986d.js&quot;&gt;&lt;/script&gt;</content><author><name></name></author><category term="webdev" /><summary type="html">Делюсь набором полезных сниппетов кода, накопившихся у меня в процессе работы с прошлой статьи. На этот раз тут есть все - от bash команд до css: общая черта только то что они так или иначе связаны с веб- разработкой, и у свое время сильно мне помогли.</summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://handleman.github.io/assets/images/articles/gist/code-snippets.png" /><media:content medium="image" url="https://handleman.github.io/assets/images/articles/gist/code-snippets.png" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry><title type="html">Перевод: сообщение об ошибках это антипаттерн</title><link href="https://handleman.github.io/translation/2016/02/24/perevod-soobshhenie-ob-oshibkax-eto-antipattern.html" rel="alternate" type="text/html" title="Перевод: сообщение об ошибках это антипаттерн" /><published>2016-02-24T13:35:59+03:00</published><updated>2016-02-24T13:35:59+03:00</updated><id>https://handleman.github.io/translation/2016/02/24/perevod-soobshhenie-ob-oshibkax-eto-antipattern</id><content type="html" xml:base="https://handleman.github.io/translation/2016/02/24/perevod-soobshhenie-ob-oshibkax-eto-antipattern.html">&lt;p&gt;Когда вы проектируете интерактивную систему вы неизбежно сталкиваетесь с ограничениями. Например, не всегда достаточно того, чтобы просто добавить новое поле в уже существующую и работающую базу данных; мобильные сети не всегда обладают хорошими скоростями из-за низкой производительности либо высокой загруженности. Обычно команда проектировщиков принимает к сведению подобные ограничения и обсуждает с командой разработки компромиссный вариант того что команда может сделать в текущих условиях.&lt;/p&gt;

&lt;h3&gt;Не надо рассматривать пользователя как источник ошибок&lt;/h3&gt;
&lt;p&gt;Когда вы проектируете интерактивную систему вы неизбежно сталкиваетесь с ограничениями. Например, не всегда достаточно того, чтобы просто добавить новое поле в уже существующую и работающую базу данных; мобильные сети не всегда обладают хорошими скоростями из-за низкой производительности либо высокой загруженности. Обычно команда проектировщиков принимает к сведению подобные ограничения и обсуждает с командой разработки компромиссный вариант того что команда может сделать в текущих условиях.&lt;/p&gt;
&lt;p&gt;Но, если вы UX-профессионал, вы должны стремиться к тому, чтобы строить продукты прежде всего для удобства пользователя. В основе концепции юзер-ориентированного дизайна лежит понятие того, что пользователь это наше самое большое ресурсное ограничение — самый сложный для изменения компонент в нашей системе.&lt;/p&gt;
&lt;p&gt;Мы не должны приучать пользователей пользоваться нашей системой, вместо этого мы должны принимать их такими какие они есть. Поскольку остальная, кроме пользователя, часть системы у нас под полным контролем мы должны обеспечить максимально легкий и комфортный способ знакомства пользователя с системой. Следующие принципы должны служить нам напоминанием о том как следует проектировать системы для людей:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Никогда не запрашиваете у пользователя данные, которые могут быть получены системой автоматически.&lt;/li&gt;
&lt;li&gt;Никогда не заставляйте пользователя придерживаться формата удобного компьютеру на формах ввода, когда можно позволить пользователю вводить данные в человеческом формате, а затем парсить их в нужный системе вид.&lt;/li&gt;
&lt;li&gt;Избегайте указывать пользователю на его ошибки. Вместо этого поработайте над элементами интерфейса, потратьте время и ограничьте их так чтобы пользователь не смог ввести наверное значение. Нельзя обвинять пользователя в том что он не машина.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;предсказание появления ошибок и устойчивый к ошибкам дизайн&lt;/h3&gt;
&lt;p&gt;Немного общей теории:&lt;/p&gt;
&lt;p&gt;В общих чертах, интерактивные системы работают с ошибками следующим образом: после анализа данных переходят в режим ошибок и оповещают пользователя. Чтобы избежать критического эффекта, как, например, падение всей системы, при неверно введенных данных — система оповещает пользователя с помощью сообщения об ошибке.&lt;/p&gt;
&lt;p&gt;В общих чертах задачей устойчивого дизайна является построение надежной системы на основе множества менее надежных компонентов и подсистем. Например, в недрах огромных дата-центров жесткие диски ломаются по постоянно десятки раз в день, но из-за используемых там технологий распределения, эти события не являются опасными для целостности данных. Таким образом, сотрудники дата-центра могут поддерживать систему в полном рабочем состоянии при этом пользователь не заметит никаких проблем или потери своих данных. Подобный принцип построения устойчивых к ошибкам систем позволяет таким сервисам как Google, Facebook, Etsy, Flickr, Yahoo и Amazon работать постоянно и круглосуточно.&lt;/p&gt;
&lt;p&gt;Для Ux Дизайнера это означает что на практике нет универсальной защиты от ошибок. На любом уровне системы, компоненты, средства связи между компонентами да и сами данные могут поломаться. Важно понимать, что пользователь всегда опровергнет наши ожидания. Неважно каких действий мы ожидаем от пользователя — всегда найдется такой пользователь, который найдет новый и непредсказуемый способ использовать ваш продукт. Поэтому никогда не принуждайте пользователя идти одним-единственным путем. Вместо этого сосредоточьтесь на незапланированных возможных действиях пользователя, и способах реакции на них. Поведение пользователя не может быть ошибкой. Принимайте любое пользовательское действие с должным вниманием и реакцией на него.&lt;/p&gt;
&lt;h3&gt;Избегайте излишнего ввода данных&lt;/h3&gt;
&lt;p&gt;Проектирование традиционной простой формы ввода на сайте или веб-приложении — для меня является редкостью. Вместо этого, я использую модель «Немедленной Услужливости», согласно конкретной ситуации.&lt;/p&gt;
&lt;p&gt;Откройте несколько ваших любимых веб-приложений и посмотрите что они делают. Обычно они вам предлагают рекомендуемые варианты выше остальных в списке согласно вашим предпочтениям или частоте их использования. Чаще всего вы можете использовать эту концепцию и в своих разработках. Используйте как можно чаще те данные о пользователе, которые вы можете получить самостоятельно, неважно откуда: из кабинета пользователя, различных Open ID сервисов, анализа слежения за действиями пользователя в системе или же вашего ожидания возможных будущих действий.&lt;/p&gt;
&lt;p&gt;Мобильные гаджеты помогают нам облегчить труд, потому что они находятся постоянно рядом с пользователем где бы он ни находился. Поэтому вы всегда можете использовать данные от сенсоров мобильного устройства, например, геолокация, чтобы вытянуть максимальное количество информации о пользователе. Например, если пользователь ищет данные о погоде в своем регионе, необязательно его спрашивать где он находится, вместо этого вы можете сразу предложить ему данные согласно его текущему положению. см. рис. 1.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot;&gt;&lt;img src=&quot;http://www.uxmatters.com/mt/archives/2015/11/images/Hoober_Errors_Fig1.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
&lt;p style=&quot;font-size: 0.8em; font-weight: bold;&quot;&gt;Рисунок 1 Weather Underground вебсайт во время первого посещения.&lt;/p&gt;
&lt;h3&gt;Автоматическое заполнение полей&lt;/h3&gt;
&lt;p&gt;Если вам нужно запросить простые данные, вы все еще можете пользоваться принципами, изложенными выше. Попробуйте пред-заполнить поля угадывая наиболее вероятные данные, позволив затем пользователю их изменить, в случае если они его не устроят. Например, рассматривая пример выше — может так оказаться что пользователь находится в путешествии и захочет узнать погоду места прибытия вместо текущего.&lt;/p&gt;
&lt;p&gt;Посмотрите еще раз на рисунок 1, и вы заметите, что, несмотря на пред-заполненные данные для текущего местоположения, тут есть большое и заметное поле «Search locations” наверху страницы, так же как и список популярных городов. Таким образом, посетители могут легко поменять их место-назначение на сайте.&lt;/p&gt;
&lt;p&gt;Даже если ваше предположение о данных для того или иного поля не основывается на поведении этого конкретного пользователя, а соответствует наиболее вероятному выбору для любого человека, это предположение зачастую намного лучше чем пустое поле. Некоторые пользователи не захотят вводить ничего, но чаще всего данные, которые вы покажете, послужат отличной контекстной подсказкой, тем самым боле эффективно поможет ввести пользователя в курс дела о принципах работы данной системы, что само по себе намного информативнее чем текст всплывающей подсказки.&lt;/p&gt;
&lt;h3&gt;Ограничение выбора&lt;/h3&gt;
&lt;p&gt;Наиболее часто встречающееся ошибка на веб-формах в интернете это сообщение о том что введенные данных выходят за границы разрешенных значений. Для примера возьмем типичное банковское приложение, которое предупреждает вас о том, что вы можете произвести транзакцию в пределах, скажем, от 20 $ и до $200. После того как вы запросили неверную сумму, программа просит вас вернуться на прежний шаг чтобы повторить транзакцию. Это, конечно, сделано из добрых намерений, но абсолютно не имеет под собой смысла, ведь можно не дать пользователю ввести сумму, выходящую за пределы границ транзакции.&lt;/p&gt;
&lt;p&gt;В общих чертах, вы должны избегать прямого неограниченного ввода значений, а также предоставить взамен возможность выбора из предложенных вариантов. Например, если вы в своем приложении даете возможность оставить напоминание, зачем показывать прошлые даты и выводить ошибку в случае, когда пользователь выбрал прошедшую дату? Вместо этого (см. рис 2) вы можете просто использовать специальный селектор, который позволит выбрать только будущие даты.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot;&gt;&lt;img src=&quot;http://www.uxmatters.com/mt/archives/2015/11/images/Hoober_Errors_Fig2.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
&lt;p style=&quot;font-size: 0.8em; font-weight: bold;&quot;&gt;Рисунок 2 - Селектор мобильного приложения от сайта hotels.com.&lt;/p&gt;
&lt;p&gt;Как вы видите, используется сделанный вручную селектор, который показывает календарь на месяц, но прошлые даты неактивны и не доступны для выбора.&lt;/p&gt;
&lt;p&gt;Всегда думайте внимательно о тех данных, которые будут нужны вашему приложению, после чего выясняйте все вопросы ограничения данных с вашими разработчиками, чтобы избежать больших проблем и потери времени в дальнейшем, после запуска продукта.&lt;/p&gt;
&lt;h3&gt;Используйте поля стандартные для платформы пользователя&lt;/h3&gt;
&lt;p&gt;Часто в приложениях мы можем встретить такие поля, как &amp;lt;selectbox&amp;gt; у которых присутствует набор данных для выбора и возможность прямого ввода одновременно. Такой элемент интерфейса может быть полезен в случае больших объемов данных, когда скролл по множеству вариантов может смутить посетителя и замедлить скорость взаимодействия с ним. Но даже в таком случае можно избежать множества ошибок если просто отказывать пользователю во вводе значений выходящих за границы дозволенных значений. Например, если пользователь ввел значение выходящее за рамки, можно вместо этого значения подставлять максимальное либо минимальное значение из возможных - исходя из близости границы, за которую вышел пользователь.&lt;/p&gt;
&lt;p&gt;Важно осознавать что интерфейс десктопной версии вашего приложения не идеален и непостоянен для различных платформ. Известные стандартные элементы интерфейса такие как выпадающий список и радиопереключатели выглядят абсолютно по-другому на мобильных устройствах, поэтому вы должны быть знакомы со всем разнообразием того как будет выглядеть и функционировать ваш дизайн в различных браузерах на различных платформах.&lt;/p&gt;
&lt;p&gt;Нативные приложения сильно отличаются от веба. Пользователи достаточно быстро знакомятся с особенностями своей мобильной операционной системы и приходят в замешательство когда натыкаются на незнакомую для них парадигму пользовательского интерфейса. Например, iOS не использует в свое работе чекбоксы (checkbox) в стандартном своем виде совсем. Поэтому вы не должны их использовать в своем дизайне для этой ОС. Вместо этого, используйте родные для нее аналоги — уважайте OS.&lt;/p&gt;
&lt;p&gt;Рисунок 3 показывает пример приложения перегруженного различными элементами управления для одного и того же инпута. Несмотря на это, вы видите отличный пример всего разнообразия возможных элементов интерфейса, которые вы можете использовать в своих приложениях вместо простого прямого ввода.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot;&gt;&lt;img src=&quot;http://www.uxmatters.com/mt/archives/2015/11/images/Hoober_Errors_Fig3.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
&lt;p style=&quot;font-size: 0.8em; font-weight: bold;&quot;&gt;Рисунок 3 пример перегруженного интерфейса приложения метронома&lt;/p&gt;
&lt;h3&gt;Пишите хорошие сообщения об ошибках.&lt;/h3&gt;
&lt;p&gt;Честно говоря, я все-таки вывожу иногда текст ошибки пользователю, чтобы показать, что что-то пошло не так. Мы не можем без этого обойтись из-за различного рода ошибок таких как отказ системы, обрыв связи и подобное. Следует понимать, что большинство сообщений об ошибках выводятся не по причине неверного действия пользователя, а в процессе обработки исключений системы. Поэтому я называю их не сообщения об ошибках, а сообщения об исключениях.&lt;/p&gt;
&lt;p&gt;Я вывел несколько правил написания сообщения об исключении:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Делаем сообщение заметным для человека.&lt;/li&gt;
&lt;li&gt;Не создавайте новых препятствий для пользователя, не отрывайте внимание пользователя от контекста страницы.&lt;/li&gt;
&lt;li&gt;Убедитесь что сообщение понятно.&lt;/li&gt;
&lt;li&gt;Помогите пользователю решить проблему.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Несмотря на то, что некоторые формы используют краткие контекстные сообщения, многие сайты и мобильные приложения до сих пор используют ужасные сообщения об ошибках. Несмотря на это можно найти и хороший пример - mailChimp (см. рис 4)&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot;&gt;&lt;img src=&quot;http://www.uxmatters.com/mt/archives/2015/11/images/Hoober_Errors_Fig4.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
&lt;p style=&quot;font-size: 0.8em; font-weight: bold;&quot;&gt;Рисунок 4 : страница логина сервиса mailChimp до и после сообщения об ошибках.&lt;/p&gt;
&lt;p&gt;MailChimp следует правилам, описанным мной выше:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Они используют заметное сообщение, над контентом страницы, так что оно заметно что бы ни делал пользователь на странице.&lt;/li&gt;
&lt;li&gt;Сообщение находится на одной и той же странице что и форма, поэтому пользователь может легко подглядывать в этот текст пока решает проблему на форме.&lt;/li&gt;
&lt;li&gt;В сообщении используется понятная, не перегруженная, человеко-понятная терминология. Иконка в сообщении дает пользователю понять что он не сможет дальше работать с сервисом пока не уладит проблему.&lt;/li&gt;
&lt;li&gt;Они сами, вместо пользователя, обнаружили проблему и предложили пути решения. В данном случае это неправильный логин и ссылка по которой пользователь может решить эту проблему.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;итоги&lt;/h3&gt;
&lt;p&gt;Не подумайте что составление хороших сообщений об исключениях решит все ваши проблемы.&lt;/p&gt;
&lt;p&gt;Постарайтесь не обобщать предложенные мною решения и не использовать их строго как паттерн. Стараясь улучшить взаимодействия вашего пользователя с системой, также не забывайте о технических возможностях вашего конкретного проекта, используйте советы разумно, а не слепо применяйте все известные вам паттерны.&lt;/p&gt;
&lt;p&gt;Всегда помните что вы должны проектировать вашу интерактивную систему рассчитывая на то, что она должна будет работать всегда, независимо от того, каким неожиданным образом пользователь решит ей воспользоваться.&lt;/p&gt;
&lt;p&gt;Планируйте свою работу думая об отказах, погрешностях ввода, и неожиданном поведении пользователя.&lt;/p&gt;
&lt;p&gt;Проектируйте свои интерфейсы так, чтобы у пользователя не было возможности ввести неправильные данные. Также помните о том что прежде всего нужно думать об удобстве пользователя, а не о внедрении новомодных техник и паттернов.&lt;/p&gt;
&lt;p&gt;Данная заметка является моим вольным переводом &lt;a href=&quot;http://www.uxmatters.com/mt/archives/2015/11/error-messages-are-an-anti-pattern.php&quot; target=&quot;_blank&quot;&gt;оригинальной статьи Стивена Хубера&lt;/a&gt;, Там вы можете уточнить информацию.&lt;/p&gt;</content><author><name></name></author><category term="translation" /><summary type="html">Когда вы проектируете интерактивную систему вы неизбежно сталкиваетесь с ограничениями. Например, не всегда достаточно того, чтобы просто добавить новое поле в уже существующую и работающую базу данных; мобильные сети не всегда обладают хорошими скоростями из-за низкой производительности либо высокой загруженности. Обычно команда проектировщиков принимает к сведению подобные ограничения и обсуждает с командой разработки компромиссный вариант того что команда может сделать в текущих условиях.</summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://handleman.github.io/assets/images/articles/notifications.png" /><media:content medium="image" url="https://handleman.github.io/assets/images/articles/notifications.png" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry><title type="html">Перевод: Подробное руководство по flexbox</title><link href="https://handleman.github.io/translation/2015/09/05/podrobnoe-rukovodstvo-po-flexbox.html" rel="alternate" type="text/html" title="Перевод: Подробное руководство по flexbox" /><published>2015-09-05T13:35:59+03:00</published><updated>2015-09-05T13:35:59+03:00</updated><id>https://handleman.github.io/translation/2015/09/05/podrobnoe-rukovodstvo-po-flexbox</id><content type="html" xml:base="https://handleman.github.io/translation/2015/09/05/podrobnoe-rukovodstvo-po-flexbox.html">&lt;p&gt;Простыми словами, flexbox layout (флексбокс) это набор CSS правил описывающий принцип, который помогает разработчику удобно располагать блоки относительно друг друга и эффективнее использовать свободное место между блоками на странице.&lt;/p&gt;
&lt;p&gt;Использование flexbox решает старую наболевшую проблему — центрирование блоков по вертикали при неизвестной высоте как самих блоков, так и подложки под ними.&lt;/p&gt;
&lt;p&gt;Основная идея, стоящая за flexbox, это: способность родительского контейнера менять высоту/ширину (и порядок) своих дочерних элементов, для наиболее эффективного использования доступного пространства (также для того, чтобы подстраиваться под разрешение всех видов устройств и размеров экранов). Короче говоря, родительский флекс-контейнер расширяет внутренние блоки чтобы занять свободное пространство или же сжимает их чтобы избежать наложения их друг на друга.&lt;/p&gt;
&lt;p&gt;Самое важное во flexbox, это то, что этот принцип не зависит от общего направления отрисовки страницы и других блоков (display: block, которые следуют друг за другом вертикально и display: inline, которые располагаются горизонтально друг от друга). Старый принцип (block,inline,inline-block) работает отлично, но для простых страниц. Современные сложные динамические интерфейсы требуют более эффективный подход.&lt;/p&gt;
&lt;h2&gt;Терминология&lt;/h2&gt;
&lt;p&gt;Потому как flexbox Это отдельный принцип расположения блоков, а не просто CSS свойство, помимо прочего, он включает в себя целый набор свойств. Некоторые из этих свойств предназначены для применения на родительском контейнере (flex container) тогда как другие — на дочерних (flex items).&lt;/p&gt;
&lt;p&gt;Если обычный метод верстки строится на порядке следования отрисовки страницы, flex использует свой принцип для выстраивания порядка следования дочернихблоков (flex-flow directions).&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Предлагаю взглянуть на изображение из спецификации и разобрать все термины по порядку.&lt;/strong&gt;&lt;/p&gt;
&lt;h2&gt;Общая схема flexbox layout&lt;/h2&gt;
&lt;p&gt;&lt;img style=&quot;margin-left: auto; margin-right: auto;&quot; src=&quot;/assets/images/articles/flexbox/flexbox.png&quot; alt=&quot;Общая схема flexbox layout.&quot; /&gt;&lt;/p&gt;
&lt;p&gt;В общих чертах, можно сказать, что блоки внутри родительского контейнера будут располагаться по главной оси (main axis) от начала (main-start) до конца оси (main-end) или же по перпендикулярной оси (cross axis) от начала (cross-start) до конца оси (cross-end).&lt;/p&gt;
&lt;h3&gt;Термины на изображении&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;main axis&lt;/strong&gt; - главная ось по которой располагаются дочерние объекты. Кстати, совсем не обязательно это должна быть горизонтальная ось, это завсист от указанного вами flex-direction свойства (см.ниже).&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;main-start | main-end &lt;/strong&gt; - дочерние блоки располагаются от main-start и до main-end. Фактически начало и конец оси.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;main size&lt;/strong&gt; - длина или ширина доступная для заполнения дочерними элементами вдоль главной оси.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;cross axis&lt;/strong&gt; - ось, перпендикулярная главной оси. Направление перпендикулярной оси зависит от того, какую ось вы указали в качестве главной.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;cross-start | cross-end&lt;/strong&gt; - начало и конец перпендикулярной оси, по которой будут располагаться дочерние элементы.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;cross size&lt;/strong&gt;- длина или ширина доступная для заполнения дочерними элементами вдоль перпендикулярной оси.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;В итоге нас есть Родительский элемент (flex container), в котором расположены дочерние элементы (flex item) и набор правил для управления выводом этих элементов. Давайте последовательно разберем эти свойства.&lt;/p&gt;
&lt;h2&gt;Свойства родительского элемента (flex container)&lt;/h2&gt;
&lt;p&gt;&lt;img class=&quot;adaptive-image&quot; src=&quot;/assets/images/articles/flexbox/flex-container.png&quot; alt=&quot;flex container&quot; /&gt;&lt;/p&gt;
&lt;h3&gt;display&lt;/h3&gt;
&lt;p&gt;Это свойство определяет родительский контейнер, так же оно активирует контекст для всех дочерних элементов&lt;/p&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://gist.github.com/handleman/f453cd276e14126da57e.js&quot;&gt;&lt;/script&gt;

&lt;h3&gt;flex-direction&lt;/h3&gt;
&lt;p&gt;&lt;img class=&quot;adaptive-image&quot; src=&quot;/assets/images/articles/flexbox/flex-direction1.png&quot; alt=&quot;flex container&quot; /&gt;&lt;/p&gt;
&lt;p&gt;Это свойство определяет главную ось и направление расположения блоков вдоль нее. В общих чертах flexbox располагает блоки либо по горизонтали (row) либо по вертикали (column) вдоль оси.&lt;/p&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://gist.github.com/handleman/2d55e19fc0c9e8eb2d6e.js&quot;&gt;&lt;/script&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;row - (по умолчанию)&lt;/strong&gt; слева на право (ltr) либо справа на лево (rtl);&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;row-reverse&lt;/strong&gt; - меняет порядок на противоположный;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;column&lt;/strong&gt; - тоже самое что и row но для направления сверху в низ;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;column-reverse&lt;/strong&gt; - меняет направление для вертикальной оси.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;flex-wrap&lt;/h3&gt;
&lt;p&gt;&lt;img class=&quot;adaptive-image&quot; src=&quot;/assets/images/articles/flexbox/flex-wrap.png&quot; alt=&quot;flex container&quot; /&gt;&lt;/p&gt;
&lt;p&gt;Это свойство определяет порядок переноса элементов. По умолчанию все дочерние элементы стремятся уместиться на одной линии по направлению главной оси.&lt;/p&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://gist.github.com/handleman/9805af0c0c85213d9789.js&quot;&gt;&lt;/script&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;nowrap &lt;/strong&gt;- (используется по умолчанию) расположение блоков в одну строку;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;wrap &lt;/strong&gt;- расположение в несколько линий (похоже на перенос по словам в письменной речи);&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;wrap-reverse&lt;/strong&gt; - расположение в несколько линий только в обратном направлении главной оси.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;flex-flow&lt;/h3&gt;
&lt;p&gt;Это свойство является сокращением для комбинирования 2х свойств: flex-direction и flex-wrap. Оба этих свойства вместе определяют главную и перпендикулярную ось. По умолчанию используются значения row и nowrap соответсвенно.&lt;/p&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://gist.github.com/handleman/270d1b50730c4204054a.js&quot;&gt;&lt;/script&gt;

&lt;h3&gt;justify-content&lt;/h3&gt;
&lt;p&gt;&lt;img class=&quot;adaptive-image&quot; src=&quot;/assets/images/articles/flexbox/justify-content.png&quot; alt=&quot;flex container&quot; /&gt;&lt;/p&gt;
&lt;p&gt;Это свойство определяет расположение блоков вдоль главной оси. Это свойство помогает распределить свободное место оставшееся после рендеринга дочерних элементов. Так же это дает некоторою возможность для разработчика управлять поведением элементов при переполнении родительского контейнера.&lt;/p&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://gist.github.com/handleman/1c3af7d75d2b68c82a45.js&quot;&gt;&lt;/script&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;flex-start - (по умолчанию)&lt;/strong&gt; дочерние элементы группируются у стартовой лини (main-start на общей схеме) вдоль главной оси;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;flex-end&lt;/strong&gt; - дочерние элементы группируются у конечной линии (main-end на общей схеме) вдоль главной оси;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;center &lt;/strong&gt;- дочерние элементы центрированы по центру главной оси;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;space-between&lt;/strong&gt; - первый элемент на стартовой лини (main-start на общей схеме), последний на конечной линии(main-end на общей схеме), а свободное пространство распределяется равномерно между оставшимися элементами;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;space-around &lt;/strong&gt;- распределяет свободное место для всех дочерних элементов равномерно, но с учетом индивидуальных свойств отступов для дочерних элементов.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;align-items&lt;/h3&gt;
&lt;p&gt;&lt;img class=&quot;adaptive-image&quot; src=&quot;/assets/images/articles/flexbox/align-items.png&quot; alt=&quot;flex container&quot; /&gt;&lt;/p&gt;
&lt;p&gt;Это свойство определяет расположение дочерних элементов (flex items) относительно друг друга по перпендикулярной оси. Можно сказать что это свойство такое же как justify-content только для перпендикулярной оси. Чем то напоминает мне свойство vertical-align для inline-block элементов.&lt;/p&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://gist.github.com/handleman/d2e167834e211b29ecfe.js&quot;&gt;&lt;/script&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;flex-start&lt;/strong&gt; - начальная граница перпендикулярной оси (cross-start на общей схеме);&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;flex-end&lt;/strong&gt; - конечная граница перпендикулярной оси (cross-end на общей схеме);&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;center &lt;/strong&gt;- дочерние объекты располагаются относительно центра перпендикулярной оси;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;baseline&lt;/strong&gt; - элементы располагаются по базовой линии относительно друг друга;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;stretch&lt;/strong&gt; - (по умолчанию) элементы вытягиваются вдоль перпендикулярной оси и занимают все пространство родительского блока.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;align-content&lt;/h3&gt;
&lt;p&gt;&lt;img class=&quot;adaptive-image&quot; src=&quot;/assets/images/articles/flexbox/align-content.png&quot; alt=&quot;flex container&quot; /&gt;&lt;/p&gt;
&lt;p&gt;Это свойство выравнивает линии внутри родительского контейнера вдоль перпендикулярной оси (cross-axis на общей схеме), аналогично тому как работает свойство justify-content только не для отдельного элемента а для всей строки (линии) элементов сразу.&lt;/p&gt;
&lt;p&gt;Это свойство не работает если элементы не переносятся на другую строку.&lt;/p&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://gist.github.com/handleman/c21fd9007cd8ba306e95.js&quot;&gt;&lt;/script&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;flex-start &lt;/strong&gt;- линии группируются у стартовой позиции перпендикулярной оси контейнера;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;flex-end&lt;/strong&gt; - линии группируются у конечной позиции перпендикулярной оси;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;center&lt;/strong&gt; - линии группируются по центру перпендикулярной оси;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;space-between&lt;/strong&gt; - Первая линия элементов располагается у стартовой позиции оси а последняя у конечной. Линии между первой и последней распределяются равномерно между собой вдоль перпендикулярной оси;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;space-around&lt;/strong&gt; - линии равномерно распределены относительно друг друга вдоль перпендикулярной оси с равным расстоянием между друг другом;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;stretch&lt;/strong&gt; - линии равномерно расширяются чтобы занять все свободное пространство относительно перпендикулярной оси.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;Свойства дочерних объектов (flex items)&lt;/h2&gt;
&lt;p&gt;&lt;img class=&quot;adaptive-image&quot; src=&quot;/assets/images/articles/flexbox/flex-items.png&quot; alt=&quot;flex container&quot; /&gt;&lt;/p&gt;
&lt;h3&gt;order&lt;/h3&gt;
&lt;p&gt;&lt;img class=&quot;adaptive-image&quot; src=&quot;/assets/images/articles/flexbox/order-2.png&quot; alt=&quot;flex container&quot; /&gt;&lt;/p&gt;
&lt;p&gt;По умолчанию дочерние объекты расположены в поредяке следования по исходному коду. Это свойство позволяет контролировать порядок отображение объектов относительно друг друга.&lt;/p&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://gist.github.com/handleman/2d51ef66a431361b17b2.js&quot;&gt;&lt;/script&gt;

&lt;h3&gt;flex-grow&lt;/h3&gt;
&lt;p&gt;&lt;img class=&quot;adaptive-image&quot; src=&quot;/assets/images/articles/flexbox/flex-grow.png&quot; alt=&quot;flex container&quot; /&gt;&lt;/p&gt;
&lt;p&gt;Это свойство определяет способность отдельных элементов расширятся при необходимости. Свойство является по сути пропорцией относительно других элементов.&lt;/p&gt;
&lt;p&gt;Если всем элементам задать значение 1 для этого свойства, каждый элемент будет одинаковой ширины, если же одному из этих элементов задать 2, то этот элемент будет в 2 раза шире остальных.&lt;/p&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://gist.github.com/handleman/570b361b19997c6d16ab.js&quot;&gt;&lt;/script&gt;

&lt;h3&gt;flex-shrink&lt;/h3&gt;
&lt;p&gt;Это свойство определяет способность элемента к расширению, так же является пропорцией к остальным элементам. По умолчанию равно 1.&lt;/p&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://gist.github.com/handleman/723a0fd8cdd981a5cbb6.js&quot;&gt;&lt;/script&gt;

&lt;h3&gt;flex-basis&lt;/h3&gt;
&lt;p&gt;Это свойство определяет размер элемента по умолчанию, перед тем как произойдет распределение свободного пространства между остальными элементами. Если указано свойство main-size то тогда flex-basis будет равно css свойствам height или width этого элемнта, в зависимости от того какая ось и направление активны.&lt;/p&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://gist.github.com/handleman/c749a81ea3a2ceba8f77.js&quot;&gt;&lt;/script&gt;

&lt;h3&gt;flex&lt;/h3&gt;
&lt;p&gt;Это свойство является комбинированным сокращением для свойств: flex-grow, flex-shrink и flex-basis. Второй и третий параметр ( flex-shrink и flex-basis) не обязательны. Значение этого свойства по умолчанию: 0 1 auto&lt;/p&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://gist.github.com/handleman/b406879ce91dfc1529e4.js&quot;&gt;&lt;/script&gt;

&lt;p&gt;Рекомендуется использовать именно это свойство вместо использования отдельных flex-grow, flex-shrink и flex-basis.&lt;/p&gt;
&lt;h3&gt;align-self&lt;/h3&gt;
&lt;p&gt;&lt;img class=&quot;adaptive-image&quot; src=&quot;/assets/images/articles/flexbox/align-self.png&quot; alt=&quot;flex container&quot; /&gt;&lt;/p&gt;
&lt;p&gt;Это свойство позволяет индивидуально выравнивать конкретный выбранный элемент относительно других. Имеет приоритет над общим свойством align-items.&lt;/p&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://gist.github.com/handleman/6f3d1dd47ea57277d2d4.js&quot;&gt;&lt;/script&gt;

&lt;p&gt;Вот собственно и все.&lt;/p&gt;
&lt;p&gt;Данная заметка является моим вольным переводом &lt;a href=&quot;https://css-tricks.com/snippets/css/a-guide-to-flexbox/&quot;&gt;оригинальной статьи Криса Койера&lt;/a&gt;, Там вы можете уточнить информацию а так же найти примеры использования, таблицу поддержки flexbox в различных браузерах и т.д.&lt;/p&gt;</content><author><name></name></author><category term="translation" /><summary type="html">Простыми словами, flexbox layout (флексбокс) это набор CSS правил описывающий принцип, который помогает разработчику удобно располагать блоки относительно друг друга и эффективнее использовать свободное место между блоками на странице. Использование flexbox решает старую наболевшую проблему — центрирование блоков по вертикали при неизвестной высоте как самих блоков, так и подложки под ними. Основная идея, стоящая за flexbox, это: способность родительского контейнера менять высоту/ширину (и порядок) своих дочерних элементов, для наиболее эффективного использования доступного пространства (также для того, чтобы подстраиваться под разрешение всех видов устройств и размеров экранов). Короче говоря, родительский флекс-контейнер расширяет внутренние блоки чтобы занять свободное пространство или же сжимает их чтобы избежать наложения их друг на друга. Самое важное во flexbox, это то, что этот принцип не зависит от общего направления отрисовки страницы и других блоков (display: block, которые следуют друг за другом вертикально и display: inline, которые располагаются горизонтально друг от друга). Старый принцип (block,inline,inline-block) работает отлично, но для простых страниц. Современные сложные динамические интерфейсы требуют более эффективный подход. Терминология Потому как flexbox Это отдельный принцип расположения блоков, а не просто CSS свойство, помимо прочего, он включает в себя целый набор свойств. Некоторые из этих свойств предназначены для применения на родительском контейнере (flex container) тогда как другие — на дочерних (flex items). Если обычный метод верстки строится на порядке следования отрисовки страницы, flex использует свой принцип для выстраивания порядка следования дочернихблоков (flex-flow directions). Предлагаю взглянуть на изображение из спецификации и разобрать все термины по порядку. Общая схема flexbox layout В общих чертах, можно сказать, что блоки внутри родительского контейнера будут располагаться по главной оси (main axis) от начала (main-start) до конца оси (main-end) или же по перпендикулярной оси (cross axis) от начала (cross-start) до конца оси (cross-end). Термины на изображении main axis - главная ось по которой располагаются дочерние объекты. Кстати, совсем не обязательно это должна быть горизонтальная ось, это завсист от указанного вами flex-direction свойства (см.ниже). main-start | main-end - дочерние блоки располагаются от main-start и до main-end. Фактически начало и конец оси. main size - длина или ширина доступная для заполнения дочерними элементами вдоль главной оси. cross axis - ось, перпендикулярная главной оси. Направление перпендикулярной оси зависит от того, какую ось вы указали в качестве главной. cross-start | cross-end - начало и конец перпендикулярной оси, по которой будут располагаться дочерние элементы. cross size- длина или ширина доступная для заполнения дочерними элементами вдоль перпендикулярной оси. В итоге нас есть Родительский элемент (flex container), в котором расположены дочерние элементы (flex item) и набор правил для управления выводом этих элементов. Давайте последовательно разберем эти свойства. Свойства родительского элемента (flex container) display Это свойство определяет родительский контейнер, так же оно активирует контекст для всех дочерних элементов flex-direction Это свойство определяет главную ось и направление расположения блоков вдоль нее. В общих чертах flexbox располагает блоки либо по горизонтали (row) либо по вертикали (column) вдоль оси. row - (по умолчанию) слева на право (ltr) либо справа на лево (rtl); row-reverse - меняет порядок на противоположный; column - тоже самое что и row но для направления сверху в низ; column-reverse - меняет направление для вертикальной оси. flex-wrap Это свойство определяет порядок переноса элементов. По умолчанию все дочерние элементы стремятся уместиться на одной линии по направлению главной оси. nowrap - (используется по умолчанию) расположение блоков в одну строку; wrap - расположение в несколько линий (похоже на перенос по словам в письменной речи); wrap-reverse - расположение в несколько линий только в обратном направлении главной оси. flex-flow Это свойство является сокращением для комбинирования 2х свойств: flex-direction и flex-wrap. Оба этих свойства вместе определяют главную и перпендикулярную ось. По умолчанию используются значения row и nowrap соответсвенно. justify-content Это свойство определяет расположение блоков вдоль главной оси. Это свойство помогает распределить свободное место оставшееся после рендеринга дочерних элементов. Так же это дает некоторою возможность для разработчика управлять поведением элементов при переполнении родительского контейнера. flex-start - (по умолчанию) дочерние элементы группируются у стартовой лини (main-start на общей схеме) вдоль главной оси; flex-end - дочерние элементы группируются у конечной линии (main-end на общей схеме) вдоль главной оси; center - дочерние элементы центрированы по центру главной оси; space-between - первый элемент на стартовой лини (main-start на общей схеме), последний на конечной линии(main-end на общей схеме), а свободное пространство распределяется равномерно между оставшимися элементами; space-around - распределяет свободное место для всех дочерних элементов равномерно, но с учетом индивидуальных свойств отступов для дочерних элементов. align-items Это свойство определяет расположение дочерних элементов (flex items) относительно друг друга по перпендикулярной оси. Можно сказать что это свойство такое же как justify-content только для перпендикулярной оси. Чем то напоминает мне свойство vertical-align для inline-block элементов. flex-start - начальная граница перпендикулярной оси (cross-start на общей схеме); flex-end - конечная граница перпендикулярной оси (cross-end на общей схеме); center - дочерние объекты располагаются относительно центра перпендикулярной оси; baseline - элементы располагаются по базовой линии относительно друг друга; stretch - (по умолчанию) элементы вытягиваются вдоль перпендикулярной оси и занимают все пространство родительского блока. align-content Это свойство выравнивает линии внутри родительского контейнера вдоль перпендикулярной оси (cross-axis на общей схеме), аналогично тому как работает свойство justify-content только не для отдельного элемента а для всей строки (линии) элементов сразу. Это свойство не работает если элементы не переносятся на другую строку. flex-start - линии группируются у стартовой позиции перпендикулярной оси контейнера; flex-end - линии группируются у конечной позиции перпендикулярной оси; center - линии группируются по центру перпендикулярной оси; space-between - Первая линия элементов располагается у стартовой позиции оси а последняя у конечной. Линии между первой и последней распределяются равномерно между собой вдоль перпендикулярной оси; space-around - линии равномерно распределены относительно друг друга вдоль перпендикулярной оси с равным расстоянием между друг другом; stretch - линии равномерно расширяются чтобы занять все свободное пространство относительно перпендикулярной оси. Свойства дочерних объектов (flex items) order По умолчанию дочерние объекты расположены в поредяке следования по исходному коду. Это свойство позволяет контролировать порядок отображение объектов относительно друг друга. flex-grow Это свойство определяет способность отдельных элементов расширятся при необходимости. Свойство является по сути пропорцией относительно других элементов. Если всем элементам задать значение 1 для этого свойства, каждый элемент будет одинаковой ширины, если же одному из этих элементов задать 2, то этот элемент будет в 2 раза шире остальных. flex-shrink Это свойство определяет способность элемента к расширению, так же является пропорцией к остальным элементам. По умолчанию равно 1. flex-basis Это свойство определяет размер элемента по умолчанию, перед тем как произойдет распределение свободного пространства между остальными элементами. Если указано свойство main-size то тогда flex-basis будет равно css свойствам height или width этого элемнта, в зависимости от того какая ось и направление активны. flex Это свойство является комбинированным сокращением для свойств: flex-grow, flex-shrink и flex-basis. Второй и третий параметр ( flex-shrink и flex-basis) не обязательны. Значение этого свойства по умолчанию: 0 1 auto Рекомендуется использовать именно это свойство вместо использования отдельных flex-grow, flex-shrink и flex-basis. align-self Это свойство позволяет индивидуально выравнивать конкретный выбранный элемент относительно других. Имеет приоритет над общим свойством align-items. Вот собственно и все. Данная заметка является моим вольным переводом оригинальной статьи Криса Койера, Там вы можете уточнить информацию а так же найти примеры использования, таблицу поддержки flexbox в различных браузерах и т.д.</summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://handleman.github.io/assets/images/articles/flexbox/align-self.png" /><media:content medium="image" url="https://handleman.github.io/assets/images/articles/flexbox/align-self.png" xmlns:media="http://search.yahoo.com/mrss/" /></entry></feed>