JavaScript заметки

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

Я делаю на JS/TS много разного в «Лаборатории Касперского»: фронт, облачные сервисы (Node.js), штуки для коробочной поставки (OnPrem), платформенные компоненты и библиотеки. И, конечно же, Open Source.
Сегодня хотел бы затронуть тему отладки веб-приложений на JavaScript.
Итак, как отлаживаться? Как-как? console.log(1)

#статья

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

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

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

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

CSS предоставляет мощные возможности для создания анимаций с помощью свойства animation. С помощью CSS можно определить ключевые кадры, продолжительность, задержку, тип анимации и другие параметры. Преимущество использования CSS для анимации заключается в том, что браузеры могут оптимизировать и ускорить процесс воспроизведения анимации.

В данном примере мы определяем анимацию slide-in, которая перемещает элемент из-за пределов экрана внутрь с помощью свойства transform: translateX(). Анимация начинается с -100% смещения по оси X и заканчивается с 0 смещением.

Затем мы применяем анимацию к элементу с классом .element с помощью свойства animation. Мы указываем имя анимации slide-in, продолжительность 1s и функцию плавности ease-in-out.

#полезное

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

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

#статья

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

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

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

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

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

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

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

#полезное

React + Three.js. Создаём собственный 3D шутер

В современной веб-разработке границы между классическими и веб-приложениями стираются с каждым днём. Сегодня мы можем создавать не только интерактивные сайты, но и полноценные игры прямо в браузере. Одним из инструментов, который делает это возможным, является библиотека React Three Fiber - мощное средство для создания 3D-графики на основе Three.js с использованием технологии React.

#статья

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

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

Работа с JSON: сериализация и десериализация данных в JavaScript

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

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

В данном примере мы создаем объект person, содержащий информацию о человеке. Затем мы используем метод JSON.stringify() для сериализации объекта в строку JSON. Результат выводится в консоль.

Затем мы используем метод JSON.parse() для десериализации строки JSON обратно в объект. Результат также выводится в консоль.

#полезное

Подружим Sentry и Mattermost быстро и просто через адаптер

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

#статья

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

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

Использование классов для создания карусели

Здесь класс Carousel используется для создания простой карусели изображений.

#классы

Создание мини игр и анимации в Online редакторе Collagen_2

Collagen позволяет создавать тестовую анимацию управляемую с клавиатуры, имеется редактор уровней который позволяет создавать слои, перемещать камеру вида а также управлять анимацией персонажа. Также вы его можете использовать для создания чатов в игровом формате или мини социальных игр в связке с node.js и sokcet.io

#статья

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

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

Использование классов для моделирования геометрических фигур

Здесь класс Shape представляет базовую геометрическую фигуру, а класс Circle наследует его и добавляет функциональность для работы с кругами.

#классы

Event Loop в деталях

В данной статье поговорим о том, почему Event Loop вообще был создан, как с ним работать и почему про него спрашивают на собесах.

#статья

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

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

Использование классов для создания графических элементов

Здесь класс Rectangle представляет графический элемент (прямоугольник) и может использоваться для рисования на холсте HTML5.

#классы

Web Accessibility в рассказе «A11Y от 0 до NaN»

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

#статья

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

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

Использование классов для создания плеера видео

Класс VideoPlayer может использоваться для создания проигрывателя видео на веб-странице.

#классы

Создаем мини-игру с капельным эффектом и движущимися кружками

В первой части было сделано базовое перемещение кружочков по странице. А в сегодняшнем уроке мы сделаем анимацию “взрыва” и поглощения кружочков.

#статья

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

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

Использование классов для создания часов

Класс Clock создает объект, который отображает текущее время и обновляет его каждую секунду.

#классы

Service Workers против медленного интернета: Кэширование и улучшение UX

Плохой интернет, когда нужно загрузить картинку весом как чугунный мост. В эпоху очень быстрого интернета мы стали забывать о том, что в некоторых локациях нашего мира нет хорошей сети (например, когда вы едете в поезде по нашей необъятной стране). Эту проблему довольно хорошо решают Service Workers, о которых я вам сейчас расскажу.

#статья

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

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

Работа с Promise

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

#полезное

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

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

#статья

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

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

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

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

#полезное