JavaScript заметки

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

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

Использование JavaScript WebRTC API для передачи потоков данных в реальном времени WebRTC API используется для захвата и передачи потоков аудио и видео в реальном времени между пользователями. #полезное

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

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

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

Использование JavaScript Generators для создания ленивых итераторов Генераторы позволяют создавать функции, которые могут "запоминать" свое состояние, возвращая значения с помощью yield. #полезное

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

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

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

Использование JavaScript Proxy для создания оберток вокруг объектов Proxy используется для создания обертки вокруг объекта, позволяя перехватывать и настраивать доступ к свойствам объекта. #полезное

Как добавить несколько товаров в Shopify корзину одним кликом? Недавно я писал конфигуратор в Shopify и решил поделиться тем, как добавить несколько товаров в Шопифай корзину. Я находил не так много материалов по этому вопросу, тем более на русском языке. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Работа с датами и временем: использование объекта Date и библиотек для работы с датами Работа с датами и временем является неотъемлемой частью разработки веб-приложений, особенно при работе с расписаниями, сроками и другими временными данными. Для работы с датами в JavaScript мы можем использовать встроенный объект Date, который предоставляет функциональность для работы с датами и временем. В данном примере мы создаем объект Date с помощью конструктора new Date(), который инициализирует его текущей датой и временем. Затем мы используем различные методы объекта Date, такие как getFullYear(), getMonth(), getDate(), getHours(), getMinutes() и getSeconds(), чтобы получить текущие значения года, месяца, дня, часа, минуты и секунды. Мы также форматируем дату и время, используя шаблон строки и значения, полученные от объекта Date. В данном примере мы форматируем дату в формате "день.месяц.год" и время в формате "часы:минуты:секунды". #полезное

Один компонент, 20+ фич, A/B-тесты: Поможет ли машина состояний? Сталкивались ли вы с проблемой возникновения багов из-за пересечения включенных фичей в приложении? Или, возможно, была необходимость одновременно проводить большое число A/B-экспериментов в одном компоненте?  #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Работа с графикой: использование библиотеки Canvas для рисования и визуализации данных Работа с графикой является важной частью разработки веб-приложений, особенно при рисовании и визуализации данных. Для этого разработчики часто используют библиотеку Canvas, которая предоставляет мощные инструменты для создания интерактивных и красочных графических элементов. Canvas - это элемент HTML5, который позволяет рисовать графику с помощью JavaScript. Он предоставляет API для создания и управления контекстом рисования, на котором можно рисовать линии, фигуры, текст и многое другое. В данном примере мы получаем контекст рисования Canvas с помощью метода getContext(). Затем мы используем методы контекста, такие как fillRect() для рисования прямоугольника, stroke() для рисования линии и fillText() для рисования текста. Мы также можем устанавливать различные свойства контекста, такие как цвет заливки (fillStyle), цвет обводки (strokeStyle), толщина линии (lineWidth) и шрифт (font). #полезное

Пристальный взгляд на отладку 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. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью