Миграция с 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-элементы, что открывает широкие возможности для создания интерактивных и динамических веб-приложений.

#полезное

Мои первые шаги в создании браузерных 2D игр на чистом JavaScript + Canvas

Статья представляет собой перевод одного англоязычного видеоурока. Если Вы хорошо владеете английским и Вам больше нравится видеоформат подачи материала — можете посмотреть видео. В статье же я буду вставлять участки кода и стараться также подробно как и автор видео — объяснять каждый свой шаг.

#статья

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

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

Генерация случайных чисел

В примере мы используем Math.random() для получения случайной десятичной дроби между 0 и 1. Затем мы масштабируем и округляем эту дробь, чтобы получить случайное целое число в заданном диапазоне (включая минимальное и максимальное значение).

#полезное

Сайд эффект реактивности и апдейта компонента во Vue 3

Хочу рассказать о небольшом кейсе, связанном с работой реактивности во Vue 3. Кейс касается взаимосвязи ref/reactive, v-for/v-if, :class, функций и того, что у нас находится в <template>. Сразу оговорюсь, что под капотом не смотрел, поэтому детальных объяснений не ждите. Наоборот, хотелось бы услышать ваши мнения, сталкивались ли вы с подобными сайд эффектами.

#статья

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

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

Работа с обещаниями (Promises)

В примере мы создаем функцию fetchData, которая возвращает обещание (Promise) с задержкой. Затем мы используем методы .then() для обработки успешного выполнения и .catch() для обработки ошибок. Это позволяет более чисто и структурированно работать с асинхронными операциями, такими как загрузка данных с сервера.

#полезное

Что быстрее: Animated + useNativeDriver или Reanimated?

В этой статье попробуем разобраться, что же всё-таки работает быстрее: React-Native-Reanimated или Animated + useNativeDriver: true.

#статья

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

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

Локальное хранилище браузера с использованием объекта localStorage

В примере мы используем объект localStorage, доступный в браузере, чтобы сохранить данные, такие как имя пользователя и адрес электронной почты. Мы используем метод setItem() для сохранения данных и метод getItem() для получения данных. Мы также демонстрируем, как можно удалить данные из локального хранилища с помощью метода removeItem().

#полезное

Как внедрить гайд по стилю кода в проект

Практикум появился в 2019 году и с тех пор растёт. В какой-то момент нам стало сложно погружать новичков в проект. Дело в том, что стиль кода всё время развивался, но правила оставались на уровне устных договорённостей. В итоге приходили новые тиммейты, видели легаси и более свежий код — и не понимали, какой написан правильно и почему они разные. Как следствие, код-ревью растягивалось, и тестирование проходило в разы сложнее. Люди чувствовали себя неуютно в таких процессах. 

#статья

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

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

Асинхронные HTTP-запросы с использованием современного API Fetch

В примере мы используем fetch для отправки GET-запроса к удаленному серверу. Мы обрабатываем результат запроса с использованием асинхронного синтаксиса с await и async. Если запрос выполнен успешно (HTTP-код 200), мы преобразуем полученные данные в JSON и выводим их в консоль. В противном случае, мы ловим ошибку и выводим сообщение об ошибке.

#полезное

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

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

#статья

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

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

Сортировка массивов объекта

В этом примере мы создаем массив объектов people, содержащий информацию о людях, и затем используем метод sort() для сортировки массива по возрасту в порядке возрастания, используя функцию sortByAgeAscending в качестве функции сравнения. Вы можете создать аналогичную функцию для сортировки в порядке убывания или для сортировки по другим полям объектов. Сортировка массивов объектов полезна при отображении данных в определенном порядке, например, в таблицах или списках.

#полезное

Юриспруденция и программирование: что общего?

Юриспруденция и программирование… Казалось бы, что может быть общего у этих двух совершенно не похожих и не связанных друг с другом сфер деятельности? Юристы — это стопроцентные гуманитарии (по крайней мере так считается), а программисты — это технари, копающиеся в машинном коде. Но правда в том, что эти две области знаний, как ни странно, имеют очень много общего. А, главное: у них одна основа — логика. Сейчас я попытаюсь это доказать на примере языка JavaScript.

#статья

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

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

Работа с DOM (Document Object Model)

Этот код выбирает элемент на веб-странице по его идентификатору и обновляет его текстовое содержимое.

#полезное

5 недооцененных возможностей JavaScript

Скорее всего, вы не используете эти 5 методов работы с JavaScript. Их можно отнести к одним из самых недооцененных возможностей TypeScript. Впрочем, у вас есть шанс восполнить этот пробел.

#статья

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

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

Обработка событий

Этот код добавляет функцию-обработчик события клика для кнопки, которая вызывает alert при нажатии.

#полезное

ESLint | Shareable config настройка и что это такое?

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

#статья

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

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

Асинхронные функции

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

#полезное

Web Workers в JavaScript: Параллельные вычисления и улучшение производительности

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

#статья

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

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

Работа с асинхронными запросами (AJAX)

Этот код выполняет асинхронный GET-запрос к серверу и обрабатывает ответ в формате JSON.

#полезное