JavaScript заметки
8.58K subscribers
2.74K photos
4 videos
1.26K links
Регулярные заметки по практическому JavaScript. Обучащию посты позволят прокачать навыки во Frontend-разработке.

Можно почитать пока компилируется проект :)

Сотрудничество: @noname_media

Канал на бирже: telega.in/channels/notesjs/card?r=Wj7h1mbl
Download Telegram
Использование eval для выполнения кода в глобальной области видимости

eval может создавать переменные в глобальной области видимости. В данном случае создаётся глобальная переменная globalVar.

#полезное
Что такое react-afc

react-afc - библиотека для более простого (чем в простом react) уменьшения количества ненужных ререндеров дочерних компонентов.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью
1
Ограничение области видимости eval с помощью функции

eval может изменять переменные в текущей области видимости. В данном случае он изменяет значение локальной переменной x.

#полезное
👍1
Один компонент, 20+ фич, A/B-тесты: Поможет ли машина состояний?

Сталкивались ли вы с проблемой возникновения багов из-за пересечения включенных фичей в приложении? Или, возможно, была необходимость одновременно проводить большое число A/B-экспериментов в одном компоненте? 

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью
Использование eval для выполнения асинхронного кода

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

#полезное
👍1
Как декораторы могут упростить разработку веб-форм

В статье я буду писать о подходе, использующем библиотеку MobX. Так что если вы в своих проектах её не используете, статья может быть не так полезна. Но вы можете рассматривать её, как возможный источник вдохновения по тому, как можно разрабатывать формы.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью
👍1
Использование eval для выполнения кода в контексте объекта

eval может выполняться в контексте объекта с помощью call. В данном случае this внутри eval ссылается на объект context.

#полезное
👍2
Что быстрее: Animated + useNativeDriver или Reanimated?

В этой статье попробуем разобраться, что же всё-таки работает быстрее: React-Native-Reanimated или Animated + useNativeDriver: true.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью
Работа с графикой: использование библиотеки Canvas для рисования и визуализации данных

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

Canvas - это элемент HTML5, который позволяет рисовать графику с помощью JavaScript. Он предоставляет API для создания и управления контекстом рисования, на котором можно рисовать линии, фигуры, текст и многое другое.

В данном примере мы получаем контекст рисования Canvas с помощью метода getContext(). Затем мы используем методы контекста, такие как fillRect() для рисования прямоугольника, stroke() для рисования линии и fillText() для рисования текста.

Мы также можем устанавливать различные свойства контекста, такие как цвет заливки (fillStyle), цвет обводки (strokeStyle), толщина линии (lineWidth) и шрифт (font).

#полезное
👍21
Один компонент, 20+ фич, A/B-тесты: Поможет ли машина состояний?

Сталкивались ли вы с проблемой возникновения багов из-за пересечения включенных фичей в приложении? Или, возможно, была необходимость одновременно проводить большое число A/B-экспериментов в одном компоненте? 

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью
Работа с локализацией: перевод и форматирование текста на разных языках

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

Для перевода текста на разные языки в JavaScript можно использовать объект Intl, который предоставляет функциональность для локализации. С помощью объекта Intl можно форматировать числа, даты, валюты и другие типы данных в соответствии с правилами языка и региона.

В данном примере мы создаем объект Intl с помощью конструктора new Intl.NumberFormat(). Мы указываем язык и регион (в данном случае 'en-US' для английского языка в США) и опции форматирования (в данном случае стиль 'currency' и валюту 'USD').

Затем мы используем метод format() объекта Intl для форматирования числа amount в соответствии с указанными опциями. В данном примере мы форматируем число в денежный формат.

#полезное
👍2
Как мы создаём Squadus. Реализуем «прыжок к сообщению» в мобильной версии

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

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью
Рекурсия и оптимизация рекурсивных функций

В первой части кода есть простая рекурсивная функция factorial, которая вычисляет факториал числа n. Она вызывает себя с аргументом n - 1, пока n не станет меньше или равно 1.

Во второй части кода представлена оптимизированная версия функции factorialMemoized, которая использует мемоизацию. Мемоизация - это техника, при которой результаты предыдущих вызовов функции сохраняются в памяти и возвращаются в случае повторного вызова с теми же аргументами. В данном случае, мы используем объект memo для хранения результатов предыдущих вызовов factorialMemoized. Если результат уже вычислен для конкретного n, мы возвращаем его из memo, иначе вычисляем и сохраняем в memo.

Таким образом, оптимизированная версия factorialMemoized более эффективна при вычислении факториала для больших чисел, так как избегает переполнения стека вызовов, и вычисляет результаты только один раз для каждого n.

#полезное
👍2
Как типизировать Vuex Store

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

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью
👍1
Работа с локальным хранилищем

localStorage позволяет хранить данные на стороне клиента (в браузере). Методы setItem() используются для записи данных, getItem() для чтения данных и removeItem() для удаления данных из локального хранилища.

#полезное
1👍1
Как декораторы могут упростить разработку веб-форм

В статье я буду писать о подходе, использующем библиотеку MobX. Так что если вы в своих проектах её не используете, статья может быть не так полезна. Но вы можете рассматривать её, как возможный источник вдохновения по тому, как можно разрабатывать формы.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью
Сортировка массивов объектов

В примере мы создаем массив объектов products, содержащий информацию о различных продуктах. Затем мы используем метод sort() для сортировки этого массива по полю price в порядке возрастания, используя функцию sortByPriceAscending в качестве функции сравнения. Вы можете создать аналогичные функции для сортировки в порядке убывания или для сортировки по другим полям объектов.

#полезное
👍2
Мои первые шаги в создании браузерных 2D игр на чистом JavaScript + Canvas

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

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью
Использование JavaScript Generators для ленивой загрузки данных

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

#полезное
👍21
Обработка событий в JavaScript: всплытие, перехват, делегирование и распространение событий

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

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью