Гиллель Уэйн поделился своими мыслями о том, как можно улучшить подсветку синтаксиса — "Syntax highlighting is a waste of an information channel".

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

В теории всё это выглядит очень заманчиво, но имплементация упирается в суровую действительность. Такая семантичеcкая подсветка должна реализовываться для каждого языка в отдельности, при этом многие фишки возможно реализовать только тогда, когда доступно AST.

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

#programming #musings

https://buttondown.email/hillelwayne/archive/syntax-highlighting-is-a-waste-of-an-information/

Генрик Уорн написал статью про хорошее логирование — "Good Logging".

Логирование — это очень хороший инструмент для поиска источников ошибок и мониторинга состояния системы. Но чтобы сделать хорошее логирование, нужно вложить немного усилий.

Логирование не должно быть слишком подробным или скупым. Хорошие сообщения в логах должны говорить не про абстрактные серверы и файлы, а про конкретные ip-адреса и имена файлов. Сообщения должны быть таким, чтобы по ним можно было удобно grep'ать. При логировании сложной логики все шаги можно поместить в список, и вывести его в лог как одну большую строку. В хороших сообщениях не должно быть специальных символов, чтобы подчеркнуть важность, лучше для этого использовать разные уровни логирования (DEBUR, ERROR, INFO etc.) Очень трудно с первого раза придумать хорошие сообщения, поэтому их нужно постепенно улучшать. Также нужно не забывать добавлять новые сообщения, если при отладке ошибки в логах нет всей нужной информации.

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

#debug #programming

https://henrikwarne.com/2020/07/23/good-logging/

Иан Бин рассказал, почему для своего блога он выбрал Eleventy, а не Gatsby — "Your blog doesn’t need a JavaScript framework".

Eleventy и Gatsby это наиболее популярные движки для статически генерируемых сайтов в JS-сообществе. Gatsby построен на базе React — это его основное преимущество (React знают многие разработчики) и недостаток (дополнительно добавляет несколько сотен килобайт JS). Иан задался вопросом: зачем для статически гененрируемого сайта в принципе нужен JS? В Gatsby можно отключить загрузку JS с помощью специального плагина, но такой JS-first подход несёт слишком много накладных расходов, поэтому Иан остановился на Eleventy. Eleventy быстрый движок для статически генерируемых сайтов. Он использует markdown для основного контента и традиционные шаблонизаторы (nunjucks, liquid) для всего остального.

Иан рекомендует при выборе инструментов пользоваться правилом наименьшей силы: если вся работа может быть сделана только с помощью HTML и CSS, то JS использовать не нужно.

P.S. Eleventy сейчас используется в Google (в блогах v8 и web.dev), CERN, Khan Academy, Netlify. Сайт Defront тоже работает на Eleventy.

#performance #web

https://iainbean.com/posts/2020/your-blog-doesnt-need-a-javanoscript-framework/

Пару дней назад в канале @juliarderity увидел сообщение, что на последней встрече TC39 на stage 2 продвинулся метод item. Ти-Джей Краудер написал статью про это новое предложение — "The item Method for Indexables".

Пропозал добавляет новый метод для индексируемых типов (строки, массивы, типизированные массивы). С помощью него можно получить элемент по переданному индексу, но в отличие от [] в item можно передавать отрицательные индексы для получения элементов с конца (как в Python). Использование нового метода помогает сократить работу, которая требуется для доступа к последним элементам массива, возвращаемого из функции:

// эти две строки кода:
const result = theFunction();
const last = result[result.length - 1];

// можно заменить одной:
const last = theFunction().item(-1);

Выбор названия метода (item) связан с наличием этого метода в DOM-коллекциях NodeList и HTMLCollection. Это было важно учесть, так как на данный момент идёт работа над тем, чтобы сделать из этих коллекций полноценные массивы.

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

#js #proposal

https://thenewtoys.dev/blog/2020/07/25/the-item-method-for-indexables/
https://github.com/tc39-transfer/proposal-item-method

Недавно Google обновил планы по переходу на mobile-first поиск — "Prepare for mobile-first indexing (with a little extra time)".

Количество пользователей интернета, использующих смартфоны, давно превысило количество пользователей десктопных платформ. Именно поэтому Google продвигает разные инициативы, улучшающие опыт работы с мобильным вебом. В том числе было запланировано включение mobile-first индексирования с сентября 2020 года, но из-за пандемии дата была перенесена на конец марта 2021 года.

Mobile-first индексирование означает, что поисковик будет использовать мобильные версии страниц для ранжирования. В статье есть рекомендации, что проверить и исправить, чтобы сайт не упал в результатах поисковой выдачи.

#seo #google #announcement

https://webmasters.googleblog.com/2020/07/prepare-for-mobile-first-indexing-with.html

Вчера вышел Firefox 79. Флориан Шольц и Гарольд Киршнер рассказали про все новинки релиза — "Firefox 79: The safe return of shared memory, new tooling, and platform updates".

В конце 2018 года из-за атаки Spectre во всех браузерах были отключены разделяемая память (SharedArrayBuffer) и таймеры с высоким разрешением. В Firefox 79 поддержка этих фич вернулась на место, но для их использования страница должна быть изолирована с помощью HTTP-заголовков Cross-Origin-Opener-Policy: same-origin и Cross-Origin-Embedder-Policy: require-corp. Возврат поддержки SharedArrayBuffer также позволил реализовать WebAssembly Threads.

Добавлена поддержка Promise.any(). При передаче коллекции промисов в any() метод возвращает промис, который разрезолвится в том случае, когда разрезолвится один из переданных промисов или вернёт AggreateError, если все промисы будут реджекнуты. Добавлена поддержка логических операторов присваивания, WeakRef и FinalizationRegistry.

Для предотвращения модификации window.opener Firefox теперь автоматически устанавливает rel=noopener для всех ссылок с target=_blank.

Очень много изменений в инструментах разработчика. Стектрейсы теперь показывают полноценный стек для асинхронного кода. Флоу перехода от js-ошибок из консоли в дебаггер стал более продуман: после перехода проблемный код будет подсвечен, а при наведении будет выведена подсказка с типом ошибки. Улучшена поддержка соурс мапов в DOM-инспекторе для SCSS и CSS-in-JS. В отладчике появилась новая фича “Restart Frame”, которая позволяет "путешествовать во времени" в рамках стека вызовов. Также отладчик снова получил порцию обновлений, улучшающих производительность.

#release #firefox

https://hacks.mozilla.org/2020/07/firefox-79/

Амелия Ваттенбергер написала интерактивную статью про использование процентов в CSS — "What does 100% mean in CSS?".

В статье есть хорошие интерактивные примеры и краткое описание поведения процентов для разных свойств:
- для height процент высчитывается относительно высоты родителя
- для width — относительно ширины родителя
- для top — относительно высоты родителя
- для left — относительно ширины родителя
- для margin-top — относительно ширины родителя
- для margin-left — относительно ширины родителя
- для padding-top — относительно ширины родителя
- для padding-left — относительно ширины родителя
- для translate-top — относительно высоты элемента
- для translate-left — относительно ширины элемента

Очень прикольная статья. Советую почитать всем, кто хочет разобраться с процентами в CSS.

#css

https://wattenberger.com/blog/css-percents

Гергели Орос — технический руководитель из Uber — рассказал про алгоритмы и структуры данных, с которыми ему приходилось сталкиваться на протяжении карьеры — "Data Structures & Algorithms I Actually Used Working at Tech Companies".

В статье есть много примеров использования алгоритмов: от обхода DOM-дерева для добавления поддержки голосового ввода для Skype на Xbox OS до гексогональных гридов с иерархическими индексами в Uber для оптимизации цены поездок. Интересная задача была в Skyskanner с поиском наиболее дешёвых билетов с маршрутом через несколько городов. Для её решения была использована модифицированная реализация алгоритма A*.

В статье есть мысли по поводу использования алгоритмических задач на собеседованиях, которые сейчас особенно популярны в Долине для поиска сильных инженеров. Но Гергели пишет, что не задаёт сложных алгоритмических задач на собеседованиях, и это не помешало ему собрать сильные команды разработчиков.

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

#algorithm #musings

https://blog.pragmaticengineer.com/data-structures-and-algorithms-i-actually-used-day-to-day/

На прошедшем WWDC 2020 была представлена внутренняя статистика о использовании протоколов интернета на устройствах Apple. На zdnet по этому поводу была опубликована небольшая статья.

Разработчики рассказали, что в мае 2020 года около 79% сайтов, которые открывались с помощью Safari, были загружены по HTTP/2. По сравнению с HTTP/1.1 страницы загружались на 80% быстрее. При использовании IPv6 медианное время установки соединения было на 40% быстрее чем при использовании IPv4. Такое уменьшение объясняется уменьшенным использованием NAT и улучшениями в маршрутизации. 49% всех сетевых соединений на современных устройствах Apple использовали TLS 1.3; HTTPS-соединение устанавливалось на 30% быстрее по сравнению c TLS 1.2.

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

#performance #apple

https://www.zdnet.com/article/apple-tells-app-devs-to-use-ipv6-as-its-1-4-times-faster-than-ipv4/

Крис Лили — технический директор W3C — рассказал о проблемных частях CSS — "Why is CSS... the way it is?".

В спецификации CSS у некоторых фич есть недостатки. Например, свойство float плохо специфицировано для сложных случаев. Работа с цветами неудобна при реализации дизайн систем или просто для определения цвета английскими словами ( gainsboro, orchid и т.п. ничего не говорят об оттенке). Есть проблемы при работе с диапазонами Unicode-значений в свойстве unicode-range.

Некоторые эти проблемы связаны с тем, что во времена зарождения спецификации было важно, чтобы язык был максимально простым. Простота реализации была важна для добавления CSS в Internet Explorer и Netscape Navigator. Другие проблемы были связаны с тем, что при ревью новых фич у проверяющих не было необходимого опыта.

Все эти проблемы известны. Над ними либо работают в данный момент (например, с цветами), либо эти проблемные фичи были заменены более продвинутыми альтернативами (например, вместо float для разметки страницы сейчас рекомендуется использовать flex и grid ).

Очень интересная статья. Рекомендую почитать всем, кто интересуется историей развития web'а.

#css #history

https://increment.com/frontend/ask-an-expert-why-is-css-the-way-it-is/

Джошуа Голдберг в своём блоге задокументировал процесс добавления новой фичи в TypeScript — "TypeScript Contribution Diary: // @ts-expect-error".

Джошуа добавил поддержку новой директивы // @ts-expect-error в TypeScript 3.9. С её помощью можно подавить конкретные ошибки компилятора. В статье очень подробно рассказывается, как была добавлена эта фича, что было изменено, почему это было сделано именно так, с какими проблемами столкнулись пользователи после релиза RC-версии, какие были фиксы и т.п. Например, в начальной реализации для JSX не учитывался случай использования директивы игнорирования ошибок подобным образом:

{/*
// @ts-ignore */}
<MissingRequiredProp />

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

#internals #typenoscript

http://blog.joshuakgoldberg.com/ts-expect-error/

А пока последние две недели в основном канале публиковалось самое интересное из мира фронтенда и около него, в Defront Plus были опубликованы такие посты:

- Использование noscript в SVG
- Оптимизация метрики time-to-logo на Wikimedia
- Имена элементов и доступность
- Как писать хорошие комментарии
- Юзабилити ссылок mailto
- Принцип работы Certificate Transparency
- Как написать такой email, на который ответят
- Сравнение QUIC и TCP
- Исследование эффективности технических собеседований
- Восстановление поддержки Shared Memory в Firefox

Поддержите канал на Patreon и получите доступ к дополнительным статьям в Defront Plus!

https://www.patreon.com/myshov

Ашан Фернандо написал статью про преимущества сбора телеметрии на фронтенде — "Importance of using JavaScript Telemetry for Single Page Apps".

Для сбора телеметрии в проектах Ашана используется Azure App Insights. Благодаря дополнительным данным, которые прилетают с фронтенда, им стало проще находить проблемы производительности. Ранее телеметрия собиралась только на бэкенде, но она не отражала полную картину. Например, на бэкенде могло быть всё ок, а на фронтенде были тормоза из-за того, что бэкенд вернул слишком большой объём данных, который медленно обрабатывался на слабом устройстве.

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

#performance

https://blog.bitsrc.io/importance-of-using-javanoscript-telemetry-for-single-page-apps-9805b8ffd563

Гари Чу — devrel из Google — опубликовал статью про проблемы использования транспилированного кода в современных браузерах — "Bringing Modern JavaScript to Libraries".

На данный момент многие библиотеки из npm транспилируются в ES5. Это проблема, так как даже если проект не поддерживает legacy-браузеры, он должен "заплатить налог" в виде размера бандла. Этот налог для разных библиотек может быть как 7%, так и 40%.

В январе 2020 года в Node.js 13.7.0 появилась поддержка условных экспортов, с помощью которых можно указать разные сборки для разных типов окружений. Гари предлагает добавить новый тип окружения в условный экспорт для бандлов, которые транспилируются в ES2017 (один из возможных вариантов — browser2017 ). Предполагается, что бандлеры могут использовать это окружение для создания облегчённой версии бандла приложения. Также рассматривается вариант публикации кода без транспиляции, но в этом случае увеличится время сборки.

Очень полезное предложение. Думаю, что бандлеры адаптируют предлагаемый подход или как минимум придут к какому-нибудь другому альтернативному решению

#proposal #perfomance #npm

https://dev.to/garylchew/bringing-modern-javanoscript-to-libraries-432c

На сайте Developer Apple была опубликована статья про использование одноразовых SMS-кодов, привязанных к домену, — "Enhance SMS-delivered code security with domain-bound codes".

Современные смартфоны предоставляют средства для автозаполнения поля с SMS-кодом, который отправляется пользователю при включённой двухфакторной аутентификации или подтверждения каких-либо операций. Сейчас автодополнение кодов работает на любых страницах, которые используют поле ввода с атрибутом autocomplete=one-time-code. Проблема в том, что этим могут пользоваться фишинговые сайты.

Apple и Google работают над механизмом для ограничения домена, на котором может быть автодополнен отправленный SMS-код. На данный момент (в будущем возможны изменения) это можно сделать с помощью специально отформатированного SMS:

123456 is your Example code.

@example.com #123456

Привязанные к домену коды можно использовать в iOS 14 и macOS Big Sur. На Android эта фича скорее всего появится в одном из следующих релизов.

#security #mobile

https://developer.apple.com/news/?id=z0i801mg
https://github.com/WICG/sms-one-time-codes

Юна Кравец и Владимир Левин рассказали про новое CSS свойство content-visibility, благодаря которому можно ускорить время рендернига страницы — "Сontent-visibility: the new CSS property that boosts your rendering performance".

Свойство content-visibility опирается на примитивы, определённые в спецификации CSS Containment, которые задаются с помощью свойства contain. С помощью этих примитивов разработчик может тонко настроить поведение рендеринга блоков. Свойство contain может быть разных типов в разных комбинациях. Определение наиболее эффективной комбинации значений может быть нетривиальной задачей. Свойство content-visibility решает эту проблему.

Благодаря свойству content-visibility браузер самостоятельно определяет необходимую комбинацию contain-примитивов, откладывая рендеринг контента до момента, пока он не попадёт во вьюпорт. При этом рендеринг ускоряется минимум на 50% (в примере из статьи рендеринг ускорился в семь раз).

Новое свойство будет доступно в Chrome 85. Разработчики Firefox отозвались положительно об этой фиче, но пока над её внедрением не работают.

#css #performance

https://web.dev/content-visibility/

В техническом блоге Facebook была опубликована статья про подходы улучшения доступности, которые были использованы на новом сайте социальной сети, — "Making Facebook.com accessible to as many people as possible".

Основные пункты статьи. Чтобы не допускать распространённых ошибок доступности, используют eslint-плагин eslint-plugin-jsx-a11y. Для работы с фокусом используют специальные компоненты, которые также упрощают добавление навигации с клавиатуры. Для улучшения читабельности текста на этапе сборки конвертируют размер шрифта в rem. Иерархия заголовков в документе поддерживается автоматически с помощью специального API. Улучшили работу горячих клавиш с помощью API на базе React контекста. Для валидации разметки используют самописный инструмент, который подсвечивает красным оверлеем все элементы с проблемами a11y.

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

#a11y #react #facebook

https://engineering.fb.com/web/facebook-com-accessibility/

Пол Кальвано — специалист в области web-производительности из Akamai — написал статью про Back/Forward кэш и его влияние на производительность — "Browser Back/Forward Caches and their Benefit to Web Performance".

В Firefox и Safari используется Back/Forward Cache (BF Cache). В нём сохраняется состояние страниц, которые пользователь посещал ранее, благодаря чему браузеру не нужно повторно строить DOM при навигации по истории с помощью кнопок Back/Forward. Если страница находится в BF Cache, то она загружается очень быстро.

В Chrome 86 BF Cache будет включён по умолчанию для всех пользователей. Это значит, что если вы собираете пользовательские метрики, то стоит ожидать падение количества загрузок сайта, так как инструменты мониторинга не отправляют статистику для страниц, полученных из BF Cache. Также стоит ожидать небольшое повышение времени загрузки, так как некоторые переходы по истории больше учитываться не будут.

#performance #cache #chrome

https://paulcalvano.com/2020-08-03-browser-backforward-caches-and-their-benefit-to-web-performance/

Лия Веру написала пост про использование CSS OM для получения списка CSS-свойств — "Introspecting CSS via the CSS OM: Getting supported properties, shorthands, longhands".

Лия работает над CSS-частью web-альманаха. Для исследования данных ей понадобился всех список всех CSS-свойств и соответствующих сокращённых свойств. Для получения списка свойств можно использовать Object.getOwnPropertyNames(document.body.style) (в Firefox необходимо использовать прототип `style`). Для того чтобы узнать, является ли данное свойство сокращённой формой записи, нужно добавить это свойство HTML-элементу и получить список свойств, в которые он был развёрнут:

function getLonghands(property) {
  let style = document.body.style;
  style[property] = "inherit";
  let ret = [...style];
  style.cssText = "";
  return ret;
}

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

#css

https://lea.verou.me/2020/07/introspecting-css-via-the-css-om-getting-supported-properties-shorthands-longhands/

Вышел React 17.0.0 Release Candidate, в котором нет новых фич. Главное изменение — синтетические события теперь регистрируются не в document, а в том узле DOM, в котором рендерится дерево React. Это позволит использовать несколько версий библиотеки без конфликтов, а также позволет упростить обновления в следующих версиях. Ещё одно изменение, связанное с событийной системой реакта: теперь события React ближе к нативным событиям, больше нет необходимости использовать e.persist(). Другие изменения: очистка в useEffect теперь вызывается асинхронно, вывод ошибки при возврате undefined из forwardRef и memo (как это происходит с обычными компонентами в React 16), улучшения стек трейсов, а также были убраны некоторые внутренние экспорты.

Андрей Мелихов опубликовал на хабре статью "Архитектура современных корпоративных Node.js-приложений".

Фронтенд-разработка в больших проектах давно вышла за границы работы с представлением. Фронтендеры должны поддерживать сервер-сайд рендеринг и жонглировать ответами от разных бэкендов. В статье рассказывается про подход с организацией логики уровня приложения с помощью BFF (Backend For Frontend). Разбираются плюсы и минусы нескольких подходов разделения приложения на слои. В качестве примера реализации используется фреймворк Nest, по ходу дела разбираются его ограничения.

Очень хорошая статья. Рекомендую почитать всем, кто хочет узнать больше про разработку серьёзных web-приложений на Node.js.

#architecture #nodejs

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