CodeRoll | Frontend
5.34K subscribers
1.5K photos
62 videos
1 file
740 links
— Лучшее для разработчика и дизайнера / IT инструменты, курсы и книги
— Веб-разработка на JS, HTML, CSS, React, Vue,Angular

Купить рекламу: https://telega.in/c/coderoll

Чат: https://t.me/coderoll_chat

По всем вопросам пишите сюда - @yankovsky_ads
Download Telegram
const one = (false || {} || null)
const two = (null || false || '')
const three = ([] || 0 || true)

console.log(one, two, three)
Какое значение будет на выходе?
Anonymous Quiz
15%
false null []
14%
null "" true
53%
{} "" []
18%
null null true
Пояснение к предыдущему посту

С помощью оператора || мы можем вернуть первый истинный операнд. Если все значения ложны, последний операнд возвращается.

(false || {} || null): пустой объект {} является истинным значением. Это первое (и единственное) истинное значение, которое возвращается. one содержит {}.

(null || false || ""): все операнды являются ложными значениями. Это означает, что прошедший операнд "" возвращается. two содержит "".

([] || 0 || ""): пустой массив [] является истинным значением. Это первое истинное значение, которое возвращается. three присвоено [].
Создание Web components на Vue 3

Можно написать на Vue 3 какой-нибудь полезный компонент и захотеть дать возможность использовать его не только в Vue проектах, но и на любых других фронтендах. Сделать это несложно через регистрацию его как web component, или подключение "микро-фронтендом". Оба варианта будут рассмотрены ниже.

Рассмотрим универсализацию на примере release-timeline

При разработке используем Vite с двумя конфигами - один непосредственно для разработки и запуске в Dev режиме на сервере Vite, другой - для билда библиотеки.

Ссылка

#статьи
const myPromise = () => Promise.resolve('I have resolved!')

function firstFunction() {
myPromise().then(res => console.log(res))
console.log('second')
}

async function secondFunction() {
console.log(await myPromise())
console.log('second')
}

firstFunction()
secondFunction()
Пояснение к предыдущему посту

С обещанием мы в основном говорим: "Я хочу выполнить эту функцию и откладываю ее, пока она выполняется, поскольку это может занять некоторое время. Только когда определенное значение разрешено (или отклонено), и когда стек вызовов пуст, я хочу использовать это значение".

Мы можем получить это значение с помощью ключевого слова .then и await в функции async. Хотя мы можем получить значение обещания с помощью .then и await, они работают немного по-разному.

В firstFunction мы (вроде) отложили функцию myPromise во время ее работы, но продолжили выполнение другого кода, в данном случае console.log ('second'). Затем функция разрешается строкой I have resolved, которая затем логируется после того, как она увидела, что стек вызовов пуст.

Используя ключевое слово await в secondFunction, мы буквально приостанавливаем выполнение асинхронной функции до тех пор, пока значение не будет разрешено до перехода на следующую строку.

Это означает, что мы ожидали разрешения myPromise со значением I have resolved, и только когда это произошло, мы перешли к следующей строке: second была выведена в консоль последней.
Первое приложение на SolidJS

В этой статье познакомимся с SolidJS − JavaScript-библиотекой для создания пользовательских интерфейсов без виртуального DOM. Мы создадим легкий список задач с использованием TypeScript и разберем некоторые особенности библиотеки.

Ссылка

#статьи
const set = new Set()

set.add(1)
set.add('Lydia')
set.add({ name: 'Lydia' })

for (let item of set) {
console.log(item + 2)
}
Какое значение будет на выходе?
Anonymous Quiz
17%
3, NaN, NaN
7%
3, 7, NaN
63%
3, Lydia2, [object Object]2
13%
"12", Lydia2, [object Object]2
Пояснение к предыдущему посту

Оператор + используется не только для добавления числовых значений, но мы также можем использовать его для объединения строк. Всякий раз, когда движок JavaScript видит, что одно или несколько значений не являются числом, он приводит число к строке.

Первым является 1, который является числовым значением. 1 + 2 возвращает число 3.

Тем не менее, вторая строка "Lydia". "Lydia" является строкой, а 2 является числом: 2 приводится к строке. "Lydia" и "2" объединяются, что приводит к результирующей строке "Lydia2".

{name: "Lydia"} является объектом. Ни число, ни объект не являются строкой, поэтому они приводятся к строке. Всякий раз, когда мы приводим обычный объект, он становится "[object Object]". "[object Object]", объединенный с "2", становится "[object Object]2".
Redux vs Mobx кого же выбрать для React-приложения в 2024 году?

В этой статье я рассмотрю два из самых популярных и зрелых стейт менеджеров для React: Redux и Mobx. Я сравню их основные принципы, преимущества и недостатки, а также покажу примеры их использования в коде. Также я попытаюсь ответить на вопрос, какой из них лучше подходит для разработки современных приложений на React в 2024 году.

Ссылка

#статьи
function compareMembers(person1, person2 = person) {
if (person1 !== person2) {
console.log('Not the same!')
} else {
console.log('They are the same!')
}
}

const person = { name: 'Lydia' }

compareMembers(person)
Чему равно значение?
Anonymous Quiz
22%
Not the same!
41%
They are the same!
26%
ReferenceError
12%
SyntaxError
Пояснение к предыдущему посту

Объекты передаются по ссылке. Когда мы проверяем объекты на строгое равенство (===), мы сравниваем их ссылки.

Мы устанавливаем значение по умолчанию для person2, равное объекту person, и передаем объект person в качестве значения для person1.

Это означает, что оба значения имеют ссылку на одно и то же место в памяти, поэтому они равны.

Блок кода в операторе else запускается, и в лог выводится They are the same!.
Простым языком об HTTP

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

Ссылка

#статьи
const colorConfig = {
red: true,
blue: false,
green: true,
black: true,
yellow: false,
}

const colors = ['pink', 'red', 'blue']

console.log(colorConfig.colors[1])
Чему равно значение?
Anonymous Quiz
33%
true
11%
false
30%
undefined
27%
TypeError
Пояснение к предыдущему посту

В JavaScript у нас есть два способа доступа к свойствам объекта: нотация в скобках или нотация в точках. В этом примере мы используем точечную нотацию (colorConfig.colors) вместо скобочной нотации (colorConfig["colors"]).

В точечной нотации JavaScript пытается найти свойство объекта с таким точным именем. В этом примере JavaScript пытается найти свойство с именем colors в объекте colorConfig. Не существует свойства с именем colors, поэтому возвращается undefined. Затем мы пытаемся получить доступ к значению первого элемента, используя [1]. Мы не можем сделать это для значения, которое undefined, поэтому оно выдает TypeError: Cannot read свойство '1' of undefined.

JavaScript интерпретирует (или распаковывает) операторы. Когда мы используем скобочные обозначения, он видит первую открывающую скобку [ и продолжает работать, пока не найдет закрывающую скобку ]. Только тогда он оценит утверждение. Если бы мы использовали colorConfig[colors [1]], он бы возвратил значение свойства red объекта colorConfig.
Новые клиентские хуки React 19

Вопреки распространенному мнению, основная команда разработчиков React занимается не только серверными компонентами React и Next.js. В следующей версии — React 19 — появятся новые клиентские хуки. Они сфокусированы на двух ключевых аспектах: выборке данных и работе с формами. Эти хуки повысят производительность всех React-разработчиков, включая тех, кто создает одностраничные приложения.

Без дальнейших предисловий давайте познакомимся с новыми хуками!

Ссылка

#react