Home Blog

Introducing 'Type!'

Yet another typing speed test


Hi. I made a thing. It's heavily inspired by (and unaffiliated with) another typing speed test website that was unveiled today: typings.gg.

Typings looked cool, but I wanted a Korean test that worked, since I'd had problems with 10fastfingers. I had a few hours of free time, so I made the site.

It took about an hour, and was my first real project using Svelte 3. It's got English, Korean, and Dutch typing tests.

Development

Getting Started

Starting the project was pretty easy with Svelte 3, I opened a terminal, navigated to my projects directory, and ran:

$ npx degit sveltejs/template type.o-w-o.icu
$ cd type.o-w-o.icu/
$ yarn

Getting Data

Grabbing the word sets was also fairly simple:

  • I grabbed the English word list from typings itself, and am serving the exact same JSON file.
  • I grabbed the Korean word list from an Excel document published by the Korean government (Search for '한국어 학습용 어휘 목록')
  • My friend wanted me to implement a Dutch test, so I grabbed the Dutch word list from a Google Docs spreadsheet that I found by Googling 'most common Dutch words'

I transformed the Korean and Dutch spreadsheets to CSV using LibreOffice, and used some quick Python to transform the CSV document to a JSON list of words.

Writing the Site

I heavily borrowed from typings' CSS in order to produce the site's layout, telling myself that it would be 'temporary' – I guess I'll rework the stylesheet later.

Writing the logic for the site itself was simple due to how simple Svelte makes event handling. It was done in about twenty minutes. I did find a discrepency with how Chrome and Firefox interacted with my Korean IME, though, so I had to rework how input was handled.

Deploying

Deploying was simple. I created a private GitHub repo, put a CNAME in there, ran yarn build to generate the static site, and pushed. This was about two minutes worth of work for me, followed by about fifteen minutes of waiting for GitHub Pages to grab an SSL certificate for the subdomain I put the site under. It's really nice to be behind GitHub's CDN, as well, since I could share the site with my Korean friends and they had minimal ping times when the site was served to them.