#статья дня
В заметке про работу с отменой запросов в React Query я лишь косвенно упомянул такую потрясающую штуку, как Abort Controller.
Зачем он вообще нужен?
Можно перестать слушать события, отменить ненужный запрос на сервер (и даже в девтулзах он пометится как canceled), отменить транзакцию, отменить вообще всё, что отменяется, да ещё сделать это стандартным способом!
Документация на MDN крайне скудна и не описывает и половину вариантов применения. Поэтому, нужно что-то ещё.
Про отмену событий мы уже писали, про React Query я упомянул выше... так что давайте для остальных примеров возьмём свежую статью Артёма Захарченко: https://kettanaito.com/blog/dont-sleep-on-abort-controller
1. Уже ставшие классическими примеры отмены событий и запросов
2. Отмена чего угодно вообще
3. AbortSignal.timeout для отработки, внезапно, таймаутов
4. AbortSignal.any для ситуаций, когда сигнал может поступить от разных контроллеров.
Учитывая, что для работы с Google AppsScript API у меня имеется самописный преобразователь коллбэков в промисы, мне и самому стоит дополнить реализацию поддержкой Abort Controller.
Так что статья как раз вовремя.
#javascript #abortcontroller
В заметке про работу с отменой запросов в React Query я лишь косвенно упомянул такую потрясающую штуку, как Abort Controller.
Зачем он вообще нужен?
Можно перестать слушать события, отменить ненужный запрос на сервер (и даже в девтулзах он пометится как canceled), отменить транзакцию, отменить вообще всё, что отменяется, да ещё сделать это стандартным способом!
Документация на MDN крайне скудна и не описывает и половину вариантов применения. Поэтому, нужно что-то ещё.
Про отмену событий мы уже писали, про React Query я упомянул выше... так что давайте для остальных примеров возьмём свежую статью Артёма Захарченко: https://kettanaito.com/blog/dont-sleep-on-abort-controller
1. Уже ставшие классическими примеры отмены событий и запросов
2. Отмена чего угодно вообще
3. AbortSignal.timeout для отработки, внезапно, таймаутов
4. AbortSignal.any для ситуаций, когда сигнал может поступить от разных контроллеров.
Учитывая, что для работы с Google AppsScript API у меня имеется самописный преобразователь коллбэков в промисы, мне и самому стоит дополнить реализацию поддержкой Abort Controller.
Так что статья как раз вовремя.
#javascript #abortcontroller
👍14
#рекомендация дня
Не так часто, как хотелось бы, приношу вам что то действительное годное от моих знакомых, но тут могу порекомендовать.
Есть ребята из компании 53xapps, занимаются созданием сайтов и автоматизацией бизнеса. Ну и вот они решили запилить свой собственный курс по Frontend разработке.
Конкретно: введение в алгоритмы, HTML/CSS, JavaScript и Vue.js.
Разработка курса заняла около полугода. Большое количество видео и практики.
Подход к обучению немного отличается от других курсов: сперва несколько уроков вас учат понимать алгоритмы и рисовать блок-схемы. После этого обучение становится более осмысленным.
Курс довольно плотный, тестовые студенты проходили его по 15-20 часов в неделю 4 месяца, но сейчас есть возможность проходить курс в спокойном собственном темпе. Все для вас 🙂
Освоите JavaScript, HTML/CSS, Vue.js. Познакомитесь с несколькими популярными библиотеками. Для старта во фронте вполне достаточно.
Есть несколько бесплатных уроков, можно попробовать и пощупать.
Итак, цена. 5000 рублей. А подписчикам канала промокод HTMLSHIT даст 1000 рублей скидки.
Программа курса и бесплатные уроки доступны по ссылке.
#frontend #HTML #CSS #JavaScript
Не так часто, как хотелось бы, приношу вам что то действительное годное от моих знакомых, но тут могу порекомендовать.
Есть ребята из компании 53xapps, занимаются созданием сайтов и автоматизацией бизнеса. Ну и вот они решили запилить свой собственный курс по Frontend разработке.
Конкретно: введение в алгоритмы, HTML/CSS, JavaScript и Vue.js.
Разработка курса заняла около полугода. Большое количество видео и практики.
Подход к обучению немного отличается от других курсов: сперва несколько уроков вас учат понимать алгоритмы и рисовать блок-схемы. После этого обучение становится более осмысленным.
Курс довольно плотный, тестовые студенты проходили его по 15-20 часов в неделю 4 месяца, но сейчас есть возможность проходить курс в спокойном собственном темпе. Все для вас 🙂
Освоите JavaScript, HTML/CSS, Vue.js. Познакомитесь с несколькими популярными библиотеками. Для старта во фронте вполне достаточно.
Есть несколько бесплатных уроков, можно попробовать и пощупать.
Итак, цена. 5000 рублей. А подписчикам канала промокод HTMLSHIT даст 1000 рублей скидки.
Программа курса и бесплатные уроки доступны по ссылке.
#frontend #HTML #CSS #JavaScript
🤡11👍8❤2
Media is too big
VIEW IN TELEGRAM
#фишка дня
Когда я наткнулся на этот твит в обсуждении утилиты работы с цветами Андрея Ситника, я не сразу примерил его на себя. Но, как оказалось, стоило бы.
Итак, давайте поясню для тех, кто по ссылкам не ходит.
В азиатских иероглифических языках почти весь ввод с клавиатуры происходит в аккордном режиме или же в режиме т. н. композитинга, общее название — Input Method Editor.
TL;DR: На экране всплывает окошко с символами или их группами и пользователь может что-то выбрать.
На каких-то ОС оно вызывается долгим зажатием клавиши, где-то — по хоткею, а где-то — автоматически и сразу.
Так вот, одно дело азиатские языки (я очень рекомендую посмотреть сам твит), а другое — разные европейские. И речь о диакритических знаках: умляуты, акуты, ударения, птички и шапочки.
Так вот, я не имею финской раскладки, потому буквы ä, å и ö ввожу как раз в режиме композитинга, долгим зажатием «материнской» клавиши.
Собственно, так база для азиатских языков проникла и в мою жизнь.
Кстати, выбор Emoji из всплывающего окошка — туда же.
В JavaScript-событиях для этого режима имеется флаг isComposing. Поэтому если вы, как и я в примере на видео, решили реализовать ввод групп символов подобным образом — циклически перебирая поля ввода — стоит об этом подумать :)
Собственно, давайте и пример: https://codepen.io/alinaki/pen/MWMpdvO?editors=1010
И напишите в комментариях, как вы решаете проблему редкого ввода букв с диакритикой у себя в системе. Например, я не помню, как это происходит в Windows, а в Linux я использую клавишу Compose, она работает чуть иначе.
#javascript #composing #event #бородач
Когда я наткнулся на этот твит в обсуждении утилиты работы с цветами Андрея Ситника, я не сразу примерил его на себя. Но, как оказалось, стоило бы.
Итак, давайте поясню для тех, кто по ссылкам не ходит.
В азиатских иероглифических языках почти весь ввод с клавиатуры происходит в аккордном режиме или же в режиме т. н. композитинга, общее название — Input Method Editor.
TL;DR: На экране всплывает окошко с символами или их группами и пользователь может что-то выбрать.
На каких-то ОС оно вызывается долгим зажатием клавиши, где-то — по хоткею, а где-то — автоматически и сразу.
Так вот, одно дело азиатские языки (я очень рекомендую посмотреть сам твит), а другое — разные европейские. И речь о диакритических знаках: умляуты, акуты, ударения, птички и шапочки.
Так вот, я не имею финской раскладки, потому буквы ä, å и ö ввожу как раз в режиме композитинга, долгим зажатием «материнской» клавиши.
Собственно, так база для азиатских языков проникла и в мою жизнь.
Кстати, выбор Emoji из всплывающего окошка — туда же.
В JavaScript-событиях для этого режима имеется флаг isComposing. Поэтому если вы, как и я в примере на видео, решили реализовать ввод групп символов подобным образом — циклически перебирая поля ввода — стоит об этом подумать :)
Собственно, давайте и пример: https://codepen.io/alinaki/pen/MWMpdvO?editors=1010
И напишите в комментариях, как вы решаете проблему редкого ввода букв с диакритикой у себя в системе. Например, я не помню, как это происходит в Windows, а в Linux я использую клавишу Compose, она работает чуть иначе.
#javascript #composing #event #бородач
👍4❤1
This media is not supported in your browser
VIEW IN TELEGRAM
#заметка дня
Ну что, будем долбиться в холст и аналитическую геометрию?
Продолжаем разработку D-pad'а aka крестовины. И сегодня на повестке дня — определение попадания координат клика в нужный нам сектор. Ну и подсветка сектора заодно.
В прошлый раз мы нарисовали крестовину (я честно не знаю, как d-pad ещё называть), а сегодня пришла пора по нему покликать. Ссылка для тех, кто забыл: https://t.me/htmlshit/3279
Как я уже писал, основным откровением стало понимание, что мне не нужно пять разных фигур, описывающих виджеты. В данном случае мне повезло и граница между элементами не должна была быть прозрачной. Иначе, пришлось бы решать иными методами.
Заодно мы получили бесконечно возможное число секторов.
Математику отрисовки мы обсудили в прошлом посте. Итак, что же делаем по клику?
Для зануд: мы тут в декартовых координатах работаем.
1️⃣ Определяем, не ткнули ли мы в центральную кнопку.
Это довольно просто: уравнение окружности у нас (х – х0)² + (y – y0)² = R², где x0 и y0 — координаты центра, а R, соответственно, радиус.
Ну и получается, что пока левая часть меньше правой, мы ткнули в центр. Тут всё просто.
2️⃣ Если попали не в центр, то уже однозначно, в какой-то из секторов.
Здесь задача сводится, опять же, к двум вещам: провести луч из центра окружности в точку, чтобы определить его угол относительно оси абсцисс (горизонтали) и простым сравнением определить, в какой же из секторов попали.
Не забыв про то, что мы повернули окружность на 45° влево, чтобы задать верное направление крестовины.
И для этого существует функция Math.atan2 (Википедия на английском или на русском вот тут): арктангенс для заданных координат, в радианах.
Радианы — просто всё умножается на π.
Ну и всё, перерисовали с учётом нового цвета.
Как всегда, демка на CodePen: https://codepen.io/alinaki/pen/Yzmoyyr?editors=0010
Что делаем в следующий раз, анимируем?
#canvas #javascript #remote
Ну что, будем долбиться в холст и аналитическую геометрию?
Продолжаем разработку D-pad'а aka крестовины. И сегодня на повестке дня — определение попадания координат клика в нужный нам сектор. Ну и подсветка сектора заодно.
В прошлый раз мы нарисовали крестовину (я честно не знаю, как d-pad ещё называть), а сегодня пришла пора по нему покликать. Ссылка для тех, кто забыл: https://t.me/htmlshit/3279
Как я уже писал, основным откровением стало понимание, что мне не нужно пять разных фигур, описывающих виджеты. В данном случае мне повезло и граница между элементами не должна была быть прозрачной. Иначе, пришлось бы решать иными методами.
Заодно мы получили бесконечно возможное число секторов.
Математику отрисовки мы обсудили в прошлом посте. Итак, что же делаем по клику?
Для зануд: мы тут в декартовых координатах работаем.
Это довольно просто: уравнение окружности у нас (х – х0)² + (y – y0)² = R², где x0 и y0 — координаты центра, а R, соответственно, радиус.
Ну и получается, что пока левая часть меньше правой, мы ткнули в центр. Тут всё просто.
Здесь задача сводится, опять же, к двум вещам: провести луч из центра окружности в точку, чтобы определить его угол относительно оси абсцисс (горизонтали) и простым сравнением определить, в какой же из секторов попали.
Не забыв про то, что мы повернули окружность на 45° влево, чтобы задать верное направление крестовины.
И для этого существует функция Math.atan2 (Википедия на английском или на русском вот тут): арктангенс для заданных координат, в радианах.
Радианы — просто всё умножается на π.
Ну и всё, перерисовали с учётом нового цвета.
Как всегда, демка на CodePen: https://codepen.io/alinaki/pen/Yzmoyyr?editors=0010
Что делаем в следующий раз, анимируем?
#canvas #javascript #remote
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5❤4
#инструмент дня
Когда я недавно вас спросил, какие бы вы посоветовали вопросы для собеседования, были, ожидаемо, предложения поспрашивать про Event Loop и microtask queue.
Я, честно, редко вижу людей, которые на подобные вопросы отвечают с лёгкостью. Но это не значит, что проблемы не существует и знать процесс не надо :)
Слишком много частиц не
К счастью, есть инструменты, которые помогают легче понять происходящее! И вот один из них буквально так и называется: Event Loop Explorer.
https://vault-developer.github.io/event-loop-explorer/
Кстати, там в примере как раз то задание, что так любят спрашивать на собеседованиях :)
Вообще, подобных инструментов уже столько, что можно собрать коллекцию...
#javascript #eventloop #tool
Когда я недавно вас спросил, какие бы вы посоветовали вопросы для собеседования, были, ожидаемо, предложения поспрашивать про Event Loop и microtask queue.
Я, честно, редко вижу людей, которые на подобные вопросы отвечают с лёгкостью. Но это не значит, что проблемы не существует и знать процесс не надо :)
Слишком много частиц не
К счастью, есть инструменты, которые помогают легче понять происходящее! И вот один из них буквально так и называется: Event Loop Explorer.
https://vault-developer.github.io/event-loop-explorer/
Кстати, там в примере как раз то задание, что так любят спрашивать на собеседованиях :)
Вообще, подобных инструментов уже столько, что можно собрать коллекцию...
#javascript #eventloop #tool
1❤18🤩2👍1
#ссылка дня
Все знают, что в JavaScript возможны утечки памяти, вот только никто их не видел.
Погоди, в смысле, никто? Вот же, целый репозиторий: https://github.com/ufocoder/javascript.memory-leaks
Он пока небольшой, но уже есть достаточное количество примеров, от неверной проверки статуса запроса, до дырявого сервиса кеширования.
Не позволяйте памяти утечь, котаны! И дополняйте примеры :)
#javascript #memory #бородач
Все знают, что в JavaScript возможны утечки памяти, вот только никто их не видел.
Погоди, в смысле, никто? Вот же, целый репозиторий: https://github.com/ufocoder/javascript.memory-leaks
Он пока небольшой, но уже есть достаточное количество примеров, от неверной проверки статуса запроса, до дырявого сервиса кеширования.
Не позволяйте памяти утечь, котаны! И дополняйте примеры :)
#javascript #memory #бородач
👍17❤6🤡1🫡1
Media is too big
VIEW IN TELEGRAM
#фишка дня
Когда я наткнулся на этот твит в обсуждении утилиты работы с цветами Андрея Ситника, я не сразу примерил его на себя. Но, как оказалось, стоило бы.
Итак, давайте поясню для тех, кто по ссылкам не ходит.
В азиатских иероглифических языках почти весь ввод с клавиатуры происходит в аккордном режиме или же в режиме т. н. композитинга, общее название — Input Method Editor.
TL;DR: На экране всплывает окошко с символами или их группами и пользователь может что-то выбрать.
На каких-то ОС оно вызывается долгим зажатием клавиши, где-то — по хоткею, а где-то — автоматически и сразу.
Так вот, одно дело азиатские языки (я очень рекомендую посмотреть сам твит), а другое — разные европейские. И речь о диакритических знаках: умляуты, акуты, ударения, птички и шапочки.
Так вот, я не имею финской раскладки, потому буквы ä, å и ö ввожу как раз в режиме композитинга, долгим зажатием «материнской» клавиши.
Собственно, так база для азиатских языков проникла и в мою жизнь.
Кстати, выбор Emoji из всплывающего окошка — туда же.
В JavaScript-событиях для этого режима имеется флаг isComposing. Поэтому если вы, как и я в примере на видео, решили реализовать ввод групп символов подобным образом — циклически перебирая поля ввода — стоит об этом подумать :)
Собственно, давайте и пример: https://codepen.io/alinaki/pen/MWMpdvO?editors=1010
И напишите в комментариях, как вы решаете проблему редкого ввода букв с диакритикой у себя в системе. Например, я не помню, как это происходит в Windows, а в Linux я использую клавишу Compose, она работает чуть иначе.
#javascript #composing #event #бородач
Когда я наткнулся на этот твит в обсуждении утилиты работы с цветами Андрея Ситника, я не сразу примерил его на себя. Но, как оказалось, стоило бы.
Итак, давайте поясню для тех, кто по ссылкам не ходит.
В азиатских иероглифических языках почти весь ввод с клавиатуры происходит в аккордном режиме или же в режиме т. н. композитинга, общее название — Input Method Editor.
TL;DR: На экране всплывает окошко с символами или их группами и пользователь может что-то выбрать.
На каких-то ОС оно вызывается долгим зажатием клавиши, где-то — по хоткею, а где-то — автоматически и сразу.
Так вот, одно дело азиатские языки (я очень рекомендую посмотреть сам твит), а другое — разные европейские. И речь о диакритических знаках: умляуты, акуты, ударения, птички и шапочки.
Так вот, я не имею финской раскладки, потому буквы ä, å и ö ввожу как раз в режиме композитинга, долгим зажатием «материнской» клавиши.
Собственно, так база для азиатских языков проникла и в мою жизнь.
Кстати, выбор Emoji из всплывающего окошка — туда же.
В JavaScript-событиях для этого режима имеется флаг isComposing. Поэтому если вы, как и я в примере на видео, решили реализовать ввод групп символов подобным образом — циклически перебирая поля ввода — стоит об этом подумать :)
Собственно, давайте и пример: https://codepen.io/alinaki/pen/MWMpdvO?editors=1010
И напишите в комментариях, как вы решаете проблему редкого ввода букв с диакритикой у себя в системе. Например, я не помню, как это происходит в Windows, а в Linux я использую клавишу Compose, она работает чуть иначе.
#javascript #composing #event #бородач
👍5❤3🤩1
#статья дня
Как вообще меняется JavaScript?
В блоге Bloomberg вышла интересная история про Temporal — новый API для дат и времени. Но статья на самом деле не столько про сам API, сколько про то, как такие вещи вообще появляются в языке.
Объект
Проблема в том, что веб сильно вырос, а
Экосистема ответила библиотеками вроде Moment.js, date-fns и Luxon. Их скачивают десятки миллионов раз в неделю — почти каждый проект как-то решает эту проблему.
В 2017 году появилась идея сделать нормальный API прямо в стандарте. Так началась история Temporal.
Дальше — девять лет обсуждений и доработок. В работе участвовали инженеры из Microsoft, Google, Mozilla, Bloomberg и Igalia. Предложение прошло весь процесс TC39 и в итоге стало крупнейшим добавлением в ECMAScript со времён ES2015.
Любопытная деталь: для реализации Temporal разработчики движков даже сделали общую библиотеку на Rust —
Ещё, конечно, поражает количество тестов.
В общем, это хороший текст про то, как вообще принимаются изменения в современном JavaScript. Стадии, обзоры альтернатив, обсуждения.
Почитать:
https://bloomberg.github.io/js-blog/post/temporal/
Если что, есть и перевод.
#javascript #temporal
Как вообще меняется JavaScript?
В блоге Bloomberg вышла интересная история про Temporal — новый API для дат и времени. Но статья на самом деле не столько про сам API, сколько про то, как такие вещи вообще появляются в языке.
Объект
Date появился в JavaScript в 1995 году и, по сути, был просто позаимствован из Java. Тогда это казалось нормальным решением. Спойлер: нет.Проблема в том, что веб сильно вырос, а
Date почти не менялся. Со временем стало понятно, что работать с датами в JavaScript неудобно: таймзоны, переходы на летнее время, странный парсинг строк.Экосистема ответила библиотеками вроде Moment.js, date-fns и Luxon. Их скачивают десятки миллионов раз в неделю — почти каждый проект как-то решает эту проблему.
В 2017 году появилась идея сделать нормальный API прямо в стандарте. Так началась история Temporal.
Дальше — девять лет обсуждений и доработок. В работе участвовали инженеры из Microsoft, Google, Mozilla, Bloomberg и Igalia. Предложение прошло весь процесс TC39 и в итоге стало крупнейшим добавлением в ECMAScript со времён ES2015.
Любопытная деталь: для реализации Temporal разработчики движков даже сделали общую библиотеку на Rust —
temporal_rs. Редкость!Ещё, конечно, поражает количество тестов.
В общем, это хороший текст про то, как вообще принимаются изменения в современном JavaScript. Стадии, обзоры альтернатив, обсуждения.
Почитать:
https://bloomberg.github.io/js-blog/post/temporal/
Если что, есть и перевод.
#javascript #temporal
👍9
Media is too big
VIEW IN TELEGRAM
#фишка дня
Когда я наткнулся на этот твит в обсуждении утилиты работы с цветами Андрея Ситника, я не сразу примерил его на себя. Но, как оказалось, стоило бы.
Итак, давайте поясню для тех, кто по ссылкам не ходит.
В азиатских иероглифических языках почти весь ввод с клавиатуры происходит в аккордном режиме или же в режиме т. н. композитинга, общее название — Input Method Editor.
TL;DR: На экране всплывает окошко с символами или их группами и пользователь может что-то выбрать.
На каких-то ОС оно вызывается долгим зажатием клавиши, где-то — по хоткею, а где-то — автоматически и сразу.
Так вот, одно дело азиатские языки (я очень рекомендую посмотреть сам твит), а другое — разные европейские. И речь о диакритических знаках: умляуты, акуты, ударения, птички и шапочки.
Так вот, я не имею финской раскладки, потому буквы ä, å и ö ввожу как раз в режиме композитинга, долгим зажатием «материнской» клавиши.
Собственно, так база для азиатских языков проникла и в мою жизнь.
Кстати, выбор Emoji из всплывающего окошка — туда же.
В JavaScript-событиях для этого режима имеется флаг isComposing. Поэтому если вы, как и я в примере на видео, решили реализовать ввод групп символов подобным образом — циклически перебирая поля ввода — стоит об этом подумать :)
Собственно, давайте и пример: https://codepen.io/alinaki/pen/MWMpdvO?editors=1010
И напишите в комментариях, как вы решаете проблему редкого ввода букв с диакритикой у себя в системе. Например, я не помню, как это происходит в Windows, а в Linux я использую клавишу Compose, она работает чуть иначе.
#javascript #composing #event #бородач
Когда я наткнулся на этот твит в обсуждении утилиты работы с цветами Андрея Ситника, я не сразу примерил его на себя. Но, как оказалось, стоило бы.
Итак, давайте поясню для тех, кто по ссылкам не ходит.
В азиатских иероглифических языках почти весь ввод с клавиатуры происходит в аккордном режиме или же в режиме т. н. композитинга, общее название — Input Method Editor.
TL;DR: На экране всплывает окошко с символами или их группами и пользователь может что-то выбрать.
На каких-то ОС оно вызывается долгим зажатием клавиши, где-то — по хоткею, а где-то — автоматически и сразу.
Так вот, одно дело азиатские языки (я очень рекомендую посмотреть сам твит), а другое — разные европейские. И речь о диакритических знаках: умляуты, акуты, ударения, птички и шапочки.
Так вот, я не имею финской раскладки, потому буквы ä, å и ö ввожу как раз в режиме композитинга, долгим зажатием «материнской» клавиши.
Собственно, так база для азиатских языков проникла и в мою жизнь.
Кстати, выбор Emoji из всплывающего окошка — туда же.
В JavaScript-событиях для этого режима имеется флаг isComposing. Поэтому если вы, как и я в примере на видео, решили реализовать ввод групп символов подобным образом — циклически перебирая поля ввода — стоит об этом подумать :)
Собственно, давайте и пример: https://codepen.io/alinaki/pen/MWMpdvO?editors=1010
И напишите в комментариях, как вы решаете проблему редкого ввода букв с диакритикой у себя в системе. Например, я не помню, как это происходит в Windows, а в Linux я использую клавишу Compose, она работает чуть иначе.
#javascript #composing #event #бородач
🔥5
#статья дня
Леа Веру написала большой текст в защиту полифиллов. Поводом стало мнение одного из ключевых редакторов WHATWG: полифиллы якобы вредят веб-платформе, потому что слишком рано занимают имена и форму будущих API.
Проблема действительно существует. Кто-то реализует ещё не утверждённый API, библиотека становится популярной, сайты начинают от неё зависеть. После этого изменить название или поведение уже сложно: старые страницы сломаются. Браузерам приходится либо повторять чужую реализацию вместе с её ошибками, либо искать для стандарта менее удачную форму.
В качестве более безопасной альтернативы часто предлагают ponyfills.
Полифилл добавляет отсутствующий API туда, где он должен находиться:
Ponyfill глобальные объекты не меняет. Это обычная импортируемая функция:
Главное преимущество полифилла — код сразу пишется под стандартный API. Когда браузер добавляет нативную реализацию, приложение автоматически начинает использовать её, а полифилл постепенно превращается в пустышку.
Ponyfill остаётся в коде. Даже когда браузеры давно поддерживают нужный API, проект продолжает использовать импортированную функцию. Для перехода на нативную реализацию придётся менять импорты и вызовы.
Можно заставить ponyfill внутри проверять наличие нативного API, но тогда получается, по выражению Веру, «разобранный полифилл»: стандартная реализация уже используется, однако нестандартный интерфейс и отдельная зависимость всё равно остаются.
Ponyfills полезны, пока API только проектируется: на них можно проверить идею, не занимая заранее имя в платформе. Но для уже сформировавшегося API полифилл даёт более естественный путь — стандартный интерфейс сегодня и автоматический переход на браузерную реализацию завтра.
Веру также считает, что полифиллы несправедливо делают виноватыми в проблемах совместимости. Даже без них останутся проверки возможностей,
Зато полифиллы позволяют использовать новую возможность после появления первой браузерной реализации, не дожидаясь всех остальных. Разработчики получают работающий API, а другие браузеры — реальный спрос и причину быстрее добавить поддержку.
Поэтому популярный полифилл — не только риск, но и сигнал: функция разработчикам уже нужна, а стандартизация и браузеры за ней не успевают. Ponyfills хороши для экспериментов, но не заменяют главного свойства полифилла — способности со временем стать ненужным.
#javascript
Леа Веру написала большой текст в защиту полифиллов. Поводом стало мнение одного из ключевых редакторов WHATWG: полифиллы якобы вредят веб-платформе, потому что слишком рано занимают имена и форму будущих API.
Проблема действительно существует. Кто-то реализует ещё не утверждённый API, библиотека становится популярной, сайты начинают от неё зависеть. После этого изменить название или поведение уже сложно: старые страницы сломаются. Браузерам приходится либо повторять чужую реализацию вместе с её ошибками, либо искать для стандарта менее удачную форму.
В качестве более безопасной альтернативы часто предлагают ponyfills.
Полифилл добавляет отсутствующий API туда, где он должен находиться:
if (!RegExp.escape) {
RegExp.escape = value => /* реализация */;
}
После этого приложение всегда вызывает RegExp.escape(). В новом браузере работает нативная версия, в старом — подставленная.Ponyfill глобальные объекты не меняет. Это обычная импортируемая функция:
import { regexpEscape } from "./regexp-escape.js";
На первый взгляд подход аккуратнее: ponyfill не занимает имя будущего API и не вмешивается в платформу. Но Веру считает, что полноценной заменой полифиллам он быть не может.Главное преимущество полифилла — код сразу пишется под стандартный API. Когда браузер добавляет нативную реализацию, приложение автоматически начинает использовать её, а полифилл постепенно превращается в пустышку.
Ponyfill остаётся в коде. Даже когда браузеры давно поддерживают нужный API, проект продолжает использовать импортированную функцию. Для перехода на нативную реализацию придётся менять импорты и вызовы.
Можно заставить ponyfill внутри проверять наличие нативного API, но тогда получается, по выражению Веру, «разобранный полифилл»: стандартная реализация уже используется, однако нестандартный интерфейс и отдельная зависимость всё равно остаются.
Ponyfills полезны, пока API только проектируется: на них можно проверить идею, не занимая заранее имя в платформе. Но для уже сформировавшегося API полифилл даёт более естественный путь — стандартный интерфейс сегодня и автоматический переход на браузерную реализацию завтра.
Веру также считает, что полифиллы несправедливо делают виноватыми в проблемах совместимости. Даже без них останутся проверки возможностей,
@supports, условные импорты и самописные обёртки, которые точно так же могут закрепить раннюю форму API.Зато полифиллы позволяют использовать новую возможность после появления первой браузерной реализации, не дожидаясь всех остальных. Разработчики получают работающий API, а другие браузеры — реальный спрос и причину быстрее добавить поддержку.
Поэтому популярный полифилл — не только риск, но и сигнал: функция разработчикам уже нужна, а стандартизация и браузеры за ней не успевают. Ponyfills хороши для экспериментов, но не заменяют главного свойства полифилла — способности со временем стать ненужным.
#javascript
👍2