Миграция с Webpack и react-scripts на Vite: Путь к Быстрому и Легковесному React

Я работаю фронтенд-разработчицей в IT-компании, и многие из моих проектов на протяжении долгого времени собирались с использованием Webpack. Настройка Webpack иногда бывала сложной, но в целом он справлялся с задачей сборки проектов. Однако в последнее время мои коллеги начали восторгаться новым инструментом - Vite. Они рассказывали о его легковесности, быстрой сборке и преимуществах для разработчиков React-приложений. В этой статье я поделюсь своим опытом миграции с Webpack и react-scripts на Vite. Я расскажу о причинах, по которым решила попробовать Vite, а также о том, с какими сложностями пришлось столкнуться и как они были решены.

#статья

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

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

Манипуляция с элементами страницы: создание, удаление и изменение HTML-элементов

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

В данном примере мы создаем новый элемент div с текстом "Новый элемент" и классом "my-class". Затем мы добавляем этот элемент в конец body документа с помощью метода appendChild(). Мы также изменяем содержимое элемента с помощью свойства textContent и стилизуем его, устанавливая значение свойства backgroundColor.

Через 3 секунды мы удаляем элемент с помощью метода remove(). Это демонстрирует возможность удаления элементов из документа.

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

#полезное

Увеличиваем свою производительность в WebStorm / PhpStorm c помощью шаблонов

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

#статья

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

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

Работа с датами и временем: использование объекта Date и библиотек для работы с датами

Работа с датами и временем является неотъемлемой частью разработки веб-приложений, особенно при работе с расписаниями, сроками и другими временными данными. Для работы с датами в JavaScript мы можем использовать встроенный объект Date, который предоставляет функциональность для работы с датами и временем.

В данном примере мы создаем объект Date с помощью конструктора new Date(), который инициализирует его текущей датой и временем.

Затем мы используем различные методы объекта Date, такие как getFullYear(), getMonth(), getDate(), getHours(), getMinutes() и getSeconds(), чтобы получить текущие значения года, месяца, дня, часа, минуты и секунды.

Мы также форматируем дату и время, используя шаблон строки и значения, полученные от объекта Date. В данном примере мы форматируем дату в формате "день.месяц.год" и время в формате "часы:минуты:секунды".

#полезное

Как добавить несколько товаров в Shopify корзину одним кликом?

Недавно я писал конфигуратор в Shopify и решил поделиться тем, как добавить несколько товаров в Шопифай корзину. Я находил не так много материалов по этому вопросу, тем более на русском языке.

#статья

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

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

Использование WebAssembly для выполнения высокопроизводительного кода в браузере

WebAssembly — это бинарный формат инструкций, предназначенный для выполнения в веб-браузерах, что позволяет запускать высокопроизводительные приложения, написанные на языках, таких как C или C++, в браузере.

#полезное

Циклы в JavaScript

Рассмотрим циклы JavaScript, их типы, примеры использования и лучшие практики. Это поможет успешно управлять ходом выполнения программ, эффективно решая повторяющиеся задачи.

#статья

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

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

Использование Object Destructuring для извлечения значений из объектов

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

#полезное

Первые шаги в JavaScript: создание калькулятора

Начинаете осваивать JavaScript? Создание простого калькулятора позволит вам оценить его возможности. Вы получите базовое представление о синтаксисе JavaScript и о том, как использовать его для создания интерактивных веб-приложений.

#статья

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

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

Использование Spread Operator для объединения массивов или объектов

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

#полезное

Не бойтесь генераторов JavaScript

Все еще пренебрегаете генераторами JavaScript? И совершенно напрасно. Узнайте, как использовать эти мощные средства для управления асинхронным программированием, создания итерируемых объектов и выдачи нескольких значений.

#статья

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

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

Использование Set для хранения уникальных значений

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

#полезное

Анатомия shadcn/ui

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

#статья

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

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

Использование Map для хранения пар "ключ-значение"

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

#полезное

Валидация формы с помощью AJV, Vue.js и TypeScript

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

#статья

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

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

Использование Higher-Order Functions для обработки массивов

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

#полезное

Обзор на новую CSS-in-JS либу от Facebook* – StyleX

Недавно компания Facebook* (aka Meta**) выпустила в опенсорс собственную CSS-in-JS библиотеку под названием StyleX. По заявлениям разработчиков, она отлично подходит для больших проектов и ключевым ее преимуществом является перфоманс.
В этой статье мы рассмотрим пример использования, основные функции и особенности данного решения.

#статья

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

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

Работа с графикой: использование библиотеки Canvas для рисования и визуализации данных

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

Canvas - это элемент HTML5, который позволяет рисовать графику с помощью JavaScript. Он предоставляет API для создания и управления контекстом рисования, на котором можно рисовать линии, фигуры, текст и многое другое.

В данном примере мы получаем контекст рисования Canvas с помощью метода getContext(). Затем мы используем методы контекста, такие как fillRect() для рисования прямоугольника, stroke() для рисования линии и fillText() для рисования текста.

Мы также можем устанавливать различные свойства контекста, такие как цвет заливки (fillStyle), цвет обводки (strokeStyle), толщина линии (lineWidth) и шрифт (font).

#полезное

Сборка мусора в JavaScript

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

#статья

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

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

Работа с локализацией: перевод и форматирование текста на разных языках

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

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

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

Затем мы используем метод format() объекта Intl для форматирования числа amount в соответствии с указанными опциями. В данном примере мы форматируем число в денежный формат.

#полезное

Facebook выпустил новую CSS-in-JS библиотеку — StyleX

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

#статья

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

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