PROG_WAY_BLOG Telegram 259
Сколько времени читается статья?

Очень интересная фишка в блогах и на других текстовых сайтах — указывать рядом со статьёй время её чтения. Видели что-то подобное: “Время чтения: менее 5 минут”?

Реализовать это максимально просто, для этого нужно два вводных параметра:
— количество символов в статье
— количество картинок в статье

В среднем, взрослый человек может прочитать за 1 минуту 1500 символов, а каждую картинку просмотреть за 12 секунд. Из этих параметров не сложно получить время прочтения в секундах:

const CHARACTERS_PER_MINUTE = 1500;
const SECONDS_PER_IMAGE = 12;
const SECONDS_IN_MINUTE = 60;

const calculateReadingTimeInSeconds = (articleLength: number, numberOfImages = 0) => {
const charactersReadingTime =
articleLength / CHARACTERS_PER_MINUTE * SECONDS_IN_MINUTE;
const imagesReadingTime = numberOfImages * SECONDS_PER_IMAGE;

const readingTime = Math.ceil(charactersReadingTime + imagesReadingTime);

return readingTime;
}


А далее секунды можно легко форматировать в читаемый промежуток времени через конструкцию switch (true), например, вот так:

const formatReadingTime = (seconds: number) => {
switch (true) {
case seconds < SECONDS_IN_MINUTE:
return "Менее 1 минуты"
case seconds < SECONDS_IN_MINUTE * 5:
return "Менее 5 минут"
case seconds >= SECONDS_IN_MINUTE * 5:
return "Более 5 минут"
default:
return null
}
}


Кода получается совсем не много, зато мы сильно улучшаем UX. Есть идеи какие ещё фишки можем разобрать? Пишите в комментарии)

Спасибо за прочтение, это важно для меня ❤️

@prog_way_blogчат — #code
27🔥16👍4🐳1



tgoop.com/prog_way_blog/259
Create:
Last Update:

Сколько времени читается статья?

Очень интересная фишка в блогах и на других текстовых сайтах — указывать рядом со статьёй время её чтения. Видели что-то подобное: “Время чтения: менее 5 минут”?

Реализовать это максимально просто, для этого нужно два вводных параметра:
— количество символов в статье
— количество картинок в статье

В среднем, взрослый человек может прочитать за 1 минуту 1500 символов, а каждую картинку просмотреть за 12 секунд. Из этих параметров не сложно получить время прочтения в секундах:

const CHARACTERS_PER_MINUTE = 1500;
const SECONDS_PER_IMAGE = 12;
const SECONDS_IN_MINUTE = 60;

const calculateReadingTimeInSeconds = (articleLength: number, numberOfImages = 0) => {
const charactersReadingTime =
articleLength / CHARACTERS_PER_MINUTE * SECONDS_IN_MINUTE;
const imagesReadingTime = numberOfImages * SECONDS_PER_IMAGE;

const readingTime = Math.ceil(charactersReadingTime + imagesReadingTime);

return readingTime;
}


А далее секунды можно легко форматировать в читаемый промежуток времени через конструкцию switch (true), например, вот так:

const formatReadingTime = (seconds: number) => {
switch (true) {
case seconds < SECONDS_IN_MINUTE:
return "Менее 1 минуты"
case seconds < SECONDS_IN_MINUTE * 5:
return "Менее 5 минут"
case seconds >= SECONDS_IN_MINUTE * 5:
return "Более 5 минут"
default:
return null
}
}


Кода получается совсем не много, зато мы сильно улучшаем UX. Есть идеи какие ещё фишки можем разобрать? Пишите в комментарии)

Спасибо за прочтение, это важно для меня ❤️

@prog_way_blogчат — #code

BY progway — программирование, IT


Share with your friend now:
tgoop.com/prog_way_blog/259

View MORE
Open in Telegram


Telegram News

Date: |

“Hey degen, are you stressed? Just let it all out,” he wrote, along with a link to join the group. On June 7, Perekopsky met with Brazilian President Jair Bolsonaro, an avid user of the platform. According to the firm's VP, the main subject of the meeting was "freedom of expression." Telegram has announced a number of measures aiming to tackle the spread of disinformation through its platform in Brazil. These features are part of an agreement between the platform and the country's authorities ahead of the elections in October. How to Create a Private or Public Channel on Telegram? Telegram offers a powerful toolset that allows businesses to create and manage channels, groups, and bots to broadcast messages, engage in conversations, and offer reliable customer support via bots.
from us


Telegram progway — программирование, IT
FROM American