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
let count = 0;
const nums = [0, 1, 2, 3];

nums.forEach(num => {
if (num) count += 1
})

console.log(count)
Что будет на выходе?
Anonymous Quiz
14%
1
3%
2
57%
3
25%
4
Пояснение к предыдущему посту

Условие if внутри цикла forEach проверяет, является ли значение num истинным или ложным. Поскольку первое число в массиве nums равно 0, то есть ложное значение, блок оператора if не будет выполнен. count увеличивается только для остальных 3 чисел в массиве nums: 1, 2 и 3. Поскольку count увеличивается на 1 3 раза, значение count равно 3.
className убивает ваш UI kit

UI kit играет важную роль в разработке веб-интерфейсов. Он представляет собой набор компонентов и стилей. Основная ценность его использования - это экономия времени. Вместо того, чтобы создавать каждый элемент с нуля, разработчики могут использовать уже готовые элементы, что ускоряет процесс разработки.

Ссылка

#статьи
Кеширование next.js. Дар или проклятие

В 13 версии команда next.js представила новый подход к проектированию приложения - так называемый App Router. В 14 версии его сделали стабильным и основным для новых приложений.

App Router значительно расширяет функционал next.js - частичный пререндеринг, шаблоны, параллельные и перехватываемые роуты, серверные компоненты и многое другое. Однако, даже несмотря на все эти улучшения - далеко не все решили перейти на App Router. И на это есть свои причины.

Ссылка

#статьи
function getFruit(fruits) {
console.log(fruits?.[1]?.[1])
}

getFruit([['🍊', '🍌'], ['🍍']])
getFruit()
getFruit([['🍍'], ['🍊', '🍌']])
Пояснение к предыдущему посту

? позволяет нам дополнительно получить доступ к более глубоким вложенным свойствам внутри объектов. Мы пытаемся зарегистрировать элемент с индексом 1 в подмассиве с индексом 1 массива fruits. Если подмассив с индексом 1 в массиве fruits не существует, он просто вернет undefined. Если подмассив с индексом 1 в массиве fruits существует, но в этом подмассиве нет элемента с индексом 1, он также вернет значение undefined.

Во-первых, мы пытаемся зарегистрировать второй элемент в ['🍍'] подмассива [['🍊', '🍌'], ['🍍']]. Этот подмассив содержит только один элемент, что означает, что в индексе 1 нет элемента, и возвращает значение undefined.

Затем мы вызываем функцию getFruits без передачи значения в качестве аргумента, что означает, что fruits по умолчанию имеет значение undefined. Поскольку мы условно связываем элемент с индексом 1 массива fruits, он возвращает значение undefined, поскольку этот элемент с индексом 1 не существует.

Наконец, мы попытаемся зарегистрировать второй элемент в ['🍊', '🍌'] подмассива ['🍍'], ['🍊', '🍌']. Элемент с индексом 1 в этом подмассиве — 🍌, который регистрируется.
Взгляд на асинхронность в JavaScript: роль Event Loop, промисов и async/await

В этой статье мы сосредоточимся на ключевых элементах асинхронного программирования в JavaScript: Event Loop, микро и макро задачи, Event Bus, промисы и синтаксический сахар async/await. Разберемся, как эти концепции взаимодействуют между собой и как их использование помогает нам создавать более эффективные и отзывчивые веб-приложения.

Ссылка

#статьи
class Calc {
constructor() {
this.count = 0
}

increase() {
this.count ++
}
}

const calc = new Calc()
new Calc().increase()

console.log(calc.count)
Что будет на выходе?
Anonymous Quiz
48%
0
29%
1
10%
undefined
13%
ReferenceError
Пояснение к предыдущему посту

Мы устанавливаем переменную calc равной новому экземпляру класса Calc. Затем мы создаем экземпляр нового экземпляра Calc и вызываем метод увеличения для этого экземпляра. Поскольку свойство count находится в конструкторе класса Calc, свойство count не используется в прототипе Calc. Это означает, что значение count не было обновлено для экземпляра, на который указывает calc, count по-прежнему равен 0.
Всем привет! Напоминаю, что сегодня начинается фестиваль по трудоустройству для фронтендеров.

В рамках него вы можете:
— получить персональный фидбэк и советы по вашему резюме
— решить тестовое задание и получить разбор вашего решения
— пройти тестовое собеседование

На стримах вы сможете посмотреть, что спрашивают, как разбирают ответы участников, получить знания и стать увереннее в себе.

Сегодня вечером можно прийти посмотреть первый эфир и прокачать свое резюме по ссылке — будет полезно и интересно 🥸
Please open Telegram to view this post
VIEW IN TELEGRAM
Создание интерактивных анимаций с помощью React Spring

Эта статья посвящена React Spring — библиотеке анимации на основе JavaScript. Мы рассмотрим её фичи, включая различные хуки и компоненты, и то, как использовать их в приложениях.

Ссылка

#статьи
const user = {
email: "e@mail.com",
password: "12345"
}

const updateUser = ({ email, password }) => {
if (email) {
Object.assign(user, { email })
}

if (password) {
user.password = password
}

return user
}

const updatedUser = updateUser({ email: "new@email.com" })

console.log(updatedUser === user)
Что будет на выходе?
Anonymous Quiz
36%
false
42%
true
12%
TypeError
10%
ReferenceError
Пояснение к ответу

Функция updateUser обновляет значения свойств email и password у пользователя, если их значения переданы в функцию, после чего функция возвращает объект user. Возвращаемое значение функции updateUser — это объект user, что означает, что значение updatedUser является ссылкой на тот же объект user, на который указывает user. updatedUser === user равно true.
Пора переходить на микрофронтенд? Опыт «Инферит Клаудмастер»

В этой статье вы узнаете о:

факторах, сформировавших тренд на уход фронтенд-разработки от монолита к микрофронтенду,
процессах со стороны команды разработки при переходе на микрофронтенд,
кейсе платформы “Инферит Кладумастер”: почему для нашей команды микрофронтенд с плагином Module Federation стал полезным решением,
признаках того, что пора переходить на микрофронтенд.

Ссылка

#статьи
Воплощённые типы

Хочу представить вам подход к определению типов, позволяющий сделать ваш код чище и понятнее. Я называю это «Воплощённые типы» («Embodied types»).

Воплощённый тип - тип, для которого определена переменная с одинаковым именем и в которой содержится объект с утилитами для этого типа.

Ссылка

#статьи
const animals = {};
let dog = { emoji: '🐶' }
let cat = { emoji: '🐈' }

animals[dog] = { ...dog, name: "Mara" }
animals[cat] = { ...cat, name: "Sara" }

console.log(animals[dog])