Привет, на этой неделе с вами @oleg008. Я занимаюсь фронтендом, раньше также писал на ноде. Работаю на @chatgrapecom.

Трачу кучу времени на опен сорс. Вот мой эккаунт github.com/kof. Один из моих последних проектов github.com/jsstyles/jss

Буду говорить о десктопном и мобильном фронтенде ну и обо всем что с ним связано. Сегодня темя дня #css написаный на #javascript.

Когда-то я написал вводную статью о #jss medium.com/@oleg008/the-i… чтоб обьяснить какие проблемы это решает в двух словах.

чтобы не повторять то что уже написано в блоге и на гитхабе, было бы интересно услышать вопросы по github.com/jsstyles/jss а так же критику

кстати @cssunderhood моя тема сегодня плотно пересекается с твоей)

кстати jss нужен как бы не всем, обычные лэндинги - врядле, весь упор на компонентизацию, в реакт оно идет лучше github.com/jsstyles/react…

@jsunderhood есть пример сложного компонента, такого когда используется пару экранов css, выраженный в jss?

сложных компонентов быть в принципе не должно) они на то и компоненты чтоб быть простыми @yuritkachenko

проект над которым я работаю написан с #jss но он не открытый, хотелось бы портировать todo app на него, есть jsstyles.github.io/jss-examples/c…

вот накидал просто примеров из проекта c #jss и #es6 gist.github.com/kof/96dad9a4d6… @yuritkachenko

@jsunderhood А не изобретаете вы велосипед? Я о CSS module которые прогнали через stylus (сахар) и postcss(все!) при сборке webpack'ом.

мне почему то кажется что stylus + postcss + webpack вот это велосипед, причем такой очень сложный с кучей привязок, в jss все проще

@jsunderhood сейчас расстояния между JS и CSS стремительно сокращаются. Это удобно. Про компоненты в верстке я тоже собираюсь поговорить.

CSS как то стремится к JS) добавляют одну фичу за другой, а у меня вопрос - зачем тогда нам нужен второй язык если в нем будет тоже самое)

@jsunderhood а как вы изолируете компоненты от наследуемых свойств, например, line-height?

наследование реализуется более прямым способом github.com/jsstyles/jss-e…

@jsunderhood ну или если в окружении виджета стоит * { box-sizing: border-box }

вопрос чье это окружение, если ты пишешь виджет который встраивается в чужой сайт то тебе надо перегрузить глобальные рулы @andrey_sitnik

@jsunderhood как же там много кавычек и не нужных синтаксических конструкций типа конкатинации и rgbaString

согласен, некий шум есть, но есть консистентность и четкая логика @andrey_sitnik

если очень хотеть избавиться от ковычек можно придумать свой язык on top of js и сделать все значения встроенными @andrey_sitnik

@jsunderhood мне вот не нравится работать с css в JS, есть проблемы например с редакторами, надо переписывать snippet, подсветка и т.п.

и такое мнение я уже слышал, лично у меня времени больше уходит на тестирование и продумывание чем на скорость печати @cssunderhood

поэтому я считаю скорость печати ВООБЩЕ НЕ ВАЖНА, важна четкая логика - легкость понимания и отсутствие багов ... @cssunderhood

всегда хотел увидеть людей которые строчат css с такой скоростью чтоб без автокомплитов прям процесс разработки замедляется @cssunderhood

@jsunderhood а есть данные по производительности, допустим сейчас есть фича css, которую можно делать js (циклическое движение облаков)

jss производит обычные стили, вставляет style элемент, поэтому нет разницы в данном примере @ErrorSoul

@jsunderhood так как именно это автоматически делается в JSS, если его цель компонентная изоляция CSS?

магии нет, хочешь перезагрузить глобальный css - делай это ручками, это впринципе легко смотри jss-extend и es6 {...} @andrey_sitnik

@sapegin @jsunderhood я, конечно, стили в js писал только для React Native, но мне вполне понравилось и ада не видел )

@jsunderhood ну изоляцию селекторов руками через БЭМ тоже можно сделать. Всё таки смысл компонентного прохода в автоматической изоляции

да, с БЭМ можно жить, но наименования остаются глобальными и их надо хорошо продумывать и это не легко и не красиво @andrey_sitnik

@jsunderhood я не считаю БЭМ — хорошим решением. Конечно же надо изолировать автоматически.

именно поэтому все классы в #jss сгенерированы, именования локальные и могут быть плохими, это не растекается по приложению @andrey_sitnik

@jsunderhood а что если просто использовать css-modules? @andrey_sitnik

все еще только пол решения, нужны константы, функции итд. и в идеале доступные из js, кстати функции в css всем нравятся? @alexeyraspopov

@jsunderhood изоляция классов — только половина решения. Сейчас CSS Modules + postcss-autoreset + postcss-initial даёт и изоляцию свойств.

это можно и нужно добавить в jss, возможно в виде плагина @andrey_sitnik

@jsunderhood в css этот стафф нахер не нужен. Нормальный декларативный язык.

тебе не нужен ... в css это все не зря добавляют ... @alexeyraspopov

впринципе добавить all: initial; в каждую рулу тривиально через плагин для jss, надо срочно сделать) @andrey_sitnik @iamstarkov

@jsunderhood полифил не забудь, так как IE не держит свойство all

@jsunderhood если взять тот факт, что существующие проекты используют webpack+preCSS+postCSS - какой профит от перехода на jss

не зная проект сказать не могу, #jss это не швецарский нож, даже если очень хочется засунуть его везде, лично мне @blia

@jsunderhood какие проблемы нельзя решить через postcss, которые решает jss?

с postcss можно решить большинство проблем, нельзя автопрефиксинг в рантайме - тоесть надо грузить все префиксованые декларации @gusnkt

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

@jsunderhood @gusnkt PostCSS можно и в на клиенте запускать с помощью github.com/postcss/postcs…

@cssunderhood @jsunderhood вообще CSS-in-JS — это 3 разных вопроса: трансформации CSS на клиенте, JS-синтаксис для CSS и изоляция

@cssunderhood @jsunderhood например, есть Styling с JS-синтаксисом, но на сервере и через PostCSS с CSS Modules github.com/andreypopp/sty…

@cssunderhood @jsunderhood а есть react-postcss с динамическим CSS на клиенте, но без JS-синтаксиса github.com/mungell/react-…

@listochkin моей вахты еще не было, там будут темы поинтереснее :) @jsunderhood

давай @alexeyraspopov порви всех чувак!

готовься, подмывайся, будешь следующим) @alexeyraspopov

для тех кому собственно проект интересен: мне нужна помощь в его развитии: новая документация, интересные примеры, todo app итд

вот кстати табличка с популярными css in js решениями, правда критерий мало github.com/MicheleBertoli…

@andrey_sitnik @jsunderhood потому что писать надо на clojure

кстати да вот интересно было бы посмотреть как jss стиль на clojure будет выглядеть @mr_mig_by

вот кстати вам пример не тривиальный использования, пока что еще в работе, мигрирую библиотеку @elementalui на #jss github.com/elementalui/el…

@jsunderhood github.com/noprompt/garden

вот таких контрибутеров я желаю всем кто делает свои опен сорс проекты github.com/jsstyles/css-v…

@slonoed @jsunderhood @mr_mig_by а какие у CSS концепции что не могут быть представлены данными в clojure? Просто наборы правил, нет?

@andreypopp @slonoed @jsunderhood да ну, забейте, это все привычки.
Стоит попробовать поюзать пару раз, чтобы понять всю прелесть подхода

всем доброе утро, сегодня можем поговорить о кроcсплатформенной разработке ui на js

@jsunderhood в смысле десктопной разработке на js?

в смысле о мобильно вебной разработке

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

В общем пару лет назад я работал над своей идеей и решил делать мобильное приложение на js) В тот момент очень шумела одна либа famo.us

То что вы видите сейчас на их сайте это их новое направление к которому они перешли потерпев неудачу со старым.

До этого они подняли 25мио на js framework который должен был позволить писать нам приложения со сложными переходами и жестами как на нэтив.

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

вобщем ишью я насоздавал там немало github.com/Famous/famous/… как выяснилось потом они уже ждали с нетерпением меня) github.com/Famous/famous/…

продолжу через пол часа, митинг)

@andreypopp @jsunderhood Они вроде тут теперь famous.org

@jsunderhood famo.us? Хороший pivot у них произошёл :)

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

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

вобщем по мне это не опен сорс, это freeware

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

вобщем компания famo.us мягко сказать стремная. За то я так познакомился с их на тот момент главным архитектором @dmvaldman

он вскоре ушел из этой компании и на данный момент разрабатывает на базе своего кода написанного тогда новую штуку samsarajs.org

он в этом году приезжал в берлин и много об этом рассказывал, в частности вот его видео c @jsconfeu youtube.com/watch?v=biJXpv…

идея в #samsarajs в том что лэйоут это набор стримов которые надо координировать. Ведь если вы посомтрите на переходы в ios меню с гамбургер

то это не одна анимация, их целая куча. Вот реализация этого меню на #samsarajs samsarajs.org/examples/

восновном все движки которые пытаются симулировать такие переходы на js они кастрированые. Просто переход это не все.

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

и это сделать совсем не просто, а в частности сделать это эффективно и читабельно.

АПИ которая позволит самому создавать такого рода переходы не супер сложно насколько я знаю кроме как у этого проекта не существует.

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

кто верит что мы сможем писать мобильные ui по качеству не хуже чем нативные на js ретвитьте samsarajs.org @dmvaldman

давайте перечислим все методы оптимизации перформанса рендеринга на js, я начну а вы добавляйте)

Проблема с DOM это количество собственно элементов которые находятся в render tree, его надо держать на минимуме.

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

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

на тему перфоманса скоро будет интересный воркшоп smartme.university/workshop/chall…

@jsunderhood DOM is not SLOW webreflection.blogspot.com/2015/04/the-do…

@jsunderhood DOM нормальный. Проблема в том, что мы его дергаем когда нам захочется, а не когда есть для этого ресурсы.

соответственно проблема с абстракциями ... тк в пользовательском коде ты дергаешь то что надо когда этого требует бизнес логика @roman01la

@jsunderhood `requestIdleCallback` вроде как призван помочь решить эту проблему

Следущая оптимизация рендеринга - requestAnimationFrame developer.mozilla.org/en-US/docs/Web…

если нужна поддержка старых девайсов, есть кроссплатформенный shim для requestAnimationFrame github.com/kof/animation-…

@AndrewHalych @jsunderhood Ускорения не достаточно. DOM уже говорилось - сложная модель, двигаешь картинку на пиксел=меняешь массу пропертей

@jsunderhood проблема в том, что порой чтение приводит к reflow

@jsunderhood, gist.github.com/paulirish/5d52…

@jsunderhood вот так правильнее olegas.github.io/talks-improve-…

еще есть проблемы с полупрозрачностью, особенно если такой элемент анимировать

а еще у нас есть уборщик мусора garbage collector который может заморозить весь ui thread в любой момент, поэтому надо всегда делать паузы

. @fliptheweb @jsunderhood и еще csstriggers.com

для того чтоб обойти все проблемы с reflow к примеру #samsarajs позизионирует все контейнеры которые будут анимироваться абсолютно

для этого используется свой кастомный layout engine которые знает где какой контейнер в любой момент времени из js

@jsunderhood а я давно говорю - даешь возможность менять layout engine в каждый браузер!

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

потом почувствовал что она мне садит зрение и решил отказаться. Могу подтвердить чтоб засыпать легче если ее использовать.

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

а вообще может есть какое то грамотное исследование на эту тему? @WarEnek

@jsunderhood @WarEnek
вот еще: health.harvard.edu/staying-health…
Плюс ко всему синий цвет “насилует" зрение: texyt.com/bright+blue+le…

@jsunderhood @WarEnek русский вариант статьи: geektimes.ru/post/94441/

@WarEnek @jsunderhood +1, года 3 уже использую, без нее быстро глаза начинают болеть, отвык от яркости.

@jsunderhood Я на эту тему заметку писал habrahabr.ru/post/210558/ Не касался там проблем оптимизации самого js (в частности GC)

расскажу о том как мы на @chatgrapecom мигрируем все на #reactjs

тк взять все и переписать слишком долго времени займет, нужен процесс миграции. Мы используем github.com/PixelsCommande… @PixelsCommander

плюс полифил для кастомных элементов github.com/WebReflection/…

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

@jsunderhood @PixelsCommander аналогично! Отличная штука

Object.create(null), ебаный стыд

Object.create(null) это впринципе простая версия Map, если обьект используется как хранилище данных и ключи вне контроля, то это норм.

@jsunderhood это стыд, а не норм. Норм это Map.

для Map нужен полифил, если тебе нужен микро мэп то это Object.create() к примеру использовать это в небольшой либе - ок. @mr_mig_by

конечно я бы предпочел Map в приложении плюс полифил, там где микро оптимизации размера не важны @mr_mig_by

. @jsunderhood Если бы разработчики firefox extensions API дизайнили апи жаваскрипта, ajax выглядел бы вот так: developer.mozilla.org/en-US/Add-ons/…

насколько я знаю фаерфокс сплошной говнокод плюс на экстеншены никто апи не стандартизирует вроде. @mr_mig_by

@jsunderhood пытаются какбэ слить всё в wiki.mozilla.org/WebExtensions
Но до результата как раком до Китая :(

А кто может обьяснить почему многие разработчики не любят фронтенд? мне лично не раз попадались ...

Я когда-то перешел с фронтенда на ноду, года 2 работал, вернулся в фронтенд. Здесь постоянно что-то новое происходит. А там скукота.

Болшинство бэкендов сводятся к передачи данных из базы кудато еще и к пользователю ...

Бэкендлеры этакие переносчики стримов)

@jsunderhood большинство фронтэндов сводится к формошлепству на жквери/ангуляре

@jsunderhood фронтэндщики этакие преобразователи жсона)

@jsunderhood Потому что у JS всегда была плохая репутация среди хардокрных программистов. А html/css - это вообще не про программирование))

незнаю я это вижу до сих пор ... причем даже у людей которые вплотную занимаются фронтендом @Xvakin

@jsunderhood на бэкенде таки много сложных заморочек типа кеширования, шардинга, поисковых алгоритмов, не знакомых фронтендерам

по хорошему, шардингом занимаются devops а не бэкендлеры, а поисковыми алгоритами - математики @Xvakin

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

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

@jsunderhood @Xvakin UI верстается на CEF/Electron в 4-5 раз быстрее, чем его могут кое-как реализовать на Qt/XAML. Хлеб отнимают!

Qt это не бэкенд, опять таки я сейчас имел введу только веб @sergo_vitkovsky @Xvakin

@jsunderhood Там еще и большое количество ненавистников JS как языка.

да но если учитывать ноду то язык тот же @webholt

@jsunderhood @Xvakin веб-фронтэнд - это уже не только про веб )

@jsunderhood ого, фронтенд-инженеры. Так и до фронтенд-CTO недалеко.

тоесть ты никогда не слышал такой профессии Frontend Engineer? @twenty

@Xvakin @jsunderhood хардкорные программисты это асм или плюсы?

@jsunderhood А разработчики на ноде более лояльны к фронтэнду, как мне кажется. Они с ним слишком тесно связаны. Либо не любят и саму ноду.

кроме языка связи нет. @webholt

@twenty @jsunderhood Ну а что, на фронтэнде нынче что угодно воспроизвести можно. Упереться можно, в основном, лишь в производительность.

поздравляю, иди читай что нибудь, повышай развитие @twenty

определение термина "инженер очень размазанное" поэтому в теории можно, но есть общепринятые понятия поэтому @twenty

поэтому верстальщики пожалуй пока останутся верстальщиками en.wikipedia.org/wiki/Engineeri… @twenty

есть кстати Rendering Engineer но это не верстание. @twenty

как я и сказал в теории могут. @twenty

ню-ню @twenty

@twenty @jsunderhood реквестирую название "нормальных компаний"

. @jsunderhood фронтэнд для молодняка, бекенд для пенсионеров! 👻😱

забываю) я же инженер, пытаюсь еще и работать между делом)))) @iamstarkov

нам нужен специальный клиент для твиттера чтоб это все удобно было @iamstarkov

на данный момент frontend engineer .... покрайней мере так написано в контракте ))) @diedsmilling @iamstarkov

к счастьтю всем пофиг что эты это сказал) @twenty @diedsmilling @iamstarkov

@twenty @diedsmilling @jsunderhood @iamstarkov серьезная тема. Т.е. на фронте инженерить нечего? Поддержка не нужна?

@mr_mig_by @jsunderhood логика такая: если фронтендеры — это инженеры, то тестировщики, дизайнеры и продукт оунеры — тоже инженеры.

а слышал test automation engineer? наверно я тебя сейчас взорвал @twenty @mr_mig_by

@mr_mig_by @jsunderhood в таком случае, вот этот твит выглядит как-то оскорбительно.

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

13:11

лично я просто еще не слышал о html engineeri ... @twenty @mr_mig_by

@jsunderhood @mr_mig_by я правильно понимаю, что тестировщики — это инженеры? Дизайнеры — инженеры? Верстальщики — инженеры?

test automation engineer и мануальный тестер этот разные вещи, остальных не слышал таких .. но все может быть) @twenty @mr_mig_by

@jsunderhood @mr_mig_by UX engineer не слышал?

у меня был такой титул когда-то, но я впринципе был frontend engineer, это просто дураки писали. В теории да должно быть @twenty @mr_mig_by

/@twenty @jsunderhood @mr_mig_by я правильно понимаю, что без звания "инженер" программист чувствует себя каким-то неполноценным?

не знаю насчет полноценности, но разница в зарплате может быть точно) @rubyunderhood @twenty @mr_mig_by

/@jsunderhood я наблюдал в совковых конторах, что должность "инженер-программист" дают всем, у кого ВО, а "программист" тем, кто без ВО.

@rubyunderhood @jsunderhood вот вам на всякий случай: slideshare.net/alexeymigutsky…
И вот еще: slideshare.net/zhellaanne/int…

@rubyunderhood @twenty @jsunderhood @mr_mig_by слово «инженер» по своей этимологии означает тупо «конструктор». То, что сюда приплетают ВО..

@rubyunderhood @twenty @jsunderhood @mr_mig_by ..просто следствие сакрализации академического подхода. Степень автоматизации -- не критерий.

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

I like #javascript more than other languages because...

@roman01la @mr_mig_by @jsunderhood I like JavaScript because undefined is not a function

@kuksikus @jsunderhood youtube.com/watch?v=20BySC… =)

Вопрос: чем пользуются у вас в командах для коммуникации кроме эмаила?

@jsunderhood google hangouts, slack, appear.in, github PRs/issues

@jsunderhood @fuckingsun Slack, еще в прошлой команде Hipchat юзали, но он грустненький

@jsunderhood skype, telegram

@jsunderhood @fuckingsun скайп, слэк, вк

@jsunderhood slack

А какие являются основные критерии или функции по которым вы выбирали чат?

@jsunderhood хипчат + телеграм

@jsunderhood разграничение, доступность клиента, управление файлами прозрачное, простая разметка

@jsunderhood пиздюли, давление авторитетом, запугивание и угрозы, вера в то, что босс умней

@jsunderhood Slack

@jsunderhood Skype, Lync (Skype for business), Outlook Express, короче полный ад.

@jsunderhood slack, disqus

@a_novok @jsunderhood любые устройства, в том числе и просто веб-версия есть, можно создавать чаты, упоминать людей, защищенность тоже норм

@jsunderhood @a_novok телеграм в основном

@jsunderhood только телеграм

@jsunderhood скайп, много скайпа, все на расстоянии одного клика

@jsunderhood, телеграм.

@jsunderhood чем угодно, кроме email, я бы сказал - всем, кроме него)

@jsunderhood перенесли все чатики в Telegram

я работаю на chatgrape.com , фокус на безопасность, интеграцию сервисов, встроенный поиск по сервисам, попробуйте ...

и так моя неделя подошла к концу, с вами был @oleg008, желаю всем поменьше говнокода)