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 more4 110
Subscribers
-224 hours
-137 days
-3930 days
Posts Archive
4 110
Улучшаем качество кода React-приложения с помощью Compound Components
Если у вас есть компоненты с кучей условий, которые сложно читать, ревьюить и понимать, что там происходит, то эта статья для вас. Здесь я поделюсь подходом, который поможет уменьшить большие и страшные React-компоненты.
Ссылка
#статьи
4 110
Вопросы с собеседования: 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 110
Сжатие css классов. Как сделать веб Ещё быстрее. next.js
Долгие годы шли споры, как лучше именовать классы - по бэму, по целям, по компонентам или как угодно, но с добавлением хеша. И это действительно важный вопрос, какой способ будет комфортен в разработке большого и развивающегося проекта. Но, что эти способы означают для пользователя, нужны ли ему эти классы и как они связанны с его опытом?
Порою, заходя в стили проектов, я невольно пугаюсь сложившейся длине имён - модуль, блок, элемент, подэлемент, модификатор 1, модификатор 2. БЭМ действительно великолепен и я не собираюсь его отрицать, но его размеры оставляют желать лучшего.
Ссылка
#статьи
4 110
React-lens — эффективное управление состоянием в приложениях в ReactJs
Во многих разрабатываемых программах мы сталкиваемся с необходимостью организации работы с данными. Такие задачи могут быть самыми разными: хранение, актуализация, масштабирование и т. п. А ещё приходится реализовывать взаимодействие различных библиотек. Рассмотрим один из способов решения этих проблем при помощи React Lens.
Ссылка
#react
4 110
‼️Всем кодерам посвящается‼️
Code ready — лучшие подборки эффектов, анимаций и многое другое для твоих проектов, сразу с готовым кодом и примером их использования.
🪩 Расставь приоритеты, добавь лёгкости в свою работу и становись лучше с @code_ready
4 110
‼️Всем кодерам посвящается‼️
Code ready — лучшие подборки эффектов, анимаций и многое другое для твоих проектов, сразу с готовым кодом и примером их использования.
🪩 Расставь приоритеты, добавь лёгкости в свою работу и становись лучше с @code_ready
4 110
Какой контент хотели бы видеть на канале ?
пишите в комментариях свои варианты ⬇️
4 110
Пояснение к предыдущему посту
Можно комбинировать объекты с помощью оператора распространения .... Это позволяет создавать копии пар ключ/значение одного объекта и добавлять их в другой объект. В этом случае мы создаем копии объекта user и добавляем их в объект admin. Объект admin теперь содержит скопированные пары ключ/значение, что приводит к {admin: true, name: "Lydia", age: 21}.
4 110
const user = { name: 'Lydia', age: 21 };
const admin = { admin: true, ...user };
console.log(admin);4 110
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 110
Cache API — кэшируем данные на стороне клиента
Cache API - сравнительно старый API для управления хранилищем кэша, доступный уже во всех современных браузерах и являющийся частью ServiceWorker.
Ссылка
#статьи
4 110
Оператор delete возвращает логическое значение: true при успешном удалении, иначе он вернет false. Однако переменные, объявленные с ключевым словом var, const или let, не могут быть удалены с помощью оператора delete.
Переменная name была объявлена с ключевым словом const, поэтому ее удаление не было успешным: возвращается false. Когда мы устанавливаем age равным 21, мы фактически добавляем свойство с именем age к глобальному объекту. Вы можете успешно удалить свойства из объектов, в том числе из глобального объекта, поэтому delete age возвращает true.
4 110
const name = 'Lydia';
age = 21;
console.log(delete name);
console.log(delete age);4 110
Дизайн в FIGMA с нуля. Бесплатный курс + портфолио
Онлайн-программа с наставником и чатом. Дизайн от профессионалов. Доступ 0 руб.
Узнать больше
#реклама 16+
yudaevschool.online
О рекламодателе
4 110
Next.js App Router. Опыт использования. Путь в будущее или поворот не туда
Next.js сделал крупный шаг, взяв на себя ответственность за кеширование и работу с запросами, добавив серверные компоненты, введя параллельные и перехватываемые роуты, а также ряд других абстракций. В этой статье речь пойдёт о причинах этого шага, возможностях, проблемах и личном мнении - был ли этот шаг в будущее или же шаг прямиком в яму.
Ссылка
#статьи
4 110
Изучаешь frontend?
Подпишись на канал CCODE, где ты найдешь все, что нужно для развития в этой увлекательной области программирования!
👉Подписаться на канал
4 110
Как уменьшить размер бандла раз и навсегда: приемы, метрики, мониторинг
Когда я начинал работать над уменьшением размера клиента, мне сильно не хватало подробного гайда или руководства как вообще подступиться к размеру бандла существующего большого приложения: с чего начать, какие инструменты использовать, на что обращать внимание, как и какие метрики снимать.
В этой статье я расскажу как мне удалось значительно уменьшить размер клиентского приложения, с чего я начинал и чем продолжал, как защитил приложение от неподконтрольного раздувания в будущем. Поделюсь полезными инструментами и расскажу на какие метрики стоит обратить внимание.
Ссылка
#статьи
