Изучаем WebRTC на практике: Лучшие инструменты и демо
В этой статье(или дайджесте) я поделюсь ключевыми инструментами, демонстрационными приложениями и открытыми проектами, незаменимыми для практического понимания WebRTC. Здесь не будет туториалов или подробных объяснений о той или иной части WebRTC, а скорее некий дайджест ресурсов, которые помогут лучше разобраться в теме. Если вы работаете с этой технологией уже какое-то время, вряд ли вы найдете что-то новое для себя.
Ссылка
#статьи
В этой статье(или дайджесте) я поделюсь ключевыми инструментами, демонстрационными приложениями и открытыми проектами, незаменимыми для практического понимания WebRTC. Здесь не будет туториалов или подробных объяснений о той или иной части WebRTC, а скорее некий дайджест ресурсов, которые помогут лучше разобраться в теме. Если вы работаете с этой технологией уже какое-то время, вряд ли вы найдете что-то новое для себя.
Ссылка
#статьи
let count = 0;
const nums = [0, 1, 2, 3];
nums.forEach(num => {
if (num) count += 1
})
console.log(count)
Пояснение к предыдущему посту
Условие if внутри цикла forEach проверяет, является ли значение num истинным или ложным. Поскольку первое число в массиве nums равно 0, то есть ложное значение, блок оператора if не будет выполнен. count увеличивается только для остальных 3 чисел в массиве nums: 1, 2 и 3. Поскольку count увеличивается на 1 3 раза, значение count равно 3.
className убивает ваш UI kit
UI kit играет важную роль в разработке веб-интерфейсов. Он представляет собой набор компонентов и стилей. Основная ценность его использования - это экономия времени. Вместо того, чтобы создавать каждый элемент с нуля, разработчики могут использовать уже готовые элементы, что ускоряет процесс разработки.
Ссылка
#статьи
UI kit играет важную роль в разработке веб-интерфейсов. Он представляет собой набор компонентов и стилей. Основная ценность его использования - это экономия времени. Вместо того, чтобы создавать каждый элемент с нуля, разработчики могут использовать уже готовые элементы, что ускоряет процесс разработки.
Ссылка
#статьи
Кеширование next.js. Дар или проклятие
В 13 версии команда next.js представила новый подход к проектированию приложения - так называемый App Router. В 14 версии его сделали стабильным и основным для новых приложений.
App Router значительно расширяет функционал next.js - частичный пререндеринг, шаблоны, параллельные и перехватываемые роуты, серверные компоненты и многое другое. Однако, даже несмотря на все эти улучшения - далеко не все решили перейти на App Router. И на это есть свои причины.
Ссылка
#статьи
В 13 версии команда next.js представила новый подход к проектированию приложения - так называемый App Router. В 14 версии его сделали стабильным и основным для новых приложений.
App Router значительно расширяет функционал next.js - частичный пререндеринг, шаблоны, параллельные и перехватываемые роуты, серверные компоненты и многое другое. Однако, даже несмотря на все эти улучшения - далеко не все решили перейти на App Router. И на это есть свои причины.
Ссылка
#статьи
function getFruit(fruits) {
console.log(fruits?.[1]?.[1])
}
getFruit([['🍊', '🍌'], ['🍍']])
getFruit()
getFruit([['🍍'], ['🍊', '🍌']])Что будет на выходе?
Anonymous Quiz
16%
null, undefined, 🍌
13%
[], null, 🍌
9%
[], [], 🍌
61%
undefined, undefined, 🍌
Пояснение к предыдущему посту
? позволяет нам дополнительно получить доступ к более глубоким вложенным свойствам внутри объектов. Мы пытаемся зарегистрировать элемент с индексом 1 в подмассиве с индексом 1 массива fruits. Если подмассив с индексом 1 в массиве fruits не существует, он просто вернет undefined. Если подмассив с индексом 1 в массиве fruits существует, но в этом подмассиве нет элемента с индексом 1, он также вернет значение undefined.
Во-первых, мы пытаемся зарегистрировать второй элемент в ['🍍'] подмассива [['🍊', '🍌'], ['🍍']]. Этот подмассив содержит только один элемент, что означает, что в индексе 1 нет элемента, и возвращает значение undefined.
Затем мы вызываем функцию getFruits без передачи значения в качестве аргумента, что означает, что fruits по умолчанию имеет значение undefined. Поскольку мы условно связываем элемент с индексом 1 массива fruits, он возвращает значение undefined, поскольку этот элемент с индексом 1 не существует.
Наконец, мы попытаемся зарегистрировать второй элемент в ['🍊', '🍌'] подмассива ['🍍'], ['🍊', '🍌']. Элемент с индексом 1 в этом подмассиве — 🍌, который регистрируется.
Во-первых, мы пытаемся зарегистрировать второй элемент в ['🍍'] подмассива [['🍊', '🍌'], ['🍍']]. Этот подмассив содержит только один элемент, что означает, что в индексе 1 нет элемента, и возвращает значение undefined.
Затем мы вызываем функцию getFruits без передачи значения в качестве аргумента, что означает, что fruits по умолчанию имеет значение undefined. Поскольку мы условно связываем элемент с индексом 1 массива fruits, он возвращает значение undefined, поскольку этот элемент с индексом 1 не существует.
Наконец, мы попытаемся зарегистрировать второй элемент в ['🍊', '🍌'] подмассива ['🍍'], ['🍊', '🍌']. Элемент с индексом 1 в этом подмассиве — 🍌, который регистрируется.
Взгляд на асинхронность в JavaScript: роль Event Loop, промисов и async/await
В этой статье мы сосредоточимся на ключевых элементах асинхронного программирования в JavaScript: Event Loop, микро и макро задачи, Event Bus, промисы и синтаксический сахар 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)Пояснение к предыдущему посту
Мы устанавливаем переменную calc равной новому экземпляру класса Calc. Затем мы создаем экземпляр нового экземпляра Calc и вызываем метод увеличения для этого экземпляра. Поскольку свойство count находится в конструкторе класса Calc, свойство count не используется в прототипе Calc. Это означает, что значение count не было обновлено для экземпляра, на который указывает calc, count по-прежнему равен 0.
Всем привет! Напоминаю, что сегодня начинается фестиваль по трудоустройству для фронтендеров.
В рамках него вы можете:
— получить персональный фидбэк и советы по вашему резюме
— решить тестовое задание и получить разбор вашего решения
— пройти тестовое собеседование
На стримах вы сможете посмотреть, что спрашивают, как разбирают ответы участников, получить знания и стать увереннее в себе.
Сегодня вечером можно прийти посмотреть первый эфир и прокачать свое резюме по ссылке — будет полезно и интересно🥸
В рамках него вы можете:
— получить персональный фидбэк и советы по вашему резюме
— решить тестовое задание и получить разбор вашего решения
— пройти тестовое собеседование
На стримах вы сможете посмотреть, что спрашивают, как разбирают ответы участников, получить знания и стать увереннее в себе.
Сегодня вечером можно прийти посмотреть первый эфир и прокачать свое резюме по ссылке — будет полезно и интересно
Please open Telegram to view this post
VIEW IN TELEGRAM
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)Пояснение к ответу
Функция updateUser обновляет значения свойств email и password у пользователя, если их значения переданы в функцию, после чего функция возвращает объект user. Возвращаемое значение функции updateUser — это объект user, что означает, что значение updatedUser является ссылкой на тот же объект user, на который указывает user. updatedUser === user равно true.
Пора переходить на микрофронтенд? Опыт «Инферит Клаудмастер»
В этой статье вы узнаете о:
факторах, сформировавших тренд на уход фронтенд-разработки от монолита к микрофронтенду,
процессах со стороны команды разработки при переходе на микрофронтенд,
кейсе платформы “Инферит Кладумастер”: почему для нашей команды микрофронтенд с плагином Module Federation стал полезным решением,
признаках того, что пора переходить на микрофронтенд.
Ссылка
#статьи
В этой статье вы узнаете о:
факторах, сформировавших тренд на уход фронтенд-разработки от монолита к микрофронтенду,
процессах со стороны команды разработки при переходе на микрофронтенд,
кейсе платформы “Инферит Кладумастер”: почему для нашей команды микрофронтенд с плагином Module Federation стал полезным решением,
признаках того, что пора переходить на микрофронтенд.
Ссылка
#статьи
Воплощённые типы
Хочу представить вам подход к определению типов, позволяющий сделать ваш код чище и понятнее. Я называю это «Воплощённые типы» («Embodied types»).
Воплощённый тип - тип, для которого определена переменная с одинаковым именем и в которой содержится объект с утилитами для этого типа.
Ссылка
#статьи
Хочу представить вам подход к определению типов, позволяющий сделать ваш код чище и понятнее. Я называю это «Воплощённые типы» («Embodied types»).
Воплощённый тип - тип, для которого определена переменная с одинаковым именем и в которой содержится объект с утилитами для этого типа.
Ссылка
#статьи
const animals = {};
let dog = { emoji: '🐶' }
let cat = { emoji: '🐈' }
animals[dog] = { ...dog, name: "Mara" }
animals[cat] = { ...cat, name: "Sara" }
console.log(animals[dog])