Группировка элементов массива с помощью groupBy

На последней встрече TC39 пропозал groupBy перешёл на stage 3. Лаури Барт рассказала о том, как он работает — "Array Grouping Explainer".

Группировка элементов массива распространённая операция. Она поддерживается всеми популярными утилитарными библиотеками (lodash, ramda). Пропозал реализует похожий алгоритм из этих библиотек. Метод groupBy принимает коллбек, в параметрах которого передаются текущий элемент, текущий индекс и сам массив. Элементы массива разбиваются на группы на основе строки, которая возвращается коллбеком. В результате получается объект с распределёнными элементами массива:

const names = ['vasya', 'vasilisa', 'oleg'];
const groupedNames = names.groupBy(name => {
 return name.charAt(0);
}
// результат:
// {v: ['vasya', 'vasilisa'], o: ['oleg']}

Также в пропозале есть второй метод groupByToMap, который работает точно также как groupBy, но возвращает не объект, а Map.

#js #proposal

https://laurieontech.com/posts/array-grouping/

Возможно, вам не нужен Rust и WASM, если у вас есть JavaScript

Увидел в канале @ufostation ссылку на статью Вячеслава Егорова про анализ проблем производительности библиотеки source-map — "Maybe you don't need Rust and WASM to speed up your JS".

Авторы source-map переписали основную логику библиотеки на Rust и WebAssembly, чтобы улучшить производительность. Егор решил проверить оригинальный код на предмет возможных оптимизаций. Там были найдены и исправлены проблемы, связанные с неоптимальной сортировкой, была уменьшена нагрузка на сборщик мусора заменой большого числа объектов типизированным массивом с ссылками на нужные данные, была испралвена проблема с деоптимизацией кода, связанной с передачей двух аргументов в функцию, которая ожидает на вход три аргумента.

В результате всех оптимизаций JavaScript-код стал уступать по скорости Rust и WebAssembly всего лишь на 15%.

Крутая статья. Рекомендую почитать всем.

#performance #js #internals #webassembly #rust

https://mrale.ph/blog/2018/02/03/maybe-you-dont-need-rust-to-speed-up-your-js.html
https://habr.com/ru/post/350018/ (перевод на русский)

Пропозал "await.ops"

Недавно узнал про пропозал "await.ops" — расширение await операторами await.all, await.any, await.race и await.allSettled. Они работают точно также как одноимённые методы у Promise.

Благодаря новым операторам в код получается немного короче, так как отпадает необходимость в написании Promise:

// до
await Promise.all(users.map(async x => fetchProfile(x.id)))

// после
await.all users.map(async x => fetchProfile(x.id))

На данный момент "await.ops" находится на Stage 1, и его поддержки в браузерах нет. Авторы ищут дополнительные сценарии использования предложения для продвижения на Stage 2.

#js #proposal

https://github.com/tc39/proposal-await.ops

Абсолютные импорты в JavaScript

Евгений Карагодин написал статью про настройку абсолютных импортов — "Абсолютные импорты в JavaScript".

Относительные пути в спецификаторах импортов могут быть неудобны в проектах с глубокой вложенностью директорий. Поэтому были придуманы разные способы для импорта файлов от корня проекта. В статье рассказывается про основные способы упрощения работы с импортами. Про сложность настройки абсолютных импортов в Node.js-проектах c TypeScript и тест-раннерами.

Ситуация со сложностью настройки импортов изменится после имплементации спецификация import maps, с помощью которой можно будет управлять резолвингом модулей. На данный момент import maps поддерживаются только в Deno,

#js #esm

https://blog.ekaragodin.com/TH2jgliMXOO

🛠 Wallaby — это инструмент для повышения продуктивности разработки. Он запускает JavaScript и TypeScript-тесты пока вы пишете код и выводит результаты в IDE рядом с кодом. Это расширение очень полезное, поскольку позволяет видеть вывод и дебажить в режиме реального времени.

Daily Coding #инструменты #js #TypeScript

Reverse engineering Tiktok's VM obfuscation.

#article #coding #js
@thedevs

https://thedevs.link/l6lxzv

cfonts, sexy fonts for your console.

#tools #terminal #rust #js
@thedevs

https://thedevs.link/e4XsBd

Crafting the Next.js Website.

#article #html #css #js
@thedevs
@thedevs_design

https://thedevs.link/hB2BWF

Introducing the MDN Playground: Bring your code to life.

#article #js #html #css #tools
@thedevs
@thedevs_js

https://thedevs.link/UlFNBn

Draggable objects.

#article #js #ux
@thedevs

https://thedevs.link/5bb0I8

An Interactive Intro to CRDTs.

#article #js
@thedevs

https://thedevs.link/t9Rg2I

You don't need a build step.

#article #js #deno
@thedevs

https://thedevs.link/08ene0

Eloquent JavaScript (4th edition): A modern introduction to programming.

#books #js
@thedevs
@thedevs_js

https://thedevs.link/ebFgS5

Optimizing Javascript for fun and for profit.

#article #js
@thedevs
@thedevs_js

https://thedevs.link/kYqJzZ

My favourite animation trick: exponential smoothing.

@thedevs
#coding #js

https://thedevs.link/CoA6xW

How web bloat impacts users with slow devices.

#article #coding #web #js
@thedevs
@thedevs_js

https://thedevs.link/ir8iwV

How to document your JavaScript package.

#article #js
@thedevs
@thedevs_js

https://thedevs.link/fOMWxp

The nature of code: simulating natural systems with p5.js.

#book #js #processing
@thedevs

https://thedevs.link/4ocAMR

A 10x faster TypeScript.

#article #js #ts #go
@thedevs
@thedevs_js

https://thedevs.link/9NQWHC

Bookmarkable by Design: URL-Driven State in HTMX.

#article #coding #frontend #js
@thedevs
@thedevs_js

https://thedevs.link/q7xHqX