React или Vue или Angular

Не каждый готов потратить своё время на изучение фреймворка, который в дальнейшем ему не пригодится. Так какой же лучше подойдёт для вашего проекта?

В этом видео автор рассказал про три самых популярных фреймворка для фронтэнд-разработки, их преимущества, недостатки, и даже немного затронул сферы применения.

📺 YouTube

WebDEV #видео #React #Angular #Vue

🛠 DaFont — большая коллекция из более чем пятидесяти тысяч бесплатных шрифтов на любой вкус. Сервис постоянно пополняется новыми шрифтами.

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

💡 Придерживайтесь методологии и комментируйте

Используйте одну методологию и обязательно комментируйте код. Постарайтесь выработать собственный стиль его написания – так и вам будет легче и после вас люди смогут разобраться с программой. Можете быть уверены – за грамотные комментарии вас впоследствии никто не проклянет.

WebDEV #советы

💡 Подборка инструментов

▫️ CSS-Tricks — ресурс, ежедневно публикующий полезные материалы о технологиях, связанных с веб-разработкой

▫️ Medusa — бесплатный опенсорсный аналог Shopify с настраиваемым headless-движком, полезный для всех, кто работает в сфере электронной коммерции.

▫️ Katalon Studio — инструмент для автоматизации тестирования веб-приложений, API, мобильных и настольных приложений.

▫️ Searchcode — сервис для простого поиска кода. Помогает вам найти реальные примеры функций, API и библиотек на 243 языках в 10+ общедоступных источниках кода.

▫️ Clockify — трекер рабочего времени, который помогает следить, сколько часов уходит на проекты, насколько вы продуктивны в промежутке времени и даже прикидывать зарплату.

▫️ Invision Inspect — помогает подготовить дизайны к разработке.

WebDEV #подборка #инструменты

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

1. React или Vue или Angular.

2. DaFont — большая коллекция из более чем пятидесяти тысяч бесплатных шрифтов на любой вкус.

3. Перебрать все элементы и получить новый изменённый массив.

WebDEV #test #CSS

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

📖 Hacking APIs
🖋 Corey J. Ball, 2022

Вы узнаете, как API-интерфейсы REST и GraphQL работают в продакшене и создадите стенд для тестирования API с помощью Burp Suite и Postman. Затем вы освоите инструменты для разведки, анализа эндпоинтов, такие как Kiterunner и OWASP Amass. Далее вы научитесь выполнять распространенные атаки, нацеленные на механизмы аутентификации API, и находить уязвимости, обычно встречающиеся в веб-приложениях

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

WebDEV #book #API #web

💡 Перебрать все элементы и выполнить действие

С циклом:

function print(name) {
  console.log(name);
}

let names = ["Clean", "Code", "codeclean"];

for (let i = 0, totalNames = names.length; i < totalNames; i = i + 1) {
  print(names[i])
}

Без цикла:

let names = ["Clean", "Code", "codeclean"];

names.forEach(name => print(name));

WebDEV #советы

🛠 Roadmap — полезный ресурс, где можно найти готовые карты для развития во Frontend, React, Backend и ещё в нескольких направлениях.

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

💡 Отфильтровать массив

Если использовать цикл:

function isOdd(n) {
  return n % 2;
}

let numbers = [1, 2, 3, 4, 5];

let odd = [];

for (let i = 0, total = numbers.length; i < total; i = i + 1) {
  let number = numbers[i];
  if (isOdd(number)) {
    odd.push(number);
  }
}

Используя filter:

let numbers = [1, 2, 3, 4, 5];

let odd = numbers.filter(n => n % 2); // одна строка

WebDEV #советы

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

1. Hacking APIs.

2. Roadmap — полезный ресурс, где можно найти готовые карты для развития во Frontend, React, Backend и ещё в нескольких направлениях.

3. Перебрать все элементы и выполнить действие.

WebDEV #test #html

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

💡 Найти значение, аккумулирующее значения элементов массива

Сумма чисел, если использовать цикл:

let numbers = [1, 2, 3, 4, 5]

let result = 0;

for (let i = 0, total = numbers.length; i < total; i = i + 1) {
  result = result + numbers[i];
}

Используя reduce:

let numbers = [1, 2, 3, 4, 5];

let result = numbers.reduce((acc, val) => acc + val, 0);

WebDEV #советы

🛠 Keyframes App — инструмент, который поможет создавать простую и сложную анимацию при помощи визуального онлайн-редактора с временной шкалой. Так же, сервис предоставляет редактор теней и подбор собственной палитры цветов в разных форматах.

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

💡 Проверить, содержит ли массив значение

Если использовать цикл:

let names = ["Web", "DEV", "telegram"];

for (let i = 0, totalNames = names.length; i < totalNames; i = i + 1) {
  if (names[i] === "DEV") {
    console.log("%c found DEV", "color:red");
  }
}

Используя some:

let names = ["Web", "DEV", "telegram"];

let isRahulPresent = names.some(name => name === "DEV");

if (isRahulPresent) {
  console.log("%c found DEV", "color:red");
}

%c в выражении будет применять стиль к тексту консоли.

WebDEV #советы

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

1. Приложение на чистом JS.

2. Keyframes App — инструмент, который поможет создавать простую и сложную анимацию при помощи визуального онлайн-редактора с временной шкалой.

3. Найти значение, аккумулирующее значения элементов массива.

WebDEV #test #CSS

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

💡 Проверить, подходит ли условию каждый элемент массива

Если использовать цикл:

let num = [1, 2, 3, 4, 5, 0];

for (let i = 0, total = num.length; i < total; i = i + 1) {
  if (i <= 0) {
    console.log("0 present in array");
  }
}

Используя every:

let num = [1, 2, 3, 4, 5, 0];

let isZeroFree = num.every(e => e > 0);

if (!isZeroFree) {
console.log("0 present in array");
}

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