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
Web3 приложение Twitter на React.js + Solidity | часть 1

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.
Как в Node.js контролировать потребление памяти при обработке сетевых запросов

Расскажу, как с помощью Node.js Streams и механизма Back Pressure протокола TCP реализовать пакетную обработку сотен гигабайтов данных на машинах с жестким лимитом памяти.

Ссылка

#статьи
class Counter {
#number = 10

increment() {
this.#number++
}

getNum() {
return this.#number
}
}

const counter = new Counter()
counter.increment()

console.log(counter.#number)
Что будет на выходе?
Anonymous Quiz
18%
10
31%
11
21%
undefined
30%
SyntaxError
Web3 приложение Twitter на React.js + Solidity | часть 2

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);
Пояснение к предыдущему ответу

Функция 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"]
Мемоизация в React: я почитал документацию вместо вас

В статье рассмотрены три инструмента мемоизации в 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();
Пояснение к предыдущему посту

Мы создаем переменную pet, которая является экземпляром класса Flamingo. Когда мы создаем этот экземпляр, вызывается constructor для Flamingo. Сначала регистрируется "I'm pink. 🌸", после чего мы вызываем super(). super() вызывает конструктор родительского класса Bird. Конструктор в Bird вызывается и регистрирует "I'm a bird. 🦢".
JS. Валидация данных. Пишем свой YUP

В web разработке при работе с пользовательскими данными валидация должна применяться при получении данных сервисом. Условно можно разделить валидацию на:

Клиентскую. При вводе данных в формы важно провалидировать введенные данные и сообщить пользователю о их некорректности. Это дает понятный обратный отклик пользователю о его действиях и предотвращает дальнейшие некорректные действия в сервисе.

Серверную. Любой код, выполняемый на клиенте, а также запросы, поступающие от клиентского приложения, не могут считаться доверенными и должны быть провалидировано. Нельзя рассчитывать на то, что клиентское приложение гарантированно подготовит корректные данные, так как при разработке может возникнуть несоответствие логики работы с данными на сервере и клиенте. При этом мы также можем столкнуться со случаем, когда клиент вручную подготавливает данные, маскируясь под приложение.

Ссылка

#js

const teams = [
{ name: 'Team 1', members: ['Paul', 'Lisa'] },
{ name: 'Team 2', members: ['Laura', 'Tim'] },
];

function* getMembers(members) {
for (let i = 0; i < members.length; i++) {
yield members[i];
}
}

function* getTeams(teams) {
for (let i = 0; i < teams.length; i++) {
// SOMETHING IS MISSING HERE
}
}

const obj = getTeams(teams);
obj.next(); // { value: "Paul", done: false }
obj.next(); // { value: "Lisa", done: false }
Пояснение к предыдущему посту

Чтобы выполнить итерацию по members в каждом элементе массива teams, нам нужно передать teams[i].members в функцию генератора getMembers. Функция генератора возвращает объект генератора. Чтобы перебрать каждый элемент в этом объекте-генераторе, нам нужно использовать yield*.

Если бы мы написали yield, return yield или return, вся функция генератора была бы возвращена при первом вызове метода next.
Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: свойство display

За свою карьеру у меня было достаточно много собеседований. Конечно, одной из основных тем вопросов была вёрстка. Немного похвалюсь. Не было вопроса, на который я не ответил.


Недавно у меня появилось желание снова проверить себя и показать сообществу свои ответы на самые популярные вопросы по вёрстке. Может же быть так, что мои ответы были неполными или некорректными. Если это так, то я научусь новому. А если всё хорошо, то они помогут другим людям в подготовке к собеседованию. Кажется, это в любом случае будет полезно.

Ссылка

#статьи
const emojis = ['🎄', '🎅🏼', '🎁', '⭐️'];

/* 1 */ emojis.push('🦌');
/* 2 */ emojis.splice(0, 2);
/* 3 */ emojis = [...emojis, '🥂'];
/* 4 */ emojis.length = 0;