busypeoples

Notes on Building a Modern Typing Training App: Code Based Training

Introduction

For the last couple of weeks I have been iterating over a typing training app that should feel more modern and help with becoming a better typist. The initial idea was more of an experiment, while I had a couple of days of focus time, to see how such an app could work and feel like. Using it for a couple of months helped to carve out a more specific idea what this training app should and should not do.

You can read about the initial implementation here. The write-up explains the technical setup and reasoning behind the initial prototype. One idea is to make the training useful by using spaced repetition as a learning technique, you can read more about the approach here. The other aspect is to enable to train with actual code examples.

The code part seems trivial a

busypeoples

Notes on Modern UI Development: Taking Ideas from Spaced Repetition

Introduction

I have been working on a modern typing training application for the last couple of days. One of the main motivations was to build an app with a modern UI and minimal distractions, enabling to fully focus on the training aspect. You can read more about the original idea and thought process here as well as some notes on iterating over the details here.

After adding some minimal auto close functionalities for the code training section, you can read about it here, another important feature was to make the text training part more entertaining.

busypeoples

Notes on Modern UI Development: Iterating over the other 80%

Introduction

I have been working on a modern typing training application for the last couple of days. One of the main motivations was to build an app with a modern UI and minimal distractions, enabling to fully focus on the training aspect. You can read more about the original idea and thought process here.

One of the main features is being able to train your typing speed when working with code, which means the typing experience should come close to how you would type when working with an IDE. A feature that you would normally get inside such an environment is the auto closing of parentheses, brackets and braces. Which means you would for example type ( and the IDE would automatically add the closing ) for you.

The first iteration of Typing Cyclist was just a raw implementation which treated text and code examples the same. You would have to type

busypeoples

Notes on Modern UI Development

Introduction

It has been some time now since I started any UI focused project from scratch. Being interested in type training, I noticed that these training apps have become more modern, with clean UIs providing a really good user experience. Had the idea for some time now, to see how we could make type training more code focused, for example being able to load a specific programming language and practicing with that language.

After having a couple days of focus time and some ideas, it was a good opportunity to try and build a prototype. Obviously I needed to do some research to find out what the newest framework, build tools and libraries, that people were recommending for building a web project in 2022, were.

After following some interesting topics on Twitter and reading some blogposts, I decided to take a more basic approach and use a mixture of tried and tested libraries like Preact combined with [TypeScript](https://www.typescrip

busypeoples

type field =
  | O
  | X

type position = (field, field, field, field)

type box = (position, position, position, position)

type units = list<box>

busypeoples

useInView Preact Hook

Can be used as a starting point for implementing your own specific check to see if an element is in view.

const YourViewComponent = () => {
  const { isInView, inViewRef } = useInView();

 return (

busypeoples

import React from "react";

type NoData = {
  _type: "NO_DATA";
};

type Data<T> = {
  _type: "DATA";
  data: T;
};

busypeoples

import React, { useState } from "react";

type NotAsked = {
  _type: "NOT_ASKED";
};

type Loading = {
  _type: "LOADING";
};

busypeoples

/**
 * TS Helper Functions
 */
type ConvertTo<Type, From, To> = {
  [Key in keyof Type]: Required<Type>[Key] extends From ? To : Type[Key];
};

type FilterByType<T, U> = {
  [Key in keyof Required<T>]: Required<T>[Key] extends U ? Key : never;
}[keyof T];

busypeoples

type ValidationResult<T, U> = Partial<{ [Key in keyof T]: U }>;
type Validation<T, U> = (fields: T) => ValidationResult<T, U>;

const validate = <T, U = boolean | string>(
  validations: Validation<T, U>[],
  fields: T
): ValidationResult<T, U> =>
  validations
    .map(validation => validation(fields))
    .reduce((acc, a) => Object.assign(acc, a), {});