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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вакансии с требованием опыта в React ничем не отличаются от вакансий с требованием опыта в jQuery.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@cssunderhood я на некоторых сайтах отключаю, просто потому что они просят (и у них нормальная реклама).

@cssunderhood ещё на кинопоиске отключаю, потому что там адблок ломает верстку

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@cssunderhood Надо понимать на какой уровень (и бюджет) ищете. Если херачить страницы одну за другой, то в CS углубляться незачем.

@cssunderhood Тот же Макконнелл пишет, что сначала надо делать рабочую версию, а потом оптимизировать там где реально жмёт.

@cssunderhood Так что те же картинки всегда не вредно оптимизировать («потому что можем»), а вот остальное требует отдельного подхода.

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

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

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

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

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

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

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

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

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

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

@cssunderhood К примеру, если в его регионе популярны другие браузеры. Но при этом для древних IE уже будет отдельная цена.

@cssunderhood берём два топовых на данный момент - Chrome и Firefox - если у заказчика есть пожелания - можем за основу два других взять

@cssunderhood Адаптивная вёрстка тоже оговаривается отдельно, т.к. прописав viewport дело не заканчивается, и интерфейс надо переделывать

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@cssunderhood Короче говоря, многие костыли становятся ненужными с HTTP2.

Вышла пожалуй лучшая статья о @PostCSS на русском — если прочитать и комментарии, то у вас развеются все вопросов
habrahabr.ru/post/280988/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Продолжаем. Третий доклад — Алексей Коваль про типографику. Трансляция: youtube.com/watch?v=Dw3iql… pic.twitter.com/F2sCiDq6K1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@cssunderhood Sublime + Brackets.

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

@cssunderhood раньше вместо image sprite клал все классы псевдо-картинок (width/height/data:uri) в отдельный images.css, но теперь SVG.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

А также здесь filamentgroup.com/lab/font-loadi… и здесь keycdn.com/blog/web-font-…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@iamstarkov @cssunderhood нужно реже, чем кажется и проблематично из за особенностей манифеста или необходимости https. Но позволяет …

@iamstarkov @cssunderhood … довольно сильно улучшить UX в ряде случаев, если есть возможность потратить на это время. А какие именно аспекты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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