Обложка канала

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

6354 @defront
Открыть

Канал про фронтенд-разработку и не только. Небольшие посты и короткие пересказы статей, приправленные авторским мнением. Ведёт канал Александр Мышов из Яндекс.Маркета.

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

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

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

    Qwik — возобновляемый JavaScript-фреймворк Райан Карниато поделился своими мыслями после работы с Qwik — новым фреймворком от автора Angular — "Resumable JavaScript with Qwik". Qwik — это представитель новой категории возобновляемых фреймворков. Его основная особенность — прогрессивная гидрация приложения без обязательной загрузки кода приложения. Qwick единственный в своём роде фреймворк, полноценно реализующий эти идеи, кардинально уменьшая метрику Time To Interactive. Фреймворк при компиляции расставляет в HTML специальные маркеры, которые содержат необходимые данные и ссылки на код, который нужно загрузить перед выполнением. Таким образом реализуется поддержка ленивой инициализации приложения. Qwik находится на этапе активной разработки. На данный момент его не рекомендуется использовать для production-приложений. #jsframeworks #performance dev.to/this-is…wik-2i29
    Resumable JavaScript with Qwik

    When Misko Hevery (creator of AngularJS) approaches you to look at his new framework, well, you stop...

    DEV Community

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

    Обработка ошибок с помощью reportError Стэфан Джудис рассказал про малоизвестный метод для облегчения обработки ошибок в библиотечном коде — "New in JavaScript: reportError – a method to report to global event handlers". Для логирования ошибок на странице часто устанавливают глобальный обработчик события error. Библиотеки могут редиректить возникающие исключения в этот глобальный обработчик с помощью setTimeout, но такой код выглядит как хак. Для упрощения решения этой проблемы в платформу был добавлен специальный метод reportError: 
    try {
  fn();
} catch (error) {
  // добавление кастомной обработки исключений и
  // вызов глобального обработчика
  reportError(error);
}
    Поддержка метода reportError есть во всех актуальных браузерах. #js www.stefanjudis.com/blog/re…handlers
    New in JavaScript: reportError – a method to report to global event handlers

    Use `reportError` to report errors to global error event handlers.

    Stefanjudis

  • Реклама

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

    Выбор библиотеки по её размеру Владимир Клепов рассказал про подводные камни выбора библиотек с использованием размера как основной метрики — "Don't trust JS library size, min+gzip". В статье Владимир пишет о том, что размер библиотеки в Readme, может не отражать реальный процент бандла, который она будет занимать. Обычно код жмётся лучше, чем больше в приложении используется стороннего кода. Также пайплайн сборки может оказывать негативный эффект на размер из-за транспиляции в старую версию JavaScript. Иногда меньший размер библиотеки означает, что нужно использовать больше кода по сравнению с альтернативной библиотекой с большим размером, поэтому размер в этом случае не имеет значения. При выборе библиотеки автор рекомендует оценивать скорость инициализации. Меньшая библиотека с плохой скоростью инициализации будет оказывать негативный эффект на всех пользователей без исключения. В то время как большая библиотека с лучшей скоростью инициализации будет оказывать негативный эффект только один раз при загрузке бандла с сервера. Хорошая статья. Рекомендую почитать. #js #performance #musings thoughtspile.github.io/2022/02…ize-lies
    Don't trust JS library size, min+gzip

    Many modern front-end libraries and apps obsess over their bundle size. It’s a noble pursuit — an app that uses smaller libraries has less bloat, loads faster, and the users are happier. We can agree

    Vladimir Klepov as a Coder

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

    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 medium.com/@vantas…4efe9474
    Time Travel Debugging in Svelte with DeLorean

    A new way to debug Svelte apps

    Medium

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

    HTML-элемент <dialog> в Safari 15.4 beta В рамках инициативы "Interop 2022" в Safari Technology Preview 134 и Safari 15.4 beta была добавлена поддержка HTML-элемента <dialog>. С его помощью можно создавать доступные модальные и немодальные диалоговые окна webkit.org/blog/12…-element
    Introducing the Dialog Element

    Although the alert, confirm and prompt JavaScript methods are convenient, they aren’t recommended due to their script-blocking behavior.

    WebKit

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

    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 www.smashingmagazine.com/2022/02…y-bundle https://www.youtube.com/watch?v=aAkmZ0gMYQ8 (доклад на русском)
    Statoscope: A Course Of Intensive Therapy For Your Bundle — Smashing Magazine

    Statoscope is an instrument that analyses your webpack-bundles. Created by Sergey Melukov, it started out as an experimental version in late 2016, which has now become a full-fledged toolkit for viewing, analyzing, and validating webpack-bundles.

    Smashing Magazine

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

    Релиз 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 developer.mozilla.org/en-US/d…eases/97

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

    Оператор конвейера в 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

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

    Google разрабатывает новый API для определения предпочтений пользователей для показа релевантной рекламы — Topics API. Его разработка началась после того как предыдущее решение — FLoC — получило негативные отзывы от лидеров индустрии из-за высокого риска фингерпринтинга. Формирование предпочтений в Topics API происходит на стороне клиента, есть возможность отключить Topics API и настроить интересующие темы. blog.google/product…-sandbox

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

    Deno в 2021 году Арон О'Муллан, Бартек Иванчук и Райан Дал подвели итоги разработки Deno и его экосистемы в 2021 году — "Deno in 2021". Летом был запущен Deno Deploy — коммерческое серверное решение для развёртывания JavaScript, TypeScript и WASM-сервисов. С версии 1.9 HTTP-модуль использует hyper — HTTP-сервер с поддержкой HTTP/2, написанный на Rust. Hyper по сравнению с предыдущей реализацией на TypeScript увеличил пропускную способность сервера и уменьшил задержки. Был добавлен FFI (Foreign Function Interface). Благодаря ему расширения для Deno можно писать на любом языке, поддерживающем соглашения вызова функций C. В четвёртом квартале началась работа над созданием режима совместимости с экосистемой Node.js для запуска npm-пакетов. На данный момент работа над этой фичей ещё не закончена. Её можно включить с помощью флага --compat. Было оптимизировано ядро Deno. Накладные расходы на вызов низкоуровневых функций платформы были сокращены в 100 раз. В августе Deno был добавлен в таблицу совместимости MDN. #deno https://deno.com/blog/deno-in-2021
    Deno in 2021

    Retrospect of what happened in 2021 and what's coming in 2022

    Deno Blog

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

    Релиз Chrome 98 Позавчера вышла новая версия Chrome. Пит Лепаж и Джеселин Ин рассказали обо всех новинках релиза — "New in Chrome 98". В рамках Origin Trial автоматической тёмной темы на Android теперь можно отказаться от применения темы на отдельных страницах с помощью <meta name="color-scheme" content="only light"> и CSS-свойства color-scheme: only light;. Появилась поддержка COLRv1 — нового формата шрифтов c поддержкой цветных глифов, градиентов и смешивания. COLRv1 обеспечивает максимальное сжатие большого количества небольших изображений. При обращении к приватным сетям теперь отправляются CORS Preflight-запросы. Запущен новый Origin Trial кроппинга захватываемого видео с помощью Region Capture API. В инструментах разработчика теперь используется редактор на базе Codemirror 6. Благодаря ему была улучшена поддержка очень больших файлов, исправлена проблема со смещением прокрутки во время отладки. Появилась новая панель для отладки дерева доступности. Lighthouse был обновлён до девятой версии. Добавлен новый инструмент для упрощения отладки проблем с Back/Forward Cache. #chrome #release developer.chrome.com/blog/ne…hrome-98 developer.chrome.com/blog/ne…tools-98

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

    Ускорение установки зависимостей с помощью tnpm На dev.to была опубликована статья разработчика Alibaba про ускорение установки зависимостей в Node.js — "In-depth of tnpm rapid mode - how we managed to be 10 second faster than pnpm". Автор статьи занимается разработкой tnpm — проприетарного реестра JavaScript-пакетов и клиента, использующихся в проектах Alibaba. Для ускорения процесса установки команда переделала архитектуру tnpm. В новом решении построение графа зависимостей пакетов происходит на сервере, значительно снижая количество HTTP-запросов на стороне клиента. Зависимости перед отправкой на клиент бандлятся в небольшое количество tar-файлов, улучшая утилизацию сети и уменьшая число обращений к диску. Полученные тарболлы не распаковываются, а лежат в хранилище, доступ к которому предоставляется с помощью npmfs — FUSE-модуля, реализующего кастомную файловую систему для работы с пакетами. Таким образом для пользователя и для Node.js ничего не меняется — они видят файлы, которые на самом деле лежат в запакованном виде. Использование FUSE накладывает ограничения на поддерживаемые операционные системы — на данный момент поддерживается только Linux. Эти изменения позволили значительно улучшить скорость установки зависимостей, опередив в бенчмарке pnpm на 9 секунд. Автор пишет, что они планируют открыть исходный код npmfs в будущем. Меня лично немного пугает получившийся монстр, но с точки зрения ускорения воркфлоу разработки — это очень интересное решение. #npm #performance dev.to/atian25…npm-3bpp
    In-depth of tnpm rapid mode - how we managed to be 10 second faster than pnpm

    Background As a front-end veteran, I have to point out that the increasing complexity of...

    DEV Community

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

    За прошедшие две недели в канале для патронов Defront было опубликовано одиннадцать постов: — Оптимизация enum в TypeScript — Как читать спецификации W3C — Опыт улучшения производительности Amazon — Использование Navigation Timing API — Возвращение серверного роутинга — Подход к прохождению технического собеседования — Сравнение разных способов троттлинга сети — Зачем разбираться в рабочих процессах компании — Конфигурация проектов с помощью npm и mrm — Рефлексия по defer и async — Заметки по микрофронтендам Становитесь патроном канала на Patreon, чтобы получить доступ в Defront Plus (более 350 уникальных постов). Все донаты идут на поддержку канала, покупку еды, аренду квартиры, оплату медицинских услуг и т.п. Спасибо всем, кто читает и поддерживает Defront! https://www.patreon.com/myshov
    Alexander Myshov is creating defront and open source (supported by Zarplata.ru) | Patreon

    Become a patron of Alexander Myshov today: Get access to exclusive content and experiences on the world’s largest membership platform for artists and creators.

    Patreon

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

    Производительность рендеринга в браузерах Мэт Перри — автор библиотек Framer Motion и Moion One — рассказал про особенности и трудности создания плавных анимаций. Плавные анимации достигаются за счёт оптимизации рендеринга и использования аппаратного ускорения. При оптимизации рендеринга нужно учитывать, что некоторые свойства приводят к перерасчёту раскладки страницы. Но если эти свойства используются в изолированном контексте, например, с position: absolute, то вполне можно достичь 60 fps. В сети можно найти список этих свойств (CSS Triggers), но он долгое время не обновлялся. Так например, обработка SVG и CSS-свойства filter в Firefox и Chrome уже выносится на GPU, а в Chrome скоро появится поддержка ускорения анимаций clip-path и background-color. Все браузеры для анимаций используют аппаратное ускорение. В Safari оно реализовано с помощью системной библиотеки Core Animation. Она несовместима с Web Animation API, из-за чего в некоторых случаях ускорение может отключаться. Полезная статья. Рекомендую почитать всем, кто интересуется темой производительности рендеринга. #performance #rendering https://motion.dev/guides/performance
    Performance | Motion One

    A guide to getting the most performance from your Motion One animations

    motion.dev

  • Реклама

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

    Новинки iOS Safari 15.4 Beta Apple обычно не делится своими планами внедрения новых API в Safari. По этой причине Максимилиано Фиртман копается в новых релизах iOS, чтобы понять, что нас ждёт в будущем. В этот раз он проанализировал последнюю доступную версию Safari и WebView из iOS 15.4 Beta — "Push Notifications, WebXR, and better PWA support coming to iOS". Из нового релиза видно, что началась работа над добавлением Push API и Notification API. С их помощью сайты и PWA могут отображать системные нотификации. На данный момент Push API и Notification API ещё не работают, и их поддержки скорее всего не будет в стабильной версии iOS 15.4. Была добавлена поддержка icon из манифеста PWA. Благодаря этому свойству можно тонко настраивать иконку устанавливаемого PWA. На данный момент поддержка icon реализована с ограничениями: нет поддержки свойства maskable, есть проблемы с загрузкой иконки. Доступен набор экспериментальных фич для работы со смешанной и дополненной реальностью: WebXR Augmented Reality Mode, WebXR Device API, WebXR Gamepads Module, WebXR Hand Input Module. Была добавлена поддержка :has, поддержка CSS-свойства accent-color, добавлен элемент <dialog>, медиа-фича resolution и ленивая загрузка изображений с помощью loading="lazy". #safari #experimental https://firt.dev/ios-15.4b
    Push Notifications, WebXR, and better PWA support coming to iOS－firt.dev

    New APIs, capabilities, bugs, and challenges for Safari and PWAs running in iOS 15.4 and iPadOS 15.4, including Web Push Notifications, WebXR

    firt.dev

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

    Сегодня каналу исполнилось три года! Сначала для меня канал был просто интересным занятием, который мотивировал читать что-то новое и делится найденными с коллегами. Сейчас ситуация складывается таким образом, что из-за обострения тоннельного синдрома я не могу идти работать фулл-тайм, и Defront стал моим, можно сказать, спасением. Я очень благодарен, что у меня есть возможность работать над каналом. Также хочу поблагодарить всех, кто читает Defront и поддерживает меня на Patreon. Особенная благодарность всем спонсорам канала — Зарплате.ру, Василисе Версус, Сергею Ufocoder, Андрею Советкину и Mykola Dekhtiarenko. И уже по традиции передаю привет всем дружественным каналам и сообществам (пишите в лс, если кого-то забыл): @webnya — канал про веб-стандарты, новости TC39 и JS, WebAssembly и т.п. @oleg_log — канал про бэкенд-разработку и программирование в целом @ufostation — подкасты и статьи про разработку @webstandards_ru — подкасты и канал про фронтенд-разработку @forwebdev — новости из мира фронтенда @valya_reads_issue — последние новости и инсайты из мира фронтенда @typesafesound — мысли про TypeScript и разработку @msosnovfeed — про процессы, архитектуру и т.п. @artalog — про разработку, React и софт скиллы @css_ru — разговоры про CSS и HTML @asterisk_js — ссылки на проекты и статьи про Node.js и около Ещё раз всем спасибо и берегите себя!

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

    Оптимизация производительности Angular-приложений Минко Гечев из Google рассказал про распространённые проблемы производительности Angular-приложений и способы их решения — "4 Runtime Performance Optimizations". — Загрязнение зоны (zone pollution). Возникает в том случае, когда механизм обнаружения изменений запускается асинхронными событиями, не влияющими на состояние основного приложения. Для решения этой проблемы регистрацию событий нужно выносить вне основной зоны Angular с помощью метода runOutsideAngular. Примером загрязнения зоны может быть регистрация обработчика события mousemove для отображения лейблов диаграммы из сторонней библиотеки. — Запуск обнаружения изменений вне границ компонента (out of bounds change detection). Происходит тогда, когда возникновение событий в одном компоненте запускает механизм обнаружения изменений в соседних независимых компонентах. Эта проблема решается использованием стратегии обнаружения изменений onPush. — Лишние перерасчёты значений в шаблонах (recalculation of referentially transparent expressions). Если в шаблоне используются методы для получения значений, то они будут исполняться каждый раз при ререндериге компонента. Если эти методы удовлетворяют принципу ссылочной прозрачности, то их можно либо мемоизировать, либо заменить пайпами. — Большое дерево компонентов (large component trees). Если дерево компонентов слишком большое, то как бы ни были оптимизированы компоненты, приложение будет работать с подтормаживаниями. Решение — уменьшить размер дерева. Это можно сделать с помощью пагинации или виртуализированного списка. #angular #performance #video https://youtu.be/f8sA-i6gkGQ
    4 Runtime Performance Optimizations

    In this video our very own Minko Gechev will take us through 4 common runtime performance challenges, their identification with Angular DevTools, and their resolutions. We'll cover: - Zone pollution - Out of bounds change detection - Recalculation of referentially transparent expressions - Large component trees Download Angular DevTools → https://goo.gle/install-angular-devtools Learn more about Angular DevTools → https://angular.io/guide/devtools

    YouTube