JavaScript *

Счастье для всех, даром
и пусть никто не уйдёт обиженный! 
 
А. и Б. Стругацкие «Пикник на обочине» 
          

Боты, как бы хорошо они не играли, плохая замена живым игрокам. Если бот играет слабо — это не интересно. Если сильно — это обидно и снова не интересно. Баланс соблюсти чертовски трудно (тем более, что для каждого игрока он индивидуальный). Я уже давно собирался реализовать сетевую игру, но всё упиралось в необходимость содержания собственного сервера. К счастью, решение пришло с неожиданной стороны.

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

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

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

Так сложилось, что вот уже который год мне приходится заниматься технической поддержкой хостинга, а также поддержкой сайтов, к которым я имею довольно косвенное отношение. А так как администраторы довольно часто сталкиваются с разного рода атаками на свои сайты, не имея при этом возможности нанять специалиста, мне пришло в голову придумать единое и универсальное решение для всех сайтов, которое бы помогло им защитить свой сайт без особых усилий. И хотя в нем есть еще немало минусов и нюансов, которые мне пока не удалось решить, тем не менее это единственное на данный момент решение, которое позволяет обезопасить сайт изнутри, не обращаясь к разного рода плагинам и модулям, которые нужно устанавливать извне и которое даже малоопытный разработчик сайтов способен установить и настроить у себя на сайте. Суть данного решения заключается в том, чтобы обработать данные переданные методами GET, POST и/или COOKIE, еще до момента обработки и записи их самих непосредственно в базу данных.

В этой статье я приведу примеры использования и недостатки того или иного метода.

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



Автор статьи, перевод которой мы сегодня публикуем, работает в Wix. Он хочет рассказать о том, как смог уменьшить размер одного бандла примерно на 80%, используя Webpack Analyzer и React Lazy/Suspense.

Пять лет назад на Хабре была опубликована статья «Печать и воспроизведение звука на бумаге» — о системе создания и проигрывания спектрограмм. Затем, полтора года назад Meklon опубликовал квест, в котором такая чёрно-белая логарифмическая спектрограмма стала одним из этапов. По авторскому замыслу, её надо было распечатать на принтере, отсканировать смартфоном с приложением-проигрывателем, и воспользоваться таким образом «надиктованным» паролем.


У меня в тот момент не было в досягаемости ни принтера, ни смартфона, так что меня заинтересовали два аспекта задачи:

1. Как проще всего расшифровать спектрограмму без дополнительных устройств и без дополнительного софта — желательно, прямо в браузере?
2. Можно ли её расшифровать вообще без софта — «на глаз»?

На FrontendConf в этом году будет выступать Leonie Watson — евангелист доступности, и Andy Bell — широко известный в мировом фронтенд-сообществе автор электронной книги «Every Layout». Выступление Leonie будет нестандартным и технически сложным, когда зрение участников будет не самым важным чувством. Andy и Leonie пригласил Павел Ловцевич. Он организует конференции в Минске, приглашает иностранных спикеров на свои конференции и к нам на FrontendConf, курирует доклады и все это, не считая работы техническим директором.



Накануне FrontendConf мы поговорили с Павлом о его роли в программном комитете конференции, о приглашении иностранных докладчиков, доступности, CSS и Grid Layout, usability презентаций, неочевидных мелочах, особенностях работы куратора, а в конце — почему вообще важно посещать конференции.

Моё имя Азат Разетдинов, я в Яндексе уже 12 лет, руковожу службой разработки интерфейсов в Я.Недвижимости. Сегодня я хотел бы поговорить про монорепозиторий. Если у вас всего один репозиторий в работе — поздравляю, вы уже живете в монорепозитории. Теперь о том, зачем он нужен другим.

Как сказала руководитель службы разработки API Яндекс.Карт Марина Перескокова — посадил дед монорепу, выросла монорепа большая-пребольшая.

Disclaimer: да, в понедельник мы опубликовали хабрапост с именно таким сравнением языков. Нет, мы не сошли с ума. Всё идёт по плану.

Виталий Брагилевский совмещает в себе знания о теоретической информатике и актуальную программистскую практику. Он преподает дисциплины, связанные с теоретической информатикой, является членом комитета по стандартизации Haskell и входит в наблюдательный комитет по разработке Haskell-компилятора GHC. 

Эта хабрастатья — большое интервью с Виталием на следующие темы: 

• Преподавание и знакомство с JavaScript;
  
• Зачем выбирать Haskell;
  
• Место функциональных языков в жизни программиста;
  
• Чего хорошего в JavaScript и как он развивается;
  
• Что появится в языках программирования в ближайшие 10-15 лет;
  
• Какие языки программирования вызывают доверие и почему;
  
• В чем разница между научными конференциями и конференциями для разработчиков. Зачем преподавателю вообще на них ходить;
  
• Важно ли читать программисту, устаревают ли книги и какие из них must read.
  

Интервью ведут члены Программного комитета конференции HolyJS 2019 Moscow, Алексей Золотых и Артём Кобзарь. Если интервью вам недостаточно, то уже совсем скоро, на следующей HolyJS, Виталий расскажет и покажет на примерах, как связать JavaScript с теорией алгоритмов. 

Moment.js — это одна из самых популярных JavaScript-библиотек для разбора и форматирования дат. В компании WhereTo используют Node.js, поэтому для них применение этой библиотеки было совершенно естественным ходом. Проблем с серверным использованием Moment.js не ожидалось. В конце концов, они с самого начала использовали эту библиотеку во фронтенде для вывода дат и были довольны её работой. Однако то, что библиотека хорошо показала себя на клиенте, ещё не означало, что и на сервере с ней проблем не будет.



Материал, перевод которого мы публикуем сегодня, посвящён рассказу решении проблемы с производительностью Moment.js.

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

За полным списком новых полезных инструментов, статей и докладов можно обратиться в мой телеграм канал @OpensourceFindings (по ссылке зеркало, если не открывается оригинал).

В сегодняшнем выпуске.
Технологии внутри: Python, C, Rust, Ruby, JavaScript, Go.
Тематика: веб разработка, администрирование, инструменты разработчика.

Прошлый выпуск.

При разработке приложений «фронтендеры» редко обращают внимание на то, как пользователь будет использовать предоставляемые браузером функции клавиш. Я не являюсь исключением, но в один день мне была дана задача касаемо UX и переходов с помощью нажатия «Tab» и «Shift + Tab».

Суть задачи прозрачна и чиста: есть интерфейс, макет которого отображен ниже. Концептуально 1 страница может содержать 2 различные формы и требованием было условие, чтобы «бегание „Tab`ами“ не переходило с 1 формы на другую».

Голосовые помощники — не далёкое будущее, а реальная действительность. Alexa, Siri, Google Now, Алиса встроены в «умные» колонки, часы и телефоны. Они постепенно меняют наш способ взаимодействия с приложениями и устройствами. Через ассистента можно узнать прогноз погоды, купить билеты на самолет, заказать такси, послушать музыку и включить чайник на кухне, лежа на диване в другой комнате.



Siri или Alexa говорят с пользователями в основном по-английски, поэтому в России они не так популярны, как Алиса от Яндекса. Для разработчиков Алиса тоже удобнее: её создатели ведут блог, выкладывают удобные инструменты на GitHub и помогают встраивать ассистента в новые устройства.

Никита Дубко (@dark_mefody в Твиттере) — разработчик интерфейсов в Яндекс, организатор митапов MinskCSS и MinskJS и редактор новостей в Web-стандартах. Никита не работает в Яндекс.Диалогах и никак не связан с Яндекс.Алисой. Но ему было интересно разобраться, как Алиса работает, поэтому он попробовал применить её навыки для Web и подготовил об этом доклад на FrontendConf РИТ++. В расшифровке доклада Никиты рассмотрим, что полезного могут принести голосовые помощники и построим навык прямо в процессе чтения этого материала.

Сегодня мы представляем вашему вниманию перевод второго материала из серии, посвящённой оптимизации instagram.com. Здесь речь пойдёт об улучшении механизма заблаговременного выполнения GraphQL-запросов и о повышении эффективности передачи HTML-данных клиенту.



→ Читать, затаив дыхание, первую часть

Вот вы сделали что-то новое и крутое, приходит мысль — выложить в опенсорс и опубликовать в npm.

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

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

На самом деле всё это может занять у вас меньше часа. Без знаний DevOps и совершенно бесплатно.

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

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



Сущность void имеется также в JavaScript и TypeScript. В JS это — оператор. В TS это примитивный тип данных. И там и там void ведёт себя не так, как могли бы ожидать многие из тех, кто сталкивался с void в других языках.

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

Данный пост является ответом на вчерашнюю статью «Боль и слёзы в Svelte 3» и появился как следствие сильно «располневшего» комментария к оригинальной статье, который я решил оформить в виде поста. Ниже я буду использовать слово автор для отсылки к автору оригинальной статьи и позволю себе сделать некоторые уточнения по всем пунктам. Поехали!

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

Всем привет!

В этой заметке я хотел бы поделиться своим подходом к организации и тестированию кода с использованием Redux Thunk в проекте на React.

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