Всем доброго утра понедельника! На этой неделе в @cssunderhood буду развлекать вас я, Александр @suevalov.

Работаю в компании @DataArt, в питерском офисе, уже более 2-х лет. В основном занимаюсь front-end разработкой, помогаю в продажах проектов.

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

Вторник - ретроспектива 2015 года, предсказания на 2016, поделимся инстументами и поговорим о работе в команде.

Среда - конференции, митапы, публичные выступления, почему полезен Твиттер, поделимся ссылками на крутые доклады.

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

Пятница - тестирование верстки, компонентов; компонентный подход, React.

Суббота и воскресение - различный оффтоп, увлечения, здоровье, Спб, путешествия; ваши темы.

Также я открыт для тем, которые интересны вам =) Feel free to contribute.

Кину на затравку кусок ясного питерского неба и типичного двора, которые видны из моего окна, и пойду в офис. pic.twitter.com/sREvMsUhJe

До того как я узнал что такое бадлон, я жил и учился в индустриальном городе Череповце, вплоть до 23х лет. pic.twitter.com/WJ4iWeEwAq

Не вдаваясь в подробности, Череповец - это:

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

Учился в филиале питерского политеха, при кафедре ПО была фирма, занимавшаяся программами для распознавания образов…

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

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

В общем, с универом дико повезло. За стены вышел готовым специалистом.

В ту бытность мы писали на C#, но уже тогда я понял что меня тянет во фронтенд, ибо за вебом будущее.

Решил поделиться с вами фотографией рабочего места. Кидайте ваши, буду ретвитить. pic.twitter.com/Dst4Nj2o4T

@cssunderhood Офис: instagram.com/p/6MaqQNQhqH/
Дом: instagram.com/p/9Fvvtbwhl-/
(хотя тут уже все видели, наверное :–)

@cssunderhood хотелось бы поближе познакомиться с русскоязычной аудиторией @Medium Может подписчикам есть чем поделиться?

на самом деле все не так плохо, этой картинкой только пугают. в Че улчше чем во многих городах России @v_twibli

Итак, продолжаем… Начал работать еще в институте, 2 года, и один год после окончания в родном городе. Потом переехал в Питер.

И это было правильным шагом: большие города дают много возможностей - много работы, конференции, митапы, интересные люди.

До прихода в @DataArt - успел пописать на Java, поработать над Tower Defence на Android…

… получить BEM головного мозга в imboss.ru и сделать yet another one социальную сеть на Backbone.

Придя в @DataArt, за 2.5 года поработал над несколькими front-end проектами. Использовал Backbone, Angular. Сейчас огромный проект на React.

Вообще, работая в аутсорсе можно хорошо наблюдать тренды в индустрии.

Вкратце: много Angular, в основном legacy, не готовый для перехода на 2.x. За год пришло много проектов на React, и эта тенденция растет.

На текущем проекте у нас есть несколько приложений на React, объединяющая их библиотека компонентов, стайлгайд c playgrounds на основе Hexo.

Вся эта красота, к сожалению, не опенсорс и вероятность ее публикации равна нулю.

Учитывая тенденцию компонентинезации, не думайте ли вы что все сложнее разделять верстку и js? Как у вас происходит разделение обязанностей?

На предмет необходимости знать JS и JS-фреймворки по всей видимости @Sigiller

@cssunderhood Разделение - зло. Фронтенд это все вместе, разделение на верстки и js искуственно и вредно.

Если говорить о CSS - то это безусловно CSS Modules. О них мы поговорим на днях.

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

У нас в компании сильно travel направление - и не так давно к нам пришел очень хороший заказчик, поисковый travel агрегатор.

.. для которого мы делали новый продукт - white label, а-ля light version основного продукта, который вы можете поставить на свой поддомен.

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

Был очень большой challenge - полный responsive, поддержка с IE9 и различных версий Android 2.x - большая аудитория на азиатском рынке.

В связи с этими требованиями хватанули большое количество багов и интересных моментов. О некоторых я сейчас расскажу.

Выбор технологий для FE был таким: Backbone+Marionette, Less + PostCSS. Если бы начали сейчас - то скорее всего взяли бы React.

Открытие 1. Нельзя слепо использовать text-transform: uppercase для мультиязычных сайтов. Переводчики должны переводить в заданном регистре.

Языков у нас было порядка 30+. Оказалось, что в некоторых языках автоматический перевод регистра меняет смысл фразы.

Открытие 2. Как отключить zoom к инпуту на iPhone в Safari? pic.twitter.com/uJlo0GE5sm

Решение “прекрасно”. uxcellence.com/2014/01/15/qui… pic.twitter.com/DyXf9QIhfD

В итоге пришли к тому, что наш скрипт вешал классы а-ля .iphone, .android22, .android23 на body. И от них мы уже плясали в своих изощрениях.

Открытие 3. Как круто писать @PostCSS плагины!

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

Это дерево мы накладывали на наш CSS и собирали с помощью @PostCSS, написав пару кастомных модулей. Это не сложно!

Потом внезапно к нам пришли за 1.5 месяца до релиза - с прекрасным предложением: “А давайте сделаем арабскую версию сайта”.

И тут нас спас, слава Ситнику, @PostCSS, а точнее github.com/MohammadYounes….
Прекрасная штука, прошлись по CSS, поставили игноры в паре мест.

Открытие 4. Статистика использования IE8-9 и старых Android в Азии. В Сингапуре на март 2015 года у IE8 было больше 8%. Сейчас уже лучше.

Открытие 5. Safari в private browsing mode кидает исключение при вызове localStorage.setItem stackoverflow.com/questions/1455…

А какие открытия вы сделали для себя на последних проектах?

@cssunderhood что firefox запоминает значение input и игнорирует autocomplete="off", если он не обёрнут в form

@cssunderhood причем вставляет сохраненное значение, даже если в полученном с сервера коде уже записано другое

Собираетесь смотреть презентацию Apple? pic.twitter.com/i5pHd0Dp9C

apple.com/apple-events/m… - трансляция, как обычно, только из Сафари

@cssunderhood В вин10 на edge открылась трансляция.

Разговор с сыном:
Я: когда вырастешь, то станешь взрослым мужчиной
Сын: не хочу быть взрослым мужчиной
Я: А кем хочешь?
Сын: Программистом.

Всем привет, сегодня вторник и мы поговорим про то, что мы увидели в 2015 году и что ожидаем увидеть дальше. pic.twitter.com/snK1jiBxn3

Для меня 2015-ый год - это прорыв в инструментах и подходах к разработке. На мой взгляд, ES2015 - прежде всего. JS стал приятным.

Если вы еще не изучили ES2015 - сейчас самое время. Для начала - ES6 Overview in 360 Bullet Points github.com/bevacqua/es6

И очень популярное краткое overview - github.com/lukehoban/es6f…

Затем идите и поиграйтесь с этими знаниями в Babel REPL - babeljs.io/repl/. Можно увидеть как компайлится синтаксис в ES5.

Для более глубокого изучения -
leanpub.com/understandinge… и exploringjs.com/es6/

Второе - это линтеры стали умнее. Например, ESLint - eslint.org. Не знаю как жил без него до этого.

Для ESLint можно легко писать плагины для вашего проекта… eslint.org/docs/developer…

… или пользоваться трудами коммьюнити: github.com/yannickcr/esli…, github.com/Gillespie59/es… и так далее

Серия книг "You don't know JS" @cssunderhood

Советую подключить Airbnb Config для ESLint - github.com/airbnb/javascr… и локально переопределить что не нравится.

Настроить прекоммит хуки с помощью github.com/typicode/husky и не тратить время codereview на отступы, забытые переменные и dumb errors.

Для CSS есть прекрасный линтер - github.com/stylelint/styl….

@cssunderhood к хаски можно прикрутить еще github.com/jpommerening/s…

Еще из 2015-ого: React обоснованно занял огромную долю на рынке, это не просто хайп.

Статья о том как уговорить босса перейти на React: quora.com/profile/Pete-H…

Отличная статья про React для тех, кто знает только jQuery.
reactfordesigners.com/labs/reactjs-i…

Пока что не буду продолжать про React, поговорим об этом в пятницу.

@AlexanderEin @cssunderhood обогнал jquery по звёздам на гитхабе

В 2015 люди перестали бояться flexbox и стали наконец-то его использовать.

Полное руководство по Flexbox: frontender.info/a-guide-to-fle… и изучаем flexbox в игровой манере flexboxdefense.com

@cssunderhood в дополнение к первому css-live.ru/articles/vizua… и ко второму flexboxfroggy.com, +бонус шпаргалка) css-live.ru/articles-css/s…

В 2015 году тулинг для dev experience вышел на новый уровень: hot reload, react dev tools, redux dev tools, улучшения в chrome dev tools.

Об отрицательных моментах: появился термин - JavaScript Fatigue.

medium.com/ericclemmons/j… pic.twitter.com/jyqMvelkJo

Вкратце - это усталость, усталость от того, сколько нужно всего сконфигурировать, сколько решений принять для старта, везде разный API.

Можно предположить что в 2016 году коммьюнити постарается решить эту проблему - никаких мучений, а-ля Ember CLI, но и для других библиотек.

Решение каких еще проблем мы увидим в этом году, на ваш взгляд?

Отрубишь одну голову — две другие займут её место. twitter.com/cssunderhood/s…

Но так и работает эволюционное развитие, разве нет? @webholt

Первый доклад на PiterCSS №2: Виталий Зюзин и «Баги в браузерах» — pitercss.ru/2/pres/browser… pic.twitter.com/wGmroVaJoM

Второй доклад на PiterCSS №2: Антон Виноградов и «Архитектура дизайн-систем» — pitercss.ru/2/pres/design-… pic.twitter.com/cgbM4bCfOw

@cssunderhood Выходит за рамки CSS, но — HTTP/2.

Что еще важного произошло в 2015? CSS Modules! glenmaddern.com/articles/css-m…

Это кардинально новый подход. Изолированность кода обеспечивается не с naming convention. Все классы в файле изолированы на уровне сборщика.

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

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

Еще интересный момент. С помощью CSSModules можно легко обфусцировать селекторы для прода режима. Новые селекторы на каждый билд.

Это актуально для сайтов, которые постоянно парсят, чтобы достать оттуда информацию. CSS Modules явно усложнят жизнь скрепперам.

В противовес к CSS Modules появилось еще популярное течение -CSS-in-JS.

Лично я не являюсь поклонником CSS-in-JS подхода, но у него есть как минимум два отличных use case, которые мне сразу приходят в голову.

CSS-in-JS это круто, когда: вы делаете виджет, который будет интегрироваться в сторонние сайты.

Inlined CSS в style перебьет стили стороннего сайта. Правда это не спасет от ‘! important’.

Еще CSS-in-JS это круто, когда ваш интерфейс строится динамически на основе динамических данных, т.е. нет конечного сета классов.

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

На питерских митапах споры CSS Modules vs CSS in JS приобретают форму в лице @andrey_sitnik vs @andreypopp. Им есть что добавить.

@cssunderhood, мне кажется, даже в этом случае это не круто ни разу

Как бы ты перебил каскад 10-ого порядка? @lancedikson

Виджет попадает в неизвестное заранее окружение. На CSS ты не можешь влиять. @SilentImp @lancedikson

С этим я согласен, я этот подход тоже не жалую. @lancedikson

@cssunderhood Андрей Ситник делал доклад как изолироваться от окружения автоматически thedotpost.com/2015/12/andrey… @SilentImp @lancedikson

@cssunderhood сейчас PostCSS обеспечивает больший уровень изоляции, чем CSS-в-JS. Например, line-height: 0 у родителя сложит CSS-в-JS комп.

@cssunderhood не пойму что полезного делает postcss-important?

автоматически добавляет ! important напротив каждого правила @adinvadim

История о том, как чувак удалил все свои пакеты из npm и поломал кучу всего: github.com/azer/left-pad/… и его пояснение medium.com/@azerbike/i-ve…

Yes, Safari 9.3 removed click 300ms delay. Time to remove all fastclick modules.

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

@SilentImp @cssunderhood из регулярных - css-live.ru, frontender.info, prgssr.ru, jsraccoon.ru, хабрадайджест :)

Более года назад я делал доклад на тему “Keep yourself up to date” pres.suevalov.com/keep-yourself-… pic.twitter.com/hcvQOtT1AC

Мой рецепт такой pic.twitter.com/LXuvSHQXk0

За какими ресурсами следить?
Весь список тут: twitter.com/frontendrescue… pic.twitter.com/qs5nw4AE8h

Раньше я пользовался RSS, теперь Twitter - единственный источник.

У меня настроен ifttt.com. Если я ставлю лайк в Twitter - этот твит попадает мой в Evernote.

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

Ember, react native, Babel and other packages are broken because someone unpublished 11 lines of code from npm. 😐😐 pic.twitter.com/uo1cYyO8uf

Еще отличный способ следить за тем что происходит - подкасты! Пользуюсь в автобусе или когда иду один по улице. pic.twitter.com/pPR782f4t1

@cssunderhood расскажите пожалуйста как пользоваться ifttt? Я создал 2 рецепта импорта заметок из Pocket в OneNote, но не могу их запустить

все должно быть просто, авторизация в приложениях, выбор правил @dshster

Еще один хороший способ получать новости - это еженедельные email рассылки: javascriptweekly.com, html5weekly.com…

… web-design-weekly.com, tinyletter.com/front-end-rapp… и и т.д. Приходит в конце недели, отфильтровано за вас.

О трендах удобно узнавать на Github Explore pic.twitter.com/nyTPorYs98

@cssunderhood А вот большой список рассылок для веб-разработчиков: medium.com/@sapegin/devel… — дополнения и ретвиты приветствуются.

Плавно подходим к теме конференций и митапов… Их много.
Тут можно найти большой список: twitter.com/frontendrescue… pic.twitter.com/ll7Cjt6QhI

Репозиторий со ссылками на видео с различных конференций: github.com/FrontenderMaga…

Слышал жалобы, что “на конференциях ничего нового”. Плюс вам - значит вы хорошо следите за трендами. А вообще, конференции - это про общение

Конференции - это новые знакомства, афтепати, обсуждения, споры и новые идеи.

Касательно Петербурга - у нас несколько фронтенд сообществ с регулярными событиями: @spb_frontend, @gopiterjs, @pitercss.

И периодически различные компании проводят свои конференции. Событий очень много.

Еще есть @webstandards_ru, которые каждый год устраивают WSD конференции в Москве, Питере, Киеве, Минске и т.д. Всегда аншлаг и качество.

В мае в Будапеште будет JSConf (jsconfbp.com) и CSSConf. Был в прошлом году и поеду в этом. В Будапеште хорошо. Поехали с нами.

Давайте поделимся ссылками на доклады, которые вам запомнились

Начнем: Andrey @listochkin — Anti hype как не гнаться за технологиями и начать жить youtube.com/watch?v=xPFRUM…

Мотивирующий доклад Вадима Макишвили: 36 youtube.com/watch?v=xPPCzr…

В прошлом году на JSConf в Будапеште больше всех понравился доклад What if the user was a function? by Andre Staltz youtube.com/watch?v=1zj7M1…

Практически любой доклад Addy Osmani: speakerdeck.com/addyosmani.

А вообще есть такой репозиторий: Must Watch Javascript github.com/AllThingsSmitt…. Собраны лучшие англоязычные выступления за прошлые годы.

Из выступлений по CSS отметим @andreysitnik и доклад PostCSS: The Future After Sass and LESS youtube.com/watch?v=1yUFTr…

И Colin Megill с докладом Inline Styles are About to Kill CSS youtube.com/watch?v=NoaxsC…

По выступлениям на CSS тематику тоже есть репозиторий Must Watch CSS: github.com/AllThingsSmitt…

На правах рекламы даю ссылку на доклады, которые я сделал за последние полтора года: pres.suevalov.com.

Из последнего - рассказывал про React Native youtube.com/watch?v=j5VSvv…

Привет, сегодня договаривались поговорить про английский и иммиграцию.

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

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

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

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

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

@cssunderhood именно. причем вообще говоря, слишком много усилий на понимание/говорение в своей теме не нужно. многим года и менее хватает.

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

@cssunderhood Это ещё как-то можно понять, тут тяжело без практики именно говорения. Но чтение технической литературы в миллион раз проще.

Согласен, но есть очень много способов эту практику получить. Об этом чуть позже.

На момент устройства у меня был средний разговорный. Через 3 месяца я поехал в командировку в Калифорнию и понял что этого уровня мало.

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

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

@cssunderhood расскажи как английский подтягивал после неё.

К этому и идем постепенно. @SilentImp

После этой поездки был другой клиент, приходилось общаться с индусом по имени Кумар, по телефону. Без мимики понимать намного сложнее.

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

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

@cssunderhood Мне очень помогли занятия с преподавателем-носителем, который приезжал к нам в офис. Вот это реально самое крутое ;-)

Чтобы иметь хороший разговорный английский нужно:

@cssunderhood Какой такой паттерны? :-/

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

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

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

Из подкастов посоветую - TED Radio Hour npr.org/programs/ted-r…. Да и любой с сайта NPR.

Сериалы, можно начинать смотреть с субтитрами, с какого-то момента начинаешь привыкать к акценту актеров и тогда их можно отключать.

Пассивный словарь хорошо набивается через чтение. Худ литература, лонг-риды с Economist, NewYorker и т.д.

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

Для создания активного словаря помогут сервисы по типа Lingualeo, Anki, EasyTen…

… и ведение дневника. Написание текстов с использованием слов из пассива.

@cssunderhood Решительно рекомендую Ремембу: itunes.apple.com/us/app/rememba…

Последнее из рецепта - уверенность в себе. Тут только через практику.

Я эту практику получил на занятиях с носителем и через Couchserfing. couchsurfing.com

Ко мне приезжали ребята из Германии, Японии, Испании, Бразилии. Я сам ездил в гости. Привык к акцентам, научился находить язык со всеми.

А чем вы пользуйтесь для изучения английского?

@cssunderhood Я несколько лет смотрел записи докладов с конференций и стал понимать >95%, но это нисколько не улучшило понимание фильмов.

@sapegin @cssunderhood хожу на курсы AEC, видео класс есть, смотрим сериалы в оригинале и TED (можно с титрами), стало легче/лучше :)

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

Зависит от профиля, есть тусовщики, есть нет. Есть возможность составить компанию - присоединяются. Когда нет - только ночлег. @meuwka

На это конечно смотрят, но больше обращают внимание на заполненность профиля и отзывы. Без отзывов сложно. @meuwka

Всем привет, извиняюсь за пропущенную пятницу, было много работы. Сегодня постараемся наверстать.

@cssunderhood Классика жанра: Только верстальщики могут наверстать упущенное.

Сегодня в trending на github: полифил для position: sticky. github.com/soenkekluth/st…

Хотелось бы поговорить про инструменты регрессионного тестирования верстки.

В частности об Image Comparing методе.

Некоторое время назад я выступал с докладом CSS Regression Testing. pres.suevalov.com/css-regression… pic.twitter.com/XDEV9wr4Bm

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

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

Мы не взяли никакого готового решения. Не спрашивайте почему. Было больно и я решил копнуть тему глубже, и проанализировать существ решения.

Image Comparing тестирование - это метод сравнения с эталоном. Тесты запускаются 1 раз на эталоне, сохраняются эталонные картинки.

Все дальнейшие запуски - это сравнения с эталоном. Дельта изменений - ожидаема (верстку не сломали) или не ожидаема (верстку сломали).

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

Например, есть библиотека компонентов, на которой построено N проектов. Любое изменение в библиотеки - регрессия N проектов. Дорого.

PhantomCSS - одно из решений:

PhantomFlow - интересный проект, на основе PhantomCSS. Едакий BDD, который строит отчет в виде дерева. github.com/Huddle/Phantom….

Пример PhantomFlow отчета. Минус все тот же: запуск только для PhantomJS. pic.twitter.com/DCjuI6y5ji

BackstopJS - это очень простое и быстрое в конфигурации решение для простых responsive сайтов. github.com/garris/Backsto…

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

WebdriverCSS - плагин для WebdriverIO. Запуск в любом браузере, excludes, responsive. github.com/webdriverio/we…

Gemini от Яндекса - также отличный инструмент. github.com/gemini-testing…. Особенно подойдет для тестирования библиотеки компонентов.

Всем спасибо за неделю! С вами был @suevalov, пока-пока!