Рефакторинг на максималках

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

Примеры в книге написаны преимущественно на JavaScript и иногда на TypeScript. Однако описанные техники рефакторинга применимы и в других высокоуровневых языках. Если вы не пишите на JS/TS, но можете понять небольшие фрагменты кода на них, то эта книга может оказаться полезной и вам тоже.

https://github.com/bespoyasov/refactor-like-a-superhero/blob/main/manuscript-ru/README.md

👉 @frontend_1

Sailboat UI

Создайте свой сайт быстро с помощью пользовательского интерфейса Sailboat
Sailboat UI - это современная библиотека компонентов пользовательского интерфейса для Tailwind CSS. Начните работу с 150+ компонентами Tailwind CSS с открытым исходным кодом и упростите создание своих продуктов.

https://sailboatui.com/

👉 @frontend_1

React Batching от создания (v0.4.0) до React 18

React Batching - это инструмент, который неявно присутствует в ежедневной разработке, но все же его понимание, может помочь ускорить вашу страницу, а так же объяснить иногда казалось бы странное поведение рендера

00:00 Анонс темы
01:25 Знакомство со спикером
02:44 Задачки по батчингу
07:35 От теории к практике
09:55 Что есть батчинг
11:08 unstable_batchedUpdates
14:15 Пример из реальной жизни
17:14 flushSync
21:31 Redux не решает проблему
24:12 История батчинга
28:38 Вспоминаем React версии 0.4.0
30:00 Благодарность
30:45 Вопросы и Ответы

https://www.youtube.com/watch?v=lj0JjbVJPz0


✍️ @React_lib

🚨LAST CAAAAALL🚨
PROFBUH HACKATHON | JUNE

Закрываем регистрацию на хакатон 19 июня в 23:59⚡️

Кейс:
🔸Автоматическое создание текстовых публикаций на основе записанного видео.

Даты хакатона:
23 – 25 июня 2023 года
Регистрация - https://clck.ru/34WoHs

🔸2 дня в онлайн-формате
🔸встречи с экспертами, мастер-классы и питчи
🔸крутой командный проект и интересный кейс в резюме
🔸призовой фонд – 300.000₽🔥

Регистрируйся, решай кейс и выигрывай денежные призы и крутой мерч!🏆

Ждём всех!

#хакатон #lastcall

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

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