CodeRoll | Frontend

👩‍💻Насколько потолстел JavaScript к 2024 году?

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

И всё это время я жил с мыслью, что если средний размер страницы равен, скажем, 3 МБ, то JS-бандл должен составлять около 1 МБ. Естественно, основную часть объёма должно занимать содержимое, не так ли?

Ссылка

#js

👩‍💻Вышел Vue 3.5

Сегодня мы рады сообщить о выходе Vue 3.5 "Tengen Toppa Gurren Lagann"!

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

Ссылка

#vue

👩‍💻 CSR, SSG, SSR — про рендеринг приложений на примерах

В статье на примере простого сайта, постараюсь описать три способа рендеринга приложений, раскрыть их плюсы и минусы, и на практических примерах провести сравнение производительности и размеров приложения. Материал больше подойдёт начинающим фронтенд-разработчикам, или тем, кто хочет познакомиться c CSR, SSG и SSR. Для лучшего понимания от вас потребуются начальные знания React, менеджеров пакетов npm или yarn.

Ссылка

#ssr

🎨 Дизайн-системы: Создание масштабируемых UI-компонентов

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

1) Консистентность
Использование единого стиля и компонентов улучшает восприятие бренда и упрощает разработку.

2) Масштабируемость
Дизайн-системы позволяют легко добавлять новые элементы и поддерживать большие проекты.
3)Ускорение разработки

Готовые компоненты и шаблоны сокращают время разработки и тестирования.

Как создать дизайн-систему?

Определите основные элементы
Начните с типографики, цветовой палитры, сетки и базовых компонентов (кнопки, формы и т.д.).

Создайте библиотеку компонентов
Используйте инструменты, такие как Storybook или Figma, для документирования и визуализации компонентов.

Интегрируйте в проект
Реализуйте компоненты в коде с использованием React или других фреймворков, сохраняя их универсальность и настраиваемость.


💡 Полезные ресурсы:
Storybook Documentation
Atomic Design by Brad Frost


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

🚀 Введение в Server-Side Rendering (SSR) с Next.js

⚡️ Server-Side Rendering (SSR) — это процесс рендеринга страниц на сервере, что позволяет значительно улучшить SEO и ускорить время загрузки первой страницы.

Почему стоит использовать SSR?
- SEO: Поисковые системы лучше индексируют страницы с SSR.
- Быстрый первый рендер: Контент отображается быстрее, особенно на медленных устройствах.
- Предварительный рендеринг: Возможность рендерить страницы заранее и кэшировать их.

Как использовать SSR с Next.js?
Next.js — это популярный фреймворк для React, который поддерживает SSR "из коробки". Вот простой пример:

import React from 'react';

export async function getServerSideProps() {
  // Запрос данных на сервере
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return { props: { data } };
}

function Page({ data }) {
  return <div>{data.title}</div>;
}

export default Page;

Полезные ссылки:

Документация Next.js
SSR vs CSR: Что выбрать?(ru)

🌐 Введение в WebAssembly (Wasm)

🔍 WebAssembly (Wasm) — это новая технология, которая позволяет выполнять код в браузере на скорости близкой к нативной. Это отличное решение для улучшения производительности веб-приложений.

Основные особенности:
Скорость: WebAssembly компилируется в машинный код, что делает выполнение значительно быстрее.

Кросс-платформенность: Работает в любом современном браузере.

Совместимость: Может взаимодействовать с JavaScript, что позволяет использовать его вместе с существующим кодом.

💡 Ресурсы:
Официальный сайт WebAssembly
Документация MDN

🎨 Дизайн для доступности: основные принципы и инструменты

♿️ Доступность (Accessibility) — важный аспект веб-дизайна, обеспечивающий удобный доступ к вашему контенту для людей с ограниченными возможностями. Вот основные принципы и инструменты для улучшения доступности:

🔑 Основные принципы:

Семантическая разметка
Используйте правильные HTML-теги (<header>, <nav>, <main>, <footer>) для лучшего восприятия вашего контента скрин-ридерами.

Контраст и читаемость
Убедитесь, что текст хорошо читаем на фоне (достаточный контраст) и используйте большие шрифты.

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

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

Фокусировка
Управляйте фокусом на элементах формы и интерактивных компонентах, чтобы пользователи с ограниченными возможностями могли легко перемещаться по вашему приложению.

🔧 Полезные инструменты:
WAVE — онлайн-инструмент для проверки доступности веб-страниц.
axe — расширение для браузеров, которое помогает находить и исправлять проблемы с доступностью.
Color Contrast Checker — инструмент для проверки контраста текста и фона.

🛠 Интеграция принципов доступности в ваши проекты сделает их более инклюзивными и удобными для всех пользователей.

🔍 Дебаггинг в React — лучшие практики

🛠 Дебаггинг в React может быть сложной задачей, особенно когда приложение становится большим и сложным. Вот несколько лучших практик, которые помогут вам быстрее находить и устранять баги:

React Developer Tools
🔧 Используйте официальное расширение для браузера, чтобы исследовать дерево компонентов, следить за состоянием и пропсами.

Логгирование состояния и пропсов
📝 Используйте console.log, чтобы отслеживать состояние и пропсы. Можно подключить более продвинутые инструменты, такие как redux-logger.

Использование Error Boundaries
🚧 Создайте компоненты Error Boundary, чтобы отлавливать ошибки на уровне компонентов и предотвращать падение всего приложения.

Профилирование производительности
⚡️ Используйте встроенный профайлер React, чтобы понять, какие компоненты занимают больше всего времени при рендеринге.

Storybook
📚 Storybook помогает изолировать и тестировать компоненты вне контекста приложения. Отличный способ проверить логику и дизайн отдельных компонентов.

⚠️ Совет: Всегда разбивайте большой компонент на более мелкие части. Это не только упрощает поддержку, но и облегчает дебаггинг!

🎨 Тренды в дизайне UI/UX 2024

🚀 UI/UX дизайн постоянно развивается, и важно быть в курсе актуальных трендов, чтобы создавать современные и удобные интерфейсы. Вот что будет популярно в 2024 году:

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

Морфизм в интерфейсах
🧊 Neumorphism и Glassmorphism возвращаются, придавая интерфейсам мягкие тени и полупрозрачные слои.

Микро-анимации
🎞 Крошечные анимации улучшают взаимодействие пользователя с приложением, делая его более живым и отзывчивым.

Суперадаптивные интерфейсы
📱 Гибкость на всех устройствах — от больших мониторов до маленьких экранов умных часов. Дизайн должен быть адаптивным и настраиваемым.

Zero UI
🗣 Интерфейсы без экрана, например, голосовые ассистенты или интерфейсы, управляемые жестами.

👨‍🎨 Следуя этим трендам, вы сможете создавать интерфейсы, которые будут не только стильными, но и удобными для пользователей.

🛠 Типичные ошибки в React и как их избежать

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

Неправильное использование состояния
❌ Изменение состояния напрямую (например, this.state.value = newValue).
✅ Всегда используйте setState или useState для обновления состояния.

Отсутствие ключей в списках
❌ Не использовать key или использовать индексы массива в качестве ключей.
✅ Применяйте уникальные идентификаторы для key, чтобы React мог эффективно управлять DOM.

Неоптимизированные рендеры
❌ Рендеринг больших списков без оптимизации.
✅ Используйте React.memo, useMemo или виртуализацию списков (например, с react-window).

Неправильное использование useEffect
❌ Оставление зависимости пустой при необходимости.
✅ Всегда указывайте зависимости в массиве, чтобы избежать нежелательных побочных эффектов.

💡 Избегая этих ошибок, вы сможете сделать свои React-приложения более надежными и производительными!

⚛️ Продвинутые концепции React: Хуки, Контекст и Оптимизация производительности


Конечно! Вот пост для более продвинутых разработчиков, посвященный углубленным темам и современным подходам в React.

⚛️ Продвинутые концепции React: Хуки, Контекст и Оптимизация производительности

🔥 Если вы уже знакомы с основами React, пришло время углубиться в более сложные концепции, которые помогут создавать более гибкие и производительные приложения.

🔄 React Hooks: Революция в управлении состоянием и побочными эффектами
Hooks, представленные в React 16.8, позволили отказаться от классовых компонентов в пользу функциональных, сохраняя при этом все возможности управления состоянием и жизненным циклом компонента.

- useState: Позволяет добавлять состояние в функциональные компоненты.
- useEffect: Управляет побочными эффектами, такими как подписки, API-запросы и манипуляции с DOM.
- useMemo и useCallback: Оптимизируют производительность, предотвращая ненужные рендеры и создания функций.

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  const increment = useCallback(() => setCount(count + 1), [count]);

  return <button onClick={increment}>Click me</button>;
};

🌐 React Context: Управление глобальным состоянием

Контекст позволяет передавать данные (например, тему или авторизацию) через дерево компонентов без необходимости пробрасывать пропсы на каждом уровне.

Создание контекста: const MyContext = React.createContext(defaultValue);
Использование в компонентах: const value = useContext(MyContext);
Контекст полезен, когда нужно избежать "prop drilling", но важно помнить, что его чрезмерное использование может усложнить отладку и понимание кода.

⚡️ Оптимизация производительности: Мемоизация, разделение кода и Concurrent Mode

Для повышения производительности приложений на React важно учитывать несколько ключевых аспектов:

Мемоизация с React.memo, useMemo, useCallback — предотвращает повторные рендеры, если пропсы или состояние не изменились.

Code Splitting с помощью React.lazy и Suspense — позволяет загружать компоненты по мере необходимости, снижая начальный вес приложения.

Concurrent Mode — новый подход к рендерингу, позволяющий React выполнять задачи без блокировки пользовательского интерфейса.

CodeRoll | Frontend pinned Deleted message

🔧 CSS Grid — создание сложных макетов с минимальными усилиями

🎨 CSS Grid — мощный инструмент для создания сложных макетов, который значительно упрощает работу с версткой.

💡 Основные концепции:

- Grid Container — контейнер, в котором работает - сетка.
- Grid Items — элементы, расположенные внутри контейнера.
- Grid Lines — линии, определяющие структуру сетки.

🌐 Пример простого макета с Grid:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.item {
  background-color: #f4f4f4;
  padding: 20px;
  text-align: center;
}

⏩ Результат: Макет с тремя равными колонками, разделенными отступами. CSS Grid упрощает создание адаптивных макетов без сложных вычислений.

📘 Полезные ресурсы:

CSS Grid Garden — Интерактивная игра для изучения CSS Grid. Отличный способ закрепить теорию на практике в игровой форме.

MDN Web Docs: CSS Grid Layout — Документация от Mozilla. Включает описание всех свойств, связанных с CSS Grid, с примерами и детальными объяснениями.

Отличия Function components от class components?

Основные отличия это:

1) Классовые компоненты медленнее, из-за большого количества встроенных методов
2) Классовые компоненты имеют больше методов жизненного цикла
3) Множество синтаксических различий

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

Получается можно забыть про классовые компоненты?

Да, в реальном коде почти нет ситуаций когда классовый компонент будет лучше функционального, можно вспомнить про error boundary, который для своей реализации требует метод из классового компонента, но в противовес есть сторонние библиотеки, реализующие нужное поведение под капотом, или можно зайти на официальный сайт React и скопировать классовый компонет error boundary, и немного его поправить под себя, какой то специфичной логики там нет.
Вот ссылка на Error boundary, если интересно https://ru.react.js.org/docs/error-boundaries.html

Кэширование кода в веб-приложениях

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

Ссылка

#статьи

Что такое атрибут key? Для чего он нужен?

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

Key всегда должен присваивается на верхнем уровне:

Правильно:

const howUseKey = () => {
  const array = [1, 2, 3];
  return (
    <div>
      {array.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </div>
  );
};

Неправильно (Приглядитесь к its a trap):

const howNotUseKey = () => { 
 const array = [1, 2, 3];
  return (
    <div>
      {array.map((item) => (
        <div className="its a trap">
          <div key={item}>{item}</div>
        </div>
      ))}
    </div>
  );
};

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

Более подробно про key можете прочитать здесь

Как узнать количество перерисовок? React Custom Hook: useRenderCount

В этой серии статей мы отправимся в путешествие по миру пользовательских хуков React, открывая для себя их огромный потенциал для улучшения ваших проектов. Сегодня мы сосредоточимся на хуке useRenderCount, одном из многих тщательно разработанных хуков, доступных в коллекции пользовательских хуков React.

Ссылка

#react

JavaScript: структуры данных и алгоритмы. Часть 1

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


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


Код, представленный в этой и других статьях серии, можно найти в этом репозитории.

Ссылка

#js

Решение задач Front End с интервью. Promise Pool

Разбираем задачу Promise Pool (Leetcode 2636)

Дан массив асинхронных функций functions и максимальный размер пула n. Необходимо написать асинхронную функцию promisePool. Она должна возвращать Promise, который разрешается, когда разрешаются все входные функции function.

Ссылка

#js

Решение задач Front End с интервью. Throttle

Задача на реализацию Throttling часто дается на интервью по front end разработке.

Давайте реализуем функцию throttle, которая принимает функцию callback и время ожидания. Вызов throttle() должен возвращать новую функцию, которая будет вызывать внутри себя callback функцию.

Ссылка

#js