JavaScript заметки

Асинхронные запросы с использованием fetch() fetch() используется для отправки асинхронных HTTP-запросов. В примере мы отправляем запрос к удаленному серверу, ожидаем ответ в формате JSON и выводим данные или обрабатываем ошибку. #полезное

Infinite scroll + Virtualization на примере ReactJS + RTK Query На сегодняшний день любое уважающее себя предприятие, будь то магазин строительных товаров или компания по предоставлению услуг в сфере бизнеса, все они стремятся «выложить» свои товары и услуги в интернет. Это и понятно – мы живем в век бурно развивающихся технологий и доступ в интернет имеет более 65% населения мира, а к 2025 году это число увеличится до 6.54 млрд. Так, о чем я, всех их нужно обслуживать, всем им нужно предлагать услуги, товары и т.д. Как говорится: «На вкус и цвет – товарища нет» и правда сколько людей – столько мнений, а в нашем случае товаров и услуг. На фоне этого возникает резонный вопрос: «А как все это отобразить у меня на сайте, чтобы пользователь не ждал до следующего года загрузки страницы сайта, когда к тому времени успеют появиться еще товары, которые необходимо будет подгрузить?». #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

​​7 дней бесплатного обучения frontend-разработке! Организовали для тебя бесплатный интенсив по frontend-разработке с практикой и куратором. Что будет: 1️⃣ Создание веб-сайта на HTML и CSS Мы научим тебя создавать стильные и функциональные веб-страницы с использованием современных технологий. 2️⃣ Оживление страницы с помощью JavaScript Узнаешь, как добавить интерактивность и динамичность в свои проекты. 3️⃣ Использование фронтенд-фреймворка Angular Узнаешь, как использовать этот мощный инструмент для создания масштабируемых и эффективных веб-приложений. 4️⃣ Подключение Backend и загрузка сайта на хостинг Мы научим тебя основам работы с Backend'ом и покажем, как развернуть проект на хостинге. 5️⃣ Советы по доработке проекта Получишь советы от опытных разработчиков, чтобы улучшить свой проект и достичь более высокого уровня качества. 🔥 А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова. 👉 Участвуй бесплатно Реклама. ИП Чернова О. А., ИНН:771399721044, erid:LjN8Jwch2

Работа с массивами и метод .map() Метод .map() применяет указанную функцию к каждому элементу массива и создает новый массив, содержащий результаты операции. В этом примере мы удваиваем каждое число из исходного массива. #полезное

Фонетический словарь. Пет-проект в полезное приложение У меня есть хобби — изучение английского языка, и последнее время я увлекся фонетикой британского английского языка, но почти все словари дают транскрипцию «‎Королевского английского», на котором говорят, по данным Гугла, около 3 процентов жителей Соединённого Королевства. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Работа с обещаниями Обещания (Promises) используются для работы с асинхронными операциями и управления обработкой успеха и ошибок. В этом примере мы создаем обещание, которое разрешается (resolve) через 2 секунды с успешным результатом. #полезное

Как декораторы могут упростить разработку веб-форм В статье я буду писать о подходе, использующем библиотеку MobX. Так что если вы в своих проектах её не используете, статья может быть не так полезна. Но вы можете рассматривать её, как возможный источник вдохновения по тому, как можно разрабатывать формы. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

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

Кулинарный гид по Vue.js: всё о props В этой статье разберемся, как frontend-разработчику готовить на «кухне» props. Выбирайте подходящий уровень сложности: джуны-поварята смогут лучше разобраться в работе и применении props на фреймворке Vue.js, а еще мы затронем тему валидации. Для мидлов и более опытных специалистов — настоящих шеф-поваров мы приготовили продвинутые кулинарные техники props, где можно освежить в памяти некоторые детали или решить проектную проблему, если замылился глаз.  #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Стрелочные функции и их особенности В данном примере мы создали две функции: обычнаяФункция и стрелочнаяФункция, которые выполняют сложение двух чисел x и y. #полезное

Как типизировать Vuex Store В этой статье мы поймем, нужно ли вам типизировать Vuex Store или нет, и если вы достаточно отчаянны, поймем, как его типизировать, чтобы не погибнуть. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

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

Heretic: full stack фреймворк на основе Marko.js В последнее время вышло так, что я по неведомой причине стал часто заниматься популяризацией Marko.js, декларативного и реактивного языка разметки, который разрабатывается eBay. С одной стороны, это связано с тем, что Marko незаслуженно часто обходят стороной, хотя он позволяет делать из коробки делать многое из того, что не получится сделать на мейнстримовых фреймворках. С другой стороны, это действительно классно, когда можно использовать обычный HTML, при необходимости расширяя его синтаксисом Marko (вроде условных операторов и циклов). Одним словом, если вы еще не видели, что это такое - посмотрите, возможно, вам это очень понравится. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

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

Функции высшего порядка и их использование Функции высшего порядка в JavaScript - это функции, которые могут принимать другие функции как аргументы или возвращать их как результат. Они являются мощным инструментом для абстракции и повторного использования кода. Рассмотрим пример функции высшего порядка, которая принимает функцию обратного вызова и применяет ее к каждому элементу массива В этом примере forEach - это функция высшего порядка, которая принимает массив arr и функцию обратного вызова callback. Она итерирует по элементам массива и вызывает callback для каждого элемента. Функция printItem представляет собой функцию обратного вызова, которая просто выводит элемент в консоль. Затем мы создаем массив numbers и используем forEach, чтобы применить функцию printItem к каждому элементу массива. Результатом будет вывод всех элементов массива в консоль. #полезное

React 18: что поменялось React — одна из самых популярных JavaScript-библиотек для создания пользовательских интерфейсов. В её новой версии произошли значительные изменения, и сейчас я расскажу про самые важные. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Работа с файлами: загрузка, чтение и запись файлов с помощью JavaScript В данном примере мы используем различные методы и события для загрузки, чтения и записи файлов. Для загрузки файла мы добавляем обработчик события change на элемент input type="file". Внутри обработчика мы получаем загруженный файл с помощью event.target.files[0] и выводим его в консоль. Для чтения файла мы создаем объект FileReader и добавляем обработчик события load. Внутри обработчика мы получаем содержимое файла с помощью event.target.result и выводим его в консоль. Затем мы вызываем метод readAsText() объекта FileReader, чтобы начать чтение файла. Для записи файла мы создаем текстовое содержимое с помощью переменной fileContent. Затем мы создаем объект Blob с помощью содержимого и указываем тип файла. Мы создаем URL объекта Blob с помощью URL.createObjectURL() и создаем ссылку для скачивания файла. Затем мы автоматически кликаем по ссылке с помощью link.click(), чтобы начать загрузку файла. #полезное

Как мы создаём Squadus. Реализуем «прыжок к сообщению» в мобильной версии Весной этого года мы выпустили Squadus — цифровое рабочее пространство для компаний любого масштаба. Решение позволяет общаться в чатах, проводить конференции, совместно работать над документами и автоматизировать типовые действия с помощью ботов. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

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

Как добавить несколько товаров в Shopify корзину одним кликом? Недавно я писал конфигуратор в Shopify и решил поделиться тем, как добавить несколько товаров в Шопифай корзину. Я находил не так много материалов по этому вопросу, тем более на русском языке. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью