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
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;
Какой/какие из вариантов приведет к ошибке?
Anonymous Quiz
6%
1
11%
1 и 2
40%
3 и 4
43%
3
Пояснение к предыдущему посту

Ключевое слово const просто означает, что мы не можем повторно объявить значение этой переменной, оно доступно только для чтения. Однако само значение не является неизменным. Свойства массива emojis можно изменить, например, добавив новые значения, объединив их или установив длину массива на 0.
Вы откликаетесь на миллион вакансий в день, выполняете тестовые задания, ходите на собеседования, но как итог не имеете ни одного оффера. Звучит знакомо? 🥺

Эту систему можно хакнуть! Главное —
1️⃣ Научиться правильно презентовать свой опыт
2️⃣ Выписать вопросы, которые чаще всего задают на собеседованиях и потренироваться отвечать на них
3️⃣ Понять, как мыслят проверяющие при оценке тестового задания, на что важно обратить внимание при его решении
4️⃣ Определить, на прокачке каких навыков нужно сфокусироваться в первую очередь.

С этими задачами помогут наши партнеры — Solvery. На следующей неделе ребята проводят Frontend Fest по трудоустройству!

📆 Расписание феста:

25.03 в 18:30 — Из чего состоит получение оффера? Необходимые скиллы, советы по резюме и воронка найма
26.03 в 19:00 — Разбор решений тестового задания
27.03 в 19:00 — Моковое собеседование по JavaScript
28.03 в 19:00 — Разбор резюме

Переходите по ссылке, чтобы зарегистрироваться на фест!
Please open Telegram to view this post
VIEW IN TELEGRAM
Изучаем WebRTC на практике: Лучшие инструменты и демо

В этой статье(или дайджесте) я поделюсь ключевыми инструментами, демонстрационными приложениями и открытыми проектами, незаменимыми для практического понимания WebRTC. Здесь не будет туториалов или подробных объяснений о той или иной части WebRTC, а скорее некий дайджест ресурсов, которые помогут лучше разобраться в теме. Если вы работаете с этой технологией уже какое-то время, вряд ли вы найдете что-то новое для себя.

Ссылка

#статьи
let count = 0;
const nums = [0, 1, 2, 3];

nums.forEach(num => {
if (num) count += 1
})

console.log(count)
Что будет на выходе?
Anonymous Quiz
14%
1
3%
2
57%
3
25%
4