Обрезать нельзя сжать. Как ускорить метрики проекта без больших вложений
Мы не раз читали на Хабре, почему важно иметь быстрые сайты, как это влияет на посещаемость, время на странице, глубину и прочее. Но каждый раз это инструкции о том, как поменять инфраструктуру серверов, потратить десятки часов на разработку и ощутимое количество денег. В случае больших корпораций, конечно же, такие действия оправданы. А маленькие стартапы обычно таким и вовсе не занимаются, фокусируясь на других задачах.
Ссылка
#статьи
Мы не раз читали на Хабре, почему важно иметь быстрые сайты, как это влияет на посещаемость, время на странице, глубину и прочее. Но каждый раз это инструкции о том, как поменять инфраструктуру серверов, потратить десятки часов на разработку и ощутимое количество денег. В случае больших корпораций, конечно же, такие действия оправданы. А маленькие стартапы обычно таким и вовсе не занимаются, фокусируясь на других задачах.
Ссылка
#статьи
👍6👏1🎉1
async function* range(start, end) {
for (let i = start; i <= end; i++) {
yield Promise.resolve(i);
}
}
(async () => {
const gen = range(1, 3);
for await (const item of gen) {
console.log(item);
}
})();👍5🤯4
Пояснение к предыдущему посту
Функция генератора range возвращает асинхронный объект с обещаниями для каждого элемента в диапазоне, который мы передаем: Promise {1}, Promise {2}, Promise {3}. Мы устанавливаем переменную gen равной асинхронному объекту, после чего зацикливаем ее, используя цикл for await ... of. Мы устанавливаем переменную item равной возвращаемым значениям Promise: сначала Promise {1}, затем Promise {2}, затем Promise {3}. Так как мы ожидаем значение item, разрешается обещание, возвращаются разрешенные значения обещания: 1, 2, затем 3.
👍7👨💻2👏1
Авторизация и управление доступом на основе ролей для фронтенда
В этом модуле проекта мы погрузимся в волнующий мир авторизации и управления доступом во фронтенд-разработке. Сегодня я поделюсь с вами моим опытом работы с технологиями Vue 3, Pinia для глобального управления состоянием и TypeScript. Однако, стоит отметить, что основные принципы, которые мы рассмотрим здесь, применимы к любым современным технологиям фронтенда. Таким образом, даже если вы предпочитаете другой стек технологий, вы все равно найдете этот материал полезным.
Ссылка
#статьи
В этом модуле проекта мы погрузимся в волнующий мир авторизации и управления доступом во фронтенд-разработке. Сегодня я поделюсь с вами моим опытом работы с технологиями Vue 3, Pinia для глобального управления состоянием и TypeScript. Однако, стоит отметить, что основные принципы, которые мы рассмотрим здесь, применимы к любым современным технологиям фронтенда. Таким образом, даже если вы предпочитаете другой стек технологий, вы все равно найдете этот материал полезным.
Ссылка
#статьи
👍7❤2🔥1
const myFunc = ({ x, y, z }) => {
console.log(x, y, z);
};
myFunc(1, 2, 3);
🤯7
Что будет на выходе?
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.
🔥13
Система иконок на React
Очень часто при разработке React-приложения нам приходится работать с большим количеством иконок в проекте. Наверное, каждый разработчик стремится максимально упростить и автоматизировать подобные рутинные задачи. Есть несколько способов работы с иконками в веб-приложениях, но я хочу поделиться с вами именно тем, который кажется мне наиболее удобным. Данная статья поможет frontend-разработчику сделать работу с иконками комфортнее, используя их в качестве React-компонентов.
Ссылка
#react
Очень часто при разработке React-приложения нам приходится работать с большим количеством иконок в проекте. Наверное, каждый разработчик стремится максимально упростить и автоматизировать подобные рутинные задачи. Есть несколько способов работы с иконками в веб-приложениях, но я хочу поделиться с вами именно тем, который кажется мне наиболее удобным. Данная статья поможет frontend-разработчику сделать работу с иконками комфортнее, используя их в качестве React-компонентов.
Ссылка
#react
👍7🔥1🥴1
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));
🤯6
Что будет на выходе?
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.
🔥9❤2
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
👍9💩5😁2
const randomValue = 21;
function getInfo() {
console.log(typeof randomValue);
const randomValue = 'Lydia Hallie';
}
getInfo();
👍6🤡1
Пояснение к предыдущему посту
Переменные, объявленные с ключевым словом const, не имеют ссылки до их инициализации: это называется временная мертвая зона. В функции getInfo переменная randomValue находится в области видимости getInfo. В строке, где мы хотим записать значение typeof randomValue, переменная randomValue еще не инициализирована: выдается ReferenceError! Движок не пошел по цепочке областей видимости, так как мы объявили переменную randomValue в функции getInfo.
👍6🔥1🥴1
Дави жуков
Существует много курсов программирования и повышения IT-квалификации, но ни на одном из них не учат системно искать и исправлять ошибки. В реальных крупных проектах до 30% времени может уходить не на написание нового кода и фич, а на поиск первопричин неисправностей и их устранения. Именно недочёты и ошибки будут мешать вашему клиенту составить положительное впечатление о продукте, а в некоторых случаях они полностью блокируют процесс. Кроме того, инженер, который только пишет новый код и не решает ошибки, не получает архитектурный опыт и не расширяет кругозор, что приводит к появлению новых недочётов в проектах. Я опишу наш инструментарий для исправления ошибок в веб-приложениях и поделюсь опытом.
Ссылка
#статьи
Существует много курсов программирования и повышения IT-квалификации, но ни на одном из них не учат системно искать и исправлять ошибки. В реальных крупных проектах до 30% времени может уходить не на написание нового кода и фич, а на поиск первопричин неисправностей и их устранения. Именно недочёты и ошибки будут мешать вашему клиенту составить положительное впечатление о продукте, а в некоторых случаях они полностью блокируют процесс. Кроме того, инженер, который только пишет новый код и не решает ошибки, не получает архитектурный опыт и не расширяет кругозор, что приводит к появлению новых недочётов в проектах. Я опишу наш инструментарий для исправления ошибок в веб-приложениях и поделюсь опытом.
Ссылка
#статьи
👍6❤1🔥1
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!');
}
})();🤯9
Что будет на выходе?
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!" также выводится в лог.
🔥7
🇬🇧 Реально ли 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. Мы проводим бесплатные консультации, на которых поможем разобрать ваш кейс и подобрать наиболее подходящий способ релокации.
❤4👎3👍2