Front-end Digest № 23: посібник з CSS Grid, State of JavaScript 2023 та React у 2024 році

Усі статті, обговорення, новини про Front-end — в одному місці. Підписуйтеся на телеграм-канал!

Привіт, колеги. Мене звати Олександр і я займаюся фронтендом в компанії Zfort Group. Маю для вас черговий дайджест з цікавими матеріалами зі світу фронтенда за останній тиждень.

Веброзробка

Shadow DOM призначений для того, щоб приховати свій сором
Потокові вебкомпоненти та їхній зв’язок між батьківськими й дочірніми компонентами
vectorizer.ai: Конвертуйте растрові зображення у форматах JPEG і PNG у вектори SVG за допомогою AI.
Використання платформи OpenAI для аналізу помилок автоматизованого тестування

CSS

Інтерактивний посібник з CSS Grid
Початок роботи з CSS container queries
Удосконалюйте свої навички налагодження CSS за допомогою цих прийомів Chrome DevTools у 2024 році
Адаптивний багаторядковий текст у формі стрічки на CSS (частина 2)
Кілька способів писати CSS простіше у 2023 році
TailwindCSS as an API — простий у використанні API, який генерує TailwindCSS на льоту.
Створення ефекту паралаксу на CSS
CSS трюк: перехід від height 0 до auto

JavaScript

State of JavaScript 2023: щорічне опитування
Promises Training — практикуйте роботу з промісами за допомогою кураторської колекції інтерактивних завдань.
Створення прогресивного вебзастосунку в Remix за допомогою Remix PWA
Різні інструменти для лінтінгу JavaScript-компонентів: практичний посібник

👍ПодобаєтьсяСподобалось8
До обраногоВ обраному4
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
10 оновлених функцій Angular 17, які революціонізують веброзробку

От у цій публікації слушно попереджають, що @defer та інші лейзілоадінги можуть спричинити вам Layout Shifts (CLS)

Ефективна та елегантна веброзробка з Next.js: Глибоке занурення в Component Streaming компонентів та Chunked Transfer Encoding

Натомість тут нахвалюють Suspense та стрімінг, але жодного слова, що похерачить SEO (не працює без JS) та метрику CLS :)

Suspense та стрімінг

Це в контексті серверних компонентів. З серверними компонентами ви отримуєте одразу від сервера код сторінки.
Критичні данні, такі як SEO metadata та таке інше, як раз і можна постачати за рахунок серверних компонентів без проблем.
А ось якраз Suspense дасть вам змогу уникнути Layout Shift, поки частина UI ващої сторінки яка сервиться через серверний компонент буде доставлена через стримінг.
Зверніть увагу, що React наголошує, що Suspense має використовуватись саме з серверними компонентами. Ви, звичайно, можете його використовувати з порталами на клієнті, але то таке.
Next.js з 14 версії в продакшені дозволяє вам дуже багато чого робити з серверними компонентами. І SEO там як раз і не є проблемою, за рахунок того що я написав вище.
nextjs.org/...​ding-ui-and-streaming#seo

SEO
Next.js will wait for data fetching inside generateMetadata to complete before streaming UI to the client. This guarantees the first part of a streamed response includes tags.
Since streaming is server-rendered, it does not impact SEO. You can use the Mobile Friendly Test tool from Google to see how your page appears to Google’s web crawlers and view the serialized HTML (source).

От якраз на цю примітку я і повівся.
Приклад. Хедер завантажився, внизу футер також. Середина загорнута в Suspense або loading.js з Next. Додав спінер у fallback, крутиться, а після запиту до апі приходить відрендерений контент і штовхає футер. Отримую CLS, лайтхаус незадоволений.

Просто Suspense це не тільки про лоадер. Якщо ви намагаєтеся уникнути CLS, то треба використовувати скелетони які будуть максимально мінімізувати розрив між справжнім контентом та скелетоном. Тоді ви будете ок.

Дякую! Доречі, приємно бачити деякі лінки вже підсвічені як відвідані.

Підписатись на коментарі