CodeRoll | Frontend
Kanalga Telegram’da o‘tish
OZ — Лучшее для разработчика и дизайнера / IT инструменты, курсы и книги — Веб-разработка на JS, HTML, CSS, React, Vue,Angular Купить рекламу: https://telega.in/c/coderoll Чат: https://t.me/coderoll_chat По всем вопросам пишите сюда - @yankovsky_ads
Ko'proq ko'rsatish4 021
Obunachilar
-524 soatlar
-167 kun
-5230 kun
Postlar arxiv
4 021
Пояснение к предыдущему посту
Первым аргументом, который получает метод reduce, является аккумулятором, в данном случае x. Второй аргумент - это текущее значение, y. С помощью метода reduce мы выполняем функцию обратного вызова для каждого элемента в массиве, что в конечном итоге может привести к единственному значению.
В этом примере мы не возвращаем никаких значений, мы просто регистрируем значения аккумулятора и текущее значение.
Значение аккумулятора равно ранее возвращенному значению функции обратного вызова. Если вы не передадите необязательный аргумент initialValue методу reduce, аккумулятор будет равен первому элементу при первом вызове.
При первом вызове аккумулятор (x) равен 1, а текущее значение (y) равно 2. Мы не возвращаемся из функции обратного вызова, мы регистрируем аккумулятор и текущее значение: 1 и 2 регистрируются.
Если вы не возвращаете значение из функции, она возвращает значение undefined. При следующем вызове аккумулятор равен undefined, а текущее значение равно 3. undefined и 3 будут зарегистрированы.
При четвертом вызове мы снова не возвращаемся из функции обратного вызова. Аккумулятор снова равен undefined, а текущее значение равно 4. undefined и 4 будут зарегистрированы.
4 021
Улучшаем качество кода React-приложения с помощью Compound Components
Если у вас есть компоненты с кучей условий, которые сложно читать, ревьюить и понимать, что там происходит, то эта статья для вас. Здесь я поделюсь подходом, который поможет уменьшить большие и страшные React-компоненты.
Ссылка
#статьи
4 021
Вопросы с собеседования: Promise.all
Очень часто на собеседованиях любят давать заданию что бы собеседуемый написал свою реализацию
Promise.all, эту задачу я встречал во многих крупных компаниях. И хотелось бы поделиться с вами решением этой задачи с подробным объяснением.
Для начала вспомним работу оригинального Promise.all.
Он принимает коллекцию промисов, начинает одновременно их выполнять и возвращает новый промис. Если все переданные промисы выполнятся, возвращаемый промис тоже выполнится и в нём будет лежать массив результатов, причём в том же порядке. Но! Если какой-то промис вылетел с ошибкой, то Promise.all прекращает работу раньше и возвращаемый промис будет отклонён.
Таким образом у нас есть два сценария:
Позитивный: Когда все промисы завершились успешно. Тут в ответ придёт массив результатов с сохранением очерёдности.
Негативный: Когда какой-то промис завершился с ошибкой. Тут Promise.all не будет ждать завершение оставшихся, а сразу перейдёт в состояние rejected с полученной ошибкой.
Сначала попробуйте решить самостоятельно, можете написать свое решение в комментариях
Случай, когда у нас произошла ошибка, обрабатывать отдельно не нужно — возвращаемый промис автоматически перейдёт в состояние rejected.
// На вход к нам приходит массив промисов
Promise.all = (promises) => {
// Здесь будем хранить результаты успешно завершенных промисов
const results = []
// Количество промисов, которые осталось выполнить
// На данный момент не выполнился еще ни один промис!
let rest = promises.length
// Возвращаем, естественно, новый промис
return new Promise((resolve) => {
// Проходимся по списочку
promises.forEach((promise, index) => {
promise
// Если промис завершается успешно
.then((result) => {
// Кладём его в наше хранилище
// Причём сохраняем индекс, под которым он был в массиве `promises`
results[index] = result
// На один невыполненный промис стало меньше!
rest -= 1
// Если активных промисов больше нет, то резолвим результат
if (rest === 0) resolve(results)
})
})
})
}4 021
Сжатие css классов. Как сделать веб Ещё быстрее. next.js
Долгие годы шли споры, как лучше именовать классы - по бэму, по целям, по компонентам или как угодно, но с добавлением хеша. И это действительно важный вопрос, какой способ будет комфортен в разработке большого и развивающегося проекта. Но, что эти способы означают для пользователя, нужны ли ему эти классы и как они связанны с его опытом?
Порою, заходя в стили проектов, я невольно пугаюсь сложившейся длине имён - модуль, блок, элемент, подэлемент, модификатор 1, модификатор 2. БЭМ действительно великолепен и я не собираюсь его отрицать, но его размеры оставляют желать лучшего.
Ссылка
#статьи
4 021
React-lens — эффективное управление состоянием в приложениях в ReactJs
Во многих разрабатываемых программах мы сталкиваемся с необходимостью организации работы с данными. Такие задачи могут быть самыми разными: хранение, актуализация, масштабирование и т. п. А ещё приходится реализовывать взаимодействие различных библиотек. Рассмотрим один из способов решения этих проблем при помощи React Lens.
Ссылка
#react
4 021
‼️Всем кодерам посвящается‼️
Code ready — лучшие подборки эффектов, анимаций и многое другое для твоих проектов, сразу с готовым кодом и примером их использования.
🪩 Расставь приоритеты, добавь лёгкости в свою работу и становись лучше с @code_ready
4 021
‼️Всем кодерам посвящается‼️
Code ready — лучшие подборки эффектов, анимаций и многое другое для твоих проектов, сразу с готовым кодом и примером их использования.
🪩 Расставь приоритеты, добавь лёгкости в свою работу и становись лучше с @code_ready
4 021
Какой контент хотели бы видеть на канале ?
пишите в комментариях свои варианты ⬇️
4 021
Пояснение к предыдущему посту
Можно комбинировать объекты с помощью оператора распространения .... Это позволяет создавать копии пар ключ/значение одного объекта и добавлять их в другой объект. В этом случае мы создаем копии объекта user и добавляем их в объект admin. Объект admin теперь содержит скопированные пары ключ/значение, что приводит к {admin: true, name: "Lydia", age: 21}.
4 021
const user = { name: 'Lydia', age: 21 };
const admin = { admin: true, ...user };
console.log(admin);4 021
ECMAScript 6+ vs TypeScript
Минули те времена, когда разработчики писали Frontend на «чистом» JavaScript (вплоть до ECMAScript 5). Все изменилось с выходом в свет версии ECMAScript 6 в 2015-м году. Это событие стало, по истине значимым в мировой Frontend разработке. Предыдущие 6 лет до этого, язык практически не менялся. Годом ранее, в 2014-м, компания Microsoft опубликовала TypeScript 1.0 и предоставила встроенную поддержку языка в своей IDE VisualStudio 2013. На самом деле, официально, TypeScript был выпущен еще в 2012 (версия 0.8), однако, популярностью он не пользовался в виду практически полного отсутствия поддержки со стороны существующих, на тот момент, IDE.
Ссылка
#js
4 021
Cache API — кэшируем данные на стороне клиента
Cache API - сравнительно старый API для управления хранилищем кэша, доступный уже во всех современных браузерах и являющийся частью ServiceWorker.
Ссылка
#статьи
4 021
Оператор delete возвращает логическое значение: true при успешном удалении, иначе он вернет false. Однако переменные, объявленные с ключевым словом var, const или let, не могут быть удалены с помощью оператора delete.
Переменная name была объявлена с ключевым словом const, поэтому ее удаление не было успешным: возвращается false. Когда мы устанавливаем age равным 21, мы фактически добавляем свойство с именем age к глобальному объекту. Вы можете успешно удалить свойства из объектов, в том числе из глобального объекта, поэтому delete age возвращает true.
4 021
const name = 'Lydia';
age = 21;
console.log(delete name);
console.log(delete age);4 021
Дизайн в FIGMA с нуля. Бесплатный курс + портфолио
Онлайн-программа с наставником и чатом. Дизайн от профессионалов. Доступ 0 руб.
Узнать больше
#реклама 16+
yudaevschool.online
О рекламодателе
4 021
Next.js App Router. Опыт использования. Путь в будущее или поворот не туда
Next.js сделал крупный шаг, взяв на себя ответственность за кеширование и работу с запросами, добавив серверные компоненты, введя параллельные и перехватываемые роуты, а также ряд других абстракций. В этой статье речь пойдёт о причинах этого шага, возможностях, проблемах и личном мнении - был ли этот шаг в будущее или же шаг прямиком в яму.
Ссылка
#статьи
