Глубокое копирование через JSON

Возможно, вы слышали об использовании оператора spread или Object.assign() для создания поверхностных копий объекта, но знаете ли вы об использовании JSON для глубокого копирования?

Преобразуйте объект в JSON с помощью JSON.stringify(), а затем повторно прогоните его с помощью JSON.parse(), чтобы создать глубокую копию.

Однако помните, что такой подход имеет проблемы с производительностью на больших объектах. Если вам нужна поверхностная копия - лучше использовать оператор spread

#js

Удаление дубликатов из массива

Eсть очень простой способ удалить дубликаты из массива с помощью структуры данных Set.

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

Что примечательно, реализация через Set работает в разы быстрее filter + indexOf подхода

array.filter((item, index) => array.indexOf(item) != index);

#js

Удаление элементов массива

Используйте splice вместо delete для удаления элемента из массива. Метод delete заменяет элемент undefined значением, а не удаляет его из массива.
Используйте delete для удаления свойств из объектов, а не массивов.

Метод slice принимает несколько аргументов.
Первый - индекс, с которого будет начато изменения массива.
Второй - количество элементов, которые нужно удалить.
Третий и последующие - необязательные параметры. Это добавляемые к массиву элементы. Если их не указывать, то splice просто удалит элементы из массива, как показано в примере.

Следует учитывать, что оба метода мутируют исходный массив/объект. Если вам нужно сохранить исходные данные - создайте копию перед манипуляциями

const copiedItems = [...items]
copiedItems.splice(3,1);

#js

Является ли аргумент числовым?

Подобная функция может пригодиться, если вам нужно проверить данные, полученные из ненадежного источника, например, после парсинга.
1. Отсекаем все типы, кроме строк.
2. Проверяем, является ли аргумент числовым значением с помощью !NaN.
3. Если пункт 2 прошел проверку, то пытаемся получить десятичное число с помощью parseFloat и проверяем полученное значение с помощью того же !NaN.

Учитывайте, что в качестве разделителя чисел валидна только точка ".".

Возможно, у вас появился вопрос: "Почему бы не использовать базовые функции вроде parseInt или Number?". Причина в том, что иногда, они могут вести себя не очевидно. Например, частично парсить parseInt('12px') -> 12, не учитывать дробную часть parseInt('0.5') -> 0 или даже преобразовывать пробелы Number(' ') -> 0

#js

Удовлетворяет ли элемент массива условию?

В начале небольшое пояснение: метод some проверяет, удовлетворяет ли какой-либо элемент массива условию, заданному в передаваемой функции.

Часто вижу, что вместо some используют [].findIndex(() => ...) !== 0 или даже [].find(() => ...) !== undefined.
Все три метода, действительно, очень похожи, и вы можете использовать findIndex или find вместо some. Причина по которой стоит использовать some – удобочитаемость. Мы же все стремимся к читаемому коду, верно?

Кстати, если вы проверяете массив на наличие в нем undefined, то find – заведомо плохая идея, т.к. независимо от содержимого массива, конструкция вроде arr.find((el) => el === undefined) !== undefined всегда будет возвращать false, потому что невозможно отличить найденный элемент от undefined, который вернулся из-за того, что ни один элемент не удовлетворил условию.

#js

История ES модулей

Один из подписчиков попросил рассказать подробнее про ES модули. Материала набралось на целую статью с примерами.

Я постарался кратко разобрать Модуль паттерн, CommonJs и EcmaScript Модули, плюсы и минусы каждого из подходов. Если остались вопросы или хотите предложить свои темы для постов – буду ждать вас в комментах.

👉👉👉 Читать статью 👈👈👈

#js

Пока готовил статью про ES модули, наткнулся на интересный пример c eval.

Как думаете, чему равны evalX и x?

P.S. Если вы используете eval в своем проекте, задумайтесь, а очевидно ли он работает и действительно ли он необходим?

P.P.S. Ответ с объяснением скинул в комменты.

#js

Зоопарк CSS технологий

Хотел в субботу сделать короткий пост-обзор по современным CSS подходам, с которыми мне довелось поработать. Нюансов оказалось так много, что пост превратился в статью, которую я дописал только вчера ночью😃

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

Полную статью можно найти здесь. Ниже выжимка.

Inline стили. Учитывая все минусы, я рекомендую использовать их в комбинации с любым другим подходом для вычисляемых значений, которые проблематично описать в css;

Обычный CSS. Без БЭМ или CSS модулей адекватно можно сверстать, разве что, лабу в универе или пример в codeopen;

SASS/SCSS. Аналогично пункту выше. Не рекомендую использовать без БЭМ или CSS модулей;

CSS/SCSS + БЭМ. Классика. То, с чем можно построить приложение маленьких и средних размеров. На любом стэке. В больших приложениях растет риск коллизий имен и их решение превращается в квест. Для проектов на React есть варианты получше;

CSS модули. Золотая середина для приложений на React. Настроить под них вебпак не составляет труда, а в CRA вообще работают из коробки. Можно строить приложения любых размеров, используя все прелести css, не ломать голову над именами классов и не бояться за глобальную область видимости;

CSS-in-JS. Не стоит использовать для сайтов, в которых важен SEO, по крайней мере, run-time решения. Для маленьких проектов слишком много лишнего придется тянуть в проект. Хорошо подходят для средних и больших проектов и команд. В моей практике и styled-components и linaria хорошо показали себя на больших проектах-микрофронтах с UI китом.

Tailwind. Может хорошо себя показать в проектах любого размера и назначения. Должен показывать хороший SEO результат. Tailwind подойдет, если вы: синхронизированы с дизайнерами, готовы отказаться от абстрактных классов и длинные имена классов вам не режут глаз. Если нет - выберете что-то другое.

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

#js #react #css

Работа с SVG: шрифт, компоненты или файлы?

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

Использование SVG как компонентов будет лучшим выбором, если вы работаете с внутренними частями изображения, например, делаете анимации или красите части иконки в разные цвета. Этот подход имеет более удобный DX: разработчики могут расширять, переиспользовать и изменять код иконки напрямую.

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

Когда какой подход использовать? Статику я бы использовал на лендингах, т. к. там важно время загрузки и, как правило, картинки в малом количестве, что делает использование шрифта не очень выгодным. Шрифты имеет смысл генерировать для больших корпоративных паков иконок и закидывать на CDN, чтобы системы и микросервисы не грузили одни и те же файлы иконок, а использовали закашированный шрифт. Ну, и во всех остальных случаях я бы выбрал SVG, как react-компонент, в идеале, в отдельном пакете. Если закрыть глаза на скорость загрузки и билда, то SVG как компоненты, безусловно лидируют: вы, как разработчик, полностью владеете кодом и видите историю всех изменений в гите, а у конечных пользователей не прыгает страница (в случае долгой загрузки статики) и не появляются квадратики (пока идет загрузка шрифта)

#react #js

Алоха, друзья!

Последнее время трудился над своим первым роликом на YouTube. Вот что получилось: Ускоряем разработку в WebStorm. Конструктивная критика приветствуется 🙂

Материалы, которые обещал в видео:
🗃 Шаблоны
🤖 JS генератор

Те, кто со мной общался, знают что я любитель вебшторма, поэтому тема нарисовалась сама собой. Изначально хотел сделать статью, но потом решил, что это хорошее начало для YouTube.

#js #javascript #webstorm

Вчера вечером было немого скучно и я решил залезть внутрь хомяка (прости госпади)

В топе интернетов по запросу типа “открыть Hamster Kombat с компа” рекомендации с подменой оригинального telegram-web-app.js на пропатченый скрипт. Что как бы совсем не безопасно.

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

1. Заходим в ТГ в Хроме https://web.telegram.org/
2. Открываем инструменты разработчика (F12)
3. Выбираем чат с ботом и запускаем игру
4. Открываем вкладку Sources (Источники)
5. Слева в папках ищем top → clicker → hamsterkombat.io → js → telegram-web-app.js
6. Ищем return webAppPlatform; на 1797 строке и заменяем на return 'android';
7 Нажимаем правой кнопки мыши по telegram-web-app.js и выбираем Override content (Перезаписать контент)
8. Выбираем папку, в которую сохраним пропатченный скрипт
9. Разрешаем браузеру чтение скрипта (если спрашивает)
10. Сохраняем изменения с помощью ctrl + s
11. PROFIT! Переоткрываем игру и гоняем хомячка на компутере

📼 Видеогайд тут

Но этого мне показалось мало и я еще сделал пару скриптов
📊 Аналитика выгодных покупок
🤖 Рандомный автокликер

Энджой

Почему бы и нет https://t.iss.one/hamstEr_kombat_bot/start?startapp=kentId294802260

P.S. я особо не питаю надежд по заработку в хомяке, но если кому-то нравится тапать по грызуну, то почему это хуже просмотра рилсов?

#js #javascript

Последние посты сами подтолкнули к теме видео, препарировал несколько приложений в Телеграм и наглядно показал как несовершенна защита на стороне клиента

Материалы к видео
🔨 Как открыть приложения Telegram в браузере?

Конструктивная критика приветствуется 🙂

#js #javascript #web