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
const name = "Lydia Hallie";
const age = 21;

console.log(Number.isNaN(name));
console.log(Number.isNaN(age));

console.log(isNaN(name));
console.log(isNaN(age));
Пояснение к предыдущему посту

С помощью метода Number.isNaN вы можете проверить, является ли передаваемое вами значение числовым значением и равно ли оно NaN. name не является числовым значением, поэтому Number.isNaN(name) возвращает false. age является числовым значением, но не равно NaN, поэтому Number.isNaN(age) возвращает false.

С помощью метода isNaN вы можете проверить, не является ли передаваемое вами значение числом. name не является числом, поэтому isNaN(name) возвращает true. age - это число, поэтому isNaN(age) возвращает false.
Zustand.js: современный, невесомый, производительный и очень гибкий state manager

Zustand - не большое, быстрое и масштабируемое решение для управления состоянием, основанное на принципах Flux и immutable state. Имеет удобный API, основанный на хуках, не создает лишнего шаблонного кода и не навязывает жестких правил использования. Не имеет проблем с Zombie children и context loss и отлично работает в React concurrency mode.

Ссылка

#utils
const randomValue = 21;

function getInfo() {
console.log(typeof randomValue);
const randomValue = 'Lydia Hallie';
}

getInfo();
Что будет на выходе?
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);