Что будет на выходе?
Anonymous Quiz
28%
1 2 3
14%
{1: 1} {2: 2} {3: 3}
12%
{ 1: undefined } undefined undefined
45%
undefined undefined undefined
Пояснение к предыдущему посту
myFunc ожидает объект со свойствами x, y и z в качестве аргумента. Поскольку мы передаем только три отдельных числовых значения (1, 2, 3) вместо одного объекта со свойствами x, y и z ({x: 1, y: 2, z: 3}), то x, y и z имеют значение по умолчанию undefined.
Система иконок на React
Очень часто при разработке React-приложения нам приходится работать с большим количеством иконок в проекте. Наверное, каждый разработчик стремится максимально упростить и автоматизировать подобные рутинные задачи. Есть несколько способов работы с иконками в веб-приложениях, но я хочу поделиться с вами именно тем, который кажется мне наиболее удобным. Данная статья поможет frontend-разработчику сделать работу с иконками комфортнее, используя их в качестве React-компонентов.
Ссылка
#react
Очень часто при разработке React-приложения нам приходится работать с большим количеством иконок в проекте. Наверное, каждый разработчик стремится максимально упростить и автоматизировать подобные рутинные задачи. Есть несколько способов работы с иконками в веб-приложениях, но я хочу поделиться с вами именно тем, который кажется мне наиболее удобным. Данная статья поможет frontend-разработчику сделать работу с иконками комфортнее, используя их в качестве React-компонентов.
Ссылка
#react
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));
Что будет на выходе?
Anonymous Quiz
24%
true false true false
20%
true false false false
32%
false false true false
24%
false true false true
Пояснение к предыдущему посту
С помощью метода Number.isNaN вы можете проверить, является ли передаваемое вами значение числовым значением и равно ли оно NaN. name не является числовым значением, поэтому Number.isNaN(name) возвращает false. age является числовым значением, но не равно NaN, поэтому Number.isNaN(age) возвращает false.
С помощью метода isNaN вы можете проверить, не является ли передаваемое вами значение числом. name не является числом, поэтому isNaN(name) возвращает true. age - это число, поэтому 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
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();
Пояснение к предыдущему посту
Переменные, объявленные с ключевым словом const, не имеют ссылки до их инициализации: это называется временная мертвая зона. В функции getInfo переменная randomValue находится в области видимости getInfo. В строке, где мы хотим записать значение typeof randomValue, переменная randomValue еще не инициализирована: выдается ReferenceError! Движок не пошел по цепочке областей видимости, так как мы объявили переменную randomValue в функции getInfo.
Дави жуков
Существует много курсов программирования и повышения IT-квалификации, но ни на одном из них не учат системно искать и исправлять ошибки. В реальных крупных проектах до 30% времени может уходить не на написание нового кода и фич, а на поиск первопричин неисправностей и их устранения. Именно недочёты и ошибки будут мешать вашему клиенту составить положительное впечатление о продукте, а в некоторых случаях они полностью блокируют процесс. Кроме того, инженер, который только пишет новый код и не решает ошибки, не получает архитектурный опыт и не расширяет кругозор, что приводит к появлению новых недочётов в проектах. Я опишу наш инструментарий для исправления ошибок в веб-приложениях и поделюсь опытом.
Ссылка
#статьи
Существует много курсов программирования и повышения 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!');
}
})();Что будет на выходе?
Anonymous Quiz
17%
Woah some cool data
19%
Oh finally!
51%
Woah some cool data Oh finally!
13%
Oops didn't work 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. Мы проводим бесплатные консультации, на которых поможем разобрать ваш кейс и подобрать наиболее подходящий способ релокации.
Виза 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. Это, безусловно, необходимо для общего понимания технологий, но практически не помогает, когда ты сидишь перед пустой страницей и надо начать “проектировать контракт”.
Ссылка
#статьи
Я думаю, что вы не раз уже гуглили, заглядывали в статьи, манифесты 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! и удаляется из стека.
Затем мы вызываем обещание 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
JavaScript является однопоточным: одновременно может выполняться только одна задача. Обычно в этом нет ничего страшного, но теперь представьте, что вы выполняете задачу, которая занимает 30 секунд... Да... Во время этой задачи мы ждем 30 секунд, прежде чем что-то еще может произойти (JavaScript по умолчанию запускается в главном потоке браузера, поэтому весь интерфейс завис)
В этой статье хорошо объясняется event loop с визуализацией
Ссылка(en)
#js