JavaScript заметки

Раскрываем силу JavaScript: сокращение размера пакета NPM на 99% Ищете пути повышения производительности приложения? Ознакомьтесь со способами значительного улучшения метрик в Lighthouse и FCP в проектах с использованием пакета дизайн-системы. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

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

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

Рекурсия и оптимизация рекурсивных функций В первой части кода есть простая рекурсивная функция factorial, которая вычисляет факториал числа n. Она вызывает себя с аргументом n - 1, пока n не станет меньше или равно 1. Во второй части кода представлена оптимизированная версия функции factorialMemoized, которая использует мемоизацию. Мемоизация - это техника, при которой результаты предыдущих вызовов функции сохраняются в памяти и возвращаются в случае повторного вызова с теми же аргументами. В данном случае, мы используем объект memo для хранения результатов предыдущих вызовов factorialMemoized. Если результат уже вычислен для конкретного n, мы возвращаем его из memo, иначе вычисляем и сохраняем в memo. Таким образом, оптимизированная версия factorialMemoized более эффективна при вычислении факториала для больших чисел, так как избегает переполнения стека вызовов, и вычисляет результаты только один раз для каждого n. #полезное

Роадмэп по современному фронтенду от KTS Перед одним из потоков курса «Начинающий React-разработчик» мы провели вебинар, на котором рассказали, что из себя представляет современный фронтенд и какие знания нужны для востребованности на рынке труда. После вебинара мы решили написать цельный план развития во фронтенде. Пункты развития для роадмэпа мы выбирали исходя из нашего опыта. Последовательность изучения этих тем не является твёрдой, так как у каждого свой путь и свои задачи. Статья подойдет как для начинающих специалистов, так и для более опытных, которые хотели бы получить какой-то ориентир для дальнейшего развития. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Функции высшего порядка и их использование Функции высшего порядка в JavaScript - это функции, которые могут принимать другие функции как аргументы или возвращать их как результат. Они являются мощным инструментом для абстракции и повторного использования кода. Рассмотрим пример функции высшего порядка, которая принимает функцию обратного вызова и применяет ее к каждому элементу массива В этом примере forEach - это функция высшего порядка, которая принимает массив arr и функцию обратного вызова callback. Она итерирует по элементам массива и вызывает callback для каждого элемента. Функция printItem представляет собой функцию обратного вызова, которая просто выводит элемент в консоль. Затем мы создаем массив numbers и используем forEach, чтобы применить функцию printItem к каждому элементу массива. Результатом будет вывод всех элементов массива в консоль. #полезное

Facebook выпустил новую CSS-in-JS библиотеку — StyleX Верней оформил 5 декабря 2023 года для всех то, чем его разработчики пользуются уже давно. Позиционируется данный помощник для js-подобных фреймворков типа React, Preact, Solid, lit-html и Angular, однако оперирующие html шаблонами Vue и Svelte тоже могут задействовать StyleX, но после предварительной специальной её кастомизации. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Работа с локализацией: перевод и форматирование текста на разных языках Работа с локализацией является важной частью разработки веб-приложений, особенно при создании мультиязычных интерфейсов. Для перевода текста на разные языки в JavaScript можно использовать объект Intl, который предоставляет функциональность для локализации. С помощью объекта Intl можно форматировать числа, даты, валюты и другие типы данных в соответствии с правилами языка и региона. В данном примере мы создаем объект Intl с помощью конструктора new Intl.NumberFormat(). Мы указываем язык и регион (в данном случае 'en-US' для английского языка в США) и опции форматирования (в данном случае стиль 'currency' и валюту 'USD'). Затем мы используем метод format() объекта Intl для форматирования числа amount в соответствии с указанными опциями. В данном примере мы форматируем число в денежный формат. #полезное

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

Использование Higher-Order Functions для обработки массивов Higher-Order Functions (функции высшего порядка) принимают или возвращают другие функции, и их использование делает код более гибким и функциональным. #полезное

Как мы внедряли Sentry В прошлый раз мы рассматривали внедрение Sentry со стороны эксплуатации: устанавливали на сервер self-hosted, делали его высокодоступным при помощи сети доставки td-agent, настраивали мониторинг. Ожидаются небольшие дополнения. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Использование async/await для управления асинхронными операциями async/await предоставляют удобный способ работы с асинхронным кодом, делая его более читаемым и управляемым. #полезное

Валидация формы с помощью AJV, Vue.js и TypeScript Валидация форм является важной частью frontend-разработки, которая помогает улучшить пользовательский опыт и предотвратить ошибки при отправке данных на сервер. В этой статье мы рассмотрим, как использовать библиотеку AJV совместно с Vue.js и TypeScript для создания мощной системы валидации формы. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Использование Map для хранения пар "ключ-значение" Map предоставляет структуру для хранения данных в виде пар "ключ-значение", где ключи могут быть любого типа. #полезное

Анатомия shadcn/ui Если вы следите за новинками экосистемы JavaScript, то должны были слышать об интересной библиотеке пользовательского интерфейса (user interface, UI) под названием shadcn/ui. Вместо того, чтобы распространяться в виде пакета npm, компоненты shadcn/ui добавляются с помощью интерфейса командной строки (command line interface, CLI), который помещает исходный код компонентов непосредственно в ваш проект. Разработчик библиотеки указывает причину такого решения на официальном сайте shadcn/ui. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Использование Set для хранения уникальных значений Set предоставляет коллекцию уникальных значений, и дубликаты автоматически удаляются. #полезное

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

Использование Spread Operator для объединения массивов или объектов Spread Operator (оператор расширения) позволяет развертывать элементы массива или свойства объекта в другой массив или объект. #полезное

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

Использование Object Destructuring для извлечения значений из объектов Деструктуризация объектов в JavaScript позволяет извлекать значения свойств объекта в переменные. #полезное