x
 
Валентин Беляев
18 апреля 2019
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Расскажите о безголовом Хроме. А лучше покажите, как используете в бюро.


Валентин!

Без­го­ло­вый Хром (Headless Chrome) — это пол­но­цен­ный бра­у­зер без гра­фи­че­ского интер­фейса. Он рабо­тает быст­рее и исполь­зует меньше памяти, чем обыч­ный бра­у­зер. Управ­ляют им про­граммно через АПИ.

Чаще всего без­го­ло­вые бра­у­зеры исполь­зуют для авто­ма­ти­за­ции и тести­ро­ва­ния сай­тов и веб‑при­ло­же­ний, для гене­ра­ции скрин­шо­тов и ПДФ‑документов.

В бюро

Мы исполь­зуем без­го­ло­вый Хром через Puppeteer — АПИ для управ­ле­ния Хро­мом в про­грам­мах на Явас­крипте. Чаще всего — для скриншотов:

В Издательстве бюро

Раньше пре­вьюшки книж­ных раз­во­ро­тов гене­ри­ро­вал PhantomJS при финаль­ной сборке книги. Это было мед­ленно и нена­дёжно: PhantomJS ино­гда гене­ри­ро­вал пустые изоб­ра­же­ния, падал и не под­дер­жи­вал видео и совре­мен­ный ЦСС.

Сей­час пре­вьюшки гене­ри­рует Хром прямо в про­цессе созда­ния и редак­ти­ро­ва­ния раз­во­ро­тов. Чтобы быстро гене­ри­ро­вать пре­вьюшки, мы дер­жим Хром запу­щен­ным посто­янно, а для гене­ра­ции пре­вью­шек откры­ваем в нём табы. В сред­нем на гене­ра­цию одной пре­вьюшки ухо­дит 2,2 секунды.

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

В Советах

Обложки сове­тов и под­бо­рок для соц­се­тей также гене­ри­рует Хром. Чтобы сде­лать обложку, Хром откры­вает стра­ницу с шап­кой совета и скрин­шо­тит её:

Фейс­буку нужна кар­тинка с про­пор­ци­ями 1,91:1
ВК нужна кар­тинка с про­пор­ци­ями 2,23:1

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

В Школе бюро

Когда сту­дент закан­чи­вает обу­че­ние на под­кур­сах, мы при­сы­лаем ему письмо с сер­ти­фи­ка­том. Кар­тинку с бал­лом также гене­ри­рует Хром из стра­ницы со свёр­стан­ным фактоидом:

Свер­стать фак­тоид с бал­лом в письме не полу­чится: поч­то­вые кли­енты тол­ком не под­дер­жи­вают кастом­ные шрифты

В будущем

Мне бы хоте­лось исполь­зо­вать Хром для авто­ма­ти­за­ции вёрстки и мони­то­ринга про­из­во­ди­тель­но­сти. Ска­жем, в Хроме можно было бы авто­ма­ти­че­ски пере­би­рать и оце­ни­вать вёрстку раз­во­ро­тов, про­ве­ряя её на раз­ных экра­нах и устройствах.

Ещё по теме

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор закрыт. Оставьте почту, и мы напишем вам, когда откроется следующий набор.
 

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

Вы используете Зеплин? 1 Несколько месяцев назад меня повысили из обычного разработчика до «тимлида» 1 Как правильно, эффективно и уважительно ставить KPI? Как готовить макеты для технологов? 6




Недавно всплыло

Хочу научиться сторителлингу 12 4 Хочу научиться сторителлингу 2 Как совместить информационный стиль и текст для поисковиков? 7