Валерий Карпов написал пост про альтернативное использование JSX-синтаксиса — "An Overview of JSX With 3 Non-React Examples".

Babel по умолчание транспилирует JSX в вызовы метода React.createElement, но его можно настроить так, чтобы на выходе был вызов любой другой функции. Это можно сделать в .babelrc (будет применяться для всего транспилируемого кода) или с помощью прагмы /** @jsx otherFunction */ (будет применяться только для того файла, где эта прагма находится. В статье рассказывается, как можно описать бинарное дерево, определение роутов для Express и схемы для Mongoose, используя JSX и прагму.

Идеи интересные. Но лично мне не очень нравится подход с транспиляцией JSX-кода для Node.js.

#jsx #experimental

http://thecodebarbarian.com/overview-of-jsx-with-non-react-examples.html

Вчера вышел релиз Yarn 2. Маэл Нильсон рассказал про все возможности новой версии — "Introducing Yarn 2!".

Первая версия переходит в режим поддержки и переезжает в yarnpkg/legacy, новая версия будет жить в репозитории yarnpkg/berry. Для облегчения процесса миграции разработчики подготовили Migration Guide.

Была реализована идея Zero-Installs, которая включает в себя много функций, для того чтобы все зависимости были доступны вне зависимости от внешних факторов. По сути теперь возможно без проблем закоммитить кэш yarn в git (гораздо эффективнее чем версионирование node_modules) и все зависимости будут доступны сразу после клонирования репозитория.

Очень много изменений в воркспейсах. Упрощена установка зависимостей. Добавлена команда yarn workspaces foreach, которая выполняет команду для всех воркспейсов. Для упрощения релизов пакетов монорепы добавлен новый релизный воркфлоу с помощью команды yarn version (пока в экспериментальном режиме). Появилась очень интересная фича — workspace constraints — правила на языке Пролог, которые позволяют синхронизировать зависимости воркспейсов.

Yarn 2 поставляется вместе с простым интерпретатором командной строки (подобно sh), благодаря этому установочные скрипты будут работать независимо от операционной системы. Lockfile теперь использует yaml. Импорт зависимостей, не указанных в package.json, теперь запрещён. Улучшили вывод в консоль. Добавили команду yarn dlx для загрузки и выполнения пакетов. Добавили поддержку протоколов patch: и portal:.

Из внутренних изменений — Yarn перешёл на модульную архитектуру, кодовая база была переписана с Flow на TypeScript.

#yarn #release #tool

https://dev.to/arcanis/introducing-yarn-2-4eh1

Internet Explorer работал на движке Trident. После перехода Edge на Chromium Trident можно считать историей. Кристиан Шэфер написал большую статью про самые интересные возможности, которые были доступны в этом движке — "Today, the Trident Era Ends".

Из самого интересного. Был реализован стандарт VML для работы с векторной графикой, который позже был смёржен c PGML в другой стандарт — SVG. Была возможность вставлять JavaScript-код прямо в css, например, с помощью этой фичи можно было эмулировать псевдоэлементы before и after, до того момента как они появились в IE8. Были доступны фильтры и бесшовные переходы между страницами.

В конце статьи Кристиан размышляет о том, почему многие фичи не были стандартизированы. Меня немного удивило, что он не упомянул отсутствие в Microsoft общего видения развития web-платформы. Microsoft тогда была совсем другой компанией, которая преследовала другие цели. На hackernews есть комментарий по этому поводу:

For others who weren't aware, "embrace, extend, extinguish" was an explicit strategy discussed internally at Microsoft for gaining control of the internet. Though I think there are real innovations discussed in the article, the portrayal of Microsoft being an altruistic actor trying to get others to adopt their tech is downright dishonest with what we know about their internal discussions of their motivations and strategy at the time.

В общем, что было, то было, но объективности в статье немного не хватает.

#ie #history

https://news.ycombinator.com/item?id=22147405
https://schepp.dev/posts/today-the-trident-era-ends/

Прочитал статью Андрея Мелихова про погоню за производительностью в JavaScript-приложениях — "Микрооптимизации производительности и JavaScript".

Андрей в статье на хороших примерах показывает, почему разработчики js-движков призывают писать идиоматичный код. Причина в том, что работающие сегодня оптимизации завтра могут стать деоптимизациями из-за обновления движка или api платформы. Если преимущество в несколько миллисекунд, действительно, важно для проекта, то только тогда стоит задуматься об оптимизациях или о переписывании узкого горла на более низкоуровневом языке.

Добавлю ещё своих мыслей. В те годы, когда в Node.js были популярны микрооптимизации, появился шуточный термин "CrankShaftScript" (CrankShaft движок v8, который использовался в Node.js до версии 8.3). Этим термином называли js-код, который был написан так, чтобы JIT генерировал быстрый машинный код. Когда v8 перешёл на Turbofan, эти оптимизации стали бесполезны, так как новый JIT-компилятор научился генерировать эффективный машинный код из идиоматичного js-кода.

Хочу закончить пост фразой из статьи: "Иначе говоря, не нужно оптимизировать там, где ещё нет проблемы."

#js #performance #musings

https://medium.com/devschacht/optimizations-and-javanoscript-f8e060d3eae3
https://stackoverflow.com/questions/44764777/what-is-crankshaftnoscript-in-node-js

Продолжаем тему преждевременных оптимизаций. Пару дней назад Никита Прокопов поделился своими мыслями по поводу известного высказывания "Premature optimization is the root of all evil".

Основная идея статьи в том, что много разработчиков воспринимают эти слова буквально, оставляя вопросы производительности на самый последний момент. Может показаться, что это контрастирует с прошлым постом в канале, но нет. В посте Андрея речь идёт про микрооптимизации, в посте Никиты — про архитектуру приложения. Если архитектура приложения с самого начала была неудачна, то скорее всего не получится без серьёзной доработки или переписывания кода ускорить готовое приложение.

Снова хочу закончить пост цитатой из статьи.

Then, if you are really serious about your final program’s performance, every decision must be made with performance in mind. [...] These sort of decisions are easy to make early on, but impossible to change later.

#programming #performance #musings

https://tonsky.me/blog/performance-first/

Ровно год назад появился Defront. Канал начался с простой идеи — читать минимум одну статью каждый день и делать небольшой tldr, чтобы в будущем быстро находить нужные статьи. Но несколько недель спустя стало понятно, что канал несёт пользу не только мне, но и сотням разработчиков, а сейчас уже почти трём тысячам.

Хочу поблагодарить за помощь в развитии канала:
Сергея Рубанова (@juliarderity — очень крутой канал про web-стандарты и новинки web'а от участника TC39)
Олега Ковалёва (@oleg_log — самый лучший канал про бэкенд и go)

И, конечно, передаю привет всем дружественным каналам и сообществам (если кого-то забыл, пишите в лс):
@we_use_js @cyberhermitage
@sysadmin_tools @overtimehate
@odinraznepitonist @ithueti
@UkropsDigest @evodevclub
@lord_alfred @ch_11
@schopenhauer_was_right
@testerinlife @ufostation
@javanoscript_ru @css_ru
@forwebdev @winterview

Спасибо всем за помощь и поддержку! Следующий год будет ещё лучше.

P.S. Если считаете нужным, можете сделать подарок каналу и рассказать про Defront своим друзьям, коллегам и подписчикам.

https://twitter.com/myshov/status/1222444224571899905

Недавно команда eBay рассказала про опыт оптимизации своего сайта и приложений. Эдди Османи сделал рекап статьи в форме советов, которые могут быть полезны для всех проектов — "Shopping for speed on eBay.com".

Для eBay увеличение производительности было основной инженерной инициативой в 2019 году. Она затронула все части проекта: фронтенд, бэкенд и нативные приложения. Вот, что мне показалось наиболее интересным. Каждое ускорение страницы результатов поиска на 100 мс увеличивало число отправленных в корзину товаров на полпроцента. Данные для сагестера раздаются с помощью CDN, для этого пришлось пожертвовать персонализацией подсказок. Очень изобретательно подошли к ускорению отображения содержимого above-the-fold. В архитектуре системы есть слой "Experience Services". Этот слой отвечает за быструю отдачу данных для сущностей, которые попадают во viewport устройства пользователя при инициализации страницы (для web) или view (для нативных приложений). Такое решение позволило отображать данные быстрее при открытии страницы. Контент ниже above-the-fold подгружается лениво или дополнительными чанками.

В статье есть много интересных решений. Рекомендую почитать.

#performance #experience

https://web.dev/shopping-for-speed-on-ebay/

Сэмуэль Мэддок — автор проекта Metastream — пару недель назад рассказал про текущую ситуацию разработки альтернативных проектов, поддерживающих зашифрованный видеостриминг, — "The End of Indie Web Browsers: You Can (Not) Compete".

Web разрабатывался как открытая платформа. Это означает, что все решения и стандарты открыты, и любой может их использовать без лицензионных отчислений. Создание стандарта Encrypted Media Extensions (EME) пошло вразрез с этой традицией. EME — обязательный компонент, который необходим для работы стриминговых сервисов, продающих лицензионный контент (Netflix, Hulu, и т.п.). Для того чтобы альтернативный браузер смог воспроизводить такой контент, он либо должен получить подтверждение от Google, либо заплатить Microsoft 10000$. Также теоретически можно реализовать этот компонент самостоятельно, но это требует координации с третьими сторонами, что альтернативным проектам может быть не под силу.

Я лично не против лицензионного контента в web'е. Но сложность, с которой сталкиваются альтернативные проекты при внедрении EME, вызывает сомнения в достаточной проработанности стандарта как стандарта, который является часть открытого web'а.

P.S. А может не всё так плохо? Если есть чем поделиться, пишите в @defrontchat

#browser #drm #musings

https://blog.samuelmaddock.com/posts/the-end-of-indie-web-browsers/
https://habr.com/en/post/485918/ (перевод)

Добрался до статьи Андрея Ситника про допущенные ошибки в советской космической программе, и чему они могут научить — "What I learned as a developer from accidents in space".

В статье разбирается несколько реальных эпизодов. Самый интересный (и пугающий) — возвращение Андрея Волынова на Землю 18 января 1969 года. Его корабль, как все Союзы состоял из трёх отделяемых модулей. Во время приближения к Земле сервисный модуль не смог отсоединиться. Из-за этого корабль начал входить в атмосферу в неправильной позиции — корабль начал гореть. Космонавт начал описывать вслух все звуки, которые он слышал и вибрации, которые чувствовал, в надежде, что записывающая аппаратура сохранит все данные, для того чтобы избежать подобной трагедии в будущих полётах. Но всё закончилось хорошо — космонавт уцелел. Тут можно провести аналогию. Если вы вдруг столкнулись с какой-либо проблемой в сторонней библиотеке, например, сделали опечатку в конфиге и не получили предупреждение, подумайте над тем, чтобы завести issue или открыть пулл реквест — это поможет другим разработчикам при работе с библиотекой в будущем.

Статья очень интересная. Рекомендую почитать всем.

#programming #musings

https://evilmartians.com/chronicles/what-i-learned-as-a-developer-from-accidents-in-space

Рич Харрис — создатель svelte и rollup — пару дней назад рассказал про подход для создания js-free графиков, который был проверен в бою на сайте New York Times, — "A new technique for making responsive, JavaScript-free charts".

Идея состоит в том, чтобы генерировать noscript-разметку диаграммы на сервере. Весь текст и оси создаются с помощью обычного css и html, для того чтобы избавиться от искажений при изменении размера контейнера. То есть окончательная диаграмма представляет из себя "бутерброд" из html и noscript. Для упрощения создания подобных графиков Рич создал библиотеку Pancake, которая работает поверх Svelte. Благодаря ей создаваемые диаграммы можно прогрессивно улучшать, добавляя интерактивность после инициализации js.

Pancake не является серебряной пулей — при большом количестве отображаемых данных есть проблемы с производительностью. Рич пишет, что планирует добавить поддержку рендеринга с помощью <canvas>.

#chart #library #noscript #svelte

https://dev.to/richharris/a-new-technique-for-making-responsive-javanoscript-free-charts-gmp

В блоге v8 появилась статья про использование SIMD в WebAssembly — "Fast, parallel applications with WebAssembly SIMD".

SIMD (Single Instruction, Multiple Data) — набор низкоуровневых инструкций процессора, которые позволяют распараллеливать обработку данных в рамках одного ядра. SIMD используется для ускорения работы кодеков, алгоритмов обработки изображений, компьютерного зрения и т.п. Чтобы web-приложения могли использовать SIMD-операции, разрабатывается расширение стандарта WebAssembly. В окончательном стандарте набор инструкций будет ограничиваться только теми инструкциями, которые можно использовать вне зависимости от архитектуры процессора.

Разработчики v8 представили экспериментальную реализацию предложения, благодаря ей демо отслеживания жестов рук ускорилось в пять раз. Демку можно запустить в последней версии Chrome, включив "WebAssembly SIMD support" в chrome://flags/.

#webassembly #v8

https://v8.dev/features/simd
https://storage.googleapis.com/mediapipe-viz.appspot.com/wasm-demos/hand-tracking-simd/hand_tracking_demo.html

Орта Терокс написал статью про опыт перевода основного сайта TypeScript на Gatsby — "Why the TypeScript team is using Gatsby for its new website".

Старая версия сайта собирается с помощью Jekyll. Это хороший инструмент, но он плохо масштабируется — на сотнях статей, сборка сайта занимает очень много времени. С учётом того, что на сайте TypeScript могут появиться переводы на разные языки и новые статьи, Jekyll не самое подходящее решение. У Gatsby таких проблем с производительностью нет. Дополнительно его можно подружить с TypeScript, и весь код страниц будет проверяться статически. В статье есть небольшая инструкция, как это сделать.

Если работаете с Gatsby и планируете прикрутить к нему TS, то эта статья может быть полезна.

#gastby #react #typenoscript

https://www.gatsbyjs.org/blog/2020-01-23-why-typenoscript-chose-gatsby/

Сегодня на хабре появилась статья Александра Воронянского про опыт модернизации фронта Маркета — "Как переписать фронтенд нагруженного проекта и не потерять главного".

Очень интересно было почитать статью, так как я непосредственно участвовал в описанных событиях. Изначально Маркет работал на xml-based технологиях. Серверная часть фронтенда обслуживалась xnoscript — технологией Яндекса, практически вышедшей из употребления в компании. Представьте, что если бы вы писали node.js приложение, но с помощью xml со вставками на JavaScript. Примерно так выглядела работа с xnoscript. Сейчас серверный фронт работает на Node.js, на клиенте используется React.

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

В общем, интересная и полезная статья. Почитайте, если у вас планируется что-то подобное.

#yandex #experience #migration

https://habr.com/ru/company/yandex/blog/486146/

Совсем забыл рассказать здесь. С понедельника я веду коллективный твиттер-аккаунт JS-сообщества — jsunderhood.

Уже написал два больших треда:
1) Про Defront — https://twitter.com/jsunderhood/status/1224284390739542016?s=20
2) Про Историю JS и JS-экосистемы — https://twitter.com/jsunderhood/status/1224595199294345217?s=20

Рекомендую почитать про историю JS — получился очень хороший тред. Про Defront почитайте, если интересна жизнь в телеграме и процесс написания статей.

В блоге v8 появилась статья о том, как читать спецификацию ECMAScript — "Understanding the ECMAScript spec, part 1".

В статье разбирается спецификация метода Object.prototype.hasOwnProperty. Рассматривается отличие типов языка (могут использоваться обычными программистами, например, null, undefined, Boolean, Number, String) от типов спецификации (используются только для описания спеки, например, Completion Records). Разбирается понятие слотов (slots), которые обозначаются в спецификации с помощью двойных квадратных скобок: o.[[Prototype]], o.[[GetOwnProperty]](). Описывается конструкция, которая выглядят как вызов функции в языке, но на самом деле ей не является.

Очень клёвая статья. Must read для тех, кто хочет научиться понимать спецификацию. Жду вторую часть.

#js #specification #tutorial

https://v8.dev/blog/understanding-ecmanoscript-part-1

Недавно вышла новая версия Chrome. Пит Лепаж рассказал про самые интересные и важные обновления — "New in Chrome 80".

Web-воркеры теперь поддерживают ESM. Эта фича позволила улучшила производительность и эргономику работы с воркерами. Для включения поддержки ESM при вызове конструктора Worker необходимо передать вторым аргументом {type: "module"}.

Появилось несколько новых API, делающих PWA удобнее. Contact Picker API позволяет пользователям выбирать контакты из своей адресной книги. С помощью метода getInstalledRelatedApps() можно проверить, установлено ли основное нативное приложение, чтобы не надоедать пользователю лишней рекламой. Периодическая фоновая синхронизация данных позволяет поддерживать контент PWA в актуальном состоянии.

В рамках origin trail доступен Content indexing API, благодаря которому PWA может получить доступ к списку закешированных ресурсов. Появился Notification triggers для отложенной отправки нотификаций.

В JS появилась поддержка optional chaining obj?.prop. Favicon теперь может использовать SVG-изображения. Установка display: minimal-ui в PWA включает отображение кнопок назад и перезагрузки. Ещё в анонсе сказано, что можно ссылаться на любой текст на странице используя #:~:text=something, но у меня эта фича почему-то не работает.

В консоли девтулзов теперь можно без боли использовать class и let — больше нет ошибки из-за переопределения идентификатора. Началась работа над поддержкой DWARF Debugging Standard для улучшения дебага WebAssembly. На панели "Network" в "Initiator" можно отобразить цепочку запросов в виде вложенного списка — это облегчает поиск инициатора запроса.

#release #chrome #announcement

https://developers.google.com/web/updates/2020/02/nic80

Вчера вышла девятая версия Angular. Стивен Флюин рассказал про новый релиз в статье "Version 9 of Angular Now Available — Project Ivy has arrived!".

Девятая версия самое большое обновление Angular за последние три года. В этой версии по умолчанию включён Ivy — новый компилятор и пайплайн рендеринга. Благодаря ему Angular теперь может компилировать компоненты на этапе сборки, ускоряя рендеринг и инициализацию приложения. Также благодаря Ivy бандлы приложения получаются до 40% меньше. В этой версии был улучшен developer experience: добавлены новые возможности для дебага приложения, улучшены сообщения об ошибках, улучшена статическая типизация шаблонов (ngIf, ngFor, ng-template, etc).

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

#angular #release #announcement

https://blog.angular.io/version-9-of-angular-now-available-project-ivy-has-arrived-23c97b63cfa3

Недавно вышел Yarn 2. Джэмон Холмгрен из Inifinite Red поделился, к чему пришла команда после оценки перехода c первой версии Yarn на вторую версию и NPM — "Yarn 1 vs Yarn 2 vs NPM".

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

Краткие итоги статьи. По уровню поддержки победили Yarn 1 и NPM — Yarn 2 не поддерживает React Native; для них это было критично. По скорости установки пакетов победил Yarn 1. С утилизацией кеширования не было замеров, но разработчики утверждают, что Yarn 1 потребляет меньше траффика по сравнению с NPM. Также Yarn 1 распространён среди сообщества React/React Native. Многие дополнительные фичи, которые предоставляет Yarn 2 некритичны для их проектов. Мне показалось сомнительным, что в пункте про надёжность и предсказуемость NPM немного уступил Yarn 1 из-за статьи 2018 года. После оценки команда решила остаться на Yarn 1.

Рекомендую почитать статью, если вы тоже задумываетесь о переходе на новый пакетный менеджер.

#package #yarn #npm #comparison

https://shift.infinite.red/yarn-1-vs-yarn-2-vs-npm-a69ccf0229cd

Юан Чуан написал статью о том, как сделать треугольник Серпинского с помощью CSS и одного div — "Single div Sierpinski triangle".

Треугольник Серпинского — это фрактальная структура, состоящая из большого количества треугольников, образующих паттерн. Идея его отрисовки с помощью CSS заключается в наложении друг на друга нескольких слоёв повторяющихся и уменьшающихся прямоугольных треугольников, создающихся с помощью линейного градиента. Первая половина треугольников на всех слоях закрашивается цветом, а вторая остаётся полностью прозрачной. После отрисовки всех слоёв с треугольниками применяется transform: skew() для трансформации прямоугольного треугольника в равнобедренный.

Красивое решение задачи. Рекомендую посмотрерть.

#css #fun

https://yuanchuan.dev/single-div-sierpinski-triangle

Ахмад Шадид написал статью про "Intrinsic Sizing In CSS".

Черновик стандарта "Intrinsic & Extrinsic Sizing" описывает поведение блоков при указании внешних размеров (extrinsic), и размеров, которые определяются содержимым элемента (intrinsic). То есть extrinsic sizing — это 10px, 20% и т.п. ( width: 100% ), а intrinsic — min-content, max-content и fit-content ( width: min-content ). Благодаря intrinsic-свойствам вёрстка макетов для динамического контента становится проще. При их использовании с гридами можно делать такие макеты, которые невозможно было сделать другими средствами CSS. Все основные свойства intrinsic sizing поддерживаются современными браузерами.

Никогда раньше не сталкивался с intrinsic sizing. "Can I Use" показывает, что эти свойства доступны с третьей версии Firefox и 22-ой версии Chrome. В общем, очень рекомендую посмотреть статью и потыкать примеры.

#css #layout

https://ishadeed.com/article/intrinsic-sizing-in-css/