Коллекция фрагментов кода, которые помогут вам оптимизировать ваши веб-проекты.

https://web.dev/patterns/

👉 @frontend_1

Руководство для начинающих по трассировке Chrome

Я занимаюсь производительностью веб-сайтов уже некоторое время, поэтому я провел много времени на вкладке Performance в Chrome DevTools. Но иногда, когда вы отлаживаете сложную проблему с производительностью, вам нужно углубиться. Вот тут-то и приходит на помощь трассировка Chrome.

Трассировка Chrome (она же трассировка Chromium) позволяет записывать трассировку производительности, которая фиксирует низкоуровневые детали работы браузера. В основном ее используют сами инженеры Chromium, но она может быть полезна и для веб-разработчиков, когда трассировки DevTools недостаточно.

Этот пост - краткое руководство по использованию этого инструмента с точки зрения веб-разработчика. Я не собираюсь описывать все - только необходимый минимум для начала работы.

https://nolanlawson.com/2022/10/26/a-beginners-guide-to-chrome-tracing/

👉 @frontend_1

Руководство для начинающих по JavaScript async/await, с примерами

Ключевые слова async и await в JavaScript предоставляют современный синтаксис, помогающий нам обрабатывать асинхронные операции. В этом учебнике мы подробно рассмотрим, как использовать async/await для управления потоками в наших программах на JavaScript.

https://www.sitepoint.com/javascript-async-await/

👉 @frontend_1

Использование директивы NgOptimizedImage для реализации загрузки изображений в Angular

Директива NgOptimizedImage в Angular отвечает за реализацию загрузки изображений, сохраняя высокую производительность. Она доступна в Angular v14.2.0. Директива помечена как standalone и может быть импортирована в standalone компоненты и модули.

Eng https://netbasal.com/using-angular-ngoptimizedimage-to-implement-image-loading-best-practices-e20a69d71ea3

Rus https://habr.com/ru/post/685018/

👉 @frontend_1

10 ошибок, которых следует избегать при работе с Vue 3

Vue 3 стабилен уже довольно долгое время. Многие компании используют его в продакшене, и всем остальным рано или поздно придется перейти на него. У меня была возможность поработать с ним и я записал свои ошибки, которых вы, вероятно, захотите избежать.

https://fadamakis.com/10-mistakes-to-avoid-when-starting-with-vue-3-1d1ced8552ae

👉 @frontend_1

Почему вам не нужна версия для слабовидящих

Представьте, что в кафе на застолье пришел веган. Его друзья, зная это, специально выбрали кафе с отдельным меню для веганов. Но в нем только макароны с кабачками и вишневый компот, а в обычном меню есть и картошка, и салаты и другая еда, в которой достаточно заменить пару ингредиентов, чтобы веган мог это есть. Естественно, гость в недоумении? Почему макароны с кабачками? Для чего вообще отдельное веганское меню?

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

Меня зовут Лена Райан, я — frontend-разработчик в X5 Tech, борец за вёрстку кнопок кнопками, доступность и семантику, амбассадор WTM, приношу новости в «Веб-стандарты» и помогаю с активностями в джун-чате, катаюсь на сноуборде и сёрф-скейте. Расскажу о популярных заблуждениях в теме доступности, юридической стороне вопроса и опыте слабовидящего человека.

https://habr.com/ru/companies/oleg-bunin/articles/660691/

👉 @frontend_1

OKLCH в CSS: по­че­му мы ушли от RGB и HSL

В CSS мы чаще всего пишем цвета через rgb() или hex — но так сложилось исторически. Новая спецификация CSS Color 4 позволит нам описывать цвета через новые методы. В этой статье мы расскажем, почему нам больше всего нравится oklch().

https://web-standards.ru/articles/oklch-in-css-why-quit-rgb-hsl/

👉 @frontend_1

Глубокое клонирование объектов в JavaScript, современный способ

https://www.builder.io/blog/structured-clone

👉 @frontend_1

Топ рекомендаций по Core Web Vitals на 2023 год

Представляю вашему вниманию перевод этой замечательной статьи, представляющей собой коллекцию лучших практик, которые по мнению команды Chrome DevRel являются наиболее эффективными способами улучшения показателей Core Web Vitals.

Core Web Vitals — это часть метрик Web Vitals, используемых для оценки веб-страниц и включенных во все инструменты Google. Владельцы сайтов должны учитывать эти метрики. Каждый показатель Core Web Vitals представляет собой отдельный аспект опыта взаимодействия пользователя с сайтом, измеряемый в полевых условиях и отражающий реальные действия по достижению критически важного результата, ориентированного на пользователя.

https://habr.com/ru/companies/timeweb/articles/714280/

👉 @frontend_1

Modern-errors

Библиотека для обработки ошибок в JavaScript/TypeScript

https://github.com/ehmicky/modern-errors

👉 @frontend_1

Как на практике работать над перфомансом веб-приложения: опыт Авто.ру

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

Примерно полтора года назад мне пришла задача. Если измерить производительность сайта Авто.ру с помощью Lighthouse, то мы получим определенное число. Его надо улучшить, чтобы оно стало как можно ближе к 100.

https://habr.com/ru/companies/jugru/articles/714656/

👉 @frontend_1

Использование CSS-селектора :is()

https://www.bram.us/2023/01/17/using-is-in-complex-selectors-selects-more-than-you-might-initially-think/

👉 @frontend_1

Frontend meetup (Online)

1. Построение микрофронтендной архитектуры. Первый взгляд, боли и решения —Никита Морозов, АО "МТТ"
В докладе будет представлен путь построения микрофронтендной архитектуры на примере проекта МТС «Exolve», а также поэтапный рассказ об эволюции проекта от webpack до vite, от SingleSPA до собственного решения

2. Бьем монолит. Основные практики — Гузенко Александр IT_ONE
Рассмотрим основные подходы к разбиению монолитных фронтедов.

3. Безопасный TypeScript. Защищаемся от any в кодовой базе —Максим Земсков, Яндекс
Как получить максимум безопастности при использования TypeScript. Какие настройки стоит использовать и как улучшить типизацию стандартных функций.

4. Beyond Frontend — Алексей Тюльдюков, VK
Как T-shape подход может помочь фронтенд разработчику стать техническим менеджером

🗓 12 июля, начало в 19:00 мск, Среда

🚀 Телеграмм канал с анонсами митапов

✅ Регистрация на мероприятие

5 важных различий между ref() и reactive() в Vue

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

Однако, как и я, вы, возможно, задаете себе вечный вопрос: каковы основные различия между ref() и reactive()? И когда использовать тот или иной метод?

https://dmitripavlutin.com/ref-reactive-differences-vue/

👉 @frontend_1

Подборка материалов для погружения в Angular: выбор сотрудников Selectel

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

https://habr.com/ru/companies/selectel/articles/713876/

👉 @frontend_1