Автоматическая тёмная тема в Chrome

В Origin Trial Chrome 96 на Android появится поддержка автоматической тёмной темы — "Auto Dark Theme".

Автоматическая тёмная тема — это автоматическая адаптация цвета фона страницы и текста под тёмную тему операционной системы без вмешательства разработчика.

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

Есть возможность отказа от автотемы с помощью метатега <meta name="color-scheme" content="only light">. Также для отключения автотемы на всей странице или отдельных её элементах можно использовать CSS-декларацию color-scheme: only light.

#ux #chrome

https://developer.chrome.com/blog/auto-dark-theme/

Веб-версии Adobe Photoshop и Illustrator

На конференции Adobe MAX 2021 были представлены веб-версии Photoshop и Illustrator. Томас Натстад и Набель Аль-Шама рассказали о технологиях, которые сделали веб-версию Photoshop возможной — "Photoshop's journey to the web".

Веб-версия Photoshop использует WebAssembly и кодовую базу своего старшего брата. Чтобы производительность приложения была хорошей, порт использует новые фичи WebAssembly и Emscripten: многопоточность, SIMD и поддержку обработки исключений. Для поддержки современных дисплеев используется новое цветовое пространство P3 в canvas.

Интерфейс Photoshop построен на веб-компонентах с помощью библиотеки LitElement. В некоторых частях приложения используется React.

Photoshop for Web поддерживает только базовые функции редактирования изображений и комментирование. Также на презентации была представлена веб-версия Adobe Illustrator, но на данный момент она пока недоступна.

Adobe Photoshop и Illustrator работают только в Chrome и Edge.

#webassembly #announcement

https://web.dev/ps-on-the-web/

Оптимизация прокрутки Google Search Console

Йохан Исакссон рассказал, как он улучшил производительность прокрутки большого списка Google Search Console — "How I made Google’s data grid scroll 10x faster with one line of CSS".

Йохан не работает в Google, но много работает с Google Search Console — SEO-инструмент Google. Он обратил внимание, что при прокрутке списка с 500 элементами производительность перерисовки страницы падает до 5-7 fps. Как оказалось, прокрутка большого списка приводит к перерасчёту раскладки тридцати тысяч DOM-элементов страницы.

Для решения этой проблемы Йохан воспользовался CSS-свойством contain, с помощью которого можно изолировать отдельные части страницы, чтобы их изменение не влияло на производительность рендеринга всей страницы:

table {
  contain: strict;
}

После внесённого изменения производительность рендеринга улучшилась в 10 раз.

Хорошая статья. Рекомендую почитать всем, кому интересен пример поиска и устранения проблем производительности рендеринга.

#performance

https://medium.com/@johan.isaksson/how-i-made-googles-data-grid-scroll-10x-faster-with-one-line-of-css-78cb1e8d9cb1

P.S. Благодарю @oleg_log за ссылку на статью

Релиз Next.js 12

Три дня назад была представлена новая мажорная версия Next.js — "Next.js 12".

Next.js 12 по умолчанию использует swc для транспиляции JavaScript- и TypeScript-файлов. Swc — это очень быстрый аналог Babel, написанный на Rust. Благодаря ему время production-сборки стало в пять раз меньше. В три раза уменьшилось время обновления страницы при локальной разработке.

Была добавлена поддержка миддлвар для гибкой модификации HTTP-ответа. В зависимости от входящего запроса можно изменить ответ, добавить новые HTTP-заголовки, сделать редирект и т.п. Миддлвары могут работать на edge-серверах Vercel, улучшая отзывчивость приложения.

Была проведена работа для подготовки к переходу на React 18. В экспериментальном режиме доступны серверные компоненты и новый поточный серверный рендерер с поддержкой Suspense.

Теперь по умолчанию в Next.js используется ESM с поддержкой импорта CommonJS-модулей. Добавлена экспериментальная поддержка импорта модулей по URL.

В компоненте <Image> появилась поддержка формата изображений AVIF. Также компонент автоматически определяет основное изображение страницы, которому нужно передать пропс priority для улучшения метрики LCP.

В рамках нового релиза была опубликована библиотека @vercel/nft (Node File Tracer). Она используются для генерации облегчённых standalone-сборок Next.js-приложений для serverless-окружений и контейнеризации.

В Next.js 12 поисковым ботам будут отдаваться полностью отрендеренные страницы, использующие Incremental Static Regeneration. Обычные пользователи будут видеть интерфейс загрузки страницы.

В ломающих изменениях отказ от Webpack 4, деприкейт опции target, использование <span> вместо <div> в next/image, увеличение минимальной поддерживаемой версии Node.js с 12.0.0 до 12.22.0

#release #jsframeworks #react

https://nextjs.org/blog/next-12

Числа, которые должны быть известны каждому

Пол МакЛелан рассказал о числах, которые должны знать все программисты — "Numbers Everyone Should Know".

По интернету давно гуляет список Питера Норвига со временем тика CPU, доступа к L1, L2-кешам, доступа к памяти и т.п. В статье Пола этот список обновлён и расширен новыми пунктами: временем доступа к L3-кешу, временем передачи TCP-пакета в пределах датацентра, из Америки в Европу и обратно и т.п.

Обновлённый список:
— Тик CPU: 0.3 нс
— Доступ к L1: 0.5 нс
— Стоимость ошибки предсказания ветвления в CPU: 5 нс
— Доступ к L2: 3 нс
— Доступ к L3: 28 нс
— Доступ к памяти (DRAM): 100 нс
— Передача 2 Kб по 1 Gbps-сети: 20,000 нс
— Последовательное чтение 1 Мб данных из памяти: 250,000 нс
— Передача TCP-пакета в пределах одного датацентра: 500,000 нс
— Обращение к SSD: 100,000 нс
— Обращение к магнитному жёсткому диску: 10,000,000 нс
— Последовательное чтение 1 Мб данных из сети: 10,000,000 нс
— Последовательное чтение 1 Мб данных с жёсткого диска: 30,000,000 нс
— Время передачи TCP-пакета из Калифорнии в Европу и обратно: 150,000,000 нс
— Время на написание одного слова: 1 c
— Время на открытие PowerPoint на macOS: 10 с

Величину разрыва между этими цифрами можно прочувствовать в масштабе. Если бы тик CPU занимал одну секунду, то время передачи TCP-пакета из Калифорнии в Европу и обратно составляло бы десять лет, а PowerPoint открывался бы тысячелетие.

#programming

https://community.cadence.com/cadence_blogs_8/b/breakfast-bytes/posts/numbers-everyone-should-know

За прошедшие три недели в канале для патронов Defront было опубликовано пятнадцать постов:

— Проблема новичков-экспертов
— Проблемы использования видео в вебе
— Как ускорить сборку TypeScript-проекта
— Зачем инженерам пробовать себя в консалтинге
— Руководство по git без использования команд git
— Почему в фреймворках не используются веб-воркеры
— Читабельный HTML в 100 байт CSS
— Таинственный Script Error
— Непростой выбор между SPA и MPA
— Как заручиться поддержкой коллег
— Проблемы критического CSS
— Системные цвета в CSS
— Ванильный JavaScript как замена jQuery
— Оптимизация производительности автодополнения
— WeakMap на практике

Становитесь патроном канала на Patreon, чтобы получить доступ к дополнительным постам в Defront Plus. Все донаты идут на поддержку канала, оплату медицинских услуг, покупку еды, аренду квартиры и т.п.

Спасибо всем, кто читает и поддерживает Defront!

https://www.patreon.com/myshov

Потенциальные проблемы с Firefox 100 и Chrome 100

Близится день, когда Firefox и Chrome дойдут до сотой версии. Это не просто красивая цифра, но и потенциальная причина ошибок.

Немного истории. Opera стала первым браузером, дошедшим до версии 10. В альфа-версии десятки поломались сайты, неправильно парсившие User-Agent. Их логика парсинга предусматривала только одну цифру в версии, поэтому Opera 10 превращалась в Opera 1, ломая отображение сайта.

Подобная ситуация может случиться с Firefox 100 и Chrome 100, если логика парсинга не предусматривает трёхзначные числа. Поэтому разработчики браузеров рекомендуют проверить работу своих проектов с изменением версии браузера в User-Agent. Разработчики Chrome пошли немного дальше и сделали специальный флаг #force-major-version-to-100, который автоматически подымает версию Chrome до 100.

#announcement #web

https://developer.chrome.com/blog/force-major-version-to-100/
https://www.otsukare.info/2021/04/20/ua-three-digits-get-ready

Подходы использования SVG и их производительность

Тайлер Ситка сравнил производительность разных методов использования SVG на HTML-страницах — "Which SVG technique performs best for way too many icons?".

Самым производительным способом добавления SVG стал элемент <img> c data URI — 72 мс для 1000 иконок. Но при таком подходе невозможно стилизовать SVG с помощью внешних стилей. Наиболее сбалансированным способом для оптимизированных SVG оказался инлайнинг — 87 мс для 1000 иконок. Самым медленным способом стала CSS-маска — 150 мс.

Тайлер также пишет о том, что не нужно сильно задумываться о выборе подходящего метода, если на странице используется менее сотни SVG-изображений. Используйте тот подход, который нравится.

#benchmark #performance #svg

https://cloudfour.com/thinks/svg-icon-stress-test/

Релиз Angular 13

Сегодня вышла новая мажорная версия Angular. Марк Тексон рассказал о всех нововведениях релиза — "Angular v13 is now Available".

— С этой версии больше недоступен View Engine — движок рендеринга, предшествующий Ivy. Благодаря его удалению открываются возможности сокращения времени компиляции, которые будут реализованы в будущем

— Изменён формат внешних модулей Angular Package Format (APF): добавлена поддержка ES2020, удалена необходимость использования ngcc

— Включена поддержка сохранения кеша сборки для ускорения скорости бандлинга. Прирост составляет 68%. Также в Angular CLI v12.2 была добавлена поддержка esbuild, который ускорил время сборки production-бандлов на 10%

— Упрощено API для динамического создания компонентов

— По умолчанию включена инвалидация окружения при прогоне каждого теста

— Улучшена доступность компонентов Angular Material

— RxJS обновлён до версии 7.4, TypeScript обновлён до версии 4.4

— Прекращена поддержка IE11. Пользователи Internet Explorer могут продолжать использовать Angular 12. Он будет поддерживаться до ноября 2022 года

#angular #release #jsframeworks

https://blog.angular.io/angular-v13-is-now-available-cce66f7bc296

​​Какие инструменты помогут соответствовать GDPR
Это — подборка утилит, литературы и фреймворков, которые помогут соответствовать требованиям GDPR. Под катом — бесплатные продукты от стартапа Algolia, сервисы которого использует Twitch, а также несколько открытых и проприетарных решений.

[ Статья ]

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

Мы с Ксенией Авдей на примерах её клиентов разобрались, в какие карьерные трудности чаще всего попадают IT-специалисты и как их можно преодолеть.

Реальные истории из жизни трёх людей: с каким запросом пришли к специалисту, какие проблемы видит консультант, как они работают, какой результат, сколько стоит. Сережа, Арина и Маша прям встают перед глазами.

Один из самых практичных эпизодов нашего подкаста: можно примерить трудности и пути решения на свою жизни.

Эпизод под пейволом, слушайте и подписывайтесь в Apple подкастах и на Патреоне.

​​Новый макбук про: хорошая веб-камера, адски большая батарейка, очень хороший экран, встроенный HDMI, ещё более мощный ARM-чип и новая зарядка (magSafe is back).

Ну и супер красивый лендинг-заглядение, как всегда https://www.apple.com/macbook-pro-14-and-16/

Я лично останусь со своим arm-эйром, потому что таскать легче и он уже достаточно хороший.

В одном из эпизодов «Запуска завтра» герой рассказывал, что работа над CRM-системой в Microsoft была самой скучной в его жизни.

Система управления взаимоотношениями с клиентами, «си эр эмка» (Customer Relationship Management) есть в любом бизнесе.

При этом среди технарей считается, что в ее создании нет ничего интересного. В новом эпизоде говорю с человеком, который придерживается противоположной точки зрения.

Юлиана Гордон была CRM-директором Ozon, внедряла CRM в Мегафоне и МТС, а сейчас занимается своей школой электронной торговли iWENGO. Юлиана объясняет, почему CRM выхватывает суть бизнеса и занимаясь ею с умом не может быть скучно.

Сам бы не поверил, но увлекательный эпизод подкаста про CRM 🤯

Слушайте и подписывайтесь: Apple, Google, Castbox, Spotify, Яндекс, Overcast, веб-версия.

​​Прокуроры 13 штатов США подали в суд на гугл. На днях стала доступна практически полная версия иска.

Обвиняют компанию в нарушении антимонопольного законодательства. Мол, гугл контролирует рынок онлайн-рекламы (что, конечно, правда) и использует своё доминирующее положение для уничтожения конкурентов и получения сверхприбылей.

Чтобы вы понимали, гугл — это самая крупная площадка обмена рекламой. То есть сайты говорят гуглу, какие у них есть рекламные места, а рекламодатели — какую они рекламу хотят показать. Гугл — аукционный дом. Причем аукцион происходит каждый раз, когда вы заходите на сайт, где увидите рекламу, буквально за миллисекунды. То, как работает эта система — отдельная интересная тема.

Всё бы ничего, но гугл видит все ставки и, используя подставные фирмы, завышает цены на рекламу (стр. 56). При этом, гугл блокирует возможность сайтов использовать другие обменные площадки (аукционные дома) (стр. 50).

Когда же гугл позволяет использовать другие обменные площадки, он говорит, что аукцион выиграла его собственная площадка, даже когда её цена ниже, чем цена на конкурирующей площадке (проект Jedi, джедай, стр 5).

Когда рекламная индустрия придумала способ обойти эти проблемы, гугл заключил секретный договор с фейсбуком, по которому было оговорено, какую часть лотов будет «выигрывать фейсбук» (проект Blue Jedi, синий джедай, стр 81). Сами сотрудники гугла знали, что это незаконно и писали об этом во внутренней переписке.

Вообще, собственная аукционная площадка позволяет гуглу забирать себе до 43% стоимости рекламного места, что довольно дико (стр. 93). Представьте, что такое бы происходило на фондовой бирже.

Помните AMP, который гугл подавал под соусом, что это — единственный способ сделать интернет-страницы побыстрее? Оказывается, проект использовался как раз для уничтожения конкуренции аукционных площадок. И сайты с AMP стали зарабатывать на 40% меньше, чем без AMP (стр 92).

Кроме обменных площадок, рекламодатели используют специальные «инструменты покупки рекламы» (ad buying tools). Так вот, у гугла была специальная программа Бернанке (в честь знаменитого главы ФРС), которая помогала пользователям инструментов покупки рекламы гугла выигрывать, даже если их ставка была ниже, чем у конкурентов, использующих внешние инструменты (стр 57).

Помните, нам говорили, что кукисы — это механизм слежки и давайте его ограничим по максимуму? Гугл только за, потому что тогда единственным способом трекать пользователей останутся внутренние механизмы браузера. А тут у гугла и свой браузер есть — хром. У них был целый проект NERA, который придуман для того, чтобы сделать из интернета «walled garden», как у фейсбука, где они будут не только одним из игроков, а полным владельцем рынка. (стр 94). Свежая версия этого проекта называется Privacy Sandbox. Идея та же самая — через блокирование кукисов (приватность!) убиваем всех конкурентов и продаем рекламу только сами. (стр 96).

В общем, жира там — на целый вагон. Я пересказал только самые понятные и броские места. Интересно, чем закончится дело. 🍿

Как устроена мобильная связь?

5G, LTE, отели базовых станций, антенны, мобильные операторы, аукционы частот, роуминг и сетевые уязвимости. О сотовой связи говорим с основателем компании Fairwaves Александром Чемерисом.

Саша делится историями, как создавал сотовые сети в глухих африканских деревнях и для мексиканских горцев (не шутка).

Слушайте и подписывайтесь: Apple, Google, Castbox, Spotify, Яндекс, Overcast, веб-версия.

https://facebookconnect.com/ — сегодня вечером презентация Facebook, видимо, про Metaverse и новый бренд.

Давно хотел запилить свой гайд по Берлину для друзей, а тут почти случайно в Клубе завелась такая движуха, где люди пишут путеводители по своим городам и получается охуенно.

Мы тут всего три года, но обгуляли, обтусили или обкатали на велосипедах, наверное, каждую улицу внутри кольца, завели знакомых (включая странных), плюс опыт ребят из How to Berlin'а дал понять какие вещи новичкам понятны сразу, а какие откровения приходят только через год.

Целью было нарисовать чуть более адекватную картинку, чем популярное айтишное «рррря, тут веддинг, везде турки, мусор, наблёвано, дёнер этот ваш рассыпается, клаб-мате говно, ну нахер, я убегаю в центр искать ирландский паб».

Но при этом помнить, что половина моих друзей уже 30-летние диды, и их нужно беречь, давать им крафтовую ИПУ и не показывать вывески на арабском :)

Вроде получилось. Своим друзьям я точно буду высылать гайд первым делом, им зайдет, а вот остальным не знаю. Пишите свои гайды!

P.S: Султи, пиши уже про Ригу!

https://vas3k.club/guide/berlin/