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

На платформе можно найти такие проекты, как:

- MCP Panic : Текстовая игра с использованием TypeScript, где игроки спасают стартап от краха.
- Flex Box Adventure : Игра в стиле RPG для обучения CSS Flexbox, где нужно помогать королю Артуру победить злодеев.
- Grid Attack : Приключенческая игра для освоения CSS Grid, направленная на создание макетов и борьбу с демонами.

Made in HTML/CSS

Что такое всплытие событий?

Всплытие событий (bubbling phase) — это финальная фаза процесса обработки событий в JavaScript, которая происходит после того, как событие достигло целевого элемента (target phase). На этом этапе событие начинает перемещаться вверх по иерархии DOM, последовательно вызывая привязанные к родительским элементам обработчики.

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

Made in HTML/CSS

Brackets — это современный текстовый редактор, специально разработанный для веб-разработчиков. Он был создан Adobe и является бесплатным и с открытым исходным кодом.

Brackets поддерживает HTML, CSS и JavaScript, что делает его идеальным инструментом для создания веб-приложений и сайтов.

Made in HTML/CSS

Модули введение

Данная статья рассматривает эволюцию и использование модулей в JavaScript, начиная с исторического контекста и заканчивая современными возможностями.

Статья начинается с объяснения необходимости разделения кода на модули по мере роста приложений.

Приведены примеры, демонстрирующие, как экспортировать и импортировать функции и переменные между модулями. Рассматривается использование модулей в браузере с помощью атрибута <noscript type="module">.

🌐 Читать статью

Made in HTML/CSS

Что такое модули (modules) в JavaScript?

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

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

Made in HTML/CSS

Большинство JS разработчиков уже используют какие-то инструменты компоновки для своих разработок, даже если не знают или не используют этот термин. Они объединяют файлы при разработке, уменьшают код JavaScript-а, чтобы ускорить загрузку страниц и конвертировать Sass, или уменьшают количество файлов в CSS для браузера, и много чего другого. Чаще всего это разные инструменты, что есть не очень удобно.

Grunt помогает управлять всеми этими шагами в одном месте и организовать сторонние компоненты.

Made in HTML/CSS

ESLint проверяет код на синтаксические ошибки и предлагает исправления.

Конечно, в VS Code уже есть встроенная система IntelliSense, которая показывает подсказки, но ESLint больше подходит, например, если вам нужны разные настройки — для JSX, для чистого JS, для среды Node.js.

Ещё ESLinter можно встроить в систему проверки кода и перед отправкой файлов в репозиторий, чтобы ещё раз убедиться, что всё в порядке.

Made in HTML/CSS

Можете ли вы объяснить разницу между отзывчивым (responsive) сайтом и сайтом, сделанным по принципу mobile-first?

Отзывчивая и mobile-first верстки служат для того, чтобы пользователь мог пользоваться сайтом с разных устройств. Верстка подстраивается под различные размеры экрана, разрешения, контекст использования, механизмы контроля и т.д.

Отзывчивая верстка начинается с верстки десктопной версии сайта. Затем она адаптируется для меньших экранов.

Mobile-first начинается с верстки версии сайта для мобильных устройств.

Made in HTML/CSS

NetBeans IDE — это бесплатная интегрированная среда разработки с открытым исходным кодом для создания программного обеспечения в операционных системах Windows, macOS, Linux и Solaris. Она позволяет создавать веб-приложения, корпоративное, десктопное и мобильное программное обеспечение.

Made in HTML/CSS

Эта статья описывает использование свойства box-shadow в CSS для добавления теней к элементам на веб-странице. В статье рассматриваются:

- Основы свойства box-shadow: Как добавлять тени к элементам, настраивать их положение, размытие, распространение и цвет.
- Реалистичные тени: Как использовать цвета и альфа-каналы для создания более естественных теней, которые имитируют реальное освещение.
- Сравнение с drop-shadow: Различия между box-shadow и фильтром drop-shadow. и т.д.

🌐 Читать статью

Made in HTML/CSS

Что такое SOLID?

SOLID — это пять принципов объектно-ориентированного программирования:

- S (Single Responsibility): Класс должен иметь одну ответственность.
- O (Open/Closed): Классы должны быть открыты для расширения, но закрыты для изменения.
- L (Liskov Substitution): Подтипы должны заменять базовые типы без нарушения работы программы.
- I (Interface Segregation): Интерфейсы должны быть специфичными, а не общими.
- D (Dependency Inversion): Зависимости должны строиться на абстракциях, а не на конкретных реализациях.

Эти принципы помогают создавать гибкий и поддерживаемый код.

Made in HTML/CSS

Объясните разницу между inline, inline-block и block.

Block:

Начинается с новой строки.
Занимает всю доступную ширину.
Примеры: <div>, <p>.

Inline:

Не начинается с новой строки, отображается в строку с другими элементами.
Ширина и высота зависят от содержимого.
Примеры: <span>, <a>.

Inline-Block:

Отображается в строку, как inline.
Ширина и высота могут быть заданы, как у block.
Пример: используется для изображений или блоков с заданными размерами.

Эти свойства помогают управлять макетом и отображением элементов на веб-странице.

Made in HTML/CSS

Project Manager — это расширение для VS Code, которое упрощает переключение между проектами, позволяя сохранять текущие папки или рабочие области как проекты, фильтровать их по тегам и редактировать список проектов через файл projects.json

Made in HTML/CSS

Что такое UX?

UX-дизайн (User Experience) — это создание удобного и приятного для пользователя опыта взаимодействия с продуктом или сервисом.

От качества UX-дизайна зависит, какой опыт и впечатления получат клиенты от взаимодействия с сайтом. Чтобы они остались довольны, веб-ресурс должен быть понятным и логичным в использовании.

Задачи UX-дизайна включают:

исследование потребностей и проблем пользователей;
создание пользовательских сценариев;
проектирование информационной архитектуры;

Made in HTML/CSS