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

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. Меняем взгляд на перебор элементов массива.

💡 Преобразуем строку в число

Распространенная задача разработки – преобразование строковых значений в числовые.

const num1 = parseInt("100");
const num2 =  parseFloat("11.11");

Чтобы не выбирать между parseInt и parseFloat и не писать много букв, мы можем использовать унарный оператор +. Он вызывает неявное преобразование значения, стоящего справа от него, в число.

const num1 = +"100";
const num2 =  +"11.11";

Если вы еще не используете в своем коде приемы из этой подборки, самое время начать. Это позволит сократить код и сделать его компактнее.

Однако помните, что сокращение ради сокращения – это большая ошибка. Между ясностью и краткостью всегда выбирайте ясность!

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

Vite за 100 секунд

Vite — это инструмент для сборки JavaScript, который позволяет быстрее и проще создавать веб-приложения. Он похож на такие инструменты, как Webpack, но опирается на современные функции браузера, такие как модули ES, для упрощения и ускорения процесса сборки.

📺 YouTube

WebDEV #видео #js

🛠 Browserling позволяет просматривать сайты в различных браузерах. Например — в Opera, Chrome и Firefox. Оно, кроме того, позволяет выбирать операционную систему, в которой работает интересующий нас браузер, в частности — разные версии Windows и Android.

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

💡 Визуализация моделей в Django

Установите Django Command Extensions и pygraphviz и затем используйте следующую команду чтобы получить удобную визуализацию моделей проекта в Django:

./manage.py graph_models -a -g -o my_project.png

WebDEV #советы #python #django #web