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

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

6354 @defront

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

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

    Что появилось в 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-фильтры для определения функций наложения цвета и создания эффектов; — поддержка Shadow DOM для стилизации кастомных элементов. #css https://css-tricks.com/whats-new-since-css3/
    What's New Since CSS3 in 2015? | CSS-Tricks

    CSS3 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.

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

    Let's Encrypt из-за неточностей имплементации валидации отзывает сертификаты, которые были выпущены в течение последних 90 дней. Отзыв произойдёт 28 января и затронет примерно 1% пользователей сервиса. community.letsencrypt.org/t/2022-…d/170450
  • Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только

    Обнаружение регрессий производительности Ангус Кролл из Netflix рассказал о методах, которые используются его командой для обнаружения регрессий производительности — "Fixing Performance Regressions Before they Happen". Для снижения количества ложноположительных событий вместо статических пороговых значений ребята стали использовать алгоритм обнаружения аномалий. Аномалия — это показание метрики, которое превышает стандартное отклонение в n раз на массиве данных за последние m прогонов. В случае Netflix n=4 и m=40. Для обнаружения проблем, которые не приводят к возникновению аномалий, ищут точки, которые находятся на границе двух паттернов распределения данных. Такие точки указывают на конкретные сборки, в которые было внесено изменение, деградирующее производительность. Для их обнаружения используется техника e-divisive на результатах ста последних прогонов. Обе техники используются в тестах производительности, которые запускаются два раза при создании пул-реквеста и его слияния в основную ветку. Благодаря их внедрению количество ложноположительных падений тестов уменьшилось в десять раз. Очень полезная статья. Рекомендую почитать всем, кто занимается производительностью и настраивает мониторинги. #performance netflixtechblog.com/fixing-…602b86fe
    Fixing Performance Regressions Before they Happen

    How the Netflix TVUI team implemented a robust strategy to quickly and easily detect performance anomalies before they a

    Medium
  • Реклама

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

    Опыт ускорения VK На хабре был опубликован транскрипт доклада Александра Тоболя про опыт ускорения VK — "Как мы отказались от JPEG, JSON, TCP и ускорили ВКонтакте в два раза". Оптимизированы были все уровни от выбора нового формата изображений до выбора алгоритма управления передачей пакетов на сервере. Для изображений вместо JPEG стали использовать WebP, для передачи данных вместо JSON — MessagePack, сжатый с помощью zstd. Очень большая часть посвящена QUIC и его особенностям реализации. Самый интересный момент — с помощью QUIC улучшается утилизация пропускной способности клиента. Как побочный эффект это может привести к тому, что некий сервис может занять всю пропускную полосу клиента, затормаживая работу других сервисов. После внедрения всех изменений на 55% ускорилась доставка изображений, количество просмотров увеличилось на 2,7% (на 10,8% для пользователей с медленной сетью), количество просмотров контента увеличилось на 250 миллионов. #performance #http https://habr.com/ru/company/vk/blog/594633/
    Как мы отказались от JPEG, JSON, TCP и ускорили ВКонтакте в два раза

    На протяжении всей жизни мне приходится экономить вычислительные и сетевые ресурсы: сначала были компьютеры с 300 кГц (кило — не гига!) и 32 Кбайт RAM, интернет по dial-up. Потом я решал олимпиадные...

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

    Сравнение производительности Array.push и Array.concat Ши Лин сравнила производительноcть методов .push и .concat у массивов — "Javascript Array.push is 945x faster than Array.concat". Ши разрабатывает фреймворк для автоматического тестирования. У одного пользователя фреймворка скорость выполнения тестов снизилась в несколько раз. Выяснилось, что для работы с DOM-деревом фреймворк собирал все элементы страницы в одномерный массив с помощью .concat. Так как каждый вызов .concat создаёт новый массив, это негативно сказывалось на производительности прогона тестов. В статье есть несколько бенчмарков, которые показывают, что объединение массивов с помощью .push(...arr) на два порядка быстрее .concat(arr). Добавлю свои пять копеек. Заменять .concat(arr) на .push(...arr) стоит только там, где есть проблема, так как на очень больших массивах .push(...arr) выкинет ошибку переполнения стека. #js #performance dev.to/uilicio…cat-1oki
    Javascript Array.push is 945x faster than Array.concat 🤯🤔

    It took six whole seconds to merge 15,000 arrays with an average size of 5 elements with .concat. What the hell is the Javascript's .concat method doing under the hood?

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

    React server components под капотом Чан Ву рассказал про внутреннее устройство React server components (RSC) — "How React server components work: an in-depth guide". Серверные компоненты — это экспериментальный тип React-компонентов, которые не попадают в клиентский бандл и позволяют бесшовно выносить на сервер часть логики приложения. Результатом выполнения серверных компонентов является представление дерева React-компонентов в формате, подходящем для стриминга. В статье подробно разбирается принцип работы RSC, их ограничения и внутреннее устройство. Статья хорошая. Рекомендую почитать всем, кто хочет разобраться в устройстве серверных компонентов. #react #internals blog.plasmic.app/posts/h…nts-work
    How React server components work: an in-depth guide

    A deep dive exploration of React server components under the hood.

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

    Cовременные возможности для работы с JavaScript-модулями Аксель Раушмайер написал статью про современные возможности для работы с JavaScript-модулями — "Publishing and consuming ECMAScript modules via packages – the big picture". Последние версии Node.js поддерживают package exports и package imports. Package exports используются авторами библиотек для настройки путей, по которым будет доступен импорт модулей. Package imports позволяют создавать альясы на пакеты или модули. Их можно использовать для подмены реализации модуля в зависимости от окружения. Package exports и package imports настраиваются в package.json. В браузерах скоро появится поддержка import maps. С их помощью можно создавать альясы, относительно которых будут резолвиться спецификаторы модулей в браузере. Это полезно при доставке кода пользователям в чистом ESM, когда в названии файлов модулей есть хеши. Import maps уже используют в проде авторы почтового клиента hey. #js #esm #nodejs #npm https://2ality.com/2022/01/esm-specifiers.html
  • Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только

    Неожиданное пересечение типов в TypeScript Стэфан Баумгартнер рассказал, в каких случаях могут возникать неожиданные пересечения типов, и что с ними делать — "TypeScript: Unexpected intersections". Неожиданное пересечение типов возникает при обновлении свойств объектов, если в качестве ключа используется переменная с объединением типов. В этом случае для ключа TypeScript будет использовать "наибольший общий делитель" в виде пересечения типов. В примере ниже таким "делителем" будет пересечение string & number, то есть тип never, из-за чего возникнет ошибка типизации:
    interface Person {
      age: number;
      name: string;
    }
    
    function updatePersonByKey(
      person: Person,
      key: keyof Person,
      value: Person[keyof Person]
    ) {
      // тут будет ошибка типизации, так как
      // key превратится в пересечение типов `string & number`
      person[key] = value; 
    }
    
    Также неожиданное пересечение типов может возникнуть после деструктуризации объекта, так как деструктурированные свойства теряют связь с оригинальным типом. Полезная статья. Рекомендую почитать всем, кто использует TypeScript. #typescript fettblog.eu/typescr…sections
    TypeScript: Unexpected intersections

    Sometimes when writing TypeScript, some of the things you’d usually do in JavaScript work a little different and cause some weird, and puzzling situations. Sometimes you just want to assign a value to an object property and get a weird error like “Type ‘string | number’ is not assignable to type ‘never’. Type ‘string’ is not assignable to type ‘never’.(2322)”

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

    Новое дерево доступности в Chrome DevTools Йохан Бей из команды разработки Chrome DevTools рассказал про новое дерево доступности, которое появится в будущих версиях Chrome — "Full accessibility tree in Chrome DevTools". С помощью дерева доступности скринридеры и другие технологии доступности предоставляют средства для работы со страницей. В Chrome 97 и ниже дерево доступности в один момент времени может отображать только выбранный элемент и его потомков. В новой версии Chrome дерево будет отображаться для всей страницы сразу, упрощая поиск элементов, которые недоступны скринридерам. Обновлённое дерево также позволит реализовать новые функции и инструменты для решения проблем доступности. Новое дерево доступности пока доступно только в Chrome Canary. #debug #a11y #internals #devtools developer.chrome.com/blog/fu…ity-tree
    Full accessibility tree in Chrome DevTools - Chrome Developers

    In this blog post we present the new full-page accessibility tree in DevTools, and explain the design and implementation of this tree.

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

    За прошедшие две недели в канале для патронов Defront было опубликовано десять постов: — Паттерны работы в терминале — Преимущества парсинга входных данных — Выводы после 10000 часов программирования — Кто использует Save-Data — Способы упаковки JSON — Оптимизация сложения векторов с помощью WebAssembly — Как работает детектор блокировщиков рекламы — Исключения и значения-ошибки — Улучшение производительности Wix — Советы по обходу ненадёжности типов TypeScript Становитесь патроном канала на Patreon, чтобы получить доступ в Defront Plus (более 340 уникальных постов). Все донаты идут на поддержку канала, покупку еды, аренду квартиры, оплату медицинских услуг и т.п. Спасибо всем, кто читает и поддерживает Defront! https://www.patreon.com/myshov

    Patreon is empowering a new generation of creators. Support and engage with artists and creators as they live out their passions!

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

    Трекинг пользователей Safari 15 с помощью в IndexedDB Мартин Бажаник рассказал про баг Safari, который позволяет узнать, с какими сайтами сейчас работает пользователь — "Exploiting IndexedDB API information leaks in Safari 15". В Safari 15 при любом взаимодействии с IndexedDB из-за ошибки для всех активных сайтов в рамках одной сессии создаётся пустая база с именем запрошенной базы. Так как имена баз для разных сайтов отличаются друг от друга, то по этому имени можно вычислить, какой именно сайт сейчас открыт у пользователя. Данный баг позволяет вычислить Twitter, YouTube, Bloomberg, Alibaba, Netflix, VK, Instagram и другие сайты. Ситуация ухудшается тем, что у YouTube, Google Keep и Google Calendar в названии базы данных находится идентификатор пользователя, с помощью которого можно узнать информацию о пользователе. Ошибка воспроизводится в Safari 15 и во всех браузерах на iOS 15 и iPadOS 15. На данный момент баг в трекере WebKit уже исправлен, фикс скорее всего выкатится со следующим обновлением системы. #privacy #safari #webkit fingerprintjs.com/blog/in…afari-15
    Exploiting IndexedDB API information leaks in Safari 15

    In this article we discuss a software bug introduced in Safari 15’s implementation of the IndexedDB API that lets any website track your internet activity and even reveal your identity.

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

    Открыт опрос по текущему состоянию экосистемы JavaScript. Цель опроса — исследование популярности инструментов и поиск проблемных мест в разработке фронтенда. Опрос можно проходить поэтапно. app.stateofjs.com/survey/…-js/2021
  • Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только

    Новый формат шрифта COLRv1 в Chrome 98 Доминик Рйотшнес и Род Шитер рассказали про COLRv1 — новый формат шрифта c поддержкой цветных глифов — "COLRv1 Color Gradient Vector Fonts in Chrome 98". Существующие форматы шрифтов с поддержкой цветных глифов не очень хорошо подходят для веба. Так размер шрифта формата CBDT/CBLC со всеми эмоджи занимает 9Мб. Из-за этого на сайтах и в веб-приложениях для представления эмоджи вместо шрифтов используют изображения. COLRv1 призван решить эту проблему. Версия шрифта с эмоджи в формате COLRv1 занимает 1.2Мб в распакованном виде и всего лишь 0.6Мб в контейнере woff2. Оптимизация размера происходит за счёт переиспользования глифов с применением трансформаций. Также COLRv1 поддерживает линейные, радиальные и конические градиенты, что открывает новые возможности для типографики в вебе. На данный момент поддержка COLRv1 есть только в бете Chrome 98. #fonts https://developer.chrome.com/blog/colrv1-fonts/
    COLRv1 Color Gradient Vector Fonts in Chrome 98 - Chrome Developers

    In Chrome 98, the Chrome and Fonts teams have added support for COLRv1, an evolution of the COLRv0 font format intended to make color fonts widespread by adding gradients, compositing and blending, and improved internal shape reuse for crisp and compact font files that compress well.

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

    Релиз Firefox 96 Несколько дней назад вышла новая версия Firefox. Самое интересное — изменение поведения кук, добавление Web Locks API, добавление поддержки CSS-свойства color-scheme. Теперь по умолчанию у всех кук устанавливается атрибут SameSite=lax. Это изменение выравнивает поведение Firefox c Chrome и помогает в защите от атак Cross-Site Request Forgery (CSRF). Добавлен Web Locks API. Это экспериментальное API для управления доступом к разделяемым ресурсам между разными сервис-воркерами или табами приложения. Добавлена поддержка CSS-свойства color-scheme. С его помощью реализация тёмной темы для страницы делается в пару строк:
    :root {
      color-scheme: light dark;
    }
    
    В этом примере свойство color-scheme сообщает браузеру о том, что вся страница поддерживает светлую и тёмную тему, и браузер начинает управлять цветами страницы автоматически. В энкодере изображений появилась поддержка WebP. Благодаря этому изменению теперь можно программно экспортировать WebP-изображения из canvas с помощью методов HTMLCanvasElement.toDataURL(), HTMLCanvasElement.toBlob() и OffscreenCanvas.toBlob(). #firefox #release www.mozilla.org/en-US/f…asenotes developer.mozilla.org/en-US/d…eases/96
  • Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только

    Абсолютные импорты в JavaScript Евгений Карагодин написал статью про настройку абсолютных импортов — "Абсолютные импорты в JavaScript". Относительные пути в спецификаторах импортов могут быть неудобны в проектах с глубокой вложенностью директорий. Поэтому были придуманы разные способы для импорта файлов от корня проекта. В статье рассказывается про основные способы упрощения работы с импортами. Про сложность настройки абсолютных импортов в Node.js-проектах c TypeScript и тест-раннерами. Процесс настройки абсолютных импортов должен стать проще после имплементации спецификация import maps, с помощью которой можно управлять резолвингом модулей. На данный момент import maps поддерживаются только в Deno. #js #esm https://blog.ekaragodin.com/TH2jgliMXOO
    Абсолютные импорты в JavaScript

    Так уж сложилось, что в JavaScript импорты относительные. Но в любом более-менее крупном проекте это быстро превращается в ад (relative...

    Teletype
  • Реклама

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

    В поиске лучшего способа балансировки переносов слов Попробовал сегодня по-быстрому сделать удобочитаемые переносы слов заголовков статей на сайте defront. Оказалось, что не всё так просто. Зачем нужна балансировка переносов. Браузеры не заботятся о читаемости текста при переносе слов, поэтому в блогах зачастую можно встретить такие переносы заголовков статей: Причины отсутствия поддержки AVIF в Safari хотелось бы, чтобы текст выглядел так: Причины отсутствия поддержки AVIF в Safari В последнем варианте текст сбалансирован и не отвлекает внимание. Для решения этой проблемы можно воспользоваться готовыми балансировщиками переноса слов. Есть две популярные реализации: от New York Times и от Adobe. Реализация от Adobe для меня слишком тяжёлая, реализация от New York Times полегче, но она хорошо работает только с небольшими объёмами текста. Реализация New York Times для небольших заголовков подходит идеально, также она работает быстрее балансировщика Adobe благодаря использованию простого алгоритма на базе бинарного поиска. Но у неё есть проблема с видимым сдвигом позиции слов. Дениэл Александерсен в статье про форк балансировщика от New York Times предлагает скрывать текст заголовка до тех пор, пока не сработает балансировка, но мне это кажется очень хрупким решением. Если по каким-то причинам скрипт окажется сломан, то пользователь не увидит заголовка статьи. Также есть сомнения, что все скринридеры будут хорошо интерпретировать появляющийся из ниоткуда заголовок статьи. Ещё можно сделать автоматическую вставку <br> в нужном месте разрыва заголовка. На больших экранах заголовки будут выглядеть хорошо, на маленьких экранах в редких случаях перенос будет выглядеть странно: Использование SomeNewApi и OtherNewApi в Node.js Также в стандарте CSS Text Level 4 есть упоминание CSS-свойства text-wrap: balance. Оно было предложено Adobe в 2013 году, и его поддержки до сих пор нет ни в одном браузере. Сначала хотел использовать форк балансировщика New York Times, но его недостатки перевешивают все преимущества. Возможно, что потом попробую покопать в сторону варианта с <br>, но пока оставлю всё без изменений. Балансировка переноса слов — это коварная штука. #html #ux #a11y defront.ru/posts/2…-balance
  • Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только

    Релиз Chrome 97 На прошлой неделе вышла новая версия Chrome. Пит Лепаж и Джеселин Ин рассказали про новинки релиза — "New in Chrome 97". В Chrome 97 по умолчанию включён WebTransport API. С его помощью обеспечивается быстрый обмен данными между клиентом и сервером в сетях с высокими задержками. Поддерживается передача данных без гарантии доставки пакетов с помощью Datagram API и с гарантиями доставки пакетов с помощью Streams API. WebTransport API работает только с HTTP/3. Добавлена поддержка экспериментального метода HTMLScriptElement.supports(). Благодаря ему можно определить, какой вид скриптов поддерживается браузером. В JavaScript-движке у массивов появились методы findLast(), findLastIndex() для поиска элементов с конца. В Chrome DevTools добавлена вкладка "Recorder". С её помощью можно записывать и повторно воспроизводить действия на странице (user flows). Обновлён список эмулируемых устройств. На вкладке "Elements" появилось автодополнение при редактировании HTML. Настройки DevTools теперь можно синхронизировать между разными устройствами. #chrome #release developer.chrome.com/en/blog…hrome-97 developer.chrome.com/blog/ne…tools-97
    New in Chrome 97 - Chrome Developers

    Chrome 97 is rolling out now! There's a new option for sending real time messages between the client and server using Web Transport. You can use feature detection to see what types of scripts a browser supports. JavaScript gets better, and there's plenty more.

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

    Автор npm-пакета colors (20 миллионов загрузок в неделю) в знак протеста добавил в его код бесконечный цикл. Также он удалил исходный код своего проекта faker.js. Таким образом мейнтейнер пытается привлечь внимание к проблеме финансирования open source разработчиков snyk.io/blog/op…rs-faker