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

2021-03-05 05:21:48 В блоге CSSSR была опубликована статья про судьбу первых web-браузеров — "История фронтенда: Браузер, который умел всё".

В статье рассказывается про WorldWideWeb — самый первый браузер, над которым работал Тим Бернерс-Ли и который позднее был переименован в Nexus. Рассказывается про систему организации данных для Macintosh — некий прообраз современного веба, но без поддержки сети. С помощью этой системы была сделана знаменитая игра Myst. Ещё в 1991 году вышла первая версия ViolaWWW — браузер, который поддерживал добавление на страницу апплетов-приложений на языке Viola.

Статья большая. Очень рекомендую почитать, если интересуетесь историей развития веба. Также есть видеоадаптация статьи.

#web #history

https://blog.csssr.com/ru/article/frontend-history-the-browser-that-could-do-everything/


Открыть/Комментировать

2021-03-03 22:07:00 В Chrome 89 была добавлена поддержка import maps. Гай Бедфорд рассказал, какие преимущества несёт эта фича с точки зрения производительности — "Import Maps Release & Module CDN Launch".

Благодаря поддержке import maps можно использовать bare specifiers в импортах. То есть не import something from './path/to/something.js', а import something from 'something'. По сути это есть не что иное, как соответствие спецификаторов и соответствующих им путей до модулей:



Благодаря import maps можно обеспечить кэширование кусков JS-приложения без каскадной инвалидации кода при обновлении нижележащих зависимостей. То есть они открывают возможность эффективного кэширования при инкрементальном обновлении web-приложений.

На данный момент поддержка import maps есть только в Chrome 89. Для других браузеров доступен полифилл.

#js #esm #performance

https://jspm.org/import-map-cdn Открыть/Комментировать

2021-03-03 01:46:15 Сегодня вышел Chrome 89. Пит Лепаж и Джеселин Ин рассказали про новинки релиза.

Добавлена поддержка top level await для JavaScript-модулей.

Стали доступны по умолчанию новые API для работы с железом — WebHID, WebNFC и Web Serial. С их помощью web-приложения могут взаимодействовать с устройствами пользователя без установки драйверов или каких-либо дополнительных программ.

PWA-приложения можно установить только в том, случае когда они поддерживают offline-режим. Ранее была возможность обойти это требование. Начиная с Chrome 89 этот обходной путь будет триггерить сообщение с предупреждением в консоль, а в Chrome 93 будет заблокирован.

Добавлена поддержка Web Share API и Web Share Target API для удобной передачи любых данных из одного web-приложения в другое.

Очень много изменений в инструментах разработчика. Lighthouse был обновлён до седьмой версии. Улучшена работа с куками. Можно ставить точки останова на исключения, вызванные нарушениями Trusted Type. Добавлена поддержка эмуляции устройств со складным экраном и многое другое.

#chrome #release

https://developer.chrome.com/blog/new-in-chrome-89/
https://developers.google.com/web/updates/2021/01/devtools Открыть/Комментировать

2021-03-02 09:51:30 За прошедшие две недели в канале для патронов Defront было опубликовано десять постов:

— Опыт Facebook в уменьшении времени исправления багов
— Как разрабатывается Sublime Text
— Надёжное тестирование производительности
— 10 лет работы над D3
— Почему в Amazon отходят от использования термина "технический долг"
— Оптимальные настройки качества сжатия для WebP и AVIF
— Интервью с Райаном Далом
— Не используйте React.Fragment в переиспользуемых компонентах
— Способы оптимизации загрузки JavaScript-приложений и сайтов
— Мысли о современной web-разработке

Становитесь патроном канала на Patreon, чтобы получить доступ к дополнительным постам в Defront Plus. На данный момент Patreon мой единственный источник дохода; все донаты идут на покупку еды, оплату аренды квартиры и т.п.

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

https://www.patreon.com/myshov Открыть/Комментировать

2021-03-02 00:15:03 Алекс Руденко из команды разработки Chrome DevTools написал статью про добавление поддержки редактирования стилей, создаваемых с помощью CSS-in-JS-библиотек — "CSS-in-JS support in DevTools".

Возможность редактирования CSS-in-JS стилей появилась в Chrome 85. Для поддержки редактирования стили должны быть представлены как статический текст. В случае с CSS-in-JS статического текста нет, так как такие стили размещаются в памяти во внутренней структуре данных CSSOM. Для добавления возможности редактирования их стали преобразовывать в текст. Для синхронизации мутируемых стилей был добавлен новый механизм, который оповещает бэкенд DevTools при изменении стилей с помощью CSSOM API.

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

#internals #chrome #cssinjs

https://developers.google.com/web/updates/2021/02/css-in-js Открыть/Комментировать

2021-02-28 23:10:00 Уил Бойд рассказал про малоизвестные особенности использования псевдоэлементов ::before и ::after — "Diving into the ::before and ::after Pseudo-Elements".

Статья начинается с самых основ использования ::before и ::after. Затем в ней рассматриваются более изощрённые сценарии использования: создание декоративных линий и декоративной ленты, работа с кавычками ( content: open-quote; и content: close-quote; ), использование изображений в content, установка их альтернативного текста ( content: url(logo.png) / 'logo of the site'; ) и т.п.

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

#css

https://codersblock.com/blog/diving-into-the-before-and-after-pseudo-elements/ Открыть/Комментировать

2021-02-28 00:47:22 Нолан Лоусон предлагает следить не только за размерами бандла, но и за другими параметрами, влияющими на опыт работы с сайтом — "JavaScript performance beyond bundle size".

Нолан предлагает обращать внимание не только на размер бандла, но и на стоимость работы кода в рантайме (время парсинга, компиляции и исполнения), на энергоэффективность и объём потребляемой памяти.

Профилировка кода может помочь найти проблемные библиотеки, которые забивают главный поток. Для удобного анализа результата работы профилировщика можно использовать плагин для Webpack — mark-loader. С помощью метода performance.measureUserAgentSpecificMemory, который будет включён по умолчанию в Chrome 89, можно получить информацию о потребляемой памяти с учётом iframe'ов. Для понимания того, насколько сильно сайт съедает батарею, можно использовать профилировщик или Performance Monitor.

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

#performance

https://nolanlawson.com/2021/02/23/javascript-performance-beyond-bundle-size/ Открыть/Комментировать

2021-02-27 09:39:29 В недавно вышедшем Firefox 86 была включён State Partitioning для предотвращения отслеживания пользователей с помощью кук. Йоханн Хофманн и Тим Хуанг рассказали о принципе его работы в статье "Introducing State Partitioning".

Ранее сторонний ресурс (third-party), подключаемый на страницу, мог установить для пользователя уникальную куку, которая использовалась для сбора информации о посещённых страницах. В Firefox 86 этот механизм отслеживания перестал работать по умолчанию, потому что куки начали изолироваться в пределах родительского сайта (first-party).

Теперь сторонним ресурсам надо явно получить подтверждение от пользователя для доступа к общим кукам. Это можно сделать с помощью Storage Access API: метод document.requestStorageAccess используется для запроса доступа, метод document.hasStorageAccess — для проверки текущего статуса доступа.

На данный момент поддержка Storage Access API есть в Safari, Edge и Firefox. В Chrome она доступна за экспериментальным флагом.

#privacy #firefox

https://hacks.mozilla.org/introducing-state-partitioning/ Открыть/Комментировать

2021-02-26 04:07:00 Два дня назад вышел TypeScript 4.2. Дениэл Розенвассер рассказал о всех фичах новой версии.

TypeScript теперь отслеживает использование объединений как альясов типов. Благодаря этому такие альясы отображаются в сообщениях об ошибках, в генерируемых d.ts-файлах и т.д.

В новой версии TypeScript возможно использовать rest-элементы в любой позиции кортежа, но остаётся одно ограничение — они не могут идти после других rest-элементов и до опциональных элементов. Также при деструктуризации кортежей неиспользуемые элементы можно пометить символом подчёркивания _ ( let [_first, second] = getValues(); ), чтобы не возникала ошибка с включённой опцией noUnusedLocals.

Появилась новая опция noPropertyAccessFromIndexSignature. Она отключает возможность использования точки для доступа к тем свойствам объекта, которые определяются с помощью сигнатуры строчного индекса (string index signature).

С сигнатурами конструкторов теперь можно использовать модификатор abstract. Эта фича даёт возможность типизации некоторых ООП-техник.

Если внутри логических выражений с && и || будет находиться функция без её вызова, это будет приводить к ошибке компиляции под флагом --strictNullChecks.

Появилась поддержка флага --explainFiles. С его помощью можно понять, почему файл был включён в процесс компиляции.

Также была включена строгая проверка оператора in, и ослаблены правила взаимодействия между опциональными свойствами и сигнатурами строчного индекса.

#release #typescript

https://devblogs.microsoft.com/typescript/announcing-typescript-4-2/ Открыть/Комментировать

2021-02-24 23:56:27 Вчера вышел Firefox 86. Крис Миллс рассказал про основные новинки релиза — "A Fabulous February Firefox — 86!"

Появилась поддержка CSS псевдокласса :autofill. С помощью этого псевдокласса можно кастомизировать после его автозаполнения.

Добавлена поддержка конструктора Intl.DisplayNames для консистентного перевода регионов, языков и начертаний.

В бете Firefox появилась поддержка CSS-функции image-set() для создания отзывчивых изображений на уровне CSS.

Стала удобнее отладка iframe'ов в инструментах разработчика — добавлена кнопка, с помощью которой можно выбрать контекст отладки.

#release #firefox

https://hacks.mozilla.org/2021/02/a-fabulous-february-firefox-86/ Открыть/Комментировать