JavaScript заметки
8.54K subscribers
2.76K photos
4 videos
1.28K links
Регулярные заметки по практическому JavaScript. Обучащию посты позволят прокачать навыки во Frontend-разработке.

Можно почитать пока компилируется проект :)

Сотрудничество: @noname_media

Канал на бирже: telega.in/channels/notesjs/card?r=Wj7h1mbl
Download Telegram
Bryntum Scheduler

Bryntum – это современный и высокопроизводительный компонент пользовательского интерфейса для планирования, который легко интегрируется со всеми средами JS, включая React, Angular и Vue. В данной статье автор демонстрирует создание планировщика по управлению недвижимостью с помощью Bryntum и JavaScript.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью
👍1
Удалить из массива повторяющиеся элементы

С помощью Set:

const array = [1, 2, 2, 3, 1, 5];
const unique = [...new Set(array)];
console.log(unique); // [1, 2, 3, 5];

С помощью метода массива filter:

const array = [1, 2, 2, 3, 1, 5];
const unique = array.filter((value, index) => {
return array.indexOf(value) === index;
});
console.log(unique); // [1, 2, 3, 5]

#массивы
👍8
PET-проекты для новичков

Программирование — это практика. Ты не можешь научиться программированию, просто читая инструкции или запоминая вопросы для интервью. В данной статье автор собрал 9 PET-проектов для самостоятельного изучения и практики в программировании и архитектуре.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью
👍31
Сгенерировать случайное число в определённом диапазоне

Случайное число от 0 до 100:

Math.floor(Math.random() * 100)

Случайное число от 1 до 100:

Math.floor(Math.random() * 100) + 1

Случайное число между минимальным (включительно) и максимальным значением (не включая):

function getRandom(min, max) { 
return Math.floor(Math.random() * (max - min) ) + min;
}
console.log(getRandom(10, 35)); // случайное число в диапазоне >= 10 и < 35

Случайное число между и максимальным значением (включая оба значения):

function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1) ) + min;
}
console.log(getRandom(10, 35)); // случайное число в диапазоне >= 10 и <= 35

#полезно
👍41
Эффекты в видеосвязи

Делимся статьей, где автор демонстрирует реализацию эффектов в видеосвязи. Используются Canvas API и MediaPipe. Продемонстрированы различные эффекты, перфоманс кода.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью
Вывести JSON в отформатированном виде

#полезно
👍21
Бессерверное приложение

Делимся статьей, где автор демонстрирует создание бессерверного приложения, используя Netlify. Будет приниматься ссылка на веб-сайт в качестве аргумента. Для предоставления содержимого сайта используется Mozilla Readability API.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью
👍1
Реализовать плавный переход в верх страницы

#полезно
👍14
Рекомендации по Core Web Vitals

На протяжении многих лет Google давали веб-разработчикам множество рекомендаций по повышению производительности. Хотя каждая из этих рекомендаций по отдельности может повысить производительность многих сайтов, полный набор рекомендаций слишком обширный. Делимся статьей, где автор дает рекомендации по Core Web Vitals на 2023 год.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью
Преобразовать любое значение в Boolean

Это будет особенно полезно, если вы не хотите послать в бэкенд значение null или undefined.

#полезно
Цифровые часы

MomentJS — это библиотека JavaScript, которая позволяет легко анализировать, проверять, манипулировать и отображать дату/время в JavaScript. Делимся статьей, где автор демонстрирует создание цифровых часов с помощью MomentJS.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью
6
Быстро преобразовать строку в число

#полезно
👍9
Отслеживание закрытия браузера

Закрытие вкладки или окна в браузере можно обнаружить с помощью события beforeunload. Это можно использовать для предупреждения пользователя в случае, если некоторые данные на странице не сохранены или пользователь по ошибке ушел с текущей страницы, закрыв вкладку или браузер. Благодаря этой статье ты научишься отслеживать событие закрытия браузера.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью
7
Преобразовать строку в массив

#полезно
👍9
Многопользовательский чат

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

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью
1
Отобразить число с точностью до двух знаков после запятой

#полезно
👍3
Копирование в JavaScript

Не все копии в JavaScript одинаковы. Когда ты копируешь переменную в JavaScript, она классифицируется как поверхностная или глубокая копия. Делимся статьей, где автор наглядно демонстрирует разницу между поверхностной и глубокой копией.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью
Визуализация с D3.js

D3 (Data-Driven Documents) представляет собой библиотеку JavaScript, которая позволяет отображать данные и помогает с проверкой и управлением DOM. Благодаря этой статье ты научишься визуализации с помощью D3.js.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью
1👍1
Проверить вхождение определённого значения в массив

Метод
includes также полезен, если требуется сравнить несколько значений сразу.

#полезно
👍5
Создание кроссбраузерного расширения

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

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью
👍3
Использование оператора опциональной последовательности (optional chaining operator)

Раньше, чтобы получить доступ ко вложенному свойству, нужно было проверять, существует ли каждое из свойств. Прямое обращение к user.location.street.name могло выбросить исключение, что мы пытаемся обратиться к name через несуществующие ссылки к методам location или street.

Но теперь, в версии ES11, код после оператора опциональной последовательности выполнится, только если обращение по предыдущей ссылке не привело к undefined или null.

Так что использование этого оператора сократит ваш код и сделает его более понятным.

#операторы
👍6