en
Feedback
CodeRoll | Frontend

CodeRoll | Frontend

Open in Telegram

OZ — Лучшее для разработчика и дизайнера / IT инструменты, курсы и книги — Веб-разработка на JS, HTML, CSS, React, Vue,Angular Купить рекламу: https://telega.in/c/coderoll Чат: https://t.me/coderoll_chat По всем вопросам пишите сюда - @yankovsky_ads

Show more
4 110
Subscribers
-224 hours
-137 days
-3930 days
Posts Archive
[1, 2, 3, 4].reduce((x, y) => console.log(x, y));

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

Вопросы с собеседования: 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)
        })
    })
  })
}

Сжатие css классов. Как сделать веб Ещё быстрее. next.js Долгие годы шли споры, как лучше именовать классы - по бэму, по целя
Сжатие css классов. Как сделать веб Ещё быстрее. next.js Долгие годы шли споры, как лучше именовать классы - по бэму, по целям, по компонентам или как угодно, но с добавлением хеша. И это действительно важный вопрос, какой способ будет комфортен в разработке большого и развивающегося проекта. Но, что эти способы означают для пользователя, нужны ли ему эти классы и как они связанны с его опытом? Порою, заходя в стили проектов, я невольно пугаюсь сложившейся длине имён - модуль, блок, элемент, подэлемент, модификатор 1, модификатор 2. БЭМ действительно великолепен и я не собираюсь его отрицать, но его размеры оставляют желать лучшего. Ссылка #статьи

React-lens — эффективное управление состоянием в приложениях в ReactJs Во многих разрабатываемых программах мы сталкиваемся с
React-lens — эффективное управление состоянием в приложениях в ReactJs Во многих разрабатываемых программах мы сталкиваемся с необходимостью организации работы с данными. Такие задачи могут быть самыми разными: хранение, актуализация, масштабирование и т. п. А ещё приходится реализовывать взаимодействие различных библиотек. Рассмотрим один из способов решения этих проблем при помощи React Lens. Ссылка #react

‼️Всем кодерам посвящается‼️ Code ready — лучшие подборки эффектов, анимаций и многое другое для твоих проектов, сразу с готовым кодом и примером их использования. 🪩 Расставь приоритеты, добавь лёгкости в свою работу и становись лучше с @code_ready

‼️Всем кодерам посвящается‼️ Code ready — лучшие подборки эффектов, анимаций и многое другое для твоих проектов, сразу с готовым кодом и примером их использования. 🪩 Расставь приоритеты, добавь лёгкости в свою работу и становись лучше с @code_ready

Какой контент хотели бы видеть на канале ? пишите в комментариях свои варианты ⬇️

Пояснение к предыдущему посту Можно комбинировать объекты с помощью оператора распространения .... Это позволяет создавать копии пар ключ/значение одного объекта и добавлять их в другой объект. В этом случае мы создаем копии объекта user и добавляем их в объект admin. Объект admin теперь содержит скопированные пары ключ/значение, что приводит к {admin: true, name: "Lydia", age: 21}.

Какой будет вывод?
Anonymous voting

const user = { name: 'Lydia', age: 21 };
const admin = { admin: true, ...user };

console.log(admin);

ECMAScript 6+ vs TypeScript Минули те времена, когда разработчики писали Frontend на «чистом» JavaScript (вплоть до ECMAScrip
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

Cache API — кэшируем данные на стороне клиента Cache API - сравнительно старый API для управления хранилищем кэша, доступный
Cache API — кэшируем данные на стороне клиента Cache API - сравнительно старый API для управления хранилищем кэша, доступный уже во всех современных браузерах и являющийся частью ServiceWorker. Ссылка #статьи

Оператор delete возвращает логическое значение: true при успешном удалении, иначе он вернет false. Однако переменные, объявленные с ключевым словом var, const или let, не могут быть удалены с помощью оператора delete. Переменная name была объявлена ​​с ключевым словом const, поэтому ее удаление не было успешным: возвращается false. Когда мы устанавливаем age равным 21, мы фактически добавляем свойство с именем age к глобальному объекту. Вы можете успешно удалить свойства из объектов, в том числе из глобального объекта, поэтому delete age возвращает true.

Какой будет вывод?
Anonymous voting

const name = 'Lydia';
age = 21;

console.log(delete name);
console.log(delete age);

Дизайн в FIGMA с нуля. Бесплатный курс + портфолио Онлайн-программа с наставником и чатом. Дизайн от профессионалов. Доступ 0 руб. Узнать больше #реклама 16+ yudaevschool.online О рекламодателе

Next.js App Router. Опыт использования. Путь в будущее или поворот не туда Next.js сделал крупный шаг, взяв на себя ответстве
Next.js App Router. Опыт использования. Путь в будущее или поворот не туда Next.js сделал крупный шаг, взяв на себя ответственность за кеширование и работу с запросами, добавив серверные компоненты, введя параллельные и перехватываемые роуты, а также ряд других абстракций. В этой статье речь пойдёт о причинах этого шага, возможностях, проблемах и личном мнении - был ли этот шаг в будущее или же шаг прямиком в яму. Ссылка #статьи

Изучаешь frontend? Подпишись на канал CCODE, где ты найдешь все, что нужно для развития в этой увлекательной области программирования! 👉Подписаться на канал

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