Раньше веб-версия YouTube позволяла открывать видео в режиме картинка в картинке (Picture in Picture), но сейчас после перехода в этот режим видео мгновенно сворачивается.
Секретная магия заключается в том, что встраиваемые в веб-страницу видео до сих пор можно спокойно сворачивать и даже слушать в фоне.
И даже не нужно платить 6 баксов!
В интернете очень много генераторов кода для YouTube. Вот один из них. Просто вставляйте ссылку на ролик, получайте его встраиваемую версию и код, запускайте видео на полный экран, нажимайте на иконку PiP и кайфуете, пока это не прикрыли. Добавляйте страницу в закладки, чтобы не потерять.
Для того, чтобы слушать видео в фоне до iOS 14 включительно, выведите его в режиме PiP, заблокируйте телефон, разблокируйте и нажмите на плеере Play. Не очень удобно, но бесплатно. В iOS 15 это поведение изменили и видео просто продолжают воспроизводиться даже после блокировки.
Совсем недавно мы запустили бета-тестирование по заявкам. Решил рассказать про технические проблемы при извлечении статей, что происходит под капотом.
Предыстория
Я делаю веб с 2013 года. Начинал в те времена, когда JQuery был модным (или выходил из моды, не помню), никто особо не делил разработку на фронт и бэк, JavaScript был мерзким, а PHP приятным. В общем, трава зелёная и мозг ещё чистый от академического программирования.
Что тут интересного? Ничего, веб самая лёгкая по порогу вхождения технология. Вот тебе Body, DIV, CSS классы, пару функций JS для работы с DOM и npm. Разобрался? Ты уже почти умеешь в веб и можешь даже деньги зарабатывать.
Интересное начинается, когда из-за простоты и гибкости стандартов, веб начинают делать все, кто хотят. Только не подумайте, что я против: я сам с этого начинал.
Основное содержимое веб-страниц
Слышали когда-нибудь про Facebook Instant Article? Google AMP? Yandex Turbo? Telegram Instant View? Ну в браузерах ещё кнопка такая есть, типа Show Reader View.
Reader View в Safari
Все эти технологии решают примерно одну и ту же задачу – упрощают, ускоряют и стандартизируют потребление контента на своих платформах.
Вы не покидаете приложение, когда открываете ссылку на статью, не ждёте загрузки браузера и мегабайтов зависимостей веб-страницы, короче, быстрее получаете то, что хотите.
При чём здесь эта предыстория?
Разработчики не думают, что их веб-сайты будут обрабатывать машины, максимум вставят мета-теги, типа OpenGraph, чтобы, если кто-то поделится ссылкой на страницу в условном твиттере или она появится в поисковой выдаче, отображалась нарядная картинка с заголовком и описанием.
Карточка в твиттере
Машина не разберётся в вашей разметке вот прямо просто так. Вы и сами не разберётесь, скорее всего, если будете читать вёрстку на одних DIV. Максимум предположите за что отвечает какой-то узел дерева.
Google, Facebook и Yandex не дурят себе голову и предлагают вам самим разобраться с вашим сайтом и отдать содержимое в нужном им формате.
С телеграмом веселее. Ничего перевёрстывать не нужно, достаточно разобраться в их расширении для XPath и написать шаблон, который занимает десяток строк. Только вот будет ли у вашей ссылки кнопка Instant View и не зря ли вы писали шаблон, решат модераторы платформы. Уточка говорит, что зря 🦆
С Reader View интереснее. Исходный код оригинальной реализации в Firefox под названием Readability.js доступен любому желающему. В Safari используется его модификация, если они там ещё всё не переписали.
Но с подходами, которые применяются в Readability для поиска содержимого статей, есть небольшая проблема – они ориентируются на семантику и её уже сейчас нужно переписывать.
Как-то посчитал на паре десятков популярных новостных сайтов применение семантических элементов и “правильность” применения. Оказалось, что больше половины сайтов не использовали семантические элементы или использовали их не совсем корректно. Например, на сайте CNN в article наваливают всё содержимое от шапки до подвала.
А ещё в HTML недавно завезли прикольную штуку под названием Custom Elements. Вы можете сами определять свои собственные теги. Эту технологию можно использовать прямо сейчас. Если завтра кому-то придёт идея использовать её в крупных библиотеках, типа Vue или React, можно будет услышать громкий хруст семантической вёрстки, вы же помните про низкий порог вхождения? Readability на таких сайтах не работает, проверял.
Статья в Artykul, оригинальная страница в Safari и в режиме Reader View
Есть ещё машинное зрение и нейронные сети. Прикинул, как это может работать:
хром рендерит страницу;
некоторый модуль X просматривает страницу и возвращает координаты хрому с основным содержимым;
хром преобразует кусок DOM дерева в этих координатах.
Звучит минимум дорого, если у тебя нет чемоданчика с баблом или проект так и останется навсегда на локальной машине.
Приложение и сервис
Мы хотели приложение, в которое можно добавлять сайты, читать статьи в нативном интерфейсе и даже получать пуши про новые. Делать это независимо от социальных сетей, поисковых систем и опубликованной ссылки в телеграм канале.
Зная проблемы существующих решений и предполагая проблемы в будущем, получился алгоритм, который умеет извлекать основное содержимое из страниц и даже не ориентируется на семантику элементов – забивайте на семантическую вёрстку дальше.
Вся обработка происходит на стороне сервера, клиенты не пыхтят над разбором и не делают лишних HTTP запросов.
Пользователи добавляют сайты, где есть RSS или Atom каналы. Мы поддерживаем любой сайт, который поддерживает эти технологии.
Из RSS или Atom извлекаются только ссылки на статьи и небольшая часть метаинформации. Содержимое фидов разработчики часто режут и оставляют только анонсы, поэтому мы на них не ориентируемся.
Метаинформация статей извлекается комбинировано из потоков, веб-страниц и содержимого статьи, если его удалось определить. Последнее слово всегда за веб-страницей.
Содержимое извлекает полноценный браузер, которому можно скармливать даже сайты, где страницы рендерит JavaScript.
Содержимое статей из HTML преобразуется в JSON с нормальной типизацией (абзацы, заголовки, изображения и так далее), который значительно легче исходной разметки.
По моим замерам, статьи в Artykul в 15 раз меньше, чем исходные HTML документы.
Алгоритм обладает эффектом “памяти”. Чем больше статей обрабатывается с веб-сайта, тем корректнее определяется основное содержимое (при условии, что оно определяется корректно в большинстве случаев).
Для владельцев сайтов и разработчиков
Если вы ведёте блог или вы владелец новостного сайта, давайте дружить. У нас есть некоторые идеи с интеграцией в нашу систему.
Например, мы можем оповещать ваших подписчиков про новые статьи. Есть варианты с более тесной интеграцией, например, счётчики комментариев и активные ссылки на них; дополнительные функции для общения с аудиторией в нашем приложении. Это, наверное, было бы полезно и вам, и вашим подписчикам. А нам интересно, что из этого может выйти.
Если вы разработчик, то у нас для вас очень простое API. Реализовать полноценный клиент, поддерживающий все методы, можно за пару часов. Ещё у нас есть кроссплатформенный клиент для просмотра статей, который можно легко кастомизировать и интегрировать в существующее приложение.
Спустя тысячу лет снова завёл блог, предыдущий как-то сам по себе умер, а я даже и не заметил. Теперь вспоминаю, как писать буквы и слова.
Причина возвращения не моя графомания (на которую как-то нет времени), а Тимур, который попросил написать про технические особенности нашего нового проекта, а у меня и места нет, где это можно сделать.
Писать на чужих платформах про свои проекты так себе: корона с головы магистра упадёт. Могу же сделать свою собственную со всеми своими хотелками и блэкджеком.
Предыдущий блог был на Jekyll, а в качестве хостинга использовался халявный GitHub Pages. Я бы, наверное, снова в нём разобрался, написал бы шаблон и пару плагинов, но вспомнил, что уже год или два пылится собственный редактор, который должен был заменить вузивуг в Ghostly, но там руки не дошли и вообще как-то всё заглохло с перезапуском паблишинга.
В общем, надеюсь, что буду писать чаще, чем пару твитов в год, поэтому ставьте классы и обязательно подписывайтесь на меня в телеграме, твиттере и инстаграме.
Как-то не заметил, что прошло уже несколько недель с прошлой записи, даже почти месяц. Самое интересное, что за это время успело произойти много событий самого разного масштаба, если вы понимаете о чём я. Но я расскажу только про себя.
«Курсач»
Как правило, курсовые покупают и воруют, пока у тебя тема не связана с разработкой оконных приложений или чем-то из этой оперы. Не, конечно, его тоже можно купить, если ты совсем олень, а шекели тянут тебя к земле, но это не слишком рационально: цена этого ебаного быдлокода выходит намного выше, чем если бы заказал на том же фрилансе.
Я же не выделываюсь, пишу ручками. Тему выбрал очень крутую — плеер. Я их написал уже пару штук на js (десктоп, веб); думал, что всё будет очень просто. А ещё кажется, что их уже сотню раз писали, но про проблемы, которые возникают в процессе разработки, никто не говорит, и найти на шарпе вещь с которой можно черпать вдохновение, оказалось не так просто.
Получается как-то так себе, но он работает и время пилить ещё есть. Поэтому с этим мне ещё нужно будет повозиться.
Редизигн логотипа для заводика
Минский молочный завод №1 проводил конкурс на редизайн их очень «крутого» логотипа. И, конечно, студенты сделают за бесплатно. Про конкурс этот нигде не писали; считайте, что эксклюзивный для БГТУ. Я проматерился, но решил прикинуть, что можно сделать с этим всем. И меня что-то унесло, получилось сложно.
Самое классное, что про результаты конкурса так и не сказали. Не, ну интересно же увидеть, хоть и очевидно, что я слил редизигн. Про обманочку узнал, когда логотип был нарисован и мне прислали условия.
4.1 Конкурс проходит в один этап. Результаты этапов отбора не комментируются. Заключения экспертов не оглашаются и не высылаются участникам. Документация, направленная участниками организаторам конкурса, не возвращается.
Обидно? Ну чуть-чуть. Люблю прозрачные конкурсы. Вы, дорогие ребятки, рисуйте и скидывайте, а мы вам даже не ответим. Круто, короче.
Папера
Несколько месяцев занимаюсь своей платформой для постинга бложиков. Пытаюсь сделать удобный текстовый вузивуг (что вижу, то и получаю) редактор и прилепить к нему всю инфраструктуру. Про него я может быть напишу чуть позже.
Лабораторные и учёба
Учиться в технологическом не так просто. Лабораторных самой разной степени полезности реально дохрена. За неделю приходится писать очень много кода. Если вы хотите поступать в БГТУ на факультет информационных технологий, то предупреждаю сразу, что тут не всё так просто. Нагрузки хватает.
И да, их не получится прогулять или не сдать. За первое нужно будет заплатить больше 10$, а второе заканчивается первым, если слишком долго тянешь, не допускают до сессии ну и отчисляют, если совсем овощ.
Всё, что происходит, крайне весело. Усталость — это стиль жизни.
Если вы читали одну из предыдущих записей, то уже поняли, что у меня не получилось развить в себе самодисциплину и писать ежедневно одну запись в блог.
Как оказалось, не так просто выделить с моим режимом это ценное время на написание поста. Сейчас я экспериментирую с полной сменой «рабочего» распорядка дня.
У каждого человека есть своё наиболее продуктивное время. Я решил, что моё это где-то 11 часов вечера и 10 часов утра. Добавим к этому, что спать я отправляюсь поздно ночью, а встаю в 6 утра пять дней в неделю. Досыпаю я днём, а голова вечером ещё и ватная. Такой режим сна и работы знаком, наверное, большинству студентов.
Утром хочется забить абсолютно на всё и никуда не идти, но нет, даже расписание в университете не позволяет такой роскоши. Приходится вставать с мыслью о том, что вот приду и высплюсь.Коэффициент полезного действия начал стремиться к нулю. Решил, что пора брать сон в свои руки. Отказался от дневного сна, сплю по уведомлениям, что пора спать, от айфона и уже замечаю рост продуктивности.
Это я к чему всё?
Я думал, что могу делать вещи хорошо только в определённое время суток. Оказалось, что я всё делаю одинаково херово в любое время суток. Не обманывайте себя, как я. Выбирайте продуктивное время сами, не давайте это делать вашему режиму.Попытаюсь писать чаще.
