Визуализация JavaScript: цикл событий
JavaScript является однопоточным: одновременно может выполняться только одна задача. Обычно в этом нет ничего страшного, но теперь представьте, что вы выполняете задачу, которая занимает 30 секунд... Да... Во время этой задачи мы ждем 30 секунд, прежде чем что-то еще может произойти (JavaScript по умолчанию запускается в главном потоке браузера, поэтому весь интерфейс завис)
В этой статье хорошо объясняется event loop с визуализацией
Ссылка(en)
#js
JavaScript является однопоточным: одновременно может выполняться только одна задача. Обычно в этом нет ничего страшного, но теперь представьте, что вы выполняете задачу, которая занимает 30 секунд... Да... Во время этой задачи мы ждем 30 секунд, прежде чем что-то еще может произойти (JavaScript по умолчанию запускается в главном потоке браузера, поэтому весь интерфейс завис)
В этой статье хорошо объясняется event loop с визуализацией
Ссылка(en)
#js
Какое из перечисленных действий может модифицировать объект person?
Anonymous Quiz
34%
person.name = "Evan Bacon"
10%
person.age = 21
16%
delete person.name
39%
Object.assign(person, { age: 21 })
Сборка мусора в V8
В этой статье мы детально разберем процесс сборки мусора движком V8. Познакомимся с понятиями поколений, Minor и Major Garbage Collection, посмотрим, как аллоцируются, трассируются и маркируются объекты в памяти. Что происходит с пустыми областями после очистки и как выполняется сборка мусора в фоновом режиме.
Ссылка
#статьи
В этой статье мы детально разберем процесс сборки мусора движком V8. Познакомимся с понятиями поколений, Minor и Major Garbage Collection, посмотрим, как аллоцируются, трассируются и маркируются объекты в памяти. Что происходит с пустыми областями после очистки и как выполняется сборка мусора в фоновом режиме.
Ссылка
#статьи
const person = {
name: 'Lydia Hallie',
address: {
street: '100 Main St',
},
};
Object.freeze(person);Какое из перечисленных действий может модифицировать объект person?
Anonymous Quiz
19%
person.name = "Evan Bacon"
15%
delete person.address
51%
person.address.street = "101 Main St"
15%
person.pet = { name: "Mara" }
Пояснение к предыдущему посту
С помощью метода Object.freeze мы можем заморозить объект. Свойства не могут быть добавлены, изменены или удалены.
Однако, это неглубоко замораживает объект. Замораживаются только непосредственные свойства объекта. Если свойством является другой объект(в нашем примере address), свойства этого объекта не замораживаются и могут быть изменены.
Однако, это неглубоко замораживает объект. Замораживаются только непосредственные свойства объекта. Если свойством является другой объект(в нашем примере address), свойства этого объекта не замораживаются и могут быть изменены.
Модульность в JavaScript: CommonJS, AMD, ES Modules
Начало истории модульности в JavaScript положило хаос: глобальные переменные, конфликты имен и сложности с зависимостями. Со временем сообщество предложило несколько подходов для организации модулей, начиная от CommonJS, которое легло в основу Node.js, до AMD, предпочтительного для асинхронной загрузки кода в браузерах. И приближаясь к настоящему времени появился ES Modules стандартизированный и встроенный в язык механизма модулей, который стал частью ECMAScript в 2015 году.
В этой статье рассмотрим кратко про CommonJS, AMD, и наконец - как появился ES Modules.
Ссылка
#js
Начало истории модульности в JavaScript положило хаос: глобальные переменные, конфликты имен и сложности с зависимостями. Со временем сообщество предложило несколько подходов для организации модулей, начиная от CommonJS, которое легло в основу Node.js, до AMD, предпочтительного для асинхронной загрузки кода в браузерах. И приближаясь к настоящему времени появился ES Modules стандартизированный и встроенный в язык механизма модулей, который стал частью ECMAScript в 2015 году.
В этой статье рассмотрим кратко про CommonJS, AMD, и наконец - как появился ES Modules.
Ссылка
#js
Web3 приложение Twitter на React.js + Solidity | часть 1
Hello, в этой статье постараюсь подробно показать процесс создания dApp приложения на примере Twitter. В первой части мы подготовим проект, напишем смарт-контракт и развернем его в частной сети. Во второй части напишем frontend и настроим взаимодействие со смарт-контрактом.
Ссылка
#статьи
Hello, в этой статье постараюсь подробно показать процесс создания dApp приложения на примере Twitter. В первой части мы подготовим проект, напишем смарт-контракт и развернем его в частной сети. Во второй части напишем frontend и настроим взаимодействие со смарт-контрактом.
Ссылка
#статьи
const add = x => x + x;
function myFunc(num = 2, value = add(num)) {
console.log(num, value);
}
myFunc();
myFunc(3);
Что будет на выходе?
Anonymous Quiz
60%
2 4 and 3 6
20%
2 NaN and 3 NaN
14%
2 Error and 3 6
7%
2 4 and 3 Error
Пояснение к предыдущему посту
Во-первых, мы вызваем myFunc() без передачи каких-либо аргументов. Поскольку мы не передаем аргументы, num и value получают свои значения по умолчанию: num равно 2, а value возвращаемое значение функции add. В функцию add мы передаем в качестве аргумента num со значением 2. add возвращает 4, что является значением value.
Затем мы вызваем myFunc(3) и передаем значение 3 в качестве значения аргумента num. Мы не передаем аргумент для value. Поскольку мы не передаем значение для аргумента value, он получаеи значение по умолчанию: возвращаемое значение функции add. В add мы передаем num, значение которого равно 3. add возвращает 6, что является значением value.
Затем мы вызваем myFunc(3) и передаем значение 3 в качестве значения аргумента num. Мы не передаем аргумент для value. Поскольку мы не передаем значение для аргумента value, он получаеи значение по умолчанию: возвращаемое значение функции add. В add мы передаем num, значение которого равно 3. add возвращает 6, что является значением value.
class Counter {
#number = 10
increment() {
this.#number++
}
getNum() {
return this.#number
}
}
const counter = new Counter()
counter.increment()
console.log(counter.#number)Web3 приложение Twitter на React.js + Solidity | часть 2
Hello, в первой части был подготовлен проект, подключены кошельки и написан backend на Solidity, значит пришло время писать frontend на React.
Проект далёк от продакшена и является простым примером для новичков, предназначенным для демонстрации взаимодействия с смарт-контрактом через веб-приложение.
Ссылка
#статьи
Hello, в первой части был подготовлен проект, подключены кошельки и написан backend на Solidity, значит пришло время писать frontend на React.
Проект далёк от продакшена и является простым примером для новичков, предназначенным для демонстрации взаимодействия с смарт-контрактом через веб-приложение.
Ссылка
#статьи
const person = {
name: 'Lydia Hallie',
hobbies: ['coding'],
};
function addHobby(hobby, hobbies = person.hobbies) {
hobbies.push(hobby);
return hobbies;
}
addHobby('running', []);
addHobby('dancing');
addHobby('baking', person.hobbies);
console.log(person.hobbies);Что будет на выходе?
Anonymous Quiz
12%
["coding"]
6%
["coding", "dancing"]
57%
["coding", "dancing", "baking"]
26%
["coding", "running", "dancing", "baking"]
Пояснение к предыдущему ответу
Функция addHobby получает два аргумента, hobby и hobbies, со значением по умолчанию массива hobbies в объекте person.
Во-первых, мы вызываем функцию addHobby и передаем "running" в качестве значения для hobby, а пустой массив в качестве значения для hobbies. Так как мы передаем пустой массив в качестве значения для hobbies, "running" добавляется к этому пустому массиву.
Затем мы вызываем функцию addHobby и передаем dancing в качестве значения для hobby. Мы не передавали значение для hobbies, поэтому оно получает значение по умолчанию, свойство hobbies объекта person. Мы помещаем хобби dancing в массив person.hobbies.
Наконец, мы вызываем функцию addHobby и передаем "baking" в качестве значения для hobby, а массив person.hobbies в качестве значения для hobbies. Мы помещаем хобби baking в массив person.hobbies.
После нажатия танцы и выпечка, значение person.hobbies равно ["coding", "dancing", "baking"]
Во-первых, мы вызываем функцию addHobby и передаем "running" в качестве значения для hobby, а пустой массив в качестве значения для hobbies. Так как мы передаем пустой массив в качестве значения для hobbies, "running" добавляется к этому пустому массиву.
Затем мы вызываем функцию addHobby и передаем dancing в качестве значения для hobby. Мы не передавали значение для hobbies, поэтому оно получает значение по умолчанию, свойство hobbies объекта person. Мы помещаем хобби dancing в массив person.hobbies.
Наконец, мы вызываем функцию addHobby и передаем "baking" в качестве значения для hobby, а массив person.hobbies в качестве значения для hobbies. Мы помещаем хобби baking в массив person.hobbies.
После нажатия танцы и выпечка, значение person.hobbies равно ["coding", "dancing", "baking"]
Мемоизация в React: я почитал документацию вместо вас
В статье рассмотрены три инструмента мемоизации в React: useMemo, useCallback, memo. Главный источник информации: документация React. Не всем комфортно работать напрямую с документацией, так что если вы постоянно откладываете погружение в документацию React - я сделал это за вас, постарался выделить самое важное, и дать ссылки для углубленного погружения.
Ссылка
#js
В статье рассмотрены три инструмента мемоизации в React: useMemo, useCallback, memo. Главный источник информации: документация React. Не всем комфортно работать напрямую с документацией, так что если вы постоянно откладываете погружение в документацию React - я сделал это за вас, постарался выделить самое важное, и дать ссылки для углубленного погружения.
Ссылка
#js
class Bird {
constructor() {
console.log("I'm a bird. 🦢");
}
}
class Flamingo extends Bird {
constructor() {
console.log("I'm pink. 🌸");
super();
}
}
const pet = new Flamingo();