Дефолтные конфиги для проекта на 11ty

Создал репозиторий с дефолтными конфигами для проекта на 11ty и файловой структурой для них.

Характеристики: HTML (Nunjucks) + CSS (SCSS) + VanillaJS
Dev-режим: 11ty
Prod-режим: 11ty + gulp

Ссылка на репозиторий: https://github.com/sqlzzy/default-config-11ty-gulp

#aboutwebdev_конфиги

Медиа-запрос в SASS

Когда создавал небольшую дизайн-систему своего блога понадобилось добавить миксины медиа-запросов SASS.
Решил написать пост с описанием создания структуры миксина медиа-запроса в SASS и его вызова.

$mobile — переменная ширины экрана;
@mixin mobile-s — задаем название («mobile-s») миксина медиа-запроса;
@media (max-width : $mobile) — задаем при какой ширине экрана будут применяться стили. В данном случае, стили будут применятся при ширине экрана до 360px;
@content — блок контента. При компиляции на его место будут вставлены свойства, переданные в миксине;
@include mobile-s — вызов миксина медиа-запроса «mobile-s» в файле стилей страницы.

#aboutwebdev_css #aboutwebdev_sass_scss

Поддержка синтаксиса диапазона медиазапросов

Синтаксис диапазона медиазапросов с использованием обычных математических операторами сравнения: >, <, >= или <=, теперь поддерживается всеми популярными браузерами.

Пример: @media (360px <= width <= 720px) эквивалентен @media (min-width: 360px) and (max-width: 720px).

Ссылка: https://caniuse.com/css-media-range-syntax

#aboutwebdev_css

Подключение npm-пакета без установки

Для своего небольшого проекта не хотел устанавливать npm-пакеты. Подключил их через import в js-файле с указанием ссылки на cdn пакета.

Пример:
import axios from "https://cdn.jsdelivr.net/npm/axios@1.4.0/dist/axios.min.js"

Ссылка на сайт: https://www.jsdelivr.com

#aboutwebdev_js #aboutwebdev_рекомендация

Сервер ExpressJS + Socket.io

В голове постоянно появлялась мысль написать мультиплеерную мини-игру.
Какая же мультиплеерная игра без сервера?! Поэтому предыдущий месяц-полтора провел за изучением ExpressJS, Socket.io.

С радостью представляю свой сервер на ExpressJS + Socket.io.

Что сервер умеет:
- создавать комнаты;
- добавлять пользователей в комнату по ID-комнаты;
- обрабатывать передачу права хоста следующему игроку при выходе текущего из комнаты;
- обрабатывать передачу права хоста следующему игроку при нажатии кнопки "End" (конец раунда);
- обновлять список игроков в комнате в live-режиме;
- удаление комнаты после выхода последнего игрока;
- перенаправлять на главную страницу дубль вкладки страницы игрока.

Socket.io создает для каждой страницы свой уникальный id. С учетом этого условия, сервер сохраняет id игрока при переходе с главной страницы на страницу игрока.

Сервер станет фундаментом для создания ваших мультиплеерных мини-игр!

Ссылка на репозиторий: https://github.com/sqlzzy/socket-express-server

#aboutwebdev_личныйпроект #aboutwebdev_конфиги #aboutwebdev_опенсорс

Запуск сервера ExpressJS + Socket.io

Ссылка на репозиторий сервера: https://github.com/sqlzzy/socket-express-server

Ссылка на мой твиттер: https://twitter.com/sqlzzy

#aboutwebdev_личныйпроект #aboutwebdev_конфиги #aboutwebdev_опенсорс

Сервер ExpressJS + Socket.io. v2.0

В ближайшее время выйдет обновление сервера с новой структурой проекта, лобби комнаты и другими обновлениями.

После выхода обновления приступлю к статье про деплой сервера на сайте.

Всем кода без легаси и багов!

#aboutwebdev_личныйпроект #aboutwebdev_конфиги #aboutwebdev_опенсорс #aboutwebdev_анонс

Сервер ExpressJS + Socket.io. v2.0

С радостью представляю сервер v2.0 с нововведениями!

Вот некоторые из них:
- добавлена 404 страница;
- обновление в реальном времени списка игроков в комнате;
- отображение различных ошибок;
- новая файловая структура проекта.

Остальные нововведения можно прочитать в CHANGELOG.md

Ссылка на гитхаб проекта: https://github.com/sqlzzy/socket-express-server

Мой твиттер: https://twitter.com/sqlzzy

Всем кода без легаси и багов!

#aboutwebdev_личныйпроект #aboutwebdev_конфиги #aboutwebdev_опенсорс

Моя первая мультиплеерная игра. "Самый быстрый расшифровщик"

На основе своей платформы написал мультиплеерную игру "Самый быстрый расшифровщик".

Немного про игру:
- для начала игры нужно минимум два участника;
- три уровня сложности заданий;
- игра на время;
- режим ожидания для участников, присоединившихся после начала раунда игры;
- обновление списков игроков в реальном времени, находящихся в комнате и в раунде.

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

Ссылка на игру: https://encryption-game.sqlzzy.dev

Всем кода без легаси и багов!

#aboutwebdev_личныйпроект

Анонсы

Несколько анонсов:
1) Скоро выложу в открытый доступ (на гитхаб) код своей игры "Самый быстрый расшифровщик".
Ссылка на игру: https://encryption-game.sqlzzy.dev

2) Добавлю некоторые нововведения в платформу.
Ссылка на платформу: https://github.com/sqlzzy/socket-express-server

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

Всем кода без легаси и багов!

#aboutwebdev_личныйпроект #aboutwebdev_опенсорс #aboutwebdev_анонс

Открытый код игры "Самый быстрый расшифровщик"

Выложил код игры "Самый быстрый расшифровщик" в гитхаб: https://github.com/sqlzzy/encryption-game

Игра на писана на платформе: https://github.com/sqlzzy/socket-express-server

Ссылка на игру: https://encryption-game.sqlzzy.dev

Приятной игры!

Всем кода без легаси и багов!

#aboutwebdev_личныйпроект #aboutwebdev_опенсорс

Новый домен

Переехал на новый домен: https://sqlzzy.dev/

Игра "Самый быстрый расшифровщик" теперь размещается по адресу: https://encryption-game.sqlzzy.dev/

Всем кода без легаси и багов!

#aboutwebdev_блог

Нововведения в сервере ExpressJS + Socket.io. v2.1.0

Второй пункт из списка анонсов готов.

Нововведения в платформе:
1) создание списка игроков, находящихся в раунде;
2) отображение списка игроков в раунде;
3) отображение сообщений о статусе игры для игроков;
4) функция ожидания для новых игроков в комнате после начала раунда;
5) стили для всех страниц.

Ссылка на платформу: https://github.com/sqlzzy/socket-express-server

Всем кода без легаси и багов!

#aboutwebdev_личныйпроект #aboutwebdev_конфиги #aboutwebdev_опенсорс