Получи случайную криптовалюту за регистрацию!

Валя читает ишью

Логотип телеграм канала @valya_reads_issue — Валя читает ишью В
Логотип телеграм канала @valya_reads_issue — Валя читает ишью
Адрес канала: @valya_reads_issue
Категории: Технологии
Язык: Русский
Количество подписчиков: 2.06K
Описание канала:

boosty.to/valya_reads_issue
Делюсь интересными ишьюсами и пул-реквестами в мире фронтенда и около
github.com/7rulnik twitter.com/7rulnik

Рейтинги и Отзывы

3.00

3 отзыва

Оценить канал valya_reads_issue и оставить отзыв — могут только зарегестрированные пользователи. Все отзывы проходят модерацию.

5 звезд

1

4 звезд

0

3 звезд

1

2 звезд

0

1 звезд

1


Последние сообщения 8

2021-08-10 13:56:54 Любимая Вебня пишет, что в браузерах скоро появится функция window.structuredClone(), но не поясняет, почему это классно.

TL;DR: structuredClone — это как _.cloneDeep(), но из коробки и быстрее.

Структурное клонирование
Сейчас есть плюс-минус два способа склонировать объект:
— _.cloneDeep(obj) и
— JSON.parse(JSON.stringify(obj))

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

В то же время браузеры уже много лет умеют клонировать объекты внутри себя. Например, если сделать

const a = { b: { c: 5 } }
history.pushState(a, document.title)
a.b.c = 6

то в истории всё равно останется объект { b: { c: 5 } }. Браузер склонирует объект a перед тем, как сохранить его в историю. Это называется «структурное клонирование» («structured clone»).

Хаки
Получается, сейчас структурное клонирование доступно в разных браузерных API типа history.pushState или postMessage, но нигде не выставлено наружу. В итоге, если вам надо склонировать объект, но вы не можете подключить lodash, приходится писать что-то такое:

const oldState = history.state;
history.replaceState(obj, document.title);
const copy = history.state;
history.replaceState(oldState, document.title);
return copy;

(Плиз, не делайте так.)

Что теперь
Теперь в спеке есть функция structuredClone(). Она делает то же, что и _.cloneDeep(), но без подключения внешних библиотек и (как минимум в Deno) быстрее.

В браузерах прогресс реализации можно отслеживать по implementation-багам. А в Deno self.structuredClone() реализовали уже вчера ↓
381 views10:56
Открыть/Комментировать
2021-08-02 14:34:04 Новый подход к работе с source-map в webpack

На прошлой неделе вышел webpack v5.47.0 со скромным ченджлогом «improve source-map performance». Да, это опять пост про сорсмапы, но не всё так просто.

На деле за этим скрываются огромные изменения. За сорсмапы в вебпаке отвечает webpack-sources. Он в свою очередь использовал source-map. Как раз таки именно вебпак сподвиг меня сделать форк source-map. Сам Тобиас (автор вебпака) ещё пару лет назад писал «In my opinion using WASM is not really needed for good performance in source-map. … I really thinking about creating my own version of source-map without that stuff.»

И вот, Тобиас написал собственную имплементацию работы с сорсмапами. Если интересно посмотреть код (которого довольно таки много, а ещё Тобиас часто комитит в мастер напрямую) то вот дифф.

Как итог, компиляция стала на 12% быстрее. Ну а я лишился 16-ти миллионов потенциальных загрузок в неделю

P.S. Обновляться я пока не советую, т.к. рефакторинг действительно очень большой и какие-то фиксы появляются вот прямо сейчас. Подождите 1-2 минорные версии вебпака.
669 viewsedited  11:34
Открыть/Комментировать
2021-08-02 11:33:03 https://twitter.com/styfle/status/1420951279954763779
772 views08:33
Открыть/Комментировать
2021-07-28 13:34:50
6 месяцев назад я писал про баг с пагинацией на странице зависимых пакетов в NPM и открыл ишью. А вчера получил вот такой ответ…
825 views10:34
Открыть/Комментировать
2021-07-27 14:22:50 https://dev.to/arcanis/yarn-3-0-performances-esbuild-better-patches-e07
1.3K views11:22
Открыть/Комментировать
2021-07-22 20:32:17 Кстати, как видите, даже CDN падают. Так что никогда не бывает лишним иметь резервный CDN или просто контейнер с nginx, на который вы можете быстро переключиться.
592 views17:32
Открыть/Комментировать
2021-07-22 20:02:06 Akamai упал и пролежал 25 минут. А вместе с ним пролежали 30 из топ100 интернет сайтов. https://twitter.com/Akamai/status/1418251400660889603
565 views17:02
Открыть/Комментировать
2021-07-22 20:02:05 Когда я работал в Альфа-Банке, мы очень долго пытались перейти на HTTP 2, но из-за ряда проблем на своем железе это сделать не получалось. Решили обойти это через CDN и общались в том числе с Akamai. Один из вопросов был на тему аптайма: когда была последняя авария, сколько лежали, почему упали. Ответ был "такого не бывает". Ну, теперь ребятам будет что ответить на мой вопрос!
659 views17:02
Открыть/Комментировать
2021-07-21 18:44:45 Какую стратегию хеширования ассетов выбрать в Webpack?

Несколько месяцев назад проходил мимо Storybook и заметил, что в нём для хеширования ассетов используется [hash] (он же [fullhash]). Это хеш всей компиляции. Таким образом каждую компиляцию все ассеты получали новый хеш, даже если их контент не поменялся.

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

Что же до выбора стратегии, то всё очень просто — используйте [contenthash]. Этот хеш зависит именно от содержимого каждого конкретного чанка. Вот мой пул реквест.

Кстати, оказалось, что по пути я исправил и утечку памяти. Дело в том, что при использовании Webpack Dev Server ассеты пишутся не на диск, а в оперативную память с помощью memfs, т.к. это быстрее и экономит ресурс SSD. В таком случае на каждое изменение появлялись новые ассеты, а старые оставались в оперативной памяти. Именно по этой причине не нужно использовать хеширование в development режиме. Хотя давным-давно я думал, что это просто из-за того, что операция хеширования существенно замедляет рекомпиляцию.

Ну а поглядеть какие ещё бывают виды хешей можно вот здесь.
875 viewsedited  15:44
Открыть/Комментировать
2021-07-21 00:34:12
Parameter name hints в VS Code

В августе в VS Code появится поддержка inlay hints. Это такие подсказки с названиями и типами аргументов, типами переменных, типами, которые возвращают функции и т.д.

Как обычно, уже доступно в VS Code Insiders. Однако для работы требуется TypeScript 4.4 (на текущий момент это бета-версия). Так же замечу, что подсказки доступны и в обычном JS (но для работы всё ещё нужен TS).

Тут подробно написано как включить фичу. Здесь PR в тайпскрипт, ну а здесь в сам VS Code

P.S. Стало интересно как это реализовано в Web Storm, т.к. для реализации в VS Code потребовалось расширять сам TS.
1.0K views21:34
Открыть/Комментировать