frontender_ua

4 апреля 2016, Харьков, Украина

# Понедельник 53 твита

Привет. На этой неделе с вами @dersmoll,(он же @frontender_ua) из Харькова, соавтор #хабра-дайджеста по вебу, FED в ZfortGroup уже 8-ой год.

7:21

Поговорим о блеске и нищете аутсорса, собеседованиях, хабрадайджесте, как не утонуть в потоке информации, инструментах, ну и о верстке, да

7:22
Дайджест: habr.ru/p/280788/. 205-я подборка материалов из мира веб-разработки и IT (28 марта — 3 апреля). pic.twitter.com/BRIMePkm5d

Сейчас я разберусь с утренними задачами и постараюсь общаться без особых перерывов. А пока - вот свежий дайджест twitter.com/habrahabr/stat…

7:30

@cssunderhood я вас вижу! ;) c2n.me/3wspy1h.png

7:33

Лайфхак: оказывается, что ответственность за ведение публичного твиттера заставляет быть собраннее и решать текущие задачи по работе быстрее

8:51

Всегда удивляло, что ведущие cssunderhood редко говорят о проектах, над которыми работают и их специфике: ЦА, масштабы, размер команды и т.п

8:53

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

8:54

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

8:55

Я не рок-звезда интернета, поэтому много о себе писать не буду. Мне повезло, и моя работа совпадает с хобби. Люблю верстку и все что связано

9:00

Застал zx spectrum, 486DX, первые пентиумы, технический вуз, первая работа php-разработчиком и вот сейчас уже восьмой год - фронтенд/верстка

9:03

В день прослушиваю от 2-х до 6-ти часов подкастов. О моих специфических вкусах может сказать лента в iTunes: c2n.me/3wsJ1fR.png

9:05

Теперь ближе к работе. К сожалению, свои проекты называть не смогу, но постараюсь детально намекать и описывать. Аутсорс-специфика-с

9:07
@cssunderhood Примерно как у меня ;-)

Держи пятюню :) c2n.me/3wsKcij.jpg twitter.com/sapegin/status…

9:09
@cssunderhood что делал на спектруме?

Думаю, у многих был похожий паттерн - бейсик и игры :) элита и саботер меня увлекали чуть больше, скажу прямо twitter.com/dcromster/stat…

9:16

.@Hipichay про проекты чуть дальше будет.

9:17
@cssunderhood Саботёр прошел? :)

Стыдно признаться, но нет. В какой-то момент железо умерло и нового было уже не раздобыть в моем родном городке twitter.com/dcromster/stat…

9:19

Наша компания занимается веб-аутсорсом. Я работаю в отделе BFM (bluefountainmedia.com), основной офис в NY. Собственно,проекты в портфолио

9:23

Разброс по уровню проектов довольно широк - от небольших персональных сайтов-портфолио на условном WP до крупных социальных сетей.

9:49

За 8 лет работы я принял участие в создании нескольких сотен проектов, и 90% из них-рынок US, 9%-EU, 1%-Азия.Для рынка СНГ - 0,так сложилось

9:52

Отдел разбит на команды, команды разбиты на проектные подкоманды с четким разбиением задач: backend(php/js), frontend(верстка/js), pm, qa.

9:58

Фронтенд работает без промежуточной статической верстки, имплементируя дизайн и функционал сразу на живой код фреймфорка/CMS

10:00

Обычно работаем с Yii (+ его кастомная модификация), WP (либо php+верстка, либо фронтенд делает под ключ), Magento, кастомный ecommerce.

10:04

Если FED не справляется с JS-задачей,он делегирует ее бекендеру.Это быстрее и эффективнее в близкой перспективе,но может вылезти боком потом

10:07

Такое делегирование может войти в привычку, которая скажется как на уровне фронтедера, так и на будущей поддержке проекта. Избегайте этого.

10:09

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

10:24

Недавно Украину назвали главным аутсорсером в Европе (itonews.eu/report-ukraine…).Не удивительно,что туда идет все больше людей,ведь платят в $

10:30

Долларовые ЗП позволяют зарабатывать в 10 раз больше среднего по стране. На айтишном хайпе открывается большое количество курсов и хабов.

10:33

Курсы и учебные центры подготовили свыше 20 тыс. студентов в 2015 году (dou.ua/lenta/articles…). И это помимо классических вузов.

10:35

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

10:38

Тем не менее, хороший фронтендер и сейчас сидя в том же Харькове может зарабатывать больше, чем в Москве или условной Польше.

10:40

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

11:02
@cssunderhood что то слишком высокие зп

И даже выше.На jobs.dou.ua/salaries/ (заблочен в РФ) есть зарплатный опрос. К примеру c2n.me/3wtafCx.png twitter.com/koderhan/statu…

11:10
@cssunderhood Несмотря на курсы, спрос на простые задачи падает, растёт спрос на экспертов

Одно другому не мешает, простых задач тоже хватает. Просто ширится вилка. $300 - $3000 вполне реальный разброс. twitter.com/Alex509/status…

11:12
@vovagabel @cssunderhood Фриланс развивиается разнонаправленно.
Растут пре-селект биржи типа toptal, и запомоиваются бесплатные

Да, у фриланса тоже серьезная доля рынка. Но далеко не каждый фрилансер потянет комплексный проект. twitter.com/Alex509/status…

11:34

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

11:45
Миниатюра о современном состоянии дел в аутсорс фронтенд мире: вы можете иметь четырехзначную ЗП в USD, но не уметь написать синглтон

Процитирую недавнего @jsunderhood. Да, все так. Но есть одно но. twitter.com/jsunderhood/st…

14:43

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

14:44

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

14:47

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

14:48

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

15:21

Часто разработчики забывают, что они пишут код не ради написания еще лучшего кода (хотя это тоже), а ради создания качественного продукта.

15:21

Из-за этого создается впечатление отношений "поматросил и бросил". Для рождения качественного результата разработчик должен полюбить проект

15:21

Как только такой разраб реализовал свою потребность в технологии, проект перестает быть для него интересным. Дальше идет работа "на отъ@бись

15:21

Забивают на вылизывание анимаций, оптимизацию производительности, accessibility, гайды, документацию и прочие нужные вещи. Мне это болит.

15:21
@cssunderhood сорри, а можно немного развить тему разрыва между теор. знаниями и практ. умениями и его преодоления?

Исходя из своей практики могу сказать, что обширные теоретически знания часто тормозятся личностными качествами. twitter.com/SelenIT2/statu…

15:27

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

15:27

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

15:30

.@koderhan Всё так, и это лишь одна из проблем нашей работе. Нужно уметь искать золотую середину и давать адекватные эстимейты

15:37
@cssunderhood А что значит тормозятся личностыми качествами?

По-разному бывает. Например, приходит новый человек на проект и начинает агрессивно доказывать, что знает как лучше twitter.com/vitkarpov/stat…

15:41
Вакансии с требованием опыта в React ничем не отличаются от вакансий с требованием опыта в jQuery.
20:15
Edge team is working on: Fetch and Beacon API's, High Resolution Time 2, WOFF2 -- hooray perf! #EdgeWebSummit

Молодцы ребята. Но не поздно ли за ум взялись? twitter.com/igrigorik/stat…

20:18

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

20:33

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

20:33

# Вторник 55 твитов

Доброе утро, коллеги и сочувствующие! Ну что, внесем дух CSS в этот underhood?

6:59

Задумывались ли вы, что в отличие от простых юзеров внешнего интернета мы обладаем суперспособностями и тайными знаниями работы сайтов?

7:01

Это дает нам определенные преимущества. К моему удивлению, далеко не все ими пользуются.

7:02

Наверное,один из самых популярных лайфхаков - в веб-инспекторе изменить input type=password на text и увидеть, что скрывается за звездочками

7:04
@cssunderhood да когда показывал жене в инспекторе как обойти тупейший блокировщик копирования контента с сайта, чувствовал себя суперменом!

Блокировщики контента - зло, и мы тоже умеем с ним бороться! twitter.com/denswor/status…

7:05

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

7:09

В качестве примера будет аддон для браузеров Stylish (userstyles.org). Есть другие похожие инструменты, но этот умеет в облако.

7:10

Мне нравится темная тема в Slack. Вдохновившись ею, я сделал редизайн YouTube. Теперь он выглядит так c2n.me/3wvsx2X.jpg

7:12

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

7:13

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

7:15

Последнее время браузеры научились определять, что мы используете AdBlock. Но это не проблема для css-супергероя, хехе

7:16

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

7:19
@cssunderhood никто в здравом уме и трезвой памяти не будет делать это руками.

Мой кейс подразумевал точечную работу с блоком рекламы только на самых посещаемых тобой сайтах. Или их сотни? twitter.com/SilentImp/stat…

7:23
@cssunderhood ну зачем это кому то надо?

Допустим,сайт вам нравится или полезен,а зараб. только с рекламы. Не кажется ли вам неправильным лишать его дохода? twitter.com/koderhan/statu…

7:38

Окей, кажется я нащупал холиварную тему. Для баланса в чатик призываются владельцы сайтов, которые зарабатывают с рекламы :)

7:44

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

7:47
@cssunderhood подзарабатываю :)

Адрес сайта в студию! PS: пользуясь случаем, передаю привет 8й общаге хирэ twitter.com/AntonShevchuk/…

7:50

@cssunderhood убрал сайдбар, расширил контент. Для меня чуть лучше, но все равно дизайн убог c2n.me/3wvxE8H.png

7:54
@cssunderhood я на некоторых сайтах отключаю, просто потому что они просят (и у них нормальная реклама).
8:01
@cssunderhood ещё на кинопоиске отключаю, потому что там адблок ломает верстку
8:01
@cssunderhood то есть адблок он нужен, чтобы выпиливать рекламу там где она действительно мешает, типа рутрекера, например. Она там ужасна
8:01
@cssunderhood а на хабре, наоборот, реклама скромна и бывает даже интересна, поэтому там адблок выключен
8:01

Кроме пользовательских стилей можно использовать и пользовательские скрипты. Наример, свежая статья на эту тему medium.freecodecamp.com/applying-javas…

8:09
А расскажите про интересные-полезные приложения у Вас? (конечно от Скайпа и гуглокалендаря мы никуда не денемся)

Последнее время подсел на workflowy.Например,так выглядели андерхуд-мысли в ожидании очереди c2n.me/3wvFnqK.png twitter.com/jsunderhood/st…

8:30
А еще последнее время очень раздражает Slack. И это иррационально - сознательных аргументов почему - нет

Полюбил Slack с первого взгляда. Главное, правильно настроить нотификации и не отвлекаться в random по пустякам :) twitter.com/jsunderhood/st…

8:38

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

11:19

Мне не очень нравится тенденция последних лет, когда по-умолчанию подразумевается, что frontend == js. Ведь клиентская область куда шире

11:19

Уже попадаются "фронтенд-разработчики", которые почти не умеют верстать. Им не интересна семантика/доступность/нюансы и оптимизации рендера

11:19

У них js на клиенте, css в js, js на сервере, js-фреймворки. Почему бы и не именовать себя просто "JS-разработчик", всем ясно и понятно

11:19
@cssunderhood ну, мобильные приложения - тоже отчасти фронтенд

Именно "отчасти". Поэтому я и выступаю за то, чтобы детализировать область фронтенда при определении своих знаний twitter.com/Di_Ed_Seagull/…

11:25
@cssunderhood Подразумевается что "верстальщики" как таковые не нужны.

С верстальщиками тоже не все так просто. Очень часто на собеседованиях сталкиваюсь со следующим: twitter.com/Alex509/status…

11:35

Человек утвержает, что за 1-2 года верстки достиг всего, что мог и дальше хочет развиваться, в сторону JS. Это, конечно, похвально.

11:36

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

11:36

Critical Path? -слышал краем уха. unicode-range? "-а шо это". FOUT/FOUC? -нет. srcset? -только читал. grid layout? - "ну, что-то знакомое"

11:37

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

11:39

Люди либо остаются на базово необходимом уровне создания страниц, либо им верстка становится не интересна и они уходят с головой в JS.

11:40
@cssunderhood Как только человек перестал учиться и стал экспертом - можно выбрасывать.
11:54

Чем ниже порог вхождения, тем ниже зп на старте. Чем дольше верстальщик за станком, тем шире область его знаний и зп twitter.com/yustovskiy/sta…

11:59

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

12:00
@cssunderhood кстати, как мсье относится к вопросам по computer science на собеседованиях на фронтенд-дева?:)

Лично я, как окончивший "Информатику" в ХНУРЭ, отношусь положительно :) Но все зависит от потребностей компании. twitter.com/aleksmiller/st…

13:52

Если упор на JS, то для миддла и выше - обязательно. Если на верстку, то знание приветствуется, но не спрашиваем.

13:53

Недавно начально сделало претензию, мол мы сильно гоняем на собеседовании (на самом деле нет) и из-за этого слишком долго ищем специалиста

13:53

Пришлось сбавить обороты. К тому же, у нас упор именно на верстку, js-а к сожалению не так много, как хотелось бы - специфика проектов.

13:54

.@ruGreLI @kbytin согласен, я просто привел в качестве примера. Экономия "на спичках" бывает эффективна при комплексной оптимизации

13:55

.@ruGreLI всё так. зависит от спец-ки работы и сложности проектов.У меня последнее время соц.сети в разработке, поэтому актуально и работает

13:57
@cssunderhood FOUC опять же редкий зверь. srcset полезен, но внедрён повсюду только недавно. Grid Layout только-только намечается в проде.

Я могу заблуждаться,но считаю что фронтендер должен как минимум быть знаком с этими понятиями, а не хлопать глазами twitter.com/ruGreLI/status…

14:01
@cssunderhood Надо понимать на какой уровень (и бюджет) ищете. Если херачить страницы одну за другой, то в CS углубляться незачем.
14:05
@cssunderhood Тот же Макконнелл пишет, что сначала надо делать рабочую версию, а потом оптимизировать там где реально жмёт.
14:05
@cssunderhood Так что те же картинки всегда не вредно оптимизировать («потому что можем»), а вот остальное требует отдельного подхода.
14:05

.@Alex509 окей, засчитано :) Но на самом деле многое применяю на практике при наличии бюджета на проекте.Приятно работать с новыми техниками

14:14

.@webholt @Alex509 Это работает не так. Внедряется только безопасное и только если вкладываешься в свой основной естимейт по проекту.

14:22
Вы уже слышали новый винил инди-бэнда Web Standards? soundcloud.com/web-standards/… pic.twitter.com/RQAZmXaXaZ

Как опытный подкастослушатель хотел бы поблагодарить авторов за качественный подкаст, контент, оформление и гостей. twitter.com/webstandards_r…

18:20

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

18:29
@cssunderhood и резко уменьшается найм не-синиор позиций. Джуна уже эффективней выучить самим на своих курсах, и мидлов сделать из них же.
18:33

.@xwoody я сам еще особо не знаю синтаксис GL. Но считаю, что ознакомиться со стандартом и его возможностями стоит уже сейчас. Ибо грядёт.

18:40

# Среда 27 твитов

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

7:59

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

8:18

Сегодняшний рабочий день обещает быть насыщенным и прерывистым, поэтому будет удобнее налётами врываться в твиттер и набрасывать тему :)

8:18

Пардон, сейчас немного изменю опрос.

8:24

[Опрос]: Допустим, сегодня вы начинаете новый проект. Ставится вопрос о поддержке браузеров.

8:34
@cssunderhood у нас есть дефолтный список, все дополнительные браузеры по желанию и деньги клиента

У нас похожая ситуация. Каким по каким критериям составляется ваш дефолтный список? @AntonShevchuk twitter.com/AntonShevchuk/…

8:42
@cssunderhood К примеру, если в его регионе популярны другие браузеры. Но при этом для древних IE уже будет отдельная цена.
8:51
@cssunderhood берём два топовых на данный момент - Chrome и Firefox - если у заказчика есть пожелания - можем за основу два других взять
8:52
@cssunderhood Адаптивная вёрстка тоже оговаривается отдельно, т.к. прописав viewport дело не заканчивается, и интерфейс надо переделывать
8:56

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

9:11

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

9:11

По-умолчанию указываются 2 последние версии браузера, а также те версии, которые имеют >5% на рынке клиента. В нашем случае 90% это US

9:12

Например, для IE у нас сейчас примерно следующая ситуация: IE11 (Win7/8,Desktop/Modern UI), Edge (Win10).

9:12

Разделение IE11 на варианты между deskop mode и modern UI произошло после обнаружения существенных различий в рендере страниц в этих версиях

9:13

Responsive версия на данный момент делается для всех новых проектов. Плюс отдельно мобильные приложения для соц. сетей.

9:15

Немного неловко, что сегодня не особо активен, но деплой на лив - дело святое :) Постараюсь компенсировать ближе к вечеру.

12:48

[Опрос] HTTP/2: переводятся ли уже на этот протокол те проекты, в разработке которых вы принимаете участие?

16:25

Два наглядных примера с демонстрацией преимущества HTTP2: httpvshttps - httpvshttps.com , akamai demo - http2.akamai.com/demo

16:26

Лаконичная картинка, демонстрирующая одно из преимуществ для клиентской области: ain.ua/wp-content/upl…

16:27

Несколько статей для тех, кто ушел гуглить: folkprog.net/gotovimsia-k-h… , scotthelme.co.uk/still-think-yo… , mightybytes.com/blog/what-is-h…

16:29

Скриншот быстрых замеров недавно запущеного проекта для разных протоколов (холодный старт): c2n.me/3wAsodz.png

16:30

Если вкратце,то для нас профит в следующем: в http/2 спрайты изображений и конкатенация css/js - не всегда лучший способ оптимизации

16:36

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

16:38

Однако, как всегда есть нюансы. Например, нужно сравнивать общий вес мелких картинок и спрайта с ними же. blog.octo.com/en/http2-arriv…

16:40
@cssunderhood Сжатие заголовков, отсутствие необходимости реализовывать шардинг доменов. Не надо ничего инлайнить.

Это тоже, особенно инлайнинг. Что касается сжатия и шардинга - многие верстальщики этим и так не заморачиваются, увы twitter.com/webholt/status…

16:43
@cssunderhood Короче говоря, многие костыли становятся ненужными с HTTP2.
16:43
Вышла пожалуй лучшая статья о @PostCSS на русском — если прочитать и комментарии, то у вас развеются все вопросов
habrahabr.ru/post/280988/
18:35

# Четверг 43 твита

Всем привет. Сегодня немного расскажу о веб-дайджесте на @habrahabr и поиске новой информации. Для начала немного истории. Преамбула:

8:55

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

8:55

С ~2009го года у нас проходят еженедельные собрания фронтендеров, где обсуждаются свежие новости веб-разработки и индустрии, статьи, техники

8:55

Лет 5 ведущими этого дела были @alekskorovin и я. После ухода Алексея в другую компанию приходится активничать на митингах самому.

8:56

Выглядит это так: подборка материалов в стиле хабра-дайджеста, до 20ти человек аудитория, проектор, большой экран c2n.me/3wBbPDI.jpg

8:56

В начале 2012го начал экспериментыс хабром. Первая же опубликованная статья на тему верстки собрала почти 100 плюсов habrahabr.ru/post/139311

8:57

И я решил продолжать. Был интересен принцип набора рейтинга, оптимальное время публикации статей, отношение к переводам и все такое.

8:57

Примерно тогда же проводил собеседования. После того, как 20й человек сказал, что не знает кто такой ПолАйриш и КрисКойер, у меня бомбануло.

8:58

Так родился ряд статей о звездах фронтенда. (habrahabr.ru/post/140831/, habrahabr.ru/post/141113/). Возможно, созрею для продолжения

8:58

А комменты под статьей про отечественных фронтендеров даже сейчас занятно почитать habrahabr.ru/post/141260/. Просится новая статья)

8:59

Таким образом за несколько недель внезапно оказался в топ3 хабра. c2n.me/3wBLO3j.png. Подозреваю, что сейчас такой номер уже не пройдет

8:59

И тут мы вспомнили,что у нас есть материалы еженедельных митингов, которыми можно делиться.Так родился первый выпуск habrahabr.ru/company/zfort/…

9:00

Недавно перешагнули 200й дайджест,на следующей неделе исполнится ровно 4 года,как он выходит практически без перерывов.Дай 5, @alekskorovin

9:01

На данный момент ситуация в аналитике такая c2n.me/3wBSbuU.png. Спасибо @habrahabr за отличную площадку и что до сих пор нас терпите :)

9:01

Ну все, наверное достаточно графомании. О поиске материлов для дайджеста - после обеда.

9:02

Обязаловки нет. Кому скучно - не ходят. Для меня их ведение - тоже собственная инициатива, стараюсь поддерживать уровень отдела @GrawlCore

9:06
Вокруг меня куча хомячков радуется WebAssembly: "ура, писать веб на нормальном ЯП". "
@RReverser давно верно сказал
twitter.com/jsunderhood/st…
9:27

Немного расскажу о своих методах сбора инфы.Их можно разделить на 3 вида - мониторинг в реальном времени, погружение в rss и соц. сервисы

14:30

Мониторинг в реалтайме происходит так:в рабочем/домашнем пространстве всегда есть панель с тематической тви-лентой c2n.me/3wCXJeW.jpg

14:30

Когда боковым зрением замечаю что-то походящее - сразу добавляю в закладки. Либо же отвлекаюсь между рабочими задачами каждые 30-40 минут.

14:30

Такой режим не всегда возможен и напрямую зависит от текущей загруженности. И нет, это не сказывается на моей производительности - привык :)

14:30

Следующий этап: чтение подписок в RSS. Очень расстроился, когда был закрыт G.Reader. Но feedly смог его заменить c2n.me/3wD0ZkE.png

14:31

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

14:31

RSS-подписки включают в себя как популярные ресурсы типа smashingmagazine и sitepoint, так и блоги известных и не очень разработчиков

14:31

Следующий источник: соц.сервисы и живые подборки. Под первыми имею в виду такие как reddit/r/frontend, hashnode.com, habr, medium

14:32

Последнее время Medium радует - по related статьям можно гулять всю ночь. Раньше такое бывало только с wikipedia :) c2n.me/3wD5B5W.png

14:32

Дальше - живые подборки.

14:33

Это такие как frontendfront.com, echojs.com,https://t.co/TLoajTWUSQ, webdesignernews.com и др c2n.me/3wD6uwX.png

14:33

Все подходящие статьи также откладываются в закладки по категориям и ждут вечера или выходных

14:33

Добавление в закладки проиходит с помощью самописного экстеншена/букмарклета, который создал @alekskorovin c2n.me/3wD7CII.jpg

14:34

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

14:34
Аарон Густавсон резюмировал все анонсы Microsoft с Веб-саммита Edge 2016 — aaron-gustafson.com/notebook/my-to… pic.twitter.com/62GrRpg9Ga
15:00

Неплохая подборка с ресурсами, на которые можно подписаться или мониторить. Жаль, давно не обновлялась github.com/impressivewebs…

15:07

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

15:08

Также существуют регулярные почтовые рассылки. Например, недавно @sapegin составил неплохую подборку medium.com/@sapegin/devel…

15:11

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

15:13

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

15:14

Иногда попадаются веб-дайджесты от других создателей. Когда в свежей подборке вижу статью двухлетней давности, меня немного корёжит :)

15:15
@cssunderhood и не отвлекает?

Стараюсь держать себя в руках.Букмарк твита происходит на автомате без вреда работе.Хотя а ля npm-гейт может отвлечь twitter.com/operatino/stat…

15:40
Продолжаем. Третий доклад — Алексей Коваль про типографику. Трансляция: youtube.com/watch?v=Dw3iql… pic.twitter.com/F2sCiDq6K1
18:30
AMP by Example - Gives you a hands-on introduction to Accelerated Mobile Pages based on code and live samples: bit.ly/1Yhy72I

Кстати,кто-то уже попробовал AMP?Вот тут подборка с примерами.Ничего такого, но времени на своих проектах не выбью ( twitter.com/robertnyman/st…

19:59

На прошлой неделе в блоге разработчиком Рамблера написали о разгоне мобильной ленты.ру. В коментах сплошной скепсис habrahabr.ru/company/ramble…

20:01
@cssunderhood A list of who's already working with AMP: bit.ly/1MWjeCc
NY Times, Guardian, Twitter, LinkedIn etc

Thank you for sharing! twitter.com/robertnyman/st…

20:03

# Пятница 57 твитов

А расскажите про последнюю художественную книжку, которую читали. И как оно вам?

Последние время жалею глаза и отдаю предпочтение аудиокнигам. На этот год как-то так: clip2net.com/s/3wEL9ra twitter.com/jsunderhood/st…

8:07

[Опрос] Предположим, сегодня вы начинаете работу над новым проектом. Мокапы насыщенны мелкими иконками. Вы:

8:27

Вкратце расскажу о своем отношении к этому вопросу.
1) Иконочные шриты: уже не первый год борюсь против их использования в нашем отделе.

8:35

Причин довольно много. Основная часть проблем была описана в статьях двухлетней давности. Например, вот неплохая frontender.info/ten-reasons-we…

8:36

Последнее время стали больше говорить о доступности. Думаю, многие видели эмуляцию того, как видят текст дислексики geon.github.io/programming/20…

8:37

Люди с этой проблемой подключают специальные шрифты для возможности чтения. Например, opendyslexic.org. Происходит конфликт шрифтов

8:39

Еще несколько материалов о проблемах иконочных шрифтов: blog.cloudfour.com/seriously-dont… , speakerdeck.com/ninjanails/dea… .

8:43

Любите Font Awesome? С ним тоже не все так гладко. iconion.com/posts/font-awe…

8:44

От image-спрайтов на данный момент практически отказались, т.к. практически все последние проекты запускаются на протоколе HTTP/2.

8:48

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

8:50

SVG? Да, это наш выбор! :) Я предпочитают технику с symbol и use. Самое простое ее описание на css-tricks css-tricks.com/svg-symbol-goo…

8:56

Сара о стилизации use tympanus.net/codrops/2015/0… Можно мутить икон. системы nucleoapp.com/how-to-create-… или клеить галпом habrahabr.ru/post/272505

8:59

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

9:02

[Опрос] Для написания вы используете (да,немного странный подбор вариантов. Но местный опросник сильно ограничен):

9:16
@cssunderhood Sublime + Brackets.
9:17
@cssunderhood Но ведь они будут каждый раз подгружаться (в то время как картинки сохраняются на стороне клиента), разве нет?

Всё так.Но если она простая и мелкая,то ее код почти не влияет на общий размер css, а css тоже кешируется на клиенте twitter.com/GolubevVictor/…

9:20
@cssunderhood особенно для мелких штук, которым не надо менять цвет заливки или обводки при hover или чего-то подобного.

А также если не надо по-особому адаптировать для респонсива и ретины. В остальном довольно удобная штука. twitter.com/denswor/status…

9:27

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

9:29
@cssunderhood какой может быть максимальный размер картинки, что кодируете в base64?

Тут подробно разбирают размеры Base64
stackoverflow.com/questions/1124… + выводы в конце этой статьи mobify.com/blog/css-sprit… twitter.com/komarnitskyi/s…

9:40
@cssunderhood раньше вместо image sprite клал все классы псевдо-картинок (width/height/data:uri) в отдельный images.css, но теперь SVG.
10:08
@cssunderhood Сильно зависит от сложности иконок (веса SVG), ну и количества тоже. Вообще SVG лучше не base64 делать, а encodeUri.

Угу.Т ут можно почитать о проблемах с размером css-tricks.com/probably-dont-… и производительностью mobify.com/blog/base64-do… twitter.com/ruGreLI/status…

10:22
@cssunderhood а где хардкорный вариант? Сверстаю каждую иконку вручную!!1.

Слишком хардкорно, но иногда делаю чисто стилями иконки для лупы поиска, стрелочки, домики для home и пр. twitter.com/notarseniy/sta…

10:25
@cssunderhood Пример такого кодирование есть в онлайн энкодере @yoksel yoksel.github.io/url-encoder/,
ПР с кодом: github.com/yoksel/url-enc…
10:34

Раз уж заговорили о SVG, хочу выразить благодарность @ruGreLI за инструмент #svgo, позволяющий оптимизировать вектор github.com/svg/svgo

10:41

А вот этим удобным веб-интерфейсом SVGOMG смогла бы пользоваться даже моя бабушка и трехлетняя дочь jakearchibald.github.io/svgomg/

10:43
@cssunderhood Ну я только мейнтейнер, сопровождаю потихоньку. Идей больше чем времени на их воплощение. А автор — Кир Белевич @deepsweet.

Слава автору, мейнтейнерам слава! twitter.com/ruGreLI/status…

10:45

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

10:59

Где-то в 2012-м году удалось купить его за $24.75 по скидке 75%, устроенной в честь "конца света" :) Нынешняя цена $ 89.00 - куда ощутимей

11:02

Интерфейс того же Sublime отзывчивее, однако количество и качества функционала «из коробки» в PhpStorm компенсирует остальные недостатки

11:05

Наверное не буду расписывать возможности и техн.фичи,ибо начнется ide-шный холивар,только поделюсь симпатичной темой github.com/ChrisRM/materi…

11:11
@cssunderhood @komarnitskyi можно добавить, что в отличие от спрайтов base64 позволяет эффективно использовать png8 с минимальной палитрой.
11:38

В рамках подготовки к андерхуд-недели планировал один из дней посвятить оптимизации производительности и ускорению сайта.

12:20

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

12:21

Да что говорить - на моем домашнем ПК некоторые сайты тормозят больше,чем условная GTA5 или Ведьмак3 с фол4 (quantum break еще не пробовал:)

12:21

Жаль, в @perfception редко постят, могли бы популяризировать активнее ;) Дайджесты годные были тоже perfception.com/ru/

12:24

Понравилось предложение модели RAIL от разработчиков Google, Полов Айриша и Льюиса smashingmagazine.com/2015/10/rail-u… developers.google.com/web/tools/chro…

12:27

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

12:29

[Опрос] Поговорим о технике Critical Path (CSS).

13:19

Что такое Critical Path и почему он бывает важен: prgssr.ru/development/ra… prgssr.ru/development/Op… gomakethings.com/inlining-criti…

13:22

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

13:24

Кстати, на udacity есть бесплатный курс на эту тему: "Website Performance Optimization:The Critical Rendering Path" udacity.com/course/website…

13:32

Еще одна мощная статья по оптимизации этого дела от Nicolás Bevacqua
ponyfoo.com/articles/criti…

13:39

Набор тулзов для Critical-path (Above-the-fold) CSS
от Addy Osmani github.com/addyosmani/cri… плюс Grunt/Gulp штуки
yeoman.io/blog/performan…

13:44

Ну и самый ленивый способ - онлайн-генератор jonassebastianohlsson.com/criticalpathcs… Правда, не проверял адекватность его работы.

13:46

[Опрос] Почти на всех сайтах можно встретить кастомные веб-шрифты, многие из них тяжелые. Оптимизируете ли вы их?

13:52

О том, что с ними можно делать можно почитать в клевой статье прямо на сайте разработчиков Google: developers.google.com/web/fundamenta…

13:54

На самом деле техник оптимизации шрифтов тоже хватает: от
обрезки диапазона Unicode до кодирования в base64 и его загрузки в LocalStorage

13:56

C некоторыми техниками стоит быть осторожным: как-то случайно
с помощью unicode-range вырезал все смайлики из шрифта на социальном сайте :)

13:59
CSS methodologies seem aimed at making front-end dev more complicated than it needs to be. Creating job security, perhaps?

Уже пару раз встречал такое мнение.Наблюдаем повышение порога входа в нашу тему? Жду css переменные и grid layout :) twitter.com/rogerjohansson…

14:20
@cssunderhood переменные все поймут, гриды сложнее, а вот модули вообще сложная тема 😊

Ну, с переменными не все так просто).Развилки многих будут сбивать. Спасибо @malyw за статью blog.gospodarets.com/css_properties… twitter.com/mr_roose/statu…

14:41

Такс. Наш тим собирается на тим-билдинг в паб. Были ли в местных андерхудах пьяные твиты? Будут! :)

14:48

Ох уж эти хмельные разговоры по душам о табличной верстке под IE5.5, iepngfix.htc, css3pie, SWFObject и прочие zoom: 1

14:48
Пошло нагрузочное тестирование #highload instagram.com/p/BD8qxPfqNER/

Кстати, о хайлоаде. Было бы интересно послушать фронтендеров, участвующих в разработке популярного порносайта. twitter.com/dersmoll/statu…

21:01

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

21:02

Не удивлюсь,если вдруг окажется,что самые продвинутые техники верстки приходят из сферы xxx - есть все предпосылки furfur.me/furfur/culture…

21:22

Даже SpaceX уже сумел сесть на платформу, а ты все еще делаешь анимацию на jQuery

22:14

# Суббота 30 твитов

Айтишники разрушают миф о хилых офисных задротах. Сегодня в Харькове марафон, и от многих IT-компаний есть бегуны pbs.twimg.com/media/CflK7jcX…

8:26

Велопробеги тоже популярны. И айтишники любят велики. В прошлом году в вело-дне приняло участие 10к велосипедистов. pp.vk.me/c622023/v62202…

8:45

Также, с 2009го проводится довольно серьезная футбольная IT-лига. football.kharkov.ua .Есть и баскетбольная clip2net.com/s/3wHojb2

8:55

Вчера забыл в рамках хмельной пятницы написать о специфическом ресурсе ebanoe.it,от которого у многих бомбит.Напримр ebanoe.it/2016/01/04/tho…

9:17

Игры на CSS/HTML - это конечно круто,но каждый раз задаюсь вопросом - откуда у авторов столько своб. времени на это una.im/css-games/

13:09

Пишут, что Medium нацелился на успех WP. Рад их развитию - нравится минимализм и акцент непосредственно на контенте
oddstyle.ru/wordpress-2/st…

17:19

Еще Medium популяризируют эффект размытия изображения при загрузке. Несложно и эффектно jmperezperez.com/medium-image-p…

17:36

Знали ли вы,что у инстаграмма есть не только фото с едой,но и неплохой техн. блог? Вот свежее про производительность engineering.instagram.com/posts/19341556…

18:22

Забыл на неделе сделать опрос на тему, уделяете ли вы внимание социальным мета-тегам (twitter cards/open graph)

18:44

Сейчас все больше сервисов умеет парсить url и доставать из него тайтл, img,описание и пр. Даже Skype научился последнее время делать превью

18:48

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

18:49

Бекендарам на это пофиг, многие ПМы не в курсе этой фичи, поэтому FEDы должны особенно следить за попаданием нужной инфы в параментры meta

18:50

Несколько статей для тех, кто не в курсе twitter cards/open graph blog.kissmetrics.com/open-graph-met…, storybench.org/add-meta-tags-… , secretsaucehq.com/mega-tags/

18:52

Поговаривают,что в сентябре будет релиз HTML5.1.Даже не знаю,что сказать по этому поводу.Может кто-то из @cssliveru? whatpixel.com/html51-expecte…

19:16

Как возможно кто-то уже догадался, моя вечерняя активность связана с подготовкой хабра-дайджеста :)

19:19

[Опрос] Приходилось ли вам уже применять технику Offline First или работать над оффлайн состоянием сайта/приложения?

19:26
@cssunderhood так и сделано на @cssunderhood @jsunderhood и @breakingmad_

Качество сайта - это контент + совокупность множества мелких деталей.Спасибо авторам этих сайтов за контент и детали twitter.com/iamstarkov/sta…

19:33

Окей, про Offline. Как оказалось, не все знают, что у нас есть возможность ловить оффлайн-состояние сайта и что-то с ним в это время делать

19:35

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

19:37

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

19:40

Огромная подборка ресурсов на тему Offline-First github.com/pazguille/offl… ,бесплатный курс udacity udacity.com/course/offline…

19:42

Быстрый туториал google.dev developers.google.com/web/fundamenta… , copy&paste
урок от remy sharp remysharp.com/2016/03/22/the…

19:44
@iamstarkov @cssunderhood нужно реже, чем кажется и проблематично из за особенностей манифеста или необходимости https. Но позволяет …
19:56
@iamstarkov @cssunderhood … довольно сильно улучшить UX в ряде случаев, если есть возможность потратить на это время. А какие именно аспекты
19:57

Не могу не сослаться на доклад @SilentImp youtu.be/f1DVxtjiBc4?t=… .Ну и здесь @pepelsbey youtube.com/watch?v=Bhd5HQ… тоже затрагивает эту тему

20:02
@cssunderhood youtube.com/watch?v=f1DVxt… видео моего доклада и там же перед ним ещё доклад @pepelsbey @iamstarkov
20:02

Недавно я писал, как бывает увлекательно искать новые статьи на Medium. Но не менее занятно искать их и на Codepen codepen.io/posts/

21:18

Да, там есть не только прикольные демки на html/css/js. Можно что-то и почитать полезное при желании :)

21:19

Все новые материалы, которые я нахожу в рамках подготовки к дайджесту, я транслирую в этот твиттер @frontender_ua Ну, чтоб не пропадало :)

21:20

Ладно. Верстка - это, конечно, хорошо, но пришло время отвлечься. Пойду запинаю сотню - другую зомби в Dying Light. Плодотворной всем ночи!

21:30

# Воскресенье 24 твита

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

8:49

В начальной версии черновика он обычно раза в 2-3 больше:) clip2net.com/s/3wIWOtq Сейчас замусь чисткой от дубликатов и второстепенной инфы

8:49
Автоматизация регрессионного тестирования CSS 2016 ift.tt/1Ni1XhI
10:03

css-live.ru, frontender.info, prgssr.ru, jsraccoon.ru .А какие еще тематические регулярные русскоязычные фронтенд-ресурсы вы знаете?

11:44

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

15:09

Бывали моменты, когда сдерживал себя из последних сил, но challenge есть challenge :)

15:10
Mobile Facebook has a 1.1mb emoji sprite - this is an anti-pattern. To display one tiny emoji, you download 1.1mb static.xx.fbcdn.net/rsrc.php/v2/yv…

Семен Семеныч, что ж вы так.. twitter.com/jaffathecake/s…

15:56

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

17:44

Потому что в таком объеме текста всегда бывают ошибки, опечатки и проблемы перевода. И фиксить их в прайм-тайм - удовольствие так себе.

17:44

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

17:45

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

18:30

Умничать в реплаях куда проще, чем вести основную ленту.

18:31

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

18:31

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

18:31

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

18:31

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

18:32

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

18:32

Убедитесь в том, что ваш твитер-клиент удобен для ведения активной ленты. TweetDeck норм даже для 3-х акков clip2net.com/s/3wJU4vN

18:32

Тем временем опубликовал "Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю" №206 habrahabr.ru/company/zfort/…

20:03
#PHP-Дайджест № 83 – интересные новости, материалы и инструменты (27 марта – 10 апреля 2016) habr.ru/p/281306/ pic.twitter.com/0Kqi4gfpSh

Наш коллега по цеху дайджестов тоже опубликовал свою регулярную подборку. Она не в тему cssunderhood,но тоже про веб twitter.com/pronskiy/statu…

20:07

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

20:10

За что спасибо @alekskorovin и @pronskiy

20:12

На данный момент полет такой clip2net.com/s/3wK8MQz

20:20

На этом буду закругляться. На этой неделе ленту вел @dersmoll aka @frontender_ua, спасибо за внимание. PS: Куда логировать время за таск?:)

20:32

c2n.me

habrahabr.ru

github.com

clip2net.com

other