Introducing: 'Type!'

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 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.