JavaScript заметки

XSS с мутациями Мутационные XSS-уязвимости вызваны различиями в том, как браузеры интерпретируют стандарт HTML. Сервер должен учитывать все различия не только между браузерами, но и их версиями. В данной статье автор демонстрирует свежие примеры, которые позволили обойти защиту популярных HTML-санитайзеров. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Передача числовых переменных в качестве аргументов в функцию Оператор rest (версия ES6) конвертирует разделённые запятой значения в массив, таким образом параметр numbers в функции add становится массивом. function add(...numbers) { return numbers.reduce((acc, value) => { return acc + value; }, 0); } const sum = add(1, 2, 3, 4, 5); console.log(sum); // 15 #функции

Создание кроссбраузерного расширения Делимся статьей, где автор рассказывает про создание кроссбраузерного расширения. Ты узнаешь про различные проблемы кроссбраузерности; из чего состоит расширение. Также ты познакомишься с фреймворком Plasmo. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Использование шаблонных литералов const user = { name: 'David', age: 30, address: 'NY' }; const { name, age, address } = user; console.log(Hi, I'm ${name} with age ${age} and living in ${address}); #полезно

Docker Docker — это открытая платформа для разработки и запуска приложений. Docker позволяет отделить твои приложения от инфраструктуры, чтобы ты мог быстро развертывать программное обеспечение. Данная статья познакомит тебя с Docker. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Деструктуризация массивов const days = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"]; const [firstDay, secondDay] = days; console.log(firstDay); // sunday console.log(secondDay); // monday #массивы

Ошибки с промисами В данной статье продемонстрированы самые распространенные ошибки при работе с промисами. К ним относятся: использование блока try/catch внутри промиса; неправильное использование Promise.race(); злоупотребление промисами. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Деструктуризация объектов const user = { name: 'David', age: 30 }; // деструктуризовать пропсы и использовать status со значением Married, если этого свойства нет const {name, age, status = 'Married' } = user; console.log(name, age, status) // David 30 Married const person = { age: 30 }; // деструктуризуем объект person, переименуем name в username, назначим по умолчанию значение Anonymous, если такого свойства в person нет const {name: username = 'Anonymous', age } = person; console.log(username, age); // Anonymous 30 #полезно

Создание пианино В данной статьей автор демонстрирует создание пианино с помощью JavaScript. Обрати внимание, проект лучше всего работает в Chrome и других браузерах с тем же движком. Могут быть проблемы при работе с Safari. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Сколько нужно времени, чтобы освоить востребованную профессию фронтенд-разработчика? Всего 10 месяцев! Вы можете совмещать обучение с любым своим занятием. Главное условие - желание. В Xeкслете вы можете пройти онлайн-курс по профессии «‎Фронтенд-разработчик». Во время программы вы: ✔️ Изучите JavaScript в связке с HTML и CSS. ✔️ Освоите React для создания сложных компонентов, которые легко поддерживать и использовать повторно. ✔️ Решите более 310 задач в браузере. ✔️ Создадите 4 проекта для портфолио на GitHubВыполните 150 тестовых заданий от наших партнёров. ✔️ Научитесь работать с чужим кодом и оформлять пул-реквесты в Open Source проектах. Обучение построено так, что его невозможно «отсидеть» или «прослушать». Мы не сторонники подхода «повтори за учителем»: вы будете не просто писать код, а научитесь самостоятельно находить лучшие решения. 📌 Пройдите первые 10 бесплатных уроков из профессии и получите дополнительно скидку 10% !

Получить временную метку (timestamp) Текущее значение метки времени бывает полезно для генерации случайных значений, ведь с каждой секундой оно меняется. const date = new Date(); console.log(date.getTime()); // 1621708197268 #функции

RegEx на практике Регулярное выражение — это последовательность символов, формирующая шаблон поиска. Шаблон поиска можно использовать для текстового поиска и операций замены текста. В данной статье продемонстрирована работа regex с валидацией. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

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

const arr = [1, 2, 3, 4];

• arr.constructor.toString().indexOf("Array") > -1 • arr instanceof Array • Array.isArray(arr) #полезно

CORS Совместное использование ресурсов различными источниками (CORS) — это механизм безопасности на основе HTTP, который контролируется и применяется клиентом (веб-браузером). Это позволяет службе (API) указывать любой источник, кроме своего собственного, из которого клиент может запрашивать ресурсы. Делимся статьей, где автор знакомит с CORS. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Нейрофронт — первый канал в Telegram по Frontend-разработке, где тебя обучит нейросеть ChatGPT! На канале собрана вся необходимая информация для Frontend-разработчиков: обучение, статьи, новости, codеpen'ы, тесты и юмор. Следите за нашими публикациями и улучшайте свои навыки, чтобы стать лучшим разработчиком Frontend. Не забудьте: путь к успеху начинается с подписки на Нейрофронт.

Взять последние элементы из массива Обратите внимание: метод slice доступен для массива так же, как и для строки.

const numbers = [10, 20, 30, 40, 50];
const last = numbers.slice(-1);
console.log(last); // [50]
const secondLast = numbers.slice(-2);
console.log(secondLast); // [40, 50]

#методы

Internationalization API Internationalization API — интерфейс, предоставляемый браузером. Он позволяет выполнять интернационализацию и локализацию веб-приложений. Данная статья поможет разобраться с Internationalization API. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Найти количество пропсов в объекте const user = { name: 'David', age: 30, city: 'NY' }; console.log(Object.keys(user).length); // 3 #полезно

Three.js и тетрис Three.js — это легковесная кросс-браузерная библиотека JavaScript, используемая для создания и отображения анимированной трехмерной компьютерной графики в веб-браузере. Скрипты Three.js можно использовать в сочетании с элементом холста HTML5, SVG или WebGL. В данной статье продемонстрировано, как с помощью Three.js можно создать трехмерный тетрис. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Обновить пропсы объекта с помощью оператора spread const user = { name: 'David', age: 30, city: 'NY' }; const newAge = 40; const updatedUser = { ...user, age: newAge }; console.log(user); // { name: 'David', age: 30, city: 'NY'} console.log(updatedUser); // { name: 'David', age: 40, city: 'NY'} #полезно