JavaScript *

Вместо предисловия

Vue используется во всех проектах FunCorp. Мы внимательно следим за развитием фреймворка, постоянно улучшаем процесс разработки и внедряем лучшие практики. И, конечно же, мы не могли пройти мимо и не перевести статью Филиппа Раковски, сооснователя VueStorefront, про новые фичи Vue 3, серьёзно влияющие на написание кода.


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

Уверен, что заголовок вызвал здоровую реакцию — “ну опять началось…” Но позвольте завладеть вашим вниманием на 5-10 минут, и я постараюсь не обмануть ожидания.

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

Для того, чтобы была ясность в том, что такое RPC, предлагаю рассматривать стандарт JSON-RPC 2.0. C REST ясности нет. И не должно быть. Все, что нужно знать о REST — он неотличим от HTTP.

Возможность встраивать поиск по товарам (бета) от Яндекса появилась ещё летом 2016. Информации по интеграции его функционала на сайт в интернете еще мало. Исправляю…

Немного статистики для сайта с каталогом товаров: 78% посетителей сайта заходят в «каталог с товарами», 45% из них воспользуются поиском по категориям в меню, 40% воспользуются поисковой строкой при поиске товара. Статистика взята из метрики Яндекс для гипермаркета «Домострой» (23 магазина в УФО по 35 000 — 40 000 товаров, 7 — 8 тыс.кв.м. каждый). На этом же сайте установил и протестировал возможности поиска от Яндекса (бета).

Сравнение поиска по товарам от Яндекса с поиском самых посещаемых магазинов товаров для дома и ремонта

На рисунке далее: Сайт 1 = domostroy-shop.ru с поиском Яндекс (бета) для интернет-магазинов. Сайты 2-9 из ТОП 15 рейтинга radar.yandex.ru (Тематика: строительные материалы и оборудование, тип: все).



Помимо релевантности поиск не должен замедлять скорость загрузки сайта:

Мы в Mail.ru Group вкладываем много сил в развитие продуктов компании Atlassian и, в частности, Jira. Благодаря нашим усилиям свет увидели плагины MyGroovy, JsIncluder, My Calendar, My ToDo и другие. Все эти плагины мы развиваем и активно используем внутри компании.

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

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

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

Меня зовут Валерий Шавель, я из команды разработки векторного движка Яндекс.Карт. Недавно мы внедряли в движок технологию WebAssembly. Ниже я расскажу, почему мы её выбрали, какие результаты получили и как вы можете использовать эту технологию в своём проекте.

Когда я только начинал работать с Express и пытался разобраться с тем, как обрабатывать ошибки, мне пришлось нелегко. Возникало такое ощущение, будто никто не писал о том, что мне было нужно. В итоге мне пришлось самому искать ответы на мои вопросы. Сегодня я хочу рассказать всё, что знаю об обработке ошибок в Express-приложениях. Начнём с синхронных ошибок.

Как сделать падение мягким?

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

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

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

Привет, Хабр! Представляю вашему вниманию перевод статьи “Array.splice and Array.slice in JavaScript” автора Kunal Tandon.

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

TL;DR. В большинстве категорий теперь выделяются явные лидеры — несколько лет назад такого не было. Это помогает накоплению знаний. Поэтому Навыки владения инструментами в среднем становятся глубже у разработчиков всех уровней.

В этом году 3005 разработчиков ответили на 27 вопросов, охватывающих широкий спектр инструментов и методологий фронтенд-разработки. Как всегда, огромная благодарность всем, кто нашёл время заполнить опросник. Со своей стороны, прошу прощения за задержку с публикацией результатов: в этом году работать было непросто из-за рождения малышки.

Как всегда, очень интересно посмотреть на изменения инструментов фронтенда за последние 12 месяцев и как меняются мнения разработчиков в отрасли. Эти результаты (надеюсь) помогут получить представление о текущих тенденциях и уровне освоения инструментов, а также об изменениях во времени, сравнив с цифрами из предыдущих опросов.

Результаты

Итак, к делу! Возьмите чай/кофе/напиток на свой выбор и посмотрим на результаты…

1. Material components web

Если использовать в заголовке слово «Material», то это гарантированно даст первые места в рейтингах UI-библиотек. Веб-библиотека Google Material-components — это версия веб-компонента библиотеки Material-UI. Эти веб-компоненты можно включить в широкий спектр контекстов и сред.

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

Сегодня в программе: Куда еще можно применить Google Apps Script, если закончились нормальные идеи. Автоматизация работы с VPNBook через цепочку скриптов на разных языках, которые я не знаю. Недо-cURL от Mikrotik. Telegram через одно место, чтобы не оказаться в другом, самкомнадзор разрешает.

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

Сегодня мы продолжим наши изыскания на тему функционального программирования в разрезе EcmaScript, на спецификации которого основан JavaScript. В предыдущей статье мы разобрали основные понятия: чистые функции, лямбды, концепцию имутабельности. Сегодня поговорим о чуть более сложных техниках ФП: композиции, каррировании и чистых функциях. Статья написана в стиле «псевдо кодревью», т.е. мы будем решать практическую задачу, одновременно изучая концепции ФП и рефакторя код для приближения последнего к идеалам ФП.

Итак, начнём!

Предположим, перед нами стоит задача: создать набор инструментов для работы с палиндромами.

ПАЛИНДРО́М
Мужской родСПЕЦИАЛЬНОЕ
Слово или фраза, которые одинаково читаются слева направо и справа налево.
«П. «Я иду с мечем судия»»

Одна из возможных реализаций данной задачи могла бы выглядеть так:

function getPalindrom (str) {
  const regexp = /[\.,\/#!$%\^&\*;:{}=\-_`~()?\s]/g;
  str = str.replace(regexp, '').toLowerCase().split('').reverse().join('');
  //далее какой-то аякс запрос в словарь или к логике, которая генерирует фразы по переданным буквам

  return str;
}

function isPalindrom (str) {
  const regexp = /[\.,\/#!$%\^&\*;:{}=\-_`~()?\s]/g;
  str = str.replace(regexp, '').toLowerCase();
  return str === str.split('').reverse().join('');
}

Эта статья основана на моём выступлении на конференции ITSubbotnik, прошедшем 2 ноября 2019 года в Москве.

Вообще я бэкенд программист, но меня заинтересовала эта технология, она позволяет использовать мои знания бэкенда на фронте.

Проблема

Начнём с проблемы, которая решается этой (относительно новой) технологией. Проблема эта — быстро исполнять код в браузере. Быстро — это значит, «быстрее чем JavaScript», в идеале настолько быстро, насколько позволяет имеющийся у нас процессор.

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

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



В чём же дело? А дело в том, что я, создавая проект, тестировал его в Chrome. Но пользователи этого проекта постоянно применяют Firefox и IE. Работа с моим приложением не стала исключением. Мне, в итоге, было совсем невесело от того, что проект, запущенный пару дней назад, надо было дорабатывать.

Собственно говоря, тут мне на помощь и пришли полифиллы.

Маркетолог в Otzyvmarketing Станислав Романов рассказал, как с помощью диспетчера тегов Google Tag Manager (GTM) настроить аналитику и отслеживать скачивание файлов с сайта. Статья для тех, кто знает основы языка JavaScript и уже работал с GTM. 

Здравствуй, Хабр!

Хочу поделиться ещё одним способом создания css-перехода (transition) свойства height от 0px до auto.

Столкнулся с данной проблемой при разработке веб-компонентов TreeView и DataGrid. В TreeView решил сделать плавное развёртывание/свёртывание узлов, а в DataGrid — строки с дополнительным контентом. Почитав интернет, нашёл несколько способов реализации, основные — через свойство max-height и на javascript. Реализация на javascript была исключена — есть же css с поддержкой переходов и анимаций. Остался max-height, тем более в примерах с выпадающими меню всё работает.

В августе этого года на свет появилась новая профессия. А все потому, что Facebook вывел из бета версии Spark AR — платформу для создания масок для Instagram и Facebook. Так получилось, что я оказался в водовороте процесса становления этой профессии и сам стал AR-креатором. В статье расскажу о ценах на маски и самых ярких историях успеха креаторов.