Обновить
256K+

JavaScript *

Прототипно-ориентированный язык программирования

242,43
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Примеры использования наблюдателей в JavaScript

Время на прочтение8 мин
Охват и читатели31K


Наблюдатель (observer) — это объект, который следит за состоянием определенного элемента и регистрирует происходящие в нем изменения. Элемент, который находится под наблюдением (чуть не написал «за которым организована слежка»), называется целевым. Наблюдатель может следить за состоянием как одного, так и нескольких элементов, а в некоторых случаях также и за потомками целевого элемента.

В JavaScript существует три основных вида наблюдателей:

  1. ResizeObserver
  2. IntersectionObserver
  3. MutationObserver

В данной статье я предлагаю сосредоточиться на практической реализации каждого наблюдателя.

Создание микросервисной архитектуры с использованием single-spa (миграция существующего проекта)

Время на прочтение14 мин
Охват и читатели23K
image

Это первая статья по в данной теме, всего их планируется 3:

  1. * Создание root application из вашего существующего проекта, добавление в него 3 микро-приложения (vue, react, angular)
  2. Общение между микро-приложениями
  3. Работа с git (deploy, обновления)

Оглавление


  1. Общая часть
  2. Зачем это нужно
  3. Создание root контейнера (определение см. ниже) из вашего монолита
  4. Создаем микро-приложение VUE (vue-app)
  5.  Создаем микро-приложение REACT (react-app)
  6.  Создаем микро-приложение ANGULAR (angular-app)

1. Общая часть


Задача этой статьи: добавить возможность использовать существующий монолитный проект как root контейнер для микросервисной архитектуры.
Читать дальше →

Визуализация изменения климата при помощи интерактивного генеративного искусства

Время на прочтение7 мин
Охват и читатели2.6K

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

И поэтому мы подумали о создании «живого окна», которое показывает погоду и её изменение. Мы решили создать веб-приложение, которое будет показывать нынешние погодные условия, используя природный ландшафт, созданный путём вычислений, но в то же время эстетично. Другими словами, при помощи генеративного искусства.

Читать далее

Какой тип числа у Number в JS?

Время на прочтение3 мин
Охват и читатели13K

Если вы изучали языки со строгой типизацией, то должны понимать, что определённое значение должно храниться в памяти с заранее выделенным для неё количеством байт. Например, для числа int выделяется 4 байта, что равняется 32 битам и может содержать в себе 2³² значений, это значит мы можем выразить в десятичной системе исчисления от -2 147 483 647 до 2 147 483 647. Какой же тип числа используется в JS?

Читать далее

Как привести проект в чувство

Время на прочтение5 мин
Охват и читатели14K


Представьте ситуацию, вы первый день на новом для вас проекте, с чего будете начинать? Опишите свои шаги.

Так звучит один из популярных вопросов на собеседовании для фронтенд-разработчиков. Я не знаю, что хочет услышать человек, задающий этот вопрос, но у меня есть ответ на его техническую составляющую и бэклог на несколько месяцев вперед.
Читать дальше →

Давайте сделаем переиспользуемый компонент tree view в Angular

Время на прочтение6 мин
Охват и читатели11K

Я разрабатываю несколько Angular-библиотек, поэтому люблю делать простые и легко переиспользуемые решения для разработчиков. Недавно один из подписчиков в Твиттере спросил меня, как сделать компонент, который выводил бы его данные в виде иерархического дерева — tree view. 

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

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

Давайте сделаем

Браузер и числа с плавающей запятой

Время на прочтение12 мин
Охват и читатели16K

Изображение — www.freepik.com

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

Часть 1: нереальные ожидания


Баг назывался «JSON некорректно парсит 64-битные Integer»; поначалу это непохоже на проблему с плавающей запятой или браузером, но его отправили на crbug.com, поэтому меня попросили взглянуть. Проще всего воссоздать его, открыв инструменты разработчика Chrome (F12 или Ctrl+Shift+I) и вставив в консоль разработчика следующий код:

json = JSON.parse(‘{“x”: 2940078943461317278}’); alert(json[‘x’]);

Вставка неизвестного кода в окно консоли — замечательный способ оказаться взломанным, но этот код был настолько прост, я смог понять, что он не вредоносный. В отчёте о баге автор любезно указал свои ожидания и реальные результаты:
Читать дальше →

Разбор вступительных задач Школы Программистов hh.ru

Время на прочтение7 мин
Охват и читатели15K
20 октября закончился набор в Школу программистов hh. Он длился два с половиной месяца. Мы благодарим всех участников, уделивших время попытке поступить к нам. Надеемся, вам понравились задания и вы получили удовольствие от их решения!

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

image
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №438 (19 — 25 октября 2020)

Время на прочтение3 мин
Охват и читатели9.8K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

DagazServer: Как всё устроено

Время на прочтение41 мин
Охват и читатели3.1K
По всей видимости, я не самый правильный фронтедщик. Большую часть сознательной жизни я занимаюсь базами данных и немного бакендом. Любовь к настольным играм — вот что заставило меня связаться с web-разработкой. Новый, совершенно незнакомый мне язык программирования — JavaScript, я изучал по ходу дела. Допускаю, что многое из того что я делал, способно ужаснуть опытных web-разработчиков, но я стараюсь стать лучше. Этот текст не для тех, кто привык во всём следовать раз и навсегда написанным инструкциям. Но если вы любите экспериментировать, докапываться до каждой мелочи, открывать новое для себя, добро пожаловать под сень моего леса.


Проверка дочерних элементов передаваемых в мок React компонента

Время на прочтение3 мин
Охват и читатели4.9K

В преддверии старта курса «Автоматизация тестирования на JavaScript» продолжаем публиковать перевод серии полезных статей.

Это третья часть из серии о тестировании с React. В прошлой части мы рассмотрели базовый формат моков React компонентов.

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

Читать далее

Как генерировать запросы с постоянной частотой в k6 с новым API сценариев?

Время на прочтение7 мин
Охват и читатели5.7K
Привет, хабровчане. В преддверии старта курса «Нагрузочное тестирование» подготовили для вас перевод еще одного интересного материала.





Введение


Релиз v0.27.0 принес нам новый механизм выполнения и множество новых исполнителей, которые нацелены удовлетворить ваши конкретные требования. Он также включает новое API сценариев с множеством различных опций для настройки и моделирования нагрузки на тестируемую систему (system under test — SUT). Это результат полутора лет работы над печально известным #1007 пул реквестом.

Для генерации запросов с постоянной скоростью мы можем использовать constant-arrival-rate исполнителя. Этот исполнитель запускает тест с итерациями с фиксированной частотой в течение указанного времени. Это позволяет k6 динамически изменять количество активных виртуальных пользователей (virtual users — VU) во время выполнения теста с целью достижения указанного количества итераций за единицу времени. В этой статье я собираюсь объяснить, как использовать этот сценарий для генерации запросов с постоянной частотой.
Читать дальше →

Как реализовать динамическую диаграмму для Vue на основе SVG

Время на прочтение5 мин
Охват и читатели7K
Бывает, что на сайте, в корпоративной IT-системе или другом ПО нужно отображать круговые диаграммы с какими-либо данными. Например, это может быть таймер для отсчета времени или индикатор, сколько товаров продано в той или иной категории. Если это статическое изображение, конечно, можно обойтись форматом svg, png или gif. Однако, зачастую нужно показать данные в динамике – например, для мониторинга или просто для привлечения внимания пользователей, для создания красивой анимации при загрузке сайта. Делимся примером, как можно построить диаграмму из элементов SVG с помощью JS и CSS.

Читать дальше →

Ближайшие события

Базовый формат моков React компонентов

Время на прочтение7 мин
Охват и читатели9.1K

В преддверии старта курса «Автоматизация тестирования на JavaScript» продолжаем публиковать перевод серии полезных статей

В первой части этой серии статей мы рассмотрели, почему моки на самом деле полезны.

В этой части я расскажу о базовом формате маков React компонентов.

Читать далее

Настройка Webpack 5 с нуля

Время на прочтение10 мин
Охват и читатели231K


Узнайте, как использовать вебпак для сборки JavaScript, изображений, шрифтов и стилей, а также как запускать сервер для разработки

Если вы раньше использовали вебпак 4, вот некоторые отличия от 5 версии:

  • команда «webpack-dev-server» теперь выглядит как «webpack-serve»
  • отдельная установка file-loader, raw-loader и url-loader больше не требуется, вы можете использовать встроенные загрузчики ресурсов (asset modules)
  • полифилы для Node.js больше не поддерживаются, поэтому если, например, вы получили ошибку для stream, необходимо добавить пакет «stream-browserify» в качестве зависимости и { stream: «stream-browserify» } в качестве алиаса в настройки вебпака

Что такое вебпак?


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

Вебпак — это сборщик модулей. Он служит для упаковки кода для использования браузером. Он позволяет использовать последние возможности JavaScript с помощью Babel или использовать TypeScript и компилировать его в кроссбраузерный минифицированный код. Он также позволяет импортировать статические ресурсы в JavaScript.

Для разработчиков вебпак также предоставляет сервер для разработки, который умеет обновлять модули и стили на лету при сохранении файла. Инструменты командной строки, такие как «vue create» и «react-create-app» используют вебпак за сценой, но вы легко можете создать собственную настройку вебпака для указанных фреймворков.

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

TypeScript для бэкенд-разработки

Время на прочтение9 мин
Охват и читатели18K
Язык Java по-прежнему правит бал в backend-разработке. На то немало причин: быстрота, безопасность (если, конечно, закрыть глаза на null-указатели), плюс обширная, хорошо протестированная экосистема. Но в эру микросервисов и гибкой разработки стали важнее и другие факторы. В некоторых системах бывает не обязательно держать пиковую производительность и располагать надежной экосистемой стабильных зависимостей, если речь идет о простеньком сервисе, выполняющем CRUD-операции и преобразование данных. Более того, многие системы приходится оперативно строить и перестраивать, чтобы идти в ногу с быстрой итеративной разработкой фич.
Читать дальше →

Использование «глобального» await в JavaScript

Время на прочтение8 мин
Охват и читатели17K


Новая возможность, которая может изменить наш подход к написанию кода

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

Одним из предложений по улучшению JavaScript является предложение под названием «top-level await» (await верхнего уровня, «глобальный» await). Цель данного предложения состоит в превращении ES модулей в некое подобие асинхронных функций. Это позволит модулям получать готовые к использованию ресурсы и блокировать модули, импортирующие их. Модули, которые импортируют ожидаемые ресурсы, смогут запускать выполнение кода только после получения ресурсов и их предварительной подготовки к использованию.

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

Не переживайте из-за этого. Продолжайте читать. Я покажу, как можно использовать названную фичу уже сейчас.
Читать дальше →

Как делать анимацию, которая нравится всем (даже пользователю)?

Время на прочтение10 мин
Охват и читатели16K

Привет читателям Хабра! Меня зовут Сергей Кузнецов, я руковожу отделом frontend-разработки в компании AGIMA и сегодня я вам принес статью про… да, про анимацию. Знаю, на этут тему здесь не писал только ленивый. Знаю, сказать что-то новое об анимации сложно. И все-таки надеюсь, что эта статья окажется для многих полезной, а для кого-то — даже интересной.


Итак, начнем.
В наши дни анимацию используют все разработчики — к месту и не к месту. И анимация, использованная не к месту, может сыграть с сайтом злую шутку — вместо «запланированного» интереса со стороны пользователя вызвать скуку, непонимание и даже отторжение. Вот как раз о том, как правильно использовать анимированные элементы, мы и поговорим в этой статье.

Читать дальше →

Элементарный автоматический слайдер на основе библиотеки RevolveR: 10 строчек кода

Время на прочтение3 мин
Охват и читатели3.3K
В кой-то веки, году в 2013, я постепенно перестал использовать jQuery в пользу native ECMAScript. У меня ни осталось ни каких инструментов, сахарного API и нужных в повседневной верстке плагинов. Создавать код библиотеки пришлось с самого нуля и она постепенно обзавелась всем необходимым для быстрой и комфортной работы. У меня не было даже слайдера, а идея не брать jQuery и любые другие библиотеки привела к созданию своей кодовой микро базы.

Rotor by RevolveR Labs
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №437 (12 — 18 октября 2020)

Время на прочтение3 мин
Охват и читатели9.6K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →