Всем привет! На этой неделе с вами я, Мария Просвирнина. Сейчас я тимлид фронтенд команды в
@Okkomovies и соведущ… twitter.com/i/web/status/1…

Кратко напишу про свой бекграунд) Около 2.5 лет я работала в криптостартапе, делающем биржу криптовалют. Сейчас око… twitter.com/i/web/status/1…

А однажды я случайно познакомилась с организаторами @spb_frontend, и с тех пор пошло-поехало комьюнити-движение🙂 В… twitter.com/i/web/status/1…

@jsunderhood @spb_frontend @mamu_eval @webstandards_ru Эх, СПб фронтенд дринкаст вообще был моим первым и любимым п… twitter.com/i/web/status/1…

Завышенная же самооценка может влиять негативно на человека, так как отбирает у него мотивацию развиваться и менять… twitter.com/i/web/status/1…

Прямо сейчас мы находимся в переходном периоде.
У нас появился скрам и спринты по 2 недели. Продуктовым направление… twitter.com/i/web/status/1…

Если посмотреть на tlroadmap.io/guide.html, сейчас из этой схемы ко мне больше всего относятся People Manager и Tec… twitter.com/i/web/status/1…

А как устроено у вас в компаниях?)

Во-первых, не было проблем с коммуникациями. На удаленке все просто плавно переместились из личного общения в телег… twitter.com/i/web/status/1…

Во-вторых, не было напряжения, что кто-то дома не будет работать и обязательно нужно проследить. У нас не было и не… twitter.com/i/web/status/1…

Есть априорное уважение, что все взрослые люди и сами могут эффективно распределить свое время, выполнив взятые задачи.

Процесс оценки и распределения задач идет по скраму — планнинг, pbr, ретро. Созваниваемся в тимсе.
Так же каждый де… twitter.com/i/web/status/1…

Главная проблема удаленной работы — ослабление личных связей. Особенно когда во время удаленки выходят новые люди.… twitter.com/i/web/status/1…

Мне было 16 лет, это был 10 год, я вбила в гугл «где учиться на программиста» и прочитала на разных форумах тогда п… twitter.com/i/web/status/1…

Математику я любила, и это мнение мне понравилось) Я поступила на матмех СПбГУ и через 5 лет получила диплом, в котором написано «математик»

О теликах! Сейчас я не пишу под Смарт ТВ, моя команда занимается только вебом. До этого я работала с ними около 1.5… twitter.com/i/web/status/1…

Операционные системы ТВ — Android и разные Linux-based системы. Три самых крупных вендора в РФ — Samsung, LG и Sony… twitter.com/i/web/status/1…

Далее есть огромное количество вендоров с меньшей долей рынка — Panasonic, Philips, Hisense, TCL, Haier, Loewe... Н… twitter.com/i/web/status/1…

Некоторые вендоры ставят разные линуксовые ОС на разные модели. Так в 19-м году у Panasonic были модели на трех разных ОС.

Кроме теликов есть ТВ приставки — Playstation, Xbox. Для разработки под PS нужно использовать WebMAF SDK, и есть св… twitter.com/i/web/status/1…

Веб-приложение можно распространять не только на Linux-based системах, где без иных вариантов, но и на Android. Луч… twitter.com/i/web/status/1…

Помните эту статью?
css-tricks.com/the-div-that-l…
И это всего 5 браузеров) На теликах можно столкнуться больше, чем с 10… twitter.com/i/web/status/1…

я вот как раз ТВ выбираю и несколько шокирован обилием платформ. Я думал они уже все давно на Android.

О теликах! Сейчас я не пишу под Смарт ТВ, моя команда занимается только вебом. До этого я работала с ними около 1.5… twitter.com/i/web/status/1…

13:08

@jsunderhood у нас хоть только Tizen и WebOS HTML приложение, но от их вариаций уже становиться плохо.. учитывая, ч… twitter.com/i/web/status/1…

ТВ приложение на линуксовых ОС — чаще веб приложение. Когда пользователь жмет на иконку приложения, открывается пре… twitter.com/i/web/status/1…

Для WebOS и Tizen можно написать нативное C/C++ приложение, возможно, с другими вендорами тоже можно договориться.… twitter.com/i/web/status/1…

Да, так же для Tizen и WebOS вы отправляете не ссылку, а билд приложения c html/js/css, архивированный в zip архив… twitter.com/i/web/status/1…

Куда же все это отправлять или как установить свою ссылку в магазин приложений телика?
У Samsung, LG, Panasonic, PS… twitter.com/i/web/status/1…

Это похоже на ревью приложений в App Store)

В этом году наши ТВ разработчики написали и запустили с нуля новое приложение, которое написано на preact + typescr… twitter.com/i/web/status/1…

У каждой платформы есть свой «платформенный код», относящийся только к ней. Например, он может быть связан с особен… twitter.com/i/web/status/1…

@jsunderhood coub.com/view/z424g

UX на ТВ драматически отличается от обычного веба.
Пользователь смотрит на приложение с 3-х метрового расстояния и… twitter.com/i/web/status/1…

Визуальные элементы должны быть БОЛЬШИМИ, а количество информации, которую можно уместить во вьюпорт, снижается
Так… twitter.com/i/web/status/1…

Перемещение по приложению происходит с помощью кнопок ➡️⬆️⬇️➡️. В интерфейсе нужно ярко выделять фокусный элемент и… twitter.com/i/web/status/1…

Такая навигация называется Spatial navigation.
Сначала, самая простая часть, надо понять, какая из кнопок была наж… twitter.com/i/web/status/1…

Иногда боль начинается уже на строении пульта. Кнопка доооооолго жмется вниз, доооооолго отжимается обратно, и прим… twitter.com/i/web/status/1…

Для перевода фокуса по ивентам с пульта в приложении должен быть фокусный движок.
Есть драфт CSS Spatial Navigatio… twitter.com/i/web/status/1…

Но можно заюзать полифил!
wicg.github.io/spatial-naviga…
На этом сайте демка) Попробуйте поперемещаться по нему кнопками.… twitter.com/i/web/status/1…

@melioraa @jsunderhood мы используем github.com/NoriginMedia/r… но без костылей и проседания перформанса не обходиться… twitter.com/i/web/status/1…

Вводная статья нетфликса про spatial navigation:
netflixtechblog.com/pass-the-remot…
Вообще у них крутой техблог!
А у тех коман… twitter.com/i/web/status/1…

Воспользоваться приложением browser для такого же нельзя — в нем нет поддержки кучи api

Удачное тестирование в dev apps не гарантирует, что все будет работать в реальном приложении. В моей практике был с… twitter.com/i/web/status/1…

Еще на некоторых, как на tizen, девелоперскую сборку можно установить с флешки

В какой-то момент всем надоело мучиться с разными способами установки на каждый телик + несоответствие тестовой сре… twitter.com/i/web/status/1…

И тут все стало круто и удобно 😎

Для дебага верстки и js в консоли на конкретном телике мы используем weinre, Web Inspector Remote
people.apache.org/~pmuellr/weinr…

Если локально запустить node js сервер, то другое устройство в этой же локальной сети может обратиться к нему по ад… twitter.com/i/web/status/1…

Самый кайф — запустить локальную сборку сразу на куче теликов и, меняя джаваскрипт код, наблюдать как на них всех о… twitter.com/i/web/status/1…

Не то чтобы это часто нужно на практике, зато красиво! и можно почувствовать себя хакером 😊

В целом, вместе со всеми инструментами сверху разработка под ТВ становится даже... комфортной!😮
Плюс разработчик вз… twitter.com/i/web/status/1…

И это интересно! 🙂

Это такая роль в команде, на которой нужно

Тестирование на стороне вендоров, любых, находит два типа багов:

Быстрее всего исправляют платформенные баги небольшие китайские вендоры.
Сначала я была в шоке от сообщений «так, н… twitter.com/i/web/status/1…

У меня осталось впечатление, что в Китае ОЧЕНЬ много работают

Я больше не занимаюсь ни вендорами, ни теликами, и могу признаться в любви ❤️ К Sony
Однажды мы с коллегой были на… twitter.com/i/web/status/1…

Там же классный "музей" техники Sony, который по своей инициативе собирают сотрудники pic.twitter.com/cxk691OA2O

Самое крутое — роботы-собаки🥰
Это одно из самых первых поколений pic.twitter.com/w5YiPNFOxK

Этот красавчик ездит на самокате pic.twitter.com/yBvODT4sYG

Поколений этих роботов довольно много. Самые новые умеют по голосу распознавать эмоции и будут пытаться вас рассмеш… twitter.com/i/web/status/1…

То же верно и для опенсорса — маленькие проекты со свежими мотивированными мейнтейнерами часто отвечают и исправляю… twitter.com/i/web/status/1…

Быстрее всего исправляют платформенные баги небольшие китайские вендоры.
Сначала я была в шоке от сообщений «так, н… twitter.com/i/web/status/1…

8:02

Считаете ли вы свою работу творческой?

Такое направление называется creative coding. Это все, что находится стыке программирования и искусства. Чаще созда… twitter.com/i/web/status/1…

Есть даже целый ряд университетов, где можно получить степень Creative Computing или Creative Media Technology!
Нап… twitter.com/i/web/status/1…

Если нужен сайт, можно пойти в веб студию. А если захочется художественную инсталляцию, в creative coding студию… twitter.com/i/web/status/1…

@jsunderhood всегда можно написать такой код, чтобы довести других программистов до слёз 😉 вполне эмоционально

@jsunderhood Еще сам к примеру использую на стыке косплея, крафта и выступлений (и даже с использованием js, а не т… twitter.com/i/web/status/1…

Site specific browser feature позволяла установить приложение на домашний экран. Она выпиливается без планов на воз… twitter.com/i/web/status/1…

На мой взгляд, идеальное веб приложение на мобильных было бы похоже на хорошее нативное ios приложение

Естественно с красивым переходом между страницами🙂 pic.twitter.com/BjEVUmTzZn

Последние два Chrome dev summit гуглеры рассказывают про html portals.
По сути это новый html тег, который делает п… twitter.com/i/web/status/1…

Визуально <portal> похож на <iframe>, отрисовывая новую страницу поверх открытой.
У него есть метод activate(), кот… twitter.com/i/web/status/1…

Если убрать <portal> за пределы вьюпорта и в момент, когда пользователь нажал на ссылку, активировать портал, добав… twitter.com/i/web/status/1…

К сожалению, как часто бывает, это чисто Chrome фишка. И та под флагом в Canary.
Драфт спецификации:… twitter.com/i/web/status/1…

Интересно, что при начальном рендеринге страницы браузер вынужден посчитать и построить весь ее layout целиком.
Да… twitter.com/i/web/status/1…

Потому что в css есть такие клевые свойства как position: absolute или fixed.
Можно выдернуть какой-нибудь див-пото… twitter.com/i/web/status/1…

Если у элементов, находящихся за пределами начальной видимой части страницы, дети не выпрыгивают куда не стоит, для… twitter.com/i/web/status/1…

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

К content-visibility: auto; нужно добавлять
contain-intrinsic-size: element-size;
Иначе из-за отложенного вычислен… twitter.com/i/web/status/1…

Для «длинных» сайтов со множеством вложенных элементов это мегафича! Перфоманс можно ускорить в разы.
Особенно на м… twitter.com/i/web/status/1…

Использовать можно уже сейчас🙂
Заработает только в Chrome😔
Но никак не помешает остальным🙂

Заканчивается последняя предновогодняя неделя. Кто помнит, как раньше любили добавлять падающие снежинки на сайт?)

Я добавляла падающие снежинки на свой сайт на narod.ru 😎😎 лет в 14

@jsunderhood А муравьев 🐜 бегающих за курсором кто помнит? )) это годы 2003-2007 примерно

А кто помнит народ.ру? У меня там даже сайт был.

Я добавляла падающие снежинки на свой сайт на narod.ru 😎😎 лет в 14

9:56

@jsunderhood npm i react-snowfall

@jsunderhood @barinbritva Я недавно делал. Правда, падал там сафари.

Завершилась моя неделя в jsunderhood.
На предновогоднее прощание фото ёлки, которая стоит с 1 декабря, но до сих п… twitter.com/i/web/status/1…