Переход на SQLite

С самого начала данные для бота-агрегатора IT Meetups Bot записывались "по-простому" в JSON-файлах.
Решил перейти на БД SQLite. Впервые работал с SQL командами, именно в практическом плане.

По итогу:
- данные хранятся в структруированном виде;
- код сократился (удалились уже ненужные методы по поиску данных, методы парсинга и записи данных в JSON-файлы);
- проще стало смотреть различные данные через командную строку.

Прикладываю ссылку на туториал SQLite: https://www.sqlitetutorial.net/.
В туториале даются сразу методы-хелперы для работы с SQL командами: создание таблицы, вставка, удаление и обновление данных таблицы.

Будьте в курсе IT-мероприятий с IT Meetups Bot!

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

Обновления бота-агрегатора IT-мероприятий IT Meetups Bot

Вчера вышло новое обновление бота-агрегатора.

Что нового:
- возвращение на ту страницу, где находилось мероприятие;
- вернул показ мероприятий по 10 штук на одной странице;
- добавил кнопку "Поделиться" в клавиатуру взаимодействия с мероприятием;
- сообщения о том, что события больше не существует и мероприятий в выбранном городе нет;

Совсем скоро будут еще больше обновлений и новостей!

Будьте в курсе IT-мероприятий с IT Meetups Bot!

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

Скрытые возможности CSS

В мире CSS есть множество интересных и малозаметных возможностей, которые могут облегчить жизнь верстальщикам. Вот несколько фишек:

1. aspect-ratio для пропорциональных элементов

Задавать соотношение сторон для блоков стало просто с появлением свойства aspect-ratio. Раньше для этого требовались костыли с padding и дополнительными обертками.

Поддержка браузерами: 94.59%.

.element {
  aspect-ratio: 16 / 9; /* Блок всегда будет иметь пропорции 16:9 */
}

2. clamp() — идеальный контроль за размерами

Свойство clamp() позволяет установить минимальное, оптимальное и максимальное значение для размера шрифта, ширины и других параметров.

Поддержка браузерами: 96.77%.

.element {
  font-size: clamp(1rem, 2vw, 2rem); /* Размер будет адаптироваться от 1rem до 2rem */
}

3. Свойство scroll-snap для плавной прокрутки

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

Поддержка браузерами: 96.5%.

.container {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
}
.item {
  scroll-snap-align: start;
}

4. Селекторы :is() и :where() для упрощения стилей

Эти селекторы позволяют группировать правила и сокращать код, делая его более читаемым.

Поддержка браузерами:
:is() — 97.86%,
:where() — 94.91%.

:is(h1, h2, h3) {
  margin-bottom: 16px; /* Применится ко всем заголовкам */
}

А вы знали об этих возможностях CSS? Какие из них уже применяли? Делитесь мнением!

#aboutwebdev_css

Фичи и факты JavaScript

Object.is() для точного сравнения

Метод Object.is() сравнивает два значения с учётом их внутреннего представления, отличаясь от ===. Например:

   Object.is(NaN, NaN); // true
   Object.is(0, -0);    // false
   

Трюк с дескрипторами свойств

В JavaScript можно управлять доступностью, изменяемостью и перечисляемостью свойств через Object.defineProperty(). Это полезно для создания неизменяемых объектов:

   const obj = {};
   Object.defineProperty(obj, 'secret', {
     value: 'hidden',
     writable: false,
     enumerable: false,
   });
   console.log(obj.secret); // 'hidden'
   console.log(Object.keys(obj)); // []
   

Параметры функций по умолчанию могут быть функциями

В ES6 параметры по умолчанию могут зависеть от других параметров:

   function greet(name, greeting = () => `Hello, ${name}!`) {
     return greeting();
   }
   console.log(greet('John')); // 'Hello, John!'
   

Динамическое создание ключей в объектах

С помощью ES6 можно динамически задавать имена свойств:

   const key = 'dynamicKey';
   const obj = {
     [key]: 'value',
   };
   console.log(obj.dynamicKey); // 'value'

Ключевое слово void

В JavaScript можно использовать void для получения undefined независимо от значения выражения:

   console.log(void 0); // undefined
   void function() {
     console.log('No return value');
   }(); // выполняет функцию
   

Трюк с двойным побитовым НЕ (~~)

Используется для округления числа к целому вниз быстрее, чем Math.floor:

   console.log(~~4.9); // 4
   console.log(~~-4.9); // -4
   

Фактическое отсутствие Integer-типов

JavaScript использует Number, который покрывает все числовые операции, включая целые и дробные числа. Однако с BigInt появились возможности работы с большими целыми числами:

   const big = 123456789012345678901234567890n;
   console.log(big + 1n); // 123456789012345678901234567891n
   

#aboutwebdev_js

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

Возвращение на текущую страницу в боте

Предыстория

В первой версии бота при возвращении к списку событий переход всегда был на первую страницу.
Я задумался: как мне реализовать возвращение на ту страницу, на которой находится событие?

И ко мне пришла идея! Сейчас поделюсь ею с вами!

Идея

У каждого события есть id-команда, чтобы при клике по ней отображалась информация о событии.
К примеру, /msk_m_1802.

Через регулярку я беру отдельные части id-команды, чтобы взаимодействовать с БД и функционалом бота.
msk — это id города, в котором проходит событие. Этот id я передаю в callback_data кнопки "К списку мероприятий", чтобы вернуться к списку событий, проходящих в Москве.
1802 — это id события, которое я передаю для его поиска в БД, чтобы отобразить актуальную информацию о нем.

Я добавил номер страницы и теперь id-команда выглядит так: /msk_2_m_1802

2 — это номер страницы, на которой находится событие. Соответственно, ее я передаю в callback_data кнопки "К списку мероприятий", чтобы вернуться на ту страницу, на которой находилось мероприятие.

Как это реализовано в коде

handleItemButtons.js

await bot.onText(/\/(\w+)\_(\d+)\_m\_(\d+)/, async (msg, match) => { // обрабатываем нажатие на id-команду /msk_2_m_1802
 city = match[1]; // id города
 currentPage = Number(match[2]); // страница, на которой находилось событие в списке
 idItem = Number(match[3]); // id события

 showItem(bot, msg, city, idItem, currentPage); // функция для отображения информации о событии
});

await bot.on("callback_query", async function onCallbackQuery(callbackQuery) {
 const regexpToMeetups = /^toMeetups\_(\w+)\_(\d+)/; // регулярка, чтобы бот понимал какая кнопка была нажата

 if (data.match(regexpToMeetups)) {
  city = data.match(regexpToMeetups)[1];
  currentPage = Number(data.match(regexpToMeetups)[2]);
 }

 if (regexpToMeetups.test(data)) {
  await showList(bot, chatId, messageId, city, username, currentPage); // функция для отображения списка событий
 }
});

showItem.js

await bot.sendMessage(HELPERS.getChatId(msg), messages, {
 reply_markup: {
      inline_keyboard: itemKeyboard(city, currentPage), // передается id города и номер страницы с событием для кнопки "К списку мероприятий"
 },
});

itemKeyboard.js

[
  [
    {
       text: "К списку мероприятий",
       callback_data: `toMeetups_${city}_${currentPage}`,
    },
  ],
];

Блок-схема

Ниже прикрепляю блок-схему реализации функционала возвращения на страницу.

Теперь событие может находиться даже на 100 странице и пользователь может сразу вернуться на ту же страницу после просмотра информации!

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

#aboutwebdev_itmeetupsbot #aboutwebdev_боты

Телеграм бот для создания своего списка желаний

Предыстория

Осенью прошлого года я написал телеграм бота для создания списка желаний.
При запуске создавался json-файл, в который записывались желания.
С того времени мои знания пополнились многими интересными решениями, которые мне захотелось применить в этом боте.

Сегодня я представляю вашему вниманию телеграм бота с созданием БД для записи своих желаний.

Что нового

При запуске теперь создается папка database в структуре проекта с файлом БД.
Добавил просмотр информации желания через команду.
Также было добавлено последовательное заполнение информации о желании: сначала добавляется ссылка, потом название желания.
Изменилась структура проекта. Стало проще ориентироваться по ней.

Исходный код

Исходный код проекта с БД: https://github.com/sqlzzy/wishlist-tg-bot-db
Исходный код проекта с JSON: https://github.com/sqlzzy/wishlist-telegram-bot

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

Анонсы

Про логотип

Недавно проходил опрос по выбору логотипа.
Одинаковое количество голосов в опросе и по реакциям в комментариях набрали два логотипа.

Я выбрал из них вариант Ивана. Крутой олдскульный логотип!

Скоро выйдут

В ближайшее время выйдут:
- крупное обновление бота для составления списков желаний;
- мой новый проект;

Конкурс

К выходу нового проекта будет конкурс! Подробнее о нём я напишу в понедельник.

#aboutwebdev_анонс