How Google handles JavaScript throughout the indexing process

Интересная статья от Vercel про то, как работает краулер сайтов гугла. Эта тема окружена кучей мифов разной степени зрелости. Когда то говорили, что краулер не умеет запускать JS, затем говорили что научился, но не дольше 5 секунд и на старой версии хрома. Ребята из Vercel решили поэкспериментировать с отдачей контента и выяснили интересные особенности работы гугл краулера

Самое важное, что можно выделить: краулер умеет работать с современным синтаксисом JS, а также отлично индексирует сайты, сделанные с применением серверных компонентов (и соответственно стриминга хтмл контента).

В целом в исследовании также много других интересных пунктов (как например тот факт, что индексируются только страницы с 3хх и 2хх кодами. Т.е. если вам необходимо отрендерить экран с ошибкой - лучше его отрендерить на отдельном урле или с помощью 4хх или 5хх кода хттп).

Рекомендую к прочтению, если вы работаете с SEO



https://vercel.com/blog/how-google-handles-javascript-throughout-the-indexing-process

#development #javascript #SEO

Не имеет смысла писать новость об этой же статье, у Максима хорошая выжимка 🙂

#статья дня

Даже две!

Не так давно Джейк Арчибальд обнаружил ситуацию, с которой не справляются сборщики мусора ни в одном из известных браузерных движков.

Конечно, сама ситуация довольно странная, и выглядит так: если у вас имеется замыкание, в котором вы обратились к некоему объекту, после выполнения функции в замыкании выделенная память не очистится. Вот: https://jakearchibald.com/2024/garbage-collection-and-closures/

То есть у нас не утечка памяти, но «захват и удержание»:

function demo() {
  const bigArrayBuffer = new ArrayBuffer(100_000_000)
  const id = setTimeout(() => {
    console.log(bigArrayBuffer.byteLength)
  }, 1000)

  return () => clearTimeout(id)
}

globalThis.cancelDemo = demo();      

В случае, когда у нас нет возвращаемой функции отмены — замыкания не создаётся и сборщик мусора отлично работает.

Так вот, Нико Прананта нашёл решение для данного конкретного случая! И решение это потрясающее: нужно оставить ссылку на буфер за пределами замыкания: https://www.nico.fyi/blog/memory-issue-in-javascript-and-closures

А как это сделать?

Передать буфер следующим аргументом в setTimeout!

function demo() {
  const bigArrayBuffer = new ArrayBuffer(100_000_000)
  const id = setTimeout(
    (buffer) => {
      console.log(buffer.byteLength)
    },
    1000,
    bigArrayBuffer
  )

  return () => clearTimeout(id)
}

globalThis.cancelDemo = demo()

Я рекомендую пробежаться по обеим статьям, но статья Нико содержит в себе ещё и описание методов отладки таких случаев, что может пригодиться.

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

#js #memory #performance

#видео дня

Джош Комо (Josh Comeau) известен нам всем прежде всего как автор великолепных интерактивных обучающих статей.

Если вы с ним ещё не знакомы, его сайт — это мастхев в закладках: https://www.joshwcomeau.com/

И недавно на конференции в своём родном Квебеке он выдал прекрасную презентацию о его собственных моментах озарения. И, более того, попытался собрать их в некую ментальную модель, описывающую, что же, собственно, происходит: https://www.youtube.com/watch?v=kj7WGnUDaI4

Горячая рекомендация.

#css #talk

#статья дня

Новая статья Ахмада Шадида. На сей раз — об именованных областях сетки aka Grid Areas: https://ishadeed.com/article/css-grid-area/

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

#css #grid

#статья дня

Все любят хорошие статьи по SVG.

От базового понимания координат и viewBox, через transform к clipPath и его анимации с помощью GSAP. Вот так вот просто.

Каждый шаг стильно иллюстрирован и ёмко разжёван: https://www.cassie.codes/posts/swipey-image-grids/

#svg #viewbox #clippath #gsap #бородач

#инструмент дня

Если вам для каких-то целей очень была нужна совместная доска для рисования, да ещё чтоб самим можно было её хостить — сегодня ваш день!

Ребята из tldraw.com пару дней назад анонсировали tldraw sync: движок для совместной работы, заточенных под их доску.

Я за tldraw слежу давно, ещё с того момента, как автор отрабатывал сглаживание рукописного ввода мышкой. Потом же они начали дико экспериментировать с ИИ-фишками, превратив простую доску в настоящий инструмент прототипирования.

Очень крутая штука, желаю им и коммерческого успеха тоже.

#server #collaboration

#молния дня

Простите, всё же размещу, потому что очень смешно.

IP адрес 0.0.0.0 не рассматривается всеми современными браузерами как адрес в локальной сети, поэтому запросы к нему пропускаются и уходят на локальную машину: https://chromestatus.com/feature/5106143060033536

Да, такого вообще происходить не должно, но вот многие разработчики как раз свои дев-сервера локально и запускают :) Ну ещё разные утилиты десктопные на самом деле не что иное, как веб-серверы (начиная с торрентокачалок).

Так что, теоретически, можно утащить что-то интересное из какой-нибудь компании.

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

#статья дня

Smashing Magazine — один из старейших онлайн-журналов по веб-разработке. Статьи там как правило подбираются весьма подробные и полные, объясняющие все аспекты даже, казалось бы, простых эффектов.

Сегодня в наш канал залетает как раз такая статья: 3D-эффекты для картинок. Блеск, параллакс и поворот.

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

Сразу ссылки на кодпены с примерами, чтоб далеко не ходить:
1. https://codepen.io/t_afif/pen/VwEJqKV
2. https://codepen.io/t_afif/pen/qBJyXNy
3. https://codepen.io/t_afif/pen/yLRRBKj

Ну и, конечно, сама статья: https://www.smashingmagazine.com/2023/07/shines-perspective-rotations-css-3d-effects-images/

Будет полезно не только лишь всем.

#css #3d #image #бородач

#статья дня

Смотрим на иллюстрацию. Узнали? Согласны?

Да не врите, каждый из нас в какой-то момент карьеры создавал мега-компоненты со всеми возможными антипаттернами.

А ещё некоторые антипаттерны когда-то назывались просто паттернами...

В общем, статья, ради которой вам придётся заварить чаю или кофе и потом даже в термос перелить: Алекс Кондов и его статья о недавнем рефакторинге слишком большого React-компонента.

Вот: https://alexkondov.com/refactoring-a-messy-react-component/

1. Покрываем тестами
2. Линтуем
3. Чистим мёртвый код
4. Переделываем хранение состояния
5. Разбиваем условия
6. Применяем принцип единой ответственности
7. Выносим бизнес-логику наружу
8. Переделываем загрузку данных
9. Выносим хуки
10. Отрабатываем граничные состояния, например, отмену загрузки данных
11. Упрощаем отправку формы
12. Валидация

Естественно, без библиотек не обошлось. Чтобы не быть обвинённым в раздувании кодовой базы, автор выделил в отдельный блок обоснование их использования.

В общем, это отличный пример.

#react #refactoring

#статья дня

Недавно мы обсудили ситуацию утечки памяти, с которой не справляется ни один сборщик мусора ни в одном из существующих браузерных движков: https://t.iss.one/htmlshit/3033

Закономерный вопрос, а как же вообще происходит эта самая сборка мусора и чистка памяти?

На это у нас есть ответ! Статья, конечно, хардкорная: https://blog.frontend-almanac.com/v8-garbage-collection

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

Кстати, автора зовут Артем Антипин, у него есть и русскоязычная версия этой же статьи: https://blog.frontend-almanac.ru/v8-garbage-collection

#memory #cpp

#инструмент дня

Очень интересный проект от Кори Хауса: конструктор девтулзов для вашего React-приложения.

React Switchboard: https://github.com/coryhouse/react-switchboard

Эта, буквально, "панель управления" позволяет, используя Mock Service Worker, настроить различные заранее предопределённые сетевые ответы и/или заголовки и указать вашему приложению в какой момент что использовать. Switchboard перехватит и подменит их не отходя от кассы.

Лучше сразу взглянуть на простое демо: https://switchboard-beta.vercel.app/todos

Да, вы можете это делать и сами, конечно же, но как обёртка над вышеупомянутым сервис-воркером — очень годно.

#react #devtools

#статья дня

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

И возвращаюсь я к вам с отличной статьёй о современной анимации SVG в CSS.

Встречайте: https://courses.nan.fyi/blog/svg/animating-figma-exports

Как это делать быстро, просто и учитывая современные тенденции в дизайне и разработке. Естественно, в статье упор на экспорт из Figma :)

И не просто экспорт, а адаптация под конкретные нужды! Кратко объясняется, как разделять контуры и как в принципе мыслить в рамках анимациеи, а не просто чёрточками на экране. На что влияют разные параметры экспорта и так далее.

Давно я с таким удовольствием не читал подобное.

#svg #css #animation

#статья дня

Посмотрите на иллюстрацию. Я не буду говорить: "Ничего интересного не замечаете?", — ну просто потому что в самом коде ничего интересного нет. Секрет кроется в подсветке кода.

И суть в том, что подсветка кода сделана... шрифтом.

Кроме шуток, я когда это увидел, я подумал "ну точно какой-то финн упоролся". Есть у финнов такое направление в дизайне, извращение над шрифтами называется. Вот, например, шрифт, который становится тоньше из-за изменения климата: https://kampanjat.hs.fi/climatefont/

И да!

Автор шрифта — Хейкки Лотвонен. И он буквально выжал всё возможное из фишки COLR (это чуть больше чем лигатуры на стероидах) стандарта шрифтов OpenType: https://blog.glyphdrawing.club/font-with-built-in-syntax-highlighting/

Статья не только рассказывает о возможностях шрифта, но и погружает в понятие COLR: палитра, правила совмещения, лигатуры.

Поддерживаются HTML, CSS и даже JavaScript. Более того, можно перегружать цвета, получая свою собственую тему!

В общем, прекрасная взрывающая мозг статья. И применение самое что ни на есть реальное.

Есть обсуждение на HackerNews, вдруг кому интересно.

И CodePen с демо: https://codepen.io/argyleink/pen/GRbyNNv

Подробное описание технологии COLR от разработчиков Google Chrome: https://developer.chrome.com/blog/colrv1-fonts

В общем, Финляндия это не только озёра и Linux, но и шрифты. Теперь и вы знаете.

#opentype #fonts #colr

#статья дня

Как анимировать появление элемента на странице?

Ну, можно воспользоваться трюком с ключевыми кадрами, но вещь это не самая интуитивная и не сработает при изменении атрибутов, например.

А можно написать т. н. стартовые стили! Буквально @starting-style. А в базовых стилях уже прописать нужное нам положение и переход. Например:

/* Before the dialog opens */
@starting-style {
dialog[open] {
translate: 0 100vh;
}
}

/* Dialog is-open state */
dialog[open] {
translate: 0 0;
transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
}

Таким образом мы получаем анимацию из display: none или при изменении любого атрибута.

Да, чтобы анимировать display none нужно в описание перехода добавить allow-discrete, поскольку display none не поддерживает плавные переходы, но это детали.

Ссылка на блог разработчиков Chrome: https://web.dev/blog/baseline-entry-animations?hl=en

И очень много примеров есть на MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style

Технически, starting style поддерживается уже во всех браузерах (в Firefox вот только появился, в 129). Тем не менее, переходы и анимации на удаление элемента из DOM пока нать не везде, к сожалению.

В общем, можно потихоньку начинать использовать.

#css #transition

Если кому интересно, я добрался до компа и анимировал пример с dialog[open] через keyframes.

Пруф: https://codepen.io/alinaki/pen/OJevjMY

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

Попрошу-ка я Уну Кравец что-нибудь написать по этому поводу 🙂

#видео дня

Все знают, что можно бесконечно наблюдать три вещи. И одна из них — как работает другой человек.

Все слышали: "В Blink добавили то-то, в WebKit добавили то-то, Firefox депрекейтнул то-то". О тяжёлой судьбе селектора :has слышали вообще чуть менее чем все.

Так как же происходит процесс этого самого добавления чего-либо? Кто и как пишет код в современных движках браузеров?

Какой тулинг используется, как выглядит код, как выглядят структуры данных, как проходят тесты? Вот было бы хорошо, если кто-нибудь провёл бы мастер-класс...

Ни слова больше! Кейт Сиркел как раз недавно этим занимался и выкатил видео про добавление селектора :has-slotted() в WebKit!

Вот: https://www.youtube.com/watch?v=vNuvEqs_TH4

А вдруг кто-то вдохновится и тоже станет контрибутором в какой-либо из движков? :)

#webkit #cpp #develop

#статья дня

Я тут в нашем продукте всё пытаюсь сделать идеальные всплывающие уведомления, aka тосты.

Потому что выскакивают, как хлеб из тостера.

Поначалу они были сугубо императивные, вызвали уведомление вручную, вручную же скрыли все разом или по некому id. Потом я решил объединить уведомления и некоторые виды модальных окон (например, подтверждение или отмену действия).

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

В какой-то момент я на полную познал, что такое гипотеза Чёрной Королевы (забавно, что в английском языке — Красной Королевы). В простейшем варианте она звучит так: "Нужно бежать, чтобы оставаться на месте". Непомерно много усилий требуется, чтобы лишь чуть-чуть двигаться вперёд.

В мире разработки она же значит, что на один закрытый баг — получаешь пятнадцать новых :)

Да, пришло время признать, что я со своей реализацией уведомлений зашёл в тупик, и надо смотреть в сторону альтернатив.

И тут попадается нечто прекрасное, компонент Sonner: https://emilkowal.ski/ui/building-a-toast-component

И сразу ссылка на репозиторий: https://github.com/emilkowalski/sonner

Статья буквально на острие взаимодействия CSS и JS, объяснены принципы построения анимаций на CSS-переменных и управления ими из React-приложения.

Сами же тосты реализованы на простой шине событий, что весьма надёжно.

В общем, я ещё свой поиск идеальной реализации не завершил, но Sonner — максимально к ней близок.

#react #toasts #notification #animation

#книга дня

Сегодня книгой дня выбрана API от Сергей Константинова. Доступна на двух языках, на русском и английском. И на английском название даже более точно звучит — The API Book. Куда уж однозначней.

Ссылка: https://twirl.github.io/The-API-Book/API.ru.html

Эта книга написана для того, чтобы поделиться опытом и изложить лучшие практики разработки API. Состоит из шести разделов, посвящённых:

• проектированию API,
• паттернам дизайна API,
• поддержанию обратной совместимости,
• HTTP API и архитектурным принципам REST,
• SDK и UI-библиотекам,
• продуктовому управлению API.

Сергей Константинов был главой инжиниринга в Яндекс.Лавка, а с 2020 года — занимается примерно тем же в Bolt, развивая их маркет.

Труд действительно объёмный и охватывает практически все аспекты от проектирования API до взаимодействия с ним.

Важно заметить, что она постоянно дополняется и автор не стесняется спрашивать вопросы у аудитории, что выливается в прекрасные рекомендации.

Кстати, доступна и для Kindle, и для Apple Books, но уже как спонсорский пакет :)

#book #api

#инструмент дня

Недавно мы вспомнили о крутой фишке мобильных браузеров: атрибуте enterkeyhint для текстовых полей, позволяющем уточнить поведение клавиши Enter на экранной клавиатуре: https://t.iss.one/htmlshit/2516

Пришло время узнать, какие же еще атрибуты стоит использовать и зачем.

А чтобы не раздувать это на миллион постов (я всё равно так сделаю, но попозже), предлагаю взглянуть на интересный инструмент, позволяющий поиграться всеми возможными атрибутами полей форм на мобильных браузерах разом: https://better-mobile-inputs.netlify.app/

Например, вы знали, что есть атрибут для автоматической вставки одноразового кода, присылаемого по SMS?

Вот он там самый первый пример. Со скриншотами того, как выглядит клавиатура на iOS и Android.

Естественно, присутствуют ссылки на документацию, рассмотрены разные комбинации атрибутов. Особенно порадовал полный список автодополнения. Оно, конечно, редко когда правильно работает (зависит от усилий разработчиков), но уж если работает — то это приятно.

#input #attribute #mobile #tool #бородач