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

Давным-давно мы выпускали пилотный проект о стеке MEAN (Mongo, Express, Angular, Node), который нас в целом не разочаровал, однако, допечаток и обновлений мы в свое время решили не делать — в отличие от издательства Manning, которое эту книгу обновило. Тем не менее, мы продолжаем поиски в данном направлении и сегодня хотели бы поговорить с вами о родственном стеке MERN, где на клиенте располагается не Angular, а React. Слово предоставляется Тиму Смиту.

Методы итерирования массивов похожи на «стартовые наркотики» (это, конечно, не наркотики; и я не говорю, что наркотики — это хорошо; это — просто фигура речи). Из-за них многие «подсаживаются» на функциональное программирование. Всё дело в том, что они невероятно удобны. Кроме того, большинство этих методов очень просто понять. Методы наподобие .map() и .filter() принимают всего один аргумент-коллбэк и позволяют решать простые задачи. Но возникает такое ощущение, что метод .reduce() у многих вызывает определённые затруднения. Понять его немного сложнее.

Есть в графиках что-то магическое. Изгиб кривой мгновенно раскрывает всю ситуацию — историю развития эпидемии, паники или периода процветания. Эта линия просвещает, пробуждает воображение, убеждает.
― Генри. Д. Хаббард

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

Вряд ли кто-то станет отрицать, что в современном HTML5 вебе JavaScript — самая универсальная и простая технология для визуализации данных. Так что, если вы занимаетесь фронтенд-разработкой, то вы, скорее всего, либо уже имели дело с созданием JS чартов, либо столкнетесь с этим в (скором) будущем.

Существует множество JavaScript библиотек для построения графиков и диаграмм, каждая из которых (как и любые другие инструменты) имеет свои плюсы и минусы. Чтобы облегчить вам жизнь, я решил рассказать о тех из них, которые нравятся мне больше всего. Я считаю, десять следующих библиотек — это лучшие JS библиотеки для создания графиков, и они действительно способны помочь решить практически любую задачу по визуализации данных. Давайте вместе пройдемся по списку и убедимся, что они вам известны хотя бы базово и вы не упустили из виду какую-нибудь хорошую библиотеку, которая может оказаться полезной в текущих или будущих больших проектах.



Что ж, приступим: вот лучшие JS библиотеки для визуализации данных!

Эта статья является частью серии «Fileless Malware». Все остальные части серии:

• Приключения неуловимой малвари, часть I
• Приключения неуловимой малвари, часть II: cкрытные VBA-cкрипты (мы тут)

Я поклонник сайта гибридного анализа (hybrid analysis, далее HA). Это своего рода зоопарк вредоносов, где вы можете спокойно наблюдать за дикими «хищниками» c безопасного расстояния, не подвергаясь нападению. HA запускает вредоносное ПО в безопасных средах, записывает системные вызовы, создаваемые файлы и интернет-трафик, и выводит вам все эти результаты для каждого анализируемого образца. Таким образом, вы можете не тратить свое время и силы, самостоятельно разгадывая запутанный код, а сразу же понять все намерения хакеров.

Наверняка многие слышали про github pages и что там можно размещать статические сайты (сгенерировал и залил туда). Но ведь хотелось бы, чтобы при этом была динамика, то есть можно было бы один раз залить код и наполнять его как на заправдашной ЦМСке, да еще и авторизация была, динамически подгружаемые данные и все такое. Верно? Вот и мне такое захотелось. Заходите под кат, покажу, что у меня получилось.

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



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

Команда TestMace снова с вами. На этот раз мы публикуем перевод статьи о преобразовании кода TypeScript, используя возможности компилятора. Приятного чтения!

Введение

Это мой первый пост, и в нём мне бы хотелось показать решение одной задачи с помощью API компилятора TypeScript. Чтобы найти это самое решение, я долгое время копался в многочисленных блогах и переваривал ответы на StackOverflow, поэтому, чтобы уберечь вас от такой же участи, я поделюсь всем тем, что я узнал о таком мощном, но слабо документированном наборе инструментов.

Автор статьи, перевод которой мы сегодня публикуем, говорит, что сейчас можно наблюдать рост популярности таких сервисов аутентификации, как Google Firebase Authentication, AWS Cognito и Auth0. Индустриальным стандартом стали универсальные решения наподобие passport.js. Но, учитывая сложившуюся ситуацию, обычным явлением стало то, что разработчики никогда в полной мере не понимают того, какие именно механизмы принимают участие в работе систем аутентификации.

Этот материал посвящён проблеме организации аутентификации пользователей в среде Node.js. В нём на практическом примере рассмотрена организация регистрации пользователей в системе и организация их входа в систему. Здесь будут подняты такие вопросы, как работа с технологией JWT и имперсонация пользователей.



Кроме того, обратите внимание на этот GitHub-репозиторий, в котором содержится код Node.js-проекта, некоторые примеры из которого приведены в этой статье. Этот репозиторий вы можете использовать в качестве основы для собственных экспериментов.

Всем привет! Курс «Разработчик JavaScript» стартует уже в этот четверг. В связи с этим мы решили поделиться переводом еще одного интересного материала. Приятного прочтения.



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

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

Как и в других книгах серии «Вы не знаете JS», здесь показаны нетривиальные аспекты языка, от которых программисты JavaScript предпочитают держаться подальше (или полагают, что они не существуют). Вооружившись этими знаниями, вы достигнете истинного мастерства JavaScript.

Привет, Хабр! Я участвую в разработке ECM системы. И в небольшом цикле статей хочу поделится нашим опытом и историей разработки своего React Data Grid (далее просто грид), а именно:

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

Предыстория

У нашей системы есть веб-приложение, в котором пользователи работают со списками документов, результатами поисков, справочниками. Причем, списки могут быть как маленькие (10 сотрудников), так и очень большие (50 000 контрагентов). Для отображения этих списков мы разработали свой грид:

Как все начиналось...

Как всегда, зависая вконтакте, я решил скачать пару новых аудиозаписей на комп. Но меня ждало разочарование: аудиозаписи возвращались в каком-то странном формате: m3u8. Этот формат даже vlc media pleyer не воспроизводил, и я стал думать, что делать…

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

Наверняка многие слышали понятие MVP (Минимально жизнеспособный продукт вики). На хабре тоже много статей про MVP, но в основном это или просто описание что такое MVP и для чего оно, или различные success и не очень story. Но я не нашел ни одной статьи, где бы описывалось на чем кто свое это MVP делал. Но ведь считается, что блоги личные проще делать на одном движке, интернет-магазины на другом и т.п. (каждый подставит свое название любимого движка для этих целей). Но почему тогда не определен более удобный движок для MVP? Я не дам четкого ответа на этот вопрос, но поделюсь своими мыслями чем именно для создания MVP хороша моя Prisma CMS, о которой я писал здесь пару месяцев назад. Кому интересно, прошу под кат.

Сегодня я был изумлен тем, как обычно позитивное и дружелюбное сообщество Vue.js скатилось в печальное противостояние. Две недели назад создатель Vue Эван Ю опубликовал предложение (RFC) с новым функциональным API для компонентов в грядущем Vue 3.0. Сегодня критическое обсуждение на Reddit и аналогичные комментарии на Hacker News вызвали наплыв разработчиков в изначальный RFC с возмущениями, порой даже чересчур резкими.

Эту статью следовало бы назвать «генерирование комбинаций шестерен гитары китайского токарного станка для подбора шага подачи с помощью скрипта на JavaScript», но это звучит не так интригующе.

В конце мая прошла седьмая HolyJS — по нашему субъективному мнению, лучшая из всех. А теперь, когда уже собран и проанализирован весь фидбек, можно подвести итоги. Вот прошедшая конференция в числах:

• 900+ человек, 2 дня докладов, 3 потока
• 30 докладов, 2 воркшопа
• 36 спикеров
• 3 MC
• 10 lightning talks
• 3 BoF-сессии
• Конкурс «TCXX» при поддержке Daniel Ehrenberg (экс-председателя TC39)
• Премьера документального фильма про Ember.js
• Мероприятие-спутник Node.js Code+Learn (первое в своём роде в истории СНГ)

А под катом — обо всём этом подробнее.

Давайте немного поговорим о том, как мы обрабатываем ошибки. В JavaScript у нас есть встроенная функция языка для работы с исключениями. Проблемный код мы заключаем в конструкцию try...catch. Это позволяет прописать нормальный путь выполнения в разделе try, а затем разобраться со всеми исключениями в разделе catch. Неплохой вариант. Это позволяет сосредоточиться на текущей задаче, не думая о каждой возможной ошибке. Определённо лучше, чем засорять код бесконечными if.

Без try...catch трудно проверять результаты каждого вызова функции для неожиданных значений. Это полезная конструкция. Но у неё есть определённые проблемы. И это не единственный способ обрабатывать ошибки. В статье мы рассмотрим использование монады Either в качестве альтернативы try...catch.

Прежде чем продолжить, отмечу пару моментов. Статья предполагает, что вы уже знаете о композиции функций и каррировании. И предупреждение. Если вы раньше не сталкивались с монадами, они могут показаться действительно… странными. Работа с такими инструментами требует изменить мышление. Поначалу это бывает тяжело.

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

Я пишу это в основном для себя в будущем, чтобы у меня было куда сослаться, когда кто-нибудь спросит меня, почему я скептичен в отношении веб-компонентов и почему Svelte не компилируется в веб-компоненты по умолчанию. (Тем не менее, он может компилироваться в веб-компоненты, а так же интегрироваться с ними, что подтверждается превосходной оценкой на Custom Elements Everywhere).

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

Пишем код чище, используя паттерны деструктурирования

Вы, наверное, уже знакомы с деструктурированием в JavaScript. Оно пришло к нам в 2015 году в спецификации ES6, но если вам нужно освежить знания, то на сайте Mozilla можно почитать большую подробную статью, как это всё работает.

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

1. Именованные аргументы функции

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

def sum(a=1,b=2,c=3):
  return a+b+c

sum(b=5,a=10)

Видите? Порядок не важен, если вы явно указали имя параметра. Преимуществами по сравнению с позиционными аргументами является то, что:

1. Можно опустить один или несколько параметров при вызове функции
2. Порядок при передаче аргументов теперь не важен
3. Код стал читаемее 

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

function sum({a = 1, b = 2, c = 3}) {
  return a + b + c
}

sum({b: 10, a: 5}) // 5 + 10 + 3 = 18

Все цели достигнуты: можно не указывать c, порядок теперь не важен, и аргументы сопровождаются своими именами. Всё это возможно именно благодаря деструктурированию.