JavaScript заметки

Трекер расходов SheetJS — это библиотека JavaScript для Excel, которая позволяет преобразовывать html-таблицу, массив или json в загружаемый xlsx-файл. Все это делается прямо в браузере. Благодаря этой статье ты узнаешь, как создать трекер расходов с помощью SheetJS. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Никакие платные курсы больше не нужны — по этим 4 каналам можно освоить Frontend-разработку с нуля 👇 ▪️ Senior Frontend — JS, HTML и CSS ▪️ Frontend Interview — как проходить собеседования ▪️ Web Craft — только Web-разработка ▪️ Frontender Libs — библиотеки для фронтендера

Выполнить обработчик событий только один раз document.getElementById("btn").addEventListener("click", function () { console.log("Button clicked!"); }, { once: true } ); #полезно

Редко используемые API Делимся статьей, где автор рассказывает про 4 API. Они редко используются, однако очень полезны. К ним относятся Beacon, Clipboard, Notifications и Perfomance. Присутствует ссылка на репозиторий с примерами. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Быстрый способ создать маску для числа методами slice и padStart const creditCard = "4111111111114321"; // номер кредитной карты из 16 цифр const lastFourDigits = creditCard.slice(-4); // получить последние 4 цифры // добавить * к lastFourDigits, чтобы длина тоже была равна 16 const maskedNumber = lastFourDigits.padStart(creditCard.length, '*'); console.log(lastFourDigits); // 4321 console.log(maskedNumber); // ************4321 #полезно

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

​​Платные курсы по фронтенду больше не нужны! Эта подборка, закроет честные 90% потребностей фронтенеров любого уровня. @build_html — сотни бесплатных макетов для верстки на русском языке. @on_the_frontend — дайджест самых актуальных статей по фронтенду. @frontend_tests — сборник задач (с их разбором) для прокачки теоретических знаний и подготовки к собеседованиям. @job_frontend — подборка лучших вакансий для фронтенд разработчиков. Чат фронтендеров — место где можно задать вопрос и получить на него ответ. Поверь, это то, что тебе нужно! Подпишись, чтобы не потерять.

Optional Chaining Эта функция идет «в комплекте» с Nullish Coalescing for JavaScript, особенно в TypeScript. Разработчики TypeScript объявили, что они включат Nullish Coalescing for JavaScript и это proposal в свой следующий релиз, 3.7.0. const city = country && country.city; // undefined if city doesn't exist Взгляните на код в данном примере. Чтобы получить «город» (city), который находится в объекте «страна» (country), мы должны сперва проверить, существует ли «страна» и существует ли «город» в «стране». С помощью Optional Chaining этот код можно отрефакторить следующим образом:

const city = country?.city; // undefined if city doesn't exist

Эта функция кажется очень удобной и полезной в данной ситуации. #функции

Генератор коротких CSS классов и id Делимся статьей, где автор демонстрирует генерацию коротких css классов и id элементов в html верстке. Приведен алгоритм и требования к генератору, также присутствует ссылка на npm пакет. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Нулевое слияние для JavaScript Все мы часто писали такой код:

const obj = {
name: 'James'
};
const name = obj.name || 'Jane'; // James

Если obj.name является ложным, возвращается «Jane», а 'undefined' возвращаться не будет. Но проблема в том, что пустая строка ('') также будет считаться ложью в этом случае. Так что мы должны переписать код снова, как показано ниже.

const name = (obj.name && obj.name !== '') ? obj.name : 'Jane';

Каждый раз писать такой код – это головная боль. Эта фича позволяет нам проверять только null и undefined. #полезно

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

Top-level await Мотивация для внедрения этой функции заключалась в том, что когда вы импортируете модуль (import) с асинхронной (async) функцией, выходные данные этой асинхронной функции не определены (undefined).

// awaiting.mjs
import { process } from "./some-module.mjs";
const dynamic = import(computedModuleSpecifier);
const data = fetch(url);
export const output = process((await dynamic).default, await data);

Представим себе два файла. Выходные данные (output) могут быть неопределенными (undefined), если они вызываются прежде чем выполнены Promises tasks.

// usage.mjs
import { output } from "./awaiting.mjs";
export function outputPlusValue(value) { return output + value }
console.log(outputPlusValue(100));
setTimeout(() => console.log(outputPlusValue(100), 1000);

usage.mjs не выполнит ни одного из утверждений в нем, пока await'ы в awaiting.mjs не дождутся разрешения своих Promises. #функции

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

Числовые разделители Когда вы присваиваете переменной большое числовое значение, вас не смущает вопрос насколько оно большое и правильно ли вы его написали? Эта фича позволит вам поставить знак «подчеркивание» между цифрами, чтобы вам было проще подсчитать их количество в числе.

1_000_000_000 // Ah, so a billion
101_475_938.38 // And this is hundreds of millions
let fee = 123_00; // $123 (12300 cents, apparently)
let fee = 12_300; // $12,300 (woah, that fee!)
let amount = 12345_00; // 12,345 (1234500 cents, apparently)
let amount = 123_4500; // 123.45 (4-fixed financial)
let amount = 1_234_500; // 1,234,500
let budget = 1_000_000_000_000;
// What is the value of budget? It's 1 trillion!
//
// Let's confirm:
console.log(budget === 10 ** 12); // true

Каждый разработчик сам решит, использовать эту функцию или нет (разумеется, после ее релиза), но одно ясно наверняка: эта фича уменьшит вашу головную боль при определении насколько велико число. #полезно

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

ChatGPT пришел в телеграм! Эта нейросеть сдает экзамены в Гарвард и знает в миллион раз больше анекдотов, чем твой батя. Теперь у нее есть свой канал, там интересно: @chatgpt

flatMap Метод сначала преобразует каждый элемент с помощью функции преобразования, а затем выравнивает результат в новом массиве.

const arr = ["it's Sunny in", "", "California"];
arr.flatMap(x => x.split(" "));
// ["it's","Sunny","in", "", "California"]

Разница между flat и flatMap заключается в том, что во flatMap вы можете поместить пользовательскую функцию для управления каждым значением. Кроме того, в отличие от flat, flatMap выравнивает только массивы с уровнем вложенности 1. Возвращаемое значение должно быть типом массива. Это может быть очень полезно, если вы должны что-то сделать, прежде чем выровнять массив. #методы

Map против Set Set — это множество данных коллекции, которое должно состоять из уникальных значений. Map — это коллекция ключ/значение. Map и Set имеют схожие методы; к ним относятся .has(), .get(), .delete() и .size(). Данная статья рассказывает, когда нужно использовать Map и Set. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

flat Это метод, который создает новый массив со всеми элементами вложенного массива, рекурсивно объединенными с вышестоящим массивом до заданной глубины.

const array = [1, 2, [3, 4]];
array.flat(); // [1, 2, 3, 4];

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

const crazyArray = [1, 2, [3, 4], [[5], [6, [7,8]]]];
crazyArray.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8];

Чем глубже вы погружаетесь в массив, тем больше вычислительного времени потребуется для его выравнивания. Обратите внимание, что IE и Edge не поддерживают эту функцию. #методы

Делаем эффектную фотогалерею на сайте В данной статьей демонстрируется создание трехмерной фотогалереи. Проект состоит из HTML-страницы, где находится карусель; CSS-файла, где настраивается внешний вид карусели в целом; скрипта на JavaScript, в котором реализована работа карусели с фотографиями. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью