nazarpunk
Программирование

Подготовка

Добавлен , опубликован

XGM - Next

Содержание:

Сборка

Хаотическое развитие веба породило безумное количество сборщиков разной степени унылости. Но вендоры браузеров каждый день неустанно утверждают, что можно обойтись без них. Мы им поверим и заодно посмотрим, чего можно добиться не используя никаких систем сборки, а полагаясь только на ванильный js и css.

Компоненты

Так как мы не готовы переходить на новый стек с модным сервер рендером, то будет использоваться два вида "компонентов" - серверные шаблоны на twig чтоб рендерить видимые поисковыми машинами части сайта и Custom Elements для всего остального.

Серверная часть

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

Средства работы с кодом

Для форматирования js будем использовать ESLint настроенный таким образом:
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "curly": "off",
    "semi": ["error", "never"],
    "quotes": ["error", "single"],
    "no-unsafe-optional-chaining": "off",
    "no-console": "warn",
    "no-eq-null": "warn",
    "no-case-declarations": "off"
  }
}
Из важного, он удаляет лишние точки с запятой в конце строк и заменяет двойные кавычки на одинарные там, где это возможно. Таким образом приводит код в более единообразное состояние.
Мы знаем про Prettier но он не очень гибко настраивается, так что обойдёмся без него.

Код

Для начала напишем базовый код чтоб выбить соточки на LightHouse:
<!DOCTYPE html>
<html lang="ru">
<head>
    <title>XGM - Next</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Make XGM great again!">
    <link rel="shortcut icon" type="image/png" href="favicon.png">
</head>
<body>

<main>
    <h1>Новый дизайн XGM</h1>
</main>

</body>
</html>
Наш новый, прекрасный сайт выглядит просто замечательно:
Но это пока неважно. Вы наверно заметили, интересную аббревиатуру PWA, которая, судя по минусу не реализована.
Вот с неё то мы и начнём в следующей статье.

Содержание
28 окт 2023
  • Размещен: 28.10.2023 01:18:34
  • Создан: 28.10.2023 01:18:34
  • Обновлен: 28.10.2023 01:18:34
99
`
ОЖИДАНИЕ РЕКЛАМЫ...
0
37
  • Комментарий официального представителя Администрации сайта
    • 6 месяцев назад
    0
    А title точно не сначала текст, потом бренд? А opengraph будет? А seo descr будет? А разный lang будет? А если font size меньше 14 то meta max scale будет? А миллион favicon для микроволновок будет? А http3 будет? А websocket? А web3 будет?
    0
    29
  • Комментарий официального представителя Администрации сайта
    • 6 месяцев назад
    0
    ScorpioT1000:
    А title точно не сначала текст, потом бренд?
    Здесь смотря что чем считать. Будем расценивать бренд как XGM - Next. Ну а так да, обычно текст ставят перед брендом чтоб у юзера не было стопицот одинаковых вкладок.
    А opengraph будет?
    Будет.
    А seo descr будет?
    А это про дизайн?
    А разный lang будет?
    Обязательно, его даже в CSS завезли, грех не пощупать.
    А если font size меньше 14 то meta max scale будет?
    К сожалению, я заявил Safari, а он запрещает любые попытки предотвратить масштабирование. А костылить прехват и гашение всех тач событий не хочется.
    А миллион favicon для микроволновок будет?
    В следубщей статье про PWA.
    А http3 будет?
    В браузерах он же искаропки, дело за сервером, а я в него не умею.
    А websocket?
    Здесь опять же, всё упирается в сервер. Да и что выбрать?
    А web3 будет?
    Web3 или Web3.0?
    0
    37
  • Комментарий официального представителя Администрации сайта
    • 6 месяцев назад
    0
    Долой твиги и реквесты, даешь бутстрап прилржения из вебсокета
    0
    29
  • Комментарий официального представителя Администрации сайта
    • 6 месяцев назад
    0
    ScorpioT1000, SPA на ваниле?
    Чтобы оставить комментарий, пожалуйста, войдите на сайт.