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
Преобразование часовых поясов в JavaScript: Native Date против Moment.js

понимаю, что управление датами и временем в разных часовых поясах может быть сложной задачей. В JavaScript родной объект Date и популярные библиотеки, такие как Moment.js, обрабатывают часовые пояса по разному. Эта статья углубляется в эти различия и предлагает рассмотреть вопросы форматов даты и времени в API, чтобы достичь ожидаемых результатов в приложениях на JavaScript.

Ссылка

#js
// counter.js
let counter = 10;
export default counter;


// index.js
import myCounter from './counter';

myCounter += 1;

console.log(myCounter);
Какой будет вывод?
Anonymous Quiz
10%
10
57%
11
23%
Error
9%
NaN
Импортированный модуль является read-only: вы не можете изменить импортированный модуль. Только модуль, который их экспортирует, может изменить его значение.

Когда мы пытаемся увеличить значение myCounter, выдается ошибка: myCounter доступен только для чтения и не может быть изменен.
Как уменьшить размер бандла раз и навсегда: приемы, метрики, мониторинг

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

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

Ссылка

#статьи
Next.js App Router. Опыт использования. Путь в будущее или поворот не туда

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

Ссылка

#статьи
const name = 'Lydia';
age = 21;

console.log(delete name);
console.log(delete age);
Какой будет вывод?
Anonymous Quiz
24%
false, true
13%
"Lydia", 21
14%
true, true
50%
undefined, undefined
Оператор delete возвращает логическое значение: true при успешном удалении, иначе он вернет false. Однако переменные, объявленные с ключевым словом var, const или let, не могут быть удалены с помощью оператора delete.

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

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

Ссылка

#статьи
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
const user = { name: 'Lydia', age: 21 };
const admin = { admin: true, ...user };

console.log(admin);
Пояснение к предыдущему посту

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

пишите в комментариях свои варианты ⬇️
React-lens — эффективное управление состоянием в приложениях в ReactJs

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

Ссылка

#react
Сжатие css классов. Как сделать веб Ещё быстрее. next.js

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

Порою, заходя в стили проектов, я невольно пугаюсь сложившейся длине имён - модуль, блок, элемент, подэлемент, модификатор 1, модификатор 2. БЭМ действительно великолепен и я не собираюсь его отрицать, но его размеры оставляют желать лучшего.

Ссылка

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