Skip to content

Latest commit

 

History

History
289 lines (145 loc) · 19 KB

2016-08-26_jsconfis.md

File metadata and controls

289 lines (145 loc) · 19 KB

JSConf Iceland

2016-08-26, Рейкявик, Исландия

Ну что, начинаем второй день. Чувак из Pebble расскажет про носимые девайсы.

Будет рассказываться они запустили JS на часах.

Обычно на носимых девайсах используют C++, но C++ сложноват.

В Pebble используют 64kb для одного приложения.

Как они запустили JS на 64кб? Есть много альтернатив движков для таких условий. Они выбрали JerryScript. github.com/Samsung/jerrys…

64kb хватит всем. pic.twitter.com/vr1pZEhjfA

А дальше они решили просто взять веб-стандарты, вместо создания своих API. (Blutoothe, battery, etc.)

Но не все Web API удобно поддерживать на такой ограниченной платформе.

Они выпустили то, что есть. Shims & Polyfills за девелоперами.

Дальше они сделали какую то жесть, компилируя компилятор js через emscripten в js. Но я не понял, зачем?

У них есть своё Cloud IDE, где можно что-нибудь заходить! cloudpebble.net

А дальше они научили телефон говорить с часами и удаленно исполнять код. А ещё приложения можно будет отлаживать в браузере,

Короче @PebbleDev крутые. Подумываю купить и чтото для них закодить.

Сейчас у нас будет @rockbot с докладом про npm. А пока из колонок играет Sigur Ros, местная пост-рок группа.

Если хотите влиться в атмосферу Исландии, поставьте себе тоже.

Речь пойдёт именно про сайт. Сначала npm был опенсорсный и все время падал, потому что слишком много нагрузки.

Поэтому решили сделать коммерческую компанию.

Npm использует nemo.js для интеграционных тестов. nemo.js.org

Следующий доклад про преимущества HSL перед RGB.

Начали с песни pic.twitter.com/XiBZ6jpRk5

RGB это скрещивание лучей pic.twitter.com/Zm843o7doI

RGB это примерно как парень в метро SF, который снюзивает дорожку кокаина с телефона pic.twitter.com/Ab1O7Q1Ft5

RGB это как декартова система координат, а HSL — полярная.

Сначала через Hue разбиваем палитру на части. pic.twitter.com/1jQrg9RSHQ

Дальше разобьём цвет от серого до текущего цвета это Saturation, а потом так же со светимостью.

С помощью HSL легко можно выбрать палитру из разных цветов, который подходят друг к другу.

Закончили тоже песней от @visnup pic.twitter.com/pGYtstVIAK

Следующий доклад от @kosamari про зрение роботов, AR и тд.

Свитерифай kosamari.github.io/sweaterify/

Проблема с computer vision, что есть много мануалов к инструментам, но мало понятна объяснений как это работает.

Как компьютер видит дерево pic.twitter.com/SAOxJfBxBS

Чтобы работать с CV в js, вы можете использовать canvas. И доставать оттуда бинарные данные о картинке.

Каждый пиксель состоит и 4 значений. R, G, B и альфа канал (прозрачность)

Фильтр для изображения: чтото вроде правил, которые должны выполнять все пикселизация

Есть разные типы фильтров: которые группируют цвета, ограничивают и тд

Бывают усредняющие фильтры, которые вычисляют цвет, исходя из соседей.

Усредняющий фильтр pic.twitter.com/EJ2nt90TGW

Чтобы упростить процесс создания фильтров Marico написала библиотеку grafijs.org

Grayscale, когда R = G = B

Дальше объясняется алгоритм поиска пути в лабиринте. habrahabr.ru/post/264189/

Но как различать круги от квадратов. pic.twitter.com/jivhAOYvLj

Описание алгоритма en.m.wikipedia.org/wiki/Shape_fac…

Крутое демо с носками.

Но такие вещи требуют большого код-ва вычислений, лучше делать их в веб-воркера. Или на шейдерах, про что рассказывали во вчерашнем докладе.

Веб-воркер и сервис-воркер pic.twitter.com/PExhGoAGeH

@thebits квадрат и есть многоугольник

В общем, обработка изображений можно делать на JS.

Если хотите знать больше есть хорошая книга Book of Shaders patriciogonzalezvivo.com/2015/thebookof…

А если хотите понять про машинное обучение без жести, то есть ml4a.github.io

Дальше наш соотечественник @pragmader из Амазона про Progressive Rendering и как ускорить загрузку приложения.

Речь пойдёт про серверный рендеринг на node.js. pic.twitter.com/F4xCrbBRYb

Но такой вариант может работать очень долго, если запросы на данные работают долго.

На нужен progressive rendering.

Нужно разбить страницу на много частей и отдавать их как только они готовы.

Progressive rendering изобрели в 1997. pic.twitter.com/EAcBNCB10s

Хорошая статья из 2005 года от @codinghorror blog.codinghorror.com/the-lost-art-o…

В node.js для таких вещей придумали streams nodejs.org/api/stream.html

Если хочется узнать побольше, @substack написал отличный очень подробный обзор этой технологии github.com/substack/strea…

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

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

Для упрощения такого типа рендеринга есть, например, dust.js akdubya.github.io/dustjs/

Следующий доклад про AI от @daffl.

Разговор пойдёт про NLP — Nature Language Processing

MySam pic.twitter.com/nGBPb2Yt1d

pic.twitter.com/Wiu0y0TCTx

Вот ссылка на проект github.com/mysamio/mysam

Вы можете учить его новым командам и писать плагины на HTML и JS.

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

MySam построен на feathersjs feathersjs.com

Так выглядит интерфейс классификатора. pic.twitter.com/pSALrDHnkW

Ещё один проект на эту тему github.com/jasperproject/…

Сначала все было хорошо, но чем больше Сэм узнавал, тем меньше он был во всем уверен. pic.twitter.com/Fe5823R35h

Следующая лекция про React в больших приложениях от @annthurium.

Проблема и радость в JS, что одну вещь вы можете сделать сотней способов. И вы б лете менять стек каждые 2-3 года.

Время реакта. pic.twitter.com/GjMOaaUPrw

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

Выигрыш от реакта у @Pinterest pic.twitter.com/TQiZPLspsr

Если переписываете что-то на новую технологию: НЕ ВВОДИТЕ НОВЫЕ ФИЧИ ПАРВЛЛЕЛЬНО.

Поверьте, это очень плохая идея.

Обязательно используйте все литеры для всего, чтобы все понимали что и как правильно делать. Например github.com/evcohen/eslint…

Хороший пример мануала для реакта github.com/petehunt/react…

Используйте redux github.com/reactjs/redux совет от @Pinterest и от меня

@alexeyraspopov ага

Осталось 2 доклада в общем зале, следующий: про то как ваш мозг мешает писать вам хороший код от @zeigenvector.

А речь пойдёт про когнитивная психологию.

Люди предсказуемо иррациональны.

ПО это не только код, это ещё и люди, у которых есть предрассудки.

Люди не очень хороши в логике.

Дебажить сложно, ну вы знаете. pic.twitter.com/xxh9bMXorB

При дебаге полезно отвлекаться и делать перерыв.

Все потому, что вы за выверте ложные направления поиска проблема.

Мы не хотим использовать чужой код, потому что слишком сильно верим в свой. Это называется эффект ИКЕИ en.m.wikipedia.org/wiki/IKEA_effe…

Ещё мы очень плохо умеем планировал время, даже для задач, которые мы уже делали.

Причина optimism bias en.m.wikipedia.org/wiki/Optimism_…

Ещё есть Sunk costs fallacy, когда мы продолжаем вкладывать усилия, потому что уже вложили много усилий youarenotsosmart.com/2011/03/25/the…

Помните такое? en.m.wikipedia.org/wiki/Stroop_ef… pic.twitter.com/myRvfpP12S

Ещё программисты страдают от того, что считают себя лучше, чем они есть en.m.wikipedia.org/wiki/Illusory_…

Ещё частая ошибка, когда по одному представителю вида, мы делаем вывод о всей группе en.m.wikipedia.org/wiki/Group_att…

Ваш мозг запрограммирован на то, чтобы все это делать. Поэтому не расстраивайтесь!

Прочитайте слайды, я не все затвиттил. А лучше посмотрите вживую, очень круто. jenna.is/at-jsconfis.pdf

Ну что, остался последний доклад от @janl про JS-коммьюнити. Хочется верить, что кто-то все это читает!😆

Внутри JS сообщества много других сообществ и это хорошо. pic.twitter.com/qZSLEWpZ1s

Эти сообщества активно обмениваются решениями. И это хорош.

JS самый успешный язык программирования. ПО ест мир, JS ест ПО, JS ест мир.

Успех прячет провалы. pic.twitter.com/fIkow73QLd

Опенсорс ключевой элемент нашего сообщества. Но чаще чаще случаются случаи «выгорания».

Наша культура не предусматривает способы эффективного ведения опенсорсных проектов. Наша инфраструктура и люди страдают от этого.

В общем, берегите мэйнтейнеров крупных опенсорсных проектов. Им тяжело.

Примеры провалов: Heartbleed. Миллионы полагались на OpenSSL, и его поддерживал 1 человек. Что могло пойти не так,

Если не слышали про Heartbleed, почитайте: en.m.wikipedia.org/wiki/Heartbleed.

Разнообразие людей важно, но только 25% людей в нашем сообществе женщины.

Одна из самых приятных вещей в JS: чувство совместной работы.

И конкуренция. Пример, Ember vs React.

Маленькие модули это хорошо. И семантическое версионирование.

Стандартов много, но никто не понимает как они работают и как в этом участвовать. Вы знали что можете предложить изменение в HTML на github?

Наверное нет, но вот ссылка: github.com/whatwg/html

Зачем нужны инновации, если они не делают наше общество лучше.

Культура в JS-сообществе все больше и больше влияет на мир, и мы можем сделать все правильно и подать пример.

А это были замечательные ведущие @jsconfis. Спасибо им. pic.twitter.com/APgOt1NCNr

И это был последний доклад на @jsconfis. С вами был @thought_sync все эти 2 дня. Надеюсь вам понравилось, может быть увидимся ещё!🤓