Сегодня прочитал небольшой туториал Мартина Сплитта — "Reading local files with JavaScript". В туториале разбирается, как работать с локальными файлами пользователя в браузере.

Современные браузеры не предоставляют сайтам доступ к локальной файловой системе в целях безопасности. Но пользователь может явно выбрать интересующие файлы для обработки с помощью элемента <input type="file">; после выбора файла можно прочитать его содержимое с помощью FileReader.

Вот простой пример получения содержимого файла:

document
  .getElementById('fileInput')
  .addEventListener('change', function () {
    if (this.files.length === 0) {
      console.log('No file selected.');
      return;
    }

    const reader = new FileReader();
    reader.onload = function () {
      console.log(reader.result);
    };
    reader.readAsText(this.files[0]);
  });

Можно прочитать файл как строку (как в примере выше), как data URL (например, для отображения выбранного изображения) или как бинарные данные.

Туториал Мартина гораздо меньше, чем похожий туториал на MDN "Using files from web applications", но он может быть полезен, если вам надо быстро разобраться с FileReader API.

#js #filereader #tutorial

https://50linesofco.de/post/2019-07-05-reading-local-files-with-javascript

Александр Хованский опубликовал на хабре неплохую статью "Введение в Screen Capture API — Сканируем QR коды в браузере".

Автор статьи захотел написать приложение, с помощью которого можно распознавать qr-коды прямо на компьютере. Для этого он воспользовался Screen Capture API. Это API позволяет захватывать изображения с экрана монитора целиком, окна какого-то определённого приложения или определённой вкладки браузера (эта возможность доступна только в Chrome).

В статье есть пример кода захвата; он состоит из следующих частей:
1. Отправка потока в <video>
2. Периодическая отрисовка <video> в <canvas>
3. Захват изображения с помощью getImageData()

Ещё в статье есть ссылка на демо готового приложения. Проверил — всё работает замечательно. Но стоит иметь в виду, что Screen Capture API поддерживают только Firefox, Chrome и Edge.

#web #api #tutorial

https://habr.com/ru/post/460825/

Попалась на глаза подборка туториалов Робина Вирух про настройку React-проекта с нуля от создания package.json до настройки enzyme и hot module replacement.

Туториалы очень хорошие. В них всё написано по делу, понятно и аккуратно. Автор поддерживает их в актуальном состоянии; несмотря на то что некоторые статьи были опубликованы более двух лет назад, в них рассматриваются последние версии библиотек. Я немного запутался с перекрёстными ссылками, поэтому вот список ссылок на статьи в корректном порядке:

1. How to set up a modern JavaScript project
2. How to set up a Webpack project
3. How to set up Webpack with Babel
4. How to set up an advanced Webpack application
5. How to set up React with Webpack and Babel
6. How to test React components with Jest
7. How to test React components with Jest & Enzyme

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

#tutorial #webpack #react #jest

В блоге 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-ecmascript-part-1

Сегодня в блоге v8 появилась вторая часть статьи про структуру спецификацию ECMAScript от Марьи Хёлтэ — "Understanding the ECMAScript spec, part 2".

В этой части Марья разбирает то, как в спецификации определён обход цепочки прототипов для получения значения свойства объекта. Объясняется всё в довольно доходчивой форме. Используя описанный подход, можно разобрать любую другую фичу языка на уровне спецификации. В статье дополнительно затрагивается понятие runtime semantics: грамматика спецификации определяет синтаксис языка, runtime semnatics определяет смысл этих синтаксических конструкций. В самом конце статьи есть ссылка на бонусную статью про то, почему obj.foo при передаче как аргумент, например, в console.log(obj.foo) становится AssignmentExpression.

Очень клёвая статья. Теперь жду третью часть.

#js #specification #tutorial

https://v8.dev/blog/understanding-ecmascript-part-2

Максим Эзьер написал большое руководство по работе с WebGL — "WebGL guide".

В руководстве с азов объясняется создание интерактивной трёхмерной сцены без использования сторонних библиотек. Используется только чистый JS и WebGL. В самом начале есть раздел про математику, которая необходима для работы с графикой. Затем объясняется процесс создания простых двумерных и трёхмерных сцен с подробным объяснением примеров исходного кода. Есть пример текстурирования объектов и работы с источниками света. В конце статьи есть список наиболее распространённых ошибок. Про них полезно знать при отладке кода.

В общем, если хотели потыкать WebGL, рекомендую заглянуть в это руководство.

#webgl #tutorial

https://xem.github.io/articles/webgl-guide.html

В блоге v8 была опубликована четвёртая часть серии статей про структуру спецификации ECMAScript — "Understanding the ECMAScript spec, part 4".

Парсеры просматривают наперёд ограниченное число токенов (finite lookahead), чтобы понять, какую конструкцию языка представляет собой данный кусок текста программы. Иногда возникают ситуации, когда finite lookahead не хватает. Например, нельзя за ограниченное число токенов однозначно отличить список аргументов от выражения в скобках.

Для обработки подобных ситуаций в спеке используется покрывающая грамматика (cover grammar). Она вводит дополнительные символы, которые учитывают все возможные синтаксические конструкции и которые можно временно использовать как плейсхолдеры. Эти символы уточняются после парсинга проблемной части текста программы. Для списка аргументов и выражения в скобках в спеке используется символ CoverParenthesizedExpressionAndArrowParameterList (CPEAAPL).

Очень интересная статья. Рекомендую почитать, если хотите ещё лучше понимать спецификацию ECMAScript.

#js #specification #tutorial

https://v8.dev/blog/understanding-ecmascript-part-4#using-cpeaapl-in-productions

Владимир Агафонкин — автор библиотеки leaflet — написал туториал про создание мини-версии библиотеки для отображения географических карт — "A Web Map from Scratch".

Все растровые web-карты работают по похожему принципу. Сначала карта разбивается на тайлы (изображения размера 256x256 пикселей). На нулевом уровне масштаба будет один тайл, на первом — четыре, на втором — 16, а на пятнадцатом — 32768. Потом для заданного уровня масштаба, широты и долготы географической точки выбирается необходимый тайл. Для этого используются формулы вариации проекции Меркатора — Web Mercator projection. Для полученного тайла выбираются несколько соседних тайлов, и затем все они размещаются на странице с помощью абсолютного позиционирования.

Рекомендую посмотреть туториал, если интересно узнать принцип работы растровых версий Google-карт, Яндекс-карт и 2GIS.

#map #tutorial

https://observablehq.com/@mourner/simple-web-map

Создание паттернов с помощью CSS Painting API

Джордж Франсис написал туториал по созданию генеративных паттернов с помощью CSS Painting API — "Creating Generative Patterns with The CSS Paint API".

Разработчики браузеров уже несколько лет работают над проектом Гудини (Houdini) — набором API для предоставления низкоуровневого доступа к CSS-движку. В этот набор входят CSS Painting API, CSS Layout API, CSS Properties and Values API и другие API.

CSS Painting API предоставляет низкоуровневый доступ к средствам рендеринга CSS. С его помощью разработчики могут создавать JavaScript-ворклеты для рендеринга изображений. Эти ворклеты могут быть использованы везде, где можно использовать изображения, например, в background-image и border-image. В туториале рассказывается об использовании CSS Painting API для создания генеративного арта.

Поддержка CSS Painting API на данный момент есть только в Chrome и других браузерах на базе Chromium.

#css #tutorial

https://css-tricks.com/creating-generative-patterns-with-the-css-paint-api/