Архив рубрики: рабочее

Скачивание видеороликов с попутным их склеиванием

Chrome, Firefox, linux, OSM, видео, Википедия, интернет, карта

Если что-то в интернете можно посмотреть, значит, это можно и скачать, хоть это и не всегда удобно.

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

Как известно, если нельзя, но очень хочется, то можно.

Метод

1. Заходим на страницу с архивом, находим нужный фрагмент, открываем отладчик (клавишей F12), переключаемся на вкладку Network — так и в Google Chrome, и в Mozilla Firefox.

2. Запускаем воспроизведение — отладчик покажет выполненные запросы.

3. Когда запросы перестанут идти (то есть, всё нужно, уже скачалось), можно, щёлкнув по ним правой кнопкой, выбрать пункт “Save all as HAR” — запросы и ответы на них будут сохранены единым файлом с расширением HAR — на самом деле это JSON.

В отладчике открыта вкладка Network

4. Берём какой-нибудь HAR-extractor (есть всякие варианты — мне подошёл первый попавшийся, написанный на Node.JS), натравливаем его на HAR-файл, получаем папку, в одной из подпапок которой будут лежать видеофайлы с расширением TS.

5. Смотрим эти видеофайлы — под линуксом с гномом можно использовать стандартный видеоплеер totem или всеядный mpv (ну или mplayer, из которого он и вырос).

6. Создаём текстовый файл, каждая строка которого состоит из слова file, пробела и имени файла в апострофах:

file 'cam42_16-10-2020_26778689266.ts'
file 'cam42_16-10-2020_26778699914.ts'

7. Склеиваем мелкие видеофрагменты в один большой файл:

ffmpeg -f concat -i список.txt -codec copy результат.mp4

Всё!

Аналогичный способ — сохранение кучи мелких файликов через HAR — можно использовать для того, чтоб добыть тайлы — небольшие квадратные картинки из которых состоят интерактивные карты на сайтах, а потом, делая свою карту, разместить эти тайлы где-нибудь у себя, чтоб не создавать лишнюю нагрузку на тайлопровайдера — они этого не любят: OpenStreetMap просит не брать тайлы непосредственно у них, а фонд ВикиМедиа всё время клянчит денег на поддержку функционирования Википедии. Реальный пример такого подхода — карта Global SUSU на сайте Южно-Уральского университета: тайлы там сгенерированы Википедией из общедоступных данных OpenStreetMap, но хранятся на одном из университетских серверов.

Копирование с Gist на GitHub

git, screenshot, рабочее

Бывает, что мелкие фрагменты программного кода, заброшенные на Gist, со временем разрастаются до состояния, когда надо бы выделить им отдельное нормальное хранилище на Гитхабе — с багтрекером и остальными плюшками.

На https://gist.github.com/ishu3101/830b556b487de5d69690 нашёлся и был испытан на практике такой метод:

1. Создать новый репозиторий на Гитхабе.

2. Склонировать гист:

git clone git@gist.github.com:4b84d4a8d8404ede668225de68fb96ba.git

3. Переименовать получившийся каталог и зайти в него.

4. Добавить удалённый репозиторий (см. Pro Git 2.5 Git Basics — Working with Remotes, по-русски Основы Git — Работа с удалёнными репозиториями):

git remote add github https://github.com/username/repository-name

5. Отправить на Гитхаб:

git push github master

Но есть и более простой способ — импортировать через https://github.com/new/import

Импорт проекта на Гитхаб

Такой способ подходит, если надо всего лишь скопировать файл на Гитхаб и не заниматься дальнейшим его поддержанием в актуальном состоянии и на gist.github.com

Двенадцатое Комодо — бесплатные баги

software, программизм

Недавно вышла Komodo IDE 12 — интегрированная среда разработки, где, помимо прочего, есть, как и раньше, отладчик перловых скриптов, прогон тестов, профилировщик, г̶у̶й̶^W графический интерфейс к системам контроля версий и ещё дофига всего. В сильно похожем на неё редакторе Komodo Edit, который стал бесплатным ещё раньше, этих плюшек нет — есть лишь схожий вес.

Теперь оно всё бесплатное, но, увы, радоваться рано:
во-первых, глюки и тормоза никуда не делись, потому что внутри — всё тот же файрфокс, питон с библиотеками и яваскрипт суммарным весом в четверть гигабайта,
во-вторых, Komodo IDE теперь интегрируется с ActiveState Platform тех же авторов и требует для чего-то, выходящего за пределы простого редактирования и связи с СКВ, загадочных танцев с бубном: то, что раньше работало «из коробки» (например, отладка и запуск скриптов), теперь не запускается никак, даже после р̶а̶с̶к̶у̶р̶и̶в̶а̶н̶и̶я̶ ̶м̶а̶н̶о̶в̶^W^W внимательного чтения документации.

Если оно не заработает как надо, придётся снова править код, например, в Geany, а отлаживать и коммитить — с командной строки.

Развитие рабочего места на острове

лето, рабочее, электричество

0. (не в кадре) В палатке — тесно и неудобно. За общим столом — людно: девушки строгают салат, мужики говорят друг с другом, дети просто везде и занимаются чем попало — все они отвлекают.

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

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

Следующий этап — обеспечить энергонезависимость процесса. Ёмкости аккумуляторов — того, что в ноутбуке и внешнего, снятого с автомобиля, суммарно хватило чуть больше, чем на день работы. Но от большого аккумулятора питался не только ноутбук, но ещё и телефоны с пауэрбанками плюс прожектор — туда, наверное, суммарно ушло 50-60 Вт⋅ч на свет и столько же — на гаджеты (без учёта потерь на преобразование напряжения, а иногда и рода тока). Половину этой дополнительной нагрузки можно было бы и с какого-нибудь пятивольтового источника брать — в продаже есть солнечные панели, выдающие 5 В в USB-разъём — даже один такой двухамперный источник в теории способен зарядить имеющиеся гаджеты, если весь световой день этому посвятить. Ну и свет надо бы перевести, наконец-то, с 220-вольтового переменного тока на постоянный — 5 В (USB-лампа, например) либо 12, чтоб питаться непосредственно с аккумулятора (есть и лампы в продаже, и дневные ходовые огни).

На работу

автобус, автомобиль, велосипед, время, деньги, рабочее, троллейбус, Челябинск

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

5 минут до троллейбуса/автобуса + 0−10 минут на ожидание + 10−15 минут езды + 3−7 минут до рабочего места = 22−33 минуты — от 20 рублей,
или
3,5 км за рулём — 10−20 минут (рекорды — 5 и 40) — 15−20 рублей на бензин (зависит от стиля езды и состояния дороги) + другие расходные материалы + ремонт и техобслуживание + страховка и налог + амортизация = 50—100 рублей,
или
на такси — за то же время (и даже чуть быстрее — не надо искать место парковки) от 90 рублей, если верить Яндексу,
или
на велосипеде — 15−20 минут, но сейчас парковаться негде, а от забора его уже угоняли — бесплатно, если не считать ущерб от угона,
или
пешком — 30−50 минут.

Умножим на 20 рабочих дней в месяце и ещё на два (надо же и домой вернуться) — получится, что:

  • недостижимое на практике самое быстрое перемещение заняло бы 400 минут — 6⅔ часа, то есть, 6 часов 40 минут, и обошлось бы в 600 рублей по весьма оптимистичной оценке (да ну?), тыщи в две по более трезвой и в четыре — по самой грустной,
  • если считать расход исходя из полной стоимости владения автомобилем, то на такси — дешевле,
  • езда на общественном транспорте —  400−460 рублей и от 15 до 22 часов — 2−3 рабочих дня,
  • очень быстрая ходьба может оказаться более выигрышной даже по времени, чем езда на общественном транспорте, если сравнивать с непиковыми периодами, когда интервалы велики́.

P. S. Судя по статье, из российских городов-миллионников самый бедный с точки зрения IT-разработчика в 2019 году — это Челябинск: стоимость жизни у нас всего 58 % от столичной, но медианная зарплата — жалкие 42 %.

Симметричный шестиугольный блок

веб, геометрия

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

<style>
    .out, .in {
        display: inline-block;
        overflow: hidden;
    }
</style>
<body>
    <div class="out" style="transform: skew(α)">
        <div class="in" style="transform: skew(β)">
            <img src="picture.png" alt="Board" style="transform: skew(γ)">
        </div>
    </div>

где α, β и γ — углы, на которые проводится скос элементов.

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

Для углов α = 20° (20deg в CSS), β = −30°, γ = 40° и картинки, состоящей из квадратов результат будет таким:

Можно заметить, что для возвращения картинки к нормальному положению углы α и γ должны совпадать. Угол β больше, чем α, но не в два раза — меньше. Для того, чтобы углы картинки обрезались симметрично, надо, чтобы тангенсы углов α и β относились как 1 к −2.

Можно CSS-правило трансформации записать в виде матрицы, где указывается тангенс: transform: matrix(1, 0, тангенс, 1, 0, 0) — тогда вместо вычисления углов путём взятия арктангенса, который есть, например, в дополнительных пакетах к Sass, но не в нём самом (и уж тем более не в CSS), можно будет пользоваться простым умножением:

$tan: .5;

.out, .in {
    display: inline-block;
    overflow: hidden;
}

.out, .in img {
    transform: matrix(1, 0, $tan, 1, 0, 0);
}

.in {
    transform: matrix(1, 0, -2*$tan, 1, 0, 0);
}

Результат — группа из стоя́щих друг на друге квадратов режется по диагонали:

Для $tan: .577350269 (tg 30°) углы будут кратны тридцати градусам:

Треугольники

В обоих случаях Google Chrome режет неидеально: углы правильные, но некоторые линии разреза параллельно перенесены на несколько точек. Firefox рисует аналогично. Хотя если не заниматься пиксельхантингом рассматривать придирчиво каждую точку, результат выходит вполне приемлемым.

Дополнение/: если наружному элементу .out задать нулевую высоту строки line-height: 0, то линии разреза переноситься не будут ни в Хроме, ни в Файрфоксе — станет как надо.

Цветной Subversion

git, Perl, subversion

Git умеет «из коробки» раскрашивать то, что выводит в консоль, а Subversion — нет. Надоело руками каждый раз перенаправлять вывод svn diff в colordiff — написал простенькую раскрашивалку. Когда-то умела красить только вывод подкоманды status, теперь понимает blame (praise, annotate, ann), diff (di), help (?, h), status (stat, st) — и сами подкоманды, и их синонимы.

https://github.com/shoorick/svn-st-color

Тестирование PHP-приложений из Geany

geany, Perl, PHP, регулярные выражения, тестирование

Когда-то я настраивал запуск тестов перловых Mojolicious-приложений прямо из IDE Geany. Потом довелось попробовать микрофреймворк Slim для PHP — ну да, работает, хотя тесты там более многословные по сравнению с перловыми.

А теперь попробуем настроить Geany для запуска тестов в современных PHP-приложениях — например, для использующих уже упомянутый Slim. Для запуска тестов в PHP существует PHPUnit — это не единственный инструмент, хоть и весьма популярный. Настройки тестирования зависят от проекта — в каждом проекте они могут быть своими. В Geany 1.27 настройки вызываются через меню: Project → Properties → вкладка Build либо Build → Set Build Commands:

  1. Задаём имя команды, под которым она будет отображаться в меню — нажимаем на пустую кнопку в столбце Label (в моём примере это была вторая сверху кнопка, на которой теперь написано Test).
  2. Указываем в столбце Command путь к PHPUnit — он может лежать, например, в подкаталоге vendor/bin относительно корня приложения. В случае, если он лежит внутри проекта, базовый путь проекта можно записать как %p.
  3. В столбце Working directory указываем путь к корневой папке приложения.
  4. В строке Error regular expression указываем регулярное выражение для поиска ошибок:
    ^(.+):(\d+)$
    PHPUnit выводит в сообщении об ошибке разделённые двоеточием полный путь к файлу и номер строки с ошибкой. Если даблкликнуть^W дважды щёлкнуть по сообщению, можно быстро перейти к соответствующей строке, кроме того, все строки, вызвавшие ошибки тестирования, выделяются подчёркиванием красной волнистой линией.

После настройки тесты можно будет запускать кучей разных способов: через меню, кликом по кнопке с кирпичом, а также с клавиатуры (по умолчанию — клавишей F9).

Подсчёт числа DOM-элементов при тестировании через Test::Mojo

Perl, веб, тестирование

Модуль Test::Mojo позволяет проверить, нашлось ли нужное количество DOM-элементов:

$t = $t-&gt;element_count_is('div.foo[x=y]', 5);
$t = $t-&gt;element_count_is('html body div', 30, 'thirty elements');

Но так можно проверить лишь равенство ожидаемого и полученного, в то время как иногда нужны другие операции. 

$t-&gt;get_ok("$ROOT/some.xml");
my @items = $t-&gt;tx-&gt;res-&gt;dom-&gt;find('rss channel item')-&gt;each;
ok scalar @items &gt; 42, 'More than 42 items in some.xml';