Сервисом Авито ежемесячно пользуется 32 миллиона человек. У нас публикуется более 400 тысяч новых объявлений в сутки, а обрабатывается 1,5 миллиона их различных версий. Чтобы контент на сайте был качественным и полезным пользователям, нужна модерация объявлений. И, конечно, у посетителей сайта должна быть возможность быстро решить любой возникший в процессе пользования Avito вопрос, обратившись в службу поддержки.

Разработка Авито ведётся в Москве, а сотрудники департамента клиентского сервиса и модерации работают в Санкт-Петербурге. Цель и тех, и других одна — делать использование сайта удобнее и проще для клиентов. Разработчики готовят новый функционал и развивают сервис, а сотрудники поддержки первыми узнают, если что-то идёт не так и принимают удар на себя. Иногда это ужасно тяжело. В этом посте я хочу рассказать о том, как мы в Авито синхронизируем работу команды разработки и службы поддержки и какие результаты это приносит.

Существует новое API JavaScript, предназначенное для организации асинхронного доступа к буферу обмена с использованием спецификации, которая всё ещё находится на этапе разработки. До сих пор в веб-разработке стандартным способом копирования текста в буфер обмена является подход, предусматривающий использование метода document.execCommand. Основной недостаток этого подхода заключается в том, что это — синхронная блокирующая операция. Асинхронное API для работы с буфером обмена основано на промисах, одной из его задач является устранение этого недостатка. Оно призвано дать веб-разработчикам более простое в использовании унифицированное API для работы с буфером обмена. Кроме того, это API спроектировано с учётом возможности поддержки множества типов данных, а не только text/plain.

Надо отметить, что сейчас новое API доступно только в Chrome 66+ и поддерживает лишь копирование и вставку обычного текста. Кроме того, работает оно только тогда, когда страница загружена по HTTPS или с localhost, и только в тех случаях, когда страница открыта в текущей активной вкладке браузера.

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

Неестественная анимация

Треть всех докладов на грядущем РИТ++ будет связана с клиентской разработкой, а это почти 40 штук. Естественно, они пойдут в два параллельных специализированных потоках, а наиболее применимые для широкой аудитории — в главном зале. И вот тут бы и пригодился маховик времени, но похоже, что вместо этого придется решать серьезную задачу максимизации полезности.

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

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

Свежая подборка со ссылками на новости и материалы. В выпуске: конференция PHP fwdays'18, объявлены релиз-менеджеры PHP 7.3, предложение из PHP Internals, видеозаписи с прошедших митапов, порция полезных инструментов, и многое другое.

Приятного чтения!

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Еще в начале года в компании Google сообщили, что с июля (когда выходит Chrome 68) все сайты, использующие HTTP, будут помечаться как небезопасные. В компании считают, что это позволит повысить конфиденциальность пользователей в сети.

Однако на этом работа ИТ-гиганта с HTTP не закончилась. В прошлом месяце стало известно, что Google дополнительно уменьшит «время жизни» cookies, полученных с применением незащищенного протокола, до одного года. Подробнее о ситуации расскажем далее.

В большинстве приложений, которые разрабатываются в наши дни, требуется взаимодействовать с некими наборами данных. Обработка элементов в коллекциях — это часто встречающаяся операция, с который вы, наверняка, сталкивались. При работе, например, с массивами, можно, не задумываясь, пользоваться обычным циклом for, который выглядит примерно так: for (var i=0; i < value.length; i++ ){}. Однако, лучше, всё-таки, смотреть на вещи шире.



Предположим, нам надо вывести список товаров, и, при необходимости, разбивать его на категории, фильтровать, выполнять по нему поиск, модифицировать этот список или его элементы. Возможно, требуется быстро выполнить некие вычисления, в которые будут вовлечены элементы списка. Скажем, надо что-то с чем-то сложить, что-то на что-то умножить. Можно ли найти в JavaScript такие средства, которые позволяют решать подобные задачи быстрее и удобнее, чем с использованием обычного цикла for?

На самом деле, такие средства в JavaScript имеются. Некоторые из них рассмотрены в материале, перевод которого мы представляем сегодня вашему вниманию. В частности, речь идёт об операторе расширения, о цикле for…of, и о методах includes(), some(), every(), filter(), map() и reduce(). Здесь мы, в основном, будем говорить о массивах, но рассматриваемые здесь методики обычно подходят и для работы с объектами других типов.

Насколько безопасным должно быть приложение? Для кого-то этот вопрос не имеет смысла. "Настолько, насколько это возможно. Чем безопасней, тем лучше". Но это не исчерпывающий ответ. И он не помогает сформировать security политику в проекте. Более того, если придерживаться только этой директивы ("чем больше security, тем лучше"), мы можем оказать медвежью услугу самим себе. Почему? Ответ под катом.

В июле 2017 года в Node.js 8 появилась реализация HTTP/2. С тех пор она прошла через несколько этапов улучшений, и теперь в Node.js Foundation говорят о том, что они почти готовы к тому, чтобы вывести поддержку HTTP/2 из разряда экспериментальных возможностей. Если вы хотите испытать HTTP/2 в среде Node.js, лучше всего это сделать, воспользовавшись Node.js 9 — здесь имеются все самые свежие исправления ошибок и улучшения.

Материал, перевод которого мы сегодня публикуем, посвящён работе с HTTP/2, и, в частности, с Server Push, в Node.js.

WebRTC — это JavaScript API в современных браузерах для видеозвонков. А еще для голосовых звонков, шаринга экрана, пробития NAT, раскрытия локального адреса и других интересных штук. В последние пару лет крупные игроки начинают переходить с пропиетарных API и расширений браузеров на WebRTC: с его помощью работает Skype for Web, частично — Hangouts, а теперь и возможности YouTube по броадкасту прямо из браузера. Пока только из хрома и с пятисекундной задержкой — но велика беда начало. Под катом мы предлагаем адаптированный для Хабра перевод детективной истории, где эксперты по WebRTC разбирают код клиентской части YouTube и рассказывают нам что и как сделали разработчики из Гугла.

Всем привет!

В данный момент, как многие знают, проходит ежегодная конференция Google I/O, в рамках которой была представлена новая версия библиотеки для работы с интерфейсами веб-приложений Polymer 3.0 (видео на английском):

Привет, Хабр. Мы недавно перевели на арабский язык 2ГИС Онлайн, и хотим поделиться своим опытом адаптации интерфейса под RTL (right-to-left). Это будет актуально и для иврита, и для персидского языка.

Я разделю этот опыт на две статьи — теоретическую и практическую. Сегодня — больше про теорию. Я расскажу, зачем нам понадобилось переворачивать весь интерфейс, что для разработчика интерфейсов значит фраза «сделать арабскую версию» и как справиться с арабским языком, смешанным с английским. Особое внимание уделю алгоритму, по которому строится отображение текста смешанной направленности — unicode bidirectional algorithm.

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

Service Workes как технология для создания offline приложений очень хорошо подходит для кэширования различных ресурсов. Разнообразные тактики работы в сервис воркере с локальным кэшем подробно описаны в Интернете.

Не описано одного — каким образом обновлять файлы в кэше. Единственное, что предлагает Google и MDN, это делать несколько кэшей для разных типов ресурсов, и, когда нужно, изменять в скрипте сервис воркера sw.js версию этого кэша, после чего тот весь удалится.

Привет, Хабр!

19 мая приглашаем на третий Badoo Techleads Meetup для лидов, руководителей отделов и СТО.

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

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

Адрес: Цветной бульвар, 2 (м.Трубная)
Начало докладов в 11:30
Трансляция будет на нашем YouTube-канале и в группах VK и FB. Записи опубликуем там же и на Хабре.

Программа

Одно из важнейших условий для продуктивной работы веб-программиста — хорошо настроенный редактор кода. Один из них — опенсорсный универсальный редактор Visual Studio Code, который замечателен не только тем, что он бесплатен, но и тем, как много полезного он умеет сразу после установки и минимальной настройки. Если речь идёт о том, чтобы использовать VS Code в какой-то конкретной сфере, вроде разработки на JavaScript, обычно стоит дополнить его несколькими расширениями, которые повышают производительность труда и упрощают жизнь программиста. Вокруг VS Code сложилось активное сообщество разработчиков расширений. Эти расширения легко искать и ещё легче устанавливать.



В материале, перевод которого мы сегодня публикуем, речь пойдёт о расширениях для VS Code, которые пригодятся тем, кто пишет на JS. Тут стоит отметить, что в деле выбора расширений для VS Code немалую роль играют личные предпочтения программиста. В результате можно сказать, что расширения, о которых пойдёт здесь речь, не являются абсолютно необходимыми. Не стоит рассматривать их как нечто, что обязательно нужно устанавливать и использовать. Обзавестись тем или иным расширением стоит лишь в том случае, если вам оно понравилось, и вы полагаете, что вам оно точно пригодится.

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


В основе статьи расшифровка выступления Виталия Фридмана из Smashing Magazine на декабрьской конференции Holy JS 2017 Moscow.

Последний год я использую Figma. Скорее всего Вы уже о ней слышали. В этой статье я опишу недостатки и преимущества, опираясь на личные наблюдения. Всё сказанное будет носить субъективный характер. Я начал пользоваться Figma еще в тот момент, когда логика работы с компонентами была очень сырой. За год почти незаметно происходила эволюция. Сегодня элементы внутри компонента взаимодействуют между собой более логично и упорядоченно. Тем не менее, недостатки все еще есть…