Таков webdev – Telegram
Таков webdev
57 subscribers
33 photos
2 videos
63 links
Пишу про свои проекты, делюсь полезными ссылками про webdev и мыслями о разработке

Автор: @sqlzzyy
Download Telegram
Сырники

Я люблю сырники.

Недавно в конкурсе проектов участвовал бот с поиском мест, где можно отведать сырники.

У проекта есть бот: @syrnikindex_bot
И сайт: http://syrnikindex.com

Сырникиииии! ☕️

#aboutwebdev_моярекомендация
Please open Telegram to view this post
VIEW IN TELEGRAM
🤯1
Обновления бота-агрегатора 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
🔥1
Фичи и факты 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
Пост благодарности

Недавно завершился конкурс лучших стартапов и проектов России от ProductRadar, в котором участвовал мой бот-агрегатор.

Благодарю всех кто поддержал мой проект в конкурсе 🍸

В том числе Indie Hackers и FRTVT with 👨‍💻 в поддержке моего проекта постом в своём канале.

Всех обнимаю и крепко жму руку 🤝

#aboutwebdev_личныйпроект #aboutwebdev_боты #aboutwebdev_itmeetupsbot
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1
Навигация по каналу

Для удобного поиска по постам канала я добавил теги по темам:

#aboutwebdev_js — про js

#aboutwebdev_css — про css

#aboutwebdev_html — про html

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

#aboutwebdev_моярекомендация — мои рекомендации

#aboutwebdev_itmeetupsbot — про развитие бота-агрегатора IT-мероприятий (Проект закрыт)

#aboutwebdev_боты — про тг-ботов

#aboutwebdev_авторскаястатья — авторские статьи

#aboutwebdev_анонс — анонсы моих проектов, статей

#aboutwebdev_митап — мнение про посещенный митап

#aboutwebdev_блог — про развитие своего блога

#aboutwebdev_кодпен — мои поделки в кодпене

#aboutwebdev_опенсорс — вклад в опенсорс

#aboutwebdev_обо_мне — кратко о себе

#aboutwebdev_мнение — мое мнение

#aboutwebdev_веб — про веб

#aboutwebdev_конфиги — делюсь конфигами и сборками

#aboutwebdev_sass_scss — про препроцессор sass/scss

#aboutwebdev_tgbotstats — про развитие npm-пакета для сбора статистики во взаимодействии с тг-ботом

#aboutwebdev_сотрудничество — сотрудничество с каналами, мероприятиями и все такое

#aboutwebdev_мем — мемы

Со временем список будет пополняться 😎
Please open Telegram to view this post
VIEW IN TELEGRAM
13👍1
Выбираем лого

Важно ваше мнение по поводу лого.

Ниже оставьте свой голос за лого, которое вам больше понравилось.

Если есть свои идеи, то напиши их в комментариях!

Благодарю!
Какое лого понравилось?
Final Results
13%
1
13%
2
25%
3
0%
4
0%
5
0%
6
50%
7
Возвращение на текущую страницу в боте

Предыстория

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

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

Идея

У каждого события есть 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_боты
100👍1
Телеграм бот для создания своего списка желаний

Предыстория

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

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

Что нового

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

Исходный код

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

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

Про логотип

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

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

Скоро выйдут

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

Конкурс

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

#aboutwebdev_анонс
👍2🔥2🤯1
Я решил пока отменить текущий конкурс. Проведу его после новогодней суеты.

Но без подарков перед новым годом всё равно не останетесь!

Анонс будет в ближайшее время 🍸
Please open Telegram to view this post
VIEW IN TELEGRAM
100👍1🤯1
Обновление бота для создания своего списка желаний

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

Обновления

Распишу изменения по пунктам.

1) Добавлены кнопки "Поделиться списком", "Поделиться всем списком", "Поделиться"

"Поделиться списком" — позволяет делиться списком желаний текущей страницы.
"Поделиться всем списком" — позволяет делиться полным списком желаний.
"Поделиться" — позволяет делиться отдельным желанием.
P.S. Благодарю Лену за идею с репостами в комментариях. 🥂

2) Переработано добавление нового желания

Ранее нельзя было добавить желание без ссылки, и я сразу взялся это исправлять. Теперь на первом шаге нужно добавить заголовок, а затем по желанию — ссылку. Чтобы добавить ссылку достаточно нажать на соответствующую кнопку и ввести её.

Такое пошаговое добавление информации — уникальная функция, которой пока нет ни в одном другом моём боте. Рад, что удалось реализовать эту задумку.

3) Изменение информации

Теперь работать с добавленным желанием стало удобнее:
- вы можете менять заголовок или ссылку, не удаляя желание и не создавая новое;
- если ссылка изначально не была добавлена, её можно указать через функцию редактирования;
- при изменении заголовка или ссылки отображается информация о том, что было изменено: показываются старый и новый заголовок или ссылка, чтобы вы могли видеть, какие изменения были внесены.

4) Улучшенная навигация

Навигация стала более логичной и удобной:
- если вы находитесь в меню изменения информации желания, нажатие кнопки "Назад" отменит действие и вернёт вас в меню самого желания;
- при добавлении желания также можно отменить действие и вернуться в главное меню, нажав на кнопку "Отмена".

5) Информация при репосте списка или желания

Теперь при репосте списка или отдельного желания будет отображаться вся информация:
- статус желания (исполнено или не исполнено);
- заголовок;
- ссылка.

Исходный код

Код проекта с БД: https://github.com/sqlzzy/wishlist-tg-bot-db

#aboutwebdev_личныйпроект #aboutwebdev_боты #aboutwebdev_опенсорс
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
Ваше мнение

Напишите свое мнение по каналу: что нравится, чего не хватает и что можно добавить?
Буду рад прочитать ваши мнение и пожелания!

Конкурс среди комментаторов

30 декабря среди комментаторов рандом выберет трех человек, которым подарю 300 звезд каждому.
Пост с результатами будет после выбора рандома.
Таков подарок к новому году от админа канала 🍸
Please open Telegram to view this post
VIEW IN TELEGRAM