JavaScript заметки

Асинхронные HTTP-запросы с использованием современного API Fetch В примере мы используем fetch для отправки GET-запроса к удаленному серверу. Мы обрабатываем результат запроса с использованием асинхронного синтаксиса с await и async. Если запрос выполнен успешно (HTTP-код 200), мы преобразуем полученные данные в JSON и выводим их в консоль. В противном случае, мы ловим ошибку и выводим сообщение об ошибке. #полезное

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

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

Что быстрее: Animated + useNativeDriver или Reanimated? В этой статье попробуем разобраться, что же всё-таки работает быстрее: React-Native-Reanimated или Animated + useNativeDriver: true. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Работа с обещаниями (Promises) В примере мы создаем функцию fetchData, которая возвращает обещание (Promise) с задержкой. Затем мы используем методы .then() для обработки успешного выполнения и .catch() для обработки ошибок. Это позволяет более чисто и структурированно работать с асинхронными операциями, такими как загрузка данных с сервера. #полезное

Сайд эффект реактивности и апдейта компонента во Vue 3 Хочу рассказать о небольшом кейсе, связанном с работой реактивности во Vue 3. Кейс касается взаимосвязи ref/reactive, v-for/v-if, :class, функций и того, что у нас находится в <template>. Сразу оговорюсь, что под капотом не смотрел, поэтому детальных объяснений не ждите. Наоборот, хотелось бы услышать ваши мнения, сталкивались ли вы с подобными сайд эффектами. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Генерация случайных чисел В примере мы используем Math.random() для получения случайной десятичной дроби между 0 и 1. Затем мы масштабируем и округляем эту дробь, чтобы получить случайное целое число в заданном диапазоне (включая минимальное и максимальное значение). #полезное

Мои первые шаги в создании браузерных 2D игр на чистом JavaScript + Canvas Статья представляет собой перевод одного англоязычного видеоурока. Если Вы хорошо владеете английским и Вам больше нравится видеоформат подачи материала — можете посмотреть видео. В статье же я буду вставлять участки кода и стараться также подробно как и автор видео — объяснять каждый свой шаг. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

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

8 продвинутых вопросов для собеседования по JavaScript Хотите стать JS-специалистом? Тогда стоит детально разобрать ключевые вопросы для собеседования по JavaScript. Это поможет вам усвоить основные понятия и успешно ответить на другие вопросы. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

erid: LjN8KRXM4 Майские скидки!  Профессия «Фронтенд-разработчик». 🎁  Скидка до 80 900 р. Успейте получить специальное предложение до 14 мая! Научитесь программировать на языке JavaScript и создавать пользовательские интерфейсы сайтов и приложений. Уже во время обучения вы вступите в программу «Карьерный трек», чтобы найти свою первую работу в IT. Мы регулярно мониторим, какие компетенции разработчиков востребованы на рынке и строим учебную программу в соответствии с этим знанием. 📌 Пройдите 5 бесплатных уроков и поймите, подходит ли вам профессия!

Бесплатный курс по дизайну с персональным наставником от Moscow Digital Academy 💚 Узнайте больше и погрузитесь в профессию дизайнера. На курсе расскажут про 4 направления: 🧬Веб-дизайн 🧬Графический дизайн 🧬Нейросети 🧬UX/UI Учитесь в своем темпе — смотрите уроки в удобное время и в любом месте. И не забывайте про наставника, он поможет и ответит на все вопросы. А после прохождения курса вы упакуете все проекты в портфолио и получите сертификат ⚛️ Посмотрите какие работы делают наши ученики, изучите программу и регистрируйтесь на курс 🙂 Реклама. ИП Федорин В.В. ИНН 772872800267 Erid:2VtzqvVPPdS

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

Увеличиваем свою производительность в WebStorm / PhpStorm c помощью шаблонов В этой статье я хотел бы рассказать вам, как можно сократить рутинную работу написания кода, используя шаблоны для создания файлов. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Манипуляция с элементами страницы: создание, удаление и изменение HTML-элементов Манипуляция с элементами страницы - это важная часть разработки веб-приложений, которая позволяет создавать, удалять и изменять HTML-элементы динамически с помощью JavaScript. Это особенно полезно при обновлении содержимого страницы без перезагрузки. В данном примере мы создаем новый элемент div с текстом "Новый элемент" и классом "my-class". Затем мы добавляем этот элемент в конец body документа с помощью метода appendChild(). Мы также изменяем содержимое элемента с помощью свойства textContent и стилизуем его, устанавливая значение свойства backgroundColor. Через 3 секунды мы удаляем элемент с помощью метода remove(). Это демонстрирует возможность удаления элементов из документа. Таким образом, манипуляция с элементами страницы позволяет нам динамически создавать, изменять и удалять HTML-элементы, что открывает широкие возможности для создания интерактивных и динамических веб-приложений. #полезное

React + Three.js. Создаём собственный 3D шутер В современной веб-разработке границы между классическими и веб-приложениями стираются с каждым днём. Сегодня мы можем создавать не только интерактивные сайты, но и полноценные игры прямо в браузере. Одним из инструментов, который делает это возможным, является библиотека React Three Fiber - мощное средство для создания 3D-графики на основе Three.js с использованием технологии React. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Работа с JSON: сериализация и десериализация данных в JavaScript Работа с JSON является неотъемлемой частью разработки веб-приложений на JavaScript. JSON представляет собой формат обмена данными, основанный на тексте, который легко читается и создаётся как человеком, так и компьютером. Сериализация и десериализация данных в JSON являются ключевыми процессами при работе с данными в JavaScript. Сериализация - это процесс преобразования объекта или структуры данных в строку JSON, чтобы его можно было передать или сохранить. Десериализация, в свою очередь, выполняет обратную операцию - преобразует строку JSON обратно в объект или структуру данных. В данном примере мы создаем объект person, содержащий информацию о человеке. Затем мы используем метод JSON.stringify() для сериализации объекта в строку JSON. Результат выводится в консоль. Затем мы используем метод JSON.parse() для десериализации строки JSON обратно в объект. Результат также выводится в консоль. #полезное

Сообщаются ли ваши тесты? Чтобы быстро продвигаться в рабочих задачах, необходимо иметь уверенность в том, что можно вносить изменения. А уверенность в изменениях зависит от тестового покрытия. С тех пор как мы это поняли, автоматические тесты стали просто необходимы. Это привело к массовому внедрению шаблонов для старта работы. Однако начать работу недостаточно. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

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

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