Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только

2021-12-22 19:35:55 Группировка элементов массива с помощью 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/ Открыть/Комментировать

2021-12-21 18:33:44 Fuite — инструмент для поиска утечек памяти в SPA

Нолан Лоусон представил утилиту для автоматизированного поиска утечек памяти в SPA — "Introducing fuite: a tool for finding memory leaks in web apps".

Fuite — консольная утилита, работающая поверх Puppeteer. Она запускает циклический сценарий перехода по ссылкам приложения и возврата назад по истории браузера. После сбора статистики выводится список объектов, которые увеличились кратно количеству прогонов.

Fuite не интегрируется в DevTools, как недавно представленный инструмент Edge, но помогает в поиске более широкого спектра утечек памяти.

#debug #tool #spa

https://nolanlawson.com/2021/12/17/introducing-fuite-a-tool-for-finding-memory-leaks-in-web-apps/ Открыть/Комментировать

2021-12-21 12:11:18 TechTalks Зарплаты.ру 29.12 в 19:00 в Новосибирске

Финалим год своей любимой развлекухой — болтаем за IT под пиво и пиццу. Как обычно, в программе 2 отделения:

Открытый микрофон
Вы заранее присылаете нам свой вопрос, кейс, жалобу, доклад, стендап - что угодно, о чём бы вы хотели поговорить с IT-аудиторией. Сцена и микрофон к вашим услугам, но можно написать и анонимно — на техтолке "письмо" прочитают ведущие. 5-10 минут на ваш кейс и 10-15 минут на его обсуждение. Форма для вашего кейса

IT-игра "100-к-2" (по мотивам "Сто к одному")
Мы пристали с дурацкими вопросами к сотрудникам Зарплаты.ру — от разработчиков до сотрудников отдела продаж и маркетологов. Будем угадывать самые популярные и самые редкие ответы от наших ребят. Новогоднее настроение, подарки и кринжовый угар — что ещё нужно за 3 дня до конца года?

Руин-паб "Типография" (Новосибирск, Красный проспект, 22), начало в 19:00

Ссылка на регистрацию Открыть/Комментировать

2021-12-20 19:06:12 Релиз Safari 15.2

На прошлой неделе вышла новая версия Safari. Джен Симмонс рассказала про основные новинки релиза — "New WebKit Features in Safari 15.2".

— Объём доступной памяти для WebAssembly увеличен до 4Гб. Была оптимизирована обработка исключений.

— Добавлена поддержка HTTP-заголовков Cross-Origin-Opener-Policy и Cross-Origin-Embedder-Policy для включения SharedArrayBuffer

— Добавлена поддержка цветового пространства P3 в canvas

— Добавлена поддержка File Access API для упрощённой работы с файлами в веб-приложениях

По набору новых фич видно, что разработчики WebKit активно работают над добавлением поддержки веб-версии Photoshop.

Safari 15.2 доступен в macOS Monterey, Big Sur, Catalina и в iOS/iPadOS 15.2.

#safari #release

https://webkit.org/blog/12140/new-webkit-features-in-safari-15-2/
https://developer.apple.com/documentation/safari-release-notes/safari-15_2-release-notes Открыть/Комментировать

2021-12-17 22:16:37 Глубокое клонирование объектов с помощью structuredClone

Сурма из Google рассказал про новое API для глубокого клонирования JavaScript-объектов — "Deep-copying in JavaScript using structuredClone".

Самым популярным решением для глубокого клонирования объектов был JSON-хак:

const myDeepCopy = JSON.parse(JSON.stringify(myOriginal));

Он стал настолько популярен, что в браузерах были добавлены специальные оптимизации для этого хака. На данный момент он остаётся самым быстрым способом для глубокого клонирования небольших объектов. Однако он не поддерживает объекты с циклическими ссылками, Map, Set, Date, RegExp и ArrayBuffer.

Структурное клонирование — это другое название для глубокого клонирования. Оно использовалось браузерами неявно при передаче объектов с помощью postMessage и сохранении объектов в IndexedDB. Новый метод structuredClone открывает удобный доступ к этому механизму клонирования без недостатков JSON-хака:

const myDeepCopy = structuredClone(myOriginal);

Поддержка strucutredClone на данный момент есть в Firefox 94, в nightly-версии Chrome и Safari TP.

#js #api

https://web.dev/structured-clone/ Открыть/Комментировать

2021-12-17 11:08:13 За прошедшие две недели в канале для патронов Defront было опубликовано одиннадцать постов:

— Невидимый бэкдор в JavaScript-коде
— Веб-зомби
— Скромная перегрузка функций в TypeScript
— Откладывание выполнения некритичных скриптов
— Использование ссылок mailto
— Алгоритмы сжатия в HTTP
— Стриминг контента в SPA
— Эффективное решение задач и отладка
— Как работает троттлинг в Lighthouse
— UI браузера с точки зрения безопасности
— Подожди пять минут

Становитесь патроном канала на Patreon, чтобы получить доступ Defront Plus (более 300 уникальных постов). Все донаты идут на поддержку канала, покупку еды, аренду квартиры, оплату медицинских услуг и т.п.

Спасибо всем, кто читает и поддерживает Defront!

https://www.patreon.com/myshov Открыть/Комментировать

2021-12-16 20:12:57 Улучшилась ли скорость веба благодаря Web Vitals?

Барри Поллард проанализировал влияние метрик Web Vitals на производительность веба в целом — "Have Core Web Vitals made the web faster?".

Внедрение метрик Core Web Vitals (CWV) по данным Google дало положительный эффект. По сравнению с прошлыми годами количество сайтов, удовлетворяющих CWV, увеличилось более чем на 20%. Однако Барри пишет о том, что сложно судить о динамике изменения метрик, если их определения претерпели значительные изменения. Именно это произошло с метриками LCP и CLS.

Более непредвзятую оценку может дать HTTPArchive. Данные семи миллионов сайтов показывают небольшое падение производительности за прошедший год (вывод сделан на основе изменения SpeedIndex). Но и это тоже не конец истории, так как HTTPArchive собирает данные заглавных страниц сайтов, что может значительно влиять на итоговую оценку.

Барри пишет про то, что ответ на вопрос лежит где-то посередине. Нельзя категорично утверждать, что благодаря CWV скорость веба улучшилась. Но введение CWV заставило владельцев крупных сайтов инвестировать ресурсы в улучшение производительности. Также крупные игроки (Wordpress, Wix) стали более серьёзно относиться к производительности, после того как Google объявил о том, что алгоритм ранжирования поиска будет учитывать метрики CWV.

#performance #research

https://calendar.perfplanet.com/2021/have-core-web-vitals-made-the-web-faster/ Открыть/Комментировать

2021-12-15 19:10:06 Преимущества хранения node_modules в git

Джек Франклин из команды разработки Chrome DevTools написал статью о том, почему они коммитят зависимости в систему контроля версий — "Why you should check-in your node dependencies".

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

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

#npm

https://www.jackfranklin.co.uk/blog/check-in-your-node-dependencies/ Открыть/Комментировать

2021-12-14 17:37:17 Релиз Firefox 95

В Firefox 95 включён RLBox — технология для улучшения безопасности браузера с помощью WebAssembly. Также в этой версии для всех пользователей был включён Site Isolation.

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

В HTML был добавлен глобальный атрибут inputmode для настройки вида виртуальной клавиатуры на смартфонах. Firefox на Android теперь поддерживает CSS-свойство cursor.

В JS-движке значительных изменений не было, но был добавлен Crypto.randomUUID() — API для получения криптографически устойчивых значений UUID. Изменено поведение свойства SpeechSynthesisEvent.elapsedTime; теперь оно возвращает время в секундах.

#firefox #release

https://www.mozilla.org/en-US/firefox/95.0/releasenotes/
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/95 Открыть/Комментировать

2021-12-13 18:21:10 Создание временных сайтов с помощью Netlify Drop

Недавно Netlify запустил новый сервис "Drop" для быстрого развёртывания сайтов.

Netlify — это платформа для публикации статически генерируемых сайтов. У неё есть много полезных штук с довольно хорошим бесплатным тарифом. Сайт Defront хостится на Netlify, всё работает как часы.

Недавно они сделали совершенно гениальный по своей простоте сервис. Если вам нужно временно опубликовать сайт, берёте папку с index.html и сопутствующими ресурсами, кидаете её в окно браузера, и у вас появляется сайт. Сервис работает даже без аккаунта на Netlify, в этом случае сайт будет работать 24 часа, потом он будет автоматически удалён.

#tool

https://app.netlify.com/drop Открыть/Комментировать