💡 Упрощаем конструкцию switch

Оператор switch очень напоминает данный пример, с большим количеством условий.

switch (number) {
  case 1:
     return 'one';
  case 2:
     return 'two';
  default:
     return;
}

Однако здесь недостаточно проверки на равенство, нужно еще вернуть определенное значение. Поэтому вместо массива мы можем использовать объект (map).

const data = {
  1: 'one',
  2: 'two'
};
data[num]

Каждый ключ объекта однозначно соответствует определенному значению, но выглядит код компактнее, и его проще читать.

WebDEV #советы #coding #js

📖 React: Up & Running: Building Web Applications
🖋 Stoyan Stefanov, 2021

Начните работу с React, технологией с открытым исходным кодом от Facebook для быстрого создания полнофункциональных веб-приложений. Обновленное для последней версии React, второе издание этого практического руководства показывает, как создавать компоненты React и организовывать их в поддерживаемые крупномасштабные приложения. Если вы знакомы с синтаксисом JavaScript, вы готовы приступить к работе.

💾 Скачать книгу

WebDEV #book #React #js

🛠 reseter.css — футуристическая альтернатива Normalize.css и CSS Resets.

WebDEV #инструменты #css

💡 Сокращаем однострочные функции

Некоторые функции содержат очень мало кода, но тем не менее из-за особенностей синтаксиса JavaScript занимают не меньше трех строчек.

function doubleOf(value) {
  return 2 * value;
}

Стрелочные функции позволяют ужать их до одной строки:

const doubleOf = (value) => 2 * value

Важно: не злоупотребляйте стрелочными функциями, ясность кода не должна приноситься в жертву его краткости.

WebDEV #советы #coding #js

🔥 Лучшее на канале за неделю

1. React: Up & Running: Building Web Applications.

2. reseter.css — футуристическая альтернатива Normalize.css и CSS Resets.

3. Упрощаем конструкцию switch.

WebDEV #test #React

Выберите правильный вариант 👇🏼

💡 Выбираем функцию для выполнения

Иногда в зависимости от некоторого условия вам нужно вызвать ту или иную функцию.

function area() {
    console.log('area');
}
function volume() {
    console.log('volume');
}
if(type === 'square') {
    area();
} else {
    volume();
}

Вместо конструкции if вы можете смело использовать тернарный оператор:

(type === 'square' ? area : volume)()

Важно: этот трюк не сработает, если вы вызываете методы объекта, которые работают с ключевым словом this. После выполнения выражения внутри круглых скобок (выбор нужного метода) контекст вызова будет потерян и this перестанет ссылаться на нужный объект.

WebDEV #советы #coding #js

7 способов работы с CSS

7 лучших способов написания кода CSS в приложении React или Next.js. Изучите компромиссы между различными инструментами, такими как CSS modules, CSS-in-JS, Sass, Tailwind, Bootstrap, библиотеки компонентов и многое другое.

📺 YouTube

WebDEV #видео #css #js

🛠 EditThisCookie — это инструмент, который совершенно необходим. Он, не требуя никаких изысков, позволяет редактировать куки-файлы. В EditThisCookie большая широта возможностей, внимание к деталям, уделяемое его разработчиками, и, в то же время, его простота. Пару щелчков мыши — и дело сделано.

WebDEV #инструменты #web

💡 Устанавливаем дефолтное значение переменной

Иногда мы принципиально не хотим, чтобы переменная оставалось неинициализированной или содержала значение null.

if(amount === null) {
    amount = 0;
}
if(value === undefined) {
    value = 0;
}

console.log(amount); //0
console.log(value); //0

Для такой проверки так же отлично подойдет оператор логического сложения (||).

console.log(amount || 0); //0
console.log(value || 0); //0

Если левая часть выражения является falsy-значением и приводится к false, оператор ИЛИ вернет правую (дефолтную) часть.

WebDEV #советы #coding #js

🔥 Лучшее на канале за неделю

1. 7 способов работы с CSS.

2. EditThisCookie — это инструмент, который совершенно необходим.

3. Устанавливаем дефолтное значение переменной.

WebDEV #test #js

Выберите правильный вариант 👇🏼

​Развиваете ИТ-продукт и готовитесь к первым продажам? А может, вы уже начали продавать и хотите расти быстрее?

Приходите в акселератор Спринт — бесплатную программу развития ИТ-проектов от ФРИИ и Минцифры России!

Приглашаем технологические компании с готовым продуктом и фокусом на российский рынок.

Что вас ждёт:
🔸Тематический модуль с экспертами и еженедельный трекинг.
🔸Акцент на увеличение продаж и рост выручки.
🔸Участие онлайн или удобный коворкинг в центре Москвы
🔸Накопленный опыт акселерации ФРИИ — 1500 ИТ-проектов!

Условия участия:
🔹У вас есть российское юрлицо
🔹В команде постоянно заняты два и более участника
🔹ИТ-продукт из области новых коммуникационных интернет-технологий
🔹Готовый к началу продаж MVP или первые продажи продукта

Участники акселератора определятся по итогам конкурсного отбора. Все подробности — на сайте. Торопитесь, приём заявок в текущий отбор — до 01 марта!

💡 Избавляемся от конструкции if-else

Конструкция if-else привычна и всем знакома.

 value;
if (num > 0) {
    value = 'positive';
} else {
    value = 'negative';
}

Если логика, которую она реализует, не является очень сложной, мы можем без проблем заменить if-else на более краткий и читабельный тернарный оператор.

 value = num > 0 ? 'positive' : 'negative';

WebDEV #советы #coding #js

🛠 PageSpeed Insights Extension можно использовать для проверки сайтов на проблемы, связанные с их серверной частью. Например, с его помощью можно узнать о том, что замедляет загрузку сайта.

WebDEV #инструменты #web

📖 Web Application Security
🖋 Andrew Hoffman, 2020

Несмотря на то, что доступно много ресурсов с информацией по обеспечению безопасности сети и ИТ, подробные знания о безопасности современных веб-приложений не были структурированы - до выхода данной книги. Это практическое руководство содержит описывает разнообразные концепции информационной безопасности, которые разработчики программного обеспечения могут легко освоить и применить.

💾 Скачать книгу

WebDEV #book #Security

💡 Меняем взгляд на перебор элементов массива

Императивный цикл for появился на заре программирования и долгое время адекватной замены ему не было.

 arr = [11, 22, 33];
for(let i=0; i<arr.length; i++) {
    console.log(arr[i]);
}

Но сейчас мы можем перебирать массивы в более дружественном декларативном стиле, используя встроенный методы Array.prototype.forEach.

 arr = [11, 22, 33];
arr.forEach((val) => console.log(val));

Важно: метод forEach не дает возможности прервать цикл перебора, не дожидаясь его окончания. Но для этого вы можете воспользоваться методом Array.prototype.some.

WebDEV #советы #coding #js

🔥 Лучшее на канале за неделю

1. Web Application Security.

2. PageSpeed Insights Extension можно использовать для проверки сайтов на проблемы, связанные с их серверной частью.

3. Меняем взгляд на перебор элементов массива.