HTML: плохие стороны

Вероятно, вы слышали заявления типа «HTML и так по умолчанию обладает accessibility» или «Не нужно изобретать заново этот абсолютно идеальный элемент управления HTML». Я считаю, что это общие заявления, а не универсальные истины. Веб-разработчикам крайне важно осознавать недостатки платформы, поэтому я решил собрать несколько примеров того, когда у HTML возникают трудности, с точки зрения как accessibility, так и usability.

Ссылка

#html

Утечки памяти, которые не утечки

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

В один прекрасный день боевое сопровождение приходит с ужасной проблемой — память в контейнерах Node.js течет, сервисы падают с OOM каждый день, все пропало!

Ссылка

#статьи

Асинхронная функция всегда возвращает обещание. await все еще должен ждать разрешения обещания: ожидаемое обещание возвращается, когда мы вызываем getData(), чтобы установить data равным ему.

Если бы мы хотели получить доступ к разрешенному значению "I made it", мы могли бы использовать метод .then() для data:

data.then(res => console.log(res))

Тогда это бы вывело "I made it!"

Прогресс WebAssembly и будущее веба. Быстрые интерфейсы, пример Figma

WebAssembly (Wasm) — это бинарный формат для безопасного и эффективного выполнения портативных программ в стековой виртуальной машине (в браузере или на сервере). Как и ASM.js, представляет собой низкоуровневый код. Есть ещё WAT — WebAssembly Text, человекочитаемая версия бинарного кода.

Ссылка

#статьи

Банки.ру: от монолита до микрофронтендов

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

Ссылка

#статьи

История HTML. Часть 1. Гипертекст и гипермедиа

Появления языка HTML, обычно датируют концом 80-х — началом 90-х годов двадцатого века. В этот период свет увидели первые идеи связывания удаленных ресурсов посредством гипертекстовых ссылок, и, как следствие, появилась необходимость удобного и простого способа такие ссылки создавать и добавлять в документ. Но как вообще возникли понятие «гипертекст» и «гипермедиа»? В этом статье мы заглянем еще дальше в прошлое и попробуем проследить путь становления этих терминов от самого их зарождения.

Ссылка

#html

Browsing Context, WindowProxy, Window

Каждый Frontend-разработчик знает, что такое объект Window. С самими объектом, вроде бы, все понятно. Но при детальном рассмотрении оказывается, что браузер никогда не отдает этот важнейший глобальный объект напрямую. В этой статье я предлагаю разобраться в спецификации HTML и в том, как именно ведет себя браузер в части глобального контекста.

Ссылка

#статьи

Почему PASETO лучше для аутентификации, чем JWT

В веб-разработке одним из наиболее популярных решений является аутентификация на основе токенов. Чаще всего для создания системы аутентификации используют JWT (порой даже там, где это не нужно). Но несмотря на популярность, JWT имеет ряд недостатков. Поэтому появляются новые решения для аутентификации на основе токенов. В этой статье мы рассмотрим PASETO — токен, который был разработан для замены JWT.

Ссылка

#статьи

Пояснение к предыдущему посту

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

const { firstName } = { firstName: 'Lydia' };
// Версия ES5:
// var firstName = { firstName: 'Lydia' }.firstName;

console.log(firstName); // "Lydia"

Также свойство можно распаковать из объекта и присвоить переменной с именем, отличным от имени свойства объекта:

const { firstName: myName } = { firstName: 'Lydia' };
// Версия ES5:
// var myName = { firstName: 'Lydia' }.firstName;

console.log(myName); // "Lydia"
console.log(firstName); // Тут будет ошибка Uncaught ReferenceError: firstName is not defined

В этом случае firstName не существует как переменная, поэтому попытка доступа к ее значению вызовет ReferenceError.

Примечание. Помните о свойствах глобальной области видимости:

const { name: myName } = { name: 'Lydia' };

console.log(myName); // "lydia"
console.log(name); // "" ----- Браузер, например, Chrome
console.log(name); // ReferenceError: name is not defined  ----- NodeJS

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

В браузерах, таких как Chrome, name является устаревшим свойством глобальной области. В этом примере код выполняется внутри глобальной области и нет определяемой пользователем локальной переменной name, поэтому интерпретатор ищет предопределенные переменные/свойства в глобальной области видимости, что в случае браузеров происходит через объект window и возвращается значение window.name, которое равно пустой строке.

В NodeJS такого свойства в "глобальном" объекте нет, поэтому попытка доступа к несуществующей переменной вызовет ReferenceError.

Вам не нужен для этого JavaScript

Прошу вас не возмущаться названием статьи. Я не ненавижу JavaScript, я люблю его. Ежедневно я пишу на нём кучу кода. Но ещё я люблю CSS и даже люблю JSX HTML. Я люблю все эти три технологии по причине, которая называется…
Правило наименьших полномочий
Это один из базовых принципов веб-разработки, означающий, что следует выбирать наименее мощный язык, подходящий для решения задачи.

Ссылка

#статьи