⚡️ Создаем свою игру на JavaScript ⚡️

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

🔵 Конечно, иногда приходится обходить устаревшие решения, но преимущества языка перевешивают — на чистом JavaScript можно создать практически любую программу.

🔵 В этом гайде мы покажем, как написать 2D игру «Змейка». Однако, учтите, что этот гайд не предназначен для изучения JavaScript с нуля, поэтому вам понадобятся базовые знания.

🔵 Также потребуется знание HTML (включая HTML5 canvas) и CSS, хотя основное внимание будет уделено именно JavaScript.

🔗 Ссылка на код

CodeBase | Frontend | #pet #js

⚡️ Свойство mask ⚡️

➡️ Настройка маски в CSS позволяет установить изображение в качестве маски для элемента с использованием свойства mask.

При этом можно указать:

⏺ mask-clip — область распространения маски;

⏺ mask-size — размер маски;

⏺ mask-position — позиционирование маски относительно элемента;

⏺ mask-repeat — повторение маски;

⏺ mask-composite — операцию композиции для маски и других слоев;

⏺ mask-mode — ссылку на маску;

⏺ mask-origin — начало координат маски.

CodeBase | Frontend | #css

🔥 Space Journey - это космическое путешествие, созданное с помощью CSS и JavaScript.

🔗 Ссылка

CodeBase | Frontend | #js #animate

⚡️CAPTCHA генератор ⚡️

Система автоматической генерации случайных CAPTCHA с проверкой корректности введенного кода.

Технологии: HTML, CSS, JS

🔗 Ссылка

CodeBase | Frontend | #js

⚡️ React-animations ⚡️

React-animations — это библиотека, основанная на анимациях из animate.css. Она легко осваивается и предлагает большое количество анимаций.

React-animations совместима с любыми inline-style библиотеками, которые поддерживают определение ключевых кадров анимации через объекты, такими как Radium, Aphrodite или styled-components.

Теперь давайте разберём, как это работает на примере анимации подпрыгивания.

➡️ Для начала необходимо импортировать нужную анимацию из react-animations.

const Bounce = styled.div`animation: 2s ${keyframes`${bounce}} infinite;

➡️ После создания компонента нужно обернуть любой HTML-код или компонент для применения анимации.

<Bounce><h1>Hello Animation Bounce</h1></Bounce>

➡️ Пример:

import React, { Component } from 'react';
import styled, { keyframes } from 'styled-components';
import { bounce } from 'react-animations';
import './style.css';

const Bounce = styled.div`animation: 2s ${keyframes`${bounce}} infinite;

export default class ReactAnimations extends Component {
    render() {
        return (
            <Bounce><h1>Hello Animation Bounce</h1></Bounce>
        );
    }
}

Анимация успешно работает, она проста и легко настраивается.

Для использования анимации при прокрутке можно воспользоваться отличным решением — библиотекой react-animate-on-scroll.

CodeBase | Frontend | #react

⚡️ BLUEFISH IDE ⚡️

Bluefish — это многофункциональный редактор кода.

Обладает рядом полезных функций:

🔵 проверка орфографии с учётом специфики языков программирования

🔵 автодополнение кода

🔵 поддержка сниппетов

🔵 управление проектами

🔵 автоматическое сохранение.

💡 Этот редактор идеально подходит для веб-разработчиков, но не удовлетворит потребности дизайнеров, которым необходим веб-ориентированный или WYSIWYG-редактор.

CodeBase | Frontend | #ide

⚡️ Анимация ввода - эффект анимации текстового поля для добавления задачи в список, выполненный с использованием CSS и JavaScript.

🔗 Ссылка

CodeBase | Frontend | #animate

👩‍💻 Псевдокласс :has()

Выбор элементов на основе их содержимого с использованием псевдокласса :has() открывает возможности изменения стилей элементов в зависимости от наличия определенных дочерних элементов или других условий в их содержимом.

👀 Параметры, которые принимает данный псевдокласс:

🔵 :has(selector) — применяет стили к элементу, если он содержит дочерние элементы, соответствующие селектору.

🔵 :has(:not(selector)) — применяет стили к элементу, если у него нет дочерних элементов, соответствующих селектору.

CodeBase | Frontend | #css

⚡️ Многостраничный сайт - Веб музыка

Тематика: IT, музыка
Страницы: многостраничный

🔗 Ссылка

CodeBase | Frontend | #figma

🔥 Event Loop 🔥

⚡️ Event Loop (Цикл событий) - это важный аспект асинхронного программирования, который позволяет выполнение JavaScript кода в однопоточном режиме, не блокируя другие операции. Event Loop проверяет наличие задач для выполнения и обрабатывает их поочередно.

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

➡️ Механизм работы Event Loop:

😊 Стек вызовов (Call Stack): Хранит текущее выполнение функций. Функция добавляется в стек при вызове и удаляется после завершения выполнения.

😊 Очередь обратных вызовов (Callback Queue): Когда асинхронная операция завершена, ее обратный вызов помещается в очередь.

😊 Цикл событий (Event Loop): Проверяет стек вызовов на наличие функций для выполнения. Если стек пуст, Event Loop выбирает обратный вызов из очереди и добавляет его в стек для выполнения.

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

➡️ Пример кода:

console.log('Первое сообщение');
setTimeout(() => {
console.log('Сообщение из setTimeout');
}, 0);
console.log('Второе сообщение');

➡️ В этом примере, несмотря на нулевую задержку в setTimeout, сообщения будут выведены в порядке:

Первое сообщение
Второе сообщение
Сообщение из setTimeout

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

Если понравился пост, обязательно добавь 🔥🔥🔥

CodeBase | Frontend

⚡️Панелька с анимированными иконками — Панель навигации с анимированными иконками при нажатии.

Технологии: HTML, SCSS, TS

🔗 Ссылка

CodeBase | Frontend | #animate

⚡️ WebStorm — Среда разработки веб-приложений на JavaScript, CSS и HTML. Обеспечивает быстрое программирование благодаря функциям анализа кода и автодополнения.

🔵 Широкий функционал. WebStorm предлагает широкий спектр инструментов и возможностей, включая поддержку необходимых фронтенд-разработчику языков и фреймворков.
🔵 Встроенная проверка орфографии. Сокращает время на поиск и исправление мелких ошибок.
🔵 Удобное меню настроек с горячими клавишами. Облегчает и ускоряет процесс программирования.
🔵 Умное автозаполнение кода. Ускоряет процесс разработки и снижает вероятность ошибок.

🔵 Сайт

CodeBase | Frontend | #ide

⚡️Neumorphic Rocker Switch — Стильный переключатель отображения температуры, выполненный в стиле неоморфизма.

Технологии: HTML, SCSS, TS

🔗 Ссылка

CodeBase | Frontend | #animate

🟢 Stylus — плюсы и минусы 🟢

⚡️ Stylus запустили в 2010 году как универсальный CSS-препроцессор с гибкой синтаксической структурой.

➕Плюсы

🟢Гибкий синтаксис. Позволяет опускать двоеточия, точки с запятой и фигурные скобки. Код получается более лаконичным и читаемым.
🟢Использование отступов для организации кода. Отступы для блоков улучшают структуру и визуальное восприятие кода.
🟢Расширенный функционал. Переменные, миксины и вложенные селекторы.

➖Минусы

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

CodeBase | Frontend | #Stylus

⚡️Radios With Sliding Focus — Анимированный переключатель с эффектом при наведении.

Технологии: HTML, CSS

🔗 Ссылка

CodeBase | Frontend | #animate

⚡️ Grunt — Инструмент веб-разработки, который используют для автоматизации повторяющихся задач: сжатие изображений, компиляция CSS и JavaScript, а также линтинг кода.

🔵Множество плагинов. Обширная экосистема плагинов обеспечивает гибкость в настройке.
🔵Простая интеграция. Легко интегрируется с другими инструментами и системами разработки, что делает его универсальным софтом.

🔵Сложная настройка. Настройка может вызвать затруднение у новичков из-за конфигурационного подхода.
🔵Производительность. Медленнее по сравнению с другими инструментами автоматизации.

➡️ Сайт

CodeBase | Frontend | #tool