DANFA
Поиск блогов...

Synchronous XMLHttpRequest on the main thread is deprecated

JavaScript
Если вы столкнулись с предупреждением «Synchronous XMLHttpRequest on the main thread is deprecated», это значит, что ваш код совершает синхронные запросы на главную нить браузера. Подобная практика признана устаревшей и не рекомендуется из-за серьёзного негативного влияния на пользовательский опыт.

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

Что такое синхронные запросы?


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

Например, возьмем такой JavaScript-код:
ВыделитьJavaScript
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', false); // Параметр false делает запрос синхронным
xhr.send();
console.log(xhr.responseText);

Параметр false в третьей позиции заставляет запрос ждать завершения передачи данных от сервера,...

Cannot read properties of undefined (reading 'trim')

JavaScript
Ошибка TypeError: Cannot read properties of undefined (reading 'trim') возникает, когда вы пытаетесь вызвать метод или прочитать свойство у переменной, которой присвоено значение undefined или null.

Обычно такая ошибка встречается в JavaScript, когда программа ожидает объект или строку, но по факту переменная не была инициализирована или стала неопределённой.

Наиболее частые причины появления этой ошибки



Обращение к свойствам объекта, который не определен
Например, вы вызвали метод .trim() на строке, но строка оказалась равна undefined:
ВыделитьJavaScript
let myVar = undefined;
console.log(myVar.trim()); // Uncaught TypeError: Cannot read properties of undefined (reading 'trim')

Несуществующие элементы DOM
Если вы пытаетесь манипулировать элементом, который не существует в документе:
ВыделитьJavaScript
const element = document.querySelector('.nonexistent-class');
console.log(element.textContent.trim()); // Uncaught TypeError: Cannot read properties of null (reading 'trim')

Поддержка устар...

Манипуляция SVG с помощью JavaScript

JavaScript SVG
Scalable Vector Graphics (SVG) — это формат векторной графики, широко используемый в веб-разработке. Одним из мощных инструментов для работы с SVG является JavaScript, который позволяет динамически изменять атрибуты, стили и поведение SVG-элементов.

В этой статье мы рассмотрим основные приемы манипуляции SVG с помощью JavaScript.

Доступ к SVG-элементам


Для того чтобы манипулировать SVG-элементами, нужно сначала получить доступ к ним с помощью JavaScript. Вот несколько способов:

Получение элемента по ID:
ВыделитьJavaScript
let svgCircle = document.getElementById('myCircle');

Получение элементов по классу:
ВыделитьJavaScript
let circles = document.getElementsByClassName('circle');

Получение всех элементов SVG:
ВыделитьJavaScript
let svgElements = document.querySelectorAll('svg *');

Изменение атрибутов SVG


Один из самых частых способов манипуляции SVG — это изменение атрибутов элементов. Вот несколько примеров:

Изменение цвета заливки и обводки:
ВыделитьJavaScript
let circle =
...

Простые и эффективные техники анимации SVG с GSAP

JavaScript SVG
GreenSock Animation Platform (GSAP) — это мощная библиотека для создания качественной анимации в веб-пространстве. Вместе с SVG GSAP позволяет создавать потрясающе выглядящие и интерактивные элементы. В этой статье мы рассмотрим простые и эффективные техники, которые помогут оживить SVG с помощью GSAP.

Введение в GSAP и SVG



Что такое GSAP?
GSAP — это высокопроизводительная библиотека для анимации, позволяющая анимировать практически любые CSS-свойства и DOM-элементы. В отличие от CSS-анимации, GSAP предлагает больший контроль и лёгкость управления.

Как подключить GSAP?
Подключить GSAP можно через CDN:
ВыделитьHTML
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>

Простые техники анимации SVG с GSAP



Анимация движения (Motion Path)
GSAP позволяет анимировать путь (motion path) по траектории, заданной в SVG. Это особенно полезно для создания плавных перемещений объектов:
ВыделитьHTML
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <path d="M10,10
...

Как создать виджет для встраивания в сторонние сайты

CSS HTML JavaScript
Создание виджетов для встраивания в сторонние сайты — это удобный способ предоставления своего функционала или контента третьим лицам. Такие виджеты могут представлять собой календарь мероприятий, форму заказа, рекламный блок или что угодно другое. В этой статье мы рассмотрим, как создать виджет и предоставить его другим сайтам для встраивания.

Что такое виджет?


Виджет — это мини-приложение или блок контента, который можно встроить на чужие сайты. Виджеты обычно представляют собой HTML-, CSS- и JavaScript-код, упакованный в удобном формате, который владелец сайта может легко скопировать и вставить на свою страницу.

Какие задачи решает виджет?


  • Предоставление дополнительного функционала на сайтах партнёров.
  • Увеличение узнаваемости бренда и привлечение трафика.
  • Возможность монетизации (например, реклама или платные услуги).

Как создать виджет?


  1. HTML-код: Создайте HTML-разметку для вашего виджета. Например, это может быть форма подписки, кнопка покупки или информативный блок.
  2. CSS-стилизация: Оп
...