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

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

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

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

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

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

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

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

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

@jsunderhood @greenkeeperio А слышала про snyk.io?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пока многие спорят Angular vs React vs Backbone, я вдруг обнаружил Vue, который по популярности на GitHub встал между последними двумя.

@AlexWayfer @jsunderhood @twenty Vuejs клёвенький, хоть и приблизился к ангуляру. Лёгкий, плюс немного отличается предназначение.

@webholt @twenty @jsunderhood Ребят,посоветуете какой-нибудь туториал несложный по Angular? Оф доки очень объёмные и мутные на первый взгляд

@AlexWayfer @webholt @jsunderhood egghead.io/lessons/angula…

@jsunderhood @jabher писать на vue spa - идиотство или норм?

@Di_Ed_Seagull @jsunderhood я на нем писал пару довольно больших Chrome App. Было довольно норм на самом деле.

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

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

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

@jsunderhood В твиттере и статьях пишет какой реакт говно и какой cycle крутой и superior. @AlexWayfer @twenty @webholt

@jsunderhood как отстаивать свое проф. Мнение если ты один разраб в студии?

@lapanoid @jsunderhood менеджеры, сэошник, дизайнер, руководитель. Srt.ru - тех кто писал прилржение уже нет с нами. Уходить?

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

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

@jsunderhood почему Reactjs не популярен на фрилансе?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@jsunderhood Свою обёртку вокруг imagemagick, да.

@jsunderhood cloudinary.com

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

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

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

@jsunderhood не заметил твит сначала. У нас своя прокся вокруг cloudflare и s3. Не хотели отдавать это на сторону

@jsunderhood *cloudfront конечнож

@jsunderhood я такое использую. Самописное(node + imagemagik)
Не знаю как без этого жить

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

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

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

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

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

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

@jsunderhood npm пакет это хоршо, но возможно для другого проекта надо будет что-то переписать. и тогда будет проблема @Akurganow

@kostyandrew @jsunderhood @Akurganow если правильно параметризовать - не надо будет ничего переписывать.

@kostyandrew @jsunderhood @Akurganow а если не правильно параметризовать то это будет нереюзабельный никому не нужный говнокод

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@jsunderhood Ну, это для всех сайтов нужно.

@jsunderhood меня всегда интересовал вопрос - зачем Frontend фреймворку возможность серверного рендеринга (исключаем шутку про SEO сразу)?

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

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

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

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

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

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

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

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

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

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

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

@soulmusic @jsunderhood @Vitalliumm извращались по всякому. Дублировали код.

@jsunderhood @Vitalliumm как же мы делали это всю жизнь без React’а?

12:16

@Vitalliumm @jsunderhood если нет history API или js отвалился то ссылки начнут работать "как в 90", честно перезагружая на новую страницу

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

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

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

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

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

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

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

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

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

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

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

@jsunderhood круто. 👍🏻 это просто магия. 👻

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

12:39

Спасибо) @taujavarob

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

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

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

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

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

@jsunderhood поделитесь, пожалуйста

bit.ly/2clsMZR @liberi_hominis

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

@liberi_hominis github.com/sapegin/react-… @jsunderhood

@jsunderhood [1/2] а я пока остановился на @SourceJS – он умеет React, DSS, Jade и легко расширяем (под капотом express).

@jsunderhood [2/2] Но это всего лишь костыли в попытке повторить specs и examples БЭМ-стэка — инкапсуляции компонентов у меня никакой…

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

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

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

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

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

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

@jsunderhood круто. Но ведь наверняка JS потом перекомпилируется в асемблер? Ну как с всякими C компиляторами?

@jsunderhood Espruino is an interpreter. It gives you instant feedback so you can view and modify your program while it is running. Понял :)

@jsunderhood на самом деле, это очень круто. Ибо C вызывал у меня лютую попаболь. Когда-то обязательно куплю и поиграюсь. Детей учить тож ок

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

что б даже фронтендщики могли

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

19:46

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

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

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

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

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