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 | #Тренажёр
Осваивать технологии легче в игровой форме. Парочка игр уже были в предыдущих постах — а вот ещё дополнение к ним:
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 | #Тренажёр
Please open Telegram to view this post
VIEW IN TELEGRAM
tRPC
Полноценный инструмент для работы с API без необходимости в REST или GraphQL. Позволяет напрямую вызывать серверные функции из клиента с полной поддержкой TypeScript.
👀 Попробовать
Coderoll | Frontend
Полноценный инструмент для работы с API без необходимости в REST или GraphQL. Позволяет напрямую вызывать серверные функции из клиента с полной поддержкой TypeScript.
👀 Попробовать
Coderoll | Frontend
Swiper
Самый популярный слайдер для веб-приложений. Подходит для мобильных и десктопных интерфейсов, поддерживает горизонтальную и вертикальную прокрутку, эффекты и кастомизацию.
👀 Попробовать
Coderoll | Frontend
Самый популярный слайдер для веб-приложений. Подходит для мобильных и десктопных интерфейсов, поддерживает горизонтальную и вертикальную прокрутку, эффекты и кастомизацию.
👀 Попробовать
Coderoll | Frontend
Вопрос с собеседования:
❓ Что такое замыкания?
Это функция, у которой есть доступ к области видимости, сформированной внешней по отношению к ней функции даже после того, как эта внешняя функция завершила работу.
Это значит, что в замыкании могут храниться переменные, объявленные во внешней функции и переданные ей аргументы.
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
Это значит, что в замыкании могут храниться переменные, объявленные во внешней функции и переданные ей аргументы.
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
Vite (если вдруг вы ещё не работали с ним — обязательно посмотрите)
Vite — это невероятно быстрый инструмент сборки интерфейса, обеспечивающий работу веб-приложений нового поколения. Обеспечивает молниеносную скорость благодаря использованию ES-модулей. Поддерживает TypeScript, Vue, React и многие другие фреймворки.
👀 Попробовать
Coderoll | Frontend #vite
Vite — это невероятно быстрый инструмент сборки интерфейса, обеспечивающий работу веб-приложений нового поколения. Обеспечивает молниеносную скорость благодаря использованию ES-модулей. Поддерживает TypeScript, Vue, React и многие другие фреймворки.
Coderoll | Frontend #vite
Please open Telegram to view this post
VIEW IN TELEGRAM
❓Как работает this в JavaScript?
В глобальной области: this ссылается на window (в браузере) или global (в Node.js).
В методах объектов: this ссылается на объект, в котором вызван метод.
В стрелочных функциях: this берется из внешнего контекста.
Ставь ❤️ если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
Ставь ❤️ если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
База бесплатных API для ваших пет-проектов и не только
Игры, погода, база персонажей Звёздных войн, финансы и ещё куча других тем
По каждому API можно посмотреть рейтинг работоспособности
Посмотреть сайт
Coderoll | Frontend
Игры, погода, база персонажей Звёздных войн, финансы и ещё куча других тем
По каждому API можно посмотреть рейтинг работоспособности
Посмотреть сайт
Coderoll | Frontend
2 - Можно использовать spread оператор
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
Animista
Коллекция анимаций CSS с готовыми пресетами и возможностью настройки. Поможет в добавлении анимаций без написания сложного CSS.
👀 Попробовать
Coderoll | Frontend
Коллекция анимаций CSS с готовыми пресетами и возможностью настройки. Поможет в добавлении анимаций без написания сложного CSS.
👀 Попробовать
Coderoll | Frontend
❓ Что такое let и const? В чём их отличие от var?
Ответ:
let и const — это современные способы объявления переменных, добавленные в ES6. Они имеют блочную область видимости (block scope), в отличие от var, которая имеет функциональную область видимости. Переменные, объявленные через const, не могут быть переопределены после инициализации.
Ставь ❤️ если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
Ответ:
Ставь ❤️ если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
❓ Что делает Object.freeze?
Object.freeze замораживает объект, т.е нельзя добавить, удалить или изменить свойства
Подходит для защиты конфигураций и констант.
Ставь ❤️ если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
Ставь ❤️ если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
❓ Что такое Callback Hell?
Callback Hell — это ситуация, когда код становится трудно читаемым и поддерживаемым из-за глубокой вложенности коллбэков. Это часто происходит при работе с асинхронными операциями. Проблему можно решить с помощью Promises или Async/Await.
Ставь ❤️ если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
Ставь ❤️ если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
Улучшенная обработка асинхронных операций в React 19
В статье вы увидите обзор ключевых нововведений в React 19: Actions, useTransition, Server Components и другие инструменты для улучшения производительности и упрощения разработки.
👀 Читать
Coderoll | Frontend | #статьи
В статье вы увидите обзор ключевых нововведений в React 19: Actions, useTransition, Server Components и другие инструменты для улучшения производительности и упрощения разработки.
👀 Читать
Coderoll | Frontend | #статьи
❓ Что такое Event Loop и как он работает?
Ответ:
Event Loop — это механизм, который управляет потоком выполнения кода в JavaScript, обеспечивая асинхронность. Он проверяет Call Stack и очереди задач (например, микрозадачи и макрозадачи) и выполняет их в нужном порядке.
Ставь ❤️ если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
Ответ:
Ставь ❤️ если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
Вопрос с собеседования:
❓ Для чего используют замыкания?
1.Использование в качестве приватных переменных
2.Каррирование - для создания новых функции, частично применяя аргументы к уже существующей функции.
3.Работа с асинхронным кодом- для сохранения контекста при обработке асинхронных операций, таких как обработчики событий или колбэки.
4.Мемоизация - сохранения результатов выполнения функций для оптимизации времени выполнения и уменьшения количества повторных вычислений.
5.Работа с коллбэками - для передачи контекста и данных в коллбэки, обеспечивая безопасный доступ к данным.
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
2.Каррирование - для создания новых функции, частично применяя аргументы к уже существующей функции.
3.Работа с асинхронным кодом- для сохранения контекста при обработке асинхронных операций, таких как обработчики событий или колбэки.
4.Мемоизация - сохранения результатов выполнения функций для оптимизации времени выполнения и уменьшения количества повторных вычислений.
5.Работа с коллбэками - для передачи контекста и данных в коллбэки, обеспечивая безопасный доступ к данным.
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
Preact – альтернатива React, которая весит 3KB
Если у тебя есть проблемы с размером бандла в React-проекте, попробуй Preact. Он совместим с React API, но весит всего 3 KB!
👀 Попробовать
Coderoll | Frontend
Если у тебя есть проблемы с размером бандла в React-проекте, попробуй Preact. Он совместим с React API, но весит всего 3 KB!
👀 Попробовать
Coderoll | Frontend