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

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

#статья

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

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

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

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

#полезное

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

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

#статья

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

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

Локальное хранилище браузера с использованием объекта 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-запроса и обработки данных, полученных с сервера.

#полезное

Работа с Local Storage

Этот код демонстрирует, как сохранять данные на стороне клиента с использованием Local Storage и извлекать их позже.

#полезное

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

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

#статья

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

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

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

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

#полезное

9 алгоритмов сортировки и поиска для JS, о которых вас спросят на собеседовании

Даже если ты frontend-разработчик и решаешь прикладные задачи, тебе в любом случае придётся знать алгоритмы хотя бы на базовом уровне. Но статей на русском с объяснением алгоритмов и тем, как их реализовать на JavaScript, крайне мало. Поэтому хочу поделиться некоторыми алгоритмами сортировки и поиска, и немного рассказать про структуры данных. Знание алгоритмов и структур данных поможет вам в оптимизации приложений.

#статья

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

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

Работа с куки (Cookies)

Этот код демонстрирует, как устанавливать и читать куки для хранения данных на стороне клиента.

#полезное

Особенности кодировки строк в Base64 в JavaScript

Кодировка (encoding) и декодирование (decoding) в Base64 — распространенный способ преобразования двоичных данных в безопасный текст. Он часто используется в Data URL, таких как встроенные (inline) изображения.

#статья

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

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