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

2022-02-24 13:53:55 Про войну в Украине

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

Мне больно видеть происходящее и больно от того, что я ничего не могу сделать. Но я хочу и буду верить, что наши власти увидят осуждение своих действий внутри России и остановят весь этот бред. Открыть/Комментировать

2022-02-23 23:13:21 Qwik — возобновляемый JavaScript-фреймворк

Райан Карниато поделился своими мыслями после работы с Qwik — новым фреймворком от автора Angular — "Resumable JavaScript with Qwik".

Qwik — это представитель новой категории возобновляемых фреймворков. Его основная особенность — прогрессивная гидрация приложения без обязательной загрузки кода приложения. Qwick единственный в своём роде фреймворк, полноценно реализующий эти идеи, кардинально уменьшая метрику Time To Interactive. Фреймворк при компиляции расставляет в HTML специальные маркеры, которые содержат необходимые данные и ссылки на код, который нужно загрузить перед выполнением. Таким образом реализуется поддержка ленивой инициализации приложения.

Qwik находится на этапе активной разработки. На данный момент его не рекомендуется использовать для production-приложений.

#jsframeworks #performance

https://dev.to/this-is-learning/resumable-javascript-with-qwik-2i29 Открыть/Комментировать

2022-02-22 19:25:45 Обработка ошибок с помощью reportError

Стэфан Джудис рассказал про малоизвестный метод для облегчения обработки ошибок в библиотечном коде — "New in JavaScript: reportError – a method to report to global event handlers".

Для логирования ошибок на странице часто устанавливают глобальный обработчик события error. Библиотеки могут редиректить возникающие исключения в этот глобальный обработчик с помощью setTimeout, но такой код выглядит как хак. Для упрощения решения этой проблемы в платформу был добавлен специальный метод reportError:

try {
fn();
} catch (error) {
// добавление кастомной обработки исключений и
// вызов глобального обработчика
reportError(error);
}

Поддержка метода reportError есть во всех актуальных браузерах.

#js

https://www.stefanjudis.com/blog/reporterror-a-method-to-report-to-global-event-handlers/ Открыть/Комментировать

2022-02-21 19:04:38 Выбор библиотеки по её размеру

Владимир Клепов рассказал про подводные камни выбора библиотек с использованием размера как основной метрики — "Don't trust JS library size, min+gzip".

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

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

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

#js #performance #musings

https://thoughtspile.github.io/2022/02/15/bundle-size-lies/ Открыть/Комментировать

2022-02-10 18:12:38 Time-travel debugging в Svelte

Сэм Ван Тассел рассказал про DeLorian — новый инструмент для упрощения отладки Svelte-приложений — "Time Travel Debugging in Svelte with DeLorean".

DeLorian — это расширение Chrome DevTools для отслеживания изменений состояния приложения во времени (time-travel debugging). При изменении состояния создаётся снапшот, к которому можно вернуться в любое время. Перемещение по истории работает также как в Redux DevTools. Также DeLorian отображает дерево компонентов и связанные с ними переменные.

На данный момент есть ограничения: корень приложения должен находится в DOM-элементе с id="root", приложение должно быть собрано в dev-режиме и работать локально.

#svelte #debug #tool

https://medium.com/@vantassel.sam/time-travel-debugging-in-svelte-with-delorean-26e04efe9474 Открыть/Комментировать

2022-02-10 12:03:39 HTML-элемент

в Safari 15.4 beta

В рамках инициативы "Interop 2022" в Safari Technology Preview 134 и Safari 15.4 beta была добавлена поддержка HTML-элемента

. С его помощью можно создавать доступные модальные и немодальные диалоговые окна

https://webkit.org/blog/12209/introducing-the-dialog-element/

1.1K viewsAlexander Myshov, 09:03

Открыть/Комментировать

2022-02-09 22:50:06 Statoscope — тулкит для анализа Webpack-бандлов

На Smashing Magazine был опубликован транскрипт доклада Сергея Мелюкова про тулкит для анализа Webpack-бандлов — "Statoscope: A Course Of Intensive Therapy For Your Bundle".

С помощью Statoscope можно сравнить две сборки между собой и получить информацию об увеличении размера бандла, времени сборки и т.п. Он помогает обнаруживать дубликаты пакетов в бандле и, в отличие от webpack-bundle-analyzer, показывает конкретные файлы, в которых происходит импорт этих пакетов. Его можно использовать в CI для блокирования пулл-реквестов, если какой-либо критический показатель выходит за установленное порог. В нём поддерживается создание кастомных отчётов с помощью Jora и DiscoveryJS.

Statoscope используется в проектах Яндекса: в Яндекс.Маркете, Яндекс.Картах, Кинопоиске. Также он используется в библиотеке size-limit.

#webpack #bundle #tool

https://www.smashingmagazine.com/2022/02/statoscope-course-intensive-therapy-bundle/


(доклад на русском) Открыть/Комментировать

2022-02-08 23:04:40 Релиз Firefox 97

В новом релизе была добавлена поддержка каскадных слоёв (CSS Cascade Layers) с помощью CSS-директивы @layer. Эта фича полезна при рефакторинге, темизации и структурировании стилей.

Добавлена поддержка CSS-свойства scrollbar-gutter. С его помощью можно зарезервировать место на боковой границе вьюпорта, чтобы ширина страницы не прыгала при появлении полосы прокрутки.

Добавлен метод AbortSignal.throwIfAborted() и свойство AbortSignal.reason. Эти изменения позволяют упростить реализацию отмены выполнения кода по внешнему событию.

Теперь можно использовать requestAnimationFrame и cancelAnimationFrame внутри веб-воркеров.

В CSS добавлены новые единицы измерения cap и ic, добавлена поддержка @scroll-timeline и animation-timeline для создания анимаций, привязанных к позиции скролла. CSS-свойство color-adjust было переименовано в print-color-adjust.

#firefox #release

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

2022-02-07 20:42:41 Оператор конвейера в JavaScript (pipeline operator)

Аксель Раушмайер написал статью об операторе конвейера (pipeline operator, pipe operator) — новом операторе, над которым идёт работа в TC39 — "A pipe operator for JavaScript: introduction and use cases".

Есть два конкурирующих пропозала с реализацией оператора конвейера: конвейер в F#-стиле и Hack-стиле. Оба пропозала вводят в язык оператор |>, благодаря которому упрощается композиция функций:

// стандартная композиция
const y = h(g(f(x)));
// композиция с пайпом в Hack-стиле
const y = x |> f(%) |> g(%) |> h(%);
// композиция с пайпом в F#-стиле
const y = x |> f |> g |> h;

Несмотря на то что пропозал c конвейером в F#-стиле выглядит чище, у него больше недостатков по сравнению с конвейером в Hack-стиле: нужно использовать каррирование, усложняется добавление поддержки yield и await, больше накладных расходов на память. По этим причинам работа над F#-версией конвейера была остановлена.

На данный момент пропозал о добавлении конвейера в Hack-стиле находится на Stage 2, и его поддержки нет ни в одном браузере.

#js #tc39 #proposal

https://2ality.com/2022/01/pipe-operator.html Открыть/Комментировать

2022-02-05 11:50:26 Google разрабатывает новый API для определения предпочтений пользователей для показа релевантной рекламы — Topics API. Его разработка началась после того как предыдущее решение — FLoC — получило негативные отзывы от лидеров индустрии из-за высокого риска фингерпринтинга. Формирование предпочтений в Topics API происходит на стороне клиента, есть возможность отключить Topics API и настроить интересующие темы.

https://blog.google/products/chrome/get-know-new-topics-api-privacy-sandbox/ Открыть/Комментировать