Корисний ресурс тижня: Patterns.dev

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

DOU запускає нову освітню рубрику: раз на тиждень ділимось ресурсами, які можуть прискорити розвиток у професії і дати реальну практику. Рубрика буде виходити щоп’ятниці.

Ви можете стати частиною процесу: надсилайте нам рекомендації, який саме ресурс виявився для вас корисним. Тож поділіться такими ресурсами зі спільнотою — запропонуйте через гугл-форму, або ж надішліть топік з поміткою «Ресурс тижня» самостійно чи пишіть мені :)

А тепер — до рекомендації цього тижня!

Patterns.dev


До навчання

Якщо ви коли-небудь чули від розробників слова на кшталт «гідратація», «серверний рендеринг» або суперечки про те, який патерн тут краще використати, і не дуже розуміли, про що мова — цей ресурс для вас.

Цього тижня радимо Patterns.dev. Це крута, повністю безкоштовна енциклопедія про те, як ефективно будувати швидкі вебдодатки. Створили її інженери з Google та Vercel, тому інфа там максимально актуальна та корисна.

Як це працює

Автори зібрали найпопулярніші шаблони проєктування та підходи до рендерингу і розібрали їх за допомогою детальних інтерактивних анімацій. На сайті величезна добірка шаблонів для JavaScript, React, Next.js та Vue. Тут можна по кроках подивитися, що відбувається під капотом браузера: як завантажується сторінка, чому при поганому інтернеті кнопка вже є, але ще не натискається і як правильно оптимізувати код, щоб сайт не тупив.






Гортайте вбік, щоб подивитися всі зображення

Для кого підійде

Здебільшого це мастхев для фронтенд-розробників, які хочуть структурувати свою базу. Але для QA-інженерів цей ресурс теж суперкорисний: коли ви візуально розумієте, як сайт рендериться, стає набагато легше знаходити баги продуктивності та розуміти, чому відвалився конкретний компонент під час завантаження.

Ціна питання

Повністю безкоштовно. Всі статті у відкритому доступі на сайті.

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

👍ПодобаєтьсяСподобалось8
До обраногоВ обраному5
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

Коментар порушує правила спільноти і видалений модераторами.

Ради справедливості — багато тамтешнього коду дуже сумнівної якості на жаль. Хоча сам ресурс чудовий.

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