Перевод серии статей Mariko Kosaka: Устройство современного веб-браузера Chrome

#browser

Часть 1 (CPU, GPU, память, архитектура браузера)
Часть 2 (что происходит во время навигации)
Часть 3 (парсинг, вычисление стилей, Layout, отрисовка)
Часть 4 (События ввода из виджетов браузера)

Типы шаблонов строк в typescript 4.1

Тип шаблона строки имеет тот же синтаксис, что и строки-шаблоны в JavaScript, но открывает большие возможности для типизации.

#typescript

Пример типизации ключа для функции get

К статье(eng)

Новые фичи в вебе за 2020, которые вы могли пропустить:

— IntersectionObserver V2 (позволяет веб-приложениям асинхронно следить за изменением пересечения элемента с его родителем или областью видимости документа viewport)
— Screen Wake Lock API (позволяет предотвратить затемнение или блокировку экрана устройствами, когда приложение должно продолжать работу)
— CSS :any-link селектор (стилизует каждый элемент <a>, <link>, <area>, в котором определен href)
— CSS content-visibility (указывает браузеру какую разметку не отрисовывать, для ускорения отрисовки видимой части контента)
— CSS ::marker (применяет стили к маркеру элемента списка, которые обычно содержит значок или номер)
— URL Scroll-To-Text Fragment (скролл к фрагменту текста на странице)
— Gap для Flexbox (пропуски, как в GRID)
— CSS Revert (откат стилей назад по каскаду на шаг)
— AVIF (новый формат картинок с очень хорошим сжатием и небольшой потерей качества)

#browser_api #css

К статье(eng)

Туториал по Gitlab CI: сборка и публикация образа docker в AWS ECR(Amazon Elastic Container Registry)

#ci_cd #docker

К туториалу(eng)

Обзор JavaScript Symbol

— iterator для итерации объектов
— hasInstance для настройки instanceof
— toPrimitive для преобразования объекта в примитив
— toStringTag для создания стандартного описания объекта
— species для создания производного объекта
— match, replace, search, split для создания регулярного выражения в форме объекта
— isConcatSpreadable для преобразования объекта в массив

#javascript #symbol

К статье(rus)

Декораторы JavaScript с нуля

Декоратор — это просто способ обернуть функцию другой функцией, чтобы расширить ее существующие возможности

#javascript #decorator

К статье(rus)

5 вариантов для рефакторинга if else:
— дефолтные значения параметров
— оператор или ‘?:’
— Оператор объединения с null '??'
— Оператор опциональной последовательности ‘?.’
— return без последнего else

#javascript

К статье(eng)

Полный видеокурс по React(10 часов) от freeCodeCamp

#react

Смотреть курс(eng)

Josh W. Comeau: “Вы знаете эту раздражающую вещь, когда вы прокручиваете до анхора, а ‘липкий’ заголовок сайта скрывает его?”

Это можно исправить с помощью одного css свойства:
.heading {
scroll-margin-top: 72px;
}

#css

К твиту

Использование Babel для статического анализа JSX

В статье реализуется небольшой плагин для babel, разбирающий дерево элементов в jsx

Так же в codesandbox приводится пример использования такого плагина вместе с react-live

#babel #react

К статье(eng)

Codesandbox

Прокачиваем навыки CSS: GRID

Статья от Яндекс Практикума будет полезна тем, кто только начинает осваивать GRID

#css #grid

К статье(rus)

Набор задачек разного уровня по работе с типизацией

Одна из задачек:

Реализовать встроенный в typescript Pick<T, K> generic без использования его.

Разработать тип, с выбором полей K из T

Например:

interface Todo {
title: string
description: string
completed: boolean
}

type TodoPreview = MyPick<Todo, 'title' | 'completed'>

const todo: TodoPreview = {
title: 'Clean room',
completed: false,
}

#typescript

Github

В libjpeg-turbo сделали большое улучшение прогрессивного рендеринга JPEG. Теперь он шелковисто-гладкий, без блоков.

Jake Archibald: “Это впечатляет! Вы можете увидеть блочность декодирования JPEG Это изменение исправляет это, делая его приятным и плавным.
libjpeg-turbo - это декодер, используемый Chromium и Firefox, возможно, и другими.”

Jake Archibald: “В той же демонстрации вы можете увидеть рендер JPEG до того, как будут доступны какие-либо данные цвета. Это тоже будет исправлено и картинка не будет отображаться, пока не будут доступны данные со всех каналов.”

К демонстрации

К твиту

Перевод статьи Гарри Робертса: “Реальная эффективность Brotli”

В статье приводятся сравнения Gzip и Brotli, подробности про передачу пакетов по TCP, а также советы, как провести сравнения на своих проектах

#brotli #gzip

К переводу

К оригиналу

Перевод статьи Кэтти Сайлор-Миллер: “Шумиха вокруг Core Web Vitals”

В статье рассказывается, насколько важны показатели Core Web Vitals для производительности и seo, стоит ли их использовать и отказаться от остальных метрик.

#performance

К переводу

К оригиналу

Прощай, Web-API

В статье рассматривается подход, при котором не надо реализовывать REST/GraphQL взаимодействие в своем приложении, а можно переиспользовать одну и ту же модель на клиенте и сервере. Такой подход становится возможным с набором библиотек layr

#javascript #api #architecture

К статье(eng)