Добавлен 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, которая, судя по минусу не реализована.
Вот с неё то мы и начнём в следующей статье.
Содержание
`
ОЖИДАНИЕ РЕКЛАМЫ...
0
ScorpioT1000
6 месяцев назад
0
А title точно не сначала текст, потом бренд? А opengraph будет? А seo descr будет? А разный lang будет? А если font size меньше 14 то meta max scale будет? А миллион favicon для микроволновок будет? А http3 будет? А websocket? А web3 будет?
0
nazarpunk
6 месяцев назад
0
ScorpioT1000:
Здесь смотря что чем считать. Будем расценивать бренд как XGM - Next. Ну а так да, обычно текст ставят перед брендом чтоб у юзера не было стопицот одинаковых вкладок.
Будет.
А это про дизайн?
завезли, грех не пощупать.
Обязательно, его даже в CSS
К сожалению, я заявил Safari, а он запрещает любые попытки предотвратить масштабирование. А костылить прехват и гашение всех тач событий не хочется.
PWA.
В следубщей статье про
В браузерах он же искаропки, дело за сервером, а я в него не умею.
- socket.io
- Centrifugo
- nginx-push-stream-module
- comet-server.com
- fanout.io
- pusher.com
Web3 или Web3.0?
0
ScorpioT1000
6 месяцев назад
0
Долой твиги и реквесты, даешь бутстрап прилржения из вебсокета
0
nazarpunk
6 месяцев назад
0
ScorpioT1000, SPA на ваниле?
Чтобы оставить комментарий, пожалуйста, войдите на сайт.