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

Phantom types in ReasonML

Introduction

"A phantom type is a parametrised type whose parameters do not all appear on the right-hand side of its definition..." Haskell Wiki, PhantomType

The following write-up is intended as an introduction into using phantom types in ReasonML.

Taking a look at the above definition from the Haskell wiki, it states that phantom types are parametrised types where not all parameters appear on the right-hand side. Let's try to see if we can implement a similar example as in said wiki.

busypeoples

import React from "react";

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

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

busypeoples

//
// MIT License
//
// Copyright (c) 2018 Ali Sharif
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is

busypeoples

//
// MIT License
//
// Copyright (c) 2018 Ali Sharif
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is

busypeoples

let str = ReasonReact.string;

let el = ReasonReact.element;

let arr = ReasonReact.array;

module Dashboard = {
  let component = ReasonReact.statelessComponent("Dashboard");
  let make = _children => {
    ...component,

busypeoples

import React from "react";
import { render } from "react-dom";
import PropTypes from "prop-types";

// Using PropTypes.InferProps

type InferPropTypes<
  PropTypes,
  DefaultProps = {},
  Props = PropTypes.InferProps<PropTypes>

busypeoples

let str = ReasonReact.string;

let url = "http://localhost:3000/users";

type user = {
  id: int,
  name: string,
};

type state =

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

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.