А стрим идёт уже :)

https://www.youtube.com/live/-fi8vtYvMOY

19:00 https://ctf-2023.ilovefrontend.ru

Если в requestAnimationFrame вызвать еще раз requestAnimationFrame, переданный колбек будет выполнен не в текущем, а в следующем тике отрисовки. Вы должны знать что он выполняется в конце тика, после всех микротасок. У кого отдельная очередь? А если запланировать микротаск внутри requestAnimationFrame, в каком тике он будет вызван, в текущем или в следующем по очереди?

Интересно, как на этот вопрос можно ответить экспериментальным путем, как это можно проверить? Как мы можем анализировать список тасок, у нас же нет к нему никакого явного и строгого апи, кроме setTimeout.

Поразмышляйте. Я такое накидал: https://raf-test.vercel.app/

https://www.raycast.com/ perfect tool !

Я, сначала, взял его для clipboard history (очень удобный оказался), но потом подсел и на другие фичи.

Самое интересное, разработчики рили горят продуктом и все время придумывают какие-то полезные мелочи, зацените https://prompts.ray.so/communication

Ща про йэвент луп раскажу.

https://gist.github.com/diegohaz/bc07491aee61a5f2469574b38c5c1aa0

Ariakit - набор не стилизованных React компонентов и хуков для управления сложной UI логикой. Очень продуманные, но легкие. Список компонентов.

Я всегда во многом ровнялся на reakit. Интересно попробовать в продакшене Ariakit, пойду своим продавать =D

Среди всех проблем движения React на сервер меня больше всего беспокоит подготовленность фронтендеров к разработке бекенда. Со стороны маркетинга реакта этот вопрос вообще не освещается, там все просто, “а теперь мы ходим напрямую в базу”.
Конечно, бекенд - не рокет сайнс, там даже все стабильнее и менее разрозненно, чем на фронте. Но это большой пласт специфики по производительности (кешированию) и, особенно, безопасности. Кто научит новых фулстеков этому? Vercel об этом не очень беспокоится.

Реакт точно будет процветать, хотя бы из-за вечной востребованности фулстеков на рынке, как дешевом способе сделать полноценный продукт. Качество - оно для разных продуктов требуется разное. Наверное, огромный рынок фриланса и мелких студий подсядут на RSC. Это я так фантазирую, статистики у меня нет. Фейсбук, в очередной раз, сделал технологию для себя, но подойдет она большой части индустрии.

А что со SPA? Я считаю что это единственный способ делать сайты, не только приложения, нормально по UX. И я бы ставил на их больший рассвет, но вот индексация гугла со мной не согласится, а это сейчас самое главное на масс маркете. Хотя, в любом случае будет часть приложений, которым SSR вообще не сдался и какую технологию они будут выбирать.., даже не знаю. Preact имеет минимальный порог входа и отличные ТТХ, но у него, почему-то, очень мало амбассадоров. Я бы хотел попробовать его еще в реальной разработке, хотя самый первый пост в этом канале был про его недостатки, которые никуда не ушли.

Скримба очень интересная. Идея простая и гениальная - для обучающих скринкастов нужна не запись картинки с экрана, а запись действий на экране. Имея такую запись, можно легко прыгать в любой участок кода в любой момент времени, экспериментировать с ним и получать мгновенный фидбек.
Интересно еще и то что весь этот редактор сделан на собственном ЯП IMBA, который компилится в высокопроизводительный JS (HTML, CSS), этакая питонячая версия Elm.
Серьезный минус для меня только один - TS поддерживается очень плохо, только на части синтаксиса, импорты вообще не работают и горят красным.
Но на простом JS можно сделать очень удобный тутор.

В чате обсуждаем новость про MDN Playground, зачем делать свое решение, а не взять готовое? А что есть из готового, codesandbox и stackblitz очень тяжелые (если хочешь вставить сразу несколько).

Предложили https://docs.jsfiddle.net/embedding-fiddles, открыл пример - скачал 2МБ, из которых большая половина на JS, причем в анзипе там 6+ метров, это сколько парсить и инициализировать!

Посмотрел повнимательнее, большую часть занимает jsfiddle.net/js/_dist-linters.js, без него результат очень даже ничего и работоспособность не ломается! Проблема теперь в том, что в доке я не нашел как это отключить.
Надо еще покопать, если звезды сойдуться, засуну jsfiddle на сайт реатома 🤔

У меня в шрифте как слева, а надо как справа.
Решение в лоб dangerousInnerHTML={text.replace('®', '<sub>®</sub>')} не элегантно, потому что я не знаю где мне этот символ может прилелеть.

К счастью в css есть такая классная фича - unicode-range, помощью нее можно заставить браузер брать этот символ из другого шрифта.

Находим на google fonts шрифт в котором наш сивол выглядит как надо, скачиваем ег ои вырезаем оттуда все кроме этого символа с помощью сервиса https://transfonter.org/, закидываем в проект и пишем следующий стиль

@font-face {
  font-family: 'Copyright';
  src: url('/fonts/copyright.woff2') format('woff2'),
       url('/fonts/copyright.woff') format('woff');
   unicode-range: U+00AE;
}

body {
  font-family: 'Copyright', 'Ваш обычный шрифт', sans-serif;
}

Готово.

P.S. Шрифт со спец символом не грузится пока на странице не появится этот символ

Promise.withResolvers на stage 2 и это хорошо! А как вы сейчас это делаете?

Простое решение в одну строку:
new Promise((...a) => ([res, rej] = a))

Максимальная минификация:
const toPromise = (cb, resolvers) => ({
promise: new Promise((...a) => (resolvers = a)),
cb: (...a) => cb(...a).then(...resolvers),
});

https://300.ya.ru/TUzFaQLo

Советую почитать оригинал! 😄