​​А что там в СССР? Космос и интерфейсы

Автоматизированная система «Человек-машина», 1968 год. Создавалась для эффективного наблюдения операторов за объектом. На экране при нормальной работе системы воспроизводится светомузыкальная картина. Как только в системе происходят какие-либо отклонения, изображение вытесняется красно-белой пульсацией, в музыке появляются неприятные на слух искажения.

Светоиндикационная система «Человек-машина» делалась по заказу Королева, но на космическом борту ее так и не установили: после смерти конструктора заказы были аннулированы. Ее прототип до сих пор можно найти в архиве НИИ «Прометей». Чуть позже, в 1971-м, НИИ «Прометей» все-таки внес вклад в развитие космических экспедиций — подарил космонавтам аппарат, создающий светодинамическую картинку, для психологической разгрузки во время долгих тренировок.

Само НИИ было культовым и было названо так в честь произведения А. Н. Скрябина «Прометей». Подробнее можно почитать на самом сайте НИИ http://prometheus.kai.ru/idei_r.htm

Learn CSS.

#tutorial #course #css
@thedevs

https://kutt.it/PA6Iom

Илья Сидоренко: «Как дизайнеру построить личный бренд»
https://designpub.ru/3e5fb154fb98

Vanilla Thunder: «Как и куда расти дизайнеру»
https://designpub.ru/d7cffa412fe8

Франсуа Хендрикс рассказал о том, как сделать библиотеку, у которой не было бы проблем с три-шейкингом — "How To Make Tree Shakeable Libraries".

Недостаточно поправить конфиг сборки приложения, чтобы бандлер смог выкинуть неиспользуемый код библиотеки. Сама библиотека не должна мешать этому процессу. Eё код должен быть написан с использованием ESM и разбит на большое число небольших модулей, которые экспортируют только один кусок логики. При сборке библиотеки нужно настроить её бандлинг с сохранением структуры. Это нужно делать для того, чтобы бандлеры могли применять оптимизации, опираясь на информацию из поля sideEffects package.json.

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

Очень полезная и большая статья. Рекомендую почитать.

#performance #bundle #library

https://blog.theodo.com/2021/04/library-tree-shaking/

Сходил в гости к веб-стандартам. Обсудили новые версии Node.js, Firefox, Chrome и Safari. Разобрались в том, почему Google борется за быстрый веб. Ну и немного поговорили про Defront.

Выпуск №279. Вадим Макеев, Александр Мышов, Андрей Мелихов про Defront, Firefox 88, Node.js 16, бету Chrome 91, XHR как дискету, внезапный popup, AMP и Core Web Vitals.

Слушайте на Ютубе https://youtu.be/A7HWbbx1qMQ
Ссылки на сайте https://web-standards.ru/podcast/279/

В блоге DebugBear была опубликована статья, посвящённая отладке проблем производительности сайта с помощью Chrome DevTools, — "Profiling site speed with the Chrome DevTools Performance tab".

Вкладка "Performance" в инструментах разработчика может показаться очень сложной. Но если немного разобраться, то с её помощью можно быстро находить проблемы, связанные с производительностью и рендерингом. Например, для поиска запросов, приводящих к изменению страницы, для определения кода, приводящего к перекомпановке страницы, для локализации наиболее "горячих" функций и т.п.

Совет из статьи. Часто возникает ситуация, когда сложно понять взаимосвязи между активностями во время загрузки страницы, так как они происходят почти одновременно. Для упрощения отладки можно "растянуть" по времени эти активности с помощью троттлинга сети и CPU.

Полезная статья. Рекомендую заглянуть.

#performance #debug

https://www.debugbear.com/blog/devtools-performance

Ахмад Шадид написал статью про CSS Container Queries — "Say Hello To CSS Container Queries".

Для управления контекстным отображением компонентов можно использовать медиавыражения, но они не подходят для случаев, когда компонент может быть размещён в контейнерах с разной шириной. Эту проблему решают выражения от контейнера (Container Queries). Благодаря им у нас появляется возможность задавать элементам стили, которые зависят от размера контейнера:

@container (min-width: 400px) {
  .c-article {
    display: flex;
    flex-wrap: wrap;
  }
}

В статье Ахмад показывает на примерах, где могут быть полезны выражения от контейнера: при размещении элементов в грид-раскладке, в карточке профиля, с компонентом пагинации, с элементами форм, при размещении одного и того же компонента с основным контентом и в сайдбаре.

На данный момент выражения от контейнера доступны только в Chrome Canary за экспериментальным флагом.

#css #experimental

https://ishadeed.com/article/say-hello-to-css-container-queries/

Джон Дэвис в блоге WebKit рассказал о новых возможностях Safari 14.1, который зарелизился пару дней назад, — "New WebKit Features in Safari 14.1".

В CSS добавлена поддержка гэпов для флексбоксов. Добавлены индивидуальные свойства трансформации элементов: scale, rotate, translate. Также Safai для macOS теперь поддерживает поля для ввода даты и времени.

В JavaScript появилась поддержка приватных полей и публичных статических полей класса. В Internationalization API добавлены новые методы: Intl.DisplayNames, Intl.ListFormat, Intl.Segmenter. В методе Intl.DateTimeFormat добавлена поддержка опций dateStyle и timeStyle. Имплементирован пропозал WeakRef.

Добавлена реализация Paint Timing API. На данный момент он предоставляет информацию по двум метрикам: first-paint и first-contentful-paint. Web Speech API начал предоставлять средства для распознавания речи. Решены некоторые проблемы совместимости в Web Audio API, добавлены Audio Worklets. Добавлена реализация MediaRecorder API для записи аудио и видео. Появилась поддержка WebM (открытый формат для хранения видео). Улучшена приватность Storage Access API. Добавлен механизм для приватного отслеживания кликов — Private Click Measurement (PCM).

WebAssembly теперь умеет работать с потоками, добавлена интеграция с JavaScript BigInt, добавлен новый sign-extension operator (эта фича реализована автором телеграм-канала @webnya).

В инструментах разработчика изменена раскладка инспектора элементов, была добавлена панель с информацией обо всех шрифтах страницы, в отладчике добавлена поддержка logpoints.

#release #safari

https://webkit.org/blog/11648/new-webkit-features-in-safari-14-1/

Джейк Арчибальд взял небольшую паузу в анализе производительности сайтов команд Формулы-1 и попробовал найти причину медленной загрузки сайта Google I/O — "Performance-testing the Google I/O site".

На слабом устройстве сайт Google I/O загружается за 26 секунд. Основная проблема заключается в том, что это SPA-приложение — для отображения описания докладов, времени и аватарок нужно загрузить около 5Мб JS и JSON. Сайт не использует код-сплиттинг, поэтому в бандл попадает много второстепенного кода. Есть проблемы с загрузкой кода для авторизации — он загружается со стороннего сервера, затрачивая секунду на установку соединения. Также для отображения одной иконки меню загружается относительно тяжёлый иконочный шрифт.

Сайт Google I/O работает почти также медленно как сайт МакЛарен, уступая последнее место сайту Ферарри.

#performance

https://jakearchibald.com/2021/io-site-perf/

Джо Сэпл, Майкл Доусон и Бэттани Григгс из команды разработки Node.js рассказали о том, что нам стоит ожидать от Node.js в будущем — "What's Next, The Future of Node.js".

В Node.js 14 была добавлена экспериментальная поддержка AsyncLocalStorage API, который упрощает обмен данными между асинхронными вызовами. Скоро будут стабилизированы основные части этого API (уже есть готовый пулл реквест).

В Node.js 16 появилась стабильная поддержка Source Maps v3. На данный момент можно включить поддержку сорсмапов для стектрейсов, но работа по их внедрению ещё не закончена.

В рамках добавления поддержки ECMAScript Modules идёт работа над Loader API, с помощью которого можно писать свои лоадреы для трансформации импортируемого кода (например, можно написать лоадер, который будет автоматически транспилировать TypeScript-файлы при их импорте). Также идёт работа над добавлением JSON Modules, WASM Modules и top-level await. Некоторые API уже доступны за экспериментальным флагом.

Планируется добавление Fetch API. Fetch требует много работы, но есть вероятность, что он попадёт в Node.js в конце этого года.

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

#nodejs #talk

https://www.youtube.com/watch?v=vrnToZP47Ro
https://nodejs.medium.com/next-10-years-of-node-js-understanding-the-needs-of-the-node-js-constituencies-2f95a1df6a6f

Недавно была опубликована статья, в которой рассказывается про работу с базой данных на статических сайтах — "Hosting SQLite databases on Github Pages".

Когда нужно организовать доступ к большому массиву данных (в режиме read only), а поднимать полноценный бекенд не хочется, можно воспользоваться решением из статьи. Автор реализовал виртуальную файловую систему для sql.js — WebAssembly-версии SQLite. Движок SQLite думает, что работает с обычным файлом, но все запросы на чтение транслируются в HTTP Range запросы к файлу базы данных на сервере. Для хостинга базы можно использовать GitHub Pages, Netlify и т.п.

Количество загружаемых данных зависит от типа запроса. Если база использует индексы и если запрос возвращает небольшое количество данных, то объём передаваемых данных не будет превышать несколько десятков килобайт.

#webassembly #staticsite

https://phiresky.github.io/blog/2021/hosting-sqlite-databases-on-github-pages/

В блоге CSSSR была опубликована вторая часть статьи про историю фронтенда — "История фронтенда: JavaScript как отражение новой эпохи".

Во второй части рассказывается про историю появления и развития веб-стандартов. HTML и JavaScript пережили похожий процесс: сначала была жёсткая конкуренция браузеров с хаотичным внедрением фич, затем предпринималась попытка стандартизации, которая была отвергнута сообществом (XHTML) или стала неудачной из-за слишком больших амбиций (ECMAScript 4), потом был застой, а затем продуктивная работа вместе с сообществом. HTML и JavaScript стали живыми стандартами, которые обновляются каждый год и поддерживаются всеми браузерами.

Рекомендую почитать статью, если интересуетесь историей развития веба. Ещё есть видеоверсия, но статья интереснее (имхо).

#history #web

https://blog.csssr.com/ru/article/frontend-history-java-script-as-a-reflection-of-a-new-era/
https://www.youtube.com/watch?v=sgyoKkAfGpU (видео)