Category : javascript

javascript
Event Propagation: фазы погружения (capturing) и всплытия (bubbling)

Что такое пропагация?Пропогация события — от английского «распространение» — это процесс возникновения, перемещения и обработки события внутри DOM.Это одно из фундаментальных свойств поведения Document Object Model, зная которое, вы сможете лучше манипулировать поведением события.Фазы распространенияРаспространение состоит из двух фаз (строго говоря из трех, но фазу достижения таргета для упрощения будем считать частью фазы всплытия).Распространение события начинается с объекта окна (window). …

  • пятница, 21 июля 2023 г. в 00:00:14
javascript
Если ваш фронтендер перестал бояться IE6, покажите ему SmartTV

В декабре 2021 года под новогодние праздники в приложении Кинопоиска для SmartTV появился раздел с Яндекс Музыкой. Он позволил пользователям на телевизорах открывать новые для себя треки в Моей волне, включать популярные подборки и слушать собственную коллекцию на телевизорах.При создании этого раздела я впервые столкнулась с миром SmartTV. Не каждый фронтендер встречает в своей практике подобные задачи, даже несмотря на то, что сейчас разработка под ТВ довольно популярна.Меня зовут Лена и я ф…

  • среда, 19 июля 2023 г. в 00:00:17
javascript
Асинхронность в JS: как выполнять долгие сетевые запросы без блокирования основного потока

Асинхронность – это способ координации поведения программы на протяжении какого-то временного отрезка. Разбираем, как в синхронном JavaScript вынести операции за рамки единого потока, чтобы не блокировать действие кода после тяжёлых операций. Приветствую! Меня зовут Андрей Степанов, я CTO во fuse8. Мне интересно знакомиться с опытом коллег по цеху и делиться своим. В сфере я уже больше 20 лет. В этой статье – небольшое погружение в тему асинхронности в контексте разработки на JavaScript с объя…

  • среда, 19 июля 2023 г. в 00:00:17
javascript
React Content Elements

Примечание: авторский перевод статьи Web Content ElementsВ HTML разработке мы используем тег в качестве дескриминатора - тег определяет элемент. Мы используем классы, чтобы применять стили к HTML элементам. Разработчик создает структуру и описывает стили руководствуясь правилами конкретного проекта, своим опытом и общепринятыми рекомендациями.В результате мы получаем проекты состоящие из длинного списка кастомных решений в моменте принятых разработчиком лично, либо в составе команды, например …

  • среда, 19 июля 2023 г. в 00:00:16
javascript
Работа с единицами системы СИ на JavaScript

Система СИ и взаимосвязи между единицами физических величин.Программируя традиционным образом, очень просто упустить из виду, в каких единицах измеряются числа, с которыми мы оперируем. Например, можно сложить метры с литрами, и никакой компилятор нам при этом не поможет. Эта проблема реальная и уже доказано приводила к авариям, обошедшимся во многие миллионы долларов. (Одна из историй здесь).Избежать этого помогает использование специальных библиотек, которые корректно работают с физическими …

  • вторник, 18 июля 2023 г. в 00:00:17
javascript
Ускоряем рендер сцены в three.js путем объединения мешей в один

В этом уроке научимся сокращать число мешей в сцене путем слияния их по одинаковым материалам.Пример блока на сайте с 3D модельюИзвестно, что, чем больше мешей внутри сцены, тем чаще нашему приложению требуется задействовать дорогостоящие операции по загрузке данных в видеокарту устройства пользователя (так называемые draw calls).Чтобы уменьшить число вызовов, замедляющих рендер нашей сцены, можно из мешей с одинаковыми материалами сделать один меш.Реализация алгоритмаНапишем фрагмент кода с п…

  • вторник, 18 июля 2023 г. в 00:00:16
javascript
Правда ли Astro так быстр, сравнение с Nuxt 3

ПредисловиеВсем привет, в последнее время, много вижу/читаю/слышу про astro, про то, какой он быстрый, производительный. Поэтому я решил потыкать Astro и параллельно проверить насколько он быстр - я написал на нем примитивный блог с 600 карточками и сравнил его по производительности с Nuxt 3 SSG.Производительность замерял с помощью pagespeed.Сразу хочу сказать, что я не претендую на правильность этих тестов - мне просто было интересно как обстоят дела в некоторых кейсах + было интересно потыка…

  • вторник, 18 июля 2023 г. в 00:00:16
javascript
Работа нестрогого равенства в JS на примере задачки

Недавно столкнулся с одной из "типовых" задач на собеседованиях. Просто увидел такое выражение где-то в интернете и не совсем понял как оно работает. А именно не понимал почему пустой массив дает 0.![] == [] Такое выражение вернет true.Решил конкретно рассмотреть данный пример по спецификации, и понять что происходит шаг за шагом.TL;DR![] - возвращаетfalse, потому что объект в Boolean всегда true и противоположность true - это falseПри нестрогом сравнении где операнды имеют разный тип,…

  • вторник, 18 июля 2023 г. в 00:00:15
javascript
Оптимизация изображений для пользователей с медленным интернетом с помощью Network Information API

Многие из нас привыкли к тому, что быстрый и стабильный интернет это данность в 2023 году, поэтому оптимизацией вебсайтов под этот случай особо не занимаются. Однако все еще остаются сценарии, когда это не так: например, в дороге между населенными пунктами или в некоторых помещениях, которые либо находятся под землей, либо плохо пропускают сигнал по какой-то другой причине.Для нашего проекта combat-sport.club как раз актуальна ситуация, когда взвешивание спортсменов перед проведением соревнова…

  • понедельник, 17 июля 2023 г. в 00:00:14