Latest posts
Channel name was changed to «Defront — про фронтенд-разработку и не только»
7 Jan 2024, 13:51
Defront — про фронтенд-разработку и не только
24 Feb 2022, 10:53edited
Про войну в УкраинеШлю лучи поддержки братьям и сёстрам украинцам. В моём окружении нет ни одного человека, кто бы поддерживал текущие действия российских властей. Во всех соцсетях я вижу только посты с осуждениями текущей ситуации несмотря на то, что говорят по телевизору. Это заставляет верить, что российский народ не хочет войны, все хотят, чтобы текущая ситуация разрешилась как можно скорее.Мне больно видеть происходящее. Но я хочу и буду верить, что наши власти увидят осуждение своих действий внутри России и остановят весь этот бред.Defront — про фронтенд-разработку и не только
23 Feb 2022, 20:13
Qwik — возобновляемый JavaScript-фреймворкРайан Карниато поделился своими мыслями после работы с Qwik — новым фреймворком от автора Angular — "Resumable JavaScript with Qwik".Qwik — это представитель новой категории возобновляемых фреймворков. Его основная особенность — прогрессивная гидрация приложения без обязательной загрузки кода приложения. Qwick единственный в своём роде фреймворк, полноценно реализующий эти идеи, кардинально уменьшая метрику Time To Interactive. Фреймворк при компиляции расставляет в HTML специальные маркеры, которые содержат необходимые данные и ссылки на код, который нужно загрузить перед выполнением. Таким образом реализуется поддержка ленивой инициализации приложения.Qwik находится на этапе активной разработки. На данный момент его не рекомендуется использовать для production-приложений.#jsframeworks #performancehttps://dev.to/this-is-learning/resumaDEV CommunityResumable JavaScript with QwikWhen Misko Hevery (creator of AngularJS) approaches you to look at his new framework, well, you stop...Defront — про фронтенд-разработку и не только
22 Feb 2022, 16:25edited
Обработка ошибок с помощью reportErrorСтэфан Джудис рассказал про малоизвестный метод для облегчения обработки ошибок в библиотечном коде — "New in JavaScript: reportError – a method to report to global event handlers".Для логирования ошибок на странице часто устанавливают глобальный обработчик события error. Библиотеки могут редиректить возникающие исключения в этот глобальный обработчик с помощью setTimeout, но такой код выглядит как хак. Для упрощения решения этой проблемы в платформу был добавлен специальный метод reportError:try { fn(); } catch (error) { // добавление кастомной обработки исключений и // вызов глобального обработчика reportError(error); }Поддержка метода reportError есть во всех актуальных браузерах.#jshttps://www.stefanjudis.com/blog/reporterror-a-method-to-report-to-global-event-handlers/StefanjudisreportError – a method to report to global event handlersUse `reportError` to report errors to global error event handlers.Defront — про фронтенд-разработку и не только
21 Feb 2022, 16:04edited
Выбор библиотеки по её размеруВладимир Клепов рассказал про подводные камни выбора библиотек с использованием размера как основной метрики — "Don't trust JS library size, min+gzip".В статье Владимир пишет о том, что размер библиотеки в Readme, может не отражать реальный процент бандла, который она будет занимать. Обычно код жмётся лучше, чем больше в приложении используется стороннего кода. Также пайплайн сборки может оказывать негативный эффект на размер из-за транспиляции в старую версию JavaScript. Иногда меньший размер библиотеки означает, что нужно использовать больше кода по сравнению с альтернативной библиотекой с большим размером, поэтому размер в этом случае не имеет значения.При выборе библиотеки автор рекомендует оценивать скорость инициализации. Меньшая библиотека с плохой скоростью инициализации будет оказывать негативный эффект на всех пользователей без исключения. ВDefront — про фронтенд-разработку и не только
10 Feb 2022, 15:12edited
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 #toolhttps://medium.com/@vantassel.sam/time-travel-debugging-in-svelte-with-delorean-26e04efe9474MediumTime Travel Debugging in Svelte with DeLoreanA new way to debug Svelte appsDefront — про фронтенд-разработку и не только
10 Feb 2022, 09:03
forwarded from @webnya
HTML-элемент <dialog> в Safari 15.4 betaВ рамках инициативы "Interop 2022" в Safari Technology Preview 134 и Safari 15.4 beta была добавлена поддержка HTML-элемента <dialog>. С его помощью можно создавать доступные модальные и немодальные диалоговые окнаhttps://webkit.org/blog/12209/introducing-the-dialog-element/WebKitIntroducing the Dialog ElementAlthough the alert, confirm and prompt JavaScript methods are convenient, they aren’t recommended due to their script-blocking behavior.Defront — про фронтенд-разработку и не только
9 Feb 2022, 19:50
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 #toolhttps:/Smashing MagazineStatoscope: A Course Of Intensive Therapy For Your Bundle — Smashing MagazineStatoscope 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. Editor’s…Defront — про фронтенд-разработку и не только
8 Feb 2022, 20:04edited
Релиз 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 #releasehttpsDefront — про фронтенд-разработку и не только
7 Feb 2022, 17:42edited
Оператор конвейера в 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, больше накладных расходов на память. По этимDefront — про фронтенд-разработку и не только
5 Feb 2022, 08:50
forwarded from @defront_feed
Google разрабатывает новый API для определения предпочтений пользователей для показа релевантной рекламы — Topics API. Его разработка началась после того как предыдущее решение — FLoC — получило негативные отзывы от лидеров индустрии из-за высокого риска фингерпринтинга. Формирование предпочтений в Topics API происходит на стороне клиента, есть возможность отключить Topics API и настроить интересующие темы.https://blog.google/products/chrome/get-know-new-topics-api-privacy-sandbox/
Defront — про фронтенд-разработку и не только
4 Feb 2022, 20:30
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. НакладныеDenoDeno in 2021 | DenoRetrospect of what happened in 2021 and what's coming in 2022Defront — про фронтенд-разработку и не только
3 Feb 2022, 17:59edited
Релиз 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. Благодаря ему была улучшена поддержка очень больших файлов, исправлена проблема со смещениемDefront — про фронтенд-разработку и не только
2 Feb 2022, 17:56edited
Ускорение установки зависимостей с помощью 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-модуля, реализующего кастомную файловую систему для работыDEV CommunityIn-depth of tnpm rapid mode - how we managed to be 10 second faster than pnpmBackground As a front-end veteran, I have to point out that the increasing complexity of...Defront — про фронтенд-разработку и не только
2 Feb 2022, 08:36
За прошедшие две недели в канале для патронов Defront было опубликовано одиннадцать постов:— Оптимизация enum в TypeScript — Как читать спецификации W3C — Опыт улучшения производительности Amazon — Использование Navigation Timing API — Возвращение серверного роутинга — Подход к прохождению технического собеседования — Сравнение разных способов троттлинга сети — Зачем разбираться в рабочих процессах компании — Конфигурация проектов с помощью npm и mrm — Рефлексия по defer и async — Заметки по микрофронтендамСтановитесь патроном канала на Patreon, чтобы получить доступ в Defront Plus (более 350 уникальных постов). Все донаты идут на поддержку канала, покупку еды, аренду квартиры, оплату медицинских услуг и т.п.Спасибо всем, кто читает и поддерживает Defront!https://www.patreon.com/myshov3,460Open in TelegramDefront — про фронтенд-разработку и не только
1 Feb 2022, 17:50edited
Производительность рендеринга в браузерахМэт Перри — автор библиотек Framer Motion и Moion One — рассказал про особенности и трудности создания плавных анимаций.Плавные анимации достигаются за счёт оптимизации рендеринга и использования аппаратного ускорения. При оптимизации рендеринга нужно учитывать, что некоторые свойства приводят к перерасчёту раскладки страницы. Но если эти свойства используются в изолированном контексте, например, с position: absolute, то вполне можно достичь 60 fps. В сети можно найти список этих свойств (CSS Triggers), но он долгое время не обновлялся. Так например, обработка SVG и CSS-свойства filter в Firefox и Chrome уже выносится на GPU, а в Chrome скоро появится поддержка ускорения анимаций clip-path и background-color.Все браузеры для анимаций используют аппаратное ускорение. В Safari оно реализовано с помощью системной библиотеки Core Animation. Онаmotion.devAnimation performance guide | MotionBoost web animation performance by understanding rendering and hardware acceleration. Learn which CSS properties to animate for smooth 120fps+ experiences, how to optimize rendering, and how Motion leverages hardware acceleration for jank-free animations.Defront — про фронтенд-разработку и не только
31 Jan 2022, 16:46edited
Новинки iOS Safari 15.4 BetaApple обычно не делится своими планами внедрения новых 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, есть проблемы с загрузкойfirt.devPush Notifications, WebXR, and better PWA support coming to iOS－firt.devNew APIs, capabilities, bugs, and challenges for Safari and PWAs running in iOS 15.4 and iPadOS 15.4, including Web Push Notifications, WebXRDefront — про фронтенд-разработку и не только
29 Jan 2022, 12:03edited
Сегодня каналу исполнилось три года!Сначала для меня канал был просто интересным занятием, который мотивировал читать что-то новое и делится найденными с коллегами. Сейчас ситуация складывается таким образом, что из-за обострения тоннельного синдрома я не могу идти работать фулл-тайм, и Defront стал моим, можно сказать, спасением. Я очень благодарен, что у меня есть возможность работать над каналом.Также хочу поблагодарить всех, кто читает Defront и поддерживает меня на Patreon. Особенная благодарность всем спонсорам канала — Зарплате.ру, Василисе Версус, Сергею Ufocoder, Андрею Советкину и Mykola Dekhtiarenko.И уже по традиции передаю привет всем дружественным каналам и сообществам (пишите в лс, если кого-то забыл):@webnya — канал про веб-стандарты, новости TC39 и JS, WebAssembly и т.п. @oleg_log — канал про бэкенд-разработку и программирование в целом @ufostation — подкасты иDefront — про фронтенд-разработку и не только
28 Jan 2022, 19:59edited
Оптимизация производительности Angular-приложенийМинко Гечев из Google рассказал про распространённые проблемы производительности Angular-приложений и способы их решения — "4 Runtime Performance Optimizations".— Загрязнение зоны (zone pollution). Возникает в том случае, когда механизм обнаружения изменений запускается асинхронными событиями, не влияющими на состояние основного приложения. Для решения этой проблемы регистрацию событий нужно выносить вне основной зоны Angular с помощью метода runOutsideAngular. Примером загрязнения зоны может быть регистрация обработчика события mousemove для отображения лейблов диаграммы из сторонней библиотеки.— Запуск обнаружения изменений вне границ компонента (out of bounds change detection). Происходит тогда, когда возникновение событий в одном компоненте запускает механизм обнаружения изменений в соседних независимых компонентах. Эта проблемаDefront — про фронтенд-разработку и не только
27 Jan 2022, 19:55edited
Что появилось в CSS после CSS3Крис Койер сделал обзор CSS-фич для тех, кто не следил за развитием языка последние семь лет — "What should someone learn about CSS if they last boned up during CSS3?".С момента появления CSS3 в языке появились: — гриды и флексы для удобной раскладки элементов на странице; — Houdini — набор API для программного расширения возможностей CSS; — новый синтаксис определения цвета без запятой rgb(255 0 0 / 0.5); — кастомные свойства — близкий аналог переменных в препроцессорах var(--accentColor); — preference queries — медиавыражения, использующиеся для адаптации страницы под пользовательские настройки операционной системы; — поддержка вариативных шрифтов для создания страниц с богатой типографикой; — поддержка SVG-путей для определения масок, управления анимацией и обтеканием текста; — CSS-фильтры для определения функций наложения цвета и создания эффектов; —CSS-TricksWhat's New Since CSS3 in 2015? | CSS-TricksCSS3 was a massive success for CSS. No doubt loads of people boned up during that time. How has CSS changed since? Let's count the ways.
Related Channels
Other channels in the same section of the catalogue.
