Доброе утро, коллеги!
На этой недели с вами будет @alexbaumgertner из @htmlacademy_ru

Переехал с маленького города в Питер в 2010 году.
Работал в веб-магазинах на поддержке, в стартапе, в небольшой студии, в Яндексе.

Сейчас работаю фронтендером в HTML Academy.
Готов ответить на вопросы по верстке, фронтенду, стартапах, работе в ИТ, психологии и тд.

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

Я с детства хотел быть радиоинженером, перечитывал “От махин до Роботов” и “Юный радиолюбитель”. Но это было в середине 90х,отрасль в упадке

4 года колледжа на радиотехника, но универ бросил.
Дипломная работа в колледже: Статистические методы контроля качества производства РА“

После книг Козлова заинтересовался психологией, поступил на Психфак. Хотел изучать когнитивную психологию, но не пошло :(

С 2001 в интернете, тогда же двоюродная сестра показала HTML и CSS, увлекло, но как хобби. Первый опыт работы в студии в 2008 году

Работа в студии не пошла, через пару месяцев ушёл в госструктуру (Архивное управление НО). Инсталляция Гаранта, аникей, это все :))))

@cssunderhood Санкт-Петербург. От первого знакомства до первой работы почти 4 года, большую часть которых было потрачено не на эту отрасль.

@cssunderhood 3й курс (2002) общие знания о Html, 4й курс ASP + PHP, 5й - дизайн, табличная (уууу!!!) вёрстка + своя админка:php+файлы.txt )

@cssunderhood 2005 админил, попросили поправить html... через пол года переписал их PHP админку, далее TYPO3, теперь React + @neoscms

После 1,5 лет в Архиве аникеем решил переехать в СПб. Первая работа lapsi.ru kolyaskaspb.ru
Магазин на битрикс. HTML

Там моя верстка до сих пор.
Контент-менеджмент
Правка битрикс-шаблонов,
подключение jQuery плагинов,
радость, что работают.
Знакомство с БЭМ

@cssunderhood начал в 2013 году, @htmlacademy_ru и курсы по php в специалисте, сейчас чисто js разработка, двигаюсь во все стороны сразу)

@cssunderhood учился на физика, не думал, что брошу науку. Но проработав год в лаборатории понял, что к фронту меня тянет очень сильно

@cssunderhood Екатеринбург. Познакомился с css в 2012. Понемногу фрилансил, верстал шаблоны под различные cms. На работу устроился в 2015.

После полугода колясок перешел в магазин принтеров.
Моя верстка fprints.ru/contacts/ (так я понимал БЭМ тогда)
Начал изучать js

@cssunderhood в армии было скучно, выучил хтмл, пхп и поднял форум на ипб 1.х. Ну а потом втянулся)

Продолжая историю: после поддержки магазинов делал игру для соц сети на backbonejs. Первая работа фронтендером, 2012

Исходники потеряны, но от backbonejs очень приятные ощущения: лаконичный API, много примеров

Потом стартап, фронт на microsoft MVC (не помню точно название)
О работе в стартапах (+,-) могу подробно рассказать :)))

После стартапа удаленка в студии, жизнь в Черногории, пробы fullstack BEM, twig-шаблоны.
Верстка того времени:
github.com/alexbaumgertne…

Заканчивая знакомство. После 2-х лет в Я захотелось попробовать другие проекты и команды. Сейчас фронтендер в @htmlacademy_ru

Также преподаю на базовом интенсиве js
htmlacademy.ru/js_intensive

В этом году будет много интересного, в том числе надеюсь open-source

Минутка рекламы:

Приходите к нам наставниками, растить следующее поколение разработчиков: htmlacademy.ru/tutors
:)

Хорошего вечера, коллеги!
Завтра поговорим о настоящем, а пока:
Helios, "Moiety"
music.yandex.ru/artist/654813/… pic.twitter.com/WDyLzmpVZ4

Добрый день, коллеги!

Сегодня поговорим о настоящем — задачи, библиотеки, фреймворки, инструменты, книги, фоновая музыка и тд

Мой первый редактор — Macromedia Home Site, 2001 год :)
С 2005 Netbeans
С 2011 работаю в #webstorm, пробовал sublime, brackets, atom, vim...

Use:
консоль – iTerm2 iterm2.com
shell – ohmyz.sh
git – zsh + sourcetreeapp.com
think-like-a-git.net

Скриншоты, git-касты, видео:
monosnap.com

Ноут у меня не новый, но ок
Apple MacBook C2D 2.4 13" (Mid-2010), 10Gb RAM, 60Gb SSD
Acer 19` Monitor
Trackpad

Подписка на Adobe, самая минимальная, только Photoshop
На Sketch пока не перешел, хотя пробовал – классно.

Вот текущее рабочее место:
(все есть, но от стула Mirra 2 hermanmiller.com/products/seati… не откажусь :)))

А как у вас? pic.twitter.com/qraNg8yBkt

Браузеры:
safari – основной (синх. со смартом);
chrome devtools;
firefox опять радует, хотя у вестальщика не дожно быть любимого браузера.

Время:
Pomodoro 40 мин + 7 мин перерыв. Часто работаю 47 + 10 :)
Цель: мин 8 помидорок
xwavesoft.com/pomodoro-timer… pic.twitter.com/fm9NXF8GhD

Отчеты по времени:
toggl.com
rescuetime.com
Веду для себя, без упарываения :) pic.twitter.com/jk5qcX4AN8

Работаю под музыку в стиле Ambient, Downtempo
soundcloud.com/alex-baumgertn…
Сейчас: Helios
Наушники: Koss porta pro или Sony MDR-CD480, им >10лет

Интересная статья на Хабре
"Несколько дельных советов по CSS"
habrahabr.ru/post/273403/
.nav li:not(:last-child) {border-right:1px solid #666}

По CSS селекторам есть хороший курс
htmlacademy.ru/courses/57 pic.twitter.com/JCwFIC2jOs

@cssunderhood @jsunderhood если не слышали, рекомендую verdure.ru, отличное радио для работы. Стили от deep ambient до idm'a.

@cssunderhood @pepelsbey Вадим, подскажи пожалуйста, видел у тебя MacBook Retina. WebStrom на нем реально запустить? :)
Спасибо!

Из полезного софта еще использую
wunderlist.com/ru/
Можно вести и задачи по работе и список покупок.

А что используете вы?

Управление проектами на текущей работе: github
На прошлых: basecamp.com, teamer.ru
Для себя trello.com

В Я своя внутренняя разработка: Стартрек.

А, еще Этушка – внутренний блог.

Приходите на работу в Яндекс :)))!!!
yandex.ru/jobs/vacancies…

Как-то даже работал с jira :)
И устанавливал сам redmine.org
(о, он уже на 4-х рельсах redmine.org/projects/redmi…)

Хороший способ обновить знания –
стать наставником в htmlacademy.ru/tutors
+100500 к карме и не только

реклама :) pic.twitter.com/fEmHyKHTsC

Доброго ночи, коллеги!
Завтра поговорим о хобби, увлечениях – обо всем интересном вне работы. pic.twitter.com/jjsPT6C9Rg

@cssunderhood вместо sourcetree сейчас пробую gitkraken.com он пока бэта, но гораздо шустрее.

Доброго дня, коллеги!
Сегодня поговорим о хобби, увлечениях – обо всем интересном вне работы.
Музыка, книги, фильмы, спорт, кофе-чай и тд :)

Музыка: в отрочестве был "Продиджистом". Наш двор делился на реперов, металлюг и продиджистов. + Nirvana pic.twitter.com/Nueqh3a5Ad

Также: русский Рок: ДДТ, Воскресение, Машина Времени.

КИНО (Цой жив!)
Сплин

Немного Аквариума и Наутилуса. pic.twitter.com/Zy9YDzA5pz

Отдельной строкой

Pink Floyd

Думаю, что по звуку равных нет. pic.twitter.com/23UBVmZd9m

Sam Brown
en.wikipedia.org/wiki/Sam_Brown…

Прекрасный альбом "April Moon":
last.fm/ru/music/Sam+B… pic.twitter.com/FhJcIdBbKV

Из фоновой музыки:
Carbon Based Lifeforms carbonbasedlifeforms.net
Helios soundcloud.com/keithkenniff

Еще музыка на подумать:

Anathema anathema.ws
Katatonia katatonia.com pic.twitter.com/mtuLwoH6I0

Из легкого:

Madonna
Robbie Williams
Sinatra
Jamiroquai
RHCP
Браво
Мечтать

да много всего :)

Открыл для себя классику:
Рахманинов (1-3 концерты)
Шостакович (концерт для фортепьяно) youtube.com/watch?v=2B4bKY… pic.twitter.com/LLImBqJmmP

А что из музыки нравится вам?

Да, о книгах:
В отрочестве: Джек Лондон, Чехов, О. Генри, Жюль Верн, Ремарк.
Что-то еще, но не вспомнить, нравились рассказы.

Юный радиолюбитель
От Махин до Роботов (очень рекомендую nplit.ru/books/item/f00…)
Журналы Радио, Юный Техник, Наука и Жизнь

Николая Козлова почти всего перечитал
nkozlov.ru/books/
Даже на психфаке два года отучился :) pic.twitter.com/oBFBulOFPE

Здорово прочищает мозги о том, почему у нас так было и есть:

Восленский М. С. Номенклатура. Господствующий класс pic.twitter.com/NnQchw3M48

Обалденная книга про рациональный и эмоциональный интеллект.

"Как мы принимаем решения"
Джона Лерер pic.twitter.com/DRxfOTn89R

Про положительные и отрицательные подкрепления.
Перевот мозгов!

Прайор Карен
Нe рычите на собаку! pic.twitter.com/oKXtzKkLt7

Что важно и что нет в бизнес-процессах:

Джефф Кокс. “Цель. Процесс непрерывного совершенствования.” pic.twitter.com/gy5Ub44D2O

Без пафоса о Войне.

Николай Никулин. "Воспоминания о войне"
Светлана Алексиевич. "У войны не женское лицо" pic.twitter.com/IouyFk6Yto

Эти бы книги, особенно Н. Никулин. "Воспоминания о войне"\
в школах бы читать.
В войне нет идеальных сторон, все становяться животными.

Сейчас читаю

Стив Возняк.
Стив Джобс и я. Подлинная история Apple

Генри Форд.
Моя жизнь, мои достижения pic.twitter.com/GMEEAUmMBu

Дочитываю

Ч. Петцольд - Код. Тайный язык информатики

Стало хоть понятно, как транзисторы в CPU работают :) pic.twitter.com/yXRjuY4lp2

Много читал Егора Гайдара:
Гибель империи
Смуты и иституты
Долгое время pic.twitter.com/OMWt99tKkH

Обожаю Леонида Парфенова, теле и книжную версию "Наменди" pic.twitter.com/8Y0SWnP2PQ

Какие книги вас вдохновили?
Заставили думать по-другому?

Что читаете сейчас?

Еще конечно

Джо́эл Спо́льски "О программировании"
russian.joelonsoftware.com

Артемий Лебедев "Ководство"

В бытность Аникеем зачитывался

Бригадир Юрий "Хроники тестировщика"

samlib.ru/b/brigadir_j_a… pic.twitter.com/H0RlYvHsOx

@cssunderhood "Бизнес в стиле фанк". Несмотря на название, книжка не столько о бизнесе, сколько о современном мире

@cssunderhood или так: "Сумма" - это квинтэссенция всех этих "Осмотров на месте", Трурлей, Пирксов и сепулек

@cssunderhood "93 год" Виктора Гюго, перечитываю раз в 3-4 года и каждый раз нахожу что-то новое

Четверг — свободный день для дискуссий :)

О чем бы вы хотели узнать?

Жду завтра ваших вопросов :)

@cssunderhood «Хагакурэ» в своё время зашла. Могу посоветовать ещё «Игра в бисер» Гессе, «Волхв» Фаулза, из фантастики — Саймак, Бредбери.

@cssunderhood кто может подтвердить жизнеспособность конструкции css ? li < a {backbgound-color: red;} Смотрел спеку, ничего подобного нету.

Про стартап:
Я вошел фронтендером на этапе запуска. До меня год разработки. Один инвестор (из непрофильного бизнеса, вроде торговля)

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

С тем же техлидом начали делать еще один проект: спортивные новости. С инвестицией в 150тр (вроде) и без ТЗ.

Оба проекта не реализовались.

Я получил опыт работы в стартапе и немного нервов, когда перестали платить ЗП. :)
В итоге ушел в очень адекватную питерскую студию d-idei.ru

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

Про будущее HTML/CSS/JS –
скорее всего никуда не денется, увидим и в очках и в TV и в холодильниках.

Кто думал в 1991 что язык разметки диссертаций будет для магазинов, игр, всяких приложений.
Но простое побеждает сложное :)

"В 2015 году мы добавили в портфолио 157 проектов, что на 94 проекта меньше, чем в прошлом."
Кризис или Лебедев количество => качество?

Где сейчас интересно верстают?

Какие сайты вас впечатлили больше всего?
Тренды 2016?
Анимация, 3D, панорамы-галлереи?

Как восстановить тестовое представление CSS transform?
То есть 'matrix(1, 0, 0, 1, 100, 0)' => 'translateX(100px)'?

Есть npmjs.com/package/css-to…
Но сssToMatrix.translateX(100); возвратит
matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,100,0,0,1)
а надо 2d :)

«Как вы объясните важность HTML5 Ларри Пейджу?» Какие вопросы задают кандидатам на работу в Google vc.ru/p/questions-go…

Сборка БЭМ
Хакатон: сборка с помощью gulp
ru.bem.info/forum/782/

Сборка БЭМ
Хакатон: BEM + Webpack
ru.bem.info/forum/774/

@koderhan был небольшой эксперимент на эту тему: ru.bem.info/forum/782/
@cssunderhood

@koderhan в целом, если есть понимание методологии, то можно и свое решение сделать. Например, medium.com/@1999/bem-more…
@cssunderhood

@koderhan @Iren_Karrsom @cssunderhood @bem_ru @getbem @life_maniac очень легко получается с вебпаком

@koderhan @Iren_Karrsom @cssunderhood @bem_ru @getbem @life_maniac webpack + @PostCSS + css-modules если быть точнее

@koderhan @Iren_Karrsom @cssunderhood @bem_ru @getbem @life_maniac @PostCSS и бэм здесь уже не устарел. так как его автоматизируют цсс модул

you can make the cascade be your friend
simurai.com/blog/2015/09/0… pic.twitter.com/S0LOQhGPC7

.Работает над уходом от enb, на сколько я знаю :)
@blond_ru

Завтра поговорим о будущем, куда двигаться верстальщику.

Я вижу только frontend и nodejs-backend.
А вы?
Ruby, PHP, Java, Python, Haskell?

Сегодня говорим о будущем: куда расти верстальщику?
Серверное программирование?
Дизайн?
Менеджмент?

Я иду в js и nodejs :)

Посоветуйте курсы по программированию вообще и javascript в частности.
Язык: русский, английский.

Спасибо!

@cssunderhood альтернативы учебнику и курсам Ильи Кантора не видел ещё - javascript.ru

@cssunderhood Мне больше нравится вариант с менеджментом. По крайней мере, я вижу эту ветку развития.

@cssunderhood -> @HexletHQ , stepic.org

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

@cssunderhood верстальщику можно в дизайн пойти или наоборот в программирование. всё зависит от того насколько он творческий ч-к.

Знаю автоинженеров, врачей, радиомастеров, которые пришли в верстку.
А из верстки если уходят, то куда?

Коллекция практических советов и заметок по вёрстке habrahabr.ru/post/273471/

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

@cssunderhood никогда не считала верстку полноценной профессией, это только начальный этап. Дальше - либо в дизайн, либо в фронт

@victoria_veles @cssunderhood я вот в верстку пришел из дизайна. Теперь собираюсь во фронт двигать. JS вот учу.

@fooontic_ @cssunderhood дальше в фуллстек :)

@victoria_veles @cssunderhood а возможно ли совмещать дизайн с фронтом? или это абсолютно несовместимые вещи?

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

Пользуясь случаем, порекламирую курсы Академии

js базовый htmlacademy.ru/js_intensive

Отзывы ждем => github.com/htmlacademy/yo…
Но можно и тут :)

@cssunderhood такой вопрос, а как вот понять, что мне достаточно умений в верстке - если я по сути JS developer?

@life_maniac @ihorzenich @cssunderhood ну и самый интересный вопрос - что же такое фронтенд если не только вёрстка и js-фреймворк?

В итоге - фронтендер это всё и ничего. Если кто-то вам говорит, что он фронтендер, то стоит спросить - какой именно? @cssunderhood

@aleshaoleg @ihorzenich @cssunderhood для сеток Susy наше все, а дропдауны и кнопки быстрей самому сделать, чем разбираться в фреймворках

@life_maniac Верстальщик всё может, если захочет. @webholt @vladimore @ihorzenich @cssunderhood

@life_maniac @sapegin @vladimore @ihorzenich @cssunderhood В IT все термины расплывчаты. Я вот вроде фронтэндер, но и middle-end попиливаю.

@cssunderhood курс по cycle.js от @andrestaltz egghead.io/lessons/rxjs-t…

@cssunderhood fullstack - и фронт и бек. Сайт/приложение под ключ. @squid__xd @victoria_veles @fooontic_

Трехзвенная архитектура или
фронтенд в браузере и на сервере :)

events.yandex.ru/lib/talks/936/ pic.twitter.com/i7jVtK5kzy

Еще есть
Двупроходная шаблонизация
:)
events.yandex.ru/lib/talks/1354/ pic.twitter.com/VywBTqGdSe

Завтра суббота и можно поговорить об open source.

Есть ли у вас свои проекты, коммитите ли вы в какие-нибудь библиотеки?

Хей, @cssunderhood, как насчёт такого UI для определения основного рода деятельности? pic.twitter.com/iURqxT4ixU

Сегодня говорим об opensource.

Ваши проекты, вклад.

Ваши идеи

Ваша просьба о помощи в проектах

Из моего:

Sailsjs + BEM project stub
github.com/bem-under-sail…

npm ES2015 (webpack, karma, mock, chai, git hooks...
github.com/alexbaumgertne…

Отличный пост @koloskof про опыт БЭМ: от методологии до project-stub и bem-components. Для дизайнеров! bit.ly/1nrnwq7

#БЭМ #b_

@cssunderhood сделал игрушку для верстальщиков :) github.com/posthtml/posth…

@cssunderhood написал handbook для тех, кто хочет научиться или вспомнить bash: github.com/denysdovhan/ba…
Сейчас делаю интерактивный воркшоп.

@cssunderhood было дело написал плагин для Sublime Text - EmmetOneLine. Не знаю, многим ли верстальщикам пригодилось:)

@cssunderhood, маленький плагинчик для ПостЦСС, чтобы писать padding-x или margin-y: github.com/kinday/postcss…

@cssunderhood, плагин для мониторинга PHP-FPM через pm2 (Keymetrics): github.com/pm2-hive/pm2-p…

@fliptheweb мой доклад про полную изоляции стилей youtu.be/cGnlKFtAb64

Только удосужился посмотреть презентацию «React: CSS in JS», взорвало мозг, но заставляет задуматься speakerdeck.com/vjeux/react-cs…

У CSS есть свой цвет или лого? Как например жёлтый у JS? @cssunderhood

Нашел список с must-see докладами о CSS за последние 5 лет github.com/AllThingsSmitt… Похоже ночь будет длинной 😅

@vladimore @cssunderhood вообще во времена маркетинговых HTML5 и CSS3 было так: pic.twitter.com/R3K5QtqoZa

Воскресенье – день полезных ссылок.
По верстке, фронтенду, программированию и тд.

Любые полезные ресурсы!

Иногда надо сжать CSS/JS вручную

CSS Compressor
csscompressor.com

Online Javascript Compression Tool
jscompress.com

Распаковать CSS/JS

jsbeautifier.org

Beautify, unpack or deobfuscate JavaScript and HTML, make JSON/JSONP readable, etc.

CDN (ускорение загрузки – кеширование скриптов) для js
jsdelivr.com

tech.yandex.ru/jslibs/
developers.google.com/speed/librarie…

Создание и отладка регулярных выражений

regex101.com

Обзор исходного кода jQuery
regex101.com
Вводите метод и виден только код этого метода.

CSS comb online

csscomb.com/online

ECMAScript 5/6/7 compatibility table

kangax.github.io/compat-table/e…

Набор заглушек для изображений самых разных размеров

imsky.github.io/holder/

Онлайн подсветка кода в стиле TextMate

markup.su/highlighter/

CSS to Stylus

css2stylus.com

Поключение к проекту кода(например js) с github с правильным Content-Type заголовком.

rawgit.com

Скачать видео (например, скринкасты по CSS) с почти любых видеохостингов

keepvid.com

Мини-FAQ по командам в VIM
worldtimzone.com/res/vi.html

Главред:

"Помогает очистить текст от словесного мусора, проверяет на соответствие информационному стилю."

glvrd.ru

@cssunderhood, а я regexpal.com пользуюсь.

Справочник по HTML-CSS онлайн
webref.ru

@kinday @cssunderhood Сервисов таких туча. Я пользую regexr.com

Мега-крутая программа-справочник по веб-технолониям
Dash

kapeli.com/dash pic.twitter.com/tp7bnQZQCy

Горячие клавиши для вызова программ в Mac OS
qsapp.com\

Статья про настройку kizu.ru/blog/applicati…

@cssunderhood Она OS X only. Есть веб-аналоги годные ::
devdocs.io
overapi.com

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

@cssunderhood Dash для любителей Линукса называется Zeal ( zealdocs.org )

@cssunderhood недавно проскакивал чудный репозиторий — VerbalExpressions, описываем регулярку словами github.com/VerbalExpressi…

Если вам вдруг нечем заняться и хотите попрактиковать какой-нибудь язык (Js, Ruby, Python, Haskell, Clojure etc) — codewars.com/r/C-Nb8w

Онлайн оптимизация изображений

Compress and optimize your images
compressor.io

ES6 Cheatsheet
github.com/DrkSephy/es6-c…

What’s New in jQuery 3.0 and How to Use It
sitepoint.com/whats-new-jque…

@webholt @cssunderhood @kinday jex.im/regulex/ & regex101.com & myregextester.com & regexpal.com

@webholt @cssunderhood дык Zeal же, для тех кто в ином мире. zealdocs.org

@fliptheweb @cssunderhood А вот еще code battle ru.hexlet.io/games от оброзовательного проекта hexlet
habrahabr.ru/company/hexlet…

Building Your First React.js App
medium.com/learning-new-s…

C вами был @alexbaumgertner, фронтенд-разработчик в @htmlacademy_ru

Спасибо всем подписчикам @cssunderhood!

Пишите, подписывайтесь :)!

До полуночи жду ваших отзывов,

что понравилось и
что нет

эту неделю в @cssunderhood с @alexbaumgertner?

Спасибо!

После полуночи пишите @alexbaumgertner :)
И будем приветствовать нового ведущего!

Стайлгайд для CSS/HTML от @mdo – codeguide.co как-то упустил из виду, список хороших практик для начинающих верстальщиков

И еще один ресурс от @mdo — странные моменты в HTML и CSS, которые опытным верстальщикам уже не кажутся странными 😉 wtfhtmlcss.com