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

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

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

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

class Person {
constructor(name) {
this.name = name
}
}

const member = new Person("John")
console.log(typeof member)
🤯2
Что будет в консоли ?
Anonymous Quiz
9%
class
14%
function
64%
object
12%
string
Пояснение к ответу

Классы являются синтаксическим сахаром для функций-конструкторов. Эквивалентом класса Person в качестве функции-конструктора будет function Person() { this.name = name }. Вызов функции-конструктора с ключевым словом new приводит к созданию нового экземпляра объекта Person. Выражение typeof member возвращает object.
👍7
RxJs для самых маленьких

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

Ссылка

#статьи
👍61👎1🔥1

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