Доброе утро! Первый доклад второго дня ScotlandJS отменился, начинаем на час позже. Посмотрите пока на вулкан pic.twitter.com/StZUr1qToH
@iamfrntdv, Apple не занимается продакт-плейсментом
Начинаем pic.twitter.com/1AA7xDCy5v
Открывает второй день ScotlandJS Мэтт Клэйпотч @potch с докладом «10 Feet and Rising. Building television-friendly web pages».
Как все дети из своего поколения, Мэтт вырос перед телевизором, устроился в Mozilla, а тут в офисе повесили 2 телевизора на стену…
Так родился проект Corsica github.com/mozilla/corsica pic.twitter.com/S6w6SG9zSh
Например, утилита gslide показывает слайд из Google Slides, то есть даже не нужно знать технологии, чтобы что-то показать на ТВ.
И куча другой полезной информации: сколько блокеров перед релизом, статистика или просто кнопка «щеночки», которая показывает гифку.
Выходит замученный человек с митинга, нажимает кнопку «щеночки», смотрит гифку, получает свой эндорфин и довольный идёт дальше.
Главный секрет: ТВ — это просто телефон, который далеко и вы не можете его трогать. Всё.
То есть всё, что сделано для мобильных сайтов вполне прилично выглядит на ТВ. Разница в размерах компенсируется удалённостью.
Очень полезные единицы вьюпорта 1vw = 1% от ширины экрана, 1vh — от высоты. Очень полезно. @media tv просто не работает, хотя есть в спеке.
На ТВ нет курсора (или есть, но плохой), иногда есть клавиатура или стрелки, поэтому доступность с клавиатуры здесь встаёт в полный рост.
Как же засунуть браузер в ТВ? ChromeCast не очень, Amazon Fire чуть проще, но можно подключить Raspberry Pi, для него есть браузеры.
Очень помогают mDNS en.wikipedia.org/wiki/Multicast… и DIAL dial-multiscreen.org
@Allariel1, выясняйте контекст, пожалуйста, прежде чем давать ненужные ответы. Это трансляция доклада.
Зачем ввязываться в этот бардак? До сих пор сложно показать что-то на экране ТВ. Вы можете сделать что-то, что увидят люди, смотри, я на ТВ!
Клэй Смит @smithclay с докладом «Introduction to HTTP/2: The Weird Parts» на ScotlandJS.
Чего не будет в докладе pic.twitter.com/EsTbOvxCLE
H2 или «эйч-ту» — это HTTP/2, чтобы короче.
Даже на оптике запрос из США до Европы может идти 80 мс, что на грани того, что начинает замечать человеческий мозг.
Количество TCP-соединений на сайтах в среднем около 40 и медленно растёт с годами.
H2 позволяет не применять знакомые нам практики оптимизации, вроде спрайтов и склейки файлов, уже больше, чем для 67% браузеров.
Данные можно отправлять ещё до того, как их запросили pic.twitter.com/oWPYsqTNRP
Интересный фрейм PING в H2, который проверяет соединение, не отправляя запроса.
Wireshark 2.0 уже умеет работать с H2 и анализировать отдельные фреймы — wireshark.org
Также mitmproxy — mitmproxy.org pic.twitter.com/mrPj2D2xLO
Сильвия Пина @smourapina с докладом «How cognitive psychology can help you write better code» на ScotlandJS.
Понимание когнитивных процессов помогает решать задачи лучше.
Кремниевый компьютер, более известные как просто «компьютер» и углеродный компьютер, более известный как «человек».
Назовите цвет слова. Сложнее всего разобраться с третьей колонкой, т.к. читаете вы автоматически.
Поэтму нам нужна (полезна) подсветка кода pic.twitter.com/cWxMfOk1Fd
У нас есть 2 когнитивных системы pic.twitter.com/PNhSciJFEk
@toivonens, предыдущий твит
Боб одинокий и скромный, что вероятнее: а) он программист или б) он программист и любит онлайн-игры? Кажется, что б, но а просто вероятнее.
Когнитивная предвзятость: картинка справа «случайнее», а кажется, что слева. pic.twitter.com/oZIxrUrWfu
Знакомых вам частей кода кажется больше, чем незнакомых. Предвзятость известного.
Из-за порядка цифр средний ответ на такое задание отличается. Опять предвзятость pic.twitter.com/Xiyl8Y7DNu
Если вы нашли баг, вы вероятнее будете искать подтверждение находке, а не опровержение.
Некоторой предвзятости просто не избежать, но важно о них знать pic.twitter.com/6u9JOqzksI
Список когнитивных искажений — ru.wikipedia.org/wiki/Список_ко…
«Мы не думающие машины, которые чувствуют. Мы чувствующие машины, которые думают». Антонио Дамасио
Что читать pic.twitter.com/5eELfLE91p
@hellbeast92, нормально или равномерно, конечно, но речь о случайности.
@LaterListener, это не тест на сообразительность, это демонстрация склонностей людей, которые могут приводить к ошибкам.
@_h4_ @andrey_sitnik, ну да: Si и C, какая разница
Сиджей Сильверио @ceejbot из npm с докладом «Monitoring on a budget» на ScotlandJS.
10 000 запросов в секунду
25 человек и 4 занимаются реестром. Начинали с 5 человек, всё в огне. Иногда успех — это катастрофа.
Иногда логов слишком много, но у вас же есть бюджеты и масштабы, чтобы разобраться со всем этим, да? Нет, не всегда.
В npm используют Nagios для мониторинга nagios.org
Мониторят даже количество ишьев в публичном трекере на Гитхабе. Если пошёл поток — значит что-то пошло не так.
Если что-то случилось, значит нужно кому-то позвонить и исправить. Если команда небольшая — по каждому поводу не позвонить.
Поэтому внедряются автофиксы для простых случаев. Постоянные или временные.
Внешние сервисы, независимые от инфраструктуры npm, пингуют реестр и проверяют как всё работает.
Типичный стек от данных до графиков для мониторинга pic.twitter.com/fVtktyEZZy
— I’d tell you UDP joke but I’m not sure you’ll get it.
Хочешь дёшево и стабильно — напиши сам pic.twitter.com/UeZ8OAmKl8
Самописная система numbat — github.com/numbat-metrics… pic.twitter.com/gfmrYXrayN
Метрики → уведомления. Ожидаемо, нормально? Хм, откуда столько 404 у left-pad?
Начинайте с простых вопросов: работает — да-нет, потом сложнее — почему? Потом уже анализируйте аномалии.
npm i -g npm@latest
Юэн Деннис @ewanovitch с докладом «Personal Data Mining (Not) Just For Fun» на ScotlandJS.
Наши данные персональные данные: страшно их иметь в руках коммерческих компаний, но интересно проанализировать их самим.
Юэн собрал больше 1000 записей про сон новорождённой дочери, чтобы понять паттерн
Выяснил: Молли спит ночью, хм.
Но после заинтересовался сбором данных в принципе.
Юэн включил все датчики на телефоне на запись во время полёта, а потом сложил данные с публичными данными о рейсе.
Опять же: уже интересно, но ещё не очень полезно.
Проект с данными о полёте — github.com/ewandennis/d3-… pic.twitter.com/resZPvSYp5
Следующий проект: изучил собственные финансы и построил графики github.com/ewandennis/d3-…
4000 £ на пиццу, повод задуматься pic.twitter.com/cFR1Ubvo6n
Анализ зарплаты pic.twitter.com/hNlbpV6ExX
Было ли это всё полезно? И нет, и да — это только попытки раскрутить тему, но узнал больше о себе, об окружающих и новых инструментах.
Жизнь пролетает быстро и если не останавливаться и не анализировать происходящие, можно всё пропустить.
Кэт Хоукер @auberdjinn из BBC с докладом «Creating accessible components» на ScotlandJS.
Множество устройств доступности для работы с сайтами и приложениями: голосовые помощники, спец. клавиатуры и др.
Все такие устройства сложно достать, но с чего начать pic.twitter.com/Eg2KJZiHmh
Визуальная доступность pic.twitter.com/6j9XmTLIhQ
Доступность с клавиатуры pic.twitter.com/yuP3zbTmY1
Установка фокуса при активации виджета, чтобы в него можно было попасть pic.twitter.com/MnHad7PRdx
Кроме клика важно назначать ещё и обработчик клавиатуры: победа или ввода pic.twitter.com/ZI33qZDdst
Популярные читалки pic.twitter.com/pWAjODpJ6U
Даже если вы делаете кастомные чекбоксы, стройте их на основе настоящих и прячьте pic.twitter.com/gz6HnGIPBj
Но не всё найти в HTML, для этого придумали ARIA, чтобы можно было описывать сложные интерфейсы и взаимодействие их частей доступным образом
Раскрывашка pic.twitter.com/7698dTbsoW
ARIA не делает ничего за вас, для этого JavaScript. ARIA только описывает взаимоотношения.
Полезное руководство с примерами доступных решений: WAI-ARIA 1.0 Authoring Practices — w3.org/TR/wai-aria-pr…
Что насчёт AJAX — если какие-то части интерфейса меняются, то как об этом рассказать пользователю.
Область с атрибутами aria-role="region" и aria-live="polite" для изменений и уведомлений.
У нас перерыв на обед, вернёмся в 16:35 по Москве, а пока вопросы-ответы pic.twitter.com/Z4mDdAfisZ
@codeninja_ru, речь о том, что наши представления о правильном или случайном иногда мешают нам принять решения. Чаще выбирают левую.
Эван Морикава @E0M с докладом «JS Takes the Desktop: Electron, React, and Native Win/Mac/Linux Experiences At Scale» на ScotlandJS.
Приложения на JS на компьютерах, посчитайте, сколько вы из них используете? pic.twitter.com/aPetZjowA0
Под «компьютером» (десктопом) подразумевается что-то с мышкой, клавиатурой и большим экраном.
История компьютеров длинная, а вот фреймворки, по-хорошему, стагнируют: Swing, Qt, Cocoa, GTK, WPF/WinRT… и тут NW.js (Node WebKit)
Правда у NW.js частенько по правой кнопке у приложений были «назад и перезагрузка», так себе
Следующая большая вещь: Atom Shell → Electron, обёртка над Chromium. Эван сам автор почтового клиента Nylas N1 nylas.com
Chrome стартует и запускается большой фоновой бэкенд-процесс, который уже запускает рендереры (вкладки). Electron заменил бэкенд на Node.js.
Архитектура N1 pic.twitter.com/n8i60maU8J
Что же это даёт? Нативное, родное ощущение. Да, можно переписывать правую кнопку на своё меню или просто отключать.
Ну и никаких проблем с кроссбраузерностью! Можно делать трюки с полупиксельными рамками на ретине.
Эван открывает инспектор, меняет класс на <body> с darwin на windows и меняет интерфейс клиента на Windows 10. Вуаля!
Быстродействие. Разве веб на компьютерах не медленнее, чем написанный на Си?
Если вы отладили всё в привычном профайлере Chrome DevTools до 60 fps, то какая разница, на чём это написано?
Когда N1 нужно переваривать гигабайты писем, они просто открывают ещё одно окно (процесс) и интерфейс продолжает работать без тормозов.
Файловая система, данные и офлайн. Строится очередь запросов, если нет сети, а потом пишется на файловую систему, если браузер закрылся.
Rx.js (привет Мэтту!) pic.twitter.com/TpOMG72GZG
Ну и конечно плагины и расширения для N1. Как и для Atom, плагины очень простые и их много.
Команда N1 pic.twitter.com/slAe6MjmKE
RT @E0M: Thank you @ScotlandJS! Here are my slides. Please ping me if you have more questions about @electronjs or @nylas N1!
speakerdeck.com/emorikawa/js-t…
Робин Мейнер @rmehner с докладом «Surviving JavaScript» на ScotlandJS.
JAVASCRIPT ВЕЗДЕ
Новое появляется каждый день и это хорошо, столько интересного. Но это и плохо — слишком много, слишком сложно. Проблема: у всех есть мнения
Много времени уходит просто на то, чтобы не отстать, уж не говоря про написание своего нового.
Контрибьютить в проекты — не просто писать код. Это и развитие проекта, и документация, и поддержка сообщества.
Перевести код на стрелочные фукнции — да! Написать нормальный ридми и доки инклюзивным языком — скучно ((
Ты пишешь JS, который сегодня работает вообще везде, но все кругом продолжают говорить, какой это плохой язык.
Тяжеловато.
Тактика выживания:
1. Откажитесь от мнения и выберите что-нибудь, вроде standard.js для стиля кода.
2. Пусть мнения будут у роботов, то есть линтеров. Пусть линтеры спорят с комитами, а люди делают что-нибудь полезное.
3. Двигайтесь быстро, ломайте, чините.
4. Выгорание — не шутка. Отдыхайте, отвлекайтесь. pic.twitter.com/RKcsjPgWh7
@sergey23z, шаг до бана, держите себя в руках
Помните io.js? Кто-то просто переждал на 0.10 и ничего не потерял, по-хорошему. Наоборот, было время на более важные вещи.
Не знать всё на свете — нормально. Нельзя знать всё, не чувствуйте себя плохо из-за этого. Найдите место, не ломайте, не пережигайте себя.
Важен не код. Важны люди.
@Soukhinov, инклюзивный, включающий всех, не ограничивающий
@Soukhinov, это прямая трансляция, подробности в Гугле.
Ирина Шестак @_lrlna с докладом «Javascript Takes on Genetically Evolving Cellular Automata» на ScotlandJS.
Cellular Automata — это клеточный автомат, см. ru.wikipedia.org/wiki/Клеточный…
1. Результат зависит от начального состояния
2. Знает о своих частях
3. Операции на направлены сами на себя
Один из первых автоматов — машина Тьюринга ru.wikipedia.org/wiki/Машина_Ть…
Клеточный автомат фон Неймана — ru.wikipedia.org/wiki/Автомат_ф…
Игра «Жизнь» (Conway's Game of Life) — ru.wikipedia.org/wiki/Жизнь_(иг…, реализация автомата Неймана в компьютере.
Двумерный бинарный автомат: upload.wikimedia.org/wikipedia/comm…
Elementary Cellular Automaton — mathworld.wolfram.com/ElementaryCell…
Сложный паттерн из очень простой основы, некоторые паттерны начинают преобладать, система организует себя _сама_ pic.twitter.com/pqvknLiiFX
Определение сложности pic.twitter.com/fGrpuQ9XQ3
Клеточные автоматы + генетические алгоритмы, когда происходит отбор 20% для каждого следующего поколения.
Первое поколение — чёрный квадрат, дальше интереснее pic.twitter.com/xmxQ8rOZbv
Слайды доклада Ирины lrlna.github.io/scotlandjs-aut… pic.twitter.com/RJKVFJOZC0
У нас перерыв и в 18:30 по Москве закрывающий доклад Ракель Велез.
Ракель Велез @rockbot, техлид веб-команды npm с закрывающим докладом на ScotlandJS.
Мы все боимся. Но редко говорим об этом. Может быть у нас отрасль такая? БЫСТРО! ЛОМАЙ! ДЕЛАЙ. Слишком быстро, нет времени говорить.
У нас у всех свои страхи pic.twitter.com/U7F5Wa1WWj
Ракель признаётся в своём главном страхе: страх провала, неудачи. Техлид веб-команды боится деплоить? Ну да, но научилась справляться.
Что такое страх? Неприятная эмоция, вызванная некоторой угрозой. Но всё это _не только_ в вашей голове.
Страх: увидели новое, сначала сигнал к химии: решение драться или бежать? Сердце быстрее, процессы зашкаливают, всё готово ко всему.
Нервы: хм-м, это точно медведь? Пойдём поищем…
Да не, не медведь pic.twitter.com/sd3kI9lC8I
Вомбат же! Не нужно убегать, не нужно драться. Сброс всех систем. pic.twitter.com/LOFe33yaKB
Химия и нервы, всё асинхронно, параллельно. Race conditions, что поделать.
Всегда есть ответ, даже если нечего бояться. Часто страх больше, чем кажущаяся угроза. Ну, то есть баг.
Но если мы видим баг в системе, которую не понимаем? Мы начинаем разбираться, парное программирование, логи, анализ, специалисты.
Психотерапия — это такое парное программирование девопсов для выяснения проблемы.
Окей, доклад был очень в стиле TED, поэтому пересказать было сложновато. Давайте дождёмся видео и посмотрим.
На столе растёт батарея бутылок виски для докладчиков pic.twitter.com/lOi697tTak
Спасибо всем! pic.twitter.com/b91rRuA5Yw
Все докладчики pic.twitter.com/J0JWoatfiI
А теперь и вся команда pic.twitter.com/Zjy6fVDVLc
Три дня нон-стопа со @ScotlandCSS и @ScotlandJS с вами был @pepelsbey. Увидимся скоро на трансляции с HTML Special и CSS Day в Амстере.