JavaScript *

Сколько раз вы уже сталкивались с запросами от бизнеса о необходимости ускорить разработку, внедряя интеграции со сторонними сервисами? И неужели не звучит заманчиво возможность менять дизайн и контент независимо, без необходимости привлекать разработчика?

В статье я продемонстрирую, как решить три задачи, связанные с интеграциями в React приложении:

1. Изменять контент страницы на React без необходимости привлечения разработчика;

2. Расширять функционал React приложения с помощью сторонних сервисов;

3. Создавать страницы с минимальными затратами на разработку.

Что такое пропагация?

Пропогация события — от английского «распространение» — это процесс возникновения, перемещения и обработки события внутри DOM.

Это одно из фундаментальных свойств поведения Document Object Model, зная которое, вы сможете лучше манипулировать поведением события.

Фазы распространения

Распространение состоит из двух фаз (строго говоря из трех, но фазу достижения таргета для упрощения будем считать частью фазы всплытия).

Распространение события начинается с объекта окна (window). Потом собитие переходит к документу (document), затем к телу (document.body) и так к элементу, который вызвал событие (target). Путь от объекта окна до элемента триггера — это первый этап распространения, которое называется погружение (capturing).

Затем начинается фаза всплытия (bubbling), на которой как раз и происходит «дефолтное» слушание событий документом.

Наглядно это можно видеть на схеме:

Примечание: авторский перевод статьи Web Content Elements

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

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

Проблему можно описать следующим образом: разработка HTML структуры и системы стилей для этой структуры недостаточно формализована для обеспечения единого и независимого от проекта, разработчика или этапа разработки стандарта.

Web Content Elements(WCE) - это концепция, шаблон проектирования, который позволяет описать любые решения подобного рода линейно и однообразно.

Согласно WCE, тег - это переменная для генерации синтаксической структуры элемента разметки.

Основная идея паттерна заключается в группировке элементов по роли, которую они представляют на странице.

💡 Элементы сгруппированы по их ролям на странице, а не тегам.

Основные роли:

Асинхронность – это способ координации поведения программы на протяжении какого-то временного отрезка. Разбираем, как в синхронном JavaScript вынести операции за рамки единого потока, чтобы не блокировать действие кода после тяжёлых операций. 

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

При создании этого раздела я впервые столкнулась с миром SmartTV. Не каждый фронтендер встречает в своей практике подобные задачи, даже несмотря на то, что сейчас разработка под ТВ довольно популярна.

Меня зовут Лена и я фронтенд-разработчик Яндекс Музыки. В этой статье я расскажу про особенности работы SmartTV и разработки под них на примере свежей фичи, которую мы назвали Время клипов. Теперь в приложении вы можете посмотреть клипы любимых артистов и открывать для себя новых исполнителей, которые подходят вам по настроению.

Под катом обсудим ключевые отличия работы фронтенда над вебом и SmartTV, поговорим про оптимизацию и вёрстку и посмотрим на фотографии множества пультов (без пакетиков).

Недавно столкнулся с одной из «типовых» задач на собеседованиях. Просто увидел такое выражение где-то в интернете и не совсем понял как оно работает. А именно не понимал почему пустой массив дает 0.

![] == []

Такое выражение вернет true.

Решил конкретно рассмотреть данный пример по спецификации, и понять что происходит шаг за шагом.

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

В этом уроке научимся сокращать число мешей в сцене путем слияния их по одинаковым материалам с помощью библиотеки three.js.

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

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

Можно считать это как продолжение серии моих статей про оптимизацию в целом: раз и два.

В этой статье я рассмотрю один из методов оптимизации сайта для пользователей с медленной скоростью интернета - Network Information API. Это API с большим набором различной информации о сети, но пока не с самой лучшей поддержкой среди браузеров. Тем не менее это не повод не использовать его для тех пользователей, чей браузер это поддерживает - а это около 73% глобальных пользователей. Примеры кода будут на Vue.

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

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

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

Одна из таких библиотек - KotUniL, разработанная изначально на Котлине. 

Сразу же после её появления библиотеки автору посыпались запросы по переносу её на JavaScript. Некоторое время назад в рамках обеспечения мультиплатформенности библиотеки разработан вариант библиотеки для JavaScript.

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

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

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

В данной статье мы обсудим новые возможности работы с массивами в JavaScript, которые были добавлены в ES2023.

Этот пост является ещё одной попыткой сформулировать идею, зачем нужно внедрение зависимостей в ванильном JavaScript (именно в ES6+, а не в TS).

Основная сложность в том, что шаблон «внедрение зависимостей» (DI) есть следствие применение на практике «принципа инверсии зависимостей» (DIP). Классическая формулировка этого принципа выглядит так:

• A. Модули верхних уровней не должны зависеть от модулей нижних уровней. Оба типа модулей должны зависеть от абстракций.

• B. Абстракции не должны зависеть от деталей. Детали должны зависеть от абстракций.

Для JS‑программиста данная формулировка представляет определённую сложность в силу того, что в JS нет классических абстракций (в виде «интерфейсов» из других ЯП). В JS вообще нет абстракций, тут всё очень конкретно: вот объекты, вот примитивы — комбинируй.

Тем не менее, если спуститься с уровня теории на уровень практики, внедрение зависимостей вполне успешно может применяться даже в таком «конкретном» языке.

В этой статье вы узнаете про:

• Анимации на основе скрола

• Topics API

• Ограждённые Фреймы

• Privacy Sandbox

и многое другое!

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

Что такое Mobx?

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

Mobx простая и понятная в использовании библиотека, использующая в своей реализации Context API и, по сравнению с Redux, требующая минимум шаблонного кода для инициализации стора.

Mobx сторы хорошо масштабируются и для каждого стора можно определить его область видимости, помещая соответствующие компоненты внутрь провайдеров стора.

Зачем использовать глобальные сторы?

Глобальный стор упрощает передачу параметров между компонентами, изменение которых вызывает ререндер активного интерфейса.

Также в сторах удобно хранить общие методы — будь то api‑запросы или парсеры данных — которые используются в разных компонентах, но которые сложно передавать передавать между ними по дереву компонентов.

Наглядно поток передачи параметров между компонентами без и с Mobx показан на слайде:

Привет, Хабр! Сегодня предлагаем подборку книг для JavaScript-разработчика. Подобраны они в порядке усложнения материала. То, что в начале подборки, пригодится начинающему специалисту (правда, перечитать не помешает и профи). А ближе к концу — книги для более опытных разработчиков. Если же у вас есть собственные предпочтения, то расскажите о них тоже — поделитесь в комментариях.

Привет! Продолжаем цикл статей про тестирование не-REST-бэкенда, в прошлый раз мы говорили о GraphQL, теперь пришло время WebSocket.

Итак, что такое WebSocket?

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

Что тут важно — что это протокол (со всеми вытекающими последствиями для протокола), который использует постоянное соединение.

Работу по WebSocket в обычной жизни можно представить примерно так.

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

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

ОК, что вам делать в такой ситуации?

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