CodeRoll | Frontend

Все про this в JavaScript this - это выражение языка JavaScript, поведение которого очень похоже на поведение идентификатора, с той лишь разницей, что связать значение с this, мы можем только особой формой вызова normal function. В этой статье автор подробно расскажет как же работает this в js Ссылка #js

Кастомизируем VS Code для веб-разработки В статье расскажу, какие настройки и плагины VS Code использует наша команда фронтенда в KTS. Материал может быть полезен для JavaScript- и React-разработчиков, а ещё для тех, кто уже давно пользуется VS Code, но не знает о некоторых полезных плагинах и фичах для повседневного использования. Ссылка #статьи

7-дневный бесплатный онлайн-интенсив по frontend-разработке, на котором ты создашь фронтенд-проект на Angular с нуля без знаний в разработке. – Сверстаешь веб-сайт на HTML + CSS – Реализуешь функционал на JavaScript – Используешь фронтенд-фреймворк Angular – Подключишь Backend и загрузишь сайт на хостинг Будет проверка домашек от экспертов и разные бонусы! ➡️ Регистрируйся

Архитектурный паттерн Dependency Injection в React-приложении В этой статье вам расскажут про Dependency Injection в React-приложении. Рассмотрим, что из себя представляет этот архитектурный паттерн, как мы к нему пришли и какую проблему он решает. На примерах покажу, как внедрить Dependency Injection в ваш проект, какие есть плюсы и минусы. Ссылка #статьи

Детальный React. Реконсиляция, рендеры, Fiber, виртуальное дерево В сети можно найти огромное количество статей, мануалов и книг по основам React, включая официальную документацию от разработчиков. В этой статье мы не будем писать HelloWorld и изучать общеизвестные концепции. Сегодня мы заглянем под капот библиотеки и попытаемся понять, как она устроена внутри, как хранит данные, и как, на самом деле выглядит её виртуальное дерево. Ссылка #react

Создание веб-приложения с использованием микрофронтендов и Module Federation Микрофронтенды – это подход в веб-разработке, при котором фронтенд разделяется на множество маленьких, автономных частей. Эти части разрабатываются разными командами, возможно, с использованием различных технологий, но в итоге они совместно функционируют как единое целое. В данной статье мы разберём процесс разработки веб-приложения на основе подхода микрофронтендов с использованием технологии Module Federation. Ссылка #react

Вопросы и ответы для собеседования на позицию frontend-разработчик В этой статье (части) рассмотрим вопросы, связанные с великим и могучим TypeScript'ом, которые задают на собеседованиях. Пожалуйста, не заучивайте вопросы, это вредно для вашего здоровья!) Ссылка #собеседования

Итераторы и генераторы в JavaScript В языке JavaScript итераторы и генераторы являются мощными инструментами, позволяющими разработчикам контролировать итерацию и поток данных. Вместе эти функции образуют впечатляющий дуэт, позволяющий писать лаконичный, эффективный и гибкий JavaScript-код. В этой статье вы разберетесь что такое итераторы и генераторы Ссылка #js

Любимая задачка на знание React Напиши React hook с названием useFetch, который получает на вход URL для загрузки и возвращает полученные данные. Для загрузки данных можно использовать любое API, даже собственно придуманное. Для простоты считаем, что по указанному адресу будет JSON, загружаем методом GET, никаких других методов, заголовков и типов данных не требуется. Импорты можно не писать. Если вы тоже в вечном поиске классных фронтендеров или сами часто проходите собесы - велком в эту статью Ссылка #react

👋 Всем привет, сегодня хотелось бы рассказать про метод массива под названием flatMap() FlatMap объединяет в себе функции map и метода массивов filter. Рекомендую использовать flatMap() вместо комбинации filter() и map(). В отличие от комбинации filter() и map(), flatMap делает один проход и не создает промежуточного массива 😱 Ниже будут примеры реализации⬇️ Это пример с использованием filter и map после каждого прохода по массиву будет создаваться новый объект

 numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const squaredOddNumbers = numbers
    .filter(num => num % 2 !== 0) 
    .map(num => num * num)

console.log(squaredOddNumbers); // [1, 9, 25, 49, 81]

Этот пример с использованием flatMap() и тут можем наблюдать один проход по массиву и отсутвие промежуточных массивов

 numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const squaredOddNumbers = numbers.flatMap(num => 
    num % 2 !== 0 ? [num * num] : []
);


console.log(squaredOddNumbers); // [1, 9, 25, 49, 81]

И забыл сказать что при использовании flatMap() также применяется функция flat() на каждое возвращаемое значение и тем самым поднимает вложенные массивы на 1 уровень Более подробно можете прочитать здесь, я хотел вам показать возможно не очевидный кейс использования flatMap() вместо map и filter