Архив меток: JavaScript

Веб-компоненты проще, чем вы думаете

От автора: когда я ходил на конференции и смотрел, как кто-то делает презентацию о веб-компонентах, я всегда думал, что это было довольно здорово (да, очевидно, я из 1950 года), и это всегда казалось мне очень сложным. Тысяча строк JavaScript, чтобы сэкономить четыре строки HTML. Докладчик неизбежно либо замалчивал уйму JavaScript, который заставляет это работать, либо они вдавались в мучительные детали, ...

Читать далее »

Использование GSAP 3 для веб-анимации

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

Читать далее »

JavaScript: что такое this?

От автора: определить значение this в JavaScript может быть непросто, однако… Тhis в JavaScript — предмет многих шуток, потому что, ну, это довольно сложно. Тем не менее, я видел, как разработчики делали гораздо более сложные и зависящие от предметной области вещи, чтобы избежать ключевого слова this. Если вы не уверены, надеюсь, это поможет. Это мое руководство по this. Если функция ...

Читать далее »

Серверный рендеринг в JavaScript: оптимизация производительности

От автора: ключ к хорошей производительности при загрузке — сокращение времени ожидания из-за связи. Очевидно, что кеширование может помочь, но иногда бывают случаи, когда мы не можем применить кэширование. Так что еще мы можем сделать? Получать при рендеринге Теперь, как и при разделении кода, метод не ограничивается серверным рендерингом. Это, безусловно, самая важная вещь, которую может сделать любое приложение. Идея ...

Читать далее »

Динамические метатеги для ботов и сканеров с помощью Firebase и Cloudflare Workers

От автора: существует множество способов предоставления динамических метатегов ботам и поисковым сканерам, большинство из которых связано с управлением вашими собственными серверами, будь то SSR, предварительный рендеринг или создание статических сайтов. Но что, если вы не хотите управлять сервером или подключаться к платформе SSR, есть ли другой вариант? Это ситуация, в которой я недавно оказался. Предварительный рендеринг был бы хорошим решением; ...

Читать далее »

Как вызвать функцию PHP из JavaScript

От автора: PHP имеет гораздо больше встроенных функций для работы со строками, массивами и другими типами данных по сравнению с JavaScript. Поэтому для многих естественным является желание вызывать функции PHP из JavaScript. Однако, как вы уже догадались или узнали, это не работает должным образом. Может быть множество других случаев, когда вы захотите запустить некоторый PHP-код внутри JavaScript — например, чтобы ...

Читать далее »

Контроль производительности веб-приложения с помощью JavaScript

От автора: в сентябре у меня была возможность присоединиться к Forest Admin, компании, которая выполняет всю тяжелую работу по созданию панели администрирования любого веб-приложения и предоставляет платформу на основе API для реализации всех ваших конкретных бизнес-процессов. Введение Моей первой миссией было реализовать мониторинг времени загрузки приложений, а также мониторинг времени запросов, выполненных клиентами в бэкэнде. Цель такой функции — иметь ...

Читать далее »

Обмен данными между CSS и JavaScript

От автора: одной из самых больших битв, которые мы наблюдаем в мире веб-разработки, все еще остается CSS против JavaScript. У обоих есть свои достоинства, собственный синтаксис и идеи, и их может быть сложно понять. Вот почему мне нравится, что у нас есть способы совместить эти технологии и использовать каждую для того, в чем она лучше. Во-первых, меня всегда раздражало манипулирование ...

Читать далее »

Как значительно улучшить fetch() с помощью шаблона декоратора

От автора: fetch() API позволяет выполнять сетевые запросы в веб-приложениях. Использование fetch() довольно простое: invoke fetch(‘/movies.json’) для запуска запроса. Когда запрос завершится, вы получите объект Response, из которого можете извлечь данные. Вот простой пример того, как получить некоторые фильмы в формате JSON с URL /movies.json: async function executeRequest() { const response = await fetch('/movies.json'); const moviesJson = await response.json(); console.log(moviesJson); ...

Читать далее »

Обрабатывайте события JavaScript как профессионал

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

Читать далее »