Web-программирование

-Ну нам же делала серьёзная контора, как же так?

Но мне хлеб конечно, грех жаловаться.

Вообще о скорости загрузки и работы. Сайт должен грузится мгновенно, каждая доля секунды -это потеря потенциального клиента, каждое ожидание в интерфейсе - это негатив и не купленный товар.

Еще в 2006 году Amazon обнаружила, что каждые 100 мс дополнительного времени загрузки страницы стоят им 1% продаж. На тот год 1% для них это около 100 лямов баксов. Но да, вы продолжайте топить за бесплатные CMS или овердорогой битрикс, уговаривая себя, что вам это сэкономило кучу бабла.

Хоть я и не фанат PHP, но даже на нем с прямыми руками можно запилить отличный кастом.

Вообще сравнивать ширпотреб и кастомную разработку - это как сравнивать обувь на заказ с обувью с рынка. И то и то выполняет свои функции, но есть нюанс..

Но бабло и экономить народ хочет сейчас, а о том, что на дистанции теряет больше, не думает. А еще не думает о том, что долгая загрузка понижает в выдаче, так SEOшники утверждают.

А вообще, если есть у тебя сайтик, народ на него ходит, а ты не знаешь насколько он медленный и кривой. Ну загрузи ты его в https://pagespeed.web.dev/ или открой LightHouse в панели разработки хрома затести и подивись результатам.
А потом вынеси тяжелые js в фон, картинкам пропиши lazy и упакуй их наконец-то в webp или вообще на svg замени где разумно.

Но с svg тоже без фанатизма, тяжелые градиенты и прочие вензеля нагружают клиента и 100 svgшек могут наглухо повесить страницу на слабом телефоне.
Есть еще более продвинутые аудит сервисы к примеру https://www.webpagetest.org/ там тоже не плохо добиться хотя-бы средних результатов

А в бэке прибей нахрен joinЫ, да и вообще поменьше к базе обращайся. Есть же redis и другие inmemory решения, популярные мелкие таблицы сбрось туда или настрой кэш нормально на БД, индексы пропиши, в общем оптимизируй хорошенько систему. И вот совсем не надо рассчитывать в базе мега карту вселенной в цикле, если у тебя в таблицах меньше 1000 строк, все в коде делай. в конце концов добавь RAM, ограничь логи не экономь на оптимизации сервисов и комфорте посетителя. Это важно.

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

failregex = ^<HOST> - - \[.*\] "GET .*\.php.* HTTP\/.*" 404 .*$

Первый раз спросил - ошибся на 404, второй раз - в тюрьму. Повторил - рецидивист, отдохни месяц. Если у тебя есть админка по пути admin, переназови как-то по другому например godmode и всех кто в /admin без спросу лезет тоже в бан типо так:

^<HOST> - - \[.*\] "GET .*\/admin.* HTTP\/.*" 404 .*$

^<HOST> - - \[.*\] "POST .*\/administrator.* HTTP\/.*" 404 .*$

Вообще почитай логи своего веб сервера, посмотри сколько там ботов крутится. Ищут wp-admin, config,.env и прочее - Они нагружают твой ресурс и ищут дыры - они тебе не нужны.

И убери root доступ по ssh, тем более если ходишь не по серту, а по паролю. Эти же боты долбят shh подбирая пароли под root а вот какое имя рэндомного sudo user - vasiia_pupkin они искать не будут. Ну и ssh jail у fail2ban включи а лучше в sshd.conf пропиши только allow IP для себя.

Усе, выговорился. Пора за работу )
Ах да, конечно повелители тильды и боги wp меня сейчас покарают😆

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

Приятного просмотра, с удовольствием отвечу на все вопросы по теме

<script src="script.js"></script>

</body>

</html>

```

### CSS

В CSS файле мы зададим размеры нашего canvas и добавим некоторые базовые стили для оформления:

```css

body {

display: flex;

flex-direction: column;

align-items: center;

font-family: Arial, sans-serif;

}

canvas {

border: 1px solid black;

margin-top: 20px;

cursor: pointer;

}

h1 {

margin-bottom: 0;

}

```

### JavaScript

JavaScript будет использоваться для управления логикой игры. Основная идея — это создать сетку, на которой пользователь сможет "строить" здания путем кликов:

```javascript

const canvas = document.getElementById('cityCanvas');

const ctx = canvas.getContext('2d');

const gridSize = 10;

const cellSize = 40; // Размер клетки на сетке

canvas.width = gridSize * cellSize;

canvas.height = gridSize * cellSize;

const cityGrid = new Array(gridSize).fill(0).map(() => new Array(gridSize).fill(0));

// Функция для отрисовки сетки

function drawGrid() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

for (let x = 0; x < gridSize; x++) {

for (let y = 0; y < gridSize; y++) {

ctx.strokeStyle = 'gray';

ctx.strokeRect(x * cellSize, y * cellSize, cellSize, cellSize);

if (cityGrid[x][y] === 1) { // Если построено здание

ctx.fillStyle = 'blue';

ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);

}

}

}

}

// Обработка клика

canvas.addEventListener('click', (event) => {

const rect = canvas.getBoundingClientRect();

const x = Math.floor((event.clientX - rect.left) / cellSize);

const y = Math.floor((event.clientY - rect.top) / cellSize);

cityGrid[x][y] = cityGrid[x][y] === 0 ? 1 : 0;

drawGrid();

});

// Начальная отрисовка сетки

drawGrid();

```

### Описание

1. **HTML**: Создает базовый каркас страницы с canvas, где будет происходить рисование.

2. **CSS**: Определяет стили для страницы и canvas, добавляя границу и стили для текста.

3. **JavaScript**: Определяет сетку города, состоящую из массивов. Пользователь может кликать на клетку сетки, чтобы "строить" (или "сносить") здания, используя двумерный массив для отслеживания состояния каждой клетки.

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