Использование Spread Operator для объединения массивов или объектов

Spread Operator (оператор расширения) позволяет развертывать элементы массива или свойства объекта в другой массив или объект.

#полезное

Не бойтесь генераторов JavaScript

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

#статья

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

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

Использование Set для хранения уникальных значений

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

#полезное

Анатомия shadcn/ui

Если вы следите за новинками экосистемы JavaScript, то должны были слышать об интересной библиотеке пользовательского интерфейса (user interface, UI) под названием shadcn/ui. Вместо того, чтобы распространяться в виде пакета npm, компоненты shadcn/ui добавляются с помощью интерфейса командной строки (command line interface, CLI), который помещает исходный код компонентов непосредственно в ваш проект. Разработчик библиотеки указывает причину такого решения на официальном сайте shadcn/ui.

#статья

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

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

Использование Map для хранения пар "ключ-значение"

Map предоставляет структуру для хранения данных в виде пар "ключ-значение", где ключи могут быть любого типа.

#полезное

Валидация формы с помощью AJV, Vue.js и TypeScript

Валидация форм является важной частью frontend-разработки, которая помогает улучшить пользовательский опыт и предотвратить ошибки при отправке данных на сервер. В этой статье мы рассмотрим, как использовать библиотеку AJV совместно с Vue.js и TypeScript для создания мощной системы валидации формы.

#статья

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

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

Использование Higher-Order Functions для обработки массивов

Higher-Order Functions (функции высшего порядка) принимают или возвращают другие функции, и их использование делает код более гибким и функциональным.

#полезное

Обзор на новую CSS-in-JS либу от Facebook* – StyleX

Недавно компания Facebook* (aka Meta**) выпустила в опенсорс собственную CSS-in-JS библиотеку под названием StyleX. По заявлениям разработчиков, она отлично подходит для больших проектов и ключевым ее преимуществом является перфоманс.
В этой статье мы рассмотрим пример использования, основные функции и особенности данного решения.

#статья

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

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

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

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

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

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

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

#полезное

Сборка мусора в JavaScript

Каждый из нас, хотя бы раз, слышал о сборке мусора. Мы знаем, что где-то там работает сборщик мусора, убирая за нами ненужные объекты. Но сколько из нас знают, как он устроен под капотом?
В этой статье мы заглянем под капот этого процесса, поймем, как работает память, и изучим алгоритм сборки мусора.
Поехали убираться!

#статья

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

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

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

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

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

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

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

#полезное

Facebook выпустил новую CSS-in-JS библиотеку — StyleX

Верней оформил 5 декабря 2023 года для всех то, чем его разработчики пользуются уже давно. Позиционируется данный помощник для js-подобных фреймворков типа React, Preact, Solid, lit-html и Angular, однако оперирующие html шаблонами Vue и Svelte тоже могут задействовать StyleX, но после предварительной специальной её кастомизации.

#статья

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

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

Функции высшего порядка и их использование

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

В этом примере forEach - это функция высшего порядка, которая принимает массив arr и функцию обратного вызова callback. Она итерирует по элементам массива и вызывает callback для каждого элемента.

Функция printItem представляет собой функцию обратного вызова, которая просто выводит элемент в консоль.

Затем мы создаем массив numbers и используем forEach, чтобы применить функцию printItem к каждому элементу массива. Результатом будет вывод всех элементов массива в консоль.

#полезное

Роадмэп по современному фронтенду от KTS

Перед одним из потоков курса «Начинающий React-разработчик» мы провели вебинар, на котором рассказали, что из себя представляет современный фронтенд и какие знания нужны для востребованности на рынке труда. После вебинара мы решили написать цельный план развития во фронтенде.
Пункты развития для роадмэпа мы выбирали исходя из нашего опыта. Последовательность изучения этих тем не является твёрдой, так как у каждого свой путь и свои задачи.
Статья подойдет как для начинающих специалистов, так и для более опытных, которые хотели бы получить какой-то ориентир для дальнейшего развития.

#статья

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

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

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

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

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

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

#полезное

Сообщаются ли ваши тесты?

Чтобы быстро продвигаться в рабочих задачах, необходимо иметь уверенность в том, что можно вносить изменения.
А уверенность в изменениях зависит от тестового покрытия.
С тех пор как мы это поняли, автоматические тесты стали просто необходимы. Это привело к массовому внедрению шаблонов для старта работы.
Однако начать работу недостаточно.

#статья

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

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

Аутентификация с использованием JSON Web Tokens

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

#полезное

Redux-toolkit и переиспользование кода

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

#статья

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

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

Работа с событиями клавиатуры

JavaScript позволяет отслеживать события клавиш и реагировать на них.

#полезное

Разработка браузерных игр с использованием Phaser3, React, Typescript

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

#статья

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

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