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

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

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

Вы можете посмотреть демо здесь и исходный код здесь.

Примечание.Если вы решите использовать Sveltekit, как я (вместо Vite), для начальной загрузки приложения, вы можете столкнуться с проблемами при попытке создать сайт, если вы планируете размещать его на хостинге. это с Github Pages.

Предположения, которые я делаю

В вашей системе установлен Node/NPM, вы знакомы с системой установки пакетов NPM и немного знаете JavaScript.

Запустить приложение

От типа терминала:

Это создаст проект со следующей структурой папок:

Основная логика

Основная логика приложения будет записана в файле index.svelte в папке routes. В файле index.svelte удалите все теги section в разметке, но оставьте тег <svelte:head>.

В ‹сценарии›

Давайте начнем с абзаца, который мы собираемся использовать для проверки нашей скорости чтения. Я выбрал около 300 слов из «Алисы и страны чудес», но вы можете выбрать любое содержание.

Начнем с абзаца:

Кроличья нора какое-то время шла прямо, как туннель, а затем внезапно нырнула вниз, так внезапно, что у Алисы не было ни минуты, чтобы подумать о том, чтобы остановиться, прежде чем она обнаружила, что падает в то, что казалось глубоким колодцем. Либо колодец был очень глубок, либо она падала очень медленно, потому что у нее было достаточно времени, пока она спускалась, чтобы осмотреться и подумать, что будет дальше. Сначала она попыталась посмотреть вниз и разглядеть, к чему идет, но было слишком темно, чтобы что-либо разглядеть; потом она посмотрела на стены колодца и заметила, что они заполнены шкафами и книжными полками: вот на крючках висели карты и фотографии. Проходя мимо, она сняла с одной из полок банку: на ней было написано[3] «Апельсиновый мармелад», но, к ее великому разочарованию, она была пуста: ей не хотелось ронять банку, чтобы не убить кого-нибудь под ней. поэтому удалось положить его в один из шкафов, когда она упала мимо него. "Хорошо!" — подумала Алиса про себя, — после такого падения я не буду думать о том, чтобы скатиться с лестницы! Какой смелой меня все сочтут дома! Да я бы ничего не сказал об этом, даже если бы я упал с крыши дома! (что, скорее всего, было правдой). Вниз, вниз, вниз. Падение никогда не закончится? «Интересно, сколько миль я проехал к этому времени?» — сказала она вслух. — Должно быть, я приближаюсь к центру Земли. Позвольте мне подумать: это должно быть четыре тысячи миль вниз, я думаю... (поскольку вы видите, Алиса узнала несколько вещей такого рода на уроках в классной комнате, и хотя это был не очень хороший случай продемонстрировать свои знания, так как никто не мог ее услышать, тем не менее было хорошей практикой повторять это) «да, это правильное расстояние, но тогда на какой долготе или широте я должен быть?»

Скопируйте и вставьте приведенный выше абзац (или любой абзац по вашему выбору) и сохраните его в переменной с именем paragraph. Не забудьте заключить абзац в обратные кавычки ``, чтобы у вас не было странных проблем с форматированием.

После этого разделим абзац на отдельные слова и сохраним в массив методом .split.

Метод split принимает строку в качестве аргумента. Здесь мы используем аргумент пустого пространства. Этот метод автоматически возвращает массив.

Мы сохраняем абзац в массиве «words», чтобы позже мы могли просмотреть каждое слово.

Давайте добавим некоторое состояние

Первая часть данных — это логическая переменнаяisReading.

С помощью этой переменной мы будем управлять запуском и остановкой обхода слов. Мы также используем id для добавления к каждому слову. И, наконец, мы начинаем со значения по умолчанию readingSpeed, которое равно 150. Это число равно миллисекундам, как мы увидим позже с функцией setInterval.

Другая часть данных — это массив объектов, который мы называем words_per_minute. Мы собираемся использовать этот массив для заполнения параметров в элементе select.

Два обработчика

Обработчик changeSpeed() очень прост. Он будет прослушивать выбранный элемент, получать значение параметра и обновлять скорость.

В функции startReading() у нас есть основная логика того, как она будет работать, когда мы нажмем кнопку, чтобы начать чтение.

Первое, что он делает, это переворачивает значение логического значения isReading. Затем мы настраиваем и сохраняем setInterval, который будет работать только в том случае, если isReading истинно и если id является последним словом в массиве.

Другими словами, если мы достигли последнего слова, интервал остановится. В предложении else мы останавливаем интервал (в основном обход слов), мы сбрасываем идентификатор и возвращаем чтение в значение false.

Последнее значение readingSpeed, то есть миллисекунды. Это то, насколько быстрым или медленным будет интервал в зависимости от выбранной скорости WPM.

Разметка

В разметке компонентов Svelte также есть некоторая логика. В абзаце мы используем блок #each.Это перебор массива words, получение индекса (i) и создание <span> тег для каждого слова с классом, идентификатором или без него, в зависимости от некоторых условий.

Первое условие: если isReading имеет значение true и если индекс равен идентификатору (начиная он будет истинным, поскольку они оба будут равны 0), тег span будет иметь идентификатор и класс highlight-text. Как вы увидите в приведенном ниже CSS, highlight-textкласс сделает каждый тег span более жирным и немного увеличит размер шрифта.

Мы также хотим присвоить spans класс .fade-text, если isReading истинно, чтобы все остальные слова «исчезали». Этот класс просто придает тексту более светло-серый цвет.

Наконец, если условия ложны, мы просто отображаем промежутки без классов или идентификаторов.

CSS

Я добавил несколько стилей для кнопки, но вы можете оформить приложение по своему усмотрению. Важными классами являются классы .fade-text и .highlight-text, но даже их можно настроить по своему усмотрению.

Запустите npm run dev в Терминале и проверьте, все ли работает.

На этом мой первый урок закончен.