didoesdigital/typey-type

Typey Type for Stenographers is a free typing app designed specifically to help steno students practise and rapidly master stenography.

Typey Type for Stenographers

Typey Type is a free typing app designed for steno students to practise and master stenography.

Sponsor

You can support Di’s efforts on Patreon. A monthly donation helps Di build more lessons and features to help you fast-track your steno progress.

What's stenography?

The process of writing shorthand is called stenography. Using a stenotype machine or a fancy keyboard, you can write over 200 words per minute. Typically, steno is used for courtroom reporting, closed captioning, and real-time translation. As a means of entering text, it’s also an excellent ergonomic alternative to typing with a QWERTY keyboard.

Aim

The aim of Typey Type is to fast-track learning and mastering steno skills. Typey Type helps novice stenographers by giving them:

• immediate feedback on typing speed and accuracy
• progress updates, including progress on brief vocabulary
• a course to follow, including material to type
• links to more information

Typey Type concentrates on practical skills, such as physical drilling and memorisation of briefs.

What Typey Type is not

Typey Type is not a generic typing app. Plenty of typing apps already exist for regular text input without stenography.

Instead, Typey Type concentrates on teaching people how to type using stenography. That means it includes features like steno diagrams showing steno briefs as hints for how to write words and using steno-specific data, such as lessons for “single-stroke briefs”.

Typey Type avoids generic typing features, such as competing for speed and accuracy against other typists, which any typing app might do, such as Typeracer.

Development

Requirements

Install yarn. Note: the project is currently built with Node version 18.

Installation

This project includes a Git submodule for Typey Type data. If you want to clone this repository as well as its submodules, you can use the --recursive parameter:

git clone --recursive https://github.com/didoesdigital/typey-type.git

Alternatively, if you've already cloned the repository without the --recursive parameter, you can load its submodules using submodule update:

cd typey-type
git submodule update --init --recursive

If you haven't already, change directory into the cloned repository:

cd typey-type

Once you've cloned the repository and updated its submodules, yarn install packages from package.json:

yarn install

Updates

When you pull the latest code, you may need to update submodules too:

git submodule update

Run the app in development mode

Run the Typey Type app:

yarn start

Open http://localhost:3000 to view it in the browser.

Offline

To use Typey Type offline, you can follow the steps in this README to install and start the app in development mode, and copy your progress words from the Progress page online to your local progress page http://localhost:3000/typey-type/progress before going offline.

Testing

Run the test runner during development:

yarn test

Storybook

Run Storybook to develop and test components in isolation:

yarn storybook

Create React App

For reference, Typey Type is bootstrapped with Create React App.

Steno dictionaries

For Typey Type’s dictionaries, see Di's steno dictionaries repo.

Historically the Typey Type data repo has contained the steno-dictionaries submodule but it has moved to Typey Type CLI. If you've been using the paths to these dictionaries in Plover, for example, you may need to update them to look in the CLI or somewhere standalone.

Contributing

See the CONTRIBUTING guidelines.

Code of Conduct

This project and everyone participating in it is governed by the Code of Conduct. By participating, you are expected to uphold this code. Please report unacceptable behavior to [email protected].

License

See LICENSE.

The metronome sound, “digi_plink”, comes from Dev_Tones by RCP Tones under a Creative Commons license (CC BY 3.0 US) and was adapted to include silence at the end for a slower metronome tempo.

Author

Typey Type was created by Di.

Related repos

• Typey Type data
• Typey Type CLI
• Di's steno dictionaries
• Stenoboard diagram SVG to React

typey-type's Issues

Show missing entries/dictionaries for lessons

As per #5

… suggest at the start of a lesson which entries you might be missing from your dictionary that you should add before starting. For example, the stories lessons like Aesop’s Fables use British English spellings for words such as “neighbour”, so at the start of “Avaricious and Envious” Typey Type could show that your dictionary is missing "neighbour" and suggest that you grab the "Australian English with extra strokes" dictionary or add the entry "TPHAEUB/A*U": "neighbour", to your dictionary (if there are only a few entries missing).

This would make it easier to add more lessons that depend on specific dictionaries whereas it is now tricky to add lessons that will frustrate people by not having dictionary entries in Plover's dictionary.

Medical Prefix/Suffix lessons require stroking of caret (^) character

In the Medical prefixes and Medical suffixes lessons, as opposed to the Prefixes and Suffixes lessons, explicitly stroking the caret (^) character is required in order to progress to the next word.

I'm going to wager that this was not intentional, but in the event that it was, would it be more preferred to have these two sets of lessons act in the same way?

Add Typescript and replace existing Flow with Typescript

A place to start: https://create-react-app.dev/docs/adding-typescript

Markdown lesson dictionary hint addition

On the Markdown lesson, similar to the Jeremy GG: phrasing briefs lesson, it might be worth putting some kind of hint there that in order to complete the lesson, this custom markdown dictionary should be used.

Link to recommended lesson

I can open
https://didoesdigital.com/typey-type/progress
then run this bookmarklet/paste this in the url bar
javascript:document.getElementsByClassName('mr2 link-button dib')[0].click()
to get to the recommended lesson, but is there a way to get there in one step? Something like this?
https://didoesdigital.com/typey-type/recommended

When "Start from word" is greater than 1, it's unclear why "There are no words to write"

Overview

When filtering a lesson using the user settings, if there are no words left to show, the lesson page shows the message, "There are no words to write.":

This usually happens when your settings include "Discover new words" and you've seen every word already.

Problem

When you have the setting "Start from word" set to a number higher than the number of words in the lesson, Typey Type continues to show the same message, "There are no words to write."

This can happen when transitioning from another lesson where you meant to set the setting to a new lesson where you no longer want it applied. It's not obvious that you can change a setting to restore the words.

Approach

Add a "Start from word 1" button to Finished.js when the lesson isEmpty() and the this.props.userSettings.startFromWord is greater than 1.

"Give feedback on this lesson" link should be n/a in Custom Lesson

%subj%

Estimate possible stroke improvements across words on finished page

Overview

The finished page for each lesson makes some guesses about possible stroke improvements steno students could make, showing intermediate strokes they made and misstrokes they made on their way to writing each word.

Problem

Sometimes a student might misstroke a word where the first letters are correct but the stroke actually writes extra letters after the word that would be incorrect. The word is then deemed to be typed correctly and the next word deemed to be misstroked. In this example, the student used TPREFRPBS to write “Frenches” (accidentally hitting -S, which is the suffix for "^s" and with orthography rules can sometimes append "es"), which splits over to the next word, incorrectly marking “French” as stroked successfully, and adds incorrect letters to “character”, incorrectly marking it as a misstroke:

Approach

Idea: Before the revision list, show a form containing pairs of strokes that might have been marked as right/wrong incorrectly so students can adjust them. This is a first draft wireframe UI concept that needs a lot more thought:

This might use a heuristic to guess when a misstroke is probably a result of the previous word being misstroked. It might consider:

• When using "Space before output" spacing setting, the second word might start without a space, indicating it might have been a suffix or final letters of a previous word.
• If the first stroke of a misstroked word matches a suffix and does not appear in the first few letters of the word, it is probably a misstroke from the previous word.
• If a translation exists in the dictionary matching the previous word plus the first stroke of the misstroked word it is probably a misstroke from the previous word.

Once a pair of words are identified as a possible miscalculation, the student might mark the “misstroked” word as correct, adjusting the “met words” count. If the first word was also incorrectly marked as right (although it could independently be wrong anyway), they could mark it as incorrect, adjusting the "met words" count.

Other considerations:

• There's likely to be lots of edge cases to look for while implementing the code, e.g. don't compare the current misstroked word to the previous word if it's the first word of the lesson
• There's likely to be lots of false positives and false negatives so it will need lots of testing with real steno practice to refine the heuristic.
• After marking a word or pair as correct/incorrect, should the revision list update? Should the checked items update? Should it show the adjustments you've made?

As this is a heuristic, it might be worth showing a feedback form next to it to gather feedback on its accuracy e.g. “How useful was this suggestion?”/“Was this useful?”

This issue needs a full UI solution designed before starting development. If you want to work on this issue, let me know!

Radio buttons are wonky

They were always slightly off, but new Chrome defaults seem to make them look more wonky than before:

Firefox:

Safari:

Approaches to consider:

• styling radio and checkboxes in 2019: https://twitter.com/jensimmons/status/1162167344375840773
• Animated checkboxes with SVG
• SVG and CSS checkboxes
• Animated radio inputs

Update dictionaries page to recommend en-au dictionary

Project Gutenberg is largely made of stories written in British English. As a result, people get stuck trying to write words in the Typey Type Top 10000 Project Gutenberg words lesson because they don't have a dictionary with those spellings.

Typey Type currently depends on dictionary entries provided in dictionaries such as the top-10000-project-gutenberg-words.json. This dictionary must therefore choose to either fingerspell British English words or provide entries that depend on the Australian English with extra strokes dictionary. The fingerspelling entries cause issues like didoesdigital/steno-dictionaries#174, so it would be better to use the International English spelling dictionary entries.

Until there's an alternative method to recommend missing dictionary entries in Typey Type, let's update the dictionaries page to recommend folks use the en-au dictionary or expect to fingerspell those words.

Distraction free "zen" mode

First off all: Thanks for building this amazing tool! It is really helpful in learning steno 😊

Playing around with other learning/typing tools I had the idea of a distraction free mode for TypeyType. It would be a mode where all non-typing related UI elements are hidden and (optionally) the browser goes into full-screen mode until the lesson is completed. Something along the lines of this:

This is missing some obvious way to exit zen mode and the nav bar is somewhat broken margin wise but it should convey the idea 🙂

Another idea that I would personally really like is leaning more towards the monkeytype route where the text is scrolling in a centered container and the steno hints might be situated at the bottom below the box. Though that is just an idea and might need some experimentation to see what works and what does not (dark zen mode? 🙏). I'd be happy to contribute to the design process though and give feedback!

Add Tailwind

Typey Type's original CSS was based on Tachyons. It lacks features such as good support for responsive design and dark mode. I intend to replace the majority of the utility classes in index.scss with Tailwind so I can more easily add dark mode and more.

[BUG] Revise mode settings are not applied automatically

Last time, when I have suggested adding saving settings, the settings are applied to the discover mode, but they are not applied automatically to the revise mode.
To reproduce, just open the "My revision words" lesson

Sometimes words with double consonants fail

Hi there! Firstly, thanks for creating such an incredibly useful tool for learning stenography. It's really wonderful!

I've encountered a bit of an odd issue, and have been unable to find others talking about it, so I suspect it may be something I'm doing wrong. I've noticed that quite often when I'm writing a word with double consonants, the word fails to be recognised a number of times, before eventually working. I'll give some examples...

When writing "whipped", I've found that the result will very often be "whiped", as shown in the above image. Typically I need to repeat the word 2 to 3 times before it is recognised as "whipped".

Here's another example trying to type "rugged". I have many other examples I can provide if you'd like.

I have been extremely careful in my typing whenever I come across a double consonant word, just to make sure it's not an accuracy issue on my part. It happens so frequently that I don't believe it can be simply attributed to mistakes on my part, at least not mistakes like a key mis-stroke; it could still be a mis-configuration or something along those lines, I suppose.

I've also tried typing these words in a different application (word doc, for example), and the same kind of issue does not seem to occur at all. This indicates to me that it's not an issue with the keyboard I'm using (a Plover).

Any insights you may be able to offer would be greatly appreciated, and thanks again for the wonderful app!

Drill complete sentences

I think this would be a new study type:

• Have a corpus of sentences (from Project Gutenberg, for instance).
• Filter that corpus to select sentences which contain only the words in the lesson.
• Present the words in sentence order.

A lesson made of seen words using this study type would then let you "unlock" new sentences as you learn new words.

[Suggestion] Remember settings for each lesson mode

Hi, I'll want to save lesson settings for each lesson, so I can start typing right away.

It's annoying to have to change settings if other settings are preferred

My current revision settings:

• 60 words
• 1 repetition

Show unstarted icons on Progress page for unvisited lessons

On the Progress page, unvisited lessons show no icons:

For a more consistent and aligned appearance, show the "Unstarted" circle progress icon and tooltip for unvisited as well as visited but unstarted lessons.

Steno hints to look up briefs on the fly instead of using static files

Overview

By looking up briefs on the fly for steno hints in lessons instead of using the hints supplied by static lesson files, the static lesson generator project (which is not open source) will become redundant. The static lesson generator is error prone, manual, laborious and has no flexibility for people using their own dictionaries. Instead of lesson files containing a word and brief as well as accompanying dictionaries, lessons might only need to be word lists. Metadata in the lesson index could link to any recommended dictionaries.

Looking up briefs on the fly will also let people use their own dictionaries (#5) to see the hints they prefer in lessons.

UPDATE: static lesson generator has been replaced by the open source Typey Type CLI: https://github.com/didoesdigital/typey-type-cli

We currently use the static lesson files for:

A) word lists,
B) hints for lessons where the URL does not contain phrasing, prefixes, suffixes, steno party tricks, or collections/tech, and
C) the main steno hint (whereas the list of steno hints is already looked up on the fly when using the "Show other stroke hints" settings)

To look up steno hints on the fly for B), we could use lesson metadata to use hints from recommended dictionaries.

Alternative layout/behaviour for presenting and progressing material

Overview

At the moment, Typey Type shows lesson material as one long row of text, clipped on the right-hand side. When a word is completed, the row shifts along and the next word becomes the "current" material.

There are alternative options for presenting material we could explore for different benefits and preferences.

For example: #59

I would personally really like … the text is scrolling in a centered container and the steno hints might be situated at the bottom below the box

Problem

• Over about 80–120WPM, it becomes difficult to visually track the upcoming material and newly progressed current material. This makes it difficult for methods of practice like this: http://www.justlearnmorsecode.com/koch.html
• Some folk report finding it uncomfortable to stare at one place on the screen for the current material and would prefer to move their eyes along.
• The current behaviour is quite different to usual typing behaviour where the words appear across the page as you type and eventually wrap (or page/scroll across in jumps). The behaviour could more closely match typing behaviour for more realistic practice.

Considerations

• Aim to keep the steno diagram/brief hints close to the words to be typed. This matters more for beginners at low speeds.
• Aim to minimise page layout jumping that could be distracting.
• Typey Type uses a fixed-width monospace font that could be used to our advantage for calculating layout and text positioning.
• Could or should the layout/behaviour be a user setting?

Approaches

TODO

Fingerspelling progress calculation is confusing

Problem

"Fingerspelling" on the Progress page shows "26 of 52" as progress, but "There are no words to write" when you visit the Fingerspelling lesson. This mismatch is confusing, and being unable to 'finish' the lesson may be frustrating.

Details

In local storage under lessonsProgress, you'll find "/typey-type/lessons/fundamentals/fingerspelling/lesson.txt: {numberOfWordsMemorised: 26, numberOfWordsSeen: 0, numberOfWordsToDiscover: 0}". Typey Type normalises the met words to calculate the unique number of words you've seen, memorised, and have yet to discover in src/app.js by converting them all to lowercase. As "A" and "a" both appear in that lesson, it counts that as 1 unique word seen for counting "number of words seen". This doesn't match up with the number of words shown in the lesson, which is calculated from the lesson length.

There is a related issue where Typey Type includes punctuation separately when measuring word progress.

The normalisation code is a workaround for a separate bug+feature. When people have "case sensitive" turned off, they might write "x" when presented with the word "X" and have that recorded in met words as "x", recording as 1 seen word and reducing the words left to discover by 1. The words left to discover feeds into the recommendation engine in src/utils/recommendations.js. Normalising the words avoids recommending lessons to "discover" containing no truly new words left to discover.

Add dark mode

Dark mode is a regularly requested feature by people using Typey Type.

TODO:

• Add Storybook stories for Chromatic coverage to make it easier to add Tailwind
• Add Tailwind to make it easier to add dark mode

Make it easier to learn multi-word briefs

Overview

It's a mental shift to move from writing single-word translations to multi-word translations in a single-stroke brief. How might Typey Type make this easier?

Approach

One suggestion from @paulfioravanti :

maybe something also like the ability to turn on/off colour highlighting for potential multi-word briefs might be handy in Typey Type to trigger the brain into thinking in briefs

Perhaps using an approach like steno hints on the fly, Typey Type could stretch into upcoming material to present multi-word stroke hints for the longest phrase that has a brief available. If you then type only the first word, the next item could fall back to a hint for only that word. For example:

A similar but slightly different idea is to highlight words that commonly run together that you might want to turn into a brief. This is more closely related to the TextExpander approach of analysing text you write a lot and looking for shortcuts you'd get a lot of use out of. (That seems like a bigger, harder feature, that might be more useful in Plover instead of Typey Type.) Alternatively, with a good source of material, it could be a good topic for a Typey Type lesson rather than a feature.

See also

Unlike #31, this issue is about highlighting words that appear together that could be written with briefs, not just highlighting Typey Type material that is already structured around multi-word phrases.

Idea: game for finger drilling e.g. Da Dreaded Dueling Digit Duo Drills

We could add a "game" to practice finger drills to improve transitions between chords.

The mechanics should help to "write faster, smoother, more accurately, and with a consistent rhythm".

Background: Da Dreaded Dueling Digit Duo Drills on the cheap and sleazy side (www.cheapandsleazy.net) By Kimberly S. Fish, CRI; XHTML by G.D. Warner

Design

Similar behaviour to these:

• https://didoesdigital.com/typey-type/games/TPEUBGSZ
• #126

MVP might be just the custom option and no scores.

Then add presets, which could follow dueling digits or something else.

Then (stretch goal) maybe upon completion ask for a confidence rating and show performance rating like "Flexible Fingers" or "Clumsy Claws" from Da Dreaded Dueling Digit Duo Drills on the cheap and sleazy side (www.cheapandsleazy.net) By Kimberly S. Fish, CRI; XHTML by G.D. Warner

Remove search?

Overview

Should we remove lesson search from Typey Type? It seems like search is under-utilised and will take effort to update. I'd prefer to remove it (at least for now and maybe one day restore it, on the lessons index page, if I can make it better.) It also takes up valuable screen real estate in the navigation bar.

Background

Current use

Analytics (for people that don't block analytics) shows only 5 Select events where someone selected a lesson from the autocomplete dropdown:

• /collections/tech/react/lesson.txt * 2
• /collections/human-resources/hris-vocabulary/lesson.txt
• /stories/charles-perrault/the-ridiculous-wishes/lesson.txt
• /stories/hans-christian-andersen/in-the-nursery/lesson.txt

… and only 4 Start events where someone then started that lesson:

• /collections/tech/react/lesson.txt * 2
• /stories/charles-perrault/the-ridiculous-wishes/lesson.txt
• /stories/hans-christian-andersen/in-the-nursery/lesson.txt

I suspect the React and HRIS lesson events were from me, leaving only 2 successful uses of search in 3 months.

There were 689 Change events where a key stroke changed in the search query. Most search queries did not match any lessons. Here is a sample of the main searches that looked like words:

• misunderstanding
• i love
• keep it up
• hello
• magn
• commands
• consist
• happ
• hello, my name is […] (I've snipped the actual name listed)
• throug
• TPHOELG
• again
• arranged
• calf
• command
• divide
• faq
• form
• happy
• just briefs
• muscle
• Package
• particular
• preparing
• priority
• pristine
• prohibit
• transcript
• type of stenography
• unusual
• whose
• your

Some look like site searches for info, not lesson searches. For example, "type of stenography" "faq", and "form".

Some look like possible lesson searches that don't have good results (that could make for interesting lessons) such as "magn" (which I guess is magnum steno), "just briefs", "transcript", and "command".

Some look like spam.

I cannot find search queries that match the 2 successful lesson selections, so it's possible the visitor in that case typed something like a space or one letter, and scrolled the whole list and picked something at random.

Current problems

The current lesson search uses react-autocomplete, which appears to be deprecated. It seems like it should be replaced by react-autosuggest.

React-autocomplete uses the deprecated componentWillReceiveProps, causing warnings in #7.

Replacing react-autocomplete with react-suggest may slow down the process to upgrade React to use its latest features.

Accessibility and usability

It was hard to build it so that it would be possible for screen reader users to skip over the long list of results and continue navigating the page. My dodgy work around was to show no results until you type your first character so screen reader users could at least tab through it without getting stuck in a long list if they didn't want to search. This means there are limited hints about what is actually available that you can search for, which may lead to people searching for site content like FAQ instead of lesson or collection names.

It was also hard to separate focus (navigating through the autocomplete results list) from selection (choosing the lesson and navigating to it). To avoid people accidentally navigating to a lesson while flicking through the results), I added a confirmation button, "Start". This consistently confuses me when I click an autocomplete lesson result and expect it to navigate straight to the lesson and nothing happens.

Ignore punctuation when measuring 'words without misstrokes'

When you click on the progress page, the top of the page reports You’ve successfully typed <some number> words without misstrokes. From what I can tell, the count here considers foo, foo., foo!, etc. to be different "words". When I first started learning steno, learning those variations did seem significant, but having become more comfortable with punctuation, foo and foo! don't feel like they represent an increase in my vocabulary. I've noticed lately that I'm not paying much attention to this metric, and instead tracking the progress reported by the Top 10000 Project Gutenberg words lesson.

Recommend tweaking this metric to track words by themselves, instead of the current word + <punctuation> behavior.

---

• In the description, I focused on the successfully typed X words metric, but I suspect this applies to the other metrics listed in that same area as well (so, memorised words and revise words, as well)
• I haven't done a ton of testing on this issue, this is mostly just based on what I've observed over time. I'm fairly sure that the metrics consider words with different punctuation to be distinct from each other. I also suspect that spacing may affect the counts as well.

Provide textual description for symbol/punctuation items

Sometimes it's a bit hard to distinguish the symbol to type.

e.g. “ vs. ” and ‘ vs. ’

Ideally, TT would add descriptions to all symbols by using some builtin map symbol->description text and show it automatically. This would also help using custom lessons to use non-default dicts (e.g. Emily Symbol System).

Existing progress data is no longer valid.

As of 41d26a2, the style of existing progress data is now invalid and all new words are regarded as new (at least for those using "ignore spacing") as there is now a combination of words with spaces and words without in the progress data. These are regarded as completely separate words (including punctuation and capitalization).

Whereas previously, a space was added to the front of words discovered by users of "ignore spacing", the space is no longer there for words. The program does not register that "was" and " was" are the same word.

Is it necessary to store space, punctuation, and capitalization in the progress data?

Bug: Metronome prevents sleep

Discord user Leira reported Typey Type in Firefox preventing Macbook from going to sleep. The "FirefoxCP isolated web content" process shows as "Preventing Sleep" in Activity Monitor:

It seems the same problem occurs in Chrome on a Mac too.

The Metronome feature uses Howler, which creates a new Web Audio AudioContext that is meant to prevent sleep so that things like audio players (playing music) don't get interrupted by the laptop going to sleep when the user is idle. Howler is meant to auto suspend "after 30 seconds of inactivity to decrease processing and energy usage".

The existing Typey Type usage of Howler for the metronome incorrectly creates the Howler the moment the page is loaded rather than after starting the Metronome, and does not auto suspend 30 seconds after stopping the metronome.

Statistics calculation issue

I finally got to a point where I have exhausted all the outlines Typey Type has available. The screen displayed "100% completion" before I had completed the final "Top 10000 Project Gutenberg words" exercise, but when I did, my final stats were that I had successfully typed 10347 words, and completed 100% of 10,000 words:

The Lessons Progress stats displayed as follows:

The text is a bit small, so I'll enumerate here the lessons in which the stats would lead me to believe there are still words left to stroke, but upon clicking through to them, I would be greeted with a "There are no words to write" screen:

• Multi-syllable words with prefixes · 911 of 927
• Multi-syllable words with suffixes · 1362 of 1380
• Multi-syllable words with doubled consonant letters · 1186 of 1201
• Multi-syllable words with multiple strokes · 3372 of 3431
• Fingerspelling · 26 of 52
• Punctuation · 29 of 30
• Top 1000 words · 998 of 1000
• Top 10000 Project Gutenberg words · 9928 of 10000

For analysis purposes, here is my Typey Type progress JSON file which gets me the output.

As an aside to this issue, Typey Type is amazing software, and I'm thrilled to be able to have gotten to "completion" 😄

Offline

Overview

A few people have requested support for Typey Type working offline without a network connection. This would likely need:

• A way to check for a network connection
• Caching to store lesson data and dictionaries offline without making network requests
• Turning on create-react-app's service worker and reviewing its other offline-first considerations
• UI design for some sort of notification for "New content available"
• A way to load new content when its aware in the UI
• A way to avoid bugs with Cloudflare CDN

[BUG] Words trained with spaces before words, ignore spaces and spaces after words are counted separately

Requirements:

• The Typey Type starts with no progress
• Words are grouped into sets A, B, and C
• All three sets of words (A, B, and C) are disjoint

How to reproduce:

1. Train a set A of words with spaces ignored.
2. Train a set B of words with spaces before words.
3. Train a set C of words with spaces after words.
4. Revise with spaces ignored.

Workaround:
Revise with spaces before words with new words, but this does not count towards seen words goal

Expected behavior:
Revising shows words from all sets

Actual behavior:
Revising shows only words from the set A

Fix styling on raw steno keys in hints on finished lesson screen

Problem

The styling on individual raw steno keys in hints on finished lesson screen has a background color that does not match the background color for full steno strokes:

In this example, the outside edges around WAS are a different color to the background behind the letters WAS. They should be the same color.

Details

The steno-stroke class is used in all of the following places:

https://didoesdigital.com/typey-type/lessons/fundamentals/one-syllable-words-with-compound-clusters/overview

https://didoesdigital.com/typey-type/lessons/fundamentals/introduction/

https://didoesdigital.com/typey-type/lessons

https://didoesdigital.com/typey-type/dictionaries
https://didoesdigital.com/typey-type/lookup
https://didoesdigital.com/typey-type/lessons/fundamentals/introduction/flashcards

Approach

We no longer need individual styling for individual raw steno keys anywhere so we can remove the classes for raw-steno-key raw-steno-key--subtle on the finished screen or in CSS.

1. Remove classes in CSS.
2. Remove classes in finished screen JSX.
3. Take screenshots of all the places steno strokes are used and check they look good.

Go back a word

Overview

What if you could go back a word? That could let you immediately practice/fix your mistake until you are happy with it before moving on.

The idea to go back a word to see the previous stroke's hint was shared by Charles to help mitigate the problem outlined in #15

Sometimes it is nice to go back and see what the correct stroke was according to the stroke hint.

Considerations

• What if you could go back as many words as you like?
• What would going back a word do to the end of lesson chart?
• If you mistyped a word, moved on, then went back, and correctly stroked the word, would that be marked as correct for the sake of this lesson as shown on the finished page in the chart and possible stroke improvements? What about for updating the metWords progress JSON?
• Would multiple attempts be shown in the possible stroke improvements section of the finished page? Just the first attempt? Just last attempt?
• What if you could only see the previous word's stroke hint (diagram/text) but not go back and re-attempt it?

Rebuild flashcards

Overview

It's time to rebuild the flashcards from the ground up to:

A) not use a carousel,
B) use a decent spaced repetitions model,
C) use a more suitable data structure,
D) be accessible to screen reader, keyboard, and touch device users
E) responsive, styled, and with efficient animations.

Background

The flashcards are built with pure-react-carousel, but a fork that has a callback to get the current slide. Working with this carousel has been awkward for Typey Type's needs (particularly the API and responsive behaviour). The final design and interaction of the flashcards turned out to not need a swipeable interface. It would be enough to have buttons that transition the cards. Instead of a carousel package to assist with the swipe gestures, it could be simpler to show a transition animation for cards when the buttons are clicked.

The spaced repetitions model is primitive. It's a rough approximation of Pimsleur's graduated-interval recall. This is an opportunity to build something more sophisticated.

The data structure could more closely reflect what's actually needed. Each "card" needs a "front" showing the word and a "back" showing the brief. The "back" could potentially display the brief as a steno diagram or as text, more than 1 possible text brief, and other metadata, such as how many times the flashcard has been seen.

To be accessible to a screen reader, the flashcards could possibly announce the "front" word and the "back" brief on card transition using live regions. If not using live regions, the UI might need to be optimised for making it efficient to switch between the transition buttons and the card face.

The flashcards are intended to be used on-the-go on mobile devices. They need to respond to changes in orientation e.g. from landscape to portrait. On button taps, they could use a roll or slide fade transition along the X axis between cards and possibly a flip transition on the card between front and back.

Approach

Remove the carousel package, create a new data structure for the flashcards, develop the flashcards with a new spaced repetitions model, rebuild roughly the same UI with accessible content and transitions on button presses instead of swipes.

Importing personal dictionaries

Overview

By letting people import their own dictionaries, this could open up other possible benefits and improvements…

Your preferred strokes and better misstroke counting

You could see your own preferred strokes for words. If you prefer to write PHAOED/KWRA rather than one stroke as suggested by Typey Type PHO*EUD, you could upload your own dictionary without PHO*EUD present. This would affect how stroke targets are calculated in lessons and therefore how misstrokes are estimated.

Highlight dictionary differences.

It would help make it possible to show Plover's dictionary suggestions and Typey Type's dictionary suggestions together.

It might be possible to highlight misstrokes in your own dictionary.

Show missing entries/dictionaries for lessons

It would be possible to suggest at the start of a lesson which entries you might be missing from your dictionary that you should add before starting. For example, the stories lessons like Aesop’s Fables use British English spellings for words such as “neighbour”, so at the start of “Avaricious and Envious” Typey Type could show that your dictionary is missing "neighbour" and suggest that you grab the "Australian English with extra strokes" dictionary or add the entry "TPHAEUB/A*U": "neighbour", to your dictionary (if there are only a few entries missing).

This would make it easier to add more lessons that depend on specific dictionaries whereas it is now tricky to add lessons that will frustrate people by not having dictionary entries in Plover's dictionary.

Background

So far, a prototype is working at a hidden URL: https://didoesdigital.com/typey-type/dictionaries/import

This imports one or more dictionaries and a config file, which is then used to update the global lookup dictionary used in custom lesson creation and the lookup tool.

To be more usable on mobile, the UI and behaviour needs to support uploading more than 1 file with a device file picker that only lets one file be selected. For example, after each file is uploaded, it could show another file upload button and handle the files from each picker instead of just the one.

One key usability aspect to consider is how to update the dictionaries over time. If people are actively adding to them but not uploading them to Typey Type regularly, custom lessons might not show people the briefs they expect.

Approach

1. Make it usable on mobile so that lookups with custom dictionaries are immediately useful for casual lookup on the go.

2. Persist dictionaries across sessions by storing in local storage so you don't need to upload your dictionaries and config every time you use Typey Type.

3. Explore showing which dictionary a brief comes from, such as Plover's, Typey Type's, domain dictionaries like code.json or currency.json , or personal dictionaries.

Replace Tooltips package

Overview

Typey Type is currently using a fork of react-tippy that supports custom tag elements for the tooltip trigger. React tippy has some drawbacks and appears to be unmaintained now. It's time to replace it.

Details

A replacement tooltip library needs to have/be:

• Maintained.
• The tooltip trigger can be abbr, span, div, a, or an icon (e.g. where icon has tabindex=0).
• Support a hover delay so that you can hover on user settings for 100–200ms without triggering the tooltip.
• Keyboard accessibility (can focus the trigger element and see content, which may or may not be affected by hover delay).
• Closes on escape key (see: ReactTooltip/react-tooltip#107)
• Screen reader accessible. (I think it should be screen reader accessible if you can navigate with the screen reader (not keyboard/focus) from trigger to tooltip as the "next" element in the tree, rather than using announcements; although announcements might be nice for expanding abbreviations in text).
• Auto positions away from viewport edges when there's not enough space, but is otherwise a "top" tooltip.
• Animates using a slide fade, 200ms, and triggers on mouseenter, focus, and click.
• Supports custom styling to look like Typey Type's tooltips.
• No console errors (when using hover delay with react-tippy the console is full of errors in production).
• Can wrap the OutboundLink for external links with icons and "opens in new tab" tooltip.
• Can work inside a modal e.g. is not clipped by modal boundaries.
• No vulnerabilities.

Does NOT need:

• No need for focusable content inside a tooltip. I think links or interactive content inside tooltips is poor usability.
• There's no need for specific positioning like "down" (even though that might be handy on user setting page) IF it supports hover/focus delay.
• There's no need for extra options like "follow mouse"—tooltips should be stable in their positioning.
• There's no need for multiple colors or styling options, 1 style for the whole app is enough.

Approach

1. Find a library that meets these needs and test that it works as described.
2. Replace existing tooltips with new tooltips.
3. Remove react-tippy.

Options

Some places to start looking:

• React: https://github.com/ReactTooltip/react-tooltip
• Ant.design: https://github.com/react-component/tooltip
• Adobe Spectrum: https://react-spectrum.adobe.com/react-aria/Tooltip.html

Address console warnings for React lifecycle changes

More info: https://fb.me/react-unsafe-component-lifecycles

Idea: Add a game for practising phrasing briefs

We could add a "game" to practice phrasing briefs.

The goal would be to enable focused phrasing practice without committing to a specific phrasing dictionary. Given the phrase "when I went to", Plover users might write "WH*EU/TWOEPBT" while people using Jeff's phrasing dictionary might write "SWHEUGTD".

And yet, it would be ideal to provide good support for Jeff's phrasing dictionary in particular. The ideas below follow behaviour from Jeff's phrasing dictionary. Important related issue: #104

Design

Figma designs to show the general idea…

Before starting, toggle on/off word bits you want to practice and select a level:

After pressing start, you write the 15 randomly selected phrases:

Behaviour

The "Level" select dropdown might show levels 1–7 for controlling which bit of the phrase will change throughout the game:

1. rotates starters
2. rotates auxiliary verb and positive/negative
3. rotates structure
4. rotates verbs
5. rotates optional suffixes and tense
6. rotates everything — totally random phrases for every round

Below are some examples where I hastily put words together without massaging them into grammatically correct strings, indicating some of the code complexity to handle.

As an example of level 1 with all the "starters" selected except for "there", Typey Type might randomly select the following: auxiliary verb "can", "positive" instead of negative, "always", verb "become", 1 suffix, "present" tense; and for the 15 rounds show:

1. you can always become
2. I can always become
3. she can always become
4. that can always become
5. this can always become
6. this can always become
7. I can always become
8. she can always become
9. it can always become
10. we can always become
11. you can always become
12. you can always become
13. she can always become
14. he can always become
15. we can always become

Example level 2:

1. you don’t even understanding the
2. you can’t even understanding the
3. you shall even understanding the
4. you won’t even understanding the
5. you do even understanding the
6. you can’t even understanding the
7. you shall even understanding the
8. you won’t even understanding the
9. you do even understanding the
10. you don’t even understanding the
11. you can even understanding the
12. you shouldn’t even understanding the
13. you will even understanding the
14. you shall even understanding the
15. you do even understanding the

Example level 3:

1. I shall just ask
2. I shall still ask
3. I shall never ask
4. I shall even ask
5. I shall have to ask
6. I shall always ask
7. I shall be asking
8. I shall just ask
9. I shall even ask
10. I shall be asking
11. I shall still ask
12. I shall never ask
13. I shall even ask
14. I shall just ask
15. I shall always ask

Example level 5:

1. you will never understand
2. you will never understand the
3. you never understood
4. you never understand
5. you will never understand
6. you will never understand the
7. you never understood
8. you never understand
9. you will never understand
10. you will never understand the
11. you never understood
12. you will never understand
13. you will never understand the
14. you never understand
15. you will never understand

Initial MVP approach would:

• show no stroke hints
• require students to manually select levels themselves instead of increasing them at the end of 15 rounds.

Later, it would be useful to see stroke hints for preferred dictionaries. E.g. a phrasing lookup for Typey Type dictionaries plus your personal dictionaries so it searches for "when I went to" it tries the whole phrase, then "when I went", "when I", "went to" to come up with "WH*EU/TWOEPBT" based on JSON dictionaries. And a JS/TS implementation of Jeff's phrasing dictionary for either generating a stroke when creating the material or performing a reverse lookup with the material phrase.

Downloadable detailed data

Overview

People want to see more detailed data. Better data can improve feedback loops for more effective and efficient practice.

Problem

Local storage space is limited.

Approaches

One option is: "creating a plover plugin, that expects for session data to be manually loaded in after a typey-type session (download json, load into local plugin), that persists on the local machine over time and allows offline practice"

During a session, we could record detailed data in the app (not local storage) and offer a button somewhere (progress page?) to download the detailed progress data to use elsewhere. This gives users responsibility and ownership of their long-term progress data.

Considerations:

• Keep it flexible so people can use it in whatever Plover plugins or programs they want to whatever end.
• An accidental page refresh or closed tab will lose current session data. Maybe we could store latest/previous session in local storage and whenever Typey Type hits local storage limits, that's the first piece of local storage data to dump.
• Version the data format so we can make changes over time, such as adding additional fields of interest (examples below)

Formats?

{
  "version": "0.0.1",
  "data": {
    "metWords": [
      {
         "wordOrPhrase": "list",
         "successfullyTypedCount": 12,
         "misstrokes": {
           " lift": 4,
           " Lys-​": 1,
           " HR*EUFT​": 3,
         }
      }
    ]
  }
}

{
  "version": "0.0.2",
  "data": {
    "metWords": [
      {
         "wordOrPhrase": "list",
         "successfullyTyped": [
           1526868810,
           1620520005,
           1620519996
         ],
         "misstrokes": {
           " lift": [1620520000, 1620519990],
           " Lys-​": [1526868800],
           " HR*EUFT​": [1526868610],
         }
      }
    ]
  }
}

Open source Typey Type

I want to open source Typey Type because:

• Typey Type contributes to the Open Steno Project's aim to free stenography from an industry that is locked down, proprietary, and expensive.
• A few people have asked to contribute to Typey Type.
• A few people have asked for visibility on what's being worked on.
• It would be convenient to refer to issues, including closed issues and blockers.

Success looks like:

• The repo has community health files, such as CONTRIBUTING guidelines.
• Someone can build and develop Typey Type on their device, including understanding documentation and successfully installing dependencies from dependency files.
• The repo is public.

Add table of contents to support page

Overview

The support page is long, making it difficult to understand at a glance or navigate efficiently.

Approach

1. Add a "table of contents" to the support page component, src/pages/support/Support.tsx.
2. Test the page using a screen reader, such as VoiceOver on macOS in Safari or NVDA on Windows. Specifically check:
   • The order of content should read the table of contents before the main page content. Using VoiceOver, you would press VO + A to read the page.
   • Navigating via "navigation landmarks" should say something like "On this page navigation". Using VoiceOver, you would press VO + U to open the rotor menu and the right arrow key to tab through the menus to the Landmarks menu then the down arrow to find "On this page navigation".
   • Every link in the table of contents can be reached and activating the link will move to the linked heading and announce it. Using VoiceOver, you would press VO + arrow keys to navigate through the links and then VO + Space to activate a link.
3. Check against the design for accuracy.
4. Check how it looks on small screens.
5. Check the browser console for errors.
6. Check the terminal for errors and warnings.
7. Check that the tests all pass using yarn test.

Design

Code

This is the code assembled from designing it in the browser. The existing page content is truncated for readability here.

For src/pages/support/Support.jsx:

<div className="p3 mx-auto mw-1024 type-face--sans-serif">
  <div className="flex flex-wrap justify-between">
    <div className="mt3 mw-336 flex-grow table-of-contents-column">
      <div role="navigation" aria-labelledby="contents-label">
        <p id="contents-label" className="mb0">On this page:</p>
        <ol className="unstyled-list lh-double">
          <li className="unstyled-list-item">
            <a href="#about-stenography">Stenography</a>
            <ol className="unstyled-list mb0">
              <li><a href="#steno-terms">Steno terms</a></li>
            </ol>
          </li>
          <li className="unstyled-list-item">
            <a href="#typey-type-notes">Typey Type notes</a>
            <ol className="unstyled-list mb0">
              <li><a href="#typey-type-progress-tracking">Typey Type progress tracking</a></li>
              <li><a href="#typey-type-dictionary">Typey Type dictionary</a></li>
              <li><a href="#typey-type-hints">Typey Type hints</a></li>
              <li><a href="#flashcards">Flashcards</a></li>
            </ol>
          </li>
          <li className="unstyled-list-item">
            <a href="#learn-steno">Learning steno</a>
            <ol className="unstyled-list mb0">
              <li><a href="#try-steno">How can you try out steno?</a></li>
              <li><a href="#requirements-for-steno">What do you need to learn steno?</a></li>
              <li><a href="#time-to-learn">How long does it take to learn steno?</a></li>
              <li><a href="#discovery">How many new briefs should you learn each day?</a></li>
              <li><a href="#revision">How many briefs should you revise each day?</a></li>
              <li><a href="#palantype">What’s a “palantype”?</a></li>
            </ol>
          </li>
          <li className="unstyled-list-item"><a href="#progress">Progress</a></li>
          <li className="unstyled-list-item"><a href="#contribute">Want to contribute?</a></li>
          <li className="unstyled-list-item"><a href="#news">Want news?</a></li>
          <li className="unstyled-list-item"><a href="#credits">Credits</a></li>
          <li className="unstyled-list-item"><a href="#support">Support</a></li>
          <li className="unstyled-list-item"><a href="#privacy">Privacy</a></li>
        </ol>
      </div>
    </div>
    <div className="mw-568">
      <p className="mt3">Typey&nbsp;Type is a typing app designed to …</p>
      ⋮
    </div>
  </div>
</div>

For src/index.scss:

.table-of-contents-column {
  @media (min-width: 952px) {
    order: 1;
  }
}

Animation

Optional extra! This issue could be closed without including any animation.

Using the scrollToAnchor() function that's currently inside componentDidMount(), animate the scroll to the on-page heading. This would likely need:

• Moving the scrollToAnchor() function somewhere accessible.
• Adding tabIndex="-1" to the linked headings (see Privacy heading for an example).
• onClick handlers for each table of contents link to call the scroll animation function.

Ignore leading spaces in search bar of lookup page

When a user fingerspells a word in the search bar of the lookup page, Plover might output a space at the beginning. For example, if the user types A* TKPW* O* to look up 'ago', Plover might output  AGO:

Currently, this leads to the word failing to match, and the user would have to suppress the initial space with TK-LS. This could be a minor nuisance for some. Would it be possible to ignore leading spaces in search strings to make the lookup process smoother?

Lesson stats: report strokes per minute|sec

in some lessons (e.g. fingerspelling, two-letter-words) this might be more "useful" and also yield more precise results when tracking progress over time

diagramID-0-WAS SVG too small

Please make the diagramID-0-WAS SVG image bigger or resizable. 140px is too small.

Import detailed data

Overview

Following on from #45, we might import long-term detailed progress data to generate lessons, incorporate Plover data, or other cool things.

Approaches

Import button for long-term detailed data on progress page?

Unable to determine word boundaries when practicing multiword briefs

When drilling multi-word entries, the word list does not reliably help determine what is coming next. For example, in the screenshot below it is hard to know if the next entries will be “is it” then “is the”, or “is” then “it is the”.

Further fading out the words after the next phase, showing an underline for the upcoming phrase, or having a separator character between entries might help with this issue.

Add sort option of word length?

From Peter:

it would be very nice if I can sort lessons by the length of the word. I'm learning jadegg's phrasing system through the custom lesson function and best alternative to creating variety is sorting randomly. But when I do that, things are all over the place and I can't start from the basics.

Integrate "Jeff Phrasing" system

https://github.com/jthlim/jeff-phrasing

Why did I file this as special request instead of just building a custom lesson?

1. It's a Python dict, so I'd need to generate all possibilities programmatically (or spend about 32 days writing 'em down manually)
2. Just putting all possibilities down in one or more lessons sorted alphabetically doesn't seem like a good strategy to learn this system

So, the question/feature request is basically about helping with these two issues.

Is there some viable strategy that could help teaching all 2837982 possibilities step-by-step, in a useful/ready-to-apply-to-regular-use-from-the-beginning-way? Or some group of related lessons that could teach certain aspects of the system? Maybe this could even be generalized and applied to other similar systems, like Jade GG (for which https://didoesdigital.com/typey-type/lessons/drills/jade-gg-phrasing-briefs/ already exists, but IMHO it suffers from issue 2))

Steno diagrams cut off without scroll bars

Background

Steno diagrams are cut off over a certain number:

The steno diagrams need to be cut them off somewhere in case you look up something like Lucy In the Sky with Diamonds with 11 strokes and you're on a small screen. They also need to be legible (can't scale them all down to fit side by side).

Problem

By cutting them off a little bit, people might realise they can scroll/access the rest. Without scroll bars, however, this is not obvious and it looks like a visual bug.

Approach

We could show a fade on the right edge only to encourage people to think there's more content available there.

• Needs to show the full diagrams at the start and end of the scroll area (i.e. when you scroll all the way to the right, it shows the full diagram, not hidden by a fade, not cut off at the edge).
• Needs to show the fade permanently on the right so that when you scroll it doesn't move with the diagrams.
• Needs to be responsive (small screens).
• Needs to work on for StrokesForWords.js used on Dictionaries index page, Lookup page, Flashcard pages.
• Needs to work on for lesson pages.

Here's as far as I got with an initial effort but it's not showing the full diagram on the right (covered by the fade when you can scroll no further):

.fill-fade-right-edge {
  background-image: linear-gradient(to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 90%,
    add-tint($brand-primary, 95%) 95%,
    add-tint($brand-primary, 95%) 100%);
  border-radius: 4px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $z-index-fill-fade-edges;

  &.fill-fade-right-edge--white {
    background-image: linear-gradient(to right,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 90%,
      rgba(255,255,255,0) 95%,
      rgba(255,255,255,0) 100%);
    border-radius: 4px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: $z-index-fill-fade-edges;
  }
}

      <div className="fill-fade-parent">
        <span className="fill-fade-right-edge pointer-none"></span>
        <div className="flex overflow-auto mr05">
        ⋮
        </div>
      </div>

Settings "Upcoming words" should be radio box setting

there's only two variants, which makes combo-box superfluous