Zmoki

5 сентября 2016, Saint Petersburg, Russia

# Понедельник 29 твитов

Привет! С вами Зарема @Zmoki. Я фронтендер в @Uploadcare, основатель @spb_frontend и причастна к @HolyJSconf. Живу в Питере ⛵️😊

9:57

Разработкой сайтов и прочего занимаюсь с 2004 года. С марта этого года я в @Uploadcare. Буду обновлять виджет для загрузки файлов.

10:20

Мой вид из окна (не могла не похвастаться 😊) pic.twitter.com/9dzGlJcVfI

10:21

У нас много публичных репозиториев в #GitHub и у меня теперь много активности там github.com/Zmoki. Мне это очень нравится.

10:28

Сегодня хочу попробовать @greenkeeperio. Эта штука подключается к репе, следит за обновлениями зависимостей и предлагает PR при их апдейте.

10:33
@jsunderhood @greenkeeperio она очень сильно спамит Имхо. Если выходит след версия зависимости не удаляет предыдущий PR например

О, спасибо. Но я попробую, может мне будет норм. Особенно для тех реп, над которыми я редко работаю. twitter.com/lapanoid/statu…

10:39
@jsunderhood Я отключил через два дня — слишком много пулреквестов. @greenkeeperio

К одной репе подключал или несколько? twitter.com/sapegin/status…

10:40

Вообще сегодня же понедельник. День обновления зависимостей 😀

10:43

. @Akurganow как-то сказал, что @andrey_sitnik по понедельникам обновляет npm пакеты. Отличная идея.

10:45

Теперь и я по понедельникам обновляю ноду, npm, глобальные пакеты и локальные в тех проектах, с которым сейчас работаю.

10:46

О, придумала как использовать @greenkeeperio в благих целях. Обновлять наши проекты при выпуске новой версии виджета bit.ly/2c6dMPw

12:11
@jsunderhood @greenkeeperio А слышала про snyk.io?
16:58

. @jabher @greenkeeperio нет. Пробовал? Находил уязвимости?

16:59

. @jabher в одном из приватных репозиториев нашел кучу vulnerabilities 😱. Например из-за hawk и request пакетов. Пробую snyk wizard.

17:19

. @jabher интересно =) обновила пакеты, vulnerabilities стало еще больше

17:31

Подскажите CLI тулзу, чтобы по названию и версии пакета она находила где в dependencies этот пакет используется

18:03

Я залипла в snyk.io благодаря @jabher

18:16

Например свежий socket.io@1.4.8 имеет зависимости engine.io@1.6.11 > accepts@1.1.4 > negotiator@0.4.9 и уязвимость snyk.io/vuln/npm:negot…

18:20

я так понимаю, приложение с сокетами можно сильно затормозить или даже "crash the node process"

18:21

Походу нужно добавить в линтеры security проверку с nsp или snyk как советовал @andrey_sitnik в докладе о линтерах bit.ly/2cia2Jo

18:36

. @andrey_sitnik только как нужно поступить, если nsp нашел уязвимость?

18:38

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

19:19

Если вам есть что рассказать о nsp, security checking, vulnerabilities, пишите, буду ретвитить 😉

19:21

Завтра поговорим о стиле кода и eslint.

19:22

В среду у нас внутренний хакатон. Расскажу, что и как мы делаем.

19:31

Еще есть одна боль, связанная с промисами, но об этом в среду.

19:32

В четверг вместе с @Akurganow расскажем как отделяем фронтенд от django-бэкенда. Да, там будет про react и redux.

19:35

Про пятницу и выходные расскажу в четверг.

19:35

Есть у вас какие-то темы, о которых хочется поговорить? Вопросы и предложения?

19:37

# Вторник 24 твита

Вторник! Привет)) Про стиль кода начну во второй половине дня, а пока ответы и ретвиты

8:58

За последний час @AlexWayfer @twenty @webholt развернули дискуссию вокруг Vue

9:05
Пока многие спорят Angular vs React vs Backbone, я вдруг обнаружил Vue, который по популярности на GitHub встал между последними двумя.
9:06
@AlexWayfer Что думают на этот счёт @jsunderhood, @webholt и @twenty?

Я Vue не использую и последний раз на него смотрела давно. @jabher фанат Vue =) twitter.com/AlexWayfer/sta…

9:08
@AlexWayfer @jsunderhood @twenty Vuejs клёвенький, хоть и приблизился к ангуляру. Лёгкий, плюс немного отличается предназначение.
9:24
@webholt @twenty @jsunderhood Ребят,посоветуете какой-нибудь туториал несложный по Angular? Оф доки очень объёмные и мутные на первый взгляд
9:26
@jsunderhood @jabher писать на vue spa - идиотство или норм?
9:28
@Di_Ed_Seagull @jsunderhood я на нем писал пару довольно больших Chrome App. Было довольно норм на самом деле.
9:28
@jsunderhood А про четверг когда? (=

Про отделение фронта? В четверг =) twitter.com/webholt/status…

9:28
@AlexWayfer Но конечно Vue намного лучше чем, например, Cycle.js где автор только и делает что срет на других. @jsunderhood @twenty @webholt
9:29

а в чем это проявляется? ругается в issues? @freiksenet_ru @AlexWayfer @twenty @webholt

9:29

Используете cycle.js? Как вам?

9:30
@jsunderhood В твиттере и статьях пишет какой реакт говно и какой cycle крутой и superior. @AlexWayfer @twenty @webholt
9:31
@jsunderhood как отстаивать свое проф. Мнение если ты один разраб в студии?
9:32
@lapanoid @jsunderhood менеджеры, сэошник, дизайнер, руководитель. Srt.ru - тех кто писал прилржение уже нет с нами. Уходить?
9:33

общаться) уточнять позиции жругих людей, задавать вопросы, предалгать свои решения и аргументировать их @shear_lock

9:36
@jsunderhood проверить, насколько актуально (может ты не используешь дыру). Если актуально, ставить какие фильтры и патчи

как реагировать на найденные с помощью snyk или nsp уязвиомсти в приложениях: twitter.com/andrey_sitnik/…

9:37
@jsunderhood отношение к typescript

я не использую, мне подходит flow. ну другим людям, с другим тех стеком typescript - норм twitter.com/allaud/status/…

9:41
@jsunderhood почему ты так долго не становилась ведущей этого твитера? Уверена, тебе предлагали не раз

мне предолжили один раз, недавно, twitter.com/iamstarkov/sta… twitter.com/cakeinpanic/st…

9:42

ой, сколько у меня опечаток! за годы за компьютером я стала путать буквы при наборе 😣 @shear_lock

9:48
@jsunderhood почему Reactjs не популярен на фрилансе?
10:03

В российском фрилансе? Или на upwork/toptal? И почему кажется, что не популярен? @way2bariton

10:05
@jsunderhood @way2bariton Нормально все с ним на фрилансе, относительно ангулара его меньше, но просто никто не хочет легаси поддерживать
10:12

# Среда 32 твита

Среда! Привет) Прошу прощения за вчерашнее молчание. Недосып из-за переезда настиг меня и вырубил =))

9:41

Сегодня у нас в @Uploadcare внутренний хакатон. В первый раз мы собрались в прошлый вторник, но не успели всё доделать и решили повторить.

9:45

В прошлый раз мы сидели в отдельной комнате в антикафе 12 комнат. Там оказалось довольно тесно и душно pic.twitter.com/5DgZ9fWlrr

9:49

Сейчас мы в Kokon space на Петроградке. Еще не все пришли)) pic.twitter.com/WQttUZRUG2

9:57

Над чем мы работаем? @mojololol делает Proxy CDN сервис. Мы с @Akurganow, @wouldntfix и дизайнером Антоном делаем взвешивалку картинок

10:24

Сначала расскажу про Proxy CDN 🌄

10:25

Proxy CDN - это когда добавляешь к адресу картинки на сайте адрес прокси и параметры изменения картинки, типа ресайз, кроп или "сделай ЧБ".

10:38

Прокся быстро загружает оригинальную картинку к себе, кеширует и отдает новую согласно параметрам.

10:39

Например, есть у вас картинка, загруженная редактором весом в 2MB и размером в 2000px, а вам нужно превью в 80px и фул в 600px

10:40

А еще вдруг responsive и там куча вариантов может быть. 60px, 120, 600, 1200, в другой ориентацией и обрезкой

10:42

Можно ImageMagic настроить на сервере, но проксю можно быстро внедрить, меньше времени на разработку

10:43

Есть такой сервис rsz.io от других ребят. Но я хотела, чтобы в @Uploadcare такое было и добавила в список идей для хакатона

10:45

Использовали ли вы какой-нибудь сервис Proxy Image CDN? Серверный ImageMagic?

10:56
@jsunderhood Свою обёртку вокруг imagemagick, да.
11:01

Чем нравится cloudinary? @alexfedoseev

11:57
@jsunderhood А зачем обязательно Имейджмейджик, а не какой-нибудь sharp, например?

Это github.com/lovell/sharp ? Да, хорошая штука. Для Node.js. Но надо самому ставить, настраивать)) twitter.com/sapegin/status…

12:00
@jsunderhood Имейджмейджик тоже надо самому ставить ;-)

Да, я про это говорила)) twitter.com/sapegin/status…

12:06
@jsunderhood снимает много головняка (умно жмет, кропит etc), бодро развивается, вот недавно client hints прикрутили cloudinary.com/blog/automatic…
12:07

Clients hints - клевая штука. Правда спорная в плане поддержки и кеширования. Используешь? @alexfedoseev

12:09
@jsunderhood не заметил твит сначала. У нас своя прокся вокруг cloudflare и s3. Не хотели отдавать это на сторону
13:31
@jsunderhood *cloudfront конечнож
13:31
@jsunderhood я такое использую. Самописное(node + imagemagik)
Не знаю как без этого жить
16:05

Опубликовала npm пакет и могу теперь рассказать про взвешивалку картинок 🌈🚀

16:08

Суть ее вот в чем: указываешь адрес страницы, сервис анализирует как на странице используются картинки и говорит как их оптимизировать

16:21

Фронтенд делает @Akurganow, я - мультизагрузчик файлов, а @wouldntfix рендер страницы на десктопе, смартфоне и анализ картинок

16:24

У нас тут спор с @Akurganow. Я сделала функцию загрузки частью приложения, а он настаивал на том, чтобы выделить ее в npm пакет

16:27

В итоге я с ним согласилась. Эту функцию мы потом еще где-нибудь заиспользуем))

16:28

Вы выделяете части своего приложения в отдельные npm пакеты?

16:29
@jsunderhood npm пакет это хоршо, но возможно для другого проекта надо будет что-то переписать. и тогда будет проблема @Akurganow
16:49
@kostyandrew @jsunderhood @Akurganow если правильно параметризовать - не надо будет ничего переписывать.
17:00
@kostyandrew @jsunderhood @Akurganow а если не правильно параметризовать то это будет нереюзабельный никому не нужный говнокод
17:00

# Четверг 28 твитов

Четверг! Привет)

10:17

Вчера мы всё "почти" сделали, поэтому доделываем сегодня))

10:17

Если вы хотите научиться делать свои JavaScript библиотеки и публиковать их на npm, то есть хороший курс на эту тему egghead.io/courses/how-to…

10:25

О версиях пакетов подробно расписано на сайте семантического версионирования semver.org/lang/ru/

10:28
Тот день, когда в @jsunderhood уже не написать ничего нового, наконец настал twitter.com/jsunderhood/st…

А разве так не каждый день?)) Кстати, а о программировании микроконтроллеров на JS кто-нибудь писал? twitter.com/iamale_ru/stat…

10:33

Завтра я буду пробовать wi-fi для платы IskraJS. Могу рассказать о Espruino и о программировании устройств на JS 😉 pic.twitter.com/rl79nlTeEr

10:50

Итак, расскажу про отделение фронтенда от django-сайта

20:01

Сайт uploadcare.com создан давно. И он на django =)

20:03

Контент большинства страниц в markdown в другой репе. Шаблоны - django templates. Стили, js, шрифты и т.п. - в папке static

20:06

Причем есть три дизайна. Каждый сделан по-своему и в разных папках и по-разному собирается.

20:07

Жуткий франкештейн, а не сайт =))

20:07

Чтобы его запустить, мне пришлось добавить Vagrant и вместе с ребятами прописать provision скрипты.

20:08

Деплой делается руками девопсеров и через какое-то время я их кажется стала раздражать своими пулл реквестами и просьбами задеплоить 😈

20:10

В итоге появилась идея: а давайте мы фронт от джанги отделим совсем в другое приложение со своими реактами и рюшечками. Все были не против.

20:12

За что мне нравится реакт: можно сделать небольшой компонент на любом сайте, полноценное приложение с серверным рендером или статичный сайт.

20:15
@jsunderhood Ну, это для всех сайтов нужно.
20:17
@jsunderhood меня всегда интересовал вопрос - зачем Frontend фреймворку возможность серверного рендеринга (исключаем шутку про SEO сразу)?
20:28

SEO и progressive enhancement - не шутки, а реальная потребность @Vitalliumm

20:29

Требования к фронту: проксирование еще не сделанных вещей не старый сайт (не всё сразу), авторизация через django, контент в markdown c meta

20:35

Проксирование на ноде быстро и просто сделать с http-proxy npmjs.com/package/http-p…

20:45

Теперь попробую описать работу самого приложения

21:17

На сервере express, он принимает http запросы. Если такого роута нет, то срабатывает прокси.

21:19

Роут есть -> данные из markdown страницы -> initial state, реакт компоненты -> html, потом в ejs шаблон и отдается полная html страница

21:26

Если почему-то js на клиент не загрузится (медленный инет, метро), сайт будет без интерактивностей, но полностью рабочим с живыми ссылками

21:28

Если js загрузится, то при нажатии ссылок будет загружаться json c контентом и настройками страницы и страница обновиться очень быстро

21:33

Ну и заработают отдельные интерактивные штуки, которые актуальны только на клиенте.

21:34

В приложении есть набор компонентов, используемых и в SSR и в интерактивностях на клиенте. Удобно в разработке, тестировании и поддержке.

21:36

Ремарка про redux: можно подписать на изменение store отправление данных в аналитику. Для отслеживания взаимодействий с интерактивностями.

21:44

# Суббота 23 твита

@soulmusic @jsunderhood @Vitalliumm извращались по всякому. Дублировали код. twitter.com/soulmusic/stat…
12:16
@Vitalliumm @jsunderhood если нет history API или js отвалился то ссылки начнут работать "как в 90", честно перезагружая на новую страницу
12:16

У изоморфного приложения на реакте есть проблема - в клиентский js запихивается всё из чего рендериться серверная часть. Это куча контента.

12:21

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

12:23

Но порой нужно "оживить" только небольшую часть страницы и класть из-за этого всё остальное в бандл не хочется.

12:24

Вчера я разобралась как при изоморфном приложении не пихать весь контент в бандл, а только отдельные части. Не теряя при этом целостности.

12:27

У меня приложение, которое генерирует статичный сайт.

12:28

Для генерации статичного сайта из react приложения используется плагин для webpack npmjs.com/package/static…

12:31

HTML файлы создаются из всего react приложения, а в клиентский js идут только те компоненты, которые интерактивны на клиенте

12:32

Я не стала использовать react-router. Сделала два файла, routes.client.js и routes.server.js, для описания соответствия "страница-компонент"

12:34

И есть два входных файла: client.js и server.js

12:34

Хотя проще просто показать код =)

12:35

Изоморфное react приложения с генерацией статики и клиентским js, в котором только нужные для клиента компоненты bit.ly/2clsMZR

12:38
@jsunderhood круто. 👍🏻 это просто магия. 👻 twitter.com/jsunderhood/st…
12:39

Спасибо) @taujavarob

12:40

Вообще мы думаем в итоге превратить это в генератор разных статических сайтов в нашем фирстиле.

12:41

Еще отличная идея: сделать свою библиотеку react компонентов в фирменном стиле компании. И сайт со стайлгайдом и этой библиотекой.

12:43

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

12:44
@jsunderhood то что уже давно сделано в #yandex, только для #bem_ru, да и, наверное, много где
(а react на подходе github.com/awinogradov/re…)
13:20

Да, @awinogradov вдохновил своим докладом "Архитектура дизайн-систем" pitercss.ru/2/pres/design-… @akrichevskii

13:22
@jsunderhood поделитесь, пожалуйста
14:20
@jsunderhood все правильно. Кто может поведать об инструментах для удобной реализации (storybook не очень нравится)?
14:21

# Воскресенье 64 твита

@jsunderhood [1/2] а я пока остановился на @SourceJS – он умеет React, DSS, Jade и легко расширяем (под капотом express).
16:46
@jsunderhood [2/2] Но это всего лишь костыли в попытке повторить specs и examples БЭМ-стэка — инкапсуляции компонентов у меня никакой…
16:46

Привет! Рааскажу про IskraJS и программировании устройств на JS

16:50

Российская компания @amperka продает железки для того, чтобы люди могли собирать свои устройства и программировать их поведение.

16:53

Раньше устройства можно было программировать только на C++

16:56

Потом был создан движок Espruino — прошивка для микроконтроллеров, который может исполнять JavaScript-код espruino.com

16:58

А @amperka выпустили свою плату IskraJS, уже прошитую под Espruino. И сделали набор Йодо c деталями и руководством amperka.ru/product/yodo

17:03

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

17:04
@jsunderhood круто. Но ведь наверняка JS потом перекомпилируется в асемблер? Ну как с всякими C компиляторами?
17:06
@jsunderhood Espruino is an interpreter. It gives you instant feedback so you can view and modify your program while it is running. Понял :)
17:06
@jsunderhood на самом деле, это очень круто. Ибо C вызывал у меня лютую попаболь. Когда-то обязательно куплю и поиграюсь. Детей учить тож ок
17:06

Подробно об Espruino и IskraJS в статье на хабре geektimes.ru/company/amperk…

17:07

И об IskraJS был доклад на @HolyJSconf от Игоря Зотова youtube.com/watch?v=eTelzA…

17:10

В-общем, давайте просто распакую Йодо и покажу что там и запушу на гитхаб какую-нибудь программу =)) pic.twitter.com/KrF2zElZvg

17:17

В коробке Йодо еще куча коробочек с деталями, руководство, штуки для создания корпуса, пульт и кабель для подключения к компу

17:22

Основная часть - это плата IskraJS. Она маленькая, ручка на фотке, чтоб показать масштаб =)) pic.twitter.com/yX9dwu2J9T

17:26

К ней идет плата расширений, чтобы побольше всякого можно было подключить pic.twitter.com/kOCyeijI6d

17:29

Сервопривод, дальнометр, ИК, светодиод, кнопка, зуммер, потенциометр, датчик освещенности, термометр pic.twitter.com/ig50marSeU

17:35

Так выглядит среда разработки Espruino IDE. Уже соедино с платой и загружена программка мигания светодиода на плате pic.twitter.com/mUIAsTronG

17:51

Подключенная плата pic.twitter.com/J5j0poRvED

17:52

Для демонстрации кода для IskraJS сделала публичную репу github.com/Zmoki/iskrajs. Буду сохранять туда программки.

18:06

Для Espruino можно писать на JS библиотеки, подключаемые через require. @amperka написали свои билиотеки для удобной работы с устройствами

18:14

Вот простая программа для вкл/выкл светодиода кнопкой github.com/Zmoki/iskrajs/… и видео с демо goo.gl/photos/F9qnmhB…

18:19

Изменение уровня света с помощью потенциометра github.com/Zmoki/iskrajs/… и демо goo.gl/photos/z5S6QCh…

18:29
@jsunderhood недоумеваю почему выбрали js для железок? Почему не питон, например?
18:30

на питоне тоже можно, еще на руби и других языках, но этот канал-то про JS =)) @summerisgone

18:31

Еще есть Serial Projector - chrome app для вывода данных с устройства на экран компа в html amperka.ru/chrome/serial-…

18:34

Сейчас подключу термометр и покажу =)

18:35

Вывод данных с термометра на комп github.com/Zmoki/iskrajs/… и демо goo.gl/photos/D8JZaxc…

18:46
@jsunderhood просто, блин, будто есть gcc и espruino. gcc не дружелюбный, а espruino кофе варит пока компилируется.
18:47

На простых программках пока всё быстро. Для изучения всего этого и "для поиграться" Espruino и IskraJS - норм @summerisgone

18:49

Коллега дал мне wi-fi модуль ESP8266, но у меня, увы, сегодня уже нет времени с ним разобраться, могу написать в своем твитере @Zmoki

18:59
@jsunderhood <имхо> если бы туда влезала ОС и nodejs, тогда бы js был уместен - можно было бы веб-интерфейс отдавать. </имхо>
18:59

Веб-интерфейс можно пока отдавать в Serial Projector amperka.ru/chrome/serial-… @summerisgone

19:00

Или через wi-fi обновлять github pages @summerisgone

19:00
Сервопривод, дальнометр, ИК, светодиод, кнопка, зуммер, потенциометр, датчик освещенности, термометр pic.twitter.com/ig50marSeU

Есть у вас идеи, что можно собрать из этих деталей twitter.com/jsunderhood/st… и с доступом в интернет?

19:03
@jsunderhood вы не сердитесь за нападки, в целом я считаю дело @amperka верным. Школьники в робофутболе соревнуются уже (!)
19:07

Я не сержусь. Благодаря тебе, догадалась, что можно github pages обновлять)) @summerisgone @amperka

19:09
@jsunderhood Я конечно знал, но не видел. В рот. Мне. Ноги. youtube.com/watch?v=iNLcGq…
19:14

Итак, воскресенье подходит и концу, как и моя смена. Напоследок всё-таки хочу коротко рассказать о стиле кода и eslint 😉

19:16

У нас в @Uploadcare несколько проектов с JS и CSS.

19:18

Недавно к нам присоединился @Akurganow, теперь нас два фронтендера + сторонние фронтендеры на отдельных проектах.

19:19

Код написан везде по-разному и меня это стало раздражать.

19:21

Мы с @Akurganow используем eslint eslint.org

19:23

Конфиги для eslint можно выделить в отдельный JS модуль и поставлять через npm eslint.org/docs/developer…

19:25

В-основном люди почему-то используют конфиг от airbnb npmjs.com/package/eslint…

19:26

Мы решили собрать свой конфиг и упаковать в npm пакет. Оказалось очень удобно использовать его в работе npmjs.com/package/eslint…

19:28

Дальше в планах добавить в него конфиг для ES6 кода и JSX.

19:29
@jsunderhood в чем преимущество своего конфига перед тем же airbnb?
19:31

У нас стиль отличается от airbnb и хочется больше контроля над правилами @_sashashakun

19:32

У линтера CSS, @stylelint, тоже есть возможность собрать и поставлять свой конфиг github.com/stylelint/styl…

19:34
@jsunderhood а чем вас не устроил стиль airbnb? И как вы его контролировали до того как заюзали линтер?

У нас много правил отличаются от airbnb, можно было в свой конфиг добавлять airbnb, потом его расширять, но зачем? twitter.com/_sashashakun/s…

19:37
@jsunderhood @stylelint кстати если у вас получилось скрестить его с вебпаком, я бы бы рад взглянуть на ваш конфиг😉

stylelint конфиг мы еще не начинали. npmjs.com/package/stylel… не подходит? twitter.com/_sashashakun/s…

19:40

В-общем линтеры и конфиги сильно помогают в работе))

19:42

На этом всё. Я бы еще рассказала про огромный объем легаси кода на coffeescript, о диллеме "оставлять jQuery или pure JS без зависимостей"

19:44

Но работа с этим мне только предстоит)) Потом может сделаю доклад про это, когда закончим обновлять виджет github.com/uploadcare/upl…

19:46
что б даже фронтендщики могли twitter.com/jsunderhood/st…
19:46

Кстати, если вы в Питере, скоро у @PiterJS встреча и WSD от @webstandards_ru, да и в @spb_frontend мы скоро анонсируем новые встречи.

19:48

11 декабря в Москве будет следующая @HolyJSconf - большая конфа по JavaScript holyjs.ru

19:51

С вами была @Zmoki. Спасибо!

19:53
@jsunderhood Потому что он очень адекватный почти во всём.
20:07

ой, я неправильный mention на PiterJS поставила. Вот - @gopiterjs

21:17
@jsunderhood А ссылка есть какая-нибудь?

amperka.ru/product/yodo twitter.com/alexindigo/sta…

23:19

github.com

www.npmjs.com

other