CodeRoll | Frontend
4.98K subscribers
1.6K photos
73 videos
1 file
913 links
— Лучшее для разработчика и дизайнера / IT инструменты, курсы и книги
— Веб-разработка на JS, HTML, CSS, React, Vue,Angular

Купить рекламу: https://telega.in/c/coderoll

Чат: https://t.me/coderoll_chat

По всем вопросам пишите сюда - @yankovsky_ads
Download Telegram

let newList = [1, 2, 3].push(4)

console.log(newList.push(5))
🤯6
Что будет в консоли ?
Anonymous Quiz
45%
[1, 2, 3, 4, 5]
6%
[1, 2, 3, 5]
13%
[1, 2, 3, 4]
36%
ошибка
Пояснение к ответу

Метод push возвращает длину нового массива, а не сам массив. Устанавливая newList равным [1, 2, 3].push(4), мы устанавливаем newList равным 4. Затем мы пытаемся использовать метод push для newList. Поскольку newList является числом 4, мы не можем использовать push - выбрасывается исключение TypeError.
👍9
Новые функции CSS (mod, round) или как сделать анимированные Sprite Sheet без JS

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

Ссылка

#css
👍10👎1🤯1👨‍💻1
await vs yield на примере Effection 3.0 и React

18 декабря 2023 года вышел релиз Effection 3.0 - типизированная альтернативна async/await на генераторах (Structured Concurrency and Effects for JavaScript).

В статье сравним подходы на генераторах и async/await и расскажу как использовать Effection в React для решения типичных проблем с асинхронным кодом:

- Race condition

- AbortController

- Clean up

- Debounce

Ссылка

#статьи
👍51👎1
Оптимизация приложений на React важна для улучшения производительности и пользовательского опыта. Вот несколько ключевых принципов и техник оптимизации в React:

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

const MyComponent = React.memo(function MyComponent(props) {
// Component logic
});


2. Правильное использование useMemo и useCallback
Эти хуки помогают предотвратить выполнение тяжелых вычислений или создание функций при каждом рендере.

useMemo мемоизирует значение:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useCallback мемоизирует функцию:

const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);


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

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
return (
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
);
}


4. Динамическая загрузка (Dynamic Import)
Позволяет загружать модули по мере необходимости, что уменьшает начальный размер бандла.

import(/* webpackChunkName: "moduleA" */ './moduleA').then(module => {
// Использование модуля
});


5. Избегание анонимных функций и стрелочных функций в пропсах
Создание новых функций при каждом рендере может приводить к ненужным рендерингам потомков.

// Вместо этого:
<MyComponent onClick={() => doSomething()} />

// Используйте:
const handleClick = useCallback(() => doSomething(), []);
<MyComponent onClick={handleClick} />


6. Оптимизация рендеров с помощью shouldComponentUpdate и PureComponent
Для классовых компонентов можно переопределить shouldComponentUpdate или использовать PureComponent, который автоматически выполняет поверхностное сравнение пропсов и состояния.

class MyComponent extends React.PureComponent {
render() {
return <div>{this.props.value}</div>;
}
}


7. Избегание большого количества состояний и контекста
Старайтесь не создавать много состояний на уровне компонентов. Вместо этого объединяйте связанные состояния в одно, чтобы уменьшить количество рендеров.

const [state, setState] = useState({
name: '',
age: 0,
address: ''
});

// Изменение состояния:
setState(prevState => ({ ...prevState, name: 'John' }));


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

9. Оптимизация загрузки изображений
Загружайте изображения асинхронно и используйте техники, такие как lazy loading для изображений, чтобы не блокировать рендеринг.

10. Использование производительных библиотек и инструментов
Используйте проверенные и оптимизированные библиотеки, такие как react-window или react-virtualized для рендеринга больших списков.

Эти принципы и техники помогут вам создать более производительные и отзывчивые приложения на React.
👍133🔥3🤡2🤯1

const person = {
name: "John",
age: 30
}

for (const [x, y] of Object.entries(person)) {
console.log(x, y)
}
🤯4🔥3
Пояснение к ответу

Object.entries(person) возвращает массив вложенных массивов, содержащий ключи и значения: [ [ 'name', 'John' ], [ 'age', 30 ] ]. С помощью цикла for-of мы перебираем элементы массива - в данном случае подмассивы. Мы можем деструктурировать подмассивы в цикле, используя const [x, y]. x равняется первому элементу в подмассиве, y - второму. Первым подмассивом является [ "name", "John" ], где x равняется name, а y - John. Вторым подмассивом является [ "age", 30 ], где x равняется age, а y - 30.
👍6
Решение задач Front End с интервью. Throttle

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

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

Ссылка

#js
👍6🔥1
Решение задач Front End с интервью. Promise Pool

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

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

Ссылка

#js
👏6👍21
JavaScript: структуры данных и алгоритмы. Часть 1

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


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


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

Ссылка

#js
👍111👏1👌1🤡1
Как узнать количество перерисовок? React Custom Hook: useRenderCount

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

Ссылка

#react
🔥4👎2👍1🤩1
Что такое атрибут 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 можете прочитать здесь
👍6
Кэширование кода в веб-приложениях

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

Ссылка

#статьи
3👏2👍1
Отличия 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
👍6🔥4👏1
🔧 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, с примерами и детальными объяснениями.
👍11🔥2👏2
⚛️ Продвинутые концепции 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 выполнять задачи без блокировки пользовательского интерфейса.
🔥7👍3😱1
🛠 Типичные ошибки в React и как их избежать

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

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

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

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

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

💡 Избегая этих ошибок, вы сможете сделать свои React-приложения более надежными и производительными!
6👍2🔥2
🎨 Тренды в дизайне UI/UX 2024

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

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

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

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

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

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

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