
JavaScript *
Прототипно-ориентированный язык программирования
jsqry — лучше, чем jq
В своей прошлой статье на Хабре я писал про библиотеку Jsqry, которая предоставляет простой и удобный язык запросов (DSL) к объектам JSON. С тех пор прошло много времени и библиотека тоже получила свое развитие. Отдельный повод для гордости — библиотека имеет 98% покрытие кода тестами. Однако в этой статье речь не совсем о ней.
Думаю, многие из вас знакомы с инструментом jq, который является практически стандартом де-факто для работы с JSON в командной строке и скриптах. Я тоже являлся её активным пользователем. Но меня все время беспокоила неоправданная сложность и неинтуитивность синтаксиса запросов этой утилиты. И не меня одного, вот лишь несколько цитат с hacker news:
I have been using jq for years and still can't get it to work quite how I would expect it to.
I have the same issue with jq. I need to use my google fu to figure out how to do anything more than a simple select.
I don't know what the term would be, mental model, but I just can't get jq to click. Mostly because i only need it every once in a while. It's frustrating for me because it seems quite powerful.
I know I might be a dissenting opinion here, but I can never wrap my head aroundjq. I can managejq .,jq .fooandjq -r, but beyond that, the DSL is just opaque to me.
Let's just say it: jq is an amazing tool, but the DSL is just bad.
Yeah, I find jq similar to writing regexes: I always have to look up the syntax, only get it working after some confusion why my patterns aren't matching, then forget it all in a few days so have to relearn it again later.
Одним словом, вы уже наверное догадались. Пришла идея, а почему бы не обратить мою JS библиотеку в исполняемый файл для командной строки.
Javascript: исходный код и его отображение при отладке
Программисты делятся на две категории: те, которые используют отладчик при разработке, и те, которые обходятся без него. В этом посте я попытался обобщить, какие типы сущностей можно выявить в исходном коде JS-программы, и как эти типы выглядят под отладчиком. JS-программисты из первой категории могут дополнить, если я упустил какой-либо тип сущностей, а JS-программисты из второй категории могут посмотреть на то, чего, возможно, никогда не видели.
Примеры использования наблюдателей в JavaScript

Наблюдатель (observer) — это объект, который следит за состоянием определенного элемента и регистрирует происходящие в нем изменения. Элемент, который находится под наблюдением (чуть не написал «за которым организована слежка»), называется целевым. Наблюдатель может следить за состоянием как одного, так и нескольких элементов, а в некоторых случаях также и за потомками целевого элемента.
В JavaScript существует три основных вида наблюдателей:
- ResizeObserver
- IntersectionObserver
- MutationObserver
В данной статье я предлагаю сосредоточиться на практической реализации каждого наблюдателя.
Создание микросервисной архитектуры с использованием single-spa (миграция существующего проекта)

Это первая статья по в данной теме, всего их планируется 3:
- * Создание root application из вашего существующего проекта, добавление в него 3 микро-приложения (vue, react, angular)
- Общение между микро-приложениями
- Работа с git (deploy, обновления)
Оглавление
- Общая часть
- Зачем это нужно
- Создание root контейнера (определение см. ниже) из вашего монолита
- Создаем микро-приложение VUE (vue-app)
- Создаем микро-приложение REACT (react-app)
- Создаем микро-приложение ANGULAR (angular-app)
1. Общая часть
Задача этой статьи: добавить возможность использовать существующий монолитный проект как root контейнер для микросервисной архитектуры.
Визуализация изменения климата при помощи интерактивного генеративного искусства

Все знакомы с сайтами прогноза погоды, которые используют иконки климатических явлений, просто и удобно передающие нынешнюю или будущую погоду. Однако иконки не могут передать динамические свойства погоды, вроде ветра.
И поэтому мы подумали о создании «живого окна», которое показывает погоду и её изменение. Мы решили создать веб-приложение, которое будет показывать нынешние погодные условия, используя природный ландшафт, созданный путём вычислений, но в то же время эстетично. Другими словами, при помощи генеративного искусства.
Какой тип числа у Number в JS?

Если вы изучали языки со строгой типизацией, то должны понимать, что определённое значение должно храниться в памяти с заранее выделенным для неё количеством байт. Например, для числа int выделяется 4 байта, что равняется 32 битам и может содержать в себе 2³² значений, это значит мы можем выразить в десятичной системе исчисления от -2 147 483 647 до 2 147 483 647. Какой же тип числа используется в JS?
Как привести проект в чувство

Представьте ситуацию, вы первый день на новом для вас проекте, с чего будете начинать? Опишите свои шаги.
Так звучит один из популярных вопросов на собеседовании для фронтенд-разработчиков. Я не знаю, что хочет услышать человек, задающий этот вопрос, но у меня есть ответ на его техническую составляющую и бэклог на несколько месяцев вперед.
Давайте сделаем переиспользуемый компонент tree view в Angular

Я разрабатываю несколько Angular-библиотек, поэтому люблю делать простые и легко переиспользуемые решения для разработчиков. Недавно один из подписчиков в Твиттере спросил меня, как сделать компонент, который выводил бы его данные в виде иерархического дерева — tree view.
Я люблю подобные задачи, потому что они дают возможность покрыть много различных юзкейсов с минимальным количеством логики внутри. В этой статье опишу, как я размышляю, когда решаю подобные задачи.
Дисклеймер: эта статья-туториал рассчитана на аудиторию изучающих Angular. Если вы понимаете, как сделать рекурсивный тип, рекурсивный компонент и преобразовать в нем данные, переданные функцией-обработчиком, можете ее пропустить.
Браузер и числа с плавающей запятой

Изображение — www.freepik.com
Несколько лет назад я много думал и писал о математике с плавающей запятой. Это было очень интересно, и в процессе исследований я многое узнал, но иногда я долгое время не использую на практике все эти полученные тяжким трудом знания. Поэтому мне необыкновенно приятно каждый раз, когда приходится работать над багом, требующим различных специализированных знаний. В статье я расскажу три истории о багах чисел с плавающей запятой, изученных мной в Chromium.
Часть 1: нереальные ожидания
Баг назывался «JSON некорректно парсит 64-битные Integer»; поначалу это непохоже на проблему с плавающей запятой или браузером, но его отправили на crbug.com, поэтому меня попросили взглянуть. Проще всего воссоздать его, открыв инструменты разработчика Chrome (F12 или Ctrl+Shift+I) и вставив в консоль разработчика следующий код:
json = JSON.parse(‘{“x”: 2940078943461317278}’); alert(json[‘x’]);Вставка неизвестного кода в окно консоли — замечательный способ оказаться взломанным, но этот код был настолько прост, я смог понять, что он не вредоносный. В отчёте о баге автор любезно указал свои ожидания и реальные результаты:
Разбор вступительных задач Школы Программистов hh.ru
Приглашаем посмотреть задания, которые мы использовали для онлайн-этапа отбора, а также решения для них.

Дайджест свежих материалов из мира фронтенда за последнюю неделю №438 (19 — 25 октября 2020)

DagazServer: Как всё устроено

Ближайшие события
Проверка дочерних элементов передаваемых в мок React компонента

В преддверии старта курса «Автоматизация тестирования на JavaScript» продолжаем публиковать перевод серии полезных статей.
Это третья часть из серии о тестировании с React. В прошлой части мы рассмотрели базовый формат моков React компонентов.
Еще одна вещь, которую вы можете сделать с помощью моков, - это проверить, правильные ли дочерние элементы были переданы. Вот собственно на это мы сейчас и посмотрим.
Как генерировать запросы с постоянной частотой в k6 с новым API сценариев?

Введение
Релиз v0.27.0 принес нам новый механизм выполнения и множество новых исполнителей, которые нацелены удовлетворить ваши конкретные требования. Он также включает новое API сценариев с множеством различных опций для настройки и моделирования нагрузки на тестируемую систему (system under test — SUT). Это результат полутора лет работы над печально известным #1007 пул реквестом.
Для генерации запросов с постоянной скоростью мы можем использовать
constant-arrival-rate исполнителя. Этот исполнитель запускает тест с итерациями с фиксированной частотой в течение указанного времени. Это позволяет k6 динамически изменять количество активных виртуальных пользователей (virtual users — VU) во время выполнения теста с целью достижения указанного количества итераций за единицу времени. В этой статье я собираюсь объяснить, как использовать этот сценарий для генерации запросов с постоянной частотой.Как реализовать динамическую диаграмму для Vue на основе SVG

Базовый формат моков React компонентов

В преддверии старта курса «Автоматизация тестирования на JavaScript» продолжаем публиковать перевод серии полезных статей
В первой части этой серии статей мы рассмотрели, почему моки на самом деле полезны.
В этой части я расскажу о базовом формате маков React компонентов.
Настройка Webpack 5 с нуля

Узнайте, как использовать вебпак для сборки JavaScript, изображений, шрифтов и стилей, а также как запускать сервер для разработки
Если вы раньше использовали вебпак 4, вот некоторые отличия от 5 версии:
- команда «webpack-dev-server» теперь выглядит как «webpack-serve»
- отдельная установка file-loader, raw-loader и url-loader больше не требуется, вы можете использовать встроенные загрузчики ресурсов (asset modules)
- полифилы для Node.js больше не поддерживаются, поэтому если, например, вы получили ошибку для stream, необходимо добавить пакет «stream-browserify» в качестве зависимости и { stream: «stream-browserify» } в качестве алиаса в настройки вебпака
Что такое вебпак?
По большей части, сайты больше не пишутся на чистом HTML с небольшим количеством JavaScript — часто они создаются только с помощью JavaScript. Поэтому возникает необходимость в сборке, минификации и транспиляции кода. Вот где вебпак приходит на помощь.
Вебпак — это сборщик модулей. Он служит для упаковки кода для использования браузером. Он позволяет использовать последние возможности JavaScript с помощью Babel или использовать TypeScript и компилировать его в кроссбраузерный минифицированный код. Он также позволяет импортировать статические ресурсы в JavaScript.
Для разработчиков вебпак также предоставляет сервер для разработки, который умеет обновлять модули и стили на лету при сохранении файла. Инструменты командной строки, такие как «vue create» и «react-create-app» используют вебпак за сценой, но вы легко можете создать собственную настройку вебпака для указанных фреймворков.
Вебпак также умеет делать много других вещей, но данная статья посвящена основам его настройки и использования.
TypeScript для бэкенд-разработки
Использование «глобального» await в JavaScript

Новая возможность, которая может изменить наш подход к написанию кода
JavaScript — очень гибкий и мощный язык, который определяет развитие современного веба. Одна из основных причин главенства JavaScript в сфере веб-разработки заключается в его стремительном развитии и постоянном совершенствовании.
Одним из предложений по улучшению JavaScript является предложение под названием «top-level await» (await верхнего уровня, «глобальный» await). Цель данного предложения состоит в превращении ES модулей в некое подобие асинхронных функций. Это позволит модулям получать готовые к использованию ресурсы и блокировать модули, импортирующие их. Модули, которые импортируют ожидаемые ресурсы, смогут запускать выполнение кода только после получения ресурсов и их предварительной подготовки к использованию.
Указанное предложение в настоящее время находится на 3 стадии рассмотрения, поэтому данную возможность пока нельзя использовать в продакшне. Однако можно быть уверенным в том, что в ближайшем будущем она непременно будет реализована.
Не переживайте из-за этого. Продолжайте читать. Я покажу, как можно использовать названную фичу уже сейчас.