Наконец-то осень - ГалЛа - Галина Ларина & ИИ
Трудовой год позади - надо навести порядок в том, что он подарил, да и с собой разобраться.
Трудовой год позади - надо навести порядок в том, что он подарил, да и с собой разобраться.
Привет, Пикабу!
Решил рассказать, как я делал свой маленький проект — злит.рф часть 2.
Это сайт, где можно просто написать, что тебя раздражает, и люди голосуют:
“😡 Злит” или “🙂 Не злит”.
Никаких аккаунтов, токсичности и рекламы — просто выговориться и полегчало.
________________________________________
💡 Откуда идея
Все вокруг чем-то недовольны — операторы связи, доставка, бюрократия, цены, новости.
А иногда просто хочется сказать “достало” и не устраивать драму.
Так родилась идея сделать сайт, где можно вылить злость в безопасное место, и другие либо поддержат, либо скажут, что “ну не злит”.
________________________________________
⚙️ Как всё начиналось
открыл VS Code и набросал форму:
<textarea placeholder="Напиши, что тебя злит..."></textarea>
<button>Добавить</button>
Добавил JS — чтобы посты сохранялись, капча, лайки/дизлайки, рейтинг.
Всё без фреймворков, просто fetch() и немного PHP на сервере.
Когда стало слишком много повторяющегося кода, я вынес всё в функции — вроде renderPost() для вывода поста.
Вот её короткая выжимка:
function renderPost(p) {
const div = document.createElement('div');
div.innerHTML = `
<div class="meta">${p.time} · Рейтинг: ${p.likes - p.dislikes}</div>
<div class="text">${p.text}</div>
<button>😡 ${p.likes}</button> <button>🙂 ${p.dislikes}</button>
`;
return div;
}
Да, HTML прямо внутри JS — не самое красивое решение, но зато удобно быстро собирать динамический контент.
По сути, это шаблон, который браузер рендерит на лету.
А ещё так проще вставлять данные из сервера, чем гонять куски через innerHTML в разных местах.
________________________________________
📦 Файлы и структура проекта
Проект небольшой, поэтому структура минималистичная:
/index.php — главная страница
/api.php — обработчик запросов (добавить пост, голосовать и т.д.)
/js/main.js — логика, fetch, отрисовка постов
/css/style.css — стили
/favicon.png — иконка сайта
/manifest.json — манифест для web-приложения
/service-worker.js — офлайн и установка на телефон
________________________________________
📱 Zlit как web-приложение (PWA)
Хотелось, чтобы сайт можно было установить на телефон прямо из браузера, как приложение.
Для этого добавил:
• manifest.json — с описанием и иконками
• {
• "name": "Zlit.рф",
• "short_name": "Zlit",
• "start_url": "/index.php",
• "display": "standalone",
• "icons": [
• { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
• { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
• ]
• }
• service-worker.js — чтобы кэшировать странички и показывать офлайн-версию.
Теперь, если зайти с Android-браузера, можно нажать “Установить на экран” — и сайт превращается в полноценное приложение.
________________________________________
🎨 Логотип и визуал
Лого сделал сам — точнее, сгенерировал в Яндекс.AI.
Загрузил промт “эмоциональный минималистичный смайлик злости в красно-оранжевых тонах”, получил PNG, чуть подправил иконку в Figma и сохранил несколько размеров для PWA.
________________________________________
🧭 Манифест проекта
Всё просто:
Злит.рф — это место, где можно безопасно высказать раздражение.
Без политики, без хейта, без споров.
Просто написать, что злит, и увидеть, что ты не один.
________________________________________
🧠 Немного аналитики
После запуска я подключил Яндекс.Метрику — чтобы понять, кто реально заходит, какие страницы открывают, какие посты вызывают больше эмоций.
Оказалось, больше всего злит — поведение служб доставки и ценники 😅.
________________________________________
🚀 Что дальше
Хочу добавить авторизацию, чтобы можно было подписываться на авторов и комментировать без спама.
А пока просто радуюсь, что сайт живёт, и люди туда заходят писать не только “что злит”, но и “что отпустило”.
________________________________________
Ссылка: https://злит.рф
Хороводная-плясовая. Вошла в Альбом Русь-матушка. Пригодится для проведения праздников, гуляний и как фоновая для застолья.
Трек обрезан на 3-й минуте.
Полную версию в лучшем качестве WAV слушайте бесплатно на Bandcamp: Fenix4625.bandcamp.com
Песни в соавторстве: https://music.yandex.ru/artist/24455888
Проза.ру: Галина Ларина: http://proza.ru/avtor/unitra7
(политика, эзотерика, музыка (гайды), история рода, рассказы, стихи, юмор, Судоку-гайд и др.)
Каждый день кто-то раздражает — новости, операторы связи, чиновники, соседи с перфоратором в субботу.
Хочется выговориться, но не ссориться.
Так появилась идея — сделать место, где можно просто сказать:
“Вот что меня злит.”
Я не программист в классическом смысле, просто люблю возиться с кодом.
Начал с формы и textarea — написал пару строк на HTML и JS.
Потом подумал: а было бы круто, если бы люди могли голосовать — “злит” или “не злит”.
Посты с рейтингом, капча, счётчик символов — всё добавлял по чуть-чуть.
Когда-то я попросил помощи у нейросети — просто спросил, как сделать красивый счётчик символов.
А дальше закрутилось.
В целом вышло где-то 2.5к строк кода, 14 файлов всего, 3 js файла с основными скриптами и 1 css файл с стилями к страницам, 10 php страниц что-бы разбросать функции ну и собственно говоря 5 страниц для посещения.
Простая авторизация, база mysql.
ИИ подкинул идеи, помог с анимацией placeholder’а, со структурой базы, с тем, чтобы всё выглядело аккуратно.
По сути, я только ставил задачи, но как будто с умным напарником, который не спит и не ноет.
Теперь на злит.рф можно написать, что тебя злит —
например: “курьер обещал через 10 минут, а приехал через два часа”,
или “билет купил, а концерт отменили без возврата”.
Люди читают, жмут “😡 Злит” или “🙂 Не злит”,
и из этих реакций рождается рейтинг.
Топ злитов — это срез народного раздражения,
а комментарии иногда превращаются в добрые мини-форумы поддержки.
Сайт простой, без лишнего пафоса, без рекламы.
Просто пространство, где можно выдохнуть.
Иногда достаточно просто написать — и становится легче.
В планах было-бы здорово добавить интерактивную карту России где отображались бы настроения.
В целом приятный опыт, программирование вышло на какой-то автоматизированный уровень. Использовал ChatGPT
Если есть идеи, буду рад что-то добавить, хотя это скорее просто забить свободное время.
Есть мнение, что жизнь - это школа, которая учит нас достойно преодолевать препятствия.
В нашем ритме жизни, если есть возможность, иногда просто нужно остановится, закрыть глаза, сделать несколько глубоких вдохов, попробовать отключится от внешних раздражителей, что бы перезарядить свою батарейку, и бежать дальше.
Предлагаю серию коротких видео зарисовок для возможности перезагрузить голову. И да, можно со звуком.
Сделайте паузу. Вдохните покой. Выдохните суету.
Больше контента на t.me/Russische_Melancholie