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 создаёт переменную с именем, заданным в variableName, и присваивает ей значение value. В данном случае создаётся переменная x со значением 10.

#полезное
👍2
As const в Typescript

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

#статья

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

👉 Читать статью
👍1
Вызов функции через eval

eval вызывает функцию по её имени, заданному в functionName, и передаёт ей аргумент argument. В данном случае вызывается функция greet с аргументом "Alice".

#полезное
1👍1
Решаем задачу: как сохранить нервные клетки пользователей с помощью валидации поля ввода

В этом году я много путешествовал, поэтому нередко заполнял формы с анкетами на разные визы — в них бывало по 30—40 полей. Когда что-то шло не так, часто сайты не давали никакой обратной связи. Иногда они сбрасывали всё, что я заполнял в течение часа, если одно из полей невалидно. 
Решить проблему могла бы валидация. Это критически важная часть разработки веб-приложений, которая соотносит данные с необходимым форматом и указывает на ошибки. Также она гарантирует безопасность дальнейшей обработки этих данных. 
В этой статье мы разберёмся, как настроить валидацию поля ввода.

#статья

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

👉 Читать статью
1
Использование 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. Так что если вы в своих проектах её не используете, статья может быть не так полезна. Но вы можете рассматривать её, как возможный источник вдохновения по тому, как можно разрабатывать формы.

#статья

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

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