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

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

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

По всем вопросам пишите сюда - @yankovsky_ads
Download Telegram
Вопросы с собеседования: 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)
})
})
})
}
Улучшаем качество кода React-приложения с помощью Compound Components

Если у вас есть компоненты с кучей условий, которые сложно читать, ревьюить и понимать, что там происходит, то эта статья для вас. Здесь я поделюсь подходом, который поможет уменьшить большие и страшные React-компоненты.

Ссылка

#статьи
[1, 2, 3, 4].reduce((x, y) => console.log(x, y));
Пояснение к предыдущему посту

Первым аргументом, который получает метод reduce, является аккумулятором, в данном случае x. Второй аргумент - это текущее значение, y. С помощью метода reduce мы выполняем функцию обратного вызова для каждого элемента в массиве, что в конечном итоге может привести к единственному значению.

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

Значение аккумулятора равно ранее возвращенному значению функции обратного вызова. Если вы не передадите необязательный аргумент initialValue методу reduce, аккумулятор будет равен первому элементу при первом вызове.

При первом вызове аккумулятор (x) равен 1, а текущее значение (y) равно 2. Мы не возвращаемся из функции обратного вызова, мы регистрируем аккумулятор и текущее значение: 1 и 2 регистрируются.

Если вы не возвращаете значение из функции, она возвращает значение undefined. При следующем вызове аккумулятор равен undefined, а текущее значение равно 3. undefined и 3 будут зарегистрированы.

При четвертом вызове мы снова не возвращаемся из функции обратного вызова. Аккумулятор снова равен undefined, а текущее значение равно 4. undefined и 4 будут зарегистрированы.
Вёрстка — это не тупо

Небольшая сводка ошибок которые встречались во Frontende и Вёрстке за время работы с разными проектами. Конечно это очень малая часть и только те ошибки которые постоянно повторяются. Но всё же давайте пробежимся хотя бы по ним.Мб кому-то этого и не хватало))
UI / UX / Code, 2018-2022г

Ссылка

#статьи
Event Loop. Мифы и реальность

В сети есть довольно большое количество публикаций про Event loop и как он работает. Новые статьи появляются на популярных ресурсах и по сей день, в том числе на Хабре. Однако, к сожалению, далеко не вся информация, представленная в этих материалах является проверенной или достоверной. В связи с чем, само понятие обросло рядом мифов и догадок. Порой, даже опытному разработчику требуется немало внимания и опыта, чтобы понять, где истина, а где, чистой воды, вымысел.

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

Ссылка

#js
// index.js
console.log('running index.js');
import { sum } from './sum.js';
console.log(sum(1, 2));

// sum.js
console.log('running sum.js');
export const sum = (a, b) => a + b;
Пояснение к предыдущему посту

С ключевым словом import все импортируемые модули являются pre-parsed. Это означает, что импортированные модули запускаются первыми, код в файле, который импортирует модуль, исполняется после.
В этом разница между require() в CommonJS и import! С помощью require() вы можете загружать зависимости по требованию во время выполнения кода. Если бы мы использовали require вместо import, в консоль были бы записаны running index.js, running sum.js, 3.
Переход с Vue-CLI и Webpack на Vite: ускоряем разработку Vue 3

Vue.js - один из самых популярных JavaScript-фреймворков, который используется для создания динамических пользовательских интерфейсов. С появлением Vue 3, разработчики получили еще больше возможностей для создания мощных и эффективных приложений. Одним из новых инструментов в арсенале Vue 3 является Vite - быстрый и легковесный бандлер, который значительно упрощает процесс разработки и ускоряет сборку проекта. В этой статье мы рассмотрим, как перейти от стандартного подхода с использованием Vue-CLI и Webpack к более продвинутому и эффективному методу работы с помощью Vite.

Ссылка

#статьи
Сокращение типизации с помощью Util Types в Typescript

В данной публикации рассмотрим как можно сократить количество типов/интерфейсов в Typescript, сделать их более лаконичными и сэкономить время себе и своей команде. Все это будем делать с помощью Util Types - специальных типов, которые предоставляет Typescript.

Ссылка

#ts
console.log(Number(2) === Number(2))
console.log(Boolean(false) === Boolean(false))
console.log(Symbol('foo') === Symbol('foo'))
Пояснение к предыдущему посту

Каждый Symbol совершенно уникален. Цель аргумента, переданного Symbol, состоит в том, чтобы дать Symbol описание. Значение Symbol не зависит от переданного аргумента. Когда мы проверяем равенство, мы создаем два совершенно новых Symbol: первый Symbol('foo') и второй Symbol('foo'). Эти два значения уникальны и не равны друг другу, Symbol('foo') === Symbol('foo') возвращает false.
HTML: плохие стороны

Вероятно, вы слышали заявления типа «HTML и так по умолчанию обладает accessibility» или «Не нужно изобретать заново этот абсолютно идеальный элемент управления HTML». Я считаю, что это общие заявления, а не универсальные истины. Веб-разработчикам крайне важно осознавать недостатки платформы, поэтому я решил собрать несколько примеров того, когда у HTML возникают трудности, с точки зрения как accessibility, так и usability.

Ссылка

#html
Утечки памяти, которые не утечки

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

В один прекрасный день боевое сопровождение приходит с ужасной проблемой — память в контейнерах Node.js течет, сервисы падают с OOM каждый день, все пропало!

Ссылка

#статьи
async function getData() {
return await Promise.resolve('I made it!');
}

const data = getData();
console.log(data);
Асинхронная функция всегда возвращает обещание. await все еще должен ждать разрешения обещания: ожидаемое обещание возвращается, когда мы вызываем getData(), чтобы установить data равным ему.

Если бы мы хотели получить доступ к разрешенному значению "I made it", мы могли бы использовать метод .then() для data:

data.then(res => console.log(res))

Тогда это бы вывело "I made it!"