Как скачать  видео, доступное для просмотра в microsoftstream.com

Ради научного интереса и движения прогресса
Просто оставлю это здесь
«Как скачать  видео, доступное для просмотра в microsoftstream» чтобы не запрашивать права у автора

Ставим node (и git, если гита нет то просто скачиваешь архив по ссылке ниже)
затем по инструкции: https://github.com/snobu/destreamer
git clone https://github.com/snobu/destreamer
cd destreamer
npm install
npm run build

в папку проекта скачай и положи ffmpeg.exe от сюда https://ffmpeg.zeranoe.com/builds/

затем в корне проекта командой например из powershell запускаешь

./destreamer.ps1 -i https://web.microsoftstream.com/video/9d151489-a94d-4095-a8e8-ae8f22c4bd82

спросит пароль от микро софт эккаунта
и начнет качать

mod_rewrite .htaccess заменить в URL символ «?» на «@»

#
RewriteEngine on
RewriteBase /
RewriteEngine On
RewriteCond %{QUERY_STRING} ^(.+)$
RewriteRule (.*) [email protected]%1? [R=permanent]

пару часов промучался пока н нашел по запросу mod_rewrite: remove query string from URL?  https://stackoverflow.com/questions/3457022/mod-rewrite-remove-query-string-from-url

понадобилось при скачивании из Архива Интернет проектов — в них в названи файлов, содержащих query запрос через «?» в карте сайта замещаются на «@»
и так сохраняются на мой сервер, чтобы не переликновывать — см выше

 

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

Условия задачи

Стоит домашний сервер для бэкапов
Внешнего IP нет — даже динамического. Интернет провайдер выдал мне локальный IP за файрволом

Внимание вопрос — как с внешнего мира подсоединиться к моему домашнему серверу по SSH 22 порт

на клиенте
https://www.digitalocean.com/community/tutorials/ssh-ubuntu-18-04-ru
ssh-keygen
ssh-copy-id ruslan.pogonyalo.com
теперь клиета будет пускать сюда без паролоя

Далее
https://medium.com/@gabriel.bentara/ngrok-you-might-not-need-it-de4e3e34a55d

Открываем 5000 порт на сервере
iptables -I INPUT -p tcp -m tcp —dport 5000 -j ACCEPT

ssh -f -N [email protected] -R 5000:localhost:22
на клиенте и теперь клиент (локальный сервер) дотупен через 5000 порту внешнего сервера

PWA Progressive Web Apps своими руками. Продолжаем ускорять сайт

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

Разработчики имеют возможность создавать практически первоклассные приложения с использованием веб-технологий, что всегда значительно проще и дешевле в обслуживании, чем создание собственных приложений. Особенное преимущество PWA — кроссплатформенность. Также одним из преимуществ можно выделить отсутвие необходимости готовое приложение регистрировать в маркетах приложений (таких как Google Play Маркет и App Store), так как приложение устанавливается на телефоне прямо из браузера).

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

— Работа в оффлайне
— Быстрая загрузка
— Работа по защищенному протоколу
— Умеет в push-уведомления
-Может выглядеть как полноценное приложение без строки адреса в браузере

Если это Вордпресс, не морочим голову ставим плагин https://wordpress.org/plugins/super-progressive-web-apps/
В исхоДном коде WP подсматриваем как выглядит идеальный manifest

  • Иначе по инструкции:
    — Переносим в корень проекта sw.js (берем тут https://github.com/nofikoff/progressive_web_app)
    — Режем иконки с помощью сервиса https://www.favicon-generator.org/ подключаем их в head проекта. (не забудь 512х512)
    — Создаем манифест, подключаем его в head проекта <link rel=»manifest» href=»/manifest.json»>
    — В head проекта указываем
<script>
if (navigator.serviceWorker.controller) {
console.log('[PWA Builder] active service worker found, no need to register')
} else {
navigator.serviceWorker.register('sw.js', {
scope: './'
}).then(function(reg) {
console.log('Service worker has been registered for scope:'+ reg.scope);
});
}
</script>

Тестируем PWA через

— Хром / аудит
— https://www.pwabuilder.com/ здесь тюнинг и дополнительные фичи

SEO оптимизация картинок ресайз автоматом по User-agent посетителя

Данный скрипт повышает на несколько процентов оценку скорости для мобильной версии сайта по https://developers.google.com/speed/pagespeed/insights/

  1.  От CMS не зависит, т.к. сам выбирает из всех запросов на сервер только картинки
  2. PHP ресайзит картинок шире 375px до указанного размера на основании заголовка мобильной версии браузера.

php файл берем здесь: https://github.com/nofikoff/image_optimyze

.htaccess добавить строки:

## РЕСАЙЗИМ КАРТИНКИ С КЭШЕМ by Novikov
RewriteEngine On 
RewriteCond %{HTTP_USER_AGENT} ^.*(Android|BlackBerry|Phone).*$ [NC]
RewriteCond %{REQUEST_URI} ^(.*\.png|.*\.jpg|.*\.jpeg|.*\.gif)$
# Если хочешь чтобы был реджирект на новый размер картинки то ставь [L,R] иначе [L] без редиректа
RewriteRule ^(.*)$ /thumb.php?width=375&image=%1 [L]

Установка

  • php файл thumb.php положить в корень проекта
  • в корне добавить в существующий .htaccess соедержимое блока что выше. если .htaccess не существует — создать

Описание

  1. .httaccess фильтр для картинок. Влияет ТОЛЬКО на запрашиваемые файлы типа картинка И ТОЛЬКО С МОБИЛЬНЫХ по USER Agent
  2. если мобильный посетитель пытается скачать картинку — вызывается скрипт thumb.php и вместо картинки выдается его содержимое
  3. алгоритм работы thumb.php скрипта:
    • если ширина картинки меньше заданной 375 — ничего не делаем, выдаем оригинал картинки
    • если ширина картинки больше заданного порога 375, пропорционально ресайзим ее по ширине до 375
    • сохраняем полученый ресайз в кэш сайта,  чтобы не ресайзить повторно одну и туже картинку

CLOUDFLARE ПРОБЛЕМА

  1. CDN клаудфлар обнуляет этот скрипт оптимизации картинок, т.к. запоминает первый попавшийся вариант картинки. В зависимости от того, какой размер картингки скачали ПК юзверь или Мобильный пользователь
  2. Варианты с редиректом на новый адрес картинки для мобильных пользователей — не работает
  3. Максимум чем данный скрипт может быть полезен (для проектов закрытых Cloudflare), это автоматически оптимизировать все картинки в проекте без учета типа пользователя, например на максимальную ширину картинок не более 800 пикселей. И сохранить их  в кэше сайта, не трогая оригиналы.

UPDATED CLOUDFLARE

  1. Если сайт закрыт клаудфларом — .htaccess для нашей задачи бесполезен (см. выше обоснование)
  2. На стороне клаудфрара есть нужный нам механизм (до 100.000 запросов в сутки бесплатно) Workers https://developers.cloudflare.com/workers/ 
  3. Добавляем новый скрипт Wokers и прикрепляем его к роутеру вида (для вордпресса например так) MYSITE.com/wp-content/uploads/*
  4. Скрипт на стороне клаудфлара повторяет тот же механизм с редиректом на ресайзнутую картинку
  5. TODO: переписать скрипт ниже чтобы вместо редиректа на ресайз — выдавалась сама картинка нового размера.
/**
 * sets up routes and redirects them to a location based on a map
 * @param {Request} request
 */

async function handleRequest(request) {

let requestURL = new URL(request.url)

let location = "https://" + requestURL.hostname + "/thumb.php?width=375&image="+requestURL.pathname

let neededExtRegExp = new RegExp(/\.(jpeg|jpg|png|gif)$/)

let device = request.headers.get('CF-Device-Type')

let userAgent = request.headers.get('User-Agent') || ''

if (neededExtRegExp.test(requestURL.pathname)) {

   //if (device === 'mobile') {

  if (userAgent.includes('Phone') || userAgent.includes('Android') || userAgent.includes('BlackBerry')  ) {

      if (location) {

        return Response.redirect(location, 301)

      }    
   }
}

  //return the original request
  return fetch(request)

}

addEventListener('fetch', async event => {
  event.respondWith(handleRequest(event.request))
})

 

Лучший в мире сайт mckinneyyork.com

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

Система управления вордпресс. Шаблон их самописный.
Сделать такое с нуля — НЕ реально! Уж очень все продумано до мелочей 😉 Есть одна слаааабая такая теоретичекая надежда, что они сделали на базе готового шаблона, но я не нашел

Можно только содрать один в один их хтмл+javascrip и поменять картинки, цвета, тексты, количество страниц.

Но если контент (фото, видео, корп стиль) будет какой попало — или его не будет совсем (сделайте сайт — мы потом наполним)
Лучше даже не начинать — 90% успеха поднобном проекте — это контент

Все равно что попросить разработать полиграфиеский рекламный буклет как у Эппла, но контент мы дадим потом

Вывод:
— по сложности и качеству контента — привлекались профи фотографы и художники (объекты у них в краандаше)
— по качеству задумки и реализации сайта — высший пилотаж
думаю им сайт обошелся тысяч 10-20$

мы можем передрать долларов за 500$
и основной бюджет здесь — отсутсвие ТЗ, дотягивание мелочей и переделывание фиг знает еще чего

Update: в догонку

их сайт входит в топ лучших сайтов архитектурного дизайна
тут еще примеры
whatpixel.com/architecture-websites-gallery/

оказывается есть такая професия архитекуторынй фотограф
вот чувак им фотки делал www.brianmihealsick.com/gallery.html?gallery=McKinney%20York&sortNumber=1&skipno=0

phpMyAdmin вкладка Designer

http://stackoverflow.com/questions/19166687/how-do-i-enable-phpmyadmins-designer-view

дамп тут https://raw.githubusercontent.com/phpmyadmin/phpmyadmin/RELEASE_4_0_7/examples/create_tables.sql

не забудь почистить куки

и в конце основного и сэпл конфига вставить

$cfg['Servers'][$i]['pmadb'] = 'phpmyadmin';  
$cfg['Servers'][$i]['bookmarktable'] = 'pma__bookmark';
$cfg['Servers'][$i]['relation'] = 'pma__relation';
$cfg['Servers'][$i]['table_info'] = 'pma__table_info';
$cfg['Servers'][$i]['table_coords'] = 'pma__table_coords';
$cfg['Servers'][$i]['pdf_pages'] = 'pma__pdf_pages';
$cfg['Servers'][$i]['column_info'] = 'pma__column_info';
$cfg['Servers'][$i]['history'] = 'pma__history';
$cfg['Servers'][$i]['table_uiprefs'] = 'pma__table_uiprefs';
$cfg['Servers'][$i]['tracking'] = 'pma__tracking';
$cfg['Servers'][$i]['designer_coords'] = 'pma__designer_coords';
$cfg['Servers'][$i]['userconfig'] = 'pma__userconfig';

Windows приложения перехватывает виде поток и сохраняет его Youtube Facebook трансляции и вебинары

Metadata-Version: 1.1
Name: futures
Version: 2.1.6
Summary: Backport of the concurrent.futures package from Python 3.2
Home-page: http://code.google.com/p/pythonfutures
Author: Alex Gronholm
Author-email: [email protected]
License: BSD
Download-URL: http://pypi.python.org/pypi/futures/

 

livestreamer\livestreamer.exe «https://www.youtube.com/watch?v=w6xlgaGLV_k» best -o 01.mp4

livestreamer\livestreamer.exe «https://www.facebook.com/llludima/videos/1587146981595679/» best -o 06.mp4

JS Управление вебкамерой

http://mycodingtricks.com/javascript/webcam-api/

на Израильском корпоративном сайте поставил механизм захвата фото с вебкамеры и алоуда на m-files копо сервер

оказывается Хром не работет с вебкамерой в jS без https://