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
39%
"number"
16%
"string"
12%
undefined
33%
ReferenceError
Пояснение к предыдущему посту

Переменные, объявленные с ключевым словом const, не имеют ссылки до их инициализации: это называется временная мертвая зона. В функции getInfo переменная randomValue находится в области видимости getInfo. В строке, где мы хотим записать значение typeof randomValue, переменная randomValue еще не инициализирована: выдается ReferenceError! Движок не пошел по цепочке областей видимости, так как мы объявили переменную randomValue в функции getInfo.
Дави жуков

Существует много курсов программирования и повышения IT-квалификации, но ни на одном из них не учат системно искать и исправлять ошибки. В реальных крупных проектах до 30% времени может уходить не на написание нового кода и фич, а на поиск первопричин неисправностей и их устранения. Именно недочёты и ошибки будут мешать вашему клиенту составить положительное впечатление о продукте, а в некоторых случаях они полностью блокируют процесс. Кроме того, инженер, который только пишет новый код и не решает ошибки, не получает архитектурный опыт и не расширяет кругозор, что приводит к появлению новых недочётов в проектах. Я опишу наш инструментарий для исправления ошибок в веб-приложениях и поделюсь опытом.

Ссылка

#статьи
const myPromise = Promise.resolve('Woah some cool data');

(async () => {
try {
console.log(await myPromise);
} catch {
throw new Error(`Oops didn't work`);
} finally {
console.log('Oh finally!');
}
})();
Пояснение к предыдущему посту

В блоке try мы выводим в лог ожидаемое значение переменной myPromise: "Woah some cool data". Поскольку в блоке try не было выдано никаких ошибок, код в блоке catch не запускается. Код в блоке finally всегда выполняется, "Oh finally!" также выводится в лог.
🇬🇧 Реально ли IT-специалисту переехать в Великобританию без предложения о работе, без высшего образования и без знания английского языка? Ответ: да! Рассказываем, как это сделать.

Виза Global Talent дала возможность более 8000 IT-специалистам переехать в Британию в 2022 году. Она выдаётся на срок до 5 лет, по ней можно работать в любой компании, фрилансить, открывать собственный бизнес и даже претендовать на паспорт!

Чтобы получить эту визу, не обязательно иметь высшее образование, не нужно знать язык на высоком уровне, а заявку можно подать из любой страны. И, пожалуй, самое главное – не нужно обладать каким-то исключительным талантом! Почти все IT-специалисты могут претендовать на эту визу.

Подписывайтесь на наш Telegram-канал, где мы даём массу полезной информации о релокации: https://t.me/+s_m4SYjTeDQxNTVi

Пишите нам в WhatsApp: +44 7496 949122 или в Telegram: @relocode_dm. Мы проводим бесплатные консультации, на которых поможем разобрать ваш кейс и подобрать наиболее подходящий способ релокации.
GET запросы на практике: правила, принципы и примеры

Я думаю, что вы не раз уже гуглили, заглядывали в статьи, манифесты IT-гигантов о лучших практиках проектирования API. Я тоже.

Но в большинстве из них всё ограничивается описанием URL ресурса, мотивацией использовать пагинацию, сложными словами про кэширование и SSL. Это, безусловно, необходимо для общего понимания технологий, но практически не помогает, когда ты сидишь перед пустой страницей и надо начать “проектировать контракт”.

Ссылка

#статьи
const myPromise = Promise.resolve(Promise.resolve('Promise!'));

function funcOne() {
myPromise.then(res => res).then(res => console.log(res));
setTimeout(() => console.log('Timeout!', 0));
console.log('Last line!');
}

async function funcTwo() {
const res = await myPromise;
console.log(await res);
setTimeout(() => console.log('Timeout!', 0));
console.log('Last line!');
}

funcOne();
funcTwo();
Пояснение к предыдущему посту

Сначала мы вызываем funcOne. В первой строке funcOne мы вызываем асинхронную функцию setTimeout, из которой обратный вызов отправляется в веб-API.

Затем мы вызываем обещание myPromise, которое является асинхронной операцией.

И обещание, и тайм-аут являются асинхронными операциями, функция продолжает работать, пока она занята выполнением обещания и обработкой обратного вызова setTimeout. Это означает, что Last line 1! регистрируется первой, так как это не асинхронная операция.

Поскольку стек вызовов еще не пуст, функция setTimeout и обещание в funcOne еще не могут быть добавлены в стек вызовов.

В funcTwo переменная res получает Promise, потому что Promise.resolve(Promise.resolve('Promise')) эквивалентно Promise.resolve('Promise'), так как разрешение обещания просто разрешает его стоимость. await в этой строке останавливает выполнение функции до тех пор, пока она не получит разрешение промиса, а затем продолжает работать синхронно до завершения, поэтому Promise 2!, а затем Last line 2! регистрируются, а setTimeout отправляется в Web API.

Тогда стек вызовов пуст. Промисы — это микрозадачи, поэтому они решаются первыми, когда стек вызовов пуст, поэтому Promise 1! регистрируется.

Теперь, поскольку funcTwo выталкивается из стека вызовов, стек вызовов пуст. Обратные вызовы, ожидающие в очереди (() => console.log("Timeout 1!") из funcOne, и () => console.log("Timeout 2!") из funcTwo) добавляются в стек вызовов один за другим. Первый обратный вызов регистрирует Timeout 1! и удаляется из стека. Затем второй обратный вызов регистрирует Timeout 2! и удаляется из стека.
Визуализация JavaScript: цикл событий

JavaScript является однопоточным: одновременно может выполняться только одна задача. Обычно в этом нет ничего страшного, но теперь представьте, что вы выполняете задачу, которая занимает 30 секунд... Да... Во время этой задачи мы ждем 30 секунд, прежде чем что-то еще может произойти (JavaScript по умолчанию запускается в главном потоке браузера, поэтому весь интерфейс завис)

В этой статье хорошо объясняется event loop с визуализацией

Ссылка(en)

#js
const person = { name: 'Lydia Hallie' };

Object.seal(person);
Какое из перечисленных действий может модифицировать объект 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, посмотрим, как аллоцируются, трассируются и маркируются объекты в памяти. Что происходит с пустыми областями после очистки и как выполняется сборка мусора в фоновом режиме.

Ссылка

#статьи
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), свойства этого объекта не замораживаются и могут быть изменены.
Модульность в JavaScript: CommonJS, AMD, ES Modules

Начало истории модульности в JavaScript положило хаос: глобальные переменные, конфликты имен и сложности с зависимостями. Со временем сообщество предложило несколько подходов для организации модулей, начиная от CommonJS, которое легло в основу Node.js, до AMD, предпочтительного для асинхронной загрузки кода в браузерах. И приближаясь к настоящему времени появился ES Modules стандартизированный и встроенный в язык механизма модулей, который стал частью ECMAScript в 2015 году.

В этой статье рассмотрим кратко про CommonJS, AMD, и наконец - как появился ES Modules.

Ссылка

#js
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);