5 игр-тренажеров для прокачки фронтенда 🎮

Осваивать технологии легче в игровой форме. Парочка игр уже были в предыдущих постах — а вот ещё дополнение к ним:

Flexbox Froggy 🐸
Если хотите прокачать Flexbox, попробуйте сыграть за лягушек и расположить их по нужным местам на пруду. Отличная практика на flex-direction, justify-content и другие свойства!
🔗 https://flexboxfroggy.com/

Grid Garden 🌱
А вот тренажёр для CSS Grid: расставляем грядки, используя grid-template-columns, grid-area и другие свойства. Отличный способ освоить сетки в CSS.
🔗 https://cssgridgarden.com/

CSS Diner 🍽️
Для тренировки селекторов CSS идеален CSS Diner! Игра помогает разобраться в основах селекторов и понять, как выбирать элементы в DOM.
🔗 https://flukeout.github.io/

CodeCombat ⚔️
Эта игра для тех, кто хочет развить навыки программирования, включая JavaScript. Сражения с монстрами и решения головоломок в игре требуют от вас писать код. Особенно полезно для практики базового JS!
🔗 https://codecombat.com/

JavaScript 30 📆
Не совсем игра, но челлендж, где за 30 дней вы создадите 30 небольших проектов, каждый из которых оттачивает какой-то конкретный аспект JS. Подходит для продвинутых новичков и тех, кто хочет улучшить навыки JS.
🔗 https://javascript30.com/

Coderoll | Frontend | #Тренажёр

Вопрос с собеседования:

❓Что такое замыкания?

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

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

Coderoll | Frontend

Vite (если вдруг вы ещё не работали с ним — обязательно посмотрите)

Vite — это невероятно быстрый инструмент сборки интерфейса, обеспечивающий работу веб-приложений нового поколения. Обеспечивает молниеносную скорость благодаря использованию ES-модулей. Поддерживает TypeScript, Vue, React и многие другие фреймворки.

👀Попробовать

Coderoll | Frontend #vite

❓Как объединить массивы?

1 - Можно использовать метод concat()
2 - Можно использовать spread оператор

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

Coderoll | Frontend

👩‍💻👩‍💻 Как выглядит алгоритм гномьей сортировки на JavaScript?

Алгоритм находит первое место, где два соседних элемента стоят в неправильном порядке и меняет их местами

const gnomeSort = (arr: number[]): number[] => {
  if (arr.length <= 1) {
    return arr
  }

  let i: number = 1

  while (i < arr.length) {
    if (arr[i - 1] <= arr[i]) {
      i++ //increment index if sub-array[0:i] already sorted
    } else {
      ;[arr[i], arr[i - 1]] = [arr[i - 1], arr[i]] //swapping two numbers
      i = Math.max(1, i - 1) //go back to the previous index to check the swapped number
    }
  }
  return arr
}

Coderoll | Frontend

👩‍💻 Используем принципы “Чистого кода” в контексте JavaScript

Функции

Функции должны делать что-то одно

❗️ Это самое важное правило в программной инженерии

Когда функции делают больше, чем одно, их сложнее составлять, тестировать и рассуждать о них

Когда вы можете изолировать функцию только для одного действия, ее можно легко рефакторить (переписывать, исправлять), и ваш код будет читаться намного чище

Coderoll | Frontend

Вопрос с собеседования:

❓Для чего используют замыкания?

1.Использование в качестве приватных переменных

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

3.Работа с асинхронным кодом- для сохранения контекста при обработке асинхронных операций, таких как обработчики событий или колбэки.

4.Мемоизация - сохранения результатов выполнения функций для оптимизации времени выполнения и уменьшения количества повторных вычислений.

5.Работа с коллбэками - для передачи контекста и данных в коллбэки, обеспечивая безопасный доступ к данным.

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

Coderoll | Frontend