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
Что будет на выходе?
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])
Пояснение к предыдущему посту

Ключи объекта преобразуются в строки.

Поскольку значение dog является объектом, animals[dog] на самом деле означает, что мы создаем новое свойство под названием "object Object", равное новому объекту. animals["object Object"] теперь равно { emoji: "🐶", name: "Mara"}.

cat также является объектом, что означает, что animals[cat] на самом деле означает, что мы перезаписываем значение animals["object Object"] новыми свойствами кота.

Регистрация animals[dog], или фактически animals["object Object"], поскольку преобразование объекта dog в строку приводит к "object Object", возвращает { emoji: "🐈", name: " Сара"}.
Лонгрид о JavaScript

JavaScript — ужасный язык программирования. По сравнению с другими распространёнными языками он выглядит генетическим уродом. Дело даже не в отсутствии многопоточности, или статической типизации, или того, что node-modules для простого проекта занимают сотни мегабайт, а в том, что в JavaScript столько стилей и подходов, что семь человек одну и ту же несложную задачу могут написать на нём семью различными способами. Каждый из них с трудом будет понимать, что написал другой, и тихо материться. Причем, так напишут и новички, и опытные программисты, которые просто привыкли писать по‑своему или захотели выпендриться.

Ссылка

#статьи
const user = {
email: "my@email.com",
updateEmail: email => {
this.email = email
}
}

user.updateEmail("new@email.com")
console.log(user.email)
Что будет на выходе?
Anonymous Quiz
30%
my@email.com
54%
new@email.com
11%
undefined
5%
ReferenceError
Пояснение к ответу

Функция updateEmail представляет собой стрелочную функцию и не привязана к объекту пользователя. Это означает, что ключевое слово this не относится к объекту user, а в данном случае относится к глобальной области видимости. Значение email в объекте user не обновляется. При регистрации значения ||user.email|| возвращается исходное значение ||my@email.com||.
Почему реактивность без VDOM (с реальным DOM) лучше, чем реактивность с VDOM?

В этой статье я хотел бы поделиться своими мыслями о том, почему виртуального DOM можно избежать при создании реактивности сегодня. Я работаю со всем этим уже около полутора лет, создавая фреймворк Cample.js, и у меня есть некоторые соображения по этому поводу.

Ссылка

#framework
Стоит ли становиться Fullstack разработчиком

Сегодня я кратко (или не очень) изложу свои мысли о том, стоит ли быть fullstack разработчиком, какие плюсы и минусы у такого пути развития и для кого такое направление выгодно.

Ссылка

#статьи
const promise1 = Promise.resolve('First')
const promise2 = Promise.resolve('Second')
const promise3 = Promise.reject('Third')
const promise4 = Promise.resolve('Fourth')

const runPromises = async () => {
const res1 = await Promise.all([promise1, promise2])
const res2 = await Promise.all([promise3, promise4])
return [res1, res2]
}

runPromises()
.then(res => console.log(res))
.catch(err => console.log(err))
Пояснение к ответу

Метод Promise.all выполняет переданные промисы параллельно. Если одно обещание не выполняется, метод Promise.all отколняется со значением отклоненного обещания. В этом случае promise3 отклонен со значением "Third". Мы перехватываем отклоненное значение в цепочке методов catch при вызове runPromises, чтобы перехватывать любые ошибки внутри функции runPromises. Только "Third" регистрируется, так как promise3 отклонено с этим значением.