Доброе утро! Следующие 7 дней этим аккаунтом буду рулить я — Владимир Кузнецов. Мне 37 лет. Живу в Челябинске.

Работаю в компании graph.uk В последнее время занимаюсь разработкой одностраничных приложений.

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

@jsunderhood Привет! Расскажи про свой профессиональный путь,пожалуйста.Давно ли в разработке, всегда ли писал на js, какое образование,etc.

.@_sashashakun Профессионально начал заниматься вебдевом в год, когда появился первый iPhone. Сколько уже прошло? А так и до этого писал.

У меня высшее образование. Диплом по специальности «Общая физика». С уверенностью могу сказать, что «вышка» мне помогает в жизни.

.@jsunderhood интересный способ измерять время;) это 2007 год, 8 лет стало быть прошло

.@_sashashakun У меня ассоциативная память. Я не помню даты, например, но помню события и подробности. Так можно многое восстановить.

Ещё я плохо запоминаю лица людей. Могу знакомиться несколько раз с человеком. Но если запомню, то в толпе узнаю легко. ;-)

@jsunderhood а в чем именно помогает вышка? Устроиться в престижные компании или почерпнули глобальные знания?

.@tsbgroup @dcromster Я научился ставить эксперименты — помогает писать тесты. Да, вуз дал фундаментальные знания по математике и физики.

@jsunderhood а как попал в эту компанию, сколько было опыта в вебе на тот момент? Сами нашли или ты нашёл их?

.@_sashashakun В Челябинске офис разработки. Я знаком с директором. Попросился на испытательный срок, когда захотел сменить работу.

.@_sashashakun Работал 2 дня в неделю в старой компании и 3 дня в новой целый месяц. Пытался понять хорошо мне будет или нет.

.@tsbgroup @jsunderhood кроме математики и физики, систематизирует знания, учит читать учебники,ну и усидчивости, на всех с вышкой есть след

.@gxoptg_ @_sashashakun После вуза я больше 5 лет работал физиком и изучал интересные физические явления. Потом в компании инет-провайдера.

@jsunderhood Какие разделы физики и математики посоветуешь первыми изучать, тем кто не учился в университете еще?

.@m1kenobe У нас в ЧелГУ были специальности: теоретическая физика, физика твёрдого тела, радиофизика и общая физика. Они все разные.

.@m1kenobe Но база в виде механики, оптики, электродинамики и квантовой физики была у всех. На самом деле было ещё куча всего общего.

@jsunderhood @tsbgroup @dcromster то есть по одному семестру, грубо, физики и электроники + год вышмат/матан. 5 лет того, безусловно, стоят!

@nmishin @tsbgroup @jsunderhood все это дает нормальная школа. Единственной адекватной целью тратить еще 5 лет может быть конкретная спец-ть

@jsunderhood у меня есть друг детства, который бросил ВУЗ и стал гораздо успешнее всего моего окружения (поколения) с высшим образованием.

Полностью согласен с @Chudesnov. @dcromster, «вышку» нужно получать осознано, а не ради корочек. А после вуза идти работать по специальности

@dcromster @jsunderhood какоц критерий успешности для тебя?

@esergeev 1.Он не работает. Вообще. 2.Живёт в своём доме. 3. Есть всё,что надо. 4. Отличные дорогие хобби. @jsunderhood

.@dcromster Откуда деньги у твоего друга детства, если он не работает? По-моему, ты чего-то не знаешь про него.

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

@levka_levka да. Ты можешь посветить время себе, семье, хобби. Слетать в теплые страны когда хочешь, а не когда разрешат @jsunderhood

.@dcromster Разве тебе кто-то сказал, что лично у тебя не получится организовать свой бизнес и потом летать в тёплые страны?

@jsunderhood получится. должно! Я стремлюсь к этому! Потому что работа на дядю = зло :) Пути назад уже нет. Но... я то уже старый :)

@dcromster @jsunderhood А у меня есть друг, который бросил ВУЗ и стал наркоманом.

Мой первый аккаунт @mista_k я уже веду 7 лет. Два года назад завёл ещё один @mistakster для общения только на английском на тех. темы.

Стал ездить на зарубежные конференции и общаться с иностранцами. «Негоже пугать людей кириллицей», — подумал я.

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

У меня нет аккаунтов во Вконтакте или Одноклассниках. Facebook и G+ использую разве что для регистрации в каких-либо сервисах.

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

Много-ли вы времени проводите в социалках? Как они влияют на вашу продуктивность в течение дня?

@jsunderhood у меня твиттер и вк как правило все время открыты. сильно не мешает.

.@kohgpat Ты проверяешь вкладки каждые 5-10 минут и при этом не теряешь фокус? Делись, как тебе удаётся!

@jsunderhood постоянно открыт tweetdeck. @jsunderhood или, например, @iamspacegray обучают меня чему-то новому (: Советуюсь с читателями

.@Kern_0 Расскажи больше как тебе удаётся отслеживать все новые твитты в ленте и не терять фокус на работе?

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

.@kohgpat Тогда следующий вопрос: «А как часто ты делаешь перерывы в таком случае?»

@jsunderhood вообще по разному. обычно каждые минут 15-20 на пару минут отвлекаюсь, либо раз в 40-60 минут на 10-15.

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

.@kohgpat Окей. Я не спорю. А у тебя бывает такое, что хочется программировать с утра и до ночи (задача увлекла так, что не оторваться)?

@jsunderhood я думаю у всех так бывает :). я не исключение.

@jsunderhood Да как-то так :) Если серьёзно, то когда как. Если уже навёлся фокус на задачу, то уже ничто не оторвёт.
i.imgur.com/MB4oSDO.gif

.@Kern_0 Ха-ха! Зачётный скринкаст получился. ;-)

@jsunderhood И да, тебе не кажется, что спрашивать в течении дня о том как не отвлекаться от соцсетей в соцсети это немного неправильно? :)

.@Kern_0 Ай, молодца! Подловил. :-) Те, кто не отвлекается, мне напишут вечером.

@jsunderhood Я, чтобы не увлекаться, пользуюсь помидорками. В перерывах можно проверить Твитер. @kohgpat

.@gxoptg_ @kohgpat Да, «Помодоро» мы уже тут обсуждали. Надо не забывать только заводить его.

интересное чувство, когда ведущий @jsunderhood сидит в соседней комнате.

.@denswor Приходи завтра работать ко мне — будем сидеть в одной комнате!

@SilentImp так это, pixel perfect не бывает же. За что карать то?

.@xwoody 100% pixel perfect не бывает. Но есть зазоры, отступы, размеры шрифтов и т.д. Можно делать «на глазок» или точно. @SilentImp

.@xwoody Тогда @SilentImp сделал быстро, но не совсем точно. Я наложил картинку поверх страницы и всего-то попросил убрать расхождения.

.@xwoody Дизайнеры — это творческие люди им простительно сантиметр туда, сантиметр сюда. Задача упорядочить, а не сделать ремейк @SilentImp

@xwoody @SilentImp @jsunderhood Тут вопрос культуры. В фотошопе трудно следить за отступами, при вёрстке их можно протерять только спецально

@jsunderhood его всегда использую. До этого скриптом делал картинку поверх верстки =)

@jsunderhood Привет! Будет ли утечка, если удалить элемент с addeventlistener с не анонимной функцией? Нужно ли принудительно удалять его?

.@hellbeast92 Звучит как вопрос на собеседовании. Думаю, утечки не будет. Чтобы точно ответить, нужен пример.

@jsunderhood ещё вопрос, если создать backbone вью для опр элемента и удалить элемент, что будет с вью, если на него нет ссылок?

.@hellbeast92 В этом случае, утечка очень вероятна. Вьюха Backbone хранит ссылку на обёртку эл-та jQ и события, которые биндятся через jQ.

@jsunderhood вовсе нет) а есть тогда годное чтиво про гарбач коллектор и остальное связанное с памятью в js?)

.@hellbeast92 Сейчас не припомню. Может @rdvornov что-либо посоветует? Лучше всего профилировать приложение, мне кажется.

@jsunderhood что подразумевается под "профилировать"? Я не очень это понял)

.@hellbeast92 в Chrome Dev Tools есть вкладка «Profiles». Там можно записать и проанализировать расход памяти developer.chrome.com/devtools/docs/…

.@hellbeast92 Ещё на закладке «Timeline» можно посмотреть график: pic.twitter.com/ihXXUtVo9w

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

Утром за завтраком пролистываю твиттер и новости в RSS-читалке. Ещё раз читаю RSS за ужином. Это позволяет не отвлекаться днём.

На работу хожу пешком — 25-30 минут в одну сторону. Утром позволяет настроиться на рабочий лад. Вечером — расслабить мозги.

Тема завтрашнего дня: TLS, HTTP/2 и прочие клёвые штуки.

@jsunderhood я сам недавно отказался на работе полностью от Твиттера и RSS. Очень повысило продуктивность, у меня мелочи её убивают.

Вопрос про Wordpress: вы в репозитории весь код храните или только тему?

.@toivonens Я предпочитаю хранить весь код. Так проще обновляться.

Поговорим о защищенных соединениях. На сегодняшний день используются протоколы TLS 1.0, 1.1 и 1.2. SSL всех версий считается устаревшим.

Чтобы установить TLS соединение, нужно сделать много вычислений. Однако, клиент и сервер могут использовать session id для новых запросов.

Вот пример сайта Сбербанка. Сиреневые полоски — SSL handshake только на первых запросах. pic.twitter.com/SZBTM9BXJD

После обновления страницы SSL handshake вообще не делается ни на одном из около сотни запросов. pic.twitter.com/EueDhkcRNL

@jsunderhood А как ты синхронизируешь, если код обновился на продакшене?

.@toivonens Всё выкатывается через Git. Изменения с продакшина тоже комитятся. В основном это касается картинок и автогенерируемых конфигов.

Google, Mozilla и другие начали массивную кампанию «HTTPS Everywhere». Рекомендуют переводить все сайты на защищённые соединения.

Я с ними согласен. Любой школьник, сидя в Старбаксе, может собрать очень много приватной информации из подключений к открытому Wi-Fi.

Что думаете по этому поводу?

@jsunderhood ещё рекламные врезки в публичном вайфае типа метро. перевожу.

.@mktoid Совершенно верно! Хоть это и способ монетизации, но не приятно как-то.

@jsunderhood смысл имеет, но для всех ли сайтов? Например, зачем переходить на HTTPS сайту в котором нет даже регистрации?

@Bizi @jsunderhood чтобы человек-по-середине не подменял его контенет, например...

.@mxtnr В точку! @Bizi, на вашу страницу можно добвать рекламы, поменять контент. Наверное, для многих это не смертельно.

@jsunderhood @mxtnr согласен, не приятно будет. С другой стороны вероятность исхода такого события очень маловероятна.

.@Bizi, вероятность очень велика. В аэропортах и прочих публичных местах бесплатные WiFi уже так работают: редиректы и попапы норма. @mxtnr

@Bizi @jsunderhood @mxtnr ну, вайфай в метро этим грешит.

@justusebrain @Bizi @jsunderhood Причём беннеры на весь экран я ловлю прямо на выдаче Яндекса

@mxtnr @justusebrain @jsunderhood видимо пока в больших городах. Благо до нас такое не дошло :) Но переходить на HTTPS надо всем, согласен.

HTTPS на сайте — это, в первую очередь, забота о пользователе. Он, скорее всего, даже и не заметит её, а она есть.

@mista_k @jsunderhood у нас тут сертификаты протухли, а nic.ru решил тупить и не генерить новые. И hsts оказался несколько болезненной вещью

.@_h4_ Мда-а-а… Можно было сделать любой «Instant issue» сертификат в любом CA. Потом заменили бы на nic-овский. Работы на 30 минут.

Если сервер отдавал заголовок Strict Transport Security, то браузер никогда в течение указанного времени не будет открывать обычную версию.

В каментах начали обсуждать цены на сертификаты. Самый дешевый $5 (реселер Comodo). Платить больше есть смысл только, если нужен «Green bar»

@mktoid @jsunderhood Сертификат стоит $10 в год.

@jsunderhood они вроде планировать ещё запустить бесплатную раздачу сертификатов, ещё не?

Бесплатные сертификаты на год: startssl.com или buy.wosign.com/free/ Они хороши для домашних проектов.

@jsunderhood кажется есть места, где можно бесплатно получить SSL-сертификаты. Слышал про bit.ly/1NKEaYe

.@KSDaemon Я им пользуюсь для экспериментов. Быстро и без особых заморочек. Но платить деньги я бы им не стал. Чуть позже расскажу почему.

@jsunderhood а если нужна поддержка под-доменов, то самый дешёвый, который я нашёл стоит около 80$ (тоже Comodo), или есть ещё что-то?

.@alekseykulikov_ Если все поддомены известны, то лучше купить N штук за $5. Wildcard сертификаты дают удобство, но за него нужно платить.

Для WoSign обязательно нужно настраивать OCSP stapling. Иначе ваши пользователи из Европы получат +300-500 мс ко времени ответа сервера.

OCSP — способ быстро узнать валиден-ли сертификат. Сертификат может быть отозван. Браузер проверяет это в Certification authority (CA).

У WoSign сервера в Китае. Туда очень долго ходят пакеты. А пока от CA не будет получено подтверждения, браузер не доверяет сертификату.

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

@jsunderhood @Bizi @mxtnr интересно, как скоро все начнут внедрять шпионские сертификаты в ОС для обхода такой защиты. Lenovo уже согрешили.

@jsunderhood для https на статических блогов/сайтов на github pages можно использовать cloudflare, они предоставляют бесплатный сертификат

@jsunderhood cloudflare бесплатный https между пользователем и cloudflare, настраивается за 5 минут, cdn в подарок.

Получать сертификат чрез CloudFlare выглядит как хак «Man-in-the-middle». Разработчик сайта доверяет ему, а юзер? pic.twitter.com/O0IsingRWg

Такой сертификат ничего не сертифицирует. На ум приходит аналогия — купить диплом в переходе. +@medvezhopok +@iamstarkov

@jsunderhood от школьников в Старбаксе спасает, трафик шифруется до cloudflare, решение пригодно для shared hosting

.@medvezhopok Увы, это решение годится только для экспериментов или low-cost проектов. Не стоит его предлагать клиентам на полном серьёзе.

Этой осенью запускается проект @letsencrypt letsencrypt.org Он спонсируется Mozilla, Akamai, Cisco и др.

Суть в том, что вы устанавливаете на сервер пакет и конфигурируете его одной командой. pic.twitter.com/eY5l5XtsbO

Дальше он сам пройдёт валидацию у CA, получит сертификат, установит на сервер и обновит его перед окончанием срока действия.

Let’s Encrypt будет абсолютно бесплатным. Уверен, это заставит мейджоров пересмотреть свои цены. Боюсь, дорогие сертификаты будут ещё дороже

@jsunderhood @medvezhopok каким клиентам нужен хостинг на github pages? это чтобы у тебя в блоге не было чужой рекламы и были service worker

Не могу не рассказать о том, как облажалась StartCom, среди прочего выпускающая бесплатные сертификаты: forum.startcom.org/viewtopic.php?…

В Windows происходит какая-то путаница с их промежуточными сертификатами. В итоге, сертификат подписанный SHA-1 имеет приоритет над SHA-256.

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

Поэтому не советую нести ей свои деньги до конца 2017 года, когда протухнет её SHA-1 промежуточный сертификат.

Ещё одной инициативой разработчиков браузеров стал отказ от поддержки устаревших методов шифрования и хеширования. pic.twitter.com/JSNV3NJhtI

Таких предупреждений вы будет сейчас встречать всё больше и больше. Тут используется конечный сертификат с подписью SHA-1.

В течение 2015-2016 все сертификаты с SHA-1 должны быть заменены. Иначе новые браузеры откажутся подключаться к таким сайтам.

Вот что об этом пишут специалисты — community.qualys.com/blogs/security… и сам Google — googleonlinesecurity.blogspot.co.uk/2014/09/gradua…

Генератор конфигурации TLS для популярных серверов mozilla.github.io/server-side-tl… pic.twitter.com/sxI5B2EPtV

Аудит настроек сервера ssllabs.com/ssltest Плюсик в рейтинге даётся за включение HSTS. pic.twitter.com/qV6vtqj8zV

@jsunderhood хром ставит желтый значек сайтам, у которых самый первый сертификат в цепочке sha1. Но не всегда. Почему, не в курсе?

.@slonoed Новый Хром ставит жёлтый значок всем сайтам с SHA1. В Гугле так решили. Дай, пожалуйста, пример, где значка нет.

Совсем недавно на местной встрече #ChellyJS я делал презентацию «Переходи на HTTPS» (слайды: goo.gl/eYKQms, видео пока нет)

В конце сегодняшнего дня хочу поделиться чек-листом при настройке TLS. Спрашивайте, если появятся какие-то вопросы. pic.twitter.com/bCWiw8hs4B

@jsunderhood там вообще реально 100/100/100/100 получить?

.@fleg31 Да, реально. Вот описание начисления баллов ssllabs.com/downloads/SSL_… Только при таких настройках далеко не все браузеры подключатся.

@jsunderhood тема правильных шифров не раскрыта.

.@deepwalker Пользуйся генератором конфигурации. Нет нужды запоминать этот список.

Интересная статья «Deprecating Non-Secure HTTP» blog.mozilla.org/security/2015/…

Разработчики браузеров дают ясно понять, что новые фичи будут доступны только по защищённому соединению.

Это мы уже видим сейчас — протокол HTTP/2 и Service Workers работают только поверх TLS.

Базой для HTTP/2 послужил протокол SPDY. Основной упор сделан на производительности: минимизация задержек, одно подключение и т.д.

Благодаря обратной совместимости с HTTP/1.x, сервер использует HTTP/2, SPDY или HTTP/1.x исходя из возможностей клиента.

Известная демка HTTP/2 от Akamai http2.akamai.com/demo Посмотрите на сколько он эффективнее на куче мелких файлов. pic.twitter.com/9zaF5e0XSF

Ради развлечения, решил повторить их эксперимент ihc.ru/http2/?utm_sou… (Алярма! HTTP/2 нет в Safari) Это shared hosting @ihc_ru

А вот и запись моего выступления на #ChellyJS подоспела youtu.be/_h7M1KA7aAI

Кстати, для Open Source проектов можно получить бесплатный сертификат у GlobalSign globalsign.com/en/ssl/ssl-ope… +@iamstarkov

На тему HTTP/2 рекомендую посмотреть презентацию Ильи Григорика «HTTP/2 performance anti-patterns» youtube.com/watch?v=yURLTw…

Слайды docs.google.com/presentation/d… pic.twitter.com/kzLMQrCM7D

Предлагаю тему для обсуждени. Burnout. Был у вас? Как вышли из него? Обращались к врачу? @rubyunderhood @jsunderhood @backendsecret

@anton_davydov сменил сферу деятельности :) @rubyunderhood @jsunderhood @backendsecret

@anton_davydov @rubyunderhood @jsunderhood @backendsecret за пару месяцев проходит, нало перетерпеть

. @anton_davydov Отличная тема. Мой график приводит меня к рабочим упадкам примерно 2 раза в год, тогда же, когда и обострение у психов. :)

@anton_davydov @rubyunderhood @jsunderhood @backendsecret сменил работу на более перспективную - совпало просто

@anton_davydov @rubyunderhood @jsunderhood @backendsecret отпуск, смена направления деятельности/роли в проекте или переезд в другой город

@anton_davydov я пока не пришел к спорту и медитациям, несколько раз переезжал Киев - Львов и обратно.

@anton_davydov @Semenov @rubyunderhood @jsunderhood @backendsecret как понять вообще, burnout ли у меня? Какие симптомы?

@anton_davydov смена работы. бооольшой отпуск (вообще не реально) @rubyunderhood @jsunderhood @backendsecret

.@anton_davydov Мне помогают оставаться в кондиции хоть какая-то физ. активность и смена проектов. Я зажигаюсь новым делом.

@anton_davydov а что, врачи как-то умеют эту бяку фиксить? @rubyunderhood @jsunderhood @backendsecret

@SelenIT2 есть такой диагноз под номером z73.0 сам не ходил,но думаю,что витаминами могут помочь @rubyunderhood @jsunderhood @backendsecret

“Burnout”, судя по ответам, самая частая причина, почему люди хотят покинуть индустрию. /cc @jsunderhood

Tech folks: has anything ever made you want to quit the industry? What was it? Was it resolved?
RT for reach? would ❤️ a range of responses

13:23

@anton_davydov @rubyunderhood @jsunderhood @backendsecret смотрите
mtrpl.ru/troubles про терапию
habrahabr.ru/post/260249/ про депрессию

Дожил. Вадим очень точно описал всё ощущения по этому поводу. Я смотрел выступление в живую и буквально чувствовал, что рассказывал про меня

Сам я действительно перестал гнаться за коллегами, которые на 10-15 лет младше меня — они реально больше делают за то же время.

Депрессии по этому поводу не испытываю. Проявляю себя на работе в другом качестве. В будущем, возможно, уйду в консалтинг.

.@toivonens Могу знать кучу решений какой-то задачи и помогаю её решать. Как в парном программировани — один говорит, другой нажимает кнопки

.@toivonens Тусуюсь и выступаю на конференциях. Нравится быть в тренде и рассказывать о новинках коллегам. Экспериментирую и делюсь опытом.

Книга Ильи Григорика chimera.labs.oreilly.com/books/12300000… «High Performance Browser Networking» по рекомендации @listochkin pic.twitter.com/1dyrwNfSnk

У Ильи все презентации информативные. Посмотрите «Is TLS Fast Yet?» и «HTTPS Everywhere» igvita.com pic.twitter.com/GnTjaqxmfI

@jsunderhood @oelifantiev ещё есть h2o (MIT) h2o.examp1e.net

@jsunderhood @ihc_ru У меня все заработало.

@jsunderhood мне чуть меньше, но я согласен с каждым словом.

@jsunderhood @oelifantiev их довльно много в том числе и открытых, например nghttp2.org, вообще см. github.com/http2/http2-sp…

Тема четверга: Webpack

В этом году на конференциях, я слышал в разговорах практически одну и туже фразу: «Все читали про Webpack, но ни кто не пробовал его».

Это реально крутой инструмент, который может заменить Grunt и Gulp. Мы его используем. И сегодня я попробую поагитировать за него.

@jsunderhood есть пример конфига webpack’a, ваш шаблон не выложен на гитхабе?

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

@jsunderhood может заменить? Но зачем, если gulp полностью устраивает?

@TheSunwave @jsunderhood import, умная, настраиваемая разбивка на бандлы, module replacement, сервер, который компилирует и не пишет на диск

@MaxMykhailenko @jsunderhood @TheSunwave как насчет скорости? Галп крайне реактивный

Сравнивать Webpack и Grunt/Gulp не корректно — у них разные задачи. Но, Webpack действительно может их заменить!

Перефразирую известную цитату: «Если у вас в руках Webpack, то всё вокруг становится модулями!»

Там в полную силу реализована концепция загрузчиков из AMD. Любой контент трансформируется в JavaScript на этапе сборки.

@jsunderhood можно ли заставить webpack при сборке игнорировать асинхронный amd-require, и чтобы в рантайме отработало асинхронно ...

.@oelifantiev Подозреваю, что в этом случае нужно применять генераторы. pic.twitter.com/eoXI8FuVD0

@oelifantiev @jsunderhood ответ где-то здесь, видимо — webpack.github.io/docs/code-spli…

Например, стили можно преобразовать так: LESS → CSS → PostCSS → JS. Когда выполняется require(), то они добавляются на страницу в <style>.

Другие загрузчики выдают контент в виде JS-объекта или файла (большие картинки, например). Они умеют модифицировать данные, если нужно.

Пример конфига. Все LESS-файлы пройдут через конвейер. Картинки и шрифты скопируются. URLы на них будут правильные. pic.twitter.com/tldvVO6N0k

file-loader можно заменить на github.com/webpack/url-lo…. Тогда графика маленьких размеров будет загружаться как data uri. Спрайты не нужны!

@jsunderhood чем 'file-loader' отличается от 'url-loader'? А то разные варианты конфигов попадаются.

.@vdv73rus url-loader работает как file-load для больших файлов и встраивает содержимое как data uri для маленьких.

@jsunderhood а лучше еще в extract-text-webpack-plugin загнать :)

.@hellbeast92 и отказаться от Hot Module Replacement? :-)

@jsunderhood, а есть какая-то возможность собранный через Extract Text файл стилей прогнать через CSSO?

.@kinday Можно, если написать свой плагин. Возможно, такой уже есть. BTW, css-loader минимизирует сам стили через clean-css.

@jsunderhood, вопрос в минимизации итогового файла, а не всех по отдельности.

.@kinday Если я правильно понял, то хочется продвинутых структурных оптимизаций? Честно, я побаиваюсь их. Поэтому не интересовался.

@jsunderhood пробую webpack уже 4 месяца. Полностью отказался от gulp/grunt за ненадобностью

@jsunderhood У нас в #rambler есть boilerplate с webpack
github.com/rambler-digita…
Может кому будет интересно =)

@jsunderhood Ее не понять без чтения документации. И почему для настроек используется строка? Почему не хэш?

.@verkholantsev Webpack использует синтаксис AMD. Конфигурация загрузчиков позволяет не писать это непосредственно в коде.

.@verkholantsev github.com/amdjs/amdjs-ap… Спека AMD для загрузчиков «нетрадиционных» JS ресурсов.

Data URI можно вынести в отдельный файл плагином github.com/Ser-Gen/postcs… по рекомендации @andrey_sitnik pic.twitter.com/umGNsbpt0c

@jsunderhood не может, на нём бессмысленно запускать линтеры, проверки орфографии, тесты и т. д.

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

.@andrey_sitnik У меня ощущение, что гармонии долго не будет. Модули, которые утверждены ECMA, опять ориентированы в основном на JS-код.

@jsunderhood -loader можно опускать в имени. Еще удобно вместо строки loader указывать массив loaders: ['style', 'css', 'postcss', 'less']

@pomidore @jsunderhood опускание "-loader" чревато тем, что в коде не остается упоминания установленного в package.json модуля

.@chemikadze, Webpack — это сборка. Не путайте его с запуском задач. @me_mrsum

@jsunderhood gzip по идее должен очень хорошо жать одинаковые картинки в data-uri, поэтому пофиг.

@jsunderhood вот: gist.github.com/Olegas/26d059a…
Я хочу чтобы все собралось, кроме async. А он загрузился асинхр. но без чанков webpack а через RJS

@jsunderhood нагоняет на меня тоску.
"Сколько я ещё чего не знаю..."

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

Hot Module Replacement. Любой модуль может быть заменён в рантайме без перезагрузки страницы.

В приложение добавляется HMR runtime, который проверяет и загружает обновления. Подробности в доке webpack.github.io/docs/hot-modul…

Чтобы HMR работал, нужен сервер, который будет сообщать об обновлениях и раздавать упаковки. Есть standalone версия и middleware для Express

@jsunderhood а можно ли HMR использовать не с нодой? Например если проект на python/django

.@hellbeast92 Можно попробовать поднять webpack-dev-server и прокинуть его через ваш HTTP-сервер как через прокси.

@hellbeast92 @jsunderhood @jsunderhood при чем здесь бэкэнд? у нас есть проекты где бэк на джанге, фронт на реакте с HMR

@jsunderhood @hellbeast92 ну да, и весь самолет через Procfile и node-foreman взлетает в dev-окружении

.@kompotium Блеск! Получается что в HTML нужно только разные пути до асетов указывать для dev и prod окружения.

Как и обещал, мой конфиг с одного из последних проектов → gist.github.com/mistakster/2e1…

@jsunderhood я читал спеку и видел недавно опубликованную имплементацию на js. не уверен, что кто-то кроме фб и инстаграма его уже пробовали

@jsunderhood в фб его используют уже 2,5 года

@jsunderhood в августе будет релиз Relay же

Вот так нежданно,в ночи, мы выложили 27-й выпуск! Вместе с @iamstarkov обсуждаем Jekyll и Travis,Textr и @jsunderhood radiojs.ru/2015/07/radioj…

@jsunderhood а не поделишься каким-нибудь секретом, как найти работу с такими опциями и подходом? Прошу прощения за наглость...

.@SelenIT2 Секрета нет или я его не знаю. Думаю, нужно вкладывать в себя. Постоянно обучаться и совершенствоваться. Нарабатывать репутацию.

.@SelenIT2 Знакомиться с разными людьми и поддерживать контакт (не путай со «связями»). Если хочешь найти работу мечты, то её нужно искать.

@vmakhaev @jsunderhood вот кстати видео про рилей facebook.github.io/react/blog/201…

@vmakhaev @jsunderhood и ещё одно горячее youtube.com/watch?v=IrgHur…

@jsunderhood ещё не пробовал, но вот свежий доклад youtube.com/watch?v=WQLzZf…
спека facebook.github.io/graphql/
и js github.com/graphql/graphq…

@jsunderhood @SelenIT2 или быть @paul_irish
paulirish.com/contact-me/ pic.twitter.com/17a1XhlOPY

@jsunderhood @SelenIT2 для начала стоит определить критерии "работа мечты".

Для этого даже есть название @pvlpvs @jsunderhood pic.twitter.com/p4Q7pBgaGo

@andrey_sitnik @jsunderhood мне кажется webpack вообще нет смысла рассматривать как таск-раннер.

@andrey_sitnik @jsunderhood Другое дело - никто не тащит два инструмента на проект. В этом плане Gulp более универсальный.

@jsunderhood а такие загрузчики как-то решают проблему 32 style на странице в ie8-9?

.@oelifantiev По-моему, нет. Мы сами что-то комбинируем через import, что-то оставляем так.

@jsunderhood почему не используешь ExtractTextPlugin для css в продакшен режиме? Инжектинг стилей в дом выглядит довольно сомнительно

.@vlkosinov А почему тебе кажется это сомнительным? ExtractTextPlugin используем, но, не в этом проекте.

@jsunderhood почему не используешь CommonsChunkPlugin хотя бы для вынесения вендоров в отдельный бандл?

.@vlkosinov Если есть несколько точек входа, то используем. В этом проекте всё хитрее — ручной code splitting. pic.twitter.com/sHVj7c2CtN

.@vlkosinov Фишка в том, что мы получаем крохотный загрузчик, который не кешируется. Он тянет остальное, которое может быть закешировано.

@jsunderhood а ревизии к бандлу галп проставляет?

.@vlkosinov В связке с Gulp мы предпочитаем cache busting через URL. Типа как тут: github.com/h5bp/server-co… Имена файлов не меняются.

@jsunderhood @jincod Вчера 30 мин читал спеку, 30 мин тесты в graphql-js, и за 30 минут сделал для маленького проекта бэк на Монго. Работает

@jsunderhood @jincod но я до этого конечно много читал, смотрел и ждал :)

@vlkosinov @jsunderhood Сомнительно, потому что FOUC en.wikipedia.org/wiki/Flash_of_…

.@kompotium, нет FOUC потому как SPA. :-) Для сайтов со статичным контентом разумеется стили в файл выписывать однозначно. @vlkosinov

@jsunderhood @vlkosinov дык какая разница SPA-не SPA; будет один раз, но все равно будет

.@kompotium, как он будет, если на странице кроме <div></div> ничего нет? :-) @vlkosinov

Кстати, мне на столько нравится HMR, что я думаю попробовать его использовать во время вёрстки статических прототипов (PSD → HTML+CSS).

@jsunderhood @vlkosinov ох да, забыл, что можно делать сайты не на реакте и без серверного рендеринга)

@kompotium @jsunderhood можно при серверном рендере извлечь стили отрендеренных компонентов — github.com/webpack/react-… и тогде не будет FOUC

#TGIF pic.twitter.com/oQeqFQmgvp

Давайте устроим сегодня #FollowFriday, а? Вы рассказываете о себе или о знакомых — я рекомендую ваши профили.

Рекомендую подписаться на @webstandards_ru. Каждый день там появляются ссылки на актуальные статьи и видео о фронтэнде и не только.

Лента @webstandards_ru курируется Вадимом @pepelsbey. За что ему большое спасибо.

Вопрос к фронтендщикам: перед тем как зафолловить коллегу, является ли решающим наличие у него интересного сайта/блога? // via @jsunderhood

.@Bizi По мне так, лишь бы человек был хороший и не спамил бы в ленту.

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

.@Bizi Для этого и есть блоги. Но туда нужно писать. Я в свой уже 3 месяца ничего не постил — нет времени написать полноценную статью. :-(

@Bizi но блог же надо поддерживать и не все умеют хорошо писать/рассказывать @jsunderhood

@Bizi @jsunderhood Лично я иду по простому пути: быстро проглядываю профиль и подписываюсь. Потом уже, если что-то не нравится, — unfollow

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

@Bizi нет, как твиттер вообще с этим связан? Если интересен блог  — rss скорее читаешь? @jsunderhood

@Bizi @jsunderhood нет, в твиттере интереснее читать про личную жизнь, технические статьи – в рсс

@Bizi @jsunderhood По блогу иногда удобно понять, фронтэндер человек или нет.

@Bizi @jsunderhood нет конечно. твитор самодостаточен

Хорошо, что за фронтэнд его мама не ругает. pic.twitter.com/OLttJ4RvXD

У нас продолжается #FollowFriday Вы пишете мне про себя — я ретвичу. Как это должно работать в картинках theoatmeal.com/comics/follow_…

@jsunderhood спасибо! А теперь я воспользуюсь твоей мощью снова.
Вопрос: как кто дебажит node.js? (хоть тут и фронтендщики, но вдруг)

@jsunderhood я пользовался github.com/adobe-research… в @brackets и очень доволен. Но не могу найти чего-то подобного для @AtomEditor :(

.@Kern_0 Всё гораздо проще. WebStorm или IntelliJ IDEA отлично дебажат Node.js jetbrains.com/idea/help/runn…

@jsunderhood так-то такой дебаг есть и в атоме, но видимо уж очень мне понравился то как это сделали в theseus: pic.twitter.com/WH9OHUHX3H

@Kern_0 @jsunderhood тут js. ты видел доклад про профилирование ноды? «Профилирование Node.js или…» fronttalks.ru

Владелец github.com/rockncoders отзовись пожалуйста!
#frontend

Предлагаю тему: обучение, книги, конференции и т.д.

@jsunderhood если кратко — все нужно. Нужна на это тратить время и деньги.

.@gladkih_m Куда же без этого в нашей индустрии?! Как ты предпочитаешь получать новую информацию?

Каждую неделю по вторникам в 18:00 мы смотрим доклады в офисе Яндекса. приходите или подписывайтесь на @FrontWatchs – все доклады тут.

Лично мне очень нравится такая инициатива @FrontWatchs

@jsunderhood подписан на различных разработчиков в тви и у них новая информация. Книги уже менее актуальны - они устаревают быстро.

Я, пожалуй, соглашусь с утверждением, что книги быстро устаревают. Технологии меняются → инфа в книге может устареть даже до её издания.

Но есть фундаментальные вещи типа «Искусство программирования» ru.wikipedia.org/wiki/%D0%98%D1… Я прочёл 3 тома лет 15 назад.

Есть «JavaScript: The Good Parts» safaribooksonline.com/library/view/j… и «JavaScript: The Definitive Guide» safaribooksonline.com/library/view/j…

@jsunderhood учебные программы тоже. Именно поэтому ВУЗы не могут подготовить актуальных современности ИТ-специалистов.

.@vdv73rus Это факт. Какие есть пути решения такой проблемы?

@jsunderhood а некоторые книги по функциональному программированию наоборот обретают новую жизнь. Все относительно.

@jsunderhood @vdv73rus то, что называется дуальным обучением в Германии (семестр - теория в ВУЗе, семестр - стажировка в боевых условиях)

.@vdv73rus Я сам не участвовал в подобном. Как минимум 2 моих знакомых в Челябинске целенаправленно идут читать курсы дизайна или разработки

@jsunderhood @vdv73rus мы в Симферополе делали спецкурс по фронтенду в университете.

Провели ШРИ в 2013, из 33 взяли 14 на работу в итоге.

.@harisov, я знаю, что в ШРИ ещё и большой конкурс был. Стоит устраивать жёсткий предварительный отбор? @vdv73rus, в вузе такого нет?

@vdv73rus @jsunderhood ШРИ бесплатная, мы просили прислать резюме и выполнить тестовое задание, по ним отбирали. ЕМНИП у нас было 85 заявок.

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

@jsunderhood @vdv73rus когда мы делали Школы вёрстки в Симферополе мы брали всех, кто приходил (было мало). Цель была засеять поле заново.

@vdv73rus @jsunderhood

ШРИ в этом году будет в Москве с 7-го сентября.

Регистрация открыта, можно подавать заявку

academy.yandex.ru/events/shri/ms…

@jsunderhood а еще им интересно пригласить лекцию/мероприятие - для PR & свои туда обычно приходят, например - dou.ua/lenta/articles…

Мне любопытно, сколько времени преподаватели таких школ и курсов тратят времени на подготовку лекций? +@harisov +@vdv73rus +@xraizor

@jsunderhood @vdv73rus @xraizor

Дофига. В несколько раз больше, чем на подготовку доклада на конференцию такой же длительности.

@vdv73rus @jsunderhood @xraizor

У нас каждую лекцию в ШРИ готовило несколько человек, чтобы она была более объективной. Я считаю суммарно.

@jsunderhood @harisov @xraizor У меня примерно 1 к 1 выходило.

.@vdv73rus, шустро. Это, наверное, только сделать план лекции без наглядного материала? @harisov

@jsunderhood @harisov да, план + структура слайдов

@harisov @jsunderhood @vdv73rus @xraizor интересно, у меня доклад на конференции дольше занимает. Репетировать надо и вау-эффект создавать.

@jsunderhood но если начинающий разработчик, то выбор не большой: учить по книгам и уже с первых рук узнавать о новинках.

Меня иногда спрашивают что почитать новичку. А ты, @denysdovhan, что посоветуешь?

@jsunderhood если по js, то "Eloquent JavaScript": eloquentjavascript.net
Есть перевод на русский: github.com/karmazzin/eloq…

@jsunderhood здесь очень просто подается теория + практические примеры, типа собственного языка программирования или Paint на js.

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

@jsunderhood какой у тебя метод подхода к новой области знания? Может изучаешь теорию или начинаешь сразу с практики, методом проб и ошибок?

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

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

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

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

Встречались на радио-рынке (помнит тут кто-нибудь такое явление?), обменивались программами. Ходили в гости. Было весело!

Писали музыку для AY чипа. Говорят, где-то в интернетах есть архивы, где хранится наши поделия. Находятся же коллекционеры.

@jsunderhood А советские микрокалькуляторы? Пробовал их программировать?

.@gxoptg_ О, да. Но это очень быстро прошло. Так как такого калькулятора лично у меня не было. Баловался им у друзей.

@gxoptg_ @jsunderhood Ох напомнил :) Я с них собственно и начинал. До сих пор не понимаю как докатился до JS.

@jsunderhood в Симферополе и сейчас есть радио-рынок. Там есть всё, так или иначе связанное с электроникой. Программами уже не обмениваются.

.@harisov В Челябинске радио-рынок тоже действует по сей день. Масштабы, разумеется, не те. Тогда это была точка притяжения.

Потом я купил Amiga A1200. Ребята, это был космос. Жаль, что до России эта платформа дошла уже на своём закате.

Тогда я изучил асемблер Motorolla 680x0. У меня была толстенная фирменная книжка с описанием всех команд. Писал демки и т.п.

Amiga уже была компьютером, где во всю использовались ЯП высокого уровня. В универе, я выучил С и написал две курсовые на нём.

Всё же первым высокоуровневым ЯП был Pascal. Где-то вместе с C был Fortran 77. Потом пошли С++, JS, PHP, Java, C#.

Вторая базировалась на первой и строила расчётную сетку для ЧМ на основе схематичной картинки. Была ещё визуализация полученных рез-тов.

@jsunderhood есть browsersync с вставкой стилей на лету, который в простых случаях даже настраивать не надо, для html - рефреш

Browsersync browsersync.io не видал. Может для вёрстки прототипов HMR будет оверкилом и browsersync тут будет проще. +@_boccob

@jsunderhood @FrontWatchs здорово как. А в Москве что-то подобное есть?

@jsunderhood а я люблю техникой начинать пользоваться без инструкции. Интересно и весело. Исключение — стиральные машины. Вообще не умею.

@denswor @jsunderhood аналогично, а кухонную технику придумали демоны.

@denswor @jsunderhood а ещё исключение — бензокоса)

Надеюсь, вы хорошо проводите время. В этот чудесный летний день. pic.twitter.com/ERIi62I4gI

@jsunderhood Какие нынче CSS фреймворки актуальны? Какие круче? Есть ли сравнительный обзор оных?

.@ymatuhin Для прототипирования UI я использую Bootstrap. В реальных проектах мы делаем CSS с нуля.

@jsunderhood привет, можешь рассказать про микроразметку? что актуально, что нет? за чем следить? как размечать блог?

.@iamstarkov В трендах сейчас JSON-LD. Он очень удобен тем, что мета-данные явно описываются в одном месте.

.@iamstarkov В microdata и microformat хоть и используется интересная идея ре-использования разметки, на практике приходится дублировать.

@jsunderhood @ymatuhin нравится semantic-ui, но заюзал только на одном проекте.

@jsunderhood я пробовал pure css, но пока смешанные чувства. А сеткой часто пользуетесь в реальных проектах?

.@ymatuhin Если сетка есть в дизайне, то конечно. Опять же пишем сами. Это не сложно, когда понимаешь как она строится.

@jsunderhood @ymatuhin а есть чек-лист, что бы ничего не забыть?

.@al_yolkin Могу порекомендовать такой чек-лист: github.com/delka/html5che… +@delaz

@ymatuhin @jsunderhood по моему главная проблема, что мы называем их фреймворками, хотя они просто библиотеки со всеми минусами

@ymatuhin @jsunderhood фреймворк — это вещь, которая помогает тебе разработать новый код (Rails, например), библиотека — готовый код (CMS)

@andrey_sitnik @jsunderhood если брать это определение, то чем бутстрап не фреймворк?

@ymatuhin @jsunderhood тем что это просто набор готовых классов, он не упрощает создание новых

@andrey_sitnik @jsunderhood существует ли тогда css фреймворки в принципе? Тонкая грань какая-то между ними.

@ymatuhin @jsunderhood настоящих фреймоворков, наверное быть не может, CSS — декларативный язык. Но БЭМ максимально близок к идее фреймворка

@jsunderhood @ymatuhin вот это ключевое. Нет смысла использовать фреймворки на проде. Если вы не админкой занимаетесь.

@iSnifer @jsunderhood спасибо, всегда так делал, но думал что делаю что-то не так)

@andrey_sitnik @ymatuhin @jsunderhood БЭМ это фреймворк для создания фреймворков.

@jsunderhood я года три назад такой чек-лист сделал по аналогии с оригиналом webdevchecklist.ru

@gladkih_m @jsunderhood интересный чек лист, но мне кажется многое забыто. Хотя в голову ничего не приходит. И тут не только для фронтов 😊

@andrey_sitnik @ymatuhin @jsunderhood правильно будет: фреймворк запускает твой код, твой код запускает библиотеку.

@jsunderhood что порекомендуешь для создания REST API под ноду?

.@dcromster Так далеко ходить не нужно. Express — наше всё! Очень легко писать API любой сложности.

.@dcromster gist.github.com/mistakster/1dd… Примерчик простого сервера. Даже /api/songs/ и с «родителем» /api/playlists/1/songs обрабатывает.

Я не зря начал сегодняшний день с фотки. Нужно не забывать отдыхать. Работа в режиме 24/7 ни к чему хорошему не приведёт.

Посмотрите, пожалуйста, коротенькое выступление Вадима Макишвили о том как важно делать перервы в течение дня. youtube.com/watch?v=iBHr8g…

@jsunderhood в выходные можно про всякий оффтоп поспрашивать? Кто за каким видом спорта следит и интересуется? Удается ли самим заниматься?

.@denswor Я уже рассказывал, что хожу на работу пешком. Ещё делаю элементарную зарядку. Катаюсь на беговых и горных лыжах. Играю в сквош.

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

@jsunderhood мужской теннис 4 раза в год. когда удается попасть на корт, играю сам, но не слишком умело, впрочем. Ну и ЧМ футбол, хоккей…

.@denswor Хотел бы ты больше заниматься физической активностью? Что, по-твоему мнению, препятствует этому?

@jsunderhood @denswor Отутствие свободного времени — это городская легенда. У всех в сутках 24 часа, вопрос в приоритетах

Хей, а вот у меня вопрос возник: ходить в оперу или на концерт и на стадион болеть за любимую команду — это эквивалентное времяпровождение?

В догонку к @jsunderhood сегодня можно поназадавать вопросов Николасу Закасу, автору ESLint и вообще крутому чуваку

It's my birthday, and I'm giving you a present: my AMA.

Favorite movie: github.com/nzakas/ama/iss…

Ask me anything: github.com/nzakas/ama

17:24

@jsunderhood и опера, и стадион — они очень разные бывают. но у оперы богаче бэкграунд, так что я за оперу. но если финал Уимблдона… :—)

@denswor @jsunderhood я немного наркоман, увидя слово опера, думал про браузер. Одуплился только секунд через 15 😊

@denswor @jsunderhood оооочень много футбола. Ну и большие мероприятия типо ОИ и чм по баскетболу, хоккею

@jsunderhood @denswor шоу скорее нет. Драма да, пощекотать нервы тоже да. выплеснуть эмоции (если на стедионе, да и дома).

Казалось бы, зачем люди ходят на матч, когда можно посмотреть по ТВ?! Зачем идут на конфу, когда будет запись на Ютубе?! Странные мы.

@jsunderhood @iAmKalech так и есть, это две из четырёх потребностей человека, согласно одной из психологических гипотез.

.@FladeX, а какие ещё две? @iAmKalech

@jsunderhood @iAmKalech потребность в родителях и потребность в жертве (благотворительность в различных формах, например).

@jsunderhood ты еще спроси, как кто с ночным дожором справляется :—) ну, там печеньки с чаем вечером поточить, пока верстаешь/дебажишь…

@jsunderhood Тут как-то делились подкастами по программированию, а кто знает хорошие видеоблоги? Желательно на английском.

Список рекомендаций по результатам нашего внезапного #FollowFriday, если кто пропустил, gist.github.com/mistakster/9c0…

Спасибо за интересные беседы, критику и похвалу.

На этой неделе с вами был Владимир @mistakster (он же @mista_k).

Ciao!